kevin/gnome-shell-dark-theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Rebase against gnome 45

Browse source
This commit is contained in:
Kevin MacMartin 2023-10-09 22:24:14 -04:00
parent 7db7286504
commit 71ec7f64f0
16 changed files with 272 additions and 311 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
gnome-shell.scss → gnome-shell-dark.scss
View file

6
gnome-shell-light.scss Normal file
View file

@ -0,0 +1,6 @@
$variant: 'light';
@import "gnome-shell-sass/_colors"; //use gtk colors
@import "gnome-shell-sass/_drawing";
@import "gnome-shell-sass/_common";
@import "gnome-shell-sass/_widgets";

8
gnome-shell-sass/_colors.scss
View file

@ -22,14 +22,14 @@ $outer_borders_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg
$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%));
$warning_color: if($variant == 'light', $yellow_5, $yellow_3); $warning_color: if($variant == 'light', $yellow_4, $yellow_3);
$error_color: if($variant == 'light', $red_3, $red_4); $error_color: if($variant == 'light', $red_4, $red_3);
$success_color: if($variant == 'light', $green_4, $green_5); $success_color: if($variant == 'light', $green_4, $green_5);
$destructive_color: $error_color; $destructive_color: $error_color;
// color definitions for OSD elements // color definitions for OSD elements
$osd_fg_color: if($variant == 'light', $_dark_base_color, $light_1); $osd_fg_color: $light_1;
$osd_bg_color: if($variant == 'light', $light_3, lighten($_dark_base_color, 5%)); $osd_bg_color: lighten($_dark_base_color, 5%);
// derived osd colors // derived osd colors
$osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5); $osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);

33
gnome-shell-sass/_common.scss
View file

