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

Theme: update to sync with gtk Adwaita

Browse Source 
- consistent OSD colors
- consistent fg/bg colors
- updated rounded corners
- switches

Fixes https://gitlab.gnome.org/GNOME/gnome-shell/issues/841
This commit is contained in:
Frederik Feichtmeier 2019-06-18 15:29:00 +02:00 committed by Jakub Steiner
parent ac09e0110a
commit 44e1a6ce06
13 changed files with 326 additions and 397 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
data/gnome-shell-theme.gresource.xml
View File

@ -25,9 +25,11 @@
<file alias="icons/pointer-primary-click-symbolic.svg">pointer-primary-click-symbolic.svg</file> <file alias="icons/pointer-primary-click-symbolic.svg">pointer-primary-click-symbolic.svg</file>
<file alias="icons/pointer-secondary-click-symbolic.svg">pointer-secondary-click-symbolic.svg</file> <file alias="icons/pointer-secondary-click-symbolic.svg">pointer-secondary-click-symbolic.svg</file>
<file>process-working.svg</file> <file>process-working.svg</file>
<file>toggle-off-intl.svg</file> <file>toggle-off.svg</file>
<file>toggle-off-dark.svg</file>
<file>toggle-off-hc.svg</file> <file>toggle-off-hc.svg</file>
<file>toggle-on-intl.svg</file> <file>toggle-on.svg</file>
<file>toggle-on-dark.svg</file>
<file>toggle-on-hc.svg</file> <file>toggle-on-hc.svg</file>
</gresource> </gresource>
</gresources> </gresources>

2
data/theme/gnome-shell-high-contrast.scss
View File

@ -1,3 +1,5 @@
$variant: 'light';
@import "gnome-shell-sass/_high-contrast-colors"; //use gtk colors @import "gnome-shell-sass/_high-contrast-colors"; //use gtk colors
@import "gnome-shell-sass/_drawing"; @import "gnome-shell-sass/_drawing";
@import "gnome-shell-sass/_common"; @import "gnome-shell-sass/_common";

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

