pull/276/head
vinceliuice 3 years ago
parent 930c75e360
commit 190f8cc73c

@ -131,7 +131,7 @@ $destructive: $error;
$check_radio_primary: if($check_radio == 'default', $success, $primary);
$frame: if($variant == 'light', rgba(black, 0.08), rgba(black, 0.16)); // instead of shadows
$border: if($variant == 'light', rgba(black, 0.12), rgba(black, 0.12));
$border: if($variant == 'light', rgba(black, 0.12), rgba(white, 0.12));
$solid-border: if($variant == 'light', darken($background, 8%), lighten($background, 12%));
$border-alt: rgba(black, 0.16); // darker border color for Chrome and Firefox
$titlebar-indicator: if($topbar == 'dark', currentColor, $primary);

@ -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};
@define-color accent_fg_color #{on($primary)};
@define-color accent_color #{$primary};
// destructive-action buttons
@define-color destructive_bg_color #{$destructive};
@define-color destructive_fg_color #{on($destructive)};
@define-color destructive_color #{$destructive};
// Levelbars, entries, labels and infobars. These don't need text colors
@define-color success_bg_color #{$success};
@define-color success_fg_color #{on($success)};
@define-color success_color #{$success};
@define-color warning_bg_color #{$warning};
@define-color warning_fg_color #{on($warning)};
@define-color warning_color #{$warning};
@define-color error_bg_color #{$error};
@define-color error_fg_color #{on($error)};
@define-color error_color #{$error};
// Window
@define-color window_bg_color #{$background};
@define-color window_fg_color #{$text};
// Views - e.g. text view or tree view
@define-color view_bg_color #{$base};
@define-color view_fg_color #{$text};
// Header bar, search bar, tab bar
@define-color headerbar_bg_color #{$titlebar};
@define-color headerbar_fg_color #{$titlebar-text};
@define-color headerbar_border_color #{$border};
@define-color headerbar_backdrop_color #{$titlebar-backdrop};
@define-color headerbar_shade_color #{$border};
// Cards, boxed lists
@define-color card_bg_color #{$base};
@define-color card_fg_color #{$text};
@define-color card_shade_color #{$border};
// Dialogs
@define-color dialog_bg_color #{$base-alt};
@define-color dialog_fg_color #{$text};
// Popovers
@define-color popover_bg_color #{$surface};
@define-color popover_fg_color #{$text};
// Miscellaneous
@define-color shade_color #{$border};
@define-color scrollbar_outline_color #{$border};