@ -90,6 +90,7 @@ stage {
&:selected, &:selected,
&:active { @include button(active);} &:active { @include button(active);}
&:checked { @include button(checked);} &:checked { @include button(checked);}
&.default { @include button(default);}
&.flat { &.flat {
@include button(normal, $flat:true); @include button(normal, $flat:true);
@ -99,6 +100,7 @@ stage {
&:selected, &:selected,
&:active { @include button(active, $flat:true);} &:active { @include button(active, $flat:true);}
&:checked { @include button(checked, $flat:true);} &:checked { @include button(checked, $flat:true);}
&.default { @include button(default, $flat:false);}
} }
} }
@ -167,6 +169,7 @@ stage {
// tooltip // tooltip
%tooltip { %tooltip {
background-color: transparentize(black, 0.1); background-color: transparentize(black, 0.1);
border: 1px solid transparentize($light_1, 0.9);
color: $light_1; color: $light_1;
border-radius: 99px; border-radius: 99px;
@ -174,6 +177,7 @@ stage {
text-align: center; text-align: center;
@if $is_highcontrast { @if $is_highcontrast {
background-color: black;
border-color: $hc_inset_color; border-color: $hc_inset_color;
} }
} }
@ -245,9 +249,9 @@ stage {
%osd_entry { %osd_entry {
@extend %entry_common; @extend %entry_common;
@include entry(normal, $c:$osd_fg_color,); @include entry(normal, $c:$osd_fg_color,);
&:hover { @include entry(hover, $c:$osd_fg_color,);} &:hover { @include entry(hover, $c:$osd_fg_color);}
&:focus { @include entry(focus, $c:$osd_fg_color,);} &:focus { @include entry(focus, $c:$osd_fg_color);}
&:insensitive { @include entry(insensitive, $c:$osd_fg_color,);} &:insensitive { @include entry(insensitive, $c:$osd_fg_color);}
StLabel.hint-text {color: transparentize($osd_fg_color, 0.3); } StLabel.hint-text {color: transparentize($osd_fg_color, 0.3); }
} }
@ -255,18 +259,18 @@ stage {
// buttons on OSD elements // buttons on OSD elements
%osd_button { %osd_button {
@extend %button_common; @extend %button_common;
@include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color); @include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);
&:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color);} &:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
&:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color);} &:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
&:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color);} &:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
&:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color);} &:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
&:outlined,&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color);} &:outlined,&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
} }
%osd_button_flat { %osd_button_flat {
@extend %osd_button; @extend %osd_button;
@include button(undecorated); @include button(undecorated, $osd:true);
&:insensitive { @include button(undecorated, $tc:$osd_fg_color, $c:$osd_bg_color);} &:insensitive { @include button(undecorated, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
} }
/* System Elements */ /* System Elements */
@ -275,13 +279,14 @@ stage {
%system_entry { %system_entry {
@extend %entry_common; @extend %entry_common;
@include entry(normal, $c:$system_fg_color,); @include entry(normal, $c:$system_fg_color,);
&:hover { @include entry(hover, $c:$system_fg_color,);} &:hover { @include entry(hover, $c:$system_fg_color);}
&:focus { @include entry(focus, $c:$system_fg_color,);} &:focus { @include entry(focus, $c:$system_fg_color, $fc:$selected_bg_color);}
&:insensitive { @include entry(insensitive, $c:$system_fg_color,);} &:insensitive { @include entry(insensitive, $c:$system_fg_color);}
StLabel.hint-text { color: transparentize($system_fg_color, 0.3);} StLabel.hint-text { color: transparentize($system_fg_color, 0.3);}
} }
// buttons // buttons
%system_button { %system_button {
@include button(normal, $tc:$system_fg_color, $c:$system_bg_color); @include button(normal, $tc:$system_fg_color, $c:$system_bg_color);

102
gnome-shell-sass/_drawing.scss
View file

@ -25,7 +25,7 @@
// Text entries // Text entries
@mixin entry($t, $c) { @mixin entry($t, $c, $fc:$selected_bg_color) {
// //
// Entries drawing function // Entries drawing function
// //
@ -46,8 +46,8 @@
} }
@if $t==focus { @if $t==focus {
background-color: mix(transparentize($c, 0.75), $selected_bg_color, 95%); background-color: mix(transparentize($c, 0.75), $fc, 95%);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3); box-shadow: inset 0 0 0 2px transparentize($fc, 0.3);
color: $c; color: $c;
&:hover {} &:hover {}
} }
@ -143,11 +143,15 @@
// //
// since buttons are all flat an borderless now the mixin is simpler // since buttons are all flat an borderless now the mixin is simpler
@mixin button($t, $tc:$fg_color, $c:$bg_color, $flat: false) { @mixin button($t, $tc:$fg_color, $c:$bg_color, $flat: false, $osd: false) {
$button_bg_color: mix($tc, $c, $button_mix_factor); $button_bg_color: mix($tc, $c, $button_mix_factor);
transition-duration: 100ms; transition-duration: 100ms;
@if $osd {
$button_bg_color: transparentize($tc, 0.9);
}
// normal button // normal button
@if $t==normal { @if $t==normal {
color: $tc; color: $tc;
@ -210,8 +214,8 @@
// insensitive button // insensitive button
@else if $t==insensitive { @else if $t==insensitive {
color: transparentize($tc, 0.5); color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5));
background-color: transparentize($tc, .95); background-color: if($variant == 'light', transparentize($tc, .9), transparentize($tc, .95));
} }
// default/suggested button // default/suggested button
@ -245,7 +249,6 @@
&:insensitive { &:insensitive {
@include button(insensitive); @include button(insensitive);
background-color: transparent; background-color: transparent;
color: transparentize($selected_fg_color, .5);
} }
} }
} }
@ -344,9 +347,6 @@
transition-duration: 100ms; transition-duration: 100ms;
padding: $base_padding*1.5 $base_padding*2; padding: $base_padding*1.5 $base_padding*2;
&:ltr {padding-left: $base_padding;}
&:rtl {padding-right: $base_padding;}
@if $flat { @if $flat {
@include button(undecorated); @include button(undecorated);
box-shadow: none !important; box-shadow: none !important;
@ -360,3 +360,85 @@
&:active {@include button(active, $c:$bg);} &:active {@include button(active, $c:$bg);}
&:checked {@include button(checked, $c:$bg);} &:checked {@include button(checked, $c:$bg);}
} }
//
// Panel menu/button drawing function
//
// $bg: background color, derived from $panel_fg_color
// $fg: foreground color, also derived from $panel_fg_color
//
// $flat: if true, the button is filled instead of transparent
// $highlighted_child: if true, applies some special overrides for to a
// child element, see _panel.scss for details
// $child_class: class name of the child element
//
@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $flat: true, $highlighted_child: false, $child_class:"") {
transition-duration: 150ms;
border: 3px solid transparent;
border-radius: 99px;
font-weight: bold;
background-color: transparent;
color: $fg;
@if $flat {
box-shadow: none;
&:active, &:focus, &:checked {
box-shadow: inset 0 0 0 100px transparentize($fg, 0.75);
&:hover {
box-shadow: inset 0 0 0 100px transparentize($fg, 0.65);
}
}
&:hover {
box-shadow: inset 0 0 0 100px transparentize($fg, 0.8);
}
} @else {
box-shadow: inset 0 0 0 100px transparentize($bg, 0.2);
&:active, &:focus, &:checked {
box-shadow: inset 0 0 0 100px $bg;
&:hover {
box-shadow: inset 0 0 0 100px transparentize($bg, 0.05);
}
}
&:hover {
box-shadow: inset 0 0 0 100px transparentize($bg, 0.1);
}
}
// some overrides to style a child element
@if $highlighted_child {
box-shadow: none !important;
#{$child_class} {
transition-duration: 150ms;
border: 3px solid transparent;
border-radius: 99px;
}
&:active, &:focus, &:checked {
box-shadow: none !important;
#{$child_class} {
box-shadow: inset 0 0 0 100px transparentize($fg, 0.75);
&:hover {
box-shadow: inset 0 0 0 100px transparentize($fg, 0.65) !important;
}
}
}
&:hover {
box-shadow: none !important;
#{$child_class} {
box-shadow: inset 0 0 0 100px transparentize($fg, 0.8);
}
}
}
}

