isa/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

theme: Papercut fixes from 42 refresh

Browse Source 
- simplified drawing functions
- refactored button drawing
- dropped arrow from all popovers
- cleaned out some legacy css
- fixed many of the issues in #4969

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2150>
This commit is contained in:
Sam Hewitt 2022-02-02 14:47:42 -03:30 committed by Georges Basile Stavracas Neto
parent b2fa3ad98f
commit 4de96ac737
24 changed files with 285 additions and 314 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
data/theme/gnome-shell-sass/_colors.scss
View File

@ -1,7 +1,7 @@
// When color definition differs for dark and light variant, // When color definition differs for dark and light variant,
// it gets @if-ed depending on $variant // it gets @if-ed depending on $variant
$base_color: if($variant == 'light', #fff, lighten(desaturate(#2a2a2a, 20%), 2%)); $base_color: if($variant == 'light', #fff, darken(desaturate(#2a2a2a, 20%), 2%));
$bg_color: if($variant == 'light', #f6f5f4, #2a2a2a); $bg_color: if($variant == 'light', #f6f5f4, #2a2a2a);
$fg_color: if($variant == 'light', transparentize(black, .2), white); $fg_color: if($variant == 'light', transparentize(black, .2), white);
@ -9,12 +9,11 @@ $selected_fg_color: #fff;
$selected_bg_color: if($variant == 'light', #3584e4, #1c71d8); $selected_bg_color: if($variant == 'light', #3584e4, #1c71d8);
$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%)); $selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%));
$borders_color: if($variant == 'light', darken($bg_color, 12%), darken($bg_color, 4%)); $borders_color: if($variant == 'light', transparentize($fg_color, .5), transparentize($fg_color, .9));
$borders_edge: if($variant == 'light', rgba(255,255,255,0.8), lighten($bg_color, 2%)); $borders_edge: if($variant == 'light', rgba(255,255,255,0.8), lighten($bg_color, 2%));
$link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%)); $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%)); $link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%));
$top_hilight: $borders_edge;
$warning_color: if($variant == 'light', #e5a50a, #f5c211);; $warning_color: if($variant == 'light', #e5a50a, #f5c211);;
$error_color: if($variant == 'light', #e01b24, #c01c28); $error_color: if($variant == 'light', #e01b24, #c01c28);

44
data/theme/gnome-shell-sass/_common.scss
View File

@ -89,7 +89,7 @@ stage {
} }
// icon tiles // icon tiles
%icon_tile { %tile {
border-radius: $base_border_radius * 2; // 16px border-radius: $base_border_radius * 2; // 16px
padding: $base_padding; padding: $base_padding;
border: 2px solid transparent; border: 2px solid transparent;
@ -103,6 +103,7 @@ stage {
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
min-height: 22px; min-height: 22px;
font-weight: bold;
padding: $base_padding * 0.5 $base_padding * 4; padding: $base_padding * 0.5 $base_padding * 4;
@include button(normal); @include button(normal);
@ -121,20 +122,17 @@ stage {
} }
// buttons in dialogs/notifications // buttons in dialogs/notifications
// styled to have no shadow and be lighter in color
$bubble_button_radius:$base_border_radius*1.25; $bubble_button_radius:$base_border_radius*1.25;
%bubble_button { %bubble_button {
padding: $base_padding * 2; padding: $base_padding * 2;
border: 0 solid $bg_color !important; font-weight: bold;
border-radius: 0;
border-right-width: 1px !important;
@include button(normal, $bubble_buttons_color, $shadow: none); @include button(normal, $c:$bubble_buttons_color);
&:insensitive { @include button(insensitive, $shadow: none); } &:insensitive { @include button(insensitive, $c:$bubble_buttons_color);}
&:focus { @include button(focus, $shadow: none); } &:focus { @include button(focus, $c:$bubble_buttons_color);}
&:hover { @include button(hover, $bubble_buttons_color, $shadow: none); } &:hover { @include button(hover, $c:$bubble_buttons_color);}
&:active { @include button(active, $bubble_buttons_color, $shadow: none); } &:active { @include button(active, $c:$bubble_buttons_color);}
&:first-child:ltr { &:first-child:ltr {
border-radius: 0 0 0 $bubble_button_radius; border-radius: 0 0 0 $bubble_button_radius;
@ -153,30 +151,8 @@ $bubble_button_radius:$base_border_radius*1.25;
border-radius: 0 0 0 $bubble_button_radius; border-radius: 0 0 0 $bubble_button_radius;
border-left-width: 0 !important; border-left-width: 0 !important;
} }
}
// styling for elements within popovers that look like notifications &:first-child:last-child {
@mixin notification_bubble($flat: false) { border-radius: 0 0 $bubble_button_radius $bubble_button_radius !important;
border-width: 0px;
border-style: solid;
border-radius: $base_border_radius;
margin: $base_margin;
@if $flat {
@include button(undecorated);
} @else {
@include button(normal);
}
&:focus {
@include button(focus);
}
&:hover {
@include button(hover);
}
&:active {
@include button(active);
} }
} }

260
data/theme/gnome-shell-sass/_drawing.scss
View File

@ -40,7 +40,6 @@
@if $t==normal { @if $t==normal {
background-color: $base_color; background-color: $base_color;
border-color: $borders_color; border-color: $borders_color;
} }
@if $t==focus { @if $t==focus {
border-color: if($fc==$selected_bg_color, border-color: if($fc==$selected_bg_color,
@ -56,72 +55,14 @@
} }
} }
// buttons // On-screen Keyboard
@mixin keyboard_key($t, $c:$osd_bg_color, $tc:$osd_fg_color) {
@function draw_border_color ($c) {
//
// colored buttons want the border form the base color
//
@return if($variant == 'light', darken($c, 18%), darken($c, 4%));
}
@function draw_text_shadow_color ($tc:$fg_color, $bg:$bg_color) {
// //
// calculate the color of text shadows // Keyboard key drawing function
// //
// $tc is the text color // $t: key type,
// $bg is the background color // $c: base key color for colored* types
//
$lbg: lightness($bg)/100%;
@if lightness($tc)<50% { @return rgba(255,255,255,$lbg/($lbg*1.3)); }
@else { @return rgba(0,0,0,1-$lbg*0.8); }
}
@function draw_button_hilight_color($c) {
//
// calculate the right top highlight color for buttons
//
// $c: base color;
//
@if lightness($c)>90% { @return white; }
@else if lightness($c)>80% { @return rgba(255,255,255, 0.7); }
@else if lightness($c)>50% { @return rgba(255,255,255, 0.5); }
@else if lightness($c)>40% { @return rgba(255,255,255, 0.3); }
@else { @return rgba(255,255,255, 0.1); }
}
@mixin draw_button_text_shadow ($tc:$fg_color, $bg:$bg_color) {
//
// helper function for the text emboss effect
//
// $tc is the optional text color, not the shadow color
//
// TODO: this functions needs a way to deal with special cases
//
$shadow: draw_text_shadow_color($tc, $bg);
@if lightness($tc)<50% {
text-shadow: 0 1px $shadow;
icon-shadow: 0 1px $shadow;
}
@else {
text-shadow: 0 -1px $shadow;
icon-shadow: 0 -1px $shadow;
}
}
@mixin button($t, $c:$bg_color, $tc:$fg_color, $edge: $borders_edge, $shadow: $shadow_color) {
//
// Button drawing function
//
// $t: button type,
// $c: base button color for colored* types
// $tc: optional text color for colored* types // $tc: optional text color for colored* types
// $edge: set to none to not draw the bottom edge or specify a color to not
// use the default one
// $shadow: set to none to not draw the drop shadow or specify a color to not
// use the default one
// //
// possible $t values: // possible $t values:
// normal, hover, active, insensitive, insensitive-active, // normal, hover, active, insensitive, insensitive-active,
@ -129,81 +70,167 @@
// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated // osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
// //
$hilight_color: draw_button_hilight_color($c); // normal key
$button_edge: if($edge == none, none, draw_widget_edge($edge)); @if $t==normal {
$blank_edge: if($edge == none, none, draw_widget_edge(transparentize($edge,1))); color: $tc;
$button_shadow: if($shadow == none, none, 0 1px 1px 0 $shadow); background-color: lighten($c, 3%);
}
// focused key
@if $t==focus {
color: $tc;
background-color: mix(lighten($c, 3%), $selected_bg_color, 90%);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
&:hover {
background-color: mix(lighten($c, 8%), $selected_bg_color, 90%);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
}
}
// hover key
@else if $t==hover {
color: $tc;
background-color: lighten($c, if($variant == 'light', 8%, 5%));
}
// active key
@else if $t==active {
color: $tc;
background-color: darken($c,3%);
}
// insensitive key
@else if $t==insensitive {
color: $insensitive_fg_color;
background-color: $insensitive_bg_color;
}
// reset
@else if $t==undecorated {
background-color: transparent;
background-image: none;
}
}
// buttons
// since buttons are all flat an borderless now the mixin is simpler
@mixin button($t, $tc:$fg_color, $c:$bg_color) {
//
// Button drawing function
//
// $t: button type,
// $c: base button colors, derived from fg_color
// $tc: base button colors, derived from fg_color
//
// possible $t values:
// normal, hover, active, insensitive, insensitive-active,
// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
//
// normal button // normal button
@if $t==normal { @if $t==normal {
color: $tc; color: $tc;
background-color: lighten($c, 3%); background-color: mix($tc, $c, 5%);
border-color: lighten($c, 3%);
@include draw_shadows($button_shadow);
// box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
text-shadow: none;
icon-shadow: none;
} }
// focused button // focused button
@if $t==focus { @if $t==focus {
color: $tc; color: $tc;
background-color: mix(lighten($c, 3%), $selected_bg_color, 90%); background-color: mix(mix($tc, $c, 5%), $selected_bg_color, 90%);
// border-color: lighten($c, 3%); // border-color: lighten($tc, 3%);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4); box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
text-shadow: none; &:hover {
icon-shadow: none; background-color: mix(mix($tc, $c, 7%), $selected_bg_color, 90%);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
}
} }
// hover button // hover button
@else if $t==hover { @else if $t==hover {
color: $tc; color: $tc;
background-color: lighten($c, if($variant == 'light', 8%, 5%)); background-color: mix($tc, $c, 7%);
border-color: lighten($c, if($variant == 'light', 8%, 5%));
@include draw_shadows($button_shadow);
text-shadow: none;
icon-shadow: none;
} }
// active button // active button
@else if $t==active { @else if $t==active {
color: $tc; color: $tc;
background-color: darken($c,3%); background-color: mix($tc, $c, 2%);
border-color: darken($c,3%);
text-shadow: none;
icon-shadow: none;
box-shadow: none;
} }
// insensitive button // insensitive button
@else if $t==insensitive { @else if $t==insensitive {
color: $insensitive_fg_color; color: transparentize($tc, 0.5);
border-color: $insensitive_bg_color; background-color: transparentize($tc, .95);
background-color: $insensitive_bg_color;
box-shadow: none;
text-shadow: none;
icon-shadow: none;
} }
// default/suggested button
@else if $t==default {
background-color: $selected_bg_color;
color: $selected_fg_color;
&:focus {
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
}
&:hover, &:focus {
background-color: lighten($selected_bg_color, 5%);
color: lighten($selected_fg_color, 5%);
}
&:active {
background-color: darken($selected_bg_color, 7%);
color: darken($selected_fg_color, 7%);
}
&:insensitive {
@include button(insensitive);
background-color: transparentize($selected_bg_color, .5);
color: transparentize($selected_fg_color, .5);
}
}
// reset // reset
@else if $t==undecorated { @else if $t==undecorated {
border-color: transparent;
background-color: transparent; background-color: transparent;
background-image: none; background-color: none;
@include draw_shadows(inset 0 1px rgba(255,255,255,0),$blank_edge);
text-shadow: none;
icon-shadow: none;
} }
} }
// tile
@mixin tile($color) {
@extend %tile;
background-color: transparent;
&:hover,
&:selected:hover {
background-color: transparentize($color, .85);
}
&:focus:hover {
background-color: transparentize($color, .8);
}
&:selected,
&:focus {
background-color: transparentize($color, .9);
}
&:outlined,
&:checked,
&:active {
background-color: transparentize(darken($osd_bg_color, 10%), .5);
}
}
// overview icons // overview icons
// mixin fo tiles in the overview
@mixin overview_icon($color) { @mixin overview_icon($color) {
.overview-icon { .overview-icon {
@extend %icon_tile; @extend %tile;
color: $color; color: $color;
} }
&:hover, &:hover,
&:focus:hover,
&:selected { &:selected {
.overview-icon { .overview-icon {
background-color: transparentize($color, .9); background-color: transparentize($color, .9);
@ -212,23 +239,50 @@
&:focus { &:focus {
.overview-icon { .overview-icon {
background-color: transparentize($color, .7); background-color: transparentize($color, .95);
// border-color: $selected_bg_color; // border-color: $selected_bg_color;
} }
} }
&:drop { &:drop {
.overview-icon { .overview-icon {
border: 2px solid $selected_bg_color; //already 2px transparent so no jumping border: 2px solid transparentize($selected_bg_color, .2); //already 2px transparent so no jumping
background-color: transparentize($selected_bg_color, .8); background-color: transparentize($selected_bg_color, .8);
} }
} }
&:focus,
&:active, &:active,
&:focus:active,
&:checked { &:checked {
.overview-icon { .overview-icon {
background-color: transparentize(darken($osd_bg_color, 10%), .5); background-color: transparentize(darken($osd_bg_color, 10%), .5);
} }
} }
} }
// styling for elements within popovers that look like notifications
@mixin card($flat: false) {
border-radius: $base_border_radius;
margin: $base_margin;
box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
@if $flat {
@include button(undecorated);
box-shadow: none !important;
} @else {
@include button(normal);
}
&:focus {
@include button(focus);
}
&:hover {
@include button(hover);
}
&:active {
@include button(active);
}
}

2
data/theme/gnome-shell-sass/_high-contrast-colors.scss
View File

@ -1,7 +1,6 @@
// When color definition differs for dark and light variant, // When color definition differs for dark and light variant,
// it gets @if ed depending on $variant // it gets @if ed depending on $variant
$base_color: #222; $base_color: #222;
$bg_color: #000; $bg_color: #000;
$fg_color: #fff; $fg_color: #fff;
@ -13,7 +12,6 @@ $borders_color: darken($bg_color,12%);
$borders_edge: transparentize($fg_color, 0.9); $borders_edge: transparentize($fg_color, 0.9);
$link_color: lighten($selected_bg_color,20%); $link_color: lighten($selected_bg_color,20%);
$link_visited_color: lighten($selected_bg_color,10%); $link_visited_color: lighten($selected_bg_color,10%);
$top_hilight: $borders_edge;
$warning_color: #f57900; $warning_color: #f57900;
$error_color: #cc0000; $error_color: #cc0000;

6
data/theme/gnome-shell-sass/widgets/_app-grid.scss
View File

@ -21,7 +21,7 @@ $app_grid_fg_color: #fff;
// Icon tiles in the app grid // Icon tiles in the app grid
.app-well-app, .app-well-app,
%app_well_app { %app_well_app {
@include overview-icon($app_grid_fg_color); @include overview_icon($app_grid_fg_color);
.overview-icon.overview-icon-with-label { .overview-icon.overview-icon-with-label {
padding: 10px 8px 5px 8px; padding: 10px 8px 5px 8px;
@ -35,7 +35,7 @@ $app_grid_fg_color: #fff;
/* App Folders */ /* App Folders */
.app-well-app.app-folder { .app-well-app.app-folder {
background-color: $dash_background_color; background-color: $dash_background_color;
border-radius: $base_border_radius * 2; // same as %icon_tile border-radius: $base_border_radius * 2; // same as %tile
} }
// expanded folder // expanded folder
@ -60,7 +60,7 @@ $app_grid_fg_color: #fff;
& .folder-name-label { padding: 5px 7px; color: $osd_fg_color; } & .folder-name-label { padding: 5px 7px; color: $osd_fg_color; }
& .edit-folder-button { & .edit-folder-button {
@include button(undecorated, $shadow: none); @include button(undecorated);
padding: 0; padding: 0;
width: 36px; width: 36px;
height: 36px; height: 36px;

12
data/theme/gnome-shell-sass/widgets/_calendar.scss
View File

@ -25,7 +25,7 @@
} }
.events-section-title { .events-section-title {
@include notification_bubble($flat: true); @include card($flat: true);
color: $insensitive_fg_color; color: $insensitive_fg_color;
font-weight: bold; font-weight: bold;
padding: .4em; padding: .4em;
@ -33,7 +33,7 @@
/* today button (the date) */ /* today button (the date) */
.datemenu-today-button { .datemenu-today-button {
@include notification_bubble($flat: true); @include card($flat: true);
padding: $base_padding * 1.5; padding: $base_padding * 1.5;
// weekday label // weekday label
@ -52,7 +52,7 @@
/* Calendar */ /* Calendar */
.calendar { .calendar {
@include notification_bubble; @include card;
padding: $base_padding; padding: $base_padding;
// month // month
@ -172,7 +172,7 @@
/* Events */ /* Events */
.events-button { .events-button {
@include notification_bubble; @include card;
padding: $base_padding * 2; padding: $base_padding * 2;
.events-box { .events-box {
@ -198,7 +198,7 @@
/* World clocks */ /* World clocks */
.world-clocks-button { .world-clocks-button {
@include notification_bubble; @include card;
padding: $base_padding * 2; padding: $base_padding * 2;
.world-clocks-grid { .world-clocks-grid {
@ -240,7 +240,7 @@
/* Weather */ /* Weather */
.weather-button { .weather-button {
@include notification_bubble; @include card;
padding: $base_padding * 2; padding: $base_padding * 2;
.weather-box { .weather-box {

2
data/theme/gnome-shell-sass/widgets/_check-box.scss
View File

@ -15,4 +15,4 @@ $check_width: 24px;
&:focus StBin { background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/checkbox-off-focused-light.svg"), url("resource:///org/gnome/shell/theme/checkbox-off-focused.svg"));; } &:focus StBin { background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/checkbox-off-focused-light.svg"), url("resource:///org/gnome/shell/theme/checkbox-off-focused.svg"));; }
&:checked StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox.svg"); } &:checked StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox.svg"); }
&:focus:checked StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox-focused.svg"); } &:focus:checked StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox-focused.svg"); }
} }

5
data/theme/gnome-shell-sass/widgets/_dash.scss
View File

@ -36,6 +36,7 @@ $dash_border_radius: $modal_radius + 8px;
width: 5px; width: 5px;
border-radius:5px; border-radius:5px;
background-color: $osd_fg_color; background-color: $osd_fg_color;
margin-top: 2px;
margin-bottom: 12px; margin-bottom: 12px;
} }
} }
@ -53,7 +54,6 @@ $dash_border_radius: $modal_radius + 8px;
// each app item on the dash // each app item on the dash
.app-well-app { .app-well-app {
padding:0;
margin: 2px; margin: 2px;
} }
@ -61,7 +61,6 @@ $dash_border_radius: $modal_radius + 8px;
.show-apps { .show-apps {
@include overview_icon($osd_fg_color); @include overview_icon($osd_fg_color);
margin: 2px; margin: 2px;
padding: 0;
} }
} }
@ -69,7 +68,7 @@ $dash_border_radius: $modal_radius + 8px;
.dash-separator { .dash-separator {
width: 1px; width: 1px;
margin: 0 $base_margin*2; margin: 0 $base_margin*2;
background-color: transparentize($borders_color,0.5); background-color: transparentize($borders_color,0.2);
} }
// OSD Tooltip // OSD Tooltip

3
data/theme/gnome-shell-sass/widgets/_dialogs.scss
View File

@ -144,8 +144,7 @@
} }
.audio-selection-device { .audio-selection-device {
border: 1px solid $bubble_borders_color; border-radius: $base_border_radius*2;
border-radius: 12px;
&:hover,&:focus { background-color: $hover_bg_color; } &:hover,&:focus { background-color: $hover_bg_color; }
&:active { &:active {
background-color: $selected_bg_color; background-color: $selected_bg_color;

2
data/theme/gnome-shell-sass/widgets/_ibus-popup.scss
View File

@ -32,4 +32,4 @@
.candidate-page-button-previous { border-radius: $base_border_radius 0px 0px $base_border_radius; border-right-width: 0; } .candidate-page-button-previous { border-radius: $base_border_radius 0px 0px $base_border_radius; border-right-width: 0; }
.candidate-page-button-next { border-radius: 0px $base_border_radius $base_border_radius 0px; } .candidate-page-button-next { border-radius: 0px $base_border_radius $base_border_radius 0px; }
.candidate-page-button-icon { icon-size: 1em; } .candidate-page-button-icon { icon-size: 1em; }

41
data/theme/gnome-shell-sass/widgets/_keyboard.scss
View File

@ -32,12 +32,6 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
// the keys // the keys
.keyboard-key { .keyboard-key {
@include button(normal, $c:$key_bg_color, $tc:$osd_fg_color);
&:focus { @include button(focus);}
&:hover, &:checked { @include button(hover, $c: $key_bg_color, $tc:$osd_fg_color);}
&:active { @include button(active, $c: $key_bg_color, $tc:$osd_fg_color); }
@include fontsize($base_font_size + 5); @include fontsize($base_font_size + 5);
font-weight: bold; font-weight: bold;
min-height: $key_size; min-height: $key_size;
@ -45,6 +39,13 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-radius: $key_border_radius; border-radius: $key_border_radius;
box-shadow: 0 1px 0 0 $shadow_color;
@include keyboard_key(normal, $key_bg_color, $osd_fg_color);
&:focus { @include keyboard_key(focus);}
&:hover, &:checked { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
&:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); }
&:grayed { //FIXMEy &:grayed { //FIXMEy
background-color: darken($bg_color, 3%); background-color: darken($bg_color, 3%);
@ -54,17 +55,17 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
// non-character keys // non-character keys
&.default-key { &.default-key {
@include button(normal, $c:$default_key_bg_color, $tc:$osd_fg_color); @include keyboard_key(normal, $default_key_bg_color, $osd_fg_color);
&:hover, &:checked {@include button(hover, $c: $default_key_bg_color, $tc:$osd_fg_color);} &:hover, &:checked {@include keyboard_key(hover, $default_key_bg_color, $osd_fg_color);}
&:active { @include button(active, $c: $default_key_bg_color, $tc:$osd_fg_color);} &:active { @include keyboard_key(active, $default_key_bg_color, $osd_fg_color);}
border-radius: $key_border_radius; border-radius: $key_border_radius;
} }
// enter key is suggested-action // enter key is suggested-action
&.enter-key { &.enter-key {
@include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color); @include keyboard_key(normal, $selected_bg_color, $selected_fg_color);
&:hover, &:checked { @include button(hover, $c: lighten($selected_bg_color, 3%), $tc:$selected_fg_color);} &:hover, &:checked { @include keyboard_key(hover, lighten($selected_bg_color, 3%), $selected_fg_color);}
&:active {@include button(active, $c: darken($selected_bg_color, 2%), $tc:$selected_fg_color);} &:active {@include keyboard_key(active, darken($selected_bg_color, 2%), $selected_fg_color);}
border-radius: $key_border_radius; border-radius: $key_border_radius;
color: $osd_fg_color; color: $osd_fg_color;
} }
@ -97,11 +98,11 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
padding: $base_padding; padding: $base_padding;
.keyboard-key { .keyboard-key {
@include button(normal, $c:$key_bg_color, $tc:$osd_fg_color); @include keyboard_key(normal, $key_bg_color, $osd_fg_color);
&:focus { @include button(focus);} &:focus { @include keyboard_key(focus);}
&:hover, &:checked { @include button(hover, $c: $key_bg_color, $tc:$osd_fg_color);} &:hover, &:checked { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
&:active { @include button(active, $c: $key_bg_color, $tc:$osd_fg_color); } &:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); }
border-radius:$key_border_radius; border-radius:$key_border_radius;
} }
@ -138,10 +139,10 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
border-radius: $base_border_radius - 2px; border-radius: $base_border_radius - 2px;
padding: $base_padding $base_padding*3; padding: $base_padding $base_padding*3;
@include button(undecorated, $c:$key_bg_color, $tc:$osd_fg_color); @include keyboard_key(undecorated, $key_bg_color, $osd_fg_color);
&:focus { @include button(focus);} &:focus { @include keyboard_key(focus);}
&:hover, &:checked { @include button(hover, $c: $key_bg_color, $tc:$osd_fg_color);} &:hover, &:checked { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
&:active { @include button(active, $c: $key_bg_color, $tc:$osd_fg_color); } &:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); }
} }
} }

60
data/theme/gnome-shell-sass/widgets/_login-dialog.scss
View File

@ -13,14 +13,6 @@
$_gdm_bg: $system_bg_color; $_gdm_bg: $system_bg_color;
StEntry {
@if $variant=='dark' {
$_gdm_entry_bg: darken($system_bg_color, 3%);
background-color: $_gdm_entry_bg;
color: $fg_color;
}
}
.modal-dialog-button-box { spacing: 3px; } .modal-dialog-button-box { spacing: 3px; }
.modal-dialog-button { .modal-dialog-button {
padding: 4px 18px; padding: 4px 18px;
@ -47,26 +39,7 @@
color: transparentize($osd_fg_color, 0.3); color: transparentize($osd_fg_color, 0.3);
} }
&:default { &:default {
@include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color); @include button(default);
border-color: $selected_bg_color;
&:hover, &:focus {
@include button(hover,$c:$selected_bg_color, $tc:$selected_fg_color);
$_def_hover_c: lighten($selected_bg_color, 5%);
background-color: $_def_hover_c;
border-color: $_def_hover_c;
}
&:active {
@include button(active,$c:$selected_bg_color, $tc:$selected_fg_color);
$_def_active_c: darken($selected_bg_color, 5%);
background-color: $_def_active_c;
border-color: $_def_active_c;
}
&:insensitive {
@include button(insensitive);
border-color: darken($selected_bg_color, 10%);
background-color: darken($selected_bg_color, 10%);
color: transparentize($selected_fg_color, 0.3);
}
} }
} }
@ -198,3 +171,34 @@
@include fontsize($base_font_size + 1); @include fontsize($base_font_size + 1);
padding-top: 1em; padding-top: 1em;
} }
.login-dialog {
StEntry {
@if $variant=='dark' {
$_gdm_entry_bg: darken($system_bg_color, 3%);
background-color: $_gdm_entry_bg;
color: $fg_color;
}
}
}
// Custom styling for unlock entry
.unlock-dialog {
StEntry {
&:focus {
box-shadow:none;
background-color: transparentize($fg_color, 0.9);
}
&:insensitive {
color: transparentize($fg_color, 0.5);
background-color: transparentize($fg_color, 0.95);
}
}
.cancel-button,
.switch-user-button,
.login-dialog-session-list-button {
border-color: transparent;
background-color: transparentize($fg_color, 0.9);
}
}

4
data/theme/gnome-shell-sass/widgets/_looking-glass.scss
View File

@ -100,7 +100,7 @@
.lg-extension { .lg-extension {
padding: $base_padding*2; padding: $base_padding*2;
@include notification_bubble; @include card;
} }
.lg-extension-name { .lg-extension-name {
@ -132,4 +132,4 @@
font-size: 120%; font-size: 120%;
font-weight: bold; font-weight: bold;
padding: $base_padding; padding: $base_padding;
} }

4
data/theme/gnome-shell-sass/widgets/_message-list.scss
View File

@ -61,7 +61,7 @@
// message bubbles // message bubbles
.message { .message {
@include notification_bubble; @include card;
// icon container // icon container
.message-icon-bin { .message-icon-bin {
@ -148,7 +148,7 @@
border-radius: $base_border_radius; border-radius: $base_border_radius;
color: $fg_color; color: $fg_color;
// colors are lightened since the media controls are in a notification_bubble // colors are lightened since the media controls are in a card
&:hover { &:hover {
background-color: lighten($hover_bg_color, 5%); background-color: lighten($hover_bg_color, 5%);
color: $fg_color; color: $fg_color;

2
data/theme/gnome-shell-sass/widgets/_network-dialog.scss
View File

@ -76,4 +76,4 @@
// no networks // no networks
.no-networks-label { color: $insensitive_fg_color; } .no-networks-label { color: $insensitive_fg_color; }
.no-networks-box { spacing: $base_padding; } .no-networks-box { spacing: $base_padding; }

2
data/theme/gnome-shell-sass/widgets/_osd.scss
View File

@ -42,4 +42,4 @@ $osd_levelbar_height:8px;
.resize-popup { .resize-popup {
@extend %osd_panel; @extend %osd_panel;
} }

73
data/theme/gnome-shell-sass/widgets/_popovers.scss
View File

@ -2,12 +2,14 @@
// the popover itself // the popover itself
.popup-menu-boxpointer { .popup-menu-boxpointer {
// override popover styles for panel menus so
// we can draw a box shadow and no arrow
-arrow-border-radius: $modal_radius; -arrow-border-radius: $modal_radius;
-arrow-background-color: $bg_color; -arrow-background-color: transparent;
-arrow-border-color: $borders_color; -arrow-border-color: transparent;
-arrow-border-width: 1px; -arrow-border-width: 0;
-arrow-base: 24px; -arrow-base: 0;
-arrow-rise: 12px; -arrow-rise: $base_margin; // use this as top margin
-arrow-box-shadow: none; // dreaming bugzilla #689995 -arrow-box-shadow: none; // dreaming bugzilla #689995
margin: $base_margin; // used as distance from the screen edge margin: $base_margin; // used as distance from the screen edge
} }
@ -20,25 +22,10 @@
//.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is //.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is
&.panel-menu { &.panel-menu {
-boxpointer-gap: $base_margin+2px; // distance from the panel -boxpointer-gap: $base_margin+2px; // distance from the panel
// override popover styles for panel menus so
// we can draw a box shadow and no arrow
-arrow-border-radius: $modal_radius;
-arrow-background-color: transparent;
-arrow-border-color: transparent;
-arrow-border-width: 0;
-arrow-base: 0;
-arrow-rise: $base_margin; // use this as top margin
-arrow-box-shadow: none; // dreaming bugzilla #689995
margin-bottom: 1.75em; // so it doesn't touch the bottom of the screen margin-bottom: 1.75em; // so it doesn't touch the bottom of the screen
// style the menu content instead // style the menu content instead
.popup-menu-content { .popup-menu-content {
border-radius: $modal_radius;
border: 1px solid $borders_color;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
background-color: $bg_color;
padding: $base_padding*1.5; padding: $base_padding*1.5;
} }
@ -49,6 +36,10 @@
// popover content; // popover content;
.popup-menu-content { .popup-menu-content {
padding: $base_padding; padding: $base_padding;
border-radius: $modal_radius;
border: 1px solid $borders_edge;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
background-color: $bg_color;
} }
// menu items // menu items
@ -59,8 +50,8 @@
border-radius: $base_border_radius; border-radius: $base_border_radius;
transition: 0.2s all ease; transition: 0.2s all ease;
&:ltr { padding-right:1.75em; padding-left: 0; } &:ltr { padding-right:$base_padding; padding-left: 0; }
&:rtl { padding-right: 0; padding-left:1.75em; } &:rtl { padding-right: 0; padding-left:$base_padding; }
&:hover { &:hover {
background-color: $hover_bg_color; background-color: $hover_bg_color;
@ -68,14 +59,12 @@
&:checked { &:checked {
background-color: $hover_bg_color; background-color: $hover_bg_color;
font-weight: bold;
margin-bottom: 0; margin-bottom: 0;
box-shadow: inset 0 -1px 0 0 darken($hover_bg_color, 5%); box-shadow: inset 0 -1px 0 0 darken($hover_bg_color, 5%);
border-radius: $base_border_radius $base_border_radius 0 0; border-radius: $base_border_radius $base_border_radius 0 0;
&:hover { &:hover {
background-color: darken($hover_bg_color, 4%); background-color: lighten($hover_bg_color, 5%);
} }
} }
@ -85,8 +74,8 @@
} }
&:active { &:active {
background-color: $active_bg_color; background-color: lighten($active_bg_color,3%);
color: $active_fg_color; color: lighten($active_fg_color,3%);
} }
&:insensitive { color: transparentize($fg_color,0.5);} &:insensitive { color: transparentize($fg_color,0.5);}
@ -106,8 +95,6 @@
// symbolic icons in popover // symbolic icons in popover
.popup-menu-arrow, .popup-menu-arrow,
.popup-menu-icon { .popup-menu-icon {
margin: 0;
padding:0;
icon-size: 16px !important; icon-size: 16px !important;
} }
@ -117,32 +104,27 @@
// popover submenus // popover submenus
.popup-sub-menu { .popup-sub-menu {
background-color: $hover_bg_color;
border:none; border:none;
background-color: $hover_bg_color;
border-radius: 0 0 $base_border_radius $base_border_radius; border-radius: 0 0 $base_border_radius $base_border_radius;
padding: 0;
margin-top: 0;
&:active {
background-color: transparent;
}
.popup-menu-ornament { .popup-menu-ornament {
min-width: 14px !important; min-width: 14px !important;
} }
.popup-menu-item { .popup-menu-item {
margin: 0;
border-radius: 0; border-radius: 0;
margin: 0;
padding: $base_padding*1.5 $base_padding*2; padding: $base_padding*1.5 $base_padding*2;
&:last-child:hover{ &:last-child {
border-radius: 0 0 $base_border_radius $base_border_radius; border-radius: 0 0 $base_border_radius $base_border_radius;
} }
} }
.popup-menu-section { .popup-menu-section {
.popup-menu-item:last-child:hover { border-radius: 0 } .popup-menu-item:last-child:hover { border-radius: 0 }
&:last-child .popup-menu-item:last-child:hover { &:last-child .popup-menu-item:last-child {
border-radius: 0 0 $base_border_radius $base_border_radius; border-radius: 0 0 $base_border_radius $base_border_radius;
} }
} }
@ -160,16 +142,11 @@
// separator // separator
.popup-separator-menu-item { .popup-separator-menu-item {
padding: 0; padding:0;
margin: 4px 0;
&:ltr { padding-right:$base_padding; padding-left: 0; }
&:rtl { padding-right: 0; padding-left:$base_padding; }
.popup-separator-menu-item-separator { .popup-separator-menu-item-separator {
height: 1px; //not really the whole box height: 1px; //not really the whole box
margin: 0 !important;
padding: 0 !important;
background-color: $borders_color; background-color: $borders_color;
} }
@ -199,7 +176,7 @@
min-width: 22em; min-width: 22em;
// this is unneeded in at the top-level this menu, hide it // this is unneeded in at the top-level this menu, hide it
.popup-menu-ornament {width:0;padding:0;spacing:0;margin:0;} .popup-menu-ornament {width:0;padding:0;margin:0;}
.popup-menu-item { .popup-menu-item {
&:ltr { padding-left:$base_padding;padding-right:$base_padding*2; } &:ltr { padding-left:$base_padding;padding-right:$base_padding*2; }
@ -213,8 +190,8 @@
-st-icon-style: symbolic; -st-icon-style: symbolic;
} }
// account for icons in submenus with padding
.popup-sub-menu .popup-menu-item > :first-child { .popup-sub-menu .popup-menu-item > :first-child {
// account for icons in submenus with padding
&:ltr { &:ltr {
padding-left: 0; padding-left: 0;
margin-left: $base_icon_size; margin-left: $base_icon_size;

24
data/theme/gnome-shell-sass/widgets/_screen-shield.scss
View File

@ -25,10 +25,11 @@
} }
.unlock-dialog-notifications-container { .unlock-dialog-notifications-container {
margin: 12px 0; margin: 12px;
spacing: 6px; spacing: 6px;
width: 23em; width: 23em;
background-color: transparent; background-color: transparent;
.summary-notification-stack-scrollview { .summary-notification-stack-scrollview {
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
@ -36,39 +37,36 @@
.notification, .notification,
.unlock-dialog-notification-source { .unlock-dialog-notification-source {
padding: 12px 6px; padding: 12px 16px;
border: none; border: none;
background-color: transparentize($osd_bg_color,0.7); background-color: transparentize($osd_fg_color,0.9);
color: $osd_fg_color; color: $osd_fg_color;
border-radius: $modal_radius; border-radius: $modal_radius;
&.critical { background-color: transparentize($osd_bg_color,0.1) } &.critical { background-color: transparentize($osd_fg_color,0.8) }
} }
} }
.unlock-dialog-notification-label { .unlock-dialog-notification-label {
padding: 0px 0px 0px 12px; padding: 0 0 0 12px;
} }
.unlock-dialog-notification-count-text { .unlock-dialog-notification-count-text {
weight: bold; font-weight: bold;
padding: 0 6px; padding: 0 12px;
color: $osd_bg_color; color: $osd_fg_color;
background-color: transparentize($osd_fg_color, 0.7); background-color: transparentize($osd_fg_color, 0.9);
border-radius: 99px; border-radius: 99px;
margin-right: 12px;
} }
.screen-shield-background { //just the shadow, really .screen-shield-background { //just the shadow, really
background: black; background: black;
box-shadow: 0px 2px 4px rgba(0,0,0,0.6); box-shadow: 0 2px 4px rgba(0,0,0,0.6);
} }
#lockDialogGroup { #lockDialogGroup {
background-color: $system_bg_color; background-color: $system_bg_color;
} }
#unlockDialogNotifications { #unlockDialogNotifications {
StButton#vhandle, StButton#hhandle { StButton#vhandle, StButton#hhandle {
background-color: transparentize($bg_color,0.7); background-color: transparentize($bg_color,0.7);

2
data/theme/gnome-shell-sass/widgets/_scrollbars.scss
View File

@ -26,4 +26,4 @@ StScrollBar {
&:hover { background-color: mix($fg_color, $bg_color, 80%); } &:hover { background-color: mix($fg_color, $bg_color, 80%); }
&:active { background-color: $selected_bg_color; } &:active { background-color: $selected_bg_color; }
} }
} }

18
data/theme/gnome-shell-sass/widgets/_search-results.scss
View File

@ -32,23 +32,9 @@
} }
%search_section_content_item { %search_section_content_item {
@extend %icon_tile; @include tile($osd_fg_color);
border-radius: $base_border_radius; border-radius: $base_border_radius !important;
color: $osd_fg_color;
&:focus,
&:hover,
&:selected {
background-color: transparentize($osd_fg_color, .9);
transition-duration: 200ms;
}
&:active,
&:checked {
background-color: transparentize(darken($osd_bg_color, 10%), .1);
}
} }
// "no results" text // "no results" text

2
data/theme/gnome-shell-sass/widgets/_slider.scss
View File

@ -25,4 +25,4 @@ $slider_size: 16px;
color: $fg_color; color: $fg_color;
&:hover { color: $hover_bg_color; } &:hover { color: $hover_bg_color; }
&:active { color: $active_bg_color; } &:active { color: $active_bg_color; }
} }

22
data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
View File

@ -25,27 +25,7 @@ $switcher_border_radius: $modal_radius + 8px;
// each item in the list // each item in the list
.item-box { .item-box {
@extend %icon_tile; @include tile($osd_fg_color);
&:outlined {
background-color: transparentize($osd_fg_color, 0.7);
}
&:hover,
&:selected {
background-color: transparentize($osd_fg_color, .9);
}
&:focus {
background-color: transparentize($osd_fg_color, .7);
// border-color: $selected_bg_color;
}
&:focus,
&:active,
&:checked {
background-color: transparentize(darken($osd_bg_color, 10%), .5);
}
} }
.separator { .separator {

2
data/theme/gnome-shell-sass/widgets/_switches.scss
View File

@ -13,4 +13,4 @@ $switch_width: 48px;
&:checked { &:checked {
background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-on-light.svg"),url("resource:///org/gnome/shell/theme/toggle-on.svg")); background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-on-light.svg"),url("resource:///org/gnome/shell/theme/toggle-on.svg"));
} }
} }

2
data/theme/gnome-shell-sass/widgets/_tiled-previews.scss
View File

@ -16,4 +16,4 @@ $tile_corner_radius: $base_border_radius + 1px;
.tile-preview-left.tile-preview-right.on-primary { .tile-preview-left.tile-preview-right.on-primary {
border-radius: $tile_corner_radius $tile_corner_radius 0 0; border-radius: $tile_corner_radius $tile_corner_radius 0 0;
} }