diff --git a/data/gnome-shell-theme.gresource.xml b/data/gnome-shell-theme.gresource.xml index 2c5d794dc..21191f0ce 100644 --- a/data/gnome-shell-theme.gresource.xml +++ b/data/gnome-shell-theme.gresource.xml @@ -25,9 +25,11 @@ pointer-primary-click-symbolic.svg pointer-secondary-click-symbolic.svg process-working.svg - toggle-off-intl.svg + toggle-off.svg + toggle-off-dark.svg toggle-off-hc.svg - toggle-on-intl.svg + toggle-on.svg + toggle-on-dark.svg toggle-on-hc.svg diff --git a/data/theme/gnome-shell-high-contrast.scss b/data/theme/gnome-shell-high-contrast.scss index 23279caf3..4ac340c92 100644 --- a/data/theme/gnome-shell-high-contrast.scss +++ b/data/theme/gnome-shell-high-contrast.scss @@ -1,3 +1,5 @@ +$variant: 'light'; + @import "gnome-shell-sass/_high-contrast-colors"; //use gtk colors @import "gnome-shell-sass/_drawing"; @import "gnome-shell-sass/_common"; diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss index 0a851f3a4..d14a440af 100644 --- a/data/theme/gnome-shell-sass/_colors.scss +++ b/data/theme/gnome-shell-sass/_colors.scss @@ -3,11 +3,11 @@ $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); $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%)); $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)); @@ -21,11 +21,15 @@ $success_color: if($variant == 'light', #33d17a, darken(#33d17a, 10%)); $destructive_color: if($variant == 'light', #e01b24, darken(#e01b24, 10%)); $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_outer_borders_color: transparentize(white, 0.9); +$osd_outer_borders_color: transparentize(white, 0.84); $tooltip_borders_color: $osd_outer_borders_color; +$shadow_color: transparentize(black, 0.9); //insensitive state derived colors $insensitive_fg_color: mix($fg_color, $bg_color, 50%); diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss index 50bfc6650..e40014265 100644 --- a/data/theme/gnome-shell-sass/_common.scss +++ b/data/theme/gnome-shell-sass/_common.scss @@ -4,8 +4,6 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT"; /* #{$cakeisalie} */ -$panel-corner-radius: 6px; - /* Copyright 2009, 2015 Red Hat, Inc. * * 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. */ - /* 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-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 { font-family: $font-family; @@ -42,42 +45,44 @@ stage { /* WIDGETS */ /* Buttons */ -.button { - border-radius: 3px; +.button, %button { + border-radius: 5px; border-width: 1px; + min-height: 22px; padding: 4px 32px; @include button(normal); - &:focus { @include button(focus); } - &:hover { @include button(hover); } + &:focus { @include button(focus, $c:$_hover_bg_color, $tc:$fg_color); } + &:hover { @include button(hover, $c:$_hover_bg_color, $tc:$fg_color); } &: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; - @include button(normal); - &:insensitive { @include button(insensitive); } - &:hover { @include button(hover); } - &:focus { @include button(focus); } - &:active { @include button(active); } + @include button(normal, $c:$bg_color, $tc:$fg_color); + &:insensitive { @include button(insensitive, $c:$bg_color, $tc:$fg_color); } + &:hover { @include button(hover, $c:$_hover_bg_color, $tc:$fg_color); } + &:focus { @include button(focus, $c:$_hover_bg_color, $tc:$fg_color); } + &:active { @include button(active, $c:$_active_bg_color, $tc:$fg_color); } padding: 12px; + border-top: 1px solid $_bubble_borders_color; &:first-child { - border-radius: 0px 0px 0px 6px; + border-radius: 0px 0px 0px $medium_radius; } &:last-child { border-right-width: 0px; - border-radius: 0px 0px 6px 0px; + border-radius: 0px 0px $medium_radius 0px; } &:first-child:last-child { border-right-width: 0px; - border-radius: 0px 0px 6px 6px; + border-radius: 0px 0px $medium_radius $medium_radius; } } /* Entries */ StEntry { - border-radius: 3px; + border-radius: 5px; padding: 4px; border-width: 1px; color: $fg_color; @@ -130,15 +135,21 @@ StScrollBar { .slider { height: 1em; -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-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-border-color: darken($destructive_color,10%); -barlevel-overdrive-separator-width: 0.2em; -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 */ @@ -157,11 +168,16 @@ StScrollBar { /* Switches */ .toggle-switch { + color: $fg_color; width: 46px; height: 22px; background-size: contain; - background-image: url("resource:///org/gnome/shell/theme/toggle-off-intl.svg"); - &:checked { background-image: url("resource:///org/gnome/shell/theme/toggle-on-intl.svg"); } + background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-off.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 */ @@ -178,9 +194,7 @@ StScrollBar { .modal-dialog { border-radius: 9px; - color: $osd_fg_color; - background-color: transparentize(darken($osd_bg_color,10%),0.05); - border: 1px solid $_bubble_borders_color; + @extend %bubble-panel; .modal-dialog-content-box { padding: 24px; } @@ -192,8 +206,8 @@ StScrollBar { .run-dialog-button-box { padding-top: 1em; } .run-dialog-label { @include fontsize($font-size + 1.1); - font-weight: bold; - color: darken($osd_fg_color,10%); + font-weight: normal; + color: $fg_color; padding-bottom: .4em; } @@ -225,7 +239,7 @@ StScrollBar { } .message-dialog-subtitle { - color: darken($fg_color,40%); + color: $fg_color; font-weight: bold; } @@ -348,7 +362,7 @@ StScrollBar { } .mount-dialog-app-list-item { - color: darken($fg_color,10%); + color: lighten($fg_color,10%); &:hover { color: $fg_color; } &:ltr { padding-right: 1em; } &:rtl { padding-left: 1em; } @@ -367,13 +381,13 @@ StScrollBar { /* Password or Authentication Dialog */ .prompt-dialog { + @extend %bubble-panel; //this is the width of the entire modal popup width: 34em; - border: 3px solid $_bubble_borders_color; .message-dialog-main-layout { spacing: 24px; padding: 10px; } .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 { @@ -382,6 +396,7 @@ StScrollBar { .prompt-dialog-password-box { spacing: 1em; + padding-bottom: 1em; } .prompt-dialog-error-label { @@ -446,6 +461,7 @@ StScrollBar { /* Audio selection dialog */ .audio-device-selection-dialog { + @extend %bubble-panel; spacing: 30px; } @@ -466,7 +482,11 @@ StScrollBar { .audio-selection-device { border: 1px solid $_bubble_borders_color; 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 { @@ -480,22 +500,26 @@ StScrollBar { /* Access Dialog */ .access-dialog { + @extend %bubble-panel; spacing: 30px; } /* Geolocation Dialog */ .geolocation-dialog { + @extend %bubble-panel; spacing: 30px; } /* Extension Dialog */ .extension-dialog { + @extend %bubble-panel; .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 { + @extend %bubble-panel; spacing: 30px; } @@ -515,12 +539,13 @@ StScrollBar { .popup-menu { min-width: 15em; + color: $fg_color; + border-color: $_bubble_borders_color; .popup-menu-arrow { } //defined globally in the TOP BAR .popup-sub-menu { - padding-bottom: 1px; - background-color: darken($bg_color,2%); - box-shadow: inset 0 -1px 0px lighten($borders_color,5%); + background-color: darken($bg_color,5%); + box-shadow: inset 0 -1px 0px $_bubble_borders_color; } .popup-menu-content { padding: 1em 0em; } @@ -530,12 +555,18 @@ StScrollBar { &:ltr { padding: .4em 1.75em .4em 0em; } &:rtl { padding: .4em 0em .4em 1.75em; } &:checked { - background-color: darken($bg_color,2%); - box-shadow: inset 0 1px 0px lighten($borders_color,5%); + background-color: $bg_color; + box-shadow: inset 0 -1px 0px $_bubble_borders_color; font-weight: bold; } - &.selected { background-color: transparentize($fg_color,0.9); color: $fg_color; } - &:active { background-color: $selected_bg_color; color: $selected_fg_color; } + &.selected { + 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); } } @@ -559,10 +590,10 @@ StScrollBar { } .popup-menu-boxpointer, .candidate-popup-boxpointer { - -arrow-border-radius: 3px; + -arrow-border-radius: $medium_radius; -arrow-background-color: $bg_color; -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-rise: 11px; -arrow-box-shadow: 0 1px 3px black; //dreaming. bug #689995 @@ -573,7 +604,7 @@ StScrollBar { height: 1px; //not really the whole box margin: 6px 64px; background-color: transparent; - border-color: lighten($borders_color,10%); + border-color: $_bubble_borders_color; border-bottom-width: 1px; border-bottom-style: solid; } @@ -601,7 +632,7 @@ StScrollBar { .level { 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-overdrive-color: $destructive_color; -barlevel-overdrive-separator-width: 0.2em; @@ -646,7 +677,7 @@ StScrollBar { } .switcher-list .item-box:selected { - background-color: $selected_bg_color; + background-color: transparentize($osd_fg_color, 0.7); color: $selected_fg_color; } @@ -712,13 +743,43 @@ StScrollBar { } %osd-panel { - color: $_bubble_fg_color; - background-color: $_bubble_bg_color; - border: 1px solid $_bubble_borders_color; + color: $osd_fg_color; + background-color: $osd_bg_color; + border: 1px solid $osd_outer_borders_color; border-radius: 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 */ .tile-preview { background-color: transparentize($selected_bg_color,0.5); @@ -786,7 +847,7 @@ StScrollBar { } &:hover { - color: lighten($fg_color, 10%); + color: $selected_fg_color; } &:active, &:overview, &:focus, &:checked { @@ -794,7 +855,7 @@ StScrollBar { // a box-shadow background-color: rgba(0, 0, 0, 0.01); 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; } @@ -842,7 +903,7 @@ StScrollBar { .datemenu-displays-box { spacing: 1em; } .datemenu-calendar-column { - border: 0 solid lighten($bg_color,5%); + border: 0 solid $_bubble_borders_color; &:ltr { border-left-width: 1px; } &:rtl { border-right-width: 1px; } } @@ -867,11 +928,8 @@ StScrollBar { .world-clocks-button, .weather-button, .events-section-title { - &:hover,&:focus { background-color: lighten($bg_color,5%); } - &:active { - color: lighten($selected_fg_color,5%); - background-color: $selected_bg_color; - } + &:hover, focus { background-color: $_hover_bg_color } + &:active { background-color: $_active_bg_color } } .datemenu-today-button .day-label { @@ -916,7 +974,7 @@ StScrollBar { } .world-clocks-timezone { - color: darken($fg_color,40%); + color: $fg_color; font-feature-settings: "tnum"; font-size: 0.9em; } @@ -931,7 +989,7 @@ StScrollBar { } .calendar-month-label { - color: darken($fg_color,5%); + color: lighten($fg_color,5%); font-weight: bold; padding: 8px 0; &:focus {} @@ -941,8 +999,8 @@ StScrollBar { background-color: transparent; width: 32px; border-radius: 4px; - &:hover, &:focus { background-color: transparentize($fg_color,0.95); } - &:active { background-color: transparentize($bg_color,0.95); } + &:hover, focus { background-color: $_hover_bg_color; } + &:active { background-color: transparentize($fg_color, 0.84); } } .calendar-change-month-back StIcon, .calendar-change-month-forward StIcon { // arrows @@ -957,14 +1015,14 @@ StScrollBar { margin: 2px; border-radius: 1.4em; font-feature-settings: "tnum"; - &:hover,&:focus { background-color: lighten($bg_color,5%); } + &:hover, focus { background-color: $_hover_bg_color; } &:active,&:selected { color: lighten($selected_fg_color,5%); background-color: $selected_bg_color; border-color: transparent; //avoid jumparound due to today } &.calendar-day-heading { //day of week heading - color: darken($fg_color,40%); + color: lighten($fg_color,5%); margin-top: 1em; font-size: 70%; } @@ -984,7 +1042,7 @@ StScrollBar { font-weight: bold; //color: lighten($fg_color,10%); //background-color: darken($bg_color,5%); - border: 1px solid transparentize($borders_color,0.5); + border: 1px solid $_bubble_borders_color; } .calendar-day-with-events { color: lighten($fg_color,10%); @@ -992,7 +1050,7 @@ StScrollBar { background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg"); } .calendar-other-month-day { - color: transparentize($fg_color,0.85); + color: transparentize($fg_color ,0.5); opacity: 0.5; } .calendar-week-number { @@ -1002,8 +1060,8 @@ StScrollBar { border-radius: 2px; padding: 0.5em 0 0; margin: 6px; - background-color: transparentize($fg_color,0.7); - color: $bg_color; + background-color: $_bubble_borders_color; + color: $fg_color; } /* Message list */ @@ -1012,8 +1070,7 @@ StScrollBar { } .message-list-clear-button.button { - background-color: transparent; - &:hover,&:focus { background-color: lighten($bg_color,5%); } + @extend %button; margin: 1.5em 1.5em 0; } @@ -1027,8 +1084,11 @@ StScrollBar { } .message { - &:hover,&:focus { background-color: lighten($bg_color,5%); } - border-radius: 3px; + border: 1px solid $_bubble_borders_color; + 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 { @@ -1037,7 +1097,7 @@ StScrollBar { } .message-icon-bin > StIcon { - color: darken($fg_color,20%); + color: $fg_color; icon-size: 1.09em; -st-icon-style: symbolic; } @@ -1052,7 +1112,7 @@ StScrollBar { } .message-secondary-bin > .event-time { - color: darken($fg_color,40%); + color: $fg_color; font-size: 0.7em; /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */ @@ -1064,17 +1124,17 @@ StScrollBar { } .message-title { - color: darken($fg_color,5%); + color: $fg_color; } .message-content { - color: darken($fg_color,20%); + color: darken($fg_color, 10%); padding: 10px; } .message-media-control { padding: 12px; - color: darken($fg_color, 20%); + color: lighten($fg_color, 15%); &:last-child:ltr { padding-right: 18px; } &:last-child:rtl { padding-left: 18px; } @@ -1085,9 +1145,9 @@ StScrollBar { .media-message-cover-icon { icon-size: 48px !important; &.fallback { - color: lighten($bg_color,10%); + color: lighten($fg_color,10%); background-color: $bg_color; - border: 2px solid $bg_color; + border: 1px solid $bg_color; border-radius: 2px; icon-size: 32px !important; padding: 6px; } @@ -1129,15 +1189,18 @@ StScrollBar { color: $fg_color; border-radius: 32px; /* wish we could do 50% */ padding: 13px; - border: 1px solid lighten($borders_color,5%); + border: 1px solid $_bubble_borders_color; &:hover, &:focus { - background-color: transparentize($fg_color,0.9); + background-color: $_hover_bg_color; color: $fg_color; border: none; 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; } } @@ -1207,6 +1270,7 @@ StScrollBar { /* NETWORK DIALOGS */ .nm-dialog { + @extend %bubble-panel; max-height: 34em; min-height: 31em; min-width: 32em; @@ -1282,23 +1346,23 @@ StScrollBar { } //search entry - .search-entry { + .search-entry, %search_entry { width: 320px; padding: 7px 9px; - border-radius: 6px; - border-color: darken($osd_fg_color,50%); - color: $osd_fg_color; - background-color: $osd_bg_color; + border-radius: 18px; + color: $fg_color; + background-color: $base_color; + border-color: $borders_color; &:focus { padding: 6px 8px; border-width: 2px; 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 { - .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-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-content { spacing: 20px; } .search-provider-icon { padding: 15px; } @@ -1336,12 +1400,9 @@ StScrollBar { /* DASHBOARD */ #dash { + @extend %overview-panel; font-size: 9pt; - color: $_bubble_fg_color; - background-color: $_bubble_bg_color; padding: 4px 0; - border: 1px solid rgba(128, 128, 128, 0.4); - border-left: 0px; border-radius: 0px 9px 9px 0px; &:rtl { @@ -1369,7 +1430,8 @@ StScrollBar { border-radius: 7px; padding: 4px 12px; 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; -x-offset: 8px; } @@ -1396,13 +1458,29 @@ StScrollBar { } .app-view-control { //favorties | all toggle button 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 { border-right-width: 0; - border-radius: 3px 0 0 3px; + border-radius: 0; } + &:last-child { - border-radius: 0 3px 3px 0; + border-radius: 0; } } @@ -1425,8 +1503,7 @@ StScrollBar { } &:active .overview-icon, &:checked .overview-icon { - background-color: transparentize(darken($osd_bg_color,10%),.1); - box-shadow: inset 0 1px 2px $osd_borders_color; + background-color: transparentize(darken($osd_bg_color,10%), 0.5); } &:hover .overview-icon, &:focus .overview-icon, @@ -1447,7 +1524,7 @@ StScrollBar { %icon_tile { color: $osd_fg_color; - border-radius: 4px; + border-radius: $medium_radius; padding: 6px; border: 1px solid transparent; transition-duration: 100ms; @@ -1468,7 +1545,7 @@ StScrollBar { // Collections .app-folder-popup { //expanded collection -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-rise: 11px; } @@ -1521,7 +1598,7 @@ StScrollBar { } } .workspace-thumbnail-indicator { - border: 4px solid $selected_bg_color; + border: 2px solid $selected_bg_color; padding: 1px; } @@ -1534,15 +1611,15 @@ StScrollBar { } %overview-panel { - color: $_bubble_fg_color; - background-color: $_bubble_bg_color; - border: 1px solid $_bubble_borders_color; + color: $osd_fg_color; + background-color: transparentize($osd_bg_color, 0.1); + border: none; } %status_text { font-size: 2em; font-weight: bold; - color: $fg_color; + color: $osd_fg_color; } /* NOTIFICATIONS & MESSAGE TRAY */ @@ -1554,28 +1631,38 @@ StScrollBar { font-size: 11pt; width: 34em; margin: 5px; - border-radius: 6px; - color: $_bubble_fg_color; - background-color: $_bubble_bg_color; - border: 1px solid $borders_color; - //box-shadow: 0 1px 4px black; - &:hover { background-color: $_bubble_bg_color; } - &:focus { background-color: $_bubble_bg_color; } + border-radius: $medium-radius; + border: if($variant == 'light', none, $_bubble_borders_color); + min-height: 64px; + box-shadow: 0 1px 2px transparentize(black, 0.7); + &:hover { background: $bg_color; } + &, &:focus, &:active { + background-color: $bg_color; + .message-title { color: $fg_color } + .message-content { color: $fg_color; } + } - .notification-icon { padding: 5px; } + .message-icon-bin > StIcon { + color: $fg_color; + } + + StEntry { @extend %bubble-entry; } + + .notification-icon { padding: 5px; } .notification-content { padding: 5px; spacing: 5px; } .secondary-icon { icon-size: 1.09em; } .notification-actions { - background-color: $borders_color; - padding-top: 2px; - spacing: 1px; + padding-top: 0; + color: $fg_color; + border-top: 1px solid $_bubble_borders_color; + spacing: 0px; } .notification-button { - padding: 4px 4px 5px; - background-color: darken($_bubble_bg_color,5%); - &:first-child { border-radius: 0 0 0 6px; } - &:last-child { border-radius: 0 0 6px 0; } - &:hover, &focus { background-color: darken($_bubble_bg_color,2%); } + @extend %bubble_button; + &:focus { box-shadow: none; } + padding: 0 16px; + min-height: 35px; + border: none; } } .summary-source-counter { @@ -1586,7 +1673,7 @@ StScrollBar { -shell-counter-overlap-y: 3px; background-color: $selected_bg_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); border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%; } @@ -1604,14 +1691,14 @@ StScrollBar { } .chat-sent { padding-left: 18pt; - color: darken($fg_color, 15%); + color: lighten($fg_color, 15%); &:rtl { padding-left: 0; padding-right: 18pt; } } .chat-meta-message { padding-left: 4px; font-size: 9pt; font-weight: bold; - color: darken($fg_color,20%); + color: lighten($fg_color,18%); &:rtl { padding-left: 0; padding-right: 4px; } } @@ -1621,6 +1708,8 @@ StScrollBar { padding: 2px 72px 2px 12px; } .hotplug-notification-item { + @extend %bubble_button; + border: none; box-shadow: none; padding: 2px 10px; &:focus { padding: 1px 71px 1px 11px; } } @@ -1635,7 +1724,7 @@ StScrollBar { .hotplug-resident-mount { spacing: 8px; border-radius: 4px; - &:hover { background-color: transparentize($bg_color,0.7); } + &:hover { background-color: $_hover_bg_color; } } .hotplug-resident-mount-label { @@ -1741,7 +1830,7 @@ StScrollBar { -arrow-border-radius: 10px; -arrow-background-color: transparentize($osd_bg_color, 0.3); -arrow-border-width: 2px; - -arrow-border-color: $_bubble_borders_color; + -arrow-border-color: $osd_outer_borders_color; -arrow-base: 20px; -arrow-rise: 10px; -boxpointer-gap: 5px; @@ -1816,18 +1905,68 @@ StScrollBar { border: none; background-color: transparent; - .modal-dialog-button-box { spacing: 3px; } - .modal-dialog-button { - 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); } + $_gdm_fg: #f6f5f4; + $_gdm_bg: lighten(#2e3436, 19%); + 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; } @@ -1909,6 +2048,8 @@ StScrollBar { //SCREEN SHIELD +$_screenshield_shadow: 0px 0px 6px rgba(0, 0, 0, 0.726); + .screen-shield-arrows { padding-bottom: 3em; } @@ -1918,12 +2059,12 @@ StScrollBar { width: 80px; height: 48px; -arrow-thickness: 12px; - -arrow-shadow: 0 1px 1px rgba(0,0,0,0.4); + -arrow-shadow: $_screenshield_shadow; } .screen-shield-clock { color: white; - text-shadow: 0px 1px 2px rgba(0,0,0,0.6); + text-shadow: $_screenshield_shadow; font-weight: bold; text-align: center; padding-bottom: 1.5em; @@ -1931,7 +2072,7 @@ StScrollBar { .screen-shield-clock-time { font-size: 72pt; - text-shadow: 0px 2px 2px rgba(0,0,0,0.4); + text-shadow: $_screenshield_shadow; font-feature-settings: "tnum"; } @@ -1953,9 +2094,9 @@ StScrollBar { .notification, .screen-shield-notification-source { padding: 12px 6px; - border: 1px solid $_bubble_borders_color; + border: 1px solid $osd_outer_borders_color; background-color: transparentize($osd_bg_color,0.5); - color: $_bubble_fg_color; + color: $osd_fg_color; border-radius: 4px; } .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; } -#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 background: black; @@ -1977,7 +2118,7 @@ StScrollBar { } #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; } diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss index 7ac18b1bb..8f4611c34 100644 --- a/data/theme/gnome-shell-sass/_drawing.scss +++ b/data/theme/gnome-shell-sass/_drawing.scss @@ -37,16 +37,13 @@ // possible $t values: // normal, focus, insensitive // - $_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); } @if $t==focus { - @include _shadows($_inner_shadows); border-color: if($fc==$selected_bg_color, $selected_borders_color, 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 // @@ -130,46 +127,39 @@ $_hilight_color: _button_hilight_color($c); $_button_edge: if($edge == none, none, _widget_edge($edge)); $_blank_edge: if($edge == none, none, _widget_edge(transparentize($edge,1))); - + $_button_shadow: 0 1px 2px transparentize($shadow_color, 0.03); @if $t==normal { // // normal button // - $_bg: if($c!=$osd_bg_color, transparentize($c, 0.5), - $osd_bg_color); - color: $osd_fg_color; - background-color: $_bg; - border-color: $osd_borders_color; - box-shadow: inset 0 1px lighten($osd_bg_color,10%); + color: $tc; + background-color: $c; + border-color: $borders_color; + box-shadow: $_button_shadow; text-shadow: 0 1px black; icon-shadow: 0 1px black; } @if $t==focus { // // focused button - // - $_bg: if($c!=$osd_bg_color, transparentize($c, 0.3), - lighten($osd_bg_color,3%)); - - color: $osd_fg_color; + // + color: $tc; text-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 { // // active osd button // - $_bg: if($c!=$osd_bg_color, transparentize($c, 0.3), - lighten($osd_bg_color,3%)); - - color: white; - border-color: $osd_borders_color; - background-color: $_bg; - box-shadow: inset 0 1px lighten($osd_bg_color,20%); + color: $tc; + border-color: $borders_color; + background-color: $c; + box-shadow: $_button_shadow; text-shadow: 0 1px black; icon-shadow: 0 1px black; @@ -178,27 +168,18 @@ // // active osd button // - $_bg: if($c!=$bg_color, $c, $osd_borders_color); - - color: white; - 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; + color: $tc; + border-color: $borders_color; + background-color: $c; text-shadow: none; icon-shadow: none; + box-shadow: none; } @else if $t==insensitive { - // - // insensitive osd button - // - $_bg: transparentize(mix($insensitive_fg_color,$osd_bg_color,20%),0.3); color: $insensitive_fg_color; - border-color: $osd_borders_color; - background-color: $_bg; + border-color: $insensitive_borders_color; + background-color: $insensitive_bg_color; box-shadow: none; text-shadow: none; icon-shadow: none; diff --git a/data/theme/gnome-shell-sass/_high-contrast-colors.scss b/data/theme/gnome-shell-sass/_high-contrast-colors.scss index af1e52f0c..cba0145ac 100644 --- a/data/theme/gnome-shell-sass/_high-contrast-colors.scss +++ b/data/theme/gnome-shell-sass/_high-contrast-colors.scss @@ -26,6 +26,7 @@ $osd_borders_color: transparentize(black, 0.3); $osd_outer_borders_color: transparentize(white, 0.9); $tooltip_borders_color: $osd_outer_borders_color; +$shadow_color: transparentize(black, 0.9); //insensitive state derived colors $insensitive_fg_color: mix($fg_color, $bg_color, 50%); diff --git a/data/theme/toggle-off-dark.svg b/data/theme/toggle-off-dark.svg new file mode 100644 index 000000000..ef1e25f97 --- /dev/null +++ b/data/theme/toggle-off-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/data/theme/toggle-off-intl.svg b/data/theme/toggle-off-intl.svg deleted file mode 100644 index cb0871277..000000000 --- a/data/theme/toggle-off-intl.svg +++ /dev/null @@ -1,103 +0,0 @@ - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - diff --git a/data/theme/toggle-off.svg b/data/theme/toggle-off.svg new file mode 100644 index 000000000..ee5178294 --- /dev/null +++ b/data/theme/toggle-off.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/data/theme/toggle-on-dark.svg b/data/theme/toggle-on-dark.svg new file mode 100644 index 000000000..b71931ac8 --- /dev/null +++ b/data/theme/toggle-on-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/data/theme/toggle-on-intl.svg b/data/theme/toggle-on-intl.svg deleted file mode 100644 index 142e0a82a..000000000 --- a/data/theme/toggle-on-intl.svg +++ /dev/null @@ -1,103 +0,0 @@ - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - diff --git a/data/theme/toggle-on.svg b/data/theme/toggle-on.svg new file mode 100644 index 000000000..28be67e28 --- /dev/null +++ b/data/theme/toggle-on.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/js/ui/lightbox.js b/js/ui/lightbox.js index c7e4d51f2..948cc0de3 100644 --- a/js/ui/lightbox.js +++ b/js/ui/lightbox.js @@ -7,7 +7,7 @@ const Params = imports.misc.params; const Tweener = imports.ui.tweener; var DEFAULT_FADE_FACTOR = 0.4; -var VIGNETTE_BRIGHTNESS = 0.8; +var VIGNETTE_BRIGHTNESS = 0.2; var VIGNETTE_SHARPNESS = 0.7; const VIGNETTE_DECLARATIONS = '\