@ -1109,12 +1109,11 @@ searchbar > revealer > box {
headerbar {
transition: background-color $duration $ease-out, color $duration $ease-out;
box-shadow: inset 0 -1px $divider, inset 0 1px highlight($titlebar);
box-shadow: inset 0 -1px $divider;
color: $titlebar-text;
min-height: $large-size;
padding: 0;
margin: 0;
border-radius: $window-radius $window-radius 0 0;
@if $topbar == 'dark' {
background-color: transparent;
@ -2744,6 +2743,9 @@ progressbar {
min-width: $bar-size;
min-height: $bar-size;
background-color: transparent;
box-shadow: none;
margin: 0;
padding: 0;
trough { background-color: transparent; }
@ -4010,8 +4012,6 @@ colorchooser .popover.osd {
**********************/
window {
outline: none;
transition: $transition-shadow;
box-shadow: $shadow-z16, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
&.csd {
border-radius: $window-radius;
@ -4027,6 +4027,10 @@ window {
@if $topbar == 'dark' {
&.background {
box-shadow: $shadow-z16,
0 16px (24px * .6) 2px transparent,
0 6px (30px * .6) 5px transparent,
inset 0 1px highlight($titlebar);
background-color: transparent;
background-image: linear-gradient(to bottom,
$titlebar,
@ -4034,6 +4038,10 @@ window {
$background $large-size,
$background);
}
} @else {
box-shadow: $shadow-z16,
0 16px (24px * .6) 2px transparent,
0 6px (30px * .6) 5px transparent;
}
&:backdrop {
@ -4041,7 +4049,26 @@ window {
// change when we go to backdrop, to prevent jumping windows.
// The biggest shadow should be in the same order then in the active state
// or the jumping will happen during the transition.
box-shadow: $shadow-z4, 0 16px (24px * .6) 2px transparent, 0 6px (30px * .6) 5px transparent;
transition: $transition-shadow;
@if $topbar == 'dark' {
&.background {
box-shadow: $shadow-z4,
0 16px (24px * .6) 2px transparent,
0 6px (30px * .6) 5px transparent,
inset 0 1px highlight($titlebar);
background-color: transparent;
background-image: linear-gradient(to bottom,
$titlebar-backdrop,
$titlebar-backdrop $large-size,
$background $large-size,
$background);
}
} @else {
box-shadow: $shadow-z4,
0 16px (24px * .6) 2px transparent,
0 6px (30px * .6) 5px transparent;
}
}
&.ssd {

@ -350,6 +350,19 @@ window.dialog {
}
}
// leaflet
leaflet {
background-color: transparent;
stack.background {
background-color: transparent;
}
> box > scrolledwindow > viewport > widget > stack {
background-color: $base;
}
}
//
// Calculator
//
@ -612,13 +625,7 @@ screenshot-carousel box.frame.view {
window.org-gnome-Builder {
headerbar {
box-shadow: inset 0 -1px $border;
splitbutton {
button {
border-radius: $corner-radius;
}
notification button {
margin: 0;
min-height: $small-size;
@ -626,26 +633,21 @@ window.org-gnome-Builder {
padding: 0;
}
}
menubutton > button {
border-radius: $corner-radius;
padding: $space-size $space-size * 1.5;
}
paneltogglebutton {
button {
border-radius: $corner-radius;
}
}
}
}
popover.background.global-search {
> arrow, > contents { padding: 0; }
> arrow,
> contents { padding: 0; }
}
panelframeswitcher {
padding: $space-size;
border-bottom: 1px solid $border;
}
panelframetabbar {
border-bottom: none;
}
.frameheader.header {
@ -672,10 +674,10 @@ panelframeswitcher {
border-left: 1px solid $border;
menubutton > button {
margin: $space-size;
margin: $space-size / 2;
min-height: $small-size;
min-width: $small-size;
padding: $space-size / 2;
padding: $space-size;
border-radius: $corner-radius;
}
}

@ -707,50 +707,3 @@ tabbox:drop(active) {
// Sidebar
.unfolded stacksidebar.sidebar { border: none; }
//
// leaflet
//
leaflet {
border-radius: $window-radius;
&, &:backdrop {
box-shadow: inset 0 1px highlight($titlebar);
}
leaflet { // reset
border-radius: 0;
outline: none;
box-shadow: none;
&, &:backdrop {
box-shadow: none;
}
}
headerbar {
border-radius: 0;
box-shadow: inset 0 -1px $divider;
}
stack.background {
background-color: transparent;
}
> box > scrolledwindow > viewport > widget > stack {
background-color: $base;
}
.maximized &,
.fullscreen &,
.tiled &,
.tiled-top &,
.tiled-right &,
.tiled-bottom &,
.tiled-left & {
border-radius: 0;
outline: none;
}
}

@ -1487,12 +1487,11 @@ headerbar entry image:disabled {
headerbar {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), color 75ms cubic-bezier(0, 0, 0.2, 1);
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
color: white;
min-height: 40px;
padding: 0;
margin: 0;
border-radius: 16px 16px 0 0;
background-color: transparent;
}
@ -3202,6 +3201,9 @@ progressbar.osd {
min-width: 6px;
min-height: 6px;
background-color: transparent;
box-shadow: none;
margin: 0;
padding: 0;
}
progressbar.osd trough {
@ -4413,8 +4415,6 @@ colorchooser .popover.osd:backdrop {
**********************/
window {
outline: none;
transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent;
}
window.csd {
@ -4426,12 +4426,19 @@ window.csd.maximized, window.csd.fullscreen, window.csd.tiled, window.csd.tiled-
}
window.background {
box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent, inset 0 1px rgba(255, 255, 255, 0.1);
background-color: transparent;
background-image: linear-gradient(to bottom, #2C2C2C, #2C2C2C 40px, #F2F2F2 40px, #F2F2F2);
}
window:backdrop {
box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent;
transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
}
window:backdrop.background {
box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent, inset 0 1px rgba(255, 255, 255, 0.1);
background-color: transparent;
background-image: linear-gradient(to bottom, #2C2C2C, #2C2C2C 40px, #F2F2F2 40px, #F2F2F2);
}
window.ssd {
@ -4984,6 +4991,18 @@ window.dialog > box > stack > box > box > notebook.frame {
border-radius: 0;
}
leaflet {
background-color: transparent;
}
leaflet stack.background {
background-color: transparent;
}
leaflet > box > scrolledwindow > viewport > widget > stack {
background-color: #FFFFFF;
}
.history-view {
background-color: #FFFFFF;
}
@ -5206,14 +5225,6 @@ screenshot-carousel box.frame.view {
padding: 0;
}
window.org-gnome-Builder headerbar {
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
}
window.org-gnome-Builder headerbar splitbutton button {
border-radius: 10px;
}
window.org-gnome-Builder headerbar splitbutton notification button {
margin: 0;
min-height: 22px;
@ -5221,21 +5232,18 @@ window.org-gnome-Builder headerbar splitbutton notification button {
padding: 0;
}
window.org-gnome-Builder headerbar menubutton > button {
border-radius: 10px;
padding: 4px 6px;
}
window.org-gnome-Builder headerbar paneltogglebutton button {
border-radius: 10px;
}
popover.background.global-search > arrow, popover.background.global-search > contents {
popover.background.global-search > arrow,
popover.background.global-search > contents {
padding: 0;
}
panelframeswitcher {
padding: 4px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
panelframetabbar {
border-bottom: none;
}
.frameheader.header {
@ -5264,10 +5272,10 @@ panelframeswitcher {
}
.frameheader.header tabbar.inline > revealer > box .end-action menubutton > button {
margin: 4px;
margin: 2px;
min-height: 22px;
min-width: 22px;
padding: 2px;
padding: 4px;
border-radius: 10px;
}
@ -6034,42 +6042,6 @@ tabbox:drop(active) {
border: none;
}
leaflet {
border-radius: 16px;
}
leaflet, leaflet:backdrop {
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
}
leaflet leaflet {
border-radius: 0;
outline: none;
box-shadow: none;
}
leaflet leaflet, leaflet leaflet:backdrop {
box-shadow: none;
}
leaflet headerbar {
border-radius: 0;
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
}
leaflet stack.background {
background-color: transparent;
}
leaflet > box > scrolledwindow > viewport > widget > stack {
background-color: #FFFFFF;
}
.maximized leaflet, .fullscreen leaflet, .tiled leaflet, .tiled-top leaflet, .tiled-right leaflet, .tiled-bottom leaflet, .tiled-left leaflet {
border-radius: 0;
outline: none;
}
/* GTK NAMED COLORS
----------------
use responsibly! */
@ -6200,3 +6172,84 @@ FIXME this is really an API */
@define-color BLACK_500 #393634;
@define-color BLACK_700 #33302F;
@define-color BLACK_900 #2B2928;
@define-color blue_1 #99c1f1;
@define-color blue_2 #62a0ea;
@define-color blue_3 #3584e4;
@define-color blue_4 #1c71d8;
@define-color blue_5 #1a5fb4;
@define-color green_1 #8ff0a4;
@define-color green_2 #57e389;
@define-color green_3 #33d17a;
@define-color green_4 #2ec27e;
@define-color green_5 #26a269;
@define-color yellow_1 #f9f06b;
@define-color yellow_2 #f8e45c;
@define-color yellow_3 #f6d32d;
@define-color yellow_4 #f5c211;
@define-color yellow_5 #e5a50a;
@define-color orange_1 #ffbe6f;
@define-color orange_2 #ffa348;
@define-color orange_3 #ff7800;
@define-color orange_4 #e66100;
@define-color orange_5 #c64600;
@define-color red_1 #f66151;
@define-color red_2 #ed333b;
@define-color red_3 #e01b24;
@define-color red_4 #c01c28;
@define-color red_5 #a51d2d;
@define-color purple_1 #dc8add;
@define-color purple_2 #c061cb;
@define-color purple_3 #9141ac;
@define-color purple_4 #813d9c;
@define-color purple_5 #613583;
@define-color brown_1 #cdab8f;
@define-color brown_2 #b5835a;
@define-color brown_3 #986a44;
@define-color brown_4 #865e3c;
@define-color brown_5 #63452c;
@define-color light_1 #ffffff;
@define-color light_2 #f6f5f4;
@define-color light_3 #deddda;
@define-color light_4 #c0bfbc;
@define-color light_5 #9a9996;
@define-color dark_1 #77767b;
@define-color dark_2 #5e5c64;
@define-color dark_3 #3d3846;
@define-color dark_4 #241f31;
@define-color dark_5 #000000;
/* GTK NAMED COLORS
----------------
use responsibly! */
@define-color accent_bg_color #1A73E8;
@define-color accent_fg_color white;
@define-color accent_color #1A73E8;
@define-color destructive_bg_color #D93025;
@define-color destructive_fg_color white;
@define-color destructive_color #D93025;
@define-color success_bg_color #0F9D58;
@define-color success_fg_color white;
@define-color success_color #0F9D58;
@define-color warning_bg_color #F4B400;
@define-color warning_fg_color rgba(0, 0, 0, 0.87);
@define-color warning_color #F4B400;
@define-color error_bg_color #D93025;
@define-color error_fg_color white;
@define-color error_color #D93025;
@define-color window_bg_color #F2F2F2;
@define-color window_fg_color rgba(0, 0, 0, 0.87);
@define-color view_bg_color #FFFFFF;
@define-color view_fg_color rgba(0, 0, 0, 0.87);
@define-color headerbar_bg_color #2C2C2C;
@define-color headerbar_fg_color white;
@define-color headerbar_border_color rgba(0, 0, 0, 0.12);
@define-color headerbar_backdrop_color #2C2C2C;
@define-color headerbar_shade_color rgba(0, 0, 0, 0.12);
@define-color card_bg_color #FFFFFF;
@define-color card_fg_color rgba(0, 0, 0, 0.87);
@define-color card_shade_color rgba(0, 0, 0, 0.12);
@define-color dialog_bg_color #FAFAFA;
@define-color dialog_fg_color rgba(0, 0, 0, 0.87);
@define-color popover_bg_color #FFFFFF;
@define-color popover_fg_color rgba(0, 0, 0, 0.87);
@define-color shade_color rgba(0, 0, 0, 0.12);
@define-color scrollbar_outline_color rgba(0, 0, 0, 0.12);

@ -8,3 +8,4 @@ $compact: 'true';
@import '../../_sass/gtk/common-4.0';
@import '../../_sass/gtk/apps-4.0';
@import '../../_sass/gtk/colors-public';
@import '../../_sass/gtk/colors-libadwaita';

@ -1487,12 +1487,11 @@ headerbar entry image:disabled {
headerbar {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), color 75ms cubic-bezier(0, 0, 0.2, 1);
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12), inset 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
color: white;
min-height: 40px;
padding: 0;
margin: 0;
border-radius: 16px 16px 0 0;
background-color: transparent;
}
@ -3202,6 +3201,9 @@ progressbar.osd {
min-width: 6px;
min-height: 6px;
background-color: transparent;
box-shadow: none;
margin: 0;
padding: 0;
}
progressbar.osd trough {
@ -4413,8 +4415,6 @@ colorchooser .popover.osd:backdrop {
**********************/
window {
outline: none;
transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent;
}
window.csd {
@ -4426,12 +4426,19 @@ window.csd.maximized, window.csd.fullscreen, window.csd.tiled, window.csd.tiled-
}
window.background {
box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent, inset 0 1px rgba(255, 255, 255, 0.1);
background-color: transparent;
background-image: linear-gradient(to bottom, #2C2C2C, #2C2C2C 40px, #212121 40px, #212121);
}
window:backdrop {
box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent;
transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
}
window:backdrop.background {
box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent, inset 0 1px rgba(255, 255, 255, 0.1);
background-color: transparent;
background-image: linear-gradient(to bottom, #2C2C2C, #2C2C2C 40px, #212121 40px, #212121);
}
window.ssd {
@ -4954,12 +4961,24 @@ window.dialog > box > stack > box > box > notebook.frame {
border-radius: 0;
}
leaflet {
background-color: transparent;
}
leaflet stack.background {
background-color: transparent;
}
leaflet > box > scrolledwindow > viewport > widget > stack {
background-color: #2C2C2C;
}
.history-view {
background-color: #2C2C2C;
}
#displayitem {
border-top: 1px solid rgba(0, 0, 0, 0.12);
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.small .card {
@ -5028,7 +5047,7 @@ app-context-bar > box:first-child > button.flat:first-child {
}
app-context-bar > box > button.flat {
border-left-color: rgba(0, 0, 0, 0.12);
border-left-color: rgba(255, 255, 255, 0.12);
}
carousel.card {
@ -5147,19 +5166,19 @@ screenshot-carousel box.frame.view {
/* FIXME: work around https://gitlab.gnome.org/GNOME/gtk/-/issues/4324 */
color: #1c71d8;
background-color: #fdf8d7;
background-image: linear-gradient(rgba(0, 0, 0, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.12) 1px, transparent 1px);
background-image: linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
background-size: 10px 10px, 10px 10px;
background-position: -1px -4px, center -1px;
}
.category-tile.category-work:hover {
background-color: #fefcef;
background-image: linear-gradient(rgba(0, 0, 0, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.12) 1px, transparent 1px);
background-image: linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
}
.category-tile.category-work:active {
background-color: #fcf4bf;
background-image: linear-gradient(rgba(0, 0, 0, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.12) 1px, transparent 1px);
background-image: linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
}
.polari-room-list .sidebar {
@ -5176,14 +5195,6 @@ screenshot-carousel box.frame.view {
padding: 0;
}
window.org-gnome-Builder headerbar {
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
}
window.org-gnome-Builder headerbar splitbutton button {
border-radius: 10px;
}
window.org-gnome-Builder headerbar splitbutton notification button {
margin: 0;
min-height: 22px;
@ -5191,21 +5202,18 @@ window.org-gnome-Builder headerbar splitbutton notification button {
padding: 0;
}
window.org-gnome-Builder headerbar menubutton > button {
border-radius: 10px;
padding: 4px 6px;
}
window.org-gnome-Builder headerbar paneltogglebutton button {
border-radius: 10px;
}
popover.background.global-search > arrow, popover.background.global-search > contents {
popover.background.global-search > arrow,
popover.background.global-search > contents {
padding: 0;
}
panelframeswitcher {
padding: 4px;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
panelframetabbar {
border-bottom: none;
}
.frameheader.header {
@ -5230,14 +5238,14 @@ panelframeswitcher {
.frameheader.header tabbar.inline > revealer > box .end-action {
padding: 0;
border-left: 1px solid rgba(0, 0, 0, 0.12);
border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.frameheader.header tabbar.inline > revealer > box .end-action menubutton > button {
margin: 4px;
margin: 2px;
min-height: 22px;
min-width: 22px;
padding: 2px;
padding: 4px;
border-radius: 10px;
}
@ -6004,42 +6012,6 @@ tabbox:drop(active) {
border: none;
}
leaflet {
border-radius: 16px;
}
leaflet, leaflet:backdrop {
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
}
leaflet leaflet {
border-radius: 0;
outline: none;
box-shadow: none;
}
leaflet leaflet, leaflet leaflet:backdrop {
box-shadow: none;
}
leaflet headerbar {
border-radius: 0;
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
}
leaflet stack.background {
background-color: transparent;
}
leaflet > box > scrolledwindow > viewport > widget > stack {
background-color: #2C2C2C;
}
.maximized leaflet, .fullscreen leaflet, .tiled leaflet, .tiled-top leaflet, .tiled-right leaflet, .tiled-bottom leaflet, .tiled-left leaflet {
border-radius: 0;
outline: none;
}
/* GTK NAMED COLORS
----------------
use responsibly! */
@ -6170,3 +6142,84 @@ FIXME this is really an API */
@define-color BLACK_500 #393634;
@define-color BLACK_700 #33302F;
@define-color BLACK_900 #2B2928;
@define-color blue_1 #99c1f1;
@define-color blue_2 #62a0ea;
@define-color blue_3 #3584e4;
@define-color blue_4 #1c71d8;
@define-color blue_5 #1a5fb4;
@define-color green_1 #8ff0a4;
@define-color green_2 #57e389;
@define-color green_3 #33d17a;
@define-color green_4 #2ec27e;
@define-color green_5 #26a269;
@define-color yellow_1 #f9f06b;
@define-color yellow_2 #f8e45c;
@define-color yellow_3 #f6d32d;
@define-color yellow_4 #f5c211;
@define-color yellow_5 #e5a50a;
@define-color orange_1 #ffbe6f;
@define-color orange_2 #ffa348;
@define-color orange_3 #ff7800;
@define-color orange_4 #e66100;
@define-color orange_5 #c64600;
@define-color red_1 #f66151;
@define-color red_2 #ed333b;
@define-color red_3 #e01b24;
@define-color red_4 #c01c28;
@define-color red_5 #a51d2d;
@define-color purple_1 #dc8add;
@define-color purple_2 #c061cb;
@define-color purple_3 #9141ac;
@define-color purple_4 #813d9c;
@define-color purple_5 #613583;
@define-color brown_1 #cdab8f;
@define-color brown_2 #b5835a;
@define-color brown_3 #986a44;
@define-color brown_4 #865e3c;
@define-color brown_5 #63452c;
@define-color light_1 #ffffff;
@define-color light_2 #f6f5f4;
@define-color light_3 #deddda;
@define-color light_4 #c0bfbc;
@define-color light_5 #9a9996;
@define-color dark_1 #77767b;
@define-color dark_2 #5e5c64;
@define-color dark_3 #3d3846;
@define-color dark_4 #241f31;
@define-color dark_5 #000000;
/* GTK NAMED COLORS
----------------
use responsibly! */
@define-color accent_bg_color #3281EA;
@define-color accent_fg_color white;
@define-color accent_color #3281EA;
@define-color destructive_bg_color #F28B82;
@define-color destructive_fg_color rgba(0, 0, 0, 0.87);
@define-color destructive_color #F28B82;
@define-color success_bg_color #81C995;
@define-color success_fg_color rgba(0, 0, 0, 0.87);
@define-color success_color #81C995;
@define-color warning_bg_color #FDD633;
@define-color warning_fg_color rgba(0, 0, 0, 0.87);
@define-color warning_color #FDD633;
@define-color error_bg_color #F28B82;
@define-color error_fg_color rgba(0, 0, 0, 0.87);
@define-color error_color #F28B82;
@define-color window_bg_color #212121;
@define-color window_fg_color white;
@define-color view_bg_color #2C2C2C;
@define-color view_fg_color white;
@define-color headerbar_bg_color #2C2C2C;
@define-color headerbar_fg_color white;
@define-color headerbar_border_color rgba(255, 255, 255, 0.12);
@define-color headerbar_backdrop_color #2C2C2C;
@define-color headerbar_shade_color rgba(255, 255, 255, 0.12);
@define-color card_bg_color #2C2C2C;
@define-color card_fg_color white;
@define-color card_shade_color rgba(255, 255, 255, 0.12);
@define-color dialog_bg_color #242424;
@define-color dialog_fg_color white;
@define-color popover_bg_color #3C3C3C;
@define-color popover_fg_color white;
@define-color shade_color rgba(255, 255, 255, 0.12);
@define-color scrollbar_outline_color rgba(255, 255, 255, 0.12);

@ -8,3 +8,4 @@ $compact: 'true';
@import '../../_sass/gtk/common-4.0';
@import '../../_sass/gtk/apps-4.0';
@import '../../_sass/gtk/colors-public';
@import '../../_sass/gtk/colors-libadwaita';

@ -1487,12 +1487,11 @@ headerbar entry image:disabled {
headerbar {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), color 75ms cubic-bezier(0, 0, 0.2, 1);
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12), inset 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
color: white;
min-height: 48px;
padding: 0;
margin: 0;
border-radius: 18px 18px 0 0;
background-color: transparent;
}
@ -3202,6 +3201,9 @@ progressbar.osd {
min-width: 6px;
min-height: 6px;
background-color: transparent;
box-shadow: none;
margin: 0;
padding: 0;
}
progressbar.osd trough {
@ -4413,8 +4415,6 @@ colorchooser .popover.osd:backdrop {
**********************/
window {
outline: none;
transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent;
}
window.csd {
@ -4426,12 +4426,19 @@ window.csd.maximized, window.csd.fullscreen, window.csd.tiled, window.csd.tiled-
}
window.background {
box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent, inset 0 1px rgba(255, 255, 255, 0.1);
background-color: transparent;
background-image: linear-gradient(to bottom, #2C2C2C, #2C2C2C 48px, #212121 48px, #212121);
}
window:backdrop {
box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent;
transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
}
window:backdrop.background {
box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent, inset 0 1px rgba(255, 255, 255, 0.1);
background-color: transparent;
background-image: linear-gradient(to bottom, #2C2C2C, #2C2C2C 48px, #212121 48px, #212121);
}
window.ssd {
@ -4954,12 +4961,24 @@ window.dialog > box > stack > box > box > notebook.frame {
border-radius: 0;
}
leaflet {
background-color: transparent;
}
leaflet stack.background {
background-color: transparent;
}
leaflet > box > scrolledwindow > viewport > widget > stack {
background-color: #2C2C2C;
}
.history-view {
background-color: #2C2C2C;
}
#displayitem {
border-top: 1px solid rgba(0, 0, 0, 0.12);
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.small .card {
@ -5028,7 +5047,7 @@ app-context-bar > box:first-child > button.flat:first-child {
}
app-context-bar > box > button.flat {
border-left-color: rgba(0, 0, 0, 0.12);
border-left-color: rgba(255, 255, 255, 0.12);
}
carousel.card {
@ -5147,19 +5166,19 @@ screenshot-carousel box.frame.view {
/* FIXME: work around https://gitlab.gnome.org/GNOME/gtk/-/issues/4324 */
color: #1c71d8;
background-color: #fdf8d7;
background-image: linear-gradient(rgba(0, 0, 0, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.12) 1px, transparent 1px);
background-image: linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
background-size: 10px 10px, 10px 10px;
background-position: -1px -4px, center -1px;
}
.category-tile.category-work:hover {
background-color: #fefcef;
background-image: linear-gradient(rgba(0, 0, 0, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.12) 1px, transparent 1px);
background-image: linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
}
.category-tile.category-work:active {
background-color: #fcf4bf;
background-image: linear-gradient(rgba(0, 0, 0, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.12) 1px, transparent 1px);
background-image: linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
}
.polari-room-list .sidebar {
@ -5176,14 +5195,6 @@ screenshot-carousel box.frame.view {
padding: 0;
}
window.org-gnome-Builder headerbar {
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
}
window.org-gnome-Builder headerbar splitbutton button {
border-radius: 12px;
}
window.org-gnome-Builder headerbar splitbutton notification button {
margin: 0;
min-height: 24px;
@ -5191,21 +5202,18 @@ window.org-gnome-Builder headerbar splitbutton notification button {
padding: 0;
}
window.org-gnome-Builder headerbar menubutton > button {
border-radius: 12px;
padding: 6px 9px;
}
window.org-gnome-Builder headerbar paneltogglebutton button {
border-radius: 12px;
}
popover.background.global-search > arrow, popover.background.global-search > contents {
popover.background.global-search > arrow,
popover.background.global-search > contents {
padding: 0;
}
panelframeswitcher {
padding: 6px;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
panelframetabbar {
border-bottom: none;
}
.frameheader.header {
@ -5230,14 +5238,14 @@ panelframeswitcher {
.frameheader.header tabbar.inline > revealer > box .end-action {
padding: 0;
border-left: 1px solid rgba(0, 0, 0, 0.12);
border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.frameheader.header tabbar.inline > revealer > box .end-action menubutton > button {
margin: 6px;
margin: 3px;
min-height: 24px;
min-width: 24px;
padding: 3px;
padding: 6px;
border-radius: 12px;
}
@ -6004,42 +6012,6 @@ tabbox:drop(active) {
border: none;
}
leaflet {
border-radius: 18px;
}
leaflet, leaflet:backdrop {
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
}
leaflet leaflet {
border-radius: 0;
outline: none;
box-shadow: none;
}
leaflet leaflet, leaflet leaflet:backdrop {
box-shadow: none;
}
leaflet headerbar {
border-radius: 0;
box-shadow: inset 0 -1px rgba(255, 255, 255, 0.12);
}
leaflet stack.background {
background-color: transparent;
}
leaflet > box > scrolledwindow > viewport > widget > stack {
background-color: #2C2C2C;
}
.maximized leaflet, .fullscreen leaflet, .tiled leaflet, .tiled-top leaflet, .tiled-right leaflet, .tiled-bottom leaflet, .tiled-left leaflet {
border-radius: 0;
outline: none;
}
/* GTK NAMED COLORS
----------------
use responsibly! */
@ -6170,3 +6142,84 @@ FIXME this is really an API */
@define-color BLACK_500 #393634;
@define-color BLACK_700 #33302F;
@define-color BLACK_900 #2B2928;
@define-color blue_1 #99c1f1;
@define-color blue_2 #62a0ea;
@define-color blue_3 #3584e4;
@define-color blue_4 #1c71d8;
@define-color blue_5 #1a5fb4;
@define-color green_1 #8ff0a4;
@define-color green_2 #57e389;
@define-color green_3 #33d17a;
@define-color green_4 #2ec27e;
@define-color green_5 #26a269;
@define-color yellow_1 #f9f06b;
@define-color yellow_2 #f8e45c;
@define-color yellow_3 #f6d32d;
@define-color yellow_4 #f5c211;
@define-color yellow_5 #e5a50a;
@define-color orange_1 #ffbe6f;
@define-color orange_2 #ffa348;
@define-color orange_3 #ff7800;
@define-color orange_4 #e66100;
@define-color orange_5 #c64600;
@define-color red_1 #f66151;
@define-color red_2 #ed333b;
@define-color red_3 #e01b24;
@define-color red_4 #c01c28;
@define-color red_5 #a51d2d;
@define-color purple_1 #dc8add;
@define-color purple_2 #c061cb;
@define-color purple_3 #9141ac;
@define-color purple_4 #813d9c;
@define-color purple_5 #613583;
@define-color brown_1 #cdab8f;
@define-color brown_2 #b5835a;
@define-color brown_3 #986a44;
@define-color brown_4 #865e3c;
@define-color brown_5 #63452c;
@define-color light_1 #ffffff;
@define-color light_2 #f6f5f4;
@define-color light_3 #deddda;
@define-color light_4 #c0bfbc;
@define-color light_5 #9a9996;
@define-color dark_1 #77767b;
@define-color dark_2 #5e5c64;
@define-color dark_3 #3d3846;
@define-color dark_4 #241f31;
@define-color dark_5 #000000;
/* GTK NAMED COLORS
----------------
use responsibly! */
@define-color accent_bg_color #3281EA;
@define-color accent_fg_color white;
@define-color accent_color #3281EA;
@define-color destructive_bg_color #F28B82;
@define-color destructive_fg_color rgba(0, 0, 0, 0.87);
@define-color destructive_color #F28B82;
@define-color success_bg_color #81C995;
@define-color success_fg_color rgba(0, 0, 0, 0.87);
@define-color success_color #81C995;
@define-color warning_bg_color #FDD633;
@define-color warning_fg_color rgba(0, 0, 0, 0.87);
@define-color warning_color #FDD633;
@define-color error_bg_color #F28B82;
@define-color error_fg_color rgba(0, 0, 0, 0.87);
@define-color error_color #F28B82;
@define-color window_bg_color #212121;
@define-color window_fg_color white;
@define-color view_bg_color #2C2C2C;
@define-color view_fg_color white;
@define-color headerbar_bg_color #2C2C2C;
@define-color headerbar_fg_color white;
@define-color headerbar_border_color rgba(255, 255, 255, 0.12);
@define-color headerbar_backdrop_color #2C2C2C;
@define-color headerbar_shade_color rgba(255, 255, 255, 0.12);
@define-color card_bg_color #2C2C2C;
@define-color card_fg_color white;
@define-color card_shade_color rgba(255, 255, 255, 0.12);
@define-color dialog_bg_color #242424;
@define-color dialog_fg_color white;
@define-color popover_bg_color #3C3C3C;
@define-color popover_fg_color white;
@define-color shade_color rgba(255, 255, 255, 0.12);
@define-color scrollbar_outline_color rgba(255, 255, 255, 0.12);

@ -8,3 +8,4 @@ $compact: 'false';
@import '../../_sass/gtk/common-4.0';
@import '../../_sass/gtk/apps-4.0';
@import '../../_sass/gtk/colors-public';
@import '../../_sass/gtk/colors-libadwaita';

@ -1487,12 +1487,11 @@ headerbar entry image:disabled {
headerbar {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), color 75ms cubic-bezier(0, 0, 0.2, 1);
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.4);
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
color: rgba(0, 0, 0, 0.87);
min-height: 40px;
padding: 0;
margin: 0;
border-radius: 16px 16px 0 0;
background-color: #FFFFFF;
}
@ -3202,6 +3201,9 @@ progressbar.osd {
min-width: 6px;
min-height: 6px;
background-color: transparent;
box-shadow: none;
margin: 0;
padding: 0;
}
progressbar.osd trough {
@ -4413,7 +4415,6 @@ colorchooser .popover.osd:backdrop {
**********************/
window {
outline: none;
transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent;
}
@ -4426,6 +4427,7 @@ window.csd.maximized, window.csd.fullscreen, window.csd.tiled, window.csd.tiled-
}
window:backdrop {
transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent;
}
@ -4948,6 +4950,18 @@ window.dialog > box > stack > box > box > notebook.frame {
border-radius: 0;
}
leaflet {
background-color: transparent;
}
leaflet stack.background {
background-color: transparent;
}
leaflet > box > scrolledwindow > viewport > widget > stack {
background-color: #FFFFFF;
}
.history-view {
background-color: #FFFFFF;
}
@ -5170,14 +5184,6 @@ screenshot-carousel box.frame.view {
padding: 0;
}
window.org-gnome-Builder headerbar {
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
}
window.org-gnome-Builder headerbar splitbutton button {
border-radius: 10px;
}
window.org-gnome-Builder headerbar splitbutton notification button {
margin: 0;
min-height: 22px;
@ -5185,21 +5191,18 @@ window.org-gnome-Builder headerbar splitbutton notification button {
padding: 0;
}
window.org-gnome-Builder headerbar menubutton > button {
border-radius: 10px;
padding: 4px 6px;
}
window.org-gnome-Builder headerbar paneltogglebutton button {
border-radius: 10px;
}
popover.background.global-search > arrow, popover.background.global-search > contents {
popover.background.global-search > arrow,
popover.background.global-search > contents {
padding: 0;
}
panelframeswitcher {
padding: 4px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
panelframetabbar {
border-bottom: none;
}
.frameheader.header {
@ -5228,10 +5231,10 @@ panelframeswitcher {
}
.frameheader.header tabbar.inline > revealer > box .end-action menubutton > button {
margin: 4px;
margin: 2px;
min-height: 22px;
min-width: 22px;
padding: 2px;
padding: 4px;
border-radius: 10px;
}
@ -5998,42 +6001,6 @@ tabbox:drop(active) {
border: none;
}
leaflet {
border-radius: 16px;
}
leaflet, leaflet:backdrop {
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
}
leaflet leaflet {
border-radius: 0;
outline: none;
box-shadow: none;
}
leaflet leaflet, leaflet leaflet:backdrop {
box-shadow: none;
}
leaflet headerbar {
border-radius: 0;
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
}
leaflet stack.background {
background-color: transparent;
}
leaflet > box > scrolledwindow > viewport > widget > stack {
background-color: #FFFFFF;
}
.maximized leaflet, .fullscreen leaflet, .tiled leaflet, .tiled-top leaflet, .tiled-right leaflet, .tiled-bottom leaflet, .tiled-left leaflet {
border-radius: 0;
outline: none;
}
/* GTK NAMED COLORS
----------------
use responsibly! */
@ -6164,3 +6131,84 @@ FIXME this is really an API */
@define-color BLACK_500 #393634;
@define-color BLACK_700 #33302F;
@define-color BLACK_900 #2B2928;
@define-color blue_1 #99c1f1;
@define-color blue_2 #62a0ea;
@define-color blue_3 #3584e4;
@define-color blue_4 #1c71d8;
@define-color blue_5 #1a5fb4;
@define-color green_1 #8ff0a4;
@define-color green_2 #57e389;
@define-color green_3 #33d17a;
@define-color green_4 #2ec27e;
@define-color green_5 #26a269;
@define-color yellow_1 #f9f06b;
@define-color yellow_2 #f8e45c;
@define-color yellow_3 #f6d32d;
@define-color yellow_4 #f5c211;
@define-color yellow_5 #e5a50a;
@define-color orange_1 #ffbe6f;
@define-color orange_2 #ffa348;
@define-color orange_3 #ff7800;
@define-color orange_4 #e66100;
@define-color orange_5 #c64600;
@define-color red_1 #f66151;
@define-color red_2 #ed333b;
@define-color red_3 #e01b24;
@define-color red_4 #c01c28;
@define-color red_5 #a51d2d;
@define-color purple_1 #dc8add;
@define-color purple_2 #c061cb;
@define-color purple_3 #9141ac;
@define-color purple_4 #813d9c;
@define-color purple_5 #613583;
@define-color brown_1 #cdab8f;
@define-color brown_2 #b5835a;
@define-color brown_3 #986a44;
@define-color brown_4 #865e3c;
@define-color brown_5 #63452c;
@define-color light_1 #ffffff;
@define-color light_2 #f6f5f4;
@define-color light_3 #deddda;
@define-color light_4 #c0bfbc;
@define-color light_5 #9a9996;
@define-color dark_1 #77767b;
@define-color dark_2 #5e5c64;
@define-color dark_3 #3d3846;
@define-color dark_4 #241f31;
@define-color dark_5 #000000;
/* GTK NAMED COLORS
----------------
use responsibly! */
@define-color accent_bg_color #1A73E8;
@define-color accent_fg_color white;
@define-color accent_color #1A73E8;
@define-color destructive_bg_color #D93025;
@define-color destructive_fg_color white;
@define-color destructive_color #D93025;
@define-color success_bg_color #0F9D58;
@define-color success_fg_color white;
@define-color success_color #0F9D58;
@define-color warning_bg_color #F4B400;
@define-color warning_fg_color rgba(0, 0, 0, 0.87);
@define-color warning_color #F4B400;
@define-color error_bg_color #D93025;
@define-color error_fg_color white;
@define-color error_color #D93025;
@define-color window_bg_color #F2F2F2;
@define-color window_fg_color rgba(0, 0, 0, 0.87);
@define-color view_bg_color #FFFFFF;
@define-color view_fg_color rgba(0, 0, 0, 0.87);
@define-color headerbar_bg_color #FFFFFF;
@define-color headerbar_fg_color rgba(0, 0, 0, 0.87);
@define-color headerbar_border_color rgba(0, 0, 0, 0.12);
@define-color headerbar_backdrop_color #FFFFFF;
@define-color headerbar_shade_color rgba(0, 0, 0, 0.12);
@define-color card_bg_color #FFFFFF;
@define-color card_fg_color rgba(0, 0, 0, 0.87);
@define-color card_shade_color rgba(0, 0, 0, 0.12);
@define-color dialog_bg_color #FAFAFA;
@define-color dialog_fg_color rgba(0, 0, 0, 0.87);
@define-color popover_bg_color #FFFFFF;
@define-color popover_fg_color rgba(0, 0, 0, 0.87);
@define-color shade_color rgba(0, 0, 0, 0.12);
@define-color scrollbar_outline_color rgba(0, 0, 0, 0.12);

@ -8,3 +8,4 @@ $compact: 'true';
@import '../../_sass/gtk/common-4.0';
@import '../../_sass/gtk/apps-4.0';
@import '../../_sass/gtk/colors-public';
@import '../../_sass/gtk/colors-libadwaita';

@ -1487,12 +1487,11 @@ headerbar entry image:disabled {
headerbar {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), color 75ms cubic-bezier(0, 0, 0.2, 1);
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.4);
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
color: rgba(0, 0, 0, 0.87);
min-height: 48px;
padding: 0;
margin: 0;
border-radius: 18px 18px 0 0;
background-color: #FFFFFF;
}
@ -3202,6 +3201,9 @@ progressbar.osd {
min-width: 6px;
min-height: 6px;
background-color: transparent;
box-shadow: none;
margin: 0;
padding: 0;
}
progressbar.osd trough {
@ -4413,7 +4415,6 @@ colorchooser .popover.osd:backdrop {
**********************/
window {
outline: none;
transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent;
}
@ -4426,6 +4427,7 @@ window.csd.maximized, window.csd.fullscreen, window.csd.tiled, window.csd.tiled-
}
window:backdrop {
transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent;
}
@ -4948,6 +4950,18 @@ window.dialog > box > stack > box > box > notebook.frame {
border-radius: 0;
}
leaflet {
background-color: transparent;
}
leaflet stack.background {
background-color: transparent;
}
leaflet > box > scrolledwindow > viewport > widget > stack {
background-color: #FFFFFF;
}
.history-view {
background-color: #FFFFFF;
}
@ -5170,14 +5184,6 @@ screenshot-carousel box.frame.view {
padding: 0;
}
window.org-gnome-Builder headerbar {
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
}
window.org-gnome-Builder headerbar splitbutton button {
border-radius: 12px;
}
window.org-gnome-Builder headerbar splitbutton notification button {
margin: 0;
min-height: 24px;
@ -5185,21 +5191,18 @@ window.org-gnome-Builder headerbar splitbutton notification button {
padding: 0;
}
window.org-gnome-Builder headerbar menubutton > button {
border-radius: 12px;
padding: 6px 9px;
}
window.org-gnome-Builder headerbar paneltogglebutton button {
border-radius: 12px;
}
popover.background.global-search > arrow, popover.background.global-search > contents {
popover.background.global-search > arrow,
popover.background.global-search > contents {
padding: 0;
}
panelframeswitcher {
padding: 6px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
panelframetabbar {
border-bottom: none;
}
.frameheader.header {
@ -5228,10 +5231,10 @@ panelframeswitcher {
}
.frameheader.header tabbar.inline > revealer > box .end-action menubutton > button {
margin: 6px;
margin: 3px;
min-height: 24px;
min-width: 24px;
padding: 3px;
padding: 6px;
border-radius: 12px;
}
@ -5998,42 +6001,6 @@ tabbox:drop(active) {
border: none;
}
leaflet {
border-radius: 18px;
}
leaflet, leaflet:backdrop {
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
}
leaflet leaflet {
border-radius: 0;
outline: none;
box-shadow: none;
}
leaflet leaflet, leaflet leaflet:backdrop {
box-shadow: none;
}
leaflet headerbar {
border-radius: 0;
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
}
leaflet stack.background {
background-color: transparent;
}
leaflet > box > scrolledwindow > viewport > widget > stack {
background-color: #FFFFFF;
}
.maximized leaflet, .fullscreen leaflet, .tiled leaflet, .tiled-top leaflet, .tiled-right leaflet, .tiled-bottom leaflet, .tiled-left leaflet {
border-radius: 0;
outline: none;
}
/* GTK NAMED COLORS
----------------
use responsibly! */
@ -6164,3 +6131,84 @@ FIXME this is really an API */
@define-color BLACK_500 #393634;
@define-color BLACK_700 #33302F;
@define-color BLACK_900 #2B2928;
@define-color blue_1 #99c1f1;
@define-color blue_2 #62a0ea;
@define-color blue_3 #3584e4;
@define-color blue_4 #1c71d8;
@define-color blue_5 #1a5fb4;
@define-color green_1 #8ff0a4;
@define-color green_2 #57e389;
@define-color green_3 #33d17a;
@define-color green_4 #2ec27e;
@define-color green_5 #26a269;
@define-color yellow_1 #f9f06b;
@define-color yellow_2 #f8e45c;
@define-color yellow_3 #f6d32d;
@define-color yellow_4 #f5c211;
@define-color yellow_5 #e5a50a;
@define-color orange_1 #ffbe6f;
@define-color orange_2 #ffa348;
@define-color orange_3 #ff7800;
@define-color orange_4 #e66100;
@define-color orange_5 #c64600;
@define-color red_1 #f66151;
@define-color red_2 #ed333b;
@define-color red_3 #e01b24;
@define-color red_4 #c01c28;
@define-color red_5 #a51d2d;
@define-color purple_1 #dc8add;
@define-color purple_2 #c061cb;
@define-color purple_3 #9141ac;
@define-color purple_4 #813d9c;
@define-color purple_5 #613583;
@define-color brown_1 #cdab8f;
@define-color brown_2 #b5835a;
@define-color brown_3 #986a44;
@define-color brown_4 #865e3c;
@define-color brown_5 #63452c;
@define-color light_1 #ffffff;
@define-color light_2 #f6f5f4;
@define-color light_3 #deddda;
@define-color light_4 #c0bfbc;
@define-color light_5 #9a9996;
@define-color dark_1 #77767b;
@define-color dark_2 #5e5c64;
@define-color dark_3 #3d3846;
@define-color dark_4 #241f31;
@define-color dark_5 #000000;
/* GTK NAMED COLORS
----------------
use responsibly! */
@define-color accent_bg_color #1A73E8;
@define-color accent_fg_color white;
@define-color accent_color #1A73E8;
@define-color destructive_bg_color #D93025;
@define-color destructive_fg_color white;
@define-color destructive_color #D93025;
@define-color success_bg_color #0F9D58;
@define-color success_fg_color white;
@define-color success_color #0F9D58;
@define-color warning_bg_color #F4B400;
@define-color warning_fg_color rgba(0, 0, 0, 0.87);
@define-color warning_color #F4B400;
@define-color error_bg_color #D93025;
@define-color error_fg_color white;
@define-color error_color #D93025;
@define-color window_bg_color #F2F2F2;
@define-color window_fg_color rgba(0, 0, 0, 0.87);
@define-color view_bg_color #FFFFFF;
@define-color view_fg_color rgba(0, 0, 0, 0.87);
@define-color headerbar_bg_color #FFFFFF;
@define-color headerbar_fg_color rgba(0, 0, 0, 0.87);
@define-color headerbar_border_color rgba(0, 0, 0, 0.12);
@define-color headerbar_backdrop_color #FFFFFF;
@define-color headerbar_shade_color rgba(0, 0, 0, 0.12);
@define-color card_bg_color #FFFFFF;
@define-color card_fg_color rgba(0, 0, 0, 0.87);
@define-color card_shade_color rgba(0, 0, 0, 0.12);
@define-color dialog_bg_color #FAFAFA;
@define-color dialog_fg_color rgba(0, 0, 0, 0.87);
@define-color popover_bg_color #FFFFFF;
@define-color popover_fg_color rgba(0, 0, 0, 0.87);
@define-color shade_color rgba(0, 0, 0, 0.12);
@define-color scrollbar_outline_color rgba(0, 0, 0, 0.12);

@ -8,3 +8,4 @@ $compact: 'false';
@import '../../_sass/gtk/common-4.0';
@import '../../_sass/gtk/apps-4.0';
@import '../../_sass/gtk/colors-public';
@import '../../_sass/gtk/colors-libadwaita';

@ -1487,12 +1487,11 @@ headerbar entry image:disabled {
headerbar {
transition: background-color 75ms cubic-bezier(0, 0, 0.2, 1), color 75ms cubic-bezier(0, 0, 0.2, 1);
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
color: white;
min-height: 48px;
padding: 0;
margin: 0;
border-radius: 18px 18px 0 0;
background-color: transparent;
}
@ -3202,6 +3201,9 @@ progressbar.osd {
min-width: 6px;
min-height: 6px;
background-color: transparent;
box-shadow: none;
margin: 0;
padding: 0;
}
progressbar.osd trough {
@ -4413,8 +4415,6 @@ colorchooser .popover.osd:backdrop {
**********************/
window {
outline: none;
transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent;
}
window.csd {
@ -4426,12 +4426,19 @@ window.csd.maximized, window.csd.fullscreen, window.csd.tiled, window.csd.tiled-
}
window.background {
box-shadow: 0 8px 6px -5px rgba(0, 0, 0, 0.2), 0 16px 14.4px 2px rgba(0, 0, 0, 0.14), 0 6px 18px 5px rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent, inset 0 1px rgba(255, 255, 255, 0.1);
background-color: transparent;
background-image: linear-gradient(to bottom, #2C2C2C, #2C2C2C 48px, #F2F2F2 48px, #F2F2F2);
}
window:backdrop {
box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent;
transition: box-shadow 75ms cubic-bezier(0, 0, 0.2, 1);
}
window:backdrop.background {
box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 16px 14.4px 2px transparent, 0 6px 18px 5px transparent, inset 0 1px rgba(255, 255, 255, 0.1);
background-color: transparent;
background-image: linear-gradient(to bottom, #2C2C2C, #2C2C2C 48px, #F2F2F2 48px, #F2F2F2);
}
window.ssd {
@ -4984,6 +4991,18 @@ window.dialog > box > stack > box > box > notebook.frame {
border-radius: 0;
}
leaflet {
background-color: transparent;
}
leaflet stack.background {
background-color: transparent;
}
leaflet > box > scrolledwindow > viewport > widget > stack {
background-color: #FFFFFF;
}
.history-view {
background-color: #FFFFFF;
}
@ -5206,14 +5225,6 @@ screenshot-carousel box.frame.view {
padding: 0;
}
window.org-gnome-Builder headerbar {
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
}
window.org-gnome-Builder headerbar splitbutton button {
border-radius: 12px;
}
window.org-gnome-Builder headerbar splitbutton notification button {
margin: 0;
min-height: 24px;
@ -5221,21 +5232,18 @@ window.org-gnome-Builder headerbar splitbutton notification button {
padding: 0;
}
window.org-gnome-Builder headerbar menubutton > button {
border-radius: 12px;
padding: 6px 9px;
}
window.org-gnome-Builder headerbar paneltogglebutton button {
border-radius: 12px;
}
popover.background.global-search > arrow, popover.background.global-search > contents {
popover.background.global-search > arrow,
popover.background.global-search > contents {
padding: 0;
}
panelframeswitcher {
padding: 6px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
panelframetabbar {
border-bottom: none;
}
.frameheader.header {
@ -5264,10 +5272,10 @@ panelframeswitcher {
}
.frameheader.header tabbar.inline > revealer > box .end-action menubutton > button {
margin: 6px;
margin: 3px;
min-height: 24px;
min-width: 24px;
padding: 3px;
padding: 6px;
border-radius: 12px;
}
@ -6034,42 +6042,6 @@ tabbox:drop(active) {
border: none;
}
leaflet {
border-radius: 18px;
}
leaflet, leaflet:backdrop {
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
}
leaflet leaflet {
border-radius: 0;
outline: none;
box-shadow: none;
}
leaflet leaflet, leaflet leaflet:backdrop {
box-shadow: none;
}
leaflet headerbar {
border-radius: 0;
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.12);
}
leaflet stack.background {
background-color: transparent;
}
leaflet > box > scrolledwindow > viewport > widget > stack {
background-color: #FFFFFF;
}
.maximized leaflet, .fullscreen leaflet, .tiled leaflet, .tiled-top leaflet, .tiled-right leaflet, .tiled-bottom leaflet, .tiled-left leaflet {
border-radius: 0;
outline: none;
}
/* GTK NAMED COLORS
----------------
use responsibly! */
@ -6200,3 +6172,84 @@ FIXME this is really an API */
@define-color BLACK_500 #393634;
@define-color BLACK_700 #33302F;
@define-color BLACK_900 #2B2928;
@define-color blue_1 #99c1f1;
@define-color blue_2 #62a0ea;
@define-color blue_3 #3584e4;
@define-color blue_4 #1c71d8;
@define-color blue_5 #1a5fb4;
@define-color green_1 #8ff0a4;
@define-color green_2 #57e389;
@define-color green_3 #33d17a;
@define-color green_4 #2ec27e;
@define-color green_5 #26a269;
@define-color yellow_1 #f9f06b;
@define-color yellow_2 #f8e45c;
@define-color yellow_3 #f6d32d;
@define-color yellow_4 #f5c211;
@define-color yellow_5 #e5a50a;
@define-color orange_1 #ffbe6f;
@define-color orange_2 #ffa348;
@define-color orange_3 #ff7800;
@define-color orange_4 #e66100;
@define-color orange_5 #c64600;
@define-color red_1 #f66151;
@define-color red_2 #ed333b;
@define-color red_3 #e01b24;
@define-color red_4 #c01c28;
@define-color red_5 #a51d2d;
@define-color purple_1 #dc8add;
@define-color purple_2 #c061cb;
@define-color purple_3 #9141ac;
@define-color purple_4 #813d9c;
@define-color purple_5 #613583;
@define-color brown_1 #cdab8f;
@define-color brown_2 #b5835a;
@define-color brown_3 #986a44;
@define-color brown_4 #865e3c;
@define-color brown_5 #63452c;
@define-color light_1 #ffffff;
@define-color light_2 #f6f5f4;
@define-color light_3 #deddda;
@define-color light_4 #c0bfbc;
@define-color light_5 #9a9996;
@define-color dark_1 #77767b;
@define-color dark_2 #5e5c64;
@define-color dark_3 #3d3846;
@define-color dark_4 #241f31;
@define-color dark_5 #000000;
/* GTK NAMED COLORS
----------------
use responsibly! */
@define-color accent_bg_color #1A73E8;
@define-color accent_fg_color white;
@define-color accent_color #1A73E8;
@define-color destructive_bg_color #D93025;
@define-color destructive_fg_color white;
@define-color destructive_color #D93025;
@define-color success_bg_color #0F9D58;
@define-color success_fg_color white;
@define-color success_color #0F9D58;
@define-color warning_bg_color #F4B400;
@define-color warning_fg_color rgba(0, 0, 0, 0.87);
@define-color warning_color #F4B400;
@define-color error_bg_color #D93025;
@define-color error_fg_color white;
@define-color error_color #D93025;
@define-color window_bg_color #F2F2F2;
@define-color window_fg_color rgba(0, 0, 0, 0.87);
@define-color view_bg_color #FFFFFF;
@define-color view_fg_color rgba(0, 0, 0, 0.87);
@define-color headerbar_bg_color #2C2C2C;
@define-color headerbar_fg_color white;
@define-color headerbar_border_color rgba(0, 0, 0, 0.12);
@define-color headerbar_backdrop_color #2C2C2C;
@define-color headerbar_shade_color rgba(0, 0, 0, 0.12);
@define-color card_bg_color #FFFFFF;
@define-color card_fg_color rgba(0, 0, 0, 0.87);
@define-color card_shade_color rgba(0, 0, 0, 0.12);
@define-color dialog_bg_color #FAFAFA;
@define-color dialog_fg_color rgba(0, 0, 0, 0.87);
@define-color popover_bg_color #FFFFFF;
@define-color popover_fg_color rgba(0, 0, 0, 0.87);
@define-color shade_color rgba(0, 0, 0, 0.12);
@define-color scrollbar_outline_color rgba(0, 0, 0, 0.12);

@ -8,3 +8,4 @@ $compact: 'false';
@import '../../_sass/gtk/common-4.0';
@import '../../_sass/gtk/apps-4.0';
@import '../../_sass/gtk/colors-public';
@import '../../_sass/gtk/colors-libadwaita';

Loading…
Cancel
Save