8
gnome-shell-sass/widgets/_app-grid.scss
View file

@ -40,9 +40,9 @@ $app_icon_size: 96px;
// expanded folder // expanded folder
.app-folder-dialog { .app-folder-dialog {
border-radius: $modal_radius*4; border-radius: $modal_radius*4;
background-color: $bg_color; background-color: $system_overlay_bg_color;
padding: $base_padding*2; padding: $base_padding*2;
box-shadow:inset 0 0 0 1px $outer_borders_color; box-shadow:inset 0 0 0 1px $system_borders_color;
@if $is_highcontrast { @if $is_highcontrast {
box-shadow:inset 0 0 0 2px $hc_inset_color; box-shadow:inset 0 0 0 2px $hc_inset_color;
@ -59,7 +59,7 @@ $app_icon_size: 96px;
& .folder-name-entry { & .folder-name-entry {
width: 12em; width: 12em;
border-radius: $base_border_radius*2; color: $system_fg_color !important;
} }
/* FIXME: this is to keep the label in sync with the entry */ /* FIXME: this is to keep the label in sync with the entry */
@ -122,6 +122,7 @@ $app_icon_size: 96px;
height: 10px; height: 10px;
border-radius: 10px; // the same as height&width border-radius: 10px; // the same as height&width
background-color: white; background-color: white;
transition-duration: 400ms;
} }
} }
@ -168,6 +169,7 @@ $app_icon_size: 96px;
width: 24px; width: 24px;
height: 24px; height: 24px;
border-radius: 99px; border-radius: 99px;
transition-duration: 100ms;
> StIcon { color: $system_fg_color;} > StIcon { color: $system_fg_color;}

