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,
// 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);
$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_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%));
$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%));
$top_hilight: $borders_edge;
$warning_color: if($variant == 'light', #e5a50a, #f5c211);;
$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_tile {
%tile {
border-radius: $base_border_radius * 2; // 16px
padding: $base_padding;
border: 2px solid transparent;
@ -103,6 +103,7 @@ stage {
border-style: solid;
border-width: 1px;
min-height: 22px;
font-weight: bold;
padding: $base_padding * 0.5 $base_padding * 4;
@include button(normal);
@ -121,20 +122,17 @@ stage {
}
// buttons in dialogs/notifications
// styled to have no shadow and be lighter in color
$bubble_button_radius:$base_border_radius*1.25;
%bubble_button {
padding: $base_padding * 2;
border: 0 solid $bg_color !important;
border-radius: 0;
border-right-width: 1px !important;
font-weight: bold;
@include button(normal, $bubble_buttons_color, $shadow: none);
&:insensitive { @include button(insensitive, $shadow: none); }
&:focus { @include button(focus, $shadow: none); }
&:hover { @include button(hover, $bubble_buttons_color, $shadow: none); }
&:active { @include button(active, $bubble_buttons_color, $shadow: none); }
@include button(normal, $c:$bubble_buttons_color);
&:insensitive { @include button(insensitive, $c:$bubble_buttons_color);}
&:focus { @include button(focus, $c:$bubble_buttons_color);}
&:hover { @include button(hover, $c:$bubble_buttons_color);}
&:active { @include button(active, $c:$bubble_buttons_color);}
&:first-child:ltr {
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-left-width: 0 !important;
}
}
// styling for elements within popovers that look like notifications
@mixin notification_bubble($flat: false) {
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);
&:first-child:last-child {
border-radius: 0 0 $bubble_button_radius $bubble_button_radius !important;
}
}

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

@ -40,7 +40,6 @@
@if $t==normal {
background-color: $base_color;
border-color: $borders_color;
}
@if $t==focus {
border-color: if($fc==$selected_bg_color,
@ -56,72 +55,14 @@
}
}
// buttons
@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) {
// On-screen Keyboard
@mixin keyboard_key($t, $c:$osd_bg_color, $tc:$osd_fg_color) {
//
// calculate the color of text shadows
// Keyboard key drawing function
//
// $tc is the text color
// $bg is the background color
//
$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
// $t: key type,
// $c: base key 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:
// normal, hover, active, insensitive, insensitive-active,
@ -129,81 +70,167 @@
// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
//
$hilight_color: draw_button_hilight_color($c);
$button_edge: if($edge == none, none, draw_widget_edge($edge));
$blank_edge: if($edge == none, none, draw_widget_edge(transparentize($edge,1)));
$button_shadow: if($shadow == none, none, 0 1px 1px 0 $shadow);
// normal key
@if $t==normal {
color: $tc;
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
@if $t==normal {
color: $tc;
background-color: lighten($c, 3%);
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;
background-color: mix($tc, $c, 5%);
}
// focused button
@if $t==focus {
color: $tc;
background-color: mix(lighten($c, 3%), $selected_bg_color, 90%);
// border-color: lighten($c, 3%);
background-color: mix(mix($tc, $c, 5%), $selected_bg_color, 90%);
// border-color: lighten($tc, 3%);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
text-shadow: none;
icon-shadow: none;
&:hover {
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
@else if $t==hover {
color: $tc;
background-color: lighten($c, if($variant == 'light', 8%, 5%));
border-color: lighten($c, if($variant == 'light', 8%, 5%));
@include draw_shadows($button_shadow);
text-shadow: none;
icon-shadow: none;
background-color: mix($tc, $c, 7%);
}
// active button
@else if $t==active {
color: $tc;
background-color: darken($c,3%);
border-color: darken($c,3%);
text-shadow: none;
icon-shadow: none;
box-shadow: none;
background-color: mix($tc, $c, 2%);
}
// insensitive button
@else if $t==insensitive {
color: $insensitive_fg_color;
border-color: $insensitive_bg_color;
background-color: $insensitive_bg_color;
box-shadow: none;
text-shadow: none;
icon-shadow: none;
color: transparentize($tc, 0.5);
background-color: transparentize($tc, .95);
}
// 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
@else if $t==undecorated {
border-color: transparent;
background-color: transparent;
background-image: none;
@include draw_shadows(inset 0 1px rgba(255,255,255,0),$blank_edge);
text-shadow: none;
icon-shadow: none;
background-color: 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
// mixin fo tiles in the overview
@mixin overview_icon($color) {
.overview-icon {
@extend %icon_tile;
@extend %tile;
color: $color;
}
&:hover,
&:focus:hover,
&:selected {
.overview-icon {
background-color: transparentize($color, .9);
@ -212,23 +239,50 @@
&:focus {
.overview-icon {
background-color: transparentize($color, .7);
background-color: transparentize($color, .95);
// border-color: $selected_bg_color;
}
}
&:drop {
.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);
}
}
&:focus,
&:active,
&:focus:active,
&:checked {
.overview-icon {
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,
// it gets @if ed depending on $variant
$base_color: #222;
$bg_color: #000;
$fg_color: #fff;
@ -13,7 +12,6 @@ $borders_color: darken($bg_color,12%);
$borders_edge: transparentize($fg_color, 0.9);
$link_color: lighten($selected_bg_color,20%);
$link_visited_color: lighten($selected_bg_color,10%);
$top_hilight: $borders_edge;
$warning_color: #f57900;
$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
.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 {
padding: 10px 8px 5px 8px;
@ -35,7 +35,7 @@ $app_grid_fg_color: #fff;
/* App Folders */
.app-well-app.app-folder {
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
@ -60,7 +60,7 @@ $app_grid_fg_color: #fff;
& .folder-name-label { padding: 5px 7px; color: $osd_fg_color; }
& .edit-folder-button {
@include button(undecorated, $shadow: none);
@include button(undecorated);
padding: 0;
width: 36px;
height: 36px;

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

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

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

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

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

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

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
.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);
font-weight: bold;
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-style: solid;
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
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
&.default-key {
@include button(normal, $c:$default_key_bg_color, $tc:$osd_fg_color);
&:hover, &:checked {@include button(hover, $c: $default_key_bg_color, $tc:$osd_fg_color);}
&:active { @include button(active, $c: $default_key_bg_color, $tc:$osd_fg_color);}
@include keyboard_key(normal, $default_key_bg_color, $osd_fg_color);
&:hover, &:checked {@include keyboard_key(hover, $default_key_bg_color, $osd_fg_color);}
&:active { @include keyboard_key(active, $default_key_bg_color, $osd_fg_color);}
border-radius: $key_border_radius;
}
// enter key is suggested-action
&.enter-key {
@include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color);
&:hover, &:checked { @include button(hover, $c: lighten($selected_bg_color, 3%), $tc:$selected_fg_color);}
&:active {@include button(active, $c: darken($selected_bg_color, 2%), $tc:$selected_fg_color);}
@include keyboard_key(normal, $selected_bg_color, $selected_fg_color);
&:hover, &:checked { @include keyboard_key(hover, lighten($selected_bg_color, 3%), $selected_fg_color);}
&:active {@include keyboard_key(active, darken($selected_bg_color, 2%), $selected_fg_color);}
border-radius: $key_border_radius;
color: $osd_fg_color;
}
@ -97,11 +98,11 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
padding: $base_padding;
.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);}
&: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); }
&: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); }
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;
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);}
&: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); }
&: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); }
}
}

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

