diff --git a/debian/control b/debian/control
index cd098451..cb4fd437 100644
--- a/debian/control
+++ b/debian/control
@@ -64,7 +64,7 @@ Depends:
plymouth-label,
${misc:Depends},
Breaks:
- gnome-shell (<< 40.2),
+ gnome-shell (<< 42.0),
kali-defaults (<< 2019.4.0),
kali-desktop-xfce (<< 2020.2.18),
kali-menu (<< 2019.4.4),
diff --git a/debian/kali-themes.postinst b/debian/kali-themes.postinst
index 20a480f6..d98e6cd9 100644
--- a/debian/kali-themes.postinst
+++ b/debian/kali-themes.postinst
@@ -113,15 +113,6 @@ if [ "$1" = "configure" ]; then
# Install remaining new files
install_all
fi
- # Disable GNOME backgrounds
- file=/usr/share/gnome-background-properties/gnome-backgrounds.xml
- if [ -e $file ]; then
- diverted_file=$(dirname $file)/disabled/$(basename $file)
- mkdir -p "$(dirname $diverted_file)"
- dpkg-divert --rename --package kali-themes \
- --divert "$diverted_file" \
- --add "$file"
- fi
# Configure /root/.face to have a red-background avatar
if [ ! -e /root/.face ]; then
cp /usr/share/kali-themes/.face-root.svg /root/.face
diff --git a/share/themes/Kali-Dark/gnome-shell/assets/calendar-today-light.svg b/share/themes/Kali-Dark/gnome-shell/assets/calendar-today-light.svg
new file mode 100644
index 00000000..b63f6e03
--- /dev/null
+++ b/share/themes/Kali-Dark/gnome-shell/assets/calendar-today-light.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/share/themes/Kali-Dark/gnome-shell/assets/calendar-today.svg b/share/themes/Kali-Dark/gnome-shell/assets/calendar-today.svg
index 5e77084c..daf86ec0 100644
--- a/share/themes/Kali-Dark/gnome-shell/assets/calendar-today.svg
+++ b/share/themes/Kali-Dark/gnome-shell/assets/calendar-today.svg
@@ -1,178 +1 @@
-
-
-
-
+
\ No newline at end of file
diff --git a/share/themes/Kali-Dark/gnome-shell/assets/checkbox-dark.svg b/share/themes/Kali-Dark/gnome-shell/assets/checkbox-dark.svg
deleted file mode 100644
index 4a0881f5..00000000
--- a/share/themes/Kali-Dark/gnome-shell/assets/checkbox-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/share/themes/Kali-Dark/gnome-shell/assets/checkbox-focused-dark.svg b/share/themes/Kali-Dark/gnome-shell/assets/checkbox-focused-dark.svg
deleted file mode 100644
index 30d7919b..00000000
--- a/share/themes/Kali-Dark/gnome-shell/assets/checkbox-focused-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/share/themes/Kali-Dark/gnome-shell/assets/checkbox-focused.svg b/share/themes/Kali-Dark/gnome-shell/assets/checkbox-focused.svg
index 248c5256..0339addf 100644
--- a/share/themes/Kali-Dark/gnome-shell/assets/checkbox-focused.svg
+++ b/share/themes/Kali-Dark/gnome-shell/assets/checkbox-focused.svg
@@ -1 +1 @@
-
+
diff --git a/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-dark.svg b/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-dark.svg
deleted file mode 100644
index f4c27c00..00000000
--- a/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-focused-dark.svg b/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-focused-dark.svg
deleted file mode 100644
index 7d5e726f..00000000
--- a/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-focused-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-focused-light.svg b/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-focused-light.svg
new file mode 100644
index 00000000..4f0c5720
--- /dev/null
+++ b/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-focused-light.svg
@@ -0,0 +1 @@
+
diff --git a/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-focused.svg b/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-focused.svg
index 776536af..17f3bc69 100644
--- a/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-focused.svg
+++ b/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-focused.svg
@@ -1 +1 @@
-
+
diff --git a/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-light.svg b/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-light.svg
new file mode 100644
index 00000000..569f033f
--- /dev/null
+++ b/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off-light.svg
@@ -0,0 +1 @@
+
diff --git a/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off.svg b/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off.svg
index 33d5514f..59f77728 100644
--- a/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off.svg
+++ b/share/themes/Kali-Dark/gnome-shell/assets/checkbox-off.svg
@@ -1 +1 @@
-
+
diff --git a/share/themes/Kali-Dark/gnome-shell/assets/checkbox.svg b/share/themes/Kali-Dark/gnome-shell/assets/checkbox.svg
index 8f0f0efd..42434726 100644
--- a/share/themes/Kali-Dark/gnome-shell/assets/checkbox.svg
+++ b/share/themes/Kali-Dark/gnome-shell/assets/checkbox.svg
@@ -1 +1 @@
-
+
diff --git a/share/themes/Kali-Dark/gnome-shell/assets/kali-dragon-dark.svg b/share/themes/Kali-Dark/gnome-shell/assets/kali-dragon-dark.svg
deleted file mode 100644
index d1a6f293..00000000
--- a/share/themes/Kali-Dark/gnome-shell/assets/kali-dragon-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/share/themes/Kali-Dark/gnome-shell/assets/kali-dragon.svg b/share/themes/Kali-Dark/gnome-shell/assets/kali-dragon.svg
deleted file mode 100644
index a5be911f..00000000
--- a/share/themes/Kali-Dark/gnome-shell/assets/kali-dragon.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/share/themes/Kali-Dark/gnome-shell/assets/toggle-off-dark.svg b/share/themes/Kali-Dark/gnome-shell/assets/toggle-off-dark.svg
deleted file mode 100644
index 3ea0ddd4..00000000
--- a/share/themes/Kali-Dark/gnome-shell/assets/toggle-off-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/share/themes/Kali-Dark/gnome-shell/assets/toggle-off-light.svg b/share/themes/Kali-Dark/gnome-shell/assets/toggle-off-light.svg
new file mode 100644
index 00000000..42c7d7f1
--- /dev/null
+++ b/share/themes/Kali-Dark/gnome-shell/assets/toggle-off-light.svg
@@ -0,0 +1 @@
+
diff --git a/share/themes/Kali-Dark/gnome-shell/assets/toggle-off.svg b/share/themes/Kali-Dark/gnome-shell/assets/toggle-off.svg
index 178435fc..9f239682 100644
--- a/share/themes/Kali-Dark/gnome-shell/assets/toggle-off.svg
+++ b/share/themes/Kali-Dark/gnome-shell/assets/toggle-off.svg
@@ -1 +1 @@
-
+
diff --git a/share/themes/Kali-Dark/gnome-shell/assets/toggle-on-dark.svg b/share/themes/Kali-Dark/gnome-shell/assets/toggle-on-dark.svg
deleted file mode 100644
index e814fbba..00000000
--- a/share/themes/Kali-Dark/gnome-shell/assets/toggle-on-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/share/themes/Kali-Dark/gnome-shell/assets/toggle-on-light.svg b/share/themes/Kali-Dark/gnome-shell/assets/toggle-on-light.svg
new file mode 100644
index 00000000..cb6c6f87
--- /dev/null
+++ b/share/themes/Kali-Dark/gnome-shell/assets/toggle-on-light.svg
@@ -0,0 +1 @@
+
diff --git a/share/themes/Kali-Dark/gnome-shell/assets/toggle-on.svg b/share/themes/Kali-Dark/gnome-shell/assets/toggle-on.svg
index 47e93acb..0178478e 100644
--- a/share/themes/Kali-Dark/gnome-shell/assets/toggle-on.svg
+++ b/share/themes/Kali-Dark/gnome-shell/assets/toggle-on.svg
@@ -1 +1 @@
-
+
diff --git a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css
index 8b311138..c24c5448 100644
--- a/share/themes/Kali-Dark/gnome-shell/gnome-shell.css
+++ b/share/themes/Kali-Dark/gnome-shell/gnome-shell.css
@@ -23,25 +23,21 @@ stage {
color: #eeeeec; }
/* Common Stylings */
-.search-statustext {
- font-size: 2em;
- font-weight: bold;
- color: white; }
-
-.workspace-switcher-container, .switcher-list, .resize-popup, .osd-window {
+.screenshot-ui-panel, .workspace-switcher, .switcher-list, .resize-popup, .osd-window {
color: white;
background-color: #303340;
- border-radius: 20px;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 999px;
padding: 12px; }
.workspace-thumbnails .workspace-thumbnail {
color: white;
background-color: rgba(255, 255, 255, 0.1); }
-.app-well-app .overview-icon,
-.grid-search-result .overview-icon, .show-apps .overview-icon, .list-search-result, .search-provider-icon {
- border-radius: 12px;
+.app-well-app.app-folder .overview-icon, .app-folder.grid-search-result .overview-icon, .app-well-app .overview-icon, .grid-search-result .overview-icon, .dash-item-container .show-apps .overview-icon, .list-search-result, .search-provider-icon, .switcher-list .item-box {
+ border-radius: 16px;
padding: 6px;
+ spacing: 6px;
border: 2px solid transparent;
transition-duration: 100ms;
text-align: center; }
@@ -49,92 +45,203 @@ stage {
.modal-dialog {
color: #eeeeec;
background-color: #23252e;
- border: 1px solid #0d0e11; }
+ border-radius: 11px;
+ border: 1px solid rgba(238, 238, 236, 0.07); }
-.app-folder-dialog .folder-name-container .edit-folder-button, .button {
- border-radius: 8px;
+#LookingGlassDialog > #Toolbar .lg-toolbar-button, .app-folder-dialog .folder-name-container .edit-folder-button, .button {
+ border-radius: 6px;
border-style: solid;
border-width: 1px;
- min-height: 22px;
+ font-weight: bold;
padding: 3px 24px;
+ border: 1px solid transparent;
color: #eeeeec;
- background-color: #292c37;
- border-color: #1a1c23;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2); }
- .app-folder-dialog .folder-name-container .edit-folder-button:focus, .button:focus {
+ background-color: #2e313d;
+ border-color: #1a1c23; }
+ #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus, .app-folder-dialog .folder-name-container .edit-folder-button:focus, .button:focus {
+ border: 1px solid transparent;
color: #eeeeec;
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2);
+ background-color: #2d3850;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
- .app-folder-dialog .folder-name-container .edit-folder-button:hover, .button:hover {
+ #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:hover, .app-folder-dialog .folder-name-container .edit-folder-button:focus:hover, .button:focus:hover {
+ background-color: #333e58;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:active, .app-folder-dialog .folder-name-container .edit-folder-button:focus:active, .button:focus:active {
+ background-color: #394560;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ #LookingGlassDialog > #Toolbar .lg-toolbar-button:hover, .app-folder-dialog .folder-name-container .edit-folder-button:hover, .button:hover {
+ border: 1px solid transparent;
color: #eeeeec;
- background-color: #2e313d;
- border-color: #1a1c23;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2); }
- .app-folder-dialog .folder-name-container .edit-folder-button:insensitive, .button:insensitive {
- color: #888a8d;
- border-color: #0d0e11;
- background-color: #242731;
- box-shadow: none;
- text-shadow: none;
- icon-shadow: none; }
- .app-folder-dialog .folder-name-container .edit-folder-button:active, .button:active {
+ background-color: #333742;
+ border-color: #1a1c23; }
+ #LookingGlassDialog > #Toolbar .lg-toolbar-button:insensitive, .app-folder-dialog .folder-name-container .edit-folder-button:insensitive, .button:insensitive {
+ border: 1px solid transparent;
+ color: rgba(238, 238, 236, 0.5);
+ background-color: rgba(238, 238, 236, 0.05);
+ border-color: #0d0e11; }
+ #LookingGlassDialog > #Toolbar .lg-toolbar-button:active, .app-folder-dialog .folder-name-container .edit-folder-button:active, .button:active {
+ border: 1px solid transparent;
color: #eeeeec;
- background-color: #1c1e25;
- border-color: #0b0b0e;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
+ background-color: #393c47;
+ border-color: #0b0b0e; }
+ #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked, .app-folder-dialog .folder-name-container .edit-folder-button:checked, .button:checked {
+ border: 1px solid transparent;
+ color: #eeeeec;
+ background-color: #3f424d; }
+ #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:hover, .app-folder-dialog .folder-name-container .edit-folder-button:checked:hover, .button:checked:hover {
+ background-color: #484d60; }
+ #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:active, .app-folder-dialog .folder-name-container .edit-folder-button:checked:active, .button:checked:active {
+ background-color: #4e5468; }
.modal-dialog .modal-dialog-linked-button, .hotplug-notification-item, .notification-banner .notification-button {
- color: #eeeeec;
- background-color: #292c37;
- border-color: #1a1c23;
- box-shadow: none;
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2);
padding: 12px;
- border-style: solid;
- border-width: 1px;
- border-left-width: 0;
- border-bottom-width: 0; }
+ font-weight: bold !important;
+ border: 1px solid transparent;
+ color: #eeeeec;
+ background-color: #3d4251;
+ border-color: #292c37; }
+ .modal-dialog .modal-dialog-linked-button:ltr, .hotplug-notification-item:ltr, .notification-banner .notification-button:ltr {
+ margin-right: 1px; }
+ .modal-dialog .modal-dialog-linked-button:rtl, .hotplug-notification-item:rtl, .notification-banner .notification-button:rtl {
+ margin-left: 1px; }
.modal-dialog .modal-dialog-linked-button:insensitive, .hotplug-notification-item:insensitive, .notification-banner .notification-button:insensitive {
- color: #888a8d;
- border-color: #0d0e11;
- background-color: #242731;
- box-shadow: none;
- text-shadow: none;
- icon-shadow: none; }
+ border: 1px solid transparent;
+ color: rgba(238, 238, 236, 0.5);
+ background-color: rgba(238, 238, 236, 0.05);
+ border-color: #0d0e11; }
.modal-dialog .modal-dialog-linked-button:focus, .hotplug-notification-item:focus, .notification-banner .notification-button:focus {
+ border: 1px solid transparent;
color: #eeeeec;
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2);
+ background-color: #3b4763;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
+ .modal-dialog .modal-dialog-linked-button:focus:hover, .hotplug-notification-item:focus:hover, .notification-banner .notification-button:focus:hover {
+ background-color: #414d6a;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .modal-dialog .modal-dialog-linked-button:focus:active, .hotplug-notification-item:focus:active, .notification-banner .notification-button:focus:active {
+ background-color: #465472;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.modal-dialog .modal-dialog-linked-button:hover, .hotplug-notification-item:hover, .notification-banner .notification-button:hover {
+ border: 1px solid transparent;
color: #eeeeec;
- background-color: #2e313d;
- border-color: #1a1c23;
- box-shadow: none;
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2); }
+ background-color: #424756;
+ border-color: #292c37; }
.modal-dialog .modal-dialog-linked-button:active, .hotplug-notification-item:active, .notification-banner .notification-button:active {
+ border: 1px solid transparent;
color: #eeeeec;
- background-color: #1c1e25;
- border-color: #0b0b0e;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
- .modal-dialog .modal-dialog-linked-button:first-child, .hotplug-notification-item:first-child, .notification-banner .notification-button:first-child {
- border-radius: 0 0 0 14px; }
- .modal-dialog .modal-dialog-linked-button:last-child, .hotplug-notification-item:last-child, .notification-banner .notification-button:last-child {
- border-right-width: 0;
- border-radius: 0 0 14px 0; }
+ background-color: #474c5a;
+ border-color: #1a1c23; }
+ .modal-dialog .modal-dialog-linked-button:checked, .hotplug-notification-item:checked, .notification-banner .notification-button:checked {
+ border: 1px solid transparent;
+ color: #eeeeec;
+ background-color: #4d515f; }
+ .modal-dialog .modal-dialog-linked-button:checked:hover, .hotplug-notification-item:checked:hover, .notification-banner .notification-button:checked:hover {
+ background-color: #575e74; }
+ .modal-dialog .modal-dialog-linked-button:checked:active, .hotplug-notification-item:checked:active, .notification-banner .notification-button:checked:active {
+ background-color: #5e657d; }
+ .modal-dialog .modal-dialog-linked-button:first-child:ltr, .hotplug-notification-item:first-child:ltr, .notification-banner .notification-button:first-child:ltr {
+ border-radius: 0 0 0 10px; }
+ .modal-dialog .modal-dialog-linked-button:last-child:ltr, .hotplug-notification-item:last-child:ltr, .notification-banner .notification-button:last-child:ltr {
+ border-radius: 0 0 10px 0;
+ margin-right: 0 !important; }
+ .modal-dialog .modal-dialog-linked-button:first-child:rtl, .hotplug-notification-item:first-child:rtl, .notification-banner .notification-button:first-child:rtl {
+ border-radius: 0 0 10px 0; }
+ .modal-dialog .modal-dialog-linked-button:last-child:rtl, .hotplug-notification-item:last-child:rtl, .notification-banner .notification-button:last-child:rtl {
+ border-radius: 0 0 0 10px;
+ margin-left: 0 !important; }
.modal-dialog .modal-dialog-linked-button:first-child:last-child, .hotplug-notification-item:first-child:last-child, .notification-banner .notification-button:first-child:last-child {
- border-radius: 0 0 14px 14px; }
+ border-radius: 0 0 10px 10px !important;
+ margin-left: 0 !important;
+ margin-right: 0 !important; }
+
+.screenshot-ui-show-pointer-button, .screenshot-ui-type-button {
+ border: 1px solid transparent;
+ background-color: transparent;
+ background-color: none;
+ border-color: transparent; }
+ .screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive {
+ border: 1px solid transparent;
+ color: rgba(238, 238, 236, 0.5);
+ background-color: rgba(238, 238, 236, 0.05);
+ border-color: #0d0e11;
+ background-color: transparent; }
+ .screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive {
+ border: 1px solid transparent;
+ background-color: transparent;
+ background-color: none;
+ border-color: transparent; }
+ .screenshot-ui-show-pointer-button:insensitive:insensitive, .screenshot-ui-type-button:insensitive:insensitive {
+ border: 1px solid transparent;
+ color: rgba(238, 238, 236, 0.5);
+ background-color: rgba(238, 238, 236, 0.05);
+ border-color: #0d0e11;
+ background-color: transparent; }
+ .screenshot-ui-show-pointer-button:focus, .screenshot-ui-type-button:focus {
+ border: 1px solid transparent;
+ color: #eeeeec;
+ background-color: #394560;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
+ .screenshot-ui-show-pointer-button:focus:hover, .screenshot-ui-type-button:focus:hover {
+ background-color: #3f4b68;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .screenshot-ui-show-pointer-button:focus:active, .screenshot-ui-type-button:focus:active {
+ background-color: #455170;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .screenshot-ui-show-pointer-button:hover, .screenshot-ui-type-button:hover {
+ border: 1px solid transparent;
+ color: #eeeeec;
+ background-color: #404453;
+ border-color: #272a34; }
+ .screenshot-ui-show-pointer-button:active, .screenshot-ui-type-button:active {
+ border: 1px solid transparent;
+ color: #eeeeec;
+ background-color: #454a58;
+ border-color: #181a20; }
+ .screenshot-ui-show-pointer-button:outlined, .screenshot-ui-type-button:outlined, .screenshot-ui-show-pointer-button:checked, .screenshot-ui-type-button:checked {
+ border: 1px solid transparent;
+ color: #eeeeec;
+ background-color: #4b4f5c; }
+ .screenshot-ui-show-pointer-button:outlined:hover, .screenshot-ui-type-button:outlined:hover, .screenshot-ui-show-pointer-button:checked:hover, .screenshot-ui-type-button:checked:hover {
+ background-color: #555b71; }
+ .screenshot-ui-show-pointer-button:outlined:active, .screenshot-ui-type-button:outlined:active, .screenshot-ui-show-pointer-button:checked:active, .screenshot-ui-type-button:checked:active {
+ background-color: #5b627a; }
+
+/* General Typography */
+.app-folder-dialog .folder-name-container .folder-name-label, .app-folder-dialog .folder-name-container .folder-name-entry, .search-statustext {
+ font-weight: 800;
+ font-size: 20pt; }
+
+.lg-debug-flags-header, .message-dialog-content .message-dialog-title, .message-list .message-list-placeholder, .datemenu-today-button .date-label {
+ font-weight: 800;
+ font-size: 15pt; }
+
+.nm-dialog-airplane-headline {
+ font-weight: 700;
+ font-size: 15pt; }
+
+.message-dialog-content .message-dialog-title.lightweight, .headline {
+ font-weight: 700;
+ font-size: 13pt; }
+
+.lg-extension-name, .osd-window, .nm-dialog-header, .dialog-list .dialog-list-title, .message-list-controls, .weather-button .weather-forecast-temp, .weather-button .weather-header, .world-clocks-button .world-clocks-time, .world-clocks-button .world-clocks-header, .events-button .events-title, .calendar .calendar-month-header .calendar-month-label, .datemenu-today-button .day-label, .popup-menu-ornament {
+ font-weight: 700;
+ font-size: 11pt; }
+
+.app-menu .popup-inactive-menu-item:first-child > StLabel {
+ font-weight: 700;
+ font-size: 9pt; }
+
+.login-dialog-not-listed-label, .lg-completions-text, .caps-lock-warning-label, #dash, .icon-label-button-container, .prompt-dialog-error-label,
+.prompt-dialog-info-label,
+.prompt-dialog-null-label, .run-dialog .run-dialog-description, .dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description, .weather-button .weather-forecast-time, .world-clocks-button .world-clocks-timezone, .events-button .event-time {
+ font-weight: 400;
+ font-size: 9pt; }
+
+.calendar .calendar-day-base.calendar-day-heading, .calendar .calendar-day-base {
+ font-weight: 400;
+ font-size: 8pt; }
+
+.unlock-dialog-clock-time, #panel, .weather-button .weather-forecast-time, .world-clocks-button .world-clocks-timezone, .world-clocks-button .world-clocks-time, .events-button .event-time, .calendar .calendar-day-base {
+ font-feature-settings: "tnum"; }
/* WIDGETS */
.shell-link {
@@ -152,19 +259,24 @@ stage {
StEntry {
border-radius: 8px;
padding: 8px;
- border-width: 0;
color: #eeeeec;
- background-color: #272a34;
- border-color: #0d0e11;
+ background-color: #2e313d;
+ color: rgba(238, 238, 236, 0.7);
+ border: 2px solid #2e313d;
selection-background-color: #2777ff;
selected-color: #ffffff; }
+ StEntry:hover {
+ background-color: #3b3f4e;
+ border-color: #3b3f4e;
+ color: rgba(238, 238, 236, 0.7); }
StEntry:focus {
- border-color: #00348d;
- box-shadow: inset 0 0 0 2px #2777ff; }
+ background-color: #2d3546;
+ border-color: #2777ff;
+ color: #eeeeec; }
StEntry:insensitive {
- color: #888a8d;
- border-color: #242731;
- box-shadow: none; }
+ background-color: #2f3340;
+ border-color: #2f3340;
+ color: #888a8d; }
StEntry StIcon.capslock-warning {
icon-size: 16px;
warning-color: #fd7d00;
@@ -177,13 +289,16 @@ StEntry {
color: rgba(238, 238, 236, 0.7); }
/* Buttons */
+.button {
+ min-height: 22px; }
+
/* Check Boxes */
.check-box StBoxLayout {
spacing: .8em; }
.check-box StBin {
width: 24px;
- height: 22px;
+ height: 24px;
background-image: url("assets/checkbox-off.svg"); }
.check-box:focus StBin {
@@ -198,33 +313,27 @@ StEntry {
/* Switches */
.toggle-switch {
color: #eeeeec;
- height: 22px;
- width: 46px;
+ height: 26px;
+ width: 48px;
background-size: contain;
- background-image: url("assets/toggle-off-dark.svg"); }
+ background-image: url("assets/toggle-off.svg"); }
.toggle-switch:checked {
- background-image: url("assets/toggle-on-dark.svg"); }
+ background-image: url("assets/toggle-on.svg"); }
/* Slider */
.slider {
- height: 15px;
- -barlevel-height: 3px;
- -barlevel-background-color: #0d0e11;
- -barlevel-border-width: 1px;
- -barlevel-border-color: #0d0e11;
+ -barlevel-height: 4px;
+ -barlevel-background-color: rgba(238, 238, 236, 0.2);
+ -barlevel-border-width: 2px;
+ -barlevel-border-color: transparent;
-barlevel-active-background-color: #2777ff;
- -barlevel-active-border-color: #317eff;
+ -barlevel-active-border-color: transparent;
-barlevel-overdrive-color: #a61414;
- -barlevel-overdrive-border-color: #b01515;
+ -barlevel-overdrive-border-color: transparent;
-barlevel-overdrive-separator-width: 1px;
- -slider-handle-radius: 7.5px;
- -slider-handle-border-width: 1px;
- -slider-handle-border-color: #eeeeec;
- color: #eeeeec; }
- .slider:hover {
- color: #2e313d; }
- .slider:active {
- color: #0f1014; }
+ -slider-handle-radius: 8px;
+ -slider-handle-border-width: 0;
+ -slider-handle-border-color: transparent; }
/* Scrollbars */
StScrollView.vfade {
@@ -236,531 +345,543 @@ StScrollView.hfade {
StScrollBar {
padding: 0; }
StScrollView StScrollBar {
- min-width: 14px;
- min-height: 14px; }
+ min-width: 8px;
+ min-height: 8px; }
StScrollBar StBin#trough {
border-radius: 0;
background-color: transparent; }
StScrollBar StButton#vhandle, StScrollBar StButton#hhandle {
border-radius: 8px;
- background-color: #9d9ea0;
- margin: 3px; }
+ background-color: #606267;
+ border: 3px solid transparent;
+ transition: 500ms all ease; }
StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover {
- background-color: #c5c6c6; }
+ background-color: #888a8d; }
StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
- background-color: #2777ff; }
+ background-color: #74767a; }
/* Popovers/Menus */
.popup-menu-boxpointer, .candidate-popup-boxpointer {
- -arrow-border-radius: 12px;
- -arrow-background-color: #23252e;
- -arrow-border-width: 1px;
- -arrow-border-color: #0d0e11;
- -arrow-base: 24px;
- -arrow-rise: 12px;
- -arrow-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
+ -arrow-rise: 6px; }
.popup-menu {
min-width: 15em;
color: #eeeeec; }
.popup-menu.panel-menu {
- -boxpointer-gap: 4px;
margin-bottom: 1.75em; }
-.popup-menu-content {
- padding: 16px 0; }
+.popup-menu-content, .candidate-popup-content {
+ padding: 6px;
+ border-radius: 14px;
+ border: 1px solid rgba(238, 238, 236, 0.07);
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+ background-color: #23252e; }
.popup-menu-item {
+ padding: 9px 12px;
+ border-radius: 8px;
spacing: 6px;
- padding: 6px; }
+ transition: 0.2s all ease;
+ background-color: transparent; }
.popup-menu-item:ltr {
- padding-right: 1.75em;
- padding-left: 0; }
+ padding-left: 6px; }
.popup-menu-item:rtl {
- padding-right: 0;
- padding-left: 1.75em; }
+ padding-right: 6px; }
+ .popup-menu-item:focus, .popup-menu-item:hover {
+ background-color: #303340 !important; }
+ .popup-menu-item:focus:active, .popup-menu-item:hover:active {
+ background-color: #343845 !important; }
.popup-menu-item:checked {
- background-color: #272a34;
- box-shadow: none; }
- .popup-menu-item.selected {
- background-color: rgba(255, 255, 255, 0.1);
- color: #eeeeec; }
+ background-color: #3b3f4e !important; }
+ .popup-menu-item:checked {
+ margin-bottom: 0;
+ box-shadow: inset 0 -1px 0 0 #303340;
+ border-radius: 8px 8px 0 0; }
+ .popup-menu-item:checked:focus, .popup-menu-item:checked:hover {
+ background-color: #414657 !important; }
+ .popup-menu-item:checked:active {
+ background-color: #464b5d !important; }
.popup-menu-item:active {
- background-color: #2777ff;
- color: #ffffff; }
+ background-color: #3f4454;
+ color: #fcfcfc; }
.popup-menu-item:insensitive {
color: rgba(238, 238, 236, 0.5); }
+ .popup-menu-item .toggle-switch:ltr {
+ margin-left: 4px; }
+ .popup-menu-item .toggle-switch:rtl {
+ margin-right: 4px; }
.popup-inactive-menu-item {
color: #eeeeec; }
.popup-inactive-menu-item:insensitive {
- color: rgba(238, 238, 236, 0.5); }
+ color: #888a8d; }
.popup-menu-arrow,
.popup-menu-icon {
- icon-size: 1.09em; }
+ icon-size: 16px !important; }
.popup-sub-menu {
- background-color: #1c1e25;
- box-shadow: none;
- border-top: 1px solid rgba(13, 14, 17, 0.8);
- border-bottom: 1px solid rgba(13, 14, 17, 0.8); }
+ background-color: #3b3f4e;
+ border-radius: 0 0 8px 8px; }
+ .popup-sub-menu .popup-menu-ornament {
+ min-width: 1.09em !important; }
+ .popup-sub-menu .popup-menu-item {
+ border-radius: 0;
+ margin: 0; }
+ .popup-sub-menu .popup-menu-item:last-child {
+ border-radius: 0 0 8px 8px; }
+ .popup-sub-menu .popup-menu-item:focus, .popup-sub-menu .popup-menu-item:hover {
+ background-color: #464b5d !important; }
+ .popup-sub-menu .popup-menu-item:checked {
+ background-color: #51576b !important; }
+ .popup-sub-menu .popup-menu-item:checked:focus, .popup-sub-menu .popup-menu-item:checked:hover {
+ background-color: #4c5266 !important; }
+ .popup-sub-menu .popup-menu-item:active {
+ background-color: #4a5063 !important; }
+ .popup-sub-menu .popup-menu-section .popup-menu-item:last-child:hover, .popup-sub-menu .popup-menu-section .popup-menu-item:last-child:focus {
+ border-radius: 0; }
+ .popup-sub-menu .popup-menu-section:last-child .popup-menu-item:last-child {
+ border-radius: 0 0 8px 8px; }
.popup-menu-ornament {
- width: 1.2em; }
+ width: 1.2em;
+ text-align: center !important; }
.popup-menu-ornament:ltr {
text-align: right; }
.popup-menu-ornament:rtl {
text-align: left; }
.popup-separator-menu-item {
- padding: 0; }
+ margin: 6px 0;
+ padding: 0 !important; }
+ .popup-separator-menu-item:ltr {
+ margin-right: 4px; }
+ .popup-separator-menu-item:rtl {
+ margin-left: 4px; }
.popup-separator-menu-item .popup-separator-menu-item-separator {
height: 1px;
- margin: 6px 64px;
- background-color: #111217; }
+ background-color: #0d0e11; }
+ .popup-separator-menu-item .popup-menu-ornament {
+ width: 0 !important; }
+ .popup-sub-menu .popup-separator-menu-item {
+ background-color: transparent; }
+ .popup-sub-menu .popup-separator-menu-item:ltr {
+ margin-right: 2.5em; }
+ .popup-sub-menu .popup-separator-menu-item:rtl {
+ margin-left: 2.5em; }
.popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator {
- margin: 0 64px 0 32px;
- background-color: #383d4b; }
+ background-color: #1c1e25; }
.background-menu {
- -boxpointer-gap: 4px;
+ -boxpointer-gap: 0px;
-arrow-rise: 0px; }
.aggregate-menu {
- min-width: 21em; }
+ min-width: 22em; }
+ .aggregate-menu .popup-menu-ornament {
+ width: 0 !important; }
.aggregate-menu .popup-menu-icon {
- padding: 0;
- margin: 0 4px;
-st-icon-style: symbolic; }
+ .aggregate-menu .popup-menu-icon:ltr {
+ margin-right: 8px; }
+ .aggregate-menu .popup-menu-icon:rtl {
+ margin-left: 8px; }
.aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:ltr {
- padding-left: 14px;
- margin-left: 1.09em; }
+ margin-left: 1em; }
.aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:rtl {
- padding-right: 14px;
- margin-right: 1.09em; }
+ margin-right: 1em; }
+
+.app-menu {
+ max-width: 27.25em; }
+ .app-menu .popup-menu-ornament {
+ width: 0 !important; }
+ .app-menu .popup-inactive-menu-item:first-child > StLabel:ltr {
+ margin-right: 8px; }
+ .app-menu .popup-inactive-menu-item:first-child > StLabel:rtl {
+ margin-left: 8px; }
/* Date/Time Menu */
-.clock-display-box {
- spacing: 2px; }
- .clock-display-box .clock {
- padding-left: 12px;
- padding-right: 12px; }
-
#calendarArea {
- padding: 0; }
+ padding: 4px; }
.datemenu-calendar-column {
- spacing: 6px;
- border: 0 solid #181a20;
- padding: 0 12px; }
+ spacing: 6px; }
.datemenu-calendar-column:ltr {
- margin-right: 8px;
- border-left-width: 1px; }
+ padding-left: 6px; }
.datemenu-calendar-column:rtl {
- margin-left: 8px;
- border-right-width: 1px; }
+ padding-right: 6px; }
.datemenu-calendar-column .datemenu-displays-box {
spacing: 6px; }
-.events-section-title {
- border-width: 1px;
- border-style: solid;
- border-radius: 10px;
- margin: 4px;
- border-color: transparent;
- background-color: transparent;
- background-image: none;
- box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0);
- text-shadow: none;
- icon-shadow: none;
- color: #878787;
- font-weight: bold;
- padding: .4em; }
- .events-section-title:focus {
- color: #eeeeec;
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2);
- box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
- .events-section-title:hover {
- color: #eeeeec;
- background-color: #2e313d;
- border-color: #1a1c23;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2); }
- .events-section-title:active {
- color: #eeeeec;
- background-color: #1c1e25;
- border-color: #0b0b0e;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
-
/* today button (the date) */
.datemenu-today-button {
- border-width: 1px;
- border-style: solid;
- border-radius: 10px;
+ border-radius: 8px;
margin: 4px;
- border-color: transparent;
+ box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+ border: 1px solid transparent;
background-color: transparent;
- background-image: none;
- box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0);
- text-shadow: none;
- icon-shadow: none;
+ background-color: none;
+ border-color: transparent;
+ box-shadow: none !important;
padding: 9px; }
+ .datemenu-today-button:insensitive {
+ border: 1px solid transparent;
+ color: rgba(238, 238, 236, 0.5);
+ background-color: rgba(238, 238, 236, 0.05);
+ border-color: #0d0e11;
+ background-color: transparent; }
+ .datemenu-today-button:insensitive {
+ border-color: transparent; }
.datemenu-today-button:focus {
+ border: 1px solid transparent;
color: #eeeeec;
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2);
+ background-color: #2d3850;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
+ .datemenu-today-button:focus:hover {
+ background-color: #333e58;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .datemenu-today-button:focus:active {
+ background-color: #394560;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.datemenu-today-button:hover {
+ border: 1px solid transparent;
color: #eeeeec;
- background-color: #2e313d;
- border-color: #1a1c23;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2); }
+ background-color: #333742;
+ border-color: #1a1c23; }
.datemenu-today-button:active {
+ border: 1px solid transparent;
color: #eeeeec;
- background-color: #1c1e25;
- border-color: #0b0b0e;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
- .datemenu-today-button .day-label {
- font-size: 11pt;
- font-weight: bold; }
- .datemenu-today-button .date-label {
- font-size: 17pt;
- font-weight: 1000; }
+ background-color: #393c47;
+ border-color: #0b0b0e; }
/* Calendar */
.calendar {
- border-width: 1px;
- border-style: solid;
- border-radius: 10px;
+ border-radius: 8px;
margin: 4px;
- color: #eeeeec;
- background-color: #292c37;
- border-color: #1a1c23;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2);
- padding: 6px; }
+ box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+ border: 1px solid transparent;
+ background-color: transparent;
+ background-color: none;
+ border-color: transparent;
+ box-shadow: none !important;
+ margin-top: 0; }
+ .calendar:insensitive {
+ border: 1px solid transparent;
+ color: rgba(238, 238, 236, 0.5);
+ background-color: rgba(238, 238, 236, 0.05);
+ border-color: #0d0e11;
+ background-color: transparent; }
+ .calendar:insensitive {
+ border-color: transparent; }
.calendar:focus {
+ border: 1px solid transparent;
color: #eeeeec;
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2);
+ background-color: #2d3850;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
+ .calendar:focus:hover {
+ background-color: #333e58;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .calendar:focus:active {
+ background-color: #394560;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.calendar:hover {
+ border: 1px solid transparent;
color: #eeeeec;
- background-color: #2e313d;
- border-color: #1a1c23;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2); }
+ background-color: #333742;
+ border-color: #1a1c23; }
.calendar:active {
+ border: 1px solid transparent;
color: #eeeeec;
- background-color: #1c1e25;
- border-color: #0b0b0e;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
- .calendar .calendar-month-label {
- color: #fafaf9;
- font-weight: bold;
- padding: 8px 0; }
- .calendar .calendar-change-month-back StIcon,
- .calendar .calendar-change-month-forward StIcon {
+ background-color: #393c47;
+ border-color: #0b0b0e; }
+ .calendar .calendar-month-header .calendar-change-month-back StIcon,
+ .calendar .calendar-month-header .calendar-change-month-forward StIcon {
icon-size: 1.09em; }
- .calendar .pager-button {
+ .calendar .calendar-month-header .calendar-month-label {
+ color: #fafaf9;
+ padding: 8px 0; }
+ .calendar .calendar-month-header .pager-button {
background-color: transparent;
height: 32px;
width: 32px;
- border-radius: 8px; }
- .calendar .pager-button:hover, .calendar .pager-button:focus {
- background-color: #383d4b; }
- .calendar .pager-button:active {
- background-color: #0f1014; }
- .calendar .calendar-day-base {
- font-size: 7pt;
- text-align: center;
- width: 32px;
- height: 32px;
- padding: 0;
margin: 2px;
- border-radius: 18px;
- border: 1px solid transparent;
- font-feature-settings: "tnum"; }
- .calendar .calendar-day-base:hover, .calendar .calendar-day-base:focus {
- background-color: #2e313d; }
+ border-radius: 6px; }
+ .calendar .calendar-month-header .pager-button:hover, .calendar .calendar-month-header .pager-button:focus {
+ background-color: #303340; }
+ .calendar .calendar-month-header .pager-button:active {
+ background-color: #343845; }
+ .calendar .calendar-day-base {
+ text-align: center;
+ margin: 2px;
+ padding: 0 !important;
+ height: 32px !important;
+ width: 32px !important;
+ border-radius: 99px; }
+ .calendar .calendar-day-base:hover {
+ background-color: #303340; }
+ .calendar .calendar-day-base:focus {
+ background-color: #243658;
+ color: #ffffff;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
.calendar .calendar-day-base:active, .calendar .calendar-day-base:selected {
- color: white;
- background-color: #181a20; }
+ color: #fcfcfc;
+ background-color: #343845; }
+ .calendar .calendar-day-base:active:focus, .calendar .calendar-day-base:selected:focus {
+ background-color: #31456b; }
.calendar .calendar-day-base.calendar-day-heading {
- color: white;
- margin-top: 1em;
- font-size: 6pt; }
- .calendar .calendar-day {
- border-width: 0; }
- .calendar .calendar-day-top {
- border-top-width: 1px; }
- .calendar .calendar-day-left {
- border-left-width: 1px; }
+ color: #888a8d;
+ padding-top: 6px;
+ height: 16px !important;
+ font-weight: bold; }
.calendar .calendar-nonwork-day {
color: #888a8d; }
- .calendar .calendar-today {
- font-weight: bold;
- border: 1px solid transparent;
- background-color: #2777ff;
- color: #ffffff; }
- .calendar .calendar-today:hover, .calendar .calendar-today:focus {
- background-color: #3681ff;
- color: #ffffff; }
- .calendar .calendar-today:active, .calendar .calendar-today:selected {
- background-color: #2777ff;
- color: #ffffff; }
- .calendar .calendar-today:active:hover, .calendar .calendar-today:active:focus, .calendar .calendar-today:selected:hover, .calendar .calendar-today:selected:focus {
- background-color: #3681ff;
- color: #ffffff; }
- .calendar .calendar-day-with-events {
- background-image: url("assets/calendar-today.svg"); }
- .calendar .calendar-day-with-events.calendar-work-day {
- color: white;
- font-weight: bold; }
.calendar .calendar-other-month-day {
color: rgba(238, 238, 236, 0.5); }
+ .calendar .calendar-other-month-day.calendar-nonwork-day {
+ color: rgba(136, 138, 141, 0.5); }
+ .calendar .calendar-today {
+ background-color: #2777ff;
+ font-weight: 800;
+ color: #ffffff !important; }
+ .calendar .calendar-today:hover, .calendar .calendar-today:focus {
+ background-color: #3681ff;
+ color: inherit; }
+ .calendar .calendar-today:active, .calendar .calendar-today:selected {
+ background-color: #2777ff;
+ color: inherit; }
+ .calendar .calendar-today:active:hover, .calendar .calendar-today:active:focus, .calendar .calendar-today:selected:hover, .calendar .calendar-today:selected:focus {
+ background-color: #3681ff;
+ color: inherit; }
+ .calendar .calendar-day-with-events {
+ background-image: url("assets/calendar-today.svg");
+ background-size: contain; }
.calendar .calendar-week-number {
font-size: 6pt;
font-weight: bold;
- height: 1.8em;
- width: 2.3em;
- border-radius: 2px;
+ font-feature-settings: "tnum";
margin: 6px;
+ padding: 0 6px;
+ border-radius: 3px;
background-color: #1e2128;
- color: #fafaf9; }
+ color: #888a8d; }
/* Events */
.events-button {
- border-width: 1px;
- border-style: solid;
- border-radius: 10px;
+ border-radius: 8px;
margin: 4px;
+ box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+ border: 1px solid transparent;
color: #eeeeec;
- background-color: #292c37;
+ background-color: #2e313d;
border-color: #1a1c23;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2);
padding: 12px; }
.events-button:focus {
+ border: 1px solid transparent;
color: #eeeeec;
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2);
+ background-color: #2d3850;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
+ .events-button:focus:hover {
+ background-color: #333e58;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .events-button:focus:active {
+ background-color: #394560;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.events-button:hover {
+ border: 1px solid transparent;
color: #eeeeec;
- background-color: #2e313d;
- border-color: #1a1c23;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2); }
+ background-color: #333742;
+ border-color: #1a1c23; }
.events-button:active {
+ border: 1px solid transparent;
color: #eeeeec;
- background-color: #1c1e25;
- border-color: #0b0b0e;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
+ background-color: #393c47;
+ border-color: #0b0b0e; }
.events-button .events-box {
spacing: 6px; }
.events-button .events-list {
spacing: 12px; }
.events-button .events-title {
- color: #878787;
- font-weight: bold;
+ color: #888a8d;
margin-bottom: 4px; }
.events-button .event-time {
- color: #bebeb6;
- font-feature-settings: "tnum";
- font-size: 9pt; }
+ color: #888a8d; }
/* World clocks */
.world-clocks-button {
- border-width: 1px;
- border-style: solid;
- border-radius: 10px;
+ border-radius: 8px;
margin: 4px;
+ box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+ border: 1px solid transparent;
color: #eeeeec;
- background-color: #292c37;
+ background-color: #2e313d;
border-color: #1a1c23;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2);
padding: 12px; }
.world-clocks-button:focus {
+ border: 1px solid transparent;
color: #eeeeec;
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2);
+ background-color: #2d3850;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
+ .world-clocks-button:focus:hover {
+ background-color: #333e58;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .world-clocks-button:focus:active {
+ background-color: #394560;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.world-clocks-button:hover {
+ border: 1px solid transparent;
color: #eeeeec;
- background-color: #2e313d;
- border-color: #1a1c23;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2); }
+ background-color: #333742;
+ border-color: #1a1c23; }
.world-clocks-button:active {
+ border: 1px solid transparent;
color: #eeeeec;
- background-color: #1c1e25;
- border-color: #0b0b0e;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
+ background-color: #393c47;
+ border-color: #0b0b0e; }
.world-clocks-button .world-clocks-grid {
spacing-rows: 6px;
spacing-columns: 12px; }
.world-clocks-button .world-clocks-header {
- color: #878787;
- font-weight: bold; }
+ color: #888a8d; }
.world-clocks-button .world-clocks-city {
- color: #eeeeec;
- font-size: 10pt;
- font-weight: normal; }
+ color: #eeeeec; }
.world-clocks-button .world-clocks-time {
- font-weight: bold;
- color: #eeeeec;
- font-feature-settings: "tnum";
- font-size: 10pt; }
+ color: #eeeeec; }
.world-clocks-button .world-clocks-time:ltr {
text-align: right; }
.world-clocks-button .world-clocks-time:rtl {
text-align: left; }
.world-clocks-button .world-clocks-timezone {
- color: #bebeb6;
- font-feature-settings: "tnum";
- font-size: 9pt; }
+ color: #888a8d; }
/* Weather */
.weather-button {
- border-width: 1px;
- border-style: solid;
- border-radius: 10px;
+ border-radius: 8px;
margin: 4px;
+ box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+ border: 1px solid transparent;
color: #eeeeec;
- background-color: #292c37;
+ background-color: #2e313d;
border-color: #1a1c23;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2);
padding: 12px; }
.weather-button:focus {
+ border: 1px solid transparent;
color: #eeeeec;
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2);
+ background-color: #2d3850;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
+ .weather-button:focus:hover {
+ background-color: #333e58;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .weather-button:focus:active {
+ background-color: #394560;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.weather-button:hover {
+ border: 1px solid transparent;
color: #eeeeec;
- background-color: #2e313d;
- border-color: #1a1c23;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2); }
+ background-color: #333742;
+ border-color: #1a1c23; }
.weather-button:active {
+ border: 1px solid transparent;
color: #eeeeec;
- background-color: #1c1e25;
- border-color: #0b0b0e;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
+ background-color: #393c47;
+ border-color: #0b0b0e; }
.weather-button .weather-box {
spacing: 10px; }
.weather-button .weather-header-box {
spacing: 6px; }
.weather-button .weather-header {
- color: #878787;
- font-weight: bold; }
+ color: #888a8d; }
.weather-button .weather-header.location {
- font-weight: normal;
- font-size: 9pt; }
+ font-weight: normal; }
.weather-button .weather-grid {
spacing-rows: 6px;
spacing-columns: 12px; }
.weather-button .weather-forecast-time {
color: #a6a69b;
- font-feature-settings: "tnum";
- font-size: 8pt;
- font-weight: normal;
padding-top: 0.2em;
padding-bottom: 0.4em; }
.weather-button .weather-forecast-icon {
icon-size: 2.18em; }
- .weather-button .weather-forecast-temp {
- font-weight: bold; }
/* Message List */
.message-list {
- width: 31.5em;
- padding: 0 12px; }
+ width: 29em;
+ border: solid #0d0e11; }
+ .message-list:ltr {
+ margin-left: 0;
+ margin-right: 4px;
+ padding-right: 6px;
+ border-right-width: 1px; }
+ .message-list:rtl {
+ margin-right: 0;
+ margin-left: 4px;
+ padding-left: 6px;
+ border-left-width: 1px; }
.message-list .message-list-placeholder {
- spacing: 12px; }
+ color: rgba(136, 138, 141, 0.5); }
+ .message-list .message-list-placeholder > StIcon {
+ icon-size: 3.27em;
+ margin-bottom: 12px;
+ -st-icon-style: symbolic; }
.message-list-sections {
spacing: 6px;
- margin: 0 16px; }
+ margin: 0;
+ padding-bottom: 6px; }
+ .message-list-sections:ltr {
+ margin-right: 12px; }
+ .message-list-sections:rtl {
+ margin-left: 12px; }
.message-list-section,
.message-list-section-list {
spacing: 6px; }
.message-list-controls {
- margin: 8px 16px 0;
- padding: 4px;
- spacing: 12px; }
+ padding: 6px;
+ spacing: 6px; }
.message-list-controls .dnd-button {
border-width: 2px;
border-color: transparent;
- border-radius: 99px;
+ border-radius: 32px;
border-style: solid; }
.message-list-controls .dnd-button:focus {
border-color: rgba(39, 119, 255, 0.6); }
.message {
- border-width: 1px;
- border-style: solid;
- border-radius: 10px;
+ border-radius: 8px;
margin: 4px;
+ box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+ border: 1px solid transparent;
color: #eeeeec;
- background-color: #292c37;
- border-color: #1a1c23;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2); }
+ background-color: #2e313d;
+ border-color: #1a1c23; }
.message:focus {
+ border: 1px solid transparent;
color: #eeeeec;
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2);
+ background-color: #2d3850;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
+ .message:focus:hover {
+ background-color: #333e58;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .message:focus:active {
+ background-color: #394560;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.message:hover {
+ border: 1px solid transparent;
color: #eeeeec;
- background-color: #2e313d;
- border-color: #1a1c23;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2); }
+ background-color: #333742;
+ border-color: #1a1c23; }
.message:active {
+ border: 1px solid transparent;
color: #eeeeec;
- background-color: #1c1e25;
- border-color: #0b0b0e;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
+ background-color: #393c47;
+ border-color: #0b0b0e; }
.message .message-icon-bin {
- padding: 18px 0 18px 12px; }
+ padding: 18px; }
+ .message .message-icon-bin:ltr {
+ padding-right: 6px; }
.message .message-icon-bin:rtl {
- padding: 18px 12px 18px 0; }
+ padding-left: 6px; }
.message .message-icon-bin > StIcon {
icon-size: 2.18em;
-st-icon-style: symbolic; }
@@ -768,10 +889,13 @@ StScrollBar {
width: 1.09em;
height: 1.09em; }
.message .message-content {
- padding: 14px;
- spacing: 4px; }
+ spacing: 4px;
+ padding: 9px;
+ margin-bottom: 8px; }
.message .message-title {
- font-weight: bold; }
+ font-weight: bold;
+ /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
+ padding-top: 0.57em; }
.message .message-secondary-bin {
padding: 0 8px; }
.message .message-secondary-bin > .event-time {
@@ -784,11 +908,15 @@ StScrollBar {
.message .message-secondary-bin > .event-time:rtl {
text-align: left; }
.message .message-close-button {
- color: white; }
+ color: #eeeeec;
+ background-color: rgba(238, 238, 236, 0.1);
+ border-radius: 99px;
+ padding: 5px;
+ margin: 1px; }
.message .message-close-button:hover {
- color: #d6d6d1; }
+ background-color: rgba(238, 238, 236, 0.2); }
.message .message-close-button:active {
- color: #bebeb6; }
+ background-color: rgba(238, 238, 236, 0.1); }
.message .message-body {
color: #d6d6d1; }
@@ -797,70 +925,82 @@ StScrollBar {
/* Media Controls */
.message-media-control {
- padding: 12px 1.64em;
- color: #cacac4; }
+ padding: 0 18px;
+ margin: 12px 0;
+ border-radius: 8px;
+ color: #eeeeec; }
.message-media-control:hover {
- background-color: #383d4b;
+ background-color: #3b3f4e;
color: #eeeeec; }
.message-media-control:active {
- background-color: #292c37;
+ background-color: #3f4454;
color: #eeeeec; }
.message-media-control:insensitive {
- color: #8e8e80; }
+ color: #959799; }
.message-media-control:last-child:ltr {
- border-radius: 0 10px 10px 0; }
+ margin-right: 12px; }
.message-media-control:last-child:rtl {
- border-radius: 10px 0 0 10px; }
+ margin-left: 12px; }
.media-message-cover-icon {
- icon-size: 2.18em !important;
+ icon-size: 3.27em !important;
border-radius: 8px; }
.media-message-cover-icon.fallback {
color: #c5c5be;
background-color: #23252e;
border: 1px solid transparent;
border-radius: 8px;
- icon-size: 2.18em !important; }
+ icon-size: 2.18em !important;
+ padding: 14px; }
.candidate-popup-content {
- padding: 0.5em;
- spacing: 0.3em; }
+ padding: 6px;
+ spacing: 6px; }
.candidate-index {
- padding: 0 0.5em 0 0;
- color: #d6d6d1; }
+ padding: 0;
+ padding-right: 6px;
+ color: #888a8d; }
.candidate-box {
- padding: 0.3em 0.5em 0.3em 0.5em;
+ padding: 6px 12px 6px 12px;
border-radius: 8px; }
- .candidate-box:selected, .candidate-box:hover {
+ .candidate-box:selected {
background-color: #2777ff;
color: #ffffff; }
+ .candidate-box:hover {
+ background-color: #303340;
+ color: #f8f8f7; }
.candidate-page-button-box {
height: 2em; }
.vertical .candidate-page-button-box {
- padding-top: 0.5em; }
+ padding-top: 12px; }
.horizontal .candidate-page-button-box {
- padding-left: 0.5em; }
+ padding-left: 12px; }
.candidate-page-button {
- padding: 4px; }
+ padding: 6px; }
.candidate-page-button-previous {
border-radius: 8px 0px 0px 8px;
- border-right-width: 0; }
+ border-right-width: 0;
+ box-shadow: none; }
.candidate-page-button-next {
- border-radius: 0px 8px 8px 0px; }
+ border-radius: 0px 8px 8px 0px;
+ box-shadow: none; }
.candidate-page-button-icon {
- icon-size: 1em; }
+ icon-size: 1.09em; }
/* Notifications & Message Tray */
.notification-banner {
min-height: 64px;
- width: 34em; }
+ width: 34em;
+ box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.1);
+ border-radius: 12px;
+ margin: 4px; }
.notification-banner .notification-actions {
spacing: 0; }
@@ -916,15 +1056,10 @@ StScrollBar {
padding: 0 4px; }
/* Modal Dialogs */
-.headline {
- font-size: 11pt; }
-
-.modal-dialog {
- border-radius: 16px; }
- .modal-dialog .modal-dialog-content-box {
- margin: 32px 40px;
- spacing: 32px;
- max-width: 28em; }
+.modal-dialog .modal-dialog-content-box {
+ margin: 32px 40px;
+ spacing: 32px;
+ max-width: 28em; }
/* End Session Dialog */
.end-session-dialog {
@@ -937,12 +1072,7 @@ StScrollBar {
.message-dialog-content {
spacing: 18px; }
.message-dialog-content .message-dialog-title {
- text-align: center;
- font-size: 18pt;
- font-weight: 800; }
- .message-dialog-content .message-dialog-title.lightweight {
- font-size: 13pt;
- font-weight: 800; }
+ text-align: center; }
.message-dialog-content .message-dialog-description {
text-align: center; }
@@ -950,8 +1080,7 @@ StScrollBar {
.dialog-list {
spacing: 18px; }
.dialog-list .dialog-list-title {
- text-align: center;
- font-weight: bold; }
+ text-align: center; }
.dialog-list .dialog-list-scrollview {
max-height: 200px; }
.dialog-list .dialog-list-box {
@@ -961,8 +1090,7 @@ StScrollBar {
.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: #e2e2df;
- font-size: 9pt; }
+ color: #e2e2df; }
/* Run Dialog */
.run-dialog .modal-dialog-content-box {
@@ -973,7 +1101,6 @@ StScrollBar {
width: 20em; }
.run-dialog .run-dialog-description {
- font-size: 9pt;
text-align: center;
color: #bebeb6; }
@@ -1002,8 +1129,7 @@ StScrollBar {
.prompt-dialog-error-label,
.prompt-dialog-info-label,
.prompt-dialog-null-label {
- text-align: center;
- font-size: 9pt; }
+ text-align: center; }
.prompt-dialog-error-label {
color: #fd7d00; }
@@ -1024,10 +1150,9 @@ StScrollBar {
spacing: 20px; }
.audio-selection-device {
- border: 1px solid #181a20;
- border-radius: 12px; }
+ border-radius: 16px; }
.audio-selection-device:hover, .audio-selection-device:focus {
- background-color: #2e313d; }
+ background-color: #303340; }
.audio-selection-device:active {
background-color: #2777ff;
color: #ffffff; }
@@ -1047,7 +1172,7 @@ StScrollBar {
height: 300px;
width: 300px; }
-/* Network Dialogs */
+/* Select Network dialogs */
.nm-dialog {
max-height: 34em;
min-height: 31em;
@@ -1057,18 +1182,8 @@ StScrollBar {
spacing: 20px;
padding: 24px; }
-.nm-dialog-airplane-box {
- spacing: 12px; }
-
-.nm-dialog-airplane-headline {
- font-weight: bold;
- text-align: center; }
-
-.nm-dialog-airplane-text {
- color: #eeeeec; }
-
-.nm-dialog-header {
- font-weight: bold; }
+.nm-dialog-subheader {
+ color: #888a8d; }
.nm-dialog-header-icon {
icon-size: 2.18em; }
@@ -1077,18 +1192,18 @@ StScrollBar {
spacing: 10px; }
.nm-dialog-scroll-view {
- border: 1px solid #0d0e11;
- padding: 0;
- background-color: #1c1e25; }
+ padding: 6px;
+ border-radius: 8px;
+ background-color: #272a34; }
.nm-dialog-item {
- font-size: 10pt;
- border-bottom: 1px solid #0d0e11;
- padding: 12px;
- spacing: 0px; }
+ padding: 12px; }
.nm-dialog-item:selected {
background-color: #2777ff;
+ border-radius: 5px;
color: #ffffff; }
+ .nm-dialog-item:hover {
+ background-color: #303340; }
.nm-dialog-icon {
icon-size: 1.09em; }
@@ -1096,31 +1211,51 @@ StScrollBar {
.nm-dialog-icons {
spacing: 12px; }
+.no-networks-box {
+ spacing: 6px; }
+
.no-networks-label {
color: #888a8d; }
-.no-networks-box {
- spacing: 6px; }
+.nm-dialog-airplane-box {
+ text-align: center;
+ spacing: 12px; }
+
+.nm-dialog-airplane-text {
+ color: #888a8d; }
/* OSD */
.osd-window {
text-align: center;
font-weight: bold;
spacing: 12px;
- margin: 32px;
- min-width: 64px;
- min-height: 64px; }
+ padding: 12px 18px;
+ margin-bottom: 4em; }
+ .osd-window > * {
+ spacing: 8px; }
.osd-window StIcon {
- icon-size: 6.54em; }
+ icon-size: 2.18em; }
.osd-window .osd-monitor-label {
font-size: 3em; }
+ .osd-window StLabel:ltr {
+ margin-right: 6px; }
+ .osd-window StLabel:rtl {
+ margin-left: 6px; }
.osd-window .level {
- height: 8px;
- -barlevel-height: 8px;
+ margin-bottom: 4px;
+ height: 6px;
+ min-width: 10.9em;
+ -barlevel-height: 6px;
-barlevel-background-color: rgba(255, 255, 255, 0.1);
-barlevel-active-background-color: white;
-barlevel-overdrive-color: #a61414;
-barlevel-overdrive-separator-width: 3px; }
+ .osd-window .level:first-child {
+ margin-bottom: 0px; }
+ .osd-window .level:ltr {
+ margin-right: 6px; }
+ .osd-window .level:rtl {
+ margin-left: 6px; }
/* Pad OSD */
.pad-osd-window {
@@ -1136,38 +1271,54 @@ StScrollBar {
/* App Switcher */
.switcher-popup {
- padding: 8px;
+ padding: 0;
spacing: 24px; }
-.switcher-list .item-box {
- padding: 8px;
- border-radius: 9px;
- border: 1px solid transparent; }
- .switcher-list .item-box:outlined {
- background-color: rgba(255, 255, 255, 0.3); }
- .switcher-list .item-box:selected {
- background-color: rgba(255, 255, 255, 0.3);
- color: white; }
-
-.switcher-list .thumbnail-box {
- padding: 2px;
- spacing: 6px; }
-
-.switcher-list .thumbnail {
- width: 256px; }
-
-.switcher-list .separator {
- width: 1px;
- background: #0d0e11; }
-
-.switcher-list .switcher-list-item-container {
- spacing: 12px; }
+.switcher-list {
+ padding: 10px;
+ border-radius: 24px;
+ box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.1); }
+ .switcher-list .switcher-list-item-container {
+ spacing: 12px; }
+ .switcher-list .item-box {
+ background-color: transparent; }
+ .switcher-list .item-box:hover {
+ background-color: rgba(255, 255, 255, 0.1); }
+ .switcher-list .item-box:selected, .switcher-list .item-box:focus {
+ background-color: rgba(255, 255, 255, 0.13); }
+ .switcher-list .item-box:selected:hover, .switcher-list .item-box:focus:hover {
+ background-color: rgba(255, 255, 255, 0.16); }
+ .switcher-list .item-box:selected:active, .switcher-list .item-box:focus:active {
+ background-color: rgba(255, 255, 255, 0.13); }
+ .switcher-list .item-box:active {
+ background-color: rgba(255, 255, 255, 0.16); }
+ .switcher-list .item-box:outlined, .switcher-list .item-box:checked {
+ background-color: rgba(255, 255, 255, 0.19); }
+ .switcher-list .item-box:outlined:active, .switcher-list .item-box:checked:active {
+ background-color: rgba(255, 255, 255, 0.22); }
+ .switcher-list .item-box:outlined:hover, .switcher-list .item-box:checked:hover {
+ background-color: rgba(255, 255, 255, 0.25); }
+ .switcher-list .item-box:drop {
+ border: 2px solid rgba(39, 119, 255, 0.8);
+ background-color: rgba(39, 119, 255, 0.2); }
+ .switcher-list .item-box:hover {
+ background: none; }
+ .switcher-list .separator {
+ width: 1px;
+ background: #0d0e11; }
+ .switcher-list .thumbnail-box {
+ padding: 2px;
+ spacing: 6px; }
+ .switcher-list .thumbnail {
+ width: 256px;
+ border-radius: 8px; }
.switcher-arrow {
- border-color: rgba(0, 0, 0, 0);
- color: rgba(238, 238, 236, 0.8); }
+ border-color: rgba(255, 255, 255, 0.8);
+ color: rgba(255, 255, 255, 0.8); }
.switcher-arrow:highlighted {
- color: #eeeeec; }
+ border-color: white;
+ color: white; }
.input-source-switcher-symbol {
font-size: 34pt;
@@ -1178,54 +1329,173 @@ StScrollBar {
border: 5px solid #2777ff; }
/* Workspace Switcher */
-.workspace-switcher-group {
- padding: 12px; }
-
.workspace-switcher {
- background: transparent;
- border: none;
- border-radius: 0;
- padding: 0;
+ margin-bottom: 4em;
+ spacing: 12px;
+ padding: 12px 18px; }
+
+.ws-switcher-indicator {
+ background-color: rgba(255, 255, 255, 0.5);
+ padding: 0.1816666667em;
+ margin: 0.9083333333em;
+ border-radius: 2.18em; }
+ .ws-switcher-indicator:active {
+ background-color: white;
+ padding: 0.3633333333em;
+ margin: 0.7266666667em; }
+
+.icon-label-button-container {
+ spacing: 6px; }
+ .icon-label-button-container StIcon {
+ icon-size: 32px; }
+
+.screenshot-ui-panel {
+ border-radius: 37px;
+ padding: 18px;
+ padding-bottom: 12px;
+ margin-bottom: 4em;
spacing: 12px; }
-.ws-switcher-box {
- background: transparent;
- height: 50px;
- background-size: 32px;
- border: 1px solid rgba(255, 255, 255, 0.1);
- border-radius: 11px; }
+.screenshot-ui-close-button {
+ padding: 6px; }
+ .screenshot-ui-close-button.left {
+ margin-left: 8px; }
+ .screenshot-ui-close-button.right {
+ margin-right: 8px; }
-.ws-switcher-active-up,
-.ws-switcher-active-down,
-.ws-switcher-active-left,
-.ws-switcher-active-right {
- height: 52px;
- background-color: #2777ff;
- border: 1px solid #4187ff;
- border-radius: 11px;
- color: #ffffff; }
+.screenshot-ui-type-button {
+ padding: 12px 18px !important;
+ border-radius: 19px; }
+
+.screenshot-ui-capture-button {
+ width: 36px;
+ height: 36px;
+ border-radius: 99px;
+ border: 4px white;
+ padding: 4px; }
+ .screenshot-ui-capture-button .screenshot-ui-capture-button-circle {
+ background-color: white;
+ transition-duration: 200ms;
+ border-radius: 99px; }
+ .screenshot-ui-capture-button .screenshot-ui-capture-button-circle:hover, .screenshot-ui-capture-button .screenshot-ui-capture-button-circle:focus {
+ background-color: #303340; }
+ .screenshot-ui-capture-button:hover .screenshot-ui-capture-button-circle, .screenshot-ui-capture-button:focus .screenshot-ui-capture-button-circle {
+ background-color: #d9d9d9; }
+ .screenshot-ui-capture-button:active .screenshot-ui-capture-button-circle {
+ background-color: gray; }
+ .screenshot-ui-capture-button:cast .screenshot-ui-capture-button-circle {
+ background-color: #bf1717; }
+ .screenshot-ui-capture-button:cast:hover .screenshot-ui-capture-button-circle, .screenshot-ui-capture-button:cast:focus .screenshot-ui-capture-button-circle {
+ background-color: #7b0f0f; }
+ .screenshot-ui-capture-button:cast:active .screenshot-ui-capture-button-circle {
+ background-color: #360707; }
+
+.screenshot-ui-shot-cast-container {
+ background-color: #303340;
+ border-radius: 16px;
+ padding: 3px;
+ spacing: 3px; }
+ .screenshot-ui-shot-cast-container:ltr {
+ margin-left: 3px; }
+ .screenshot-ui-shot-cast-container:rtl {
+ margin-right: 3px; }
+
+.screenshot-ui-shot-cast-button {
+ padding: 6px 12px;
+ background-color: transparent;
+ border-radius: 13px; }
+ .screenshot-ui-shot-cast-button:hover, .screenshot-ui-shot-cast-button:focus {
+ background-color: #3b3f4e; }
+ .screenshot-ui-shot-cast-button:active {
+ background-color: #3f4454; }
+ .screenshot-ui-shot-cast-button:checked {
+ background-color: white;
+ color: black; }
+ .screenshot-ui-shot-cast-button StIcon {
+ icon-size: 1.09em; }
+
+.screenshot-ui-show-pointer-button {
+ border-radius: 99px;
+ padding: 12px !important; }
+ .screenshot-ui-show-pointer-button StIcon {
+ icon-size: 1.09em; }
+
+.screenshot-ui-area-indicator-shade {
+ background-color: rgba(0, 0, 0, 0.3); }
+
+.screenshot-ui-area-selector .screenshot-ui-area-indicator-shade {
+ background-color: rgba(0, 0, 0, 0.5); }
+
+.screenshot-ui-area-selector .screenshot-ui-area-indicator-selection {
+ border: 2px white; }
+
+.screenshot-ui-area-selector-handle {
+ border-radius: 99px;
+ background-color: white;
+ box-shadow: 0 1px 3px 2px rgba(0, 0, 0, 0.2);
+ width: 24px;
+ height: 24px; }
+
+.screenshot-ui-window-selector {
+ background-color: #272a34; }
+ .screenshot-ui-window-selector .screenshot-ui-window-selector-window-container {
+ margin: 100px; }
+ .screenshot-ui-window-selector:primary-monitor .screenshot-ui-window-selector-window-container {
+ margin-bottom: 200px; }
+
+.screenshot-ui-window-selector-window-border {
+ transition-duration: 200ms;
+ border-radius: 16px;
+ border: 6px transparent; }
+
+.screenshot-ui-window-selector-check {
+ transition-duration: 200ms;
+ color: transparent;
+ border-radius: 99px;
+ border-width: 12px;
+ icon-size: 24px; }
+
+.screenshot-ui-window-selector-window:hover .screenshot-ui-window-selector-window-border {
+ border-color: #0051da; }
+
+.screenshot-ui-window-selector-window:checked .screenshot-ui-window-selector-window-border {
+ border-color: #2777ff;
+ background-color: rgba(39, 119, 255, 0.2); }
+
+.screenshot-ui-window-selector-window:checked .screenshot-ui-window-selector-check {
+ color: white;
+ background-color: #2777ff; }
+
+.screenshot-ui-screen-selector {
+ transition-duration: 200ms;
+ background-color: rgba(0, 0, 0, 0.5); }
+ .screenshot-ui-screen-selector:hover {
+ background-color: rgba(0, 0, 0, 0.3); }
+ .screenshot-ui-screen-selector:active {
+ background-color: rgba(0, 0, 0, 0.7); }
+ .screenshot-ui-screen-selector:checked {
+ background-color: transparent;
+ border: 2px white; }
+
+.screenshot-ui-tooltip {
+ color: white;
+ background-color: #303340;
+ border-radius: 99px;
+ padding: 6px 12px;
+ text-align: center;
+ -y-offset: 24px; }
/* Top Bar */
#panel {
background-color: #000;
font-weight: bold;
height: 2.2em;
- font-feature-settings: "tnum";
transition-duration: 250ms; }
#panel.unlock-screen, #panel.login-screen, #panel:overview {
background-color: transparent; }
- #panel.unlock-screen .panel-corner, #panel.login-screen .panel-corner, #panel:overview .panel-corner {
- -panel-corner-opacity: 0; }
- #panel .panel-corner {
- -panel-corner-radius: 9px;
- -panel-corner-background-color: #000;
- -panel-corner-border-width: 2px;
- -panel-corner-border-color: transparent;
- -panel-corner-opacity: 1;
- transition-duration: 250ms; }
#panel .panel-button {
font-weight: bold;
- color: #ddd;
+ color: #e2e2df;
-natural-hpadding: 12px;
-minimum-hpadding: 6px;
transition-duration: 150ms;
@@ -1235,12 +1505,36 @@ StScrollBar {
transition-duration: 150ms;
border: 3px solid transparent;
border-radius: 99px; }
- #panel .panel-button:hover, #panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked {
- box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.2); }
- #panel .panel-button:hover.clock-display, #panel .panel-button:active.clock-display, #panel .panel-button:overview.clock-display, #panel .panel-button:focus.clock-display, #panel .panel-button:checked.clock-display {
+ #panel .panel-button.screen-recording-indicator {
+ box-shadow: inset 0 0 0 100px #bf1717; }
+ #panel .panel-button.screen-recording-indicator StBoxLayout {
+ spacing: 6px; }
+ #panel .panel-button.screen-recording-indicator StIcon {
+ icon-size: 1.09em; }
+ #panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked {
+ box-shadow: inset 0 0 0 100px rgba(226, 226, 223, 0.2); }
+ #panel .panel-button:active.clock-display, #panel .panel-button:overview.clock-display, #panel .panel-button:focus.clock-display, #panel .panel-button:checked.clock-display {
box-shadow: none; }
- #panel .panel-button:hover.clock-display .clock, #panel .panel-button:active.clock-display .clock, #panel .panel-button:overview.clock-display .clock, #panel .panel-button:focus.clock-display .clock, #panel .panel-button:checked.clock-display .clock {
- box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.2); }
+ #panel .panel-button:active.clock-display .clock, #panel .panel-button:overview.clock-display .clock, #panel .panel-button:focus.clock-display .clock, #panel .panel-button:checked.clock-display .clock {
+ box-shadow: inset 0 0 0 100px rgba(226, 226, 223, 0.2); }
+ #panel .panel-button:active.screen-recording-indicator, #panel .panel-button:overview.screen-recording-indicator, #panel .panel-button:focus.screen-recording-indicator, #panel .panel-button:checked.screen-recording-indicator {
+ box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.85); }
+ #panel .panel-button:hover {
+ box-shadow: inset 0 0 0 100px rgba(226, 226, 223, 0.15); }
+ #panel .panel-button:hover.clock-display {
+ box-shadow: none; }
+ #panel .panel-button:hover.clock-display .clock {
+ box-shadow: inset 0 0 0 100px rgba(226, 226, 223, 0.15); }
+ #panel .panel-button:hover.screen-recording-indicator {
+ box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.9); }
+ #panel .panel-button:active:hover, #panel .panel-button:overview:hover, #panel .panel-button:focus:hover, #panel .panel-button:checked:hover {
+ box-shadow: inset 0 0 0 100px rgba(226, 226, 223, 0.25); }
+ #panel .panel-button:active:hover.clock-display, #panel .panel-button:overview:hover.clock-display, #panel .panel-button:focus:hover.clock-display, #panel .panel-button:checked:hover.clock-display {
+ box-shadow: none; }
+ #panel .panel-button:active:hover.clock-display .clock, #panel .panel-button:overview:hover.clock-display .clock, #panel .panel-button:focus:hover.clock-display .clock, #panel .panel-button:checked:hover.clock-display .clock {
+ box-shadow: inset 0 0 0 100px rgba(226, 226, 223, 0.25); }
+ #panel .panel-button:active:hover.screen-recording-indicator, #panel .panel-button:overview:hover.screen-recording-indicator, #panel .panel-button:focus:hover.screen-recording-indicator, #panel .panel-button:checked:hover.screen-recording-indicator {
+ box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.8); }
#panel .panel-button .system-status-icon {
icon-size: 1.09em;
padding: 5px;
@@ -1252,12 +1546,30 @@ StScrollBar {
-st-icon-style: symbolic; }
#panel .panel-button#panelActivities {
-natural-hpadding: 18px; }
- #panel.unlock-screen .panel-button:hover, #panel.unlock-screen .panel-button:active, #panel.unlock-screen .panel-button:overview, #panel.unlock-screen .panel-button:focus, #panel.unlock-screen .panel-button:checked, #panel.login-screen .panel-button:hover, #panel.login-screen .panel-button:active, #panel.login-screen .panel-button:overview, #panel.login-screen .panel-button:focus, #panel.login-screen .panel-button:checked, #panel:overview .panel-button:hover, #panel:overview .panel-button:active, #panel:overview .panel-button:overview, #panel:overview .panel-button:focus, #panel:overview .panel-button:checked {
+ #panel.unlock-screen .panel-button:active, #panel.unlock-screen .panel-button:overview, #panel.unlock-screen .panel-button:focus, #panel.unlock-screen .panel-button:checked, #panel.login-screen .panel-button:active, #panel.login-screen .panel-button:overview, #panel.login-screen .panel-button:focus, #panel.login-screen .panel-button:checked, #panel:overview .panel-button:active, #panel:overview .panel-button:overview, #panel:overview .panel-button:focus, #panel:overview .panel-button:checked {
box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15); }
- #panel.unlock-screen .panel-button:hover.clock-display, #panel.unlock-screen .panel-button:active.clock-display, #panel.unlock-screen .panel-button:overview.clock-display, #panel.unlock-screen .panel-button:focus.clock-display, #panel.unlock-screen .panel-button:checked.clock-display, #panel.login-screen .panel-button:hover.clock-display, #panel.login-screen .panel-button:active.clock-display, #panel.login-screen .panel-button:overview.clock-display, #panel.login-screen .panel-button:focus.clock-display, #panel.login-screen .panel-button:checked.clock-display, #panel:overview .panel-button:hover.clock-display, #panel:overview .panel-button:active.clock-display, #panel:overview .panel-button:overview.clock-display, #panel:overview .panel-button:focus.clock-display, #panel:overview .panel-button:checked.clock-display {
+ #panel.unlock-screen .panel-button:active.clock-display, #panel.unlock-screen .panel-button:overview.clock-display, #panel.unlock-screen .panel-button:focus.clock-display, #panel.unlock-screen .panel-button:checked.clock-display, #panel.login-screen .panel-button:active.clock-display, #panel.login-screen .panel-button:overview.clock-display, #panel.login-screen .panel-button:focus.clock-display, #panel.login-screen .panel-button:checked.clock-display, #panel:overview .panel-button:active.clock-display, #panel:overview .panel-button:overview.clock-display, #panel:overview .panel-button:focus.clock-display, #panel:overview .panel-button:checked.clock-display {
box-shadow: none; }
- #panel.unlock-screen .panel-button:hover.clock-display .clock, #panel.unlock-screen .panel-button:active.clock-display .clock, #panel.unlock-screen .panel-button:overview.clock-display .clock, #panel.unlock-screen .panel-button:focus.clock-display .clock, #panel.unlock-screen .panel-button:checked.clock-display .clock, #panel.login-screen .panel-button:hover.clock-display .clock, #panel.login-screen .panel-button:active.clock-display .clock, #panel.login-screen .panel-button:overview.clock-display .clock, #panel.login-screen .panel-button:focus.clock-display .clock, #panel.login-screen .panel-button:checked.clock-display .clock, #panel:overview .panel-button:hover.clock-display .clock, #panel:overview .panel-button:active.clock-display .clock, #panel:overview .panel-button:overview.clock-display .clock, #panel:overview .panel-button:focus.clock-display .clock, #panel:overview .panel-button:checked.clock-display .clock {
+ #panel.unlock-screen .panel-button:active.clock-display .clock, #panel.unlock-screen .panel-button:overview.clock-display .clock, #panel.unlock-screen .panel-button:focus.clock-display .clock, #panel.unlock-screen .panel-button:checked.clock-display .clock, #panel.login-screen .panel-button:active.clock-display .clock, #panel.login-screen .panel-button:overview.clock-display .clock, #panel.login-screen .panel-button:focus.clock-display .clock, #panel.login-screen .panel-button:checked.clock-display .clock, #panel:overview .panel-button:active.clock-display .clock, #panel:overview .panel-button:overview.clock-display .clock, #panel:overview .panel-button:focus.clock-display .clock, #panel:overview .panel-button:checked.clock-display .clock {
box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15); }
+ #panel.unlock-screen .panel-button:active.screen-recording-indicator, #panel.unlock-screen .panel-button:overview.screen-recording-indicator, #panel.unlock-screen .panel-button:focus.screen-recording-indicator, #panel.unlock-screen .panel-button:checked.screen-recording-indicator, #panel.login-screen .panel-button:active.screen-recording-indicator, #panel.login-screen .panel-button:overview.screen-recording-indicator, #panel.login-screen .panel-button:focus.screen-recording-indicator, #panel.login-screen .panel-button:checked.screen-recording-indicator, #panel:overview .panel-button:active.screen-recording-indicator, #panel:overview .panel-button:overview.screen-recording-indicator, #panel:overview .panel-button:focus.screen-recording-indicator, #panel:overview .panel-button:checked.screen-recording-indicator {
+ box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.85); }
+ #panel.unlock-screen .panel-button:hover, #panel.login-screen .panel-button:hover, #panel:overview .panel-button:hover {
+ box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.1); }
+ #panel.unlock-screen .panel-button:hover.clock-display, #panel.login-screen .panel-button:hover.clock-display, #panel:overview .panel-button:hover.clock-display {
+ box-shadow: none; }
+ #panel.unlock-screen .panel-button:hover.clock-display .clock, #panel.login-screen .panel-button:hover.clock-display .clock, #panel:overview .panel-button:hover.clock-display .clock {
+ box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.1); }
+ #panel.unlock-screen .panel-button:hover.screen-recording-indicator, #panel.login-screen .panel-button:hover.screen-recording-indicator, #panel:overview .panel-button:hover.screen-recording-indicator {
+ box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.9); }
+ #panel.unlock-screen .panel-button:active:hover, #panel.unlock-screen .panel-button:overview:hover, #panel.unlock-screen .panel-button:focus:hover, #panel.unlock-screen .panel-button:checked:hover, #panel.login-screen .panel-button:active:hover, #panel.login-screen .panel-button:overview:hover, #panel.login-screen .panel-button:focus:hover, #panel.login-screen .panel-button:checked:hover, #panel:overview .panel-button:active:hover, #panel:overview .panel-button:overview:hover, #panel:overview .panel-button:focus:hover, #panel:overview .panel-button:checked:hover {
+ box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.2); }
+ #panel.unlock-screen .panel-button:active:hover.clock-display, #panel.unlock-screen .panel-button:overview:hover.clock-display, #panel.unlock-screen .panel-button:focus:hover.clock-display, #panel.unlock-screen .panel-button:checked:hover.clock-display, #panel.login-screen .panel-button:active:hover.clock-display, #panel.login-screen .panel-button:overview:hover.clock-display, #panel.login-screen .panel-button:focus:hover.clock-display, #panel.login-screen .panel-button:checked:hover.clock-display, #panel:overview .panel-button:active:hover.clock-display, #panel:overview .panel-button:overview:hover.clock-display, #panel:overview .panel-button:focus:hover.clock-display, #panel:overview .panel-button:checked:hover.clock-display {
+ box-shadow: none; }
+ #panel.unlock-screen .panel-button:active:hover.clock-display .clock, #panel.unlock-screen .panel-button:overview:hover.clock-display .clock, #panel.unlock-screen .panel-button:focus:hover.clock-display .clock, #panel.unlock-screen .panel-button:checked:hover.clock-display .clock, #panel.login-screen .panel-button:active:hover.clock-display .clock, #panel.login-screen .panel-button:overview:hover.clock-display .clock, #panel.login-screen .panel-button:focus:hover.clock-display .clock, #panel.login-screen .panel-button:checked:hover.clock-display .clock, #panel:overview .panel-button:active:hover.clock-display .clock, #panel:overview .panel-button:overview:hover.clock-display .clock, #panel:overview .panel-button:focus:hover.clock-display .clock, #panel:overview .panel-button:checked:hover.clock-display .clock {
+ box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.2); }
+ #panel.unlock-screen .panel-button:active:hover.screen-recording-indicator, #panel.unlock-screen .panel-button:overview:hover.screen-recording-indicator, #panel.unlock-screen .panel-button:focus:hover.screen-recording-indicator, #panel.unlock-screen .panel-button:checked:hover.screen-recording-indicator, #panel.login-screen .panel-button:active:hover.screen-recording-indicator, #panel.login-screen .panel-button:overview:hover.screen-recording-indicator, #panel.login-screen .panel-button:focus:hover.screen-recording-indicator, #panel.login-screen .panel-button:checked:hover.screen-recording-indicator, #panel:overview .panel-button:active:hover.screen-recording-indicator, #panel:overview .panel-button:overview:hover.screen-recording-indicator, #panel:overview .panel-button:focus:hover.screen-recording-indicator, #panel:overview .panel-button:checked:hover.screen-recording-indicator {
+ box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.8); }
#panel .panel-status-indicators-box,
#panel .panel-status-menu-box {
spacing: 2px; }
@@ -1276,6 +1588,12 @@ StScrollBar {
padding: 0 6px;
spacing: 6px; }
+.clock-display-box {
+ spacing: 2px; }
+ .clock-display-box .clock {
+ padding-left: 12px;
+ padding-right: 12px; }
+
/* Activities Ripple */
.ripple-box {
background-color: rgba(243, 247, 255, 0.3);
@@ -1306,22 +1624,21 @@ StScrollBar {
border-radius: 99px;
padding: 6px 12px; }
-.window-close {
- background-color: #303340;
+.window-close, .screenshot-ui-close-button {
+ background-color: rgba(41, 44, 55, 0.95);
color: white;
border-radius: 21px;
padding: 3px;
height: 30px;
width: 30px;
- box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.5);
transition-duration: 300ms; }
- .window-close StIcon {
+ .window-close StIcon, .screenshot-ui-close-button StIcon {
icon-size: 24px; }
- .window-close:hover {
- background-color: #51576b; }
- .window-close:active {
+ .window-close:hover, .screenshot-ui-close-button:hover {
+ background-color: rgba(76, 79, 88, 0.9575); }
+ .window-close:active, .screenshot-ui-close-button:active {
color: rgba(255, 255, 255, 0.8);
- background-color: #252831; }
+ background-color: rgba(30, 33, 40, 0.95); }
.workspace-background {
border-radius: 30px;
@@ -1329,68 +1646,95 @@ StScrollBar {
.search-entry {
- width: 320px;
- padding: 7px 9px;
border-radius: 18px;
- color: rgba(238, 238, 236, 0.7);
- background-color: #23252e;
margin-top: 12px;
margin-bottom: 6px;
- border-width: 2px;
- border-color: transparent; }
+ padding: 7px 9px;
+ width: 320px;
+ background-color: #2e313d;
+ color: rgba(238, 238, 236, 0.7);
+ border: 2px solid #2e313d; }
.search-entry:hover {
- background-color: #2e313d;
- color: #fafaf9; }
+ background-color: #3b3f4e;
+ border-color: #3b3f4e;
+ color: rgba(238, 238, 236, 0.7); }
.search-entry:focus {
- border-style: solid;
+ background-color: #2d3546;
border-color: #2777ff;
- color: #eeeeec;
- box-shadow: inset 0 1px 2px 1px rgba(0, 0, 0, 0.2); }
+ color: #eeeeec; }
+
+ .search-entry:insensitive {
+ background-color: #2f3340;
+ border-color: #2f3340;
+ color: #888a8d; }
.search-entry .search-entry-icon {
+ color: inherit;
icon-size: 1.09em;
- padding: 0 4px;
- color: inherit; }
+ margin-top: 2px;
+ padding: 0 4px; }
/* Search */
+#searchResults {
+ margin: 0 4px; }
+
#searchResultsContent {
- max-width: 1024px;
- spacing: 8px; }
+ max-width: 1072px; }
.search-section {
- spacing: 8px; }
+ spacing: 18px; }
.search-section .search-section-separator {
- height: 0;
+ height: 8px;
background-color: transparent; }
.search-section-content {
- background-color: rgba(59, 63, 78, 0.8);
- border-radius: 19px;
+ background-color: #323643;
+ border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.1);
- box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
color: white;
- padding: 18px;
- spacing: 8px; }
+ padding: 12px;
+ margin: 0 12px; }
-.list-search-result:focus, .search-provider-icon:focus, .list-search-result:hover, .search-provider-icon:hover, .list-search-result:selected, .search-provider-icon:selected {
- background-color: rgba(255, 255, 255, 0.1);
- transition-duration: 200ms; }
-
-.list-search-result:active, .search-provider-icon:active, .list-search-result:checked, .search-provider-icon:checked {
- background-color: rgba(26, 28, 35, 0.9); }
+.list-search-result, .search-provider-icon {
+ background-color: transparent;
+ border-radius: 11px; }
+ .list-search-result:hover, .search-provider-icon:hover {
+ background-color: rgba(255, 255, 255, 0.1); }
+ .list-search-result:selected, .search-provider-icon:selected, .list-search-result:focus, .search-provider-icon:focus {
+ background-color: rgba(255, 255, 255, 0.13); }
+ .list-search-result:selected:hover, .search-provider-icon:selected:hover, .list-search-result:focus:hover, .search-provider-icon:focus:hover {
+ background-color: rgba(255, 255, 255, 0.16); }
+ .list-search-result:selected:active, .search-provider-icon:selected:active, .list-search-result:focus:active, .search-provider-icon:focus:active {
+ background-color: rgba(255, 255, 255, 0.13); }
+ .list-search-result:active, .search-provider-icon:active {
+ background-color: rgba(255, 255, 255, 0.16); }
+ .list-search-result:outlined, .search-provider-icon:outlined, .list-search-result:checked, .search-provider-icon:checked {
+ background-color: rgba(255, 255, 255, 0.19); }
+ .list-search-result:outlined:active, .search-provider-icon:outlined:active, .list-search-result:checked:active, .search-provider-icon:checked:active {
+ background-color: rgba(255, 255, 255, 0.22); }
+ .list-search-result:outlined:hover, .search-provider-icon:outlined:hover, .list-search-result:checked:hover, .search-provider-icon:checked:hover {
+ background-color: rgba(255, 255, 255, 0.25); }
+ .list-search-result:drop, .search-provider-icon:drop {
+ border: 2px solid rgba(39, 119, 255, 0.8);
+ background-color: rgba(39, 119, 255, 0.2); }
.grid-search-results {
- spacing: 36px; }
+ spacing: 30px;
+ margin: 0 12px; }
+
+.search-provider-icon:ltr {
+ margin-right: 4px; }
+
+.search-provider-icon:rtl {
+ margin-left: 4px; }
.search-provider-icon .list-search-provider-content {
spacing: 12px; }
.search-provider-icon .list-search-provider-content .list-search-provider-details {
width: 120px;
- margin-top: 0;
- color: #ebebeb; }
+ color: white; }
.list-search-results {
spacing: 6px; }
@@ -1402,13 +1746,11 @@ StScrollBar {
spacing: 12px; }
.list-search-result .list-search-result-description {
- color: #b3b3b3; }
+ color: #97999f; }
/* Dash */
#dash {
- font-size: 8pt;
- margin-top: 18px;
- padding: 0 10px; }
+ margin-top: 12px; }
#dash .placeholder {
background-image: none;
background-size: contain;
@@ -1416,22 +1758,63 @@ StScrollBar {
#dash .empty-dash-drop-target {
width: 32px;
height: 32px; }
- #dash .overview-icon {
- padding: 5px; }
+ #dash .app-well-app-running-dot {
+ margin-bottom: 14px; }
.dash-background {
- background-color: #3b3b3b;
- margin-bottom: 16px;
- padding: 10px;
- border-radius: 24px; }
+ background-color: #323643;
+ border-radius: 28px;
+ padding: 12px;
+ spacing: 6px;
+ margin-bottom: 12px; }
-.dash-item-container .app-well-app, .show-apps {
- padding: 10px 1.5px 26px; }
+.dash-item-container > * {
+ margin: 0 2px; }
+
+.dash-item-container:ltr:first-child {
+ margin-left: 0; }
+
+.dash-item-container:rtl:first-child {
+ margin-right: 0; }
+
+.dash-item-container .app-well-app .overview-icon, .dash-item-container .grid-search-result .overview-icon {
+ padding: 6px; }
+
+.dash-item-container .show-apps .overview-icon {
+ background-color: transparent; }
+
+.dash-item-container .show-apps:hover .overview-icon {
+ background-color: rgba(255, 255, 255, 0.1); }
+
+.dash-item-container .show-apps:selected .overview-icon, .dash-item-container .show-apps:focus .overview-icon {
+ background-color: rgba(255, 255, 255, 0.13); }
+ .dash-item-container .show-apps:selected .overview-icon:hover .overview-icon, .dash-item-container .show-apps:focus .overview-icon:hover .overview-icon {
+ background-color: rgba(255, 255, 255, 0.16); }
+ .dash-item-container .show-apps:selected .overview-icon:active .overview-icon, .dash-item-container .show-apps:focus .overview-icon:active .overview-icon {
+ background-color: rgba(255, 255, 255, 0.13); }
+
+.dash-item-container .show-apps:active .overview-icon {
+ background-color: rgba(255, 255, 255, 0.16); }
+
+.dash-item-container .show-apps:outlined .overview-icon, .dash-item-container .show-apps:checked .overview-icon {
+ background-color: rgba(255, 255, 255, 0.19); }
+ .dash-item-container .show-apps:outlined .overview-icon:active .overview-icon, .dash-item-container .show-apps:checked .overview-icon:active .overview-icon {
+ background-color: rgba(255, 255, 255, 0.22); }
+ .dash-item-container .show-apps:outlined .overview-icon:hover .overview-icon, .dash-item-container .show-apps:checked .overview-icon:hover .overview-icon {
+ background-color: rgba(255, 255, 255, 0.25); }
+
+.dash-item-container .show-apps:drop .overview-icon {
+ border: 2px solid rgba(39, 119, 255, 0.8);
+ background-color: rgba(39, 119, 255, 0.2); }
+
+.dash-item-container .show-apps, .dash-item-container .app-well-app, .dash-item-container .grid-search-result {
+ padding-bottom: 12px; }
.dash-separator {
width: 1px;
- margin: 0 6.5px 16px;
- background-color: rgba(255, 255, 255, 0.3); }
+ margin: 0 4px;
+ background-color: #0d0e11;
+ margin-bottom: 12px; }
.dash-label {
color: white;
@@ -1439,86 +1822,87 @@ StScrollBar {
border-radius: 99px;
padding: 6px 12px;
text-align: center;
- -y-offset: 12px; }
-
-.show-apps .overview-icon {
- color: white; }
-
-.show-apps:hover .overview-icon, .show-apps:selected .overview-icon {
- background-color: rgba(255, 255, 255, 0.1); }
-
-.show-apps:focus .overview-icon {
- background-color: rgba(255, 255, 255, 0.3); }
-
-.show-apps:drop .overview-icon {
- border: 2px solid #2777ff;
- background-color: rgba(39, 119, 255, 0.2); }
-
-.show-apps:active .overview-icon, .show-apps:checked .overview-icon {
- background-color: rgba(26, 28, 35, 0.5); }
-
-.show-apps:focus .overview-icon, .show-apps:checked .overview-icon {
- background-color: rgba(48, 51, 64, 0.5);
- color: #eeeeec; }
+ -y-offset: 8px; }
/* App Grid */
.icon-grid {
row-spacing: 12px;
column-spacing: 12px;
- max-row-spacing: 72px;
- max-column-spacing: 72px;
+ max-row-spacing: 42px;
+ max-column-spacing: 42px;
page-padding-top: 24px;
page-padding-bottom: 24px;
- page-padding-left: 12px;
- page-padding-right: 12px; }
+ page-padding-left: 18px;
+ page-padding-right: 18px; }
/* App Icons */
-.app-well-app .overview-icon,
-.grid-search-result .overview-icon {
- color: #fff; }
+.app-well-app .overview-icon, .grid-search-result .overview-icon {
+ background-color: transparent; }
-.app-well-app:hover .overview-icon, .app-well-app:selected .overview-icon,
-.grid-search-result:hover .overview-icon,
-.grid-search-result:selected .overview-icon {
+.app-well-app:hover .overview-icon, .grid-search-result:hover .overview-icon {
background-color: rgba(255, 255, 255, 0.1); }
-.app-well-app:focus .overview-icon,
-.grid-search-result:focus .overview-icon {
- background-color: rgba(255, 255, 255, 0.3); }
+.app-well-app:selected .overview-icon, .grid-search-result:selected .overview-icon, .app-well-app:focus .overview-icon, .grid-search-result:focus .overview-icon {
+ background-color: rgba(255, 255, 255, 0.13); }
+ .app-well-app:selected .overview-icon:hover .overview-icon, .grid-search-result:selected .overview-icon:hover .overview-icon, .app-well-app:focus .overview-icon:hover .overview-icon, .grid-search-result:focus .overview-icon:hover .overview-icon {
+ background-color: rgba(255, 255, 255, 0.16); }
+ .app-well-app:selected .overview-icon:active .overview-icon, .grid-search-result:selected .overview-icon:active .overview-icon, .app-well-app:focus .overview-icon:active .overview-icon, .grid-search-result:focus .overview-icon:active .overview-icon {
+ background-color: rgba(255, 255, 255, 0.13); }
-.app-well-app:drop .overview-icon,
-.grid-search-result:drop .overview-icon {
- border: 2px solid #2777ff;
+.app-well-app:active .overview-icon, .grid-search-result:active .overview-icon {
+ background-color: rgba(255, 255, 255, 0.16); }
+
+.app-well-app:outlined .overview-icon, .grid-search-result:outlined .overview-icon, .app-well-app:checked .overview-icon, .grid-search-result:checked .overview-icon {
+ background-color: rgba(255, 255, 255, 0.19); }
+ .app-well-app:outlined .overview-icon:active .overview-icon, .grid-search-result:outlined .overview-icon:active .overview-icon, .app-well-app:checked .overview-icon:active .overview-icon, .grid-search-result:checked .overview-icon:active .overview-icon {
+ background-color: rgba(255, 255, 255, 0.22); }
+ .app-well-app:outlined .overview-icon:hover .overview-icon, .grid-search-result:outlined .overview-icon:hover .overview-icon, .app-well-app:checked .overview-icon:hover .overview-icon, .grid-search-result:checked .overview-icon:hover .overview-icon {
+ background-color: rgba(255, 255, 255, 0.25); }
+
+.app-well-app:drop .overview-icon, .grid-search-result:drop .overview-icon {
+ border: 2px solid rgba(39, 119, 255, 0.8);
background-color: rgba(39, 119, 255, 0.2); }
-.app-well-app:active .overview-icon, .app-well-app:checked .overview-icon,
-.grid-search-result:active .overview-icon,
-.grid-search-result:checked .overview-icon {
- background-color: rgba(26, 28, 35, 0.5); }
+.app-well-app .overview-icon, .grid-search-result .overview-icon {
+ padding: 12px; }
-.app-well-app .overview-icon.overview-icon-with-label,
-.grid-search-result .overview-icon.overview-icon-with-label {
- padding: 10px 8px 5px 8px; }
- .app-well-app .overview-icon.overview-icon-with-label > StBoxLayout,
- .grid-search-result .overview-icon.overview-icon-with-label > StBoxLayout {
- spacing: 6px; }
+.app-well-app .overview-icon.overview-icon-with-label > StBoxLayout, .grid-search-result .overview-icon.overview-icon-with-label > StBoxLayout {
+ spacing: 6px; }
-/* App Folders */
-.app-well-app.app-folder {
- background-color: #3b3b3b;
- border-radius: 12px; }
+.app-well-app.app-folder .overview-icon, .app-folder.grid-search-result .overview-icon {
+ background-color: rgba(255, 255, 255, 0.19); }
+
+.app-well-app.app-folder:hover .overview-icon, .app-folder.grid-search-result:hover .overview-icon {
+ background-color: rgba(255, 255, 255, 0.1); }
+
+.app-well-app.app-folder:selected .overview-icon, .app-folder.grid-search-result:selected .overview-icon, .app-well-app.app-folder:focus .overview-icon, .app-folder.grid-search-result:focus .overview-icon {
+ background-color: rgba(255, 255, 255, 0.13); }
+ .app-well-app.app-folder:selected .overview-icon:hover .overview-icon, .app-folder.grid-search-result:selected .overview-icon:hover .overview-icon, .app-well-app.app-folder:focus .overview-icon:hover .overview-icon, .app-folder.grid-search-result:focus .overview-icon:hover .overview-icon {
+ background-color: rgba(255, 255, 255, 0.16); }
+ .app-well-app.app-folder:selected .overview-icon:active .overview-icon, .app-folder.grid-search-result:selected .overview-icon:active .overview-icon, .app-well-app.app-folder:focus .overview-icon:active .overview-icon, .app-folder.grid-search-result:focus .overview-icon:active .overview-icon {
+ background-color: rgba(255, 255, 255, 0.13); }
+
+.app-well-app.app-folder:active .overview-icon, .app-folder.grid-search-result:active .overview-icon {
+ background-color: rgba(255, 255, 255, 0.16); }
+
+.app-well-app.app-folder:outlined .overview-icon, .app-folder.grid-search-result:outlined .overview-icon, .app-well-app.app-folder:checked .overview-icon, .app-folder.grid-search-result:checked .overview-icon {
+ background-color: rgba(255, 255, 255, 0.19); }
+ .app-well-app.app-folder:outlined .overview-icon:active .overview-icon, .app-folder.grid-search-result:outlined .overview-icon:active .overview-icon, .app-well-app.app-folder:checked .overview-icon:active .overview-icon, .app-folder.grid-search-result:checked .overview-icon:active .overview-icon {
+ background-color: rgba(255, 255, 255, 0.22); }
+ .app-well-app.app-folder:outlined .overview-icon:hover .overview-icon, .app-folder.grid-search-result:outlined .overview-icon:hover .overview-icon, .app-well-app.app-folder:checked .overview-icon:hover .overview-icon, .app-folder.grid-search-result:checked .overview-icon:hover .overview-icon {
+ background-color: rgba(255, 255, 255, 0.25); }
+
+.app-well-app.app-folder:drop .overview-icon, .app-folder.grid-search-result:drop .overview-icon {
+ border: 2px solid rgba(39, 119, 255, 0.8);
+ background-color: rgba(39, 119, 255, 0.2); }
.app-folder-dialog {
- border-radius: 24px;
- background-color: #3b3b3b;
- padding: 12px 0px 12px 0px; }
+ border-radius: 32px;
+ background-color: #323643; }
.app-folder-dialog .folder-name-container {
padding: 24px 36px 0;
spacing: 12px;
/* FIXME: this is to keep the label in sync with the entry */ }
- .app-folder-dialog .folder-name-container .folder-name-label, .app-folder-dialog .folder-name-container .folder-name-entry {
- font-size: 18pt;
- font-weight: 800; }
.app-folder-dialog .folder-name-container .folder-name-entry {
width: 300px; }
.app-folder-dialog .folder-name-container .folder-name-label {
@@ -1528,9 +1912,9 @@ StScrollBar {
padding: 0;
width: 36px;
height: 36px;
- border-radius: 18px; }
+ border-radius: 99px; }
.app-folder-dialog .folder-name-container .edit-folder-button > StIcon {
- icon-size: 16px; }
+ icon-size: 1.09em; }
.app-folder-dialog .icon-grid {
row-spacing: 12px;
column-spacing: 30px;
@@ -1543,24 +1927,21 @@ StScrollBar {
.app-folder-dialog-container {
padding: 12px;
- width: 620px;
- height: 620px; }
+ width: 640px;
+ height: 640px; }
.app-well-app-running-dot {
height: 5px;
width: 5px;
border-radius: 5px;
- background-color: white;
- margin-bottom: 1px; }
+ margin-bottom: 8px;
+ background-color: white; }
.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 {
- max-width: 27.25em; }
-
.page-indicator {
padding: 6px 12px 0; }
.page-indicator .page-indicator-icon {
@@ -1586,12 +1967,12 @@ StScrollBar {
background-gradient-start: rgba(255, 255, 255, 0.05);
background-gradient-end: transparent;
background-gradient-direction: horizontal;
- border-radius: 15px 0px 0px 15px; }
+ border-radius: 24px 0px 0px 24px; }
.page-navigation-hint.previous:ltr, .page-navigation-hint.next:rtl {
background-gradient-start: transparent;
background-gradient-end: rgba(255, 255, 255, 0.05);
background-gradient-direction: horizontal;
- border-radius: 0px 15px 15px 0px; }
+ border-radius: 0px 24px 24px 0px; }
.page-navigation-arrow {
margin: 6px;
@@ -1675,7 +2056,6 @@ StScrollBar {
.caps-lock-warning-label {
text-align: center;
padding-bottom: 8px;
- font-size: 9pt;
color: #fd7d00; }
/* Workspace animation */
@@ -1687,18 +2067,9 @@ StScrollBar {
background-color: rgba(39, 119, 255, 0.5);
border: 1px solid #2777ff; }
-.tile-preview-left.on-primary {
- border-radius: 9px 0 0 0; }
-
-.tile-preview-right.on-primary {
- border-radius: 0 9px 0 0; }
-
-.tile-preview-left.tile-preview-right.on-primary {
- border-radius: 9px 9px 0 0; }
-
/* On-screen Keyboard */
#keyboard {
- background-color: rgba(17, 18, 23, 0.9);
+ background-color: rgba(26, 28, 35, 0.96);
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1); }
#keyboard .page-indicator {
padding: 6px; }
@@ -1711,124 +2082,107 @@ StScrollBar {
spacing: 4px; }
.keyboard-key {
- color: #eeeeec;
- background-color: #292c37;
- border-color: #1a1c23;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2);
font-size: 15pt;
+ font-weight: bold;
min-height: 1.2em;
min-width: 1.2em;
border-width: 1px;
border-style: solid;
- border-radius: 11px; }
+ border-radius: 12px;
+ box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.3);
+ color: white;
+ background-color: #363a48; }
.keyboard-key:focus {
- color: #eeeeec;
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2);
+ color: white;
+ background-color: #35415b;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
- .keyboard-key:hover, .keyboard-key:checked {
- color: #eeeeec;
- background-color: #2e313d;
- border-color: #1a1c23;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2); }
+ .keyboard-key:focus:hover {
+ background-color: #3f4b68;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .keyboard-key:focus:active {
+ background-color: #434f6d;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .keyboard-key:hover {
+ color: white;
+ background-color: #3f4454; }
.keyboard-key:active {
- color: #eeeeec;
- background-color: #1c1e25;
- border-color: #0b0b0e;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
+ color: white;
+ background-color: #464b5d; }
+ .keyboard-key:checked {
+ color: white;
+ background-color: #51576b; }
.keyboard-key:grayed {
background-color: #1c1e25;
color: white;
border-color: black; }
.keyboard-key.default-key {
- color: #eeeeec;
- background-color: #3b3f4e;
- border-color: #2b2f3a;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2); }
- .keyboard-key.default-key:hover, .keyboard-key.default-key:checked {
- color: #eeeeec;
- background-color: #3f4454;
- border-color: #2b2f3a;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2); }
+ color: white;
+ background-color: #4c5266;
+ border-radius: 12px; }
+ .keyboard-key.default-key:hover {
+ color: white;
+ background-color: #555b71; }
.keyboard-key.default-key:active {
- color: #eeeeec;
- background-color: #2e313d;
- border-color: #1c1e25;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
+ color: white;
+ background-color: #5b627a; }
+ .keyboard-key.default-key:checked {
+ color: white;
+ background-color: #666e89; }
.keyboard-key.enter-key {
color: #ffffff;
background-color: #3681ff;
- border-color: #136aff;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2); }
- .keyboard-key.enter-key:hover, .keyboard-key.enter-key:checked {
- color: #eeeeec;
- background-color: #5091ff;
- border-color: #2274ff;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2); }
+ border-radius: 12px;
+ color: white; }
+ .keyboard-key.enter-key:hover {
+ color: #ffffff;
+ background-color: #4b8eff; }
.keyboard-key.enter-key:active {
- color: #eeeeec;
- background-color: #0e67ff;
- border-color: #0054e4;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
+ color: #ffffff;
+ background-color: #5a97ff; }
+ .keyboard-key.enter-key:checked {
+ color: #ffffff;
+ background-color: #74a7ff; }
.keyboard-key.shift-key-uppercase {
- color: #2777ff; }
+ background-color: #5b627a;
+ color: #303340; }
+ .keyboard-key.shift-key-uppercase:hover {
+ background-color: #666e89;
+ color: #3b3f4e; }
.keyboard-key StIcon {
- icon-size: 1.125em; }
+ icon-size: 24px; }
.keyboard-subkeys {
- color: white;
-arrow-border-radius: 16px;
-arrow-background-color: #303340;
-arrow-border-width: 1px;
-arrow-border-color: #43495a;
-arrow-base: 20px;
-arrow-rise: 10px;
- -boxpointer-gap: 6px; }
+ -boxpointer-gap: 6px;
+ padding: 6px; }
.keyboard-subkeys .keyboard-key {
- color: #eeeeec;
- background-color: #292c37;
- border-color: #1a1c23;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2);
- border-radius: 8px; }
+ color: white;
+ background-color: #363a48;
+ border-radius: 12px; }
.keyboard-subkeys .keyboard-key:focus {
- color: #eeeeec;
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2);
+ color: white;
+ background-color: #35415b;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
- .keyboard-subkeys .keyboard-key:hover, .keyboard-subkeys .keyboard-key:checked {
- color: #eeeeec;
- background-color: #2e313d;
- border-color: #1a1c23;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2); }
+ .keyboard-subkeys .keyboard-key:focus:hover {
+ background-color: #3f4b68;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .keyboard-subkeys .keyboard-key:focus:active {
+ background-color: #434f6d;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .keyboard-subkeys .keyboard-key:hover {
+ color: white;
+ background-color: #3f4454; }
.keyboard-subkeys .keyboard-key:active {
- color: #eeeeec;
- background-color: #1c1e25;
- border-color: #0b0b0e;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
+ color: white;
+ background-color: #464b5d; }
+ .keyboard-subkeys .keyboard-key:checked {
+ color: white;
+ background-color: #51576b; }
.emoji-page .keyboard-key {
background-color: transparent;
@@ -1842,42 +2196,82 @@ StScrollBar {
.word-suggestions {
font-size: 13pt;
spacing: 12px;
- min-height: 20pt; }
+ min-height: 20pt;
+ padding: 12px;
+ color: white; }
+ .word-suggestions StButton {
+ margin: 0 3px;
+ min-width: 32px;
+ border-radius: 6px;
+ padding: 6px 18px;
+ background-color: transparent;
+ background-image: none; }
+ .word-suggestions StButton:focus {
+ color: white;
+ background-color: #35415b;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
+ .word-suggestions StButton:focus:hover {
+ background-color: #3f4b68;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .word-suggestions StButton:focus:active {
+ background-color: #434f6d;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .word-suggestions StButton:hover {
+ color: white;
+ background-color: #3f4454; }
+ .word-suggestions StButton:active {
+ color: white;
+ background-color: #464b5d; }
+ .word-suggestions StButton:checked {
+ color: white;
+ background-color: #51576b; }
/* Looking Glass */
#LookingGlassDialog {
background-color: #303340;
+ border-radius: 0 0 16px 16px;
+ border-top-width: 0;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ color: white;
+ padding: 6px;
spacing: 6px;
- padding: 4px;
- border: 1px solid rgba(255, 255, 255, 0.2);
- border-radius: 8px;
- color: white; }
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); }
#LookingGlassDialog > #Toolbar {
border: none;
- border-radius: 8px;
- background-color: #303340; }
+ padding: 6px;
+ border-radius: 0;
+ background-color: transparent;
+ spacing: 6px; }
+ #LookingGlassDialog > #Toolbar .lg-toolbar-button {
+ padding: 6px 12px; }
+ #LookingGlassDialog > #Toolbar .lg-toolbar-button > StIcon {
+ icon-size: 1.09em; }
#LookingGlassDialog .labels {
spacing: 6px; }
#LookingGlassDialog .notebook-tab {
-natural-hpadding: 12px;
- -minimum-hpadding: 6px;
+ -minimum-hpadding: 12px;
font-weight: bold;
+ padding: 6px 12px;
color: #d9d9d9;
transition-duration: 100ms;
- padding-left: .3em;
- padding-right: .3em;
- border-bottom-width: 2px; }
+ box-shadow: none;
+ border: none;
+ border-radius: 6px;
+ background-color: transparent; }
#LookingGlassDialog .notebook-tab:hover {
- color: white; }
+ color: white;
+ background-color: rgba(255, 255, 255, 0.05); }
#LookingGlassDialog .notebook-tab:selected {
- border-bottom-width: 2px;
- box-shadow: inset 0 -2px 0 0 #4187ff;
- color: white; }
+ color: white;
+ background-color: rgba(255, 255, 255, 0.1); }
#LookingGlassDialog StBoxLayout#EvalBox {
padding: 4px;
- spacing: 6px; }
+ spacing: 6px;
+ padding: 6px; }
#LookingGlassDialog StBoxLayout#ResultsArea {
- spacing: 6px; }
+ spacing: 6px;
+ padding: 6px; }
.lg-dialog StEntry {
background-color: rgba(59, 63, 78, 0.6);
@@ -1895,14 +2289,13 @@ StScrollBar {
color: #5a97ff; }
.lg-dialog .actor-link {
- color: #ccc; }
+ color: #888a8d; }
.lg-dialog .actor-link:hover {
- color: white; }
+ color: #bcbdbf; }
.lg-dialog .actor-link:active {
- color: #999999; }
+ color: #565759; }
.lg-completions-text {
- font-size: .9em;
font-style: italic; }
.lg-obj-inspector-title {
@@ -1916,20 +2309,42 @@ StScrollBar {
border: 1px solid #ffffff; }
#lookingGlassExtensions {
- padding: 4px; }
+ padding: 6px; }
.lg-extensions-list {
- padding: 4px;
+ padding: 6px;
spacing: 6px; }
.lg-extension {
- border: 1px solid #0d0d0d;
- background-color: #3b3f4e;
+ padding: 12px;
border-radius: 8px;
- padding: 4px; }
-
-.lg-extension-name {
- font-weight: bold; }
+ margin: 4px;
+ box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+ border: 1px solid transparent;
+ color: #eeeeec;
+ background-color: #2e313d;
+ border-color: #1a1c23; }
+ .lg-extension:focus {
+ border: 1px solid transparent;
+ color: #eeeeec;
+ background-color: #2d3850;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
+ .lg-extension:focus:hover {
+ background-color: #333e58;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .lg-extension:focus:active {
+ background-color: #394560;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .lg-extension:hover {
+ border: 1px solid transparent;
+ color: #eeeeec;
+ background-color: #333742;
+ border-color: #1a1c23; }
+ .lg-extension:active {
+ border: 1px solid transparent;
+ color: #eeeeec;
+ background-color: #393c47;
+ border-color: #0b0b0e; }
.lg-extension-meta {
spacing: 6px; }
@@ -1940,6 +2355,19 @@ StScrollBar {
border-radius: 8px;
padding: 6px; }
+.lg-debug-flag-button {
+ color: #eeeeec; }
+ .lg-debug-flag-button StLabel {
+ padding: 6px, 12px; }
+ .lg-debug-flag-button:hover {
+ color: white; }
+ .lg-debug-flag-button:active {
+ color: #bebeb6; }
+
+.lg-debug-flags-header {
+ padding-top: 12px;
+ padding: 6px; }
+
/* Login Dialog */
.login-dialog-banner-view {
padding-top: 24px;
@@ -1949,10 +2377,6 @@ StScrollBar {
.unlock-dialog {
border: none;
background-color: transparent; }
- .login-dialog StEntry,
- .unlock-dialog StEntry {
- background-color: #20232b;
- color: #eeeeec; }
.login-dialog .modal-dialog-button-box,
.unlock-dialog .modal-dialog-button-box {
spacing: 3px; }
@@ -1975,56 +2399,38 @@ StScrollBar {
border-color: #1c1e25; }
.login-dialog .modal-dialog-button:insensitive,
.unlock-dialog .modal-dialog-button:insensitive {
- color: #888a8d;
+ border: 1px solid transparent;
+ color: rgba(238, 238, 236, 0.5);
+ background-color: rgba(238, 238, 236, 0.05);
border-color: #0d0e11;
- background-color: #242731;
- box-shadow: none;
- text-shadow: none;
- icon-shadow: none;
border-color: #1c1e25;
background-color: #1c1e25;
color: rgba(255, 255, 255, 0.7); }
.login-dialog .modal-dialog-button:default,
.unlock-dialog .modal-dialog-button:default {
- color: #ffffff;
- background-color: #3681ff;
- border-color: #136aff;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2);
- border-color: #2777ff; }
+ border: 1px solid transparent;
+ background-color: #2777ff;
+ color: #ffffff; }
+ .login-dialog .modal-dialog-button:default:focus,
+ .unlock-dialog .modal-dialog-button:default:focus {
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus,
.unlock-dialog .modal-dialog-button:default:hover,
.unlock-dialog .modal-dialog-button:default:focus {
- color: #ffffff;
- background-color: #4187ff;
- border-color: #136aff;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2);
- background-color: #4187ff;
- border-color: #4187ff; }
+ background-color: #317dfe;
+ color: white; }
.login-dialog .modal-dialog-button:default:active,
.unlock-dialog .modal-dialog-button:default:active {
- color: #ffffff;
- background-color: #186eff;
- border-color: #0058ee;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none;
- background-color: #0e67ff;
- border-color: #0e67ff; }
+ background-color: #0361ff;
+ color: #ededed; }
.login-dialog .modal-dialog-button:default:insensitive,
.unlock-dialog .modal-dialog-button:default:insensitive {
- color: #888a8d;
+ border: 1px solid transparent;
+ color: rgba(238, 238, 236, 0.5);
+ background-color: rgba(238, 238, 236, 0.05);
border-color: #0d0e11;
- background-color: #242731;
- box-shadow: none;
- text-shadow: none;
- icon-shadow: none;
- border-color: #005af3;
- background-color: #005af3;
- color: rgba(255, 255, 255, 0.7); }
+ background-color: rgba(39, 119, 255, 0.5);
+ color: rgba(255, 255, 255, 0.5); }
.login-dialog .cancel-button,
.login-dialog .switch-user-button,
.login-dialog .login-dialog-session-list-button,
@@ -2072,11 +2478,39 @@ StScrollBar {
color: white; }
.login-dialog-not-listed-label {
- font-size: 9pt;
font-weight: bold;
color: #b3b3b3;
padding-top: 1em; }
+.login-dialog-auth-list-view {
+ -st-vfade-offset: 1em; }
+
+.login-dialog-auth-list {
+ spacing: 6px;
+ margin-left: 2em; }
+
+.login-dialog-auth-list-title {
+ margin-left: 2em; }
+
+.login-dialog-auth-list-item {
+ border-radius: 12px;
+ padding: 6px;
+ color: #b3b3b3; }
+ .login-dialog-auth-list-item:focus, .login-dialog-auth-list-item:selected {
+ background-color: #2777ff;
+ color: #ffffff; }
+
+.login-dialog-auth-list-label {
+ font-size: 12pt;
+ font-weight: bold;
+ padding-left: 15px; }
+ .login-dialog-auth-list-label:ltr {
+ padding-left: 14px;
+ text-align: left; }
+ .login-dialog-auth-list-label:rtl {
+ padding-right: 14px;
+ text-align: right; }
+
.login-dialog-user-list-view {
-st-vfade-offset: 1em; }
@@ -2142,6 +2576,24 @@ StScrollBar {
font-size: 11pt;
padding-top: 1em; }
+.login-dialog StEntry {
+ background-color: #20232b;
+ color: #eeeeec; }
+
+.unlock-dialog StEntry {
+ border: none !important; }
+ .unlock-dialog StEntry:focus {
+ background-color: rgba(238, 238, 236, 0.1); }
+ .unlock-dialog StEntry:insensitive {
+ color: rgba(238, 238, 236, 0.5);
+ background-color: rgba(238, 238, 236, 0.05); }
+
+.unlock-dialog .cancel-button,
+.unlock-dialog .switch-user-button,
+.unlock-dialog .login-dialog-session-list-button {
+ border-color: transparent;
+ background-color: rgba(238, 238, 236, 0.1); }
+
/* Screen Shield */
.unlock-dialog-clock {
color: white;
@@ -2152,8 +2604,7 @@ StScrollBar {
.unlock-dialog-clock-time {
font-size: 64pt;
- padding-top: 42px;
- font-feature-settings: "tnum"; }
+ padding-top: 42px; }
.unlock-dialog-clock-date {
font-size: 16pt;
@@ -2164,7 +2615,7 @@ StScrollBar {
padding-top: 48px; }
.unlock-dialog-notifications-container {
- margin: 12px 0;
+ margin: 12px;
spacing: 6px;
width: 23em;
background-color: transparent; }
@@ -2173,29 +2624,28 @@ StScrollBar {
padding-bottom: 0; }
.unlock-dialog-notifications-container .notification,
.unlock-dialog-notifications-container .unlock-dialog-notification-source {
- padding: 12px 6px;
+ padding: 12px 16px;
border: none;
- background-color: rgba(48, 51, 64, 0.3);
+ background-color: rgba(255, 255, 255, 0.1);
color: white;
border-radius: 16px; }
.unlock-dialog-notifications-container .notification.critical,
.unlock-dialog-notifications-container .unlock-dialog-notification-source.critical {
- background-color: rgba(48, 51, 64, 0.9); }
+ background-color: rgba(255, 255, 255, 0.2); }
.unlock-dialog-notification-label {
- padding: 0px 0px 0px 12px; }
+ padding: 0 0 0 12px; }
.unlock-dialog-notification-count-text {
- weight: bold;
- padding: 0 6px;
- color: #303340;
- background-color: rgba(255, 255, 255, 0.3);
- border-radius: 99px;
- margin-right: 12px; }
+ font-weight: bold;
+ padding: 0 12px;
+ color: white;
+ background-color: rgba(255, 255, 255, 0.1);
+ border-radius: 99px; }
.screen-shield-background {
background: black;
- box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6); }
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); }
#lockDialogGroup {
background-color: #272a34; }
@@ -2207,80 +2657,145 @@ StScrollBar {
#unlockDialogNotifications StButton#vhandle:active, #unlockDialogNotifications StButton#hhandle:active {
background-color: rgba(39, 119, 255, 0.5); }
+.icon-dropshadow {
+ icon-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); }
+
/* OSD */
-.osd-window, .resize-popup, .switcher-list, .workspace-switcher-container {
- font-weight: bold;
- background-color: #23252e;
- color: #eeeeec;
- border: 1px solid #0d0e11;
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); }
- .osd-window StIcon, .resize-popup StIcon, .switcher-list StIcon, .workspace-switcher-container StIcon {
- color: #eeeeec;
- icon-shadow: 0 0 6px rgba(0, 0, 0, 0.4); }
+.osd-window, .resize-popup, .switcher-list, .workspace-switcher, .screenshot-ui-panel {
+ background-color: rgba(48, 51, 64, 0.96);
+ box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.2); }
-.osd-window .level {
- -barlevel-background-color: rgba(238, 238, 236, 0.1);
- -barlevel-active-background-color: #eeeeec; }
-
-/* Slider */
-.slider {
- height: 1.1em;
- -barlevel-height: .35em;
- -barlevel-background-color: #0d0e11;
- -barlevel-border-color: #2777ff;
- -barlevel-active-background-color: #2777ff;
- -barlevel-overdrive-color: #a61414;
- -barlevel-overdrive-separator-width: 0.1em;
- -barlevel-border-width: 0;
- -slider-handle-radius: 0; }
-
-/* Check Boxes */
-.check-box StBin {
- background-image: url("assets/checkbox-off-dark.svg"); }
-
-.check-box:focus StBin {
- background-image: url("assets/checkbox-off-focused-dark.svg"); }
-
-.check-box:checked StBin {
- background-image: url("assets/checkbox-dark.svg"); }
-
-.check-box:focus:checked StBin {
- background-image: url("assets/checkbox-focused-dark.svg"); }
+.screenshot-ui-type-button, .screenshot-ui-show-pointer-button {
+ border: 1px solid transparent;
+ background-color: transparent;
+ background-color: none;
+ border-color: transparent;
+ border: 0 !important; }
+ .screenshot-ui-type-button:insensitive, .screenshot-ui-show-pointer-button:insensitive {
+ border: 1px solid transparent;
+ color: rgba(238, 238, 236, 0.5);
+ background-color: rgba(238, 238, 236, 0.05);
+ border-color: #0d0e11;
+ background-color: transparent; }
+ .screenshot-ui-type-button:insensitive, .screenshot-ui-show-pointer-button:insensitive {
+ border: 1px solid transparent;
+ background-color: transparent;
+ background-color: none;
+ border-color: transparent; }
+ .screenshot-ui-type-button:insensitive:insensitive, .screenshot-ui-show-pointer-button:insensitive:insensitive {
+ border: 1px solid transparent;
+ color: rgba(238, 238, 236, 0.5);
+ background-color: rgba(238, 238, 236, 0.05);
+ border-color: #0d0e11;
+ background-color: transparent; }
+ .screenshot-ui-type-button:focus, .screenshot-ui-show-pointer-button:focus {
+ border: 1px solid transparent;
+ color: white;
+ background-color: #394560;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
+ .screenshot-ui-type-button:focus:hover, .screenshot-ui-show-pointer-button:focus:hover {
+ background-color: #3f4b68;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .screenshot-ui-type-button:focus:active, .screenshot-ui-show-pointer-button:focus:active {
+ background-color: #455170;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .screenshot-ui-type-button:hover, .screenshot-ui-show-pointer-button:hover {
+ border: 1px solid transparent;
+ color: white;
+ background-color: #414554;
+ border-color: #272a34; }
+ .screenshot-ui-type-button:active, .screenshot-ui-show-pointer-button:active {
+ border: 1px solid transparent;
+ color: white;
+ background-color: #464b59;
+ border-color: #181a20; }
+ .screenshot-ui-type-button:outlined, .screenshot-ui-show-pointer-button:outlined, .screenshot-ui-type-button:checked, .screenshot-ui-show-pointer-button:checked {
+ border: 1px solid transparent;
+ color: white;
+ background-color: #4c505e; }
+ .screenshot-ui-type-button:outlined:hover, .screenshot-ui-show-pointer-button:outlined:hover, .screenshot-ui-type-button:checked:hover, .screenshot-ui-show-pointer-button:checked:hover {
+ background-color: #555b71; }
+ .screenshot-ui-type-button:outlined:active, .screenshot-ui-show-pointer-button:outlined:active, .screenshot-ui-type-button:checked:active, .screenshot-ui-show-pointer-button:checked:active {
+ background-color: #5b627a; }
/* Switches */
.toggle-switch {
- background-image: url("assets/toggle-off-dark.svg"); }
- .toggle-switch:checked {
- background-image: url("assets/toggle-on-dark.svg"); }
+ height: 22px;
+ width: 44px; }
-.popup-menu-item.selected, .popup-menu-item:active {
- background-color: #3b3e46;
- color: #eeeeec; }
+/* Slider */
+.slider {
+ -barlevel-background-color: #0d0e11;
+ -barlevel-border-width: 0;
+ -slider-handle-radius: 0; }
-/* App Switcher */
-.switcher-list .item-box:outlined {
+/* Popovers/Menus */
+.popup-menu-boxpointer, .candidate-popup-boxpointer {
+ -arrow-rise: 6px; }
+
+.popup-menu-content, .candidate-popup-content {
+ padding: 4px;
+ box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.2);
+ background-color: #272a34; }
+
+.popup-menu-item {
+ border: 1px solid transparent;
+ border-bottom: 0;
+ margin-top: 0;
+ margin-bottom: 0;
+ padding-top: 8px;
+ padding-bottom: 8px; }
+ .popup-menu-item:checked {
+ border-color: #0d0e11;
+ background-color: #23252e !important; }
+
+.popup-sub-menu {
+ background-color: #23252e;
+ border: 1px solid #0d0e11;
+ border-top: 0; }
+ .popup-sub-menu .popup-menu-item {
+ padding-top: 7px;
+ padding-bottom: 7px; }
+ .popup-sub-menu .popup-menu-item:focus, .popup-sub-menu .popup-menu-item:hover {
+ background-color: #303340 !important; }
+ .popup-sub-menu .popup-menu-item:checked {
+ background-color: #3b3f4e !important; }
+ .popup-sub-menu .popup-menu-item:active {
+ background-color: #343845 !important; }
+
+.popup-separator-menu-item {
+ margin: 6px 0; }
+
+/* Message List */
+.message-list .message-list-placeholder,
+.message-list-controls {
+ font-weight: normal; }
+
+.message-list-controls {
+ spacing: 12px;
+ font-size: 10pt; }
+
+.message .message-content {
padding: 6px;
- border: 3px solid #2777ff; }
+ spacing: 0; }
-.switcher-list .item-box:selected {
- background-color: #2777ff;
- color: #ffffff;
- text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
+.message .message-title {
+ padding-top: .5em; }
-/* Workspace Switcher */
-.ws-switcher-box {
- border: none; }
+.message .message-secondary-bin > .event-time {
+ padding-bottom: .5em; }
-.workspace-switcher-container {
- padding: 7px; }
+/* Notifications & Message Tray */
+.notification-banner {
+ box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.2); }
/* Window Picker */
.window-caption {
color: black;
background-color: white;
- box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4); }
+ box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.2); }
-.window-close {
+.window-close, .screenshot-ui-close-button {
background-image: url("assets/close-window.svg");
background-size: 32px;
background-color: transparent;
@@ -2289,43 +2804,57 @@ StScrollBar {
height: 32px;
width: 32px;
transition-duration: .2s; }
- .window-close:hover {
+ .window-close:hover, .screenshot-ui-close-button:hover {
background-image: url("assets/close-window-hover.svg");
background-color: transparent; }
- .window-close:active {
+ .window-close:active, .screenshot-ui-close-button:active {
background-image: url("assets/close-window-active.svg");
background-color: transparent;
color: transparent;
transition-duration: 0s; }
-/* Tiled window previews */
-.tile-preview-left.on-primary,
-.tile-preview-right.on-primary,
-.tile-preview-left.tile-preview-right.on-primary {
- border-radius: 0; }
+/* Workspace Switcher */
+.ws-switcher-indicator {
+ padding: 2px;
+ margin: 10px; }
+ .ws-switcher-indicator:active {
+ padding: 4px;
+ margin: 8px; }
-/* TOP BAR */
+/* Screenshot UI */
+.screenshot-ui-shot-cast-container {
+ background-color: #383d4b; }
+
+.screenshot-ui-shot-cast-button {
+ background-color: transparent; }
+ .screenshot-ui-shot-cast-button:hover, .screenshot-ui-shot-cast-button:focus {
+ background-color: #464b5d; }
+ .screenshot-ui-shot-cast-button:active {
+ background-color: #51576b; }
+ .screenshot-ui-shot-cast-button:checked {
+ background-color: white;
+ color: black; }
+
+/* Top Bar */
#panel {
background: rgba(35, 37, 46, 0.8);
- text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
- #panel .popup-menu-arrow {
- width: 0; }
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
#panel StIcon {
- icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
+ icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
#panel.unlock-screen, #panel.login-screen, #panel.lock-screen, #panel:overview {
background-color: transparent; }
#panel.unlock-screen .panel-button, #panel.unlock-screen .panel-button:hover, #panel.unlock-screen .panel-button:active, #panel.unlock-screen .panel-button:focus, #panel.unlock-screen .panel-button:overview, #panel.unlock-screen .panel-button:checked, #panel.login-screen .panel-button, #panel.login-screen .panel-button:hover, #panel.login-screen .panel-button:active, #panel.login-screen .panel-button:focus, #panel.login-screen .panel-button:overview, #panel.login-screen .panel-button:checked, #panel.lock-screen .panel-button, #panel.lock-screen .panel-button:hover, #panel.lock-screen .panel-button:active, #panel.lock-screen .panel-button:focus, #panel.lock-screen .panel-button:overview, #panel.lock-screen .panel-button:checked, #panel:overview .panel-button, #panel:overview .panel-button:hover, #panel:overview .panel-button:active, #panel:overview .panel-button:focus, #panel:overview .panel-button:overview, #panel:overview .panel-button:checked {
color: white; }
- #panel .panel-corner {
- -panel-corner-radius: 0; }
#panel .panel-button {
color: white; }
- #panel .panel-button:active, #panel .panel-button:focus, #panel .panel-button:overview, #panel .panel-button:checked {
+ #panel .panel-button:hover, #panel .panel-button:active, #panel .panel-button:focus, #panel .panel-button:overview, #panel .panel-button:checked {
color: white;
box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.2); }
- #panel .panel-button.clock-display:active, #panel .panel-button.clock-display:overview, #panel .panel-button.clock-display:focus, #panel .panel-button.clock-display:checked {
+ #panel .panel-button.screen-recording-indicator {
+ color: white; }
+ #panel .panel-button.clock-display:hover, #panel .panel-button.clock-display:active, #panel .panel-button.clock-display:overview, #panel .panel-button.clock-display:focus, #panel .panel-button.clock-display:checked {
box-shadow: none; }
- #panel .panel-button.clock-display:active .clock, #panel .panel-button.clock-display:overview .clock, #panel .panel-button.clock-display:focus .clock, #panel .panel-button.clock-display:checked .clock {
+ #panel .panel-button.clock-display:hover .clock, #panel .panel-button.clock-display:active .clock, #panel .panel-button.clock-display:overview .clock, #panel .panel-button.clock-display:focus .clock, #panel .panel-button.clock-display:checked .clock {
box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.2); }
#panel #panelActivities.panel-button {
margin-left: .4em; }
@@ -2339,199 +2868,21 @@ StScrollBar {
background-image: url("assets/view-grid-symbolic-dark.svg"); }
/* Date/Time Menu */
-#calendarArea {
- background-image: url("assets/kali-dragon-dark.svg");
- background-size: contain; }
+.datemenu-today-button:insensitive {
+ color: inherit; }
-.events-section-title {
- padding: 1em; }
+.datemenu-today-button .day-label {
+ font-weight: normal; }
-.datemenu-today-button {
- border-width: 1px;
- border-style: solid;
- border-radius: 10px;
- margin: 4px;
- border-color: transparent;
- background-color: transparent;
- background-image: none;
- box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0);
- text-shadow: none;
- icon-shadow: none; }
- .datemenu-today-button:focus {
- color: #eeeeec;
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2);
- box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
- .datemenu-today-button:hover {
- color: #eeeeec;
- background-color: #2e313d;
- border-color: #1a1c23;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2);
- box-shadow: none; }
- .datemenu-today-button:active {
- color: #eeeeec;
- background-color: #1c1e25;
- border-color: #0b0b0e;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
- .datemenu-today-button .date-label {
- font-size: 1.5em;
- font-weight: 300; }
-
-.calendar {
- border-width: 1px;
- border-style: solid;
- border-radius: 10px;
- margin: 4px;
- border-color: transparent;
- background-color: transparent;
- background-image: none;
- box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0);
- text-shadow: none;
- icon-shadow: none; }
- .calendar:focus {
- color: #eeeeec;
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2);
- box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
- .calendar:hover {
- color: #eeeeec;
- background-color: #2e313d;
- border-color: #1a1c23;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2);
- box-shadow: none; }
- .calendar:active {
- color: #eeeeec;
- background-color: #1c1e25;
- border-color: #0b0b0e;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
- .calendar .pager-button:hover, .calendar .pager-button:focus {
- background-color: #3b3e46; }
- .calendar .calendar-day-base:hover, .calendar .calendar-day-base:focus, .calendar .calendar-day-base:active, .calendar .calendar-day-base:selected {
- color: #eeeeec;
- background-color: #3b3e46; }
- .calendar .calendar-today:hover, .calendar .calendar-today:focus {
- background-color: #3b3e46;
- color: #eeeeec; }
- .calendar .calendar-today:active, .calendar .calendar-today:selected {
- background: #2777ff;
- color: #ffffff; }
- .calendar .calendar-today:active:hover, .calendar .calendar-today:active:focus, .calendar .calendar-today:selected:hover, .calendar .calendar-today:selected:focus {
- background-color: #3b3e46;
- color: #eeeeec; }
-
-/* Events */
-.events-button {
- border-width: 1px;
- border-style: solid;
- border-radius: 10px;
- margin: 4px;
- border-color: transparent;
- background-color: transparent;
- background-image: none;
- box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0);
- text-shadow: none;
- icon-shadow: none; }
- .events-button:focus {
- color: #eeeeec;
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2);
- box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
- .events-button:hover {
- color: #eeeeec;
- background-color: #2e313d;
- border-color: #1a1c23;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2);
- box-shadow: none; }
- .events-button:active {
- color: #eeeeec;
- background-color: #1c1e25;
- border-color: #0b0b0e;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
-
-/* World clocks */
-.world-clocks-button {
- border-width: 1px;
- border-style: solid;
- border-radius: 10px;
- margin: 4px;
- border-color: transparent;
- background-color: transparent;
- background-image: none;
- box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0);
- text-shadow: none;
- icon-shadow: none; }
- .world-clocks-button:focus {
- color: #eeeeec;
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2);
- box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
- .world-clocks-button:hover {
- color: #eeeeec;
- background-color: #2e313d;
- border-color: #1a1c23;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2);
- box-shadow: none; }
- .world-clocks-button:active {
- color: #eeeeec;
- background-color: #1c1e25;
- border-color: #0b0b0e;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
-
-.weather-button {
- border-width: 1px;
- border-style: solid;
- border-radius: 10px;
- margin: 4px;
- border-color: transparent;
- background-color: transparent;
- background-image: none;
- box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0);
- text-shadow: none;
- icon-shadow: none; }
- .weather-button:focus {
- color: #eeeeec;
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2);
- box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
- .weather-button:hover {
- color: #eeeeec;
- background-color: #2e313d;
- border-color: #1a1c23;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
- text-shadow: 0 1px rgba(0, 0, 0, 0.2);
- icon-shadow: 0 1px rgba(0, 0, 0, 0.2);
- box-shadow: none; }
- .weather-button:active {
- color: #eeeeec;
- background-color: #1c1e25;
- border-color: #0b0b0e;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
+.datemenu-today-button .date-label {
+ font-weight: lighter; }
/* Search */
.search-entry {
color: black;
- text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9);
+ text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
font-weight: bold;
background-color: rgba(255, 255, 255, 0.1);
- border-radius: 999px;
font-size: 1.1em;
transition-duration: 200ms; }
.search-entry StLabel.hint-text {
@@ -2553,49 +2904,30 @@ StScrollBar {
icon-shadow: none; }
.search-entry .search-entry-icon {
color: white;
- icon-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9); }
+ icon-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); }
.search-section-content {
background-color: rgba(255, 255, 255, 0.1);
- box-shadow: none;
border: none; }
-.search-provider-icon .list-search-provider-content .list-search-provider-details {
+.search-provider-icon .list-search-provider-details {
font-weight: bold; }
-/* DASHBOARD */
+.list-search-result .list-search-result-description {
+ color: rgba(255, 255, 255, 0.8); }
+
+/* Dash */
#dash {
color: white;
- background-color: transparent;
- border: none;
- border-color: transparent; }
- #dash .overview-icon StIcon {
- color: white;
- icon-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
+ icon-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
-.dash-background {
+.dash-background, .dash-separator {
background: rgba(255, 255, 255, 0.1); }
-.dash-separator {
- background: rgba(255, 255, 255, 0.1); }
-
-.show-apps:focus .overview-icon, .show-apps:checked .overview-icon {
- background-color: rgba(255, 255, 255, 0.1);
- color: black; }
-
-/* App Folders */
-.app-well-app.app-folder, .app-well-app.app-folder .overview-icon.overview-icon-with-label {
- background-color: rgba(255, 255, 255, 0.1); }
-
-.app-well-app.app-folder:checked {
- background: black; }
+/* App Grid */
+.app-well-app, .grid-search-result {
+ color: white; }
.app-folder-dialog {
background: black;
box-shadow: 0 0 20px #030303; }
- .app-folder-dialog .folder-name-container .edit-folder-button, .app-folder-dialog .folder-name-container .edit-folder-button:hover, .app-folder-dialog .folder-name-container .edit-folder-button:active {
- background: white;
- color: black; }
-
-.app-folder-dialog-container {
- width: 720px; }
diff --git a/share/themes/Kali-Light/gnome-shell/gnome-shell.css b/share/themes/Kali-Light/gnome-shell/gnome-shell.css
index 7ef44986..0f55766d 100644
--- a/share/themes/Kali-Light/gnome-shell/gnome-shell.css
+++ b/share/themes/Kali-Light/gnome-shell/gnome-shell.css
@@ -23,25 +23,21 @@ stage {
color: #5c616c; }
/* Common Stylings */
-.search-statustext {
- font-size: 2em;
- font-weight: bold;
- color: white; }
-
-.workspace-switcher-container, .switcher-list, .resize-popup, .osd-window {
+.screenshot-ui-panel, .workspace-switcher, .switcher-list, .resize-popup, .osd-window {
color: white;
background-color: #303340;
- border-radius: 20px;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 999px;
padding: 12px; }
.workspace-thumbnails .workspace-thumbnail {
color: white;
background-color: rgba(255, 255, 255, 0.1); }
-.app-well-app .overview-icon,
-.grid-search-result .overview-icon, .show-apps .overview-icon, .list-search-result, .search-provider-icon {
- border-radius: 12px;
+.app-well-app.app-folder .overview-icon, .app-folder.grid-search-result .overview-icon, .app-well-app .overview-icon, .grid-search-result .overview-icon, .dash-item-container .show-apps .overview-icon, .list-search-result, .search-provider-icon, .switcher-list .item-box {
+ border-radius: 16px;
padding: 6px;
+ spacing: 6px;
border: 2px solid transparent;
transition-duration: 100ms;
text-align: center; }
@@ -49,92 +45,203 @@ stage {
.modal-dialog {
color: #5c616c;
background-color: #ffffff;
- border: 1px solid rgba(0, 0, 0, 0.6); }
+ border-radius: 11px;
+ border: 1px solid rgba(255, 255, 255, 0.8); }
-.app-folder-dialog .folder-name-container .edit-folder-button, .button {
- border-radius: 8px;
+#LookingGlassDialog > #Toolbar .lg-toolbar-button, .app-folder-dialog .folder-name-container .edit-folder-button, .button {
+ border-radius: 6px;
border-style: solid;
border-width: 1px;
- min-height: 22px;
+ font-weight: bold;
padding: 3px 24px;
+ border: 1px solid transparent;
color: #5c616c;
background-color: white;
- border-color: #d1d1d1;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3); }
- .app-folder-dialog .folder-name-container .edit-folder-button:focus, .button:focus {
+ border-color: #d1d1d1; }
+ #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus, .app-folder-dialog .folder-name-container .edit-folder-button:focus, .button:focus {
+ border: 1px solid transparent;
color: #5c616c;
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3);
+ background-color: #e9f1ff;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
- .app-folder-dialog .folder-name-container .edit-folder-button:hover, .button:hover {
+ #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:hover, .app-folder-dialog .folder-name-container .edit-folder-button:focus:hover, .button:focus:hover {
+ background-color: #e9f1ff;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ #LookingGlassDialog > #Toolbar .lg-toolbar-button:focus:active, .app-folder-dialog .folder-name-container .edit-folder-button:focus:active, .button:focus:active {
+ background-color: #e9f1ff;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ #LookingGlassDialog > #Toolbar .lg-toolbar-button:hover, .app-folder-dialog .folder-name-container .edit-folder-button:hover, .button:hover {
+ border: 1px solid transparent;
color: #5c616c;
- background-color: white;
- border-color: #d1d1d1;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3); }
- .app-folder-dialog .folder-name-container .edit-folder-button:insensitive, .button:insensitive {
- color: #aeb0b6;
- border-color: #d9d9d9;
- background-color: #fdfdfd;
- box-shadow: none;
- text-shadow: none;
- icon-shadow: none; }
- .app-folder-dialog .folder-name-container .edit-folder-button:active, .button:active {
+ background-color: #fafafb;
+ border-color: #d1d1d1; }
+ #LookingGlassDialog > #Toolbar .lg-toolbar-button:insensitive, .app-folder-dialog .folder-name-container .edit-folder-button:insensitive, .button:insensitive {
+ border: 1px solid transparent;
+ color: rgba(92, 97, 108, 0.5);
+ background-color: rgba(92, 97, 108, 0.05);
+ border-color: #d9d9d9; }
+ #LookingGlassDialog > #Toolbar .lg-toolbar-button:active, .app-folder-dialog .folder-name-container .edit-folder-button:active, .button:active {
+ border: 1px solid transparent;
color: #5c616c;
- background-color: #f7f7f7;
- border-color: #d1d1d1;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
+ background-color: #f5f6f6;
+ border-color: #d1d1d1; }
+ #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked, .app-folder-dialog .folder-name-container .edit-folder-button:checked, .button:checked {
+ border: 1px solid transparent;
+ color: #5c616c;
+ background-color: #f0f1f2; }
+ #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:hover, .app-folder-dialog .folder-name-container .edit-folder-button:checked:hover, .button:checked:hover {
+ background-color: white; }
+ #LookingGlassDialog > #Toolbar .lg-toolbar-button:checked:active, .app-folder-dialog .folder-name-container .edit-folder-button:checked:active, .button:checked:active {
+ background-color: white; }
.modal-dialog .modal-dialog-linked-button, .hotplug-notification-item, .notification-banner .notification-button {
- color: #5c616c;
- background-color: white;
- border-color: #d1d1d1;
- box-shadow: none;
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3);
padding: 12px;
- border-style: solid;
- border-width: 1px;
- border-left-width: 0;
- border-bottom-width: 0; }
+ font-weight: bold !important;
+ border: 1px solid transparent;
+ color: #5c616c;
+ background-color: #ededed;
+ border-color: #b3b3b3; }
+ .modal-dialog .modal-dialog-linked-button:ltr, .hotplug-notification-item:ltr, .notification-banner .notification-button:ltr {
+ margin-right: 1px; }
+ .modal-dialog .modal-dialog-linked-button:rtl, .hotplug-notification-item:rtl, .notification-banner .notification-button:rtl {
+ margin-left: 1px; }
.modal-dialog .modal-dialog-linked-button:insensitive, .hotplug-notification-item:insensitive, .notification-banner .notification-button:insensitive {
- color: #aeb0b6;
- border-color: #d9d9d9;
- background-color: #fdfdfd;
- box-shadow: none;
- text-shadow: none;
- icon-shadow: none; }
+ border: 1px solid transparent;
+ color: rgba(92, 97, 108, 0.5);
+ background-color: rgba(92, 97, 108, 0.05);
+ border-color: #d9d9d9; }
.modal-dialog .modal-dialog-linked-button:focus, .hotplug-notification-item:focus, .notification-banner .notification-button:focus {
+ border: 1px solid transparent;
color: #5c616c;
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3);
+ background-color: #d9e1ef;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
+ .modal-dialog .modal-dialog-linked-button:focus:hover, .hotplug-notification-item:focus:hover, .notification-banner .notification-button:focus:hover {
+ background-color: #e0e8f6;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .modal-dialog .modal-dialog-linked-button:focus:active, .hotplug-notification-item:focus:active, .notification-banner .notification-button:focus:active {
+ background-color: #e7effd;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.modal-dialog .modal-dialog-linked-button:hover, .hotplug-notification-item:hover, .notification-banner .notification-button:hover {
+ border: 1px solid transparent;
color: #5c616c;
- background-color: white;
- border-color: #d1d1d1;
- box-shadow: none;
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3); }
+ background-color: #e9e9e9;
+ border-color: #c4c4c4; }
.modal-dialog .modal-dialog-linked-button:active, .hotplug-notification-item:active, .notification-banner .notification-button:active {
+ border: 1px solid transparent;
color: #5c616c;
- background-color: #f7f7f7;
- border-color: #d1d1d1;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
- .modal-dialog .modal-dialog-linked-button:first-child, .hotplug-notification-item:first-child, .notification-banner .notification-button:first-child {
- border-radius: 0 0 0 14px; }
- .modal-dialog .modal-dialog-linked-button:last-child, .hotplug-notification-item:last-child, .notification-banner .notification-button:last-child {
- border-right-width: 0;
- border-radius: 0 0 14px 0; }
+ background-color: #e4e5e5;
+ border-color: #b3b3b3; }
+ .modal-dialog .modal-dialog-linked-button:checked, .hotplug-notification-item:checked, .notification-banner .notification-button:checked {
+ border: 1px solid transparent;
+ color: #5c616c;
+ background-color: #e0e1e2; }
+ .modal-dialog .modal-dialog-linked-button:checked:hover, .hotplug-notification-item:checked:hover, .notification-banner .notification-button:checked:hover {
+ background-color: white; }
+ .modal-dialog .modal-dialog-linked-button:checked:active, .hotplug-notification-item:checked:active, .notification-banner .notification-button:checked:active {
+ background-color: white; }
+ .modal-dialog .modal-dialog-linked-button:first-child:ltr, .hotplug-notification-item:first-child:ltr, .notification-banner .notification-button:first-child:ltr {
+ border-radius: 0 0 0 10px; }
+ .modal-dialog .modal-dialog-linked-button:last-child:ltr, .hotplug-notification-item:last-child:ltr, .notification-banner .notification-button:last-child:ltr {
+ border-radius: 0 0 10px 0;
+ margin-right: 0 !important; }
+ .modal-dialog .modal-dialog-linked-button:first-child:rtl, .hotplug-notification-item:first-child:rtl, .notification-banner .notification-button:first-child:rtl {
+ border-radius: 0 0 10px 0; }
+ .modal-dialog .modal-dialog-linked-button:last-child:rtl, .hotplug-notification-item:last-child:rtl, .notification-banner .notification-button:last-child:rtl {
+ border-radius: 0 0 0 10px;
+ margin-left: 0 !important; }
.modal-dialog .modal-dialog-linked-button:first-child:last-child, .hotplug-notification-item:first-child:last-child, .notification-banner .notification-button:first-child:last-child {
- border-radius: 0 0 14px 14px; }
+ border-radius: 0 0 10px 10px !important;
+ margin-left: 0 !important;
+ margin-right: 0 !important; }
+
+.screenshot-ui-show-pointer-button, .screenshot-ui-type-button {
+ border: 1px solid transparent;
+ background-color: transparent;
+ background-color: none;
+ border-color: transparent; }
+ .screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive {
+ border: 1px solid transparent;
+ color: rgba(92, 97, 108, 0.5);
+ background-color: rgba(92, 97, 108, 0.05);
+ border-color: #d9d9d9;
+ background-color: transparent; }
+ .screenshot-ui-show-pointer-button:insensitive, .screenshot-ui-type-button:insensitive {
+ border: 1px solid transparent;
+ background-color: transparent;
+ background-color: none;
+ border-color: transparent; }
+ .screenshot-ui-show-pointer-button:insensitive:insensitive, .screenshot-ui-type-button:insensitive:insensitive {
+ border: 1px solid transparent;
+ color: rgba(92, 97, 108, 0.5);
+ background-color: rgba(92, 97, 108, 0.05);
+ border-color: #d9d9d9;
+ background-color: transparent; }
+ .screenshot-ui-show-pointer-button:focus, .screenshot-ui-type-button:focus {
+ border: 1px solid transparent;
+ color: #5c616c;
+ background-color: #394560;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
+ .screenshot-ui-show-pointer-button:focus:hover, .screenshot-ui-type-button:focus:hover {
+ background-color: #3f4b68;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .screenshot-ui-show-pointer-button:focus:active, .screenshot-ui-type-button:focus:active {
+ background-color: #455170;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .screenshot-ui-show-pointer-button:hover, .screenshot-ui-type-button:hover {
+ border: 1px solid transparent;
+ color: #5c616c;
+ background-color: #3c404f;
+ border-color: #181a20; }
+ .screenshot-ui-show-pointer-button:active, .screenshot-ui-type-button:active {
+ border: 1px solid transparent;
+ color: #5c616c;
+ background-color: #3d4150;
+ border-color: #08090b; }
+ .screenshot-ui-show-pointer-button:outlined, .screenshot-ui-type-button:outlined, .screenshot-ui-show-pointer-button:checked, .screenshot-ui-type-button:checked {
+ border: 1px solid transparent;
+ color: #5c616c;
+ background-color: #3e4251; }
+ .screenshot-ui-show-pointer-button:outlined:hover, .screenshot-ui-type-button:outlined:hover, .screenshot-ui-show-pointer-button:checked:hover, .screenshot-ui-type-button:checked:hover {
+ background-color: #555b71; }
+ .screenshot-ui-show-pointer-button:outlined:active, .screenshot-ui-type-button:outlined:active, .screenshot-ui-show-pointer-button:checked:active, .screenshot-ui-type-button:checked:active {
+ background-color: #5b627a; }
+
+/* General Typography */
+.app-folder-dialog .folder-name-container .folder-name-label, .app-folder-dialog .folder-name-container .folder-name-entry, .search-statustext {
+ font-weight: 800;
+ font-size: 20pt; }
+
+.lg-debug-flags-header, .message-dialog-content .message-dialog-title, .message-list .message-list-placeholder, .datemenu-today-button .date-label {
+ font-weight: 800;
+ font-size: 15pt; }
+
+.nm-dialog-airplane-headline {
+ font-weight: 700;
+ font-size: 15pt; }
+
+.message-dialog-content .message-dialog-title.lightweight, .headline {
+ font-weight: 700;
+ font-size: 13pt; }
+
+.lg-extension-name, .osd-window, .nm-dialog-header, .dialog-list .dialog-list-title, .message-list-controls, .weather-button .weather-forecast-temp, .weather-button .weather-header, .world-clocks-button .world-clocks-time, .world-clocks-button .world-clocks-header, .events-button .events-title, .calendar .calendar-month-header .calendar-month-label, .datemenu-today-button .day-label, .popup-menu-ornament {
+ font-weight: 700;
+ font-size: 11pt; }
+
+.app-menu .popup-inactive-menu-item:first-child > StLabel {
+ font-weight: 700;
+ font-size: 9pt; }
+
+.login-dialog-not-listed-label, .lg-completions-text, .caps-lock-warning-label, #dash, .icon-label-button-container, .prompt-dialog-error-label,
+.prompt-dialog-info-label,
+.prompt-dialog-null-label, .run-dialog .run-dialog-description, .dialog-list .dialog-list-box .dialog-list-item .dialog-list-item-description, .weather-button .weather-forecast-time, .world-clocks-button .world-clocks-timezone, .events-button .event-time {
+ font-weight: 400;
+ font-size: 9pt; }
+
+.calendar .calendar-day-base.calendar-day-heading, .calendar .calendar-day-base {
+ font-weight: 400;
+ font-size: 8pt; }
+
+.unlock-dialog-clock-time, #panel, .weather-button .weather-forecast-time, .world-clocks-button .world-clocks-timezone, .world-clocks-button .world-clocks-time, .events-button .event-time, .calendar .calendar-day-base {
+ font-feature-settings: "tnum"; }
/* WIDGETS */
.shell-link {
@@ -152,19 +259,24 @@ stage {
StEntry {
border-radius: 8px;
padding: 8px;
- border-width: 0;
color: #5c616c;
- background-color: #fafafa;
- border-color: #d9d9d9;
+ background-color: white;
+ color: rgba(92, 97, 108, 0.7);
+ border: 2px solid white;
selection-background-color: #2777ff;
selected-color: #ffffff; }
+ StEntry:hover {
+ background-color: white;
+ border-color: white;
+ color: rgba(92, 97, 108, 0.7); }
StEntry:focus {
- border-color: #0051da;
- box-shadow: inset 0 0 0 2px #2777ff; }
+ background-color: #f4f8ff;
+ border-color: #2777ff;
+ color: #5c616c; }
StEntry:insensitive {
- color: #aeb0b6;
- border-color: #fdfdfd;
- box-shadow: none; }
+ background-color: white;
+ border-color: white;
+ color: #aeb0b6; }
StEntry StIcon.capslock-warning {
icon-size: 16px;
warning-color: #fd7d00;
@@ -177,17 +289,20 @@ StEntry {
color: rgba(92, 97, 108, 0.7); }
/* Buttons */
+.button {
+ min-height: 22px; }
+
/* Check Boxes */
.check-box StBoxLayout {
spacing: .8em; }
.check-box StBin {
width: 24px;
- height: 22px;
- background-image: url("assets/checkbox-off.svg"); }
+ height: 24px;
+ background-image: url("assets/checkbox-off-light.svg"); }
.check-box:focus StBin {
- background-image: url("assets/checkbox-off-focused.svg"); }
+ background-image: url("assets/checkbox-off-focused-light.svg"); }
.check-box:checked StBin {
background-image: url("assets/checkbox.svg"); }
@@ -198,33 +313,27 @@ StEntry {
/* Switches */
.toggle-switch {
color: #5c616c;
- height: 22px;
- width: 46px;
+ height: 26px;
+ width: 48px;
background-size: contain;
- background-image: url("assets/toggle-off.svg"); }
+ background-image: url("assets/toggle-off-light.svg"); }
.toggle-switch:checked {
- background-image: url("assets/toggle-on.svg"); }
+ background-image: url("assets/toggle-on-light.svg"); }
/* Slider */
.slider {
- height: 15px;
- -barlevel-height: 3px;
- -barlevel-background-color: #d9d9d9;
- -barlevel-border-width: 1px;
- -barlevel-border-color: #d9d9d9;
+ -barlevel-height: 4px;
+ -barlevel-background-color: rgba(92, 97, 108, 0.4);
+ -barlevel-border-width: 2px;
+ -barlevel-border-color: transparent;
-barlevel-active-background-color: #2777ff;
- -barlevel-active-border-color: #136aff;
+ -barlevel-active-border-color: transparent;
-barlevel-overdrive-color: #d41919;
- -barlevel-overdrive-border-color: #c21717;
+ -barlevel-overdrive-border-color: transparent;
-barlevel-overdrive-separator-width: 1px;
- -slider-handle-radius: 7.5px;
- -slider-handle-border-width: 1px;
- -slider-handle-border-color: #d9d9d9;
- color: white; }
- .slider:hover {
- color: #f7f7f7; }
- .slider:active {
- color: #ededed; }
+ -slider-handle-radius: 8px;
+ -slider-handle-border-width: 0;
+ -slider-handle-border-color: transparent; }
/* Scrollbars */
StScrollView.vfade {
@@ -236,530 +345,543 @@ StScrollView.hfade {
StScrollBar {
padding: 0; }
StScrollView StScrollBar {
- min-width: 14px;
- min-height: 14px; }
+ min-width: 8px;
+ min-height: 8px; }
StScrollBar StBin#trough {
border-radius: 0;
background-color: transparent; }
StScrollBar StButton#vhandle, StScrollBar StButton#hhandle {
border-radius: 8px;
- background-color: #9da0a7;
- margin: 3px; }
+ background-color: #ced0d3;
+ border: 3px solid transparent;
+ transition: 500ms all ease; }
StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover {
- background-color: #7d8189; }
+ background-color: #aeb0b6; }
StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
- background-color: #2777ff; }
+ background-color: #bec0c4; }
/* Popovers/Menus */
.popup-menu-boxpointer, .candidate-popup-boxpointer {
- -arrow-border-radius: 12px;
- -arrow-background-color: #ffffff;
- -arrow-border-width: 1px;
- -arrow-border-color: #d9d9d9;
- -arrow-base: 24px;
- -arrow-rise: 12px;
- -arrow-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
+ -arrow-rise: 6px; }
.popup-menu {
min-width: 15em;
color: #5c616c; }
.popup-menu.panel-menu {
- -boxpointer-gap: 4px;
margin-bottom: 1.75em; }
-.popup-menu-content {
- padding: 16px 0; }
+.popup-menu-content, .candidate-popup-content {
+ padding: 6px;
+ border-radius: 14px;
+ border: 1px solid rgba(255, 255, 255, 0.8);
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+ background-color: #ffffff; }
.popup-menu-item {
+ padding: 9px 12px;
+ border-radius: 8px;
spacing: 6px;
- padding: 6px; }
+ transition: 0.2s all ease;
+ background-color: transparent; }
.popup-menu-item:ltr {
- padding-right: 1.75em;
- padding-left: 0; }
+ padding-left: 6px; }
.popup-menu-item:rtl {
- padding-right: 0;
- padding-left: 1.75em; }
+ padding-right: 6px; }
+ .popup-menu-item:focus, .popup-menu-item:hover {
+ background-color: #f2f2f2 !important; }
+ .popup-menu-item:focus:active, .popup-menu-item:hover:active {
+ background-color: #ededed !important; }
.popup-menu-item:checked {
- background-color: white;
- box-shadow: none; }
- .popup-menu-item.selected {
- background-color: rgba(255, 255, 255, 0.8);
- color: #5c616c; }
+ background-color: #e8e8e8 !important; }
+ .popup-menu-item:checked {
+ margin-bottom: 0;
+ box-shadow: inset 0 -1px 0 0 #dbdbdb;
+ border-radius: 8px 8px 0 0; }
+ .popup-menu-item:checked:focus, .popup-menu-item:checked:hover {
+ background-color: #f0f0f0 !important; }
+ .popup-menu-item:checked:active {
+ background-color: whitesmoke !important; }
.popup-menu-item:active {
- background-color: #2777ff;
- color: #ffffff; }
+ background-color: #fafafa;
+ color: #50555e; }
.popup-menu-item:insensitive {
color: rgba(92, 97, 108, 0.5); }
+ .popup-menu-item .toggle-switch:ltr {
+ margin-left: 4px; }
+ .popup-menu-item .toggle-switch:rtl {
+ margin-right: 4px; }
.popup-inactive-menu-item {
color: #5c616c; }
.popup-inactive-menu-item:insensitive {
- color: rgba(92, 97, 108, 0.5); }
+ color: #aeb0b6; }
.popup-menu-arrow,
.popup-menu-icon {
- icon-size: 1.09em; }
+ icon-size: 16px !important; }
.popup-sub-menu {
- background-color: #f7f7f7;
- box-shadow: none;
- border-top: 1px solid rgba(217, 217, 217, 0.8);
- border-bottom: 1px solid rgba(217, 217, 217, 0.8); }
+ background-color: #e8e8e8;
+ border-radius: 0 0 8px 8px; }
+ .popup-sub-menu .popup-menu-ornament {
+ min-width: 1.09em !important; }
+ .popup-sub-menu .popup-menu-item {
+ border-radius: 0;
+ margin: 0; }
+ .popup-sub-menu .popup-menu-item:last-child {
+ border-radius: 0 0 8px 8px; }
+ .popup-sub-menu .popup-menu-item:focus, .popup-sub-menu .popup-menu-item:hover {
+ background-color: white !important; }
+ .popup-sub-menu .popup-menu-item:checked {
+ background-color: white !important; }
+ .popup-sub-menu .popup-menu-item:checked:focus, .popup-sub-menu .popup-menu-item:checked:hover {
+ background-color: #fcfcfc !important; }
+ .popup-sub-menu .popup-menu-item:active {
+ background-color: white !important; }
+ .popup-sub-menu .popup-menu-section .popup-menu-item:last-child:hover, .popup-sub-menu .popup-menu-section .popup-menu-item:last-child:focus {
+ border-radius: 0; }
+ .popup-sub-menu .popup-menu-section:last-child .popup-menu-item:last-child {
+ border-radius: 0 0 8px 8px; }
.popup-menu-ornament {
- width: 1.2em; }
+ width: 1.2em;
+ text-align: center !important; }
.popup-menu-ornament:ltr {
text-align: right; }
.popup-menu-ornament:rtl {
text-align: left; }
.popup-separator-menu-item {
- padding: 0; }
+ margin: 6px 0;
+ padding: 0 !important; }
+ .popup-separator-menu-item:ltr {
+ margin-right: 4px; }
+ .popup-separator-menu-item:rtl {
+ margin-left: 4px; }
.popup-separator-menu-item .popup-separator-menu-item-separator {
height: 1px;
- margin: 6px 64px;
- background-color: #dedede; }
+ background-color: #d9d9d9; }
+ .popup-separator-menu-item .popup-menu-ornament {
+ width: 0 !important; }
+ .popup-sub-menu .popup-separator-menu-item {
+ background-color: transparent; }
+ .popup-sub-menu .popup-separator-menu-item:ltr {
+ margin-right: 2.5em; }
+ .popup-sub-menu .popup-separator-menu-item:rtl {
+ margin-left: 2.5em; }
.popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator {
- margin: 0 64px 0 32px; }
+ background-color: #ebebeb; }
.background-menu {
- -boxpointer-gap: 4px;
+ -boxpointer-gap: 0px;
-arrow-rise: 0px; }
.aggregate-menu {
- min-width: 21em; }
+ min-width: 22em; }
+ .aggregate-menu .popup-menu-ornament {
+ width: 0 !important; }
.aggregate-menu .popup-menu-icon {
- padding: 0;
- margin: 0 4px;
-st-icon-style: symbolic; }
+ .aggregate-menu .popup-menu-icon:ltr {
+ margin-right: 8px; }
+ .aggregate-menu .popup-menu-icon:rtl {
+ margin-left: 8px; }
.aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:ltr {
- padding-left: 14px;
- margin-left: 1.09em; }
+ margin-left: 1em; }
.aggregate-menu .popup-sub-menu .popup-menu-item > :first-child:rtl {
- padding-right: 14px;
- margin-right: 1.09em; }
+ margin-right: 1em; }
+
+.app-menu {
+ max-width: 27.25em; }
+ .app-menu .popup-menu-ornament {
+ width: 0 !important; }
+ .app-menu .popup-inactive-menu-item:first-child > StLabel:ltr {
+ margin-right: 8px; }
+ .app-menu .popup-inactive-menu-item:first-child > StLabel:rtl {
+ margin-left: 8px; }
/* Date/Time Menu */
-.clock-display-box {
- spacing: 2px; }
- .clock-display-box .clock {
- padding-left: 12px;
- padding-right: 12px; }
-
#calendarArea {
- padding: 0; }
+ padding: 4px; }
.datemenu-calendar-column {
- spacing: 6px;
- border: 0 solid #d9d9d9;
- padding: 0 12px; }
+ spacing: 6px; }
.datemenu-calendar-column:ltr {
- margin-right: 8px;
- border-left-width: 1px; }
+ padding-left: 6px; }
.datemenu-calendar-column:rtl {
- margin-left: 8px;
- border-right-width: 1px; }
+ padding-right: 6px; }
.datemenu-calendar-column .datemenu-displays-box {
spacing: 6px; }
-.events-section-title {
- border-width: 1px;
- border-style: solid;
- border-radius: 10px;
- margin: 4px;
- border-color: transparent;
- background-color: transparent;
- background-image: none;
- box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
- text-shadow: none;
- icon-shadow: none;
- color: black;
- font-weight: bold;
- padding: .4em; }
- .events-section-title:focus {
- color: #5c616c;
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3);
- box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
- .events-section-title:hover {
- color: #5c616c;
- background-color: white;
- border-color: #d1d1d1;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3); }
- .events-section-title:active {
- color: #5c616c;
- background-color: #f7f7f7;
- border-color: #d1d1d1;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
-
/* today button (the date) */
.datemenu-today-button {
- border-width: 1px;
- border-style: solid;
- border-radius: 10px;
+ border-radius: 8px;
margin: 4px;
- border-color: transparent;
+ box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+ border: 1px solid transparent;
background-color: transparent;
- background-image: none;
- box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
- text-shadow: none;
- icon-shadow: none;
+ background-color: none;
+ border-color: transparent;
+ box-shadow: none !important;
padding: 9px; }
+ .datemenu-today-button:insensitive {
+ border: 1px solid transparent;
+ color: rgba(92, 97, 108, 0.5);
+ background-color: rgba(92, 97, 108, 0.05);
+ border-color: #d9d9d9;
+ background-color: transparent; }
+ .datemenu-today-button:insensitive {
+ border-color: transparent; }
.datemenu-today-button:focus {
+ border: 1px solid transparent;
color: #5c616c;
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3);
+ background-color: #e9f1ff;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
+ .datemenu-today-button:focus:hover {
+ background-color: #e9f1ff;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .datemenu-today-button:focus:active {
+ background-color: #e9f1ff;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.datemenu-today-button:hover {
+ border: 1px solid transparent;
color: #5c616c;
- background-color: white;
- border-color: #d1d1d1;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3); }
+ background-color: #fafafb;
+ border-color: #d1d1d1; }
.datemenu-today-button:active {
+ border: 1px solid transparent;
color: #5c616c;
- background-color: #f7f7f7;
- border-color: #d1d1d1;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
- .datemenu-today-button .day-label {
- font-size: 11pt;
- font-weight: bold; }
- .datemenu-today-button .date-label {
- font-size: 17pt;
- font-weight: 1000; }
+ background-color: #f5f6f6;
+ border-color: #d1d1d1; }
/* Calendar */
.calendar {
- border-width: 1px;
- border-style: solid;
- border-radius: 10px;
+ border-radius: 8px;
margin: 4px;
- color: #5c616c;
- background-color: white;
- border-color: #d1d1d1;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3);
- padding: 6px; }
+ border: 1px solid transparent;
+ background-color: transparent;
+ background-color: none;
+ border-color: transparent;
+ box-shadow: none !important;
+ margin-top: 0; }
+ .calendar:insensitive {
+ border: 1px solid transparent;
+ color: rgba(92, 97, 108, 0.5);
+ background-color: rgba(92, 97, 108, 0.05);
+ border-color: #d9d9d9;
+ background-color: transparent; }
+ .calendar:insensitive {
+ border-color: transparent; }
.calendar:focus {
+ border: 1px solid transparent;
color: #5c616c;
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3);
+ background-color: #e9f1ff;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
+ .calendar:focus:hover {
+ background-color: #e9f1ff;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .calendar:focus:active {
+ background-color: #e9f1ff;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.calendar:hover {
+ border: 1px solid transparent;
color: #5c616c;
- background-color: white;
- border-color: #d1d1d1;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3); }
+ background-color: #fafafb;
+ border-color: #d1d1d1; }
.calendar:active {
+ border: 1px solid transparent;
color: #5c616c;
- background-color: #f7f7f7;
- border-color: #d1d1d1;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
- .calendar .calendar-month-label {
- color: #686d7a;
- font-weight: bold;
- padding: 8px 0; }
- .calendar .calendar-change-month-back StIcon,
- .calendar .calendar-change-month-forward StIcon {
+ background-color: #f5f6f6;
+ border-color: #d1d1d1; }
+ .calendar .calendar-month-header .calendar-change-month-back StIcon,
+ .calendar .calendar-month-header .calendar-change-month-forward StIcon {
icon-size: 1.09em; }
- .calendar .pager-button {
+ .calendar .calendar-month-header .calendar-month-label {
+ color: #686d7a;
+ padding: 8px 0; }
+ .calendar .calendar-month-header .pager-button {
background-color: transparent;
height: 32px;
width: 32px;
- border-radius: 8px; }
- .calendar .pager-button:hover, .calendar .pager-button:focus {
- background-color: white; }
- .calendar .pager-button:active {
+ margin: 2px;
+ border-radius: 6px; }
+ .calendar .calendar-month-header .pager-button:hover, .calendar .calendar-month-header .pager-button:focus {
+ background-color: #f2f2f2; }
+ .calendar .calendar-month-header .pager-button:active {
background-color: #ededed; }
.calendar .calendar-day-base {
- font-size: 7pt;
text-align: center;
- width: 32px;
- height: 32px;
- padding: 0;
margin: 2px;
- border-radius: 18px;
- border: 1px solid transparent;
- font-feature-settings: "tnum"; }
- .calendar .calendar-day-base:hover, .calendar .calendar-day-base:focus {
- background-color: #f7f7f7; }
- .calendar .calendar-day-base:active, .calendar .calendar-day-base:selected {
- color: #737a88;
+ padding: 0 !important;
+ height: 32px !important;
+ width: 32px !important;
+ border-radius: 99px; }
+ .calendar .calendar-day-base:hover {
background-color: #f2f2f2; }
+ .calendar .calendar-day-base:focus {
+ background-color: #d4e4ff;
+ color: #ffffff;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
+ .calendar .calendar-day-base:active, .calendar .calendar-day-base:selected {
+ color: #50555e;
+ background-color: #ededed; }
+ .calendar .calendar-day-base:active:focus, .calendar .calendar-day-base:selected:focus {
+ background-color: #c6d6f1; }
.calendar .calendar-day-base.calendar-day-heading {
- color: #737a88;
- margin-top: 1em;
- font-size: 6pt; }
- .calendar .calendar-day {
- border-width: 0; }
- .calendar .calendar-day-top {
- border-top-width: 1px; }
- .calendar .calendar-day-left {
- border-left-width: 1px; }
+ color: #aeb0b6;
+ padding-top: 6px;
+ height: 16px !important;
+ font-weight: bold; }
.calendar .calendar-nonwork-day {
color: #aeb0b6; }
- .calendar .calendar-today {
- font-weight: bold;
- border: 1px solid transparent;
- background-color: #2777ff;
- color: #ffffff; }
- .calendar .calendar-today:hover, .calendar .calendar-today:focus {
- background-color: #3681ff;
- color: #ffffff; }
- .calendar .calendar-today:active, .calendar .calendar-today:selected {
- background-color: #2777ff;
- color: #ffffff; }
- .calendar .calendar-today:active:hover, .calendar .calendar-today:active:focus, .calendar .calendar-today:selected:hover, .calendar .calendar-today:selected:focus {
- background-color: #3681ff;
- color: #ffffff; }
- .calendar .calendar-day-with-events {
- background-image: url("assets/calendar-today.svg"); }
- .calendar .calendar-day-with-events.calendar-work-day {
- color: #737a88;
- font-weight: bold; }
.calendar .calendar-other-month-day {
color: rgba(92, 97, 108, 0.5); }
+ .calendar .calendar-other-month-day.calendar-nonwork-day {
+ color: rgba(174, 176, 182, 0.5); }
+ .calendar .calendar-today {
+ background-color: #2777ff;
+ font-weight: 800;
+ color: #ffffff !important; }
+ .calendar .calendar-today:hover, .calendar .calendar-today:focus {
+ background-color: #3681ff;
+ color: inherit; }
+ .calendar .calendar-today:active, .calendar .calendar-today:selected {
+ background-color: #2777ff;
+ color: inherit; }
+ .calendar .calendar-today:active:hover, .calendar .calendar-today:active:focus, .calendar .calendar-today:selected:hover, .calendar .calendar-today:selected:focus {
+ background-color: #3681ff;
+ color: inherit; }
+ .calendar .calendar-day-with-events {
+ background-image: url("assets/calendar-today-light.svg");
+ background-size: contain; }
.calendar .calendar-week-number {
font-size: 6pt;
font-weight: bold;
- height: 1.8em;
- width: 2.3em;
- border-radius: 2px;
+ font-feature-settings: "tnum";
margin: 6px;
+ padding: 0 6px;
+ border-radius: 3px;
background-color: #fafafa;
- color: #686d7a; }
+ color: #aeb0b6; }
/* Events */
.events-button {
- border-width: 1px;
- border-style: solid;
- border-radius: 10px;
+ border-radius: 8px;
margin: 4px;
+ box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+ border: 1px solid transparent;
color: #5c616c;
background-color: white;
border-color: #d1d1d1;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3);
padding: 12px; }
.events-button:focus {
+ border: 1px solid transparent;
color: #5c616c;
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3);
+ background-color: #e9f1ff;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
+ .events-button:focus:hover {
+ background-color: #e9f1ff;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .events-button:focus:active {
+ background-color: #e9f1ff;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.events-button:hover {
+ border: 1px solid transparent;
color: #5c616c;
- background-color: white;
- border-color: #d1d1d1;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3); }
+ background-color: #fafafb;
+ border-color: #d1d1d1; }
.events-button:active {
+ border: 1px solid transparent;
color: #5c616c;
- background-color: #f7f7f7;
- border-color: #d1d1d1;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
+ background-color: #f5f6f6;
+ border-color: #d1d1d1; }
.events-button .events-box {
spacing: 6px; }
.events-button .events-list {
spacing: 12px; }
.events-button .events-title {
- color: black;
- font-weight: bold;
+ color: #aeb0b6;
margin-bottom: 4px; }
.events-button .event-time {
- color: #2d3035;
- font-feature-settings: "tnum";
- font-size: 9pt; }
+ color: #aeb0b6; }
/* World clocks */
.world-clocks-button {
- border-width: 1px;
- border-style: solid;
- border-radius: 10px;
+ border-radius: 8px;
margin: 4px;
+ box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+ border: 1px solid transparent;
color: #5c616c;
background-color: white;
border-color: #d1d1d1;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3);
padding: 12px; }
.world-clocks-button:focus {
+ border: 1px solid transparent;
color: #5c616c;
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3);
+ background-color: #e9f1ff;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
+ .world-clocks-button:focus:hover {
+ background-color: #e9f1ff;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .world-clocks-button:focus:active {
+ background-color: #e9f1ff;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.world-clocks-button:hover {
+ border: 1px solid transparent;
color: #5c616c;
- background-color: white;
- border-color: #d1d1d1;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3); }
+ background-color: #fafafb;
+ border-color: #d1d1d1; }
.world-clocks-button:active {
+ border: 1px solid transparent;
color: #5c616c;
- background-color: #f7f7f7;
- border-color: #d1d1d1;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
+ background-color: #f5f6f6;
+ border-color: #d1d1d1; }
.world-clocks-button .world-clocks-grid {
spacing-rows: 6px;
spacing-columns: 12px; }
.world-clocks-button .world-clocks-header {
- color: black;
- font-weight: bold; }
+ color: #aeb0b6; }
.world-clocks-button .world-clocks-city {
- color: #5c616c;
- font-size: 10pt;
- font-weight: normal; }
+ color: #5c616c; }
.world-clocks-button .world-clocks-time {
- font-weight: bold;
- color: #5c616c;
- font-feature-settings: "tnum";
- font-size: 10pt; }
+ color: #5c616c; }
.world-clocks-button .world-clocks-time:ltr {
text-align: right; }
.world-clocks-button .world-clocks-time:rtl {
text-align: left; }
.world-clocks-button .world-clocks-timezone {
- color: #2d3035;
- font-feature-settings: "tnum";
- font-size: 9pt; }
+ color: #aeb0b6; }
/* Weather */
.weather-button {
- border-width: 1px;
- border-style: solid;
- border-radius: 10px;
+ border-radius: 8px;
margin: 4px;
+ box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+ border: 1px solid transparent;
color: #5c616c;
background-color: white;
border-color: #d1d1d1;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3);
padding: 12px; }
.weather-button:focus {
+ border: 1px solid transparent;
color: #5c616c;
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3);
+ background-color: #e9f1ff;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
+ .weather-button:focus:hover {
+ background-color: #e9f1ff;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .weather-button:focus:active {
+ background-color: #e9f1ff;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.weather-button:hover {
+ border: 1px solid transparent;
color: #5c616c;
- background-color: white;
- border-color: #d1d1d1;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3); }
+ background-color: #fafafb;
+ border-color: #d1d1d1; }
.weather-button:active {
+ border: 1px solid transparent;
color: #5c616c;
- background-color: #f7f7f7;
- border-color: #d1d1d1;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
+ background-color: #f5f6f6;
+ border-color: #d1d1d1; }
.weather-button .weather-box {
spacing: 10px; }
.weather-button .weather-header-box {
spacing: 6px; }
.weather-button .weather-header {
- color: black;
- font-weight: bold; }
+ color: #aeb0b6; }
.weather-button .weather-header.location {
- font-weight: normal;
- font-size: 9pt; }
+ font-weight: normal; }
.weather-button .weather-grid {
spacing-rows: 6px;
spacing-columns: 12px; }
.weather-button .weather-forecast-time {
color: #161719;
- font-feature-settings: "tnum";
- font-size: 8pt;
- font-weight: normal;
padding-top: 0.2em;
padding-bottom: 0.4em; }
.weather-button .weather-forecast-icon {
icon-size: 2.18em; }
- .weather-button .weather-forecast-temp {
- font-weight: bold; }
/* Message List */
.message-list {
- width: 31.5em;
- padding: 0 12px; }
+ width: 29em;
+ border: solid #d9d9d9; }
+ .message-list:ltr {
+ margin-left: 0;
+ margin-right: 4px;
+ padding-right: 6px;
+ border-right-width: 1px; }
+ .message-list:rtl {
+ margin-right: 0;
+ margin-left: 4px;
+ padding-left: 6px;
+ border-left-width: 1px; }
.message-list .message-list-placeholder {
- spacing: 12px; }
+ color: rgba(174, 176, 182, 0.5); }
+ .message-list .message-list-placeholder > StIcon {
+ icon-size: 3.27em;
+ margin-bottom: 12px;
+ -st-icon-style: symbolic; }
.message-list-sections {
spacing: 6px;
- margin: 0 16px; }
+ margin: 0;
+ padding-bottom: 6px; }
+ .message-list-sections:ltr {
+ margin-right: 12px; }
+ .message-list-sections:rtl {
+ margin-left: 12px; }
.message-list-section,
.message-list-section-list {
spacing: 6px; }
.message-list-controls {
- margin: 8px 16px 0;
- padding: 4px;
- spacing: 12px; }
+ padding: 6px;
+ spacing: 6px; }
.message-list-controls .dnd-button {
border-width: 2px;
border-color: transparent;
- border-radius: 99px;
+ border-radius: 32px;
border-style: solid; }
.message-list-controls .dnd-button:focus {
border-color: rgba(39, 119, 255, 0.6); }
.message {
- border-width: 1px;
- border-style: solid;
- border-radius: 10px;
+ border-radius: 8px;
margin: 4px;
+ box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+ border: 1px solid transparent;
color: #5c616c;
background-color: white;
- border-color: #d1d1d1;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3); }
+ border-color: #d1d1d1; }
.message:focus {
+ border: 1px solid transparent;
color: #5c616c;
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3);
+ background-color: #e9f1ff;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
+ .message:focus:hover {
+ background-color: #e9f1ff;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .message:focus:active {
+ background-color: #e9f1ff;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
.message:hover {
+ border: 1px solid transparent;
color: #5c616c;
- background-color: white;
- border-color: #d1d1d1;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3); }
+ background-color: #fafafb;
+ border-color: #d1d1d1; }
.message:active {
+ border: 1px solid transparent;
color: #5c616c;
- background-color: #f7f7f7;
- border-color: #d1d1d1;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
+ background-color: #f5f6f6;
+ border-color: #d1d1d1; }
.message .message-icon-bin {
- padding: 18px 0 18px 12px; }
+ padding: 18px; }
+ .message .message-icon-bin:ltr {
+ padding-right: 6px; }
.message .message-icon-bin:rtl {
- padding: 18px 12px 18px 0; }
+ padding-left: 6px; }
.message .message-icon-bin > StIcon {
icon-size: 2.18em;
-st-icon-style: symbolic; }
@@ -767,10 +889,13 @@ StScrollBar {
width: 1.09em;
height: 1.09em; }
.message .message-content {
- padding: 14px;
- spacing: 4px; }
+ spacing: 4px;
+ padding: 9px;
+ margin-bottom: 8px; }
.message .message-title {
- font-weight: bold; }
+ font-weight: bold;
+ /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
+ padding-top: 0.57em; }
.message .message-secondary-bin {
padding: 0 8px; }
.message .message-secondary-bin > .event-time {
@@ -783,11 +908,15 @@ StScrollBar {
.message .message-secondary-bin > .event-time:rtl {
text-align: left; }
.message .message-close-button {
- color: #818794; }
+ color: #5c616c;
+ background-color: rgba(92, 97, 108, 0.1);
+ border-radius: 99px;
+ padding: 5px;
+ margin: 1px; }
.message .message-close-button:hover {
- color: #aaaeb7; }
+ background-color: rgba(92, 97, 108, 0.2); }
.message .message-close-button:active {
- color: #c6c8ce; }
+ background-color: rgba(92, 97, 108, 0.1); }
.message .message-body {
color: #454850; }
@@ -796,70 +925,82 @@ StScrollBar {
/* Media Controls */
.message-media-control {
- padding: 12px 1.64em;
- color: #393c43; }
+ padding: 0 18px;
+ margin: 12px 0;
+ border-radius: 8px;
+ color: #5c616c; }
.message-media-control:hover {
background-color: white;
color: #5c616c; }
.message-media-control:active {
- background-color: #f2f2f2;
+ background-color: #fafafa;
color: #5c616c; }
.message-media-control:insensitive {
- color: black; }
+ color: #bbbdc2; }
.message-media-control:last-child:ltr {
- border-radius: 0 10px 10px 0; }
+ margin-right: 12px; }
.message-media-control:last-child:rtl {
- border-radius: 10px 0 0 10px; }
+ margin-left: 12px; }
.media-message-cover-icon {
- icon-size: 2.18em !important;
+ icon-size: 3.27em !important;
border-radius: 8px; }
.media-message-cover-icon.fallback {
color: #34373d;
background-color: #ffffff;
border: 1px solid transparent;
border-radius: 8px;
- icon-size: 2.18em !important; }
+ icon-size: 2.18em !important;
+ padding: 14px; }
.candidate-popup-content {
- padding: 0.5em;
- spacing: 0.3em; }
+ padding: 6px;
+ spacing: 6px; }
.candidate-index {
- padding: 0 0.5em 0 0;
- color: #454850; }
+ padding: 0;
+ padding-right: 6px;
+ color: #aeb0b6; }
.candidate-box {
- padding: 0.3em 0.5em 0.3em 0.5em;
+ padding: 6px 12px 6px 12px;
border-radius: 8px; }
- .candidate-box:selected, .candidate-box:hover {
+ .candidate-box:selected {
background-color: #2777ff;
color: #ffffff; }
+ .candidate-box:hover {
+ background-color: #f2f2f2;
+ color: #50555e; }
.candidate-page-button-box {
height: 2em; }
.vertical .candidate-page-button-box {
- padding-top: 0.5em; }
+ padding-top: 12px; }
.horizontal .candidate-page-button-box {
- padding-left: 0.5em; }
+ padding-left: 12px; }
.candidate-page-button {
- padding: 4px; }
+ padding: 6px; }
.candidate-page-button-previous {
border-radius: 8px 0px 0px 8px;
- border-right-width: 0; }
+ border-right-width: 0;
+ box-shadow: none; }
.candidate-page-button-next {
- border-radius: 0px 8px 8px 0px; }
+ border-radius: 0px 8px 8px 0px;
+ box-shadow: none; }
.candidate-page-button-icon {
- icon-size: 1em; }
+ icon-size: 1.09em; }
/* Notifications & Message Tray */
.notification-banner {
min-height: 64px;
- width: 34em; }
+ width: 34em;
+ box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.1);
+ border-radius: 12px;
+ margin: 4px; }
.notification-banner .notification-actions {
spacing: 0; }
@@ -915,15 +1056,10 @@ StScrollBar {
padding: 0 4px; }
/* Modal Dialogs */
-.headline {
- font-size: 11pt; }
-
-.modal-dialog {
- border-radius: 16px; }
- .modal-dialog .modal-dialog-content-box {
- margin: 32px 40px;
- spacing: 32px;
- max-width: 28em; }
+.modal-dialog .modal-dialog-content-box {
+ margin: 32px 40px;
+ spacing: 32px;
+ max-width: 28em; }
/* End Session Dialog */
.end-session-dialog {
@@ -936,12 +1072,7 @@ StScrollBar {
.message-dialog-content {
spacing: 18px; }
.message-dialog-content .message-dialog-title {
- text-align: center;
- font-size: 18pt;
- font-weight: 800; }
- .message-dialog-content .message-dialog-title.lightweight {
- font-size: 13pt;
- font-weight: 800; }
+ text-align: center; }
.message-dialog-content .message-dialog-description {
text-align: center; }
@@ -949,8 +1080,7 @@ StScrollBar {
.dialog-list {
spacing: 18px; }
.dialog-list .dialog-list-title {
- text-align: center;
- font-weight: bold; }
+ text-align: center; }
.dialog-list .dialog-list-scrollview {
max-height: 200px; }
.dialog-list .dialog-list-box {
@@ -960,8 +1090,7 @@ StScrollBar {
.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: #50555e;
- font-size: 9pt; }
+ color: #50555e; }
/* Run Dialog */
.run-dialog .modal-dialog-content-box {
@@ -972,7 +1101,6 @@ StScrollBar {
width: 20em; }
.run-dialog .run-dialog-description {
- font-size: 9pt;
text-align: center;
color: #2d3035; }
@@ -1001,8 +1129,7 @@ StScrollBar {
.prompt-dialog-error-label,
.prompt-dialog-info-label,
.prompt-dialog-null-label {
- text-align: center;
- font-size: 9pt; }
+ text-align: center; }
.prompt-dialog-error-label {
color: #fd7d00; }
@@ -1023,10 +1150,9 @@ StScrollBar {
spacing: 20px; }
.audio-selection-device {
- border: 1px solid #d9d9d9;
- border-radius: 12px; }
+ border-radius: 16px; }
.audio-selection-device:hover, .audio-selection-device:focus {
- background-color: #f7f7f7; }
+ background-color: #f2f2f2; }
.audio-selection-device:active {
background-color: #2777ff;
color: #ffffff; }
@@ -1046,7 +1172,7 @@ StScrollBar {
height: 300px;
width: 300px; }
-/* Network Dialogs */
+/* Select Network dialogs */
.nm-dialog {
max-height: 34em;
min-height: 31em;
@@ -1056,18 +1182,8 @@ StScrollBar {
spacing: 20px;
padding: 24px; }
-.nm-dialog-airplane-box {
- spacing: 12px; }
-
-.nm-dialog-airplane-headline {
- font-weight: bold;
- text-align: center; }
-
-.nm-dialog-airplane-text {
- color: #5c616c; }
-
-.nm-dialog-header {
- font-weight: bold; }
+.nm-dialog-subheader {
+ color: #aeb0b6; }
.nm-dialog-header-icon {
icon-size: 2.18em; }
@@ -1076,18 +1192,18 @@ StScrollBar {
spacing: 10px; }
.nm-dialog-scroll-view {
- border: 1px solid #d9d9d9;
- padding: 0;
- background-color: #f7f7f7; }
+ padding: 6px;
+ border-radius: 8px;
+ background-color: #fafafa; }
.nm-dialog-item {
- font-size: 10pt;
- border-bottom: 1px solid #d9d9d9;
- padding: 12px;
- spacing: 0px; }
+ padding: 12px; }
.nm-dialog-item:selected {
background-color: #2777ff;
+ border-radius: 5px;
color: #ffffff; }
+ .nm-dialog-item:hover {
+ background-color: #f2f2f2; }
.nm-dialog-icon {
icon-size: 1.09em; }
@@ -1095,31 +1211,51 @@ StScrollBar {
.nm-dialog-icons {
spacing: 12px; }
+.no-networks-box {
+ spacing: 6px; }
+
.no-networks-label {
color: #aeb0b6; }
-.no-networks-box {
- spacing: 6px; }
+.nm-dialog-airplane-box {
+ text-align: center;
+ spacing: 12px; }
+
+.nm-dialog-airplane-text {
+ color: #aeb0b6; }
/* OSD */
.osd-window {
text-align: center;
font-weight: bold;
spacing: 12px;
- margin: 32px;
- min-width: 64px;
- min-height: 64px; }
+ padding: 12px 18px;
+ margin-bottom: 4em; }
+ .osd-window > * {
+ spacing: 8px; }
.osd-window StIcon {
- icon-size: 6.54em; }
+ icon-size: 2.18em; }
.osd-window .osd-monitor-label {
font-size: 3em; }
+ .osd-window StLabel:ltr {
+ margin-right: 6px; }
+ .osd-window StLabel:rtl {
+ margin-left: 6px; }
.osd-window .level {
- height: 8px;
- -barlevel-height: 8px;
+ margin-bottom: 4px;
+ height: 6px;
+ min-width: 10.9em;
+ -barlevel-height: 6px;
-barlevel-background-color: rgba(255, 255, 255, 0.3);
-barlevel-active-background-color: white;
-barlevel-overdrive-color: #d41919;
-barlevel-overdrive-separator-width: 3px; }
+ .osd-window .level:first-child {
+ margin-bottom: 0px; }
+ .osd-window .level:ltr {
+ margin-right: 6px; }
+ .osd-window .level:rtl {
+ margin-left: 6px; }
/* Pad OSD */
.pad-osd-window {
@@ -1135,38 +1271,54 @@ StScrollBar {
/* App Switcher */
.switcher-popup {
- padding: 8px;
+ padding: 0;
spacing: 24px; }
-.switcher-list .item-box {
- padding: 8px;
- border-radius: 9px;
- border: 1px solid transparent; }
- .switcher-list .item-box:outlined {
- background-color: rgba(255, 255, 255, 0.3); }
- .switcher-list .item-box:selected {
- background-color: rgba(255, 255, 255, 0.3);
- color: white; }
-
-.switcher-list .thumbnail-box {
- padding: 2px;
- spacing: 6px; }
-
-.switcher-list .thumbnail {
- width: 256px; }
-
-.switcher-list .separator {
- width: 1px;
- background: #d9d9d9; }
-
-.switcher-list .switcher-list-item-container {
- spacing: 12px; }
+.switcher-list {
+ padding: 10px;
+ border-radius: 24px;
+ box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.1); }
+ .switcher-list .switcher-list-item-container {
+ spacing: 12px; }
+ .switcher-list .item-box {
+ background-color: transparent; }
+ .switcher-list .item-box:hover {
+ background-color: rgba(255, 255, 255, 0.1); }
+ .switcher-list .item-box:selected, .switcher-list .item-box:focus {
+ background-color: rgba(255, 255, 255, 0.13); }
+ .switcher-list .item-box:selected:hover, .switcher-list .item-box:focus:hover {
+ background-color: rgba(255, 255, 255, 0.16); }
+ .switcher-list .item-box:selected:active, .switcher-list .item-box:focus:active {
+ background-color: rgba(255, 255, 255, 0.13); }
+ .switcher-list .item-box:active {
+ background-color: rgba(255, 255, 255, 0.16); }
+ .switcher-list .item-box:outlined, .switcher-list .item-box:checked {
+ background-color: rgba(255, 255, 255, 0.19); }
+ .switcher-list .item-box:outlined:active, .switcher-list .item-box:checked:active {
+ background-color: rgba(255, 255, 255, 0.22); }
+ .switcher-list .item-box:outlined:hover, .switcher-list .item-box:checked:hover {
+ background-color: rgba(255, 255, 255, 0.25); }
+ .switcher-list .item-box:drop {
+ border: 2px solid rgba(39, 119, 255, 0.8);
+ background-color: rgba(39, 119, 255, 0.2); }
+ .switcher-list .item-box:hover {
+ background: none; }
+ .switcher-list .separator {
+ width: 1px;
+ background: #d9d9d9; }
+ .switcher-list .thumbnail-box {
+ padding: 2px;
+ spacing: 6px; }
+ .switcher-list .thumbnail {
+ width: 256px;
+ border-radius: 8px; }
.switcher-arrow {
- border-color: rgba(0, 0, 0, 0);
- color: rgba(92, 97, 108, 0.8); }
+ border-color: rgba(255, 255, 255, 0.8);
+ color: rgba(255, 255, 255, 0.8); }
.switcher-arrow:highlighted {
- color: #5c616c; }
+ border-color: white;
+ color: white; }
.input-source-switcher-symbol {
font-size: 34pt;
@@ -1177,54 +1329,173 @@ StScrollBar {
border: 5px solid #2777ff; }
/* Workspace Switcher */
-.workspace-switcher-group {
- padding: 12px; }
-
.workspace-switcher {
- background: transparent;
- border: none;
- border-radius: 0;
- padding: 0;
+ margin-bottom: 4em;
+ spacing: 12px;
+ padding: 12px 18px; }
+
+.ws-switcher-indicator {
+ background-color: rgba(255, 255, 255, 0.5);
+ padding: 0.1816666667em;
+ margin: 0.9083333333em;
+ border-radius: 2.18em; }
+ .ws-switcher-indicator:active {
+ background-color: white;
+ padding: 0.3633333333em;
+ margin: 0.7266666667em; }
+
+.icon-label-button-container {
+ spacing: 6px; }
+ .icon-label-button-container StIcon {
+ icon-size: 32px; }
+
+.screenshot-ui-panel {
+ border-radius: 37px;
+ padding: 18px;
+ padding-bottom: 12px;
+ margin-bottom: 4em;
spacing: 12px; }
-.ws-switcher-box {
- background: transparent;
- height: 50px;
- background-size: 32px;
- border: 1px solid rgba(255, 255, 255, 0.1);
- border-radius: 11px; }
+.screenshot-ui-close-button {
+ padding: 6px; }
+ .screenshot-ui-close-button.left {
+ margin-left: 8px; }
+ .screenshot-ui-close-button.right {
+ margin-right: 8px; }
-.ws-switcher-active-up,
-.ws-switcher-active-down,
-.ws-switcher-active-left,
-.ws-switcher-active-right {
- height: 52px;
- background-color: #2777ff;
- border: 1px solid #005efd;
- border-radius: 11px;
- color: #ffffff; }
+.screenshot-ui-type-button {
+ padding: 12px 18px !important;
+ border-radius: 19px; }
+
+.screenshot-ui-capture-button {
+ width: 36px;
+ height: 36px;
+ border-radius: 99px;
+ border: 4px white;
+ padding: 4px; }
+ .screenshot-ui-capture-button .screenshot-ui-capture-button-circle {
+ background-color: white;
+ transition-duration: 200ms;
+ border-radius: 99px; }
+ .screenshot-ui-capture-button .screenshot-ui-capture-button-circle:hover, .screenshot-ui-capture-button .screenshot-ui-capture-button-circle:focus {
+ background-color: #f2f2f2; }
+ .screenshot-ui-capture-button:hover .screenshot-ui-capture-button-circle, .screenshot-ui-capture-button:focus .screenshot-ui-capture-button-circle {
+ background-color: #d9d9d9; }
+ .screenshot-ui-capture-button:active .screenshot-ui-capture-button-circle {
+ background-color: gray; }
+ .screenshot-ui-capture-button:cast .screenshot-ui-capture-button-circle {
+ background-color: #bf1717; }
+ .screenshot-ui-capture-button:cast:hover .screenshot-ui-capture-button-circle, .screenshot-ui-capture-button:cast:focus .screenshot-ui-capture-button-circle {
+ background-color: #7b0f0f; }
+ .screenshot-ui-capture-button:cast:active .screenshot-ui-capture-button-circle {
+ background-color: #360707; }
+
+.screenshot-ui-shot-cast-container {
+ background-color: #f2f2f2;
+ border-radius: 16px;
+ padding: 3px;
+ spacing: 3px; }
+ .screenshot-ui-shot-cast-container:ltr {
+ margin-left: 3px; }
+ .screenshot-ui-shot-cast-container:rtl {
+ margin-right: 3px; }
+
+.screenshot-ui-shot-cast-button {
+ padding: 6px 12px;
+ background-color: transparent;
+ border-radius: 13px; }
+ .screenshot-ui-shot-cast-button:hover, .screenshot-ui-shot-cast-button:focus {
+ background-color: white; }
+ .screenshot-ui-shot-cast-button:active {
+ background-color: #fafafa; }
+ .screenshot-ui-shot-cast-button:checked {
+ background-color: white;
+ color: black; }
+ .screenshot-ui-shot-cast-button StIcon {
+ icon-size: 1.09em; }
+
+.screenshot-ui-show-pointer-button {
+ border-radius: 99px;
+ padding: 12px !important; }
+ .screenshot-ui-show-pointer-button StIcon {
+ icon-size: 1.09em; }
+
+.screenshot-ui-area-indicator-shade {
+ background-color: rgba(0, 0, 0, 0.3); }
+
+.screenshot-ui-area-selector .screenshot-ui-area-indicator-shade {
+ background-color: rgba(0, 0, 0, 0.5); }
+
+.screenshot-ui-area-selector .screenshot-ui-area-indicator-selection {
+ border: 2px white; }
+
+.screenshot-ui-area-selector-handle {
+ border-radius: 99px;
+ background-color: white;
+ box-shadow: 0 1px 3px 2px rgba(0, 0, 0, 0.2);
+ width: 24px;
+ height: 24px; }
+
+.screenshot-ui-window-selector {
+ background-color: #272a34; }
+ .screenshot-ui-window-selector .screenshot-ui-window-selector-window-container {
+ margin: 100px; }
+ .screenshot-ui-window-selector:primary-monitor .screenshot-ui-window-selector-window-container {
+ margin-bottom: 200px; }
+
+.screenshot-ui-window-selector-window-border {
+ transition-duration: 200ms;
+ border-radius: 16px;
+ border: 6px transparent; }
+
+.screenshot-ui-window-selector-check {
+ transition-duration: 200ms;
+ color: transparent;
+ border-radius: 99px;
+ border-width: 12px;
+ icon-size: 24px; }
+
+.screenshot-ui-window-selector-window:hover .screenshot-ui-window-selector-window-border {
+ border-color: #0051da; }
+
+.screenshot-ui-window-selector-window:checked .screenshot-ui-window-selector-window-border {
+ border-color: #2777ff;
+ background-color: rgba(39, 119, 255, 0.2); }
+
+.screenshot-ui-window-selector-window:checked .screenshot-ui-window-selector-check {
+ color: white;
+ background-color: #2777ff; }
+
+.screenshot-ui-screen-selector {
+ transition-duration: 200ms;
+ background-color: rgba(0, 0, 0, 0.5); }
+ .screenshot-ui-screen-selector:hover {
+ background-color: rgba(0, 0, 0, 0.3); }
+ .screenshot-ui-screen-selector:active {
+ background-color: rgba(0, 0, 0, 0.7); }
+ .screenshot-ui-screen-selector:checked {
+ background-color: transparent;
+ border: 2px white; }
+
+.screenshot-ui-tooltip {
+ color: white;
+ background-color: #303340;
+ border-radius: 99px;
+ padding: 6px 12px;
+ text-align: center;
+ -y-offset: 24px; }
/* Top Bar */
#panel {
background-color: #000;
font-weight: bold;
height: 2.2em;
- font-feature-settings: "tnum";
transition-duration: 250ms; }
#panel.unlock-screen, #panel.login-screen, #panel:overview {
background-color: transparent; }
- #panel.unlock-screen .panel-corner, #panel.login-screen .panel-corner, #panel:overview .panel-corner {
- -panel-corner-opacity: 0; }
- #panel .panel-corner {
- -panel-corner-radius: 9px;
- -panel-corner-background-color: #000;
- -panel-corner-border-width: 2px;
- -panel-corner-border-color: transparent;
- -panel-corner-opacity: 1;
- transition-duration: 250ms; }
#panel .panel-button {
font-weight: bold;
- color: #ddd;
+ color: white;
-natural-hpadding: 12px;
-minimum-hpadding: 6px;
transition-duration: 150ms;
@@ -1234,12 +1505,36 @@ StScrollBar {
transition-duration: 150ms;
border: 3px solid transparent;
border-radius: 99px; }
- #panel .panel-button:hover, #panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked {
+ #panel .panel-button.screen-recording-indicator {
+ box-shadow: inset 0 0 0 100px #bf1717; }
+ #panel .panel-button.screen-recording-indicator StBoxLayout {
+ spacing: 6px; }
+ #panel .panel-button.screen-recording-indicator StIcon {
+ icon-size: 1.09em; }
+ #panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked {
box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.2); }
- #panel .panel-button:hover.clock-display, #panel .panel-button:active.clock-display, #panel .panel-button:overview.clock-display, #panel .panel-button:focus.clock-display, #panel .panel-button:checked.clock-display {
+ #panel .panel-button:active.clock-display, #panel .panel-button:overview.clock-display, #panel .panel-button:focus.clock-display, #panel .panel-button:checked.clock-display {
box-shadow: none; }
- #panel .panel-button:hover.clock-display .clock, #panel .panel-button:active.clock-display .clock, #panel .panel-button:overview.clock-display .clock, #panel .panel-button:focus.clock-display .clock, #panel .panel-button:checked.clock-display .clock {
+ #panel .panel-button:active.clock-display .clock, #panel .panel-button:overview.clock-display .clock, #panel .panel-button:focus.clock-display .clock, #panel .panel-button:checked.clock-display .clock {
box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.2); }
+ #panel .panel-button:active.screen-recording-indicator, #panel .panel-button:overview.screen-recording-indicator, #panel .panel-button:focus.screen-recording-indicator, #panel .panel-button:checked.screen-recording-indicator {
+ box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.85); }
+ #panel .panel-button:hover {
+ box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15); }
+ #panel .panel-button:hover.clock-display {
+ box-shadow: none; }
+ #panel .panel-button:hover.clock-display .clock {
+ box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15); }
+ #panel .panel-button:hover.screen-recording-indicator {
+ box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.9); }
+ #panel .panel-button:active:hover, #panel .panel-button:overview:hover, #panel .panel-button:focus:hover, #panel .panel-button:checked:hover {
+ box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.25); }
+ #panel .panel-button:active:hover.clock-display, #panel .panel-button:overview:hover.clock-display, #panel .panel-button:focus:hover.clock-display, #panel .panel-button:checked:hover.clock-display {
+ box-shadow: none; }
+ #panel .panel-button:active:hover.clock-display .clock, #panel .panel-button:overview:hover.clock-display .clock, #panel .panel-button:focus:hover.clock-display .clock, #panel .panel-button:checked:hover.clock-display .clock {
+ box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.25); }
+ #panel .panel-button:active:hover.screen-recording-indicator, #panel .panel-button:overview:hover.screen-recording-indicator, #panel .panel-button:focus:hover.screen-recording-indicator, #panel .panel-button:checked:hover.screen-recording-indicator {
+ box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.8); }
#panel .panel-button .system-status-icon {
icon-size: 1.09em;
padding: 5px;
@@ -1251,12 +1546,30 @@ StScrollBar {
-st-icon-style: symbolic; }
#panel .panel-button#panelActivities {
-natural-hpadding: 18px; }
- #panel.unlock-screen .panel-button:hover, #panel.unlock-screen .panel-button:active, #panel.unlock-screen .panel-button:overview, #panel.unlock-screen .panel-button:focus, #panel.unlock-screen .panel-button:checked, #panel.login-screen .panel-button:hover, #panel.login-screen .panel-button:active, #panel.login-screen .panel-button:overview, #panel.login-screen .panel-button:focus, #panel.login-screen .panel-button:checked, #panel:overview .panel-button:hover, #panel:overview .panel-button:active, #panel:overview .panel-button:overview, #panel:overview .panel-button:focus, #panel:overview .panel-button:checked {
+ #panel.unlock-screen .panel-button:active, #panel.unlock-screen .panel-button:overview, #panel.unlock-screen .panel-button:focus, #panel.unlock-screen .panel-button:checked, #panel.login-screen .panel-button:active, #panel.login-screen .panel-button:overview, #panel.login-screen .panel-button:focus, #panel.login-screen .panel-button:checked, #panel:overview .panel-button:active, #panel:overview .panel-button:overview, #panel:overview .panel-button:focus, #panel:overview .panel-button:checked {
box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15); }
- #panel.unlock-screen .panel-button:hover.clock-display, #panel.unlock-screen .panel-button:active.clock-display, #panel.unlock-screen .panel-button:overview.clock-display, #panel.unlock-screen .panel-button:focus.clock-display, #panel.unlock-screen .panel-button:checked.clock-display, #panel.login-screen .panel-button:hover.clock-display, #panel.login-screen .panel-button:active.clock-display, #panel.login-screen .panel-button:overview.clock-display, #panel.login-screen .panel-button:focus.clock-display, #panel.login-screen .panel-button:checked.clock-display, #panel:overview .panel-button:hover.clock-display, #panel:overview .panel-button:active.clock-display, #panel:overview .panel-button:overview.clock-display, #panel:overview .panel-button:focus.clock-display, #panel:overview .panel-button:checked.clock-display {
+ #panel.unlock-screen .panel-button:active.clock-display, #panel.unlock-screen .panel-button:overview.clock-display, #panel.unlock-screen .panel-button:focus.clock-display, #panel.unlock-screen .panel-button:checked.clock-display, #panel.login-screen .panel-button:active.clock-display, #panel.login-screen .panel-button:overview.clock-display, #panel.login-screen .panel-button:focus.clock-display, #panel.login-screen .panel-button:checked.clock-display, #panel:overview .panel-button:active.clock-display, #panel:overview .panel-button:overview.clock-display, #panel:overview .panel-button:focus.clock-display, #panel:overview .panel-button:checked.clock-display {
box-shadow: none; }
- #panel.unlock-screen .panel-button:hover.clock-display .clock, #panel.unlock-screen .panel-button:active.clock-display .clock, #panel.unlock-screen .panel-button:overview.clock-display .clock, #panel.unlock-screen .panel-button:focus.clock-display .clock, #panel.unlock-screen .panel-button:checked.clock-display .clock, #panel.login-screen .panel-button:hover.clock-display .clock, #panel.login-screen .panel-button:active.clock-display .clock, #panel.login-screen .panel-button:overview.clock-display .clock, #panel.login-screen .panel-button:focus.clock-display .clock, #panel.login-screen .panel-button:checked.clock-display .clock, #panel:overview .panel-button:hover.clock-display .clock, #panel:overview .panel-button:active.clock-display .clock, #panel:overview .panel-button:overview.clock-display .clock, #panel:overview .panel-button:focus.clock-display .clock, #panel:overview .panel-button:checked.clock-display .clock {
+ #panel.unlock-screen .panel-button:active.clock-display .clock, #panel.unlock-screen .panel-button:overview.clock-display .clock, #panel.unlock-screen .panel-button:focus.clock-display .clock, #panel.unlock-screen .panel-button:checked.clock-display .clock, #panel.login-screen .panel-button:active.clock-display .clock, #panel.login-screen .panel-button:overview.clock-display .clock, #panel.login-screen .panel-button:focus.clock-display .clock, #panel.login-screen .panel-button:checked.clock-display .clock, #panel:overview .panel-button:active.clock-display .clock, #panel:overview .panel-button:overview.clock-display .clock, #panel:overview .panel-button:focus.clock-display .clock, #panel:overview .panel-button:checked.clock-display .clock {
box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15); }
+ #panel.unlock-screen .panel-button:active.screen-recording-indicator, #panel.unlock-screen .panel-button:overview.screen-recording-indicator, #panel.unlock-screen .panel-button:focus.screen-recording-indicator, #panel.unlock-screen .panel-button:checked.screen-recording-indicator, #panel.login-screen .panel-button:active.screen-recording-indicator, #panel.login-screen .panel-button:overview.screen-recording-indicator, #panel.login-screen .panel-button:focus.screen-recording-indicator, #panel.login-screen .panel-button:checked.screen-recording-indicator, #panel:overview .panel-button:active.screen-recording-indicator, #panel:overview .panel-button:overview.screen-recording-indicator, #panel:overview .panel-button:focus.screen-recording-indicator, #panel:overview .panel-button:checked.screen-recording-indicator {
+ box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.85); }
+ #panel.unlock-screen .panel-button:hover, #panel.login-screen .panel-button:hover, #panel:overview .panel-button:hover {
+ box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.1); }
+ #panel.unlock-screen .panel-button:hover.clock-display, #panel.login-screen .panel-button:hover.clock-display, #panel:overview .panel-button:hover.clock-display {
+ box-shadow: none; }
+ #panel.unlock-screen .panel-button:hover.clock-display .clock, #panel.login-screen .panel-button:hover.clock-display .clock, #panel:overview .panel-button:hover.clock-display .clock {
+ box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.1); }
+ #panel.unlock-screen .panel-button:hover.screen-recording-indicator, #panel.login-screen .panel-button:hover.screen-recording-indicator, #panel:overview .panel-button:hover.screen-recording-indicator {
+ box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.9); }
+ #panel.unlock-screen .panel-button:active:hover, #panel.unlock-screen .panel-button:overview:hover, #panel.unlock-screen .panel-button:focus:hover, #panel.unlock-screen .panel-button:checked:hover, #panel.login-screen .panel-button:active:hover, #panel.login-screen .panel-button:overview:hover, #panel.login-screen .panel-button:focus:hover, #panel.login-screen .panel-button:checked:hover, #panel:overview .panel-button:active:hover, #panel:overview .panel-button:overview:hover, #panel:overview .panel-button:focus:hover, #panel:overview .panel-button:checked:hover {
+ box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.2); }
+ #panel.unlock-screen .panel-button:active:hover.clock-display, #panel.unlock-screen .panel-button:overview:hover.clock-display, #panel.unlock-screen .panel-button:focus:hover.clock-display, #panel.unlock-screen .panel-button:checked:hover.clock-display, #panel.login-screen .panel-button:active:hover.clock-display, #panel.login-screen .panel-button:overview:hover.clock-display, #panel.login-screen .panel-button:focus:hover.clock-display, #panel.login-screen .panel-button:checked:hover.clock-display, #panel:overview .panel-button:active:hover.clock-display, #panel:overview .panel-button:overview:hover.clock-display, #panel:overview .panel-button:focus:hover.clock-display, #panel:overview .panel-button:checked:hover.clock-display {
+ box-shadow: none; }
+ #panel.unlock-screen .panel-button:active:hover.clock-display .clock, #panel.unlock-screen .panel-button:overview:hover.clock-display .clock, #panel.unlock-screen .panel-button:focus:hover.clock-display .clock, #panel.unlock-screen .panel-button:checked:hover.clock-display .clock, #panel.login-screen .panel-button:active:hover.clock-display .clock, #panel.login-screen .panel-button:overview:hover.clock-display .clock, #panel.login-screen .panel-button:focus:hover.clock-display .clock, #panel.login-screen .panel-button:checked:hover.clock-display .clock, #panel:overview .panel-button:active:hover.clock-display .clock, #panel:overview .panel-button:overview:hover.clock-display .clock, #panel:overview .panel-button:focus:hover.clock-display .clock, #panel:overview .panel-button:checked:hover.clock-display .clock {
+ box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.2); }
+ #panel.unlock-screen .panel-button:active:hover.screen-recording-indicator, #panel.unlock-screen .panel-button:overview:hover.screen-recording-indicator, #panel.unlock-screen .panel-button:focus:hover.screen-recording-indicator, #panel.unlock-screen .panel-button:checked:hover.screen-recording-indicator, #panel.login-screen .panel-button:active:hover.screen-recording-indicator, #panel.login-screen .panel-button:overview:hover.screen-recording-indicator, #panel.login-screen .panel-button:focus:hover.screen-recording-indicator, #panel.login-screen .panel-button:checked:hover.screen-recording-indicator, #panel:overview .panel-button:active:hover.screen-recording-indicator, #panel:overview .panel-button:overview:hover.screen-recording-indicator, #panel:overview .panel-button:focus:hover.screen-recording-indicator, #panel:overview .panel-button:checked:hover.screen-recording-indicator {
+ box-shadow: inset 0 0 0 100px rgba(191, 23, 23, 0.8); }
#panel .panel-status-indicators-box,
#panel .panel-status-menu-box {
spacing: 2px; }
@@ -1275,6 +1588,12 @@ StScrollBar {
padding: 0 6px;
spacing: 6px; }
+.clock-display-box {
+ spacing: 2px; }
+ .clock-display-box .clock {
+ padding-left: 12px;
+ padding-right: 12px; }
+
/* Activities Ripple */
.ripple-box {
background-color: rgba(243, 247, 255, 0.3);
@@ -1305,22 +1624,21 @@ StScrollBar {
border-radius: 99px;
padding: 6px 12px; }
-.window-close {
- background-color: #303340;
+.window-close, .screenshot-ui-close-button {
+ background-color: rgba(41, 44, 55, 0.95);
color: white;
border-radius: 21px;
padding: 3px;
height: 30px;
width: 30px;
- box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.5);
transition-duration: 300ms; }
- .window-close StIcon {
+ .window-close StIcon, .screenshot-ui-close-button StIcon {
icon-size: 24px; }
- .window-close:hover {
- background-color: #51576b; }
- .window-close:active {
+ .window-close:hover, .screenshot-ui-close-button:hover {
+ background-color: rgba(76, 79, 88, 0.9575); }
+ .window-close:active, .screenshot-ui-close-button:active {
color: rgba(255, 255, 255, 0.8);
- background-color: #252831; }
+ background-color: rgba(30, 33, 40, 0.95); }
.workspace-background {
border-radius: 30px;
@@ -1328,68 +1646,95 @@ StScrollBar {
.search-entry {
- width: 320px;
- padding: 7px 9px;
border-radius: 18px;
- color: rgba(92, 97, 108, 0.7);
- background-color: #ffffff;
margin-top: 12px;
margin-bottom: 6px;
- border-width: 2px;
- border-color: transparent; }
+ padding: 7px 9px;
+ width: 320px;
+ background-color: white;
+ color: rgba(92, 97, 108, 0.7);
+ border: 2px solid white; }
.search-entry:hover {
- background-color: #f7f7f7;
- color: #50555e; }
+ background-color: white;
+ border-color: white;
+ color: rgba(92, 97, 108, 0.7); }
.search-entry:focus {
- border-style: solid;
+ background-color: #f4f8ff;
border-color: #2777ff;
- color: #5c616c;
- box-shadow: inset 0 1px 2px 1px rgba(0, 0, 0, 0.2); }
+ color: #5c616c; }
+
+ .search-entry:insensitive {
+ background-color: white;
+ border-color: white;
+ color: #aeb0b6; }
.search-entry .search-entry-icon {
+ color: inherit;
icon-size: 1.09em;
- padding: 0 4px;
- color: inherit; }
+ margin-top: 2px;
+ padding: 0 4px; }
/* Search */
+#searchResults {
+ margin: 0 4px; }
+
#searchResultsContent {
- max-width: 1024px;
- spacing: 8px; }
+ max-width: 1072px; }
.search-section {
- spacing: 8px; }
+ spacing: 18px; }
.search-section .search-section-separator {
- height: 0;
+ height: 8px;
background-color: transparent; }
.search-section-content {
- background-color: rgba(59, 63, 78, 0.8);
- border-radius: 19px;
+ background-color: #323643;
+ border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.1);
- box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
- text-shadow: 0 1px rgba(255, 255, 255, 0.2);
color: white;
- padding: 18px;
- spacing: 8px; }
+ padding: 12px;
+ margin: 0 12px; }
-.list-search-result:focus, .search-provider-icon:focus, .list-search-result:hover, .search-provider-icon:hover, .list-search-result:selected, .search-provider-icon:selected {
- background-color: rgba(255, 255, 255, 0.1);
- transition-duration: 200ms; }
-
-.list-search-result:active, .search-provider-icon:active, .list-search-result:checked, .search-provider-icon:checked {
- background-color: rgba(26, 28, 35, 0.9); }
+.list-search-result, .search-provider-icon {
+ background-color: transparent;
+ border-radius: 11px; }
+ .list-search-result:hover, .search-provider-icon:hover {
+ background-color: rgba(255, 255, 255, 0.1); }
+ .list-search-result:selected, .search-provider-icon:selected, .list-search-result:focus, .search-provider-icon:focus {
+ background-color: rgba(255, 255, 255, 0.13); }
+ .list-search-result:selected:hover, .search-provider-icon:selected:hover, .list-search-result:focus:hover, .search-provider-icon:focus:hover {
+ background-color: rgba(255, 255, 255, 0.16); }
+ .list-search-result:selected:active, .search-provider-icon:selected:active, .list-search-result:focus:active, .search-provider-icon:focus:active {
+ background-color: rgba(255, 255, 255, 0.13); }
+ .list-search-result:active, .search-provider-icon:active {
+ background-color: rgba(255, 255, 255, 0.16); }
+ .list-search-result:outlined, .search-provider-icon:outlined, .list-search-result:checked, .search-provider-icon:checked {
+ background-color: rgba(255, 255, 255, 0.19); }
+ .list-search-result:outlined:active, .search-provider-icon:outlined:active, .list-search-result:checked:active, .search-provider-icon:checked:active {
+ background-color: rgba(255, 255, 255, 0.22); }
+ .list-search-result:outlined:hover, .search-provider-icon:outlined:hover, .list-search-result:checked:hover, .search-provider-icon:checked:hover {
+ background-color: rgba(255, 255, 255, 0.25); }
+ .list-search-result:drop, .search-provider-icon:drop {
+ border: 2px solid rgba(39, 119, 255, 0.8);
+ background-color: rgba(39, 119, 255, 0.2); }
.grid-search-results {
- spacing: 36px; }
+ spacing: 30px;
+ margin: 0 12px; }
+
+.search-provider-icon:ltr {
+ margin-right: 4px; }
+
+.search-provider-icon:rtl {
+ margin-left: 4px; }
.search-provider-icon .list-search-provider-content {
spacing: 12px; }
.search-provider-icon .list-search-provider-content .list-search-provider-details {
width: 120px;
- margin-top: 0;
- color: #ebebeb; }
+ color: white; }
.list-search-results {
spacing: 6px; }
@@ -1401,13 +1746,11 @@ StScrollBar {
spacing: 12px; }
.list-search-result .list-search-result-description {
- color: #b3b3b3; }
+ color: #97999f; }
/* Dash */
#dash {
- font-size: 8pt;
- margin-top: 18px;
- padding: 0 10px; }
+ margin-top: 12px; }
#dash .placeholder {
background-image: none;
background-size: contain;
@@ -1415,22 +1758,63 @@ StScrollBar {
#dash .empty-dash-drop-target {
width: 32px;
height: 32px; }
- #dash .overview-icon {
- padding: 5px; }
+ #dash .app-well-app-running-dot {
+ margin-bottom: 14px; }
.dash-background {
- background-color: #3b3b3b;
- margin-bottom: 16px;
- padding: 10px;
- border-radius: 24px; }
+ background-color: #323643;
+ border-radius: 28px;
+ padding: 12px;
+ spacing: 6px;
+ margin-bottom: 12px; }
-.dash-item-container .app-well-app, .show-apps {
- padding: 10px 1.5px 26px; }
+.dash-item-container > * {
+ margin: 0 2px; }
+
+.dash-item-container:ltr:first-child {
+ margin-left: 0; }
+
+.dash-item-container:rtl:first-child {
+ margin-right: 0; }
+
+.dash-item-container .app-well-app .overview-icon, .dash-item-container .grid-search-result .overview-icon {
+ padding: 6px; }
+
+.dash-item-container .show-apps .overview-icon {
+ background-color: transparent; }
+
+.dash-item-container .show-apps:hover .overview-icon {
+ background-color: rgba(255, 255, 255, 0.1); }
+
+.dash-item-container .show-apps:selected .overview-icon, .dash-item-container .show-apps:focus .overview-icon {
+ background-color: rgba(255, 255, 255, 0.13); }
+ .dash-item-container .show-apps:selected .overview-icon:hover .overview-icon, .dash-item-container .show-apps:focus .overview-icon:hover .overview-icon {
+ background-color: rgba(255, 255, 255, 0.16); }
+ .dash-item-container .show-apps:selected .overview-icon:active .overview-icon, .dash-item-container .show-apps:focus .overview-icon:active .overview-icon {
+ background-color: rgba(255, 255, 255, 0.13); }
+
+.dash-item-container .show-apps:active .overview-icon {
+ background-color: rgba(255, 255, 255, 0.16); }
+
+.dash-item-container .show-apps:outlined .overview-icon, .dash-item-container .show-apps:checked .overview-icon {
+ background-color: rgba(255, 255, 255, 0.19); }
+ .dash-item-container .show-apps:outlined .overview-icon:active .overview-icon, .dash-item-container .show-apps:checked .overview-icon:active .overview-icon {
+ background-color: rgba(255, 255, 255, 0.22); }
+ .dash-item-container .show-apps:outlined .overview-icon:hover .overview-icon, .dash-item-container .show-apps:checked .overview-icon:hover .overview-icon {
+ background-color: rgba(255, 255, 255, 0.25); }
+
+.dash-item-container .show-apps:drop .overview-icon {
+ border: 2px solid rgba(39, 119, 255, 0.8);
+ background-color: rgba(39, 119, 255, 0.2); }
+
+.dash-item-container .show-apps, .dash-item-container .app-well-app, .dash-item-container .grid-search-result {
+ padding-bottom: 12px; }
.dash-separator {
width: 1px;
- margin: 0 6.5px 16px;
- background-color: rgba(255, 255, 255, 0.3); }
+ margin: 0 4px;
+ background-color: #d9d9d9;
+ margin-bottom: 12px; }
.dash-label {
color: white;
@@ -1438,86 +1822,87 @@ StScrollBar {
border-radius: 99px;
padding: 6px 12px;
text-align: center;
- -y-offset: 12px; }
-
-.show-apps .overview-icon {
- color: white; }
-
-.show-apps:hover .overview-icon, .show-apps:selected .overview-icon {
- background-color: rgba(255, 255, 255, 0.1); }
-
-.show-apps:focus .overview-icon {
- background-color: rgba(255, 255, 255, 0.3); }
-
-.show-apps:drop .overview-icon {
- border: 2px solid #2777ff;
- background-color: rgba(39, 119, 255, 0.2); }
-
-.show-apps:active .overview-icon, .show-apps:checked .overview-icon {
- background-color: rgba(26, 28, 35, 0.5); }
-
-.show-apps:focus .overview-icon, .show-apps:checked .overview-icon {
- background-color: rgba(48, 51, 64, 0.5);
- color: #5c616c; }
+ -y-offset: 8px; }
/* App Grid */
.icon-grid {
row-spacing: 12px;
column-spacing: 12px;
- max-row-spacing: 72px;
- max-column-spacing: 72px;
+ max-row-spacing: 42px;
+ max-column-spacing: 42px;
page-padding-top: 24px;
page-padding-bottom: 24px;
- page-padding-left: 12px;
- page-padding-right: 12px; }
+ page-padding-left: 18px;
+ page-padding-right: 18px; }
/* App Icons */
-.app-well-app .overview-icon,
-.grid-search-result .overview-icon {
- color: #fff; }
+.app-well-app .overview-icon, .grid-search-result .overview-icon {
+ background-color: transparent; }
-.app-well-app:hover .overview-icon, .app-well-app:selected .overview-icon,
-.grid-search-result:hover .overview-icon,
-.grid-search-result:selected .overview-icon {
+.app-well-app:hover .overview-icon, .grid-search-result:hover .overview-icon {
background-color: rgba(255, 255, 255, 0.1); }
-.app-well-app:focus .overview-icon,
-.grid-search-result:focus .overview-icon {
- background-color: rgba(255, 255, 255, 0.3); }
+.app-well-app:selected .overview-icon, .grid-search-result:selected .overview-icon, .app-well-app:focus .overview-icon, .grid-search-result:focus .overview-icon {
+ background-color: rgba(255, 255, 255, 0.13); }
+ .app-well-app:selected .overview-icon:hover .overview-icon, .grid-search-result:selected .overview-icon:hover .overview-icon, .app-well-app:focus .overview-icon:hover .overview-icon, .grid-search-result:focus .overview-icon:hover .overview-icon {
+ background-color: rgba(255, 255, 255, 0.16); }
+ .app-well-app:selected .overview-icon:active .overview-icon, .grid-search-result:selected .overview-icon:active .overview-icon, .app-well-app:focus .overview-icon:active .overview-icon, .grid-search-result:focus .overview-icon:active .overview-icon {
+ background-color: rgba(255, 255, 255, 0.13); }
-.app-well-app:drop .overview-icon,
-.grid-search-result:drop .overview-icon {
- border: 2px solid #2777ff;
+.app-well-app:active .overview-icon, .grid-search-result:active .overview-icon {
+ background-color: rgba(255, 255, 255, 0.16); }
+
+.app-well-app:outlined .overview-icon, .grid-search-result:outlined .overview-icon, .app-well-app:checked .overview-icon, .grid-search-result:checked .overview-icon {
+ background-color: rgba(255, 255, 255, 0.19); }
+ .app-well-app:outlined .overview-icon:active .overview-icon, .grid-search-result:outlined .overview-icon:active .overview-icon, .app-well-app:checked .overview-icon:active .overview-icon, .grid-search-result:checked .overview-icon:active .overview-icon {
+ background-color: rgba(255, 255, 255, 0.22); }
+ .app-well-app:outlined .overview-icon:hover .overview-icon, .grid-search-result:outlined .overview-icon:hover .overview-icon, .app-well-app:checked .overview-icon:hover .overview-icon, .grid-search-result:checked .overview-icon:hover .overview-icon {
+ background-color: rgba(255, 255, 255, 0.25); }
+
+.app-well-app:drop .overview-icon, .grid-search-result:drop .overview-icon {
+ border: 2px solid rgba(39, 119, 255, 0.8);
background-color: rgba(39, 119, 255, 0.2); }
-.app-well-app:active .overview-icon, .app-well-app:checked .overview-icon,
-.grid-search-result:active .overview-icon,
-.grid-search-result:checked .overview-icon {
- background-color: rgba(26, 28, 35, 0.5); }
+.app-well-app .overview-icon, .grid-search-result .overview-icon {
+ padding: 12px; }
-.app-well-app .overview-icon.overview-icon-with-label,
-.grid-search-result .overview-icon.overview-icon-with-label {
- padding: 10px 8px 5px 8px; }
- .app-well-app .overview-icon.overview-icon-with-label > StBoxLayout,
- .grid-search-result .overview-icon.overview-icon-with-label > StBoxLayout {
- spacing: 6px; }
+.app-well-app .overview-icon.overview-icon-with-label > StBoxLayout, .grid-search-result .overview-icon.overview-icon-with-label > StBoxLayout {
+ spacing: 6px; }
-/* App Folders */
-.app-well-app.app-folder {
- background-color: #3b3b3b;
- border-radius: 12px; }
+.app-well-app.app-folder .overview-icon, .app-folder.grid-search-result .overview-icon {
+ background-color: rgba(255, 255, 255, 0.19); }
+
+.app-well-app.app-folder:hover .overview-icon, .app-folder.grid-search-result:hover .overview-icon {
+ background-color: rgba(255, 255, 255, 0.1); }
+
+.app-well-app.app-folder:selected .overview-icon, .app-folder.grid-search-result:selected .overview-icon, .app-well-app.app-folder:focus .overview-icon, .app-folder.grid-search-result:focus .overview-icon {
+ background-color: rgba(255, 255, 255, 0.13); }
+ .app-well-app.app-folder:selected .overview-icon:hover .overview-icon, .app-folder.grid-search-result:selected .overview-icon:hover .overview-icon, .app-well-app.app-folder:focus .overview-icon:hover .overview-icon, .app-folder.grid-search-result:focus .overview-icon:hover .overview-icon {
+ background-color: rgba(255, 255, 255, 0.16); }
+ .app-well-app.app-folder:selected .overview-icon:active .overview-icon, .app-folder.grid-search-result:selected .overview-icon:active .overview-icon, .app-well-app.app-folder:focus .overview-icon:active .overview-icon, .app-folder.grid-search-result:focus .overview-icon:active .overview-icon {
+ background-color: rgba(255, 255, 255, 0.13); }
+
+.app-well-app.app-folder:active .overview-icon, .app-folder.grid-search-result:active .overview-icon {
+ background-color: rgba(255, 255, 255, 0.16); }
+
+.app-well-app.app-folder:outlined .overview-icon, .app-folder.grid-search-result:outlined .overview-icon, .app-well-app.app-folder:checked .overview-icon, .app-folder.grid-search-result:checked .overview-icon {
+ background-color: rgba(255, 255, 255, 0.19); }
+ .app-well-app.app-folder:outlined .overview-icon:active .overview-icon, .app-folder.grid-search-result:outlined .overview-icon:active .overview-icon, .app-well-app.app-folder:checked .overview-icon:active .overview-icon, .app-folder.grid-search-result:checked .overview-icon:active .overview-icon {
+ background-color: rgba(255, 255, 255, 0.22); }
+ .app-well-app.app-folder:outlined .overview-icon:hover .overview-icon, .app-folder.grid-search-result:outlined .overview-icon:hover .overview-icon, .app-well-app.app-folder:checked .overview-icon:hover .overview-icon, .app-folder.grid-search-result:checked .overview-icon:hover .overview-icon {
+ background-color: rgba(255, 255, 255, 0.25); }
+
+.app-well-app.app-folder:drop .overview-icon, .app-folder.grid-search-result:drop .overview-icon {
+ border: 2px solid rgba(39, 119, 255, 0.8);
+ background-color: rgba(39, 119, 255, 0.2); }
.app-folder-dialog {
- border-radius: 24px;
- background-color: #3b3b3b;
- padding: 12px 0px 12px 0px; }
+ border-radius: 32px;
+ background-color: #323643; }
.app-folder-dialog .folder-name-container {
padding: 24px 36px 0;
spacing: 12px;
/* FIXME: this is to keep the label in sync with the entry */ }
- .app-folder-dialog .folder-name-container .folder-name-label, .app-folder-dialog .folder-name-container .folder-name-entry {
- font-size: 18pt;
- font-weight: 800; }
.app-folder-dialog .folder-name-container .folder-name-entry {
width: 300px; }
.app-folder-dialog .folder-name-container .folder-name-label {
@@ -1527,9 +1912,9 @@ StScrollBar {
padding: 0;
width: 36px;
height: 36px;
- border-radius: 18px; }
+ border-radius: 99px; }
.app-folder-dialog .folder-name-container .edit-folder-button > StIcon {
- icon-size: 16px; }
+ icon-size: 1.09em; }
.app-folder-dialog .icon-grid {
row-spacing: 12px;
column-spacing: 30px;
@@ -1542,24 +1927,21 @@ StScrollBar {
.app-folder-dialog-container {
padding: 12px;
- width: 620px;
- height: 620px; }
+ width: 640px;
+ height: 640px; }
.app-well-app-running-dot {
height: 5px;
width: 5px;
border-radius: 5px;
- background-color: white;
- margin-bottom: 1px; }
+ margin-bottom: 8px;
+ background-color: white; }
.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 {
- max-width: 27.25em; }
-
.page-indicator {
padding: 6px 12px 0; }
.page-indicator .page-indicator-icon {
@@ -1585,12 +1967,12 @@ StScrollBar {
background-gradient-start: rgba(255, 255, 255, 0.05);
background-gradient-end: transparent;
background-gradient-direction: horizontal;
- border-radius: 15px 0px 0px 15px; }
+ border-radius: 24px 0px 0px 24px; }
.page-navigation-hint.previous:ltr, .page-navigation-hint.next:rtl {
background-gradient-start: transparent;
background-gradient-end: rgba(255, 255, 255, 0.05);
background-gradient-direction: horizontal;
- border-radius: 0px 15px 15px 0px; }
+ border-radius: 0px 24px 24px 0px; }
.page-navigation-arrow {
margin: 6px;
@@ -1674,7 +2056,6 @@ StScrollBar {
.caps-lock-warning-label {
text-align: center;
padding-bottom: 8px;
- font-size: 9pt;
color: #fd7d00; }
/* Workspace animation */
@@ -1686,18 +2067,9 @@ StScrollBar {
background-color: rgba(39, 119, 255, 0.5);
border: 1px solid #2777ff; }
-.tile-preview-left.on-primary {
- border-radius: 9px 0 0 0; }
-
-.tile-preview-right.on-primary {
- border-radius: 0 9px 0 0; }
-
-.tile-preview-left.tile-preview-right.on-primary {
- border-radius: 9px 9px 0 0; }
-
/* On-screen Keyboard */
#keyboard {
- background-color: rgba(242, 242, 242, 0.9);
+ background-color: rgba(26, 28, 35, 0.96);
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1); }
#keyboard .page-indicator {
padding: 6px; }
@@ -1710,124 +2082,107 @@ StScrollBar {
spacing: 4px; }
.keyboard-key {
- color: #5c616c;
- background-color: white;
- border-color: #d1d1d1;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3);
font-size: 15pt;
+ font-weight: bold;
min-height: 1.2em;
min-width: 1.2em;
border-width: 1px;
border-style: solid;
- border-radius: 11px; }
+ border-radius: 12px;
+ box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
+ color: white;
+ background-color: #363a48; }
.keyboard-key:focus {
- color: #5c616c;
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3);
+ color: white;
+ background-color: #35415b;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
- .keyboard-key:hover, .keyboard-key:checked {
- color: #5c616c;
- background-color: white;
- border-color: #d1d1d1;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3); }
+ .keyboard-key:focus:hover {
+ background-color: #3f4b68;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .keyboard-key:focus:active {
+ background-color: #434f6d;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .keyboard-key:hover {
+ color: white;
+ background-color: #3f4454; }
.keyboard-key:active {
- color: #5c616c;
- background-color: #f7f7f7;
- border-color: #d1d1d1;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
+ color: white;
+ background-color: #464b5d; }
+ .keyboard-key:checked {
+ color: white;
+ background-color: #51576b; }
.keyboard-key:grayed {
background-color: #f7f7f7;
color: white;
border-color: black; }
.keyboard-key.default-key {
- color: #5c616c;
- background-color: #1e2128;
- border-color: black;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3); }
- .keyboard-key.default-key:hover, .keyboard-key.default-key:checked {
- color: #5c616c;
- background-color: #292c37;
- border-color: black;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3); }
+ color: white;
+ background-color: #4c5266;
+ border-radius: 12px; }
+ .keyboard-key.default-key:hover {
+ color: white;
+ background-color: #555b71; }
.keyboard-key.default-key:active {
- color: #5c616c;
- background-color: #111217;
- border-color: black;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
+ color: white;
+ background-color: #5b627a; }
+ .keyboard-key.default-key:checked {
+ color: white;
+ background-color: #666e89; }
.keyboard-key.enter-key {
color: #ffffff;
background-color: #3681ff;
- border-color: #004bca;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3); }
- .keyboard-key.enter-key:hover, .keyboard-key.enter-key:checked {
- color: #5c616c;
- background-color: #5f9aff;
- border-color: #005efd;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3); }
+ border-radius: 12px;
+ color: white; }
+ .keyboard-key.enter-key:hover {
+ color: #ffffff;
+ background-color: #4b8eff; }
.keyboard-key.enter-key:active {
- color: #5c616c;
- background-color: #0e67ff;
- border-color: #0047c0;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
+ color: #ffffff;
+ background-color: #5a97ff; }
+ .keyboard-key.enter-key:checked {
+ color: #ffffff;
+ background-color: #74a7ff; }
.keyboard-key.shift-key-uppercase {
- color: #2777ff; }
+ background-color: #5b627a;
+ color: #303340; }
+ .keyboard-key.shift-key-uppercase:hover {
+ background-color: #666e89;
+ color: #3b3f4e; }
.keyboard-key StIcon {
- icon-size: 1.125em; }
+ icon-size: 24px; }
.keyboard-subkeys {
- color: white;
-arrow-border-radius: 16px;
-arrow-background-color: #303340;
-arrow-border-width: 1px;
-arrow-border-color: #43495a;
-arrow-base: 20px;
-arrow-rise: 10px;
- -boxpointer-gap: 6px; }
+ -boxpointer-gap: 6px;
+ padding: 6px; }
.keyboard-subkeys .keyboard-key {
- color: #5c616c;
- background-color: white;
- border-color: #d1d1d1;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3);
- border-radius: 8px; }
+ color: white;
+ background-color: #363a48;
+ border-radius: 12px; }
.keyboard-subkeys .keyboard-key:focus {
- color: #5c616c;
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3);
+ color: white;
+ background-color: #35415b;
box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
- .keyboard-subkeys .keyboard-key:hover, .keyboard-subkeys .keyboard-key:checked {
- color: #5c616c;
- background-color: white;
- border-color: #d1d1d1;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3); }
+ .keyboard-subkeys .keyboard-key:focus:hover {
+ background-color: #3f4b68;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .keyboard-subkeys .keyboard-key:focus:active {
+ background-color: #434f6d;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .keyboard-subkeys .keyboard-key:hover {
+ color: white;
+ background-color: #3f4454; }
.keyboard-subkeys .keyboard-key:active {
- color: #5c616c;
- background-color: #f7f7f7;
- border-color: #d1d1d1;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
+ color: white;
+ background-color: #464b5d; }
+ .keyboard-subkeys .keyboard-key:checked {
+ color: white;
+ background-color: #51576b; }
.emoji-page .keyboard-key {
background-color: transparent;
@@ -1841,42 +2196,82 @@ StScrollBar {
.word-suggestions {
font-size: 13pt;
spacing: 12px;
- min-height: 20pt; }
+ min-height: 20pt;
+ padding: 12px;
+ color: white; }
+ .word-suggestions StButton {
+ margin: 0 3px;
+ min-width: 32px;
+ border-radius: 6px;
+ padding: 6px 18px;
+ background-color: transparent;
+ background-image: none; }
+ .word-suggestions StButton:focus {
+ color: white;
+ background-color: #35415b;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
+ .word-suggestions StButton:focus:hover {
+ background-color: #3f4b68;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .word-suggestions StButton:focus:active {
+ background-color: #434f6d;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .word-suggestions StButton:hover {
+ color: white;
+ background-color: #3f4454; }
+ .word-suggestions StButton:active {
+ color: white;
+ background-color: #464b5d; }
+ .word-suggestions StButton:checked {
+ color: white;
+ background-color: #51576b; }
/* Looking Glass */
#LookingGlassDialog {
background-color: #303340;
+ border-radius: 0 0 16px 16px;
+ border-top-width: 0;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ color: white;
+ padding: 6px;
spacing: 6px;
- padding: 4px;
- border: 1px solid rgba(255, 255, 255, 0.2);
- border-radius: 8px;
- color: white; }
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); }
#LookingGlassDialog > #Toolbar {
border: none;
- border-radius: 8px;
- background-color: #303340; }
+ padding: 6px;
+ border-radius: 0;
+ background-color: transparent;
+ spacing: 6px; }
+ #LookingGlassDialog > #Toolbar .lg-toolbar-button {
+ padding: 6px 12px; }
+ #LookingGlassDialog > #Toolbar .lg-toolbar-button > StIcon {
+ icon-size: 1.09em; }
#LookingGlassDialog .labels {
spacing: 6px; }
#LookingGlassDialog .notebook-tab {
-natural-hpadding: 12px;
- -minimum-hpadding: 6px;
+ -minimum-hpadding: 12px;
font-weight: bold;
+ padding: 6px 12px;
color: #d9d9d9;
transition-duration: 100ms;
- padding-left: .3em;
- padding-right: .3em;
- border-bottom-width: 2px; }
+ box-shadow: none;
+ border: none;
+ border-radius: 6px;
+ background-color: transparent; }
#LookingGlassDialog .notebook-tab:hover {
- color: white; }
+ color: white;
+ background-color: rgba(255, 255, 255, 0.05); }
#LookingGlassDialog .notebook-tab:selected {
- border-bottom-width: 2px;
- box-shadow: inset 0 -2px 0 0 #4187ff;
- color: white; }
+ color: white;
+ background-color: rgba(255, 255, 255, 0.1); }
#LookingGlassDialog StBoxLayout#EvalBox {
padding: 4px;
- spacing: 6px; }
+ spacing: 6px;
+ padding: 6px; }
#LookingGlassDialog StBoxLayout#ResultsArea {
- spacing: 6px; }
+ spacing: 6px;
+ padding: 6px; }
.lg-dialog StEntry {
background-color: rgba(59, 63, 78, 0.6);
@@ -1894,14 +2289,13 @@ StScrollBar {
color: #0047c0; }
.lg-dialog .actor-link {
- color: #ccc; }
+ color: #aeb0b6; }
.lg-dialog .actor-link:hover {
- color: white; }
+ color: #e4e4e6; }
.lg-dialog .actor-link:active {
- color: #999999; }
+ color: #787c86; }
.lg-completions-text {
- font-size: .9em;
font-style: italic; }
.lg-obj-inspector-title {
@@ -1915,20 +2309,42 @@ StScrollBar {
border: 1px solid #ffffff; }
#lookingGlassExtensions {
- padding: 4px; }
+ padding: 6px; }
.lg-extensions-list {
- padding: 4px;
+ padding: 6px;
spacing: 6px; }
.lg-extension {
- border: 1px solid #0d0d0d;
- background-color: #3b3f4e;
+ padding: 12px;
border-radius: 8px;
- padding: 4px; }
-
-.lg-extension-name {
- font-weight: bold; }
+ margin: 4px;
+ box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
+ border: 1px solid transparent;
+ color: #5c616c;
+ background-color: white;
+ border-color: #d1d1d1; }
+ .lg-extension:focus {
+ border: 1px solid transparent;
+ color: #5c616c;
+ background-color: #e9f1ff;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
+ .lg-extension:focus:hover {
+ background-color: #e9f1ff;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .lg-extension:focus:active {
+ background-color: #e9f1ff;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .lg-extension:hover {
+ border: 1px solid transparent;
+ color: #5c616c;
+ background-color: #fafafb;
+ border-color: #d1d1d1; }
+ .lg-extension:active {
+ border: 1px solid transparent;
+ color: #5c616c;
+ background-color: #f5f6f6;
+ border-color: #d1d1d1; }
.lg-extension-meta {
spacing: 6px; }
@@ -1939,6 +2355,19 @@ StScrollBar {
border-radius: 8px;
padding: 6px; }
+.lg-debug-flag-button {
+ color: #5c616c; }
+ .lg-debug-flag-button StLabel {
+ padding: 6px, 12px; }
+ .lg-debug-flag-button:hover {
+ color: #8f949f; }
+ .lg-debug-flag-button:active {
+ color: #2d3035; }
+
+.lg-debug-flags-header {
+ padding-top: 12px;
+ padding: 6px; }
+
/* Login Dialog */
.login-dialog-banner-view {
padding-top: 24px;
@@ -1970,56 +2399,38 @@ StScrollBar {
border-color: #1c1e25; }
.login-dialog .modal-dialog-button:insensitive,
.unlock-dialog .modal-dialog-button:insensitive {
- color: #aeb0b6;
+ border: 1px solid transparent;
+ color: rgba(92, 97, 108, 0.5);
+ background-color: rgba(92, 97, 108, 0.05);
border-color: #d9d9d9;
- background-color: #fdfdfd;
- box-shadow: none;
- text-shadow: none;
- icon-shadow: none;
border-color: #1c1e25;
background-color: #1c1e25;
color: rgba(255, 255, 255, 0.7); }
.login-dialog .modal-dialog-button:default,
.unlock-dialog .modal-dialog-button:default {
- color: #ffffff;
- background-color: #3681ff;
- border-color: #004bca;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3);
- border-color: #2777ff; }
+ border: 1px solid transparent;
+ background-color: #2777ff;
+ color: #ffffff; }
+ .login-dialog .modal-dialog-button:default:focus,
+ .unlock-dialog .modal-dialog-button:default:focus {
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
.login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus,
.unlock-dialog .modal-dialog-button:default:hover,
.unlock-dialog .modal-dialog-button:default:focus {
- color: #ffffff;
- background-color: #5091ff;
- border-color: #0058ee;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3);
- background-color: #4187ff;
- border-color: #4187ff; }
+ background-color: #2a76f8;
+ color: white; }
.login-dialog .modal-dialog-button:default:active,
.unlock-dialog .modal-dialog-button:default:active {
- color: #ffffff;
- background-color: #186eff;
- border-color: #004bca;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none;
- background-color: #0e67ff;
- border-color: #0e67ff; }
+ background-color: #0361ff;
+ color: #ededed; }
.login-dialog .modal-dialog-button:default:insensitive,
.unlock-dialog .modal-dialog-button:default:insensitive {
- color: #aeb0b6;
+ border: 1px solid transparent;
+ color: rgba(92, 97, 108, 0.5);
+ background-color: rgba(92, 97, 108, 0.05);
border-color: #d9d9d9;
- background-color: #fdfdfd;
- box-shadow: none;
- text-shadow: none;
- icon-shadow: none;
- border-color: #005af3;
- background-color: #005af3;
- color: rgba(255, 255, 255, 0.7); }
+ background-color: rgba(39, 119, 255, 0.5);
+ color: rgba(255, 255, 255, 0.5); }
.login-dialog .cancel-button,
.login-dialog .switch-user-button,
.login-dialog .login-dialog-session-list-button,
@@ -2067,11 +2478,39 @@ StScrollBar {
color: white; }
.login-dialog-not-listed-label {
- font-size: 9pt;
font-weight: bold;
color: #b3b3b3;
padding-top: 1em; }
+.login-dialog-auth-list-view {
+ -st-vfade-offset: 1em; }
+
+.login-dialog-auth-list {
+ spacing: 6px;
+ margin-left: 2em; }
+
+.login-dialog-auth-list-title {
+ margin-left: 2em; }
+
+.login-dialog-auth-list-item {
+ border-radius: 12px;
+ padding: 6px;
+ color: #b3b3b3; }
+ .login-dialog-auth-list-item:focus, .login-dialog-auth-list-item:selected {
+ background-color: #2777ff;
+ color: #ffffff; }
+
+.login-dialog-auth-list-label {
+ font-size: 12pt;
+ font-weight: bold;
+ padding-left: 15px; }
+ .login-dialog-auth-list-label:ltr {
+ padding-left: 14px;
+ text-align: left; }
+ .login-dialog-auth-list-label:rtl {
+ padding-right: 14px;
+ text-align: right; }
+
.login-dialog-user-list-view {
-st-vfade-offset: 1em; }
@@ -2137,6 +2576,20 @@ StScrollBar {
font-size: 11pt;
padding-top: 1em; }
+.unlock-dialog StEntry {
+ border: none !important; }
+ .unlock-dialog StEntry:focus {
+ background-color: rgba(92, 97, 108, 0.1); }
+ .unlock-dialog StEntry:insensitive {
+ color: rgba(92, 97, 108, 0.5);
+ background-color: rgba(92, 97, 108, 0.05); }
+
+.unlock-dialog .cancel-button,
+.unlock-dialog .switch-user-button,
+.unlock-dialog .login-dialog-session-list-button {
+ border-color: transparent;
+ background-color: rgba(92, 97, 108, 0.1); }
+
/* Screen Shield */
.unlock-dialog-clock {
color: white;
@@ -2147,8 +2600,7 @@ StScrollBar {
.unlock-dialog-clock-time {
font-size: 64pt;
- padding-top: 42px;
- font-feature-settings: "tnum"; }
+ padding-top: 42px; }
.unlock-dialog-clock-date {
font-size: 16pt;
@@ -2159,7 +2611,7 @@ StScrollBar {
padding-top: 48px; }
.unlock-dialog-notifications-container {
- margin: 12px 0;
+ margin: 12px;
spacing: 6px;
width: 23em;
background-color: transparent; }
@@ -2168,29 +2620,28 @@ StScrollBar {
padding-bottom: 0; }
.unlock-dialog-notifications-container .notification,
.unlock-dialog-notifications-container .unlock-dialog-notification-source {
- padding: 12px 6px;
+ padding: 12px 16px;
border: none;
- background-color: rgba(48, 51, 64, 0.3);
+ background-color: rgba(255, 255, 255, 0.1);
color: white;
border-radius: 16px; }
.unlock-dialog-notifications-container .notification.critical,
.unlock-dialog-notifications-container .unlock-dialog-notification-source.critical {
- background-color: rgba(48, 51, 64, 0.9); }
+ background-color: rgba(255, 255, 255, 0.2); }
.unlock-dialog-notification-label {
- padding: 0px 0px 0px 12px; }
+ padding: 0 0 0 12px; }
.unlock-dialog-notification-count-text {
- weight: bold;
- padding: 0 6px;
- color: #303340;
- background-color: rgba(255, 255, 255, 0.3);
- border-radius: 99px;
- margin-right: 12px; }
+ font-weight: bold;
+ padding: 0 12px;
+ color: white;
+ background-color: rgba(255, 255, 255, 0.1);
+ border-radius: 99px; }
.screen-shield-background {
background: black;
- box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6); }
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); }
#lockDialogGroup {
background-color: #272a34; }
@@ -2202,80 +2653,145 @@ StScrollBar {
#unlockDialogNotifications StButton#vhandle:active, #unlockDialogNotifications StButton#hhandle:active {
background-color: rgba(39, 119, 255, 0.5); }
+.icon-dropshadow {
+ icon-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); }
+
/* OSD */
-.osd-window, .resize-popup, .switcher-list, .workspace-switcher-container {
- font-weight: bold;
- background-color: #ffffff;
- color: #5c616c;
- border: 1px solid rgba(0, 0, 0, 0.15);
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); }
- .osd-window StIcon, .resize-popup StIcon, .switcher-list StIcon, .workspace-switcher-container StIcon {
- color: black;
- icon-shadow: 0 0 6px rgba(0, 0, 0, 0.4); }
+.osd-window, .resize-popup, .switcher-list, .workspace-switcher, .screenshot-ui-panel {
+ background-color: rgba(48, 51, 64, 0.96);
+ box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.2); }
-.osd-window .level {
- -barlevel-background-color: rgba(0, 0, 0, 0.3);
- -barlevel-active-background-color: black; }
-
-/* Slider */
-.slider {
- height: 1.1em;
- -barlevel-height: .35em;
- -barlevel-background-color: #d9d9d9;
- -barlevel-border-color: #2777ff;
- -barlevel-active-background-color: #2777ff;
- -barlevel-overdrive-color: #d41919;
- -barlevel-overdrive-separator-width: 0.1em;
- -barlevel-border-width: 0;
- -slider-handle-radius: 0; }
-
-/* Check Boxes */
-.check-box StBin {
- background-image: url("assets/checkbox-off.svg"); }
-
-.check-box:focus StBin {
- background-image: url("assets/checkbox-off-focused.svg"); }
-
-.check-box:checked StBin {
- background-image: url("assets/checkbox.svg"); }
-
-.check-box:focus:checked StBin {
- background-image: url("assets/checkbox-focused.svg"); }
+.screenshot-ui-type-button, .screenshot-ui-show-pointer-button {
+ border: 1px solid transparent;
+ background-color: transparent;
+ background-color: none;
+ border-color: transparent;
+ border: 0 !important; }
+ .screenshot-ui-type-button:insensitive, .screenshot-ui-show-pointer-button:insensitive {
+ border: 1px solid transparent;
+ color: rgba(92, 97, 108, 0.5);
+ background-color: rgba(92, 97, 108, 0.05);
+ border-color: #d9d9d9;
+ background-color: transparent; }
+ .screenshot-ui-type-button:insensitive, .screenshot-ui-show-pointer-button:insensitive {
+ border: 1px solid transparent;
+ background-color: transparent;
+ background-color: none;
+ border-color: transparent; }
+ .screenshot-ui-type-button:insensitive:insensitive, .screenshot-ui-show-pointer-button:insensitive:insensitive {
+ border: 1px solid transparent;
+ color: rgba(92, 97, 108, 0.5);
+ background-color: rgba(92, 97, 108, 0.05);
+ border-color: #d9d9d9;
+ background-color: transparent; }
+ .screenshot-ui-type-button:focus, .screenshot-ui-show-pointer-button:focus {
+ border: 1px solid transparent;
+ color: white;
+ background-color: #394560;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
+ .screenshot-ui-type-button:focus:hover, .screenshot-ui-show-pointer-button:focus:hover {
+ background-color: #3f4b68;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .screenshot-ui-type-button:focus:active, .screenshot-ui-show-pointer-button:focus:active {
+ background-color: #455170;
+ box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.7); }
+ .screenshot-ui-type-button:hover, .screenshot-ui-show-pointer-button:hover {
+ border: 1px solid transparent;
+ color: white;
+ background-color: #414554;
+ border-color: #181a20; }
+ .screenshot-ui-type-button:active, .screenshot-ui-show-pointer-button:active {
+ border: 1px solid transparent;
+ color: white;
+ background-color: #464b59;
+ border-color: #08090b; }
+ .screenshot-ui-type-button:outlined, .screenshot-ui-show-pointer-button:outlined, .screenshot-ui-type-button:checked, .screenshot-ui-show-pointer-button:checked {
+ border: 1px solid transparent;
+ color: white;
+ background-color: #4c505e; }
+ .screenshot-ui-type-button:outlined:hover, .screenshot-ui-show-pointer-button:outlined:hover, .screenshot-ui-type-button:checked:hover, .screenshot-ui-show-pointer-button:checked:hover {
+ background-color: #555b71; }
+ .screenshot-ui-type-button:outlined:active, .screenshot-ui-show-pointer-button:outlined:active, .screenshot-ui-type-button:checked:active, .screenshot-ui-show-pointer-button:checked:active {
+ background-color: #5b627a; }
/* Switches */
.toggle-switch {
- background-image: url("assets/toggle-off.svg"); }
- .toggle-switch:checked {
- background-image: url("assets/toggle-on.svg"); }
+ height: 22px;
+ width: 44px; }
-.popup-menu-item.selected, .popup-menu-item:active {
- background-color: #eaebec;
- color: #5c616c; }
+/* Slider */
+.slider {
+ -barlevel-background-color: #d9d9d9;
+ -barlevel-border-width: 0;
+ -slider-handle-radius: 0; }
-/* App Switcher */
-.switcher-list .item-box:outlined {
+/* Popovers/Menus */
+.popup-menu-boxpointer, .candidate-popup-boxpointer {
+ -arrow-rise: 6px; }
+
+.popup-menu-content, .candidate-popup-content {
+ padding: 4px;
+ box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.2);
+ background-color: #fafafa; }
+
+.popup-menu-item {
+ border: 1px solid transparent;
+ border-bottom: 0;
+ margin-top: 0;
+ margin-bottom: 0;
+ padding-top: 8px;
+ padding-bottom: 8px; }
+ .popup-menu-item:checked {
+ border-color: #d9d9d9;
+ background-color: #ffffff !important; }
+
+.popup-sub-menu {
+ background-color: #ffffff;
+ border: 1px solid #d9d9d9;
+ border-top: 0; }
+ .popup-sub-menu .popup-menu-item {
+ padding-top: 7px;
+ padding-bottom: 7px; }
+ .popup-sub-menu .popup-menu-item:focus, .popup-sub-menu .popup-menu-item:hover {
+ background-color: #f2f2f2 !important; }
+ .popup-sub-menu .popup-menu-item:checked {
+ background-color: #e8e8e8 !important; }
+ .popup-sub-menu .popup-menu-item:active {
+ background-color: #ededed !important; }
+
+.popup-separator-menu-item {
+ margin: 6px 0; }
+
+/* Message List */
+.message-list .message-list-placeholder,
+.message-list-controls {
+ font-weight: normal; }
+
+.message-list-controls {
+ spacing: 12px;
+ font-size: 10pt; }
+
+.message .message-content {
padding: 6px;
- border: 3px solid #2777ff; }
+ spacing: 0; }
-.switcher-list .item-box:selected {
- background-color: #2777ff;
- color: #ffffff;
- text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
+.message .message-title {
+ padding-top: .5em; }
-/* Workspace Switcher */
-.ws-switcher-box {
- border: none; }
+.message .message-secondary-bin > .event-time {
+ padding-bottom: .5em; }
-.workspace-switcher-container {
- padding: 7px; }
+/* Notifications & Message Tray */
+.notification-banner {
+ box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.2); }
/* Window Picker */
.window-caption {
color: black;
background-color: white;
- box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4); }
+ box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.2); }
-.window-close {
+.window-close, .screenshot-ui-close-button {
background-image: url("assets/close-window.svg");
background-size: 32px;
background-color: transparent;
@@ -2284,43 +2800,57 @@ StScrollBar {
height: 32px;
width: 32px;
transition-duration: .2s; }
- .window-close:hover {
+ .window-close:hover, .screenshot-ui-close-button:hover {
background-image: url("assets/close-window-hover.svg");
background-color: transparent; }
- .window-close:active {
+ .window-close:active, .screenshot-ui-close-button:active {
background-image: url("assets/close-window-active.svg");
background-color: transparent;
color: transparent;
transition-duration: 0s; }
-/* Tiled window previews */
-.tile-preview-left.on-primary,
-.tile-preview-right.on-primary,
-.tile-preview-left.tile-preview-right.on-primary {
- border-radius: 0; }
+/* Workspace Switcher */
+.ws-switcher-indicator {
+ padding: 2px;
+ margin: 10px; }
+ .ws-switcher-indicator:active {
+ padding: 4px;
+ margin: 8px; }
-/* TOP BAR */
+/* Screenshot UI */
+.screenshot-ui-shot-cast-container {
+ background-color: #383d4b; }
+
+.screenshot-ui-shot-cast-button {
+ background-color: transparent; }
+ .screenshot-ui-shot-cast-button:hover, .screenshot-ui-shot-cast-button:focus {
+ background-color: #464b5d; }
+ .screenshot-ui-shot-cast-button:active {
+ background-color: #51576b; }
+ .screenshot-ui-shot-cast-button:checked {
+ background-color: white;
+ color: black; }
+
+/* Top Bar */
#panel {
background: rgba(255, 255, 255, 0.8);
- text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
- #panel .popup-menu-arrow {
- width: 0; }
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
#panel StIcon {
- icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
+ icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
#panel.unlock-screen, #panel.login-screen, #panel.lock-screen, #panel:overview {
background-color: transparent; }
#panel.unlock-screen .panel-button, #panel.unlock-screen .panel-button:hover, #panel.unlock-screen .panel-button:active, #panel.unlock-screen .panel-button:focus, #panel.unlock-screen .panel-button:overview, #panel.unlock-screen .panel-button:checked, #panel.login-screen .panel-button, #panel.login-screen .panel-button:hover, #panel.login-screen .panel-button:active, #panel.login-screen .panel-button:focus, #panel.login-screen .panel-button:overview, #panel.login-screen .panel-button:checked, #panel.lock-screen .panel-button, #panel.lock-screen .panel-button:hover, #panel.lock-screen .panel-button:active, #panel.lock-screen .panel-button:focus, #panel.lock-screen .panel-button:overview, #panel.lock-screen .panel-button:checked, #panel:overview .panel-button, #panel:overview .panel-button:hover, #panel:overview .panel-button:active, #panel:overview .panel-button:focus, #panel:overview .panel-button:overview, #panel:overview .panel-button:checked {
color: white; }
- #panel .panel-corner {
- -panel-corner-radius: 0; }
#panel .panel-button {
color: black; }
- #panel .panel-button:active, #panel .panel-button:focus, #panel .panel-button:overview, #panel .panel-button:checked {
+ #panel .panel-button:hover, #panel .panel-button:active, #panel .panel-button:focus, #panel .panel-button:overview, #panel .panel-button:checked {
color: black;
box-shadow: inset 0 0 0 100px white; }
- #panel .panel-button.clock-display:active, #panel .panel-button.clock-display:overview, #panel .panel-button.clock-display:focus, #panel .panel-button.clock-display:checked {
+ #panel .panel-button.screen-recording-indicator {
+ color: white; }
+ #panel .panel-button.clock-display:hover, #panel .panel-button.clock-display:active, #panel .panel-button.clock-display:overview, #panel .panel-button.clock-display:focus, #panel .panel-button.clock-display:checked {
box-shadow: none; }
- #panel .panel-button.clock-display:active .clock, #panel .panel-button.clock-display:overview .clock, #panel .panel-button.clock-display:focus .clock, #panel .panel-button.clock-display:checked .clock {
+ #panel .panel-button.clock-display:hover .clock, #panel .panel-button.clock-display:active .clock, #panel .panel-button.clock-display:overview .clock, #panel .panel-button.clock-display:focus .clock, #panel .panel-button.clock-display:checked .clock {
box-shadow: inset 0 0 0 100px white; }
#panel #panelActivities.panel-button {
margin-left: .4em; }
@@ -2334,199 +2864,21 @@ StScrollBar {
background-image: url("assets/view-grid-symbolic-dark.svg"); }
/* Date/Time Menu */
-#calendarArea {
- background-image: url("assets/kali-dragon.svg");
- background-size: contain; }
+.datemenu-today-button:insensitive {
+ color: inherit; }
-.events-section-title {
- padding: 1em; }
+.datemenu-today-button .day-label {
+ font-weight: normal; }
-.datemenu-today-button {
- border-width: 1px;
- border-style: solid;
- border-radius: 10px;
- margin: 4px;
- border-color: transparent;
- background-color: transparent;
- background-image: none;
- box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
- text-shadow: none;
- icon-shadow: none; }
- .datemenu-today-button:focus {
- color: #5c616c;
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3);
- box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
- .datemenu-today-button:hover {
- color: #5c616c;
- background-color: white;
- border-color: #d1d1d1;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3);
- box-shadow: none; }
- .datemenu-today-button:active {
- color: #5c616c;
- background-color: #f7f7f7;
- border-color: #d1d1d1;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
- .datemenu-today-button .date-label {
- font-size: 1.5em;
- font-weight: 300; }
-
-.calendar {
- border-width: 1px;
- border-style: solid;
- border-radius: 10px;
- margin: 4px;
- border-color: transparent;
- background-color: transparent;
- background-image: none;
- box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
- text-shadow: none;
- icon-shadow: none; }
- .calendar:focus {
- color: #5c616c;
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3);
- box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
- .calendar:hover {
- color: #5c616c;
- background-color: white;
- border-color: #d1d1d1;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3);
- box-shadow: none; }
- .calendar:active {
- color: #5c616c;
- background-color: #f7f7f7;
- border-color: #d1d1d1;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
- .calendar .pager-button:hover, .calendar .pager-button:focus {
- background-color: #eaebec; }
- .calendar .calendar-day-base:hover, .calendar .calendar-day-base:focus, .calendar .calendar-day-base:active, .calendar .calendar-day-base:selected {
- color: #5c616c;
- background-color: #eaebec; }
- .calendar .calendar-today:hover, .calendar .calendar-today:focus {
- background-color: #eaebec;
- color: #5c616c; }
- .calendar .calendar-today:active, .calendar .calendar-today:selected {
- background: #2777ff;
- color: #ffffff; }
- .calendar .calendar-today:active:hover, .calendar .calendar-today:active:focus, .calendar .calendar-today:selected:hover, .calendar .calendar-today:selected:focus {
- background-color: #eaebec;
- color: #5c616c; }
-
-/* Events */
-.events-button {
- border-width: 1px;
- border-style: solid;
- border-radius: 10px;
- margin: 4px;
- border-color: transparent;
- background-color: transparent;
- background-image: none;
- box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
- text-shadow: none;
- icon-shadow: none; }
- .events-button:focus {
- color: #5c616c;
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3);
- box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
- .events-button:hover {
- color: #5c616c;
- background-color: white;
- border-color: #d1d1d1;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3);
- box-shadow: none; }
- .events-button:active {
- color: #5c616c;
- background-color: #f7f7f7;
- border-color: #d1d1d1;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
-
-/* World clocks */
-.world-clocks-button {
- border-width: 1px;
- border-style: solid;
- border-radius: 10px;
- margin: 4px;
- border-color: transparent;
- background-color: transparent;
- background-image: none;
- box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
- text-shadow: none;
- icon-shadow: none; }
- .world-clocks-button:focus {
- color: #5c616c;
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3);
- box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
- .world-clocks-button:hover {
- color: #5c616c;
- background-color: white;
- border-color: #d1d1d1;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3);
- box-shadow: none; }
- .world-clocks-button:active {
- color: #5c616c;
- background-color: #f7f7f7;
- border-color: #d1d1d1;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
-
-.weather-button {
- border-width: 1px;
- border-style: solid;
- border-radius: 10px;
- margin: 4px;
- border-color: transparent;
- background-color: transparent;
- background-image: none;
- box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
- text-shadow: none;
- icon-shadow: none; }
- .weather-button:focus {
- color: #5c616c;
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3);
- box-shadow: inset 0 0 0 2px rgba(39, 119, 255, 0.6); }
- .weather-button:hover {
- color: #5c616c;
- background-color: white;
- border-color: #d1d1d1;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
- text-shadow: 0 1px rgba(255, 255, 255, 0.3);
- icon-shadow: 0 1px rgba(255, 255, 255, 0.3);
- box-shadow: none; }
- .weather-button:active {
- color: #5c616c;
- background-color: #f7f7f7;
- border-color: #d1d1d1;
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none; }
+.datemenu-today-button .date-label {
+ font-weight: lighter; }
/* Search */
.search-entry {
color: black;
- text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9);
+ text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
font-weight: bold;
background-color: rgba(255, 255, 255, 0.1);
- border-radius: 999px;
font-size: 1.1em;
transition-duration: 200ms; }
.search-entry StLabel.hint-text {
@@ -2548,49 +2900,30 @@ StScrollBar {
icon-shadow: none; }
.search-entry .search-entry-icon {
color: white;
- icon-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9); }
+ icon-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); }
.search-section-content {
background-color: rgba(255, 255, 255, 0.1);
- box-shadow: none;
border: none; }
-.search-provider-icon .list-search-provider-content .list-search-provider-details {
+.search-provider-icon .list-search-provider-details {
font-weight: bold; }
-/* DASHBOARD */
+.list-search-result .list-search-result-description {
+ color: rgba(255, 255, 255, 0.8); }
+
+/* Dash */
#dash {
color: white;
- background-color: transparent;
- border: none;
- border-color: transparent; }
- #dash .overview-icon StIcon {
- color: white;
- icon-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
+ icon-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
-.dash-background {
+.dash-background, .dash-separator {
background: rgba(255, 255, 255, 0.1); }
-.dash-separator {
- background: rgba(255, 255, 255, 0.1); }
-
-.show-apps:focus .overview-icon, .show-apps:checked .overview-icon {
- background-color: rgba(255, 255, 255, 0.1);
- color: black; }
-
-/* App Folders */
-.app-well-app.app-folder, .app-well-app.app-folder .overview-icon.overview-icon-with-label {
- background-color: rgba(255, 255, 255, 0.1); }
-
-.app-well-app.app-folder:checked {
- background: black; }
+/* App Grid */
+.app-well-app, .grid-search-result {
+ color: white; }
.app-folder-dialog {
background: black;
box-shadow: 0 0 20px #030303; }
- .app-folder-dialog .folder-name-container .edit-folder-button, .app-folder-dialog .folder-name-container .edit-folder-button:hover, .app-folder-dialog .folder-name-container .edit-folder-button:active {
- background: white;
- color: black; }
-
-.app-folder-dialog-container {
- width: 720px; }
diff --git a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss
index 0e30d94f..0d6f1969 100644
--- a/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss
+++ b/src/themes/Kali/sass/gnome-shell/_common-tweaks.scss
@@ -1,109 +1,108 @@
$overview_transparent_bg: transparentize(white, .9);
-$dialog_box_shadow: 0 2px 8px 0 transparentize(black, .6);
+$dialog_box_shadow: 0 2px 6px -2px transparentize(black, .8);
+
+// Dropshadow for large icons
+.icon-dropshadow {
+ icon-shadow: 0 1px 5px $shadow_color;
+}
/* OSD */
-$_osd_color: if($variant=='light', black, $fg_color);
%osd_panel {
- font-weight: bold;
- background-color: $bg_color;
- color: $fg_color;
- border: 1px solid if($variant=='light', transparentize(black, 0.85), $borders_color);
- box-shadow: 0 4px 10px transparentize(black, .8);
-
- StIcon {
- color: $_osd_color;
- icon-shadow: 0 0 6px transparentize(black, .6);
- }
+ background-color: transparentize($osd_bg_color, 0.04);
+ box-shadow: $dialog_box_shadow;
}
-.osd-window {
- .level {
- -barlevel-background-color: transparentize($_osd_color, if($variant=='light', 0.7, 0.9));
- -barlevel-active-background-color: $_osd_color;
- }
-}
-
-/* Slider */
-
-.slider {
- height: 1.1em;
- -barlevel-height: .35em;
- -barlevel-background-color: $borders_color;
- -barlevel-border-color: $selected_bg_color;
- -barlevel-active-background-color: $selected_bg_color;
- -barlevel-overdrive-color: $destructive_color;
- -barlevel-overdrive-separator-width: 0.1em;
- -barlevel-border-width: 0;
-
- -slider-handle-radius: 0;
-}
-
-/* Check Boxes */
-
-.check-box {
- StBin {
- background-image: if($variant == 'light', url("assets/checkbox-off.svg"),
- url("assets/checkbox-off-dark.svg"));
- }
-
- &:focus StBin { background-image: if($variant == 'light', url("assets/checkbox-off-focused.svg"),
- url("assets/checkbox-off-focused-dark.svg")); }
- &:checked StBin { background-image: if($variant == 'light', url("assets/checkbox.svg"),
- url("assets/checkbox-dark.svg")); }
- &:focus:checked StBin { background-image: if($variant == 'light', url("assets/checkbox-focused.svg"),
- url("assets/checkbox-focused-dark.svg")); }
+// buttons on OSD elements
+// that are undecorated by default and use OSD colors
+%osd_button {
+ @include button(undecorated);
+ border: 0!important;
+ &:insensitive { @include button(undecorated, $tc:$osd_fg_color, $c:$osd_bg_color); }
+ &:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color); }
+ &:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color); }
+ &:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color); }
+ &:outlined, &:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color); }
}
/* Switches */
.toggle-switch {
- background-image: if($variant == 'light', url("assets/toggle-off.svg"),
- url("assets/toggle-off-dark.svg"));
- &:checked {
- background-image: if($variant == 'light', url("assets/toggle-on.svg"),
- url("assets/toggle-on-dark.svg"));
- }
+ height: 22px;
+ width: 44px;
+}
+
+/* Slider */
+.slider {
+ -barlevel-background-color: $borders_color;
+ -barlevel-border-width: 0;
+ -slider-handle-radius: 0;
+}
+
+/* Popovers/Menus */
+.popup-menu-boxpointer {
+ -arrow-rise: 6px;
+}
+
+.popup-menu-content {
+ padding: 4px;
+ box-shadow: $dialog_box_shadow;
+ background-color: $base_color;
}
-// menu items
.popup-menu-item {
- &.selected, &:active {
- background-color: $popover_hover_color;
- color: $fg_color;
- }
-}
+ border: 1px solid transparent;
+ border-bottom: 0;
+ margin-top: 0;
+ margin-bottom: 0;
+ padding-top: 8px;
+ padding-bottom: 8px;
-/* App Switcher */
-// switcher onscreen panel
-.switcher-list {
- .item-box {
- &:outlined {
- padding: 6px;
- border: 3px solid $selected_bg_color;
- }
-
- &:selected {
- background-color: $selected_bg_color;
- color: $selected_fg_color;
- text-shadow: 0 1px 4px transparentize(black, 0.6);
- }
+ &:checked {
+ border-color: $borders_color;
+ background-color: $bg_color!important;
}
}
-/* Workspace Switcher */
-.ws-switcher-box { border: none }
+.popup-sub-menu {
+ background-color: $bg_color;
+ border: 1px solid $borders_color;
+ border-top: 0;
-.workspace-switcher-container { padding: 7px; }
+ .popup-menu-item {
+ padding-top: 7px;
+ padding-bottom: 7px;
-// active workspace in the switcher
-.ws-switcher-active-up,
-.ws-switcher-active-down,
-.ws-switcher-active-left,
-.ws-switcher-active-right {
- //box-shadow: 0 0px 6px transparentize(black, .5);
+ &:focus, &:hover { background-color: $hover_bg_color!important; }
+ &:checked { background-color: $checked_bg_color!important; }
+ &:active { background-color: $active_bg_color!important; }
+ }
}
+.popup-separator-menu-item { margin: 6px 0; }
+
+/* Message List */
+.message-list .message-list-placeholder,
+.message-list-controls {
+ font-weight: normal;
+}
+
+.message-list-controls {
+ spacing: $base_padding * 2;
+ @include fontsize(10);
+}
+
+.message {
+ .message-content {
+ padding: $base_padding;
+ spacing: 0;
+ }
+ .message-title { padding-top: .5em; }
+ .message-secondary-bin > .event-time { padding-bottom: .5em; }
+}
+
+/* Notifications & Message Tray */
+.notification-banner { box-shadow: $dialog_box_shadow; }
+
/* Window Picker */
-
// Window titles
.window-caption {
color: black;
@@ -135,22 +134,37 @@ $_osd_color: if($variant=='light', black, $fg_color);
}
}
-/* Tiled window previews */
+/* Workspace Switcher */
+.ws-switcher-indicator {
+ padding: 2px;
+ margin: 10px;
-.tile-preview-left.on-primary,
-.tile-preview-right.on-primary,
-.tile-preview-left.tile-preview-right.on-primary{ border-radius: 0; }
+ &:active {
+ padding: 4px;
+ margin: 8px;
+ }
+}
-/* TOP BAR */
+/* Screenshot UI */
+.screenshot-ui-shot-cast-container {
+ background-color: lighten($osd_bg_color, 4%);
+}
+
+.screenshot-ui-shot-cast-button {
+ background-color: transparent;
+ &:hover, &:focus { background-color: lighten($osd_bg_color, 10%); }
+ &:active { background-color: lighten($osd_bg_color, 15%); }
+ &:checked { background-color: white; color: black; }
+}
+
+/* Top Bar */
#panel {
$_panel_bg: transparentize($bg_color, .2);
$_panel_fg: if($variant=='light', black, white);
- $_panel_text_shadow: 0 1px 2px transparentize(black, 0.5);
+ $_panel_text_shadow: 0 1px 2px transparentize(black, 0.7);
background: $_panel_bg;
text-shadow: $_panel_text_shadow;
- .popup-menu-arrow { width: 0; }
-
StIcon { icon-shadow: $_panel_text_shadow; }
&.unlock-screen,
@@ -163,19 +177,18 @@ $_osd_color: if($variant=='light', black, $fg_color);
}
}
- .panel-corner { -panel-corner-radius: 0; }
-
.panel-button {
color: $_panel_fg;
- &:active, &:focus, &:overview, &:checked {
+ &:hover, &:active, &:focus, &:overview, &:checked {
color: $_panel_fg;
box-shadow: inset 0 0 0 100px rgba(255, 255, 255, if($variant == 'light', 1, .2));
}
+ &.screen-recording-indicator { color: white; }
}
.panel-button.clock-display {
// Move highlight from .panel-button to .clock
- &:active, &:overview, &:focus, &:checked {
+ &:hover, &:active, &:overview, &:focus, &:checked {
box-shadow: none;
.clock {
@@ -202,105 +215,22 @@ $_osd_color: if($variant=='light', black, $fg_color);
}
/* Date/Time Menu */
-// notification styling
-@mixin notification_bubble($flat: false) {
- border-width: 1px;
- border-style: solid;
- border-radius: $base_border_radius + 2px;
- margin: $base_margin;
-
- @if $flat {
- @include button(undecorated);
- } @else {
- @include button(normal);
- }
-
- &:focus {
- @include button(focus);
- }
-
- &:hover {
- @include button(hover);
- box-shadow: none;
- }
-
- &:active {
- @include button(active);
- }
-}
-
-// overall menu
-#calendarArea {
- background-image: if($variant == 'light', url("assets/kali-dragon.svg"),
- url("assets/kali-dragon-dark.svg"));
- background-size: contain;
-}
-
-.events-section-title { padding: 1em; }
-
.datemenu-today-button {
- @include notification_bubble($flat: true);
+ &:insensitive { color: inherit; }
- .date-label {
- font-size: 1.5em;
- font-weight: 300;
- }
+ .day-label { font-weight: normal; }
+
+ .date-label { font-weight: lighter; }
}
-.calendar {
- @include notification_bubble($flat: true);
-
- .pager-button {
- &:hover, &:focus { background-color: $popover_hover_color }
- }
-
- .calendar-day-base {
- &:hover, &:focus,
- &:active,&:selected {
- color: $fg_color;
- background-color: $popover_hover_color;
- }
- }
-
- .calendar-today {
- &:hover,&:focus {
- background-color: $popover_hover_color;
- color: $fg_color;
- }
- &:active,&:selected {
- background: $selected_bg_color;
- color: $selected_fg_color;
- &:hover,&:focus {
- background-color: $popover_hover_color;
- color: $fg_color;
- }
- }
- }
-}
-
-/* Events */
-.events-button { @include notification_bubble($flat: true); }
-
-/* World clocks */
-
-.world-clocks-button {
- @include notification_bubble($flat: true);
-}
-
-.weather-button {
- @include notification_bubble($flat: true);
-}
-
-
/* Search */
-
// search entry
.search-entry {
+ $_text-shadow: 0px 1px 2px transparentize(black, 0.5);
color: black;
- text-shadow: 0px 1px 2px rgba(black, 0.9);
+ text-shadow: $_text-shadow;
font-weight: bold;
background-color: $overview_transparent_bg;
- border-radius: 999px;
font-size: 1.1em;
transition-duration: 200ms;
@@ -329,77 +259,36 @@ $_osd_color: if($variant=='light', black, $fg_color);
.search-entry-icon {
color: white;
- icon-shadow: 0px 1px 2px rgba(black, 0.9);
+ icon-shadow: $_text-shadow;
}
}
// search results
.search-section-content {
background-color: $overview_transparent_bg;
- box-shadow: none;
border: none;
}
// search result provider
-.search-provider-icon {
- .list-search-provider-content {
- .list-search-provider-details { font-weight: bold; }
- }
+.search-provider-icon .list-search-provider-details { font-weight: bold; }
+
+.list-search-result .list-search-result-description {
+ color: transparentize($osd_fg_color, .2);
}
-/* DASHBOARD */
-
+/* Dash */
#dash {
color: $osd_fg_color;
- background-color: transparent;
- border: none;
- border-color: transparent;
-
- .overview-icon StIcon {
- color: white;
- icon-shadow: 0 2px 6px transparentize(black, .6);
- }
+ icon-shadow: 0 2px 6px transparentize(black, .6);
}
-.dash-background {
- background: $overview_transparent_bg;
- //box-shadow: 0 2px 8px 0 transparentize(black, .2);
-}
+.dash-background, .dash-separator { background: $overview_transparent_bg; }
-.dash-separator { background: $overview_transparent_bg; }
-
-.show-apps {
- &:focus,
- &:checked {
- .overview-icon {
- background-color: $overview_transparent_bg;
- color: black;
- }
- }
-}
-
-/* App Folders */
-.app-well-app.app-folder {
- &, & .overview-icon.overview-icon-with-label {
- background-color: $overview_transparent_bg
- }
- //box-shadow: 0 2px 5px black;
-
- &:checked { background: black; }
-}
+/* App Grid */
+// Icon tiles in the app grid
+.app-well-app { color: white; }
.app-folder-dialog {
background: black;
box-shadow: 0 0 20px lighten(black, 1%);
-
- & .folder-name-container {
- & .edit-folder-button {
- &, &:hover, &:active {
- background: white;
- color: black;
- }
- }
- }
}
-
-.app-folder-dialog-container { width: 720px; }
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-high-contrast.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-high-contrast.scss
index a9f95c4b..374bc388 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-high-contrast.scss
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-high-contrast.scss
@@ -11,9 +11,9 @@ stage {
}
.toggle-switch { width: 48px; }
-.toggle-switch-us, .toggle-switch-intl {
- background-image: url("assets/toggle-off-hc.svg");
- &:checked { background-image: url("assets/toggle-on-hc.svg"); }
+.toggle-switch {
+ background-image: url("assets/toggle-off-hc.svg");
+ &:checked { background-image: url("assets/toggle-on-hc.svg"); }
}
//force opaque panel
@@ -22,10 +22,6 @@ stage {
&.unlock-screen,
&:overview {
background-color: #000;
-
- .panel-corner {
- -panel-corner-opacity: 1;
- }
}
.panel-button {
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_colors.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_colors.scss
index 9d8f72f2..7dfe6662 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_colors.scss
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_colors.scss
@@ -1,34 +1,36 @@
// When color definition differs for dark and light variant,
-// it gets @if ed depending on $variant
+// it gets @if-ed depending on $variant
-$base_color: if($variant == 'light', #fff, lighten(desaturate(#241f31, 20%), 2%));
-$bg_color: if($variant == 'light', #f6f5f4, darken(desaturate(#3d3846, 100%), 4%));
-$fg_color: if($variant == 'light', #2e3436, #eeeeec);
+$base_color: if($variant == 'light', #fff, darken(desaturate(#241f31, 100%), 2%));
+$bg_color: if($variant == 'light', #f6f5f4, lighten($base_color, 5%));
+$fg_color: if($variant == 'light', transparentize(black, .2), white);
$selected_fg_color: #fff;
-$selected_bg_color: if($variant == 'light', #3584e4, darken(#3584e4, 10%));
+$selected_bg_color: #3584e4;
$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%));
-$borders_color: if($variant == 'light', darken($bg_color, 18%), darken($bg_color, 8%));
-$borders_edge: if($variant == 'light', rgba(255,255,255,0.8), transparentize($fg_color, 0.93));
+
+$borders_color: if($variant == 'light', transparentize($fg_color, .5), transparentize($fg_color, .9));
+$borders_edge: if($variant == 'light', rgba(255,255,255,0.8), lighten($bg_color, 5%));
+
$link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%));
$link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%));
-$top_hilight: $borders_edge;
-$warning_color: #f57900;
-$error_color: #ff8080;
-$success_color: if($variant == 'light', #33d17a, darken(#33d17a, 10%));
+$warning_color: if($variant == 'light', #e5a50a, #f5c211);;
+$error_color: if($variant == 'light', #e01b24, #c01c28);
+$success_color: if($variant == 'light', #2ec27e, #26a269);
$destructive_color: if($variant == 'light', #e01b24, darken(#e01b24, 10%));
-$osd_fg_color: #eeeeec;
-$osd_text_color: white;
-$osd_bg_color: transparentize(darken(desaturate(#3d3846, 100%), 12%),0.04);
+$osd_fg_color: white;
+$osd_bg_color: transparentize(desaturate($bg_color, 100%),0.04);
$osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
-$osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%);
+$osd_insensitive_fg_color: if($variant == 'light', mix($osd_fg_color, $osd_bg_color, 80%), mix($osd_fg_color, $osd_bg_color, 70%));
$osd_borders_color: transparentize(black, 0.3);
-$osd_outer_borders_color: transparentize(white, 0.84);
+$osd_outer_borders_color: transparentize($osd_fg_color, 0.98);
$shadow_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(0,0,0,0.2));
-$system_bg_color: desaturate(#241f31,100%); //neutralize the HIG color
+
+// overview background color
+$system_bg_color: $base_color;
//insensitive state derived colors
$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss
index de98729f..c4ce9997 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss
@@ -28,26 +28,24 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
// padding, margin and spacing
$base_padding: 6px;
$base_margin: 4px;
-$base_spacing: 6px;
// border radii
$base_border_radius: 8px;
-$modal_radius:$base_border_radius * 2;
+// radii of things that display over other things, e.g. popovers
+$modal_radius: $base_border_radius*2; // 24px
-// non-standard colors
-$bubble_borders_color: lighten($borders_color, if($variant=='light', 0%, 5%));
-// $bubble_borders_color: if($variant == 'light', rgba(255,255,255,0.1), rgba(0,0,0,0.3));
+// derived hover colors
+$hover_bg_color: if($variant=='light', darken($base_color, 3%), lighten($base_color, 4%));
+$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 4%));
-// hover
-$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 5%));
-$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 5%));
-$hover_borders_color: lighten($borders_color,if($variant=='light', 5%, 3%));
+// derived active colors
+$active_bg_color: if($variant=='light', darken($base_color, 5%), lighten($base_color, 6%));
+$active_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 6%));
-// active
-$active_bg_color: if($variant == 'light', darken($bg_color, 7%), darken($bg_color, 9%));
-$active_fg_color: darken($fg_color,if($variant=='light', 5%, 3%));
-$active_borders_color: darken($borders_color,if($variant=='light', 5%, 3%));
+// derived checked colors
+$checked_bg_color: if($variant=='light', darken($base_color, 7%), lighten($base_color, 9%));
+$checked_fg_color: if($variant=='light', darken($fg_color, 7%), lighten($fg_color, 9%));
// fonts
$base_font_size: 10;
@@ -55,6 +53,7 @@ $text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.
// icons
$base_icon_size: 1.09em;
+$large_icon_size: $base_icon_size*2; // 32px
// $base_icon_size: 16px;
// Stage
@@ -65,20 +64,13 @@ stage {
/* Common Stylings */
-// Text
-%status_text {
- font-size: 2em;
- font-weight: bold;
- color: $osd_fg_color;
-}
-
// osd panels
%osd_panel {
color: $osd_fg_color;
background-color: $osd_bg_color;
- //border: 1px solid $osd_outer_borders_color;
- border-radius: $base_border_radius * 2 + 4px;
- padding: $base_padding * 2;
+ border: 1px solid $osd_outer_borders_color;
+ border-radius: 999px;
+ padding: $base_padding*2;
}
// Overview panels
@@ -89,9 +81,10 @@ stage {
}
// icon tiles
-%icon_tile {
- border-radius: $base_border_radius + 4px;
+%tile {
+ border-radius: $base_border_radius * 2; // 16px
padding: $base_padding;
+ spacing: $base_padding;
border: 2px solid transparent;
transition-duration: 100ms;
text-align: center;
@@ -101,76 +94,128 @@ stage {
%bubble_panel {
color: $fg_color;
background-color: $bg_color;
- border: 1px solid if($variant=='light', rgba(0,0,0, 0.6), $borders_color);
+ border-radius: $base_border_radius*1.25 + 1px;
+ border: 1px solid $borders_edge;
}
-// button styling
+// normal button styling
%button {
- border-radius: $base_border_radius;
+ border-radius: $base_border_radius - 2px; // 6px
border-style: solid;
border-width: 1px;
- min-height: 22px;
- padding: $base_padding * 0.5 $base_padding * 4;
+ font-weight: bold;
+ padding: $base_padding*.5 $base_padding*4;
@include button(normal);
&:focus { @include button(focus);}
&:hover { @include button(hover);}
&:insensitive { @include button(insensitive);}
&:active { @include button(active);}
+ &:checked { @include button(checked);}
}
-// buttons in dialogs
+// buttons in dialogs/notifications
+// lighter in color and have a greater radius
+
+$bubble_button_radius:$base_border_radius*1.25;
+$bubble_buttons_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 7%));
+
%bubble_button {
- @include button(normal, $shadow: none);
padding: $base_padding * 2;
- border-style: solid;
- border-width: 1px;
- border-left-width: 0;
- border-bottom-width: 0;
+ font-weight: bold !important;
- &:insensitive { @include button(insensitive, $shadow: none); }
- &:focus { @include button(focus, $shadow: none); }
- &:hover { @include button(hover, $shadow: none); }
- &:active { @include button(active, $shadow: none); }
+ &:ltr {margin-right: 1px;}
+ &:rtl {margin-left: 1px;}
- // radius is 2 pixel less to fit in bubble
- &:first-child {
- border-radius: 0 0 0 $modal_radius - 2px;
+ @include button(normal, $c:$bubble_buttons_color);
+ &:insensitive { @include button(insensitive, $c:$bubble_buttons_color);}
+ &:focus { @include button(focus, $c:$bubble_buttons_color);}
+ &:hover { @include button(hover, $c:$bubble_buttons_color);}
+ &:active { @include button(active, $c:$bubble_buttons_color);}
+ &:checked { @include button(checked, $c:$bubble_buttons_color);}
+
+ &:first-child:ltr {
+ border-radius: 0 0 0 $bubble_button_radius;
}
- &:last-child {
- border-right-width: 0;
- border-radius: 0 0 $modal_radius - 2px 0;
+ &:last-child:ltr {
+ border-radius: 0 0 $bubble_button_radius 0;
+ margin-right: 0 !important;
+ }
+
+ &:first-child:rtl {
+ border-radius: 0 0 $bubble_button_radius 0;
+ }
+
+ &:last-child:rtl {
+ border-radius: 0 0 0 $bubble_button_radius;
+ margin-left: 0 !important;
}
&:first-child:last-child {
- border-radius: 0 0 $modal_radius - 2px $modal_radius - 2px;
+ border-radius: 0 0 $bubble_button_radius $bubble_button_radius !important;
+ margin-left: 0 !important;
+ margin-right: 0 !important;
}
}
-
-// notification styling
-@mixin notification_bubble($flat: false) {
- border-width: 1px;
- border-style: solid;
- border-radius: $base_border_radius + 2px;
- margin: $base_margin;
-
- @if $flat {
- @include button(undecorated);
- } @else {
- @include button(normal);
- }
-
- &:focus {
- @include button(focus);
- }
-
- &:hover {
- @include button(hover);
- }
-
- &:active {
- @include button(active);
- }
+// buttons on OSD elements
+// that are undecorated by default and use OSD colors
+%osd_button {
+ @include button(undecorated);
+ &:insensitive { @include button(undecorated, $c:$osd_bg_color);}
+ &:focus { @include button(focus, $c:$osd_bg_color);}
+ &:hover { @include button(hover, $c:$osd_bg_color);}
+ &:active { @include button(active, $c:$osd_bg_color);}
+ &:outlined,&:checked { @include button(checked, $c:$osd_bg_color);}
}
+
+/* General Typography */
+
+%large_title {
+ font-weight: 300;
+ @include fontsize(24);
+}
+
+%title_1 {
+ font-weight: 800;
+ @include fontsize(20);
+}
+
+%title_2 {
+ font-weight: 800;
+ @include fontsize(15);
+}
+
+%title_3 {
+ font-weight: 700;
+ @include fontsize(15);
+}
+
+%title_4 {
+ font-weight: 700;
+ @include fontsize(13);
+}
+
+%heading {
+ font-weight: 700;
+ @include fontsize(11);
+}
+
+%caption_heading {
+ font-weight: 700;
+ @include fontsize(9);
+}
+
+%caption {
+ font-weight: 400;
+ @include fontsize(9);
+}
+
+%smaller {
+ font-weight: 400;
+ @include fontsize(8);
+}
+
+%monospace {font-family: monospace;}
+%numeric { font-feature-settings: "tnum";}
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss.patch b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss.patch
index b4ec55b8..4865ccc5 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss.patch
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_common.scss.patch
@@ -1,4 +1,16 @@
-53c53
+39c39
+< $hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 4%));
+---
+> $hover_bg_color: if($variant=='light', darken($base_color, 3%), lighten($base_color, 4%));
+43c43
+< $active_bg_color: if($variant=='light', darken($bg_color, 5%), lighten($bg_color, 6%));
+---
+> $active_bg_color: if($variant=='light', darken($base_color, 5%), lighten($base_color, 6%));
+47c47
+< $checked_bg_color: if($variant=='light', darken($bg_color, 7%), lighten($bg_color, 9%));
+---
+> $checked_bg_color: if($variant=='light', darken($base_color, 7%), lighten($base_color, 9%));
+51c51
< $base_font_size: 11;
---
> $base_font_size: 10;
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss
index f09eb123..c357f2ca 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss
@@ -25,38 +25,110 @@
// entries
-@mixin entry($t, $fc:$selected_bg_color, $edge: $borders_edge) {
+@mixin entry($t, $fc:$selected_bg_color) {
//
// Entries drawing function
//
// $t: entry type
// $fc: focus color
-// $edge: set to none to not draw the bottom edge or specify a color to not use the default one
//
// possible $t values:
// normal, focus, insensitive
//
@if $t==normal {
- background-color: $base_color;
- border-color: $borders_color;
+ background-color: lighten($bg_color, 5%);
+ color: transparentize($fg_color,0.3);
+ border: 2px solid lighten($bg_color, 5%);
+ }
- }
@if $t==focus {
- border-color: if($fc==$selected_bg_color,
- $selected_borders_color,
- darken($fc,35%));
- box-shadow: inset 0 0 0 2px $fc;
+ background-color: mix(lighten($bg_color, 5%), $selected_bg_color, 95%);
+ border-color: $fc;
+ color: $fg_color;
+ &:hover {}
}
- @if $t==hover { }
+
+ @if $t==hover {
+ background-color:lighten($hover_bg_color, 5%);
+ border-color:lighten($hover_bg_color, 5%);
+ color: transparentize($fg_color,0.3);
+ }
+
@if $t==insensitive {
+ background-color:lighten($insensitive_bg_color, 5%);
+ border-color: lighten($insensitive_bg_color, 5%);
color: $insensitive_fg_color;
- border-color: $insensitive_bg_color;
- box-shadow: none;
}
}
-// buttons
+// On-screen Keyboard
+@mixin keyboard_key($t, $c:$osd_bg_color, $tc:$osd_fg_color) {
+//
+// Keyboard key drawing function
+//
+// $t: key type,
+// $c: base key color for colored* types
+// $tc: optional text color for colored* types
+//
+// possible $t values:
+// normal, hover, active, insensitive, insensitive-active,
+// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
+// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
+//
+
+ // normal key
+ @if $t==normal {
+ color: $tc;
+ background-color: lighten($c, 3%);
+ }
+
+ // focused key
+ @if $t==focus {
+ color: $tc;
+ background-color: mix(lighten($c, 3%), $selected_bg_color, 90%);
+ box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
+ &:hover {
+ background-color: mix(lighten($c, 8%), $selected_bg_color, 90%);
+ box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
+ }
+ &:active {
+ background-color: mix(lighten($c, 10%), $selected_bg_color, 90%);
+ box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
+ }
+ }
+
+ // hover key
+ @else if $t==hover {
+ color: $tc;
+ background-color: lighten($c, 7%);
+ }
+
+ // active key
+ @else if $t==active {
+ color: $tc;
+ background-color: lighten($c, 10%);
+ }
+
+ // checked key
+ @else if $t==checked {
+ color: $tc;
+ background-color: lighten($c, 15%);
+ }
+
+ // insensitive key
+ @else if $t==insensitive {
+ color: $insensitive_fg_color;
+ background-color: $insensitive_bg_color;
+ }
+
+ // reset
+ @else if $t==undecorated {
+ background-color: transparent;
+ background-image: none;
+ }
+}
+
@function draw_border_color ($c) {
//
@@ -65,63 +137,18 @@
@return if($variant == 'light', darken($c, 18%), darken($c, 4%));
}
-@function draw_text_shadow_color ($tc:$fg_color, $bg:$bg_color) {
-//
-// calculate the color of text shadows
-//
-// $tc is the text color
-// $bg is the background color
-//
- $lbg: lightness($bg)/100%;
- @if lightness($tc)<50% { @return rgba(255,255,255,$lbg/($lbg*1.3)); }
- @else { @return rgba(0,0,0,1-$lbg*0.8); }
-}
+// buttons
+// since buttons are all flat an borderless now the mixin is simpler
-@function draw_button_hilight_color($c) {
-//
-// calculate the right top highlight color for buttons
-//
-// $c: base color;
-//
- @if lightness($c)>90% { @return white; }
- @else if lightness($c)>80% { @return rgba(255,255,255, 0.7); }
- @else if lightness($c)>50% { @return rgba(255,255,255, 0.5); }
- @else if lightness($c)>40% { @return rgba(255,255,255, 0.3); }
- @else { @return rgba(255,255,255, 0.1); }
-}
+@mixin button($t, $tc:$fg_color, $c:$bg_color) {
-@mixin draw_button_text_shadow ($tc:$fg_color, $bg:$bg_color) {
-//
-// helper function for the text emboss effect
-//
-// $tc is the optional text color, not the shadow color
-//
-// TODO: this functions needs a way to deal with special cases
-//
-
- $shadow: draw_text_shadow_color($tc, $bg);
-
- @if lightness($tc)<50% {
- text-shadow: 0 1px $shadow;
- icon-shadow: 0 1px $shadow;
- }
- @else {
- text-shadow: 0 -1px $shadow;
- icon-shadow: 0 -1px $shadow;
- }
-}
-
-@mixin button($t, $c:$bg_color, $tc:$fg_color, $edge: $borders_edge, $shadow: $shadow_color) {
+$button_bg_color: lighten($c, 5%);
//
// Button drawing function
//
// $t: button type,
-// $c: base button color for colored* types
-// $tc: optional text color for colored* types
-// $edge: set to none to not draw the bottom edge or specify a color to not
-// use the default one
-// $shadow: set to none to not draw the drop shadow or specify a color to not
-// use the default one
+// $c: base button colors, derived from fg_color
+// $tc: base button colors, derived from fg_color
//
// possible $t values:
// normal, hover, active, insensitive, insensitive-active,
@@ -129,104 +156,172 @@
// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
//
- $hilight_color: draw_button_hilight_color($c);
- $button_edge: if($edge == none, none, draw_widget_edge($edge));
- $blank_edge: if($edge == none, none, draw_widget_edge(transparentize($edge,1)));
- $button_shadow: if($shadow == none, none, 0 1px 1px 0 $shadow);
+ border: 1px solid transparent;
// normal button
@if $t==normal {
color: $tc;
- background-color: lighten($c, 3%);
+ background-color: $button_bg_color;
border-color: draw_border_color($c);
- @include draw_shadows($button_shadow);
- // box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
- text-shadow: 0 1px $text_shadow_color;
- icon-shadow: 0 1px $text_shadow_color;
}
// focused button
@if $t==focus {
color: $tc;
- text-shadow: 0 1px $text_shadow_color;
- icon-shadow: 0 1px $text_shadow_color;
+ background-color: mix($button_bg_color, $selected_bg_color, 90%);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
- //border-color: $selected_bg_color;
+ &:hover {
+ background-color: mix(lighten($button_bg_color, 3%), $selected_bg_color, 90%);
+ box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
+ }
+ &:active {
+ background-color: mix(lighten($button_bg_color, 6%), $selected_bg_color, 90%);
+ box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
+ }
}
// hover button
@else if $t==hover {
color: $tc;
- background-color: lighten($c, if($variant == 'light', 8%, 5%));
+ background-color: mix($tc, $button_bg_color, 3%);
border-color: if($variant == 'light', draw_border_color(lighten($c, 7%)), draw_border_color($c));
- @include draw_shadows($button_shadow);
- text-shadow: 0 1px $text_shadow_color;
- icon-shadow: 0 1px $text_shadow_color;
}
// active button
@else if $t==active {
color: $tc;
- background-color: darken($c,3%);
+ background-color: mix($tc, $button_bg_color, 6%);
border-color: draw_border_color(if($variant == 'light', $c, darken($c,7%)));
- text-shadow: none;
- icon-shadow: none;
- box-shadow: none;
+ }
+
+ // checked button
+ @else if $t==checked {
+ color: $tc;
+ background-color: mix($tc, $button_bg_color, 9%);
+ &:hover { background-color: lighten($button_bg_color, 12%);}
+ &:active { background-color: lighten($button_bg_color, 15%);}
}
// insensitive button
@else if $t==insensitive {
- color: $insensitive_fg_color;
+ color: transparentize($tc, 0.5);
+ background-color: transparentize($tc, .95);
border-color: $insensitive_borders_color;
- background-color: $insensitive_bg_color;
- box-shadow: none;
- text-shadow: none;
- icon-shadow: none;
+ }
+
+ // default/suggested button
+ @else if $t==default {
+ background-color: $selected_bg_color;
+ color: $selected_fg_color;
+ &:focus {
+ box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
+ }
+ &:hover, &:focus {
+ background-color: mix($tc, $selected_bg_color, 5%);
+ color: lighten($selected_fg_color, 5%);
+ }
+ &:active {
+ background-color: darken($selected_bg_color, 7%);
+ color: darken($selected_fg_color, 7%);
+ }
+ &:insensitive {
+ @include button(insensitive);
+ background-color: transparentize($selected_bg_color, .5);
+ color: transparentize($selected_fg_color, .5);
+ }
}
// reset
@else if $t==undecorated {
- border-color: transparent;
background-color: transparent;
- background-image: none;
- @include draw_shadows(inset 0 1px rgba(255,255,255,0),$blank_edge);
- text-shadow: none;
- icon-shadow: none;
+ background-color: none;
+ border-color: transparent;
+ &:insensitive {
+ @include button(insensitive);
+ background-color: transparent;
+ //color: transparentize($selected_fg_color, .5);
+ }
}
}
-// overview icons
-@mixin overview-icon($color) {
- .overview-icon {
- @extend %icon_tile;
- color: $color;
+// tile
+@mixin tile_button($color, $flat: true) {
+ @extend %tile;
+ @if $flat {
+ background-color: transparent;
+ } @else {
+ background-color: transparentize($color, .84);
}
+ &:hover { background-color: transparentize($color, .9);}
+ &:selected, &:focus {
+ background-color: transparentize($color, .87);
+ &:hover { background-color: transparentize($color, .84);}
+ &:active { background-color: transparentize($color, .87);}
+ }
+ &:active { background-color: transparentize($color, .84);}
+ &:outlined, &:checked {
+ background-color: transparentize($color, .81);
+ &:active { background-color: transparentize($color, .78);}
+ &:hover { background-color: transparentize($color, .75);}
+ }
+ &:drop {
+ border: 2px solid transparentize($selected_bg_color, .2); //already 2px transparent so no jumping
+ background-color: transparentize($selected_bg_color, .8);
+ }
+}
- &:hover,
- &:selected {
- .overview-icon {
- background-color: transparentize($color, .9);
- }
+// overview icon, dash, app grid
+@mixin overview_icon($color, $flat: true) {
+ .overview-icon { @extend %tile; }
+ @if $flat {
+ .overview-icon { background-color: transparent;}
+ } @else {
+ .overview-icon { background-color: transparentize($color, .81);}
+ }
+ &:hover .overview-icon { background-color: transparentize($color, .9);}
+
+ &:selected .overview-icon,
+ &:focus .overview-icon {
+ background-color: transparentize($color, .87);
+ &:hover .overview-icon { background-color: transparentize($color, .84);}
+ &:active .overview-icon { background-color: transparentize($color, .87);}
+ }
+ &:active .overview-icon { background-color: transparentize($color, .84);}
+ &:outlined .overview-icon,
+ &:checked .overview-icon {
+ background-color: transparentize($color, .81);
+ &:active .overview-icon { background-color: transparentize($color, .78);}
+ &:hover .overview-icon { background-color: transparentize($color, .75);}
+ }
+ &:drop .overview-icon {
+ border: 2px solid transparentize($selected_bg_color, .2); //already 2px transparent so no jumping
+ background-color: transparentize($selected_bg_color, .8);
+ }
+}
+
+// styling for elements within popovers that look like notifications
+@mixin card($flat: false) {
+ border-radius: $base_border_radius;
+ margin: $base_margin;
+ box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
+
+ @if $flat {
+ @include button(undecorated);
+ box-shadow: none !important;
+ &:insensitive { border-color: transparent; }
+ } @else {
+ @include button(normal);
}
&:focus {
- .overview-icon {
- background-color: transparentize($color, .7);
- // border-color: $selected_bg_color;
- }
+ @include button(focus);
}
- &:drop {
- .overview-icon {
- border: 2px solid $selected_bg_color; //already 2px transparent so no jumping
- background-color: transparentize($selected_bg_color, .8);
- }
+ &:hover {
+ @include button(hover);
}
- &:active,
- &:checked {
- .overview-icon {
- background-color: transparentize(darken($osd_bg_color, 10%), .5);
- }
+ &:active {
+ @include button(active);
}
}
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss.patch b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss.patch
new file mode 100644
index 00000000..6c1b7b98
--- /dev/null
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_drawing.scss.patch
@@ -0,0 +1,45 @@
+132a133,139
+> @function draw_border_color ($c) {
+> //
+> // colored buttons want the border form the base color
+> //
+> @return if($variant == 'light', darken($c, 18%), darken($c, 4%));
+> }
+>
+138c145
+< $button_bg_color: mix($tc, $c, 5%);
+---
+> $button_bg_color: lighten($c, 5%);
+151a159,160
+> border: 1px solid transparent;
+>
+155a165
+> border-color: draw_border_color($c);
+176c186,187
+< background-color: lighten($button_bg_color, 3%);
+---
+> background-color: mix($tc, $button_bg_color, 3%);
+> border-color: if($variant == 'light', draw_border_color(lighten($c, 7%)), draw_border_color($c));
+182c193,194
+< background-color: lighten($button_bg_color, 6%);
+---
+> background-color: mix($tc, $button_bg_color, 6%);
+> border-color: draw_border_color(if($variant == 'light', $c, darken($c,7%)));
+188c200
+< background-color: lighten($button_bg_color, 9%);
+---
+> background-color: mix($tc, $button_bg_color, 9%);
+196a209
+> border-color: $insensitive_borders_color;
+207c220
+< background-color: lighten($selected_bg_color, 5%);
+---
+> background-color: mix($tc, $selected_bg_color, 5%);
+224a238
+> border-color: transparent;
+228c228
+< color: transparentize($selected_fg_color, .5);
+---
+> //color: transparentize($selected_fg_color, .5);
+296a311
+> &:insensitive { border-color: transparent; }
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_widgets.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_widgets.scss
index a8d0aa9f..4ed082f1 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_widgets.scss
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/_widgets.scss
@@ -29,6 +29,7 @@
@import 'widgets/osd';
@import 'widgets/switcher-popup';
@import 'widgets/workspace-switcher';
+@import 'widgets/screenshot';
// Panel
@import 'widgets/panel';
@import 'widgets/corner-ripple';
@@ -43,7 +44,6 @@
// A11y / misc
@import 'widgets/a11y';
@import 'widgets/misc';
-@import 'widgets/tiled-previews';
@import 'widgets/keyboard';
@import 'widgets/looking-glass';
// Lock / login screens
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_app-grid.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_app-grid.scss
index 2df69116..c936e4b6 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_app-grid.scss
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_app-grid.scss
@@ -4,45 +4,39 @@ $app_icon_size: 96px;
// app icons
.icon-grid {
- row-spacing: $base_spacing * 2;
- column-spacing: $base_spacing * 2;
- max-row-spacing: $base_spacing * 12;
- max-column-spacing: $base_spacing * 12;
+ row-spacing: $base_padding * 2;
+ column-spacing: $base_padding * 2;
+ max-row-spacing: $base_padding * 7;
+ max-column-spacing: $base_padding * 7;
page-padding-top: $base_padding * 4;
page-padding-bottom: $base_padding * 4;
- page-padding-left: $base_padding * 2;
- page-padding-right: $base_padding * 2;
+ page-padding-left: $base_padding * 3;
+ page-padding-right: $base_padding * 3;
}
/* App Icons */
-$app_grid_fg_color: #fff;
-
// Icon tiles in the app grid
-.app-well-app,
-%app-well-app {
- @include overview-icon($app_grid_fg_color);
+.app-well-app {
+ @include overview_icon($osd_fg_color);
+ .overview-icon { padding: $base_padding*2;}
.overview-icon.overview-icon-with-label {
- padding: 10px 8px 5px 8px;
-
> StBoxLayout {
- spacing: $base_spacing;
+ spacing: $base_padding;
}
}
}
-/* App Folders */
+// app folders
.app-well-app.app-folder {
- background-color: $dash_background_color;
- border-radius: $base_border_radius + 4px; // same as %icon_tile
+ @include overview_icon($osd_fg_color, $flat: false);
}
// expanded folder
-.app-folder-dialog { //style like the dash
- border-radius: $modal_radius * 1.5;
+.app-folder-dialog {
+ border-radius: $modal_radius*2;
background-color: $dash_background_color;
- padding: 12px 0px 12px 0px;
& .folder-name-container {
padding: 24px 36px 0;
@@ -50,8 +44,7 @@ $app_grid_fg_color: #fff;
& .folder-name-label,
& .folder-name-entry {
- font-size: 18pt;
- font-weight: 800;
+ @extend %title_1;
}
& .folder-name-entry { width: 300px }
@@ -61,19 +54,17 @@ $app_grid_fg_color: #fff;
& .edit-folder-button {
@extend %button;
-
padding: 0;
width: 36px;
height: 36px;
- border-radius: 18px;
-
- & > StIcon { icon-size: 16px }
+ border-radius: 99px;
+ & > StIcon { icon-size: $base_icon_size }
}
}
& .icon-grid {
- row-spacing: $base_spacing * 2;
- column-spacing: $base_spacing * 5;
+ row-spacing: $base_padding * 2;
+ column-spacing: $base_padding * 5;
page-padding-top: 0;
page-padding-bottom: 0;
page-padding-left: 0;
@@ -84,10 +75,11 @@ $app_grid_fg_color: #fff;
margin-bottom: 18px;
}
}
+
.app-folder-dialog-container {
- padding: 12px;
- width: 620px;
- height: 620px;
+ padding: $base_padding*2;
+ width: 640px;
+ height: 640px;
}
// Running app indicator (also shown in dash)
@@ -95,23 +87,18 @@ $app_grid_fg_color: #fff;
height: 5px;
width: 5px;
border-radius:5px;
+ margin-bottom: 8px;
background-color: $osd_fg_color;
- margin-bottom: 1px;
}
// Rename popup for app folders
.rename-folder-popup {
.rename-folder-popup-item {
- spacing: $base_spacing;
+ spacing: $base_padding;
&:ltr, &:rtl { padding: 0 $base_padding * 2; }
}
}
-// right-click app menu
-.app-menu {
- max-width: 27.25em;
-}
-
// App Grid pagination indicators
.page-indicator {
padding: $base_padding $base_padding * 2 0;
@@ -148,7 +135,7 @@ $app_grid_fg_color: #fff;
background-gradient-start: rgba(255, 255, 255, 0.05);
background-gradient-end: transparent;
background-gradient-direction: horizontal;
- border-radius: 15px 0px 0px 15px;
+ border-radius: $modal_radius*1.5 0px 0px $modal_radius*1.5;
}
&.previous:ltr,
@@ -156,7 +143,7 @@ $app_grid_fg_color: #fff;
background-gradient-start: transparent;
background-gradient-end: rgba(255, 255, 255, 0.05);
background-gradient-direction: horizontal;
- border-radius: 0px 15px 15px 0px;
+ border-radius: 0px $modal_radius*1.5 $modal_radius*1.5 0px;
}
}
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_buttons.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_buttons.scss
index 709ac467..6a72c079 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_buttons.scss
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_buttons.scss
@@ -2,4 +2,5 @@
.button {
@extend %button; // that's it
+ min-height: 22px;
}
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_calendar.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_calendar.scss
index 947e23d8..c1e4f966 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_calendar.scss
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_calendar.scss
@@ -1,291 +1,256 @@
/* Date/Time Menu */
-.clock-display-box {
- spacing: 2px;
-
- .clock {
- padding-left: $base_padding * 2;
- padding-right: $base_padding * 2;
- }
-}
-
// overall menu
#calendarArea {
- padding:0;
+ padding: $base_padding - 2px;
}
// Calendar menu side column
.datemenu-calendar-column {
- spacing: $base_spacing;
- border: 0 solid $bubble_borders_color;
- padding: 0 $base_padding * 2;
-
- &:ltr {margin-right: $base_margin * 2; border-left-width: 1px; }
- &:rtl {margin-left: $base_margin * 2; border-right-width: 1px; }
-
- .datemenu-displays-section {
- }
-
- .datemenu-displays-box {
- spacing: $base_spacing;
- }
-}
-
-.events-section-title {
- @include notification_bubble($flat: true);
- color: desaturate(darken($fg_color,40%), 10%);
- font-weight: bold;
- padding: .4em;
+ spacing: $base_padding;
+ &:ltr {padding-left: $base_padding;}
+ &:rtl {padding-right: $base_padding;}
+ .datemenu-displays-box {spacing: $base_padding;}
}
/* today button (the date) */
.datemenu-today-button {
- @include notification_bubble($flat: true);
+ @include card($flat: true);
padding: $base_padding * 1.5;
// weekday label
.day-label {
- @include fontsize($base_font_size+1);
- font-weight: bold;
+ @extend %heading;
}
// date label
.date-label {
- @include fontsize($base_font_size+7);
- font-weight: 1000;
+ @extend %title_2;
}
}
/* Calendar */
.calendar {
- @include notification_bubble;
- padding: $base_padding;
+ @include card(flat);
+ margin-top: 0;
- // month
- .calendar-month-label {
- color: lighten($fg_color,5%);
- font-weight: bold;
- padding: 8px 0;
- &:focus {}
+ // month header
+ .calendar-month-header {
+
+ // prev/next month icons
+ .calendar-change-month-back StIcon,
+ .calendar-change-month-forward StIcon {
+ icon-size: $base_icon_size;
+ }
+
+ // month label
+ .calendar-month-label {
+ color: lighten($fg_color,5%);
+ @extend %heading;
+ padding: 8px 0;
+ }
+ .pager-button {
+ background-color: transparent;
+ height: 32px;
+ width: 32px;
+ margin: 2px;
+ border-radius: $base_border_radius - 2px;
+ &:hover, &:focus {background-color: $hover_bg_color;}
+ &:active {background-color: $active_bg_color;}
+ }
}
- // prev/next month icons
- .calendar-change-month-back StIcon,
- .calendar-change-month-forward StIcon {
- icon-size: $base_icon_size;
- }
-
- .pager-button {
- background-color: transparent;
- height: 32px;
- width: 32px;
- border-radius: $base_border_radius;
- &:hover, &:focus { background-color: lighten($hover_bg_color, 5%); }
- &:active { background-color: $active_bg_color; }
- }
-
-
$calendar_day_size: 32px;
.calendar-day-base {
- @include fontsize($base_font_size - 3);
text-align: center;
- width: $calendar_day_size;
- height: $calendar_day_size;
- padding: 0;
margin: 2px;
- border-radius: $calendar_day_size * 0.5 + 2px;
- border: 1px solid transparent; //avoid jumparound due to today
- font-feature-settings: "tnum";
- &:hover, &:focus { background-color: $hover_bg_color; }
+ padding: 0 !important;
+ height: $calendar_day_size !important;
+ width: $calendar_day_size !important;
+ border-radius: 99px;
+ @extend %numeric;
+ @extend %smaller;
+
+ &:hover {background-color: $hover_bg_color;}
+ &:focus {
+ background-color: mix($bg_color, $selected_bg_color, 80%);
+ color: $selected_fg_color;
+ box-shadow:inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
+ }
+
&:active,&:selected {
- color: lighten($fg_color,10%);
- background-color: darken($bg_color,5%);
+ color: $active_fg_color;
+ background-color: $active_bg_color;
+ &:focus {
+ background-color: mix($active_bg_color, $selected_bg_color, 80%);
+ }
}
// day of week heading
&.calendar-day-heading {
- color: lighten($fg_color,10%);
- margin-top: 1em;
- @include fontsize($base_font_size - 4);
+ color: $insensitive_fg_color;
+ padding-top: $base_padding;
+ height: 16px !important; // force heading to be smaller height
+ font-weight: bold;
+ @extend %smaller;
}
}
- .calendar-day { //border collapse hack - see calendar.js
- border-width: 0;
- }
-
- .calendar-day-top {
- border-top-width: 1px;
- }
-
- .calendar-day-left {
- border-left-width: 1px;
- }
-
+ .calendar-day {}
.calendar-work-day {}
-
- .calendar-nonwork-day {
- color: $insensitive_fg_color;
+ .calendar-nonwork-day {color: $insensitive_fg_color;}
+ .calendar-other-month-day {
+ color: transparentize($fg_color, 0.5);
+ &.calendar-nonwork-day {
+ color: transparentize($insensitive_fg_color, 0.5);
+ }
}
// Today
.calendar-today {
- font-weight: bold;
- border: 1px solid transparent;
background-color: $selected_bg_color;
- color: $selected_fg_color;
+ font-weight: 800;
+ color: $selected_fg_color !important;
&:hover,&:focus {
background-color:lighten($selected_bg_color, 3%);
- color: $selected_fg_color;
+ color: inherit;
}
&:active,&:selected {
background-color: $selected_bg_color;
- color: $selected_fg_color;
+ color: inherit;
&:hover,&:focus {
background-color:lighten($selected_bg_color, 3%);
- color: $selected_fg_color;
+ color: inherit;
}
}
}
.calendar-day-with-events {
- background-image: url("assets/calendar-today.svg");
- &.calendar-work-day {
- color: lighten($fg_color,10%);
- font-weight: bold;
- }
- }
-
- .calendar-other-month-day {
- color: transparentize($fg_color ,0.5);
+ background-image: if($variant == 'light', url("assets/calendar-today-light.svg"),url("assets/calendar-today.svg"));
+ background-size: contain;
}
.calendar-week-number {
@include fontsize($base_font_size - 4);
font-weight: bold;
- height: 1.8em;
- width: 2.3em;
- border-radius: 2px;
+ font-feature-settings: "tnum";
margin: 6px;
+ padding: 0 $base_padding;
+ border-radius: 3px;
background-color: darken($bg_color, 2%);
- color: lighten($fg_color, 5%);
+ color: $insensitive_fg_color
}
}
/* Events */
.events-button {
- @include notification_bubble;
+ @include card;
padding: $base_padding * 2;
.events-box {
- spacing: $base_spacing;
+ spacing: $base_padding;
}
.events-list {
- spacing: 2 * $base_spacing;
+ spacing: 2 * $base_padding;
}
.events-title {
- color: desaturate(darken($fg_color,40%), 10%);
- font-weight: bold;
+ @extend %heading;
+ color: $insensitive_fg_color;
margin-bottom: $base_margin;
}
.event-time {
- color: darken($fg_color,20%);
- font-feature-settings: "tnum";
- @include fontsize($base_font_size - 1);
+ @extend %numeric;
+ @extend %caption;
+ color: $insensitive_fg_color;
}
}
/* World clocks */
.world-clocks-button {
- @include notification_bubble;
+ @include card;
padding: $base_padding * 2;
.world-clocks-grid {
- spacing-rows: $base_spacing;
- spacing-columns: $base_spacing * 2;
+ spacing-rows: $base_padding;
+ spacing-columns: $base_padding * 2;
}
// title
.world-clocks-header {
- color: desaturate(darken($fg_color,40%), 10%);
- font-weight: bold;
+ @extend %heading;
+ color: $insensitive_fg_color;
}
// city label
.world-clocks-city {
color: $fg_color;
- @include fontsize($base_font_size);
- font-weight: normal;
}
// timezone time
.world-clocks-time {
- font-weight: bold;
+ @extend %heading;
+ @extend %numeric;
color: $fg_color;
- font-feature-settings: "tnum";
- @include fontsize($base_font_size);
- &:ltr { text-align: right; }
- &:rtl { text-align: left; }
+ &:ltr {text-align: right;}
+ &:rtl {text-align: left;}
}
// timezone offset label
.world-clocks-timezone {
- color: darken($fg_color,20%);
- font-feature-settings: "tnum";
- @include fontsize($base_font_size - 1);
+ @extend %numeric;
+ @extend %caption;
+ color: $insensitive_fg_color;
}
}
/* Weather */
.weather-button {
- @include notification_bubble;
+ @include card;
padding: $base_padding * 2;
.weather-box {
- spacing: $base_spacing + $base_margin;
+ spacing: $base_padding + $base_margin;
}
.weather-header-box {
- spacing: $base_spacing;
+ spacing: $base_padding;
}
.weather-header {
- color: desaturate(darken($fg_color,40%), 10%);
- font-weight: bold;
+ color: $insensitive_fg_color;
+ @extend %heading;
&.location {
font-weight: normal;
- @include fontsize($base_font_size - 1);
}
}
.weather-grid {
- spacing-rows: $base_spacing;
- spacing-columns: $base_spacing * 2;
+ spacing-rows: $base_padding;
+ spacing-columns: $base_padding * 2;
}
.weather-forecast-time {
+ @extend %numeric;
+ @extend %caption;
color: darken($fg_color,30%);
- font-feature-settings: "tnum";
- @include fontsize($base_font_size - 2);
- font-weight: normal;
padding-top: 0.2em;
padding-bottom: 0.4em;
}
.weather-forecast-icon {
- icon-size: $base_icon_size * 2;
+ icon-size: $large_icon_size;
}
.weather-forecast-temp {
- font-weight: bold;
+ @extend %heading;
}
}
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_check-box.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_check-box.scss
index 66bc1ea2..c583ac9e 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_check-box.scss
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_check-box.scss
@@ -1,7 +1,7 @@
/* Check Boxes */
// these are equal to the size of the SVG assets
-$check_height: 22px;
+$check_height: 24px;
$check_width: 24px;
@@ -10,9 +10,9 @@ $check_width: 24px;
StBin {
width: $check_width;
height: $check_height;
- background-image: url("assets/checkbox-off.svg");
+ background-image: if($variant == 'light', url("assets/checkbox-off-light.svg"), url("assets/checkbox-off.svg"));
}
- &:focus StBin { background-image: url("assets/checkbox-off-focused.svg"); }
+ &:focus StBin { background-image: if($variant == 'light', url("assets/checkbox-off-focused-light.svg"), url("assets/checkbox-off-focused.svg"));; }
&:checked StBin { background-image: url("assets/checkbox.svg"); }
&:focus:checked StBin { background-image: url("assets/checkbox-focused.svg"); }
-}
\ No newline at end of file
+}
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_dash.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_dash.scss
index 9e469ab6..94e3257e 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_dash.scss
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_dash.scss
@@ -1,18 +1,14 @@
/* Dash */
-$dash_background_color: #3b3b3b;
+$dash_background_color: lighten($system_bg_color, 5%);
$dash_placeholder_size: 32px;
-$dash_padding: $base_padding + 4px; // 10px
-$dash_spacing: $base_padding / 4;
-
-$dash_bottom_margin: $base_margin * 4;
-
-$dash_border_radius: $modal_radius * 1.5;
+$dash_padding: $base_padding*2; // 12px
+$dash_border_radius: $modal_radius + $dash_padding;
+// container for the dash
#dash {
- @include fontsize($base_font_size - 2);
- margin-top: $base_spacing * 3;
- padding: 0 $dash_padding;
+ @extend %caption;
+ margin-top: $dash_padding;
.placeholder {
// background-image: url("assets/dash-placeholder.svg");
@@ -26,27 +22,46 @@ $dash_border_radius: $modal_radius * 1.5;
height: $dash_placeholder_size;
}
- .overview-icon {
- padding: $dash_padding / 2;
+ // Running app indicator (also shown in app grid)
+ .app-well-app-running-dot {
+ margin-bottom: 14px; // hardcoded
}
}
+// background of the dash behind app icons
.dash-background {
background-color: $dash_background_color;
- margin-bottom: $dash_bottom_margin;
- padding: $dash_padding;
border-radius: $dash_border_radius;
+ padding: $dash_padding;
+ spacing: $base_padding;
+ margin-bottom: $dash_padding;
}
-// Dash Items
-.dash-item-container .app-well-app, .show-apps {
- padding: $dash_padding $dash_spacing $dash_padding + $dash_bottom_margin;
+// items on the dash
+.dash-item-container {
+ > * {margin: 0 2px;}
+ &:ltr:first-child {margin-left: 0;}
+ &:rtl:first-child {margin-right: 0;}
+
+ // each app item on the dash
+ .app-well-app .overview-icon {
+ padding: $base_padding;
+ }
+
+ // show apps button
+ .show-apps { @include overview_icon($osd_fg_color);}
+
+ .show-apps, .app-well-app {
+ padding-bottom: $dash_padding;
+ }
}
+// separator between favourites and running apps
.dash-separator {
width: 1px;
- margin: 0 ($dash_spacing + ($dash_padding / 2)) $dash_bottom_margin;
- background-color: transparentize($osd_fg_color,0.7);
+ margin: 0 $base_margin;
+ background-color: $borders_color;
+ margin-bottom: $dash_padding;
}
// OSD Tooltip
@@ -56,18 +71,5 @@ $dash_border_radius: $modal_radius * 1.5;
border-radius: 99px;
padding: $base_padding $base_padding * 2;
text-align: center;
- -y-offset: $base_margin * 3; // distance from the dash edge
-}
-
-// Show apps button
-.show-apps {
- @include overview-icon($osd_fg_color);
-
- &:focus,
- &:checked {
- .overview-icon {
- background-color: transparentize($osd_bg_color,0.5);
- color: $fg_color;
- }
- }
+ -y-offset: $base_margin * 2; // distance from the dash edge
}
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_dialogs.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_dialogs.scss
index 4577626c..548758dd 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_dialogs.scss
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_dialogs.scss
@@ -1,11 +1,10 @@
/* Modal Dialogs */
.headline {
- @include fontsize($base_font_size + 1);
+ @extend %title_4;
}
.modal-dialog {
- border-radius: $modal_radius;
@extend %bubble_panel;
.modal-dialog-content-box {
@@ -35,13 +34,9 @@
.message-dialog-title {
text-align: center;
- font-size: 18pt;
- font-weight: 800;
+ @extend %title_2;
- &.lightweight {
- font-size: 13pt;
- font-weight: 800;
- }
+ &.lightweight { @extend %title_4;}
}
.message-dialog-description { text-align: center; }
}
@@ -52,7 +47,7 @@
.dialog-list-title {
text-align: center;
- font-weight: bold;
+ @extend %heading;
}
.dialog-list-scrollview { max-height: 200px; }
@@ -65,7 +60,7 @@
.dialog-list-item-title { font-weight: bold; }
.dialog-list-item-description {
color: darken($fg_color,5%);
- @include fontsize($base_font_size - 1);
+ @extend %caption;
}
}
}
@@ -79,7 +74,7 @@
}
.run-dialog-entry { width: 20em; }
.run-dialog-description {
- @include fontsize($base_font_size - 1);
+ @extend %caption;
text-align: center;
color: darken($fg_color, 20%);
}
@@ -120,7 +115,7 @@
.prompt-dialog-info-label,
.prompt-dialog-null-label {
text-align: center;
- @include fontsize($base_font_size - 1);
+ @extend %caption;
}
.prompt-dialog-error-label {
@@ -145,8 +140,7 @@
}
.audio-selection-device {
- border: 1px solid $bubble_borders_color;
- border-radius: 12px;
+ border-radius: $base_border_radius*2;
&:hover,&:focus { background-color: $hover_bg_color; }
&:active {
background-color: $selected_bg_color;
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_entries.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_entries.scss
index 5a119455..6be67609 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_entries.scss
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_entries.scss
@@ -3,23 +3,27 @@
StEntry {
border-radius: $base_border_radius;
padding: 8px;
- border-width: 0;
color: $fg_color;
+
@include entry(normal);
- //&:hover { @include entry(hover);}
+ &:hover { @include entry(hover);}
&:focus { @include entry(focus);}
&:insensitive { @include entry(insensitive);}
+
selection-background-color: $selected_bg_color;
selected-color: $selected_fg_color;
+
StIcon.capslock-warning {
icon-size: 16px;
warning-color: $warning_color;
padding: 0 4px;
}
+
StIcon.peek-password {
icon-size: $base_icon_size;
padding: 0 4px;
}
+
StLabel.hint-text {
margin-left: 2px;
color: transparentize($fg_color, 0.3);
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_ibus-popup.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_ibus-popup.scss
index eead703e..28f89f33 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_ibus-popup.scss
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_ibus-popup.scss
@@ -5,31 +5,32 @@
}
.candidate-popup-content {
- padding: 0.5em;
- spacing: 0.3em;
+ padding: $base_padding;
+ spacing: $base_padding;
+ @extend .popup-menu-content;
}
.candidate-index {
- padding: 0 0.5em 0 0;
- color: darken($fg_color,10%);
+ padding: 0;
+ padding-right: $base_padding;
+ color: $insensitive_fg_color;
}
.candidate-box {
- padding: 0.3em 0.5em 0.3em 0.5em;
+ padding: $base_padding $base_padding*2 $base_padding $base_padding*2;
border-radius: $base_border_radius;
- &:selected,&:hover { background-color: $selected_bg_color; color: $selected_fg_color; }
+ &:selected { background-color: $selected_bg_color; color: $selected_fg_color; }
+ &:hover { background-color: $hover_bg_color; color: $hover_fg_color; }
}
.candidate-page-button-box {
height: 2em;
- .vertical & { padding-top: 0.5em; }
- .horizontal & { padding-left: 0.5em; }
+ .vertical & { padding-top: $base_padding*2; }
+ .horizontal & { padding-left: $base_padding*2; }
}
-.candidate-page-button {
- padding: 4px;
-}
+.candidate-page-button { padding: $base_padding;}
-.candidate-page-button-previous { border-radius: $base_border_radius 0px 0px $base_border_radius; border-right-width: 0; }
-.candidate-page-button-next { border-radius: 0px $base_border_radius $base_border_radius 0px; }
-.candidate-page-button-icon { icon-size: 1em; }
\ No newline at end of file
+.candidate-page-button-previous { border-radius: $base_border_radius 0px 0px $base_border_radius; border-right-width: 0;box-shadow: none;}
+.candidate-page-button-next { border-radius: 0px $base_border_radius $base_border_radius 0px;box-shadow: none;}
+.candidate-page-button-icon { icon-size: $base_icon_size; }
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_keyboard.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_keyboard.scss
index f866d77c..ca049c68 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_keyboard.scss
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_keyboard.scss
@@ -1,15 +1,16 @@
/* On-screen Keyboard */
$key_size: 1.2em;
-$key_border_radius: $base_border_radius + 3px;
-$key_bg_color: $bg_color;
+$key_border_radius: $base_border_radius + 4px; // 12px
+$key_bg_color: $osd_bg_color;
// $default_key_bg_color: darken($key_bg_color, 4%);
-$default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten($osd_bg_color, 2%));
+$default_key_bg_color: lighten($osd_bg_color, 10%);
// draw keys using button function
#keyboard {
- background-color: transparentize(if($variant=='light', darken($bg_color, 5%), darken($bg_color, 8%)), 0.1);
+ // background-color: transparentize(if($variant=='light', darken($bg_color, 5%), darken($bg_color, 8%)), 0.1);
+ background-color: transparentize(darken($osd_bg_color, 10%), 0.04);
box-shadow: inset 0 1px 0 0 $osd_outer_borders_color;
.page-indicator {
@@ -31,18 +32,21 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten
// the keys
.keyboard-key {
- @include button(normal, $c:$key_bg_color);
-
- &:focus { @include button(focus);}
- &:hover, &:checked { @include button(hover, $c: $key_bg_color);}
- &:active { @include button(active, $c: $key_bg_color); }
-
@include fontsize($base_font_size + 5);
+ font-weight: bold;
min-height: $key_size;
min-width: $key_size;
border-width: 1px;
border-style: solid;
border-radius: $key_border_radius;
+ box-shadow: 0 1px 0 0 $shadow_color;
+
+ @include keyboard_key(normal, $key_bg_color, $osd_fg_color);
+
+ &:focus { @include keyboard_key(focus);}
+ &:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
+ &:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); }
+ &:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); }
&:grayed { //FIXMEy
background-color: darken($bg_color, 3%);
@@ -52,42 +56,59 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten
// non-character keys
&.default-key {
- @include button(normal, $c:$default_key_bg_color);
- &:hover, &:checked {@include button(hover, $c: $default_key_bg_color);}
- &:active { @include button(active, $c: $default_key_bg_color);}
+ @include keyboard_key(normal, $default_key_bg_color, $osd_fg_color);
+ &:hover {@include keyboard_key(hover, $default_key_bg_color, $osd_fg_color);}
+ &:active { @include keyboard_key(active, $default_key_bg_color, $osd_fg_color);}
+ &:checked { @include keyboard_key(checked, $default_key_bg_color, $osd_fg_color);}
+ border-radius: $key_border_radius;
}
// enter key is suggested-action
&.enter-key {
- @include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color);
- &:hover, &:checked { @include button(hover, $c: lighten($selected_bg_color, 3%));}
- &:active {@include button(active, $c: darken($selected_bg_color, 2%));}
+ @include keyboard_key(normal, $selected_bg_color, $selected_fg_color);
+ &:hover { @include keyboard_key(hover, $selected_bg_color, $selected_fg_color);}
+ &:active {@include keyboard_key(active, $selected_bg_color, $selected_fg_color);}
+ &:checked {@include keyboard_key(checked, $selected_bg_color, $selected_fg_color);}
+ border-radius: $key_border_radius;
+ color: $osd_fg_color;
}
- &.shift-key-uppercase { color: $selected_bg_color }
+ &.shift-key-lowercase {}
+
+ // pressed shift has different style
+ &.shift-key-uppercase {
+ background-color: lighten($key_bg_color, 20%);
+ color: $osd_bg_color;
+ &:hover {
+ background-color: lighten($key_bg_color, 25%);
+ color: lighten($osd_bg_color, 5%);
+ }
+ }
- StIcon { icon-size: 1.125em; }
+ // size of icons on keys
+ StIcon { icon-size: 24px; }
}
// long press on a key popup
.keyboard-subkeys {
- color: $osd_fg_color;
- -arrow-border-radius: $modal_radius;
+ -arrow-border-radius: $base_border_radius*2;
-arrow-background-color: $osd_bg_color;
-arrow-border-width: 1px;
-arrow-border-color: lighten($osd_bg_color, 9%);
-arrow-base: 20px;
-arrow-rise: 10px;
- -boxpointer-gap: $base_spacing;
+ -boxpointer-gap: $base_padding;
+ padding: $base_padding;
.keyboard-key {
- @include button(normal, $c:$key_bg_color);
+ @include keyboard_key(normal, $key_bg_color, $osd_fg_color);
- &:focus { @include button(focus);}
- &:hover, &:checked { @include button(hover, $c: $key_bg_color);}
- &:active { @include button(active, $c: $key_bg_color); }
+ &:focus { @include keyboard_key(focus);}
+ &:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
+ &:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); }
+ &:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); }
- border-radius:$base_border_radius;
+ border-radius:$key_border_radius;
}
}
@@ -112,4 +133,21 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten
@include fontsize($base_font_size + 3);
spacing: 12px;
min-height: 20pt;
+ padding: $base_padding*2;
+ color: $osd_fg_color;
+
+ // each suggestion
+ StButton {
+ margin: 0 3px;
+ min-width: 32px;
+ border-radius: $base_border_radius - 2px;
+ padding: $base_padding $base_padding*3;
+
+ @include keyboard_key(undecorated, $key_bg_color, $osd_fg_color);
+
+ &:focus { @include keyboard_key(focus);}
+ &:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
+ &:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); }
+ &:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); }
+ }
}
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_keyboard.scss.patch b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_keyboard.scss.patch
new file mode 100644
index 00000000..6a21d8a7
--- /dev/null
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_keyboard.scss.patch
@@ -0,0 +1,12 @@
+5c5
+< $key_bg_color: darken($osd_fg_color, 70%);
+---
+> $key_bg_color: $osd_bg_color;
+7c7
+< $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken($key_bg_color, 10%));
+---
+> $default_key_bg_color: lighten($osd_bg_color, 10%);
+13c13
+< background-color: $osd_bg_color;
+---
+> background-color: transparentize(darken($osd_bg_color, 10%), 0.04);
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_login-dialog.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_login-dialog.scss
index 1789beca..2572f970 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_login-dialog.scss
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_login-dialog.scss
@@ -13,14 +13,6 @@
$_gdm_bg: $system_bg_color;
- StEntry {
- @if $variant=='dark' {
- $_gdm_entry_bg: darken($system_bg_color, 3%);
- background-color: $_gdm_entry_bg;
- color: $fg_color;
- }
- }
-
.modal-dialog-button-box { spacing: 3px; }
.modal-dialog-button {
padding: 4px 18px;
@@ -47,26 +39,7 @@
color: transparentize($osd_fg_color, 0.3);
}
&:default {
- @include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color);
- border-color: $selected_bg_color;
- &:hover, &:focus {
- @include button(hover,$c:$selected_bg_color, $tc:$selected_fg_color);
- $_def_hover_c: lighten($selected_bg_color, 5%);
- background-color: $_def_hover_c;
- border-color: $_def_hover_c;
- }
- &:active {
- @include button(active,$c:$selected_bg_color, $tc:$selected_fg_color);
- $_def_active_c: darken($selected_bg_color, 5%);
- background-color: $_def_active_c;
- border-color: $_def_active_c;
- }
- &:insensitive {
- @include button(insensitive);
- border-color: darken($selected_bg_color, 10%);
- background-color: darken($selected_bg_color, 10%);
- color: transparentize($selected_fg_color, 0.3);
- }
+ @include button(default);
}
}
@@ -75,8 +48,8 @@
.login-dialog-session-list-button {
padding: 0;
border-radius: 99px;
- width: $base_icon_size * 2;
- height: $base_icon_size * 2;
+ width: $large_icon_size;
+ height: $large_icon_size;
border-color: darken($system_bg_color, 3%);
background-color: darken($system_bg_color, 3%);
@@ -103,12 +76,38 @@
}
.login-dialog-not-listed-label {
- @include fontsize($base_font_size - 1);
+ @extend %caption;
font-weight: bold;
color: darken($osd_fg_color,30%);
padding-top: 1em;
}
+.login-dialog-auth-list-view { -st-vfade-offset: 1em; }
+.login-dialog-auth-list {
+ spacing: 6px;
+ margin-left: 2em;
+}
+
+.login-dialog-auth-list-title {
+ margin-left: 2em;
+}
+
+.login-dialog-auth-list-item {
+ border-radius: $base_border_radius + 4px;
+ padding: 6px;
+ color: darken($osd_fg_color,30%);
+ &:focus, &:selected { background-color: $selected_bg_color; color: $selected_fg_color; }
+}
+
+.login-dialog-auth-list-label {
+ @include fontsize($base_font_size + 2);
+ font-weight: bold;
+ padding-left: 15px;
+
+ &:ltr { padding-left: 14px; text-align: left; }
+ &:rtl { padding-right: 14px; text-align: right; }
+}
+
.login-dialog-user-list-view { -st-vfade-offset: 1em; }
.login-dialog-user-list {
spacing: 12px;
@@ -159,7 +158,7 @@
.login-dialog-prompt-layout {
padding-top: 24px;
padding-bottom: 12px;
- spacing: $base_spacing * 2;
+ spacing: $base_padding * 2;
width: 23em;
}
@@ -172,3 +171,34 @@
@include fontsize($base_font_size + 1);
padding-top: 1em;
}
+
+.login-dialog {
+ StEntry {
+ @if $variant=='dark' {
+ $_gdm_entry_bg: darken($system_bg_color, 3%);
+ background-color: $_gdm_entry_bg;
+ color: $fg_color;
+ }
+ }
+}
+
+// Custom styling for unlock entry
+.unlock-dialog {
+ StEntry {
+ border:none !important;
+ &:focus {
+ background-color: transparentize($fg_color, 0.9);
+ }
+ &:insensitive {
+ color: transparentize($fg_color, 0.5);
+ background-color: transparentize($fg_color, 0.95);
+ }
+ }
+
+ .cancel-button,
+ .switch-user-button,
+ .login-dialog-session-list-button {
+ border-color: transparent;
+ background-color: transparentize($fg_color, 0.9);
+ }
+}
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_looking-glass.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_looking-glass.scss
index 006c2ef9..8639889e 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_looking-glass.scss
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_looking-glass.scss
@@ -1,46 +1,65 @@
/* Looking Glass */
-$text_fg_color: #ccc;
-
// Dialog
#LookingGlassDialog {
background-color: $osd_bg_color;
- spacing: $base_spacing;
- padding: 4px;
- border: 1px solid transparentize($osd_fg_color, 0.8);
- border-radius: $base_border_radius;
+ border-radius: 0 0 $modal_radius $modal_radius;
+ border-top-width: 0;
+ border: 1px solid $osd_outer_borders_color;
color: $osd_fg_color;
+ padding: $base_padding;
+ spacing: $base_padding;
+ box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
& > #Toolbar {
border: none;
- border-radius: $base_border_radius;
- background-color: $osd_bg_color;
+ padding: $base_padding;
+ border-radius: 0;
+ background-color: transparent;
+ spacing: $base_padding;
+
+ .lg-toolbar-button {
+ padding: $base_padding $base_padding*2;
+ @extend %button;
+
+ & > StIcon { icon-size: $base_icon_size; }
+ }
+ }
+
+ .labels {
+ spacing: $base_padding;
}
- .labels { spacing: $base_spacing; }
.notebook-tab {
- -natural-hpadding: $base_padding * 2;
- -minimum-hpadding: 6px;
+ -natural-hpadding: $base_padding*2;
+ -minimum-hpadding: $base_padding*2;
+
font-weight: bold;
+ padding: $base_padding $base_padding*2;
color: darken($osd_fg_color, 15%);
transition-duration: 100ms;
- padding-left: .3em;
- padding-right: .3em;
- border-bottom-width: 2px;
+ box-shadow:none;
+ border:none;
+ border-radius: $base_border_radius - 2px;
+ background-color: transparent;
+
&:hover {
color: $osd_fg_color;
+ background-color: transparentize($osd_fg_color, 0.95);
}
+
&:selected {
- border-bottom-width: 2px;
- box-shadow: inset 0 -2px 0 0 lighten($selected_bg_color, 5%);
color: $osd_fg_color;
+ background-color: transparentize($osd_fg_color, 0.9);
}
}
- StBoxLayout#EvalBox { padding: 4px; spacing: $base_spacing; }
- StBoxLayout#ResultsArea { spacing: $base_spacing; }
+
+ StBoxLayout#EvalBox { padding: 4px; spacing: $base_padding; padding: $base_padding; }
+ StBoxLayout#ResultsArea { spacing: $base_padding; padding: $base_padding; }
}
.lg-dialog {
+
StEntry {
background-color: transparentize(lighten($osd_bg_color, 5%), 0.4);
color: $osd_fg_color;
@@ -49,55 +68,55 @@ $text_fg_color: #ccc;
selection-background-color: $selected_bg_color;
selected-color: $selected_fg_color;
}
+
.shell-link {
color: $link_color;
&:hover { color: lighten($link_color, 10%); }
&:active { color: darken($link_color, 10%); }
}
+
.actor-link {
- color: $text_fg_color;
- &:hover { color: lighten($text_fg_color, 20%); }
- &:active { color: darken($text_fg_color, 20%); }
+ color: $insensitive_fg_color;
+ &:hover { color: lighten($insensitive_fg_color, 20%); }
+ &:active { color: darken($insensitive_fg_color, 20%); }
}
}
.lg-completions-text {
- font-size: .9em;
- font-style: italic;
+ @extend %caption;
+ font-style: italic;
}
.lg-obj-inspector-title {
- spacing: $base_spacing;
+ spacing: $base_padding;
}
.lg-obj-inspector-button {
- border: 1px solid $osd_borders_color;
- padding: 4px;
- border-radius: $base_border_radius;
- &:hover { border: 1px solid #ffffff; }
+ border: 1px solid $osd_borders_color;
+ padding: 4px;
+ border-radius: $base_border_radius;
+ &:hover { border: 1px solid #ffffff; }
}
// Extensions
-#lookingGlassExtensions { padding: 4px; }
+#lookingGlassExtensions { padding: $base_padding; }
.lg-extensions-list {
- padding: 4px;
- spacing: 6px;
+ padding: $base_padding;
+ spacing: $base_padding;
}
.lg-extension {
- border: 1px solid lighten($osd_borders_color, 5%);
- background-color: lighten($osd_bg_color, 5%);
- border-radius: $base_border_radius;
- padding: 4px;
+ padding: $base_padding*2;
+ @include card;
}
.lg-extension-name {
- font-weight: bold;
+ @extend %heading;
}
.lg-extension-meta {
- spacing: 6px;
+ spacing: $base_padding;
}
// Inspector
@@ -105,5 +124,19 @@ $text_fg_color: #ccc;
background: $osd_bg_color;
border: 1px solid $osd_borders_color;
border-radius: $base_border_radius;
- padding: 6px;
-}
\ No newline at end of file
+ padding: $base_padding;
+}
+
+.lg-debug-flag-button {
+ StLabel { padding: $base_padding, 2 * $base_padding; }
+
+ color: $fg_color;
+ &:hover { color: lighten($fg_color, 20%); }
+ &:active { color: darken($fg_color, 20%); }
+}
+
+.lg-debug-flags-header {
+ padding-top: 2 * $base_padding;
+ padding: $base_padding;
+ @extend %title_2;
+}
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_message-list.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_message-list.scss
index bb9239f4..7f93e817 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_message-list.scss
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_message-list.scss
@@ -3,28 +3,47 @@
// main list
.message-list {
- width: 31.5em;
- padding: 0 $base_padding * 2;
+ width: 29em;
+ border: solid $borders_color;
- .message-list-placeholder { spacing: 12px; }
+ // padding and margins to account for scrollbar
+ &:ltr {margin-left: 0; margin-right: $base_margin; padding-right: $base_padding; border-right-width: 1px; }
+ &:rtl {margin-right: 0; margin-left: $base_margin; padding-left: $base_padding; border-left-width: 1px; }
+
+ .message-list-placeholder {
+ @extend %title_2;
+ color: transparentize($insensitive_fg_color, .5);
+
+ // icon size and color
+ > StIcon {
+ icon-size: $base_icon_size*3; // 48px
+ margin-bottom: $base_margin*3;
+ -st-icon-style: symbolic;
+ }
+ }
}
.message-list-sections {
- spacing: $base_spacing;
- margin: 0 $base_margin * 4; // to account for scrollbar
+ spacing: $base_padding;
+ margin: 0;
+ padding-bottom: $base_padding;
+
+ // to account for scrollbar
+ &:ltr {margin-right: $base_margin * 3; }
+ &:rtl {margin-left: $base_margin * 3;}
}
.message-list-section,
.message-list-section-list {
- spacing: $base_spacing;
+ spacing: $base_padding;
}
// do-not-disturb + clear button
.message-list-controls {
- margin: ($base_margin * 2) ($base_margin * 4) 0;
// NOTE: remove the padding if notification_bubble could remove margin for drop shadow
- padding: $base_margin;
- spacing: $base_spacing * 2;
+ padding: $base_padding;
+ spacing: $base_padding;
+ @extend %heading;
.dnd-button {
// We need this because the focus outline isn't inset like for the buttons
@@ -32,7 +51,7 @@
// its color when focusing.
border-width: 2px;
border-color: transparent;
- border-radius: 99px;
+ border-radius: 32px;
border-style: solid;
&:focus {
@@ -43,19 +62,18 @@
// message bubbles
.message {
- @include notification_bubble;
+ @include card;
// icon container
.message-icon-bin {
- padding: ($base_padding * 3) 0 ($base_padding * 3) ($base_padding * 2);
+ padding: ($base_padding * 3);
- &:rtl {
- padding: ($base_padding * 3) ($base_padding * 2) ($base_padding * 3) 0;
- }
+ &:ltr {padding-right:$base_padding;}
+ &:rtl {padding-left:$base_padding;}
// icon size and color
> StIcon {
- icon-size: $base_icon_size*2; // 32px
+ icon-size: $large_icon_size; // 32px
-st-icon-style: symbolic;
}
@@ -68,13 +86,16 @@
// content
.message-content {
- padding: $base_padding + $base_margin * 2;
spacing: 4px;
+ padding: ($base_padding*1.5);
+ margin-bottom: $base_margin*2;
}
// title
.message-title {
font-weight: bold;
+ /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
+ padding-top: 0.57em;
}
// secondary container in title box
@@ -95,15 +116,17 @@
// close button
.message-close-button {
- color: lighten($fg_color, 15%);
- &:hover { color: if($variant=='light', lighten($fg_color, 30%), darken($fg_color, 10%)); }
- &:active { color: if($variant=='light', lighten($fg_color, 40%), darken($fg_color, 20%)); }
+ color: $fg_color;
+ background-color: transparentize($fg_color, 0.9);
+ border-radius: 99px;
+ padding: $base_padding - 1px;
+ margin: 1px;
+ &:hover {background-color: transparentize($fg_color, 0.8);}
+ &:active {background-color: transparentize($fg_color, 0.9);}
}
// body
- .message-body {
- color: darken($fg_color, 10%);
- }
+ .message-body {color: darken($fg_color, 10%);}
}
// URLs in messages
@@ -113,30 +136,32 @@
/* Media Controls */
.message-media-control {
- padding: $base_padding * 2 1.64em; // $base_padding * 4 = 24px
- color: darken($fg_color, 15%);
+ padding: 0 $base_padding*3;
+ margin: $base_padding*2 0;
+ border-radius: $base_border_radius;
+ color: $fg_color;
- // uses $hover_bg_color since the media controls are in a notification_bubble
+ // colors are lightened since the media controls are in a card
&:hover {
background-color: lighten($hover_bg_color, 5%);
color: $fg_color;
}
&:active {
- background-color: darken($hover_bg_color, 2%);
+ background-color: lighten($active_bg_color, 5%);
color: $fg_color;
}
- &:insensitive { color: darken($fg_color,40%); }
+ &:insensitive { color: lighten($insensitive_fg_color, 5%); }
- // fix border-radius for last button
- &:last-child:ltr { border-radius: 0 $base_border_radius+2 $base_border_radius+2 0; }
- &:last-child:rtl { border-radius: $base_border_radius+2 0 0 $base_border_radius+2; }
+ // fix margin for last button
+ &:last-child:ltr { margin-right: $base_margin*3; }
+ &:last-child:rtl { margin-left: $base_margin*3; }
}
// album-art
.media-message-cover-icon {
- icon-size: $base_icon_size*2 !important; // 48px
+ icon-size: $base_icon_size*3 !important; // 48px
border-radius: $base_border_radius;
// when there is no artwork
@@ -145,6 +170,7 @@
background-color: $bg_color;
border: 1px solid transparent;
border-radius: $base_border_radius;
- icon-size: $base_icon_size * 2 !important;
+ icon-size: $large_icon_size !important; // 32px
+ padding: ($base_padding*2 + 2); // 16px
}
}
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_misc.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_misc.scss
index 0fe174a7..74092782 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_misc.scss
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_misc.scss
@@ -48,7 +48,7 @@
.caps-lock-warning-label {
text-align: center;
padding-bottom: 8px;
- @include fontsize($base_font_size - 1);
+ @extend %caption;
color: $warning_color;
}
@@ -57,3 +57,9 @@
.workspace-animation {
background-color: $system_bg_color;
}
+
+/* Tiled window previews */
+.tile-preview {
+ background-color: transparentize($selected_bg_color,0.5);
+ border: 1px solid $selected_bg_color;
+}
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_network-dialog.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_network-dialog.scss
index 7973d225..11e4e676 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_network-dialog.scss
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_network-dialog.scss
@@ -1,4 +1,4 @@
-/* Network Dialogs */
+/* Select Network dialogs */
.nm-dialog {
max-height: 34em;
min-height: 31em;
@@ -10,47 +10,39 @@
padding: 24px;
}
-.nm-dialog-airplane-box { spacing: 12px; }
-
-.nm-dialog-airplane-headline {
- font-weight: bold;
- text-align: center;
-}
-
-.nm-dialog-airplane-text { color: $fg_color; }
-
-// header
-.nm-dialog-header {
- font-weight: bold;
-}
-.nm-dialog-header-icon {
- icon-size: $base_icon_size * 2;
-}
+.nm-dialog-header { @extend %heading; }
+.nm-dialog-subheader { color: $insensitive_fg_color;}
+.nm-dialog-header-icon { icon-size: $large_icon_size;}
.nm-dialog-header-hbox { spacing: 10px; }
-// list of networks
.nm-dialog-scroll-view {
- border: 1px solid $borders_color;
- padding:0;
- background-color: darken($bg_color, 3%);
+ padding:$base_padding;
+ border-radius: $base_border_radius;
+ background-color: $base_color;
}
-// list item
.nm-dialog-item {
- @include fontsize($base_font_size);
- border-bottom: 1px solid $borders_color;
padding: $base_padding * 2;
- spacing: 0px;
+
&:selected {
background-color: $selected_bg_color;
+ border-radius: $base_border_radius - 3px;
color: $selected_fg_color;
}
+ &:hover { background-color:$hover_bg_color;}
}
-// icons in list
.nm-dialog-icon { icon-size: $base_icon_size; }
-.nm-dialog-icons { spacing: $base_spacing * 2; }
+.nm-dialog-icons { spacing: $base_padding * 2; }
// no networks
+.no-networks-box { spacing: $base_padding; }
.no-networks-label { color: $insensitive_fg_color; }
-.no-networks-box { spacing: $base_padding; }
\ No newline at end of file
+
+// airplane mode
+.nm-dialog-airplane-box {
+ text-align: center;
+ spacing: 12px;
+}
+.nm-dialog-airplane-headline { @extend %title_3;}
+.nm-dialog-airplane-text { color: $insensitive_fg_color;}
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_notifications.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_notifications.scss
index 5ff46a05..7866767e 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_notifications.scss
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_notifications.scss
@@ -2,11 +2,15 @@
$notification_banner_height: 64px;
$notification_banner_width: 34em;
+$notification_banner_radius: $base_border_radius*1.5;
// Banner notifications
.notification-banner {
min-height: $notification_banner_height;
width: $notification_banner_width;
+ box-shadow: 0 2px 4px 2px rgba(0,0,0,0.1);
+ border-radius: $notification_banner_radius;
+ margin: $base_margin;
.notification-actions {
spacing: 0;
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_osd.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_osd.scss
index f85124c7..e4fb0e57 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_osd.scss
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_osd.scss
@@ -1,29 +1,39 @@
/* OSD */
-$osd_levelbar_height:8px;
+$osd_levelbar_height:6px;
.osd-window {
@extend %osd_panel;
+ @extend %heading;
text-align: center;
font-weight: bold;
- spacing: $base_spacing * 2; // 12px
- margin: $base_margin * 8; // 32px
- min-width: 64px;
- min-height: 64px;
+ spacing: $base_padding * 2; // 12px
+ padding: $base_padding * 2 $base_padding * 3;
+ & > * { spacing: 8px; }
+ margin-bottom: 4em;
- StIcon {
- icon-size:$base_icon_size * 6;
- }
+ StIcon { icon-size:$large_icon_size;}
.osd-monitor-label { font-size: 3em; }
+ StLabel {
+ &:ltr { margin-right: 6px; }
+ &:rtl { margin-left: 6px; }
+ }
+
.level {
+ margin-bottom: 4px;
+ &:first-child { margin-bottom: 0px; }
+
height: $osd_levelbar_height;
+ min-width:$base_icon_size * 10;
-barlevel-height: $osd_levelbar_height;
-barlevel-background-color: transparentize($osd_fg_color, if($variant=='light', 0.7, 0.9));
-barlevel-active-background-color: $osd_fg_color;
-barlevel-overdrive-color: $destructive_color;
-barlevel-overdrive-separator-width: 3px;
+ &:ltr { margin-right: 6px; }
+ &:rtl { margin-left: 6px; }
}
}
@@ -42,4 +52,4 @@ $osd_levelbar_height:8px;
.resize-popup {
@extend %osd_panel;
-}
\ No newline at end of file
+}
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_overview.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_overview.scss
index c593cebc..d8e70eaf 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_overview.scss
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_overview.scss
@@ -1,7 +1,7 @@
/* OVERVIEW */
.controls-manager, .secondary-monitor-workspaces {
- spacing: $base_spacing * 2;
+ spacing: $base_padding * 2;
}
#overviewGroup {
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_panel.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_panel.scss
index 1f465077..3fc57eb0 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_panel.scss
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_panel.scss
@@ -1,9 +1,8 @@
/* Top Bar */
// a.k.a. the panel
-$panel_corner_radius: $base_border_radius+1;
$panel_bg_color: #000;
-$panel_fg_color: #ddd;
+$panel_fg_color: if($variant == 'light', lighten($bg_color, 10%), darken($fg_color, 5%));
$panel_height: 2.2em;
$panel_transition_duration: 250ms; // same as the overview transition duration
@@ -11,7 +10,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
background-color: $panel_bg_color;
font-weight: bold;
height: $panel_height;
- font-feature-settings: "tnum";
+ @extend %numeric;
transition-duration: $panel_transition_duration;
// transparent panel on lock & login screens
@@ -19,20 +18,6 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
&.login-screen,
&:overview {
background-color: transparent;
-
- .panel-corner {
- -panel-corner-opacity: 0;
- }
- }
-
- // the rounded outset corners
- .panel-corner {
- -panel-corner-radius: $panel_corner_radius;
- -panel-corner-background-color: $panel_bg_color;
- -panel-corner-border-width: 2px;
- -panel-corner-border-color: transparent;
- -panel-corner-opacity: 1;
- transition-duration: $panel_transition_duration;
}
// panel menus
@@ -53,8 +38,20 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
}
}
- &:hover, &:active, &:overview, &:focus, &:checked {
- box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.20);
+ &.screen-recording-indicator {
+ box-shadow: inset 0 0 0 100px $screenshot_ui_button_red;
+
+ StBoxLayout {
+ spacing: $base_padding;
+ }
+
+ StIcon {
+ icon-size: $base_icon_size;
+ }
+ }
+
+ &:active, &:overview, &:focus, &:checked {
+ box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.8);
// The clock display needs to have the background on .clock because
// we want to exclude the do-not-disturb indicator from the background
@@ -62,9 +59,41 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
box-shadow: none;
.clock {
- box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.20);
+ box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.8);
}
}
+
+ &.screen-recording-indicator {
+ box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.15);
+ }
+ }
+
+ &:hover {
+ box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.85);
+ &.clock-display {
+ box-shadow: none;
+ .clock {
+ box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.85);
+ }
+ }
+
+ &.screen-recording-indicator {
+ box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.1);
+ }
+ }
+
+ &:active:hover, &:overview:hover, &:focus:hover, &:checked:hover {
+ box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.75);
+ &.clock-display {
+ box-shadow: none;
+ .clock {
+ box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.75);
+ }
+ }
+
+ &.screen-recording-indicator {
+ box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.2);
+ }
}
// status area icons
@@ -94,16 +123,48 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
&.login-screen,
&:overview {
.panel-button {
- &:hover, &:active, &:overview, &:focus, &:checked {
- box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15);
+ &:active, &:overview, &:focus, &:checked {
+ box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.15);
&.clock-display {
box-shadow: none;
.clock {
- box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15);
+ box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.15);
}
}
+
+ &.screen-recording-indicator {
+ box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.15);
+ }
+ }
+
+ &:hover {
+ box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.10);
+ &.clock-display {
+ box-shadow: none;
+ .clock {
+ box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.10);
+ }
+ }
+
+ &.screen-recording-indicator {
+ box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.1);
+ }
+ }
+
+ &:active:hover, &:overview:hover, &:focus:hover, &:checked:hover {
+ box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.2);
+ &.clock-display {
+ box-shadow: none;
+ .clock {
+ box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.2);
+ }
+ }
+
+ &.screen-recording-indicator {
+ box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.2);
+ }
}
}
}
@@ -125,11 +186,23 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
// App Menu
#appMenu {
- spacing: $base_spacing;
+ spacing: $base_padding;
.label-shadow { color: transparent; }
}
#appMenu .panel-status-menu-box {
padding: 0 $base_padding;
- spacing: $base_spacing;
+ spacing: $base_padding;
+}
+
+
+// Clock
+
+.clock-display-box {
+ spacing: 2px;
+
+ .clock {
+ padding-left: $base_padding * 2;
+ padding-right: $base_padding * 2;
+ }
}
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_popovers.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_popovers.scss
index db9df9aa..08ad3246 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_popovers.scss
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_popovers.scss
@@ -1,16 +1,8 @@
/* Popovers/Menus */
-$popover_arrow_height: 12px;
-
-//.the popover itself
+// the popover itself
.popup-menu-boxpointer {
- -arrow-border-radius: $base_border_radius+4;
- -arrow-background-color: $bg_color;
- -arrow-border-width: 1px;
- -arrow-border-color: $borders_color;
- -arrow-base: $popover_arrow_height * 2;
- -arrow-rise: $popover_arrow_height;
- -arrow-box-shadow: 0 1px 3px rgba(0,0,0,0.5); // dreaming bugzilla #689995
+ -arrow-rise: $base_margin+2px; // distance from the panel & screen edge
}
// container of the popover menu
@@ -18,114 +10,195 @@ $popover_arrow_height: 12px;
min-width: 15em;
color: $fg_color;
- //.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is
+ //.popup-status-menu-item {font-weight: normal; color: pink;} //dunno what that is
&.panel-menu {
- -boxpointer-gap: $base_margin; // distance from the panel
- margin-bottom: 1.75em;
+ margin-bottom: 1.75em; // so it doesn't touch the bottom of the screen
}
}
+// popover content
.popup-menu-content {
- padding: $base_padding * 2 + $base_margin 0;
+ padding: $base_padding;
+ border-radius: $modal_radius - 2px;
+ border: 1px solid $borders_edge;
+ box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
+ background-color: $bg_color;
}
// menu items
.popup-menu-item {
+ padding: $base_padding*1.5 $base_padding*2;
+ border-radius: $base_border_radius;
spacing: $base_padding;
- padding: $base_padding;
+ transition: 0.2s all ease;
+ background-color: transparent;
- &:ltr { padding-right:1.75em; padding-left: 0; }
- &:rtl { padding-right: 0; padding-left:1.75em; }
+ &:ltr {padding-left: $base_padding;}
+ &:rtl {padding-right: $base_padding;}
+
+ &:focus, &:hover {
+ background-color: $hover_bg_color !important;
+ &:active { background-color: $active_bg_color !important;}
+ }
+
+ &:checked {background-color: $checked_bg_color !important;}
&:checked {
- background-color: lighten($bg_color, 2%);
- box-shadow: none;
+ margin-bottom: 0;
+ box-shadow: inset 0 -1px 0 0 darken($checked_bg_color, 5%);
+ border-radius: $base_border_radius $base_border_radius 0 0;
+ &:focus,&:hover { background-color: lighten($checked_bg_color, 3%) !important;}
+ &:active { background-color: lighten($checked_bg_color, 5%) !important;}
}
- &.selected {
- background-color: transparentize(white, if($variant=='light', 0.2, 0.9));
- color: $fg_color;
+ &:active {
+ background-color: lighten($active_bg_color, 5%);
+ color: $active_fg_color;
}
- &:active {
- background-color: $selected_bg_color;
- color: $selected_fg_color;
- }
+ &:insensitive {color: transparentize($fg_color,0.5);}
- &:insensitive { color: transparentize($fg_color,0.5);}
+ // add margin to switches in menu items
+ .toggle-switch {
+ &:ltr { margin-left: $base_margin;}
+ &:rtl { margin-right: $base_margin;}
+ }
}
-// all icons and other graphical elements
+
+// all other graphical elements (sliders)
.popup-inactive-menu-item {
color: $fg_color;
-
- &:insensitive { color: transparentize($fg_color,0.5); }
+ &:insensitive { color: $insensitive_fg_color; }
}
// symbolic icons in popover
.popup-menu-arrow,
-.popup-menu-icon { icon-size: $base_icon_size; }
+.popup-menu-icon {
+ icon-size: 16px !important; // for some reason the variable doesn't work here
+}
+
+.popup-menu-arrow {
+}
+
// popover submenus
.popup-sub-menu {
- background-color: darken($bg_color, 3%);
- box-shadow: none;
- border-top: 1px solid transparentize($borders_color, 0.2);
- border-bottom: 1px solid transparentize($borders_color, 0.2);
+ background-color: $checked_bg_color;
+ border-radius: 0 0 $base_border_radius $base_border_radius;
+
+ .popup-menu-ornament {
+ min-width: $base_icon_size !important;
+ }
+
+ // submenu specific styles
+ .popup-menu-item {
+ border-radius: 0;
+ margin: 0;
+
+ &:last-child {
+ border-radius: 0 0 $base_border_radius $base_border_radius;
+ }
+
+ &:focus,&:hover { background-color: lighten($hover_bg_color, 10%) !important;}
+ &:checked {
+ background-color: lighten($checked_bg_color, 10%) !important;
+ &:focus,&:hover { background-color: lighten($checked_bg_color, 8%) !important;}
+ }
+ &:active { background-color: lighten($active_bg_color, 10%) !important;}
+ }
+
+ .popup-menu-section {
+ .popup-menu-item:last-child {
+ &:hover,&:focus { border-radius: 0;}
+ }
+ &:last-child .popup-menu-item:last-child {
+ border-radius: 0 0 $base_border_radius $base_border_radius;
+ }
+ }
}
// container for radio and check boxes
.popup-menu-ornament {
+ @extend %heading;
width: 1.2em;
+ text-align: center !important;
- &:ltr { text-align: right };
- &:rtl { text-align: left };
+ &:ltr { text-align: right;}
+ &:rtl { text-align: left;}
}
// separator
.popup-separator-menu-item {
- padding: 0;
+ margin: 6px 0;
+ padding:0 !important;
+ &:ltr { margin-right: $base_margin;}
+ &:rtl { margin-left: $base_margin;}
.popup-separator-menu-item-separator {
- //-margin-horizontal: 24px;
height: 1px; //not really the whole box
- margin: 6px 64px;
- background-color: lighten($borders_color, 2%);
- .popup-sub-menu & { //submenu separators
- margin: 0 64px 0 32px;
- @if $variant == 'dark' {
- background-color: lighten($bg_color,10%);
- }
+ background-color: $borders_color;
+ }
+
+ .popup-menu-ornament {
+ width: 0 !important;
+ }
+
+ // separators in submenus
+ .popup-sub-menu & {
+ background-color: transparent;
+
+ // account for ornament
+ &:ltr { margin-right: 2.5em;}
+ &:rtl { margin-left: 2.5em;}
+
+ .popup-separator-menu-item-separator {
+ background-color: lighten($borders_color, 7%);
}
}
}
// desktop background menu
.background-menu {
- -boxpointer-gap: $base_margin;
+ -boxpointer-gap: 0px;
-arrow-rise: 0px; // hide the beak on the menu
}
// system status menu
.aggregate-menu {
- min-width: 21em;
+ min-width: 22em;
+
+ // this is unneeded at the top-level in this menu, hide it
+ .popup-menu-ornament { width: 0 !important; }
// lock screen, shutdown, etc. buttons
- .popup-menu-icon {
- padding:0;
- margin: 0 $base_margin;
+ .popup-menu-icon {
-st-icon-style: symbolic;
+ &:ltr {margin-right: $base_margin*2;}
+ &:rtl {margin-left: $base_margin*2;}
}
+ // account for ornaments in submenus with padding
.popup-sub-menu .popup-menu-item > :first-child {
- // account for icons in submenus with padding
- &:ltr {
- padding-left: $base_padding + $base_margin * 2;
- margin-left: $base_icon_size;
- }
- &:rtl {
- padding-right: $base_padding + $base_margin * 2; ;
- margin-right: $base_icon_size;
+ // this value is hardcoded for visual effect
+ &:ltr { margin-left: 1em;}
+ &:rtl { margin-right: 1em;}
+ }
+}
+
+// right-click (and panel) app menu
+.app-menu {
+ max-width: 27.25em;
+
+ // this is unneeded at the top-level in this menu, hide it
+ .popup-menu-ornament { width: 0 !important; }
+
+ .popup-inactive-menu-item:first-child {
+ // "Open Windows" label
+ > StLabel {
+ @extend %caption_heading;
+ &:ltr {margin-right: $base_margin*2;}
+ &:rtl {margin-left: $base_margin*2;}
}
}
}
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_screen-shield.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_screen-shield.scss
index e289fdba..6550e5bc 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_screen-shield.scss
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_screen-shield.scss
@@ -11,7 +11,7 @@
.unlock-dialog-clock-time {
font-size: 64pt;
padding-top: 42px;
- font-feature-settings: "tnum";
+ @extend %numeric;
}
.unlock-dialog-clock-date {
@@ -25,10 +25,11 @@
}
.unlock-dialog-notifications-container {
- margin: 12px 0;
+ margin: 12px;
spacing: 6px;
width: 23em;
background-color: transparent;
+
.summary-notification-stack-scrollview {
padding-top: 0;
padding-bottom: 0;
@@ -36,39 +37,36 @@
.notification,
.unlock-dialog-notification-source {
- padding: 12px 6px;
+ padding: 12px 16px;
border: none;
- background-color: transparentize($osd_bg_color,0.7);
+ background-color: transparentize($osd_fg_color,0.9);
color: $osd_fg_color;
border-radius: $modal_radius;
- &.critical { background-color: transparentize($osd_bg_color,0.1) }
+ &.critical { background-color: transparentize($osd_fg_color,0.8) }
}
}
.unlock-dialog-notification-label {
- padding: 0px 0px 0px 12px;
+ padding: 0 0 0 12px;
}
.unlock-dialog-notification-count-text {
- weight: bold;
- padding: 0 6px;
- color: $osd_bg_color;
- background-color: transparentize($osd_fg_color, 0.7);
+ font-weight: bold;
+ padding: 0 12px;
+ color: $osd_fg_color;
+ background-color: transparentize($osd_fg_color, 0.9);
border-radius: 99px;
- margin-right: 12px;
-
}
.screen-shield-background { //just the shadow, really
background: black;
- box-shadow: 0px 2px 4px rgba(0,0,0,0.6);
+ box-shadow: 0 2px 4px rgba(0,0,0,0.6);
}
#lockDialogGroup {
background-color: $system_bg_color;
}
-
#unlockDialogNotifications {
StButton#vhandle, StButton#hhandle {
background-color: transparentize($bg_color,0.7);
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_screenshot.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_screenshot.scss
new file mode 100644
index 00000000..458c6f04
--- /dev/null
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_screenshot.scss
@@ -0,0 +1,202 @@
+// Screenshot UI
+.icon-label-button-container {
+ spacing: $base_padding;
+ @extend %caption;
+
+ StIcon { icon-size: 32px;}
+}
+
+$screenshot_ui_panel_padding: $base_padding*3;
+$screenshot_ui_shot_cast_margin: 21px;
+$screenshot_ui_panel_border_radius: $modal_radius + $screenshot_ui_shot_cast_margin;
+$screenshot_ui_shot_cast_spacing: 3px;
+
+$screenshot_ui_button_red: $error_color;
+
+.screenshot-ui-panel {
+ @extend %osd_panel;
+ border-radius: $screenshot_ui_panel_border_radius;
+ padding: $screenshot_ui_panel_padding;
+ // Reduce the bottom padding a little to accommodate the large capture button.
+ padding-bottom: $screenshot_ui_panel_padding - 6px;
+ margin-bottom: 4em;
+ spacing: $base_padding * 2;
+}
+
+.screenshot-ui-close-button {
+ @extend .window-close; // copy window close button
+ padding: $base_padding; // but with more padding
+ &.left { margin-left: 8px; }
+ &.right { margin-right: 8px; }
+}
+
+.screenshot-ui-type-button {
+ @extend %osd_button;
+ padding: $base_padding * 2 $base_padding * 3 !important;
+ border-radius: $screenshot_ui_panel_border_radius - $screenshot_ui_panel_padding;
+}
+
+.screenshot-ui-capture-button {
+ width: 36px;
+ height: 36px;
+ border-radius: 99px;
+ border: 4px $osd_fg_color;
+ padding: 4px;
+
+ .screenshot-ui-capture-button-circle {
+ background-color: $osd_fg_color;
+ transition-duration: 200ms;
+ &:hover, &:focus { background-color: $hover_bg_color; }
+ border-radius: 99px;
+ }
+
+ &:hover, &:focus {
+ .screenshot-ui-capture-button-circle {
+ background-color: darken($osd_fg_color, 15%);
+ }
+ }
+
+ &:active {
+ .screenshot-ui-capture-button-circle {
+ background-color: darken($osd_fg_color, 50%);
+ }
+ }
+
+ &:cast {
+ .screenshot-ui-capture-button-circle {
+ background-color: $screenshot_ui_button_red;
+ }
+
+ &:hover, &:focus {
+ .screenshot-ui-capture-button-circle {
+ background-color: darken($screenshot_ui_button_red, 15%);
+ }
+ }
+
+ &:active {
+ .screenshot-ui-capture-button-circle {
+ background-color: darken($screenshot_ui_button_red, 30%);
+ }
+ }
+ }
+}
+
+.screenshot-ui-shot-cast-container {
+ background-color: $hover_bg_color;
+ border-radius: $modal_radius;
+ padding: $screenshot_ui_shot_cast_spacing;
+ spacing: $screenshot_ui_shot_cast_spacing;
+
+ &:ltr { margin-left: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding; }
+ &:rtl { margin-right: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding; }
+}
+
+.screenshot-ui-shot-cast-button {
+ padding: $base_padding $base_padding*2;
+ background-color: transparent;
+ &:hover, &:focus { background-color: lighten($hover_bg_color, 5%); }
+ &:active { background-color: lighten($active_bg_color,5%); }
+ &:checked { background-color: white; color: black; }
+
+ border-radius: $modal_radius - $screenshot_ui_shot_cast_spacing;
+
+ StIcon { icon-size: $base_icon_size; }
+}
+
+.screenshot-ui-show-pointer-button {
+ @extend %osd_button;
+ border-radius: 99px;
+ padding: $base_padding * 2 !important;
+ StIcon { icon-size: $base_icon_size; }
+}
+
+.screenshot-ui-area-indicator-shade {
+ background-color: rgba(0,0,0,.3);
+}
+
+.screenshot-ui-area-selector {
+ .screenshot-ui-area-indicator-shade {
+ background-color: rgba(0,0,0,.5);
+ }
+
+ .screenshot-ui-area-indicator-selection {
+ border: 2px white;
+ }
+}
+
+.screenshot-ui-area-selector-handle {
+ border-radius: 99px;
+ background-color: white;
+ box-shadow: 0 1px 3px 2px rgba(0,0,0,0.2);
+ width: 24px;
+ height: 24px;
+}
+
+.screenshot-ui-window-selector {
+ background-color: $system_bg_color;
+
+ .screenshot-ui-window-selector-window-container {
+ margin: 100px;
+ }
+
+ &:primary-monitor {
+ .screenshot-ui-window-selector-window-container {
+ // Make some room for the panel.
+ margin-bottom: 200px;
+ }
+ }
+}
+
+.screenshot-ui-window-selector-window-border {
+ transition-duration: 200ms;
+ border-radius: $modal_radius;
+ border: 6px transparent;
+}
+
+.screenshot-ui-window-selector-check {
+ transition-duration: 200ms;
+ color: transparent;
+ border-radius: 99px;
+ border-width: 12px;
+ icon-size: 24px;
+}
+
+.screenshot-ui-window-selector-window {
+ &:hover {
+ .screenshot-ui-window-selector-window-border {
+ border-color: darken($selected_bg_color, 15%);
+ }
+ }
+ &:checked {
+ .screenshot-ui-window-selector-window-border {
+ border-color: $selected_bg_color;
+ background-color: transparentize($selected_bg_color, 0.8);
+ }
+
+ .screenshot-ui-window-selector-check {
+ color: white;
+ background-color: $selected_bg_color;
+ }
+ }
+}
+
+.screenshot-ui-screen-selector {
+ transition-duration: 200ms;
+ background-color: rgba(0,0,0,.5);
+
+ &:hover { background-color: rgba(0,0,0,.3); }
+ &:active { background-color: rgba(0,0,0,.7); }
+ &:checked {
+ background-color: transparent;
+ border: 2px white;
+ }
+}
+
+.screenshot-ui-tooltip {
+ color: $osd_fg_color;
+ background-color: $osd_bg_color;
+ border-radius: 99px;
+ padding: $base_padding $base_padding * 2;
+ text-align: center;
+ -y-offset: 24px;
+}
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_scrollbars.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_scrollbars.scss
index 5d50994d..77cde653 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_scrollbars.scss
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_scrollbars.scss
@@ -9,8 +9,8 @@ StScrollBar {
padding: 0;
StScrollView & {
- min-width: 14px;
- min-height: 14px;
+ min-width: 8px;
+ min-height: 8px;
}
StBin#trough {
@@ -20,10 +20,10 @@ StScrollBar {
StButton#vhandle, StButton#hhandle {
border-radius: 8px;
- background-color: mix($fg_color, $bg_color, 60%);
- //border: 3px solid transparent; //would be nice to margin or at least to transparent
- margin: 3px;
- &:hover { background-color: mix($fg_color, $bg_color, 80%); }
- &:active { background-color: $selected_bg_color; }
+ background-color: mix($fg_color, $bg_color, 30%);
+ border: 3px solid transparent; //would be nice to margin or at least to transparent
+ transition: 500ms all ease;
+ &:hover {background-color: mix($fg_color, $bg_color, 50%);}
+ &:active {background-color: mix($fg_color, $bg_color, 40%);}
}
-}
\ No newline at end of file
+}
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_search-entry.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_search-entry.scss
index d3584fb9..faca50e4 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_search-entry.scss
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_search-entry.scss
@@ -5,30 +5,22 @@ $search_entry_height: 36px;
%search_entry,
.search-entry {
- width: $search_entry_width;
- padding: $base_padding+1 $base_padding+3;
border-radius: $search_entry_height * 0.5; // half the height
- color: transparentize($fg_color,0.3);
- background-color: $bg_color;
- margin-top: $base_spacing * 2;
- margin-bottom: $base_spacing;
- border-width: 2px;
- border-color: transparent;
- &:hover {
- background-color: $hover_bg_color;
- color: $hover_fg_color;
- }
- &:focus {
- border-style: solid;
- border-color: $selected_bg_color;
- color: $fg_color;
- box-shadow: inset 0 1px 2px 1px rgba(0,0,0,0.2);
- }
+ margin-top: $base_padding * 2;
+ margin-bottom: $base_padding;
+ padding: $base_padding+1 $base_padding+3;
+ width: $search_entry_width;
- .search-entry-icon {
- icon-size: $base_icon_size;
- padding: 0 4px;
+ @include entry(normal);
+ &:hover { @include entry(hover);}
+ &:focus { @include entry(focus);}
+ &:insensitive { @include entry(insensitive);}
+
+ .search-entry-icon {
color: inherit;
+ icon-size: $base_icon_size;
+ margin-top: 2px; // center vertically
+ padding: 0 4px;
}
}
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_search-results.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_search-results.scss
index 0d81c974..644c53db 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_search-results.scss
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_search-results.scss
@@ -1,94 +1,82 @@
/* Search */
// search overview container
+#searchResults {
+ margin: 0 $base_margin;
+}
+
#searchResultsContent {
- max-width: 1024px;
- spacing: $base_margin * 2;
+ max-width: 1072px;
}
// search results sections "the boxes"
.search-section {
// This should be equal to #searchResultsContent spacing
- spacing: $base_margin * 2;
+ spacing: $base_padding*3;
- // separator
+ // separator (unstyled)
.search-section-separator {
- // height: 1px;
- // background-color: $osd_outer_borders_color;
- height: 0;
+ height: $base_margin*2; // use it as a spacer
background-color: transparent;
}
}
// content
.search-section-content {
- background-color: transparentize(lighten($osd_bg_color, 5%), 0.2);
- border-radius: $modal_radius+3;
+ background-color: lighten($system_bg_color, 5%);
+ border-radius: $modal_radius*1.5;
border: 1px solid $osd_outer_borders_color;
- box-shadow: 0 2px 4px 0 $shadow_color;
- text-shadow: 0 1px if($variant == 'light', rgba(255,255,255,0.2), rgba(0,0,0,0.2));
color: $osd_fg_color;
- padding: $base_padding * 3;
- // This is the space between the provider icon and the results container
- spacing: $base_margin * 2;
+ padding: $base_padding*2;
+ margin:0 $base_margin*3;
}
-%search-section-content-item {
- @extend %icon_tile;
-
- &:focus,
- &:hover,
- &:selected {
- background-color: transparentize($osd_fg_color, .9);
- transition-duration: 200ms;
- }
-
- &:active,
- &:checked {
- background-color: transparentize(darken($osd_bg_color, 10%), .1);
- }
+%search_section_content_item {
+ @include tile_button($osd_fg_color);
+ border-radius: $base_border_radius+3px;
}
// "no results" text
.search-statustext {
- @extend %status_text;
+ @extend %title_1;
}
.grid-search-results {
- spacing: $base_spacing * 6;
+ spacing: $base_padding*5;
+ margin:0 $base_margin*3;
}
// Search results with icons
.grid-search-result {
- @extend %app-well-app;
+ @extend .app-well-app;
}
// search result provider
.search-provider-icon {
- @extend %search-section-content-item;
+ @extend %search_section_content_item;
+ &:ltr {margin-right: $base_margin;}
+ &:rtl {margin-left: $base_margin;}
// content
.list-search-provider-content {
- spacing: $base_spacing * 2;
+ spacing: $base_padding * 2;
// provider labels
.list-search-provider-details {
width: 120px;
- margin-top: 0;
- color: darken($osd_fg_color, 8%);
- // font-weight: bold;
+ color: $osd_fg_color;
}
}
}
// search results list
.list-search-results {
- spacing: $base_spacing;
+ spacing: $base_padding;
}
// search result listitem
.list-search-result {
- @extend %search-section-content-item;
+ @extend %search_section_content_item;
// content
.list-search-result-content {
@@ -97,12 +85,12 @@
// list item title (with leading icon)
.list-search-result-title {
- spacing: $base_spacing * 2;
+ spacing: $base_padding * 2;
// font-weight: bold;
}
// list item description
.list-search-result-description {
- color: darken($osd_fg_color, 30%);
+ color: $osd_insensitive_fg_color;
}
}
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_slider.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_slider.scss
index f21d62e6..500249aa 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_slider.scss
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_slider.scss
@@ -1,27 +1,22 @@
/* Slider */
-$slider_size: 15px;
+$slider_size: 16px;
.slider {
- height: $slider_size;
// slider trough
- -barlevel-height: 3px; // has to be an odd number
- -barlevel-background-color: $borders_color; //background of the trough
- -barlevel-border-width: 1px;
- -barlevel-border-color: $borders_color; // trough border color
+ -barlevel-height: 4px;
+ -barlevel-background-color: if($variant == 'light', transparentize($fg_color, 0.6), transparentize($fg_color, 0.8)); //background of the trough
+ -barlevel-border-width: 2px;
+ -barlevel-border-color: transparent; // trough border color
// fill style
- -barlevel-active-background-color: $selected_bg_color; //active trough fill
- -barlevel-active-border-color: if($variant == 'light', darken($selected_bg_color, 4%), lighten($selected_bg_color, 2%)); //active trough border
+ -barlevel-active-background-color: $selected_bg_color;
+ -barlevel-active-border-color: transparent;
// overfill style (red in this case)
-barlevel-overdrive-color: $destructive_color;
- -barlevel-overdrive-border-color: if($variant == 'light', darken($destructive_color, 4%), lighten($destructive_color, 2%)); //trough border when red;
+ -barlevel-overdrive-border-color: transparent; //trough border when red;
-barlevel-overdrive-separator-width:1px;
// slider handler
-slider-handle-radius: $slider_size * 0.5; // half the size of the size
- -slider-handle-border-width: 1px;
- -slider-handle-border-color: if($variant == 'light', $borders_color, $fg_color);
-
- color: if($variant == 'light', lighten($bg_color, 10%), $fg_color);
- &:hover { color: $hover_bg_color; }
- &:active { color: $active_bg_color; }
-}
\ No newline at end of file
+ -slider-handle-border-width: 0;
+ -slider-handle-border-color: transparent; // because 0 width
+}
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_switcher-popup.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_switcher-popup.scss
index 32cbbe54..cec6c9aa 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_switcher-popup.scss
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_switcher-popup.scss
@@ -1,37 +1,33 @@
/* App Switcher */
+// same as dash
+$switcher_padding: $base_padding + 4px; // 10px
+$switcher_border_radius: $modal_radius + 8px;
+
+
+// the full screen container of the switcher
.switcher-popup {
- padding: 8px;
- spacing: $base_spacing * 4;
+ padding: 0;
+ spacing: $base_padding * 4;
}
// switcher onscreen panel
.switcher-list {
@extend %osd_panel;
+ padding: $switcher_padding;
+ border-radius: $switcher_border_radius;
+ box-shadow: 0 8px 8px 0 rgba(0,0,0,0.1);
+ // container for items in list
+ .switcher-list-item-container {
+ spacing: $base_padding * 2;
+ }
+
+ // each item in the list
.item-box {
- padding: 8px;
- border-radius: $base_border_radius + 1px;
- border: 1px solid transparent;
-
- &:outlined {
- background-color: transparentize($osd_fg_color, 0.7);
- }
-
- &:selected {
- background-color: transparentize($osd_fg_color, 0.7);
- color: $osd_fg_color;
- }
- }
-
- // window thumbnails
- .thumbnail-box {
- padding: 2px;
- spacing: $base_spacing;
- }
-
- .thumbnail {
- width: 256px;
+ @include tile_button($osd_fg_color);
+ // override over style so mouse doesn't steal focus
+ &:hover {background: none;}
}
.separator {
@@ -39,16 +35,27 @@
background: $borders_color;
}
- .switcher-list-item-container {
- spacing: $base_spacing * 2;
+ // container of thumbnails
+ .thumbnail-box {
+ padding: 2px;
+ spacing: $base_padding;
+ }
+
+ // window thumbnail itself
+ .thumbnail {
+ width: 256px; // equal to THUMBNAIL_DEFAULT_SIZE in altTab.js
+ border-radius:$base_border_radius;
}
}
+// arrow if app has multiple windows
.switcher-arrow {
- border-color: rgba(0,0,0,0);
- color: transparentize($fg_color,0.2);
+ border-color: transparentize($osd_fg_color, 0.2);
+ color: transparentize($osd_fg_color, 0.2);
+
&:highlighted {
- color: $fg_color;
+ border-color: $osd_fg_color;
+ color: $osd_fg_color;
}
}
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_switches.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_switches.scss
index b8748345..b7441083 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_switches.scss
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_switches.scss
@@ -1,16 +1,16 @@
/* Switches */
// these are equal to the size of the SVG assets
-$switch_height: 22px;
-$switch_width: 46px;
+$switch_height: 26px;
+$switch_width: 48px;
.toggle-switch {
color: $fg_color;
height: $switch_height;
width: $switch_width;
background-size: contain;
- background-image: if($variant == 'light', url("assets/toggle-off.svg"),url("assets/toggle-off-dark.svg"));
+ background-image: if($variant == 'light', url("assets/toggle-off-light.svg"),url("assets/toggle-off.svg"));
&:checked {
- background-image: if($variant == 'light', url("assets/toggle-on.svg"),url("assets/toggle-on-dark.svg"));
+ background-image: if($variant == 'light', url("assets/toggle-on-light.svg"),url("assets/toggle-on.svg"));
}
-}
\ No newline at end of file
+}
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_tiled-previews.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_tiled-previews.scss
deleted file mode 100644
index a9d000fe..00000000
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_tiled-previews.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-
-/* Tiled window previews */
-$tile_corner_radius: $base_border_radius + 1px;
-.tile-preview {
- background-color: transparentize($selected_bg_color,0.5);
- border: 1px solid $selected_bg_color;
-}
-
-.tile-preview-left.on-primary {
- border-radius: $tile_corner_radius 0 0 0;
-}
-
-.tile-preview-right.on-primary {
- border-radius: 0 $tile_corner_radius 0 0;
-}
-
-.tile-preview-left.tile-preview-right.on-primary {
- border-radius: $tile_corner_radius $tile_corner_radius 0 0;
-}
\ No newline at end of file
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_window-picker.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_window-picker.scss
index fa3f1919..e494f6d8 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_window-picker.scss
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_window-picker.scss
@@ -1,10 +1,11 @@
/* Window Picker */
-$window_picker_spacing: $base_spacing; // 6px
+$window_picker_spacing: $base_padding; // 6px
$window_picker_padding: $base_padding * 2; // 12px
$window_thumbnail_label_color: transparentize($osd_bg_color, 0.4);
+$window_close_button_color: darken(transparentize($osd_bg_color, .05), 3%);
$window_close_button_size: 30px;
$window_close_button_padding: 3px;
@@ -24,24 +25,23 @@ $window_close_button_padding: 3px;
// Close button
.window-close {
- background-color: $osd_bg_color;
+ background-color: $window_close_button_color;
color: $osd_fg_color;
border-radius: $window_close_button_size * 0.5 + $window_close_button_padding * 2;
padding: $window_close_button_padding;
height: $window_close_button_size;
width: $window_close_button_size;
- box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.5);
transition-duration: 300ms;
- & StIcon { icon-size: 24px; }
+ & StIcon { icon-size: 24px; } // uses non standard icon size
&:hover {
- background-color: lighten($osd_bg_color, 15%);
+ background-color: mix($osd_fg_color, $window_close_button_color, 15%);
}
&:active {
color: transparentize($osd_fg_color, 0.2);
- background-color: darken($osd_bg_color, 5%);
+ background-color: darken($window_close_button_color, 5%);
}
}
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_workspace-switcher.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_workspace-switcher.scss
index 5b15a30f..f06130ba 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_workspace-switcher.scss
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_workspace-switcher.scss
@@ -1,36 +1,25 @@
/* Workspace Switcher */
-.workspace-switcher-group {
- padding: $base_padding * 2;
-}
-.workspace-switcher-container {
- @extend %osd_panel;
-}
+$ws_indicator_height: $large_icon_size;
+$ws_dot_active: $ws_indicator_height / 3;
+$ws_dot_inactive: $ws_indicator_height / 6;
.workspace-switcher {
- background: transparent;
- border: none;
- border-radius: 0;
- padding: 0;
- spacing: $base_spacing * 2;
+ @extend %osd_panel;
+ margin-bottom: 4em;
+ spacing: $base_padding * 2;
+ padding: $base_padding * 2 $base_padding * 3;
}
-.ws-switcher-box {
- background: transparent;
- height: 50px;
- background-size: 32px;
- border: 1px solid transparentize($osd_fg_color,0.9);
- border-radius: $base_border_radius + 3px;
-}
+.ws-switcher-indicator {
+ background-color: transparentize($osd_fg_color,0.5);
+ padding: $ws_dot_inactive / 2;
+ margin: ($ws_indicator_height - $ws_dot_inactive) / 2;
+ border-radius: $ws_indicator_height;
-// active workspace in the switcher
-.ws-switcher-active-up,
-.ws-switcher-active-down,
-.ws-switcher-active-left,
-.ws-switcher-active-right {
- height: 52px;
- background-color: $selected_bg_color;
- border: 1px solid if($variant=='light', darken($selected_bg_color, 8%), lighten($selected_bg_color, 5%));
- border-radius: $base_border_radius + 3px;
- color: $selected_fg_color;
+ &:active {
+ background-color: $osd_fg_color;
+ padding: $ws_dot_active / 2;
+ margin: ($ws_indicator_height - $ws_dot_active) / 2;
+ }
}
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_workspace-thumbnails.scss b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_workspace-thumbnails.scss
index b18399a3..7c5a27b3 100644
--- a/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_workspace-thumbnails.scss
+++ b/src/themes/Kali/sass/gnome-shell/upstream/gnome-shell-sass/widgets/_workspace-thumbnails.scss
@@ -3,7 +3,7 @@
// thumbnails in overview
.workspace-thumbnails {
visible-width: 32px; //amount visible before hover
- spacing: $base_spacing;
+ spacing: $base_padding;
padding: $base_padding;
.workspace-thumbnail {
diff --git a/src/themes/Kali/sass/gnome-shell/upstream/sync.sh b/src/themes/Kali/sass/gnome-shell/upstream/sync.sh
index 5e2f683a..2892a1ac 100755
--- a/src/themes/Kali/sass/gnome-shell/upstream/sync.sh
+++ b/src/themes/Kali/sass/gnome-shell/upstream/sync.sh
@@ -4,7 +4,7 @@ GREEN='\033[0;32m'
YELLOW='\033[0;33m'
RESET='\033[0m'
-VERSION=41.0
+VERSION=42.rc
echo
printf " $YELLOW[ i ]$RESET Upstream version $VERSION\n"
@@ -53,13 +53,13 @@ done <<- EOF
gnome-shell-sass/widgets/_panel.scss
gnome-shell-sass/widgets/_popovers.scss
gnome-shell-sass/widgets/_screen-shield.scss
+ gnome-shell-sass/widgets/_screenshot.scss
gnome-shell-sass/widgets/_scrollbars.scss
gnome-shell-sass/widgets/_search-entry.scss
gnome-shell-sass/widgets/_search-results.scss
gnome-shell-sass/widgets/_slider.scss
gnome-shell-sass/widgets/_switcher-popup.scss
gnome-shell-sass/widgets/_switches.scss
- gnome-shell-sass/widgets/_tiled-previews.scss
gnome-shell-sass/widgets/_window-picker.scss
gnome-shell-sass/widgets/_workspace-switcher.scss
gnome-shell-sass/widgets/_workspace-thumbnails.scss