122
gnome-shell-sass/widgets/_calendar.scss
View file

@ -48,110 +48,80 @@
@extend %heading; @extend %heading;
padding: 8px 0; padding: 8px 0;
} }
.pager-button { .pager-button {
background-color: transparent; @extend .button, .flat;
padding: 0 !important;
height: 32px; height: 32px;
width: 32px; width: 32px;
margin: 2px; margin: 2px;
border-radius: $base_border_radius; border-radius: $base_border_radius;
&:hover, &:focus {background-color: $hover_bg_color;} transition-duration: 100ms;
&:active {background-color: $active_bg_color;}
@if $is_highcontrast {
border:1px solid $hc_inset_color;
}
} }
} }
$calendar_day_size: 3em; // day style
.calendar-day {
.calendar-day-base {
text-align: center;
margin: 2px;
padding: 0 !important;
height: $calendar_day_size !important;
width: $calendar_day_size !important;
border-radius: 99px;
transition-duration: 100ms;
@extend %numeric; @extend %numeric;
@extend %smaller; @extend %smaller;
@extend .button, .flat;
&:hover {background-color: $hover_bg_color;} border-radius: 99px;
&:focus { height: 3em !important;
background-color: mix($bg_color, $selected_bg_color, 80%); width: 3em !important;
color: inherit; margin: 2px;
box-shadow:inset 0 0 0 2px transparentize($selected_bg_color, 0.4); padding: 0 !important;
} font-weight: 600;
text-align: center;
&:active,&:selected { transition-duration: 100ms;
color: $active_fg_color;
background-color: $active_bg_color;
&:focus {
background-color: mix($active_bg_color, $selected_bg_color, 80%);
}
}
// day of week heading // day of week heading
&.calendar-day-heading { &.calendar-day-heading {
background-color: transparent;
color: $insensitive_fg_color; color: $insensitive_fg_color;
padding-top: $base_padding; height: 0.93em !important; // force heading to be smaller height
height: 16px !important; // force heading to be smaller height padding-top: $base_padding !important;
font-weight: 600; margin-bottom: 0;
@extend %smaller;
}
}
.calendar-day {
font-weight: 600;
@if $is_highcontrast {
border:1px solid $hc_inset_color;
border-radius: 9px; border-radius: 9px;
} }
}
.calendar-work-day {} &.calendar-weekday {}
.calendar-nonwork-day {color: $insensitive_fg_color;}
.calendar-other-month-day { &.calendar-weekend {
color: transparentize($fg_color, 0.5); color: $insensitive_fg_color;
&.calendar-nonwork-day { }
color: transparentize($insensitive_fg_color, 0.5);
&.calendar-other-month {
color: transparentize($insensitive_fg_color, 0.7) !important;
font-weight: normal;
}
&.calendar-today {
@extend .button, .default;
color: $selected_fg_color; /* override weekends */
}
&.calendar-day-with-events {
background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/calendar-today-light.svg"),url("resource:///org/gnome/shell/theme/calendar-today.svg"));
background-size: contain;
} }
} }
// Today // week number style
.calendar-today {
background-color: $selected_bg_color;
font-weight: 800;
color: $selected_fg_color !important;
&:hover,&:focus {
background-color:lighten($selected_bg_color, 3%);
color: inherit;
}
&:active,&:selected {
background-color: $selected_bg_color;
color: inherit;
&:hover,&:focus {
background-color:lighten($selected_bg_color, 3%);
color: inherit;
}
}
}
.calendar-day-with-events {
background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/calendar-today-light.svg"),url("resource:///org/gnome/shell/theme/calendar-today.svg"));
background-size: contain;
}
.calendar-week-number { .calendar-week-number {
@include fontsize($base_font_size - 4); @include fontsize($base_font_size - 4);
font-weight: bold; font-weight: bold;
font-feature-settings: "tnum"; font-feature-settings: "tnum";
text-align: center;
margin: 6px; margin: 6px;
padding: 0 $base_padding; padding: 0 $base_padding;
border-radius: 3px; border-radius: 3px;
background-color: transparentize($fg_color, 0.9); background-color: transparentize($fg_color, 0.9);
color: $insensitive_fg_color color: $insensitive_fg_color;
@if $is_highcontrast {
border:1px solid $hc_inset_color;
}
} }
} }