@ -13,14 +13,6 @@
$_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 {
padding: 4px 18px;
@ -47,26 +39,7 @@
color: transparentize($osd_fg_color, 0.3);
}
&:default {
@include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color);
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);
}
@include button(default);
}
}
@ -198,3 +171,34 @@
@include fontsize($base_font_size + 1);
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);
}
}

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

@ -100,7 +100,7 @@
.lg-extension {
padding: $base_padding*2;
@include notification_bubble;
@include card;
}
.lg-extension-name {

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

@ -61,7 +61,7 @@
// message bubbles
.message {
@include notification_bubble;
@include card;
// icon container
.message-icon-bin {
@ -148,7 +148,7 @@
border-radius: $base_border_radius;
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 {
background-color: lighten($hover_bg_color, 5%);
color: $fg_color;

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

@ -2,12 +2,14 @@
// the popover itself
.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-background-color: $bg_color;
-arrow-border-color: $borders_color;
-arrow-border-width: 1px;
-arrow-base: 24px;
-arrow-rise: 12px;
-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: $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
&.panel-menu {
-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
// style the menu content instead
.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;
}
@ -49,6 +36,10 @@
// popover content;
.popup-menu-content {
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
@ -59,8 +50,8 @@
border-radius: $base_border_radius;
transition: 0.2s all ease;
&:ltr { padding-right:1.75em; padding-left: 0; }
&:rtl { padding-right: 0; padding-left:1.75em; }
&:ltr { padding-right:$base_padding; padding-left: 0; }
&:rtl { padding-right: 0; padding-left:$base_padding; }
&:hover {
background-color: $hover_bg_color;
@ -68,14 +59,12 @@
&:checked {
background-color: $hover_bg_color;
font-weight: bold;
margin-bottom: 0;
box-shadow: inset 0 -1px 0 0 darken($hover_bg_color, 5%);
border-radius: $base_border_radius $base_border_radius 0 0;
&:hover {
background-color: darken($hover_bg_color, 4%);
background-color: lighten($hover_bg_color, 5%);
}
}
@ -85,8 +74,8 @@
}
&:active {
background-color: $active_bg_color;
color: $active_fg_color;
background-color: lighten($active_bg_color,3%);
color: lighten($active_fg_color,3%);
}
&:insensitive { color: transparentize($fg_color,0.5);}
@ -106,8 +95,6 @@
// symbolic icons in popover
.popup-menu-arrow,
.popup-menu-icon {
margin: 0;
padding:0;
icon-size: 16px !important;
}
@ -117,32 +104,27 @@
// popover submenus
.popup-sub-menu {
background-color: $hover_bg_color;
border:none;
background-color: $hover_bg_color;
border-radius: 0 0 $base_border_radius $base_border_radius;
padding: 0;
margin-top: 0;
&:active {
background-color: transparent;
}
.popup-menu-ornament {
min-width: 14px !important;
}
.popup-menu-item {
margin: 0;
border-radius: 0;
margin: 0;
padding: $base_padding*1.5 $base_padding*2;
&:last-child:hover{
&:last-child {
border-radius: 0 0 $base_border_radius $base_border_radius;
}
}
.popup-menu-section {
.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;
}
}
@ -160,16 +142,11 @@
// separator
.popup-separator-menu-item {
padding: 0;
&:ltr { padding-right:$base_padding; padding-left: 0; }
&:rtl { padding-right: 0; padding-left:$base_padding; }
padding:0;
margin: 4px 0;
.popup-separator-menu-item-separator {
height: 1px; //not really the whole box
margin: 0 !important;
padding: 0 !important;
background-color: $borders_color;
}
@ -199,7 +176,7 @@
min-width: 22em;
// 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 {
&:ltr { padding-left:$base_padding;padding-right:$base_padding*2; }
@ -213,8 +190,8 @@
-st-icon-style: symbolic;
}
.popup-sub-menu .popup-menu-item > :first-child {
// account for icons in submenus with padding
.popup-sub-menu .popup-menu-item > :first-child {
&:ltr {
padding-left: 0;
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 {
margin: 12px 0;
margin: 12px;
spacing: 6px;
width: 23em;
background-color: transparent;
.summary-notification-stack-scrollview {
padding-top: 0;
padding-bottom: 0;
@ -36,39 +37,36 @@
.notification,
.unlock-dialog-notification-source {
padding: 12px 6px;
padding: 12px 16px;
border: none;
background-color: transparentize($osd_bg_color,0.7);
background-color: transparentize($osd_fg_color,0.9);
color: $osd_fg_color;
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 {
padding: 0px 0px 0px 12px;
padding: 0 0 0 12px;
}
.unlock-dialog-notification-count-text {
weight: bold;
padding: 0 6px;
color: $osd_bg_color;
background-color: transparentize($osd_fg_color, 0.7);
font-weight: bold;
padding: 0 12px;
color: $osd_fg_color;
background-color: transparentize($osd_fg_color, 0.9);
border-radius: 99px;
margin-right: 12px;
}
.screen-shield-background { //just the shadow, really
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 {
background-color: $system_bg_color;
}
#unlockDialogNotifications {
StButton#vhandle, StButton#hhandle {
background-color: transparentize($bg_color,0.7);

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

@ -32,23 +32,9 @@
}
%search_section_content_item {
@extend %icon_tile;
@include tile($osd_fg_color);
border-radius: $base_border_radius;
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);
}
border-radius: $base_border_radius !important;
}
// "no results" text

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
.item-box {
@extend %icon_tile;
&: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);
}
@include tile($osd_fg_color);
}
.separator {