diff --git a/cinnamon-shell/upstream/cinnamon-dark.css b/cinnamon-shell/upstream/cinnamon-dark.css index a267a0733e..e7cc45ba45 100644 --- a/cinnamon-shell/upstream/cinnamon-dark.css +++ b/cinnamon-shell/upstream/cinnamon-dark.css @@ -1,46 +1,46 @@ stage { - color: rgba(255, 255, 255, 0.87); } + color: #e1e1e1; } .label-shadow { color: rgba(0, 0, 0, 0); } -.sound-button, .modal-dialog-button-box .modal-dialog-button, .notification-button, .notification-icon-button, .popup-menu #notification .notification-button, .popup-menu #notification .notification-icon-button { +.sound-button, .notification-button, .notification-icon-button, .popup-menu #notification .notification-button, .popup-menu #notification .notification-icon-button { min-height: 20px; padding: 5px 32px; transition-duration: 0; - color: rgba(255, 255, 255, 0.87); - background-color: #454545; - border: 1px solid #202020; - box-shadow: inset 0 2px 4px rgba(69, 69, 69, 0.05); } - .sound-button, .modal-dialog-button-box .modal-dialog-button, .notification-button, .notification-icon-button, .popup-menu #notification .notification-button, .popup-menu #notification .notification-icon-button { + color: #e1e1e1; + background-color: #303030; + border: 1px solid #303030; + box-shadow: inset 0 2px 4px rgba(48, 48, 48, 0.05); } + .sound-button, .notification-button, .notification-icon-button, .popup-menu #notification .notification-button, .popup-menu #notification .notification-icon-button { border-radius: 2px; } - .sound-button:focus, .modal-dialog-button-box .modal-dialog-button:focus, .notification-button:focus, .notification-icon-button:focus, .popup-menu #notification .notification-button:focus, .popup-menu #notification .notification-icon-button:focus { - color: rgba(255, 255, 255, 0.87); - background-color: #454545; + .sound-button:focus, .notification-button:focus, .notification-icon-button:focus, .popup-menu #notification .notification-button:focus, .popup-menu #notification .notification-icon-button:focus { + color: #e1e1e1; + background-color: #303030; border: 1px solid #35a854; - box-shadow: inset 0 2px 4px rgba(69, 69, 69, 0.05); } - .sound-button:hover, .modal-dialog-button-box .modal-dialog-button:hover, .notification-button:hover, .notification-icon-button:hover, .popup-menu #notification .notification-button:hover, .popup-menu #notification .notification-icon-button:hover { - color: rgba(255, 255, 255, 0.87); - background-color: #525252; - border: 1px solid #202020; - box-shadow: inset 0 2px 4px rgba(82, 82, 82, 0.05); } - .sound-button:hover:focus, .modal-dialog-button-box .modal-dialog-button:hover:focus, .notification-button:hover:focus, .notification-icon-button:hover:focus, .popup-menu #notification .notification-button:hover:focus, .popup-menu #notification .notification-icon-button:hover:focus { - color: rgba(255, 255, 255, 0.87); - background-color: #525252; + box-shadow: inset 0 2px 4px rgba(48, 48, 48, 0.05); } + .sound-button:hover, .notification-button:hover, .notification-icon-button:hover, .popup-menu #notification .notification-button:hover, .popup-menu #notification .notification-icon-button:hover { + color: #e1e1e1; + background-color: #3d3d3d; + border: 1px solid #303030; + box-shadow: inset 0 2px 4px rgba(61, 61, 61, 0.05); } + .sound-button:hover:focus, .notification-button:hover:focus, .notification-icon-button:hover:focus, .popup-menu #notification .notification-button:hover:focus, .popup-menu #notification .notification-icon-button:hover:focus { + color: #e1e1e1; + background-color: #3d3d3d; border: 1px solid #35a854; - box-shadow: inset 0 2px 4px rgba(69, 69, 69, 0.05); } - .sound-button:active, .modal-dialog-button-box .modal-dialog-button:active, .notification-button:active, .notification-icon-button:active, .popup-menu #notification .notification-button:active, .popup-menu #notification .notification-icon-button:active { + box-shadow: inset 0 2px 4px rgba(48, 48, 48, 0.05); } + .sound-button:active, .notification-button:active, .notification-icon-button:active, .popup-menu #notification .notification-button:active, .popup-menu #notification .notification-icon-button:active { color: #ffffff; background-color: #35a854; border: 1px solid #35a854; box-shadow: inset 0 2px 4px #35a854; } - .sound-button:insensitive, .modal-dialog-button-box .modal-dialog-button:insensitive, .notification-button:insensitive, .notification-icon-button:insensitive, .popup-menu #notification .notification-button:insensitive, .popup-menu #notification .notification-icon-button:insensitive { - color: rgba(255, 255, 255, 0.32); - border: 1px solid rgba(32, 32, 32, 0.55); - background-color: rgba(69, 69, 69, 0.55); - box-shadow: inset 0 2px 4px rgba(69, 69, 69, 0.05); } + .sound-button:insensitive, .notification-button:insensitive, .notification-icon-button:insensitive, .popup-menu #notification .notification-button:insensitive, .popup-menu #notification .notification-icon-button:insensitive { + color: rgba(225, 225, 225, 0.45); + border: 1px solid rgba(48, 48, 48, 0.55); + background-color: rgba(48, 48, 48, 0.55); + box-shadow: inset 0 2px 4px rgba(48, 48, 48, 0.05); } -#menu-search-entry, .popup-menu #notification StEntry { +.prompt-dialog-password-entry, .run-dialog-entry, #menu-search-entry, .popup-menu #notification StEntry { padding: 7px; caret-size: 1px; selection-background-color: #35a854; @@ -48,23 +48,28 @@ stage { transition-duration: 300ms; border-radius: 3px; color: #D3D3D3; - background-color: #404040; - border: 1px solid #202020; - box-shadow: inset 0 2px 4px rgba(64, 64, 64, 0.05); } - #menu-search-entry:focus, .popup-menu #notification StEntry:focus, #menu-search-entry:hover, .popup-menu #notification StEntry:hover { - color: rgba(255, 255, 255, 0.87); - background-color: #404040; + background-color: #303030; + border: 1px solid #303030; + box-shadow: inset 0 2px 4px rgba(48, 48, 48, 0.05); } + .prompt-dialog-password-entry:focus, .run-dialog-entry:focus, #menu-search-entry:focus, .popup-menu #notification StEntry:focus, .prompt-dialog-password-entry:hover, .run-dialog-entry:hover, #menu-search-entry:hover, .popup-menu #notification StEntry:hover { + color: #e1e1e1; + background-color: #303030; border: 1px solid #35a854; - box-shadow: inset 0 2px 4px rgba(64, 64, 64, 0.05); } - #menu-search-entry:insensitive, .popup-menu #notification StEntry:insensitive { - color: rgba(255, 255, 255, 0.32); - background-color: #383838; - border-color: 1px solid #272727; - box-shadow: inset 0 2px 4px rgba(56, 56, 56, 0.05); } - #menu-search-entry StIcon.capslock-warning, .popup-menu #notification StEntry StIcon.capslock-warning { + box-shadow: inset 0 2px 4px rgba(48, 48, 48, 0.05); } + .prompt-dialog-password-entry:insensitive, .run-dialog-entry:insensitive, #menu-search-entry:insensitive, .popup-menu #notification StEntry:insensitive { + color: rgba(225, 225, 225, 0.45); + background-color: #2a2a2a; + border-color: 1px solid #2a2a2a; + box-shadow: inset 0 2px 4px rgba(42, 42, 42, 0.05); } + .prompt-dialog-password-entry StIcon.capslock-warning, .run-dialog-entry StIcon.capslock-warning, #menu-search-entry StIcon.capslock-warning, .popup-menu #notification StEntry StIcon.capslock-warning { icon-size: 16px; warning-color: #F27835; padding: 0 4px; } + .prompt-dialog-password-entry StLabel.hint-text, .run-dialog-entry StLabel.hint-text, #menu-search-entry StLabel.hint-text, .popup-menu #notification StEntry StLabel.hint-text { + color: rgba(225, 225, 225, 0.3); } + .prompt-dialog-password-entry StIcon.peek-password, .run-dialog-entry StIcon.peek-password, #menu-search-entry StIcon.peek-password, .popup-menu #notification StEntry StIcon.peek-password { + icon-size: 16px; + color: #e1e1e1; } .notification StEntry { padding: 7px; @@ -75,8 +80,8 @@ stage { transition-duration: 300ms; border-radius: 3px; color: #c3c3c3; - background-color: rgba(109, 109, 109, 0.4); - border: 1px solid rgba(22, 22, 22, 0.4); + background-color: rgba(104, 104, 104, 0.4); + border: 1px solid rgba(17, 17, 17, 0.4); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } .notification StEntry:focus { color: #ffffff; @@ -85,8 +90,8 @@ stage { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } .notification StEntry:insensitive { color: rgba(195, 195, 195, 0.55); - background-color: rgba(109, 109, 109, 0.25); - border: 1px solid rgba(22, 22, 22, 0.4); + background-color: rgba(104, 104, 104, 0.25); + border: 1px solid rgba(17, 17, 17, 0.4); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } StScrollView.vfade { @@ -101,15 +106,15 @@ StScrollBar { min-width: 5px; min-height: 5px; } StScrollBar StBin#trough { - background-color: rgba(64, 64, 64, 0.1); + background-color: rgba(48, 48, 48, 0.1); border-radius: 8px; } StScrollBar StButton#vhandle, StScrollBar StButton#hhandle { border-radius: 2px; - background-color: rgba(118, 118, 118, 0.948); + background-color: #303030; border: 0px solid; margin: 0px; } StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover { - background-color: rgba(99, 99, 99, 0.961); } + background-color: #454545; } StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { background-color: #35a854; } @@ -130,10 +135,10 @@ StScrollBar { .popup-slider-menu-item, .slider { -slider-height: 0.3em; - -slider-background-color: #202020; - -slider-border-color: rgba(47, 47, 47, 0.3); + -slider-background-color: #303030; + -slider-border-color: rgba(34, 34, 34, 0.3); -slider-active-background-color: #35a854; - -slider-active-border-color: rgba(47, 47, 47, 0.3); + -slider-active-border-color: rgba(34, 34, 34, 0.3); -slider-border-width: 1px; -slider-handle-radius: 0.5em; height: 1em; @@ -215,34 +220,33 @@ StScrollBar { margin: 3px; } #LookingGlassDialog { - color: rgba(255, 255, 255, 0.87); - border: 1px solid #202020; + color: #e1e1e1; + border: 1px solid #303030; border-radius: 3px; - background-color: #2f2f2f; + background-color: #222222; spacing: 4px; padding: 8px; } .menu { - color: rgba(255, 255, 255, 0.87); - border: 1px solid #202020; - border-radius: 3px; - background-color: rgba(47, 47, 47, 0.99); } - .menu.top { - border-radius: 0 0 3px 3px; } - .menu.bottom { - border-radius: 3px 3px 0 0; } - .menu.left { - border-radius: 0 3px 3px 0; } - .menu.right { - border-radius: 3px 0 0 3px; } + color: #e1e1e1; + background-color: #222222; + box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); } + .menu-top { + border-radius: 0 0 6px 6px; } + .menu-bottom { + border-radius: 6px 6px 0 0; } + .menu-left { + border-radius: 0 6px 6px 0; } + .menu-right { + border-radius: 6px 0 0 6px; } .popup-sub-menu { - background-color: #404040; + background-color: #222222; box-shadow: none; } .popup-sub-menu .popup-menu-item:ltr { - padding-right: 1.75em; } + padding-left: 2.5em; } .popup-sub-menu .popup-menu-item:rtl { - padding-left: 1.75em; } + padding-right: 2.5em; } .popup-sub-menu StScrollBar { padding: 4px; } .popup-sub-menu StScrollBar StBin#trough, .popup-sub-menu StScrollBar StBin#vhandle { @@ -258,70 +262,22 @@ StScrollBar { border-right-width: 0; } .popup-menu-item:active { color: #ffffff; - background-color: #525352; } + background-color: #303030; } .popup-menu-item:insensitive { - color: rgba(255, 255, 255, 0.37); + color: rgba(225, 225, 225, 0.5); background: none; } .popup-inactive-menu-item { - color: rgba(255, 255, 255, 0.87); } + color: #e1e1e1; } .popup-inactive-menu-item:insensitive { - color: rgba(255, 255, 255, 0.32); } - -/* This is for popup menus in Cinnamon versions < 3.2 */ -.popup-menu { - color: white; - color: rgba(255, 255, 255, 0.87); } - .popup-menu-arrow { - icon-size: 16px; } - .popup-menu .popup-sub-menu { - background-color: #404040; - box-shadow: none; } - .popup-menu .popup-sub-menu .popup-menu-item:ltr { - padding-right: 1.75em; } - .popup-menu .popup-sub-menu .popup-menu-item:rtl { - padding-left: 1.75em; } - .popup-menu .popup-sub-menu StScrollBar { - padding: 4px; } - .popup-menu .popup-sub-menu StScrollBar StBin#trough, .popup-menu .popup-sub-menu StScrollBar StBin#vhandle { - border-width: 0; } - .popup-menu .popup-menu-content { - padding: 1em 0em 1em 0em; } - .popup-menu .popup-menu-item { - padding: .4em 1.75em; - spacing: 1em; - border: 1px solid transparent; - border-left-width: 0; - border-right-width: 0; } - .popup-menu .popup-menu-item:active { - color: rgba(255, 255, 255, 0.87); - border-color: rgba(255, 255, 255, 0); - background-color: rgba(255, 255, 255, 0); } - .popup-menu .popup-menu-item:insensitive { - color: rgba(255, 255, 255, 0.37); - background: none; } - .popup-menu .popup-inactive-menu-item { - color: rgba(255, 255, 255, 0.87); } - .popup-menu .popup-inactive-menu-item:insensitive { - color: rgba(255, 255, 255, 0.32); } - .popup-menu-icon { - icon-size: 16px; } - -.popup-menu-boxpointer { - -arrow-border-radius: 3px; - -arrow-background-color: #2f2f2f; - -arrow-border-width: 1px; - -arrow-border-color: #202020; - -arrow-base: 21px; - -arrow-rise: 9px; - -boxpointer-gap: 2px; } + color: rgba(225, 225, 225, 0.45); } /*Scale view context menu*/ .popup-combo-menu { - color: rgba(255, 255, 255, 0.87); - border: 1px solid #202020; + color: #e1e1e1; + border: 1px solid #303030; border-radius: 3px; - background-color: #404040; + background-color: #303030; box-shadow: none; padding: 1em 0em 1em 0em; } @@ -334,8 +290,8 @@ StScrollBar { .popup-separator-menu-item { -gradient-height: 1px; - -gradient-start: #202020; - -gradient-end: #202020; + -gradient-start: #272727; + -gradient-end: #272727; -margin-horizontal: 0; height: 1px; } @@ -343,7 +299,15 @@ StScrollBar { font-weight: normal; } .popup-device-menu-item { - spacing: .5em; } + spacing: .5em; + font-weight: bold; + color: #e1e1e1; } + .popup-device-menu-item:insensitive { + color: #e1e1e1; + spacing: 1em; } + .popup-device-menu-item .popup-inactive-menu-item { + font-weight: normal; + color: #e1e1e1; } .popup-subtitle-menu-item { font-weight: normal; } @@ -358,7 +322,7 @@ StScrollBar { /* sets the width of vertical panels */ width: 32px; /* Set the symbolic foreground color for icons, and importantly, the system tray applet icons */ - color: rgba(255, 255, 255, 0.87); } + color: #e1e1e1; } #panelLeft { spacing: 4px; } #panelLeft:dnd { @@ -453,21 +417,21 @@ StScrollBar { .panel-top, .panel-bottom, .panel-left, .panel-right { color: #ffffff; border: none; - background-color: rgba(47, 47, 47, 0.99); + background-color: rgba(26, 26, 26, 0.99); font-size: 1em; padding: 0px; } .panel-top { - box-shadow: 0 1px #202020; } + box-shadow: 0 1px #222222; } .panel-bottom { - box-shadow: 0 -1px #202020; } + box-shadow: 0 -1px #222222; } .panel-left { - box-shadow: 1px 0 #202020; } + box-shadow: 1px 0 #222222; } .panel-right { - box-shadow: -1px 0 #202020; } + box-shadow: -1px 0 #222222; } .panel-dummy { background-color: rgba(252, 65, 56, 0.5); } @@ -479,7 +443,7 @@ StScrollBar { -natural-hpadding: 3px; -minimum-hpadding: 3px; font-weight: bold; - color: rgba(255, 255, 255, 0.87); } + color: #e1e1e1; } .panel-button { -natural-hpadding: 6px; @@ -500,8 +464,8 @@ StScrollBar { spacing: 12px; } .window-caption { - background-color: #353535; - border: 1px solid #353535; + background-color: #303030; + border: 1px solid #303030; color: #c3c3c3; spacing: 8px; border-radius: 2px; @@ -532,8 +496,8 @@ StScrollBar { padding: 5px 8px; -cinnamon-caption-spacing: 4px; color: #c3c3c3; - background-color: rgba(109, 109, 109, 0.4); - border: 1px solid rgba(22, 22, 22, 0.4); + background-color: rgba(104, 104, 104, 0.4); + border: 1px solid rgba(17, 17, 17, 0.4); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } .expo-workspaces-name-entry:focus, .expo-workspaces-name-entry#selected:focus { @@ -555,7 +519,7 @@ StScrollBar { border-radius: 2px; } .expo-background { - background-color: #353535; } + background-color: #303030; } .workspace-thumbnails { spacing: 26px; } @@ -614,14 +578,16 @@ StScrollBar { margin-right: .5em; padding: .5em; min-width: 350px; - border: 1px solid #202020; - background-color: #404040; } + border: 1px solid rgba(0, 0, 0, 0); + background-color: #303030; + border-radius: 6px; } .calendar-events-no-events-button { margin: 6px 0 6px 0; padding: 6px; } .calendar-events-no-events-button:hover { - background-color: #35a854; } + background-color: #35a854; + border-radius: 6px; } .calendar-events-no-events-button:hover .calendar-events-no-events-icon, .calendar-events-no-events-button:hover .calendar-events-no-events-label { color: #ffffff; } @@ -629,12 +595,12 @@ StScrollBar { .calendar-events-no-events-icon, .calendar-events-no-events-label { font-weight: bold; - color: rgba(255, 255, 255, 0.87); + color: #e1e1e1; text-align: center; } .calendar-events-date-label { padding: .1em .1em .5em .1em; - color: rgba(255, 255, 255, 0.87); + color: #e1e1e1; font-weight: bold; text-align: center; } @@ -642,32 +608,34 @@ StScrollBar { padding: 0; } .calendar-event-button { - border: 1px solid rgba(0, 0, 0, 0); } + border: 1px solid rgba(0, 0, 0, 0); + border-radius-topright: 6px; + border-radius-bottomright: 6px; } .calendar-event-button .calendar-event-time-past { - color: rgba(255, 255, 255, 0.27); + color: rgba(225, 225, 225, 0.4); font-weight: bold; text-align: left; margin-bottom: .2em; } .calendar-event-button .calendar-event-time-present { - color: rgba(255, 255, 255, 0.87); + color: #e1e1e1; font-weight: bold; text-align: left; margin-bottom: .2em; } .calendar-event-button .calendar-event-time-present:all-day { color: #35a854; } .calendar-event-button .calendar-event-time-future { - color: rgba(255, 255, 255, 0.87); + color: #e1e1e1; font-weight: bold; text-align: left; margin-bottom: .2em; } .calendar-event-button .calendar-event-summary { - color: rgba(255, 255, 255, 0.87); + color: #e1e1e1; text-align: left; width: 200px; } .calendar-event-button .calendar-event-countdown { text-align: right; margin-bottom: .6em; - color: rgba(255, 255, 255, 0.87); } + color: #e1e1e1; } .calendar-event-button .calendar-event-countdown:soon { font-weight: bold; } .calendar-event-button .calendar-event-countdown:imminent { @@ -678,7 +646,7 @@ StScrollBar { color: #35a854; } .calendar-event-button:hover { background-color: #35a854; - border: 1px solid #202020; } + border: 1px solid #303030; } .calendar-event-button:hover .calendar-event-time-past, .calendar-event-button:hover .calendar-event-time-present, .calendar-event-button:hover .calendar-event-time-future, @@ -696,26 +664,27 @@ StScrollBar { font-weight: bold; } .calendar-event-color-strip { - width: 2px; } + width: 3px; } .calendar-today-home-button { padding: 6px; } .calendar-today-day-label { font-size: 1.75em; - color: rgba(255, 255, 255, 0.87); + color: #e1e1e1; font-weight: bold; text-align: center; padding-bottom: .1em; } .calendar-today-date-label { font-size: 1.1em; - color: rgba(255, 255, 255, 0.87); + color: #e1e1e1; font-weight: bold; text-align: center; } .calendar-today-home-button-enabled { - padding: 6px; } + padding: 6px; + border-radius: 6px; } .calendar-today-home-button-enabled:hover { background-color: #35a854; } .calendar-today-home-button-enabled:hover .calendar-today-day-label { @@ -724,7 +693,7 @@ StScrollBar { color: #ffffff; } .calendar-month-label { - color: rgba(255, 255, 255, 0.87); + color: #e1e1e1; font-weight: bold; padding: 8px 0; } @@ -778,16 +747,17 @@ StScrollBar { .calendar-day-base:hover { font-weight: bold; color: #ffffff; - background-color: #35a854; } + background-color: #35a854; + border-radius: 6px; } .calendar-day-heading { - color: rgba(255, 255, 255, 0.72); + color: rgba(225, 225, 225, 0.85); margin-top: 1em; font-size: 1.05em; } .calendar-day { border-width: 0; - color: rgba(255, 255, 255, 0.77); } + color: rgba(225, 225, 225, 0.9); } .calendar-day-top { border-top-width: 0; } @@ -796,28 +766,30 @@ StScrollBar { border-left-width: 0; } .calendar-nonwork-day { - color: rgba(255, 255, 255, 0.87); + color: #e1e1e1; background-color: transparent; font-weight: bold; } .calendar-today { - color: rgba(255, 255, 255, 0.87); + color: #e1e1e1; background-color: rgba(53, 168, 84, 0.4); - border-width: 0; } + border-width: 0; + border-radius: 6px; } .calendar-today:selected { font-weight: bold; } .calendar-not-today { - color: rgba(255, 255, 255, 0.87); } + color: #e1e1e1; + border-radius: 6px; } .calendar-not-today:selected { font-weight: bold; - background-color: rgba(255, 255, 255, 0.27); } + background-color: rgba(225, 225, 225, 0.4); } .calendar-not-today:selected:hover { font-weight: bold; - color: rgba(255, 255, 255, 0.87); } + color: #e1e1e1; } .calendar-other-month-day { - color: rgba(255, 255, 255, 0.17); + color: rgba(225, 225, 225, 0.3); opacity: 1; } .calendar-other-month-day:hover { @@ -825,30 +797,30 @@ StScrollBar { opacity: 1; } .calendar-week-number { - color: rgba(255, 255, 255, 0.72); + color: rgba(225, 225, 225, 0.85); font-size: 0.8em; margin-top: 0.8em; } #notification { - box-shadow: 0 1px 15px 4px #202020; + box-shadow: 0 1px 15px 4px #303030; border-top-color: #35a854; border-top: 4px; border-radius: 5px; - background-color: #2f2f2f; + background-color: #222222; padding: 13px; spacing-rows: 10px; spacing-columns: 10px; margin-from-right-edge-of-screen: 20px; width: 34em; - color: rgba(255, 255, 255, 0.87); } + color: #e1e1e1; } .popup-menu #notification { - color: rgba(255, 255, 255, 0.87); + color: #e1e1e1; border-image: url("dark-assets/misc/message.svg") 9 9 9 9; } .popup-menu #notification .notification-button, .popup-menu #notification .notification-icon-button { padding: 5px; } #notification.multi-line-notification { padding-bottom: 13px; - color: rgba(255, 255, 255, 0.87); } + color: #e1e1e1; } #notification-scrollview { max-height: 10em; } #notification-scrollview > .top-shadow, #notification-scrollview > .bottom-shadow { @@ -864,7 +836,7 @@ StScrollBar { .notification-with-image { min-height: 159px; - color: rgba(255, 255, 255, 0.87); } + color: #e1e1e1; } .notification-button, .notification-icon-button { padding: 5px; } @@ -877,10 +849,10 @@ StScrollBar { spacing: 16px; } .switcher-list { - color: rgba(255, 255, 255, 0.87); - border: 1px solid #202020; - background-color: #2f2f2f; - border-radius: 3px; + color: #e1e1e1; + border: 1px solid #303030; + background-color: #1a1a1a; + border-radius: 6px; padding: 20px; } .switcher-list > StBoxLayout { padding: 4px; } @@ -888,13 +860,12 @@ StScrollBar { spacing: 8px; } .switcher-list .item-box { padding: 8px; - border-radius: 2px; } + border-radius: 6px; } .switcher-list .item-box:outlined { padding: 8px; border: 1px solid #35a854; } .switcher-list .item-box:selected { - color: #ffffff; - background-color: #35a854; + background-color: #393939; border: 0px solid #35a854; } .switcher-list .thumbnail { width: 256px; } @@ -907,7 +878,7 @@ StScrollBar { .switcher-arrow { border-color: rgba(0, 0, 0, 0); - color: rgba(255, 255, 255, 0.87); } + color: #e1e1e1; } .switcher-arrow:highlighted { border-color: rgba(0, 0, 0, 0); color: #ffffff; } @@ -934,137 +905,13 @@ StScrollBar { .ripple-box:rtl { background-image: url("common-assets/misc/corner-ripple.svg"); } -.lightbox { - background-color: rgba(0, 0, 0, 0.4); } - -.flashspot { - background-color: white; } - -.modal-dialog { - background-color: #2f2f2f; - border: 1px solid #202020; - border-radius: 3px; - padding: 5px 10px; } - .modal-dialog > StBoxLayout:first-child { - padding: 10px; } - .modal-dialog-button-box { - spacing: 0; - margin: 0px; - padding: 10px; - border: none; - background-color: #2f2f2f; } - .modal-dialog-button-box .modal-dialog-button { - padding-top: 0; - padding-bottom: 0; - height: 30px; } - .modal-dialog .confirm-dialog-title { - text-align: center; - font-weight: bold; - font-size: 1.3em; - padding-bottom: 12px; } - -.run-dialog { - padding: 10px 15px 10px 15px; - border: 1px solid #202020; - border-radius: 3px; - background-color: #2f2f2f; } - .run-dialog > * { - padding: 0; } - .run-dialog-label { - font-size: 1.3em; - font-weight: bold; - color: rgba(255, 255, 255, 0.87); - padding-bottom: 15px; - text-align: center; } - .run-dialog-description { - color: rgba(255, 255, 255, 0.87); - padding-top: 15px; - text-align: center; } - .run-dialog-description.error { - color: #FC4138; } - .run-dialog-completion-box { - padding-top: 5px; - padding-left: 15px; - font-size: 1em; } - .run-dialog-entry { - width: 21em; - height: 1.2em; - padding: 7px; - border-radius: 3px; - caret-color: #c3c3c3; - selected-color: #ffffff; - selection-background-color: #35a854; - color: #c3c3c3; - background-color: rgba(109, 109, 109, 0.4); - border: 1px solid rgba(22, 22, 22, 0.4); - box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } - .run-dialog-entry:focus { - color: rgba(255, 255, 255, 0.87); - background-color: #404040; - border: 1px solid #35a854; - box-shadow: inset 0 2px 4px rgba(64, 64, 64, 0.05); } - .run-dialog .modal-dialog-button-box { - border: none; - box-shadow: none; - background: none; } - -/* CinnamonMountOperation Dialogs */ -.cinnamon-mount-operation-icon { - icon-size: 48px; } - -.mount-password-reask { - color: #F27835; } - -.show-processes-dialog, -.mount-question-dialog { - spacing: 24px; } - .show-processes-dialog-subject, - .mount-question-dialog-subject { - padding-top: 10px; - padding-left: 17px; - padding-bottom: 6px; } - .show-processes-dialog-subject:rtl, - .mount-question-dialog-subject:rtl { - padding-left: 0px; - padding-right: 17px; } - .show-processes-dialog-description, - .mount-question-dialog-description { - padding-left: 17px; - width: 28em; } - .show-processes-dialog-description:rtl, - .mount-question-dialog-description:rtl { - padding-right: 17px; } - -.show-processes-dialog-app-list { - max-height: 200px; - padding-top: 24px; - padding-left: 49px; - padding-right: 32px; } - .show-processes-dialog-app-list:rtl { - padding-right: 49px; - padding-left: 32px; } - .show-processes-dialog-app-list-item { - color: #ccc; } - .show-processes-dialog-app-list-item:hover { - color: white; } - .show-processes-dialog-app-list-item:ltr { - padding-right: 1em; } - .show-processes-dialog-app-list-item:rtl { - padding-left: 1em; } - .show-processes-dialog-app-list-item-icon:ltr { - padding-right: 17px; } - .show-processes-dialog-app-list-item-icon:rtl { - padding-left: 17px; } - .show-processes-dialog-app-list-item-name { - font-size: 1.1em; } - .magnifier-zoom-region { border: 2px solid maroon; } .magnifier-zoom-region .full-screen { border-width: 0px; } #keyboard { - background-color: #353535; + background-color: #303030; border-width: 0; border-top-width: 1px; border-color: rgba(0, 0, 0, 0.4); } @@ -1084,26 +931,26 @@ StScrollBar { border-radius: 3px; box-shadow: none; color: #c3c3c3; - border: 1px solid #202020; - background-color: rgba(109, 109, 109, 0.4); } + border: 1px solid #303030; + background-color: rgba(104, 104, 104, 0.4); } .keyboard-key:hover { color: #c3c3c3; - border: 1px solid rgba(2, 2, 2, 0.4); - background-color: rgba(127, 127, 127, 0.5); } + border: 1px solid rgba(0, 0, 0, 0.4); + background-color: rgba(122, 122, 122, 0.5); } .keyboard-key:active, .keyboard-key:checked { color: #ffffff; border: 1px solid #35a854; background-color: #35a854; } .keyboard-key:grayed { - color: #606060; - border: 1px solid rgba(2, 2, 2, 0.4); - background-color: rgba(109, 109, 109, 0.25); } + color: #5c5c5c; + border: 1px solid rgba(0, 0, 0, 0.4); + background-color: rgba(104, 104, 104, 0.25); } .keyboard-subkeys { color: #c3c3c3; padding: 5px; -arrow-border-radius: 2px; - -arrow-background-color: #353535; + -arrow-background-color: #303030; -arrow-border-width: 1px; -arrow-border-color: rgba(0, 0, 0, 0.4); -arrow-base: 20px; @@ -1113,15 +960,17 @@ StScrollBar { .menu-favorites-box { padding: 10px; transition-duration: 300; - background-color: #333333; - border: 1px solid #202020; } + background-color: #303030; + border: 1px solid rgba(0, 0, 0, 0); + border-radius: 6px; } .menu-favorites-button { padding: .9em 1em; border: 1px solid rgba(0, 0, 0, 0); - border-radius: 2px; } + border-radius: 6px; } .menu-favorites-button:hover { - background-color: #525352; } + background-color: #454545; + border: 1px solid rgba(0, 0, 0, 0); } .menu-places-box { padding: 10px; @@ -1144,8 +993,9 @@ StScrollBar { .menu-application-button-selected { padding: 7px; color: #ffffff; - background-color: #525352; - border: 1px solid #202020; } + background-color: #303030; + border: 1px solid rgba(0, 0, 0, 0); + border-radius: 6px; } .menu-application-button-selected:highlighted { font-weight: bold; } .menu-application-button-label:ltr { @@ -1159,15 +1009,12 @@ StScrollBar { .menu-category-button-selected { padding: 7px; color: #ffffff; - background-color: #525352; - border: 1px solid #202020; } - .menu-category-button:hover { - background-color: #3d3d3d; - border: 1px solid #292929; - border-radius: 0px; } + background-color: #303030; + border: 1px solid rgba(0, 0, 0, 0); + border-radius: 6px; } .menu-category-button-greyed { padding: 7px; - color: rgba(255, 255, 255, 0.32); + color: rgba(225, 225, 225, 0.45); border: 1px solid rgba(0, 0, 0, 0); } .menu-category-button-label:ltr { padding-left: 5px; } @@ -1199,49 +1046,14 @@ StScrollBar { width: 250px; min-height: 16px; font-weight: normal; - caret-color: rgba(255, 255, 255, 0.87); } + caret-color: #e1e1e1; + border-radius: 6px; } .menu-search-entry-icon { icon-size: 1em; - color: rgba(255, 255, 255, 0.87); } + color: #e1e1e1; } /* Context menu (at the moment only for favorites) */ -.info-osd { - text-align: center; - font-weight: bold; - spacing: 1em; - padding: 16px; - color: rgba(255, 255, 255, 0.87); - border: 1px solid #202020; - border-radius: 5px; - background-color: #2f2f2f; } - -.restart-osd { - font-size: 1.6em; } - -.workspace-osd { - font-size: 4em; } - -.osd-window { - text-align: center; - font-weight: bold; - spacing: 1em; - padding: 20px; - color: rgba(255, 255, 255, 0.87); - background-color: #2f2f2f; - border: 1px solid #202020; - border-radius: 5px; } - .osd-window .osd-monitor-label { - font-size: 3em; } - .osd-window .level { - padding: 0; - height: 0.7em; - background-color: rgba(0, 0, 0, 0.5); - border-radius: 2px; } - .osd-window .level-bar { - border-radius: 2px; - background-color: #35a854; } - .window-list-box { spacing: 6px; padding-left: 10px; @@ -1267,7 +1079,7 @@ StScrollBar { padding-left: 8px; padding-right: 8px; transition-duration: 100; - color: rgba(255, 255, 255, 0.67); } + color: rgba(225, 225, 225, 0.8); } .window-list-item-box.top, .window-list-item-box.bottom { border-bottom-width: 2px; } .window-list-item-box.top StLabel, .window-list-item-box.bottom StLabel { @@ -1285,12 +1097,12 @@ StScrollBar { .window-list-item-box.left StBin { padding-left: 1px; } .window-list-item-box:hover, .window-list-item-box:groupFocus { - color: rgba(255, 255, 255, 0.87); - background-color: rgba(255, 255, 255, 0.07); } + color: #e1e1e1; + background-color: rgba(225, 225, 225, 0.2); } .window-list-item-box:active, .window-list-item-box:checked, .window-list-item-box:focus, .window-list-item-box:running { - color: rgba(255, 255, 255, 0.87); + color: #e1e1e1; border-color: #35a854; - background-color: rgba(255, 255, 255, 0.07); } + background-color: rgba(225, 225, 225, 0.2); } .window-list-item-box .progress { background-color: rgba(53, 168, 84, 0.8); } @@ -1301,9 +1113,9 @@ StScrollBar { .window-list-preview { spacing: 6px; - color: rgba(255, 255, 255, 0.87); - border: 1px solid #202020; - background-color: #2f2f2f; + color: #e1e1e1; + border: 1px solid rgba(0, 0, 0, 0); + background-color: #222222; border-radius: 3px; padding: 6px 12px 12px 12px; font-size: 1em; } @@ -1321,7 +1133,7 @@ StScrollBar { padding-left: 8px; padding-right: 8px; transition-duration: 100; - color: rgba(255, 255, 255, 0.67); } + color: rgba(225, 225, 225, 0.8); } .grouped-window-list-item-box.top, .grouped-window-list-item-box.bottom { border-bottom-width: 2px; } .grouped-window-list-item-box.top StLabel, .grouped-window-list-item-box.bottom StLabel { @@ -1339,10 +1151,10 @@ StScrollBar { .grouped-window-list-item-box.left StBin { padding-left: 1px; } .grouped-window-list-item-box:hover, .grouped-window-list-item-box:focus { - color: rgba(255, 255, 255, 0.87); - background-color: rgba(255, 255, 255, 0.17); } + color: #e1e1e1; + background-color: rgba(225, 225, 225, 0.3); } .grouped-window-list-item-box:active, .grouped-window-list-item-box:checked { - color: rgba(255, 255, 255, 0.87); + color: #e1e1e1; border-color: #35a854; } .grouped-window-list-item-box .progress { background-color: rgba(53, 168, 84, 0.8); } @@ -1372,9 +1184,9 @@ StScrollBar { background: rgba(255, 52, 52, 0.3); } .grouped-window-list-thumbnail-menu { - color: rgba(255, 255, 255, 0.87); - border: 1px solid #202020; - background-color: #2f2f2f; + color: #e1e1e1; + border: 1px solid rgba(0, 0, 0, 0); + background-color: #222222; border-radius: 3px; padding: 0px; } .grouped-window-list-thumbnail-menu > StBoxLayout { @@ -1451,10 +1263,10 @@ StScrollBar { .sound-player > StBoxLayout:first-child StButton:small StIcon { icon-size: 12px; } .sound-player > StBoxLayout:first-child StButton:small:hover { - color: rgba(255, 255, 255, 0.87); - background-color: #525252; - border: 1px solid #202020; - box-shadow: inset 0 2px 4px rgba(82, 82, 82, 0.05); } + color: #e1e1e1; + background-color: #3d3d3d; + border: 1px solid #303030; + box-shadow: inset 0 2px 4px rgba(61, 61, 61, 0.05); } .sound-player > StBoxLayout:first-child StButton:small:active { color: #ffffff; background-color: #35a854; @@ -1468,23 +1280,23 @@ StScrollBar { width: 290px; padding: 15px; spacing: 0.5em; - background: rgba(47, 47, 47, 0.9); - border-top: 1px solid #202020; - color: rgba(255, 255, 255, 0.87); } + background: rgba(34, 34, 34, 0.9); + border-top: 1px solid #303030; + color: #e1e1e1; } .sound-player-overlay StButton { width: 22px; height: 13px; padding: 5px; - color: rgba(255, 255, 255, 0.87); + color: #e1e1e1; border-radius: 2px; border: 1px solid transparent; } .sound-player-overlay StButton StIcon { icon-size: 16px; } .sound-player-overlay StButton:hover { - color: rgba(255, 255, 255, 0.87); - background-color: #525252; - border: 1px solid #202020; - box-shadow: inset 0 2px 4px rgba(82, 82, 82, 0.05); } + color: #e1e1e1; + background-color: #3d3d3d; + border: 1px solid #303030; + box-shadow: inset 0 2px 4px rgba(61, 61, 61, 0.05); } .sound-player-overlay StButton:active { color: #ffffff; background-color: #35a854; @@ -1500,72 +1312,52 @@ StScrollBar { padding: 0; border: none; -slider-height: 0.5em; - -slider-background-color: #222222; + -slider-background-color: #151515; -slider-border-color: rgba(0, 0, 0, 0); -slider-active-background-color: #35a854; -slider-active-border-color: rgba(0, 0, 0, 0); -slider-border-width: 0px; -slider-handle-radius: 0px; } -#workspaceSwitcher { - spacing: 0px; - padding: 3px; } - -/* Controls the styling when using the "Simple buttons" option */ -.workspace-switcher { - padding-left: 3px; - padding-right: 3px; } - .panel-left .workspace-switcher, .panel-right .workspace-switcher { - padding: 0; } +.panel-top .workspace-switcher, +.panel-bottom .workspace-switcher { + padding: 0 4px; } .workspace-button { - border: 1px solid rgba(0, 0, 0, 0.4); - background-color: rgba(0, 0, 0, 0.2); - width: 20px; - height: 14px; - color: rgba(255, 255, 255, 0.45); - padding: 3px; - padding-top: 4px; - transition-duration: 200; } + border: 1px solid #303030; + width: 2em; + color: rgba(225, 225, 225, 0.45); + background-color: rgba(225, 225, 225, 0.05); } .workspace-button.vertical { - height: 1.5em; - width: 24px; - padding: 0; - padding-top: 3px; - padding-bottom: 3px; } + height: 2em; } .workspace-button:outlined { - background-color: #35a854; - color: #ffffff; } + background-color: #303030; + color: #e1e1e1; } .workspace-button:outlined:hover { - background-color: rgba(53, 168, 84, 0.7); - color: #ffffff; } + background-color: #454545; } .workspace-button:hover { - background-color: rgba(255, 255, 255, 0.07); - color: #ffffff; } + background-color: #303030; } + .workspace-button:shaded { + background-color: #151515; } -/* Controls the style when using the "Visual representation" option */ .workspace-graph { - padding: 3px; - spacing: 6px; } - -.workspace-graph .workspace { - border: 1px solid rgba(0, 0, 0, 0.4); - background-color: rgba(0, 0, 0, 0.2); } - -.workspace-graph .workspace:active { - border: 1px solid #35a854; } - -.workspace-graph .workspace .windows { - -active-window-background: #555555; - -active-window-border: rgba(0, 0, 0, 0.8); - -inactive-window-background: #555555; - -inactive-window-border: rgba(0, 0, 0, 0.8); } - -.workspace-graph .workspace:active .windows { - -active-window-background: #6f6f6f; - -active-window-border: rgba(0, 0, 0, 0.8); - -inactive-window-background: #3c3c3c; - -inactive-window-border: rgba(0, 0, 0, 0.8); } + padding: 4px; + spacing: 4px; } + .workspace-graph .workspace { + border: 1px solid rgba(225, 225, 225, 0.2); + background-color: #222222; } + .workspace-graph .workspace:active { + border-color: #35a854; } + .workspace-graph .workspace:active .windows { + -active-window-background: rgba(255, 255, 255, 0.3); + -active-window-border: rgba(255, 255, 255, 0.35); + -inactive-window-background: rgba(255, 255, 255, 0.1); + -inactive-window-border: rgba(255, 255, 255, 0.15); } + .workspace-graph .workspace .windows { + -active-window-background: rgba(255, 255, 255, 0.3); + -active-window-border: rgba(255, 255, 255, 0.35); + -inactive-window-background: rgba(255, 255, 255, 0.1); + -inactive-window-border: rgba(255, 255, 255, 0.15); } .panel-launchers { padding-left: 7px; @@ -1576,7 +1368,7 @@ StScrollBar { padding-bottom: 2px; transition-duration: 200; } .panel-launchers .launcher:hover { - background-color: #525352; } + background-color: #303030; } .panel-launchers.vertical { padding-top: 2px; padding-bottom: 2px; @@ -1599,27 +1391,23 @@ StScrollBar { .applet-separator-line { width: 1px; - background: rgba(255, 255, 255, 0.12); } + background: #303030; } .applet-separator-line-vertical { height: 1px; - background: rgba(255, 255, 255, 0.12); } + background: #303030; } .applet-box { - padding-left: 4px; - padding-right: 4px; - spacing: 4px; - color: rgba(255, 255, 255, 0.87); + padding: 0 5px; + spacing: 5px; + color: #e1e1e1; text-shadow: none; transition-duration: 100; text-align: center; } .applet-box.vertical { - padding-left: 0px; - padding-right: 0px; - padding-top: 3px; - padding-bottom: 3px; } + padding: 5px 0; } .applet-box:hover, .applet-box:checked { color: #ffffff; - background-color: #525352; } + background-color: #303030; } .applet-box:highlight { background-image: none; border-image: none; @@ -1627,7 +1415,7 @@ StScrollBar { .applet-label { font-weight: bold; - color: rgba(255, 255, 255, 0.87); } + color: #e1e1e1; } .applet-label:hover, .applet-label:checked, .applet-box:hover .applet-label, .applet-box:checked .applet-label { color: #ffffff; text-shadow: none; } @@ -1640,47 +1428,46 @@ StScrollBar { text-shadow: none; } .user-icon { - width: 32px; - height: 32px; - background-color: transparent; - border: none; - border-radius: 0; } + border: 1px solid rgba(225, 225, 225, 0.5); + border-radius: 99px; } .user-label { - color: rgba(255, 255, 255, 0.87); + color: #e1e1e1; font-size: 1em; font-weight: bold; margin: 0px; } .applet-cornerbar { width: 8px; - background-color: rgba(255, 255, 255, 0.12); } - .applet-cornerbar-box { - padding: 4px 4px; } - .applet-cornerbar-box:hover > .applet-cornerbar { - background-color: rgba(255, 255, 255, 0.22); } + background-color: #303030; + border: 1px solid #303030; } .applet-cornerbar.vertical { height: 8px; } + .applet-cornerbar-box { + background: none; } + +.applet-cornerbar-box:hover > .applet-cornerbar { + background-color: #4a4a4a; } .desklet { - color: rgba(255, 255, 255, 0.87); } + color: #e1e1e1; } .desklet:highlight { background-color: rgba(252, 65, 56, 0.5); } .desklet-with-borders { - border: 1px solid #202020; + border: 1px solid #303030; border-radius: 5px; - background-color: #2f2f2f; - color: rgba(255, 255, 255, 0.87); + background-color: #222222; + color: #e1e1e1; padding: 12px; padding-bottom: 16px; } .desklet-with-borders:highlight { background-color: rgba(252, 65, 56, 0.5); } .desklet-with-borders-and-header { - border: 1px solid #202020; + border: 1px solid #303030; border-top-width: 0; border-radius: 0 0 5px 5px; - background-color: #2f2f2f; - color: rgba(255, 255, 255, 0.87); + background-color: #222222; + color: #e1e1e1; border-radius: 0; border-radius-topleft: 0; border-radius-topright: 0; @@ -1689,10 +1476,10 @@ StScrollBar { .desklet-with-borders-and-header:highlight { background-color: rgba(252, 65, 56, 0.5); } .desklet-header { - border: 1px solid #202020; + border: 1px solid #303030; border-radius: 5px 5px 0 0; - background-color: #272727; - color: rgba(255, 255, 255, 0.87); + background-color: #1a1a1a; + color: #e1e1e1; font-size: 1em; padding: 12px; padding-bottom: 6px; } @@ -1701,10 +1488,10 @@ StScrollBar { background-color: rgba(53, 168, 84, 0.3); } .photoframe-box { - border: 1px solid #202020; + border: 1px solid #303030; border-radius: 5px; - background-color: #2f2f2f; - color: rgba(255, 255, 255, 0.87); + background-color: #222222; + color: #e1e1e1; padding: 12px; padding-bottom: 16px; } @@ -1751,3 +1538,302 @@ StScrollBar { border: 0px; background-color: rgba(0, 0, 0, 0); border-radius: 0px; } + +.prompt-dialog-error-label, .prompt-dialog-info-label, .prompt-dialog-null-label, .run-dialog-description, .message-dialog-content .message-dialog-caption, .dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description { + font-weight: 400; + font-size: 0.818em; } + +.message-dialog-content .message-dialog-title, .dialog .confirm-dialog-title { + font-weight: 800; + font-size: 1.364em; } + +.workspace-switch-osd, .media-keys-osd, .message-dialog-content .message-dialog-title.lightweight { + font-weight: 700; + font-size: 1.182em; } + +.polkit-dialog-user-combo, .dialog-list .dialog-list-title { + font-weight: 700; + font-size: 1em; } + +.audio-device-selection-dialog .audio-selection-box .audio-selection-device, .polkit-dialog-user-combo { + border: 1px solid #222222; + color: #e1e1e1; + background-color: #222222; } + .audio-device-selection-dialog .audio-selection-box .audio-selection-device:focus, .polkit-dialog-user-combo:focus { + border: 1px solid #222222; + color: #e1e1e1; + background-color: #222222; + border: 1px solid #6f6f6f; } + .audio-device-selection-dialog .audio-selection-box .audio-selection-device:hover, .polkit-dialog-user-combo:hover { + border: 1px solid #222222; + color: #e1e1e1; + background-color: #3c3c3c; } + .audio-device-selection-dialog .audio-selection-box .audio-selection-device:insensitive, .polkit-dialog-user-combo:insensitive { + border: 1px solid #222222; + color: rgba(225, 225, 225, 0.5); + background-color: #222222; } + .audio-device-selection-dialog .audio-selection-box .audio-selection-device:selected, .polkit-dialog-user-combo:selected, .audio-device-selection-dialog .audio-selection-box .audio-selection-device:active, .polkit-dialog-user-combo:active { + border: 1px solid #222222; + color: #e1e1e1; + background-color: #2f2f2f; } + .audio-device-selection-dialog .audio-selection-box .audio-selection-device:checked, .polkit-dialog-user-combo:checked { + border: 1px solid #222222; + color: #e1e1e1; + background-color: #2f2f2f; } + +.dialog .dialog-button, .dialog .dialog-button:destructive-action, .dialog .dialog-button:default { + font-weight: bold; + padding: 12px; + border-radius: 18px; + border: 1px solid #303030; + color: #e1e1e1; + background-color: #303030; } + .dialog .dialog-button:focus { + border: 1px solid #303030; + color: #e1e1e1; + background-color: #303030; + border: 1px solid #7d7d7d; } + .dialog .dialog-button:hover { + border: 1px solid #303030; + color: #e1e1e1; + background-color: #4a4a4a; } + .dialog .dialog-button:active { + border: 1px solid #303030; + color: #e1e1e1; + background-color: #3d3d3d; } + .dialog .dialog-button:checked { + border: 1px solid #303030; + color: #e1e1e1; + background-color: #3d3d3d; } + .dialog .dialog-button:insensitive { + border: 1px solid #303030; + color: rgba(225, 225, 225, 0.5); + background-color: #282828; } + +.dialog .dialog-button:default { + border: 1px solid #35a854; + color: #e1e1e1; + background-color: #35a854; } + .dialog .dialog-button:focus:default { + border: 1px solid #35a854; + color: #e1e1e1; + background-color: #35a854; + border: 1px solid #98deab; } + .dialog .dialog-button:hover:default { + border: 1px solid #35a854; + color: #e1e1e1; + background-color: #4ac66b; } + .dialog .dialog-button:active:default { + border: 1px solid #35a854; + color: #e1e1e1; + background-color: #3bbb5e; } + .dialog .dialog-button:checked:default { + border: 1px solid #35a854; + color: #e1e1e1; + background-color: #3bbb5e; } + .dialog .dialog-button:insensitive:default { + border-color: #303030; + border: 1px solid #303030; + color: rgba(225, 225, 225, 0.5); + background-color: #282828; } + +.dialog .dialog-button:destructive-action { + border: 1px solid #c01c28; + color: #e1e1e1; + background-color: #c01c28; } + .dialog .dialog-button:focus:destructive-action { + border: 1px solid #c01c28; + color: #e1e1e1; + background-color: #c01c28; + border: 1px solid #ee878f; } + .dialog .dialog-button:hover:destructive-action { + border: 1px solid #c01c28; + color: #e1e1e1; + background-color: #e12e3b; } + .dialog .dialog-button:active:destructive-action { + border: 1px solid #c01c28; + color: #e1e1e1; + background-color: #d61f2d; } + .dialog .dialog-button:checked:destructive-action { + border: 1px solid #c01c28; + color: #e1e1e1; + background-color: #d61f2d; } + .dialog .dialog-button:insensitive:destructive-action { + border-color: #303030; + border: 1px solid #303030; + color: rgba(225, 225, 225, 0.5); + background-color: #282828; } + +.dialog { + background-color: #222222; + border-radius: 18px; + border: 1px solid #303030; + padding: 18px; } + .dialog .dialog-content-box { + margin-top: 8px; + margin-bottom: 16px; + spacing: 32px; + max-width: 28em; } + .dialog .confirm-dialog-title { + text-align: center; } + +.dialog-list { + spacing: 18px; } + .dialog-list .dialog-list-title { + text-align: center; } + .dialog-list .dialog-list-scrollview { + max-height: 200px; } + .dialog-list .dialog-list-box { + spacing: 1em; } + .dialog-list .dialog-list-box .dialog-list-item { + spacing: 1em; } + .dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-title { + font-weight: bold; } + .dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description { + color: #d4d4d4; } + +.end-session-dialog { + width: 40em; } + .end-session-dialog .dialog-content-box { + spacing: 0; } + .end-session-dialog .dialog-list { + spacing: 0; } + .end-session-dialog .dialog-list .dialog-list-title { + color: #F27835; + background-color: tranparentize(#F27835, 0.9); + padding: 9px; + border-radius: 20px; + margin: 4px 0; } + +.message-dialog-content { + spacing: 18px; } + .message-dialog-content .message-dialog-title { + text-align: center; } + .message-dialog-content .message-dialog-description { + text-align: center; } + .message-dialog-content .message-dialog-caption { + text-align: center; } + +.run-dialog .dialog-content-box { + margin: 4px; } + +.run-dialog-description { + text-align: center; + color: #aeaeae; } + .run-dialog-description.error { + color: #FC4138; } + +.run-dialog-completion-box { + padding-top: 6px; + padding-left: 12px; } + +.run-dialog-entry { + width: 20em; + height: 1.2em; } + +.prompt-dialog { + width: 28em; } + .prompt-dialog .dialog-content-box { + spacing: 16px; + margin-bottom: 12px; } + .prompt-dialog-password-entry { + width: 20em; } + .prompt-dialog-password-layout { + spacing: 8px; } + .prompt-dialog-error-label, .prompt-dialog-info-label, .prompt-dialog-null-label { + text-align: center; } + .prompt-dialog-error-label { + color: #FC4138; } + +.polkit-dialog-user-layout { + text-align: center; + spacing: 2px; } + +.polkit-dialog-user-combo { + border-radius: 6px; + padding: 6px 36px; } + .polkit-dialog-user-combo:insensitive { + color: #e1e1e1; } + +.audio-device-selection-dialog { + min-width: 24em; } + .audio-device-selection-dialog .audio-selection-box { + spacing: 12px; } + .audio-device-selection-dialog .audio-selection-box .audio-selection-device { + border-radius: 20px; } + .audio-device-selection-dialog .audio-selection-box .audio-selection-device .audio-selection-device-box { + padding: 12px; + spacing: 12px; } + .audio-device-selection-dialog .audio-selection-box .audio-selection-device .audio-selection-device-icon { + icon-size: 64px; } + +.workspace-switch-osd, .info-osd, .media-keys-osd { + background-color: #222222; + border: 1px solid #303030; + border-radius: 20px; + text-align: center; + padding: 24px; } + +.media-keys-osd { + margin-bottom: 1em; + border-radius: 20px; + font-weight: bold; + spacing: 12px; + padding: 12px 24px; } + .media-keys-osd > * { + spacing: 12px; } + .media-keys-osd StIcon { + icon-size: 32px; } + .media-keys-osd StLabel:ltr { + margin-right: 6px; } + .media-keys-osd StLabel:rtl { + margin-left: 6px; } + .media-keys-osd .level { + min-width: 160px; + -barlevel-height: 6px; + -barlevel-background-color: #303030; + -barlevel-active-background-color: #e1e1e1; + -barlevel-amplify-color: #F27835; + -barlevel-amplify-separator-width: 3px; } + .media-keys-osd .level:ltr { + margin-right: 6px; } + .media-keys-osd .level:rtl { + margin-left: 6px; } + .media-keys-osd .level-bar { + border-radius: 20px; + background-color: #e1e1e1; } + +.info-osd { + font-size: 1.2em; + font-weight: 700; + text-align: center; } + +.workspace-switch-osd { + min-width: 140px; + margin-bottom: 1em; + border-radius: 20px; + font-weight: bold; + padding: 12px 36px 0 36px; } + .workspace-switch-osd-indicator-box { + spacing: 12px; } + .workspace-switch-osd-indicator { + background-color: rgba(225, 225, 225, 0.5); + padding: 3px; + margin: 15px; + border-radius: 36px; } + .workspace-switch-osd-indicator:active { + background-color: #35a854; + padding: 6px; + margin: 12px; } + +.monitor-label { + border-radius: 0; + color: black; + padding: 12px; + text-align: center; } + +.resize-popup { + color: #e1e1e1; + background-color: #222222; + border-radius: 6px; + padding: 12px; } diff --git a/cinnamon-shell/upstream/cinnamon.css b/cinnamon-shell/upstream/cinnamon.css index 1c5b372a90..6c3f7509f5 100644 --- a/cinnamon-shell/upstream/cinnamon.css +++ b/cinnamon-shell/upstream/cinnamon.css @@ -4,43 +4,43 @@ stage { .label-shadow { color: rgba(0, 0, 0, 0); } -.sound-button, .modal-dialog-button-box .modal-dialog-button, .notification-button, .notification-icon-button, .popup-menu #notification .notification-button, .popup-menu #notification .notification-icon-button { +.sound-button, .notification-button, .notification-icon-button, .popup-menu #notification .notification-button, .popup-menu #notification .notification-icon-button { min-height: 20px; padding: 5px 32px; transition-duration: 0; color: #303030; - background-color: #ededed; + background-color: #b0b0b0; border: 1px solid #b5b5b5; - box-shadow: inset 0 2px 4px rgba(237, 237, 237, 0.05); } - .sound-button, .modal-dialog-button-box .modal-dialog-button, .notification-button, .notification-icon-button, .popup-menu #notification .notification-button, .popup-menu #notification .notification-icon-button { + box-shadow: inset 0 2px 4px rgba(176, 176, 176, 0.05); } + .sound-button, .notification-button, .notification-icon-button, .popup-menu #notification .notification-button, .popup-menu #notification .notification-icon-button { border-radius: 2px; } - .sound-button:focus, .modal-dialog-button-box .modal-dialog-button:focus, .notification-button:focus, .notification-icon-button:focus, .popup-menu #notification .notification-button:focus, .popup-menu #notification .notification-icon-button:focus { + .sound-button:focus, .notification-button:focus, .notification-icon-button:focus, .popup-menu #notification .notification-button:focus, .popup-menu #notification .notification-icon-button:focus { color: #303030; - background-color: #ededed; + background-color: #b0b0b0; border: 1px solid #35a854; - box-shadow: inset 0 2px 4px rgba(237, 237, 237, 0.05); } - .sound-button:hover, .modal-dialog-button-box .modal-dialog-button:hover, .notification-button:hover, .notification-icon-button:hover, .popup-menu #notification .notification-button:hover, .popup-menu #notification .notification-icon-button:hover { + box-shadow: inset 0 2px 4px rgba(176, 176, 176, 0.05); } + .sound-button:hover, .notification-button:hover, .notification-icon-button:hover, .popup-menu #notification .notification-button:hover, .popup-menu #notification .notification-icon-button:hover { color: #303030; - background-color: #fafafa; + background-color: #bdbdbd; border: 1px solid #b5b5b5; - box-shadow: inset 0 2px 4px rgba(250, 250, 250, 0.05); } - .sound-button:hover:focus, .modal-dialog-button-box .modal-dialog-button:hover:focus, .notification-button:hover:focus, .notification-icon-button:hover:focus, .popup-menu #notification .notification-button:hover:focus, .popup-menu #notification .notification-icon-button:hover:focus { + box-shadow: inset 0 2px 4px rgba(189, 189, 189, 0.05); } + .sound-button:hover:focus, .notification-button:hover:focus, .notification-icon-button:hover:focus, .popup-menu #notification .notification-button:hover:focus, .popup-menu #notification .notification-icon-button:hover:focus { color: #303030; - background-color: #fafafa; + background-color: #bdbdbd; border: 1px solid #35a854; - box-shadow: inset 0 2px 4px rgba(237, 237, 237, 0.05); } - .sound-button:active, .modal-dialog-button-box .modal-dialog-button:active, .notification-button:active, .notification-icon-button:active, .popup-menu #notification .notification-button:active, .popup-menu #notification .notification-icon-button:active { + box-shadow: inset 0 2px 4px rgba(176, 176, 176, 0.05); } + .sound-button:active, .notification-button:active, .notification-icon-button:active, .popup-menu #notification .notification-button:active, .popup-menu #notification .notification-icon-button:active { color: #ffffff; background-color: #35a854; border: 1px solid #35a854; box-shadow: inset 0 2px 4px #35a854; } - .sound-button:insensitive, .modal-dialog-button-box .modal-dialog-button:insensitive, .notification-button:insensitive, .notification-icon-button:insensitive, .popup-menu #notification .notification-button:insensitive, .popup-menu #notification .notification-icon-button:insensitive { + .sound-button:insensitive, .notification-button:insensitive, .notification-icon-button:insensitive, .popup-menu #notification .notification-button:insensitive, .popup-menu #notification .notification-icon-button:insensitive { color: rgba(48, 48, 48, 0.55); border: 1px solid rgba(181, 181, 181, 0.55); - background-color: rgba(237, 237, 237, 0.55); - box-shadow: inset 0 2px 4px rgba(237, 237, 237, 0.05); } + background-color: rgba(176, 176, 176, 0.55); + box-shadow: inset 0 2px 4px rgba(176, 176, 176, 0.05); } -#menu-search-entry, .popup-menu #notification StEntry { +.prompt-dialog-password-entry, .run-dialog-entry, #menu-search-entry, .popup-menu #notification StEntry { padding: 7px; caret-size: 1px; selection-background-color: #35a854; @@ -48,23 +48,28 @@ stage { transition-duration: 300ms; border-radius: 3px; color: #303030; - background-color: #f4f4f4; + background-color: #d0d0d0; border: 1px solid #cfd6e6; - box-shadow: inset 0 2px 4px rgba(244, 244, 244, 0.05); } - #menu-search-entry:focus, .popup-menu #notification StEntry:focus, #menu-search-entry:hover, .popup-menu #notification StEntry:hover { + box-shadow: inset 0 2px 4px rgba(208, 208, 208, 0.05); } + .prompt-dialog-password-entry:focus, .run-dialog-entry:focus, #menu-search-entry:focus, .popup-menu #notification StEntry:focus, .prompt-dialog-password-entry:hover, .run-dialog-entry:hover, #menu-search-entry:hover, .popup-menu #notification StEntry:hover { color: #303030; - background-color: #f4f4f4; + background-color: #d0d0d0; border: 1px solid #35a854; - box-shadow: inset 0 2px 4px rgba(244, 244, 244, 0.05); } - #menu-search-entry:insensitive, .popup-menu #notification StEntry:insensitive { + box-shadow: inset 0 2px 4px rgba(208, 208, 208, 0.05); } + .prompt-dialog-password-entry:insensitive, .run-dialog-entry:insensitive, #menu-search-entry:insensitive, .popup-menu #notification StEntry:insensitive { color: rgba(48, 48, 48, 0.55); - background-color: #efefef; + background-color: #dbdbdb; border-color: 1px solid #dadee7; - box-shadow: inset 0 2px 4px rgba(239, 239, 239, 0.05); } - #menu-search-entry StIcon.capslock-warning, .popup-menu #notification StEntry StIcon.capslock-warning { + box-shadow: inset 0 2px 4px rgba(219, 219, 219, 0.05); } + .prompt-dialog-password-entry StIcon.capslock-warning, .run-dialog-entry StIcon.capslock-warning, #menu-search-entry StIcon.capslock-warning, .popup-menu #notification StEntry StIcon.capslock-warning { icon-size: 16px; warning-color: #F27835; padding: 0 4px; } + .prompt-dialog-password-entry StLabel.hint-text, .run-dialog-entry StLabel.hint-text, #menu-search-entry StLabel.hint-text, .popup-menu #notification StEntry StLabel.hint-text { + color: rgba(48, 48, 48, 0.3); } + .prompt-dialog-password-entry StIcon.peek-password, .run-dialog-entry StIcon.peek-password, #menu-search-entry StIcon.peek-password, .popup-menu #notification StEntry StIcon.peek-password { + icon-size: 16px; + color: #303030; } .notification StEntry { padding: 7px; @@ -75,8 +80,8 @@ stage { transition-duration: 300ms; border-radius: 3px; color: #c3c3c3; - background-color: rgba(109, 109, 109, 0.4); - border: 1px solid rgba(22, 22, 22, 0.4); + background-color: rgba(104, 104, 104, 0.4); + border: 1px solid rgba(17, 17, 17, 0.4); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } .notification StEntry:focus { color: #ffffff; @@ -85,8 +90,8 @@ stage { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } .notification StEntry:insensitive { color: rgba(195, 195, 195, 0.55); - background-color: rgba(109, 109, 109, 0.25); - border: 1px solid rgba(22, 22, 22, 0.4); + background-color: rgba(104, 104, 104, 0.25); + border: 1px solid rgba(17, 17, 17, 0.4); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } StScrollView.vfade { @@ -101,15 +106,15 @@ StScrollBar { min-width: 5px; min-height: 5px; } StScrollBar StBin#trough { - background-color: rgba(244, 244, 244, 0.1); + background-color: rgba(208, 208, 208, 0.1); border-radius: 8px; } StScrollBar StButton#vhandle, StScrollBar StButton#hhandle { border-radius: 2px; - background-color: #9e9e9e; + background-color: #d0d0d0; border: 0px solid; margin: 0px; } StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover { - background-color: #b1b1b1; } + background-color: #b0b0b0; } StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { background-color: #35a854; } @@ -224,25 +229,24 @@ StScrollBar { .menu { color: #303030; - border: 1px solid #b5b5b5; - border-radius: 3px; - background-color: rgba(232, 232, 232, 0.99); } - .menu.top { - border-radius: 0 0 3px 3px; } - .menu.bottom { - border-radius: 3px 3px 0 0; } - .menu.left { - border-radius: 0 3px 3px 0; } - .menu.right { - border-radius: 3px 0 0 3px; } + background-color: #e8e8e8; + box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); } + .menu-top { + border-radius: 0 0 6px 6px; } + .menu-bottom { + border-radius: 6px 6px 0 0; } + .menu-left { + border-radius: 0 6px 6px 0; } + .menu-right { + border-radius: 6px 0 0 6px; } .popup-sub-menu { - background-color: #f4f4f4; + background-color: #e8e8e8; box-shadow: none; } .popup-sub-menu .popup-menu-item:ltr { - padding-right: 1.75em; } + padding-left: 2.5em; } .popup-sub-menu .popup-menu-item:rtl { - padding-left: 1.75em; } + padding-right: 2.5em; } .popup-sub-menu StScrollBar { padding: 4px; } .popup-sub-menu StScrollBar StBin#trough, .popup-sub-menu StScrollBar StBin#vhandle { @@ -258,7 +262,7 @@ StScrollBar { border-right-width: 0; } .popup-menu-item:active { color: #303030; - background-color: #c0c0c0; } + background-color: #d0d0d0; } .popup-menu-item:insensitive { color: rgba(48, 48, 48, 0.5); background: none; } @@ -268,60 +272,12 @@ StScrollBar { .popup-inactive-menu-item:insensitive { color: rgba(48, 48, 48, 0.55); } -/* This is for popup menus in Cinnamon versions < 3.2 */ -.popup-menu { - color: white; - color: #303030; } - .popup-menu-arrow { - icon-size: 16px; } - .popup-menu .popup-sub-menu { - background-color: #f4f4f4; - box-shadow: none; } - .popup-menu .popup-sub-menu .popup-menu-item:ltr { - padding-right: 1.75em; } - .popup-menu .popup-sub-menu .popup-menu-item:rtl { - padding-left: 1.75em; } - .popup-menu .popup-sub-menu StScrollBar { - padding: 4px; } - .popup-menu .popup-sub-menu StScrollBar StBin#trough, .popup-menu .popup-sub-menu StScrollBar StBin#vhandle { - border-width: 0; } - .popup-menu .popup-menu-content { - padding: 1em 0em 1em 0em; } - .popup-menu .popup-menu-item { - padding: .4em 1.75em; - spacing: 1em; - border: 1px solid transparent; - border-left-width: 0; - border-right-width: 0; } - .popup-menu .popup-menu-item:active { - color: #303030; - border-color: rgba(48, 48, 48, 0.11); - background-color: rgba(48, 48, 48, 0.08); } - .popup-menu .popup-menu-item:insensitive { - color: rgba(48, 48, 48, 0.5); - background: none; } - .popup-menu .popup-inactive-menu-item { - color: #303030; } - .popup-menu .popup-inactive-menu-item:insensitive { - color: rgba(48, 48, 48, 0.55); } - .popup-menu-icon { - icon-size: 16px; } - -.popup-menu-boxpointer { - -arrow-border-radius: 3px; - -arrow-background-color: #e8e8e8; - -arrow-border-width: 1px; - -arrow-border-color: #b5b5b5; - -arrow-base: 21px; - -arrow-rise: 9px; - -boxpointer-gap: 2px; } - /*Scale view context menu*/ .popup-combo-menu { color: #303030; border: 1px solid #b5b5b5; border-radius: 3px; - background-color: #f4f4f4; + background-color: #d0d0d0; box-shadow: none; padding: 1em 0em 1em 0em; } @@ -343,7 +299,15 @@ StScrollBar { font-weight: normal; } .popup-device-menu-item { - spacing: .5em; } + spacing: .5em; + font-weight: bold; + color: #303030; } + .popup-device-menu-item:insensitive { + color: #303030; + spacing: 1em; } + .popup-device-menu-item .popup-inactive-menu-item { + font-weight: normal; + color: #303030; } .popup-subtitle-menu-item { font-weight: normal; } @@ -453,21 +417,21 @@ StScrollBar { .panel-top, .panel-bottom, .panel-left, .panel-right { color: #ffffff; border: none; - background-color: rgba(232, 232, 232, 0.99); + background-color: rgba(240, 240, 240, 0.99); font-size: 1em; padding: 0px; } .panel-top { - box-shadow: 0 1px #b5b5b5; } + box-shadow: 0 1px #e8e8e8; } .panel-bottom { - box-shadow: 0 -1px #b5b5b5; } + box-shadow: 0 -1px #e8e8e8; } .panel-left { - box-shadow: 1px 0 #b5b5b5; } + box-shadow: 1px 0 #e8e8e8; } .panel-right { - box-shadow: -1px 0 #b5b5b5; } + box-shadow: -1px 0 #e8e8e8; } .panel-dummy { background-color: rgba(252, 65, 56, 0.5); } @@ -500,8 +464,8 @@ StScrollBar { spacing: 12px; } .window-caption { - background-color: #353535; - border: 1px solid #353535; + background-color: #303030; + border: 1px solid #303030; color: #c3c3c3; spacing: 8px; border-radius: 2px; @@ -532,8 +496,8 @@ StScrollBar { padding: 5px 8px; -cinnamon-caption-spacing: 4px; color: #c3c3c3; - background-color: rgba(109, 109, 109, 0.4); - border: 1px solid rgba(22, 22, 22, 0.4); + background-color: rgba(104, 104, 104, 0.4); + border: 1px solid rgba(17, 17, 17, 0.4); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } .expo-workspaces-name-entry:focus, .expo-workspaces-name-entry#selected:focus { @@ -555,7 +519,7 @@ StScrollBar { border-radius: 2px; } .expo-background { - background-color: #353535; } + background-color: #303030; } .workspace-thumbnails { spacing: 26px; } @@ -614,14 +578,16 @@ StScrollBar { margin-right: .5em; padding: .5em; min-width: 350px; - border: 1px solid #b5b5b5; - background-color: #f4f4f4; } + border: 1px solid rgba(0, 0, 0, 0); + background-color: #d0d0d0; + border-radius: 6px; } .calendar-events-no-events-button { margin: 6px 0 6px 0; padding: 6px; } .calendar-events-no-events-button:hover { - background-color: #35a854; } + background-color: #35a854; + border-radius: 6px; } .calendar-events-no-events-button:hover .calendar-events-no-events-icon, .calendar-events-no-events-button:hover .calendar-events-no-events-label { color: #ffffff; } @@ -642,7 +608,9 @@ StScrollBar { padding: 0; } .calendar-event-button { - border: 1px solid rgba(0, 0, 0, 0); } + border: 1px solid rgba(0, 0, 0, 0); + border-radius-topright: 6px; + border-radius-bottomright: 6px; } .calendar-event-button .calendar-event-time-past { color: rgba(48, 48, 48, 0.4); font-weight: bold; @@ -696,7 +664,7 @@ StScrollBar { font-weight: bold; } .calendar-event-color-strip { - width: 2px; } + width: 3px; } .calendar-today-home-button { padding: 6px; } @@ -715,7 +683,8 @@ StScrollBar { text-align: center; } .calendar-today-home-button-enabled { - padding: 6px; } + padding: 6px; + border-radius: 6px; } .calendar-today-home-button-enabled:hover { background-color: #35a854; } .calendar-today-home-button-enabled:hover .calendar-today-day-label { @@ -778,7 +747,8 @@ StScrollBar { .calendar-day-base:hover { font-weight: bold; color: #ffffff; - background-color: #35a854; } + background-color: #35a854; + border-radius: 6px; } .calendar-day-heading { color: rgba(48, 48, 48, 0.85); @@ -803,12 +773,14 @@ StScrollBar { .calendar-today { color: #303030; background-color: rgba(53, 168, 84, 0.4); - border-width: 0; } + border-width: 0; + border-radius: 6px; } .calendar-today:selected { font-weight: bold; } .calendar-not-today { - color: #303030; } + color: #303030; + border-radius: 6px; } .calendar-not-today:selected { font-weight: bold; background-color: rgba(48, 48, 48, 0.3); } @@ -879,8 +851,8 @@ StScrollBar { .switcher-list { color: #303030; border: 1px solid #b5b5b5; - background-color: #e8e8e8; - border-radius: 3px; + background-color: #f0f0f0; + border-radius: 6px; padding: 20px; } .switcher-list > StBoxLayout { padding: 4px; } @@ -888,13 +860,12 @@ StScrollBar { spacing: 8px; } .switcher-list .item-box { padding: 8px; - border-radius: 2px; } + border-radius: 6px; } .switcher-list .item-box:outlined { padding: 8px; border: 1px solid #35a854; } .switcher-list .item-box:selected { - color: #ffffff; - background-color: #35a854; + background-color: #c0c0c0; border: 0px solid #35a854; } .switcher-list .thumbnail { width: 256px; } @@ -934,137 +905,13 @@ StScrollBar { .ripple-box:rtl { background-image: url("common-assets/misc/corner-ripple.svg"); } -.lightbox { - background-color: rgba(0, 0, 0, 0.4); } - -.flashspot { - background-color: white; } - -.modal-dialog { - background-color: #e8e8e8; - border: 1px solid #b5b5b5; - border-radius: 3px; - padding: 5px 10px; } - .modal-dialog > StBoxLayout:first-child { - padding: 10px; } - .modal-dialog-button-box { - spacing: 0; - margin: 0px; - padding: 10px; - border: none; - background-color: #e8e8e8; } - .modal-dialog-button-box .modal-dialog-button { - padding-top: 0; - padding-bottom: 0; - height: 30px; } - .modal-dialog .confirm-dialog-title { - text-align: center; - font-weight: bold; - font-size: 1.3em; - padding-bottom: 12px; } - -.run-dialog { - padding: 10px 15px 10px 15px; - border: 1px solid #b5b5b5; - border-radius: 3px; - background-color: #e8e8e8; } - .run-dialog > * { - padding: 0; } - .run-dialog-label { - font-size: 1.3em; - font-weight: bold; - color: #303030; - padding-bottom: 15px; - text-align: center; } - .run-dialog-description { - color: #303030; - padding-top: 15px; - text-align: center; } - .run-dialog-description.error { - color: #FC4138; } - .run-dialog-completion-box { - padding-top: 5px; - padding-left: 15px; - font-size: 1em; } - .run-dialog-entry { - width: 21em; - height: 1.2em; - padding: 7px; - border-radius: 3px; - caret-color: #c3c3c3; - selected-color: #ffffff; - selection-background-color: #35a854; - color: #c3c3c3; - background-color: rgba(109, 109, 109, 0.4); - border: 1px solid rgba(22, 22, 22, 0.4); - box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } - .run-dialog-entry:focus { - color: #303030; - background-color: #f4f4f4; - border: 1px solid #35a854; - box-shadow: inset 0 2px 4px rgba(244, 244, 244, 0.05); } - .run-dialog .modal-dialog-button-box { - border: none; - box-shadow: none; - background: none; } - -/* CinnamonMountOperation Dialogs */ -.cinnamon-mount-operation-icon { - icon-size: 48px; } - -.mount-password-reask { - color: #F27835; } - -.show-processes-dialog, -.mount-question-dialog { - spacing: 24px; } - .show-processes-dialog-subject, - .mount-question-dialog-subject { - padding-top: 10px; - padding-left: 17px; - padding-bottom: 6px; } - .show-processes-dialog-subject:rtl, - .mount-question-dialog-subject:rtl { - padding-left: 0px; - padding-right: 17px; } - .show-processes-dialog-description, - .mount-question-dialog-description { - padding-left: 17px; - width: 28em; } - .show-processes-dialog-description:rtl, - .mount-question-dialog-description:rtl { - padding-right: 17px; } - -.show-processes-dialog-app-list { - max-height: 200px; - padding-top: 24px; - padding-left: 49px; - padding-right: 32px; } - .show-processes-dialog-app-list:rtl { - padding-right: 49px; - padding-left: 32px; } - .show-processes-dialog-app-list-item { - color: #ccc; } - .show-processes-dialog-app-list-item:hover { - color: white; } - .show-processes-dialog-app-list-item:ltr { - padding-right: 1em; } - .show-processes-dialog-app-list-item:rtl { - padding-left: 1em; } - .show-processes-dialog-app-list-item-icon:ltr { - padding-right: 17px; } - .show-processes-dialog-app-list-item-icon:rtl { - padding-left: 17px; } - .show-processes-dialog-app-list-item-name { - font-size: 1.1em; } - .magnifier-zoom-region { border: 2px solid maroon; } .magnifier-zoom-region .full-screen { border-width: 0px; } #keyboard { - background-color: #353535; + background-color: #303030; border-width: 0; border-top-width: 1px; border-color: rgba(0, 0, 0, 0.4); } @@ -1085,25 +932,25 @@ StScrollBar { box-shadow: none; color: #c3c3c3; border: 1px solid #b5b5b5; - background-color: rgba(109, 109, 109, 0.4); } + background-color: rgba(104, 104, 104, 0.4); } .keyboard-key:hover { color: #c3c3c3; - border: 1px solid rgba(2, 2, 2, 0.4); - background-color: rgba(127, 127, 127, 0.5); } + border: 1px solid rgba(0, 0, 0, 0.4); + background-color: rgba(122, 122, 122, 0.5); } .keyboard-key:active, .keyboard-key:checked { color: #ffffff; border: 1px solid #35a854; background-color: #35a854; } .keyboard-key:grayed { - color: #606060; - border: 1px solid rgba(2, 2, 2, 0.4); - background-color: rgba(109, 109, 109, 0.25); } + color: #5c5c5c; + border: 1px solid rgba(0, 0, 0, 0.4); + background-color: rgba(104, 104, 104, 0.25); } .keyboard-subkeys { color: #c3c3c3; padding: 5px; -arrow-border-radius: 2px; - -arrow-background-color: #353535; + -arrow-background-color: #303030; -arrow-border-width: 1px; -arrow-border-color: rgba(0, 0, 0, 0.4); -arrow-base: 20px; @@ -1113,15 +960,17 @@ StScrollBar { .menu-favorites-box { padding: 10px; transition-duration: 300; - background-color: #e7e7e7; - border: 1px solid #b5b5b5; } + background-color: #d0d0d0; + border: 1px solid rgba(0, 0, 0, 0); + border-radius: 6px; } .menu-favorites-button { padding: .9em 1em; border: 1px solid rgba(0, 0, 0, 0); - border-radius: 2px; } + border-radius: 6px; } .menu-favorites-button:hover { - background-color: #c0c0c0; } + background-color: #b0b0b0; + border: 1px solid rgba(0, 0, 0, 0); } .menu-places-box { padding: 10px; @@ -1144,8 +993,9 @@ StScrollBar { .menu-application-button-selected { padding: 7px; color: #303030; - background-color: #c0c0c0; - border: 1px solid #b5b5b5; } + background-color: #d0d0d0; + border: 1px solid rgba(0, 0, 0, 0); + border-radius: 6px; } .menu-application-button-selected:highlighted { font-weight: bold; } .menu-application-button-label:ltr { @@ -1159,12 +1009,9 @@ StScrollBar { .menu-category-button-selected { padding: 7px; color: #303030; - background-color: #c0c0c0; - border: 1px solid #b5b5b5; } - .menu-category-button:hover { - background-color: #d8d8d8; - border: 1px solid #d4d4d4; - border-radius: 0px; } + background-color: #d0d0d0; + border: 1px solid rgba(0, 0, 0, 0); + border-radius: 6px; } .menu-category-button-greyed { padding: 7px; color: rgba(48, 48, 48, 0.55); @@ -1199,49 +1046,14 @@ StScrollBar { width: 250px; min-height: 16px; font-weight: normal; - caret-color: #303030; } + caret-color: #303030; + border-radius: 6px; } .menu-search-entry-icon { icon-size: 1em; color: #303030; } /* Context menu (at the moment only for favorites) */ -.info-osd { - text-align: center; - font-weight: bold; - spacing: 1em; - padding: 16px; - color: #303030; - border: 1px solid #b5b5b5; - border-radius: 5px; - background-color: #e8e8e8; } - -.restart-osd { - font-size: 1.6em; } - -.workspace-osd { - font-size: 4em; } - -.osd-window { - text-align: center; - font-weight: bold; - spacing: 1em; - padding: 20px; - color: #303030; - background-color: #e8e8e8; - border: 1px solid #b5b5b5; - border-radius: 5px; } - .osd-window .osd-monitor-label { - font-size: 3em; } - .osd-window .level { - padding: 0; - height: 0.7em; - background-color: rgba(0, 0, 0, 0.5); - border-radius: 2px; } - .osd-window .level-bar { - border-radius: 2px; - background-color: #35a854; } - .window-list-box { spacing: 6px; padding-left: 10px; @@ -1302,7 +1114,7 @@ StScrollBar { .window-list-preview { spacing: 6px; color: #303030; - border: 1px solid #b5b5b5; + border: 1px solid rgba(0, 0, 0, 0); background-color: #e8e8e8; border-radius: 3px; padding: 6px 12px 12px 12px; @@ -1373,7 +1185,7 @@ StScrollBar { .grouped-window-list-thumbnail-menu { color: #303030; - border: 1px solid #b5b5b5; + border: 1px solid rgba(0, 0, 0, 0); background-color: #e8e8e8; border-radius: 3px; padding: 0px; } @@ -1452,9 +1264,9 @@ StScrollBar { icon-size: 12px; } .sound-player > StBoxLayout:first-child StButton:small:hover { color: #303030; - background-color: #fafafa; + background-color: #bdbdbd; border: 1px solid #b5b5b5; - box-shadow: inset 0 2px 4px rgba(250, 250, 250, 0.05); } + box-shadow: inset 0 2px 4px rgba(189, 189, 189, 0.05); } .sound-player > StBoxLayout:first-child StButton:small:active { color: #ffffff; background-color: #35a854; @@ -1482,9 +1294,9 @@ StScrollBar { icon-size: 16px; } .sound-player-overlay StButton:hover { color: #303030; - background-color: #fafafa; + background-color: #bdbdbd; border: 1px solid #b5b5b5; - box-shadow: inset 0 2px 4px rgba(250, 250, 250, 0.05); } + box-shadow: inset 0 2px 4px rgba(189, 189, 189, 0.05); } .sound-player-overlay StButton:active { color: #ffffff; background-color: #35a854; @@ -1507,65 +1319,45 @@ StScrollBar { -slider-border-width: 0px; -slider-handle-radius: 0px; } -#workspaceSwitcher { - spacing: 0px; - padding: 3px; } - -/* Controls the styling when using the "Simple buttons" option */ -.workspace-switcher { - padding-left: 3px; - padding-right: 3px; } - .panel-left .workspace-switcher, .panel-right .workspace-switcher { - padding: 0; } +.panel-top .workspace-switcher, +.panel-bottom .workspace-switcher { + padding: 0 4px; } .workspace-button { - border: 1px solid rgba(0, 0, 0, 0.4); - background-color: rgba(0, 0, 0, 0.2); - width: 20px; - height: 14px; - color: rgba(255, 255, 255, 0.45); - padding: 3px; - padding-top: 4px; - transition-duration: 200; } + border: 1px solid #b5b5b5; + width: 2em; + color: rgba(48, 48, 48, 0.55); + background-color: rgba(48, 48, 48, 0.05); } .workspace-button.vertical { - height: 1.5em; - width: 24px; - padding: 0; - padding-top: 3px; - padding-bottom: 3px; } + height: 2em; } .workspace-button:outlined { - background-color: #35a854; - color: #ffffff; } + background-color: #d0d0d0; + color: #303030; } .workspace-button:outlined:hover { - background-color: rgba(53, 168, 84, 0.7); - color: #ffffff; } + background-color: #b0b0b0; } .workspace-button:hover { - background-color: rgba(48, 48, 48, 0.2); - color: #ffffff; } + background-color: #d0d0d0; } + .workspace-button:shaded { + background-color: #dbdbdb; } -/* Controls the style when using the "Visual representation" option */ .workspace-graph { - padding: 3px; - spacing: 6px; } - -.workspace-graph .workspace { - border: 1px solid rgba(0, 0, 0, 0.4); - background-color: rgba(0, 0, 0, 0.2); } - -.workspace-graph .workspace:active { - border: 1px solid #35a854; } - -.workspace-graph .workspace .windows { - -active-window-background: white; - -active-window-border: rgba(0, 0, 0, 0.8); - -inactive-window-background: white; - -inactive-window-border: rgba(0, 0, 0, 0.8); } - -.workspace-graph .workspace:active .windows { - -active-window-background: white; - -active-window-border: rgba(0, 0, 0, 0.8); - -inactive-window-background: whitesmoke; - -inactive-window-border: rgba(0, 0, 0, 0.8); } + padding: 4px; + spacing: 4px; } + .workspace-graph .workspace { + border: 1px solid rgba(48, 48, 48, 0.2); + background-color: #e8e8e8; } + .workspace-graph .workspace:active { + border-color: #35a854; } + .workspace-graph .workspace:active .windows { + -active-window-background: rgba(0, 0, 0, 0.3); + -active-window-border: rgba(0, 0, 0, 0.35); + -inactive-window-background: rgba(0, 0, 0, 0.1); + -inactive-window-border: rgba(0, 0, 0, 0.15); } + .workspace-graph .workspace .windows { + -active-window-background: rgba(0, 0, 0, 0.3); + -active-window-border: rgba(0, 0, 0, 0.35); + -inactive-window-background: rgba(0, 0, 0, 0.1); + -inactive-window-border: rgba(0, 0, 0, 0.15); } .panel-launchers { padding-left: 7px; @@ -1576,7 +1368,7 @@ StScrollBar { padding-bottom: 2px; transition-duration: 200; } .panel-launchers .launcher:hover { - background-color: #c0c0c0; } + background-color: #d0d0d0; } .panel-launchers.vertical { padding-top: 2px; padding-bottom: 2px; @@ -1599,27 +1391,23 @@ StScrollBar { .applet-separator-line { width: 1px; - background: #c2c2c2; } + background: #b5b5b5; } .applet-separator-line-vertical { height: 1px; - background: #c2c2c2; } + background: #b5b5b5; } .applet-box { - padding-left: 4px; - padding-right: 4px; - spacing: 4px; + padding: 0 5px; + spacing: 5px; color: #303030; text-shadow: none; transition-duration: 100; text-align: center; } .applet-box.vertical { - padding-left: 0px; - padding-right: 0px; - padding-top: 3px; - padding-bottom: 3px; } + padding: 5px 0; } .applet-box:hover, .applet-box:checked { color: #303030; - background-color: #c0c0c0; } + background-color: #d0d0d0; } .applet-box:highlight { background-image: none; border-image: none; @@ -1640,11 +1428,8 @@ StScrollBar { text-shadow: none; } .user-icon { - width: 32px; - height: 32px; - background-color: transparent; - border: none; - border-radius: 0; } + border: 1px solid rgba(48, 48, 48, 0.5); + border-radius: 99px; } .user-label { color: #303030; @@ -1654,13 +1439,15 @@ StScrollBar { .applet-cornerbar { width: 8px; - background-color: #c2c2c2; } - .applet-cornerbar-box { - padding: 4px 4px; } - .applet-cornerbar-box:hover > .applet-cornerbar { - background-color: #a8a8a8; } + background-color: #b5b5b5; + border: 1px solid #b5b5b5; } .applet-cornerbar.vertical { height: 8px; } + .applet-cornerbar-box { + background: none; } + +.applet-cornerbar-box:hover > .applet-cornerbar { + background-color: #9c9c9c; } .desklet { color: #303030; } @@ -1751,3 +1538,302 @@ StScrollBar { border: 0px; background-color: rgba(0, 0, 0, 0); border-radius: 0px; } + +.prompt-dialog-error-label, .prompt-dialog-info-label, .prompt-dialog-null-label, .run-dialog-description, .message-dialog-content .message-dialog-caption, .dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description { + font-weight: 400; + font-size: 0.818em; } + +.message-dialog-content .message-dialog-title, .dialog .confirm-dialog-title { + font-weight: 800; + font-size: 1.364em; } + +.workspace-switch-osd, .media-keys-osd, .message-dialog-content .message-dialog-title.lightweight { + font-weight: 700; + font-size: 1.182em; } + +.polkit-dialog-user-combo, .dialog-list .dialog-list-title { + font-weight: 700; + font-size: 1em; } + +.audio-device-selection-dialog .audio-selection-box .audio-selection-device, .polkit-dialog-user-combo { + border: 1px solid #e8e8e8; + color: #303030; + background-color: #e8e8e8; } + .audio-device-selection-dialog .audio-selection-box .audio-selection-device:focus, .polkit-dialog-user-combo:focus { + border: 1px solid #e8e8e8; + color: #303030; + background-color: #e8e8e8; + border: 1px solid #9c9c9c; } + .audio-device-selection-dialog .audio-selection-box .audio-selection-device:hover, .polkit-dialog-user-combo:hover { + border: 1px solid #e8e8e8; + color: #303030; + background-color: #cfcfcf; } + .audio-device-selection-dialog .audio-selection-box .audio-selection-device:insensitive, .polkit-dialog-user-combo:insensitive { + border: 1px solid #e8e8e8; + color: rgba(48, 48, 48, 0.5); + background-color: #e8e8e8; } + .audio-device-selection-dialog .audio-selection-box .audio-selection-device:selected, .polkit-dialog-user-combo:selected, .audio-device-selection-dialog .audio-selection-box .audio-selection-device:active, .polkit-dialog-user-combo:active { + border: 1px solid #e8e8e8; + color: #303030; + background-color: #dbdbdb; } + .audio-device-selection-dialog .audio-selection-box .audio-selection-device:checked, .polkit-dialog-user-combo:checked { + border: 1px solid #e8e8e8; + color: #303030; + background-color: #dbdbdb; } + +.dialog .dialog-button, .dialog .dialog-button:destructive-action, .dialog .dialog-button:default { + font-weight: bold; + padding: 12px; + border-radius: 18px; + border: 1px solid #b0b0b0; + color: #303030; + background-color: #b0b0b0; } + .dialog .dialog-button:focus { + border: 1px solid #b0b0b0; + color: #303030; + background-color: #b0b0b0; + border: 1px solid #646464; } + .dialog .dialog-button:hover { + border: 1px solid #b0b0b0; + color: #303030; + background-color: #979797; } + .dialog .dialog-button:active { + border: 1px solid #b0b0b0; + color: #303030; + background-color: #a3a3a3; } + .dialog .dialog-button:checked { + border: 1px solid #b0b0b0; + color: #303030; + background-color: #a3a3a3; } + .dialog .dialog-button:insensitive { + border: 1px solid #b0b0b0; + color: rgba(48, 48, 48, 0.5); + background-color: #b8b8b8; } + +.dialog .dialog-button:default { + border: 1px solid #35a854; + color: #303030; + background-color: #35a854; } + .dialog .dialog-button:focus:default { + border: 1px solid #35a854; + color: #303030; + background-color: #35a854; + border: 1px solid #10341a; } + .dialog .dialog-button:hover:default { + border: 1px solid #35a854; + color: #303030; + background-color: #298141; } + .dialog .dialog-button:active:default { + border: 1px solid #35a854; + color: #303030; + background-color: #2f954a; } + .dialog .dialog-button:checked:default { + border: 1px solid #35a854; + color: #303030; + background-color: #2f954a; } + .dialog .dialog-button:insensitive:default { + border-color: #b5b5b5; + border: 1px solid #b0b0b0; + color: rgba(48, 48, 48, 0.5); + background-color: #b8b8b8; } + +.dialog .dialog-button:destructive-action { + border: 1px solid #F04A50; + color: #303030; + background-color: #F04A50; } + .dialog .dialog-button:focus:destructive-action { + border: 1px solid #F04A50; + color: #303030; + background-color: #F04A50; + border: 1px solid #950c11; } + .dialog .dialog-button:hover:destructive-action { + border: 1px solid #F04A50; + color: #303030; + background-color: #ec1b22; } + .dialog .dialog-button:active:destructive-action { + border: 1px solid #F04A50; + color: #303030; + background-color: #ee3239; } + .dialog .dialog-button:checked:destructive-action { + border: 1px solid #F04A50; + color: #303030; + background-color: #ee3239; } + .dialog .dialog-button:insensitive:destructive-action { + border-color: #b5b5b5; + border: 1px solid #b0b0b0; + color: rgba(48, 48, 48, 0.5); + background-color: #b8b8b8; } + +.dialog { + background-color: #e8e8e8; + border-radius: 18px; + border: 1px solid #b5b5b5; + padding: 18px; } + .dialog .dialog-content-box { + margin-top: 8px; + margin-bottom: 16px; + spacing: 32px; + max-width: 28em; } + .dialog .confirm-dialog-title { + text-align: center; } + +.dialog-list { + spacing: 18px; } + .dialog-list .dialog-list-title { + text-align: center; } + .dialog-list .dialog-list-scrollview { + max-height: 200px; } + .dialog-list .dialog-list-box { + spacing: 1em; } + .dialog-list .dialog-list-box .dialog-list-item { + spacing: 1em; } + .dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-title { + font-weight: bold; } + .dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description { + color: #232323; } + +.end-session-dialog { + width: 40em; } + .end-session-dialog .dialog-content-box { + spacing: 0; } + .end-session-dialog .dialog-list { + spacing: 0; } + .end-session-dialog .dialog-list .dialog-list-title { + color: #F27835; + background-color: tranparentize(#F27835, 0.9); + padding: 9px; + border-radius: 20px; + margin: 4px 0; } + +.message-dialog-content { + spacing: 18px; } + .message-dialog-content .message-dialog-title { + text-align: center; } + .message-dialog-content .message-dialog-description { + text-align: center; } + .message-dialog-content .message-dialog-caption { + text-align: center; } + +.run-dialog .dialog-content-box { + margin: 4px; } + +.run-dialog-description { + text-align: center; + color: black; } + .run-dialog-description.error { + color: #FC4138; } + +.run-dialog-completion-box { + padding-top: 6px; + padding-left: 12px; } + +.run-dialog-entry { + width: 20em; + height: 1.2em; } + +.prompt-dialog { + width: 28em; } + .prompt-dialog .dialog-content-box { + spacing: 16px; + margin-bottom: 12px; } + .prompt-dialog-password-entry { + width: 20em; } + .prompt-dialog-password-layout { + spacing: 8px; } + .prompt-dialog-error-label, .prompt-dialog-info-label, .prompt-dialog-null-label { + text-align: center; } + .prompt-dialog-error-label { + color: #FC4138; } + +.polkit-dialog-user-layout { + text-align: center; + spacing: 2px; } + +.polkit-dialog-user-combo { + border-radius: 6px; + padding: 6px 36px; } + .polkit-dialog-user-combo:insensitive { + color: #303030; } + +.audio-device-selection-dialog { + min-width: 24em; } + .audio-device-selection-dialog .audio-selection-box { + spacing: 12px; } + .audio-device-selection-dialog .audio-selection-box .audio-selection-device { + border-radius: 20px; } + .audio-device-selection-dialog .audio-selection-box .audio-selection-device .audio-selection-device-box { + padding: 12px; + spacing: 12px; } + .audio-device-selection-dialog .audio-selection-box .audio-selection-device .audio-selection-device-icon { + icon-size: 64px; } + +.workspace-switch-osd, .info-osd, .media-keys-osd { + background-color: #e8e8e8; + border: 1px solid #b5b5b5; + border-radius: 20px; + text-align: center; + padding: 24px; } + +.media-keys-osd { + margin-bottom: 1em; + border-radius: 20px; + font-weight: bold; + spacing: 12px; + padding: 12px 24px; } + .media-keys-osd > * { + spacing: 12px; } + .media-keys-osd StIcon { + icon-size: 32px; } + .media-keys-osd StLabel:ltr { + margin-right: 6px; } + .media-keys-osd StLabel:rtl { + margin-left: 6px; } + .media-keys-osd .level { + min-width: 160px; + -barlevel-height: 6px; + -barlevel-background-color: #d0d0d0; + -barlevel-active-background-color: #303030; + -barlevel-amplify-color: #F27835; + -barlevel-amplify-separator-width: 3px; } + .media-keys-osd .level:ltr { + margin-right: 6px; } + .media-keys-osd .level:rtl { + margin-left: 6px; } + .media-keys-osd .level-bar { + border-radius: 20px; + background-color: #303030; } + +.info-osd { + font-size: 1.2em; + font-weight: 700; + text-align: center; } + +.workspace-switch-osd { + min-width: 140px; + margin-bottom: 1em; + border-radius: 20px; + font-weight: bold; + padding: 12px 36px 0 36px; } + .workspace-switch-osd-indicator-box { + spacing: 12px; } + .workspace-switch-osd-indicator { + background-color: rgba(48, 48, 48, 0.5); + padding: 3px; + margin: 15px; + border-radius: 36px; } + .workspace-switch-osd-indicator:active { + background-color: #35a854; + padding: 6px; + margin: 12px; } + +.monitor-label { + border-radius: 0; + color: black; + padding: 12px; + text-align: center; } + +.resize-popup { + color: #303030; + background-color: #e8e8e8; + border-radius: 6px; + padding: 12px; } diff --git a/cinnamon-shell/upstream/dark-assets/switch/switch-off.svg b/cinnamon-shell/upstream/dark-assets/switch/switch-off.svg index 5d6df1f17f..a9af96776f 100644 --- a/cinnamon-shell/upstream/dark-assets/switch/switch-off.svg +++ b/cinnamon-shell/upstream/dark-assets/switch/switch-off.svg @@ -183,7 +183,7 @@ ry="11" rx="11" /> + style="color:#bebebe;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:'Andale Mono';-inkscape-font-specification:'Andale Mono';text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;display:inline;overflow:visible;visibility:visible;opacity:1;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.78124988;marker:none;enable-background:new" /> diff --git a/cinnamon-shell/upstream/dark-assets/switch/switch-on.svg b/cinnamon-shell/upstream/dark-assets/switch/switch-on.svg index a6197cccc5..f330f4dfd5 100644 --- a/cinnamon-shell/upstream/dark-assets/switch/switch-on.svg +++ b/cinnamon-shell/upstream/dark-assets/switch/switch-on.svg @@ -184,7 +184,7 @@ ry="11" rx="11" /> + style="display:inline;opacity:1;fill:#222222;fill-opacity:1;stroke:none" /> + style="display:inline;opacity:1;fill:#222222;fill-opacity:1;stroke:none" /> diff --git a/cinnamon-shell/upstream/mint-y-dark-thumbnail.png b/cinnamon-shell/upstream/mint-y-dark-thumbnail.png index cf25ac4979..a4f1398888 100644 Binary files a/cinnamon-shell/upstream/mint-y-dark-thumbnail.png and b/cinnamon-shell/upstream/mint-y-dark-thumbnail.png differ diff --git a/cinnamon-shell/upstream/mint-y-thumbnail.png b/cinnamon-shell/upstream/mint-y-thumbnail.png index 208cd2c126..7699c00aaa 100644 Binary files a/cinnamon-shell/upstream/mint-y-thumbnail.png and b/cinnamon-shell/upstream/mint-y-thumbnail.png differ diff --git a/cinnamon-shell/upstream/parse-sass.sh b/cinnamon-shell/upstream/parse-sass.sh index b4483da1e8..95e64e7513 100755 --- a/cinnamon-shell/upstream/parse-sass.sh +++ b/cinnamon-shell/upstream/parse-sass.sh @@ -1,4 +1,4 @@ #! /bin/bash -sassc ./sass/cinnamon.scss cinnamon.css -sassc ./sass/cinnamon-dark.scss cinnamon-dark.css \ No newline at end of file +pysassc ./sass/cinnamon.scss cinnamon.css +pysassc ./sass/cinnamon-dark.scss cinnamon-dark.css diff --git a/cinnamon-shell/upstream/sass/_colors.scss b/cinnamon-shell/upstream/sass/_colors.scss index 3d041e1b53..2f70a1e72a 100644 --- a/cinnamon-shell/upstream/sass/_colors.scss +++ b/cinnamon-shell/upstream/sass/_colors.scss @@ -1,36 +1,47 @@ -// When color definition differs for dark and light variant, -// it gets @if ed depending on $variant -// We need to set this first because we use it to tint many -// of the remaining colors -$selected_bg_color: if($variant == 'light', #35a854, #35a854); +// General +$accent_color: if($variant == 'light', #35a854, #35a854); +$radius: 6px; -$base_color: if($variant =='light', mix($selected_bg_color, #f4f4f4, 0%), mix($selected_bg_color, #404040, 0%)); -$text_color: if($variant == 'light', #303030, #D3D3D3); -$bg_color: if($variant == 'light', mix($selected_bg_color, #e8e8e8, 0%), mix($selected_bg_color, #2f2f2f, 0%)); -$fg_color: if($variant =='light', #303030, transparentize(white, 0.13)); +// Panel +$panel_bg: if($variant == 'light', #f0f0f0, #1a1a1a); +$panel_fg: if($variant =='light', #303030, #e1e1e1); -$selected_fg_color: #ffffff; +// Clutter background colors +$bg_color: if($variant == 'light', #e8e8e8, #222222); +$bg_color2: if($variant=='light', #d0d0d0, #303030); +$bg_color3: if($variant == 'light', #b0b0b0, #454545); +$bg_color4: if($variant == 'light', #c0c0c0, #393939); -$borders_color: if($variant =='light', darken($bg_color, 20%), darken($bg_color, 6%)); +// Borders and separators +$borders_color: if($variant =='light', darken($bg_color, 20%), $bg_color2); +$menus_border_color: transparentize(black, 1.0); +$shadow_color: rgba(0, 0, 0, 0.5); +$separator_color: if($variant == 'light', darken($bg_color, 15%), lighten($bg_color, 2%)); -$separator_color: if($variant == 'light', darken($bg_color, 15%), darken($bg_color, 6%)); +// Text +$text_color: if($variant == 'light', #303030, #D3D3D3); +$fg_color: if($variant =='light', #303030, #e1e1e1); +$noaccent_selected_fg_color: if($variant=='light', $text_color, #ffffff); +$selected_fg_color: #ffffff; -$link_color: if($variant == 'light', darken($selected_bg_color,10%), - lighten($selected_bg_color,20%)); + +$link_color: if($variant == 'light', darken($accent_color,10%), + lighten($accent_color,20%)); $warning_color: #F27835; $error_color: #FC4138; $destructive_color: #F04A50; +$osd_destructive_color: if($variant == 'light', #F04A50, #c01c28); $insensitive_fg_color: if($variant == 'light', transparentize($fg_color, 0.45), transparentize($fg_color, 0.55)); -$tooltip_bg_color: transparentize(mix($selected_bg_color, black, 95%), 0.05); +$tooltip_bg_color: transparentize(mix($accent_color, black, 95%), 0.05); $tooltip_fg_color: $selected_fg_color; $tooltip_border_color: #d0d0d0; $osd_fg_color: #c3c3c3; -$osd_bg_color: #353535; +$osd_bg_color: #303030; $osd_button_bg: transparentize(lighten($osd_bg_color, 22%), 0.6); $osd_button_border: transparentize(darken($osd_bg_color, 20%), 0.6); @@ -40,24 +51,13 @@ $osd_entry_border: transparentize(darken($osd_bg_color, 12%), 0.6); $osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 30%); -$panel_bg: $bg_color; -$panel_fg: $fg_color; - -$entry_bg: if($variant=='light', $base_color, lighten($base_color, 0%)); -$entry_border: if($variant == 'light', #cfd6e6, darken($borders_color, 0%)); +$entry_bg: if($variant=='light', $bg_color2, $bg_color2); +$entry_border: if($variant == 'light', #cfd6e6, $borders_color); -$button_bg: if($variant == 'light', lighten($bg_color, 2%), lighten($base_color, 2%)); +$button_bg: if($variant == 'light', $bg_color3, $bg_color2); $button_border: $entry_border; -// Colors used for highlights in places where we don't want to use accents -$noaccent_light_bg_color: #c0c0c0; -$noaccent_light_fg_color: $text_color; -$noaccent_dark_bg_color: #525352; -$noaccent_dark_fg_color: #ffffff; -$noaccent_selected_bg_color: if($variant=='light', $noaccent_light_bg_color, $noaccent_dark_bg_color); -$noaccent_selected_fg_color: if($variant=='light', $noaccent_light_fg_color, $noaccent_dark_fg_color); - -$applet_separator_color: if($variant == 'light', darken($bg_color, 15%), rgba(255,255,255, 0.12)); +$applet_separator_color: $borders_color; $corner_bar_unhighlighted: $applet_separator_color; -$corner_bar_highlighted: if($variant == 'light', darken($applet_separator_color, 10%), opacify($applet_separator_color, .1)); +$corner_bar_highlighted: if($variant == 'light', darken($applet_separator_color, 10%), lighten($applet_separator_color, 10%)); diff --git a/cinnamon-shell/upstream/sass/_common.scss b/cinnamon-shell/upstream/sass/_common.scss index b93ca417fe..b9f53a5fdf 100644 --- a/cinnamon-shell/upstream/sass/_common.scss +++ b/cinnamon-shell/upstream/sass/_common.scss @@ -39,7 +39,7 @@ stage { @include button(osd); &:hover { @include button(osd-hover); } - &:focus { color: $selected_bg_color; } + &:focus { color: $accent_color; } &:active { @include button(osd-active); } &:insensitive { @include button(osd-insensitive); } } @@ -50,7 +50,7 @@ stage { %entry { padding: 7px; caret-size: 1px; - selection-background-color: $selected_bg_color; + selection-background-color: $accent_color; selected-color: $selected_fg_color; transition-duration: 300ms; border-radius: 3px; @@ -65,13 +65,20 @@ stage { warning-color: $warning_color; padding: 0 4px; } + + StLabel.hint-text { color: transparentize($fg_color, 0.7); } + + StIcon.peek-password { + icon-size: 16px; + color: $fg_color; + } } %osd_entry { padding: 7px; caret-size: 1px; caret-color: $osd_fg_color; - selection-background-color: $selected_bg_color; + selection-background-color: $accent_color; selected-color: $selected_fg_color; transition-duration: 300ms; border-radius: 3px; @@ -100,19 +107,19 @@ StScrollBar { } StBin#trough { - background-color: transparentize($base_color, 0.9); + background-color: transparentize($bg_color2, 0.9); border-radius: 8px; } StButton#vhandle, StButton#hhandle { border-radius: 2px; - background-color: mix($fg_color, $bg_color, 40%); + background-color: $bg_color2; border: 0px solid; margin: 0px; - &:hover { background-color: mix($fg_color, $bg_color, 30%); } + &:hover { background-color: $bg_color3; } - &:active { background-color: $selected_bg_color; } + &:active { background-color: $accent_color; } } } @@ -131,8 +138,8 @@ StScrollBar { width: 50px; height: 50px; border-radius: 25px; - background-color: transparentize($selected_bg_color, 0.7); - box-shadow: 0 0 2px 2px $selected_bg_color; + background-color: transparentize($accent_color, 0.7); + box-shadow: 0 0 2px 2px $accent_color; } // @@ -143,7 +150,7 @@ StScrollBar { -slider-height: 0.3em; -slider-background-color: $button_border; //background of the trough -slider-border-color: transparentize($bg_color, 0.7); //trough border color - -slider-active-background-color: $selected_bg_color; //active trough fill + -slider-active-background-color: $accent_color; //active trough fill -slider-active-border-color: transparentize($bg_color, 0.7); //active trough border -slider-border-width: 1px; -slider-handle-radius: 0.5em; @@ -263,37 +270,36 @@ StScrollBar { } // -// Popvers/Menus +// Popovers/Menus // .menu { color: $fg_color; - border: 1px solid $borders_color; - border-radius: 3px; - background-color: transparentize($bg_color, 0.01); + background-color: $bg_color; + box-shadow: 0 0 6px $shadow_color; - &.top { - border-radius: 0 0 3px 3px; + &-top { + border-radius: 0 0 $radius $radius; } - &.bottom { - border-radius: 3px 3px 0 0; + &-bottom { + border-radius: $radius $radius 0 0; } - &.left { - border-radius: 0 3px 3px 0; + &-left { + border-radius: 0 $radius $radius 0; } - &.right { - border-radius: 3px 0 0 3px; + &-right { + border-radius: $radius 0 0 $radius; } } .popup-sub-menu { - background-color: $base_color; + background-color: $bg_color; box-shadow: none; - .popup-menu-item:ltr { padding-right: 1.75em; } - .popup-menu-item:rtl { padding-left: 1.75em; } + .popup-menu-item:ltr { padding-left: 2.5em; } + .popup-menu-item:rtl { padding-right: 2.5em; } StScrollBar { padding: 4px; @@ -305,14 +311,12 @@ StScrollBar { .popup-menu-item { padding: .4em 1.75em; spacing: 1em; - // border: 1px solid transparent; border-left-width: 0; border-right-width: 0; &:active { color: $noaccent_selected_fg_color; - // border-color: transparentize($fg_color, 0.89); - background-color: $noaccent_selected_bg_color; + background-color: $bg_color2; } &:insensitive { color: transparentize($fg_color, 0.5); @@ -326,71 +330,12 @@ StScrollBar { &:insensitive { color: $insensitive_fg_color; } } - -/* This is for popup menus in Cinnamon versions < 3.2 */ -.popup-menu { - color: white; - color: $fg_color; - - &-arrow { icon-size: 16px; } - - .popup-sub-menu { - background-color: $base_color; - box-shadow: none; - - .popup-menu-item:ltr { padding-right: 1.75em; } - .popup-menu-item:rtl { padding-left: 1.75em; } - - StScrollBar { - padding: 4px; - StBin#trough, StBin#vhandle { border-width: 0; } - } - } - - .popup-menu-content { padding: 1em 0em 1em 0em; } - .popup-menu-item { - padding: .4em 1.75em; - spacing: 1em; - border: 1px solid transparent; - border-left-width: 0; - border-right-width: 0; - - &:active { - color: $fg_color; - border-color: transparentize($fg_color, 0.89); - background-color: transparentize($fg_color, 0.92); - } - &:insensitive { - color: transparentize($fg_color, 0.5); - background: none; - } - } - - .popup-inactive-menu-item { //all icons and other graphical elements - color: $fg_color; - - &:insensitive { color: $insensitive_fg_color; } - } - - &-icon { icon-size: 16px; } -} - -.popup-menu-boxpointer { - -arrow-border-radius: 3px; - -arrow-background-color: $bg_color; - -arrow-border-width: 1px; - -arrow-border-color: $borders_color; - -arrow-base: 21px; - -arrow-rise: 9px; - -boxpointer-gap: 2px; -} - /*Scale view context menu*/ .popup-combo-menu { color: $fg_color; border: 1px solid $borders_color; border-radius: 3px; - background-color: $base_color; + background-color: $bg_color2; box-shadow: none; padding: 1em 0em 1em 0em; } @@ -417,7 +362,19 @@ StScrollBar { font-weight: normal; } -.popup-device-menu-item { spacing: .5em; } +.popup-device-menu-item { + spacing: .5em; + + font-weight: bold; + color: $fg_color; + + &:insensitive { color: $fg_color; spacing: 1em;} + + .popup-inactive-menu-item { + font-weight: normal; + color: $fg_color; + } +} .popup-subtitle-menu-item { font-weight: normal; } @@ -546,19 +503,19 @@ StScrollBar { } &-top { - box-shadow: 0 1px $borders_color; + box-shadow: 0 1px $bg_color; } &-bottom { - box-shadow: 0 -1px $borders_color; + box-shadow: 0 -1px $bg_color; } &-left { - box-shadow: 1px 0 $borders_color; + box-shadow: 1px 0 $bg_color; } &-right { - box-shadow: -1px 0 $borders_color; + box-shadow: -1px 0 $bg_color; } &-dummy { @@ -612,18 +569,18 @@ StScrollBar { -cinnamon-caption-spacing: 8px; &:focus { - background-color: $selected_bg_color; + background-color: $accent_color; color: $selected_fg_color; - border: 1px solid $selected_bg_color; + border: 1px solid $accent_color; } } .window-border { - border: 3px $selected_bg_color; + border: 3px $accent_color; border-radius: 2px; background-color: rgba(255,255,255,.05); /* Cover rounded corners and some bad adjustment gaps */ - box-shadow: 0 0 0 1px $selected_bg_color inset; + box-shadow: 0 0 0 1px $accent_color inset; } .overview-empty-placeholder { @@ -641,13 +598,13 @@ StScrollBar { @include entry(osd); &:focus { - border: 1px solid $selected_bg_color; - background-color: $selected_bg_color; + border: 1px solid $accent_color; + background-color: $accent_color; color: $selected_fg_color; font-style: italic; transition-duration: 300; selection-background-color: $selected_fg_color; - selected-color: $selected_bg_color; + selected-color: $accent_color; } } @@ -657,7 +614,7 @@ StScrollBar { border-radius: 2px; &#active { - border: 4px solid $selected_bg_color; + border: 4px solid $accent_color; background-color: black; border-radius: 2px; } @@ -748,8 +705,9 @@ StScrollBar { margin-right: .5em; padding: .5em; min-width: 350px; - border: 1px solid $borders_color; - background-color: $base_color; + border: 1px solid $menus_border_color; + background-color: $bg_color2; + border-radius: $radius; } .calendar-events-no-events-box { @@ -760,7 +718,8 @@ StScrollBar { padding: 6px; &:hover { - background-color: $selected_bg_color; + background-color: $accent_color; + border-radius: $radius; .calendar-events-no-events-icon, .calendar-events-no-events-label { @@ -789,6 +748,8 @@ StScrollBar { .calendar-event-button { border: 1px solid rgba(0,0,0,0); + border-radius-topright: $radius; + border-radius-bottomright: $radius; .calendar-event-time-past { color: transparentize($fg_color, 0.6); @@ -803,7 +764,7 @@ StScrollBar { margin-bottom: .2em; &:all-day { - color: $selected_bg_color; + color: $accent_color; } } .calendar-event-time-future { @@ -833,12 +794,12 @@ StScrollBar { } &:current { font-weight: bold; - color: $selected_bg_color; + color: $accent_color; } } &:hover { - background-color: $selected_bg_color; + background-color: $accent_color; border: 1px solid $borders_color; .calendar-event-time-past, .calendar-event-time-present, @@ -869,7 +830,7 @@ StScrollBar { } .calendar-event-color-strip { - width: 2px; + width: 3px; } .calendar-today-home-button { @@ -893,9 +854,10 @@ StScrollBar { .calendar-today-home-button-enabled { padding: 6px; + border-radius: $radius; &:hover { - background-color: $selected_bg_color; + background-color: $accent_color; .calendar-today-day-label { color: $selected_fg_color @@ -974,7 +936,8 @@ StScrollBar { &:hover { font-weight: bold; color: $selected_fg_color; - background-color: $selected_bg_color; + background-color: $accent_color; + border-radius: $radius; } } @@ -1005,8 +968,9 @@ StScrollBar { .calendar-today { color: $fg_color; - background-color: if($variant == 'light', transparentize($selected_bg_color, 0.6), transparentize($selected_bg_color, 0.6)); + background-color: if($variant == 'light', transparentize($accent_color, 0.6), transparentize($accent_color, 0.6)); border-width: 0; + border-radius: $radius; &:selected { font-weight: bold; @@ -1015,6 +979,7 @@ StScrollBar { .calendar-not-today { color: $fg_color; + border-radius: $radius; &:selected { font-weight: bold; @@ -1048,7 +1013,7 @@ StScrollBar { // #notification { box-shadow: 0 1px 15px 4px $borders_color; - border-top-color: $selected_bg_color; + border-top-color: $accent_color; border-top: 4px; border-radius: 5px; background-color: $bg_color; @@ -1117,8 +1082,8 @@ StScrollBar { .switcher-list { color: $fg_color; border: 1px solid $borders_color; - background-color: $bg_color; - border-radius: 3px; + background-color: $panel_bg; + border-radius: $radius; padding: 20px; > StBoxLayout { @@ -1129,17 +1094,16 @@ StScrollBar { .item-box { padding: 8px; - border-radius: 2px; + border-radius: $radius; &:outlined { padding: 8px; - border: 1px solid $selected_bg_color; + border: 1px solid $accent_color; } &:selected { - color: $selected_fg_color; - background-color: $selected_bg_color; - border: 0px solid $selected_bg_color; + background-color: $bg_color4; + border: 0px solid $accent_color; } } @@ -1195,161 +1159,6 @@ StScrollBar { &:rtl { background-image: url("common-assets/misc/corner-ripple.svg"); } } -// -// Modal dialogs -// -.lightbox { background-color: rgba(0, 0, 0, 0.4); } -.flashspot { background-color: white; } - -.modal-dialog { - background-color: $bg_color; - border: 1px solid $borders_color; - border-radius: 3px; - padding: 5px 10px; - - > StBoxLayout:first-child { - padding: 10px; - } - - &-button-box { - spacing: 0; - margin: 0px; - padding: 10px; - border: none; - background-color: $bg_color; - - .modal-dialog-button { - padding-top: 0; - padding-bottom: 0; - height: 30px; - - @extend %button; - } - } - - .confirm-dialog-title { - text-align: center; - font-weight: bold; - font-size: 1.3em; - padding-bottom: 12px; - } -} - -// -// Run dialog -// -.run-dialog { - padding: 10px 15px 10px 15px; - border: 1px solid $borders_color; - border-radius: 3px; - background-color: $bg_color; - - > * { padding: 0; } - - &-label { - font-size: 1.3em; - font-weight: bold; - color: $fg_color; - padding-bottom: 15px; - text-align: center; - } - - &-description { - color: $fg_color; - padding-top: 15px; - text-align: center; - - &.error { color: $error_color; } - } - - // &-error-label { color: $error_color; } - - // &-error-box { - // padding-top: 15px; - // spacing: 5px; - // } - &-completion-box { - padding-top: 5px; - padding-left: 15px; - font-size: 1em; - } - &-entry { - width: 21em; - height: 1.2em; - padding: 7px; - border-radius: 3px; - caret-color: $osd_fg_color; - selected-color: $selected_fg_color; - selection-background-color: $selected_bg_color; - - @include entry(osd); - - &:focus { @include entry(focus); } - } - .modal-dialog-button-box { - border: none; - box-shadow: none; - background: none; - } -} - -/* CinnamonMountOperation Dialogs */ -.cinnamon-mount-operation-icon { - icon-size: 48px; -} - -.mount-password-reask { - color: $warning_color; -} - -.show-processes-dialog, -.mount-question-dialog { - spacing: 24px; - - &-subject { - padding-top: 10px; - padding-left: 17px; - padding-bottom: 6px; - - &:rtl { - padding-left: 0px; - padding-right: 17px; - } - } - &-description { - padding-left: 17px; - width: 28em; - - &:rtl { padding-right: 17px; } - } -} - -.show-processes-dialog-app-list { - max-height: 200px; - padding-top: 24px; - padding-left: 49px; - padding-right: 32px; - - &:rtl { - padding-right: 49px; - padding-left: 32px; - } - - &-item { - color: #ccc; - - &:hover { color: white } - - &:ltr { padding-right: 1em; } - &:rtl { padding-left: 1em; } - - &-icon:ltr { padding-right: 17px; } - &-icon:rtl { padding-left: 17px; } - - &-name { font-size: 1.1em; } - } -} - // // Magnifier // @@ -1417,17 +1226,19 @@ StScrollBar { &-favorites-box { padding: 10px; transition-duration: 300; - background-color: darken($base_color, 5%); - border: 1px solid $borders_color; + background-color: $bg_color2; + border: 1px solid $menus_border_color; + border-radius: $radius; } &-favorites-button { padding: .9em 1em; border: 1px solid rgba(0,0,0,0); - border-radius: 2px; + border-radius: $radius; &:hover { - background-color: $noaccent_selected_bg_color; + background-color: $bg_color3; + border: 1px solid $menus_border_color; } } @@ -1456,8 +1267,9 @@ StScrollBar { &-selected { padding: 7px; color: $noaccent_selected_fg_color; - background-color: $noaccent_selected_bg_color; - border: 1px solid $borders_color; + background-color: $bg_color2; + border: 1px solid $menus_border_color; + border-radius: $radius; &:highlighted { font-weight: bold; } } @@ -1473,13 +1285,9 @@ StScrollBar { &-selected { padding: 7px; color: $noaccent_selected_fg_color; - background-color: $noaccent_selected_bg_color; - border: 1px solid $borders_color; - } - &:hover { - background-color: mix($noaccent_selected_bg_color, $bg_color, 40%); - border: 1px solid mix($borders_color, $bg_color, 40%); - border-radius: 0px; + background-color: $bg_color2; + border: 1px solid $menus_border_color; + border-radius: $radius; } &-greyed { padding: 7px; @@ -1518,6 +1326,7 @@ StScrollBar { min-height: 16px; font-weight: normal; caret-color: $fg_color; + border-radius: $radius; @extend %entry; } @@ -1531,54 +1340,6 @@ StScrollBar { .menu-context-menu { } -// -// OSD -// -.info-osd { - text-align: center; - font-weight: bold; - spacing: 1em; - padding: 16px; - color: $fg_color; - border: 1px solid $borders_color; - border-radius: 5px; - background-color: $bg_color; -} - -.restart-osd { - font-size: 1.6em; -} - -.workspace-osd { - font-size: 4em; -} - -.osd-window { - text-align: center; - font-weight: bold; - spacing: 1em; - padding: 20px; - - color: $fg_color; - background-color: $bg_color; - border: 1px solid $borders_color; - border-radius: 5px; - - .osd-monitor-label { font-size: 3em; } - - .level { - padding: 0; - height: 0.7em; - background-color: transparentize(black, 0.5); - border-radius: 2px; - } - - .level-bar { - border-radius: 2px; - background-color: $selected_bg_color; - } -} - // // Window list (windowList.js) // @@ -1651,12 +1412,12 @@ StScrollBar { &:focus, &:running { color: $panel_fg; - border-color: $selected_bg_color; + border-color: $accent_color; background-color: transparentize($panel_fg, 0.8); } & .progress { - background-color: transparentize($selected_bg_color, 0.2); + background-color: transparentize($accent_color, 0.2); } } @@ -1669,7 +1430,7 @@ StScrollBar { &-preview { spacing: 6px; color: $fg_color; - border: 1px solid $borders_color; + border: 1px solid $menus_border_color; background-color: $bg_color; border-radius: 3px; padding: 6px 12px 12px 12px; @@ -1731,11 +1492,11 @@ StScrollBar { &:active, &:checked { color: $panel_fg; - border-color: $selected_bg_color; + border-color: $accent_color; } & .progress { - background-color: transparentize($selected_bg_color, 0.2); + background-color: transparentize($accent_color, 0.2); } } @@ -1757,7 +1518,7 @@ StScrollBar { &-badge { border-radius: 9999px; - background-color: $selected_bg_color; + background-color: $accent_color; margin: 0; } @@ -1771,7 +1532,7 @@ StScrollBar { &-thumbnail-menu { color: $fg_color; - border: 1px solid $borders_color; + border: 1px solid $menus_border_color; background-color: $bg_color; border-radius: 3px; padding: 0px; @@ -1787,11 +1548,11 @@ StScrollBar { &:outlined { padding: 8px; - border: 1px solid $selected_bg_color; + border: 1px solid $accent_color; } &:selected { - border: 1px solid $selected_bg_color; + border: 1px solid $accent_color; } } @@ -1927,93 +1688,71 @@ StScrollBar { -slider-height: 0.5em; -slider-background-color: if($variant == 'light', $button_border, darken($bg_color, 5%)); -slider-border-color: rgba(0,0,0,0); - -slider-active-background-color: $selected_bg_color; + -slider-active-background-color: $accent_color; -slider-active-border-color: rgba(0,0,0,0); -slider-border-width: 0px; -slider-handle-radius: 0px; } } -// -// Workspace Switcher applet (workspaceSwitcher.js) -// -#workspaceSwitcher { - spacing: 0px; - padding: 3px; -} +// workspace switcher applet -/* Controls the styling when using the "Simple buttons" option */ -.workspace-switcher { - padding-left: 3px; - padding-right: 3px; +.panel-top, +.panel-bottom { - .panel-left &, - .panel-right & { - padding: 0; - } + .workspace-switcher { padding: 0 4px;} } .workspace-button { - border: 1px solid transparentize(black, 0.6); - background-color: transparentize(black, 0.8); - width: 20px; - height: 14px; - color: transparentize($selected_fg_color, 0.55); - padding: 3px; - padding-top: 4px; - transition-duration: 200; + border: 1px solid $borders_color; + width: 2em; + color: $insensitive_fg_color; + background-color: transparentize($fg_color, 0.95); - &.vertical { - height: 1.5em; - width: 24px; - padding: 0; - padding-top: 3px; - padding-bottom: 3px; - } + &.vertical { height: 2em; } &:outlined { - background-color: $selected_bg_color; - color: $selected_fg_color; + background-color: $bg_color2; + color: $fg_color; - &:hover { - background-color: transparentize($selected_bg_color, 0.3); - color: $selected_fg_color; - } + &:hover { background-color: $bg_color3; } } - &:hover { - background-color: transparentize($fg_color, 0.8); - color: $selected_fg_color; + &:hover { background-color: $bg_color2; } + + &:shaded { // this is a workspace with no open windows + background-color: darken($bg_color, 5%); } } -/* Controls the style when using the "Visual representation" option */ +$workspace_window_color: if($variant == 'light', black, white); + .workspace-graph { - padding: 3px; - spacing: 6px; -} + padding: 4px; + spacing: 4px; -.workspace-graph .workspace { - border: 1px solid transparentize(black, 0.6); - background-color: transparentize(black, 0.8); -} + .workspace { + border: 1px solid transparentize($fg_color, 0.8); + background-color: $bg_color; -.workspace-graph .workspace:active { - border: 1px solid $selected_bg_color; -} + &:active { + border-color: $accent_color; -.workspace-graph .workspace .windows { - -active-window-background: lighten($panel_bg, 15%); - -active-window-border: rgba(0, 0, 0, 0.8); - -inactive-window-background: lighten($panel_bg, 15%); - -inactive-window-border: rgba(0, 0, 0, 0.8); -} + .windows { + -active-window-background: transparentize($workspace_window_color, 0.7); + -active-window-border: transparentize($workspace_window_color, 0.65); + -inactive-window-background: transparentize($workspace_window_color, 0.9); + -inactive-window-border: transparentize($workspace_window_color, 0.85); + } + } -.workspace-graph .workspace:active .windows { - -active-window-background: lighten($panel_bg, 25%); - -active-window-border: rgba(0, 0, 0, 0.8); - -inactive-window-background: lighten($panel_bg, 5%); - -inactive-window-border: rgba(0, 0, 0, 0.8); + .windows { + -active-window-background: transparentize($workspace_window_color, 0.7); + -active-window-border: transparentize($workspace_window_color, 0.65); + -inactive-window-background: transparentize($workspace_window_color, 0.9); + -inactive-window-border: transparentize($workspace_window_color, 0.85); + } + } } // @@ -2029,7 +1768,9 @@ StScrollBar { padding-bottom: 2px; // border-bottom-width: 1px; transition-duration: 200; - &:hover { background-color: $noaccent_selected_bg_color; } + &:hover { + background-color: $bg_color2; + } } &.vertical { @@ -2058,6 +1799,10 @@ StScrollBar { // // Applets (applet.js) // + +//padding and spacing for applets +$applet_padding: 5px; + .applet { &-separator { padding: 1px 4px; @@ -2076,25 +1821,21 @@ StScrollBar { } &-box { - padding-left: 4px; - padding-right: 4px; - spacing: 4px; + padding: 0 $applet_padding; + spacing: $applet_padding; color: $panel_fg; text-shadow: none; transition-duration: 100; text-align: center; &.vertical { - padding-left: 0px; - padding-right: 0px; - padding-top: 3px; - padding-bottom: 3px; + padding: $applet_padding 0; } &:hover, &:checked { color: $noaccent_selected_fg_color; - background-color: $noaccent_selected_bg_color; + background-color: $bg_color2; } &:highlight { @@ -2136,11 +1877,8 @@ StScrollBar { // User Applet // .user-icon { - width: 32px; - height: 32px; - background-color: transparent; - border: none; - border-radius: 0; + border: 1px solid transparentize($fg_color, 0.5); + border-radius: 99px; } .user-label { @@ -2150,26 +1888,22 @@ StScrollBar { margin: 0px; } -// -// Cornerbar Applet -// +// cornerbar applet + .applet-cornerbar { width: 8px; background-color: $corner_bar_unhighlighted; + border: 1px solid $borders_color; - &-box { - padding: 4px 4px; - - &:hover > .applet-cornerbar { - background-color: $corner_bar_highlighted; - } - } + &.vertical { height: 8px; } - &.vertical { - height: 8px; + &-box { + background: none; } } +.applet-cornerbar-box:hover > .applet-cornerbar { background-color: $corner_bar_highlighted; } + // // Desklets (desklet.js) // @@ -2221,8 +1955,8 @@ StScrollBar { } &-drag-placeholder { - border: 2px solid $selected_bg_color; - background-color: transparentize($selected_bg_color, 0.7); + border: 2px solid $accent_color; + background-color: transparentize($accent_color, 0.7); } } @@ -2246,17 +1980,17 @@ StScrollBar { // Tile Preview // .tile-preview { - background-color: transparentize($selected_bg_color, 0.7); - border: 1px solid $selected_bg_color; + background-color: transparentize($accent_color, 0.7); + border: 1px solid $accent_color; - &.snap { background-color: transparentize($selected_bg_color, 0.4); } + &.snap { background-color: transparentize($accent_color, 0.4); } } .tile-hud { - background-color: transparentize($selected_bg_color, 0.7); - border: 1px solid $selected_bg_color; + background-color: transparentize($accent_color, 0.7); + border: 1px solid $accent_color; - &.snap { background-color: transparentize($selected_bg_color, 0.4); } + &.snap { background-color: transparentize($accent_color, 0.4); } &:top { border-top-width: 0px; } &:bottom { border-bottom-width: 0px; } diff --git a/cinnamon-shell/upstream/sass/_dialogs.scss b/cinnamon-shell/upstream/sass/_dialogs.scss new file mode 100644 index 0000000000..178de18450 --- /dev/null +++ b/cinnamon-shell/upstream/sass/_dialogs.scss @@ -0,0 +1,467 @@ +// Modal dialogs + +$base_padding: 6px; +$base_margin: 4px; +$dialog_radius: 18px; +$osd_radius: 20px; + +// Mixin to convert provided font size in pt to em units +@mixin fontsize($size, $base: 16px, $unit: pt) { + // if pt, convert into unitless value with the assumption: 1pt = 1.091px + $adjusted_size: if($unit == pt, $size * 1.091, $size) * 1000; + $rounded_size: round($adjusted_size / $base) / 1000; + font-size: $rounded_size * 1em; +} + +// Button drawing function +@mixin styled_button($type, $tc:$fg_color, $c:$bg_color, $style: null) { + // + // $type: button type, possible values: + // - normal, focus, hover, active, checked, insensitive, default, undecorated + // $c: button bg color, derived from bg_color + // $tc: button text color, derived from fg_color + // $style: button style, possible values: flat, default + // + + // mix input colors to get button background color + $button_bg_color: $button_bg; + + // background color mix override for flat style; the button bg color is the background color input + @if $style == 'flat' { $button_bg_color: $c;} + // background color mix override for default button style + @if $style == 'default' { $button_bg_color: $c;} + + // button base state background colors + $hover_button_bg_color: if($variant =='light', darken($button_bg_color, 10%), lighten($button_bg_color, 10%)); + $active_button_bg_color: if($variant =='light', lighten($hover_button_bg_color, 5%), darken($hover_button_bg_color, 5%)); + $checked_button_bg_color: if($variant =='light', lighten($hover_button_bg_color, 5%), darken($hover_button_bg_color, 5%)); + $insensitive_button_bg_color: if($variant =='light', lighten($button_bg_color, 3%), darken($button_bg_color, 3%)); + $focus_button_bg_border_color: if($variant =='light', darken($button_bg_color, 30%), lighten($button_bg_color, 30%)); + + border: 1px solid $button_bg_color; + + // flat style overrides + @if $style == 'flat' { + $insensitive_button_bg_color: $button_bg_color; + } + + // normal style + @if $type == 'normal' { + color: $tc; + background-color: $button_bg_color; + } + + @if $type == 'focus' { + color: $tc; + background-color: $button_bg_color; + border: 1px solid $focus_button_bg_border_color; + } + + // hover button + @else if $type == 'hover' { + color: $tc; + background-color: $hover_button_bg_color; + } + + // active button + @else if $type == 'active' { + color: $tc; + background-color: $active_button_bg_color; + } + + // checked button + @else if $type == 'checked' { + color: $tc; + background-color: $checked_button_bg_color; + } + + // insensitive button + @else if $type == 'insensitive' { + $insensitive_button_fg_color: transparentize($tc, .5); + color: $insensitive_button_fg_color; + background-color: $insensitive_button_bg_color; + } + + // reset (unstyled button) + @else if $type == 'undecorated' { + background-color: transparent; + border-color: transparent; + box-shadow: none; + + &:insensitive { + background-color: transparent !important; + } + } +} + +%caption_heading { + font-weight: 700; + @include fontsize(9pt); +} + +%caption { + font-weight: 400; + @include fontsize(9pt); +} + +%title_2 { + font-weight: 800; + @include fontsize(15pt); +} + +%title_4 { + font-weight: 700; + @include fontsize(13pt); +} + +%heading { + font-weight: 700; + @include fontsize(11pt); +} + +%flat_styled_button { + @include styled_button(normal, $style: flat); + &:focus { @include styled_button(focus, $style: flat); } + &:hover { @include styled_button(hover, $style: flat); } + &:insensitive { @include styled_button(insensitive, $style: flat); } + &:selected, + &:active { @include styled_button(active, $style: flat); } + &:checked { @include styled_button(checked, $style: flat); } +} + +%dialog_button { + font-weight: bold; + padding: $base_padding * 2; + border-radius: $dialog_radius; + + @include styled_button(normal); + &:focus { @include styled_button(focus); } + &:hover { @include styled_button(hover); } + &:active { @include styled_button(active); } + &:checked { @include styled_button(checked); } + &:insensitive { @include styled_button(insensitive); } +} + +%dialog_button_default { + @extend %dialog_button; + + @include styled_button(normal, $c: $accent_color, $style: default); + &:focus { @include styled_button(focus, $c: $accent_color, $style: default); } + &:hover { @include styled_button(hover, $c: $accent_color, $style: default); } + &:active { @include styled_button(active, $c: $accent_color, $style: default); } + &:checked { @include styled_button(checked, $c: $accent_color, $style: default); } + &:insensitive { + border-color: $borders_color; + + @include styled_button(insensitive); + } +} + +%dialog_button_destructive { + @extend %dialog_button; + + @include styled_button(normal, $c: $osd_destructive_color, $style: default); + &:focus { @include styled_button(focus, $c: $osd_destructive_color, $style: default); } + &:hover { @include styled_button(hover, $c: $osd_destructive_color, $style: default); } + &:active { @include styled_button(active, $c: $osd_destructive_color, $style: default); } + &:checked { @include styled_button(checked, $c: $osd_destructive_color, $style: default); } + &:insensitive { + border-color: $borders_color; + + @include styled_button(insensitive); + } +} + +.dialog { + background-color: $bg_color; + border-radius: $dialog_radius; + border: 1px solid $borders_color; + padding: $base_padding * 3; + + .dialog-content-box { + margin-top: $base_margin * 2; + margin-bottom: $base_margin * 4; + spacing: $base_margin * 8; + max-width: 28em; + } + + .dialog-button { + @extend %dialog_button; + + &:default { @extend %dialog_button_default; } + &:destructive-action { @extend %dialog_button_destructive; } + } + + .confirm-dialog-title { + @extend %title_2; + text-align: center; + } +} + +// Lists in dialogs + +.dialog-list { + spacing: $base_padding * 3; + + .dialog-list-title { + @extend %heading; + text-align: center; + } + + .dialog-list-scrollview { max-height: 200px; } + .dialog-list-box { + spacing: 1em; + + .dialog-list-item { + spacing: 1em; + + .dialog-list-item-title { font-weight: bold; } + .dialog-list-item-description { + @extend %caption; + color: darken($fg_color, 5%); + } + } + } +} + +// End session dialog + +.end-session-dialog { + width: 40em; + + .dialog-content-box { spacing: 0; } + + .dialog-list { + spacing: 0; + + .dialog-list-title { + color: $warning_color; + background-color: tranparentize($warning_color, 0.9); + padding: $base_padding * 1.5; + border-radius: $osd_radius; + margin: $base_margin 0; + } + } +} + +// message dialog + +.message-dialog-content { + spacing: $base_padding * 3; + + .message-dialog-title { + text-align: center; + @extend %title_2; + + &.lightweight { @extend %title_4; } + } + + .message-dialog-description { text-align: center; } + + .message-dialog-caption { + @extend %caption; + text-align: center; + } +} + +// run dialog + +.run-dialog { + + .dialog-content-box { + margin: $base_margin; + } + + &-description { + @extend %caption; + + text-align: center; + color: darken($fg_color, 20%); + + &.error { color: $error_color; } + } + + &-completion-box { + padding-top: $base_padding; + padding-left: $base_padding * 2; + } + + &-entry { + @extend %entry; + + width: 20em; + height: 1.2em; + } +} + +// password or authentication dialog + +.prompt-dialog { + width: 28em; + + .dialog-content-box { + spacing: $base_margin * 4; + margin-bottom: $base_margin * 3; + } + + &-password-entry { + @extend %entry; + width: 20em; + } + + &-password-layout { spacing: $base_margin * 2;} + + &-error-label, + &-info-label, + &-null-label { + text-align: center; + @extend %caption; + } + + &-error-label { color: $error_color; } +} + +// polkit dialog + +.polkit-dialog { + + &-user-layout { + text-align: center; + spacing: 2px; + } + + &-user-combo { + @extend %flat_styled_button; + @extend %heading; + + border-radius: $radius; + padding: $base_padding $base_padding * 6; + + // special case the :insensitive button sinc we want + // the label to be the normal color when there are + // not multiple users + &:insensitive { color: $fg_color; } + } +} + +// Audio selection dialog + +.audio-device-selection-dialog { + min-width: 24em; + + .audio-selection-box { + spacing: $base_padding *2; + + .audio-selection-device { + @extend %flat_styled_button; + border-radius: $osd_radius; + + .audio-selection-device-box { + padding: $base_padding * 2; + spacing: $base_padding * 2; + } + + .audio-selection-device-icon { icon-size: 64px;} + } + } +} + +// various on screen popups + +%osd_base { + background-color: $bg_color; + border: 1px solid $borders_color; + border-radius: $osd_radius; + text-align: center; + padding: $base_padding * 4; +} + +// media keys osd + +.media-keys-osd { + @extend %osd_base; + @extend %title_4; + + margin-bottom: 1em; + border-radius: $osd_radius; + font-weight: bold; + spacing: $base_padding * 2; + padding: $base_padding * 2 $base_padding * 4; + & > * { spacing: $base_padding * 2; } + + StIcon { + icon-size: 32px; + } + + StLabel { + &:ltr { margin-right: $base_padding; } + &:rtl { margin-left: $base_padding; } + } + + .level { + min-width: 160px; + -barlevel-height: 6px; + -barlevel-background-color: $bg_color2; + -barlevel-active-background-color: $fg_color; + -barlevel-amplify-color: $warning_color; + -barlevel-amplify-separator-width: $base_padding * 0.5; + + &:ltr { margin-right: $base_padding; } + &:rtl { margin-left: $base_padding; } + } + + .level-bar { + border-radius: $osd_radius; + background-color: $fg_color; + } +} + +.info-osd { + @extend %osd_base; + + font-size: 1.2em; + font-weight: 700; + text-align: center; +} + +.workspace-switch-osd { + @extend %osd_base; + @extend %title_4; + + min-width: 140px; + margin-bottom: 1em; + border-radius: $osd_radius; + font-weight: bold; + padding: $base_padding * 2 $base_padding * 6 0 $base_padding * 6; + + &-indicator-box { spacing: $base_padding * 2; } + + &-indicator { + background-color: transparentize($fg_color, 0.5); + padding: 3px; + margin: 15px; + border-radius: 36px; + + &:active { + background-color: $accent_color; + padding: 6px; + margin: 12px; + } + } +} + +.monitor-label { + border-radius: 0; + color: black; + padding: $base_padding * 2; + text-align: center; +} + +// resize popup + +.resize-popup { + color: $fg_color; + background-color: $bg_color; + border-radius: $radius; + padding: $base_padding * 2; +} \ No newline at end of file diff --git a/cinnamon-shell/upstream/sass/_drawing.scss b/cinnamon-shell/upstream/sass/_drawing.scss index a3114af4ff..8ccb82a19e 100644 --- a/cinnamon-shell/upstream/sass/_drawing.scss +++ b/cinnamon-shell/upstream/sass/_drawing.scss @@ -9,15 +9,15 @@ @if $t==normal { color: $text_color; - background-color: $base_color; + background-color: $entry_bg; border: 1px solid $entry_border; box-shadow: inset 0 2px 4px transparentize($entry_bg, 0.95); } @if $t==focus { color: $fg_color; - background-color: $base_color; - border: 1px solid $selected_bg_color; + background-color: $entry_bg; + border: 1px solid $accent_color; box-shadow: inset 0 2px 4px transparentize($entry_bg, 0.95); } @@ -37,8 +37,8 @@ @if $t==osd-focus { color: $selected_fg_color; - background-color: $selected_bg_color; - border: 1px solid $selected_bg_color; + background-color: $accent_color; + border: 1px solid $accent_color; box-shadow: inset 0 2px 4px transparentize(black, 0.95); } @@ -73,7 +73,7 @@ // color: $fg_color; background-color: $button_bg; - border: 1px solid $selected_bg_color; + border: 1px solid $accent_color; box-shadow: inset 0 2px 4px transparentize($button_bg, 0.95); } @@ -83,7 +83,7 @@ // color: $fg_color; background-color: lighten($button_bg, 5%); - border: 1px solid $selected_bg_color; + border: 1px solid $accent_color; box-shadow: inset 0 2px 4px transparentize($button_bg, 0.95); } @@ -102,9 +102,9 @@ // pushed button // color: $selected_fg_color; - background-color: $selected_bg_color; - border: 1px solid $selected_bg_color; - box-shadow: inset 0 2px 4px $selected_bg_color; + background-color: $accent_color; + border: 1px solid $accent_color; + box-shadow: inset 0 2px 4px $accent_color; } @else if $t==insensitive { @@ -140,8 +140,8 @@ // active osd button // color: $selected_fg_color; - border: 1px solid $selected_bg_color; - background-color: $selected_bg_color; + border: 1px solid $accent_color; + background-color: $accent_color; } @else if $t==osd-insensitive { diff --git a/cinnamon-shell/upstream/sass/cinnamon-dark.scss b/cinnamon-shell/upstream/sass/cinnamon-dark.scss index 6e75827de5..c114587149 100644 --- a/cinnamon-shell/upstream/sass/cinnamon-dark.scss +++ b/cinnamon-shell/upstream/sass/cinnamon-dark.scss @@ -3,3 +3,4 @@ $variant: 'dark'; @import "_colors"; //use gtk colors @import "_drawing"; @import "_common"; +@import "_dialogs"; // new in Cinnamon 6.4 diff --git a/cinnamon-shell/upstream/sass/cinnamon.scss b/cinnamon-shell/upstream/sass/cinnamon.scss index 83092862c0..bda6c08ea8 100644 --- a/cinnamon-shell/upstream/sass/cinnamon.scss +++ b/cinnamon-shell/upstream/sass/cinnamon.scss @@ -3,3 +3,4 @@ $variant: 'light'; @import "_colors"; //use gtk colors @import "_drawing"; @import "_common"; +@import "_dialogs"; // new in Cinnamon 6.4