@ -3,11 +3,11 @@
$base_color: if($variant == 'light', #ffffff, lighten(desaturate(#241f31, 20%), 2%)); $base_color: if($variant == 'light', #ffffff, lighten(desaturate(#241f31, 20%), 2%));
$bg_color: if($variant == 'light', #f6f5f4, desaturate(#3d3846, 10%)); $bg_color: if($variant == 'light', #f6f5f4, darken(desaturate(#3d3846, 100%), 4%));
$fg_color: if($variant == 'light', #2e3436, #eeeeec); $fg_color: if($variant == 'light', #2e3436, #eeeeec);
$selected_fg_color: #ffffff; $selected_fg_color: #ffffff;
$selected_bg_color: if($variant == 'light', #3584e4, darken(#3584e4, 20%)); $selected_bg_color: if($variant == 'light', #3584e4, darken(#3584e4, 10%));
$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, 18%), darken($bg_color, 10%)); $borders_color: if($variant == 'light', darken($bg_color, 18%), darken($bg_color, 10%));
$borders_edge: if($variant == 'light', transparentize(white, 0.2), transparentize($fg_color, 0.93)); $borders_edge: if($variant == 'light', transparentize(white, 0.2), transparentize($fg_color, 0.93));
@ -21,11 +21,15 @@ $success_color: if($variant == 'light', #33d17a, darken(#33d17a, 10%));
$destructive_color: if($variant == 'light', #e01b24, darken(#e01b24, 10%)); $destructive_color: if($variant == 'light', #e01b24, darken(#e01b24, 10%));
$osd_fg_color: #eeeeec; $osd_fg_color: #eeeeec;
$osd_bg_color: #2e3436; $osd_text_color: white;
$osd_bg_color: transparentize(darken(desaturate(#3d3846, 100%), 12%),0.04);
$osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
$osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%);
$osd_borders_color: transparentize(black, 0.3); $osd_borders_color: transparentize(black, 0.3);
$osd_outer_borders_color: transparentize(white, 0.9); $osd_outer_borders_color: transparentize(white, 0.84);
$tooltip_borders_color: $osd_outer_borders_color; $tooltip_borders_color: $osd_outer_borders_color;
$shadow_color: transparentize(black, 0.9);
//insensitive state derived colors //insensitive state derived colors
$insensitive_fg_color: mix($fg_color, $bg_color, 50%); $insensitive_fg_color: mix($fg_color, $bg_color, 50%);

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

@ -4,8 +4,6 @@
$cakeisalie: "This stylesheet is generated, DO NOT EDIT"; $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
/* #{$cakeisalie} */ /* #{$cakeisalie} */
$panel-corner-radius: 6px;
/* Copyright 2009, 2015 Red Hat, Inc. /* Copyright 2009, 2015 Red Hat, Inc.
* *
* Portions adapted from Mx's data/style/default.css * Portions adapted from Mx's data/style/default.css
@ -25,13 +23,18 @@ $panel-corner-radius: 6px;
* Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA. * Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA.
*/ */
/* GLOBALS */ /* GLOBALS */
$panel-corner-radius: 6px;
$medium_radius: 9px;
$_trough_color: transparentize($fg_color, 0.9);
$_bubble_borders_color: lighten($borders_color, if($variant=='light', 0%, 5%));
$_hover_bg_color: lighten($bg_color,if($variant=='light', 5%, 3%));
$_active_bg_color: if($variant == 'light', darken($bg_color, 14%), darken($bg_color, 9%));
$font-size: 11; $font-size: 11;
$font-family: Cantarell, Sans-Serif; $font-family: Cantarell, Sans-Serif;
$_bubble_bg_color: opacify($osd_bg_color,0.25);
$_bubble_fg_color: $osd_fg_color;
$_bubble_borders_color: transparentize($osd_fg_color,0.8);
stage { stage {
font-family: $font-family; font-family: $font-family;
@ -42,42 +45,44 @@ stage {
/* WIDGETS */ /* WIDGETS */
/* Buttons */ /* Buttons */
.button { .button, %button {
border-radius: 3px; border-radius: 5px;
border-width: 1px; border-width: 1px;
min-height: 22px;
padding: 4px 32px; padding: 4px 32px;
@include button(normal); @include button(normal);
&:focus { @include button(focus); } &:focus { @include button(focus, $c:$_hover_bg_color, $tc:$fg_color); }
&:hover { @include button(hover); } &:hover { @include button(hover, $c:$_hover_bg_color, $tc:$fg_color); }
&:insensitive { @include button(insensitive); } &:insensitive { @include button(insensitive); }
&:active { @include button(active); } &:active { @include button(active, $c:$_active_bg_color, $tc:$fg_color); }
} }
.modal-dialog-linked-button { .modal-dialog-linked-button, %bubble_button {
border-right-width: 1px; border-right-width: 1px;
@include button(normal); @include button(normal, $c:$bg_color, $tc:$fg_color);
&:insensitive { @include button(insensitive); } &:insensitive { @include button(insensitive, $c:$bg_color, $tc:$fg_color); }
&:hover { @include button(hover); } &:hover { @include button(hover, $c:$_hover_bg_color, $tc:$fg_color); }
&:focus { @include button(focus); } &:focus { @include button(focus, $c:$_hover_bg_color, $tc:$fg_color); }
&:active { @include button(active); } &:active { @include button(active, $c:$_active_bg_color, $tc:$fg_color); }
padding: 12px; padding: 12px;
border-top: 1px solid $_bubble_borders_color;
&:first-child { &:first-child {
border-radius: 0px 0px 0px 6px; border-radius: 0px 0px 0px $medium_radius;
} }
&:last-child { &:last-child {
border-right-width: 0px; border-right-width: 0px;
border-radius: 0px 0px 6px 0px; border-radius: 0px 0px $medium_radius 0px;
} }
&:first-child:last-child { &:first-child:last-child {
border-right-width: 0px; border-right-width: 0px;
border-radius: 0px 0px 6px 6px; border-radius: 0px 0px $medium_radius $medium_radius;
} }
} }
/* Entries */ /* Entries */
StEntry { StEntry {
border-radius: 3px; border-radius: 5px;
padding: 4px; padding: 4px;
border-width: 1px; border-width: 1px;
color: $fg_color; color: $fg_color;
@ -130,15 +135,21 @@ StScrollBar {
.slider { .slider {
height: 1em; height: 1em;
-barlevel-height: 0.3em; -barlevel-height: 0.3em;
-barlevel-background-color: $insensitive_bg_color; //background of the trough -barlevel-background-color: transparentize($fg_color, 0.9); //background of the trough
-barlevel-border-color: $borders_color; //trough border color -barlevel-border-color: $borders_color; //trough border color
-barlevel-active-background-color: $selected_bg_color; //active trough fill -barlevel-active-background-color: $selected_bg_color; //active trough fill
-barlevel-active-border-color: darken($selected_bg_color,10%); //active trough border -barlevel-active-border-color: $selected_borders_color; //active trough border
-barlevel-overdrive-color: $destructive_color; -barlevel-overdrive-color: $destructive_color;
-barlevel-overdrive-border-color: darken($destructive_color,10%); -barlevel-overdrive-border-color: darken($destructive_color,10%);
-barlevel-overdrive-separator-width: 0.2em; -barlevel-overdrive-separator-width: 0.2em;
-barlevel-border-width: 1px; -barlevel-border-width: 1px;
-slider-handle-radius: 6px; -slider-handle-radius: 8px;
-slider-handle-border-width: 1px;
-slider-handle-border-color: $borders_color;
color: $bg_color; /* FIXME to match gtk, we'd need to style the border of the slider, not
the whole widget */
&:hover { color: $_hover_bg_color; }
&:active { color: $_active_bg_color; }
} }
/* Check Boxes */ /* Check Boxes */
@ -157,11 +168,16 @@ StScrollBar {
/* Switches */ /* Switches */
.toggle-switch { .toggle-switch {
color: $fg_color;
width: 46px; width: 46px;
height: 22px; height: 22px;
background-size: contain; background-size: contain;
background-image: url("resource:///org/gnome/shell/theme/toggle-off-intl.svg"); background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-off.svg"),
&:checked { background-image: url("resource:///org/gnome/shell/theme/toggle-on-intl.svg"); } url("resource:///org/gnome/shell/theme/toggle-off-dark.svg"));
&:checked {
background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-on.svg"),
url("resource:///org/gnome/shell/theme/toggle-on-dark.svg"));
}
} }
/* links */ /* links */
@ -178,9 +194,7 @@ StScrollBar {
.modal-dialog { .modal-dialog {
border-radius: 9px; border-radius: 9px;
color: $osd_fg_color; @extend %bubble-panel;
background-color: transparentize(darken($osd_bg_color,10%),0.05);
border: 1px solid $_bubble_borders_color;
.modal-dialog-content-box { .modal-dialog-content-box {
padding: 24px; padding: 24px;
} }
@ -192,8 +206,8 @@ StScrollBar {
.run-dialog-button-box { padding-top: 1em; } .run-dialog-button-box { padding-top: 1em; }
.run-dialog-label { .run-dialog-label {
@include fontsize($font-size + 1.1); @include fontsize($font-size + 1.1);
font-weight: bold; font-weight: normal;
color: darken($osd_fg_color,10%); color: $fg_color;
padding-bottom: .4em; padding-bottom: .4em;
} }
@ -225,7 +239,7 @@ StScrollBar {
} }
.message-dialog-subtitle { .message-dialog-subtitle {
color: darken($fg_color,40%); color: $fg_color;
font-weight: bold; font-weight: bold;
} }
@ -348,7 +362,7 @@ StScrollBar {
} }
.mount-dialog-app-list-item { .mount-dialog-app-list-item {
color: darken($fg_color,10%); color: lighten($fg_color,10%);
&:hover { color: $fg_color; } &:hover { color: $fg_color; }
&:ltr { padding-right: 1em; } &:ltr { padding-right: 1em; }
&:rtl { padding-left: 1em; } &:rtl { padding-left: 1em; }
@ -367,13 +381,13 @@ StScrollBar {
/* Password or Authentication Dialog */ /* Password or Authentication Dialog */
.prompt-dialog { .prompt-dialog {
@extend %bubble-panel;
//this is the width of the entire modal popup //this is the width of the entire modal popup
width: 34em; width: 34em;
border: 3px solid $_bubble_borders_color;
.message-dialog-main-layout { spacing: 24px; padding: 10px; } .message-dialog-main-layout { spacing: 24px; padding: 10px; }
.message-dialog-content { spacing: 16px; } .message-dialog-content { spacing: 16px; }
.message-dialog-title { color: darken($osd_fg_color,25%); } .message-dialog-title { color: lighten($fg_color,15%); }
} }
.prompt-dialog-description:rtl { .prompt-dialog-description:rtl {
@ -382,6 +396,7 @@ StScrollBar {
.prompt-dialog-password-box { .prompt-dialog-password-box {
spacing: 1em; spacing: 1em;
padding-bottom: 1em;
} }
.prompt-dialog-error-label { .prompt-dialog-error-label {
@ -446,6 +461,7 @@ StScrollBar {
/* Audio selection dialog */ /* Audio selection dialog */
.audio-device-selection-dialog { .audio-device-selection-dialog {
@extend %bubble-panel;
spacing: 30px; spacing: 30px;
} }
@ -466,7 +482,11 @@ StScrollBar {
.audio-selection-device { .audio-selection-device {
border: 1px solid $_bubble_borders_color; border: 1px solid $_bubble_borders_color;
border-radius: 12px; border-radius: 12px;
&:active,&:hover,&:focus { background-color: $selected_bg_color; } &:hover,&:focus { background-color: $_hover_bg_color; }
&:active {
background-color: $selected_bg_color;
color: $selected_fg_color;
}
} }
.audio-selection-device-box { .audio-selection-device-box {
@ -480,22 +500,26 @@ StScrollBar {
/* Access Dialog */ /* Access Dialog */
.access-dialog { .access-dialog {
@extend %bubble-panel;
spacing: 30px; spacing: 30px;
} }
/* Geolocation Dialog */ /* Geolocation Dialog */
.geolocation-dialog { .geolocation-dialog {
@extend %bubble-panel;
spacing: 30px; spacing: 30px;
} }
/* Extension Dialog */ /* Extension Dialog */
.extension-dialog { .extension-dialog {
@extend %bubble-panel;
.message-dialog-main-layout { spacing: 24px; padding: 10px; } .message-dialog-main-layout { spacing: 24px; padding: 10px; }
.message-dialog-title { color: darken($osd_fg_color,25%); } .message-dialog-title { font-weight: normal; color: $fg_color; }
} }
/* Inhibit-Shortcuts Dialog */ /* Inhibit-Shortcuts Dialog */
.inhibit-shortcuts-dialog { .inhibit-shortcuts-dialog {
@extend %bubble-panel;
spacing: 30px; spacing: 30px;
} }
@ -515,12 +539,13 @@ StScrollBar {
.popup-menu { .popup-menu {
min-width: 15em; min-width: 15em;
color: $fg_color;
border-color: $_bubble_borders_color;
.popup-menu-arrow { } //defined globally in the TOP BAR .popup-menu-arrow { } //defined globally in the TOP BAR
.popup-sub-menu { .popup-sub-menu {
padding-bottom: 1px; background-color: darken($bg_color,5%);
background-color: darken($bg_color,2%); box-shadow: inset 0 -1px 0px $_bubble_borders_color;
box-shadow: inset 0 -1px 0px lighten($borders_color,5%);
} }
.popup-menu-content { padding: 1em 0em; } .popup-menu-content { padding: 1em 0em; }
@ -530,12 +555,18 @@ StScrollBar {
&:ltr { padding: .4em 1.75em .4em 0em; } &:ltr { padding: .4em 1.75em .4em 0em; }
&:rtl { padding: .4em 0em .4em 1.75em; } &:rtl { padding: .4em 0em .4em 1.75em; }
&:checked { &:checked {
background-color: darken($bg_color,2%); background-color: $bg_color;
box-shadow: inset 0 1px 0px lighten($borders_color,5%); box-shadow: inset 0 -1px 0px $_bubble_borders_color;
font-weight: bold; font-weight: bold;
} }
&.selected { background-color: transparentize($fg_color,0.9); color: $fg_color; } &.selected {
&:active { background-color: $selected_bg_color; color: $selected_fg_color; } background-color: transparentize(white, if($variant=='light', 0.2, 0.9));
color: $fg_color;
}
&:active {
background-color: $selected_bg_color;
color: $selected_fg_color;
}
&:insensitive { color: transparentize($fg_color,.5); } &:insensitive { color: transparentize($fg_color,.5); }
} }
@ -559,10 +590,10 @@ StScrollBar {
} }
.popup-menu-boxpointer, .popup-menu-boxpointer,
.candidate-popup-boxpointer { .candidate-popup-boxpointer {
-arrow-border-radius: 3px; -arrow-border-radius: $medium_radius;
-arrow-background-color: $bg_color; -arrow-background-color: $bg_color;
-arrow-border-width: 1px; -arrow-border-width: 1px;
-arrow-border-color: $borders_color; -arrow-border-color: if($variant=='light', transparentize(black, 0.6), $borders_color);
-arrow-base: 24px; -arrow-base: 24px;
-arrow-rise: 11px; -arrow-rise: 11px;
-arrow-box-shadow: 0 1px 3px black; //dreaming. bug #689995 -arrow-box-shadow: 0 1px 3px black; //dreaming. bug #689995
@ -573,7 +604,7 @@ StScrollBar {
height: 1px; //not really the whole box height: 1px; //not really the whole box
margin: 6px 64px; margin: 6px 64px;
background-color: transparent; background-color: transparent;
border-color: lighten($borders_color,10%); border-color: $_bubble_borders_color;
border-bottom-width: 1px; border-bottom-width: 1px;
border-bottom-style: solid; border-bottom-style: solid;
} }
@ -601,7 +632,7 @@ StScrollBar {
.level { .level {
height: 0.6em; height: 0.6em;
-barlevel-height: 0.6em; -barlevel-height: 0.6em;
-barlevel-background-color: transparentize(darken($osd_bg_color,15%),0.5); -barlevel-background-color: transparentize($fg_color, if($variant=='light', 0.2, 0.9));
-barlevel-active-background-color: $osd_fg_color; -barlevel-active-background-color: $osd_fg_color;
-barlevel-overdrive-color: $destructive_color; -barlevel-overdrive-color: $destructive_color;
-barlevel-overdrive-separator-width: 0.2em; -barlevel-overdrive-separator-width: 0.2em;
@ -646,7 +677,7 @@ StScrollBar {
} }
.switcher-list .item-box:selected { .switcher-list .item-box:selected {
background-color: $selected_bg_color; background-color: transparentize($osd_fg_color, 0.7);
color: $selected_fg_color; color: $selected_fg_color;
} }
@ -712,13 +743,43 @@ StScrollBar {
} }
%osd-panel { %osd-panel {
color: $_bubble_fg_color; color: $osd_fg_color;
background-color: $_bubble_bg_color; background-color: $osd_bg_color;
border: 1px solid $_bubble_borders_color; border: 1px solid $osd_outer_borders_color;
border-radius: 12px; border-radius: 12px;
padding: 12px; padding: 12px;
} }
%bubble-entry {
color: $fg_color;
background-color: darken($bg_color, 2%);
border-color: $_bubble_borders_color;
box-shadow: none;
&:focus { border: 2px solid $selected_bg_color; }
}
%bubble-panel {
color: $fg_color;
background-color: $bg_color;
border: 1px solid if($variant=='light', transparentize(black, 0.6), $borders_color);
StEntry { @extend %bubble-entry; }
.button {
&, &:hover, &:focus, &:active, &:disabled {
box-shadow: none;
border-color: $_bubble_borders_color;
}
background-color: $bg_color;
color: $fg_color;
&:hover { background-color: $_hover_bg_color; }
&:active {
background-color: $selected_bg_color;
color: $selected_fg_color;
}
&:disabled { color: $insensitive_fg_color; }
}
}
/* Tiled window previews */ /* Tiled window previews */
.tile-preview { .tile-preview {
background-color: transparentize($selected_bg_color,0.5); background-color: transparentize($selected_bg_color,0.5);
@ -786,7 +847,7 @@ StScrollBar {
} }
&:hover { &:hover {
color: lighten($fg_color, 10%); color: $selected_fg_color;
} }
&:active, &:overview, &:focus, &:checked { &:active, &:overview, &:focus, &:checked {
@ -794,7 +855,7 @@ StScrollBar {
// a box-shadow // a box-shadow
background-color: rgba(0, 0, 0, 0.01); background-color: rgba(0, 0, 0, 0.01);
box-shadow: inset 0 -2px 0px lighten($selected_bg_color,5%); box-shadow: inset 0 -2px 0px lighten($selected_bg_color,5%);
color: lighten($fg_color,10%); color: $selected_fg_color;
} }
.system-status-icon { icon-size: 1.09em; padding: 0 5px; } .system-status-icon { icon-size: 1.09em; padding: 0 5px; }
@ -842,7 +903,7 @@ StScrollBar {
.datemenu-displays-box { spacing: 1em; } .datemenu-displays-box { spacing: 1em; }
.datemenu-calendar-column { .datemenu-calendar-column {
border: 0 solid lighten($bg_color,5%); border: 0 solid $_bubble_borders_color;
&:ltr { border-left-width: 1px; } &:ltr { border-left-width: 1px; }
&:rtl { border-right-width: 1px; } &:rtl { border-right-width: 1px; }
} }
@ -867,11 +928,8 @@ StScrollBar {
.world-clocks-button, .world-clocks-button,
.weather-button, .weather-button,
.events-section-title { .events-section-title {
&:hover,&:focus { background-color: lighten($bg_color,5%); } &:hover, focus { background-color: $_hover_bg_color }
&:active { &:active { background-color: $_active_bg_color }
color: lighten($selected_fg_color,5%);
background-color: $selected_bg_color;
}
} }
.datemenu-today-button .day-label { .datemenu-today-button .day-label {
@ -916,7 +974,7 @@ StScrollBar {
} }
.world-clocks-timezone { .world-clocks-timezone {
color: darken($fg_color,40%); color: $fg_color;
font-feature-settings: "tnum"; font-feature-settings: "tnum";
font-size: 0.9em; font-size: 0.9em;
} }
@ -931,7 +989,7 @@ StScrollBar {
} }
.calendar-month-label { .calendar-month-label {
color: darken($fg_color,5%); color: lighten($fg_color,5%);
font-weight: bold; font-weight: bold;
padding: 8px 0; padding: 8px 0;
&:focus {} &:focus {}
@ -941,8 +999,8 @@ StScrollBar {
background-color: transparent; background-color: transparent;
width: 32px; width: 32px;
border-radius: 4px; border-radius: 4px;
&:hover, &:focus { background-color: transparentize($fg_color,0.95); } &:hover, focus { background-color: $_hover_bg_color; }
&:active { background-color: transparentize($bg_color,0.95); } &:active { background-color: transparentize($fg_color, 0.84); }
} }
.calendar-change-month-back StIcon, .calendar-change-month-forward StIcon { // arrows .calendar-change-month-back StIcon, .calendar-change-month-forward StIcon { // arrows
@ -957,14 +1015,14 @@ StScrollBar {
margin: 2px; margin: 2px;
border-radius: 1.4em; border-radius: 1.4em;
font-feature-settings: "tnum"; font-feature-settings: "tnum";
&:hover,&:focus { background-color: lighten($bg_color,5%); } &:hover, focus { background-color: $_hover_bg_color; }
&:active,&:selected { &:active,&:selected {
color: lighten($selected_fg_color,5%); color: lighten($selected_fg_color,5%);
background-color: $selected_bg_color; background-color: $selected_bg_color;
border-color: transparent; //avoid jumparound due to today border-color: transparent; //avoid jumparound due to today
} }
&.calendar-day-heading { //day of week heading &.calendar-day-heading { //day of week heading
color: darken($fg_color,40%); color: lighten($fg_color,5%);
margin-top: 1em; margin-top: 1em;
font-size: 70%; font-size: 70%;
} }
@ -984,7 +1042,7 @@ StScrollBar {
font-weight: bold; font-weight: bold;
//color: lighten($fg_color,10%); //color: lighten($fg_color,10%);
//background-color: darken($bg_color,5%); //background-color: darken($bg_color,5%);
border: 1px solid transparentize($borders_color,0.5); border: 1px solid $_bubble_borders_color;
} }
.calendar-day-with-events { .calendar-day-with-events {
color: lighten($fg_color,10%); color: lighten($fg_color,10%);
@ -992,7 +1050,7 @@ StScrollBar {
background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg"); background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg");
} }
.calendar-other-month-day { .calendar-other-month-day {
color: transparentize($fg_color,0.85); color: transparentize($fg_color ,0.5);
opacity: 0.5; opacity: 0.5;
} }
.calendar-week-number { .calendar-week-number {
@ -1002,8 +1060,8 @@ StScrollBar {
border-radius: 2px; border-radius: 2px;
padding: 0.5em 0 0; padding: 0.5em 0 0;
margin: 6px; margin: 6px;
background-color: transparentize($fg_color,0.7); background-color: $_bubble_borders_color;
color: $bg_color; color: $fg_color;
} }
/* Message list */ /* Message list */
@ -1012,8 +1070,7 @@ StScrollBar {
} }
.message-list-clear-button.button { .message-list-clear-button.button {
background-color: transparent; @extend %button;
&:hover,&:focus { background-color: lighten($bg_color,5%); }
margin: 1.5em 1.5em 0; margin: 1.5em 1.5em 0;
} }
@ -1027,8 +1084,11 @@ StScrollBar {
} }
.message { .message {
&:hover,&:focus { background-color: lighten($bg_color,5%); } border: 1px solid $_bubble_borders_color;
border-radius: 3px; background-color: lighten($bg_color, 2%);
&:hover,&:focus { background-color: $_hover_bg_color; }
&:active { background-color: transparentize($fg_color, 0.84) }
border-radius: 5px;
} }
.message-icon-bin { .message-icon-bin {
@ -1037,7 +1097,7 @@ StScrollBar {
} }
.message-icon-bin > StIcon { .message-icon-bin > StIcon {
color: darken($fg_color,20%); color: $fg_color;
icon-size: 1.09em; icon-size: 1.09em;
-st-icon-style: symbolic; -st-icon-style: symbolic;
} }
@ -1052,7 +1112,7 @@ StScrollBar {
} }
.message-secondary-bin > .event-time { .message-secondary-bin > .event-time {
color: darken($fg_color,40%); color: $fg_color;
font-size: 0.7em; font-size: 0.7em;
/* HACK: the label should be baseline-aligned with a 1em label, /* HACK: the label should be baseline-aligned with a 1em label,
fake this with some bottom padding */ fake this with some bottom padding */
@ -1064,17 +1124,17 @@ StScrollBar {
} }
.message-title { .message-title {
color: darken($fg_color,5%); color: $fg_color;
} }
.message-content { .message-content {
color: darken($fg_color,20%); color: darken($fg_color, 10%);
padding: 10px; padding: 10px;
} }
.message-media-control { .message-media-control {
padding: 12px; padding: 12px;
color: darken($fg_color, 20%); color: lighten($fg_color, 15%);
&:last-child:ltr { padding-right: 18px; } &:last-child:ltr { padding-right: 18px; }
&:last-child:rtl { padding-left: 18px; } &:last-child:rtl { padding-left: 18px; }
@ -1085,9 +1145,9 @@ StScrollBar {
.media-message-cover-icon { .media-message-cover-icon {
icon-size: 48px !important; icon-size: 48px !important;
&.fallback { &.fallback {
color: lighten($bg_color,10%); color: lighten($fg_color,10%);
background-color: $bg_color; background-color: $bg_color;
border: 2px solid $bg_color; border: 1px solid $bg_color;
border-radius: 2px; border-radius: 2px;
icon-size: 32px !important; icon-size: 32px !important;
padding: 6px; } padding: 6px; }
@ -1129,15 +1189,18 @@ StScrollBar {
color: $fg_color; color: $fg_color;
border-radius: 32px; /* wish we could do 50% */ border-radius: 32px; /* wish we could do 50% */
padding: 13px; padding: 13px;
border: 1px solid lighten($borders_color,5%); border: 1px solid $_bubble_borders_color;
&:hover, &:focus { &:hover, &:focus {
background-color: transparentize($fg_color,0.9); background-color: $_hover_bg_color;
color: $fg_color; color: $fg_color;
border: none; border: none;
padding: 14px; padding: 14px;
} }
&:active { background-color: $selected_bg_color; color: $selected_fg_color; } &:active {
background-color: $selected_bg_color;
color: $selected_fg_color;
}
& > StIcon { icon-size: 16px; } & > StIcon { icon-size: 16px; }
} }
@ -1207,6 +1270,7 @@ StScrollBar {
/* NETWORK DIALOGS */ /* NETWORK DIALOGS */
.nm-dialog { .nm-dialog {
@extend %bubble-panel;
max-height: 34em; max-height: 34em;
min-height: 31em; min-height: 31em;
min-width: 32em; min-width: 32em;
@ -1282,23 +1346,23 @@ StScrollBar {
} }
//search entry //search entry
.search-entry { .search-entry, %search_entry {
width: 320px; width: 320px;
padding: 7px 9px; padding: 7px 9px;
border-radius: 6px; border-radius: 18px;
border-color: darken($osd_fg_color,50%); color: $fg_color;
color: $osd_fg_color; background-color: $base_color;
background-color: $osd_bg_color; border-color: $borders_color;
&:focus { &:focus {
padding: 6px 8px; padding: 6px 8px;
border-width: 2px; border-width: 2px;
border-color: $selected_bg_color; border-color: $selected_bg_color;
} }
.search-entry-icon { icon-size: 1em; padding: 0 4px; color: transparentize($fg_color,.3); } .search-entry-icon { icon-size: 1em; padding: 0 4px; color: $fg_color; }
&:hover, &:focus { &:hover, &:focus {
.search-entry-icon { color: $fg_color; } .search-entry-icon { color: transparentize($fg_color,.3); }
} }
} }
@ -1327,7 +1391,7 @@ StScrollBar {
.list-search-result-content { spacing: 30px; } .list-search-result-content { spacing: 30px; }
.list-search-result-title { color: darken($osd_fg_color,5%); spacing: 12px; } .list-search-result-title { color: darken($osd_fg_color,5%); spacing: 12px; }
.list-search-result-description { color: transparentize(darken($osd_fg_color,15%), 0.5); } .list-search-result-description { color: darken($osd_fg_color, 30%); }
.list-search-provider-details { width: 150px; color: darken($osd_fg_color,5%); margin-top: 0.24em; } .list-search-provider-details { width: 150px; color: darken($osd_fg_color,5%); margin-top: 0.24em; }
.list-search-provider-content { spacing: 20px; } .list-search-provider-content { spacing: 20px; }
.search-provider-icon { padding: 15px; } .search-provider-icon { padding: 15px; }
@ -1336,12 +1400,9 @@ StScrollBar {
/* DASHBOARD */ /* DASHBOARD */
#dash { #dash {
@extend %overview-panel;
font-size: 9pt; font-size: 9pt;
color: $_bubble_fg_color;
background-color: $_bubble_bg_color;
padding: 4px 0; padding: 4px 0;
border: 1px solid rgba(128, 128, 128, 0.4);
border-left: 0px;
border-radius: 0px 9px 9px 0px; border-radius: 0px 9px 9px 0px;
&:rtl { &:rtl {
@ -1369,7 +1430,8 @@ StScrollBar {
border-radius: 7px; border-radius: 7px;
padding: 4px 12px; padding: 4px 12px;
color: $osd_fg_color; color: $osd_fg_color;
background-color: transparentize($osd_bg_color,0.3); background-color: transparentize($osd_bg_color,0.05);
border: 1px solid $osd_outer_borders_color;
text-align: center; text-align: center;
-x-offset: 8px; -x-offset: 8px;
} }
@ -1396,13 +1458,29 @@ StScrollBar {
} }
.app-view-control { //favorties | all toggle button .app-view-control { //favorties | all toggle button
padding: 4px 32px; padding: 4px 32px;
&:checked { @include button(active); } margin: 0 4px;
&, &:hover, &:checked { @include button(undecorated); }
&, &:hover { color: darken($osd_fg_color, 25%); }
&:hover { box-shadow: inset 0 -2px darken($osd_fg_color, 25%); }
&:active {
box-shadow: inset 0 -2px $osd_fg_color;
}
&:checked {
color: $osd_fg_color;
box-shadow: inset 0 -2px $selected_bg_color;
}
&:first-child { &:first-child {
border-right-width: 0; border-right-width: 0;
border-radius: 3px 0 0 3px; border-radius: 0;
} }
&:last-child { &:last-child {
border-radius: 0 3px 3px 0; border-radius: 0;
} }
} }
@ -1425,8 +1503,7 @@ StScrollBar {
} }
&:active .overview-icon, &:active .overview-icon,
&:checked .overview-icon { &:checked .overview-icon {
background-color: transparentize(darken($osd_bg_color,10%),.1); background-color: transparentize(darken($osd_bg_color,10%), 0.5);
box-shadow: inset 0 1px 2px $osd_borders_color;
} }
&:hover .overview-icon, &:hover .overview-icon,
&:focus .overview-icon, &:focus .overview-icon,
@ -1447,7 +1524,7 @@ StScrollBar {
%icon_tile { %icon_tile {
color: $osd_fg_color; color: $osd_fg_color;
border-radius: 4px; border-radius: $medium_radius;
padding: 6px; padding: 6px;
border: 1px solid transparent; border: 1px solid transparent;
transition-duration: 100ms; transition-duration: 100ms;
@ -1468,7 +1545,7 @@ StScrollBar {
// Collections // Collections
.app-folder-popup { //expanded collection .app-folder-popup { //expanded collection
-arrow-border-radius: 8px; -arrow-border-radius: 8px;
-arrow-background-color: transparentize($osd_bg_color,0.7); -arrow-background-color: transparentize(darken($osd_bg_color,10%), 0.5);
-arrow-base: 24px; -arrow-base: 24px;
-arrow-rise: 11px; -arrow-rise: 11px;
} }
@ -1521,7 +1598,7 @@ StScrollBar {
} }
} }
.workspace-thumbnail-indicator { .workspace-thumbnail-indicator {
border: 4px solid $selected_bg_color; border: 2px solid $selected_bg_color;
padding: 1px; padding: 1px;
} }
@ -1534,15 +1611,15 @@ StScrollBar {
} }
%overview-panel { %overview-panel {
color: $_bubble_fg_color; color: $osd_fg_color;
background-color: $_bubble_bg_color; background-color: transparentize($osd_bg_color, 0.1);
border: 1px solid $_bubble_borders_color; border: none;
} }
%status_text { %status_text {
font-size: 2em; font-size: 2em;
font-weight: bold; font-weight: bold;
color: $fg_color; color: $osd_fg_color;
} }
/* NOTIFICATIONS & MESSAGE TRAY */ /* NOTIFICATIONS & MESSAGE TRAY */
@ -1554,28 +1631,38 @@ StScrollBar {
font-size: 11pt; font-size: 11pt;
width: 34em; width: 34em;
margin: 5px; margin: 5px;
border-radius: 6px; border-radius: $medium-radius;
color: $_bubble_fg_color; border: if($variant == 'light', none, $_bubble_borders_color);
background-color: $_bubble_bg_color; min-height: 64px;
border: 1px solid $borders_color; box-shadow: 0 1px 2px transparentize(black, 0.7);
//box-shadow: 0 1px 4px black; &:hover { background: $bg_color; }
&:hover { background-color: $_bubble_bg_color; } &, &:focus, &:active {
&:focus { background-color: $_bubble_bg_color; } background-color: $bg_color;
.message-title { color: $fg_color }
.message-content { color: $fg_color; }
}
.message-icon-bin > StIcon {
color: $fg_color;
}
StEntry { @extend %bubble-entry; }
.notification-icon { padding: 5px; } .notification-icon { padding: 5px; }
.notification-content { padding: 5px; spacing: 5px; } .notification-content { padding: 5px; spacing: 5px; }
.secondary-icon { icon-size: 1.09em; } .secondary-icon { icon-size: 1.09em; }
.notification-actions { .notification-actions {
background-color: $borders_color; padding-top: 0;
padding-top: 2px; color: $fg_color;
spacing: 1px; border-top: 1px solid $_bubble_borders_color;
spacing: 0px;
} }
.notification-button { .notification-button {
padding: 4px 4px 5px; @extend %bubble_button;
background-color: darken($_bubble_bg_color,5%); &:focus { box-shadow: none; }
&:first-child { border-radius: 0 0 0 6px; } padding: 0 16px;
&:last-child { border-radius: 0 0 6px 0; } min-height: 35px;
&:hover, &focus { background-color: darken($_bubble_bg_color,2%); } border: none;
} }
} }
.summary-source-counter { .summary-source-counter {
@ -1586,7 +1673,7 @@ StScrollBar {
-shell-counter-overlap-y: 3px; -shell-counter-overlap-y: 3px;
background-color: $selected_bg_color; background-color: $selected_bg_color;
color: $selected_fg_color; color: $selected_fg_color;
border: 2px solid $osd_fg_color; border: 2px solid $fg_color;
box-shadow: 0 2px 2px rgba(0,0,0,0.5); box-shadow: 0 2px 2px rgba(0,0,0,0.5);
border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%; border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%;
} }
@ -1604,14 +1691,14 @@ StScrollBar {
} }
.chat-sent { .chat-sent {
padding-left: 18pt; padding-left: 18pt;
color: darken($fg_color, 15%); color: lighten($fg_color, 15%);
&:rtl { padding-left: 0; padding-right: 18pt; } &:rtl { padding-left: 0; padding-right: 18pt; }
} }
.chat-meta-message { .chat-meta-message {
padding-left: 4px; padding-left: 4px;
font-size: 9pt; font-size: 9pt;
font-weight: bold; font-weight: bold;
color: darken($fg_color,20%); color: lighten($fg_color,18%);
&:rtl { padding-left: 0; padding-right: 4px; } &:rtl { padding-left: 0; padding-right: 4px; }
} }
@ -1621,6 +1708,8 @@ StScrollBar {
padding: 2px 72px 2px 12px; padding: 2px 72px 2px 12px;
} }
.hotplug-notification-item { .hotplug-notification-item {
@extend %bubble_button;
border: none; box-shadow: none;
padding: 2px 10px; padding: 2px 10px;
&:focus { padding: 1px 71px 1px 11px; } &:focus { padding: 1px 71px 1px 11px; }
} }
@ -1635,7 +1724,7 @@ StScrollBar {
.hotplug-resident-mount { .hotplug-resident-mount {
spacing: 8px; spacing: 8px;
border-radius: 4px; border-radius: 4px;
&:hover { background-color: transparentize($bg_color,0.7); } &:hover { background-color: $_hover_bg_color; }
} }
.hotplug-resident-mount-label { .hotplug-resident-mount-label {
@ -1741,7 +1830,7 @@ StScrollBar {
-arrow-border-radius: 10px; -arrow-border-radius: 10px;
-arrow-background-color: transparentize($osd_bg_color, 0.3); -arrow-background-color: transparentize($osd_bg_color, 0.3);
-arrow-border-width: 2px; -arrow-border-width: 2px;
-arrow-border-color: $_bubble_borders_color; -arrow-border-color: $osd_outer_borders_color;
-arrow-base: 20px; -arrow-base: 20px;
-arrow-rise: 10px; -arrow-rise: 10px;
-boxpointer-gap: 5px; -boxpointer-gap: 5px;
@ -1816,18 +1905,68 @@ StScrollBar {
border: none; border: none;
background-color: transparent; background-color: transparent;
.modal-dialog-button-box { spacing: 3px; } $_gdm_fg: #f6f5f4;
.modal-dialog-button { $_gdm_bg: lighten(#2e3436, 19%);
padding: 3px 18px;
&:default {
@include button(normal,$c:$selected_bg_color);
&:hover,&:focus { @include button(hover,$c:$selected_bg_color); }
&:active { @include button(active,$c:$selected_bg_color); }
&:insensitive { @include button(insensitive); }
StEntry {
@extend %search_entry;
border-radius: 5px;
@if $variant=='dark' {
$_gdm_entry_bg: transparentize(lighten(desaturate(#241f31, 20%), 2%), 0.5);
background-color: $_gdm_entry_bg;
border-color: $_gdm_entry_bg;
color: $osd_fg_color;
} }
} }
.modal-dialog-button-box { spacing: 3px; }
.modal-dialog-button {
padding: 4px 18px;
box-shadow: 0 1px 3px transparentize($shadow_color, 0.02);
background-color: $_gdm_bg;
border-color: $_gdm_bg;
color: $_gdm_fg;
$_hover_c: lighten($_gdm_bg, 5%);
&:hover, &:focus {
background-color: $_hover_c;
border-color: $_hover_c;
}
&:active {
$_active_c: darken($_gdm_bg, 5%);
box-shadow: none;
background-color: $_active_c;
border-color: $_active_c;
}
&:insensitive {
@include button(insensitive);
border-color: darken($_gdm_bg, 5%);
background-color: darken($_gdm_bg, 5%);
color: transparentize($_gdm_fg, 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);
}
}
}
} }
.login-dialog-logo-bin { padding: 24px 0px; } .login-dialog-logo-bin { padding: 24px 0px; }
@ -1909,6 +2048,8 @@ StScrollBar {
//SCREEN SHIELD //SCREEN SHIELD
$_screenshield_shadow: 0px 0px 6px rgba(0, 0, 0, 0.726);
.screen-shield-arrows { .screen-shield-arrows {
padding-bottom: 3em; padding-bottom: 3em;
} }
@ -1918,12 +2059,12 @@ StScrollBar {
width: 80px; width: 80px;
height: 48px; height: 48px;
-arrow-thickness: 12px; -arrow-thickness: 12px;
-arrow-shadow: 0 1px 1px rgba(0,0,0,0.4); -arrow-shadow: $_screenshield_shadow;
} }
.screen-shield-clock { .screen-shield-clock {
color: white; color: white;
text-shadow: 0px 1px 2px rgba(0,0,0,0.6); text-shadow: $_screenshield_shadow;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
padding-bottom: 1.5em; padding-bottom: 1.5em;
@ -1931,7 +2072,7 @@ StScrollBar {
.screen-shield-clock-time { .screen-shield-clock-time {
font-size: 72pt; font-size: 72pt;
text-shadow: 0px 2px 2px rgba(0,0,0,0.4); text-shadow: $_screenshield_shadow;
font-feature-settings: "tnum"; font-feature-settings: "tnum";
} }
@ -1953,9 +2094,9 @@ StScrollBar {
.notification, .notification,
.screen-shield-notification-source { .screen-shield-notification-source {
padding: 12px 6px; padding: 12px 6px;
border: 1px solid $_bubble_borders_color; border: 1px solid $osd_outer_borders_color;
background-color: transparentize($osd_bg_color,0.5); background-color: transparentize($osd_bg_color,0.5);
color: $_bubble_fg_color; color: $osd_fg_color;
border-radius: 4px; border-radius: 4px;
} }
.notification { margin-right: 15px; } //compensate for space allocated to the scrollbar .notification { margin-right: 15px; } //compensate for space allocated to the scrollbar
@ -1969,7 +2110,7 @@ StScrollBar {
.screen-shield-notification-count-text { padding: 0px 0px 0px 12px; } .screen-shield-notification-count-text { padding: 0px 0px 0px 12px; }
#panel.lock-screen { background-color: transparentize($_bubble_bg_color, 0.5); } #panel.lock-screen { background-color: transparentize($osd_bg_color, 0.5); }
.screen-shield-background { //just the shadow, really .screen-shield-background { //just the shadow, really
background: black; background: black;
@ -1977,7 +2118,7 @@ StScrollBar {
} }
#lockDialogGroup { #lockDialogGroup {
background: #2e3436 url(resource:///org/gnome/shell/theme/noise-texture.png); background: lighten(#2e3436, 8%) url(resource:///org/gnome/shell/theme/noise-texture.png);
background-repeat: repeat; background-repeat: repeat;
} }

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

@ -37,16 +37,13 @@
// possible $t values: // possible $t values:
// normal, focus, insensitive // normal, focus, insensitive
// //
$_inner_shadows: inset 0 2px 4px transparentize(black, 0.6);
@if $t==normal { @if $t==normal {
background-color: $base_color; background-color: $base_color;
border-color: $borders_color; border-color: $borders_color;
@include _shadows($_inner_shadows);
} }
@if $t==focus { @if $t==focus {
@include _shadows($_inner_shadows);
border-color: if($fc==$selected_bg_color, border-color: if($fc==$selected_bg_color,
$selected_borders_color, $selected_borders_color,
darken($fc,35%)); darken($fc,35%));
@ -111,7 +108,7 @@
} }
} }
@mixin button($t, $c:$osd_bg_color, $tc:$fg_color, $edge: $borders_edge) { @mixin button($t, $c:$bg_color, $tc:$fg_color, $edge: $borders_edge) {
// //
// Button drawing function // Button drawing function
// //
@ -130,19 +127,17 @@
$_hilight_color: _button_hilight_color($c); $_hilight_color: _button_hilight_color($c);
$_button_edge: if($edge == none, none, _widget_edge($edge)); $_button_edge: if($edge == none, none, _widget_edge($edge));
$_blank_edge: if($edge == none, none, _widget_edge(transparentize($edge,1))); $_blank_edge: if($edge == none, none, _widget_edge(transparentize($edge,1)));
$_button_shadow: 0 1px 2px transparentize($shadow_color, 0.03);
@if $t==normal { @if $t==normal {
// //
// normal button // normal button
// //
$_bg: if($c!=$osd_bg_color, transparentize($c, 0.5),
$osd_bg_color);
color: $osd_fg_color; color: $tc;
background-color: $_bg; background-color: $c;
border-color: $osd_borders_color; border-color: $borders_color;
box-shadow: inset 0 1px lighten($osd_bg_color,10%); box-shadow: $_button_shadow;
text-shadow: 0 1px black; text-shadow: 0 1px black;
icon-shadow: 0 1px black; icon-shadow: 0 1px black;
} }
@ -150,26 +145,21 @@
// //
// focused button // focused button
// //
$_bg: if($c!=$osd_bg_color, transparentize($c, 0.3), color: $tc;
lighten($osd_bg_color,3%));
color: $osd_fg_color;
text-shadow: 0 1px black; text-shadow: 0 1px black;
icon-shadow: 0 1px black; icon-shadow: 0 1px black;
box-shadow: inset 0px 0px 0px 1px $selected_bg_color; box-shadow: inset 0px 0px 0px 2px $selected_bg_color;
//border-color: $selected_bg_color;
} }
@else if $t==hover { @else if $t==hover {
// //
// active osd button // active osd button
// //
$_bg: if($c!=$osd_bg_color, transparentize($c, 0.3), color: $tc;
lighten($osd_bg_color,3%)); border-color: $borders_color;
background-color: $c;
color: white; box-shadow: $_button_shadow;
border-color: $osd_borders_color;
background-color: $_bg;
box-shadow: inset 0 1px lighten($osd_bg_color,20%);
text-shadow: 0 1px black; text-shadow: 0 1px black;
icon-shadow: 0 1px black; icon-shadow: 0 1px black;
@ -178,27 +168,18 @@
// //
// active osd button // active osd button
// //
$_bg: if($c!=$bg_color, $c, $osd_borders_color); color: $tc;
border-color: $borders_color;
color: white; background-color: $c;
border-color: $osd_borders_color;
background-color: $selected_bg_color;
// This should be none, but it's creating some issues with borders, so to
// workaround it for now, use inset wich goes through a different code path.
// see https://bugzilla.gnome.org/show_bug.cgi?id=752934
box-shadow: inset 0 0 black;
text-shadow: none; text-shadow: none;
icon-shadow: none; icon-shadow: none;
box-shadow: none;
} }
@else if $t==insensitive { @else if $t==insensitive {
//
// insensitive osd button
//
$_bg: transparentize(mix($insensitive_fg_color,$osd_bg_color,20%),0.3);
color: $insensitive_fg_color; color: $insensitive_fg_color;
border-color: $osd_borders_color; border-color: $insensitive_borders_color;
background-color: $_bg; background-color: $insensitive_bg_color;
box-shadow: none; box-shadow: none;
text-shadow: none; text-shadow: none;
icon-shadow: none; icon-shadow: none;

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

@ -26,6 +26,7 @@ $osd_borders_color: transparentize(black, 0.3);
$osd_outer_borders_color: transparentize(white, 0.9); $osd_outer_borders_color: transparentize(white, 0.9);
$tooltip_borders_color: $osd_outer_borders_color; $tooltip_borders_color: $osd_outer_borders_color;
$shadow_color: transparentize(black, 0.9);
//insensitive state derived colors //insensitive state derived colors
$insensitive_fg_color: mix($fg_color, $bg_color, 50%); $insensitive_fg_color: mix($fg_color, $bg_color, 50%);

1
data/theme/toggle-off-dark.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="46" height="22"><defs><linearGradient id="a"><stop offset="0" stop-color="#39393a"/><stop offset="1" stop-color="#302f30"/></linearGradient><linearGradient xlink:href="#a" id="b" x1="53" y1="294.429" x2="53" y2="309.804" gradientUnits="userSpaceOnUse" gradientTransform="translate(-42.76)"/></defs><g transform="translate(0 -291.18)" stroke-width="1.085"><rect style="marker:none" width="44.446" height="20.911" x=".625" y="291.715" rx="10.455" ry="10.073" fill="#323233" stroke="#272728"/><rect ry="10.455" rx="10.455" y="291.715" x=".543" height="20.911" width="21.143" style="marker:none" fill="url(#b)" stroke="#151515"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 725 B

103
data/theme/toggle-off-intl.svg
View File

@ -1,103 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="46"
height="22"
viewBox="0 0 46 22"
version="1.1"
id="svg2751"
inkscape:version="0.92.4 5da689c313, 2019-01-14"
sodipodi:docname="toggle-off-intl.svg">
<defs
id="defs2745">
<linearGradient
inkscape:collect="always"
id="linearGradient3329">
<stop
style="stop-color:#39393a;stop-opacity:1;"
offset="0"
id="stop3325" />
<stop
style="stop-color:#302f30;stop-opacity:1"
offset="1"
id="stop3327" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient3329"
id="linearGradient3331"
x1="53"
y1="294.42917"
x2="53"
y2="309.80417"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(-42.760724)" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#535353"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="1"
inkscape:pageshadow="2"
inkscape:zoom="1"
inkscape:cx="-19.436775"
inkscape:cy="-13.499723"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:pagecheckerboard="true"
borderlayer="true"
inkscape:showpageshadow="false"
showborder="false">
<inkscape:grid
type="xygrid"
id="grid3298" />
</sodipodi:namedview>
<metadata
id="metadata2748">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-291.17916)">
<rect
style="opacity:1;vector-effect:none;fill:#323233;fill-opacity:1;stroke:#272728;stroke-width:1.08532763;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;paint-order:normal"
id="rect3296"
width="44.446434"
height="20.910645"
x="0.625"
y="291.71494"
rx="10.455324"
ry="10.073335" />
<rect
ry="10.455322"
rx="10.455322"
y="291.71494"
x="0.5428465"
height="20.910645"
width="21.142862"
id="rect3300"
style="opacity:1;vector-effect:none;fill:url(#linearGradient3331);fill-opacity:1;stroke:#151515;stroke-width:1.08532763;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;paint-order:normal" />
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 3.3 KiB

1
data/theme/toggle-off.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="46" height="22"><g transform="translate(0 -291.18)"><rect style="marker:none;font-variant-east_asian:normal" width="44.446" height="20.911" x=".625" y="291.715" rx="10.455" ry="10.073" fill="#e1dedb" stroke="#cdc7c2" stroke-linecap="round" stroke-linejoin="round"/><rect ry="10.455" rx="10.455" y="291.715" x=".543" height="20.911" width="21.143" style="marker:none;font-variant-east_asian:normal" fill="#f8f7f7" stroke="#aa9f98" stroke-linecap="round" stroke-linejoin="round"/><g transform="matrix(.97148 0 0 1 1658.914 -2552.91)" stroke-width="1.015" stroke-linecap="round" stroke-linejoin="round"><rect ry="13.17" rx="13.556" y="1234.681" x="-1242.732" height="26" width="49.409" style="marker:none" fill="#e1dedb" stroke="#cdc7c2"/><rect style="marker:none" width="26.763" height="26" x="-1242.732" y="1234.769" rx="13.511" ry="13.126" fill="#f8f7f7" stroke="#aa9f98"/></g><g transform="matrix(.97148 0 0 1 1658.914 -2512.91)" stroke-width="1.015" stroke="#2b73cc"><rect style="marker:none" width="49.409" height="26" x="-1242.732" y="1234.681" rx="13.556" ry="13.17" fill="#3081e3"/><rect ry="13.126" rx="13.511" y="1234.769" x="-1220.086" height="26" width="26.763" style="marker:none" fill="#f8f7f7" stroke-linecap="round" stroke-linejoin="round"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
data/theme/toggle-on-dark.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="46" height="22"><defs><linearGradient id="a"><stop offset="0" stop-color="#39393a"/><stop offset="1" stop-color="#302f30"/></linearGradient><linearGradient xlink:href="#a" id="b" x1="53" y1="294.429" x2="53" y2="309.804" gradientUnits="userSpaceOnUse" gradientTransform="translate(-19)"/></defs><g transform="translate(0 -291.18)" stroke="#030e1b" stroke-width="1.085"><rect style="marker:none" width="44.446" height="20.911" x=".625" y="291.715" rx="10.455" ry="10.073" fill="#15539e"/><rect ry="10.455" rx="10.455" y="291.715" x="24.304" height="20.911" width="21.143" style="marker:none" fill="url(#b)"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 707 B

103
data/theme/toggle-on-intl.svg
View File

@ -1,103 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="46"
height="22"
viewBox="0 0 46 22"
version="1.1"
id="svg2751"
inkscape:version="0.92.4 5da689c313, 2019-01-14"
sodipodi:docname="toggle-on-intl.svg">
<defs
id="defs2745">
<linearGradient
inkscape:collect="always"
id="linearGradient3329">
<stop
style="stop-color:#39393a;stop-opacity:1;"
offset="0"
id="stop3325" />
<stop
style="stop-color:#302f30;stop-opacity:1"
offset="1"
id="stop3327" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient3329"
id="linearGradient3331"
x1="53"
y1="294.42917"
x2="53"
y2="309.80417"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(-19)" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#535353"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="1"
inkscape:pageshadow="2"
inkscape:zoom="1"
inkscape:cx="13.588971"
inkscape:cy="14.124546"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:pagecheckerboard="true"
borderlayer="true"
inkscape:showpageshadow="false"
showborder="false">
<inkscape:grid
type="xygrid"
id="grid3298" />
</sodipodi:namedview>
<metadata
id="metadata2748">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-291.17916)">
<rect
style="opacity:1;vector-effect:none;fill:#15539e;fill-opacity:1;stroke:#030e1b;stroke-width:1.08532763;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;paint-order:normal"
id="rect3296"
width="44.446434"
height="20.910645"
x="0.625"
y="291.71494"
rx="10.455324"
ry="10.073335" />
<rect
ry="10.455322"
rx="10.455322"
y="291.71494"
x="24.30357"
height="20.910645"
width="21.142862"
id="rect3300"
style="opacity:1;vector-effect:none;fill:url(#linearGradient3331);fill-opacity:1;stroke:#030e1b;stroke-width:1.08532763;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;paint-order:normal" />
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 3.3 KiB

1
data/theme/toggle-on.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="46" height="22"><g transform="translate(0 -291.18)" stroke="#2b73cc"><rect style="marker:none;font-variant-east_asian:normal" width="44.446" height="20.911" x=".625" y="291.715" rx="10.455" ry="10.073" fill="#3081e3"/><rect ry="10.455" rx="10.455" y="291.715" x="24.304" height="20.911" width="21.143" style="marker:none;font-variant-east_asian:normal" fill="#f8f7f7" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 473 B

2
js/ui/lightbox.js
View File

@ -7,7 +7,7 @@ const Params = imports.misc.params;
const Tweener = imports.ui.tweener; const Tweener = imports.ui.tweener;
var DEFAULT_FADE_FACTOR = 0.4; var DEFAULT_FADE_FACTOR = 0.4;
var VIGNETTE_BRIGHTNESS = 0.8; var VIGNETTE_BRIGHTNESS = 0.2;
var VIGNETTE_SHARPNESS = 0.7; var VIGNETTE_SHARPNESS = 0.7;
const VIGNETTE_DECLARATIONS = '\ const VIGNETTE_DECLARATIONS = '\