From 14b90446e20e6eda0cb47df793963256d5ecd151 Mon Sep 17 00:00:00 2001 From: vinceliuice Date: Fri, 9 Jun 2023 00:28:10 +0800 Subject: [PATCH] Fixed libadwaita issues --- src/main/gtk-4.0/gtk-Dark.scss | 1 + src/main/gtk-4.0/gtk-Light.scss | 1 + src/sass/_colors.scss | 10 +- src/sass/gtk/_colors-libadwaita.scss | 159 ++++++ src/sass/gtk/apps/_gnome-40.0.scss | 705 ++++++++++++++++++++++++++- 5 files changed, 869 insertions(+), 7 deletions(-) create mode 100644 src/sass/gtk/_colors-libadwaita.scss diff --git a/src/main/gtk-4.0/gtk-Dark.scss b/src/main/gtk-4.0/gtk-Dark.scss index 0ff3129..ebe091e 100644 --- a/src/main/gtk-4.0/gtk-Dark.scss +++ b/src/main/gtk-4.0/gtk-Dark.scss @@ -6,3 +6,4 @@ $variant: 'dark'; @import '../../sass/gtk/common-4.0'; @import '../../sass/gtk/apps-4.0'; @import '../../sass/gtk/colors-public'; +@import '../../sass/gtk/colors-libadwaita'; diff --git a/src/main/gtk-4.0/gtk-Light.scss b/src/main/gtk-4.0/gtk-Light.scss index 6b0bca3..95f400b 100644 --- a/src/main/gtk-4.0/gtk-Light.scss +++ b/src/main/gtk-4.0/gtk-Light.scss @@ -6,3 +6,4 @@ $variant: 'light'; @import '../../sass/gtk/common-4.0'; @import '../../sass/gtk/apps-4.0'; @import '../../sass/gtk/colors-public'; +@import '../../sass/gtk/colors-libadwaita'; diff --git a/src/sass/_colors.scss b/src/sass/_colors.scss index bc2ea41..1415aa5 100644 --- a/src/sass/_colors.scss +++ b/src/sass/_colors.scss @@ -26,6 +26,11 @@ $hint_fg_color: if($variant == 'light', #565656, #999999); $hint_fg_color: if($variant == 'light', #495265, #8994a9); } +//insensitive state derived colors +$disabled_fg_color: if($variant == 'light', transparentize($fg_color, 0.55), transparentize($fg_color, 0.65)); +$alt_disabled_fg_color: if($variant == 'light', transparentize($alt_fg_color, 0.55), transparentize($alt_fg_color, 0.65)); +$disabled_bg_color: if($variant == 'light', mix($bg_color, $base_color, 40%), lighten($bg_color, 2%)); + $track_color: if($variant == 'light', rgba(black, 0.20), rgba(white, 0.16)); $visit_color: if($variant == 'light', rgba(black, 0.16), rgba(white, 0.12)); $divider_color: if($variant == 'light', rgba(black, 0.12), rgba(white, 0.1)); @@ -113,11 +118,6 @@ $suggested_color: if($colorscheme == 'nord', $nord_color_blue, $progress_color: $selected_bg_color; $drop_target_color: if($colorscheme == 'nord', $nord_color_orange, $theme_color_orange); -//insensitive state derived colors -$disabled_fg_color: if($variant == 'light', transparentize($fg_color, 0.55), transparentize($fg_color, 0.65)); -$alt_disabled_fg_color: if($variant == 'light', transparentize($alt_fg_color, 0.55), transparentize($alt_fg_color, 0.65)); -$disabled_bg_color: if($variant == 'light', mix($bg_color, $base_color, 40%), lighten($bg_color, 2%)); - // Headerbar colors $header_bg: if($variant == 'light', #ffffff, if($darker == 'true', #1e1e1e, #373737)); $header_highlight: if($variant == 'dark', if($darker == 'true', #242424, #434343), #f5f5f5); // For metacity diff --git a/src/sass/gtk/_colors-libadwaita.scss b/src/sass/gtk/_colors-libadwaita.scss new file mode 100644 index 0000000..6aa0c8a --- /dev/null +++ b/src/sass/gtk/_colors-libadwaita.scss @@ -0,0 +1,159 @@ +$blue_1: #99c1f1; +$blue_2: #62a0ea; +$blue_3: #3584e4; +$blue_4: #1c71d8; +$blue_5: #1a5fb4; +$green_1: #8ff0a4; +$green_2: #57e389; +$green_3: #33d17a; +$green_4: #2ec27e; +$green_5: #26a269; +$yellow_1: #f9f06b; +$yellow_2: #f8e45c; +$yellow_3: #f6d32d; +$yellow_4: #f5c211; +$yellow_5: #e5a50a; +$orange_1: #ffbe6f; +$orange_2: #ffa348; +$orange_3: #ff7800; +$orange_4: #e66100; +$orange_5: #c64600; +$red_1: #f66151; +$red_2: #ed333b; +$red_3: #e01b24; +$red_4: #c01c28; +$red_5: #a51d2d; +$purple_1: #dc8add; +$purple_2: #c061cb; +$purple_3: #9141ac; +$purple_4: #813d9c; +$purple_5: #613583; +$brown_1: #cdab8f; +$brown_2: #b5835a; +$brown_3: #986a44; +$brown_4: #865e3c; +$brown_5: #63452c; +$light_1: #ffffff; +$light_2: #f6f5f4; +$light_3: #deddda; +$light_4: #c0bfbc; +$light_5: #9a9996; +$dark_1: #77767b; +$dark_2: #5e5c64; +$dark_3: #3d3846; +$dark_4: #241f31; +$dark_5: #000000; + +// Sass thinks we're using the colors in the variables as strings and may shoot +// warning, it's innocuous and can be defeated by using #{$var}. + +@define-color blue_1 #{$blue_1}; +@define-color blue_2 #{$blue_2}; +@define-color blue_3 #{$blue_3}; +@define-color blue_4 #{$blue_4}; +@define-color blue_5 #{$blue_5}; +@define-color green_1 #{$green_1}; +@define-color green_2 #{$green_2}; +@define-color green_3 #{$green_3}; +@define-color green_4 #{$green_4}; +@define-color green_5 #{$green_5}; +@define-color yellow_1 #{$yellow_1}; +@define-color yellow_2 #{$yellow_2}; +@define-color yellow_3 #{$yellow_3}; +@define-color yellow_4 #{$yellow_4}; +@define-color yellow_5 #{$yellow_5}; +@define-color orange_1 #{$orange_1}; +@define-color orange_2 #{$orange_2}; +@define-color orange_3 #{$orange_3}; +@define-color orange_4 #{$orange_4}; +@define-color orange_5 #{$orange_5}; +@define-color red_1 #{$red_1}; +@define-color red_2 #{$red_2}; +@define-color red_3 #{$red_3}; +@define-color red_4 #{$red_4}; +@define-color red_5 #{$red_5}; +@define-color purple_1 #{$purple_1}; +@define-color purple_2 #{$purple_2}; +@define-color purple_3 #{$purple_3}; +@define-color purple_4 #{$purple_4}; +@define-color purple_5 #{$purple_5}; +@define-color brown_1 #{$brown_1}; +@define-color brown_2 #{$brown_2}; +@define-color brown_3 #{$brown_3}; +@define-color brown_4 #{$brown_4}; +@define-color brown_5 #{$brown_5}; +@define-color light_1 #{$light_1}; +@define-color light_2 #{$light_2}; +@define-color light_3 #{$light_3}; +@define-color light_4 #{$light_4}; +@define-color light_5 #{$light_5}; +@define-color dark_1 #{$dark_1}; +@define-color dark_2 #{$dark_2}; +@define-color dark_3 #{$dark_3}; +@define-color dark_4 #{$dark_4}; +@define-color dark_5 #{$dark_5}; + +/* GTK NAMED COLORS + ---------------- + use responsibly! */ + +// Sass thinks we're using the colors in the variables as strings and may shoot +// warning, it's innocuous and can be defeated by using #{$var}. + +// These are the colors apps are can override. We define the defaults here and +// define variables for them in _colors.scss + +// The main accent color and the matching text value +@define-color accent_bg_color #{$primary_color}; +@define-color accent_fg_color #{$light_fg_color}; +@define-color accent_color #{$primary_color}; + +// destructive-action buttons +@define-color destructive_bg_color #{$destructive_color}; +@define-color destructive_fg_color #{$light_fg_color}; +@define-color destructive_color #{$destructive_color}; + +// Levelbars, entries, labels and infobars. These don't need text colors +@define-color success_bg_color #{$success_color}; +@define-color success_fg_color #{$light_fg_color}; +@define-color success_color #{$success_color}; + +@define-color warning_bg_color #{$warning_color}; +@define-color warning_fg_color #{$light_fg_color}; +@define-color warning_color #{$warning_color}; + +@define-color error_bg_color #{$error_color}; +@define-color error_fg_color #{$light_fg_color}; +@define-color error_color #{$error_color}; + +// Window +@define-color window_bg_color #{$bg_color}; +@define-color window_fg_color #{$text_color}; + +// Views - e.g. text view or tree view +@define-color view_bg_color #{$base_color}; +@define-color view_fg_color #{$text_color}; + +// Header bar, search bar, tab bar +@define-color headerbar_bg_color #{$header_bg}; +@define-color headerbar_fg_color #{$header_fg}; +@define-color headerbar_border_color #{$borders_color}; +@define-color headerbar_backdrop_color #{$header_bg_backdrop}; +@define-color headerbar_shade_color #{$header_border}; + +// Cards, boxed lists +@define-color card_bg_color #{$base_color}; +@define-color card_fg_color #{$text_color}; +@define-color card_shade_color #{$borders_color}; + +// Dialogs +@define-color dialog_bg_color #{$dialog_bg_color}; +@define-color dialog_fg_color #{$text_color}; + +// Popovers +@define-color popover_bg_color #{$menu_bg}; +@define-color popover_fg_color #{$text_color}; + +// Miscellaneous +@define-color shade_color #{$borders_color}; +@define-color scrollbar_outline_color #{$borders_color}; diff --git a/src/sass/gtk/apps/_gnome-40.0.scss b/src/sass/gtk/apps/_gnome-40.0.scss index 92e87fe..15af25c 100644 --- a/src/sass/gtk/apps/_gnome-40.0.scss +++ b/src/sass/gtk/apps/_gnome-40.0.scss @@ -412,13 +412,714 @@ menubutton.flat.popup.sources-button { } // -// Weather +// Gnome Weather // -.small .forecast-card { +@define-color weather_temp_chart_fill_color #{rgba($warning_color, 0.5)}; +@define-color weather_temp_chart_stroke_color #{darken($warning_color, 10%)}; +@define-color weather_thermometer_warm_color #{$theme_color_yellow}; +@define-color weather_thermometer_cold_color #{$theme_color_blue}; + +$weather_thermometer_high_color: $theme_color_yellow; +$weather_thermometer_low_color: $theme_color_blue; +$weather_forecast_color: #ae7b03; + +#places-label { + font-weight: bold; +} + +#temperature-label { + font-size: 32pt; + font-weight: 900; + margin-left: 9px; +} + +#conditions-grid *:backdrop { + color: $alt_fg_color; +} + +.content-view.cell { + font-weight: bold; +} + +#locationEntry { + margin: $container_padding; +} + +.weather-popover { + margin-top: $container_padding; +} + +.forecast-card { + transition: border-radius 100ms ease-out; + border-radius: $bt_radius; +} + +.forecast-card separator { + background-color: $borders_color; +} + +#daily-forecast-box { + > separator:last-child { + background-color: transparent; + min-width: 0; + } +} + +#conditions-grid, +#attributionGrid { + margin-left: $container_padding * 3; + margin-right: $container_padding * 3; +} + +#weather-page .small .forecast-card { + margin-left: 0; + margin-right: 0; + border-radius: 0; border-width: 1px 0; } +.forecast-temperature-label { + font-weight: bold; + color: $weather_forecast_color; +} + +WeatherThermometer { + margin-bottom: $container_padding * 2; +} + +WeatherThermometer > label.high { + font-weight: bold; + color: $weather_thermometer_high_color; +} + +WeatherThermometer > label.low { + font-weight: bold; + color: $weather_thermometer_low_color; +} + +.forecast-button { + margin: 0 $container_padding * 2; + + > button.image-button { + min-height: 28px; + min-width: 28px; + padding: 0; + border-radius: $circular_radius; + } +} + +.forecast-graphic { + margin: $container_padding * 3; +} + +button.osd.circular > image { + padding: 0; +} + +scrolledwindow.inline list, +scrolledwindow.inline listview { + background: none; + color: inherit; +} + +scrolledwindow.inline undershoot.top { + box-shadow: inset 0 1px $borders_color; +} + +.search-view { + background-color: $primary_color; + color: $light_fg_color; +} + +.search-view menubutton button:focus:focus-visible { + outline-color: rgba(white, 0.3); +} + +image.circular { + min-width: $medium_size; + min-height: $medium_size; + padding: 0; + border-radius: $circular_radius; +} + +// +// Gnome Software +// + +.details-page { + margin: $container_padding * 4 0px; +} + +.installed-overlay-box { + font-size: smaller; + background-color: $primary_color; + border-radius: 0; + color: $light_fg_color; + text-shadow: 0 1px 0 rgba(black, 0.2); +} + +screenshot-carousel box.frame { + border-width: 1px 0; + border-radius: 0; +} + +screenshot-carousel button, +.featured-carousel button { + margin: $container_padding * 2; +} + +.screenshot-image-main .image1, +.screenshot-image-main .image2 { + margin-top: $container_padding; + margin-bottom: $container_padding * 2; + margin-left: $container_padding; + margin-right: $container_padding; +} + +.app-tile-label { + font-size: 105%; +} + +.review-textbox { + padding: $container_padding; +} + +.origin-rounded-box { + background-color: $divider_color; + border-radius: $circular_radius; + padding: $container_padding - 2px; +} + +.origin-beta { + color: $warning_color; +} + +.origin-button > button { + padding: $container_padding / 2 $container_padding * 1.5; +} + +flowboxchild.card { + padding: 0; + border: none; + box-shadow: none; + background: none; +} + +button.card.category-tile { + padding: $container_padding * 3.5; + border: none; + border-radius: $bt_radius; + min-width: 140px; + font-weight: 900; + font-size: larger; + + &.category-tile-iconless { + padding: $container_padding * 1.5 $container_padding * 2.5; + min-width: 130px; + font-size: 105%; + font-weight: normal; + } + + // Styling for specific category buttons. + &.category-create { + background: linear-gradient(180deg, #ce8cd7 0%, #2861c6 100%); + color: white; + + &:hover { + background: linear-gradient(180deg, shade(#ce8cd7, 1.07) 0%, shade(#2861c6, 1.1) 100%); + color: white; + } + + &:active { + background: linear-gradient(180deg, shade(#ce8cd7, .95) 0%, shade(#2861c6, .95) 100%); + color: white; + } + } + + &.category-develop { + background: #5e5c64; + color: white; + + &:hover { + background: shade(#5e5c64, 1.2); + color: white; + } + + &:active { + background-color: shade(#5e5c64, .95); + color: white; + } + } + + &.category-learn { + background: linear-gradient(180deg, #2ec27e 30%, #27a66c 100%); + color: white; + + &:hover { + background: linear-gradient(180deg, shade(#2ec27e, 1.06) 30%, shade(#27a66c, 1.06) 100%); + color: white; + } + + &:active { + background: linear-gradient(180deg, shade(#2ec27e, .95) 30%, shade(#27a66c, .95) 100%); + color: white; + } + } + + &.category-play { + background: linear-gradient(75deg, #f9e2a7 0%, #eb5ec3 50%, #6d53e0 100%); + color: #393484; + + &:hover { + background: linear-gradient(75deg, shade(#f9e2a7, 1.07) 0%, shade(#eb5ec3, 1.07) 50%, shade(#6d53e0, 1.07) 100%); + color: #393484; + } + + &:active { + background: linear-gradient(75deg, shade(#f9e2a7, .97) 0%, shade(#eb5ec3, .95) 50%, shade(#6d53e0, 1.07) 100%); + color: #393484; + } + } + + &.category-socialize { + background: linear-gradient(90deg, #ef4e9b 0%, #f77466 100%); + color: $alt_fg_color; + + &:hover { + background: linear-gradient(90deg, shade(#ef4e9b, 1.08) 0%, shade(#f77466, 1.08) 100%); + } + + &:active { + background: linear-gradient(90deg, shade(#ef4e9b, .95) 0%, shade(#f77466, .95) 100%); + } + } + + &.category-work { + padding: 1px; /* FIXME: work around https://gitlab.gnome.org/GNOME/gtk/-/issues/4324 */ + color: #1c71d8; + background-color:#fdf8d7; + background-image: linear-gradient($borders_color 1px, transparent 1px), + linear-gradient(90deg, $borders_color 1px, transparent 1px); + background-size: 10px 10px, 10px 10px; + background-position: -1px -4px, center -1px; + + &:hover { + color: #1c71d8; + background-color: lighten(#fdf8d7, 5%); + background-image: linear-gradient($borders_color 1px, transparent 1px), + linear-gradient(90deg, $borders_color 1px, transparent 1px); + } + + &:active { + color: #1c71d8; + background-color: darken(#fdf8d7, 5%); + background-image: linear-gradient($borders_color 1px, transparent 1px), + linear-gradient(90deg, $borders_color 1px, transparent 1px); + } + } +} + +clamp.medium .category-tile:not(.category-tile-iconless), +clamp.large .category-tile:not(.category-tile-iconless) { + font-size: larger; +} + +// The rest of the featured-tile CSS is loaded at runtime in gs-feature-tile.c +.featured-tile { + all: unset; + padding: 0; + box-shadow: none; + color: $fg_color; + + label.title-1 { + margin-top: $container_padding; + margin-bottom: $container_padding; + } + + &.narrow label.title-1 { + font-size: 16pt; + } +} + +.application-details-infobar { + &, &.info { + background-color: $fill_color; + color: $fg_color; + border: 1px solid $borders_color; + } + + &.warning { + background-color: $warning_color; + color: $light_fg_color; + border: 1px solid $divider_color; + } +} + +@keyframes install-progress-unknown-move { + 0% { background-position: 0%; } + 50% { background-position: 100%; } + 100% { background-position: 0%; } +} + +.application-details-description .button { + padding-left: $container_padding * 4; + padding-right: $container_padding * 4; +} + +.install-progress { + background-image: linear-gradient(to top, $primary_color 2px, gtkalpha($primary_color, 0) 2px); + background-repeat: no-repeat; + background-position: 0 bottom; + background-size: 0; + transition: none; +} + +.install-progress:dir(rtl) { background-position: 100% bottom; } + +.review-row > * { + margin: $container_padding * 2; +} + +.review-row button { font-size: smaller; } + +.review-row .vote-buttons button { + margin-right: -1px; +} + +// this is the separator between yes and no vote buttons, gtk+ 3.20 only +.review-row .vote-buttons button:not(:first-child) { + border-image: linear-gradient(to top, $borders_color, $borders_color) 0 0 0 1 / 5px 0 5px 1px; +} + +.review-row .vote-buttons button:hover, +.review-row .vote-buttons button:active, +.review-row .vote-buttons button:hover + button, +.review-row .vote-buttons button:active + button { + border-image: none; +} + +review-bar { + color: $disabled_fg_color; + background-image: none; + background-color: $track_color; +} + +.review-histogram star-image { + color: $disabled_fg_color; +} + +.version-arrow-label { + font-size: x-small; +} + +.overview-more-button { + font-size: smaller; + padding: 0 $container_padding * 2 + 4px; +} + +.app-row-origin-text { + font-size: smaller; +} + +.app-listbox-header { + padding: $container_padding; + border-bottom: 1px solid $borders_color; +} + +.image-list { + background-color: transparent; +} + +box.star { + background-color: transparent; + background-image: none; +} + +button.star { + outline-offset: 0; + background-color: transparent; + background-image: none; + border-image: none; + border-radius: 0; + border-width: 0; + padding: 0; + box-shadow: none; + outline-offset: -1px; +} + +star-image { + color: $theme_color_yellow; +} + +.dimmer-label { + opacity: 0.25; +} + +.update-failed-details { + font-family: Monospace; + font-size: smaller; + padding: $container_padding * 2 + 4px; +} + +.upgrade-banner { + padding: 0px; + border-radius: $bt_radius; + border: none; +} + +.upgrade-banner-background { + background: linear-gradient(to bottom, $success_color, $suggested_color); + color: white; +} + +.upgrade-buttons #button_upgrades_install { + padding-left: $container_padding * 2 + 4px; + padding-right: $container_padding * 2 + 4px; +} + +scrolledwindow.list-page > viewport > clamp > box { + margin: $container_padding * 4 $container_padding * 2; + border-spacing: $container_padding * 4; +} + +.update-preferences preferencesgroup > box > box { + margin-top: $container_padding * 3; +} + +.section > label:not(:first-child) { margin-top: $container_padding; } + +.section > box:not(:first-child) { margin-top: $container_padding * 2; } + +clamp.status-page { + margin: $container_padding * 6 $container_padding * 2; +} + +clamp.status-page .iconbox { + min-height: 128px; + min-width: 128px; +} + +clamp.status-page .icon { + color: $disabled_fg_color; + min-height: 32px; + min-width: 32px; +} + +clamp.status-page .icon:not(:last-child) { + margin-bottom: $container_padding * 6; +} + +clamp.status-page .title:not(:last-child) { + margin-bottom: $container_padding * 2; +} + +app-context-bar { + .context-tile { + border: 1px solid $borders_color; + background-color: transparent; + border-radius: 0; + padding: $container_padding * 4 $container_padding * 2 $container_padding * 3.5 $container_padding * 2; + outline-offset: 5px; + transition-property: outline, outline-offset, background-image; + border-bottom: none; + border-right: none; + + &:hover { + background-image: none; + background-color: $divider_color; + } + + &.keyboard-activating, + &:active { + background-color: $track_color; + } + + &:focus:focus-visible { + outline-offset: -1px; + } + } + + &.horizontal box:first-child .context-tile:first-child, + &.vertical .context-tile:first-child { + border-left: none; + } + + &.horizontal .context-tile, + &.vertical box:first-child .context-tile { + border-top: none; + } + + > box:not(:first-child) > button.flat { + border-radius: 0; + + &:last-child { + border-radius: 0 $bt_radius $bt_radius 0; + } + } + + > box:first-child > button.flat { + border-radius: 0; + + &:first-child { + border-radius: $bt_radius 0 0 $bt_radius; + } + } + + > box > button.flat { + border-left-color: $borders_color; + } +} + +carousel.card { + border: none; + background-color: $fill_color; +} + +.context-tile-lozenge { + min-height: 28px; + min-width: 28px; + padding: $container_padding; + font-size: 18px; + font-weight: bold; + border-radius: $circular_radius; + + &.large { + font-size: 24px; + padding: 16px; + min-width: 24px; /* 60px minus the left and right padding */ + min-height: 24px; /* 60px minus the top and bottom padding */ + } + + &.wide-image image { + margin-top: -28px; + margin-bottom: -28px; + } + + image { -gtk-icon-style: symbolic; } + + &.grey { + color: $fg_color; + background-color: $divider_color; + } + + &.green, &.details-rating-0 { + color: darken($theme_color_green, 15%); + background-color: rgba($theme_color_green, 0.15); + } + + &.blue, + &.details-rating-5 { + color: $theme_color_blue; + background-color: rgba($theme_color_blue, 0.15); + } + + &.yellow, &.details-rating-12 { + color: darken($theme_color_yellow, 15%); + background-color: rgba($theme_color_yellow, 0.15); + } + + &.details-rating-15 { + color: $theme_color_orange; + background-color: rgba($theme_color_orange, .15); + } + + &.red, &.details-rating-18 { + color: darken($theme_color_red, 15%); + background-color: rgba($theme_color_red, 0.15); + } +} + +.eol-red { + font-weight: bold; + color: $error_color; +} + +window.narrow .app-title { + font-size: 16pt; +} + +window.narrow .app-developer { + font-size: small; +} + +.install-progress-label { + font-size: smaller; + font-feature-settings: "tnum"; +} + +scrolledwindow.fake-adw-status-page > viewport > box { margin: $container_padding * 6 $container_padding * 2; } +scrolledwindow.fake-adw-status-page > viewport > box > clamp:not(:last-child) > box { margin-bottom: $container_padding * 6; } +scrolledwindow.fake-adw-status-page > viewport > box > clamp > box > .icon:not(:last-child) { margin-bottom: $container_padding * 6; } +scrolledwindow.fake-adw-status-page > viewport > box > clamp > box > .title:not(:last-child) { margin-bottom: $container_padding * 2; } + +statuspage.icon-dropshadow image.icon { + -gtk-icon-shadow: 0 1px 12px rgba(0,0,0,0.05), + 0 -1px rgba(0,0,0,0.05), + 1px 0 rgba(0,0,0,0.1), + 0 1px rgba(0,0,0,0.3), + -1px 0 rgba(0,0,0,0.1); +} + +window.info scrollbar.vertical { + margin-top: 48px; + background: none; + box-shadow: none; +} + +window.info scrollbar.vertical trough { + margin-top: 0; +} + +// GsAppRow +row.app > box.header { + margin-left: $container_padding * 2; + margin-right: $container_padding * 2; +} + +row.app > box.header { + border-spacing: $container_padding * 2; +} + +row.app > box.header > image { + margin-top: $container_padding * 2; + margin-bottom: $container_padding * 2; +} + +row.app label.warning { + color: $warning_color; +} + +// GtkSpinner + +// Ensure the spinner is hidden before the animation is triggered. +@keyframes pre-delay { + from { opacity: 0; } + to { opacity: 0; } +} + +@keyframes fade-in { + from { filter: opacity(0%); } +} + +/* Give a fade-in animation to spinners. */ +spinner.fade-in:checked { + animation: pre-delay 0.5s linear 1, fade-in 1s linear 1, spin 1s linear infinite; + animation-delay: 0s, 0.5s, 0.5s; +} + +// Leaflets +window > contents > leaflet { // Gnome control center + > box > stack.background { + background-color: transparent; + background-image: linear-gradient(to bottom, + transparent, + transparent $large_size, + $bg_color $large_size, + $bg_color); + } +} + // // Misc (other) //