diff --git a/src/main/gnome-shell/gdm3-dark.css b/src/main/gnome-shell/gdm3-dark.css index 538cba4..664261e 100644 --- a/src/main/gnome-shell/gdm3-dark.css +++ b/src/main/gnome-shell/gdm3-dark.css @@ -5,6 +5,29 @@ stage { color: #dedede; } +.shell-link { + border-radius: 6px; + color: #3484e2; +} + +.shell-link:hover { + color: #3484e2; + background-color: rgba(52, 132, 226, 0.15); +} + +.shell-link:active { + color: #3484e2; + background-color: rgba(52, 132, 226, 0.3); +} + +.lowres-icon { + icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); +} + +.icon-dropshadow { + icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); +} + .message, .world-clocks-button, .weather-button, .events-button, @@ -78,7 +101,7 @@ stage { .button:hover { color: #dedede; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; @@ -87,7 +110,7 @@ stage { .button:active { color: #dedede; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; @@ -226,7 +249,7 @@ stage { } .calendar-month-label:focus { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .pager-button { @@ -239,11 +262,11 @@ stage { } .pager-button:hover, .pager-button:focus { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .pager-button:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); } .calendar-change-month-back { @@ -283,18 +306,18 @@ stage { } .calendar-day-base:hover, .calendar-day-base:focus { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .calendar-day-base:active { color: #afafaf; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); border-color: transparent; } .calendar-day-base:selected { color: #dedede; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); border-color: transparent; } @@ -500,11 +523,11 @@ stage { } .message-list-clear-button.button:hover, .message-list-clear-button.button:focus { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .message-list-clear-button.button:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); } .message-list-section, @@ -595,11 +618,11 @@ stage { } .message .message-close-button:hover, .message .message-close-button:focus { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .message .message-close-button:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); } .message .message-body { @@ -619,12 +642,12 @@ stage { .message-media-control:hover, .message-media-control:focus { color: #dedede; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .message-media-control:active { color: #dedede; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); } .message-media-control:insensitive { @@ -655,7 +678,7 @@ stage { padding: 8px; border: none; border-radius: 6px; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); color: #999999; } @@ -681,11 +704,11 @@ stage { } .check-box:hover StBin { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .check-box:active StBin { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); } .check-box:checked StBin { @@ -860,41 +883,56 @@ StEntry StLabel.hint-text { max-width: 23em; } -.login-dialog { +.login-dialog, +.unlock-dialog { border: none; background-color: transparent; } -.login-dialog StEntry { +.login-dialog StEntry, +.unlock-dialog StEntry { selection-background-color: #0860f2; selected-background-color: #0860f2; selected-color: white; padding: 4px 8px; min-height: 20px; + border-radius: 9999px; + caret-color: white; background-color: rgba(255, 255, 255, 0.1); border-radius: 100px; border: none; box-shadow: none; - border-radius: 9999px; + color: white; } -.login-dialog StEntry:focus { +.login-dialog StEntry:focus, +.unlock-dialog StEntry:focus { border: none; background-color: rgba(255, 255, 255, 0.2); + color: white; } -.login-dialog StEntry:insensitive { +.login-dialog StEntry:insensitive, +.unlock-dialog StEntry:insensitive { border: none; - color: rgba(222, 222, 222, 0.35); background-color: rgba(255, 255, 255, 0.05); + color: rgba(255, 255, 255, 0.45); } -.login-dialog .modal-dialog-button-box { +.login-dialog StEntry StLabel.hint-text, +.unlock-dialog StEntry StLabel.hint-text { + color: rgba(255, 255, 255, 0.45); +} + +.login-dialog .modal-dialog-button-box, +.unlock-dialog .modal-dialog-button-box { spacing: 3px; } -.login-dialog .modal-dialog-button { +.login-dialog .modal-dialog-button, +.unlock-dialog .modal-dialog-button { padding: 0 16px; + border: none; color: white; background-color: transparent; border-color: transparent; @@ -903,26 +941,30 @@ StEntry StLabel.hint-text { icon-shadow: none; } -.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus { +.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus, +.unlock-dialog .modal-dialog-button:hover, +.unlock-dialog .modal-dialog-button:focus { color: white; - background-color: rgba(255, 255, 255, 0.15); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:active { +.login-dialog .modal-dialog-button:active, +.unlock-dialog .modal-dialog-button:active { color: white; - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.16); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:insensitive { - color: rgba(255, 255, 255, 0.35); +.login-dialog .modal-dialog-button:insensitive, +.unlock-dialog .modal-dialog-button:insensitive { + color: rgba(222, 222, 222, 0.35); background-color: transparent; border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); @@ -930,23 +972,27 @@ StEntry StLabel.hint-text { icon-shadow: none; } -.login-dialog .modal-dialog-button:default { +.login-dialog .modal-dialog-button:default, +.unlock-dialog .modal-dialog-button:default { color: white; - background-color: #3484e2; + background-color: #242424; border: 1px solid rgba(0, 0, 0, 0.15); text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus { +.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus, +.unlock-dialog .modal-dialog-button:default:hover, +.unlock-dialog .modal-dialog-button:default:focus { color: white; border-color: rgba(0, 0, 0, 0.15); - background-color: #418ce4; + background-color: #2c2c2c; text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:default:active { +.login-dialog .modal-dialog-button:default:active, +.unlock-dialog .modal-dialog-button:default:active { color: white; background-color: #0860f2; border-color: rgba(0, 0, 0, 0.15); @@ -954,9 +1000,10 @@ StEntry StLabel.hint-text { icon-shadow: none; } -.login-dialog .modal-dialog-button:default:insensitive { +.login-dialog .modal-dialog-button:default:insensitive, +.unlock-dialog .modal-dialog-button:default:insensitive { color: rgba(255, 255, 255, 0.45); - background-color: rgba(255, 255, 255, 0.15); + background-color: rgba(255, 255, 255, 0.1); border-color: rgba(0, 0, 0, 0.15); text-shadow: none; icon-shadow: none; @@ -964,7 +1011,10 @@ StEntry StLabel.hint-text { .login-dialog .cancel-button, .login-dialog .switch-user-button, -.login-dialog .login-dialog-session-list-button { +.login-dialog .login-dialog-session-list-button, +.unlock-dialog .cancel-button, +.unlock-dialog .switch-user-button, +.unlock-dialog .login-dialog-session-list-button { padding: 0; border-radius: 100px; width: 32px; @@ -975,11 +1025,15 @@ StEntry StLabel.hint-text { .login-dialog .cancel-button StIcon, .login-dialog .switch-user-button StIcon, -.login-dialog .login-dialog-session-list-button StIcon { +.login-dialog .login-dialog-session-list-button StIcon, +.unlock-dialog .cancel-button StIcon, +.unlock-dialog .switch-user-button StIcon, +.unlock-dialog .login-dialog-session-list-button StIcon { icon-size: 16px; } -.login-dialog .login-dialog-message-warning { +.login-dialog .login-dialog-message-warning, +.unlock-dialog .login-dialog-message-warning { color: rgba(255, 255, 255, 0.85); } @@ -1061,7 +1115,7 @@ StEntry StLabel.hint-text { } .login-dialog-user-list:expanded .login-dialog-user-list-item:active { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.85); } @@ -1083,24 +1137,24 @@ StEntry StLabel.hint-text { padding-left: 1em; } -.login-dialog-user-list-item:hover { - background-color: rgba(255, 255, 255, 0.15); +.login-dialog-user-list-item:focus { + background-color: rgba(255, 255, 255, 0.03) !important; +} + +.login-dialog-user-list-item:hover, .login-dialog-user-list-item:focus:hover { + background-color: rgba(255, 255, 255, 0.1) !important; color: rgba(255, 255, 255, 0.85); } -.login-dialog-user-list-item:active { - background-color: rgba(255, 255, 255, 0.3); +.login-dialog-user-list-item:active, .login-dialog-user-list-item:focus:active { + background-color: rgba(255, 255, 255, 0.16) !important; color: rgba(255, 255, 255, 0.85); } .login-dialog-user-list-item .login-dialog-timed-login-indicator { height: 2px; margin: 6px 0 0 0; - background-color: rgba(255, 255, 255, 0.85); -} - -.login-dialog-user-list-item:focus .login-dialog-timed-login-indicator { - background-color: rgba(255, 255, 255, 0.85); + background-color: rgba(255, 255, 255, 0.12) !important; } .user-widget-label { @@ -1111,7 +1165,8 @@ StEntry StLabel.hint-text { background-size: contain; color: rgba(255, 255, 255, 0.85); border-radius: 9999px; - border: 2px rgba(255, 255, 255, 0.85); + border: none; + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); } .user-icon:hover { @@ -1309,7 +1364,7 @@ StEntry StLabel.hint-text { } #panel .panel-button:active, #panel .panel-button:active:hover, #panel .panel-button:overview, #panel .panel-button:overview:hover, #panel .panel-button:focus, #panel .panel-button:focus:hover, #panel .panel-button:checked, #panel .panel-button:checked:hover { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); color: white; box-shadow: none; } @@ -1631,14 +1686,14 @@ StEntry StLabel.hint-text { } .system-menu-action:hover, .system-menu-action:focus { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); color: #dedede; border: none; padding: 12px; } .system-menu-action:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); color: #dedede; } @@ -1689,12 +1744,12 @@ StEntry StLabel.hint-text { } .candidate-box:hover { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); color: #dedede; } .candidate-box:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); color: #dedede; } @@ -1868,8 +1923,8 @@ StEntry StLabel.hint-text { .unlock-dialog-notification-count-text { weight: bold; padding: 0 6px; - color: rgba(51, 51, 51, 0.95); - background-color: rgba(255, 255, 255, 0.85); + color: white; + background-color: #0860f2; border-radius: 99px; margin-right: 12px; } @@ -1894,7 +1949,7 @@ StScrollView StScrollBar { StScrollBar StBin#trough { margin: 6px; border-radius: 100px; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } StScrollBar StButton#vhandle, StScrollBar StButton#hhandle { diff --git a/src/main/gnome-shell/gdm3-light.css b/src/main/gnome-shell/gdm3-light.css index 5518124..1a7f353 100644 --- a/src/main/gnome-shell/gdm3-light.css +++ b/src/main/gnome-shell/gdm3-light.css @@ -5,6 +5,29 @@ stage { color: #242424; } +.shell-link { + border-radius: 6px; + color: #3484e2; +} + +.shell-link:hover { + color: #3484e2; + background-color: rgba(52, 132, 226, 0.15); +} + +.shell-link:active { + color: #3484e2; + background-color: rgba(52, 132, 226, 0.3); +} + +.lowres-icon { + icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); +} + +.icon-dropshadow { + icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); +} + .message, .world-clocks-button, .weather-button, .events-button, @@ -860,41 +883,56 @@ StEntry StLabel.hint-text { max-width: 23em; } -.login-dialog { +.login-dialog, +.unlock-dialog { border: none; background-color: transparent; } -.login-dialog StEntry { +.login-dialog StEntry, +.unlock-dialog StEntry { selection-background-color: #0860f2; selected-background-color: #0860f2; selected-color: white; padding: 4px 8px; min-height: 20px; + border-radius: 9999px; + caret-color: white; background-color: rgba(0, 0, 0, 0.1); border-radius: 100px; border: none; box-shadow: none; - border-radius: 9999px; + color: white; } -.login-dialog StEntry:focus { +.login-dialog StEntry:focus, +.unlock-dialog StEntry:focus { border: none; background-color: rgba(0, 0, 0, 0.2); + color: white; } -.login-dialog StEntry:insensitive { +.login-dialog StEntry:insensitive, +.unlock-dialog StEntry:insensitive { border: none; - color: rgba(36, 36, 36, 0.45); background-color: rgba(0, 0, 0, 0.05); + color: rgba(255, 255, 255, 0.45); } -.login-dialog .modal-dialog-button-box { +.login-dialog StEntry StLabel.hint-text, +.unlock-dialog StEntry StLabel.hint-text { + color: rgba(255, 255, 255, 0.45); +} + +.login-dialog .modal-dialog-button-box, +.unlock-dialog .modal-dialog-button-box { spacing: 3px; } -.login-dialog .modal-dialog-button { +.login-dialog .modal-dialog-button, +.unlock-dialog .modal-dialog-button { padding: 0 16px; + border: none; color: white; background-color: transparent; border-color: transparent; @@ -903,26 +941,30 @@ StEntry StLabel.hint-text { icon-shadow: none; } -.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus { +.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus, +.unlock-dialog .modal-dialog-button:hover, +.unlock-dialog .modal-dialog-button:focus { color: white; - background-color: rgba(255, 255, 255, 0.15); + background-color: rgba(0, 0, 0, 0.12); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:active { +.login-dialog .modal-dialog-button:active, +.unlock-dialog .modal-dialog-button:active { color: white; - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(0, 0, 0, 0.2); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:insensitive { - color: rgba(255, 255, 255, 0.35); +.login-dialog .modal-dialog-button:insensitive, +.unlock-dialog .modal-dialog-button:insensitive { + color: rgba(36, 36, 36, 0.45); background-color: transparent; border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); @@ -930,23 +972,27 @@ StEntry StLabel.hint-text { icon-shadow: none; } -.login-dialog .modal-dialog-button:default { +.login-dialog .modal-dialog-button:default, +.unlock-dialog .modal-dialog-button:default { color: white; - background-color: #3484e2; + background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus { +.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus, +.unlock-dialog .modal-dialog-button:default:hover, +.unlock-dialog .modal-dialog-button:default:focus { color: white; border-color: rgba(0, 0, 0, 0.12); - background-color: #277ce0; + background-color: #f7f7f7; text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:default:active { +.login-dialog .modal-dialog-button:default:active, +.unlock-dialog .modal-dialog-button:default:active { color: white; background-color: #0860f2; border-color: #487afa; @@ -954,9 +1000,10 @@ StEntry StLabel.hint-text { icon-shadow: none; } -.login-dialog .modal-dialog-button:default:insensitive { +.login-dialog .modal-dialog-button:default:insensitive, +.unlock-dialog .modal-dialog-button:default:insensitive { color: rgba(255, 255, 255, 0.45); - background-color: rgba(255, 255, 255, 0.15); + background-color: rgba(0, 0, 0, 0.12); border-color: rgba(0, 0, 0, 0.12); text-shadow: none; icon-shadow: none; @@ -964,7 +1011,10 @@ StEntry StLabel.hint-text { .login-dialog .cancel-button, .login-dialog .switch-user-button, -.login-dialog .login-dialog-session-list-button { +.login-dialog .login-dialog-session-list-button, +.unlock-dialog .cancel-button, +.unlock-dialog .switch-user-button, +.unlock-dialog .login-dialog-session-list-button { padding: 0; border-radius: 100px; width: 32px; @@ -975,11 +1025,15 @@ StEntry StLabel.hint-text { .login-dialog .cancel-button StIcon, .login-dialog .switch-user-button StIcon, -.login-dialog .login-dialog-session-list-button StIcon { +.login-dialog .login-dialog-session-list-button StIcon, +.unlock-dialog .cancel-button StIcon, +.unlock-dialog .switch-user-button StIcon, +.unlock-dialog .login-dialog-session-list-button StIcon { icon-size: 16px; } -.login-dialog .login-dialog-message-warning { +.login-dialog .login-dialog-message-warning, +.unlock-dialog .login-dialog-message-warning { color: rgba(255, 255, 255, 0.85); } @@ -1061,7 +1115,7 @@ StEntry StLabel.hint-text { } .login-dialog-user-list:expanded .login-dialog-user-list-item:active { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.85); } @@ -1083,24 +1137,24 @@ StEntry StLabel.hint-text { padding-left: 1em; } -.login-dialog-user-list-item:hover { - background-color: rgba(255, 255, 255, 0.15); +.login-dialog-user-list-item:focus { + background-color: rgba(0, 0, 0, 0.05) !important; +} + +.login-dialog-user-list-item:hover, .login-dialog-user-list-item:focus:hover { + background-color: rgba(0, 0, 0, 0.12) !important; color: rgba(255, 255, 255, 0.85); } -.login-dialog-user-list-item:active { - background-color: rgba(255, 255, 255, 0.3); +.login-dialog-user-list-item:active, .login-dialog-user-list-item:focus:active { + background-color: rgba(0, 0, 0, 0.2) !important; color: rgba(255, 255, 255, 0.85); } .login-dialog-user-list-item .login-dialog-timed-login-indicator { height: 2px; margin: 6px 0 0 0; - background-color: rgba(255, 255, 255, 0.85); -} - -.login-dialog-user-list-item:focus .login-dialog-timed-login-indicator { - background-color: rgba(255, 255, 255, 0.85); + background-color: rgba(0, 0, 0, 0.16) !important; } .user-widget-label { @@ -1111,7 +1165,8 @@ StEntry StLabel.hint-text { background-size: contain; color: rgba(255, 255, 255, 0.85); border-radius: 9999px; - border: 2px rgba(255, 255, 255, 0.85); + border: none; + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); } .user-icon:hover { @@ -1309,7 +1364,7 @@ StEntry StLabel.hint-text { } #panel .panel-button:active, #panel .panel-button:active:hover, #panel .panel-button:overview, #panel .panel-button:overview:hover, #panel .panel-button:focus, #panel .panel-button:focus:hover, #panel .panel-button:checked, #panel .panel-button:checked:hover { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); color: white; box-shadow: none; } @@ -1868,8 +1923,8 @@ StEntry StLabel.hint-text { .unlock-dialog-notification-count-text { weight: bold; padding: 0 6px; - color: rgba(240, 240, 240, 0.94); - background-color: rgba(255, 255, 255, 0.85); + color: white; + background-color: #0860f2; border-radius: 99px; margin-right: 12px; } diff --git a/src/main/gnome-shell/gnome-shell-dark-alt.css b/src/main/gnome-shell/gnome-shell-dark-alt.css index 08a2187..4025b73 100644 --- a/src/main/gnome-shell/gnome-shell-dark-alt.css +++ b/src/main/gnome-shell/gnome-shell-dark-alt.css @@ -5,6 +5,29 @@ stage { color: #dedede; } +.shell-link { + border-radius: 6px; + color: #3484e2; +} + +.shell-link:hover { + color: #3484e2; + background-color: rgba(52, 132, 226, 0.15); +} + +.shell-link:active { + color: #3484e2; + background-color: rgba(52, 132, 226, 0.3); +} + +.lowres-icon { + icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); +} + +.icon-dropshadow { + icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); +} + .search-provider-icon .overview-icon, .show-apps .overview-icon, .app-well-app .overview-icon, @@ -90,7 +113,7 @@ stage { .hotplug-notification-item:insensitive { color: rgba(222, 222, 222, 0.35); - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); border-color: rgba(0, 0, 0, 0.15); text-shadow: none; icon-shadow: none; @@ -170,7 +193,7 @@ stage { .button:hover { color: #dedede; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; @@ -179,7 +202,7 @@ stage { .button:active { color: #dedede; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; @@ -318,7 +341,7 @@ stage { } .calendar-month-label:focus { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .pager-button { @@ -331,11 +354,11 @@ stage { } .pager-button:hover, .pager-button:focus { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .pager-button:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); } .calendar-change-month-back { @@ -375,18 +398,18 @@ stage { } .calendar-day-base:hover, .calendar-day-base:focus { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .calendar-day-base:active { color: #afafaf; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); border-color: transparent; } .calendar-day-base:selected { color: #dedede; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); border-color: transparent; } @@ -592,11 +615,11 @@ stage { } .message-list-clear-button.button:hover, .message-list-clear-button.button:focus { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .message-list-clear-button.button:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); } .message-list-section, @@ -687,11 +710,11 @@ stage { } .message .message-close-button:hover, .message .message-close-button:focus { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .message .message-close-button:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); } .message .message-body { @@ -711,12 +734,12 @@ stage { .message-media-control:hover, .message-media-control:focus { color: #dedede; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .message-media-control:active { color: #dedede; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); } .message-media-control:insensitive { @@ -747,7 +770,7 @@ stage { padding: 8px; border: none; border-radius: 6px; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); color: #999999; } @@ -773,11 +796,11 @@ stage { } .check-box:hover StBin { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .check-box:active StBin { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); } .check-box:checked StBin { @@ -908,7 +931,7 @@ stage { .search-provider-icon:active, .search-provider-icon:checked, .list-search-result:active, .list-search-result:checked { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); transition-duration: 150ms; } @@ -943,7 +966,7 @@ stage { .app-well-app:checked .overview-icon, .grid-search-result:active .overview-icon, .grid-search-result:checked .overview-icon { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); box-shadow: none; transition-duration: 150ms; } @@ -1112,7 +1135,7 @@ StWidget.focused .app-well-app-running-dot { } .app-folder-dialog .folder-name-container .edit-folder-button:checked, .app-folder-dialog .folder-name-container .edit-folder-button:active { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); } .app-folder-dialog .icon-grid { @@ -1233,7 +1256,7 @@ StWidget.focused .app-well-app-running-dot { .modal-dialog-linked-button:hover { color: #dedede; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; @@ -1242,7 +1265,7 @@ StWidget.focused .app-well-app-running-dot { .modal-dialog-linked-button:active { color: #dedede; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; @@ -1672,7 +1695,7 @@ StWidget.focused .app-well-app-running-dot { } .audio-selection-device:hover, .audio-selection-device:focus { - background-color: rgba(255, 255, 255, 0.08); + background-color: rgba(255, 255, 255, 0.12); } .audio-selection-device:active { @@ -1773,11 +1796,11 @@ StWidget.focused .app-well-app-running-dot { } .nm-dialog-item:hover, .nm-dialog-item:focus { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .nm-dialog-item:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); } .nm-dialog-item:selected { @@ -1957,41 +1980,56 @@ StEntry StLabel.hint-text { max-width: 23em; } -.login-dialog { +.login-dialog, +.unlock-dialog { border: none; background-color: transparent; } -.login-dialog StEntry { +.login-dialog StEntry, +.unlock-dialog StEntry { selection-background-color: #0860f2; selected-background-color: #0860f2; selected-color: white; padding: 4px 8px; min-height: 20px; + border-radius: 9999px; + caret-color: white; background-color: rgba(255, 255, 255, 0.1); border-radius: 100px; border: none; box-shadow: none; - border-radius: 9999px; + color: white; } -.login-dialog StEntry:focus { +.login-dialog StEntry:focus, +.unlock-dialog StEntry:focus { border: none; background-color: rgba(255, 255, 255, 0.2); + color: white; } -.login-dialog StEntry:insensitive { +.login-dialog StEntry:insensitive, +.unlock-dialog StEntry:insensitive { border: none; - color: rgba(222, 222, 222, 0.35); background-color: rgba(255, 255, 255, 0.05); + color: rgba(255, 255, 255, 0.45); } -.login-dialog .modal-dialog-button-box { +.login-dialog StEntry StLabel.hint-text, +.unlock-dialog StEntry StLabel.hint-text { + color: rgba(255, 255, 255, 0.45); +} + +.login-dialog .modal-dialog-button-box, +.unlock-dialog .modal-dialog-button-box { spacing: 3px; } -.login-dialog .modal-dialog-button { +.login-dialog .modal-dialog-button, +.unlock-dialog .modal-dialog-button { padding: 0 16px; + border: none; color: white; background-color: transparent; border-color: transparent; @@ -2000,26 +2038,30 @@ StEntry StLabel.hint-text { icon-shadow: none; } -.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus { +.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus, +.unlock-dialog .modal-dialog-button:hover, +.unlock-dialog .modal-dialog-button:focus { color: white; - background-color: rgba(255, 255, 255, 0.15); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:active { +.login-dialog .modal-dialog-button:active, +.unlock-dialog .modal-dialog-button:active { color: white; - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.16); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:insensitive { - color: rgba(255, 255, 255, 0.35); +.login-dialog .modal-dialog-button:insensitive, +.unlock-dialog .modal-dialog-button:insensitive { + color: rgba(222, 222, 222, 0.35); background-color: transparent; border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); @@ -2027,23 +2069,27 @@ StEntry StLabel.hint-text { icon-shadow: none; } -.login-dialog .modal-dialog-button:default { +.login-dialog .modal-dialog-button:default, +.unlock-dialog .modal-dialog-button:default { color: white; - background-color: #3484e2; + background-color: #242424; border: 1px solid rgba(0, 0, 0, 0.15); text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus { +.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus, +.unlock-dialog .modal-dialog-button:default:hover, +.unlock-dialog .modal-dialog-button:default:focus { color: white; border-color: rgba(0, 0, 0, 0.15); - background-color: #418ce4; + background-color: #2c2c2c; text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:default:active { +.login-dialog .modal-dialog-button:default:active, +.unlock-dialog .modal-dialog-button:default:active { color: white; background-color: #0860f2; border-color: rgba(0, 0, 0, 0.15); @@ -2051,9 +2097,10 @@ StEntry StLabel.hint-text { icon-shadow: none; } -.login-dialog .modal-dialog-button:default:insensitive { +.login-dialog .modal-dialog-button:default:insensitive, +.unlock-dialog .modal-dialog-button:default:insensitive { color: rgba(255, 255, 255, 0.45); - background-color: rgba(255, 255, 255, 0.15); + background-color: rgba(255, 255, 255, 0.1); border-color: rgba(0, 0, 0, 0.15); text-shadow: none; icon-shadow: none; @@ -2061,7 +2108,10 @@ StEntry StLabel.hint-text { .login-dialog .cancel-button, .login-dialog .switch-user-button, -.login-dialog .login-dialog-session-list-button { +.login-dialog .login-dialog-session-list-button, +.unlock-dialog .cancel-button, +.unlock-dialog .switch-user-button, +.unlock-dialog .login-dialog-session-list-button { padding: 0; border-radius: 100px; width: 32px; @@ -2072,11 +2122,15 @@ StEntry StLabel.hint-text { .login-dialog .cancel-button StIcon, .login-dialog .switch-user-button StIcon, -.login-dialog .login-dialog-session-list-button StIcon { +.login-dialog .login-dialog-session-list-button StIcon, +.unlock-dialog .cancel-button StIcon, +.unlock-dialog .switch-user-button StIcon, +.unlock-dialog .login-dialog-session-list-button StIcon { icon-size: 16px; } -.login-dialog .login-dialog-message-warning { +.login-dialog .login-dialog-message-warning, +.unlock-dialog .login-dialog-message-warning { color: rgba(255, 255, 255, 0.85); } @@ -2158,7 +2212,7 @@ StEntry StLabel.hint-text { } .login-dialog-user-list:expanded .login-dialog-user-list-item:active { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.85); } @@ -2180,24 +2234,24 @@ StEntry StLabel.hint-text { padding-left: 1em; } -.login-dialog-user-list-item:hover { - background-color: rgba(255, 255, 255, 0.15); +.login-dialog-user-list-item:focus { + background-color: rgba(255, 255, 255, 0.03) !important; +} + +.login-dialog-user-list-item:hover, .login-dialog-user-list-item:focus:hover { + background-color: rgba(255, 255, 255, 0.1) !important; color: rgba(255, 255, 255, 0.85); } -.login-dialog-user-list-item:active { - background-color: rgba(255, 255, 255, 0.3); +.login-dialog-user-list-item:active, .login-dialog-user-list-item:focus:active { + background-color: rgba(255, 255, 255, 0.16) !important; color: rgba(255, 255, 255, 0.85); } .login-dialog-user-list-item .login-dialog-timed-login-indicator { height: 2px; margin: 6px 0 0 0; - background-color: rgba(255, 255, 255, 0.85); -} - -.login-dialog-user-list-item:focus .login-dialog-timed-login-indicator { - background-color: rgba(255, 255, 255, 0.85); + background-color: rgba(255, 255, 255, 0.12) !important; } .user-widget-label { @@ -2208,7 +2262,8 @@ StEntry StLabel.hint-text { background-size: contain; color: rgba(255, 255, 255, 0.85); border-radius: 9999px; - border: 2px rgba(255, 255, 255, 0.85); + border: none; + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); } .user-icon:hover { @@ -2341,7 +2396,7 @@ StEntry StLabel.hint-text { } #LookingGlassDialog .notebook-tab:hover { - box-shadow: inset 0 -2px 0px rgba(255, 255, 255, 0.1); + box-shadow: inset 0 -2px 0px rgba(255, 255, 255, 0.16); color: #dedede; text-shadow: none; } @@ -2403,7 +2458,7 @@ StEntry StLabel.hint-text { .lg-obj-inspector-button:hover { color: #dedede; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; @@ -2412,7 +2467,7 @@ StEntry StLabel.hint-text { .lg-obj-inspector-button:active { color: #dedede; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; @@ -2487,21 +2542,6 @@ StEntry StLabel.hint-text { -pie-background-color: rgba(201, 221, 253, 0.3); } -.shell-link { - border-radius: 6px; - color: #3484e2; -} - -.shell-link:hover { - color: #3484e2; - background-color: rgba(52, 132, 226, 0.15); -} - -.shell-link:active { - color: #3484e2; - background-color: rgba(52, 132, 226, 0.3); -} - .caps-lock-warning-label { text-align: center; padding-bottom: 8px; @@ -2540,7 +2580,7 @@ StEntry StLabel.hint-text { .switcher-list .item-box:outlined { padding: 8px; border: none; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); color: #dedede; } @@ -2579,37 +2619,6 @@ StEntry StLabel.hint-text { height: 96px; } -.cycler-highlight { - border: 4px solid #0860f2; -} - -.workspace-switcher-group { - padding: 8px; -} - -.workspace-switcher { - background: transparent; - border: 0px; - border-radius: 0px; - padding: 0px; - spacing: 8px; -} - -.ws-switcher-active-up, .ws-switcher-active-down { - height: 48px; - background-color: #0860f2; - color: rgba(255, 255, 255, 0.85); - background-size: 32px; - border-radius: 6px; -} - -.ws-switcher-box { - height: 48px; - border: none; - background: rgba(255, 255, 255, 0.06); - border-radius: 6px; -} - .tile-preview { background-color: rgba(8, 96, 242, 0.3); border: 1px solid #0860f2; @@ -2734,11 +2743,11 @@ StEntry StLabel.hint-text { } .hotplug-resident-mount:hover { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .hotplug-resident-mount:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); } .hotplug-resident-mount-label { @@ -2829,17 +2838,17 @@ StEntry StLabel.hint-text { .notification-banner .notification-button:focus { background-color: transparent; color: #afafaf; - box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.06); + box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1); } .notification-banner .notification-button:hover, .notification-banner .notification-button:focus:hover { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); color: #dedede; box-shadow: none; } .notification-banner .notification-button:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); color: #dedede; } @@ -2921,9 +2930,9 @@ StEntry StLabel.hint-text { } .window-clone-border { - border: 4px solid rgba(255, 255, 255, 0.3); + border: 4px solid rgba(255, 255, 255, 0.28); border-radius: 6px; - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); } .window-caption { @@ -2942,7 +2951,7 @@ StEntry StLabel.hint-text { border: none; color: rgba(255, 255, 255, 0.5); caret-color: rgba(255, 255, 255, 0.85); - selection-background-color: rgba(255, 255, 255, 0.3); + selection-background-color: rgba(255, 255, 255, 0.28); selected-color: rgba(255, 255, 255, 0.85); background-color: rgba(255, 255, 255, 0.12); border-radius: 8px; @@ -3046,6 +3055,37 @@ StEntry StLabel.hint-text { padding: 15px; } +.cycler-highlight { + border: 4px solid #0860f2; +} + +.workspace-switcher-group { + padding: 8px; +} + +.workspace-switcher { + background: transparent; + border: 0px; + border-radius: 0px; + padding: 0px; + spacing: 8px; +} + +.ws-switcher-active-up, .ws-switcher-active-down { + height: 48px; + background-color: #0860f2; + color: rgba(255, 255, 255, 0.85); + background-size: 32px; + border-radius: 6px; +} + +.ws-switcher-box { + height: 48px; + border: none; + background: rgba(255, 255, 255, 0.1); + border-radius: 6px; +} + #panel { background-color: rgba(0, 0, 0, 0.16); /* transition from solid to transparent */ @@ -3146,7 +3186,7 @@ StEntry StLabel.hint-text { } #panel .panel-button:active, #panel .panel-button:active:hover, #panel .panel-button:overview, #panel .panel-button:overview:hover, #panel .panel-button:focus, #panel .panel-button:focus:hover, #panel .panel-button:checked, #panel .panel-button:checked:hover { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); color: white; box-shadow: none; } @@ -3468,14 +3508,14 @@ StEntry StLabel.hint-text { } .system-menu-action:hover, .system-menu-action:focus { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); color: #dedede; border: none; padding: 12px; } .system-menu-action:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); color: #dedede; } @@ -3526,12 +3566,12 @@ StEntry StLabel.hint-text { } .candidate-box:hover { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); color: #dedede; } .candidate-box:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); color: #dedede; } @@ -3705,8 +3745,8 @@ StEntry StLabel.hint-text { .unlock-dialog-notification-count-text { weight: bold; padding: 0 6px; - color: rgba(51, 51, 51, 0.95); - background-color: rgba(255, 255, 255, 0.85); + color: white; + background-color: #0860f2; border-radius: 99px; margin-right: 12px; } @@ -3731,7 +3771,7 @@ StScrollView StScrollBar { StScrollBar StBin#trough { margin: 6px; border-radius: 100px; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } StScrollBar StButton#vhandle, StScrollBar StButton#hhandle { @@ -4040,7 +4080,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { .openweather-provider:hover { color: #dedede; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; @@ -4056,7 +4096,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { .openweather-provider:active { color: #dedede; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; diff --git a/src/main/gnome-shell/gnome-shell-dark-solid-alt.css b/src/main/gnome-shell/gnome-shell-dark-solid-alt.css index a904cc1..145adc7 100644 --- a/src/main/gnome-shell/gnome-shell-dark-solid-alt.css +++ b/src/main/gnome-shell/gnome-shell-dark-solid-alt.css @@ -5,6 +5,29 @@ stage { color: #dedede; } +.shell-link { + border-radius: 6px; + color: #3484e2; +} + +.shell-link:hover { + color: #3484e2; + background-color: rgba(52, 132, 226, 0.15); +} + +.shell-link:active { + color: #3484e2; + background-color: rgba(52, 132, 226, 0.3); +} + +.lowres-icon { + icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); +} + +.icon-dropshadow { + icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); +} + .search-provider-icon .overview-icon, .show-apps .overview-icon, .app-well-app .overview-icon, @@ -90,7 +113,7 @@ stage { .hotplug-notification-item:insensitive { color: rgba(222, 222, 222, 0.35); - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); border-color: rgba(0, 0, 0, 0.15); text-shadow: none; icon-shadow: none; @@ -170,7 +193,7 @@ stage { .button:hover { color: #dedede; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; @@ -179,7 +202,7 @@ stage { .button:active { color: #dedede; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; @@ -318,7 +341,7 @@ stage { } .calendar-month-label:focus { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .pager-button { @@ -331,11 +354,11 @@ stage { } .pager-button:hover, .pager-button:focus { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .pager-button:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); } .calendar-change-month-back { @@ -375,18 +398,18 @@ stage { } .calendar-day-base:hover, .calendar-day-base:focus { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .calendar-day-base:active { color: #afafaf; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); border-color: transparent; } .calendar-day-base:selected { color: #dedede; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); border-color: transparent; } @@ -592,11 +615,11 @@ stage { } .message-list-clear-button.button:hover, .message-list-clear-button.button:focus { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .message-list-clear-button.button:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); } .message-list-section, @@ -687,11 +710,11 @@ stage { } .message .message-close-button:hover, .message .message-close-button:focus { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .message .message-close-button:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); } .message .message-body { @@ -711,12 +734,12 @@ stage { .message-media-control:hover, .message-media-control:focus { color: #dedede; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .message-media-control:active { color: #dedede; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); } .message-media-control:insensitive { @@ -747,7 +770,7 @@ stage { padding: 8px; border: none; border-radius: 6px; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); color: #999999; } @@ -773,11 +796,11 @@ stage { } .check-box:hover StBin { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .check-box:active StBin { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); } .check-box:checked StBin { @@ -908,7 +931,7 @@ stage { .search-provider-icon:active, .search-provider-icon:checked, .list-search-result:active, .list-search-result:checked { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); transition-duration: 150ms; } @@ -943,7 +966,7 @@ stage { .app-well-app:checked .overview-icon, .grid-search-result:active .overview-icon, .grid-search-result:checked .overview-icon { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); box-shadow: none; transition-duration: 150ms; } @@ -1112,7 +1135,7 @@ StWidget.focused .app-well-app-running-dot { } .app-folder-dialog .folder-name-container .edit-folder-button:checked, .app-folder-dialog .folder-name-container .edit-folder-button:active { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); } .app-folder-dialog .icon-grid { @@ -1233,7 +1256,7 @@ StWidget.focused .app-well-app-running-dot { .modal-dialog-linked-button:hover { color: #dedede; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; @@ -1242,7 +1265,7 @@ StWidget.focused .app-well-app-running-dot { .modal-dialog-linked-button:active { color: #dedede; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; @@ -1672,7 +1695,7 @@ StWidget.focused .app-well-app-running-dot { } .audio-selection-device:hover, .audio-selection-device:focus { - background-color: rgba(255, 255, 255, 0.08); + background-color: rgba(255, 255, 255, 0.12); } .audio-selection-device:active { @@ -1773,11 +1796,11 @@ StWidget.focused .app-well-app-running-dot { } .nm-dialog-item:hover, .nm-dialog-item:focus { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .nm-dialog-item:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); } .nm-dialog-item:selected { @@ -1957,41 +1980,56 @@ StEntry StLabel.hint-text { max-width: 23em; } -.login-dialog { +.login-dialog, +.unlock-dialog { border: none; background-color: transparent; } -.login-dialog StEntry { +.login-dialog StEntry, +.unlock-dialog StEntry { selection-background-color: #0860f2; selected-background-color: #0860f2; selected-color: white; padding: 4px 8px; min-height: 20px; + border-radius: 9999px; + caret-color: white; background-color: rgba(255, 255, 255, 0.1); border-radius: 100px; border: none; box-shadow: none; - border-radius: 9999px; + color: white; } -.login-dialog StEntry:focus { +.login-dialog StEntry:focus, +.unlock-dialog StEntry:focus { border: none; background-color: rgba(255, 255, 255, 0.2); + color: white; } -.login-dialog StEntry:insensitive { +.login-dialog StEntry:insensitive, +.unlock-dialog StEntry:insensitive { border: none; - color: rgba(222, 222, 222, 0.35); background-color: rgba(255, 255, 255, 0.05); + color: rgba(255, 255, 255, 0.45); } -.login-dialog .modal-dialog-button-box { +.login-dialog StEntry StLabel.hint-text, +.unlock-dialog StEntry StLabel.hint-text { + color: rgba(255, 255, 255, 0.45); +} + +.login-dialog .modal-dialog-button-box, +.unlock-dialog .modal-dialog-button-box { spacing: 3px; } -.login-dialog .modal-dialog-button { +.login-dialog .modal-dialog-button, +.unlock-dialog .modal-dialog-button { padding: 0 16px; + border: none; color: white; background-color: transparent; border-color: transparent; @@ -2000,26 +2038,30 @@ StEntry StLabel.hint-text { icon-shadow: none; } -.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus { +.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus, +.unlock-dialog .modal-dialog-button:hover, +.unlock-dialog .modal-dialog-button:focus { color: white; - background-color: rgba(255, 255, 255, 0.15); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:active { +.login-dialog .modal-dialog-button:active, +.unlock-dialog .modal-dialog-button:active { color: white; - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.16); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:insensitive { - color: rgba(255, 255, 255, 0.35); +.login-dialog .modal-dialog-button:insensitive, +.unlock-dialog .modal-dialog-button:insensitive { + color: rgba(222, 222, 222, 0.35); background-color: transparent; border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); @@ -2027,23 +2069,27 @@ StEntry StLabel.hint-text { icon-shadow: none; } -.login-dialog .modal-dialog-button:default { +.login-dialog .modal-dialog-button:default, +.unlock-dialog .modal-dialog-button:default { color: white; - background-color: #3484e2; + background-color: #242424; border: 1px solid rgba(0, 0, 0, 0.15); text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus { +.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus, +.unlock-dialog .modal-dialog-button:default:hover, +.unlock-dialog .modal-dialog-button:default:focus { color: white; border-color: rgba(0, 0, 0, 0.15); - background-color: #418ce4; + background-color: #2c2c2c; text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:default:active { +.login-dialog .modal-dialog-button:default:active, +.unlock-dialog .modal-dialog-button:default:active { color: white; background-color: #0860f2; border-color: rgba(0, 0, 0, 0.15); @@ -2051,9 +2097,10 @@ StEntry StLabel.hint-text { icon-shadow: none; } -.login-dialog .modal-dialog-button:default:insensitive { +.login-dialog .modal-dialog-button:default:insensitive, +.unlock-dialog .modal-dialog-button:default:insensitive { color: rgba(255, 255, 255, 0.45); - background-color: rgba(255, 255, 255, 0.15); + background-color: rgba(255, 255, 255, 0.1); border-color: rgba(0, 0, 0, 0.15); text-shadow: none; icon-shadow: none; @@ -2061,7 +2108,10 @@ StEntry StLabel.hint-text { .login-dialog .cancel-button, .login-dialog .switch-user-button, -.login-dialog .login-dialog-session-list-button { +.login-dialog .login-dialog-session-list-button, +.unlock-dialog .cancel-button, +.unlock-dialog .switch-user-button, +.unlock-dialog .login-dialog-session-list-button { padding: 0; border-radius: 100px; width: 32px; @@ -2072,11 +2122,15 @@ StEntry StLabel.hint-text { .login-dialog .cancel-button StIcon, .login-dialog .switch-user-button StIcon, -.login-dialog .login-dialog-session-list-button StIcon { +.login-dialog .login-dialog-session-list-button StIcon, +.unlock-dialog .cancel-button StIcon, +.unlock-dialog .switch-user-button StIcon, +.unlock-dialog .login-dialog-session-list-button StIcon { icon-size: 16px; } -.login-dialog .login-dialog-message-warning { +.login-dialog .login-dialog-message-warning, +.unlock-dialog .login-dialog-message-warning { color: rgba(255, 255, 255, 0.85); } @@ -2158,7 +2212,7 @@ StEntry StLabel.hint-text { } .login-dialog-user-list:expanded .login-dialog-user-list-item:active { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.85); } @@ -2180,24 +2234,24 @@ StEntry StLabel.hint-text { padding-left: 1em; } -.login-dialog-user-list-item:hover { - background-color: rgba(255, 255, 255, 0.15); +.login-dialog-user-list-item:focus { + background-color: rgba(255, 255, 255, 0.03) !important; +} + +.login-dialog-user-list-item:hover, .login-dialog-user-list-item:focus:hover { + background-color: rgba(255, 255, 255, 0.1) !important; color: rgba(255, 255, 255, 0.85); } -.login-dialog-user-list-item:active { - background-color: rgba(255, 255, 255, 0.3); +.login-dialog-user-list-item:active, .login-dialog-user-list-item:focus:active { + background-color: rgba(255, 255, 255, 0.16) !important; color: rgba(255, 255, 255, 0.85); } .login-dialog-user-list-item .login-dialog-timed-login-indicator { height: 2px; margin: 6px 0 0 0; - background-color: rgba(255, 255, 255, 0.85); -} - -.login-dialog-user-list-item:focus .login-dialog-timed-login-indicator { - background-color: rgba(255, 255, 255, 0.85); + background-color: rgba(255, 255, 255, 0.12) !important; } .user-widget-label { @@ -2208,7 +2262,8 @@ StEntry StLabel.hint-text { background-size: contain; color: rgba(255, 255, 255, 0.85); border-radius: 9999px; - border: 2px rgba(255, 255, 255, 0.85); + border: none; + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); } .user-icon:hover { @@ -2341,7 +2396,7 @@ StEntry StLabel.hint-text { } #LookingGlassDialog .notebook-tab:hover { - box-shadow: inset 0 -2px 0px rgba(255, 255, 255, 0.1); + box-shadow: inset 0 -2px 0px rgba(255, 255, 255, 0.16); color: #dedede; text-shadow: none; } @@ -2403,7 +2458,7 @@ StEntry StLabel.hint-text { .lg-obj-inspector-button:hover { color: #dedede; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; @@ -2412,7 +2467,7 @@ StEntry StLabel.hint-text { .lg-obj-inspector-button:active { color: #dedede; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; @@ -2487,21 +2542,6 @@ StEntry StLabel.hint-text { -pie-background-color: rgba(201, 221, 253, 0.3); } -.shell-link { - border-radius: 6px; - color: #3484e2; -} - -.shell-link:hover { - color: #3484e2; - background-color: rgba(52, 132, 226, 0.15); -} - -.shell-link:active { - color: #3484e2; - background-color: rgba(52, 132, 226, 0.3); -} - .caps-lock-warning-label { text-align: center; padding-bottom: 8px; @@ -2540,7 +2580,7 @@ StEntry StLabel.hint-text { .switcher-list .item-box:outlined { padding: 8px; border: none; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); color: #dedede; } @@ -2579,37 +2619,6 @@ StEntry StLabel.hint-text { height: 96px; } -.cycler-highlight { - border: 4px solid #0860f2; -} - -.workspace-switcher-group { - padding: 8px; -} - -.workspace-switcher { - background: transparent; - border: 0px; - border-radius: 0px; - padding: 0px; - spacing: 8px; -} - -.ws-switcher-active-up, .ws-switcher-active-down { - height: 48px; - background-color: #0860f2; - color: rgba(255, 255, 255, 0.85); - background-size: 32px; - border-radius: 6px; -} - -.ws-switcher-box { - height: 48px; - border: none; - background: rgba(255, 255, 255, 0.06); - border-radius: 6px; -} - .tile-preview { background-color: rgba(8, 96, 242, 0.3); border: 1px solid #0860f2; @@ -2734,11 +2743,11 @@ StEntry StLabel.hint-text { } .hotplug-resident-mount:hover { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .hotplug-resident-mount:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); } .hotplug-resident-mount-label { @@ -2829,17 +2838,17 @@ StEntry StLabel.hint-text { .notification-banner .notification-button:focus { background-color: transparent; color: #afafaf; - box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.06); + box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1); } .notification-banner .notification-button:hover, .notification-banner .notification-button:focus:hover { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); color: #dedede; box-shadow: none; } .notification-banner .notification-button:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); color: #dedede; } @@ -2921,9 +2930,9 @@ StEntry StLabel.hint-text { } .window-clone-border { - border: 4px solid rgba(255, 255, 255, 0.3); + border: 4px solid rgba(255, 255, 255, 0.28); border-radius: 6px; - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); } .window-caption { @@ -2942,7 +2951,7 @@ StEntry StLabel.hint-text { border: none; color: rgba(255, 255, 255, 0.5); caret-color: rgba(255, 255, 255, 0.85); - selection-background-color: rgba(255, 255, 255, 0.3); + selection-background-color: rgba(255, 255, 255, 0.28); selected-color: rgba(255, 255, 255, 0.85); background-color: rgba(255, 255, 255, 0.12); border-radius: 8px; @@ -3046,6 +3055,37 @@ StEntry StLabel.hint-text { padding: 15px; } +.cycler-highlight { + border: 4px solid #0860f2; +} + +.workspace-switcher-group { + padding: 8px; +} + +.workspace-switcher { + background: transparent; + border: 0px; + border-radius: 0px; + padding: 0px; + spacing: 8px; +} + +.ws-switcher-active-up, .ws-switcher-active-down { + height: 48px; + background-color: #0860f2; + color: rgba(255, 255, 255, 0.85); + background-size: 32px; + border-radius: 6px; +} + +.ws-switcher-box { + height: 48px; + border: none; + background: rgba(255, 255, 255, 0.1); + border-radius: 6px; +} + #panel { background-color: #2a2a2a; /* transition from solid to transparent */ @@ -3146,7 +3186,7 @@ StEntry StLabel.hint-text { } #panel .panel-button:active, #panel .panel-button:active:hover, #panel .panel-button:overview, #panel .panel-button:overview:hover, #panel .panel-button:focus, #panel .panel-button:focus:hover, #panel .panel-button:checked, #panel .panel-button:checked:hover { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); color: #dadada; box-shadow: none; } @@ -3468,14 +3508,14 @@ StEntry StLabel.hint-text { } .system-menu-action:hover, .system-menu-action:focus { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); color: #dedede; border: none; padding: 12px; } .system-menu-action:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); color: #dedede; } @@ -3526,12 +3566,12 @@ StEntry StLabel.hint-text { } .candidate-box:hover { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); color: #dedede; } .candidate-box:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); color: #dedede; } @@ -3705,8 +3745,8 @@ StEntry StLabel.hint-text { .unlock-dialog-notification-count-text { weight: bold; padding: 0 6px; - color: #333333; - background-color: rgba(255, 255, 255, 0.85); + color: white; + background-color: #0860f2; border-radius: 99px; margin-right: 12px; } @@ -3731,7 +3771,7 @@ StScrollView StScrollBar { StScrollBar StBin#trough { margin: 6px; border-radius: 100px; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } StScrollBar StButton#vhandle, StScrollBar StButton#hhandle { @@ -4040,7 +4080,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { .openweather-provider:hover { color: #dedede; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; @@ -4056,7 +4096,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { .openweather-provider:active { color: #dedede; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; diff --git a/src/main/gnome-shell/gnome-shell-dark-solid.css b/src/main/gnome-shell/gnome-shell-dark-solid.css index a904cc1..145adc7 100644 --- a/src/main/gnome-shell/gnome-shell-dark-solid.css +++ b/src/main/gnome-shell/gnome-shell-dark-solid.css @@ -5,6 +5,29 @@ stage { color: #dedede; } +.shell-link { + border-radius: 6px; + color: #3484e2; +} + +.shell-link:hover { + color: #3484e2; + background-color: rgba(52, 132, 226, 0.15); +} + +.shell-link:active { + color: #3484e2; + background-color: rgba(52, 132, 226, 0.3); +} + +.lowres-icon { + icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); +} + +.icon-dropshadow { + icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); +} + .search-provider-icon .overview-icon, .show-apps .overview-icon, .app-well-app .overview-icon, @@ -90,7 +113,7 @@ stage { .hotplug-notification-item:insensitive { color: rgba(222, 222, 222, 0.35); - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); border-color: rgba(0, 0, 0, 0.15); text-shadow: none; icon-shadow: none; @@ -170,7 +193,7 @@ stage { .button:hover { color: #dedede; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; @@ -179,7 +202,7 @@ stage { .button:active { color: #dedede; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; @@ -318,7 +341,7 @@ stage { } .calendar-month-label:focus { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .pager-button { @@ -331,11 +354,11 @@ stage { } .pager-button:hover, .pager-button:focus { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .pager-button:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); } .calendar-change-month-back { @@ -375,18 +398,18 @@ stage { } .calendar-day-base:hover, .calendar-day-base:focus { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .calendar-day-base:active { color: #afafaf; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); border-color: transparent; } .calendar-day-base:selected { color: #dedede; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); border-color: transparent; } @@ -592,11 +615,11 @@ stage { } .message-list-clear-button.button:hover, .message-list-clear-button.button:focus { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .message-list-clear-button.button:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); } .message-list-section, @@ -687,11 +710,11 @@ stage { } .message .message-close-button:hover, .message .message-close-button:focus { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .message .message-close-button:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); } .message .message-body { @@ -711,12 +734,12 @@ stage { .message-media-control:hover, .message-media-control:focus { color: #dedede; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .message-media-control:active { color: #dedede; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); } .message-media-control:insensitive { @@ -747,7 +770,7 @@ stage { padding: 8px; border: none; border-radius: 6px; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); color: #999999; } @@ -773,11 +796,11 @@ stage { } .check-box:hover StBin { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .check-box:active StBin { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); } .check-box:checked StBin { @@ -908,7 +931,7 @@ stage { .search-provider-icon:active, .search-provider-icon:checked, .list-search-result:active, .list-search-result:checked { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); transition-duration: 150ms; } @@ -943,7 +966,7 @@ stage { .app-well-app:checked .overview-icon, .grid-search-result:active .overview-icon, .grid-search-result:checked .overview-icon { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); box-shadow: none; transition-duration: 150ms; } @@ -1112,7 +1135,7 @@ StWidget.focused .app-well-app-running-dot { } .app-folder-dialog .folder-name-container .edit-folder-button:checked, .app-folder-dialog .folder-name-container .edit-folder-button:active { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); } .app-folder-dialog .icon-grid { @@ -1233,7 +1256,7 @@ StWidget.focused .app-well-app-running-dot { .modal-dialog-linked-button:hover { color: #dedede; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; @@ -1242,7 +1265,7 @@ StWidget.focused .app-well-app-running-dot { .modal-dialog-linked-button:active { color: #dedede; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; @@ -1672,7 +1695,7 @@ StWidget.focused .app-well-app-running-dot { } .audio-selection-device:hover, .audio-selection-device:focus { - background-color: rgba(255, 255, 255, 0.08); + background-color: rgba(255, 255, 255, 0.12); } .audio-selection-device:active { @@ -1773,11 +1796,11 @@ StWidget.focused .app-well-app-running-dot { } .nm-dialog-item:hover, .nm-dialog-item:focus { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .nm-dialog-item:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); } .nm-dialog-item:selected { @@ -1957,41 +1980,56 @@ StEntry StLabel.hint-text { max-width: 23em; } -.login-dialog { +.login-dialog, +.unlock-dialog { border: none; background-color: transparent; } -.login-dialog StEntry { +.login-dialog StEntry, +.unlock-dialog StEntry { selection-background-color: #0860f2; selected-background-color: #0860f2; selected-color: white; padding: 4px 8px; min-height: 20px; + border-radius: 9999px; + caret-color: white; background-color: rgba(255, 255, 255, 0.1); border-radius: 100px; border: none; box-shadow: none; - border-radius: 9999px; + color: white; } -.login-dialog StEntry:focus { +.login-dialog StEntry:focus, +.unlock-dialog StEntry:focus { border: none; background-color: rgba(255, 255, 255, 0.2); + color: white; } -.login-dialog StEntry:insensitive { +.login-dialog StEntry:insensitive, +.unlock-dialog StEntry:insensitive { border: none; - color: rgba(222, 222, 222, 0.35); background-color: rgba(255, 255, 255, 0.05); + color: rgba(255, 255, 255, 0.45); } -.login-dialog .modal-dialog-button-box { +.login-dialog StEntry StLabel.hint-text, +.unlock-dialog StEntry StLabel.hint-text { + color: rgba(255, 255, 255, 0.45); +} + +.login-dialog .modal-dialog-button-box, +.unlock-dialog .modal-dialog-button-box { spacing: 3px; } -.login-dialog .modal-dialog-button { +.login-dialog .modal-dialog-button, +.unlock-dialog .modal-dialog-button { padding: 0 16px; + border: none; color: white; background-color: transparent; border-color: transparent; @@ -2000,26 +2038,30 @@ StEntry StLabel.hint-text { icon-shadow: none; } -.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus { +.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus, +.unlock-dialog .modal-dialog-button:hover, +.unlock-dialog .modal-dialog-button:focus { color: white; - background-color: rgba(255, 255, 255, 0.15); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:active { +.login-dialog .modal-dialog-button:active, +.unlock-dialog .modal-dialog-button:active { color: white; - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.16); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:insensitive { - color: rgba(255, 255, 255, 0.35); +.login-dialog .modal-dialog-button:insensitive, +.unlock-dialog .modal-dialog-button:insensitive { + color: rgba(222, 222, 222, 0.35); background-color: transparent; border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); @@ -2027,23 +2069,27 @@ StEntry StLabel.hint-text { icon-shadow: none; } -.login-dialog .modal-dialog-button:default { +.login-dialog .modal-dialog-button:default, +.unlock-dialog .modal-dialog-button:default { color: white; - background-color: #3484e2; + background-color: #242424; border: 1px solid rgba(0, 0, 0, 0.15); text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus { +.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus, +.unlock-dialog .modal-dialog-button:default:hover, +.unlock-dialog .modal-dialog-button:default:focus { color: white; border-color: rgba(0, 0, 0, 0.15); - background-color: #418ce4; + background-color: #2c2c2c; text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:default:active { +.login-dialog .modal-dialog-button:default:active, +.unlock-dialog .modal-dialog-button:default:active { color: white; background-color: #0860f2; border-color: rgba(0, 0, 0, 0.15); @@ -2051,9 +2097,10 @@ StEntry StLabel.hint-text { icon-shadow: none; } -.login-dialog .modal-dialog-button:default:insensitive { +.login-dialog .modal-dialog-button:default:insensitive, +.unlock-dialog .modal-dialog-button:default:insensitive { color: rgba(255, 255, 255, 0.45); - background-color: rgba(255, 255, 255, 0.15); + background-color: rgba(255, 255, 255, 0.1); border-color: rgba(0, 0, 0, 0.15); text-shadow: none; icon-shadow: none; @@ -2061,7 +2108,10 @@ StEntry StLabel.hint-text { .login-dialog .cancel-button, .login-dialog .switch-user-button, -.login-dialog .login-dialog-session-list-button { +.login-dialog .login-dialog-session-list-button, +.unlock-dialog .cancel-button, +.unlock-dialog .switch-user-button, +.unlock-dialog .login-dialog-session-list-button { padding: 0; border-radius: 100px; width: 32px; @@ -2072,11 +2122,15 @@ StEntry StLabel.hint-text { .login-dialog .cancel-button StIcon, .login-dialog .switch-user-button StIcon, -.login-dialog .login-dialog-session-list-button StIcon { +.login-dialog .login-dialog-session-list-button StIcon, +.unlock-dialog .cancel-button StIcon, +.unlock-dialog .switch-user-button StIcon, +.unlock-dialog .login-dialog-session-list-button StIcon { icon-size: 16px; } -.login-dialog .login-dialog-message-warning { +.login-dialog .login-dialog-message-warning, +.unlock-dialog .login-dialog-message-warning { color: rgba(255, 255, 255, 0.85); } @@ -2158,7 +2212,7 @@ StEntry StLabel.hint-text { } .login-dialog-user-list:expanded .login-dialog-user-list-item:active { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.85); } @@ -2180,24 +2234,24 @@ StEntry StLabel.hint-text { padding-left: 1em; } -.login-dialog-user-list-item:hover { - background-color: rgba(255, 255, 255, 0.15); +.login-dialog-user-list-item:focus { + background-color: rgba(255, 255, 255, 0.03) !important; +} + +.login-dialog-user-list-item:hover, .login-dialog-user-list-item:focus:hover { + background-color: rgba(255, 255, 255, 0.1) !important; color: rgba(255, 255, 255, 0.85); } -.login-dialog-user-list-item:active { - background-color: rgba(255, 255, 255, 0.3); +.login-dialog-user-list-item:active, .login-dialog-user-list-item:focus:active { + background-color: rgba(255, 255, 255, 0.16) !important; color: rgba(255, 255, 255, 0.85); } .login-dialog-user-list-item .login-dialog-timed-login-indicator { height: 2px; margin: 6px 0 0 0; - background-color: rgba(255, 255, 255, 0.85); -} - -.login-dialog-user-list-item:focus .login-dialog-timed-login-indicator { - background-color: rgba(255, 255, 255, 0.85); + background-color: rgba(255, 255, 255, 0.12) !important; } .user-widget-label { @@ -2208,7 +2262,8 @@ StEntry StLabel.hint-text { background-size: contain; color: rgba(255, 255, 255, 0.85); border-radius: 9999px; - border: 2px rgba(255, 255, 255, 0.85); + border: none; + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); } .user-icon:hover { @@ -2341,7 +2396,7 @@ StEntry StLabel.hint-text { } #LookingGlassDialog .notebook-tab:hover { - box-shadow: inset 0 -2px 0px rgba(255, 255, 255, 0.1); + box-shadow: inset 0 -2px 0px rgba(255, 255, 255, 0.16); color: #dedede; text-shadow: none; } @@ -2403,7 +2458,7 @@ StEntry StLabel.hint-text { .lg-obj-inspector-button:hover { color: #dedede; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; @@ -2412,7 +2467,7 @@ StEntry StLabel.hint-text { .lg-obj-inspector-button:active { color: #dedede; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; @@ -2487,21 +2542,6 @@ StEntry StLabel.hint-text { -pie-background-color: rgba(201, 221, 253, 0.3); } -.shell-link { - border-radius: 6px; - color: #3484e2; -} - -.shell-link:hover { - color: #3484e2; - background-color: rgba(52, 132, 226, 0.15); -} - -.shell-link:active { - color: #3484e2; - background-color: rgba(52, 132, 226, 0.3); -} - .caps-lock-warning-label { text-align: center; padding-bottom: 8px; @@ -2540,7 +2580,7 @@ StEntry StLabel.hint-text { .switcher-list .item-box:outlined { padding: 8px; border: none; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); color: #dedede; } @@ -2579,37 +2619,6 @@ StEntry StLabel.hint-text { height: 96px; } -.cycler-highlight { - border: 4px solid #0860f2; -} - -.workspace-switcher-group { - padding: 8px; -} - -.workspace-switcher { - background: transparent; - border: 0px; - border-radius: 0px; - padding: 0px; - spacing: 8px; -} - -.ws-switcher-active-up, .ws-switcher-active-down { - height: 48px; - background-color: #0860f2; - color: rgba(255, 255, 255, 0.85); - background-size: 32px; - border-radius: 6px; -} - -.ws-switcher-box { - height: 48px; - border: none; - background: rgba(255, 255, 255, 0.06); - border-radius: 6px; -} - .tile-preview { background-color: rgba(8, 96, 242, 0.3); border: 1px solid #0860f2; @@ -2734,11 +2743,11 @@ StEntry StLabel.hint-text { } .hotplug-resident-mount:hover { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .hotplug-resident-mount:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); } .hotplug-resident-mount-label { @@ -2829,17 +2838,17 @@ StEntry StLabel.hint-text { .notification-banner .notification-button:focus { background-color: transparent; color: #afafaf; - box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.06); + box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1); } .notification-banner .notification-button:hover, .notification-banner .notification-button:focus:hover { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); color: #dedede; box-shadow: none; } .notification-banner .notification-button:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); color: #dedede; } @@ -2921,9 +2930,9 @@ StEntry StLabel.hint-text { } .window-clone-border { - border: 4px solid rgba(255, 255, 255, 0.3); + border: 4px solid rgba(255, 255, 255, 0.28); border-radius: 6px; - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); } .window-caption { @@ -2942,7 +2951,7 @@ StEntry StLabel.hint-text { border: none; color: rgba(255, 255, 255, 0.5); caret-color: rgba(255, 255, 255, 0.85); - selection-background-color: rgba(255, 255, 255, 0.3); + selection-background-color: rgba(255, 255, 255, 0.28); selected-color: rgba(255, 255, 255, 0.85); background-color: rgba(255, 255, 255, 0.12); border-radius: 8px; @@ -3046,6 +3055,37 @@ StEntry StLabel.hint-text { padding: 15px; } +.cycler-highlight { + border: 4px solid #0860f2; +} + +.workspace-switcher-group { + padding: 8px; +} + +.workspace-switcher { + background: transparent; + border: 0px; + border-radius: 0px; + padding: 0px; + spacing: 8px; +} + +.ws-switcher-active-up, .ws-switcher-active-down { + height: 48px; + background-color: #0860f2; + color: rgba(255, 255, 255, 0.85); + background-size: 32px; + border-radius: 6px; +} + +.ws-switcher-box { + height: 48px; + border: none; + background: rgba(255, 255, 255, 0.1); + border-radius: 6px; +} + #panel { background-color: #2a2a2a; /* transition from solid to transparent */ @@ -3146,7 +3186,7 @@ StEntry StLabel.hint-text { } #panel .panel-button:active, #panel .panel-button:active:hover, #panel .panel-button:overview, #panel .panel-button:overview:hover, #panel .panel-button:focus, #panel .panel-button:focus:hover, #panel .panel-button:checked, #panel .panel-button:checked:hover { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); color: #dadada; box-shadow: none; } @@ -3468,14 +3508,14 @@ StEntry StLabel.hint-text { } .system-menu-action:hover, .system-menu-action:focus { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); color: #dedede; border: none; padding: 12px; } .system-menu-action:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); color: #dedede; } @@ -3526,12 +3566,12 @@ StEntry StLabel.hint-text { } .candidate-box:hover { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); color: #dedede; } .candidate-box:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); color: #dedede; } @@ -3705,8 +3745,8 @@ StEntry StLabel.hint-text { .unlock-dialog-notification-count-text { weight: bold; padding: 0 6px; - color: #333333; - background-color: rgba(255, 255, 255, 0.85); + color: white; + background-color: #0860f2; border-radius: 99px; margin-right: 12px; } @@ -3731,7 +3771,7 @@ StScrollView StScrollBar { StScrollBar StBin#trough { margin: 6px; border-radius: 100px; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } StScrollBar StButton#vhandle, StScrollBar StButton#hhandle { @@ -4040,7 +4080,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { .openweather-provider:hover { color: #dedede; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; @@ -4056,7 +4096,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { .openweather-provider:active { color: #dedede; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; diff --git a/src/main/gnome-shell/gnome-shell-dark.css b/src/main/gnome-shell/gnome-shell-dark.css index 08a2187..4025b73 100644 --- a/src/main/gnome-shell/gnome-shell-dark.css +++ b/src/main/gnome-shell/gnome-shell-dark.css @@ -5,6 +5,29 @@ stage { color: #dedede; } +.shell-link { + border-radius: 6px; + color: #3484e2; +} + +.shell-link:hover { + color: #3484e2; + background-color: rgba(52, 132, 226, 0.15); +} + +.shell-link:active { + color: #3484e2; + background-color: rgba(52, 132, 226, 0.3); +} + +.lowres-icon { + icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); +} + +.icon-dropshadow { + icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); +} + .search-provider-icon .overview-icon, .show-apps .overview-icon, .app-well-app .overview-icon, @@ -90,7 +113,7 @@ stage { .hotplug-notification-item:insensitive { color: rgba(222, 222, 222, 0.35); - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); border-color: rgba(0, 0, 0, 0.15); text-shadow: none; icon-shadow: none; @@ -170,7 +193,7 @@ stage { .button:hover { color: #dedede; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; @@ -179,7 +202,7 @@ stage { .button:active { color: #dedede; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; @@ -318,7 +341,7 @@ stage { } .calendar-month-label:focus { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .pager-button { @@ -331,11 +354,11 @@ stage { } .pager-button:hover, .pager-button:focus { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .pager-button:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); } .calendar-change-month-back { @@ -375,18 +398,18 @@ stage { } .calendar-day-base:hover, .calendar-day-base:focus { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .calendar-day-base:active { color: #afafaf; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); border-color: transparent; } .calendar-day-base:selected { color: #dedede; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); border-color: transparent; } @@ -592,11 +615,11 @@ stage { } .message-list-clear-button.button:hover, .message-list-clear-button.button:focus { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .message-list-clear-button.button:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); } .message-list-section, @@ -687,11 +710,11 @@ stage { } .message .message-close-button:hover, .message .message-close-button:focus { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .message .message-close-button:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); } .message .message-body { @@ -711,12 +734,12 @@ stage { .message-media-control:hover, .message-media-control:focus { color: #dedede; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .message-media-control:active { color: #dedede; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); } .message-media-control:insensitive { @@ -747,7 +770,7 @@ stage { padding: 8px; border: none; border-radius: 6px; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); color: #999999; } @@ -773,11 +796,11 @@ stage { } .check-box:hover StBin { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .check-box:active StBin { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); } .check-box:checked StBin { @@ -908,7 +931,7 @@ stage { .search-provider-icon:active, .search-provider-icon:checked, .list-search-result:active, .list-search-result:checked { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); transition-duration: 150ms; } @@ -943,7 +966,7 @@ stage { .app-well-app:checked .overview-icon, .grid-search-result:active .overview-icon, .grid-search-result:checked .overview-icon { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); box-shadow: none; transition-duration: 150ms; } @@ -1112,7 +1135,7 @@ StWidget.focused .app-well-app-running-dot { } .app-folder-dialog .folder-name-container .edit-folder-button:checked, .app-folder-dialog .folder-name-container .edit-folder-button:active { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); } .app-folder-dialog .icon-grid { @@ -1233,7 +1256,7 @@ StWidget.focused .app-well-app-running-dot { .modal-dialog-linked-button:hover { color: #dedede; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; @@ -1242,7 +1265,7 @@ StWidget.focused .app-well-app-running-dot { .modal-dialog-linked-button:active { color: #dedede; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; @@ -1672,7 +1695,7 @@ StWidget.focused .app-well-app-running-dot { } .audio-selection-device:hover, .audio-selection-device:focus { - background-color: rgba(255, 255, 255, 0.08); + background-color: rgba(255, 255, 255, 0.12); } .audio-selection-device:active { @@ -1773,11 +1796,11 @@ StWidget.focused .app-well-app-running-dot { } .nm-dialog-item:hover, .nm-dialog-item:focus { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .nm-dialog-item:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); } .nm-dialog-item:selected { @@ -1957,41 +1980,56 @@ StEntry StLabel.hint-text { max-width: 23em; } -.login-dialog { +.login-dialog, +.unlock-dialog { border: none; background-color: transparent; } -.login-dialog StEntry { +.login-dialog StEntry, +.unlock-dialog StEntry { selection-background-color: #0860f2; selected-background-color: #0860f2; selected-color: white; padding: 4px 8px; min-height: 20px; + border-radius: 9999px; + caret-color: white; background-color: rgba(255, 255, 255, 0.1); border-radius: 100px; border: none; box-shadow: none; - border-radius: 9999px; + color: white; } -.login-dialog StEntry:focus { +.login-dialog StEntry:focus, +.unlock-dialog StEntry:focus { border: none; background-color: rgba(255, 255, 255, 0.2); + color: white; } -.login-dialog StEntry:insensitive { +.login-dialog StEntry:insensitive, +.unlock-dialog StEntry:insensitive { border: none; - color: rgba(222, 222, 222, 0.35); background-color: rgba(255, 255, 255, 0.05); + color: rgba(255, 255, 255, 0.45); } -.login-dialog .modal-dialog-button-box { +.login-dialog StEntry StLabel.hint-text, +.unlock-dialog StEntry StLabel.hint-text { + color: rgba(255, 255, 255, 0.45); +} + +.login-dialog .modal-dialog-button-box, +.unlock-dialog .modal-dialog-button-box { spacing: 3px; } -.login-dialog .modal-dialog-button { +.login-dialog .modal-dialog-button, +.unlock-dialog .modal-dialog-button { padding: 0 16px; + border: none; color: white; background-color: transparent; border-color: transparent; @@ -2000,26 +2038,30 @@ StEntry StLabel.hint-text { icon-shadow: none; } -.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus { +.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus, +.unlock-dialog .modal-dialog-button:hover, +.unlock-dialog .modal-dialog-button:focus { color: white; - background-color: rgba(255, 255, 255, 0.15); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:active { +.login-dialog .modal-dialog-button:active, +.unlock-dialog .modal-dialog-button:active { color: white; - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.16); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:insensitive { - color: rgba(255, 255, 255, 0.35); +.login-dialog .modal-dialog-button:insensitive, +.unlock-dialog .modal-dialog-button:insensitive { + color: rgba(222, 222, 222, 0.35); background-color: transparent; border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); @@ -2027,23 +2069,27 @@ StEntry StLabel.hint-text { icon-shadow: none; } -.login-dialog .modal-dialog-button:default { +.login-dialog .modal-dialog-button:default, +.unlock-dialog .modal-dialog-button:default { color: white; - background-color: #3484e2; + background-color: #242424; border: 1px solid rgba(0, 0, 0, 0.15); text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus { +.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus, +.unlock-dialog .modal-dialog-button:default:hover, +.unlock-dialog .modal-dialog-button:default:focus { color: white; border-color: rgba(0, 0, 0, 0.15); - background-color: #418ce4; + background-color: #2c2c2c; text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:default:active { +.login-dialog .modal-dialog-button:default:active, +.unlock-dialog .modal-dialog-button:default:active { color: white; background-color: #0860f2; border-color: rgba(0, 0, 0, 0.15); @@ -2051,9 +2097,10 @@ StEntry StLabel.hint-text { icon-shadow: none; } -.login-dialog .modal-dialog-button:default:insensitive { +.login-dialog .modal-dialog-button:default:insensitive, +.unlock-dialog .modal-dialog-button:default:insensitive { color: rgba(255, 255, 255, 0.45); - background-color: rgba(255, 255, 255, 0.15); + background-color: rgba(255, 255, 255, 0.1); border-color: rgba(0, 0, 0, 0.15); text-shadow: none; icon-shadow: none; @@ -2061,7 +2108,10 @@ StEntry StLabel.hint-text { .login-dialog .cancel-button, .login-dialog .switch-user-button, -.login-dialog .login-dialog-session-list-button { +.login-dialog .login-dialog-session-list-button, +.unlock-dialog .cancel-button, +.unlock-dialog .switch-user-button, +.unlock-dialog .login-dialog-session-list-button { padding: 0; border-radius: 100px; width: 32px; @@ -2072,11 +2122,15 @@ StEntry StLabel.hint-text { .login-dialog .cancel-button StIcon, .login-dialog .switch-user-button StIcon, -.login-dialog .login-dialog-session-list-button StIcon { +.login-dialog .login-dialog-session-list-button StIcon, +.unlock-dialog .cancel-button StIcon, +.unlock-dialog .switch-user-button StIcon, +.unlock-dialog .login-dialog-session-list-button StIcon { icon-size: 16px; } -.login-dialog .login-dialog-message-warning { +.login-dialog .login-dialog-message-warning, +.unlock-dialog .login-dialog-message-warning { color: rgba(255, 255, 255, 0.85); } @@ -2158,7 +2212,7 @@ StEntry StLabel.hint-text { } .login-dialog-user-list:expanded .login-dialog-user-list-item:active { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.85); } @@ -2180,24 +2234,24 @@ StEntry StLabel.hint-text { padding-left: 1em; } -.login-dialog-user-list-item:hover { - background-color: rgba(255, 255, 255, 0.15); +.login-dialog-user-list-item:focus { + background-color: rgba(255, 255, 255, 0.03) !important; +} + +.login-dialog-user-list-item:hover, .login-dialog-user-list-item:focus:hover { + background-color: rgba(255, 255, 255, 0.1) !important; color: rgba(255, 255, 255, 0.85); } -.login-dialog-user-list-item:active { - background-color: rgba(255, 255, 255, 0.3); +.login-dialog-user-list-item:active, .login-dialog-user-list-item:focus:active { + background-color: rgba(255, 255, 255, 0.16) !important; color: rgba(255, 255, 255, 0.85); } .login-dialog-user-list-item .login-dialog-timed-login-indicator { height: 2px; margin: 6px 0 0 0; - background-color: rgba(255, 255, 255, 0.85); -} - -.login-dialog-user-list-item:focus .login-dialog-timed-login-indicator { - background-color: rgba(255, 255, 255, 0.85); + background-color: rgba(255, 255, 255, 0.12) !important; } .user-widget-label { @@ -2208,7 +2262,8 @@ StEntry StLabel.hint-text { background-size: contain; color: rgba(255, 255, 255, 0.85); border-radius: 9999px; - border: 2px rgba(255, 255, 255, 0.85); + border: none; + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); } .user-icon:hover { @@ -2341,7 +2396,7 @@ StEntry StLabel.hint-text { } #LookingGlassDialog .notebook-tab:hover { - box-shadow: inset 0 -2px 0px rgba(255, 255, 255, 0.1); + box-shadow: inset 0 -2px 0px rgba(255, 255, 255, 0.16); color: #dedede; text-shadow: none; } @@ -2403,7 +2458,7 @@ StEntry StLabel.hint-text { .lg-obj-inspector-button:hover { color: #dedede; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; @@ -2412,7 +2467,7 @@ StEntry StLabel.hint-text { .lg-obj-inspector-button:active { color: #dedede; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; @@ -2487,21 +2542,6 @@ StEntry StLabel.hint-text { -pie-background-color: rgba(201, 221, 253, 0.3); } -.shell-link { - border-radius: 6px; - color: #3484e2; -} - -.shell-link:hover { - color: #3484e2; - background-color: rgba(52, 132, 226, 0.15); -} - -.shell-link:active { - color: #3484e2; - background-color: rgba(52, 132, 226, 0.3); -} - .caps-lock-warning-label { text-align: center; padding-bottom: 8px; @@ -2540,7 +2580,7 @@ StEntry StLabel.hint-text { .switcher-list .item-box:outlined { padding: 8px; border: none; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); color: #dedede; } @@ -2579,37 +2619,6 @@ StEntry StLabel.hint-text { height: 96px; } -.cycler-highlight { - border: 4px solid #0860f2; -} - -.workspace-switcher-group { - padding: 8px; -} - -.workspace-switcher { - background: transparent; - border: 0px; - border-radius: 0px; - padding: 0px; - spacing: 8px; -} - -.ws-switcher-active-up, .ws-switcher-active-down { - height: 48px; - background-color: #0860f2; - color: rgba(255, 255, 255, 0.85); - background-size: 32px; - border-radius: 6px; -} - -.ws-switcher-box { - height: 48px; - border: none; - background: rgba(255, 255, 255, 0.06); - border-radius: 6px; -} - .tile-preview { background-color: rgba(8, 96, 242, 0.3); border: 1px solid #0860f2; @@ -2734,11 +2743,11 @@ StEntry StLabel.hint-text { } .hotplug-resident-mount:hover { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } .hotplug-resident-mount:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); } .hotplug-resident-mount-label { @@ -2829,17 +2838,17 @@ StEntry StLabel.hint-text { .notification-banner .notification-button:focus { background-color: transparent; color: #afafaf; - box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.06); + box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1); } .notification-banner .notification-button:hover, .notification-banner .notification-button:focus:hover { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); color: #dedede; box-shadow: none; } .notification-banner .notification-button:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); color: #dedede; } @@ -2921,9 +2930,9 @@ StEntry StLabel.hint-text { } .window-clone-border { - border: 4px solid rgba(255, 255, 255, 0.3); + border: 4px solid rgba(255, 255, 255, 0.28); border-radius: 6px; - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); } .window-caption { @@ -2942,7 +2951,7 @@ StEntry StLabel.hint-text { border: none; color: rgba(255, 255, 255, 0.5); caret-color: rgba(255, 255, 255, 0.85); - selection-background-color: rgba(255, 255, 255, 0.3); + selection-background-color: rgba(255, 255, 255, 0.28); selected-color: rgba(255, 255, 255, 0.85); background-color: rgba(255, 255, 255, 0.12); border-radius: 8px; @@ -3046,6 +3055,37 @@ StEntry StLabel.hint-text { padding: 15px; } +.cycler-highlight { + border: 4px solid #0860f2; +} + +.workspace-switcher-group { + padding: 8px; +} + +.workspace-switcher { + background: transparent; + border: 0px; + border-radius: 0px; + padding: 0px; + spacing: 8px; +} + +.ws-switcher-active-up, .ws-switcher-active-down { + height: 48px; + background-color: #0860f2; + color: rgba(255, 255, 255, 0.85); + background-size: 32px; + border-radius: 6px; +} + +.ws-switcher-box { + height: 48px; + border: none; + background: rgba(255, 255, 255, 0.1); + border-radius: 6px; +} + #panel { background-color: rgba(0, 0, 0, 0.16); /* transition from solid to transparent */ @@ -3146,7 +3186,7 @@ StEntry StLabel.hint-text { } #panel .panel-button:active, #panel .panel-button:active:hover, #panel .panel-button:overview, #panel .panel-button:overview:hover, #panel .panel-button:focus, #panel .panel-button:focus:hover, #panel .panel-button:checked, #panel .panel-button:checked:hover { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); color: white; box-shadow: none; } @@ -3468,14 +3508,14 @@ StEntry StLabel.hint-text { } .system-menu-action:hover, .system-menu-action:focus { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); color: #dedede; border: none; padding: 12px; } .system-menu-action:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); color: #dedede; } @@ -3526,12 +3566,12 @@ StEntry StLabel.hint-text { } .candidate-box:hover { - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); color: #dedede; } .candidate-box:active { - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); color: #dedede; } @@ -3705,8 +3745,8 @@ StEntry StLabel.hint-text { .unlock-dialog-notification-count-text { weight: bold; padding: 0 6px; - color: rgba(51, 51, 51, 0.95); - background-color: rgba(255, 255, 255, 0.85); + color: white; + background-color: #0860f2; border-radius: 99px; margin-right: 12px; } @@ -3731,7 +3771,7 @@ StScrollView StScrollBar { StScrollBar StBin#trough { margin: 6px; border-radius: 100px; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); } StScrollBar StButton#vhandle, StScrollBar StButton#hhandle { @@ -4040,7 +4080,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { .openweather-provider:hover { color: #dedede; - background-color: rgba(255, 255, 255, 0.06); + background-color: rgba(255, 255, 255, 0.1); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; @@ -4056,7 +4096,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { .openweather-provider:active { color: #dedede; - background-color: rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.16); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; diff --git a/src/main/gnome-shell/gnome-shell-light-alt.css b/src/main/gnome-shell/gnome-shell-light-alt.css index ad6d048..9a8e250 100644 --- a/src/main/gnome-shell/gnome-shell-light-alt.css +++ b/src/main/gnome-shell/gnome-shell-light-alt.css @@ -5,6 +5,29 @@ stage { color: #242424; } +.shell-link { + border-radius: 6px; + color: #3484e2; +} + +.shell-link:hover { + color: #3484e2; + background-color: rgba(52, 132, 226, 0.15); +} + +.shell-link:active { + color: #3484e2; + background-color: rgba(52, 132, 226, 0.3); +} + +.lowres-icon { + icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); +} + +.icon-dropshadow { + icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); +} + .search-provider-icon .overview-icon, .show-apps .overview-icon, .app-well-app .overview-icon, @@ -908,7 +931,7 @@ stage { .search-provider-icon:active, .search-provider-icon:checked, .list-search-result:active, .list-search-result:checked { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); transition-duration: 150ms; } @@ -943,7 +966,7 @@ stage { .app-well-app:checked .overview-icon, .grid-search-result:active .overview-icon, .grid-search-result:checked .overview-icon { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); box-shadow: none; transition-duration: 150ms; } @@ -1112,7 +1135,7 @@ StWidget.focused .app-well-app-running-dot { } .app-folder-dialog .folder-name-container .edit-folder-button:checked, .app-folder-dialog .folder-name-container .edit-folder-button:active { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); } .app-folder-dialog .icon-grid { @@ -1672,7 +1695,7 @@ StWidget.focused .app-well-app-running-dot { } .audio-selection-device:hover, .audio-selection-device:focus { - background-color: rgba(0, 0, 0, 0.35); + background-color: rgba(0, 0, 0, 0.16); } .audio-selection-device:active { @@ -1957,41 +1980,56 @@ StEntry StLabel.hint-text { max-width: 23em; } -.login-dialog { +.login-dialog, +.unlock-dialog { border: none; background-color: transparent; } -.login-dialog StEntry { +.login-dialog StEntry, +.unlock-dialog StEntry { selection-background-color: #0860f2; selected-background-color: #0860f2; selected-color: white; padding: 4px 8px; min-height: 20px; + border-radius: 9999px; + caret-color: white; background-color: rgba(0, 0, 0, 0.1); border-radius: 100px; border: none; box-shadow: none; - border-radius: 9999px; + color: white; } -.login-dialog StEntry:focus { +.login-dialog StEntry:focus, +.unlock-dialog StEntry:focus { border: none; background-color: rgba(0, 0, 0, 0.2); + color: white; } -.login-dialog StEntry:insensitive { +.login-dialog StEntry:insensitive, +.unlock-dialog StEntry:insensitive { border: none; - color: rgba(36, 36, 36, 0.45); background-color: rgba(0, 0, 0, 0.05); + color: rgba(255, 255, 255, 0.45); } -.login-dialog .modal-dialog-button-box { +.login-dialog StEntry StLabel.hint-text, +.unlock-dialog StEntry StLabel.hint-text { + color: rgba(255, 255, 255, 0.45); +} + +.login-dialog .modal-dialog-button-box, +.unlock-dialog .modal-dialog-button-box { spacing: 3px; } -.login-dialog .modal-dialog-button { +.login-dialog .modal-dialog-button, +.unlock-dialog .modal-dialog-button { padding: 0 16px; + border: none; color: white; background-color: transparent; border-color: transparent; @@ -2000,26 +2038,30 @@ StEntry StLabel.hint-text { icon-shadow: none; } -.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus { +.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus, +.unlock-dialog .modal-dialog-button:hover, +.unlock-dialog .modal-dialog-button:focus { color: white; - background-color: rgba(255, 255, 255, 0.15); + background-color: rgba(0, 0, 0, 0.12); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:active { +.login-dialog .modal-dialog-button:active, +.unlock-dialog .modal-dialog-button:active { color: white; - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(0, 0, 0, 0.2); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:insensitive { - color: rgba(255, 255, 255, 0.35); +.login-dialog .modal-dialog-button:insensitive, +.unlock-dialog .modal-dialog-button:insensitive { + color: rgba(36, 36, 36, 0.45); background-color: transparent; border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); @@ -2027,23 +2069,27 @@ StEntry StLabel.hint-text { icon-shadow: none; } -.login-dialog .modal-dialog-button:default { +.login-dialog .modal-dialog-button:default, +.unlock-dialog .modal-dialog-button:default { color: white; - background-color: #3484e2; + background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus { +.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus, +.unlock-dialog .modal-dialog-button:default:hover, +.unlock-dialog .modal-dialog-button:default:focus { color: white; border-color: rgba(0, 0, 0, 0.12); - background-color: #277ce0; + background-color: #f7f7f7; text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:default:active { +.login-dialog .modal-dialog-button:default:active, +.unlock-dialog .modal-dialog-button:default:active { color: white; background-color: #0860f2; border-color: #487afa; @@ -2051,9 +2097,10 @@ StEntry StLabel.hint-text { icon-shadow: none; } -.login-dialog .modal-dialog-button:default:insensitive { +.login-dialog .modal-dialog-button:default:insensitive, +.unlock-dialog .modal-dialog-button:default:insensitive { color: rgba(255, 255, 255, 0.45); - background-color: rgba(255, 255, 255, 0.15); + background-color: rgba(0, 0, 0, 0.12); border-color: rgba(0, 0, 0, 0.12); text-shadow: none; icon-shadow: none; @@ -2061,7 +2108,10 @@ StEntry StLabel.hint-text { .login-dialog .cancel-button, .login-dialog .switch-user-button, -.login-dialog .login-dialog-session-list-button { +.login-dialog .login-dialog-session-list-button, +.unlock-dialog .cancel-button, +.unlock-dialog .switch-user-button, +.unlock-dialog .login-dialog-session-list-button { padding: 0; border-radius: 100px; width: 32px; @@ -2072,11 +2122,15 @@ StEntry StLabel.hint-text { .login-dialog .cancel-button StIcon, .login-dialog .switch-user-button StIcon, -.login-dialog .login-dialog-session-list-button StIcon { +.login-dialog .login-dialog-session-list-button StIcon, +.unlock-dialog .cancel-button StIcon, +.unlock-dialog .switch-user-button StIcon, +.unlock-dialog .login-dialog-session-list-button StIcon { icon-size: 16px; } -.login-dialog .login-dialog-message-warning { +.login-dialog .login-dialog-message-warning, +.unlock-dialog .login-dialog-message-warning { color: rgba(255, 255, 255, 0.85); } @@ -2158,7 +2212,7 @@ StEntry StLabel.hint-text { } .login-dialog-user-list:expanded .login-dialog-user-list-item:active { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.85); } @@ -2180,24 +2234,24 @@ StEntry StLabel.hint-text { padding-left: 1em; } -.login-dialog-user-list-item:hover { - background-color: rgba(255, 255, 255, 0.15); +.login-dialog-user-list-item:focus { + background-color: rgba(0, 0, 0, 0.05) !important; +} + +.login-dialog-user-list-item:hover, .login-dialog-user-list-item:focus:hover { + background-color: rgba(0, 0, 0, 0.12) !important; color: rgba(255, 255, 255, 0.85); } -.login-dialog-user-list-item:active { - background-color: rgba(255, 255, 255, 0.3); +.login-dialog-user-list-item:active, .login-dialog-user-list-item:focus:active { + background-color: rgba(0, 0, 0, 0.2) !important; color: rgba(255, 255, 255, 0.85); } .login-dialog-user-list-item .login-dialog-timed-login-indicator { height: 2px; margin: 6px 0 0 0; - background-color: rgba(255, 255, 255, 0.85); -} - -.login-dialog-user-list-item:focus .login-dialog-timed-login-indicator { - background-color: rgba(255, 255, 255, 0.85); + background-color: rgba(0, 0, 0, 0.16) !important; } .user-widget-label { @@ -2208,7 +2262,8 @@ StEntry StLabel.hint-text { background-size: contain; color: rgba(255, 255, 255, 0.85); border-radius: 9999px; - border: 2px rgba(255, 255, 255, 0.85); + border: none; + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); } .user-icon:hover { @@ -2487,21 +2542,6 @@ StEntry StLabel.hint-text { -pie-background-color: rgba(201, 221, 253, 0.3); } -.shell-link { - border-radius: 6px; - color: #3484e2; -} - -.shell-link:hover { - color: #3484e2; - background-color: rgba(52, 132, 226, 0.15); -} - -.shell-link:active { - color: #3484e2; - background-color: rgba(52, 132, 226, 0.3); -} - .caps-lock-warning-label { text-align: center; padding-bottom: 8px; @@ -2579,37 +2619,6 @@ StEntry StLabel.hint-text { height: 96px; } -.cycler-highlight { - border: 4px solid #0860f2; -} - -.workspace-switcher-group { - padding: 8px; -} - -.workspace-switcher { - background: transparent; - border: 0px; - border-radius: 0px; - padding: 0px; - spacing: 8px; -} - -.ws-switcher-active-up, .ws-switcher-active-down { - height: 48px; - background-color: #0860f2; - color: rgba(255, 255, 255, 0.85); - background-size: 32px; - border-radius: 6px; -} - -.ws-switcher-box { - height: 48px; - border: none; - background: rgba(0, 0, 0, 0.12); - border-radius: 6px; -} - .tile-preview { background-color: rgba(8, 96, 242, 0.3); border: 1px solid #0860f2; @@ -2921,9 +2930,9 @@ StEntry StLabel.hint-text { } .window-clone-border { - border: 4px solid rgba(255, 255, 255, 0.3); + border: 4px solid rgba(255, 255, 255, 0.28); border-radius: 6px; - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); } .window-caption { @@ -2942,7 +2951,7 @@ StEntry StLabel.hint-text { border: none; color: rgba(255, 255, 255, 0.5); caret-color: rgba(255, 255, 255, 0.85); - selection-background-color: rgba(255, 255, 255, 0.3); + selection-background-color: rgba(255, 255, 255, 0.28); selected-color: rgba(255, 255, 255, 0.85); background-color: rgba(255, 255, 255, 0.12); border-radius: 8px; @@ -3046,6 +3055,37 @@ StEntry StLabel.hint-text { padding: 15px; } +.cycler-highlight { + border: 4px solid #0860f2; +} + +.workspace-switcher-group { + padding: 8px; +} + +.workspace-switcher { + background: transparent; + border: 0px; + border-radius: 0px; + padding: 0px; + spacing: 8px; +} + +.ws-switcher-active-up, .ws-switcher-active-down { + height: 48px; + background-color: #0860f2; + color: rgba(255, 255, 255, 0.85); + background-size: 32px; + border-radius: 6px; +} + +.ws-switcher-box { + height: 48px; + border: none; + background: rgba(0, 0, 0, 0.12); + border-radius: 6px; +} + #panel { background-color: rgba(255, 255, 255, 0.16); /* transition from solid to transparent */ @@ -3146,7 +3186,7 @@ StEntry StLabel.hint-text { } #panel .panel-button:active, #panel .panel-button:active:hover, #panel .panel-button:overview, #panel .panel-button:overview:hover, #panel .panel-button:focus, #panel .panel-button:focus:hover, #panel .panel-button:checked, #panel .panel-button:checked:hover { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); color: #363636; box-shadow: none; } @@ -3705,8 +3745,8 @@ StEntry StLabel.hint-text { .unlock-dialog-notification-count-text { weight: bold; padding: 0 6px; - color: rgba(240, 240, 240, 0.94); - background-color: rgba(255, 255, 255, 0.85); + color: white; + background-color: #0860f2; border-radius: 99px; margin-right: 12px; } diff --git a/src/main/gnome-shell/gnome-shell-light-solid-alt.css b/src/main/gnome-shell/gnome-shell-light-solid-alt.css index 3c01c27..a628eaa 100644 --- a/src/main/gnome-shell/gnome-shell-light-solid-alt.css +++ b/src/main/gnome-shell/gnome-shell-light-solid-alt.css @@ -5,6 +5,29 @@ stage { color: #242424; } +.shell-link { + border-radius: 6px; + color: #3484e2; +} + +.shell-link:hover { + color: #3484e2; + background-color: rgba(52, 132, 226, 0.15); +} + +.shell-link:active { + color: #3484e2; + background-color: rgba(52, 132, 226, 0.3); +} + +.lowres-icon { + icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); +} + +.icon-dropshadow { + icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); +} + .search-provider-icon .overview-icon, .show-apps .overview-icon, .app-well-app .overview-icon, @@ -908,7 +931,7 @@ stage { .search-provider-icon:active, .search-provider-icon:checked, .list-search-result:active, .list-search-result:checked { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); transition-duration: 150ms; } @@ -943,7 +966,7 @@ stage { .app-well-app:checked .overview-icon, .grid-search-result:active .overview-icon, .grid-search-result:checked .overview-icon { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); box-shadow: none; transition-duration: 150ms; } @@ -1112,7 +1135,7 @@ StWidget.focused .app-well-app-running-dot { } .app-folder-dialog .folder-name-container .edit-folder-button:checked, .app-folder-dialog .folder-name-container .edit-folder-button:active { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); } .app-folder-dialog .icon-grid { @@ -1672,7 +1695,7 @@ StWidget.focused .app-well-app-running-dot { } .audio-selection-device:hover, .audio-selection-device:focus { - background-color: rgba(0, 0, 0, 0.35); + background-color: rgba(0, 0, 0, 0.16); } .audio-selection-device:active { @@ -1957,41 +1980,56 @@ StEntry StLabel.hint-text { max-width: 23em; } -.login-dialog { +.login-dialog, +.unlock-dialog { border: none; background-color: transparent; } -.login-dialog StEntry { +.login-dialog StEntry, +.unlock-dialog StEntry { selection-background-color: #0860f2; selected-background-color: #0860f2; selected-color: white; padding: 4px 8px; min-height: 20px; + border-radius: 9999px; + caret-color: white; background-color: rgba(0, 0, 0, 0.1); border-radius: 100px; border: none; box-shadow: none; - border-radius: 9999px; + color: white; } -.login-dialog StEntry:focus { +.login-dialog StEntry:focus, +.unlock-dialog StEntry:focus { border: none; background-color: rgba(0, 0, 0, 0.2); + color: white; } -.login-dialog StEntry:insensitive { +.login-dialog StEntry:insensitive, +.unlock-dialog StEntry:insensitive { border: none; - color: rgba(36, 36, 36, 0.45); background-color: rgba(0, 0, 0, 0.05); + color: rgba(255, 255, 255, 0.45); } -.login-dialog .modal-dialog-button-box { +.login-dialog StEntry StLabel.hint-text, +.unlock-dialog StEntry StLabel.hint-text { + color: rgba(255, 255, 255, 0.45); +} + +.login-dialog .modal-dialog-button-box, +.unlock-dialog .modal-dialog-button-box { spacing: 3px; } -.login-dialog .modal-dialog-button { +.login-dialog .modal-dialog-button, +.unlock-dialog .modal-dialog-button { padding: 0 16px; + border: none; color: white; background-color: transparent; border-color: transparent; @@ -2000,26 +2038,30 @@ StEntry StLabel.hint-text { icon-shadow: none; } -.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus { +.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus, +.unlock-dialog .modal-dialog-button:hover, +.unlock-dialog .modal-dialog-button:focus { color: white; - background-color: rgba(255, 255, 255, 0.15); + background-color: rgba(0, 0, 0, 0.12); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:active { +.login-dialog .modal-dialog-button:active, +.unlock-dialog .modal-dialog-button:active { color: white; - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(0, 0, 0, 0.2); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:insensitive { - color: rgba(255, 255, 255, 0.35); +.login-dialog .modal-dialog-button:insensitive, +.unlock-dialog .modal-dialog-button:insensitive { + color: rgba(36, 36, 36, 0.45); background-color: transparent; border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); @@ -2027,23 +2069,27 @@ StEntry StLabel.hint-text { icon-shadow: none; } -.login-dialog .modal-dialog-button:default { +.login-dialog .modal-dialog-button:default, +.unlock-dialog .modal-dialog-button:default { color: white; - background-color: #3484e2; + background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus { +.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus, +.unlock-dialog .modal-dialog-button:default:hover, +.unlock-dialog .modal-dialog-button:default:focus { color: white; border-color: rgba(0, 0, 0, 0.12); - background-color: #277ce0; + background-color: #f7f7f7; text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:default:active { +.login-dialog .modal-dialog-button:default:active, +.unlock-dialog .modal-dialog-button:default:active { color: white; background-color: #0860f2; border-color: #487afa; @@ -2051,9 +2097,10 @@ StEntry StLabel.hint-text { icon-shadow: none; } -.login-dialog .modal-dialog-button:default:insensitive { +.login-dialog .modal-dialog-button:default:insensitive, +.unlock-dialog .modal-dialog-button:default:insensitive { color: rgba(255, 255, 255, 0.45); - background-color: rgba(255, 255, 255, 0.15); + background-color: rgba(0, 0, 0, 0.12); border-color: rgba(0, 0, 0, 0.12); text-shadow: none; icon-shadow: none; @@ -2061,7 +2108,10 @@ StEntry StLabel.hint-text { .login-dialog .cancel-button, .login-dialog .switch-user-button, -.login-dialog .login-dialog-session-list-button { +.login-dialog .login-dialog-session-list-button, +.unlock-dialog .cancel-button, +.unlock-dialog .switch-user-button, +.unlock-dialog .login-dialog-session-list-button { padding: 0; border-radius: 100px; width: 32px; @@ -2072,11 +2122,15 @@ StEntry StLabel.hint-text { .login-dialog .cancel-button StIcon, .login-dialog .switch-user-button StIcon, -.login-dialog .login-dialog-session-list-button StIcon { +.login-dialog .login-dialog-session-list-button StIcon, +.unlock-dialog .cancel-button StIcon, +.unlock-dialog .switch-user-button StIcon, +.unlock-dialog .login-dialog-session-list-button StIcon { icon-size: 16px; } -.login-dialog .login-dialog-message-warning { +.login-dialog .login-dialog-message-warning, +.unlock-dialog .login-dialog-message-warning { color: rgba(255, 255, 255, 0.85); } @@ -2158,7 +2212,7 @@ StEntry StLabel.hint-text { } .login-dialog-user-list:expanded .login-dialog-user-list-item:active { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.85); } @@ -2180,24 +2234,24 @@ StEntry StLabel.hint-text { padding-left: 1em; } -.login-dialog-user-list-item:hover { - background-color: rgba(255, 255, 255, 0.15); +.login-dialog-user-list-item:focus { + background-color: rgba(0, 0, 0, 0.05) !important; +} + +.login-dialog-user-list-item:hover, .login-dialog-user-list-item:focus:hover { + background-color: rgba(0, 0, 0, 0.12) !important; color: rgba(255, 255, 255, 0.85); } -.login-dialog-user-list-item:active { - background-color: rgba(255, 255, 255, 0.3); +.login-dialog-user-list-item:active, .login-dialog-user-list-item:focus:active { + background-color: rgba(0, 0, 0, 0.2) !important; color: rgba(255, 255, 255, 0.85); } .login-dialog-user-list-item .login-dialog-timed-login-indicator { height: 2px; margin: 6px 0 0 0; - background-color: rgba(255, 255, 255, 0.85); -} - -.login-dialog-user-list-item:focus .login-dialog-timed-login-indicator { - background-color: rgba(255, 255, 255, 0.85); + background-color: rgba(0, 0, 0, 0.16) !important; } .user-widget-label { @@ -2208,7 +2262,8 @@ StEntry StLabel.hint-text { background-size: contain; color: rgba(255, 255, 255, 0.85); border-radius: 9999px; - border: 2px rgba(255, 255, 255, 0.85); + border: none; + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); } .user-icon:hover { @@ -2487,21 +2542,6 @@ StEntry StLabel.hint-text { -pie-background-color: rgba(201, 221, 253, 0.3); } -.shell-link { - border-radius: 6px; - color: #3484e2; -} - -.shell-link:hover { - color: #3484e2; - background-color: rgba(52, 132, 226, 0.15); -} - -.shell-link:active { - color: #3484e2; - background-color: rgba(52, 132, 226, 0.3); -} - .caps-lock-warning-label { text-align: center; padding-bottom: 8px; @@ -2579,37 +2619,6 @@ StEntry StLabel.hint-text { height: 96px; } -.cycler-highlight { - border: 4px solid #0860f2; -} - -.workspace-switcher-group { - padding: 8px; -} - -.workspace-switcher { - background: transparent; - border: 0px; - border-radius: 0px; - padding: 0px; - spacing: 8px; -} - -.ws-switcher-active-up, .ws-switcher-active-down { - height: 48px; - background-color: #0860f2; - color: rgba(255, 255, 255, 0.85); - background-size: 32px; - border-radius: 6px; -} - -.ws-switcher-box { - height: 48px; - border: none; - background: rgba(0, 0, 0, 0.12); - border-radius: 6px; -} - .tile-preview { background-color: rgba(8, 96, 242, 0.3); border: 1px solid #0860f2; @@ -2921,9 +2930,9 @@ StEntry StLabel.hint-text { } .window-clone-border { - border: 4px solid rgba(255, 255, 255, 0.3); + border: 4px solid rgba(255, 255, 255, 0.28); border-radius: 6px; - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); } .window-caption { @@ -2942,7 +2951,7 @@ StEntry StLabel.hint-text { border: none; color: rgba(255, 255, 255, 0.5); caret-color: rgba(255, 255, 255, 0.85); - selection-background-color: rgba(255, 255, 255, 0.3); + selection-background-color: rgba(255, 255, 255, 0.28); selected-color: rgba(255, 255, 255, 0.85); background-color: rgba(255, 255, 255, 0.12); border-radius: 8px; @@ -3046,6 +3055,37 @@ StEntry StLabel.hint-text { padding: 15px; } +.cycler-highlight { + border: 4px solid #0860f2; +} + +.workspace-switcher-group { + padding: 8px; +} + +.workspace-switcher { + background: transparent; + border: 0px; + border-radius: 0px; + padding: 0px; + spacing: 8px; +} + +.ws-switcher-active-up, .ws-switcher-active-down { + height: 48px; + background-color: #0860f2; + color: rgba(255, 255, 255, 0.85); + background-size: 32px; + border-radius: 6px; +} + +.ws-switcher-box { + height: 48px; + border: none; + background: rgba(0, 0, 0, 0.12); + border-radius: 6px; +} + #panel { background-color: #f1f1f1; /* transition from solid to transparent */ @@ -3146,7 +3186,7 @@ StEntry StLabel.hint-text { } #panel .panel-button:active, #panel .panel-button:active:hover, #panel .panel-button:overview, #panel .panel-button:overview:hover, #panel .panel-button:focus, #panel .panel-button:focus:hover, #panel .panel-button:checked, #panel .panel-button:checked:hover { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); color: #363636; box-shadow: none; } @@ -3705,8 +3745,8 @@ StEntry StLabel.hint-text { .unlock-dialog-notification-count-text { weight: bold; padding: 0 6px; - color: #f0f0f0; - background-color: rgba(255, 255, 255, 0.85); + color: white; + background-color: #0860f2; border-radius: 99px; margin-right: 12px; } diff --git a/src/main/gnome-shell/gnome-shell-light-solid.css b/src/main/gnome-shell/gnome-shell-light-solid.css index 3c01c27..a628eaa 100644 --- a/src/main/gnome-shell/gnome-shell-light-solid.css +++ b/src/main/gnome-shell/gnome-shell-light-solid.css @@ -5,6 +5,29 @@ stage { color: #242424; } +.shell-link { + border-radius: 6px; + color: #3484e2; +} + +.shell-link:hover { + color: #3484e2; + background-color: rgba(52, 132, 226, 0.15); +} + +.shell-link:active { + color: #3484e2; + background-color: rgba(52, 132, 226, 0.3); +} + +.lowres-icon { + icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); +} + +.icon-dropshadow { + icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); +} + .search-provider-icon .overview-icon, .show-apps .overview-icon, .app-well-app .overview-icon, @@ -908,7 +931,7 @@ stage { .search-provider-icon:active, .search-provider-icon:checked, .list-search-result:active, .list-search-result:checked { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); transition-duration: 150ms; } @@ -943,7 +966,7 @@ stage { .app-well-app:checked .overview-icon, .grid-search-result:active .overview-icon, .grid-search-result:checked .overview-icon { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); box-shadow: none; transition-duration: 150ms; } @@ -1112,7 +1135,7 @@ StWidget.focused .app-well-app-running-dot { } .app-folder-dialog .folder-name-container .edit-folder-button:checked, .app-folder-dialog .folder-name-container .edit-folder-button:active { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); } .app-folder-dialog .icon-grid { @@ -1672,7 +1695,7 @@ StWidget.focused .app-well-app-running-dot { } .audio-selection-device:hover, .audio-selection-device:focus { - background-color: rgba(0, 0, 0, 0.35); + background-color: rgba(0, 0, 0, 0.16); } .audio-selection-device:active { @@ -1957,41 +1980,56 @@ StEntry StLabel.hint-text { max-width: 23em; } -.login-dialog { +.login-dialog, +.unlock-dialog { border: none; background-color: transparent; } -.login-dialog StEntry { +.login-dialog StEntry, +.unlock-dialog StEntry { selection-background-color: #0860f2; selected-background-color: #0860f2; selected-color: white; padding: 4px 8px; min-height: 20px; + border-radius: 9999px; + caret-color: white; background-color: rgba(0, 0, 0, 0.1); border-radius: 100px; border: none; box-shadow: none; - border-radius: 9999px; + color: white; } -.login-dialog StEntry:focus { +.login-dialog StEntry:focus, +.unlock-dialog StEntry:focus { border: none; background-color: rgba(0, 0, 0, 0.2); + color: white; } -.login-dialog StEntry:insensitive { +.login-dialog StEntry:insensitive, +.unlock-dialog StEntry:insensitive { border: none; - color: rgba(36, 36, 36, 0.45); background-color: rgba(0, 0, 0, 0.05); + color: rgba(255, 255, 255, 0.45); } -.login-dialog .modal-dialog-button-box { +.login-dialog StEntry StLabel.hint-text, +.unlock-dialog StEntry StLabel.hint-text { + color: rgba(255, 255, 255, 0.45); +} + +.login-dialog .modal-dialog-button-box, +.unlock-dialog .modal-dialog-button-box { spacing: 3px; } -.login-dialog .modal-dialog-button { +.login-dialog .modal-dialog-button, +.unlock-dialog .modal-dialog-button { padding: 0 16px; + border: none; color: white; background-color: transparent; border-color: transparent; @@ -2000,26 +2038,30 @@ StEntry StLabel.hint-text { icon-shadow: none; } -.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus { +.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus, +.unlock-dialog .modal-dialog-button:hover, +.unlock-dialog .modal-dialog-button:focus { color: white; - background-color: rgba(255, 255, 255, 0.15); + background-color: rgba(0, 0, 0, 0.12); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:active { +.login-dialog .modal-dialog-button:active, +.unlock-dialog .modal-dialog-button:active { color: white; - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(0, 0, 0, 0.2); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:insensitive { - color: rgba(255, 255, 255, 0.35); +.login-dialog .modal-dialog-button:insensitive, +.unlock-dialog .modal-dialog-button:insensitive { + color: rgba(36, 36, 36, 0.45); background-color: transparent; border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); @@ -2027,23 +2069,27 @@ StEntry StLabel.hint-text { icon-shadow: none; } -.login-dialog .modal-dialog-button:default { +.login-dialog .modal-dialog-button:default, +.unlock-dialog .modal-dialog-button:default { color: white; - background-color: #3484e2; + background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus { +.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus, +.unlock-dialog .modal-dialog-button:default:hover, +.unlock-dialog .modal-dialog-button:default:focus { color: white; border-color: rgba(0, 0, 0, 0.12); - background-color: #277ce0; + background-color: #f7f7f7; text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:default:active { +.login-dialog .modal-dialog-button:default:active, +.unlock-dialog .modal-dialog-button:default:active { color: white; background-color: #0860f2; border-color: #487afa; @@ -2051,9 +2097,10 @@ StEntry StLabel.hint-text { icon-shadow: none; } -.login-dialog .modal-dialog-button:default:insensitive { +.login-dialog .modal-dialog-button:default:insensitive, +.unlock-dialog .modal-dialog-button:default:insensitive { color: rgba(255, 255, 255, 0.45); - background-color: rgba(255, 255, 255, 0.15); + background-color: rgba(0, 0, 0, 0.12); border-color: rgba(0, 0, 0, 0.12); text-shadow: none; icon-shadow: none; @@ -2061,7 +2108,10 @@ StEntry StLabel.hint-text { .login-dialog .cancel-button, .login-dialog .switch-user-button, -.login-dialog .login-dialog-session-list-button { +.login-dialog .login-dialog-session-list-button, +.unlock-dialog .cancel-button, +.unlock-dialog .switch-user-button, +.unlock-dialog .login-dialog-session-list-button { padding: 0; border-radius: 100px; width: 32px; @@ -2072,11 +2122,15 @@ StEntry StLabel.hint-text { .login-dialog .cancel-button StIcon, .login-dialog .switch-user-button StIcon, -.login-dialog .login-dialog-session-list-button StIcon { +.login-dialog .login-dialog-session-list-button StIcon, +.unlock-dialog .cancel-button StIcon, +.unlock-dialog .switch-user-button StIcon, +.unlock-dialog .login-dialog-session-list-button StIcon { icon-size: 16px; } -.login-dialog .login-dialog-message-warning { +.login-dialog .login-dialog-message-warning, +.unlock-dialog .login-dialog-message-warning { color: rgba(255, 255, 255, 0.85); } @@ -2158,7 +2212,7 @@ StEntry StLabel.hint-text { } .login-dialog-user-list:expanded .login-dialog-user-list-item:active { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.85); } @@ -2180,24 +2234,24 @@ StEntry StLabel.hint-text { padding-left: 1em; } -.login-dialog-user-list-item:hover { - background-color: rgba(255, 255, 255, 0.15); +.login-dialog-user-list-item:focus { + background-color: rgba(0, 0, 0, 0.05) !important; +} + +.login-dialog-user-list-item:hover, .login-dialog-user-list-item:focus:hover { + background-color: rgba(0, 0, 0, 0.12) !important; color: rgba(255, 255, 255, 0.85); } -.login-dialog-user-list-item:active { - background-color: rgba(255, 255, 255, 0.3); +.login-dialog-user-list-item:active, .login-dialog-user-list-item:focus:active { + background-color: rgba(0, 0, 0, 0.2) !important; color: rgba(255, 255, 255, 0.85); } .login-dialog-user-list-item .login-dialog-timed-login-indicator { height: 2px; margin: 6px 0 0 0; - background-color: rgba(255, 255, 255, 0.85); -} - -.login-dialog-user-list-item:focus .login-dialog-timed-login-indicator { - background-color: rgba(255, 255, 255, 0.85); + background-color: rgba(0, 0, 0, 0.16) !important; } .user-widget-label { @@ -2208,7 +2262,8 @@ StEntry StLabel.hint-text { background-size: contain; color: rgba(255, 255, 255, 0.85); border-radius: 9999px; - border: 2px rgba(255, 255, 255, 0.85); + border: none; + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); } .user-icon:hover { @@ -2487,21 +2542,6 @@ StEntry StLabel.hint-text { -pie-background-color: rgba(201, 221, 253, 0.3); } -.shell-link { - border-radius: 6px; - color: #3484e2; -} - -.shell-link:hover { - color: #3484e2; - background-color: rgba(52, 132, 226, 0.15); -} - -.shell-link:active { - color: #3484e2; - background-color: rgba(52, 132, 226, 0.3); -} - .caps-lock-warning-label { text-align: center; padding-bottom: 8px; @@ -2579,37 +2619,6 @@ StEntry StLabel.hint-text { height: 96px; } -.cycler-highlight { - border: 4px solid #0860f2; -} - -.workspace-switcher-group { - padding: 8px; -} - -.workspace-switcher { - background: transparent; - border: 0px; - border-radius: 0px; - padding: 0px; - spacing: 8px; -} - -.ws-switcher-active-up, .ws-switcher-active-down { - height: 48px; - background-color: #0860f2; - color: rgba(255, 255, 255, 0.85); - background-size: 32px; - border-radius: 6px; -} - -.ws-switcher-box { - height: 48px; - border: none; - background: rgba(0, 0, 0, 0.12); - border-radius: 6px; -} - .tile-preview { background-color: rgba(8, 96, 242, 0.3); border: 1px solid #0860f2; @@ -2921,9 +2930,9 @@ StEntry StLabel.hint-text { } .window-clone-border { - border: 4px solid rgba(255, 255, 255, 0.3); + border: 4px solid rgba(255, 255, 255, 0.28); border-radius: 6px; - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); } .window-caption { @@ -2942,7 +2951,7 @@ StEntry StLabel.hint-text { border: none; color: rgba(255, 255, 255, 0.5); caret-color: rgba(255, 255, 255, 0.85); - selection-background-color: rgba(255, 255, 255, 0.3); + selection-background-color: rgba(255, 255, 255, 0.28); selected-color: rgba(255, 255, 255, 0.85); background-color: rgba(255, 255, 255, 0.12); border-radius: 8px; @@ -3046,6 +3055,37 @@ StEntry StLabel.hint-text { padding: 15px; } +.cycler-highlight { + border: 4px solid #0860f2; +} + +.workspace-switcher-group { + padding: 8px; +} + +.workspace-switcher { + background: transparent; + border: 0px; + border-radius: 0px; + padding: 0px; + spacing: 8px; +} + +.ws-switcher-active-up, .ws-switcher-active-down { + height: 48px; + background-color: #0860f2; + color: rgba(255, 255, 255, 0.85); + background-size: 32px; + border-radius: 6px; +} + +.ws-switcher-box { + height: 48px; + border: none; + background: rgba(0, 0, 0, 0.12); + border-radius: 6px; +} + #panel { background-color: #f1f1f1; /* transition from solid to transparent */ @@ -3146,7 +3186,7 @@ StEntry StLabel.hint-text { } #panel .panel-button:active, #panel .panel-button:active:hover, #panel .panel-button:overview, #panel .panel-button:overview:hover, #panel .panel-button:focus, #panel .panel-button:focus:hover, #panel .panel-button:checked, #panel .panel-button:checked:hover { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); color: #363636; box-shadow: none; } @@ -3705,8 +3745,8 @@ StEntry StLabel.hint-text { .unlock-dialog-notification-count-text { weight: bold; padding: 0 6px; - color: #f0f0f0; - background-color: rgba(255, 255, 255, 0.85); + color: white; + background-color: #0860f2; border-radius: 99px; margin-right: 12px; } diff --git a/src/main/gnome-shell/gnome-shell-light.css b/src/main/gnome-shell/gnome-shell-light.css index ce20c3d..44444df 100644 --- a/src/main/gnome-shell/gnome-shell-light.css +++ b/src/main/gnome-shell/gnome-shell-light.css @@ -5,6 +5,29 @@ stage { color: #242424; } +.shell-link { + border-radius: 6px; + color: #3484e2; +} + +.shell-link:hover { + color: #3484e2; + background-color: rgba(52, 132, 226, 0.15); +} + +.shell-link:active { + color: #3484e2; + background-color: rgba(52, 132, 226, 0.3); +} + +.lowres-icon { + icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); +} + +.icon-dropshadow { + icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); +} + .search-provider-icon .overview-icon, .show-apps .overview-icon, .app-well-app .overview-icon, @@ -908,7 +931,7 @@ stage { .search-provider-icon:active, .search-provider-icon:checked, .list-search-result:active, .list-search-result:checked { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); transition-duration: 150ms; } @@ -943,7 +966,7 @@ stage { .app-well-app:checked .overview-icon, .grid-search-result:active .overview-icon, .grid-search-result:checked .overview-icon { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); box-shadow: none; transition-duration: 150ms; } @@ -1112,7 +1135,7 @@ StWidget.focused .app-well-app-running-dot { } .app-folder-dialog .folder-name-container .edit-folder-button:checked, .app-folder-dialog .folder-name-container .edit-folder-button:active { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); } .app-folder-dialog .icon-grid { @@ -1672,7 +1695,7 @@ StWidget.focused .app-well-app-running-dot { } .audio-selection-device:hover, .audio-selection-device:focus { - background-color: rgba(0, 0, 0, 0.35); + background-color: rgba(0, 0, 0, 0.16); } .audio-selection-device:active { @@ -1957,41 +1980,56 @@ StEntry StLabel.hint-text { max-width: 23em; } -.login-dialog { +.login-dialog, +.unlock-dialog { border: none; background-color: transparent; } -.login-dialog StEntry { +.login-dialog StEntry, +.unlock-dialog StEntry { selection-background-color: #0860f2; selected-background-color: #0860f2; selected-color: white; padding: 4px 8px; min-height: 20px; + border-radius: 9999px; + caret-color: white; background-color: rgba(0, 0, 0, 0.1); border-radius: 100px; border: none; box-shadow: none; - border-radius: 9999px; + color: white; } -.login-dialog StEntry:focus { +.login-dialog StEntry:focus, +.unlock-dialog StEntry:focus { border: none; background-color: rgba(0, 0, 0, 0.2); + color: white; } -.login-dialog StEntry:insensitive { +.login-dialog StEntry:insensitive, +.unlock-dialog StEntry:insensitive { border: none; - color: rgba(36, 36, 36, 0.45); background-color: rgba(0, 0, 0, 0.05); + color: rgba(255, 255, 255, 0.45); } -.login-dialog .modal-dialog-button-box { +.login-dialog StEntry StLabel.hint-text, +.unlock-dialog StEntry StLabel.hint-text { + color: rgba(255, 255, 255, 0.45); +} + +.login-dialog .modal-dialog-button-box, +.unlock-dialog .modal-dialog-button-box { spacing: 3px; } -.login-dialog .modal-dialog-button { +.login-dialog .modal-dialog-button, +.unlock-dialog .modal-dialog-button { padding: 0 16px; + border: none; color: white; background-color: transparent; border-color: transparent; @@ -2000,26 +2038,30 @@ StEntry StLabel.hint-text { icon-shadow: none; } -.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus { +.login-dialog .modal-dialog-button:hover, .login-dialog .modal-dialog-button:focus, +.unlock-dialog .modal-dialog-button:hover, +.unlock-dialog .modal-dialog-button:focus { color: white; - background-color: rgba(255, 255, 255, 0.15); + background-color: rgba(0, 0, 0, 0.12); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:active { +.login-dialog .modal-dialog-button:active, +.unlock-dialog .modal-dialog-button:active { color: white; - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(0, 0, 0, 0.2); border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:insensitive { - color: rgba(255, 255, 255, 0.35); +.login-dialog .modal-dialog-button:insensitive, +.unlock-dialog .modal-dialog-button:insensitive { + color: rgba(36, 36, 36, 0.45); background-color: transparent; border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.05); @@ -2027,23 +2069,27 @@ StEntry StLabel.hint-text { icon-shadow: none; } -.login-dialog .modal-dialog-button:default { +.login-dialog .modal-dialog-button:default, +.unlock-dialog .modal-dialog-button:default { color: white; - background-color: #3484e2; + background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus { +.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus, +.unlock-dialog .modal-dialog-button:default:hover, +.unlock-dialog .modal-dialog-button:default:focus { color: white; border-color: rgba(0, 0, 0, 0.12); - background-color: #277ce0; + background-color: #f7f7f7; text-shadow: none; icon-shadow: none; } -.login-dialog .modal-dialog-button:default:active { +.login-dialog .modal-dialog-button:default:active, +.unlock-dialog .modal-dialog-button:default:active { color: white; background-color: #0860f2; border-color: #487afa; @@ -2051,9 +2097,10 @@ StEntry StLabel.hint-text { icon-shadow: none; } -.login-dialog .modal-dialog-button:default:insensitive { +.login-dialog .modal-dialog-button:default:insensitive, +.unlock-dialog .modal-dialog-button:default:insensitive { color: rgba(255, 255, 255, 0.45); - background-color: rgba(255, 255, 255, 0.15); + background-color: rgba(0, 0, 0, 0.12); border-color: rgba(0, 0, 0, 0.12); text-shadow: none; icon-shadow: none; @@ -2061,7 +2108,10 @@ StEntry StLabel.hint-text { .login-dialog .cancel-button, .login-dialog .switch-user-button, -.login-dialog .login-dialog-session-list-button { +.login-dialog .login-dialog-session-list-button, +.unlock-dialog .cancel-button, +.unlock-dialog .switch-user-button, +.unlock-dialog .login-dialog-session-list-button { padding: 0; border-radius: 100px; width: 32px; @@ -2072,11 +2122,15 @@ StEntry StLabel.hint-text { .login-dialog .cancel-button StIcon, .login-dialog .switch-user-button StIcon, -.login-dialog .login-dialog-session-list-button StIcon { +.login-dialog .login-dialog-session-list-button StIcon, +.unlock-dialog .cancel-button StIcon, +.unlock-dialog .switch-user-button StIcon, +.unlock-dialog .login-dialog-session-list-button StIcon { icon-size: 16px; } -.login-dialog .login-dialog-message-warning { +.login-dialog .login-dialog-message-warning, +.unlock-dialog .login-dialog-message-warning { color: rgba(255, 255, 255, 0.85); } @@ -2158,7 +2212,7 @@ StEntry StLabel.hint-text { } .login-dialog-user-list:expanded .login-dialog-user-list-item:active { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.85); } @@ -2180,24 +2234,24 @@ StEntry StLabel.hint-text { padding-left: 1em; } -.login-dialog-user-list-item:hover { - background-color: rgba(255, 255, 255, 0.15); +.login-dialog-user-list-item:focus { + background-color: rgba(0, 0, 0, 0.05) !important; +} + +.login-dialog-user-list-item:hover, .login-dialog-user-list-item:focus:hover { + background-color: rgba(0, 0, 0, 0.12) !important; color: rgba(255, 255, 255, 0.85); } -.login-dialog-user-list-item:active { - background-color: rgba(255, 255, 255, 0.3); +.login-dialog-user-list-item:active, .login-dialog-user-list-item:focus:active { + background-color: rgba(0, 0, 0, 0.2) !important; color: rgba(255, 255, 255, 0.85); } .login-dialog-user-list-item .login-dialog-timed-login-indicator { height: 2px; margin: 6px 0 0 0; - background-color: rgba(255, 255, 255, 0.85); -} - -.login-dialog-user-list-item:focus .login-dialog-timed-login-indicator { - background-color: rgba(255, 255, 255, 0.85); + background-color: rgba(0, 0, 0, 0.16) !important; } .user-widget-label { @@ -2208,7 +2262,8 @@ StEntry StLabel.hint-text { background-size: contain; color: rgba(255, 255, 255, 0.85); border-radius: 9999px; - border: 2px rgba(255, 255, 255, 0.85); + border: none; + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); } .user-icon:hover { @@ -2487,21 +2542,6 @@ StEntry StLabel.hint-text { -pie-background-color: rgba(201, 221, 253, 0.3); } -.shell-link { - border-radius: 6px; - color: #3484e2; -} - -.shell-link:hover { - color: #3484e2; - background-color: rgba(52, 132, 226, 0.15); -} - -.shell-link:active { - color: #3484e2; - background-color: rgba(52, 132, 226, 0.3); -} - .caps-lock-warning-label { text-align: center; padding-bottom: 8px; @@ -2579,37 +2619,6 @@ StEntry StLabel.hint-text { height: 96px; } -.cycler-highlight { - border: 4px solid #0860f2; -} - -.workspace-switcher-group { - padding: 8px; -} - -.workspace-switcher { - background: transparent; - border: 0px; - border-radius: 0px; - padding: 0px; - spacing: 8px; -} - -.ws-switcher-active-up, .ws-switcher-active-down { - height: 48px; - background-color: #0860f2; - color: rgba(255, 255, 255, 0.85); - background-size: 32px; - border-radius: 6px; -} - -.ws-switcher-box { - height: 48px; - border: none; - background: rgba(0, 0, 0, 0.12); - border-radius: 6px; -} - .tile-preview { background-color: rgba(8, 96, 242, 0.3); border: 1px solid #0860f2; @@ -2921,9 +2930,9 @@ StEntry StLabel.hint-text { } .window-clone-border { - border: 4px solid rgba(255, 255, 255, 0.3); + border: 4px solid rgba(255, 255, 255, 0.28); border-radius: 6px; - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); } .window-caption { @@ -2942,7 +2951,7 @@ StEntry StLabel.hint-text { border: none; color: rgba(255, 255, 255, 0.5); caret-color: rgba(255, 255, 255, 0.85); - selection-background-color: rgba(255, 255, 255, 0.3); + selection-background-color: rgba(255, 255, 255, 0.28); selected-color: rgba(255, 255, 255, 0.85); background-color: rgba(255, 255, 255, 0.12); border-radius: 8px; @@ -3046,6 +3055,37 @@ StEntry StLabel.hint-text { padding: 15px; } +.cycler-highlight { + border: 4px solid #0860f2; +} + +.workspace-switcher-group { + padding: 8px; +} + +.workspace-switcher { + background: transparent; + border: 0px; + border-radius: 0px; + padding: 0px; + spacing: 8px; +} + +.ws-switcher-active-up, .ws-switcher-active-down { + height: 48px; + background-color: #0860f2; + color: rgba(255, 255, 255, 0.85); + background-size: 32px; + border-radius: 6px; +} + +.ws-switcher-box { + height: 48px; + border: none; + background: rgba(0, 0, 0, 0.12); + border-radius: 6px; +} + #panel { background-color: rgba(255, 255, 255, 0.16); /* transition from solid to transparent */ @@ -3146,7 +3186,7 @@ StEntry StLabel.hint-text { } #panel .panel-button:active, #panel .panel-button:active:hover, #panel .panel-button:overview, #panel .panel-button:overview:hover, #panel .panel-button:focus, #panel .panel-button:focus:hover, #panel .panel-button:checked, #panel .panel-button:checked:hover { - background-color: rgba(255, 255, 255, 0.3); + background-color: rgba(255, 255, 255, 0.28); color: white; box-shadow: none; } @@ -3705,8 +3745,8 @@ StEntry StLabel.hint-text { .unlock-dialog-notification-count-text { weight: bold; padding: 0 6px; - color: rgba(240, 240, 240, 0.94); - background-color: rgba(255, 255, 255, 0.85); + color: white; + background-color: #0860f2; border-radius: 99px; margin-right: 12px; } diff --git a/src/sass/_colors.scss b/src/sass/_colors.scss index 3eb7130..5ac8310 100644 --- a/src/sass/_colors.scss +++ b/src/sass/_colors.scss @@ -10,16 +10,16 @@ $fg_color: if($variant == 'light', #242424, #dedede); $alt_fg_color: if($variant == 'light', #424242, #afafaf); $hint_fg_color: if($variant == 'light', #565656, #999999); -$track_color: if($variant == 'light', rgba(black, 0.20), rgba(white, 0.10)); -$visit_color: if($variant == 'light', rgba(black, 0.35), rgba(white, 0.08)); -$divider_color: if($variant == 'light', rgba(black, 0.12), rgba(white, 0.06)); +$track_color: if($variant == 'light', rgba(black, 0.20), rgba(white, 0.16)); +$visit_color: if($variant == 'light', rgba(black, 0.16), rgba(white, 0.12)); +$divider_color: if($variant == 'light', rgba(black, 0.12), rgba(white, 0.1)); $light_fg_color: white; $light_alt_fg_color: rgba(white, 0.85); $light_hint_fg_color: rgba(white, 0.50); $light_disabled_fg_color: rgba(white, 0.45); $light_alt_disabled_fg_color: rgba(white, 0.35); -$light_track_color: rgba(white, 0.30); +$light_track_color: rgba(white, 0.28); $light_divider_color: rgba(white, 0.15); $selected_fg_color: $light_fg_color; diff --git a/src/sass/gnome-shell/_drawing.scss b/src/sass/gnome-shell/_drawing.scss index 662caae..113a4c1 100644 --- a/src/sass/gnome-shell/_drawing.scss +++ b/src/sass/gnome-shell/_drawing.scss @@ -87,7 +87,7 @@ } -@mixin entry($t, $fc: $primary_color, $bc: $entry_shell_bg) { +@mixin entry($t, $fc: $primary_color, $tc: $fg_color, $bc: $entry_shell_bg) { // // entry // @@ -121,22 +121,25 @@ border-radius: 100px; border: none; box-shadow: none; + color: $tc; } @if $t == flat-hover { background-color: $bc; box-shadow: inset 0 0 0 1px rgba($borders_color, 0.05); + color: $tc; } @if $t == flat-focus { border: none; background-color: rgba($bc, 0.2); + color: $tc; } @if $t == flat-insensitive { border: none; - color: $disabled_fg_color; background-color: rgba($bc, 0.05); + color: rgba($tc, 0.45); } } @@ -238,7 +241,7 @@ @if $t == flat-hover { color: if($tc != $light_fg_color, $fg_color, $light_fg_color); - background-color: if($tc != $light_fg_color, $divider_color, $light_divider_color); + background-color: $divider_color; border-color: transparent; box-shadow: $shadow_0; text-shadow: none; @@ -247,7 +250,7 @@ @if $t == flat-active { color: if($tc != $light_fg_color, $fg_color, $light_fg_color); - background-color: if($tc != $light_fg_color, $track_color, $light_track_color); + background-color: $track_color; border-color: transparent; box-shadow: $shadow_0; text-shadow: none; diff --git a/src/sass/gnome-shell/widgets/_base.scss b/src/sass/gnome-shell/widgets/_base.scss index 2f5068d..f016c98 100644 --- a/src/sass/gnome-shell/widgets/_base.scss +++ b/src/sass/gnome-shell/widgets/_base.scss @@ -14,6 +14,30 @@ stage { color: $fg_color; } +// links +.shell-link { + border-radius: $bt_radius; + color: $link_color; + &:hover { + color: $link_color; + background-color: rgba($link_color, $lower_opacity / 2); + } + &:active { + color: $link_color; + background-color: rgba($link_color, $lower_opacity); + } +} + +// Outline for low res icons +.lowres-icon { + icon-shadow: 0 1px 2px rgba(black, 0.3); +} + +// Dropshadow for large icons +.icon-dropshadow { + icon-shadow: 0 1px 2px rgba(black, 0.4); +} + %icon_tile { color: $light_alt_fg_color; border-radius: $bd_radius * 1.5; diff --git a/src/sass/gnome-shell/widgets/_login-dialog.scss b/src/sass/gnome-shell/widgets/_login-dialog.scss index c203687..5c56094 100644 --- a/src/sass/gnome-shell/widgets/_login-dialog.scss +++ b/src/sass/gnome-shell/widgets/_login-dialog.scss @@ -3,7 +3,8 @@ max-width: 23em; } -.login-dialog { +.login-dialog, +.unlock-dialog { //reset border: none; background-color: transparent; @@ -14,26 +15,33 @@ selected-color: white; padding: 4px 8px; min-height: $small_size; - @include entry(flat-normal); - &:focus { @include entry(flat-focus); } - &:insensitive { @include entry(flat-insensitive); } border-radius: $circular_radius; + caret-color: $light_fg_color; + + @include entry(flat-normal, $tc: $light_fg_color); + &:focus { @include entry(flat-focus, $tc: $light_fg_color); } + &:insensitive { @include entry(flat-insensitive, $tc: $light_disabled_fg_color); } + + StLabel.hint-text { + color: $light_disabled_fg_color; + } } .modal-dialog-button-box { spacing: 3px; } .modal-dialog-button { padding: 0 16px; + border: none; @include button(flat-normal, $tc: $light_fg_color); - &:hover,&:focus { @include button(flat-hover, $tc: $light_fg_color); } + &:hover, &:focus { @include button(flat-hover, $tc: $light_fg_color); } &:active { @include button(flat-active, $tc: $light_fg_color); } - &:insensitive { @include button(flat-insensitive, $tc: $light_fg_color); } + &:insensitive { @include button(flat-insensitive, $tc: $light_disabled_fg_color); } &:default { - @include button(normal, $c: $suggested_color, $tc: $light_fg_color); - &:hover,&:focus { @include button(hover, $c: $suggested_color, $tc: $light_fg_color); } - &:active { @include button(active, $c: $suggested_color, $tc: $light_fg_color); } - &:insensitive { @include button(insensitive, $c: $light_divider_color, $tc: $light_disabled_fg_color); } + @include button(normal, $tc: $light_fg_color); + &:hover, &:focus { @include button(hover, $tc: $light_fg_color); } + &:active { @include button(active, $tc: $light_fg_color); } + &:insensitive { @include button(insensitive, $tc: $light_disabled_fg_color); } } } @@ -103,16 +111,33 @@ border-radius: $mn_radius; padding: 6px; color: $light_alt_fg_color; + &:ltr .user-widget { padding-right: 1em; } &:rtl .user-widget { padding-left: 1em; } - &:hover { background-color: $light_divider_color; color: $light_alt_fg_color; } - &:active { background-color: $light_track_color; color: $light_alt_fg_color; } + + &:focus { + background-color: if($variant == 'light', rgba(black, 0.05), rgba(white, 0.03)) !important; + + // .login-dialog-timed-login-indicator { + // background-color: $track_color; + // } + } + + &:hover, &:focus:hover { + background-color: $divider_color !important; + color: $light_alt_fg_color; + } + + &:active, &:focus:active { + background-color: $track_color !important; + color: $light_alt_fg_color; + } + .login-dialog-timed-login-indicator { height: 2px; margin: 6px 0 0 0; - background-color: $light_alt_fg_color; + background-color: $visit_color !important; } - &:focus .login-dialog-timed-login-indicator { background-color: $light_alt_fg_color; } } // .login-dialog-username, @@ -125,7 +150,8 @@ background-size: contain; color: $light_alt_fg_color; border-radius: $circular_radius; - border: 2px $light_alt_fg_color; + border: none; + box-shadow: 0 3px 8px rgba(black, 0.25); &:hover { color: $light_fg_color; diff --git a/src/sass/gnome-shell/widgets/_misc.scss b/src/sass/gnome-shell/widgets/_misc.scss index 1e07257..826491a 100644 --- a/src/sass/gnome-shell/widgets/_misc.scss +++ b/src/sass/gnome-shell/widgets/_misc.scss @@ -16,20 +16,6 @@ -pie-background-color: lighten(transparentize($primary_color, 0.7), 40%); } -// links -.shell-link { - border-radius: $bt_radius; - color: $link_color; - &:hover { - color: $link_color; - background-color: rgba($link_color, $lower_opacity / 2); - } - &:active { - color: $link_color; - background-color: rgba($link_color, $lower_opacity); - } -} - // Caps-lock warning .caps-lock-warning-label { text-align: center; @@ -101,39 +87,6 @@ height: 96px; } -// Window Cycler -.cycler-highlight { border: 4px solid $primary_color; } - -// Workspace Switcher -.workspace-switcher-group { padding: 8px; } - -.workspace-switcher-container { - @extend %osd-panel; -} - -.workspace-switcher { - background: transparent; - border: 0px; - border-radius: 0px; - padding: 0px; - spacing: 8px; -} - -.ws-switcher-active-up, .ws-switcher-active-down { - height: 48px; - background-color: $primary_color; - color: $light_alt_fg_color; - background-size: 32px; - border-radius: $bt_radius; -} - -.ws-switcher-box { - height: 48px; - border: none; - background: $divider_color; - border-radius: $bt_radius; -} - // Tiled window previews .tile-preview { background-color: rgba($primary_color, $lower_opacity); diff --git a/src/sass/gnome-shell/widgets/_overview.scss b/src/sass/gnome-shell/widgets/_overview.scss index e72930e..865de24 100644 --- a/src/sass/gnome-shell/widgets/_overview.scss +++ b/src/sass/gnome-shell/widgets/_overview.scss @@ -142,3 +142,36 @@ .list-search-provider-content { spacing: 20px; } .search-provider-icon { padding: 15px; } + +// Window Cycler +.cycler-highlight { border: 4px solid $primary_color; } + +// Workspace Switcher +.workspace-switcher-group { padding: 8px; } + +.workspace-switcher-container { + @extend %osd-panel; +} + +.workspace-switcher { + background: transparent; + border: 0px; + border-radius: 0px; + padding: 0px; + spacing: 8px; +} + +.ws-switcher-active-up, .ws-switcher-active-down { + height: 48px; + background-color: $primary_color; + color: $light_alt_fg_color; + background-size: 32px; + border-radius: $bt_radius; +} + +.ws-switcher-box { + height: 48px; + border: none; + background: $divider_color; + border-radius: $bt_radius; +} diff --git a/src/sass/gnome-shell/widgets/_screen-shield.scss b/src/sass/gnome-shell/widgets/_screen-shield.scss index a66632d..c2bf4c8 100644 --- a/src/sass/gnome-shell/widgets/_screen-shield.scss +++ b/src/sass/gnome-shell/widgets/_screen-shield.scss @@ -100,6 +100,7 @@ spacing: 6px; width: 23em; background-color: transparent; + .summary-notification-stack-scrollview { padding-top: 0; padding-bottom: 0; @@ -124,8 +125,8 @@ .unlock-dialog-notification-count-text { weight: bold; padding: 0 6px; - color: $dark_sidebar_bg; - background-color: $light_alt_fg_color; + color: white; + background-color: $primary_color; border-radius: 99px; margin-right: 12px; }