calendarMenu: Fix several visual issues with calendar and notifications
- drop card style from calendar - remove focus ability from non-interactive calendar elements - flesh out the styles for the calendar grid - fix margin and padding issue with login screen calendar - update no-notifications icon - add padding to media player buttons - catch a couple other minor style papercuts Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2161>
This commit is contained in:
Sam Hewitt
Marge Bot
parent
57b819ae2d
commit
4b56acb775
@ -1,4 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg height="24px" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m 5 5 v 1 c 0 0.277344 0.113281 0.527344 0.292969 0.707031 l 5.292969 5.292969 l -5.292969 5.292969 c -0.179688 0.179687 -0.292969 0.707031 -0.292969 0.707031 v 1 h 1 c 0.265625 0 0.519531 -0.105469 0.707031 -0.292969 l 5.292969 -5.292969 l 5.292969 5.292969 c 0.1875 0.1875 0.441406 0.292969 0.707031 0.292969 h 1 v -1 c 0.003906 -0.328125 -0.113281 -0.527344 -0.292969 -0.707031 l -5.292969 -5.292969 l 5.292969 -5.292969 c 0.179688 -0.179687 0.296875 -0.378906 0.292969 -0.707031 v -1 h -1 c -0.265625 0 -0.519531 0.105469 -0.707031 0.292969 l -5.292969 5.292969 l -5.292969 -5.292969 c -0.1875 -0.1875 -0.441406 -0.292969 -0.707031 -0.292969 z m 0 0" fill="#241f31"/>
|
||||
<path d="m 7 6 c -0.265625 0 -0.519531 0.105469 -0.707031 0.292969 c -0.390625 0.390625 -0.390625 1.023437 0 1.414062 l 4.292969 4.292969 l -4.292969 4.292969 c -0.390625 0.390625 -0.390625 1.023437 0 1.414062 s 1.023437 0.390625 1.414062 0 l 4.292969 -4.292969 l 4.292969 4.292969 c 0.390625 0.390625 1.023437 0.390625 1.414062 0 s 0.390625 -1.023437 0 -1.414062 l -4.292969 -4.292969 l 4.292969 -4.292969 c 0.390625 -0.390625 0.390625 -1.023437 0 -1.414062 c -0.1875 -0.1875 -0.441406 -0.292969 -0.707031 -0.292969 s -0.519531 0.105469 -0.707031 0.292969 l -4.292969 4.292969 l -4.292969 -4.292969 c -0.1875 -0.1875 -0.441406 -0.292969 -0.707031 -0.292969 z m 0 0" fill="#241f31"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 819 B After Width: | Height: | Size: 822 B |
@ -1,4 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg height="64px" viewBox="0 0 64 64" width="64px" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m 32 0 c -3.3125 0 -6 2.6875 -6 6 c 0 0.304688 0.023438 0.601562 0.066406 0.894531 c -8.148437 2.527344 -14.066406 10.125 -14.066406 19.105469 v 18 h -2 c -2.203125 0 -4 1.796875 -4 4 s 1.796875 4 4 4 h 44 c 2.203125 0 4 -1.796875 4 -4 s -1.796875 -4 -4 -4 h -2 v -18 c 0 -8.980469 -5.917969 -16.578125 -14.066406 -19.105469 c 0.042968 -0.292969 0.066406 -0.589843 0.066406 -0.894531 c 0 -3.3125 -2.6875 -6 -6 -6 z m -8 56 c 0 2.859375 1.53125 5.5 4 6.921875 c 2.46875 1.4375 5.53125 1.4375 8 0 c 2.46875 -1.421875 4 -4.0625 4 -6.921875 z m 0 0" fill="#241f31" fill-opacity="0.35"/>
|
||||
<path d="m 32 0 c -3.3125 0 -6 2.6875 -6 6 c 0 0.304688 0.023438 0.601562 0.066406 0.894531 c -8.148437 2.527344 -14.066406 10.125 -14.066406 19.105469 v 18 h -2 c -2.203125 0 -4 1.796875 -4 4 s 1.796875 4 4 4 h 44 c 2.203125 0 4 -1.796875 4 -4 s -1.796875 -4 -4 -4 h -2 v -18 c 0 -8.980469 -5.917969 -16.578125 -14.066406 -19.105469 c 0.042968 -0.292969 0.066406 -0.589843 0.066406 -0.894531 c 0 -3.3125 -2.6875 -6 -6 -6 z m -8 56 c 0 2.859375 1.53125 5.5 4 6.921875 c 2.46875 1.4375 5.53125 1.4375 8 0 c 2.46875 -1.421875 4 -4.0625 4 -6.921875 z m 0 0" fill="#241f31"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 730 B After Width: | Height: | Size: 710 B |
@ -22,17 +22,17 @@
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="1"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="1.7898453"
|
||||
inkscape:cx="-9.7773811"
|
||||
inkscape:cy="212.30885"
|
||||
inkscape:zoom="1"
|
||||
inkscape:cx="51.5"
|
||||
inkscape:cy="258"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
inkscape:current-layer="layer2"
|
||||
showgrid="false"
|
||||
units="px"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1011"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-y="32"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:snap-bbox="true"
|
||||
inkscape:bbox-paths="true"
|
||||
@ -82,7 +82,7 @@
|
||||
<path
|
||||
id="path81"
|
||||
d="m 320,473.53331 c -3.3125,0 -6,2.6875 -6,6 0,0.30385 0.0228,0.60279 0.0664,0.89453 C 305.91768,482.95558 300,490.55273 300,499.53331 v 18 h -2 c -2.20312,0 -4,1.79688 -4,4 0,2.20312 1.79688,4 4,4 h 44 c 2.20312,0 4,-1.79688 4,-4 0,-2.20312 -1.79688,-4 -4,-4 h -2 v -18 c 0,-8.98058 -5.91768,-16.57773 -14.06641,-19.10547 0.0436,-0.29174 0.0664,-0.59068 0.0664,-0.89453 0,-3.3125 -2.6875,-6 -6,-6 z m -8,56 c 0,2.85938 1.53125,5.5 4,6.92188 2.46875,1.43749 5.53125,1.43749 8,0 2.46875,-1.42188 4,-4.0625 4,-6.92188 z"
|
||||
style="fill:#241f31;fill-opacity:0.35" />
|
||||
style="fill:#241f31;fill-opacity:1" />
|
||||
<rect
|
||||
transform="scale(-1,1)"
|
||||
y="473.53333"
|
||||
@ -502,10 +502,10 @@
|
||||
id="rect14223"
|
||||
transform="matrix(0,-1,-1,0,0,0)"
|
||||
style="fill:none" />
|
||||
</g>
|
||||
<path
|
||||
id="path14225"
|
||||
d="m 141,469 v 1 c 0,0.277 0.11197,0.52603 0.29297,0.70703 l 5.29297,5.29297 -5.29297,5.29297 C 141.11197,481.47397 141,482 141,482 v 1 h 1 c 0.26528,3.8e-4 0.51979,-0.10505 0.70703,-0.29297 L 148,477.41406 l 5.29297,5.29297 c 0.18724,0.18792 0.44175,0.29335 0.70703,0.29297 h 1 v -1 c 0.003,-0.327 -0.11297,-0.52703 -0.29297,-0.70703 L 149.41406,476 l 5.29297,-5.29297 C 154.88703,470.52703 155.003,470.327 155,470 v -1 h -1 c -0.26529,-4e-4 -0.51978,0.10505 -0.70703,0.29297 L 148,474.58594 142.70703,469.29297 C 142.51978,469.10505 142.26529,468.9996 142,469 Z"
|
||||
id="path986"
|
||||
d="M 71 262 A 1 1 0 0 0 70.292969 262.29297 A 1 1 0 0 0 70.292969 263.70703 L 74.585938 268 L 70.292969 272.29297 A 1 1 0 0 0 70.292969 273.70703 A 1 1 0 0 0 71.707031 273.70703 L 76 269.41406 L 80.292969 273.70703 A 1 1 0 0 0 81.707031 273.70703 A 1 1 0 0 0 81.707031 272.29297 L 77.414062 268 L 81.707031 263.70703 A 1 1 0 0 0 81.707031 262.29297 A 1 1 0 0 0 81 262 A 1 1 0 0 0 80.292969 262.29297 L 76 266.58594 L 71.707031 262.29297 A 1 1 0 0 0 71 262 z "
|
||||
style="fill:#241f31;fill-opacity:1" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
@ -46,7 +46,7 @@ $hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color,
|
||||
$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 7%));
|
||||
|
||||
// derived active colors
|
||||
$active_bg_color: darken($bubble_buttons_color,if($variant=='light', 9%, 2%));
|
||||
$active_bg_color: darken($bg_color,if($variant=='light', 9%, 5%));
|
||||
$active_fg_color: darken($fg_color,if($variant=='light', 5%, 3%));
|
||||
|
||||
// fonts
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
/* Date/Time Menu */
|
||||
|
||||
// overall menu
|
||||
#calendarArea {
|
||||
padding:0;
|
||||
}
|
||||
#calendarArea {}
|
||||
|
||||
// Calendar menu side column
|
||||
.datemenu-calendar-column {
|
||||
@ -11,24 +9,11 @@
|
||||
border: none;
|
||||
border-style: solid;
|
||||
border-color: $borders_color;
|
||||
padding: 0;
|
||||
|
||||
&:ltr {margin-right: 0; margin-left: $base_margin; padding-left: $base_padding; border-left-width: 1px; }
|
||||
&:rtl {margin-left: 0; margin-right: $base_margin; padding-right: $base_padding; border-right-width: 1px; }
|
||||
&:ltr {padding-left: $base_padding;}
|
||||
&:rtl {padding-right: $base_padding;}
|
||||
|
||||
.datemenu-displays-section {
|
||||
}
|
||||
|
||||
.datemenu-displays-box {
|
||||
spacing: $base_spacing;
|
||||
}
|
||||
}
|
||||
|
||||
.events-section-title {
|
||||
@include card($flat: true);
|
||||
color: $insensitive_fg_color;
|
||||
font-weight: bold;
|
||||
padding: .4em;
|
||||
.datemenu-displays-box {spacing: $base_spacing;}
|
||||
}
|
||||
|
||||
/* today button (the date) */
|
||||
@ -52,15 +37,10 @@
|
||||
|
||||
/* Calendar */
|
||||
.calendar {
|
||||
@include card;
|
||||
padding: $base_padding;
|
||||
@include card(flat);
|
||||
|
||||
// month
|
||||
.calendar-month-label {
|
||||
color: lighten($fg_color,5%);
|
||||
font-weight: bold;
|
||||
padding: 8px 0;
|
||||
}
|
||||
// month header
|
||||
.calendar-month-header {
|
||||
|
||||
// prev/next month icons
|
||||
.calendar-change-month-back StIcon,
|
||||
@ -68,65 +48,81 @@
|
||||
icon-size: $base_icon_size;
|
||||
}
|
||||
|
||||
// month label
|
||||
.calendar-month-label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pager-button {
|
||||
background-color: transparent;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
margin: 2px;
|
||||
border-radius: $base_border_radius - 2px;
|
||||
&:hover, &:focus {background-color: $hover_bg_color;}
|
||||
&:active {background-color: $active_bg_color;}
|
||||
}
|
||||
}
|
||||
|
||||
$calendar_day_size: 32px;
|
||||
|
||||
.calendar-day-base {
|
||||
@include fontsize($base_font_size - 3);
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin: 2px;
|
||||
height: $calendar_day_size;
|
||||
width: $calendar_day_size;
|
||||
border-radius: $calendar_day_size * 0.5 + 2px;
|
||||
font-feature-settings: "tnum";
|
||||
|
||||
&:hover, &:focus { background-color: $hover_bg_color; }
|
||||
&:hover {background-color: $hover_bg_color;}
|
||||
&:focus {
|
||||
font-weight: 1000;
|
||||
background-color: mix($bg_color, $selected_bg_color, 80%);
|
||||
color: $selected_fg_color;
|
||||
box-shadow: 0 0 0 2px transparentize($selected_bg_color, 0.4);
|
||||
}
|
||||
|
||||
&:active,&:selected {
|
||||
color: lighten($fg_color,10%);
|
||||
background-color: darken($bg_color,5%);
|
||||
font-weight: 1000;
|
||||
color: $active_fg_color;
|
||||
background-color: $active_bg_color;
|
||||
&:focus {
|
||||
background-color: mix($active_bg_color, $selected_bg_color, 80%);
|
||||
}
|
||||
}
|
||||
|
||||
// day of week heading
|
||||
&.calendar-day-heading {
|
||||
color: $insensitive_fg_color;
|
||||
font-weight: 1000;
|
||||
padding-top: $base_padding;
|
||||
height: 16px !important; // force heading to be smaller height
|
||||
@include fontsize($base_font_size - 2);
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-day { //border collapse hack - see calendar.js
|
||||
border-width: 0;
|
||||
.calendar-day {
|
||||
border-width: 0; // border collapse hack - see calendar.js
|
||||
}
|
||||
|
||||
.calendar-day-top {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.calendar-day-left {
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
.calendar-work-day {
|
||||
}
|
||||
.calendar-work-day {}
|
||||
|
||||
.calendar-nonwork-day {
|
||||
color: $insensitive_fg_color;
|
||||
}
|
||||
|
||||
.calendar-other-month-day {
|
||||
color: transparentize($fg_color, 0.5);
|
||||
&.calendar-nonwork-day {
|
||||
color: transparentize($insensitive_fg_color, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Today
|
||||
.calendar-today {
|
||||
background-color: $selected_bg_color;
|
||||
font-weight: 1000;
|
||||
color: $selected_fg_color !important;
|
||||
|
||||
&:hover,&:focus {
|
||||
@ -154,19 +150,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-other-month-day {
|
||||
color: transparentize($fg_color ,0.5) !important;
|
||||
}
|
||||
|
||||
.calendar-week-number {
|
||||
@include fontsize($base_font_size - 4);
|
||||
font-weight: bold;
|
||||
height: 1.8em;
|
||||
width: 2.3em;
|
||||
border-radius: 2px;
|
||||
font-feature-settings: "tnum";
|
||||
margin: 6px;
|
||||
padding: $base_padding;
|
||||
border-radius: 3px;
|
||||
background-color: darken($bg_color, 2%);
|
||||
color: lighten($fg_color, 5%);
|
||||
color: $insensitive_fg_color
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -68,7 +68,7 @@ $dash_border_radius: $modal_radius + 8px;
|
||||
.dash-separator {
|
||||
width: 1px;
|
||||
margin: 0 $base_margin*2;
|
||||
background-color: transparentize($borders_color,0.2);
|
||||
background-color: $borders_color;
|
||||
}
|
||||
|
||||
// OSD Tooltip
|
||||
|
||||
@ -4,12 +4,19 @@
|
||||
// main list
|
||||
.message-list {
|
||||
width: 32em;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-style: solid;
|
||||
border-color: $borders_color;
|
||||
padding: $base_padding;
|
||||
|
||||
// padding and margins to account for scrollbar
|
||||
&:ltr {margin-left: 0; margin-right: $base_margin; padding-right: $base_padding; border-right-width: 1px; }
|
||||
&:rtl {margin-right: 0; margin-left: $base_margin; padding-left: $base_padding; border-left-width: 1px; }
|
||||
|
||||
.message-list-placeholder {
|
||||
font-weight:1000;
|
||||
font-size: 18pt;
|
||||
color: $insensitive_fg_color;
|
||||
color: transparentize($fg_color, .8);
|
||||
spacing: 12px;
|
||||
|
||||
// icon size and color
|
||||
@ -21,15 +28,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.message-list-sections {
|
||||
spacing: $base_spacing;
|
||||
margin: 0;
|
||||
padding-bottom: $base_padding;
|
||||
|
||||
// to account for scrollbar
|
||||
&:ltr {margin-right: $base_margin * 4; }
|
||||
&:rtl {margin-left: $base_margin * 4;}
|
||||
&:ltr {margin-right: $base_margin * 3; }
|
||||
&:rtl {margin-left: $base_margin * 3;}
|
||||
}
|
||||
|
||||
.message-list-section,
|
||||
@ -122,18 +128,12 @@
|
||||
border-radius: 99px;
|
||||
padding: $base_padding - 1px;
|
||||
margin: 1px;
|
||||
&:hover {
|
||||
background-color: transparentize($fg_color, 0.8);
|
||||
}
|
||||
&:active {
|
||||
background-color: transparentize($fg_color, 0.9);
|
||||
}
|
||||
&:hover {background-color: transparentize($fg_color, 0.8);}
|
||||
&:active {background-color: transparentize($fg_color, 0.9);}
|
||||
}
|
||||
|
||||
// body
|
||||
.message-body {
|
||||
color: darken($fg_color, 10%);
|
||||
}
|
||||
.message-body {color: darken($fg_color, 10%);}
|
||||
}
|
||||
|
||||
// URLs in messages
|
||||
@ -143,7 +143,7 @@
|
||||
|
||||
/* Media Controls */
|
||||
.message-media-control {
|
||||
padding: 0 $base_padding*2;
|
||||
padding: 0 $base_padding*3;
|
||||
margin: $base_padding*2 0;
|
||||
border-radius: $base_border_radius;
|
||||
color: $fg_color;
|
||||
@ -161,7 +161,7 @@
|
||||
|
||||
&:insensitive { color: lighten($insensitive_fg_color, 5%); }
|
||||
|
||||
// fix border-radius for last button
|
||||
// fix margin for last button
|
||||
&:last-child:ltr { margin-right: $base_margin*3; }
|
||||
&:last-child:rtl { margin-left: $base_margin*3; }
|
||||
}
|
||||
|
||||
@ -60,7 +60,7 @@
|
||||
&:checked {
|
||||
background-color: $hover_bg_color;
|
||||
margin-bottom: 0;
|
||||
box-shadow: inset 0 -1px 0 0 darken($hover_bg_color, 5%);
|
||||
box-shadow: inset 0 -1px 0 0 darken($hover_bg_color, 3%);
|
||||
border-radius: $base_border_radius $base_border_radius 0 0;
|
||||
|
||||
&:hover {
|
||||
|
||||
@ -9,8 +9,8 @@ StScrollBar {
|
||||
padding: 0;
|
||||
|
||||
StScrollView & {
|
||||
min-width: 14px;
|
||||
min-height: 14px;
|
||||
min-width: 8px;
|
||||
min-height: 8px;
|
||||
}
|
||||
|
||||
StBin#trough {
|
||||
@ -20,10 +20,10 @@ StScrollBar {
|
||||
|
||||
StButton#vhandle, StButton#hhandle {
|
||||
border-radius: 8px;
|
||||
background-color: mix($fg_color, $bg_color, 60%);
|
||||
//border: 3px solid transparent; //would be nice to margin or at least to transparent
|
||||
margin: 3px;
|
||||
&:hover { background-color: mix($fg_color, $bg_color, 80%); }
|
||||
&:active { background-color: $selected_bg_color; }
|
||||
background-color: mix($fg_color, $bg_color, 30%);
|
||||
border: 3px solid transparent; //would be nice to margin or at least to transparent
|
||||
transition: 500ms all ease;
|
||||
&:hover {background-color: mix($fg_color, $bg_color, 50%);}
|
||||
&:active {background-color: mix($fg_color, $bg_color, 40%);}
|
||||
}
|
||||
}
|
||||
|
||||
@ -464,7 +464,7 @@ var Calendar = GObject.registerClass({
|
||||
this.destroy_all_children();
|
||||
|
||||
// Top line of the calendar '<| September 2009 |>'
|
||||
this._topBox = new St.BoxLayout();
|
||||
this._topBox = new St.BoxLayout({ style_class: 'calendar-month-header' });
|
||||
layout.attach(this._topBox, 0, 0, offsetCols + 7, 1);
|
||||
|
||||
this._backButton = new St.Button({
|
||||
@ -481,6 +481,7 @@ var Calendar = GObject.registerClass({
|
||||
can_focus: true,
|
||||
x_align: Clutter.ActorAlign.CENTER,
|
||||
x_expand: true,
|
||||
y_align: Clutter.ActorAlign.CENTER,
|
||||
});
|
||||
this._topBox.add_child(this._monthLabel);
|
||||
|
||||
@ -694,7 +695,7 @@ var Calendar = GObject.registerClass({
|
||||
if (this._useWeekdate && iter.getDay() == 4) {
|
||||
const label = new St.Label({
|
||||
text: iter.toLocaleFormat('%V'),
|
||||
style_class: 'calendar-day-base calendar-week-number',
|
||||
style_class: 'calendar-week-number',
|
||||
can_focus: true,
|
||||
});
|
||||
let weekFormat = Shell.util_translate_time_string(N_("Week %V"));
|
||||
|
||||
Loading…
Reference in New Issue
Block a user