pull/85/head
vinceliuice 5 years ago
parent 6b87219f66
commit a01c67a3f5

@ -28,6 +28,22 @@ stage {
color: rgba(0, 0, 0, 0.87);
}
.ripple-pointer-location {
width: 48px;
height: 48px;
border-radius: 24px;
background-color: rgba(195, 216, 243, 0.3);
box-shadow: 0 0 2px 2px #99bdea;
}
.pie-timer {
width: 60px;
height: 60px;
-pie-border-width: 3px;
-pie-border-color: #4586D8;
-pie-background-color: rgba(238, 244, 251, 0.3);
}
/* WIDGETS */
/* Buttons */
.button {
@ -220,7 +236,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
}
.check-box StBoxLayout {
spacing: 8px;
spacing: .8em;
}
.check-box StBin {
@ -312,10 +328,63 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
background-color: rgba(69, 134, 216, 0.3);
}
/* Modal Dialogs */
.headline {
font-size: 15pt;
font-weight: 500;
.lowres-icon {
icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.icon-dropshadow {
icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.select-area-rubberband {
background-color: rgba(69, 134, 216, 0.3);
border: 1px solid #4586D8;
}
.user-icon {
background-size: contain;
color: rgba(255, 255, 255, 0.7);
border-radius: 9999px;
border: 2px rgba(255, 255, 255, 0.7);
}
.user-icon:hover {
color: rgba(255, 255, 255, 0.85);
}
.user-icon StIcon {
background-color: rgba(255, 255, 255, 0);
border-radius: 99px;
}
.user-widget.vertical .user-icon {
icon-size: 128px;
}
.user-widget.vertical .user-icon StIcon {
padding: 14px;
padding-top: 12px;
padding-bottom: 16px;
width: 88px;
height: 88px;
}
.user-widget.horizontal .user-icon {
icon-size: 64px;
}
.user-widget.horizontal .user-icon StIcon {
padding: 8px;
width: 10px;
height: 10px;
}
.caps-lock-warning-label {
text-align: center;
padding-bottom: 8px;
font-size: 9.75pt;
font-weight: 400;
color: #FF6D00;
}
.lightbox {
@ -326,6 +395,12 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
background-color: white;
}
/* Modal Dialogs */
.headline {
font-size: 15pt;
font-weight: 500;
}
.modal-dialog {
border-radius: 24px;
color: rgba(0, 0, 0, 0.87);
@ -335,7 +410,9 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
}
.modal-dialog .modal-dialog-content-box {
padding: 24px;
margin: 32px 40px;
spacing: 32px;
max-width: 28em;
}
.modal-dialog .run-dialog-entry {
@ -414,10 +491,12 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
.modal-dialog-linked-button:first-child {
margin-left: 6px;
margin-right: 0;
border-radius: 100px 0px 0px 100px;
}
.modal-dialog-linked-button:last-child {
margin-left: 0;
margin-right: 6px;
border-right-width: 0px;
border-radius: 0px 100px 100px 0;
@ -437,33 +516,28 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
}
/* Message Dialog */
.message-dialog-main-layout {
padding: 12px 20px 0;
spacing: 12px;
}
.message-dialog-content {
max-width: 28em;
spacing: 20px;
spacing: 18px;
}
.message-dialog-icon {
min-width: 48px;
icon-size: 48px;
.message-dialog-content .message-dialog-title {
text-align: center;
font-size: 18pt;
font-weight: 800;
}
.message-dialog-title {
font-weight: bold;
.message-dialog-content .message-dialog-title.lightweight {
font-size: 13pt;
font-weight: 800;
}
.message-dialog-subtitle {
color: rgba(0, 0, 0, 0.54);
font-weight: bold;
.message-dialog-content .message-dialog-description {
text-align: center;
}
/* End Session Dialog */
.end-session-dialog {
spacing: 42px;
width: 30em;
border: 2px solid transparent;
}
@ -482,83 +556,58 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
background-color: #ff3939;
}
.end-session-dialog-list {
padding-top: 20px;
}
.end-session-dialog-layout {
padding-left: 17px;
}
.end-session-dialog-layout:rtl {
padding-right: 17px;
}
.end-session-dialog-description {
width: 28em;
padding-bottom: 10px;
}
.end-session-dialog-description:rtl {
text-align: right;
}
.end-session-dialog-warning {
width: 28em;
.end-session-dialog .end-session-dialog-battery-warning,
.end-session-dialog .dialog-list-title {
color: #FF6D00;
padding-top: 6px;
}
.end-session-dialog-warning:rtl {
text-align: right;
/* Dialog List */
.dialog-list {
spacing: 18px;
}
.end-session-dialog-logout-icon {
border-radius: 5px;
width: 48px;
height: 48px;
background-size: contain;
.dialog-list .dialog-list-title {
text-align: center;
font-weight: bold;
}
.end-session-dialog-shutdown-icon {
color: rgba(0, 0, 0, 0.38);
width: 48px;
height: 48px;
.dialog-list .dialog-list-scrollview {
max-height: 200px;
}
.end-session-dialog-inhibitor-layout {
spacing: 16px;
max-height: 200px;
padding-right: 65px;
padding-left: 65px;
.dialog-list .dialog-list-box {
spacing: 1em;
}
.end-session-dialog-session-list,
.end-session-dialog-app-list {
.dialog-list .dialog-list-box .dialog-list-item {
spacing: 1em;
}
.end-session-dialog-list-header {
.dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-title {
font-weight: bold;
}
.end-session-dialog-list-header:rtl {
text-align: right;
.dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description {
color: rgba(0, 0, 0, 0.54);
font-size: 15pt;
font-weight: 500;
}
.end-session-dialog-app-list-item,
.end-session-dialog-session-list-item {
spacing: 1em;
/* Run Dialog */
.run-dialog .modal-dialog-content-box {
margin-top: 24px;
margin-bottom: 14px;
}
.end-session-dialog-app-list-item-name,
.end-session-dialog-session-list-item-name {
font-weight: bold;
.run-dialog .run-dialog-entry {
width: 20em;
}
.end-session-dialog-app-list-item-description {
.run-dialog .run-dialog-description {
font-size: 11.25pt;
font-weight: 400;
text-align: center;
color: rgba(0, 0, 0, 0.38);
font-size: 1em;
}
/* ShellMountOperation Dialogs */
@ -634,10 +683,14 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
/* Password or Authentication Dialog */
.prompt-dialog {
width: 34em;
width: 28em;
border: 2px solid transparent;
}
.prompt-dialog .modal-dialog-content-box {
margin-bottom: 24px;
}
.prompt-dialog .message-dialog-main-layout {
spacing: 24px;
padding: 10px;
@ -653,6 +706,43 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
color: rgba(0, 0, 0, 0.87);
}
.prompt-dialog-password-grid {
spacing-rows: 8px;
spacing-columns: 4px;
}
.prompt-dialog-password-grid .prompt-dialog-password-entry {
width: auto;
}
.prompt-dialog-password-grid .prompt-dialog-password-entry:ltr {
margin-left: 20px;
}
.prompt-dialog-password-grid .prompt-dialog-password-entry:rtl {
margin-right: 20px;
}
.prompt-dialog-password-layout {
spacing: 8px;
}
.prompt-dialog-password-entry {
width: 20em;
}
.prompt-dialog-error-label,
.prompt-dialog-info-label,
.prompt-dialog-null-label {
text-align: center;
font-size: 15pt;
font-weight: 500;
}
.prompt-dialog-error-label {
color: #FF6D00;
}
.prompt-dialog-description:rtl {
text-align: right;
}
@ -684,29 +774,29 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
/* Polkit Dialog */
.polkit-dialog-user-layout {
padding-left: 10px;
spacing: 10px;
}
.polkit-dialog-user-layout:rtl {
padding-left: 0px;
padding-right: 10px;
text-align: center;
spacing: 8px;
margin-bottom: 6px;
}
.polkit-dialog-user-root-label {
.polkit-dialog-user-layout .polkit-dialog-user-root-label {
color: #FF6D00;
}
.polkit-dialog-user-icon {
border-radius: 5px;
border-radius: 9999px;
background-size: contain;
width: 48px;
height: 48px;
}
/* Audio selection dialog */
.audio-device-selection-dialog {
spacing: 30px;
.audio-device-selection-dialog .modal-dialog-content-box {
margin-bottom: 28px;
}
.audio-device-selection-dialog .audio-selection-box {
spacing: 20px;
}
.audio-selection-content {
@ -719,10 +809,6 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
text-align: center;
}
.audio-selection-box {
spacing: 20px;
}
.audio-selection-device {
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 12px;
@ -1083,10 +1169,6 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
-arrow-rise: 0;
}
/* fallback menu
- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled
app menu inside the main app window itself rather than the top bar
*/
/* OSD */
.osd-window {
text-align: center;
@ -1141,7 +1223,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
/* App Switcher */
.switcher-popup {
padding: 8px;
spacing: 16px;
spacing: 24px;
}
.switcher-list-item-container {
@ -1272,6 +1354,12 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
background-color: transparent;
}
#panel:overview .panel-corner, #panel.unlock-screen .panel-corner, #panel.login-screen .panel-corner, #panel.lock-screen .panel-corner {
-panel-corner-radius: 0;
-panel-corner-background-color: transparent;
-panel-corner-border-color: transparent;
}
#panel #panelLeft, #panel #panelCenter {
spacing: 0;
}
@ -1479,7 +1567,7 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
}
#calendarArea {
padding: 8px 6px;
padding: 0;
}
.calendar {
@ -1502,20 +1590,22 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
}
.datemenu-displays-box {
spacing: 8px;
spacing: 4px;
}
.datemenu-calendar-column {
spacing: 8px;
spacing: 4px;
border: 0 solid rgba(0, 0, 0, 0.12);
padding: 0 0;
padding: 0 8px;
}
.datemenu-calendar-column:ltr {
margin-right: 8px;
border-left-width: 0;
}
.datemenu-calendar-column:rtl {
margin-left: 8px;
border-right-width: 0;
}
@ -1564,6 +1654,12 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
min-height: 48px;
}
.datemenu-today-button .day-label {
font-size: 15pt;
font-weight: 500;
font-weight: bold;
}
.datemenu-today-button .date-label {
font-size: 18pt;
font-weight: 400;
@ -2156,6 +2252,7 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
-horizontal-spacing: 16px;
-vertical-spacing: 16px;
padding: 0 16px 32px;
spacing: 12px;
}
.window-picker.external-monitor {
@ -2334,6 +2431,10 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
spacing: 30px;
-shell-grid-horizontal-item-size: 136px;
-shell-grid-vertical-item-size: 136px;
row-spacing: 24px;
column-spacing: 24px;
max-row-spacing: 48px;
max-column-spacing: 48px;
}
.icon-grid .overview-icon {
@ -2551,7 +2652,7 @@ StWidget.focused .app-well-app-running-dot {
.app-folder-dialog {
border-radius: 48px;
border: 2px solid rgba(255, 255, 255, 0.15);
spacing: 0;
padding: 12px;
background-color: rgba(34, 34, 34, 0.95);
}
@ -2571,6 +2672,7 @@ StWidget.focused .app-well-app-running-dot {
background-color: rgba(255, 255, 255, 0.15);
selection-background-color: #4586D8;
selected-color: #FFFFFF;
width: 300px;
}
.app-folder-dialog .folder-name-container .folder-name-entry:focus {
@ -2616,6 +2718,19 @@ StWidget.focused .app-well-app-running-dot {
background-color: rgba(255, 255, 255, 0.3);
}
.app-folder-dialog .icon-grid {
row-spacing: 8px;
column-spacing: 20px;
}
.app-folder-dialog .page-indicators {
margin-bottom: 18px;
}
.app-folder-dialog .page-indicators .page-indicator {
padding: 15px 12px;
}
.app-folder-dialog StButton#vhandle, .app-folder-dialog StButton#vhandle:hover, .app-folder-dialog StButton#vhandle:active {
background-color: transparent;
}
@ -2632,6 +2747,19 @@ StWidget.focused .app-well-app-running-dot {
spacing-columns: 4px;
}
.rename-folder-popup .rename-folder-popup-item {
spacing: 4px;
}
.rename-folder-popup .rename-folder-popup-item:ltr, .rename-folder-popup .rename-folder-popup-item:rtl {
padding: 0 8px;
}
.app-menu,
.app-well-menu {
max-width: 27.25em;
}
.workspace-thumbnails {
visible-width: 32px;
spacing: 12px;
@ -2640,15 +2768,20 @@ StWidget.focused .app-well-app-running-dot {
margin: 6px;
}
.workspace-thumbnails .placeholder {
background-image: url("assets/dash-placeholder.svg");
background-size: contain;
height: 24px;
}
.workspace-thumbnail-indicator {
border: 0 solid #4586D8;
border-width: 2px;
border: 2px solid #4586D8;
padding: 6px;
border-radius: 2px;
border-radius: 3px;
}
.search-display > StBoxLayout,
.all-apps,
.search-display > StBoxLayout,
.frequent-apps > StBoxLayout {
padding: 0px 88px 10px 88px;
}
@ -2801,6 +2934,70 @@ StWidget.focused .app-well-app-running-dot {
padding-right: 4px;
}
.hotplug-notification-item {
color: rgba(0, 0, 0, 0.62);
background-color: rgba(0, 0, 0, 0.1);
border-color: transparent;
box-shadow: none;
text-shadow: none;
icon-shadow: none;
padding: 8px;
border-style: solid;
border-width: 1px;
border-left-width: 0;
border-bottom-width: 0;
}
.hotplug-notification-item:insensitive {
color: rgba(0, 0, 0, 0.26);
background-color: rgba(0, 0, 0, 0.1);
border-color: transparent;
box-shadow: none;
text-shadow: none;
icon-shadow: none;
}
.hotplug-notification-item:hover {
color: rgba(0, 0, 0, 0.87);
background-color: rgba(0, 0, 0, 0.15);
border-color: transparent;
box-shadow: none;
text-shadow: none;
icon-shadow: none;
}
.hotplug-notification-item:focus {
color: #4586D8;
text-shadow: none;
icon-shadow: none;
}
.hotplug-notification-item:focus:active {
color: white;
}
.hotplug-notification-item:active {
color: white;
background-color: #4586D8;
border-color: transparent;
box-shadow: none;
text-shadow: none;
icon-shadow: none;
}
.hotplug-notification-item:first-child {
border-radius: 0 0 0 12px;
}
.hotplug-notification-item:last-child {
border-right-width: 0;
border-radius: 0 0 12px 0;
}
.hotplug-notification-item:first-child:last-child {
border-radius: 0 0 12px 12px;
}
.hotplug-transient-box {
spacing: 6px;
padding: 2px 72px 2px 12px;
@ -2975,6 +3172,17 @@ StWidget.focused .app-well-app-running-dot {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
}
.emoji-page .keyboard-key {
background-color: transparent;
border: none;
color: initial;
}
.emoji-panel .keyboard-key:latched {
border-color: #5a94dc;
background-color: #4586D8;
}
.candidate-popup-content {
padding: 8px;
spacing: 0;
@ -3047,7 +3255,7 @@ StWidget.focused .app-well-app-running-dot {
background-size: contain;
border: none;
color: rgba(255, 255, 255, 0.85);
border-radius: 12px;
border-radius: 9999px;
}
.framed-user-icon:hover {
@ -3398,6 +3606,70 @@ StWidget.focused .app-well-app-running-dot {
box-shadow: 0 19px 19px rgba(0, 0, 0, 0.6), 0 15px 6px rgba(0, 0, 0, 0.44);
}
/* Screen Shield */
.unlock-dialog-clock {
color: white;
font-weight: 300;
text-align: center;
spacing: 24px;
padding-bottom: 2.5em;
}
.unlock-dialog-clock-time {
font-size: 64pt;
padding-top: 42px;
font-feature-settings: "tnum";
}
.unlock-dialog-clock-date {
font-size: 16pt;
font-weight: normal;
}
.unlock-dialog-clock-hint {
font-weight: normal;
padding-top: 48px;
}
.unlock-dialog-notifications-container {
margin: 12px 0;
spacing: 6px;
width: 23em;
background-color: transparent;
}
.unlock-dialog-notifications-container .summary-notification-stack-scrollview {
padding-top: 0;
padding-bottom: 0;
}
.unlock-dialog-notifications-container .notification,
.unlock-dialog-notifications-container .unlock-dialog-notification-source {
padding: 12px 6px;
border: none;
background-color: rgba(0, 0, 0, 0.6);
color: rgba(255, 255, 255, 0.85);
border-radius: 12px;
}
.unlock-dialog-notifications-container .notification.critical,
.unlock-dialog-notifications-container .unlock-dialog-notification-source.critical {
background-color: rgba(0, 0, 0, 0.3);
}
.unlock-dialog-notification-label {
padding: 0px 0px 0px 12px;
}
.unlock-dialog-notification-count-text {
weight: bold;
padding: 0 6px;
color: rgba(0, 0, 0, 0.6);
background-color: rgba(255, 255, 255, 0.7);
border-radius: 99px;
margin-right: 12px;
}
#lockDialogGroup {
background: #333333 url("assets/noise-texture.svg");
background-size: cover;

@ -28,6 +28,22 @@ stage {
color: rgba(255, 255, 255, 0.9);
}
.ripple-pointer-location {
width: 48px;
height: 48px;
border-radius: 24px;
background-color: rgba(195, 216, 243, 0.3);
box-shadow: 0 0 2px 2px #99bdea;
}
.pie-timer {
width: 60px;
height: 60px;
-pie-border-width: 3px;
-pie-border-color: #4586D8;
-pie-background-color: rgba(238, 244, 251, 0.3);
}
/* WIDGETS */
/* Buttons */
.button {
@ -220,7 +236,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
}
.check-box StBoxLayout {
spacing: 8px;
spacing: .8em;
}
.check-box StBin {
@ -312,10 +328,63 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
background-color: rgba(69, 134, 216, 0.3);
}
/* Modal Dialogs */
.headline {
font-size: 15pt;
font-weight: 500;
.lowres-icon {
icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.icon-dropshadow {
icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.select-area-rubberband {
background-color: rgba(69, 134, 216, 0.3);
border: 1px solid #4586D8;
}
.user-icon {
background-size: contain;
color: rgba(255, 255, 255, 0.7);
border-radius: 9999px;
border: 2px rgba(255, 255, 255, 0.7);
}
.user-icon:hover {
color: rgba(255, 255, 255, 0.85);
}
.user-icon StIcon {
background-color: rgba(255, 255, 255, 0);
border-radius: 99px;
}
.user-widget.vertical .user-icon {
icon-size: 128px;
}
.user-widget.vertical .user-icon StIcon {
padding: 14px;
padding-top: 12px;
padding-bottom: 16px;
width: 88px;
height: 88px;
}
.user-widget.horizontal .user-icon {
icon-size: 64px;
}
.user-widget.horizontal .user-icon StIcon {
padding: 8px;
width: 10px;
height: 10px;
}
.caps-lock-warning-label {
text-align: center;
padding-bottom: 8px;
font-size: 9.75pt;
font-weight: 400;
color: #FF6D00;
}
.lightbox {
@ -326,6 +395,12 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
background-color: white;
}
/* Modal Dialogs */
.headline {
font-size: 15pt;
font-weight: 500;
}
.modal-dialog {
border-radius: 24px;
color: rgba(255, 255, 255, 0.9);
@ -335,7 +410,9 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
}
.modal-dialog .modal-dialog-content-box {
padding: 24px;
margin: 32px 40px;
spacing: 32px;
max-width: 28em;
}
.modal-dialog .run-dialog-entry {
@ -414,10 +491,12 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
.modal-dialog-linked-button:first-child {
margin-left: 6px;
margin-right: 0;
border-radius: 100px 0px 0px 100px;
}
.modal-dialog-linked-button:last-child {
margin-left: 0;
margin-right: 6px;
border-right-width: 0px;
border-radius: 0px 100px 100px 0;
@ -437,33 +516,28 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
}
/* Message Dialog */
.message-dialog-main-layout {
padding: 12px 20px 0;
spacing: 12px;
}
.message-dialog-content {
max-width: 28em;
spacing: 20px;
spacing: 18px;
}
.message-dialog-icon {
min-width: 48px;
icon-size: 48px;
.message-dialog-content .message-dialog-title {
text-align: center;
font-size: 18pt;
font-weight: 800;
}
.message-dialog-title {
font-weight: bold;
.message-dialog-content .message-dialog-title.lightweight {
font-size: 13pt;
font-weight: 800;
}
.message-dialog-subtitle {
color: rgba(255, 255, 255, 0.7);
font-weight: bold;
.message-dialog-content .message-dialog-description {
text-align: center;
}
/* End Session Dialog */
.end-session-dialog {
spacing: 42px;
width: 30em;
border: 2px solid rgba(255, 255, 255, 0.12);
}
@ -482,83 +556,58 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
background-color: #ff3939;
}
.end-session-dialog-list {
padding-top: 20px;
}
.end-session-dialog-layout {
padding-left: 17px;
}
.end-session-dialog-layout:rtl {
padding-right: 17px;
}
.end-session-dialog-description {
width: 28em;
padding-bottom: 10px;
}
.end-session-dialog-description:rtl {
text-align: right;
}
.end-session-dialog-warning {
width: 28em;
.end-session-dialog .end-session-dialog-battery-warning,
.end-session-dialog .dialog-list-title {
color: #FF6D00;
padding-top: 6px;
}
.end-session-dialog-warning:rtl {
text-align: right;
/* Dialog List */
.dialog-list {
spacing: 18px;
}
.end-session-dialog-logout-icon {
border-radius: 5px;
width: 48px;
height: 48px;
background-size: contain;
.dialog-list .dialog-list-title {
text-align: center;
font-weight: bold;
}
.end-session-dialog-shutdown-icon {
color: rgba(255, 255, 255, 0.5);
width: 48px;
height: 48px;
.dialog-list .dialog-list-scrollview {
max-height: 200px;
}
.end-session-dialog-inhibitor-layout {
spacing: 16px;
max-height: 200px;
padding-right: 65px;
padding-left: 65px;
.dialog-list .dialog-list-box {
spacing: 1em;
}
.end-session-dialog-session-list,
.end-session-dialog-app-list {
.dialog-list .dialog-list-box .dialog-list-item {
spacing: 1em;
}
.end-session-dialog-list-header {
.dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-title {
font-weight: bold;
}
.end-session-dialog-list-header:rtl {
text-align: right;
.dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description {
color: rgba(255, 255, 255, 0.7);
font-size: 15pt;
font-weight: 500;
}
.end-session-dialog-app-list-item,
.end-session-dialog-session-list-item {
spacing: 1em;
/* Run Dialog */
.run-dialog .modal-dialog-content-box {
margin-top: 24px;
margin-bottom: 14px;
}
.end-session-dialog-app-list-item-name,
.end-session-dialog-session-list-item-name {
font-weight: bold;
.run-dialog .run-dialog-entry {
width: 20em;
}
.end-session-dialog-app-list-item-description {
.run-dialog .run-dialog-description {
font-size: 11.25pt;
font-weight: 400;
text-align: center;
color: rgba(255, 255, 255, 0.5);
font-size: 1em;
}
/* ShellMountOperation Dialogs */
@ -634,10 +683,14 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
/* Password or Authentication Dialog */
.prompt-dialog {
width: 34em;
width: 28em;
border: 2px solid rgba(255, 255, 255, 0.12);
}
.prompt-dialog .modal-dialog-content-box {
margin-bottom: 24px;
}
.prompt-dialog .message-dialog-main-layout {
spacing: 24px;
padding: 10px;
@ -653,6 +706,43 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
color: rgba(255, 255, 255, 0.9);
}
.prompt-dialog-password-grid {
spacing-rows: 8px;
spacing-columns: 4px;
}
.prompt-dialog-password-grid .prompt-dialog-password-entry {
width: auto;
}
.prompt-dialog-password-grid .prompt-dialog-password-entry:ltr {
margin-left: 20px;
}
.prompt-dialog-password-grid .prompt-dialog-password-entry:rtl {
margin-right: 20px;
}
.prompt-dialog-password-layout {
spacing: 8px;
}
.prompt-dialog-password-entry {
width: 20em;
}
.prompt-dialog-error-label,
.prompt-dialog-info-label,
.prompt-dialog-null-label {
text-align: center;
font-size: 15pt;
font-weight: 500;
}
.prompt-dialog-error-label {
color: #FF6D00;
}
.prompt-dialog-description:rtl {
text-align: right;
}
@ -684,29 +774,29 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
/* Polkit Dialog */
.polkit-dialog-user-layout {
padding-left: 10px;
spacing: 10px;
}
.polkit-dialog-user-layout:rtl {
padding-left: 0px;
padding-right: 10px;
text-align: center;
spacing: 8px;
margin-bottom: 6px;
}
.polkit-dialog-user-root-label {
.polkit-dialog-user-layout .polkit-dialog-user-root-label {
color: #FF6D00;
}
.polkit-dialog-user-icon {
border-radius: 5px;
border-radius: 9999px;
background-size: contain;
width: 48px;
height: 48px;
}
/* Audio selection dialog */
.audio-device-selection-dialog {
spacing: 30px;
.audio-device-selection-dialog .modal-dialog-content-box {
margin-bottom: 28px;
}
.audio-device-selection-dialog .audio-selection-box {
spacing: 20px;
}
.audio-selection-content {
@ -719,10 +809,6 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
text-align: center;
}
.audio-selection-box {
spacing: 20px;
}
.audio-selection-device {
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
@ -1083,10 +1169,6 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
-arrow-rise: 0;
}
/* fallback menu
- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled
app menu inside the main app window itself rather than the top bar
*/
/* OSD */
.osd-window {
text-align: center;
@ -1141,7 +1223,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
/* App Switcher */
.switcher-popup {
padding: 8px;
spacing: 16px;
spacing: 24px;
}
.switcher-list-item-container {
@ -1272,6 +1354,12 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
background-color: transparent;
}
#panel:overview .panel-corner, #panel.unlock-screen .panel-corner, #panel.login-screen .panel-corner, #panel.lock-screen .panel-corner {
-panel-corner-radius: 0;
-panel-corner-background-color: transparent;
-panel-corner-border-color: transparent;
}
#panel #panelLeft, #panel #panelCenter {
spacing: 0;
}
@ -1479,7 +1567,7 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
}
#calendarArea {
padding: 8px 6px;
padding: 0;
}
.calendar {
@ -1502,20 +1590,22 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
}
.datemenu-displays-box {
spacing: 8px;
spacing: 4px;
}
.datemenu-calendar-column {
spacing: 8px;
spacing: 4px;
border: 0 solid rgba(255, 255, 255, 0.12);
padding: 0 0;
padding: 0 8px;
}
.datemenu-calendar-column:ltr {
margin-right: 8px;
border-left-width: 0;
}
.datemenu-calendar-column:rtl {
margin-left: 8px;
border-right-width: 0;
}
@ -1564,6 +1654,12 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
min-height: 48px;
}
.datemenu-today-button .day-label {
font-size: 15pt;
font-weight: 500;
font-weight: bold;
}
.datemenu-today-button .date-label {
font-size: 18pt;
font-weight: 400;
@ -2156,6 +2252,7 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
-horizontal-spacing: 16px;
-vertical-spacing: 16px;
padding: 0 16px 32px;
spacing: 12px;
}
.window-picker.external-monitor {
@ -2334,6 +2431,10 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
spacing: 30px;
-shell-grid-horizontal-item-size: 136px;
-shell-grid-vertical-item-size: 136px;
row-spacing: 24px;
column-spacing: 24px;
max-row-spacing: 48px;
max-column-spacing: 48px;
}
.icon-grid .overview-icon {
@ -2551,7 +2652,7 @@ StWidget.focused .app-well-app-running-dot {
.app-folder-dialog {
border-radius: 48px;
border: 2px solid rgba(255, 255, 255, 0.15);
spacing: 0;
padding: 12px;
background-color: rgba(34, 34, 34, 0.95);
}
@ -2571,6 +2672,7 @@ StWidget.focused .app-well-app-running-dot {
background-color: rgba(255, 255, 255, 0.15);
selection-background-color: #4586D8;
selected-color: #FFFFFF;
width: 300px;
}
.app-folder-dialog .folder-name-container .folder-name-entry:focus {
@ -2616,6 +2718,19 @@ StWidget.focused .app-well-app-running-dot {
background-color: rgba(255, 255, 255, 0.3);
}
.app-folder-dialog .icon-grid {
row-spacing: 8px;
column-spacing: 20px;
}
.app-folder-dialog .page-indicators {
margin-bottom: 18px;
}
.app-folder-dialog .page-indicators .page-indicator {
padding: 15px 12px;
}
.app-folder-dialog StButton#vhandle, .app-folder-dialog StButton#vhandle:hover, .app-folder-dialog StButton#vhandle:active {
background-color: transparent;
}
@ -2632,6 +2747,19 @@ StWidget.focused .app-well-app-running-dot {
spacing-columns: 4px;
}
.rename-folder-popup .rename-folder-popup-item {
spacing: 4px;
}
.rename-folder-popup .rename-folder-popup-item:ltr, .rename-folder-popup .rename-folder-popup-item:rtl {
padding: 0 8px;
}
.app-menu,
.app-well-menu {
max-width: 27.25em;
}
.workspace-thumbnails {
visible-width: 32px;
spacing: 12px;
@ -2640,15 +2768,20 @@ StWidget.focused .app-well-app-running-dot {
margin: 6px;
}
.workspace-thumbnails .placeholder {
background-image: url("assets/dash-placeholder.svg");
background-size: contain;
height: 24px;
}
.workspace-thumbnail-indicator {
border: 0 solid #4586D8;
border-width: 2px;
border: 2px solid #4586D8;
padding: 6px;
border-radius: 2px;
border-radius: 3px;
}
.search-display > StBoxLayout,
.all-apps,
.search-display > StBoxLayout,
.frequent-apps > StBoxLayout {
padding: 0px 88px 10px 88px;
}
@ -2801,6 +2934,70 @@ StWidget.focused .app-well-app-running-dot {
padding-right: 4px;
}
.hotplug-notification-item {
color: rgba(255, 255, 255, 0.8);
background-color: rgba(255, 255, 255, 0.1);
border-color: transparent;
box-shadow: none;
text-shadow: none;
icon-shadow: none;
padding: 8px;
border-style: solid;
border-width: 1px;
border-left-width: 0;
border-bottom-width: 0;
}
.hotplug-notification-item:insensitive {
color: rgba(255, 255, 255, 0.3);
background-color: rgba(255, 255, 255, 0.1);
border-color: transparent;
box-shadow: none;
text-shadow: none;
icon-shadow: none;
}
.hotplug-notification-item:hover {
color: rgba(255, 255, 255, 0.9);
background-color: rgba(255, 255, 255, 0.15);
border-color: transparent;
box-shadow: none;
text-shadow: none;
icon-shadow: none;
}
.hotplug-notification-item:focus {
color: #4586D8;
text-shadow: none;
icon-shadow: none;
}
.hotplug-notification-item:focus:active {
color: white;
}
.hotplug-notification-item:active {
color: white;
background-color: #4586D8;
border-color: transparent;
box-shadow: none;
text-shadow: none;
icon-shadow: none;
}
.hotplug-notification-item:first-child {
border-radius: 0 0 0 12px;
}
.hotplug-notification-item:last-child {
border-right-width: 0;
border-radius: 0 0 12px 0;
}
.hotplug-notification-item:first-child:last-child {
border-radius: 0 0 12px 12px;
}
.hotplug-transient-box {
spacing: 6px;
padding: 2px 72px 2px 12px;
@ -2975,6 +3172,17 @@ StWidget.focused .app-well-app-running-dot {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
}
.emoji-page .keyboard-key {
background-color: transparent;
border: none;
color: initial;
}
.emoji-panel .keyboard-key:latched {
border-color: #5a94dc;
background-color: #4586D8;
}
.candidate-popup-content {
padding: 8px;
spacing: 0;
@ -3047,7 +3255,7 @@ StWidget.focused .app-well-app-running-dot {
background-size: contain;
border: none;
color: rgba(255, 255, 255, 0.85);
border-radius: 12px;
border-radius: 9999px;
}
.framed-user-icon:hover {
@ -3398,6 +3606,70 @@ StWidget.focused .app-well-app-running-dot {
box-shadow: 0 19px 19px rgba(0, 0, 0, 0.6), 0 15px 6px rgba(0, 0, 0, 0.44);
}
/* Screen Shield */
.unlock-dialog-clock {
color: white;
font-weight: 300;
text-align: center;
spacing: 24px;
padding-bottom: 2.5em;
}
.unlock-dialog-clock-time {
font-size: 64pt;
padding-top: 42px;
font-feature-settings: "tnum";
}
.unlock-dialog-clock-date {
font-size: 16pt;
font-weight: normal;
}
.unlock-dialog-clock-hint {
font-weight: normal;
padding-top: 48px;
}
.unlock-dialog-notifications-container {
margin: 12px 0;
spacing: 6px;
width: 23em;
background-color: transparent;
}
.unlock-dialog-notifications-container .summary-notification-stack-scrollview {
padding-top: 0;
padding-bottom: 0;
}
.unlock-dialog-notifications-container .notification,
.unlock-dialog-notifications-container .unlock-dialog-notification-source {
padding: 12px 6px;
border: none;
background-color: rgba(0, 0, 0, 0.6);
color: rgba(255, 255, 255, 0.85);
border-radius: 12px;
}
.unlock-dialog-notifications-container .notification.critical,
.unlock-dialog-notifications-container .unlock-dialog-notification-source.critical {
background-color: rgba(0, 0, 0, 0.3);
}
.unlock-dialog-notification-label {
padding: 0px 0px 0px 12px;
}
.unlock-dialog-notification-count-text {
weight: bold;
padding: 0 6px;
color: rgba(0, 0, 0, 0.6);
background-color: rgba(255, 255, 255, 0.7);
border-radius: 99px;
margin-right: 12px;
}
#lockDialogGroup {
background: #333333 url("assets/noise-texture.svg");
background-size: cover;

@ -28,6 +28,22 @@ stage {
color: rgba(255, 255, 255, 0.9);
}
.ripple-pointer-location {
width: 48px;
height: 48px;
border-radius: 24px;
background-color: rgba(195, 216, 243, 0.3);
box-shadow: 0 0 2px 2px #99bdea;
}
.pie-timer {
width: 60px;
height: 60px;
-pie-border-width: 3px;
-pie-border-color: #4586D8;
-pie-background-color: rgba(238, 244, 251, 0.3);
}
/* WIDGETS */
/* Buttons */
.button {
@ -220,7 +236,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
}
.check-box StBoxLayout {
spacing: 8px;
spacing: .8em;
}
.check-box StBin {
@ -312,10 +328,63 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
background-color: rgba(69, 134, 216, 0.3);
}
/* Modal Dialogs */
.headline {
font-size: 15pt;
font-weight: 500;
.lowres-icon {
icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.icon-dropshadow {
icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.select-area-rubberband {
background-color: rgba(69, 134, 216, 0.3);
border: 1px solid #4586D8;
}
.user-icon {
background-size: contain;
color: rgba(255, 255, 255, 0.7);
border-radius: 9999px;
border: 2px rgba(255, 255, 255, 0.7);
}
.user-icon:hover {
color: rgba(255, 255, 255, 0.85);
}
.user-icon StIcon {
background-color: rgba(255, 255, 255, 0);
border-radius: 99px;
}
.user-widget.vertical .user-icon {
icon-size: 128px;
}
.user-widget.vertical .user-icon StIcon {
padding: 20px;
padding-top: 18px;
padding-bottom: 22px;
width: 88px;
height: 88px;
}
.user-widget.horizontal .user-icon {
icon-size: 64px;
}
.user-widget.horizontal .user-icon StIcon {
padding: 12px;
width: 15px;
height: 15px;
}
.caps-lock-warning-label {
text-align: center;
padding-bottom: 8px;
font-size: 10.5pt;
font-weight: 400;
color: #FF6D00;
}
.lightbox {
@ -326,6 +395,12 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
background-color: white;
}
/* Modal Dialogs */
.headline {
font-size: 15pt;
font-weight: 500;
}
.modal-dialog {
border-radius: 24px;
color: rgba(255, 255, 255, 0.9);
@ -335,7 +410,9 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
}
.modal-dialog .modal-dialog-content-box {
padding: 24px;
margin: 32px 40px;
spacing: 32px;
max-width: 28em;
}
.modal-dialog .run-dialog-entry {
@ -414,10 +491,12 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
.modal-dialog-linked-button:first-child {
margin-left: 6px;
margin-right: 0;
border-radius: 100px 0px 0px 100px;
}
.modal-dialog-linked-button:last-child {
margin-left: 0;
margin-right: 6px;
border-right-width: 0px;
border-radius: 0px 100px 100px 0;
@ -437,33 +516,28 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
}
/* Message Dialog */
.message-dialog-main-layout {
padding: 12px 20px 0;
spacing: 12px;
}
.message-dialog-content {
max-width: 28em;
spacing: 20px;
spacing: 18px;
}
.message-dialog-icon {
min-width: 48px;
icon-size: 48px;
.message-dialog-content .message-dialog-title {
text-align: center;
font-size: 18pt;
font-weight: 800;
}
.message-dialog-title {
font-weight: bold;
.message-dialog-content .message-dialog-title.lightweight {
font-size: 13pt;
font-weight: 800;
}
.message-dialog-subtitle {
color: rgba(255, 255, 255, 0.7);
font-weight: bold;
.message-dialog-content .message-dialog-description {
text-align: center;
}
/* End Session Dialog */
.end-session-dialog {
spacing: 42px;
width: 30em;
border: 2px solid rgba(255, 255, 255, 0.12);
}
@ -482,83 +556,58 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
background-color: #ff3939;
}
.end-session-dialog-list {
padding-top: 20px;
}
.end-session-dialog-layout {
padding-left: 17px;
}
.end-session-dialog-layout:rtl {
padding-right: 17px;
}
.end-session-dialog-description {
width: 28em;
padding-bottom: 10px;
}
.end-session-dialog-description:rtl {
text-align: right;
}
.end-session-dialog-warning {
width: 28em;
.end-session-dialog .end-session-dialog-battery-warning,
.end-session-dialog .dialog-list-title {
color: #FF6D00;
padding-top: 6px;
}
.end-session-dialog-warning:rtl {
text-align: right;
/* Dialog List */
.dialog-list {
spacing: 18px;
}
.end-session-dialog-logout-icon {
border-radius: 5px;
width: 48px;
height: 48px;
background-size: contain;
.dialog-list .dialog-list-title {
text-align: center;
font-weight: bold;
}
.end-session-dialog-shutdown-icon {
color: rgba(255, 255, 255, 0.5);
width: 48px;
height: 48px;
.dialog-list .dialog-list-scrollview {
max-height: 200px;
}
.end-session-dialog-inhibitor-layout {
spacing: 16px;
max-height: 200px;
padding-right: 65px;
padding-left: 65px;
.dialog-list .dialog-list-box {
spacing: 1em;
}
.end-session-dialog-session-list,
.end-session-dialog-app-list {
.dialog-list .dialog-list-box .dialog-list-item {
spacing: 1em;
}
.end-session-dialog-list-header {
.dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-title {
font-weight: bold;
}
.end-session-dialog-list-header:rtl {
text-align: right;
.dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description {
color: rgba(255, 255, 255, 0.7);
font-size: 15pt;
font-weight: 500;
}
.end-session-dialog-app-list-item,
.end-session-dialog-session-list-item {
spacing: 1em;
/* Run Dialog */
.run-dialog .modal-dialog-content-box {
margin-top: 24px;
margin-bottom: 14px;
}
.end-session-dialog-app-list-item-name,
.end-session-dialog-session-list-item-name {
font-weight: bold;
.run-dialog .run-dialog-entry {
width: 20em;
}
.end-session-dialog-app-list-item-description {
.run-dialog .run-dialog-description {
font-size: 12pt;
font-weight: 400;
text-align: center;
color: rgba(255, 255, 255, 0.5);
font-size: 1em;
}
/* ShellMountOperation Dialogs */
@ -634,10 +683,14 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
/* Password or Authentication Dialog */
.prompt-dialog {
width: 34em;
width: 28em;
border: 2px solid rgba(255, 255, 255, 0.12);
}
.prompt-dialog .modal-dialog-content-box {
margin-bottom: 24px;
}
.prompt-dialog .message-dialog-main-layout {
spacing: 24px;
padding: 10px;
@ -653,6 +706,43 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
color: rgba(255, 255, 255, 0.9);
}
.prompt-dialog-password-grid {
spacing-rows: 8px;
spacing-columns: 4px;
}
.prompt-dialog-password-grid .prompt-dialog-password-entry {
width: auto;
}
.prompt-dialog-password-grid .prompt-dialog-password-entry:ltr {
margin-left: 20px;
}
.prompt-dialog-password-grid .prompt-dialog-password-entry:rtl {
margin-right: 20px;
}
.prompt-dialog-password-layout {
spacing: 8px;
}
.prompt-dialog-password-entry {
width: 20em;
}
.prompt-dialog-error-label,
.prompt-dialog-info-label,
.prompt-dialog-null-label {
text-align: center;
font-size: 15pt;
font-weight: 500;
}
.prompt-dialog-error-label {
color: #FF6D00;
}
.prompt-dialog-description:rtl {
text-align: right;
}
@ -684,29 +774,29 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
/* Polkit Dialog */
.polkit-dialog-user-layout {
padding-left: 10px;
spacing: 10px;
}
.polkit-dialog-user-layout:rtl {
padding-left: 0px;
padding-right: 10px;
text-align: center;
spacing: 8px;
margin-bottom: 6px;
}
.polkit-dialog-user-root-label {
.polkit-dialog-user-layout .polkit-dialog-user-root-label {
color: #FF6D00;
}
.polkit-dialog-user-icon {
border-radius: 5px;
border-radius: 9999px;
background-size: contain;
width: 48px;
height: 48px;
}
/* Audio selection dialog */
.audio-device-selection-dialog {
spacing: 30px;
.audio-device-selection-dialog .modal-dialog-content-box {
margin-bottom: 28px;
}
.audio-device-selection-dialog .audio-selection-box {
spacing: 20px;
}
.audio-selection-content {
@ -719,10 +809,6 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
text-align: center;
}
.audio-selection-box {
spacing: 20px;
}
.audio-selection-device {
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
@ -1083,10 +1169,6 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
-arrow-rise: 0;
}
/* fallback menu
- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled
app menu inside the main app window itself rather than the top bar
*/
/* OSD */
.osd-window {
text-align: center;
@ -1141,7 +1223,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
/* App Switcher */
.switcher-popup {
padding: 8px;
spacing: 16px;
spacing: 24px;
}
.switcher-list-item-container {
@ -1272,6 +1354,12 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
background-color: transparent;
}
#panel:overview .panel-corner, #panel.unlock-screen .panel-corner, #panel.login-screen .panel-corner, #panel.lock-screen .panel-corner {
-panel-corner-radius: 0;
-panel-corner-background-color: transparent;
-panel-corner-border-color: transparent;
}
#panel #panelLeft, #panel #panelCenter {
spacing: 0;
}
@ -1479,7 +1567,7 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
}
#calendarArea {
padding: 8px 6px;
padding: 0;
}
.calendar {
@ -1502,20 +1590,22 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
}
.datemenu-displays-box {
spacing: 8px;
spacing: 6px;
}
.datemenu-calendar-column {
spacing: 8px;
spacing: 6px;
border: 0 solid rgba(255, 255, 255, 0.12);
padding: 0 0;
padding: 0 12px;
}
.datemenu-calendar-column:ltr {
margin-right: 12px;
border-left-width: 0;
}
.datemenu-calendar-column:rtl {
margin-left: 12px;
border-right-width: 0;
}
@ -1526,7 +1616,7 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
.message-list-section-title,
.events-section-title {
min-height: 24px;
padding: 4px 8px;
padding: 6px 8px;
border-radius: 5px;
border: none;
box-shadow: none;
@ -1564,6 +1654,12 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
min-height: 56px;
}
.datemenu-today-button .day-label {
font-size: 15pt;
font-weight: 500;
font-weight: bold;
}
.datemenu-today-button .date-label {
font-size: 18pt;
font-weight: 400;
@ -2156,6 +2252,7 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
-horizontal-spacing: 16px;
-vertical-spacing: 16px;
padding: 0 16px 32px;
spacing: 12px;
}
.window-picker.external-monitor {
@ -2334,6 +2431,10 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
spacing: 30px;
-shell-grid-horizontal-item-size: 136px;
-shell-grid-vertical-item-size: 136px;
row-spacing: 36px;
column-spacing: 36px;
max-row-spacing: 72px;
max-column-spacing: 72px;
}
.icon-grid .overview-icon {
@ -2551,7 +2652,7 @@ StWidget.focused .app-well-app-running-dot {
.app-folder-dialog {
border-radius: 48px;
border: 2px solid rgba(255, 255, 255, 0.15);
spacing: 0;
padding: 12px;
background-color: rgba(34, 34, 34, 0.95);
}
@ -2571,6 +2672,7 @@ StWidget.focused .app-well-app-running-dot {
background-color: rgba(255, 255, 255, 0.15);
selection-background-color: #4586D8;
selected-color: #FFFFFF;
width: 300px;
}
.app-folder-dialog .folder-name-container .folder-name-entry:focus {
@ -2616,6 +2718,19 @@ StWidget.focused .app-well-app-running-dot {
background-color: rgba(255, 255, 255, 0.3);
}
.app-folder-dialog .icon-grid {
row-spacing: 12px;
column-spacing: 30px;
}
.app-folder-dialog .page-indicators {
margin-bottom: 18px;
}
.app-folder-dialog .page-indicators .page-indicator {
padding: 15px 12px;
}
.app-folder-dialog StButton#vhandle, .app-folder-dialog StButton#vhandle:hover, .app-folder-dialog StButton#vhandle:active {
background-color: transparent;
}
@ -2627,9 +2742,22 @@ StWidget.focused .app-well-app-running-dot {
}
.app-folder-icon {
padding: 4px;
spacing-rows: 4px;
spacing-columns: 4px;
padding: 6px;
spacing-rows: 6px;
spacing-columns: 6px;
}
.rename-folder-popup .rename-folder-popup-item {
spacing: 6px;
}
.rename-folder-popup .rename-folder-popup-item:ltr, .rename-folder-popup .rename-folder-popup-item:rtl {
padding: 0 12px;
}
.app-menu,
.app-well-menu {
max-width: 27.25em;
}
.workspace-thumbnails {
@ -2640,15 +2768,20 @@ StWidget.focused .app-well-app-running-dot {
margin: 6px;
}
.workspace-thumbnails .placeholder {
background-image: url("assets/dash-placeholder.svg");
background-size: contain;
height: 24px;
}
.workspace-thumbnail-indicator {
border: 0 solid #4586D8;
border-width: 2px;
border: 2px solid #4586D8;
padding: 6px;
border-radius: 2px;
border-radius: 3px;
}
.search-display > StBoxLayout,
.all-apps,
.search-display > StBoxLayout,
.frequent-apps > StBoxLayout {
padding: 0px 88px 10px 88px;
}
@ -2801,6 +2934,70 @@ StWidget.focused .app-well-app-running-dot {
padding-right: 4px;
}
.hotplug-notification-item {
color: rgba(255, 255, 255, 0.8);
background-color: rgba(255, 255, 255, 0.1);
border-color: transparent;
box-shadow: none;
text-shadow: none;
icon-shadow: none;
padding: 12px;
border-style: solid;
border-width: 1px;
border-left-width: 0;
border-bottom-width: 0;
}
.hotplug-notification-item:insensitive {
color: rgba(255, 255, 255, 0.3);
background-color: rgba(255, 255, 255, 0.1);
border-color: transparent;
box-shadow: none;
text-shadow: none;
icon-shadow: none;
}
.hotplug-notification-item:hover {
color: rgba(255, 255, 255, 0.9);
background-color: rgba(255, 255, 255, 0.15);
border-color: transparent;
box-shadow: none;
text-shadow: none;
icon-shadow: none;
}
.hotplug-notification-item:focus {
color: #4586D8;
text-shadow: none;
icon-shadow: none;
}
.hotplug-notification-item:focus:active {
color: white;
}
.hotplug-notification-item:active {
color: white;
background-color: #4586D8;
border-color: transparent;
box-shadow: none;
text-shadow: none;
icon-shadow: none;
}
.hotplug-notification-item:first-child {
border-radius: 0 0 0 12px;
}
.hotplug-notification-item:last-child {
border-right-width: 0;
border-radius: 0 0 12px 0;
}
.hotplug-notification-item:first-child:last-child {
border-radius: 0 0 12px 12px;
}
.hotplug-transient-box {
spacing: 6px;
padding: 2px 72px 2px 12px;
@ -2975,6 +3172,17 @@ StWidget.focused .app-well-app-running-dot {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
}
.emoji-page .keyboard-key {
background-color: transparent;
border: none;
color: initial;
}
.emoji-panel .keyboard-key:latched {
border-color: #5a94dc;
background-color: #4586D8;
}
.candidate-popup-content {
padding: 8px;
spacing: 0;
@ -3047,7 +3255,7 @@ StWidget.focused .app-well-app-running-dot {
background-size: contain;
border: none;
color: rgba(255, 255, 255, 0.85);
border-radius: 12px;
border-radius: 9999px;
}
.framed-user-icon:hover {
@ -3398,6 +3606,70 @@ StWidget.focused .app-well-app-running-dot {
box-shadow: 0 19px 19px rgba(0, 0, 0, 0.6), 0 15px 6px rgba(0, 0, 0, 0.44);
}
/* Screen Shield */
.unlock-dialog-clock {
color: white;
font-weight: 300;
text-align: center;
spacing: 24px;
padding-bottom: 2.5em;
}
.unlock-dialog-clock-time {
font-size: 64pt;
padding-top: 42px;
font-feature-settings: "tnum";
}
.unlock-dialog-clock-date {
font-size: 16pt;
font-weight: normal;
}
.unlock-dialog-clock-hint {
font-weight: normal;
padding-top: 48px;
}
.unlock-dialog-notifications-container {
margin: 12px 0;
spacing: 6px;
width: 23em;
background-color: transparent;
}
.unlock-dialog-notifications-container .summary-notification-stack-scrollview {
padding-top: 0;
padding-bottom: 0;
}
.unlock-dialog-notifications-container .notification,
.unlock-dialog-notifications-container .unlock-dialog-notification-source {
padding: 12px 6px;
border: none;
background-color: rgba(0, 0, 0, 0.6);
color: rgba(255, 255, 255, 0.85);
border-radius: 12px;
}
.unlock-dialog-notifications-container .notification.critical,
.unlock-dialog-notifications-container .unlock-dialog-notification-source.critical {
background-color: rgba(0, 0, 0, 0.3);
}
.unlock-dialog-notification-label {
padding: 0px 0px 0px 12px;
}
.unlock-dialog-notification-count-text {
weight: bold;
padding: 0 6px;
color: rgba(0, 0, 0, 0.6);
background-color: rgba(255, 255, 255, 0.7);
border-radius: 99px;
margin-right: 12px;
}
#lockDialogGroup {
background: #333333 url("assets/noise-texture.svg");
background-size: cover;

@ -28,6 +28,22 @@ stage {
color: rgba(0, 0, 0, 0.87);
}
.ripple-pointer-location {
width: 48px;
height: 48px;
border-radius: 24px;
background-color: rgba(195, 216, 243, 0.3);
box-shadow: 0 0 2px 2px #99bdea;
}
.pie-timer {
width: 60px;
height: 60px;
-pie-border-width: 3px;
-pie-border-color: #4586D8;
-pie-background-color: rgba(238, 244, 251, 0.3);
}
/* WIDGETS */
/* Buttons */
.button {
@ -220,7 +236,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
}
.check-box StBoxLayout {
spacing: 8px;
spacing: .8em;
}
.check-box StBin {
@ -312,10 +328,63 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
background-color: rgba(69, 134, 216, 0.3);
}
/* Modal Dialogs */
.headline {
font-size: 15pt;
font-weight: 500;
.lowres-icon {
icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.icon-dropshadow {
icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.select-area-rubberband {
background-color: rgba(69, 134, 216, 0.3);
border: 1px solid #4586D8;
}
.user-icon {
background-size: contain;
color: rgba(255, 255, 255, 0.7);
border-radius: 9999px;
border: 2px rgba(255, 255, 255, 0.7);
}
.user-icon:hover {
color: rgba(255, 255, 255, 0.85);
}
.user-icon StIcon {
background-color: rgba(255, 255, 255, 0);
border-radius: 99px;
}
.user-widget.vertical .user-icon {
icon-size: 128px;
}
.user-widget.vertical .user-icon StIcon {
padding: 20px;
padding-top: 18px;
padding-bottom: 22px;
width: 88px;
height: 88px;
}
.user-widget.horizontal .user-icon {
icon-size: 64px;
}
.user-widget.horizontal .user-icon StIcon {
padding: 12px;
width: 15px;
height: 15px;
}
.caps-lock-warning-label {
text-align: center;
padding-bottom: 8px;
font-size: 10.5pt;
font-weight: 400;
color: #FF6D00;
}
.lightbox {
@ -326,6 +395,12 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
background-color: white;
}
/* Modal Dialogs */
.headline {
font-size: 15pt;
font-weight: 500;
}
.modal-dialog {
border-radius: 24px;
color: rgba(0, 0, 0, 0.87);
@ -335,7 +410,9 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
}
.modal-dialog .modal-dialog-content-box {
padding: 24px;
margin: 32px 40px;
spacing: 32px;
max-width: 28em;
}
.modal-dialog .run-dialog-entry {
@ -414,10 +491,12 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
.modal-dialog-linked-button:first-child {
margin-left: 6px;
margin-right: 0;
border-radius: 100px 0px 0px 100px;
}
.modal-dialog-linked-button:last-child {
margin-left: 0;
margin-right: 6px;
border-right-width: 0px;
border-radius: 0px 100px 100px 0;
@ -437,33 +516,28 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
}
/* Message Dialog */
.message-dialog-main-layout {
padding: 12px 20px 0;
spacing: 12px;
}
.message-dialog-content {
max-width: 28em;
spacing: 20px;
spacing: 18px;
}
.message-dialog-icon {
min-width: 48px;
icon-size: 48px;
.message-dialog-content .message-dialog-title {
text-align: center;
font-size: 18pt;
font-weight: 800;
}
.message-dialog-title {
font-weight: bold;
.message-dialog-content .message-dialog-title.lightweight {
font-size: 13pt;
font-weight: 800;
}
.message-dialog-subtitle {
color: rgba(0, 0, 0, 0.54);
font-weight: bold;
.message-dialog-content .message-dialog-description {
text-align: center;
}
/* End Session Dialog */
.end-session-dialog {
spacing: 42px;
width: 30em;
border: 2px solid transparent;
}
@ -482,83 +556,58 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
background-color: #ff3939;
}
.end-session-dialog-list {
padding-top: 20px;
}
.end-session-dialog-layout {
padding-left: 17px;
}
.end-session-dialog-layout:rtl {
padding-right: 17px;
}
.end-session-dialog-description {
width: 28em;
padding-bottom: 10px;
}
.end-session-dialog-description:rtl {
text-align: right;
}
.end-session-dialog-warning {
width: 28em;
.end-session-dialog .end-session-dialog-battery-warning,
.end-session-dialog .dialog-list-title {
color: #FF6D00;
padding-top: 6px;
}
.end-session-dialog-warning:rtl {
text-align: right;
/* Dialog List */
.dialog-list {
spacing: 18px;
}
.end-session-dialog-logout-icon {
border-radius: 5px;
width: 48px;
height: 48px;
background-size: contain;
.dialog-list .dialog-list-title {
text-align: center;
font-weight: bold;
}
.end-session-dialog-shutdown-icon {
color: rgba(0, 0, 0, 0.38);
width: 48px;
height: 48px;
.dialog-list .dialog-list-scrollview {
max-height: 200px;
}
.end-session-dialog-inhibitor-layout {
spacing: 16px;
max-height: 200px;
padding-right: 65px;
padding-left: 65px;
.dialog-list .dialog-list-box {
spacing: 1em;
}
.end-session-dialog-session-list,
.end-session-dialog-app-list {
.dialog-list .dialog-list-box .dialog-list-item {
spacing: 1em;
}
.end-session-dialog-list-header {
.dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-title {
font-weight: bold;
}
.end-session-dialog-list-header:rtl {
text-align: right;
.dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description {
color: rgba(0, 0, 0, 0.54);
font-size: 15pt;
font-weight: 500;
}
.end-session-dialog-app-list-item,
.end-session-dialog-session-list-item {
spacing: 1em;
/* Run Dialog */
.run-dialog .modal-dialog-content-box {
margin-top: 24px;
margin-bottom: 14px;
}
.end-session-dialog-app-list-item-name,
.end-session-dialog-session-list-item-name {
font-weight: bold;
.run-dialog .run-dialog-entry {
width: 20em;
}
.end-session-dialog-app-list-item-description {
.run-dialog .run-dialog-description {
font-size: 12pt;
font-weight: 400;
text-align: center;
color: rgba(0, 0, 0, 0.38);
font-size: 1em;
}
/* ShellMountOperation Dialogs */
@ -634,10 +683,14 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
/* Password or Authentication Dialog */
.prompt-dialog {
width: 34em;
width: 28em;
border: 2px solid transparent;
}
.prompt-dialog .modal-dialog-content-box {
margin-bottom: 24px;
}
.prompt-dialog .message-dialog-main-layout {
spacing: 24px;
padding: 10px;
@ -653,6 +706,43 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
color: rgba(0, 0, 0, 0.87);
}
.prompt-dialog-password-grid {
spacing-rows: 8px;
spacing-columns: 4px;
}
.prompt-dialog-password-grid .prompt-dialog-password-entry {
width: auto;
}
.prompt-dialog-password-grid .prompt-dialog-password-entry:ltr {
margin-left: 20px;
}
.prompt-dialog-password-grid .prompt-dialog-password-entry:rtl {
margin-right: 20px;
}
.prompt-dialog-password-layout {
spacing: 8px;
}
.prompt-dialog-password-entry {
width: 20em;
}
.prompt-dialog-error-label,
.prompt-dialog-info-label,
.prompt-dialog-null-label {
text-align: center;
font-size: 15pt;
font-weight: 500;
}
.prompt-dialog-error-label {
color: #FF6D00;
}
.prompt-dialog-description:rtl {
text-align: right;
}
@ -684,29 +774,29 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
/* Polkit Dialog */
.polkit-dialog-user-layout {
padding-left: 10px;
spacing: 10px;
}
.polkit-dialog-user-layout:rtl {
padding-left: 0px;
padding-right: 10px;
text-align: center;
spacing: 8px;
margin-bottom: 6px;
}
.polkit-dialog-user-root-label {
.polkit-dialog-user-layout .polkit-dialog-user-root-label {
color: #FF6D00;
}
.polkit-dialog-user-icon {
border-radius: 5px;
border-radius: 9999px;
background-size: contain;
width: 48px;
height: 48px;
}
/* Audio selection dialog */
.audio-device-selection-dialog {
spacing: 30px;
.audio-device-selection-dialog .modal-dialog-content-box {
margin-bottom: 28px;
}
.audio-device-selection-dialog .audio-selection-box {
spacing: 20px;
}
.audio-selection-content {
@ -719,10 +809,6 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
text-align: center;
}
.audio-selection-box {
spacing: 20px;
}
.audio-selection-device {
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 12px;
@ -1083,10 +1169,6 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
-arrow-rise: 0;
}
/* fallback menu
- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled
app menu inside the main app window itself rather than the top bar
*/
/* OSD */
.osd-window {
text-align: center;
@ -1141,7 +1223,7 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
/* App Switcher */
.switcher-popup {
padding: 8px;
spacing: 16px;
spacing: 24px;
}
.switcher-list-item-container {
@ -1272,6 +1354,12 @@ StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
background-color: transparent;
}
#panel:overview .panel-corner, #panel.unlock-screen .panel-corner, #panel.login-screen .panel-corner, #panel.lock-screen .panel-corner {
-panel-corner-radius: 0;
-panel-corner-background-color: transparent;
-panel-corner-border-color: transparent;
}
#panel #panelLeft, #panel #panelCenter {
spacing: 0;
}
@ -1479,7 +1567,7 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
}
#calendarArea {
padding: 8px 6px;
padding: 0;
}
.calendar {
@ -1502,20 +1590,22 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
}
.datemenu-displays-box {
spacing: 8px;
spacing: 6px;
}
.datemenu-calendar-column {
spacing: 8px;
spacing: 6px;
border: 0 solid rgba(0, 0, 0, 0.12);
padding: 0 0;
padding: 0 12px;
}
.datemenu-calendar-column:ltr {
margin-right: 12px;
border-left-width: 0;
}
.datemenu-calendar-column:rtl {
margin-left: 12px;
border-right-width: 0;
}
@ -1526,7 +1616,7 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
.message-list-section-title,
.events-section-title {
min-height: 24px;
padding: 4px 8px;
padding: 6px 8px;
border-radius: 5px;
border: none;
box-shadow: none;
@ -1564,6 +1654,12 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
min-height: 56px;
}
.datemenu-today-button .day-label {
font-size: 15pt;
font-weight: 500;
font-weight: bold;
}
.datemenu-today-button .date-label {
font-size: 18pt;
font-weight: 400;
@ -2156,6 +2252,7 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
-horizontal-spacing: 16px;
-vertical-spacing: 16px;
padding: 0 16px 32px;
spacing: 12px;
}
.window-picker.external-monitor {
@ -2334,6 +2431,10 @@ Gjs_ui_panel_ActivitiesButton.panel-button:active, Gjs_ui_panel_ActivitiesButton
spacing: 30px;
-shell-grid-horizontal-item-size: 136px;
-shell-grid-vertical-item-size: 136px;
row-spacing: 36px;
column-spacing: 36px;
max-row-spacing: 72px;
max-column-spacing: 72px;
}
.icon-grid .overview-icon {
@ -2551,7 +2652,7 @@ StWidget.focused .app-well-app-running-dot {
.app-folder-dialog {
border-radius: 48px;
border: 2px solid rgba(255, 255, 255, 0.15);
spacing: 0;
padding: 12px;
background-color: rgba(34, 34, 34, 0.95);
}
@ -2571,6 +2672,7 @@ StWidget.focused .app-well-app-running-dot {
background-color: rgba(255, 255, 255, 0.15);
selection-background-color: #4586D8;
selected-color: #FFFFFF;
width: 300px;
}
.app-folder-dialog .folder-name-container .folder-name-entry:focus {
@ -2616,6 +2718,19 @@ StWidget.focused .app-well-app-running-dot {
background-color: rgba(255, 255, 255, 0.3);
}
.app-folder-dialog .icon-grid {
row-spacing: 12px;
column-spacing: 30px;
}
.app-folder-dialog .page-indicators {
margin-bottom: 18px;
}
.app-folder-dialog .page-indicators .page-indicator {
padding: 15px 12px;
}
.app-folder-dialog StButton#vhandle, .app-folder-dialog StButton#vhandle:hover, .app-folder-dialog StButton#vhandle:active {
background-color: transparent;
}
@ -2627,9 +2742,22 @@ StWidget.focused .app-well-app-running-dot {
}
.app-folder-icon {
padding: 4px;
spacing-rows: 4px;
spacing-columns: 4px;
padding: 6px;
spacing-rows: 6px;
spacing-columns: 6px;
}
.rename-folder-popup .rename-folder-popup-item {
spacing: 6px;
}
.rename-folder-popup .rename-folder-popup-item:ltr, .rename-folder-popup .rename-folder-popup-item:rtl {
padding: 0 12px;
}
.app-menu,
.app-well-menu {
max-width: 27.25em;
}
.workspace-thumbnails {
@ -2640,15 +2768,20 @@ StWidget.focused .app-well-app-running-dot {
margin: 6px;
}
.workspace-thumbnails .placeholder {
background-image: url("assets/dash-placeholder.svg");
background-size: contain;
height: 24px;
}
.workspace-thumbnail-indicator {
border: 0 solid #4586D8;
border-width: 2px;
border: 2px solid #4586D8;
padding: 6px;
border-radius: 2px;
border-radius: 3px;
}
.search-display > StBoxLayout,
.all-apps,
.search-display > StBoxLayout,
.frequent-apps > StBoxLayout {
padding: 0px 88px 10px 88px;
}
@ -2801,6 +2934,70 @@ StWidget.focused .app-well-app-running-dot {
padding-right: 4px;
}
.hotplug-notification-item {
color: rgba(0, 0, 0, 0.62);
background-color: rgba(0, 0, 0, 0.1);
border-color: transparent;
box-shadow: none;
text-shadow: none;
icon-shadow: none;
padding: 12px;
border-style: solid;
border-width: 1px;
border-left-width: 0;
border-bottom-width: 0;
}
.hotplug-notification-item:insensitive {
color: rgba(0, 0, 0, 0.26);
background-color: rgba(0, 0, 0, 0.1);
border-color: transparent;
box-shadow: none;
text-shadow: none;
icon-shadow: none;
}
.hotplug-notification-item:hover {
color: rgba(0, 0, 0, 0.87);
background-color: rgba(0, 0, 0, 0.15);
border-color: transparent;
box-shadow: none;
text-shadow: none;
icon-shadow: none;
}
.hotplug-notification-item:focus {
color: #4586D8;
text-shadow: none;
icon-shadow: none;
}
.hotplug-notification-item:focus:active {
color: white;
}
.hotplug-notification-item:active {
color: white;
background-color: #4586D8;
border-color: transparent;
box-shadow: none;
text-shadow: none;
icon-shadow: none;
}
.hotplug-notification-item:first-child {
border-radius: 0 0 0 12px;
}
.hotplug-notification-item:last-child {
border-right-width: 0;
border-radius: 0 0 12px 0;
}
.hotplug-notification-item:first-child:last-child {
border-radius: 0 0 12px 12px;
}
.hotplug-transient-box {
spacing: 6px;
padding: 2px 72px 2px 12px;
@ -2975,6 +3172,17 @@ StWidget.focused .app-well-app-running-dot {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.24), 0 3px 3px rgba(0, 0, 0, 0.345);
}
.emoji-page .keyboard-key {
background-color: transparent;
border: none;
color: initial;
}
.emoji-panel .keyboard-key:latched {
border-color: #5a94dc;
background-color: #4586D8;
}
.candidate-popup-content {
padding: 8px;
spacing: 0;
@ -3047,7 +3255,7 @@ StWidget.focused .app-well-app-running-dot {
background-size: contain;
border: none;
color: rgba(255, 255, 255, 0.85);
border-radius: 12px;
border-radius: 9999px;
}
.framed-user-icon:hover {
@ -3398,6 +3606,70 @@ StWidget.focused .app-well-app-running-dot {
box-shadow: 0 19px 19px rgba(0, 0, 0, 0.6), 0 15px 6px rgba(0, 0, 0, 0.44);
}
/* Screen Shield */
.unlock-dialog-clock {
color: white;
font-weight: 300;
text-align: center;
spacing: 24px;
padding-bottom: 2.5em;
}
.unlock-dialog-clock-time {
font-size: 64pt;
padding-top: 42px;
font-feature-settings: "tnum";
}
.unlock-dialog-clock-date {
font-size: 16pt;
font-weight: normal;
}
.unlock-dialog-clock-hint {
font-weight: normal;
padding-top: 48px;
}
.unlock-dialog-notifications-container {
margin: 12px 0;
spacing: 6px;
width: 23em;
background-color: transparent;
}
.unlock-dialog-notifications-container .summary-notification-stack-scrollview {
padding-top: 0;
padding-bottom: 0;
}
.unlock-dialog-notifications-container .notification,
.unlock-dialog-notifications-container .unlock-dialog-notification-source {
padding: 12px 6px;
border: none;
background-color: rgba(0, 0, 0, 0.6);
color: rgba(255, 255, 255, 0.85);
border-radius: 12px;
}
.unlock-dialog-notifications-container .notification.critical,
.unlock-dialog-notifications-container .unlock-dialog-notification-source.critical {
background-color: rgba(0, 0, 0, 0.3);
}
.unlock-dialog-notification-label {
padding: 0px 0px 0px 12px;
}
.unlock-dialog-notification-count-text {
weight: bold;
padding: 0 6px;
color: rgba(0, 0, 0, 0.6);
background-color: rgba(255, 255, 255, 0.7);
border-radius: 99px;
margin-right: 12px;
}
#lockDialogGroup {
background: #333333 url("assets/noise-texture.svg");
background-size: cover;

@ -36,6 +36,24 @@ stage {
color: $fg_color;
}
// Pointer location
.ripple-pointer-location {
width: 48px;
height: 48px;
border-radius: 24px; // radius equals the size of the box to give us the curve
background-color: lighten(transparentize($primary_color, 0.7), 30%);
box-shadow: 0 0 2px 2px lighten($primary_color, 20%);
}
// Pointer accessibility notifications
.pie-timer {
width: 60px;
height: 60px;
-pie-border-width: 3px;
-pie-border-color: $primary_color;
-pie-background-color: lighten(transparentize($primary_color, 0.7), 40%);
}
/* WIDGETS */
/* Buttons */
@ -162,7 +180,7 @@ $slider_color: if($variant == 'light', $accent_color, white);
min-height: $medium_size - 8px * 2;
padding: 8px 0;
}
StBoxLayout { spacing: 8px; }
StBoxLayout { spacing: .8em; }
StBin {
width: 24px;
height: 24px;
@ -231,12 +249,74 @@ $slider_color: if($variant == 'light', $accent_color, white);
}
}
/* Modal Dialogs */
// Outline for low res icons
.lowres-icon {
icon-shadow: 0 1px 2px rgba(black, 0.3);
}
// Dropshadow for large icons
.icon-dropshadow {
icon-shadow: 0 1px 2px rgba(black, 0.4);
}
// Rubberband for select-area screenshots
.select-area-rubberband {
background-color: transparentize($primary_color, 0.7);
border: 1px solid $primary_color;
}
// User icon
.user-icon {
background-size: contain;
color: $inverse_secondary_fg_color;
border-radius: $circular_radius;
border: 2px $inverse_secondary_fg_color;
&:hover {
color: $inverse_fg_color;
}
& StIcon {
background-color: transparentize($inverse_secondary_fg_color, 0.95);
border-radius: 99px;
}
}
.user-widget.vertical .user-icon {
icon-size: 128px; // 128px
& StIcon {
padding: $container_padding * 3 + 2px; // 20px
padding-top: $container_padding * 3; // 18 px
padding-bottom: $container_padding * 3 + 4px; // 22px
width: 88px; height: 88px; // 88px;
}
}
.user-widget.horizontal .user-icon {
icon-size: 64px;
& StIcon {
padding: $container_padding * 2 ; // 12px
width: $container_padding * 2.5; height: $container_padding * 2.5; // 40px;
}
}
// Caps-lock warning
.caps-lock-warning-label {
text-align: center;
padding-bottom: 8px;
@include font(body-1);
color: $warning_color;
}
.headline { @include font(title); }
.lightbox { background-color: black; }
.flashspot { background-color: white; }
/* Modal Dialogs */
.headline { @include font(title); }
$mdborder_color: if($variant == 'light', transparent, rgba($white, 0.12));
.modal-dialog {
@ -246,7 +326,9 @@ $mdborder_color: if($variant == 'light', transparent, rgba($white, 0.12));
border: 2px solid $mdborder_color;
box-shadow: $shadow_0;
.modal-dialog-content-box {
padding: 24px;
margin: 32px 40px;
spacing: 32px;
max-width: 28em;
}
.run-dialog-entry { width: 20em; margin-bottom: 6px; }
.run-dialog-error-box {
@ -281,9 +363,11 @@ $mdbt_radius: 100px;
&:first-child {
margin-left: 6px;
margin-right: 0;
border-radius: $mdbt_radius 0px 0px $mdbt_radius;
}
&:last-child {
margin-left: 0;
margin-right: 6px;
border-right-width: 0px;
border-radius: 0px $mdbt_radius $mdbt_radius 0;
@ -302,33 +386,25 @@ $mdbt_radius: 100px;
}
/* Message Dialog */
.message-dialog-main-layout {
padding: 12px 20px 0;
spacing: 12px;
}
.message-dialog-content {
max-width: 28em;
spacing: 20px;
}
.message-dialog-icon {
min-width: 48px;
icon-size: 48px;
}
spacing: 18px;
.message-dialog-title {
font-weight: bold;
}
text-align: center;
font-size: 18pt;
font-weight: 800;
.message-dialog-subtitle {
color: $secondary_fg_color;
font-weight: bold;
&.lightweight {
font-size: 13pt;
font-weight: 800;
}
}
.message-dialog-description { text-align: center; }
}
/* End Session Dialog */
.end-session-dialog {
spacing: 42px;
width: 30em;
border: 2px solid $mdborder_color;
.modal-dialog-linked-button:last-child {
@ -344,78 +420,50 @@ $mdbt_radius: 100px;
background-color: darken($destructive_color, 5%);
}
}
}
.end-session-dialog-list {
padding-top: 20px;
}
.end-session-dialog-layout {
padding-left: 17px;
&:rtl { padding-right: 17px; }
}
.end-session-dialog-description {
width: 28em;
padding-bottom: 10px;
&:rtl {
text-align: right;
}
}
.end-session-dialog-warning {
width: 28em;
.end-session-dialog-battery-warning,
.dialog-list-title {
color: $warning_color;
padding-top: 6px;
&:rtl {
text-align: right;
}
}
.end-session-dialog-logout-icon {
//border: 2px solid #8b8b8b;
border-radius: 5px;
width: 48px;
height: 48px;
background-size: contain;
}
/* Dialog List */
.dialog-list {
spacing: 18px;
.end-session-dialog-shutdown-icon {
color: $hint_fg_color;
width: 48px;
height: 48px;
.dialog-list-title {
text-align: center;
font-weight: bold;
}
.end-session-dialog-inhibitor-layout {
spacing: 16px;
max-height: 200px;
padding-right: 65px;
padding-left: 65px;
}
.dialog-list-scrollview { max-height: 200px; }
.dialog-list-box {
spacing: 1em;
.end-session-dialog-session-list,
.end-session-dialog-app-list {
.dialog-list-item {
spacing: 1em;
}
.end-session-dialog-list-header {
font-weight: bold;
&:rtl { text-align: right; }
.dialog-list-item-title { font-weight: bold; }
.dialog-list-item-description {
color: $secondary_fg_color;
@include font(title);
}
}
.end-session-dialog-app-list-item,
.end-session-dialog-session-list-item {
spacing: 1em;
}
.end-session-dialog-app-list-item-name,
.end-session-dialog-session-list-item-name {
font-weight: bold;
}
.end-session-dialog-app-list-item-description {
/* Run Dialog */
.run-dialog {
.modal-dialog-content-box {
margin-top: 24px;
margin-bottom: 14px;
}
.run-dialog-entry { width: 20em; }
.run-dialog-description {
@include font(subheading);
text-align: center;
color: $hint_fg_color;
font-size: 1em;
}
}
/* ShellMountOperation Dialogs */
@ -480,14 +528,50 @@ $mdbt_radius: 100px;
.prompt-dialog {
//this is the width of the entire modal popup
width: 34em;
width: 28em;
border: 2px solid $mdborder_color;
.modal-dialog-content-box {
margin-bottom: 24px;
}
.message-dialog-main-layout { spacing: 24px; padding: 10px; }
.message-dialog-content { spacing: 16px; }
.message-dialog-title { @include font(title); color: $fg_color; }
}
.prompt-dialog-password-grid {
spacing-rows: 8px;
spacing-columns: 4px;
.prompt-dialog-password-entry {
width: auto;
// 4px (spacing) + 16px (spinner-width)
&:ltr { margin-left: 20px; }
&:rtl { margin-right: 20px; }
}
}
.prompt-dialog-password-layout {
spacing: 8px;
}
.prompt-dialog-password-entry {
width: 20em;
}
.prompt-dialog-error-label,
.prompt-dialog-info-label,
.prompt-dialog-null-label {
text-align: center;
@include font(title);
}
.prompt-dialog-error-label {
color: $warning_color;
}
.prompt-dialog-description:rtl {
text-align: right;
}
@ -517,24 +601,17 @@ $mdbt_radius: 100px;
padding-bottom: 8px;
}
/* Polkit Dialog */
.polkit-dialog-user-layout {
padding-left: 10px;
spacing: 10px;
&:rtl {
padding-left: 0px;
padding-right: 10px;
}
}
text-align: center;
spacing: 8px;
margin-bottom: 6px;
.polkit-dialog-user-root-label {
color: $warning_color;
.polkit-dialog-user-root-label { color: $warning_color; }
}
.polkit-dialog-user-icon {
border-radius: 5px;
border-radius: $circular_radius;
background-size: contain;
width: 48px;
height: 48px;
@ -542,7 +619,8 @@ $mdbt_radius: 100px;
/* Audio selection dialog */
.audio-device-selection-dialog {
spacing: 30px;
.modal-dialog-content-box { margin-bottom: 28px; }
.audio-selection-box { spacing: 20px; }
}
.audio-selection-content {
@ -555,10 +633,6 @@ $mdbt_radius: 100px;
text-align: center;
}
.audio-selection-box {
spacing: 20px;
}
.audio-selection-device {
border: 1px solid $border_color;
border-radius: $bt_radius;
@ -882,13 +956,9 @@ $mdbt_radius: 100px;
// Background menu
.background-menu { -boxpointer-gap: 8px; -arrow-rise: 0; }
/* fallback menu
- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled
app menu inside the main app window itself rather than the top bar
*/
/* OSD */
.osd-window {
@extend %osd-panel;
text-align: center;
font-weight: bold;
spacing: 1em;
@ -935,7 +1005,7 @@ $mdbt_radius: 100px;
/* App Switcher */
.switcher-popup {
padding: 8px;
spacing: 16px;
spacing: 24px;
}
.osd-window,
@ -1068,6 +1138,12 @@ $mdbt_radius: 100px;
&.login-screen,
&.lock-screen {
background-color: transparent;
.panel-corner {
-panel-corner-radius: 0;
-panel-corner-background-color: transparent;
-panel-corner-border-color: transparent;
}
}
#panelLeft, #panelCenter { // spacing between activities<>app menu and such
@ -1095,8 +1171,8 @@ $mdbt_radius: 100px;
.panel-button {
margin: 4px 6px;
-natural-hpadding: $minimum-hpadding;
-minimum-hpadding: $minimum-hpadding;
-natural-hpadding: $minimum_hpadding;
-minimum-hpadding: $minimum_hpadding;
font-weight: bold;
color: $panel_fg_color;
text-shadow: none;
@ -1255,7 +1331,7 @@ Gjs_ui_panel_ActivitiesButton.panel-button {
}
#calendarArea {
padding: 8px 6px;
padding: 0;
}
.calendar {
@ -1274,15 +1350,15 @@ Gjs_ui_panel_ActivitiesButton.panel-button {
}
.datemenu-displays-section { padding-bottom: 0; }
.datemenu-displays-box { spacing: 8px; }
.datemenu-displays-box { spacing: $container_padding; }
.datemenu-calendar-column {
spacing: 8px;
spacing: $container_padding;
border: 0 solid $border_color;
padding: 0 0;
padding: 0 $container_padding * 2;
&:ltr { border-left-width: 0; }
&:rtl { border-right-width: 0; }
&:ltr { margin-right: $container_padding * 2; border-left-width: 0; }
&:rtl { margin-left: $container_padding * 2; border-right-width: 0; }
}
.datemenu-today-button,
@ -1292,7 +1368,7 @@ Gjs_ui_panel_ActivitiesButton.panel-button {
.message-list-section-title,
.events-section-title {
min-height: $menuitem_size - 4px * 2;
padding: 4px 8px;
padding: $container_padding 8px;
border-radius: $material_radius;
border: none;
box-shadow: none;
@ -1310,6 +1386,13 @@ Gjs_ui_panel_ActivitiesButton.panel-button {
.datemenu-today-button {
min-height: $menuitem_size * 2 - 4px * 2;
// weekday label
.day-label {
@include font(title);
font-weight: bold;
}
// date label
.date-label {
@include font(headline);
}
@ -1806,6 +1889,7 @@ Gjs_ui_panel_ActivitiesButton.panel-button {
-horizontal-spacing: 16px;
-vertical-spacing: 16px;
padding: 0 16px 32px;
spacing: 12px;
&.external-monitor { padding: 16px; }
}
@ -1954,6 +2038,11 @@ Gjs_ui_panel_ActivitiesButton.panel-button {
-shell-grid-horizontal-item-size: 136px;
-shell-grid-vertical-item-size: 136px;
row-spacing: $container_padding * 6;
column-spacing: $container_padding * 6;
max-row-spacing: $container_padding * 12;
max-column-spacing: $container_padding * 12;
.overview-icon { icon-size: 96px; }
}
//.app-display { spacing: 20px; }
@ -2160,12 +2249,11 @@ StWidget.focused .app-well-app-running-dot {
}
}
// expanded folder
.app-folder-dialog {
border-radius: $bt_radius * 4;
border: 2px solid rgba(white, 0.15);
spacing: 0;
padding: 12px;
background-color: rgba(#222, 0.95);
& .folder-name-container {
@ -2183,6 +2271,7 @@ StWidget.focused .app-well-app-running-dot {
background-color: rgba(white, 0.15);
selection-background-color: $primary_color;
selected-color: $light_fg_color;
width: 300px;
&:focus {
background-color: rgba(white, 0.25);
@ -2219,21 +2308,48 @@ StWidget.focused .app-well-app-running-dot {
}
}
& .icon-grid {
row-spacing: $container_padding * 2;
column-spacing: $container_padding * 5;
}
& .page-indicators {
margin-bottom: 18px;
.page-indicator {
padding: 15px 12px;
}
}
& StButton#vhandle,
& StButton#vhandle:hover,
& StButton#vhandle:active { background-color: transparent; }
}
.app-folder-dialog-container {
padding: $container-padding;
padding: $container_padding;
width: 600px;
height: 600px;
}
.app-folder-icon {
padding: 4px;
spacing-rows: 4px;
spacing-columns: 4px;
padding: $container_padding;
spacing-rows: $container_padding;
spacing-columns: $container_padding;
}
// Rename popup for app folders
.rename-folder-popup {
.rename-folder-popup-item {
spacing: $container_padding;
&:ltr, &:rtl { padding: 0 $container_padding * 2; }
}
}
// right-click app menu
.app-menu,
.app-well-menu {
max-width: 27.25em;
}
// Workspace pager
@ -2246,18 +2362,23 @@ StWidget.focused .app-well-app-running-dot {
margin: 6px;
//border-width: 0; //fixme: can't have non unoform borders :(
// &:rtl { border-radius: $material_radius; }
.placeholder {
background-image: url("assets/dash-placeholder.svg");
background-size: contain;
height: 24px;
}
}
.workspace-thumbnail-indicator {
border: 0 solid $primary_color;
border-width: 2px;
border: 2px solid $primary_color;
padding: 6px;
border-radius: 2px;
border-radius: 3px;
}
//Some hacks I don't even
.search-display > StBoxLayout,
.all-apps,
.search-display > StBoxLayout,
.frequent-apps > StBoxLayout {
// horizontal padding to make sure scrollbars or dash don't overlap content
padding: 0px 88px 10px 88px;
@ -2313,6 +2434,8 @@ StWidget.focused .app-well-app-running-dot {
&:active { background-color: $track_color; color: $fg_color; }
}
}
// counter
.summary-source-counter {
font-size: 1em;
font-weight: bold;
@ -2349,13 +2472,43 @@ StWidget.focused .app-well-app-running-dot {
&:rtl { padding-left: 0; padding-right: 4px; }
}
%bubble_button {
@include button(normal);
padding: $container_padding * 2;
border-style: solid;
border-width: 0;
border-left-width: 0;
border-bottom-width: 0;
&:insensitive { @include button(insensitive); }
&:hover { @include button(hover); }
&:focus { @include button(focus); }
&:active { @include button(active); }
// radius is 2 pixel less to fit in bubble
&:first-child {
border-radius: 0 0 0 $bt_radius;
}
&:last-child {
border-right-width: 0;
border-radius: 0 0 $bt_radius 0;
}
&:first-child:last-child {
border-radius: 0 0 $bt_radius $bt_radius;
}
}
//hotplug
.hotplug-transient-box {
spacing: 6px;
padding: 2px 72px 2px 12px;
}
.hotplug-notification-item {
padding: 2px 10px;
@extend %bubble_button;
&:focus { padding: 1px 71px 1px 11px; }
}
@ -2486,6 +2639,22 @@ StWidget.focused .app-well-app-running-dot {
box-shadow: $shadow_2;
}
// emoji
.emoji-page {
.keyboard-key {
background-color: transparent;
border: none;
color: initial;
}
}
.emoji-panel {
.keyboard-key:latched {
border-color: lighten($primary_color, 5%);
background-color: $primary_color;
}
}
// IBus Candidate Popup
.candidate-popup-content {
@ -2531,7 +2700,7 @@ StWidget.focused .app-well-app-running-dot {
background-size: contain;
border: none;
color: $inverse_fg_color;
border-radius: $bt_radius;
border-radius: $circular_radius;
&:hover {
border-color: $inverse_fg_color;
color: $inverse_fg_color;
@ -2730,6 +2899,67 @@ StWidget.focused .app-well-app-running-dot {
box-shadow: $shadow_5;
}
/* Screen Shield */
.unlock-dialog-clock {
color: white;
font-weight: 300;
text-align: center;
spacing: 24px;
padding-bottom: 2.5em;
}
.unlock-dialog-clock-time {
font-size: 64pt;
padding-top: 42px;
font-feature-settings: "tnum";
}
.unlock-dialog-clock-date {
font-size: 16pt;
font-weight: normal;
}
.unlock-dialog-clock-hint {
font-weight: normal;
padding-top: 48px;
}
.unlock-dialog-notifications-container {
margin: 12px 0;
spacing: 6px;
width: 23em;
background-color: transparent;
.summary-notification-stack-scrollview {
padding-top: 0;
padding-bottom: 0;
}
.notification,
.unlock-dialog-notification-source {
padding: 12px 6px;
border: none;
background-color: $bg_color;
color: $inverse_fg_color;
border-radius: $bt_radius;
&.critical { background-color: $alt_bg_color; }
}
}
.unlock-dialog-notification-label {
padding: 0px 0px 0px 12px;
}
.unlock-dialog-notification-count-text {
weight: bold;
padding: 0 6px;
color: $bg_color;
background-color: $inverse_secondary_fg_color;
border-radius: 99px;
margin-right: 12px;
}
#lockDialogGroup {
background: #333333 url("assets/noise-texture.svg");
background-size: cover;

@ -26,7 +26,7 @@ $medium_size: if($laptop == 'false', 36px, 32px);
$large_size: if($laptop == 'false', 48px, 44px);
$container_padding: if($laptop == 'false', 6px, 4px);
$minimum-hpadding: if($laptop == 'false', 4px, 2px);
$minimum_hpadding: if($laptop == 'false', 4px, 2px);
$bar_size: 4px;
$menuitem_size: if($laptop == 'false', 32px, 28px);

Loading…
Cancel
Save