Fixed libadwaita issues
This commit is contained in:
vinceliuice
parent
3a10a22d21
commit
14b90446e2
5 changed files with 869 additions and 7 deletions
|
|
@ -6,3 +6,4 @@ $variant: 'dark';
|
||||||
@import '../../sass/gtk/common-4.0';
|
@import '../../sass/gtk/common-4.0';
|
||||||
@import '../../sass/gtk/apps-4.0';
|
@import '../../sass/gtk/apps-4.0';
|
||||||
@import '../../sass/gtk/colors-public';
|
@import '../../sass/gtk/colors-public';
|
||||||
|
@import '../../sass/gtk/colors-libadwaita';
|
||||||
|
|
|
||||||
|
|
@ -6,3 +6,4 @@ $variant: 'light';
|
||||||
@import '../../sass/gtk/common-4.0';
|
@import '../../sass/gtk/common-4.0';
|
||||||
@import '../../sass/gtk/apps-4.0';
|
@import '../../sass/gtk/apps-4.0';
|
||||||
@import '../../sass/gtk/colors-public';
|
@import '../../sass/gtk/colors-public';
|
||||||
|
@import '../../sass/gtk/colors-libadwaita';
|
||||||
|
|
|
||||||
|
|
@ -26,6 +26,11 @@ $hint_fg_color: if($variant == 'light', #565656, #999999);
|
||||||
$hint_fg_color: if($variant == 'light', #495265, #8994a9);
|
$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));
|
$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));
|
$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));
|
$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;
|
$progress_color: $selected_bg_color;
|
||||||
$drop_target_color: if($colorscheme == 'nord', $nord_color_orange, $theme_color_orange);
|
$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
|
// Headerbar colors
|
||||||
$header_bg: if($variant == 'light', #ffffff, if($darker == 'true', #1e1e1e, #373737));
|
$header_bg: if($variant == 'light', #ffffff, if($darker == 'true', #1e1e1e, #373737));
|
||||||
$header_highlight: if($variant == 'dark', if($darker == 'true', #242424, #434343), #f5f5f5); // For metacity
|
$header_highlight: if($variant == 'dark', if($darker == 'true', #242424, #434343), #f5f5f5); // For metacity
|
||||||
|
|
|
||||||
159
src/sass/gtk/_colors-libadwaita.scss
Normal file
159
src/sass/gtk/_colors-libadwaita.scss
Normal file
|
|
@ -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};
|
||||||
|
|
@ -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;
|
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)
|
// Misc (other)
|
||||||
//
|
//
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue