diff --git a/src/sass/gnome-shell/_common.scss b/src/sass/gnome-shell/_common.scss index 9e1ae7d..95308a9 100644 --- a/src/sass/gnome-shell/_common.scss +++ b/src/sass/gnome-shell/_common.scss @@ -28,3 +28,71 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT"; //@include font(body-1); //color: $fg_color; //} + +$popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($base_color, 8%), 0.95)); + +%popover_bubble { + color: $alt_fg_color; + background-color: $popover_bubble_bg; + border-radius: $mn_radius !important; + border: none; + box-shadow: 0 1px 2px rgba(black, 0.02) !important; + text-shadow: none; + + &:hover, &:focus { + color: $fg_color; + background-color: if($variant == 'light', rgba($popover_bubble_bg, 1), rgba(lighten($popover_bubble_bg, 5%), 1)); + box-shadow: 0 1px 3px rgba(black, 0.05) !important; + } + + &:active { + color: $fg_color; + background-color: if($variant == 'light', darken($popover_bubble_bg, 1%), lighten($popover_bubble_bg, 3%)); + box-shadow: none !important; + } +} + +%show_apps_bigsur { + .show-apps-icon { + color: transparent !important; + background-image: url("assets/view-app-grid.svg"); + background-size: contain; + } + + &, + &:hover, + &:active, + &:checked, + &:focus { + .overview-icon, .show-apps-icon { color: transparent !important; } + } +} + +%osd_panel { + color: $fg_color; + background-color: $base_color; + border-radius: $wm_radius; + border: solid rgba(black, 0.75); + border-width: if($variant=='light', 0, 1px); + box-shadow: 0 3px 8px 0 rgba(black, 0.25); + padding: $base_padding * 2; +} + +%search-section-content-item { + border-radius: $bt_radius; + padding: $base_padding; + transition-duration: 100ms; + text-align: center; + + &:focus, + &:hover, + &:selected { + background-color: $light_divider_color; + transition-duration: 200ms; + } + + &:active, + &:checked { + background-color: $light_track_color; + } +} diff --git a/src/sass/gnome-shell/common/_app-grid.scss b/src/sass/gnome-shell/common/_app-grid.scss index 406bdb6..33059f9 100644 --- a/src/sass/gnome-shell/common/_app-grid.scss +++ b/src/sass/gnome-shell/common/_app-grid.scss @@ -65,25 +65,25 @@ // padding: 0; background-color: rgba(if($colorscheme == 'nord', #20242c, #262626), 0.9); - & .folder-name-container { + .folder-name-container { padding: 24px 36px 0; spacing: 12px; - & .folder-name-label, - & .folder-name-entry { + .folder-name-label, + .folder-name-entry { font-size: if($laptop == 'true', 16pt, 18pt); font-weight: bold; } - & .folder-name-entry { + .folder-name-entry { @extend %search-entry; width: if($laptop == 'true', 240px, 320px) !important; } /* FIXME: this is to keep the label in sync with the entry */ - & .folder-name-label { padding: $base_padding; color: $light_alt_fg_color; } + .folder-name-label { padding: $base_padding; color: $light_alt_fg_color; } - & .edit-folder-button { + .edit-folder-button { background-color: $light_fill_color; color: $light_alt_fg_color; border: none; @@ -92,14 +92,14 @@ height: 36px; border-radius: $circular_radius; - & > StIcon { icon-size: $base_icon_size; } + > StIcon { icon-size: $base_icon_size; } &:hover { background-color: $light_divider_color; } &:checked, &:active { background-color: $light_track_color; } } } - & .icon-grid { + .icon-grid { row-spacing: 12px; column-spacing: if($laptop == 'true', 12px, 18px); page-padding-top: 0; @@ -147,10 +147,12 @@ box-shadow: none; background-color: $light_alt_disabled_fg_color; } + &:hover .page-indicator-icon { background-image: none; background-color: $light_disabled_fg_color; } + &:active .page-indicator-icon { margin: 0; padding: 0; @@ -160,10 +162,12 @@ box-shadow: none; background-color: $light_alt_fg_color; } + &:checked .page-indicator-icon { background-image: none; background-color: $light_alt_fg_color; } + &:checked:active { background-image: none; } } diff --git a/src/sass/gnome-shell/common/_base.scss b/src/sass/gnome-shell/common/_base.scss index edc4af8..151ab8f 100644 --- a/src/sass/gnome-shell/common/_base.scss +++ b/src/sass/gnome-shell/common/_base.scss @@ -1,72 +1,4 @@ -$popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($base_color, 8%), 0.95)); - -%popover_bubble { - color: $alt_fg_color; - background-color: $popover_bubble_bg; - border-radius: $mn_radius; - border: none; - box-shadow: none; - text-shadow: none; - - &:hover, &:focus { - color: $fg_color; - background-color: if($variant == 'light', rgba($popover_bubble_bg, 1), rgba(lighten($popover_bubble_bg, 5%), 1)); - box-shadow: 0 2px 3px rgba(black, 0.1) !important; - } - - &:active { - color: $fg_color; - background-color: if($variant == 'light', darken($popover_bubble_bg, 1%), lighten($popover_bubble_bg, 3%)); - box-shadow: none; - } -} - -%show_apps_bigsur { - .show-apps-icon { - color: transparent !important; - background-image: url("assets/view-app-grid.svg"); - background-size: contain; - } - - &, - &:hover, - &:active, - &:checked, - &:focus { - .overview-icon, .show-apps-icon { color: transparent !important; } - } -} - -%osd_panel { - color: $fg_color; - background-color: $base_color; - border-radius: $wm_radius; - border: solid rgba(black, 0.75); - border-width: if($variant=='light', 0, 1px); - box-shadow: 0 3px 8px 0 rgba(black, 0.25); - padding: $base_padding * 2; -} - -%search-section-content-item { - border-radius: $bt_radius; - padding: $base_padding; - transition-duration: 100ms; - text-align: center; - - &:focus, - &:hover, - &:selected { - background-color: $light_divider_color; - transition-duration: 200ms; - } - - &:active, - &:checked { - background-color: $light_track_color; - } -} - // links .shell-link { border-radius: $bt_radius; diff --git a/src/sass/gnome-shell/common/_buttons.scss b/src/sass/gnome-shell/common/_buttons.scss index c7e350b..d89fdeb 100644 --- a/src/sass/gnome-shell/common/_buttons.scss +++ b/src/sass/gnome-shell/common/_buttons.scss @@ -1,18 +1,19 @@ /* Buttons */ +%button { + @include button(flat-normal); + &:hover { @include button(flat-hover); } + &:active { @include button(flat-active); } + &:insensitive { @include button(flat-insensitive); } + &:focus { @include button(flat-focus); } +} + .button { min-height: $small_size; padding: $container_padding $container_padding * 2; border-radius: $bt_radius; - - &, .popup-menu & { - @include button(flat-normal); - &:hover { @include button(flat-hover); } - &:active { @include button(flat-active); } - &:insensitive { @include button(flat-insensitive); } - &:focus { @include button(flat-focus); } - border: none; - } + border: none; + @extend %button; } .icon-button { @@ -20,12 +21,7 @@ min-width: $small_size; padding: $container_padding; border-radius: $circular_radius; - - @include button(flat-normal); - &:hover { @include button(flat-hover); } - &:active { @include button(flat-active); } - &:insensitive { @include button(flat-insensitive); } - &:focus { @include button(flat-focus); } + @extend %button; } %osd_button { diff --git a/src/sass/gnome-shell/common/_calendar.scss b/src/sass/gnome-shell/common/_calendar.scss index bc29826..111c591 100644 --- a/src/sass/gnome-shell/common/_calendar.scss +++ b/src/sass/gnome-shell/common/_calendar.scss @@ -79,7 +79,7 @@ /* Calendar */ .calendar { border: none; - box-shadow: none; + box-shadow: 0 1px 2px rgba(black, 0.02) !important; background-color: $popover_bubble_bg; padding: $base_padding !important; margin: 0 12px !important; diff --git a/src/sass/gnome-shell/common/_looking-glass.scss b/src/sass/gnome-shell/common/_looking-glass.scss index 1bdb58b..b01c7d6 100644 --- a/src/sass/gnome-shell/common/_looking-glass.scss +++ b/src/sass/gnome-shell/common/_looking-glass.scss @@ -2,28 +2,43 @@ // Dialog #LookingGlassDialog { - background-color: $base_color; - spacing: 4px; + background-color: $osd_bg_color !important; + spacing: $base_padding; + margin: $base_padding; padding: 0; border: none; border-radius: $bt_radius; - box-shadow: 0 3px 8px 0 rgba(black, 0.25); - color: $fg_color; + box-shadow: 0 2px 6px 0 rgba(black, 0.15); + color: $osd_fg_color !important; - & > #Toolbar { - padding: 0 8px; + > #Toolbar { + padding: 0 $base_padding; + spacing: $base_padding; border: none; border-radius: 0; background-color: rgba($base_color, 0.01); - box-shadow: inset 0 -1px 0 $borders_color; + box-shadow: inset 0 -1px 0 $light_divider_color; + + .lg-toolbar-button { + padding: $base_padding $base_padding * 2; + @extend %osd_button; + border-radius: $bt_radius; + margin: $base_padding / 2; + + > StIcon { icon-size: $base_icon_size; } + } + } + + .labels { + spacing: $base_padding; + color: $osd_fg_color !important; } - .labels { spacing: 0; } .notebook-tab { - -natural-hpadding: 12px; - -minimum-hpadding: 6px; + -natural-hpadding: $base_padding * 2; + -minimum-hpadding: $base_padding * 2; font-weight: bold; - color: $hint_fg_color; + color: $light_hint_fg_color !important; padding-left: 16px; padding-right: 16px; min-height: $medium_size; @@ -32,22 +47,22 @@ border-bottom: 2px solid transparent; &:hover { - color: $fg_color; + color: $light_fg_color !important; text-shadow: none; - border-color: $track_color + border-color: $light_track_color } &:selected { - background-color: rgba($base_color, 0.01); + background-color: rgba($base_color, 0.01) !important; border-color: $primary_color; - color: $fg_color; + color: $light_fg_color !important; text-shadow: none; box-shadow: none; } } - StBoxLayout#EvalBox { padding: 4px; spacing: 4px; } - StBoxLayout#ResultsArea { spacing: 4px; } + StBoxLayout#EvalBox, + StBoxLayout#ResultsArea { padding: $base_padding; spacing: $base_padding; } } .lg-dialog { @@ -55,26 +70,33 @@ min-height: 22px; selection-background-color: $primary_color; selected-color: $light_alt_fg_color; + caret-color: $light_fg_color !important; + color: $light_fg_color !important; + background-color: $light_divider_color !important; } + .shell-link { - color: $link_color; + color: $link_color !important; &:hover { color: lighten($link_color, 10%); } &:active { color: darken($link_color, 10%); } - } + } + .actor-link { - color: $alt_fg_color; - &:hover { color: lighten($alt_fg_color, 20%); } - &:active { color: darken($alt_fg_color, 20%); } - } + color: $light_alt_fg_color !important; + &:hover { color: lighten($light_alt_fg_color, 20%); } + &:active { color: darken($light_alt_fg_color, 20%); } + + StIcon { icon-size: 12px; } + } } .lg-completions-text { - font-size: .9em; - font-style: italic; + font-size: .9em; + font-style: italic; } .lg-obj-inspector-title { - spacing: $base_spacing; + spacing: $base_spacing; } .lg-obj-inspector-button { @@ -88,20 +110,21 @@ // Extensions #lookingGlassExtensions { - padding: 4px; + padding: $base_padding; } .lg-extensions-list { - padding: 4px; - spacing: 6px; + padding: $base_padding; + spacing: $base_padding; } .lg-extension { border: none; border-radius: $bt_radius; - padding: 4px; - background-color: $divider_color; - color: $alt_fg_color; + padding: $base_padding * 2; + spacing: $base_padding; + background-color: $light_divider_color !important; + color: $light_alt_fg_color !important; } .lg-extension-name { @@ -109,14 +132,32 @@ } .lg-extension-meta { - spacing: 6px; + spacing: $base_padding; } // Inspector #LookingGlassPropertyInspector { - background: $base_color; + background: $osd_bg_color !important; border: none; border-radius: $bt_radius; - padding: 6px; + padding: $base_padding; box-shadow: 0 3px 8px 0 rgba(black, 0.25); + color: $osd_fg_color !important; +} + +.lg-debug-flag-button { + color: $light_fg_color !important; + spacing: $base_padding; + + StLabel { + padding: 2 * $base_padding; + } + + &:hover { color: lighten($light_fg_color, 20%) !important; } + &:active { color: darken($light_fg_color, 20%) !important; } +} + +.lg-debug-flags-header { + padding-top: 2 * $base_padding; + padding: $base_padding; } diff --git a/src/sass/gnome-shell/common/_message-list.scss b/src/sass/gnome-shell/common/_message-list.scss index 0efae2d..568f766 100644 --- a/src/sass/gnome-shell/common/_message-list.scss +++ b/src/sass/gnome-shell/common/_message-list.scss @@ -48,7 +48,7 @@ // message bubbles .message { - margin: 0 4px 6px; + margin: 3px 4px 4px; .popup-menu & { @extend %popover_bubble; @@ -138,6 +138,8 @@ &:last-child:ltr { margin-right: 16px; padding-right: 8px; } &:last-child:rtl { margin-left: 16px; padding-left: 8px; } + + StIcon { icon-size: $base_icon_size !important; } } // album-art diff --git a/src/sass/gnome-shell/widgets-42-0/_app-grid.scss b/src/sass/gnome-shell/widgets-42-0/_app-grid.scss index d2909d9..45f9e1d 100644 --- a/src/sass/gnome-shell/widgets-42-0/_app-grid.scss +++ b/src/sass/gnome-shell/widgets-42-0/_app-grid.scss @@ -50,18 +50,19 @@ } .page-navigation-arrow { - & > StIcon { + > StIcon { margin: $base_padding; padding: $base_padding * 3; width: 24px; height: 24px; border-radius: $circular_radius; color: $light_fg_color !important; + background-color: $light_fill_color !important; } &:insensitive > StIcon { - backround-color: transparent !important; - color: transparent !important; + backround-color: transparent; + color: transparent; } &:hover > StIcon {