AuroraMiddleware/gtk2
1
0
Fork 0
forked from AuroraMiddleware/gtk
Code Issues Pull Requests Projects Releases Wiki Activity

Adwaita: sync with stable styling

Browse Source 
- fold over changes in teh stable brnch to get the same look

fixes issue #1656
This commit is contained in:
Jakub Steiner 2019-02-06 13:46:00 +01:00
parent 7be59fa8e3
commit 8d537379ed
5 changed files with 706 additions and 684 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
gtk/theme/Adwaita/_colors.scss
View File

@ -2,16 +2,16 @@
// it gets @if ed depending on $variant
$base_color: if($variant == 'light', #ffffff, desaturate(#241f31, 10%));
$base_color: if($variant == 'light', #ffffff, lighten(desaturate(#241f31, 100%), 2%));
$text_color: if($variant == 'light', black, white);
$bg_color: if($variant == 'light', #f6f5f4, desaturate(#3d3846, 10%));
$bg_color: if($variant == 'light', #f6f5f4, darken(desaturate(#3d3846, 100%), 4%));
$fg_color: if($variant == 'light', #2e3436, #eeeeec);
$selected_fg_color: #ffffff;
$selected_bg_color: if($variant == 'light', #3584e4, darken(#3584e4, 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, 12%), darken($bg_color, 8%));
$alt_borders_color: if($variant == 'light', darken($bg_color, 35%), darken($bg_color, 17%));
$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%));
@ -66,4 +66,4 @@ $backdrop_sidebar_bg_color: mix($backdrop_bg_color, $backdrop_base_color, 50%);
$backdrop_scrollbar_bg_color: darken($backdrop_bg_color, 3%);
$backdrop_scrollbar_slider_color: mix($backdrop_fg_color, $backdrop_bg_color, 40%);
$backdrop_menu_color: if($variant == 'light', $backdrop_base_color, mix($backdrop_bg_color, $backdrop_base_color, 20%));
$backdrop_menu_color: if($variant == 'light', $backdrop_base_color, mix($backdrop_bg_color, $backdrop_base_color, 20%));

121
gtk/theme/Adwaita/_common.scss
View File

@ -6,6 +6,9 @@ $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;
$button_radius: 5px;
$menu_radius: 5px;
$window_radius: $button_radius + 3;
* {
padding: 0;
@ -283,11 +286,6 @@ entry {
@extend .dim-label;
}
undershoot {
&.left { @include undershoot(left); }
&.right { @include undershoot(right); }
}
&.flat {
&:focus, &:backdrop, &:disabled, &:backdrop:disabled, & {
min-height: 0;
@ -528,9 +526,9 @@ button {
min-height: 24px;
min-width: 16px;
padding: 4px 8px;
padding: 4px 9px;
border: 1px solid;
border-radius: 3px;
border-radius: $button_radius;
transition: $button_transition;
@include button(normal);
@ -593,8 +591,8 @@ button {
&.image-button {
min-width: 24px;
padding-left: 4px;
padding-right: 4px;
padding-left: 5px;
padding-right: 5px;
}
&.text-button {
@ -635,10 +633,10 @@ button {
// big standalone buttons like in Documents pager
&.osd {
min-width: 24px;
min-width: 26px;
min-height: 32px;
&.image-button { min-width: 32px; }
&.image-button { min-width: 34px; }
color: $osd_fg_color;
border-radius: 5px;
@ -957,8 +955,8 @@ toolbar.inline-toolbar toolbutton:backdrop {
}
%linked_left {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border-top-left-radius: $button_radius;
border-bottom-left-radius: $button_radius;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right-style: none;
@ -967,8 +965,8 @@ toolbar.inline-toolbar toolbutton:backdrop {
%linked_right {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-top-right-radius: $button_radius;
border-bottom-right-radius: $button_radius;
border-right-style: solid;
}
@ -1033,7 +1031,7 @@ modelbutton.flat,
min-height: 26px;
padding-left: 5px;
padding-right: 5px;
border-radius: 3px;
border-radius: $button_radius;
outline-offset: -2px;
@extend %undecorated_button;
@ -1494,7 +1492,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;
@ -1519,6 +1517,18 @@ headerbar {
@extend .dim-label;
}
/* Darken switchbuttons for headerbars. issue #1588 */
stackswitcher button:checked,
button.toggle:checked {
background: if($variant == 'light', image(darken($bg_color, 17%)), image(darken($bg_color, 9%)));
border-color: darken($borders_color, 3%);
border-top-color: darken($borders_color, 8%);
&:backdrop {
@include button(backdrop-active);
}
}
.selection-mode &,
&.selection-mode {
$_hc: mix($top_hilight,$selected_bg_color, 50%); // hilight color
@ -1533,6 +1543,11 @@ headerbar {
background-color: $selected_bg_color;
background-image: none;
box-shadow: inset 0 1px mix($top_hilight, $selected_bg_color, 60%);
label {
text-shadow: none;
color: $selected_fg_color;
}
}
.subtitle:link { @extend *:link:selected; }
@ -1664,6 +1679,8 @@ headerbar {
}
}
separator.titlebutton { opacity: 0; } /* hide the close button separator */
.solid-csd & {
&:backdrop, & {
&:dir(rtl), &:dir(ltr) { // specificity bump
@ -2025,6 +2042,16 @@ menubar,
min-height: 16px;
padding: 4px 8px;
// remove padding and rounding from menubar submenus
menu {
border-radius: 0;
padding:0;
menu {
border-radius: 0;
padding:0;
}
}
&:hover { //Seems like it :hover even with keyboard focus
box-shadow: inset 0 -3px $selected_bg_color;
color: $link_color;
@ -2035,16 +2062,19 @@ menubar,
box-shadow: none;
}
}
// remove padding and rounding from menubar submenu decoration
.csd.popup decoration {border-radius:0;}
}
menu,
.menu,
.context-menu {
// this is not a good solution, commenting out for now margin: 4px; // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
padding: 2px 0px;
padding: 4px 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
&:backdrop { background-color: $backdrop_menu_color; }
@ -2105,12 +2135,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-top-right-radius: $menu_radius;
border-top-left-radius: $menu_radius;
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
}
@ -2160,7 +2194,7 @@ popover>contents {
}
popover>contents.background {
border-radius: 5px;
border-radius: $menu_radius + 4px;
background-color: $popover_bg_color;
box-shadow: 0 1px 2px transparentize(black, 0.7);
.csd &, & { border: 1px solid $borders_color; }
@ -2649,7 +2683,7 @@ 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);
@ -2692,15 +2726,17 @@ 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;
@include button(normal-alt, $edge: $shadow_color);
}
image { color: transparent; } /* only show i / o for the accessible theme */
&:hover slider { @include button(hover-alt, $edge: $shadow_color); }
&:checked slider { border: 1px solid $selected_borders_color; }
@ -3622,16 +3658,6 @@ scrolledwindow {
}
}
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
undershoot {
&.top { @include undershoot(top); }
&.bottom { @include undershoot(bottom); }
&.left { @include undershoot(left); }
&.right { @include undershoot(right); }
}
junction { // the small square between two scrollbars
border-color: transparent;
@ -3814,8 +3840,8 @@ messagedialog { // Message Dialog styling
&.csd { // rounded bottom border styling for csd version
&.background {
// bigger radius for better antialiasing
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px;
border-bottom-left-radius: $window_radius+1;
border-bottom-right-radius: $window_radius+1;
}
.dialog-action-area button {
@ -4385,7 +4411,7 @@ colorchooser .popover.osd { border-radius: 5px; }
* Window Decorations *
*********************/
decoration {
border-radius: 7px 7px 0 0;
border-radius: $window_radius $window_radius 0 0;
// lamefun trick to get rounded borders regardless of CSD use
border-width: 0px;
@ -4427,7 +4453,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);
}
@ -4438,7 +4464,7 @@ decoration {
}
messagedialog.csd & {
border-radius: 7px;
border-radius: $window_radius;
box-shadow: 0 1px 2px transparentize(black, 0.8),
0 0 0 1px transparentize($_wm_border, 0.1);
}
@ -4593,6 +4619,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 *
********/

89
gtk/theme/Adwaita/_drawing.scss
View File

@ -116,8 +116,8 @@
// buttons
@function _border_color($c, $darker: false) {
@if $darker == true { @return darken($c, 30%); }
@else { @return darken($c, 20%); }
@if $darker == true { @return darken($c, 20%); }
@else { @return darken($c, 10%); }
}
@function _text_shadow_color ($tc: $fg_color, $bg: $bg_color) {
@ -140,10 +140,10 @@
//
@if lightness($c)>95% { @return white; }
@else if lightness($c)>90% { @return transparentize(white, 0.2); }
@else if lightness($c)>80% { @return transparentize(white, 0.4); }
@else if lightness($c)>50% { @return transparentize(white, 0.6); }
@else if lightness($c)>40% { @return transparentize(white, 0.8); }
@else { @return transparentize(white, 0.95); }
@else if lightness($c)>80% { @return transparentize(white, 0.5); }
@else if lightness($c)>50% { @return transparentize(white, 0.8); }
@else if lightness($c)>40% { @return transparentize(white, 0.9); }
@else { @return transparentize(white, 0.98); }
}
@mixin _button_text_shadow ($tc:$fg_color, $bg:$bg_color) {
@ -187,6 +187,7 @@
$_hilight_color: _button_hilight_color($c);
$_button_edge: if($edge == none, none, _widget_edge($edge));
$_blank_edge: if($edge == none, none, _widget_edge(transparentize($edge,1)));
$_button_shadow: 0 1px 2px transparentize($shadow_color, 0.03);
@if $t==normal {
//
@ -196,11 +197,11 @@
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%) 95%, darken($c, 7%) 1px),
linear-gradient(to bottom, darken($c, 2%), darken($c, 4%) 95%, darken($c, 6%) 1px)) !global;
$button_fill: if($variant == 'light', linear-gradient(to top, darken($c, 4%) 2px, $c),
linear-gradient(to top, 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);
@include _shadows(inset 0 1px $_hilight_color, $_button_edge, $_button_shadow);
}
@else if $t==hover {
@ -212,14 +213,14 @@
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 95%, darken($c, 7%) 1px) !global;
$button_fill: linear-gradient(to top, $c, 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);
@include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)), $_button_edge, $_button_shadow);
}
@else {
$button_fill: linear-gradient(to bottom, lighten($c, 1%), darken($c, 2%) 95%, darken($c, 4%) 1px) !global;
$button_fill: linear-gradient(to top, darken($c,1%), 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);
@include _shadows(inset 0 1px _button_hilight_color(darken($c, 2%)), $_button_edge, $_button_shadow);
}
background-image: $button_fill;
}
@ -235,16 +236,12 @@
@if $variant == 'light' {
background-image: linear-gradient(to bottom, lighten($c, 5%) 20%, $c 90%);
@include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)),
inset 0 -2px lighten($c, 2%),
inset 0 -1px darken($c, 12%),
$_button_edge);
$_button_edge, $_button_shadow);
}
@else {
background-image: linear-gradient(to bottom, darken($c, 3%) 20%, darken($c, 6%) 90%);
@include _shadows(inset 0 1px $_hilight_color,
inset 0 -2px darken($c, 4%),
inset 0 -1px darken($c, 9%),
$_button_edge);
$_button_edge, $_button_shadow);
}
}
@ -258,16 +255,12 @@
@if $variant == 'light' {
$button_fill: linear-gradient(to bottom, lighten($c, 9%) 10%, lighten($c, 4%) 90%) !global;
@include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)),
inset 0 -2px lighten($c, 5%),
inset 0 -1px darken($c, 10%),
$_button_edge);
$_button_edge, $_button_shadow);
}
@else {
$button_fill: linear-gradient(to bottom, $c 20%, darken($c, 4%) 90%) !global;
@include _shadows(inset 0 1px $_hilight_color,
inset 0 -2px darken($c, 3%),
inset 0 -1px darken($c, 6%),
$_button_edge);
$_button_edge, $_button_shadow);
}
background-image: $button_fill;
}
@ -279,7 +272,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, 14%)), image(darken($c, 9%))) !global;
background-image: $button_fill;
@include _shadows(inset 0 1px transparentize($_hilight_color, 1), $_button_edge);
@ -500,9 +493,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, 2%), 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%), lighten($c, 6%)); }
@if $ov != none { background: $c $ov, $gradient; }
@else { background: $c $gradient; }
@ -571,43 +564,3 @@
border: none; //
box-shadow: none; //
}
@mixin undershoot($p) {
//
// undershoot
//
// $p: position
//
// possible $p values:
// 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;
$_gradient_repeat: repeat-x;
$_bg_pos: center $p;
background-color: transparent; // shouldn't be needed, but better to be sure;
@if ($p == left) or ($p == right) {
$_gradient_dir: top;
$_dash_bg_size: 1px 10px;
$_gradient_repeat: repeat-y;
$_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;
background-repeat: $_gradient_repeat;
background-origin: content-box;
background-position: $_bg_pos;
border: none;
box-shadow: none;
}

763
gtk/theme/Adwaita/gtk-contained-dark.css
View File

File diff suppressed because it is too large Load Diff

405
gtk/theme/Adwaita/gtk-contained.css
View File

File diff suppressed because it is too large Load Diff