[gnome-shell/wip/snwh/sass-cleanup] theme: calendar fixes
- From: Sam Hewitt <snwh src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-shell/wip/snwh/sass-cleanup] theme: calendar fixes
- Date: Thu, 12 Sep 2019 17:16:17 +0000 (UTC)
commit 25d437d15a9a153cabe9c8dded4bc9ecbe5aaf03
Author: Sam Hewitt <sam snwh org>
Date: Thu Sep 12 13:16:10 2019 -0400
theme: calendar fixes
data/theme/gnome-shell-sass/_common.scss | 23 ++
data/theme/gnome-shell-sass/widgets/_calendar.scss | 354 +++++++++++----------
.../gnome-shell-sass/widgets/_message-list.scss | 17 +-
data/theme/gnome-shell-sass/widgets/_panel.scss | 24 +-
data/theme/gnome-shell-sass/widgets/_popovers.scss | 96 +++---
5 files changed, 267 insertions(+), 247 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index 394c90b7b4..4409195048 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -196,4 +196,27 @@ stage {
&:hover { @include button(hover, $c:$hover_bg_color, $tc:$fg_color); }
&:insensitive { @include button(insensitive); }
&:active { @include button(active, $c:$active_bg_color, $tc:$fg_color); }
+}
+
+
+// notification styling
+%notification_bubble {
+ border: 1px solid $bubble_borders_color;
+ border-radius:$base_border_radius + 2px;
+ background-color: lighten($bg_color, 5%);
+ box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
+ padding: 0;
+ margin: $base_margin;
+
+ &:hover,
+ &:focus {
+ background-color: $hover_bg_color;
+ box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
+ margin-top: $base_margin - 1px;
+ margin-bottom: $base_margin + 1px;
+ }
+ &:active {
+ background-color: transparentize($fg_color, 0.84);
+ margin: $base_margin;
+ }
}
\ No newline at end of file
diff --git a/data/theme/gnome-shell-sass/widgets/_calendar.scss
b/data/theme/gnome-shell-sass/widgets/_calendar.scss
index 8dac62fbd5..00a54b9803 100644
--- a/data/theme/gnome-shell-sass/widgets/_calendar.scss
+++ b/data/theme/gnome-shell-sass/widgets/_calendar.scss
@@ -1,49 +1,12 @@
/* Date/Time Menu */
+// overall menu
#calendarArea {
- padding:$base_padding;
+ padding:0;
margin:0;
}
-// common style
-%calendar_box {
- border: 1px solid $bubble_borders_color;
- border-radius:$base_border_radius + 2px;
- background-color: lighten($bg_color, 5%);
- box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
- // padding: $base_padding;
- padding: 0;
- margin: $base_margin;
-
- &:hover,
- &:focus {
- background-color: $hover_bg_color;
- box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
- margin-top: $base_margin - 1px;
- margin-bottom: $base_margin + 1px;
- }
- &:active { background-color: transparentize($fg_color, 0.84) }
-}
-
-
-// today button
-.datemenu-today-button {
- margin:0;
-
- // weekday label
- .day-label {
- font-size: $base_font_size + 1pt;
- font-weight: bold;
- }
-
- // date label
- .date-label {
- font-size: $base_font_size * 1.5;
- font-weight: 1000;
- }
-}
-
-// calendar column
+// Calendar menu side column
.datemenu-calendar-column {
spacing: 0;
border: 0 solid $bubble_borders_color;
@@ -53,8 +16,47 @@
&:ltr { border-left-width: 1px; }
&:rtl { border-right-width: 1px; }
- &:hover, &:focus { background-color: $hover_bg_color }
- &:active { background-color: $active_bg_color }
+
+ // today button (the date)
+ .datemenu-today-button {
+ padding: $base_padding * 1.5;
+ margin: $base_margin;
+ border: 1px solid transparent;
+
+ &:hover,
+ &:focus {
+ border-color: $bubble_borders_color;
+ border-radius:$base_border_radius + 2px;
+ background-color: $hover_bg_color;
+ box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
+ margin-top: $base_margin - 1px;
+ margin-bottom: $base_margin + 1px;
+ }
+
+ &:active { background-color: transparentize($fg_color, 0.84) }
+
+ // weekday label
+ .day-label {
+ font-size: $base_font_size + 1pt;
+ font-weight: bold;
+ }
+
+ // date label
+ .date-label {
+ font-size: $base_font_size * 1.5;
+ font-weight: 1000;
+ }
+ }
+
+ // calendar
+ .calendar {
+ @extend %notification_bubble;
+ margin:$base_margin !important;
+ margin-bottom: $base_padding + $base_margin !important;
+ padding:$base_padding !important;
+
+ // more below for sub-elements
+ }
.datemenu-displays-section {
margin:0;
@@ -63,21 +65,25 @@
.datemenu-displays-box {
spacing: $base_spacing;
margin:0;
+
+ // world clocks and weather
+ .world-clocks-button,
+ .weather-button {
+ @extend %notification_bubble;
+ padding:$base_padding !important;
+ }
}
}
-.datemenu-today-button,
.events-section-title {
+ color: desaturate(darken($fg_color,40%), 10%);
+ font-weight: bold;
border-radius: 4px;
padding: .4em;
}
/* Calendar */
.calendar {
- @extend %calendar_box;
- margin:$base_margin;
- margin-bottom: $base_padding + $base_margin ;
- padding:$base_padding;
// month
.calendar-month-label {
@@ -92,165 +98,167 @@
.calendar-change-month-forward StIcon {
icon-size: $base_icon_size;
}
-}
-
-.events-section-title {
-}
+ .pager-button {
+ background-color: transparent;
+ height: 32px;
+ width: 32px;
+ border-radius: $base_border_radius;
+ &:hover, &:focus { background-color: $hover_bg_color; }
+ &:active { background-color: transparentize($fg_color, 0.84); }
+ }
-.pager-button {
- background-color: transparent;
- height: 32px;
- width: 32px;
- border-radius: $base_border_radius;
- &:hover, &:focus { background-color: $hover_bg_color; }
- &:active { background-color: transparentize($fg_color, 0.84); }
-}
+ $calendar_day_size: 32px;
+
+ .calendar-day-base {
+ font-size: 80%;
+ text-align: center;
+ width: $calendar_day_size;
+ height: $calendar_day_size;
+ padding: 0;
+ margin: 2px;
+ border-radius: $calendar_day_size * 0.5 + 2px;
+ border: 1px solid transparent; //avoid jumparound due to today
+ font-feature-settings: "tnum";
+ &:hover, &:focus { background-color: $hover_bg_color; }
+ &:active,&:selected {
+ color: lighten($fg_color,10%);
+ background-color: darken($bg_color,5%);
+ }
-$calendar_day_size: 32px;
-
-.calendar-day-base {
- font-size: 80%;
- text-align: center;
- width: $calendar_day_size;
- height: $calendar_day_size;
- padding: 0;
- margin: 2px;
- border-radius: $calendar_day_size * 0.5 + 2px;
- border: 1px solid transparent; //avoid jumparound due to today
- font-feature-settings: "tnum";
- &:hover, &:focus { background-color: $hover_bg_color; }
- &:active,&:selected {
- color: lighten($fg_color,10%);
- background-color: darken($bg_color,5%);
+ // day of week heading
+ &.calendar-day-heading {
+ color: lighten($fg_color,10%);
+ margin-top: 1em;
+ font-size: 70%;
+ }
}
-
- // day of week heading
- &.calendar-day-heading {
- color: lighten($fg_color,10%);
- margin-top: 1em;
- font-size: 70%;
+ .calendar-day { //border collapse hack - see calendar.js
+ border-width: 0;
}
-}
-.calendar-day { //border collapse hack - see calendar.js
- border-width: 0;
-}
-
-.calendar-day-top {
- border-top-width: 1px;
-}
-.calendar-day-left { border-left-width: 1px; }
-.calendar-work-day {}
-.calendar-nonwork-day {
- color: $insensitive_fg_color;
-}
-
-// Today
-.calendar-today {
- font-weight: bold;
- border: 1px solid transparent;
- background-color: $selected_bg_color;
- color: $selected_fg_color;
+ .calendar-day-top {
+ border-top-width: 1px;
+ }
- &:hover,&:focus {
- background-color:lighten($selected_bg_color, 3%);
- color: $selected_fg_color;
+ .calendar-day-left { border-left-width: 1px; }
+ .calendar-work-day {}
+ .calendar-nonwork-day {
+ color: $insensitive_fg_color;
}
- &:active,&:selected {
+ // Today
+ .calendar-today {
+ font-weight: bold;
+ border: 1px solid transparent;
background-color: $selected_bg_color;
color: $selected_fg_color;
+
&:hover,&:focus {
background-color:lighten($selected_bg_color, 3%);
color: $selected_fg_color;
}
- }
-}
-.calendar-day-with-events {
- color: lighten($fg_color,10%);
- font-weight: bold;
- background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg");
-}
-
-.calendar-other-month-day {
- color: transparentize($fg_color ,0.5);
- opacity: 0.5;
-}
+ &:active,&:selected {
+ background-color: $selected_bg_color;
+ color: $selected_fg_color;
+ &:hover,&:focus {
+ background-color:lighten($selected_bg_color, 3%);
+ color: $selected_fg_color;
+ }
+ }
-.calendar-week-number {
- font-size: 70%;
- font-weight: bold;
- height: 1.8em;
- width: 2.3em;
- border-radius: 2px;
- padding: 0.5em 0 0;
- margin: 6px;
- background-color: darken($bg_color, 2%);
- color: lighten($fg_color, 5%);
-}
+ }
+ .calendar-day-with-events {
+ color: lighten($fg_color,10%);
+ font-weight: bold;
+ background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg");
+ }
+ .calendar-other-month-day {
+ color: transparentize($fg_color ,0.5);
+ opacity: 0.5;
+ }
-.world-clocks-button,
-.weather-button {
- @extend %calendar_box;
- padding:$base_padding;
+ .calendar-week-number {
+ font-size: 70%;
+ font-weight: bold;
+ height: 1.8em;
+ width: 2.3em;
+ border-radius: 2px;
+ padding: 0.5em 0 0;
+ margin: 6px;
+ background-color: darken($bg_color, 2%);
+ color: lighten($fg_color, 5%);
+ }
}
+
/* Weather */
.weather-box {
- spacing: 0.4em;
+ spacing: $base_spacing;
padding:$base_padding;
-}
-.weather-header.location {
- font-weight: normal;
- font-size: 0.9em;
-}
+ .weather-header {
+ color: desaturate(darken($fg_color,40%), 10%);
+ font-weight: bold;
+ &.location {
+ font-weight: normal;
+ font-size: $base_font_size - 1pt;
+ }
+ }
+ .weather-grid {
+ margin-top: $base_margin;
+ spacing-rows: $base_spacing;
+ spacing-columns: $base_spacing * 2;
+ }
-/* World clocks */
-.world-clocks-header,
-.weather-header,
-.events-section-title {
- color: darken($fg_color,40%);
- font-weight: bold;
+ .weather-forecast-icon {
+ icon-size: $base_icon_size * 2;
+ }
+
+ .weather-forecast-time {
+ color: darken($fg_color,30%);
+ font-feature-settings: "tnum";
+ font-size: $base_font_size - 2pt;
+ font-weight: normal;
+ }
}
+/* World clocks */
.world-clocks-grid {
padding:$base_padding;
-}
+ spacing-rows: $base_spacing;
+ spacing-columns: $base_spacing * 2;
-.world-clocks-grid,
-.weather-grid {
- spacing-rows: 0.4em;
- spacing-columns: 0.8em;
-}
-
-.world-clocks-city {
- font-weight: bold;
- font-size: 0.9em;
-}
-
-.world-clocks-time {
- color: darken($fg_color,20%);
- font-feature-settings: "tnum";
- font-size: 1.2em;
-}
+ // title
+ .world-clocks-header {
+ color: desaturate(darken($fg_color,40%), 10%);
+ font-weight: bold;
+ }
-.world-clocks-timezone {
- color: $fg_color;
- font-feature-settings: "tnum";
- font-size: 0.9em;
-}
+ // city label
+ .world-clocks-city {
+ color: $fg_color;
+ font-size: $base_font_size;
+ font-weight: normal;
+ }
-.weather-forecast-icon {
- icon-size: $base_icon_size * 2;
-}
+ // timezone time
+ .world-clocks-time {
+ font-weight: bold;
+ color: $fg_color;
+ font-feature-settings: "lnum";
+ font-size: $base_font_size;
+ text-align:right;
+ }
-.weather-forecast-time {
- color: darken($fg_color,40%);
- font-size: 0.8em;
-}
+ // timezone offset label
+ .world-clocks-timezone {
+ color: darken($fg_color,20%);
+ font-feature-settings: "tnum";
+ font-size: $base_font_size - 1pt;
+ }
+}
\ No newline at end of file
diff --git a/data/theme/gnome-shell-sass/widgets/_message-list.scss
b/data/theme/gnome-shell-sass/widgets/_message-list.scss
index 13b2da795b..b546fc589a 100644
--- a/data/theme/gnome-shell-sass/widgets/_message-list.scss
+++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss
@@ -32,22 +32,7 @@
// message bubbles
.message {
- border: 1px solid $bubble_borders_color;
- border-radius:$base_border_radius + 2px;
- background-color: lighten($bg_color, 5%);
- box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
- // padding: $base_padding;
- padding: 0;
- margin: $base_margin;
-
- &:hover,
- &:focus {
- background-color: $hover_bg_color;
- box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
- margin-top: $base_margin - 1px;
- margin-bottom: $base_margin + 1px;
- }
- &:active { background-color: transparentize($fg_color, 0.84) }
+ @extend %notification_bubble;
// title
.message-title {
diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss
index a041ee0973..0250c8a580 100644
--- a/data/theme/gnome-shell-sass/widgets/_panel.scss
+++ b/data/theme/gnome-shell-sass/widgets/_panel.scss
@@ -25,6 +25,22 @@ $panel_height: 1.86em;
spacing: $base_spacing;
}
+ // App Menu
+ #appMenu {
+ spacing: $base_spacing;
+
+ .label-shadow { color: transparent; }
+
+ // app menu icon
+ .app-menu-icon {
+ -st-icon-style: symbolic;
+ margin-left: $base_margin;
+ margin-right: $base_margin;
+ // dimensions of the icon are hardcoded
+ }
+ }
+
+
// the rounded outset corners
.panel-corner {
-panel_corner_radius: $panel_corner_radius;
@@ -61,14 +77,6 @@ $panel_height: 1.86em;
color: lighten($panel_fg_color, 20%);
}
- // app menu icon
- .app-menu-icon {
- -st-icon-style: symbolic;
- margin-left: $base_margin;
- margin-right: $base_margin;
- // dimensions of the icon are hardcoded
- }
-
// status area icons
.system-status-icon {
icon-size: $base_icon_size;
diff --git a/data/theme/gnome-shell-sass/widgets/_popovers.scss
b/data/theme/gnome-shell-sass/widgets/_popovers.scss
index 42f617de9c..448fefe69e 100644
--- a/data/theme/gnome-shell-sass/widgets/_popovers.scss
+++ b/data/theme/gnome-shell-sass/widgets/_popovers.scss
@@ -1,24 +1,24 @@
/* Popovers/Menus */
-$popover_width: 15em;
-
.popup-menu {
- min-width: $popover_width;
+ min-width: 15em;
color: $fg_color;
border-color: $bubble_borders_color;
- .popup-menu-arrow { } //defined globally in the TOP BAR
.popup-sub-menu {
background-color: darken($bg_color,5%);
box-shadow: inset 0 -1px 0px $bubble_borders_color;
}
- .popup-menu-content { padding: 1em 0em; }
+ .popup-menu-content { padding: calc(#{$base_padding} * 2 + #{$base_margin}) 0; }
+
+ // menu items
.popup-menu-item {
- spacing: 12px;
+ spacing: $base_padding;
&:ltr { padding: .4em 1.75em .4em 0em; }
&:rtl { padding: .4em 0em .4em 1.75em; }
+
&:checked {
background-color: $bg_color;
box-shadow: inset 0 -1px 0px $bubble_borders_color;
@@ -35,7 +35,7 @@ $popover_width: 15em;
&:insensitive { color: transparentize($fg_color,.5); }
}
- //all icons and other graphical elements
+ // all icons and other graphical elements
.popup-inactive-menu-item {
color: $fg_color;
@@ -44,9 +44,13 @@ $popover_width: 15em;
//.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is
&.panel-menu {
- -boxpointer-gap: 4px;
+ -boxpointer-gap: $base_margin; // distance from the panel
margin-bottom: 1.75em;
}
+
+ // symbolic icons in popover
+ .popup-menu-arrow,
+ .popup-menu-icon { icon-size: $base_icon_size; }
}
.popup-menu-ornament {
@@ -59,81 +63,73 @@ $popover_width: 15em;
-arrow-border-radius: $base_border_radius+4;
-arrow-background-color: $bg_color;
-arrow-border-width: 1px;
- -arrow-border-color: if($variant=='light', transparentize(black, 0.6), $borders_color);
+ -arrow-border-color: if($variant=='light', rgba(0,0,0,0.6), $borders_color);
-arrow-base: 24px;
-arrow-rise: 11px;
- -arrow-box-shadow: 0 1px 3px black; //dreaming. bug #689995
+ -arrow-box-shadow: 0 1px 3px rgba(0,0,0,0.5); //dreaming. bug #689995
}
.popup-separator-menu-item {
//-margin-horizontal: 24px;
height: 1px; //not really the whole box
- margin: 6px 64px;
+ // margin: 6px 64px;
+ margin: 6px 0;
background-color: transparent;
border-color: $bubble_borders_color;
border-bottom-width: 1px;
border-bottom-style: solid;
}
-// not really top bar only
-.popup-menu-arrow { icon-size: $base_icon_size; }
-.popup-menu-icon { icon-size: $base_icon_size; }
-
-
-// Background menu
-.background-menu { -boxpointer-gap: 4px; -arrow-rise: 0px; }
+// Desktop background menu
+.background-menu { -boxpointer-gap: $base_margin; -arrow-rise: 0px; }
/* fallback menu
- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled app menu
inside the main app window itself rather than the top bar
*/
-// a little unstructured mess:
-#appMenu {
- spacing: $base_spacing;
-
- .label-shadow { color: transparent; }
-}
-
+// App menu
.app-menu,
.app-well-menu {
max-width: 27.25em;
}
+// System status menu
.aggregate-menu {
min-width: 21em;
+
.popup-menu-icon { padding: 0 4px; }
+
.popup-sub-menu .popup-menu-item > :first-child {
+ // account for icons in submenus with padding
&:ltr {
- // 12px spacing + 2*4px padding
- padding-left: 20px;
- margin-left: 1.09em;
+ padding-left: $base_padding + $base_margin * 2;
+ margin-left: $base_icon_size;
}
&:rtl {
- // 12px spacing + 2*4px padding
- padding-right: 20px;
- margin-right: 1.09em;
+ padding-right: $base_padding + $base_margin * 2; ;
+ margin-right: $base_icon_size;
}
}
-}
-// lock screen, shutdown, etc. buttons
-.system-menu-action {
- -st-icon-style: symbolic;
- color: $fg_color;
- border-radius: 32px; /* wish we could do 50% */
- padding: 13px;
- border: 1px solid $bubble_borders_color;
-
- &:hover, &:focus {
- background-color: $hover_bg_color;
+ // lock screen, shutdown, etc. buttons
+ .system-menu-action {
+ -st-icon-style: symbolic;
color: $fg_color;
- border: none;
- padding: 14px;
- }
- &:active {
- background-color: $selected_bg_color;
- color: $selected_fg_color;
- }
+ border-radius: 32px; /* wish we could do 50% */
+ padding: 13px;
+ border: 1px solid $bubble_borders_color;
+
+ &:hover, &:focus {
+ background-color: $hover_bg_color;
+ color: $fg_color;
+ border: none;
+ padding: 14px;
+ }
+ &:active {
+ background-color: $selected_bg_color;
+ color: $selected_fg_color;
+ }
- & > StIcon { icon-size: $base_icon_size; }
+ & > StIcon { icon-size: $base_icon_size; }
+ }
}
\ No newline at end of file
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
