From cbbd23ec075997c5b2ffb634ee03724759fbe58e Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Mon, 10 Aug 2015 20:31:22 +0200 Subject: gnome-shell theme improvements and some osd redesign --- common/gtk-3.0/3.16/sass/_colors.scss | 32 ++++------- common/gtk-3.0/3.16/sass/_common.scss | 20 +++---- common/gtk-3.0/3.16/sass/_drawing.scss | 33 ++++++----- common/gtk-3.0/3.16/sass/_lightdm.scss | 67 ++++++---------------- common/gtk-3.0/3.16/sass/_transparent_widgets.scss | 2 +- 5 files changed, 55 insertions(+), 99 deletions(-) (limited to 'common/gtk-3.0/3.16/sass') diff --git a/common/gtk-3.0/3.16/sass/_colors.scss b/common/gtk-3.0/3.16/sass/_colors.scss index c32b223..9c51858 100644 --- a/common/gtk-3.0/3.16/sass/_colors.scss +++ b/common/gtk-3.0/3.16/sass/_colors.scss @@ -24,19 +24,6 @@ $success_color: #73d216; $destructive_color: #F04A50; $suggested_color: #4DADD4; -$osd_fg_color: #A8ADB5; -$osd_bg_color: transparentize(#3c4049, 0.05); -$osd_button_bg: darken($osd_bg_color, 3%); - -$osd_insensitive_bg_color: darken($osd_bg_color, 3%); -$osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 30%); -$osd_borders_color: transparentize(black, 0.3); - - -$tooltip_bg: $osd_bg_color; -$tooltip_fg: #edf5fb; -$tooltip_borders_color: transparentize(white, 0.9); - //insensitive state derived colors $insensitive_fg_color: if($variant == 'light', transparentize($fg_color, 0.45), transparentize($fg_color, 0.55)); $insensitive_bg_color: if($variant == 'light', mix($bg_color, $base_color, 40%), lighten($bg_color, 2%)); @@ -44,7 +31,6 @@ $insensitive_bg_color: if($variant == 'light', mix($bg_color, $base_color, 40%), $entry_bg: if($variant=='light', $base_color, lighten($base_color, 0%)); $entry_border: if($variant == 'light', #cfd6e6, darken($borders_color, 0%)); -$entry_focus_border: $selected_bg_color; $button_bg: if($variant == 'light', lighten($bg_color, 2%), lighten($base_color, 2%)); $button_border: $entry_border; @@ -55,8 +41,6 @@ $header_bg: red; @if $transparency=='true' and ($variant=='dark' or $darker=='true') { $header_bg: transparentize(#2f343b, 0.03); } @if $transparency=='false' and ($variant=='dark' or $darker=='true') { $header_bg: #2f343b; } -//$header_bg: if(($darker == 'true' or $variant == 'dark') and $transparency == 'true', transparentize(#2f343b, 0.03), #2f343b); - $header_bg_backdrop: if($darker == 'true' or $variant == 'dark', lighten($header_bg, 1.5%), lighten($header_bg, 3%)); $header_border: if($variant == 'light', darken($header_bg, 7%), darken($header_bg, 5%)); @@ -64,15 +48,19 @@ $header_border: if($variant == 'light', darken($header_bg, 7%), darken($header_b $header_fg: if($variant == 'light', saturate(transparentize($fg_color, 0.2), 10%), saturate(transparentize($fg_color, 0.2), 10%)); $header_fg: if($darker == 'true', saturate(transparentize(#D3DAE3, 0.2), 10%), $header_fg); -$dark_sidebar_bg: if($transparency == 'true' and $variant == 'light', $osd_bg_color, opacify($osd_bg_color, 1)); -@if $variant==dark { $dark_sidebar_bg: if($transparency == 'true', lighten($osd_bg_color, 4%), lighten(opacify($osd_bg_color, 1), 4%)); } - -$dark_sidebar_fg: $osd_fg_color; +$dark_sidebar_bg: if($transparency == 'true', transparentize(#3c4049, 0.05), #3c4049); +$dark_sidebar_fg: #BAC3CF; $dark_sidebar_border: if($variant == 'light', $dark_sidebar_bg, darken($dark_sidebar_bg, 10%)); -$panel_bg: darken($osd_bg_color, 10%); -$panel_fg: $dark_sidebar_fg; +$osd_fg_color: $dark_sidebar_fg; +$osd_bg_color: darken($dark_sidebar_bg, 8%); + +$osd_insensitive_bg_color: darken($osd_bg_color, 3%); +$osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 30%); +$osd_borders_color: transparentize(black, 0.3); +$panel_bg: darken($osd_bg_color, 4.7%); +$panel_fg: $osd_fg_color; //WM Buttons diff --git a/common/gtk-3.0/3.16/sass/_common.scss b/common/gtk-3.0/3.16/sass/_common.scss index d7baa9d..9c0150f 100644 --- a/common/gtk-3.0/3.16/sass/_common.scss +++ b/common/gtk-3.0/3.16/sass/_common.scss @@ -441,7 +441,7 @@ $_dot_color: $selected_bg_color; &.image-button { padding: 10px; } - &:hover { @include button(osd-hover); border-color: transparentize($osd_fg_color, 0.7)} + &:hover { @include button(osd-hover); background-color: $osd_bg_color; } &:active, &:checked { @include button(osd-active); } &:insensitive { @include button(osd-insensitive); } } @@ -970,9 +970,9 @@ GtkComboBox { background-color: $bg_color; .osd &, &.osd { padding: 7px; - border: none; - border-radius: 4px; - background-color: $osd_bg_color; + border: 1px solid transparentize(black, 0.4); + border-radius: 3px; + background-color: transparentize($osd_bg_color, 0.1); } } @@ -2291,15 +2291,15 @@ GtkScrolledWindow { .app-notification, .app-notification.frame { - @extend %osd; padding: 10px; - background-color: $osd_bg_color; + color: $dark_sidebar_fg; + background-color: $dark_sidebar_bg; background-clip: border-box; border-radius: 0 0 2px 2px; border-width: 0 1px 1px 1px; border-style: solid; - border-color: darken($osd_bg_color, 10%); - + border-color: darken($dark_sidebar_bg, 10%); + .button { @include button(osd); &.flat { @@ -2570,11 +2570,11 @@ GtkInfoBar { &.background { // background-color needs to be set this way otherwise it gets drawn twice // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details. - background-color: $tooltip_bg; + background-color: $osd_bg_color; background-clip: padding-box; } - color: $tooltip_fg; + color: $osd_fg_color; border-radius: 2px; &.window-frame.csd { diff --git a/common/gtk-3.0/3.16/sass/_drawing.scss b/common/gtk-3.0/3.16/sass/_drawing.scss index 378e5d9..c073126 100644 --- a/common/gtk-3.0/3.16/sass/_drawing.scss +++ b/common/gtk-3.0/3.16/sass/_drawing.scss @@ -87,30 +87,30 @@ @else if $t==osd { // - // normal osd button + // normal osd entry // color: $osd_fg_color; - border-color: transparentize($osd_fg_color, 0.7); + border-color: transparentize(black, 0.6); background-color: transparent; - background-image: linear-gradient(to bottom, darken($osd_bg_color, 5%)); + background-image: linear-gradient(to bottom, transparentize(black, 0.8)); } @else if $t==osd-focus { // - // active osd button + // active osd entry // - color: $selected_bg_color; + color: $osd_fg_color; border-color: $selected_bg_color; - background-image: linear-gradient(to bottom, darken($osd_bg_color, 5%)); + background-image: linear-gradient(to bottom, transparentize(black, 0.8)); } @else if $t==osd-insensitive { // - // insensitive osd button + // insensitive osd entry // color: $osd_insensitive_fg_color; - border-color: transparentize($osd_fg_color, 0.8); - background-image: linear-gradient(to bottom, $osd_insensitive_bg_color); + border-color: transparentize(black, 0.6); + background-image: linear-gradient(to bottom, transparentize(black, 0.9)); } } @@ -237,19 +237,18 @@ // color: $osd_fg_color; outline-color: transparentize($osd_fg_color, 0.7); - border-color: transparentize($osd_fg_color, 0.7); - background-color: transparent; - background-image: linear-gradient(to bottom, darken($osd_bg_color, 5%)); + border-color: transparentize(black, 0.55); + background-color: transparentize(black, 0.7); } @else if $t==osd-hover { // // active osd button // - color: $selected_bg_color; + color: $osd_fg_color; outline-color: transparentize($osd_fg_color, 0.7); border-color: $selected_bg_color; - background-image: linear-gradient(to bottom, darken($osd_bg_color, 5%)); + background-color: transparentize(black, 0.7); } @else if $t==osd-active { @@ -259,7 +258,7 @@ color: $selected_fg_color; outline-color: transparentize($selected_fg_color, 0.7); border-color: $selected_bg_color; - background-image: linear-gradient(to bottom, $selected_bg_color); + background-color: $selected_bg_color; } @else if $t==osd-insensitive { @@ -267,8 +266,8 @@ // insensitive osd button // color: $osd_insensitive_fg_color; - border-color: transparentize($osd_fg_color, 0.8); - background-image: linear-gradient(to bottom, $osd_insensitive_bg_color); + border-color: transparentize(black, 0.55); + background-color: transparentize(black, 0.85); } @else if $t==suggested_destructive { diff --git a/common/gtk-3.0/3.16/sass/_lightdm.scss b/common/gtk-3.0/3.16/sass/_lightdm.scss index 9b14d09..9b2fa76 100644 --- a/common/gtk-3.0/3.16/sass/_lightdm.scss +++ b/common/gtk-3.0/3.16/sass/_lightdm.scss @@ -14,7 +14,7 @@ } .menubar .menuitem:insensitive { - color: darken($panel_fg, 20%); + color: transparentize($panel_fg, 0.5); GtkLabel { color: inherit; } } @@ -34,9 +34,11 @@ /* the top half of the login-window, in GtkDialog terms, the content */ #content_frame { padding-bottom: 14px; - background-color: transparentize($bg_color, 0.05); + background-color: if($variant == 'light', $bg_color, $base_color); border-top-left-radius: 2px; border-top-right-radius: 2px; + border: solid transparentize(black, 0.9); + border-width: 1px 1px 0 1px; } #content_frame .button { @@ -53,8 +55,11 @@ padding-bottom: 0px; border-style: none; background-color: $osd_bg_color; - border-bottom-left-radius: 2px; - border-bottom-right-radius: 2px; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + border: solid transparentize(black, 0.9); + border-width: 0 1px 1px 1px; + box-shadow: inset 0 1px darken($osd_bg_color, 10%); } #buttonbox_frame .button{ @@ -76,7 +81,7 @@ /* the user's avatar box */ #user_image { padding: 3px; - border-radius: 3px; + border-radius: 2px; } /* the border around the user's avatar box */ @@ -84,54 +89,18 @@ /* the shutdown button */ #shutdown_button.button { - color: $selected_fg_color; - outline-color: transparentize($selected_fg_color, 0.7); - border-color: $destructive_color; - background-color: $destructive_color; - background-image: none; - background-clip: border-box; - - &:hover { - color: $selected_fg_color; - outline-color: transparentize($selected_fg_color, 0.7); - border-color: lighten($destructive_color, 9%); - background-color: lighten($destructive_color, 9%); - background-image: none; - } - &:active, &:checked { - color: $selected_fg_color; - outline-color: transparentize($selected_fg_color, 0.7); - border-color: darken($destructive_color, 7%); - background-color: darken($destructive_color, 7%); - background-image: none; - } + @include button(suggested_destructive, $destructive_color); + + &:hover { @include button(suggested_destructive, lighten($destructive_color, 10%)); } + &:active, &:checked { @include button(suggested_destructive, darken($destructive_color, 10%)); } } /* the restart button */ #restart_button.button { - $_restart_bg: #51CF74; - - color: $selected_fg_color; - outline-color: transparentize($selected_fg_color, 0.7); - border-color: $_restart_bg; - background-color: $_restart_bg; - background-image: none; - background-clip: border-box; - - &:hover { - color: $selected_fg_color; - outline-color: transparentize($selected_fg_color, 0.7); - border-color: lighten($_restart_bg, 9%); - background-color: lighten($_restart_bg, 9%); - background-image: none; - } - &:active, &:checked { - color: $selected_fg_color; - outline-color: transparentize($selected_fg_color, 0.7); - border-color: darken($_restart_bg, 7%); - background-color: darken($_restart_bg, 7%); - background-image: none; - } + @include button(suggested_destructive, $suggested_color); + + &:hover { @include button(suggested_destructive, lighten($suggested_color, 10%)); } + &:active, &:checked { @include button(suggested_destructive, darken($suggested_color, 10%)); } } /* the warning, in case a wrong password is entered or something else goes wrong according to PAM */ diff --git a/common/gtk-3.0/3.16/sass/_transparent_widgets.scss b/common/gtk-3.0/3.16/sass/_transparent_widgets.scss index f734c0c..16bbb1e 100644 --- a/common/gtk-3.0/3.16/sass/_transparent_widgets.scss +++ b/common/gtk-3.0/3.16/sass/_transparent_widgets.scss @@ -36,7 +36,7 @@ MarlinViewWindow { background-color: transparent; color: $dark_sidebar_fg; - &.image { color: transparentize($dark_sidebar_fg, 0.4); } + &.image { color: transparentize($dark_sidebar_fg, 0.3); } &.cell:selected { background-color: $selected_bg_color; -- cgit v1.2.3