to prepare for improving the directory structure (#170)
The color variables of SCSS in gnome-shell are renamed as follows:
$base_color -> $lighter_bg_color $alt_base_color -> $alt_lighter_bg_color
$panel_bg_color -> $solid_panel_bg_color
$bg_color -> $panel_bg_color $alt_bg_color -> $alt_panel_bg_color $inverse_bg_color -> $inverse_panel_bg_color
by roundabout, Tuesday, 16 January 2018, 13:05:02 (1516107902), pushed by roundabout, Sunday, 11 May 2025, 13:22:19 (1746969739)
Author identity: nana-4 <hnmaigo@gmail.com>
63fe6787b545c5269dedfca9982c5e96a300fd23
// based color palette:
// https://material.io/guidelines/style/color.html#color-color-palette
// Red
$red_50: #FFEBEE;
$red_100: #FFCDD2;
$red_200: #EF9A9A;
$red_300: #E57373;
$red_400: #EF5350;
$red_500: #F44336;
$red_600: #E53935;
$red_700: #D32F2F;
$red_800: #C62828;
$red_900: #B71C1C;
$red_A100: #FF8A80;
$red_A200: #FF5252;
$red_A400: #FF1744;
$red_A700: #D50000;
// Pink
$pink_50: #FCE4EC;
$pink_100: #F8BBD0;
$pink_200: #F48FB1;
$pink_300: #F06292;
$pink_400: #EC407A;
$pink_500: #E91E63;
$pink_600: #D81B60;
$pink_700: #C2185B;
$pink_800: #AD1457;
$pink_900: #880E4F;
$pink_A100: #FF80AB;
$pink_A200: #FF4081;
$pink_A400: #F50057;
$pink_A700: #C51162;
// Purple
$purple_50: #F3E5F5;
$purple_100: #E1BEE7;
$purple_200: #CE93D8;
$purple_300: #BA68C8;
$purple_400: #AB47BC;
$purple_500: #9C27B0;
$purple_600: #8E24AA;
$purple_700: #7B1FA2;
$purple_800: #6A1B9A;
$purple_900: #4A148C;
$purple_A100: #EA80FC;
$purple_A200: #E040FB;
$purple_A400: #D500F9;
$purple_A700: #AA00FF;
// Deep Purple
$deep_purple_50: #EDE7F6;
$deep_purple_100: #D1C4E9;
$deep_purple_200: #B39DDB;
$deep_purple_300: #9575CD;
$deep_purple_400: #7E57C2;
$deep_purple_500: #673AB7;
$deep_purple_600: #5E35B1;
$deep_purple_700: #512DA8;
$deep_purple_800: #4527A0;
$deep_purple_900: #311B92;
$deep_purple_A100: #B388FF;
$deep_purple_A200: #7C4DFF;
$deep_purple_A400: #651FFF;
$deep_purple_A700: #6200EA;
// Indigo
$indigo_50: #E8EAF6;
$indigo_100: #C5CAE9;
$indigo_200: #9FA8DA;
$indigo_300: #7986CB;
$indigo_400: #5C6BC0;
$indigo_500: #3F51B5;
$indigo_600: #3949AB;
$indigo_700: #303F9F;
$indigo_800: #283593;
$indigo_900: #1A237E;
$indigo_A100: #8C9EFF;
$indigo_A200: #536DFE;
$indigo_A400: #3D5AFE;
$indigo_A700: #304FFE;
// Blue
$blue_50: #E3F2FD;
$blue_100: #BBDEFB;
$blue_200: #90CAF9;
$blue_300: #64B5F6;
$blue_400: #42A5F5;
$blue_500: #2196F3;
$blue_600: #1E88E5;
$blue_700: #1976D2;
$blue_800: #1565C0;
$blue_900: #0D47A1;
$blue_A100: #82B1FF;
$blue_A200: #448AFF;
$blue_A400: #2979FF;
$blue_A700: #2962FF;
// Light Blue
$light_blue_50: #E1F5FE;
$light_blue_100: #B3E5FC;
$light_blue_200: #81D4FA;
$light_blue_300: #4FC3F7;
$light_blue_400: #29B6F6;
$light_blue_500: #03A9F4;
$light_blue_600: #039BE5;
$light_blue_700: #0288D1;
$light_blue_800: #0277BD;
$light_blue_900: #01579B;
$light_blue_A100: #80D8FF;
$light_blue_A200: #40C4FF;
$light_blue_A400: #00B0FF;
$light_blue_A700: #0091EA;
// Cyan
$cyan_50: #E0F7FA;
$cyan_100: #B2EBF2;
$cyan_200: #80DEEA;
$cyan_300: #4DD0E1;
$cyan_400: #26C6DA;
$cyan_500: #00BCD4;
$cyan_600: #00ACC1;
$cyan_700: #0097A7;
$cyan_800: #00838F;
$cyan_900: #006064;
$cyan_A100: #84FFFF;
$cyan_A200: #18FFFF;
$cyan_A400: #00E5FF;
$cyan_A700: #00B8D4;
// Teal
$teal_50: #E0F2F1;
$teal_100: #B2DFDB;
$teal_200: #80CBC4;
$teal_300: #4DB6AC;
$teal_400: #26A69A;
$teal_500: #009688;
$teal_600: #00897B;
$teal_700: #00796B;
$teal_800: #00695C;
$teal_900: #004D40;
$teal_A100: #A7FFEB;
$teal_A200: #64FFDA;
$teal_A400: #1DE9B6;
$teal_A700: #00BFA5;
// Green
$green_50: #E8F5E9;
$green_100: #C8E6C9;
$green_200: #A5D6A7;
$green_300: #81C784;
$green_400: #66BB6A;
$green_500: #4CAF50;
$green_600: #43A047;
$green_700: #388E3C;
$green_800: #2E7D32;
$green_900: #1B5E20;
$green_A100: #B9F6CA;
$green_A200: #69F0AE;
$green_A400: #00E676;
$green_A700: #00C853;
// Light Green
$light_green_50: #F1F8E9;
$light_green_100: #DCEDC8;
$light_green_200: #C5E1A5;
$light_green_300: #AED581;
$light_green_400: #9CCC65;
$light_green_500: #8BC34A;
$light_green_600: #7CB342;
$light_green_700: #689F38;
$light_green_800: #558B2F;
$light_green_900: #33691E;
$light_green_A100: #CCFF90;
$light_green_A200: #B2FF59;
$light_green_A400: #76FF03;
$light_green_A700: #64DD17;
// Lime
$lime_50: #F9FBE7;
$lime_100: #F0F4C3;
$lime_200: #E6EE9C;
$lime_300: #DCE775;
$lime_400: #D4E157;
$lime_500: #CDDC39;
$lime_600: #C0CA33;
$lime_700: #AFB42B;
$lime_800: #9E9D24;
$lime_900: #827717;
$lime_A100: #F4FF81;
$lime_A200: #EEFF41;
$lime_A400: #C6FF00;
$lime_A700: #AEEA00;
// Yellow
$yellow_50: #FFFDE7;
$yellow_100: #FFF9C4;
$yellow_200: #FFF59D;
$yellow_300: #FFF176;
$yellow_400: #FFEE58;
$yellow_500: #FFEB3B;
$yellow_600: #FDD835;
$yellow_700: #FBC02D;
$yellow_800: #F9A825;
$yellow_900: #F57F17;
$yellow_A100: #FFFF8D;
$yellow_A200: #FFFF00;
$yellow_A400: #FFEA00;
$yellow_A700: #FFD600;
// Amber
$amber_50: #FFF8E1;
$amber_100: #FFECB3;
$amber_200: #FFE082;
$amber_300: #FFD54F;
$amber_400: #FFCA28;
$amber_500: #FFC107;
$amber_600: #FFB300;
$amber_700: #FFA000;
$amber_800: #FF8F00;
$amber_900: #FF6F00;
$amber_A100: #FFE57F;
$amber_A200: #FFD740;
$amber_A400: #FFC400;
$amber_A700: #FFAB00;
// Orange
$orange_50: #FFF3E0;
$orange_100: #FFE0B2;
$orange_200: #FFCC80;
$orange_300: #FFB74D;
$orange_400: #FFA726;
$orange_500: #FF9800;
$orange_600: #FB8C00;
$orange_700: #F57C00;
$orange_800: #EF6C00;
$orange_900: #E65100;
$orange_A100: #FFD180;
$orange_A200: #FFAB40;
$orange_A400: #FF9100;
$orange_A700: #FF6D00;
// Deep Orange
$deep_orange_50: #FBE9E7;
$deep_orange_100: #FFCCBC;
$deep_orange_200: #FFAB91;
$deep_orange_300: #FF8A65;
$deep_orange_400: #FF7043;
$deep_orange_500: #FF5722;
$deep_orange_600: #F4511E;
$deep_orange_700: #E64A19;
$deep_orange_800: #D84315;
$deep_orange_900: #BF360C;
$deep_orange_A100: #FF9E80;
$deep_orange_A200: #FF6E40;
$deep_orange_A400: #FF3D00;
$deep_orange_A700: #DD2C00;
// Brown
$brown_50: #EFEBE9;
$brown_100: #D7CCC8;
$brown_200: #BCAAA4;
$brown_300: #A1887F;
$brown_400: #8D6E63;
$brown_500: #795548;
$brown_600: #6D4C41;
$brown_700: #5D4037;
$brown_800: #4E342E;
$brown_900: #3E2723;
// Grey
$grey_50: #FAFAFA;
$grey_100: #F5F5F5;
$grey_200: #EEEEEE;
$grey_300: #E0E0E0;
$grey_400: #BDBDBD;
$grey_500: #9E9E9E;
$grey_600: #757575;
$grey_700: #616161;
$grey_800: #424242;
$grey_900: #212121;
// Blue Grey
$blue_grey_50: #ECEFF1;
$blue_grey_100: #CFD8DC;
$blue_grey_200: #B0BEC5;
$blue_grey_300: #90A4AE;
$blue_grey_400: #78909C;
$blue_grey_500: #607D8B;
$blue_grey_600: #546E7A;
$blue_grey_700: #455A64;
$blue_grey_800: #37474F;
$blue_grey_900: #263238;
// Black
$black: #000000;
// White
$white: #FFFFFF;
iff --git a/src/gnome-shell/3.18/sass/_color-palette.scss b/src/gnome-shell/3.18/sass/_color-palette.scss
ew file mode 120000
ndex 00000000..7a5ba37f
-- /dev/null
++ b/src/gnome-shell/3.18/sass/_color-palette.scss
../../../gtk-3.0/3.22/sass/_color-palette.scss
// When color definition differs for dark and light variant,
// it gets @if ed depending on $variant
@import 'color-palette';
@function fade($c) {
@return mix($c, $grey_900, 50%);
}
// Foreground colors
$dark_fg_color: rgba($black, 0.87);
$light_fg_color: $white;
$button_fg_color: if($variant == 'light', rgba($black, 0.62), rgba($white, 0.8)); // extra fg color for raised buttons
$fg_color: if($variant == 'light', rgba($black, 0.87), $white);
$secondary_fg_color: if($variant == 'light', rgba($black, 0.54), rgba($white, 0.7));
$hint_fg_color: if($variant == 'light', rgba($black, 0.38), rgba($white, 0.5));
$disabled_fg_color: if($variant == 'light', rgba($black, 0.38), rgba($white, 0.5));
$disabled_secondary_fg_color: if($variant == 'light', rgba($black, 0.26), rgba($white, 0.3));
$track_color: if($variant == 'light', rgba($black, 0.26), rgba($white, 0.3));
$divider_color: if($variant == 'light', rgba($black, 0.12), rgba($white, 0.12));
$titlebar_fg_color: if($titlebar == 'light', rgba($black, 0.87), $white);
$titlebar_secondary_fg_color: if($titlebar == 'light', rgba($black, 0.54), rgba($white, 0.7));
$titlebar_hint_fg_color: if($titlebar == 'light', rgba($black, 0.38), rgba($white, 0.5));
$titlebar_disabled_fg_color: if($titlebar == 'light', rgba($black, 0.38), rgba($white, 0.5));
$titlebar_disabled_secondary_fg_color: if($titlebar == 'light', rgba($black, 0.26), rgba($white, 0.3));
$titlebar_track_color: if($titlebar == 'light', rgba($black, 0.26), rgba($white, 0.3));
$titlebar_divider_color: if($titlebar == 'light', rgba($black, 0.12), rgba($white, 0.12));
$inverse_fg_color: $white;
$inverse_secondary_fg_color: rgba($white, 0.7);
$inverse_hint_fg_color: rgba($white, 0.5);
$inverse_disabled_fg_color: rgba($white, 0.5);
$inverse_disabled_secondary_fg_color: rgba($white, 0.3);
$inverse_track_color: rgba($white, 0.3);
$inverse_divider_color: rgba($white, 0.12);
// Background colors
$base_color: if($variant == 'light', $grey_50, fade($blue_grey_500));
$alt_base_color: if($variant == 'light', $grey_200, fade($blue_grey_600));
$bg_color: rgba($black, $middle_opacity);
$alt_bg_color: rgba($black, $lower_opacity);
$inverse_bg_color: rgba($inverse_fg_color, 0.1);
$panel_bg_color: if($titlebar == 'dark', $blue_grey_900, $bg_color);
$gdm_bg_color: if($variant == 'light', $blue_grey_700, $blue_grey_800);
// Misc colors
$primary_color: $blue_400;
$alt_primary_color: $light_blue_A200;
$accent_color: $pink_A200;
$link_color: $primary_color;
$visited_link_color: $purple_A200;
$warning_color: $orange_A700;
$error_color: $deep_orange_A700;
$success_color: $green_A700;
$suggested_color: $accent_color;
$destructive_color: $red_A200;
$info_bg_color: $green_400;
$question_bg_color: $blue_400;
$warning_bg_color: $orange_400;
$error_bg_color: $red_400;
$border_color: if($variant == 'light', rgba($black, 0.12), rgba($black, 0.26));
$highlight_color: if($variant == 'light', rgba($white, 0.4), rgba($white, 0.1));
$alt_highlight_color: rgba($white, 0.2);
iff --git a/src/gnome-shell/3.18/sass/_colors.scss b/src/gnome-shell/3.18/sass/_colors.scss
ew file mode 120000
ndex 00000000..77f5f2c0
-- /dev/null
++ b/src/gnome-shell/3.18/sass/_colors.scss
../../../gtk-3.0/3.22/sass/_colors.scss
.modal-dialog {
border-radius: 2px;
color: $fg_color;
background-color: $base_color;
background-color: $lighter_bg_color;
border: none;
box-shadow: $shadow_4;
.modal-dialog-content-box {
.popup-menu-arrow { } //defined globally in the TOP BAR
.popup-sub-menu {
background-color: $alt_base_color;
background-color: $alt_lighter_bg_color;
box-shadow: $shadow_0;
}
-arrow-rise: 0;
-arrow-box-shadow: none; //dreaming. bug #689995
margin: 5px 8px 8px;
background-color: $base_color;
background-color: $lighter_bg_color;
border-radius: 2px;
box-shadow: $shadow_2;
}
/* Pad OSD */
.pad-osd-window {
padding: 32px;
background-color: $bg_color;
background-color: $panel_bg_color;
}
.combo-box-label {
%osd-panel {
color: $fg_color;
background-color: $base_color;
background-color: $lighter_bg_color;
border: none;
box-shadow: $shadow_4;
border-radius: 2px;
/* TOP BAR */
#panel {
background-color: $panel_bg_color;
background-color: $solid_panel_bg_color;
font-weight: bold;
height: $menuitem_size;
.panel-corner {
-panel-corner-radius: $panel-corner-radius;
-panel-corner-background-color: $bg_color;
-panel-corner-background-color: $panel_bg_color;
-panel-corner-border-width: 2px;
-panel-corner-border-color: transparent;
&:active, &:overview, &:focus, &:checked {
// Trick due to St limitations. It needs a background to draw
// a box-shadow
background-color: rgba($bg_color, 0.01);
background-color: rgba($panel_bg_color, 0.01);
box-shadow: inset 0 -2px 0px $inverse_fg_color;
color: $inverse_fg_color;
#dash {
font-size: 1em;
color: $inverse_fg_color;
background-color: $inverse_bg_color;
background-color: $inverse_panel_bg_color;
padding: 3px 0;
border: none;
border-left: 0px;
border-radius: 2px;
padding: 7px 8px;
color: $fg_color;
background-color: $base_color;
background-color: $lighter_bg_color;
box-shadow: $shadow_2;
text-align: center;
-x-offset: 8px;
}
&:checked {
color: $inverse_fg_color;
background-color: rgba($bg_color, 0.01) !important;
background-color: rgba($panel_bg_color, 0.01) !important;
box-shadow: inset 0 2px 0 $inverse_fg_color;
}
&:first-child {
}
.app-well-app.app-folder > .overview-icon {
background-color: $inverse_bg_color;
background-color: $inverse_panel_bg_color;
}
.show-apps .show-apps-icon {
// Collections
.app-folder-popup { //expanded collection
-arrow-border-radius: 2px;
-arrow-background-color: $inverse_bg_color;
-arrow-background-color: $inverse_panel_bg_color;
-arrow-base: 24px;
-arrow-rise: 12px;
}
%overview-panel {
color: $inverse_fg_color;
background-color: $inverse_bg_color;
background-color: $inverse_panel_bg_color;
border: none;
}
margin: 5px;
border-radius: 2px;
color: $fg_color;
background-color: $base_color;
background-color: $lighter_bg_color;
border: none;
box-shadow: $shadow_2;
&:hover { background-color: $base_color; }
&:focus { background-color: $base_color; }
&:hover { background-color: $lighter_bg_color; }
&:focus { background-color: $lighter_bg_color; }
.notification-icon { padding: 5px; }
.notification-content { padding: 5px; spacing: 5px; }
$legacy_icon_size: 24px;
.legacy-tray {
background-color: $bg_color;
background-color: $panel_bg_color;
color: $inverse_fg_color;
border: none;
border-bottom-width: 0;
/* On-screen Keyboard */
#keyboard {
background-color: $alt_bg_color;
background-color: $alt_panel_bg_color;
}
.keyboard-layout {
&:hover,&:checked { @include button(hover); }
&:active { @include button(active);}
&:grayed { //FIXME
background-color: $alt_bg_color;
background-color: $alt_panel_bg_color;
color: $inverse_fg_color;
border-color: $alt_bg_color;
border-color: $alt_panel_bg_color;
}
}
-arrow-base: 0;
-arrow-rise: 0;
-boxpointer-gap: 5px;
background-color: $base_color;
background-color: $lighter_bg_color;
border-radius: 2px;
box-shadow: $shadow_2;
}
.screen-shield-notification-source {
padding: 8px;
border: none;
background-color: $alt_bg_color;
background-color: $alt_panel_bg_color;
color: $inverse_fg_color;
border-radius: 2px;
}
color: $inverse_secondary_fg_color;
}
#panel.lock-screen { background-color: $alt_bg_color; }
#panel.lock-screen { background-color: $alt_panel_bg_color; }
.screen-shield-background { //just the shadow, really
background: black;
// Looking Glass
#LookingGlassDialog {
background-color: $base_color;
background-color: $lighter_bg_color;
spacing: 4px;
padding: 0;
border: none;
padding: 0 8px;
border: none;
border-radius: 0;
background-color: rgba($base_color, 0.01);
background-color: rgba($lighter_bg_color, 0.01);
box-shadow: inset 0 -1px 0 $border_color;
}
.labels { spacing: 0; }
&:selected {
border-bottom-width: 0;
border-color: transparent;
background-color: rgba($base_color, 0.01);
background-color: rgba($lighter_bg_color, 0.01);
box-shadow: inset 0 -2px 0px $primary_color;
color: $fg_color;
text-shadow: none;
}
#LookingGlassPropertyInspector {
background: $base_color;
background: $lighter_bg_color;
border: none;
border-radius: 2px;
padding: 6px;
//
@if $t == normal {
background-color: if($fc == $primary_color, rgba($base_color, 0.01), rgba($bg_color, 0.01));
background-color: if($fc == $primary_color, rgba($lighter_bg_color, 0.01), rgba($panel_bg_color, 0.01));
border-color: transparent;
box-shadow: inset 0 -1px if($fc == $primary_color, $track_color, $fc);
}
}
@mixin button($t, $c: $base_color, $tc: $fg_color) {
@mixin button($t, $c: $lighter_bg_color, $tc: $fg_color) {
//
// button
//
@if $t == insensitive {
color: if($tc == $fg_color, $disabled_secondary_fg_color, $tc);
background-color: if($c == $base_color, $divider_color, $c);
background-color: if($c == $lighter_bg_color, $divider_color, $c);
border-color: transparent;
box-shadow: $shadow_0;
text-shadow: none;
/* Dash to Dock */
#dashtodockContainer #dash {
background-color: $bg_color;
background-color: $panel_bg_color;
}
#dashtodockContainer:overview #dash {
background-color: $inverse_bg_color;
background-color: $inverse_panel_bg_color;
}
#dashtodockContainer.extended:overview #dash {
/* Simple Dock */
#dash:desktop {
background-color: $bg_color;
background-color: $panel_bg_color;
}
.modal-dialog {
border-radius: 2px;
color: $fg_color;
background-color: $base_color;
background-color: $lighter_bg_color;
border: none;
box-shadow: $shadow_4;
.modal-dialog-content-box {
.popup-menu-arrow { } //defined globally in the TOP BAR
.popup-sub-menu {
background-color: $alt_base_color;
background-color: $alt_lighter_bg_color;
box-shadow: $shadow_0;
}
-arrow-rise: 0;
-arrow-box-shadow: none; //dreaming. bug #689995
margin: 5px 8px 8px;
background-color: $base_color;
background-color: $lighter_bg_color;
border-radius: 2px;
box-shadow: $shadow_2;
}
/* Pad OSD */
.pad-osd-window {
padding: 32px;
background-color: $bg_color;
background-color: $panel_bg_color;
.pad-osd-title-box { spacing: 12px; }
.pad-osd-title-menu-box { spacing: 6px; }
%osd-panel {
color: $fg_color;
background-color: $base_color;
background-color: $lighter_bg_color;
border: none;
box-shadow: $shadow_4;
border-radius: 2px;
/* TOP BAR */
#panel {
background-color: $panel_bg_color;
background-color: $solid_panel_bg_color;
font-weight: bold;
height: $menuitem_size;
.panel-corner {
-panel-corner-radius: $panel-corner-radius;
-panel-corner-background-color: $bg_color;
-panel-corner-background-color: $panel_bg_color;
-panel-corner-border-width: 2px;
-panel-corner-border-color: transparent;
&:active, &:overview, &:focus, &:checked {
// Trick due to St limitations. It needs a background to draw
// a box-shadow
background-color: rgba($bg_color, 0.01);
background-color: rgba($panel_bg_color, 0.01);
box-shadow: inset 0 -2px 0px $inverse_fg_color;
color: $inverse_fg_color;
#dash {
font-size: 1em;
color: $inverse_fg_color;
background-color: $inverse_bg_color;
background-color: $inverse_panel_bg_color;
padding: 3px 0;
border: none;
border-left: 0px;
border-radius: 2px;
padding: 7px 8px;
color: $fg_color;
background-color: $base_color;
background-color: $lighter_bg_color;
box-shadow: $shadow_2;
text-align: center;
-x-offset: 8px;
}
&:checked {
color: $inverse_fg_color;
background-color: rgba($bg_color, 0.01) !important;
background-color: rgba($panel_bg_color, 0.01) !important;
box-shadow: inset 0 2px 0 $inverse_fg_color;
}
&:first-child {
}
.app-well-app.app-folder > .overview-icon {
background-color: $inverse_bg_color;
background-color: $inverse_panel_bg_color;
}
.show-apps .show-apps-icon {
// Collections
.app-folder-popup { //expanded collection
-arrow-border-radius: 2px;
-arrow-background-color: $inverse_bg_color;
-arrow-background-color: $inverse_panel_bg_color;
-arrow-base: 24px;
-arrow-rise: 12px;
}
%overview-panel {
color: $inverse_fg_color;
background-color: $inverse_bg_color;
background-color: $inverse_panel_bg_color;
border: none;
}
margin: 5px;
border-radius: 2px;
color: $fg_color;
background-color: $base_color;
background-color: $lighter_bg_color;
border: none;
box-shadow: $shadow_2;
&:hover { background-color: $base_color; }
&:focus { background-color: $base_color; }
&:hover { background-color: $lighter_bg_color; }
&:focus { background-color: $lighter_bg_color; }
.notification-icon { padding: 5px; }
.notification-content { padding: 5px; spacing: 5px; }
$legacy_icon_size: 24px;
.legacy-tray {
background-color: $bg_color;
background-color: $panel_bg_color;
color: $inverse_fg_color;
border: none;
border-bottom-width: 0;
/* On-screen Keyboard */
#keyboard {
background-color: $alt_bg_color;
background-color: $alt_panel_bg_color;
}
.keyboard-layout {
&:hover,&:checked { @include button(hover); }
&:active { @include button(active);}
&:grayed { //FIXME
background-color: $alt_bg_color;
background-color: $alt_panel_bg_color;
color: $inverse_fg_color;
border-color: $alt_bg_color;
border-color: $alt_panel_bg_color;
}
}
-arrow-base: 0;
-arrow-rise: 0;
-boxpointer-gap: 5px;
background-color: $base_color;
background-color: $lighter_bg_color;
border-radius: 2px;
box-shadow: $shadow_2;
}
.screen-shield-notification-source {
padding: 8px;
border: none;
background-color: $alt_bg_color;
background-color: $alt_panel_bg_color;
color: $inverse_fg_color;
border-radius: 2px;
}
color: $inverse_secondary_fg_color;
}
#panel.lock-screen { background-color: $alt_bg_color; }
#panel.lock-screen { background-color: $alt_panel_bg_color; }
.screen-shield-background { //just the shadow, really
background: black;
// Looking Glass
#LookingGlassDialog {
background-color: $base_color;
background-color: $lighter_bg_color;
spacing: 4px;
padding: 0;
border: none;
padding: 0 8px;
border: none;
border-radius: 0;
background-color: rgba($base_color, 0.01);
background-color: rgba($lighter_bg_color, 0.01);
box-shadow: inset 0 -1px 0 $border_color;
}
.labels { spacing: 0; }
&:selected {
border-bottom-width: 0;
border-color: transparent;
background-color: rgba($base_color, 0.01);
background-color: rgba($lighter_bg_color, 0.01);
box-shadow: inset 0 -2px 0px $primary_color;
color: $fg_color;
text-shadow: none;
}
#LookingGlassPropertyInspector {
background: $base_color;
background: $lighter_bg_color;
border: none;
border-radius: 2px;
padding: 6px;
.modal-dialog {
border-radius: 2px;
color: $fg_color;
background-color: $base_color;
background-color: $lighter_bg_color;
border: none;
box-shadow: $shadow_4;
.modal-dialog-content-box {
.popup-menu-arrow { } //defined globally in the TOP BAR
.popup-sub-menu {
background-color: $alt_base_color;
background-color: $alt_lighter_bg_color;
box-shadow: $shadow_0;
}
-arrow-rise: 0;
-arrow-box-shadow: none; //dreaming. bug #689995
margin: 5px 8px 8px;
background-color: $base_color;
background-color: $lighter_bg_color;
border-radius: 2px;
box-shadow: $shadow_2;
}
/* Pad OSD */
.pad-osd-window {
padding: 32px;
background-color: $bg_color;
background-color: $panel_bg_color;
.pad-osd-title-box { spacing: 12px; }
.pad-osd-title-menu-box { spacing: 6px; }
%osd-panel {
color: $fg_color;
background-color: $base_color;
background-color: $lighter_bg_color;
border: none;
box-shadow: $shadow_4;
border-radius: 2px;
/* TOP BAR */
#panel {
background-color: $bg_color;
background-color: $panel_bg_color;
/* transition from solid to transparent */
transition-duration: 250ms;
font-weight: bold;
.panel-corner {
-panel-corner-radius: $panel-corner-radius;
-panel-corner-background-color: $bg_color;
-panel-corner-background-color: $panel_bg_color;
-panel-corner-border-width: 2px;
-panel-corner-border-color: transparent;
&:active, &:overview, &:focus, &:checked {
// Trick due to St limitations. It needs a background to draw
// a box-shadow
background-color: rgba($bg_color, 0.01);
background-color: rgba($panel_bg_color, 0.01);
box-shadow: inset 0 -2px 0px $inverse_fg_color;
color: $inverse_fg_color;
.screencast-indicator { color: $warning_color; }
&.solid {
background-color: $panel_bg_color;
background-color: $solid_panel_bg_color;
/* transition from transparent to solid */
transition-duration: 250ms;
background-gradient-direction: none; // for Ubuntu session
&:overview { background-color: transparent; } // for Ubuntu session
.panel-corner {
-panel-corner-background-color: $panel_bg_color;
-panel-corner-background-color: $solid_panel_bg_color;
}
.panel-button {
.window-caption {
spacing: 25px;
color: $inverse_fg_color;
background-color: $bg_color;
background-color: $panel_bg_color;
border-radius: 2px;
padding: 4px 8px;
}
#dash {
font-size: 1em;
color: $inverse_fg_color;
background-color: $inverse_bg_color;
background-color: $inverse_panel_bg_color;
padding: 3px 0;
border: none;
border-left: 0px;
border-radius: 2px;
padding: 7px 8px;
color: $fg_color;
background-color: $base_color;
background-color: $lighter_bg_color;
box-shadow: $shadow_2;
text-align: center;
-x-offset: 8px;
}
&:checked {
color: $inverse_fg_color;
background-color: rgba($bg_color, 0.01) !important;
background-color: rgba($panel_bg_color, 0.01) !important;
box-shadow: inset 0 2px 0 $inverse_fg_color;
}
&:first-child {
}
.app-well-app.app-folder > .overview-icon {
background-color: $inverse_bg_color;
background-color: $inverse_panel_bg_color;
}
.show-apps .show-apps-icon {
// Collections
.app-folder-popup { //expanded collection
-arrow-border-radius: 2px;
-arrow-background-color: $inverse_bg_color;
-arrow-background-color: $inverse_panel_bg_color;
-arrow-base: 24px;
-arrow-rise: 12px;
}
%overview-panel {
color: $inverse_fg_color;
background-color: $inverse_bg_color;
background-color: $inverse_panel_bg_color;
border: none;
}
margin: 5px;
border-radius: 2px;
color: $fg_color;
background-color: $base_color;
background-color: $lighter_bg_color;
border: none;
box-shadow: $shadow_2;
&:hover { background-color: $base_color; }
&:focus { background-color: $base_color; }
&:hover { background-color: $lighter_bg_color; }
&:focus { background-color: $lighter_bg_color; }
.notification-icon { padding: 5px; }
.notification-content { padding: 5px; spacing: 5px; }
/* On-screen Keyboard */
#keyboard {
background-color: $alt_bg_color;
background-color: $alt_panel_bg_color;
}
.keyboard-layout {
&:hover,&:checked { @include button(hover); }
&:active { @include button(active);}
&:grayed { //FIXME
background-color: $alt_bg_color;
background-color: $alt_panel_bg_color;
color: $inverse_fg_color;
border-color: $alt_bg_color;
border-color: $alt_panel_bg_color;
}
}
-arrow-base: 0;
-arrow-rise: 0;
-boxpointer-gap: 5px;
background-color: $base_color;
background-color: $lighter_bg_color;
border-radius: 2px;
box-shadow: $shadow_2;
}
.screen-shield-notification-source {
padding: 8px;
border: none;
background-color: $alt_bg_color;
background-color: $alt_panel_bg_color;
color: $inverse_fg_color;
border-radius: 2px;
}
color: $inverse_secondary_fg_color;
}
#panel.lock-screen { background-color: $alt_bg_color; }
#panel.lock-screen { background-color: $alt_panel_bg_color; }
.screen-shield-background { //just the shadow, really
background: black;
// Looking Glass
#LookingGlassDialog {
background-color: $base_color;
background-color: $lighter_bg_color;
spacing: 4px;
padding: 0;
border: none;
padding: 0 8px;
border: none;
border-radius: 0;
background-color: rgba($base_color, 0.01);
background-color: rgba($lighter_bg_color, 0.01);
box-shadow: inset 0 -1px 0 $border_color;
}
.labels { spacing: 0; }
&:selected {
border-bottom-width: 0;
border-color: transparent;
background-color: rgba($base_color, 0.01);
background-color: rgba($lighter_bg_color, 0.01);
box-shadow: inset 0 -2px 0px $primary_color;
color: $fg_color;
text-shadow: none;
}
#LookingGlassPropertyInspector {
background: $base_color;
background: $lighter_bg_color;
border: none;
border-radius: 2px;
padding: 6px;
$base_color: if($variant == 'light', $white, fade($blue_grey_600));
$alt_base_color: if($variant == 'light', $grey_50, mix($base_color, $bg_color, 50%));
$lighter_bg_color: if($variant == 'light', $grey_50, fade($blue_grey_500));
$alt_lighter_bg_color: if($variant == 'light', $grey_200, fade($blue_grey_600)); // for gnome-shell sub menu
$darker_bg_color: if($variant == 'light', $grey_200, fade($blue_grey_900));
$titlebar_bg_color: if($titlebar == 'dark', if($variant == 'light', $blue_grey_700, $blue_grey_800), $grey_300);
$alt_titlebar_bg_color: if($titlebar == 'dark', $blue_grey_800, $grey_300);
$panel_bg_color: rgba($black, $middle_opacity);
$alt_panel_bg_color: rgba($black, $lower_opacity);
$inverse_panel_bg_color: rgba($inverse_fg_color, 0.1);
$solid_panel_bg_color: if($titlebar == 'dark', $blue_grey_900, $panel_bg_color);
$opaque_panel_bg_color: if($titlebar == 'dark', $blue_grey_900, mix($grey_300, $grey_400, 50%)); // for Unity panel which cannot use translucent colors
$alt_panel_bg_color: rgba($black, $lower_opacity);
$gdm_bg_color: if($variant == 'light', $blue_grey_700, $blue_grey_800);
$fill_color: gtkalpha(currentColor, $lower_opacity);
$semi_fill_color: gtkalpha(currentColor, $lower_opacity / 2);