From 6972bc90f2deec7fc31f536f4941f95172b59da0 Mon Sep 17 00:00:00 2001 From: Jakub Steiner Date: Thu, 2 Oct 2014 21:03:25 +0200 Subject: [PATCH] theme: modal dialogs and tweaked entries --- data/theme/_common.scss | 59 ++++++++++- data/theme/_drawing.scss | 65 +++--------- data/theme/_gnome-shell-old.scss | 134 ------------------------ data/theme/gnome-shell.css | 172 ++++++++++--------------------- data/theme/gnome-shell.scss | 2 +- 5 files changed, 129 insertions(+), 303 deletions(-) diff --git a/data/theme/_common.scss b/data/theme/_common.scss index 439197e12..a30f404ec 100644 --- a/data/theme/_common.scss +++ b/data/theme/_common.scss @@ -37,7 +37,8 @@ stage { /* WIDGETS */ /* Buttons */ -//one would think we may want a generic button class: +// one would think we may want a generic button class: +// bug #737785 .candidate-page-button, .notification-button, .notification-icon-button, @@ -56,6 +57,26 @@ stage { } /* Entries */ +StEntry { + border-radius: 3px; + padding: 4px; + border-width: 1px; + color: $fg_color; + @include entry(normal); + //&:hover { @include entry(hover);} + &:focus { @include entry(focus,$fc:transparentize($fg_color,0.5));} + &:insensitive { @include entry(insensitive);} + + .search-entry { + padding: 9px; + border-radius: 24px; + &:focus { + padding: 8px; + border-width: 2px; + } + } +} + /* Scrollbars */ @@ -89,6 +110,42 @@ StScrollBar { &:hover { color: lighten($link_color,10%); } } +/* Modal Dialogs */ + +.lightbox { background-color: black; } //FIXME where is this? +.flashspot { background-color: white; } //FIXME where is this? + +.modal-dialog { + border-radius: 5px; + background-color: transparentize(darken($bg_color,10%),0.05); + border: 1px solid $borders_color; + padding: 24px; + + .run-dialog-entry { width: 20em; } + .run-dialog-error-box { + padding-top: 16px; + spacing: 6px; + } + .run-dialog-button-box { padding-top: 1em; } + .run-dialog-label { + font-size: fontsize($font-size + 1.1); + font-weight: bold; + color: darken($fg_color,10%); + padding-bottom: .4em; + } + +} + .button-dialog-button-box { + spacing: 18px; + padding-top: 48px; + } + + .show-processes-dialog-subject, + .mount-question-dialog-subject, + .end-session-dialog-subject { //this should be a generic header class + font-size: fontsize($font-size * 1.3); + } + /* Popvers/Menus */ .popup-menu { diff --git a/data/theme/_drawing.scss b/data/theme/_drawing.scss index 33b4fd4ad..e537a806f 100644 --- a/data/theme/_drawing.scss +++ b/data/theme/_drawing.scss @@ -25,10 +25,6 @@ // entries -@function entry_gradient($c) { - @return linear-gradient(to bottom, darken($c,3%), $c 90%); -} - @mixin entry($t, $fc:$selected_bg_color, $edge: $borders_edge) { // // Entries drawing function @@ -39,60 +35,27 @@ // use the default one // // possible $t values: -// normal, focus, insensitive, backdrop, backdrop-insensitive; +// normal, focus, insensitive // - background-color: transparent; - background-image: entry_gradient($base_color); - $_blank_edge: if($edge == none, none, 0 1px transparentize($edge,1)); - $_entry_edge: if($edge == none, none, _widget_edge($edge)); - $_inner_shadows: inset 0 3px transparentize(black, 0.98), - inset 0 2px transparentize(black, 0.97), - inset 0 1px transparentize(black, 0.92); - - // we need to match the same shadow types (inset/outset) in various states - // hence transparent shadows istead of resetting them when not needed - $_blank_inner_shadows: inset 0 3px transparentize(black, 1), - inset 0 2px transparentize(black, 1), - inset 0 1px transparentize(black, 1); - $_focus_glow_color: if($variant=='light', transparentize($fc,0.85), - transparentize($fc,0.3)); + $_inner_shadows: inset 0 2px 4px transparentize(black, 0.6); @if $t==normal { + background-color: $base_color; border-color: $borders_color; - @include _shadows($_inner_shadows, - inset 0 0 0 1px transparentize($fc,1), - $_entry_edge); - // the second transparent shadow is needed for the transition to work - } - @if $t==focus { - @include _shadows($_inner_shadows, - inset 0 0 0 1px $_focus_glow_color, - $_entry_edge); - @if $variant == 'light' { border-color: $fc; } - @else { - border-color: if($fc==$selected_bg_color, - $selected_borders_color, - darken($fc,35%)); - } - } - @if $t==insensitive { - color: $insensitive_fg_color; - border-color: $borders_color; - background-image: linear-gradient(to bottom, $insensitive_bg_color); - @include _shadows($_blank_inner_shadows, $_entry_edge); + @include _shadows($_inner_shadows); } - @if $t==backdrop { - color: $backdrop_fg_color; - border-color: $backdrop_borders_color; - background-image: linear-gradient(to bottom, $backdrop_base_color); - @include _shadows($_blank_inner_shadows, $_blank_edge); + @if $t==focus { + @include _shadows($_inner_shadows); + border-color: if($fc==$selected_bg_color, + $selected_borders_color, + darken($fc,35%)); } - @if $t==backdrop-insensitive { - color: $backdrop_insensitive_color; - border-color: $backdrop_borders_color; - background-image: linear-gradient(to bottom, $insensitive_bg_color); - @include _shadows($_blank_inner_shadows, $_blank_edge); + @if $t==hover { } + @if $t==insensitive { + color: $insensitive_fg_color; + border-color: $insensitive_bg_color; + box-shadow: none; } } diff --git a/data/theme/_gnome-shell-old.scss b/data/theme/_gnome-shell-old.scss index 613be6a1b..2f9a7602b 100644 --- a/data/theme/_gnome-shell-old.scss +++ b/data/theme/_gnome-shell-old.scss @@ -189,91 +189,7 @@ } -/* Entries */ -.search-entry, -.login-dialog StEntry, -.notification StEntry, -.modal-dialog StEntry { - color: rgb(64, 64, 64); - caret-color: rgb(64, 64, 64); - font-size: 12pt; - caret-size: 1px; - selected-color: white; - padding: 4px 12px; -} - -.search-entry, -.login-dialog StEntry, -.run-dialog-entry, -.notification StEntry { - border: 2px solid rgba(245,245,245,0.2); - background-gradient-start: rgba(5,5,6,0.1); - background-gradient-end: rgba(254,254,254,0.1); - background-gradient-direction: vertical; - transition-duration: 300ms; - box-shadow: inset 0px 2px 4px rgba(0,0,0,0.6); -} - -.search-entry:focus, -.search-entry:hover, -.login-dialog StEntry:focus, -.notification StEntry:focus, -.modal-dialog StEntry { - border: 2px solid rgb(136,138,133); - background-gradient-start: rgb(200,200,200); - background-gradient-end: white; - background-gradient-direction: vertical; - box-shadow: inset 0px 2px 4px rgba(0,0,0,0.6); -} - -.login-dialog StEntry:focus, -.notification StEntry:focus, -.modal-dialog StEntry:focus { - border: 2px solid #3465a4; -} - -.search-entry { - border-color: rgba(245,245,245,0.3); - color: rgb(192, 192, 192); - caret-color: rgb(192, 192, 192); -} - -.search-entry:hover { - color: rgb(128, 128, 128); - caret-color: rgb(128, 128, 128); -} - -.search-entry:focus { - color: rgb(64, 64, 64); - caret-color: rgb(64, 64, 64); - font-weight: bold; - transition-duration: 0ms; -} - -.login-dialog StEntry, -.notification StEntry, -.modal-dialog StEntry { - border-radius: 5px; - padding: 4px 4px; -} - -.prompt-dialog-password-entry .capslock-warning, -.login-dialog-prompt-entry .capslock-warning { - icon-size: 16px; - warning-color: #999; - padding: 0 4px; -} - -.login-dialog StEntry:insensitive, -.modal-dialog StEntry:insensitive { - border-color: #666666; - color: #9f9f9f; - border: 2px solid #9f9f9f; - background-gradient-direction: none; - background-color: rgba(102, 102, 102, 0.15); - box-shadow: inset 0 0 rgba(0,0,0,1.0); -} /* Panel */ @@ -1629,56 +1545,6 @@ /* Modal Dialogs */ -/* Dialog Subject Text Style */ -.show-processes-dialog-subject, -.mount-question-dialog-subject, -.end-session-dialog-subject { - font-size: 14pt; - font-weight: bold; - color: #999999; -} - -.modal-dialog { - border-radius: 24px; - background-color: rgba(0.0, 0.0, 0.0, 0.9); - border: 2px solid #868686; - - padding-right: 42px; - padding-left: 42px; - padding-bottom: 30px; - padding-top: 30px; -} - -.modal-dialog-button-box { - spacing: 21px; - padding-top: 50px; -} - -/* Run Dialog */ - -.run-dialog-label { - font-size: 12pt; - font-weight: bold; - color: #999999; - padding-bottom: .4em; -} - -.run-dialog-error-box { - padding-top: 15px; - spacing: 5px; -} - -.modal-dialog .run-dialog-entry { - width: 20em; -} - -.lightbox { - background-color: black; -} - -.flashspot { - background-color: white; -} /* End Session Dialog */ .end-session-dialog { diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css index 58fa5aa6d..5d11b4e31 100644 --- a/data/theme/gnome-shell.css +++ b/data/theme/gnome-shell.css @@ -146,81 +146,6 @@ .no-networks-box { spacing: 12px; } -/* Entries */ -.search-entry, -.login-dialog StEntry, -.notification StEntry, -.modal-dialog StEntry { - color: #404040; - caret-color: #404040; - font-size: 12pt; - caret-size: 1px; - selected-color: white; - padding: 4px 12px; } - -.search-entry, -.login-dialog StEntry, -.run-dialog-entry, -.notification StEntry { - border: 2px solid rgba(245, 245, 245, 0.2); - background-gradient-start: rgba(5, 5, 6, 0.1); - background-gradient-end: rgba(254, 254, 254, 0.1); - background-gradient-direction: vertical; - transition-duration: 300ms; - box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.6); } - -.search-entry:focus, -.search-entry:hover, -.login-dialog StEntry:focus, -.notification StEntry:focus, -.modal-dialog StEntry { - border: 2px solid #888a85; - background-gradient-start: #c8c8c8; - background-gradient-end: white; - background-gradient-direction: vertical; - box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.6); } - -.login-dialog StEntry:focus, -.notification StEntry:focus, -.modal-dialog StEntry:focus { - border: 2px solid #3465a4; } - -.search-entry { - border-color: rgba(245, 245, 245, 0.3); - color: silver; - caret-color: silver; } - -.search-entry:hover { - color: gray; - caret-color: gray; } - -.search-entry:focus { - color: #404040; - caret-color: #404040; - font-weight: bold; - transition-duration: 0ms; } - -.login-dialog StEntry, -.notification StEntry, -.modal-dialog StEntry { - border-radius: 5px; - padding: 4px 4px; } - -.prompt-dialog-password-entry .capslock-warning, -.login-dialog-prompt-entry .capslock-warning { - icon-size: 16px; - warning-color: #999; - padding: 0 4px; } - -.login-dialog StEntry:insensitive, -.modal-dialog StEntry:insensitive { - border-color: #666666; - color: #9f9f9f; - border: 2px solid #9f9f9f; - background-gradient-direction: none; - background-color: rgba(102, 102, 102, 0.15); - box-shadow: inset 0 0 black; } - /* Panel */ #panel { background-color: black; @@ -1349,47 +1274,6 @@ border-radius: 6px 6px 0 0; } /* Modal Dialogs */ -/* Dialog Subject Text Style */ -.show-processes-dialog-subject, -.mount-question-dialog-subject, -.end-session-dialog-subject { - font-size: 14pt; - font-weight: bold; - color: #999999; } - -.modal-dialog { - border-radius: 24px; - background-color: rgba(0, 0, 0, 0.9); - border: 2px solid #868686; - padding-right: 42px; - padding-left: 42px; - padding-bottom: 30px; - padding-top: 30px; } - -.modal-dialog-button-box { - spacing: 21px; - padding-top: 50px; } - -/* Run Dialog */ -.run-dialog-label { - font-size: 12pt; - font-weight: bold; - color: #999999; - padding-bottom: .4em; } - -.run-dialog-error-box { - padding-top: 15px; - spacing: 5px; } - -.modal-dialog .run-dialog-entry { - width: 20em; } - -.lightbox { - background-color: black; } - -.flashspot { - background-color: white; } - /* End Session Dialog */ .end-session-dialog { spacing: 42px; } @@ -2050,6 +1934,28 @@ stage { icon-shadow: none; } /* Entries */ +StEntry { + border-radius: 3px; + padding: 4px; + border-width: 1px; + color: #eeeeec; + background-color: #292929; + border-color: #1c1f1f; + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4); } + StEntry:focus { + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4); + border-color: rgba(154, 154, 142, 0.5); } + StEntry:insensitive { + color: #939695; + border-color: #323636; + box-shadow: none; } + StEntry .search-entry { + padding: 9px; + border-radius: 24px; } + StEntry .search-entry:focus { + padding: 8px; + border-width: 2px; } + /* Scrollbars */ StScrollBar { padding: 0; } @@ -2078,6 +1984,40 @@ StScrollBar { .shell-link:hover { color: #74aae2; } +/* Modal Dialogs */ +.lightbox { + background-color: black; } + +.flashspot { + background-color: white; } + +.modal-dialog { + border-radius: 5px; + background-color: rgba(33, 36, 36, 0.95); + border: 1px solid #1c1f1f; + padding: 24px; } + .modal-dialog .run-dialog-entry { + width: 20em; } + .modal-dialog .run-dialog-error-box { + padding-top: 16px; + spacing: 6px; } + .modal-dialog .run-dialog-button-box { + padding-top: 1em; } + .modal-dialog .run-dialog-label { + font-size: fontsize(12.1); + font-weight: bold; + color: #d6d6d1; + padding-bottom: .4em; } + +.button-dialog-button-box { + spacing: 18px; + padding-top: 48px; } + +.show-processes-dialog-subject, +.mount-question-dialog-subject, +.end-session-dialog-subject { + font-size: fontsize(14.3); } + /* Popvers/Menus */ .popup-menu { min-width: 200px; } diff --git a/data/theme/gnome-shell.scss b/data/theme/gnome-shell.scss index 1ef9f2912..b40a76c57 100644 --- a/data/theme/gnome-shell.scss +++ b/data/theme/gnome-shell.scss @@ -1,6 +1,6 @@ $variant: 'dark'; -@import "_gnome-shell-old.scss"; //temporary +@import "_gnome-shell-old.scss"; //temporary. sadlu shell crashes when trying to build a theme from scratch @import "_colors"; //use gtk colors @import "_drawing"; @import "_common";