5
gnome-shell-sass/widgets/_login-lock.scss
View file

@ -155,6 +155,11 @@ $_gdm_dialog_width: 23em;
.unlock-dialog { .unlock-dialog {
background-color: transparent; background-color: transparent;
// %system_entry style override to have neutral focus color with wallpaper background
.login-dialog-prompt-entry {
&:focus { @include entry(focus, $c:$system_fg_color, $fc:transparentize($system_fg_color, 0.5));}
}
} }
.screen-shield-background { // just the shadow, really .screen-shield-background { // just the shadow, really

4
gnome-shell-sass/widgets/_looking-glass.scss
View file

@ -7,8 +7,8 @@
background-color: transparentize($osd_bg_color,0.02); background-color: transparentize($osd_bg_color,0.02);
color: $osd_fg_color; color: $osd_fg_color;
border-radius: 0 0 $modal_radius $modal_radius; border-radius: $modal_radius;
margin-top: $base_margin;
border-top-width: 0; border-top-width: 0;
padding: $base_padding; padding: $base_padding;
spacing: $base_padding; spacing: $base_padding;

3
gnome-shell-sass/widgets/_notifications.scss
View file

@ -2,14 +2,13 @@
$notification_banner_height: 64px; $notification_banner_height: 64px;
$notification_banner_width: 34em; $notification_banner_width: 34em;
$notification_banner_radius: $base_border_radius*1.5;
// Banner notifications // Banner notifications
.notification-banner { .notification-banner {
min-height: $notification_banner_height; min-height: $notification_banner_height;
width: $notification_banner_width; width: $notification_banner_width;
box-shadow: 0 2px 4px 2px $shadow_color; box-shadow: 0 2px 4px 2px $shadow_color;
border-radius: $notification_banner_radius; border-radius: $modal_radius;
margin: $base_margin; margin: $base_margin;
.notification-actions { .notification-actions {

234
gnome-shell-sass/widgets/_panel.scss
View file

@ -1,7 +1,9 @@
/* Top Bar */ /* Top Bar */
// a.k.a. the panel // a.k.a. the panel
$panel_bg_color: if($variant == 'light', $light_3, $dark_4); $privacy_indicator_color: $orange_3;
$panel_bg_color: if($variant == 'light', $light_3, $dark_5);
$panel_fg_color: if($variant == 'light', $fg_color, darken($fg_color, 5%)); $panel_fg_color: if($variant == 'light', $fg_color, darken($fg_color, 5%));
$panel_border_color: if($variant == 'light', darken($panel_bg_color, 2%), $panel_bg_color); $panel_border_color: if($variant == 'light', darken($panel_bg_color, 2%), $panel_bg_color);
@ -17,109 +19,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
transition-duration: $panel_transition_duration; transition-duration: $panel_transition_duration;
box-shadow: inset 0 -1px 0 0 $panel_border_color; box-shadow: inset 0 -1px 0 0 $panel_border_color;
// transparent panel on lock & login screens
&.unlock-screen,
&.login-screen,
&:overview {
background-color: transparent;
box-shadow: none;
.panel-button {
color: $panel_system_fg_color !important;
}
}
// panel menus // panel menus
.panel-button { .panel-button {
font-weight: bold; @include panel_button($panel_fg_color);
color: $panel_fg_color;
-natural-hpadding: $base_padding * 2; -natural-hpadding: $base_padding * 2;
-minimum-hpadding: $base_padding; -minimum-hpadding: $base_padding;
transition-duration: 150ms;
border: 3px solid transparent;
border-radius: 3px;
&.clock-display {
.clock {
transition-duration: 150ms;
border: 3px solid transparent;
border-radius: 3px;
}
}
&.screen-recording-indicator {
box-shadow: inset 0 0 0 100px $screenshot_ui_button_red;
}
&.screen-sharing-indicator {
box-shadow: inset 0 0 0 100px $warning_color;
StBoxLayout { margin: 0 $base_padding; }
}
&.screen-recording-indicator,
&.screen-sharing-indicator {
StBoxLayout {
spacing: $base_padding;
}
StIcon {
icon-size: $base_icon_size;
}
}
&:active, &:overview, &:focus, &:checked {
box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.8);
// The clock display needs to have the background on .clock because
// we want to exclude the do-not-disturb indicator from the background
&.clock-display {
box-shadow: none;
.clock {
box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.8);
}
}
&.screen-recording-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.15);
}
&.screen-sharing-indicator {
box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.15);
}
}
&:hover {
box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.85);
&.clock-display {
box-shadow: none;
.clock {
box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.85);
}
}
&.screen-recording-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.1);
}
&.screen-sharing-indicator {
box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.1);
}
}
&:active:hover, &:overview:hover, &:focus:hover, &:checked:hover {
box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.75);
&.clock-display {
box-shadow: none;
.clock {
box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.75);
}
}
&.screen-recording-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.2);
}
&.screen-sharing-indicator {
box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.2);
}
}
// status area icons // status area icons
.system-status-icon { .system-status-icon {
@ -140,90 +44,79 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
} }
&#panelActivities { &#panelActivities {
-natural-hpadding: $base_padding * 3; -natural-hpadding: $base_padding * 2.5;
.panel-button { & StBoxLayout {
> * { spacing: 5px;
background-image: url("common-assets/activities.svg"); }
background-size: contain;
width: 24px;
height: 24px;
background-color: transparent !important;
background-gradient-direction: none !important;
border: 0 solid transparent !important;
text-shadow: 0 0 transparent !important;
transition-duration: 0ms !important;
box-shadow: none !important;
color: transparent;
}
&:active, &:overview, &:focus, &:checked { & .workspace-dot {
background-color: transparent; border-radius: 999px;
box-shadow: none; min-width: 8px;
border-bottom-width: 1px; min-height: 8px;
border-color: transparent; background-color: $panel_fg_color;
}
}
> * { background-image: url("common-assets/activities-active.svg"); } // screen activity indicators
} &.screen-recording-indicator,
&.screen-sharing-indicator {
StBoxLayout {
spacing: $base_padding;
}
StIcon {
icon-size: $base_icon_size;
}
}
&.screen-recording-indicator {
@include panel_button($screenshot_ui_button_red, $flat: false);
}
&.screen-sharing-indicator {
@include panel_button($privacy_indicator_color, $flat: false);
}
// clock
&.clock-display {
// The clock display needs to have the background on .clock because
// we want to exclude the do-not-disturb indicator from the background
// see _drawing.scss for override details
@include panel_button($highlighted_child: true, $child_class:".clock");
.clock {
// the highlighted child
} }
} }
} }
// transparent panel on lock & login screens
&.unlock-screen, &.unlock-screen,
&.login-screen, &.login-screen,
&:overview { &:overview {
background-color: transparent;
box-shadow: none;
.panel-button { .panel-button {
&:active, &:overview, &:focus, &:checked { @include panel_button($panel_system_fg_color, $fg:$panel_system_fg_color);
box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.85);
&.clock-display { &#panelActivities .workspace-dot {
box-shadow: none; background-color: $panel_system_fg_color;
.clock {
box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.85);
}
}
&.screen-recording-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.15);
}
&.screen-sharing-indicator {
box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.15);
}
} }
&:hover { // clock
box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.90); &.clock-display {
&.clock-display { @include panel_button($panel_system_fg_color, $fg:$panel_system_fg_color, $highlighted_child: true, $child_class:".clock");
box-shadow: none;
.clock {
box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.90);
}
}
&.screen-recording-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.1);
}
&.screen-sharing-indicator {
box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.1);
}
} }
&:active:hover, &:overview:hover, &:focus:hover, &:checked:hover { // unfortunate duplication so these indicators have styles
box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.8); &.screen-recording-indicator {
&.clock-display { @include panel_button($screenshot_ui_button_red, $flat: false);
box-shadow: none; }
.clock {
box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.8);
}
}
&.screen-recording-indicator { &.screen-sharing-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.2); @include panel_button($privacy_indicator_color, $flat: false);
}
&.screen-sharing-indicator {
box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.2);
}
} }
} }
} }
@ -238,9 +131,8 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
spacing: 0; spacing: 0;
} }
// indicator for active // important privacy related indicators
.screencast-indicator, .privacy-indicator { color: $privacy_indicator_color; }
.remote-access-indicator { color: $warning_color; }
} }
// App Menu // App Menu
@ -256,10 +148,8 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
// Clock // Clock
.clock-display-box { .clock-display-box {
spacing: 2px; spacing: 2px;
.clock { .clock {
padding-left: $base_padding * 2; padding-left: $base_padding * 2;
padding-right: $base_padding * 2; padding-right: $base_padding * 2;

23
gnome-shell-sass/widgets/_popovers.scss
View file

@ -53,6 +53,10 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
} }
} }
.popup-ornamented-menu-item {
&:ltr {padding-left: $base_padding;}
&:rtl {padding-right: $base_padding;}
}
// all other graphical elements (sliders) // all other graphical elements (sliders)
.popup-inactive-menu-item { .popup-inactive-menu-item {
@ -75,10 +79,6 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
border: 1px solid $hc_inset_color; border: 1px solid $hc_inset_color;
} }
.popup-menu-ornament {
min-width: $base_icon_size !important;
}
// submenu specific styles // submenu specific styles
.popup-menu-item { .popup-menu-item {
border-radius: 0; border-radius: 0;
@ -103,12 +103,8 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
// container for radio and check boxes // container for radio and check boxes
.popup-menu-ornament { .popup-menu-ornament {
@extend %heading; icon-size: $base_icon_size !important;
width: 1.2em; width: $base_icon_size;
text-align: center !important;
&:ltr { text-align: right;}
&:rtl { text-align: left;}
} }
// separator // separator
@ -120,10 +116,6 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
background-color: $borders_color; background-color: $borders_color;
} }
.popup-menu-ornament {
width: 0 !important;
}
// separators in submenus // separators in submenus
.popup-sub-menu & { .popup-sub-menu & {
background-color: transparent; background-color: transparent;
@ -148,9 +140,6 @@ $submenu_bg_color: lighten($menu_bg_color, 7%);
.app-menu { .app-menu {
max-width: 27.25em; max-width: 27.25em;
// this is unneeded at the top-level in this menu, hide it
.popup-menu-ornament { width: 0 !important; }
.popup-inactive-menu-item:first-child { .popup-inactive-menu-item:first-child {
// "Open Windows" label // "Open Windows" label
> StLabel { > StLabel {

14
gnome-shell-sass/widgets/_quick-settings.scss
View file

@ -59,6 +59,7 @@
& .quick-toggle-arrow { & .quick-toggle-arrow {
padding: $base_padding $base_padding*1.75; padding: $base_padding $base_padding*1.75;
border-width: 0; border-width: 0;
border-color: transparentize($fg_color, .75);
&:checked { &:checked {
@include button(default, $c:$selected_bg_color); @include button(default, $c:$selected_bg_color);
@ -163,6 +164,16 @@
.device-subtitle { color: transparentize($fg_color, 0.5); } .device-subtitle { color: transparentize($fg_color, 0.5); }
.keyboard-brightness-item .slider {
min-height: 16px;
}
.keyboard-brightness-level {
spacing: $base_padding;
.button:checked { @include button(default, $c:$selected_bg_color); }
}
// background apps // background apps
.background-apps-quick-toggle { .background-apps-quick-toggle {
@ -183,6 +194,9 @@
@extend .icon-button; @extend .icon-button;
padding: $base_padding; padding: $base_padding;
} }
& .spinner {
padding: $base_padding;
}
&.popup-inactive-menu-item { color: $fg_color; } &.popup-inactive-menu-item { color: $fg_color; }
} }

13
gnome-shell-sass/widgets/_screenshot.scss
View file

@ -83,7 +83,7 @@ $screenshot_ui_button_red: $error_color;
} }
.screenshot-ui-shot-cast-container { .screenshot-ui-shot-cast-container {
background-color: lighten($osd_bg_color,5%); background-color: transparentize($osd_fg_color,0.9);
border-radius: $modal_radius; border-radius: $modal_radius;
padding: $screenshot_ui_shot_cast_spacing; padding: $screenshot_ui_shot_cast_spacing;
spacing: $screenshot_ui_shot_cast_spacing; spacing: $screenshot_ui_shot_cast_spacing;
@ -95,9 +95,9 @@ $screenshot_ui_button_red: $error_color;
.screenshot-ui-shot-cast-button { .screenshot-ui-shot-cast-button {
padding: $base_padding $base_padding*2; padding: $base_padding $base_padding*2;
background-color: transparent; background-color: transparent;
&:hover, &:focus { background-color: lighten($osd_bg_color, 10%);} &:hover, &:focus { background-color: transparentize($osd_fg_color, 0.8);}
&:active { background-color: lighten($active_bg_color,5%);} &:active { background-color: transparentize($osd_fg_color, .5);}
&:checked { background-color: white;color: black;} &:checked { background-color: $osd_fg_color; color: $osd_bg_color;}
&:insensitive { color: transparentize($osd_fg_color, 0.5);} &:insensitive { color: transparentize($osd_fg_color, 0.5);}
border-radius: $modal_radius - $screenshot_ui_shot_cast_spacing; border-radius: $modal_radius - $screenshot_ui_shot_cast_spacing;
@ -195,10 +195,7 @@ $screenshot_ui_button_red: $error_color;
} }
.screenshot-ui-tooltip { .screenshot-ui-tooltip {
color: $osd_fg_color; @extend %tooltip;
background-color: $osd_bg_color;
border-radius: 99px;
padding: $base_padding $base_padding * 2;
text-align: center; text-align: center;
-y-offset: 24px; -y-offset: 24px;
} }

2
gnome-shell-sass/widgets/_switcher-popup.scss
View file

@ -24,7 +24,7 @@ $switcher_padding: $base_padding*2;
// each item in the list // each item in the list
.item-box { .item-box {
@include tile_button($fg_color); @include tile_button($osd_fg_color);
// override over style so mouse doesn't steal focus // override over style so mouse doesn't steal focus
&:hover {background: none;} &:hover {background: none;}
@if $is_highcontrast { @if $is_highcontrast {

6
meson.build
View file

@ -1,6 +1,7 @@
theme_sources = files([ theme_sources = files([
'gnome-shell-high-contrast.scss', 'gnome-shell-high-contrast.scss',
'gnome-shell.scss', 'gnome-shell-dark.scss',
'gnome-shell-light.scss',
'gnome-shell-sass/_colors.scss', 'gnome-shell-sass/_colors.scss',
'gnome-shell-sass/_common.scss', 'gnome-shell-sass/_common.scss',
'gnome-shell-sass/_drawing.scss', 'gnome-shell-sass/_drawing.scss',
@ -43,7 +44,8 @@ theme_sources = files([
stylesheets = [ stylesheets = [
'gnome-shell-high-contrast.css', 'gnome-shell-high-contrast.css',
'gnome-shell.css' 'gnome-shell-dark.css',
'gnome-shell-light.css',
] ]
foreach stylesheet: stylesheets foreach stylesheet: stylesheets