forked from AuroraMiddleware/gtk
Adwaita: GNOME 3.32 changes
- colorsheme based on the new icon HIG color palette - new switches - darker headerbar to contrast with unfocused windows - raised buttons derived from the icon style
This commit is contained in:
Jakub Steiner
Matthias Clasen
parent
a93daa0373
commit
3fa0e4b0be
@ -2,16 +2,16 @@
|
||||
// it gets @if ed depending on $variant
|
||||
|
||||
|
||||
$base_color: if($variant == 'light', #ffffff, #232729);
|
||||
$base_color: if($variant == 'light', #ffffff, lighten(desaturate(#241f31, 20%), 2%));
|
||||
$text_color: if($variant == 'light', black, white);
|
||||
$bg_color: if($variant == 'light', #e8e8e7, #33393b);
|
||||
$bg_color: if($variant == 'light', #f6f5f4, desaturate(#3d3846, 10%));
|
||||
$fg_color: if($variant == 'light', #2e3436, #eeeeec);
|
||||
|
||||
$selected_fg_color: #ffffff;
|
||||
$selected_bg_color: if($variant == 'light', #4a90d9, darken(#4a90d9, 20%));
|
||||
$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 30%), darken($selected_bg_color, 20%));
|
||||
$borders_color: if($variant == 'light', darken($bg_color, 20%), darken($bg_color, 10%));
|
||||
$alt_borders_color: if($variant == 'light', darken($bg_color, 35%), darken($bg_color, 17%));
|
||||
$selected_bg_color: if($variant == 'light', #3584e4, darken(#3584e4, 20%));
|
||||
$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%));
|
||||
$borders_color: if($variant == 'light', darken($bg_color, 18%), darken($bg_color, 10%));
|
||||
$alt_borders_color: if($variant == 'light', darken($bg_color, 24%), darken($bg_color, 18%));
|
||||
$borders_edge: if($variant == 'light', transparentize(white, 0.2), transparentize($fg_color, 0.93));
|
||||
$link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%));
|
||||
$link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%));
|
||||
@ -29,12 +29,12 @@ $scrollbar_slider_active_color: if($variant=='light', darken($selected_bg_color,
|
||||
|
||||
$warning_color: #f57900;
|
||||
$error_color: #cc0000;
|
||||
$success_color: if($variant == 'light', #73d216, darken(#73d216, 10%));
|
||||
$destructive_color: if($variant == 'light', #ef2929, darken(#ef2929, 10%));
|
||||
$success_color: if($variant == 'light', #33d17a, darken(#33d17a, 10%));
|
||||
$destructive_color: if($variant == 'light', #e01b24, darken(#e01b24, 10%));
|
||||
|
||||
$osd_fg_color: #eeeeec;
|
||||
$osd_text_color: white;
|
||||
$osd_bg_color: transparentize(#1c1f20, 0.3);
|
||||
$osd_bg_color: transparentize(darken(#3d3846,10%), 0.3);
|
||||
$osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
|
||||
$osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%);
|
||||
$osd_borders_color: transparentize(black, 0.3);
|
||||
|
||||
@ -6,6 +6,7 @@ $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
$asset_suffix: if($variant=='dark', '-dark', '');
|
||||
$backdrop_transition: 200ms ease-out;
|
||||
$button_transition: all 200ms $ease-out-quad;
|
||||
$menu_radius: 5px;
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
@ -862,12 +863,20 @@ button {
|
||||
|
||||
&:not(.flat):not(:checked):not(:active):not(:disabled):not(:backdrop) {
|
||||
@include button(normal);
|
||||
$button_fill: if($variant == 'light', linear-gradient(to top, darken($bg_color, 4%), $bg_color),
|
||||
linear-gradient(to top, darken($bg_color, 1%), $bg_color));
|
||||
box-shadow: if($variant == 'light', inset 0 -2px darken($bg_color, 12%),
|
||||
inset 0 -2px darken($bg_color, 6%));
|
||||
background-image: $button_fill, $_border_bg;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&:hover:not(:checked):not(:active):not(:disabled):not(:backdrop) {
|
||||
@include button(hover);
|
||||
$button_fill: if($variant == 'light', linear-gradient(to top, $bg_color, lighten($bg_color, 2%)),
|
||||
linear-gradient(to top, darken($bg_color, 1%), lighten($bg_color, 2%)));
|
||||
box-shadow: if($variant == 'light', inset 0 -2px darken($bg_color, 4%),
|
||||
inset 0 -2px darken($bg_color, 2%));
|
||||
background-image: $button_fill, $_border_bg;
|
||||
border-color: transparent;
|
||||
}
|
||||
@ -1094,6 +1103,12 @@ button.color {
|
||||
}
|
||||
}
|
||||
|
||||
/* list buttons */
|
||||
/* tone down as per new designs, see issue #1473 */
|
||||
list row button {
|
||||
@extend %undecorated_button;
|
||||
border: 1px solid transparentize($borders_color, .5);
|
||||
}
|
||||
|
||||
/*********
|
||||
* Links *
|
||||
@ -1490,7 +1505,7 @@ headerbar {
|
||||
border-color: $alt_borders_color;
|
||||
border-radius: 0;
|
||||
|
||||
@include headerbar_fill;
|
||||
@include headerbar_fill(darken($bg_color, 10%));
|
||||
|
||||
&:backdrop {
|
||||
border-color: $backdrop_borders_color;
|
||||
@ -1775,11 +1790,26 @@ headerbar { // headerbar border rounding
|
||||
|
||||
window.devel {
|
||||
headerbar.titlebar:not(.selection-mode) {
|
||||
background: transparent -gtk-icontheme("system-run-symbolic") 90% 0/256px 256px no-repeat,
|
||||
linear-gradient(to left, mix($selected_bg_color, $bg_color, 10%) 8%, $bg_color 25%);
|
||||
$c: darken($bg_color, 10%);
|
||||
$gradient: -gtk-icontheme("system-run-symbolic") 90% 0/256px 256px no-repeat,
|
||||
linear-gradient(to right, transparent 65%, transparentize($selected_bg_color, 0.8)),
|
||||
linear-gradient(to top, darken($c, 3%), $c 3px, lighten($c, 6%));
|
||||
@if $variant == 'dark' {
|
||||
$gradient: -gtk-icontheme("system-run-symbolic") 90% 0/256px 256px no-repeat,
|
||||
linear-gradient(to right, transparent 65%, transparentize($selected_bg_color, 0.9)),
|
||||
linear-gradient(to top, lighten($c, 3%) 3px, lighten($c, 5%));
|
||||
}
|
||||
|
||||
background: $bg_color $gradient;
|
||||
color: transparentize($fg_color,.9);
|
||||
|
||||
label { color: $fg_color; }
|
||||
|
||||
&:backdrop {
|
||||
background: $bg_color -gtk-icontheme("system-run-symbolic") 90% 0/256px 256px no-repeat,
|
||||
image($bg_color); /* background-color would flash */
|
||||
color: transparentize($fg_color,.95);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2067,6 +2097,11 @@ menubar,
|
||||
min-height: 16px;
|
||||
padding: 4px 8px;
|
||||
|
||||
menu {
|
||||
border-radius: 0 0 $menu_radius $menu_radius;
|
||||
menu { border-radius: $menu_radius; }
|
||||
}
|
||||
|
||||
&:hover { //Seems like it :hover even with keyboard focus
|
||||
box-shadow: inset 0 -3px $selected_bg_color;
|
||||
color: $link_color;
|
||||
@ -2079,13 +2114,18 @@ menubar,
|
||||
}
|
||||
}
|
||||
|
||||
// Needed to make the border-radius of menus work
|
||||
// otherwise the background bleeds out of the menu edges
|
||||
.background.popup { background-color: transparent; }
|
||||
|
||||
menu,
|
||||
.menu,
|
||||
.context-menu {
|
||||
margin: 4px; // see https://bugzilla.gnome.org/show_bug.cgi?id=591258
|
||||
padding: 2px 0px;
|
||||
padding: 8px 0px;
|
||||
background-color: $menu_color;
|
||||
border: 1px solid $borders_color; // adds borders in a non composited env
|
||||
border-radius: $menu_radius;
|
||||
|
||||
.csd & { border: none; } // axes borders in a composited env
|
||||
|
||||
@ -2147,12 +2187,16 @@ menu,
|
||||
&.top {
|
||||
margin-top: -6px;
|
||||
border-bottom: 1px solid mix($fg_color, $base_color, 10%);
|
||||
border-top-right-radius: $menu_radius;
|
||||
border-top-left-radius: $menu_radius;
|
||||
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
margin-bottom: -6px;
|
||||
border-top: 1px solid mix($fg_color, $base_color, 10%);
|
||||
border-bottom-right-radius: $menu_radius;
|
||||
border-bottom-left-radius: $menu_radius;
|
||||
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
|
||||
}
|
||||
|
||||
@ -2683,10 +2727,11 @@ switch {
|
||||
|
||||
// similar to the .scale
|
||||
border: 1px solid $borders_color;
|
||||
border-radius: 3px;
|
||||
border-radius: 14px;
|
||||
color: $fg_color;
|
||||
background-color: $dark_fill;
|
||||
text-shadow: 0 1px transparentize(black, 0.9);
|
||||
font-size: 0; /*FIXME: quick workaround for the labels*/
|
||||
|
||||
&:checked {
|
||||
color: $selected_fg_color;
|
||||
@ -2726,11 +2771,12 @@ switch {
|
||||
|
||||
slider {
|
||||
margin: -1px;
|
||||
min-width: 44px;
|
||||
min-height: 26px;
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
border: 1px solid;
|
||||
border-radius: 3px;
|
||||
border-radius: 50%;
|
||||
transition: $button_transition;
|
||||
-gtk-outline-radius: 20px;
|
||||
|
||||
@include button(normal-alt, $edge: $shadow_color);
|
||||
}
|
||||
@ -2766,6 +2812,7 @@ switch {
|
||||
slider { &:checked, & { border-color: $selected_borders_color; } }
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -4415,7 +4462,7 @@ decoration {
|
||||
.ssd & { box-shadow: 0 0 0 1px $_wm_border; } //just doing borders, wm draws actual shadows
|
||||
|
||||
.csd.popup & {
|
||||
border-radius: 0;
|
||||
border-radius: $menu_radius;
|
||||
box-shadow: 0 1px 2px transparentize(black, 0.8),
|
||||
0 0 0 1px transparentize($_wm_border, 0.1);
|
||||
}
|
||||
@ -4568,6 +4615,23 @@ stackswitcher button.text-button.circular { // FIXME aggregate with buttons
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*************
|
||||
* App Icons *
|
||||
*************/
|
||||
/* Outline for low res icons */
|
||||
.lowres-icon {
|
||||
-gtk-icon-shadow: 1px 1px rgba(0,0,0,0.3),
|
||||
-1px -1px rgba(0,0,0,0.3),
|
||||
-1px 1px rgba(0,0,0,0.3),
|
||||
1px -1px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
/* Drapshadow for large icons */
|
||||
.icon-dropshadow {
|
||||
-gtk-icon-shadow: 0 2px 12px rgba(0,0,0,0.2),
|
||||
0 1px 2px rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
/*********
|
||||
* Emoji *
|
||||
********/
|
||||
|
||||
@ -195,8 +195,8 @@
|
||||
outline-color: transparentize($tc, 0.7);
|
||||
border-color: if($c != $bg_color, _border_color($c), $borders_color);
|
||||
border-bottom-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
|
||||
$button_fill: if($variant == 'light', linear-gradient(to bottom, $c, darken($c, 4%) 60%, darken($c, 10%)),
|
||||
linear-gradient(to bottom, darken($c, 2%), darken($c, 4%) 60%, darken($c, 6%))) !global;
|
||||
$button_fill: if($variant == 'light', linear-gradient(to top, darken($c,12%) 2px, darken($c, 4%) 2px, $c),
|
||||
linear-gradient(to top, darken($c,6%) 2px, darken($c,1%) 2px, $c)) !global;
|
||||
background-image: $button_fill;
|
||||
@include _button_text_shadow($tc, $c);
|
||||
@include _shadows(inset 0 1px $_hilight_color, $_button_edge);
|
||||
@ -211,12 +211,12 @@
|
||||
border-color: if($c != $bg_color, _border_color($c), $borders_color);
|
||||
border-bottom-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
|
||||
@if $variant == 'light' {
|
||||
$button_fill: linear-gradient(to bottom, lighten($c, 6%), $c 60%, darken($c, 4%)) !global;
|
||||
$button_fill: linear-gradient(to top, darken($c, 4%) 2px, $c 2px, lighten($c, 1%) 1px) !global;
|
||||
@include _button_text_shadow($tc, lighten($c, 6%));
|
||||
@include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)), $_button_edge);
|
||||
}
|
||||
@else {
|
||||
$button_fill: linear-gradient(to bottom, lighten($c, 1%), darken($c, 2%) 60%, darken($c, 4%)) !global;
|
||||
$button_fill: linear-gradient(to top, darken($c, 2%) 2px, darken($c,1%) 2px, lighten($c, 1%) 1px) !global;
|
||||
@include _button_text_shadow($tc,lighten($c, 6%));
|
||||
@include _shadows(inset 0 1px _button_hilight_color(darken($c, 2%)), $_button_edge);
|
||||
}
|
||||
@ -278,7 +278,7 @@
|
||||
color: $tc;
|
||||
outline-color: transparentize($tc, 0.7);
|
||||
border-color: if($c != $bg_color, _border_color($c), $borders_color);
|
||||
$button_fill: image(darken($c, 6%)) !global;
|
||||
$button_fill: if($variant == 'light', image(darken($c, 12%)), image(darken($c, 9%))) !global;
|
||||
background-image: $button_fill;
|
||||
@include _shadows(inset 0 1px transparentize($_hilight_color, 1), $_button_edge);
|
||||
|
||||
@ -499,9 +499,9 @@
|
||||
// $hc: top highlight color
|
||||
// $ov: a background layer for background shorthand (hence no commas!)
|
||||
//
|
||||
$gradient: linear-gradient(to top, darken($c, 13%), darken($c, 2%) 2px, $c 3px);
|
||||
$gradient: linear-gradient(to top, darken($c, 4%), $c 3px, lighten($c, 1%));
|
||||
|
||||
@if $variant == 'dark' { $gradient: linear-gradient(to top, darken($c, 3%), darken($c, 1%) 2px, $c 3px); }
|
||||
@if $variant == 'dark' { $gradient: linear-gradient(to top, lighten($c, 4%) 3px, lighten($c, 5%)); }
|
||||
|
||||
@if $ov != none { background: $c $ov, $gradient; }
|
||||
@else { background: $c $gradient; }
|
||||
@ -598,8 +598,6 @@
|
||||
// top, bottom, right, left
|
||||
//
|
||||
|
||||
$_undershoot_color_dark: transparentize(black, 0.8);
|
||||
$_undershoot_color_light: transparentize(white, 0.8);
|
||||
|
||||
$_gradient_dir: left;
|
||||
$_dash_bg_size: 10px 1px;
|
||||
@ -615,9 +613,6 @@
|
||||
$_bg_pos: $p center;
|
||||
}
|
||||
|
||||
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
|
||||
$_undershoot_color_light 50%,
|
||||
$_undershoot_color_dark 50%);
|
||||
|
||||
padding-#{$p}: 1px;
|
||||
background-size: $_dash_bg_size;
|
||||
@ -626,4 +621,27 @@
|
||||
background-position: $_bg_pos;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
|
||||
|
||||
// Replace dashed line with light shadow
|
||||
$_undershoot_shadow_color: if($variant=='light', darken(white, 20%), lighten(black, 8%));
|
||||
$_undershoot_shadow_alpha: 0.8;
|
||||
|
||||
@if ($p == "left") {
|
||||
box-shadow: inset 2px 0 0 transparentize($_undershoot_shadow_color, $_undershoot_shadow_alpha),
|
||||
inset 1px 0 0 transparentize(darken($_undershoot_shadow_color, 20%), $_undershoot_shadow_alpha);
|
||||
}
|
||||
@else if ($p == "right") {
|
||||
box-shadow: inset -2px 0 0 transparentize($_undershoot_shadow_color,$_undershoot_shadow_alpha),
|
||||
inset -1px 0 0 transparentize( darken($_undershoot_shadow_color, 20%), $_undershoot_shadow_alpha);
|
||||
}
|
||||
@else if ($p == "top") {
|
||||
box-shadow: inset 0 2px 0 0 transparentize($_undershoot_shadow_color,$_undershoot_shadow_alpha),
|
||||
inset 0 1px 0 0 transparentize(darken($_undershoot_shadow_color, 20%), $_undershoot_shadow_alpha);
|
||||
}
|
||||
@else if ($p == "bottom") {
|
||||
box-shadow: inset 0 -2px 0 0 transparentize($_undershoot_shadow_color,$_undershoot_shadow_alpha),
|
||||
inset 0 -1px 0 0 transparentize(darken($_undershoot_shadow_color, 20%), $_undershoot_shadow_alpha);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user