theme: modal dialogs and tweaked entries
This commit is contained in:
Jakub Steiner
Florian Müllner
parent
a2a5a3c908
commit
6972bc90f2
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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; }
|
||||
|
||||
@ -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";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user