From 2f6348cb0efcf4aeed367817cea10735178580fd Mon Sep 17 00:00:00 2001
From: EliverLara <eliverlara@gmail.com>
Date: Wed, 16 Jun 2021 16:09:45 -0500
Subject: [PATCH] Gnome: Add initial support to v40

---
 Gulpfile.js                      |    2 +-
 gnome-shell/v40/_common.scss     | 2182 ++++++++++++++++++++++++++++++
 gnome-shell/v40/gnome-shell.css  | 2074 ++++++++++++++++++++++++++++
 gnome-shell/v40/gnome-shell.scss |    6 +
 4 files changed, 4263 insertions(+), 1 deletion(-)
 create mode 100644 gnome-shell/v40/_common.scss
 create mode 100644 gnome-shell/v40/gnome-shell.css
 create mode 100644 gnome-shell/v40/gnome-shell.scss

diff --git a/Gulpfile.js b/Gulpfile.js
index 9f21794..389b380 100644
--- a/Gulpfile.js
+++ b/Gulpfile.js
@@ -11,7 +11,7 @@ gulp.task('styles', function(done) {
 });
 
 gulp.task('shell-style', function(done) {
-    gulp.src('gnome-shell/*.scss')
+    gulp.src('gnome-shell/**/*.scss')
         .pipe(sass().on('error', sass.logError))
         .pipe(gulp.dest('./gnome-shell/'))
         .pipe(exec('gsettings set org.gnome.shell.extensions.user-theme name "Sweet"'))
diff --git a/gnome-shell/v40/_common.scss b/gnome-shell/v40/_common.scss
new file mode 100644
index 0000000..a5e413e
--- /dev/null
+++ b/gnome-shell/v40/_common.scss
@@ -0,0 +1,2182 @@
+$corner-radius: 2px;
+
+
+/* GLOBALS */
+$font-size: 10;
+$_bubble_bg_color: $osd_bg_color;
+$_bubble_fg_color: $fg_color;
+$_bubble_borders_color: $fg_color;
+$_bubble_transparent: transparentize($osd_bg_color, 0.17);
+$topbar_bg_color: transparentize($dracula,0.05);
+$_dash_bg: darken($bg_color, 3%);
+
+stage {
+  @include fontsize($font-size);
+  color: $fg_color;
+}
+
+/* WIDGETS */
+
+/* Buttons */
+.button, %button {
+  @include button(normal);
+  border-radius: 4px;
+  border-width: 0;
+  padding: 4px 32px;
+  &:focus { @include button(focus); }
+  &:insensitive { @include button(insensitive); }
+  &:active { @include button(active); }
+  &:hover {
+    @include button(hover);
+  }
+}
+
+.modal-dialog-linked-button {
+  padding: 10px;
+  border: 1px solid $borders_color;
+  color: $fg_color;
+  background: $main_dark;
+  text-shadow: none;
+  icon-shadow: none;
+  box-shadow: none;
+  &:insensitive { @include button(insensitive); }
+  &:active {
+    @include button(active);
+  }
+  &:focus {
+    @include button(focus);
+    &:hover {
+      @include button(focus);
+    }
+  }
+  &:hover {
+    @include button(hover);
+  }
+
+  &:first-child { border-radius: 0px 0px 0px 2px; }
+  &:last-child { border-radius: 0px 0px 2px 0px; }
+  &:first-child:last-child { border-radius: 0px 0px 2px 2px; }
+}
+
+/* Entries */
+StEntry {
+  @include entry(normal);
+  border-radius: 2px;
+  padding: 4px;
+  border-width: 0;
+  color: $fg_color;
+  //&:hover { @include entry(hover);}
+  &:focus { @include entry(focus,$fc:transparentize($fg_color,0.5));}
+  &: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;
+  }
+}
+
+
+/* Scrollbars */
+
+StScrollView {
+  &.vfade { -st-vfade-offset: 68px; }
+  &.hfade { -st-hfade-offset: 68px; }
+}
+
+StScrollBar {
+  padding: 0;
+
+  StScrollView & {
+    min-width: 14px;
+    min-height: 14px;
+  }
+
+  StBin#trough {
+    border-radius: 0;
+    background-color: transparent;
+  }
+
+  StButton#vhandle, StButton#hhandle {
+    border-radius: 8px;
+    background-color: mix($fg_color, $bg_color, 20%);
+    //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; }
+  }
+}
+
+/* Slider */
+
+.slider {
+  height: 1em;
+  color: darken($selected_fg_color, 25%);
+  border-color: black;
+  -slider-height: 0.1em;
+  -slider-background-color: $gray; //background of the trough
+  -slider-border-color: black; //trough border color
+  -slider-active-background-color: $yellow; //active trough fill
+  -slider-active-border-color: $lime; //active trough border
+  -slider-border-width: 0;
+  -slider-handle-radius: 6px;
+
+  -barlevel-height: 0.1em;
+  -barlevel-background-color: $gray;
+  -barlevel-border-color: black;
+  -barlevel-active-background-color: $yellow;
+  -barlevel-active-border-color: $lime;
+  -barlevel-border-width: 0;
+  -barlevel-handle-radius: 6px; 
+  -barlevel-overdrive-color: $yellow;
+  -barlevel-overdrive-border-color: transparent;
+  -barlevel-overdrive-separator-width: 0px;
+}
+
+/* Check Boxes */
+
+.check-box {
+  StBoxLayout { spacing: .8em; }
+  StBin {
+    width: 24px;
+    height: 22px;
+    background-image: url("assets/checkbox-off.svg");
+  }
+  &:focus, &:hover StBin { background-image: url("assets/checkbox-off-focused.svg"); }
+  &:checked StBin { background-image: url("assets/checkbox.svg"); }
+  &:focus:checked StBin { background-image: url("assets/checkbox-focused.svg"); }
+}
+
+/* Switches */
+.toggle-switch {
+  width: 65px;
+  height: 22px;
+  background-size: contain;
+  //Gnome 3.32//
+  background-image: url("assets/toggle-off.svg");
+  &:checked { background-image: url("assets/toggle-on.svg"); }
+}
+
+  @each $v in us, intl {
+    .toggle-switch-#{$v} {
+      background-image: url("assets/toggle-off.svg");
+      &:checked { background-image: url("assets/toggle-on.svg"); }
+    }
+  }
+
+/* links */
+.shell-link {
+  color: $link_color;
+  &:hover { color: lighten($link_color,10%); }
+}
+
+/* Modal Dialogs */
+
+.headline { font-size: 110%; }
+.lightbox { background-color: black; }
+.flashspot { background-color: white; }
+
+.modal-dialog {
+  border: none;
+  border-radius: 2px;
+  color: $osd_fg_color;
+  background-color: darken($osd_bg_color,5%);
+  box-shadow: $depth6;
+
+  .modal-dialog-content-box { padding: 24px; }
+  .run-dialog-entry {
+    width: 20em;
+    margin-bottom: 6px;
+  }
+  .run-dialog-error-box {
+    color: $error_color;
+    padding-top: 16px;
+    spacing: 6px;
+  }
+  .run-dialog-button-box { padding-top: 1em; }
+  .run-dialog-label {
+    @include fontsize($font-size + 1.1);
+    font-weight: bold;
+    color: darken($osd_fg_color,10%);
+    padding-bottom: .4em;
+  }
+
+}
+
+  .mount-dialog-subject,
+  .end-session-dialog-subject { //this should be a generic header class
+    @include fontsize($font-size * 1.3);
+  }
+
+/* Message Dialog */
+  .message-dialog-main-layout {
+    padding: 12px 20px 0;
+    spacing: 12px;
+  }
+
+  .message-dialog-content {
+    max-width: 28em;
+    spacing: 20px;
+  }
+
+  .message-dialog-icon {
+    min-width: 48px;
+    icon-size: 48px;
+  }
+
+  .message-dialog-title {
+    font-weight: bold;
+  }
+
+  .message-dialog-subtitle {
+    color: darken($fg_color,40%);
+    font-weight: bold;
+  }
+
+/* End Session Dialog */
+.end-session-dialog {
+  spacing: 42px;
+  border: none;
+  & .modal-dialog-linked-button:last-child {
+    @include gradient();
+    color: #fff;
+    &:hover, &:focus {
+      background: darken($error_color, 3%);
+      color: #fff;
+    }
+  }
+}
+
+  .end-session-dialog-list {
+      padding-top: 20px;
+  }
+
+  .end-session-dialog-layout {
+    padding-left: 17px;
+    &:rtl { padding-right: 17px; }
+  }
+
+  .end-session-dialog-description {
+    width: 28em;
+    padding-bottom: 10px;
+    &:rtl {
+      text-align: right;
+    }
+  }
+
+  .end-session-dialog-warning {
+    width: 28em;
+    color: $warning_color;
+    padding-top: 6px;
+    &:rtl {
+      text-align: right;
+    }
+  }
+
+  .end-session-dialog-logout-icon {
+    //border: 2px solid #8b8b8b;
+    border-radius: 3px;
+    width: 48px;
+    height: 48px;
+    background-size: contain;
+  }
+
+  .end-session-dialog-shutdown-icon {
+    color: $error_color;
+    width: 48px;
+    height: 48px;
+  }
+
+  .end-session-dialog-inhibitor-layout {
+    spacing: 16px;
+    max-height: 200px;
+    padding-right: 65px;
+    padding-left: 65px;
+  }
+
+  .end-session-dialog-session-list,
+  .end-session-dialog-app-list {
+    spacing: 1em;
+  }
+
+  .end-session-dialog-list-header {
+    font-weight: bold;
+    &:rtl { text-align: right; }
+  }
+
+  .end-session-dialog-app-list-item,
+  .end-session-dialog-session-list-item {
+    spacing: 1em;
+  }
+
+  .end-session-dialog-app-list-item-name,
+  .end-session-dialog-session-list-item-name {
+    font-weight: bold;
+  }
+
+  .end-session-dialog-app-list-item-description {
+    color: darken($fg_color,5%);
+    font-size: 10pt;
+  }
+
+/* ShellMountOperation Dialogs */
+.shell-mount-operation-icon { icon-size: 48px; }
+
+  .mount-dialog {
+    spacing: 24px;
+
+    .message-dialog-title {
+      padding-top: 10px;
+      padding-left: 17px;
+      padding-bottom: 6px;
+      max-width: 34em;
+    }
+
+    .message-dialog-title:rtl {
+      padding-left: 0px;
+      padding-right: 17px;
+    }
+
+    .message-dialog-body {
+      padding-left: 17px;
+      width: 28em;
+    }
+
+    .message-dialog-body:rtl {
+      padding-left: 0px;
+      padding-right: 17px;
+    }
+  }
+
+  .mount-dialog-app-list {
+    max-height: 200px;
+    padding-top: 24px;
+    padding-left: 49px;
+    padding-right: 32px;
+  }
+
+  .mount-dialog-app-list:rtl {
+    padding-right: 49px;
+    padding-left: 32px;
+  }
+
+  .mount-dialog-app-list-item {
+    color: darken($fg_color,10%);
+    &:hover { color: $fg_color; }
+    &:ltr { padding-right: 1em; }
+    &:rtl { padding-left: 1em; }
+  }
+
+  .mount-dialog-app-list-item-icon {
+    &:ltr { padding-right: 17px; }
+    &:rtl { padding-left: 17px; }
+  }
+
+  .mount-dialog-app-list-item-name {
+    font-size: 10pt;
+  }
+
+
+/* Password or Authentication Dialog */
+
+.prompt-dialog {
+  //this is the width of the entire modal popup
+  width: 34em;
+  border: none;
+  border-radius: 2px;
+
+  .message-dialog-main-layout { spacing: 24px; padding: 10px; }
+  .message-dialog-content { spacing: 16px; }
+  .message-dialog-title { color: darken($osd_fg_color,25%); }
+}
+
+  .prompt-dialog-description:rtl {
+    text-align: right;
+  }
+
+  .prompt-dialog-password-box {
+    spacing: 1em;
+    padding-bottom: 1em;
+  }
+
+  .prompt-dialog-error-label {
+    font-size: 10pt;
+    color: $error_color;
+    padding-bottom: 8px;
+  }
+
+  .prompt-dialog-info-label {
+    font-size: 10pt;
+    padding-bottom: 8px;
+  }
+
+  .hidden {
+    color: rgba(0,0,0,0);
+  }
+
+  .prompt-dialog-null-label {
+    font-size: 10pt;
+    padding-bottom: 8px;
+  }
+
+
+/* Polkit Dialog */
+
+.polkit-dialog-user-layout {
+  padding-left: 10px;
+  spacing: 10px;
+  &:rtl {
+    padding-left: 0px;
+    padding-right: 10px;
+  }
+}
+
+  .polkit-dialog-user-root-label {
+    color: $warning_color;
+  }
+
+  .polkit-dialog-user-icon {
+    border-radius: 3px;
+    background-size: contain;
+    width: 48px;
+    height: 48px;
+  }
+
+/* Audio selection dialog */
+.audio-device-selection-dialog {
+  spacing: 30px;
+}
+
+  .audio-selection-content {
+    spacing: 20px;
+    padding: 24px;
+  }
+
+  .audio-selection-title {
+    font-weight: bold;
+    text-align: center;
+  }
+
+  .audio-selection-box {
+    spacing: 20px;
+  }
+
+  .audio-selection-device {
+    border: 1px solid $_bubble_borders_color;
+    border-radius: 12px;
+    &:active,&:hover,&:focus { background-color: $selected_bg_color; }
+  }
+
+  .audio-selection-device-box {
+    padding: 20px;
+    spacing: 20px;
+  }
+
+  .audio-selection-device-icon {
+    icon-size: 64px;
+  }
+
+/* Access Dialog */
+.access-dialog {
+  spacing: 30px;
+}
+
+/* Geolocation Dialog */
+.geolocation-dialog {
+  spacing: 30px;
+}
+
+/* Extension Dialog */
+.extension-dialog {
+  .message-dialog-main-layout { spacing: 24px; padding: 10px; }
+  .message-dialog-title { color: darken($osd_fg_color,25%); }
+}
+
+/* Inhibit-Shortcuts Dialog */
+.inhibit-shortcuts-dialog {
+  spacing: 30px;
+}
+
+/* Network Agent Dialog */
+
+.network-dialog-secret-table {
+  spacing-rows: 15px;
+  spacing-columns: 1em;
+}
+
+.keyring-dialog-control-table {
+  spacing-rows: 15px;
+  spacing-columns: 1em;
+}
+
+/* Popovers/Menus */
+
+.popup-menu {
+  min-width: 15em;
+  background-color: transparent;
+  color: $fg_color;
+  .popup-menu-arrow { } //defined globally in the TOP BAR
+  .popup-sub-menu {
+   
+    background-color:  transparentize(darken($main_dark,57%), 0.8);
+    box-shadow: $depth6;
+  }
+
+  .popup-menu-content { padding: 15px 0; }
+  .popup-menu-item {
+    spacing: 5px;
+    padding: 5px;
+
+    &:ltr { padding-right: 1.75em; padding-left: 0; }
+    &:rtl { padding-right: 0; padding-left: 1.75em; }
+
+    &:checked {
+      @include gradient();
+     // background-color: transparentize($selected_bg_color,0.1);
+      color: $selected_fg_color;
+      box-shadow: inset 0 1px 0px lighten($borders_color,5%);
+      font-weight: bold;
+      &:hover{
+        background-color: transparentize($selected_bg_color,0.1);
+        color: $selected_fg_color;
+      }
+    }
+    &.selected { background-color: transparentize($fg_color,0.9); color: $fg_color; }
+    &:active { background-color: $selected_bg_color; color: $selected_fg_color; }
+    &:insensitive { color: transparentize($fg_color,.5); }
+  }
+
+  .popup-inactive-menu-item { //all icons and other graphical elements
+    color: $fg_color;
+
+    &:insensitive { color: transparentize($fg_color,0.5); }
+  }
+  //.popup-status-menu-item { font-weight: normal;  color: pink; } //dunno what that is
+  &.panel-menu {
+    -boxpointer-gap: 4px;
+    margin-bottom: 1.75em;
+  }
+}
+
+
+
+  .popup-menu-ornament {
+    text-align: right;
+    width: 1.2em;
+  }
+  .popup-menu-boxpointer,
+  .candidate-popup-boxpointer {
+    -arrow-border-radius: 7px;
+    -arrow-background-color: $bg_color;
+    -arrow-border-width: 1px;
+    -arrow-border-color: $borders_color;
+    -arrow-base: 24px;
+    -arrow-rise: 11px;
+    -arrow-box-shadow: 0 1px 3px black; //dreaming. bug #689995
+  }
+
+  .popup-separator-menu-item {
+    background: transparent;
+    &-separator {
+      //-margin-horizontal: 24px;
+      height: 1px; //not really the whole box
+      margin: 6px 64px;
+      background-color: transparent;
+      border-color: transparent;
+      border-bottom-width: 1px;
+      border-bottom-style: solid;
+    }
+    .popup-sub-menu & &-separator { //submenu separators
+      margin: 0 64px 0 32px;
+      background: transparent;
+    }
+  }
+
+
+// Background menu
+.background-menu { -boxpointer-gap: 4px; -arrow-rise: 0px; }
+
+/* fallback menu
+- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled
+  app menu inside the main app window itself rather than the top bar
+*/
+
+
+/* OSD */
+.osd-window {
+  text-align: center;
+  font-weight: bold;
+  spacing: 1em;
+  margin: 32px;
+  min-width: 64px;
+  min-height: 64px;
+
+  .osd-monitor-label { font-size: 3em; }
+  .level {
+    height: 0.4em;
+    border-radius: 0.3em;
+    color: $osd_fg_color;
+    border: 1px solid $borders_color;
+
+    -barlevel-height: 0.4em;
+    -barlevel-background-color: transparentize(darken($main_dark,15%),0.5);
+    -barlevel-active-background-color: $selected_bg_color;
+    -barlevel-overdrive-color: $red;
+    -barlevel-overdrive-separator-width: 0.2em; 
+  }
+  .level-bar {
+    background-color: $selected_bg_color;
+    border-radius: 0.3em;
+  }
+}
+
+/* Pad OSD */
+.pad-osd-window {
+    padding: 32px;
+    background-color: transparentize(black, 0.2);
+
+  .pad-osd-title-box { spacing: 12px; }
+  .pad-osd-title-menu-box { spacing: 6px; }
+}
+
+.combo-box-label {
+    width: 15em;
+}
+
+/* App Switcher */
+.switcher-popup {
+  padding: 8px;
+  spacing: 16px;
+}
+
+.osd-window,
+.resize-popup,
+.switcher-list {
+  @extend %osd-panel;
+}
+
+  .switcher-list-item-container { spacing: 8px;  }
+
+  .switcher-list .item-box {
+    padding: 8px;
+    border-radius: 4px;
+  }
+
+  .switcher-list .item-box:outlined {
+    padding: 6px;
+    border: 2px solid darken($borders_color,10%);
+  }
+
+  .switcher-list .item-box:selected {
+    background-color: $selected_bg_color;
+    color: $selected_fg_color;
+  }
+
+  .switcher-list .thumbnail-box {
+    padding: 2px;
+    spacing: 4px;
+  }
+
+  .switcher-list .thumbnail {
+    width:  256px;
+  }
+
+  .switcher-list .separator {
+    width: 1px;
+    background: $borders_color;
+  }
+
+  .switcher-arrow {
+    border-color: rgba(0,0,0,0);
+    color: transparentize($fg_color,0.2);
+    &:highlighted {
+      color: $fg_color;
+    }
+  }
+
+  .input-source-switcher-symbol {
+    font-size: 34pt;
+    width: 96px;
+    height: 96px;
+  }
+
+/* Window Cycler */
+.cycler-highlight { border: 5px solid $selected_bg_color; }
+
+/* Workspace Switcher */
+.workspace-switcher-group { padding: 12px; }
+
+  .workspace-switcher-container {
+    @extend %osd-panel;
+  }
+
+  .workspace-switcher {
+    background: transparent;
+    border: 0px;
+    border-radius: 0px;
+    padding: 0px;
+    spacing: 8px;
+  }
+
+  .ws-switcher-active-up,
+  .ws-switcher-active-down,
+  .ws-switcher-active-left,
+  .ws-switcher-active-right {
+    height: 50px;
+    background-color: $selected_bg_color;
+    color: $selected_fg_color;
+    border: none;
+    background-size: 32px;
+    border-radius: 8px;
+  }
+  .ws-switcher-active-up {
+    background-image: url("assets/ws-switch-arrow-up.png"); }
+
+  .ws-switcher-active-down {
+    background-image: url("assets/ws-switch-arrow-down.png"); }
+
+  .ws-switcher-box {
+    height: 50px;
+    border: 1px solid transparentize($osd_fg_color,0.9);
+    background: darken($_bubble_bg_color, 10%);
+    border-radius: 8px;
+  }
+
+%osd-panel {
+  color: $_bubble_fg_color;
+  background-color: $_bubble_bg_color;
+  border: none;
+  border-radius: 2px;
+  padding: 12px;
+}
+
+/* Tiled window previews */
+.tile-preview {
+  background-color: transparentize($selected_bg_color,0.5);
+  border: 1px solid $selected_bg_color;
+}
+
+  .tile-preview-left.on-primary {
+    border-radius: $corner-radius $corner-radius 0 0;
+  }
+
+  .tile-preview-right.on-primary {
+    border-radius: 0 $corner-radius 0 0;
+  }
+
+  .tile-preview-left.tile-preview-right.on-primary {
+    border-radius: $corner-radius $corner-radius 0 0;
+  }
+
+/* TOP BAR */
+
+#panel {
+  background-gradient-direction: none;
+  background-color: $topbar_bg_color;
+  /* transition from solid to transparent */
+  transition-duration: 500ms;
+  font-weight: bold;
+  height: 2.1em;
+  padding: 0px 0px;
+
+  &.unlock-screen,
+  &.login-screen,
+  &.lock-screen {
+    background-color: transparent;
+  }
+
+  #panelLeft, #panelCenter { // spacing between activities<>app menu and such
+    spacing: 4px;
+  }
+
+  .panel-corner {
+    -panel-corner-radius: 0px;
+    -panel-corner-background-color: rgba(0, 0, 0, 0.2);
+    -panel-corner-border-width: 2px;
+    -panel-corner-border-color: transparent;
+
+    &:active, &:overview, &:focus {
+      -panel-corner-border-color: lighten($selected_bg_color,5%);
+    }
+
+    &.lock-screen, &.login-screen, &.unlock-screen {
+      -panel-corner-radius: 0;
+      -panel-corner-background-color: transparent;
+      -panel-corner-border-color: transparent;
+    }
+  }
+
+  .panel-button {
+    -natural-hpadding: 12px;
+    -minimum-hpadding: 6px;
+    font-weight: bold;
+    color: $topbar_color;
+    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.9);
+    transition-duration: 100ms;
+
+    .app-menu-icon {
+      -st-icon-style: symbolic;
+      margin-left: 4px;
+      margin-right: 4px;
+      //dimensions of the icon are hardcoded
+    }
+
+
+
+    &:hover {
+      background: lighten($topbar_bg_color, 10%);
+      color: lighten($topbar_color, 10%);
+      transition-duration: 200ms;
+    }
+
+    &:active, &:overview, &:focus, &:checked {
+      // Trick due to St limitations. It needs a background to draw
+      // a box-shadow
+      box-shadow: none;
+      @include gradient();
+      color: $selected_fg_color;
+      text-shadow: 0px 0px 2px rgba(92, 92, 92, 0.9);
+      transition-duration: 200ms;
+
+      & > .system-status-icon { icon-shadow: red 0 2px 2px; }
+    }
+
+    .system-status-icon { icon-size: 1.09em; padding: 0 5px; }
+    .unlock-screen &,
+    .login-screen &,
+    .lock-screen & {
+      color: lighten($fg_color, 10%);
+      &:focus, &:hover, &:active { color: lighten($fg_color, 10%); }
+    }
+
+    // Remove default bottom border
+    &.clock-display {
+      &:hover, &:active, &:overview, &:focus, &:checked {
+        box-shadow: none;
+        .clock {
+          box-shadow: none;
+        }
+      }
+    }
+  }
+
+  .panel-status-indicators-box,
+  .panel-status-menu-box {
+    spacing: 2px;
+  }
+
+  // spacing between power icon and (optional) percentage label
+  .power-status.panel-status-indicators-box {
+    spacing: 0;
+  }
+
+  .screencast-indicator { color: $warning_color; }
+
+  &.solid {
+    background-color: $dracula;
+    /* transition from transparent to solid */
+    transition-duration: 300ms;
+
+    .panel-corner {
+      -panel-corner-background-color: black;
+    }
+    .system-status-icon,
+    .app-menu-icon > StIcon,
+    .popup-menu-arrow {
+      icon-shadow: none;
+    }
+  }
+}
+
+  // calendar popover
+  #calendarArea {
+    padding: 0.75em 1.0em;
+  }
+
+  .calendar {
+    margin-bottom: 1em;
+  }
+
+  .calendar, .world-clocks-button, .weather-button, .events-button {
+    background: transparent;
+    border: none;
+    color: $fg_color;
+  }
+
+    .calendar,
+    .datemenu-today-button,
+    .datemenu-displays-box,
+    .message-list-sections {
+      margin: 0 1.5em;
+    }
+
+    .datemenu-calendar-column { spacing: 0.5em; }
+    .datemenu-displays-section { padding-bottom: 3em; }
+    .datemenu-displays-box { spacing: 1em; }
+
+    .datemenu-calendar-column {
+      border: 0 solid transparent;
+      &:ltr { border-left-width: 1px; }
+      &:rtl { border-right-width: 1px; }
+      background: darken($bg_color, 0.7%);
+     //@include gradient();
+    }
+
+    .datemenu-today-button,
+    .world-clocks-button,
+    .weather-button,
+    .events-section-title,
+    .message-list-section-title,
+    .events-button {
+      border-radius: 4px;
+      color: $fg_color;
+      padding: .4em;
+    }
+
+    .message-list-section-list:ltr {
+      padding-left: .4em;
+    }
+
+    .message-list-section-list:rtl {
+      padding-right: .4em;
+    }
+
+    .datemenu-today-button,
+    .world-clocks-button,
+    .weather-button,
+    .events-section-title,
+    .message-list-section-title,
+    .events-button {
+      &:hover,&:focus { background-color: lighten($bg_color,5%); }
+      &:active {
+        color: lighten($selected_fg_color,5%);
+        background-color: $selected_bg_color;
+      }
+    }
+
+    .datemenu-today-button .day-label {
+    }
+
+    .datemenu-today-button .date-label {
+      font-size: 1.5em;
+    }
+
+    .world-clocks-header,
+    .weather-header,
+    .events-section-title,
+    .message-list-section-title,
+    .events-title {
+      color: darken($fg_color, 10%);
+      font-weight: bold;
+    }
+
+    .events-button .event-time {
+      color: darken($fg_color, 4%);
+    }
+
+    .world-clocks-grid {
+      spacing-rows: 0.4em;
+    }
+
+    .weather-box {
+      spacing: 0.4em;
+    }
+
+    .calendar-month-label {
+      color: darken($fg_color,5%);
+      font-weight: bold;
+      padding: 8px 0;
+      &:focus {}
+    }
+
+    .pager-button {
+      color: white;
+      background-color: transparent;
+      width: 32px;
+      border-radius: 4px;
+      &:hover, &:focus { background-color: transparentize($fg_color,0.95); }
+      &:active { background-color: transparentize($bg_color,0.95); }
+    }
+
+    .calendar-change-month-back { //arrow back
+      background-image: url("assets/calendar-arrow-left.svg");
+      &:rtl { background-image: url("assets/calendar-arrow-right.svg"); }
+    }
+    .calendar-change-month-forward { //arrow foreward
+      background-image: url("assets/calendar-arrow-right.svg");
+      &:rtl { background-image: url("assets/calendar-arrow-left.svg"); }
+    }
+
+    .calendar-change-month-back StIcon,
+    .calendar-change-month-forward StIcon {
+      color: darken($fg_color, 5%);
+    }
+
+
+    .calendar-day-base {
+      font-size: 80%;
+      text-align: center;
+      width: 2.4em; height: 2.4em;
+      padding: 0.1em;
+      margin: 2px;
+      border-radius: 1.4em;
+      color: $fg_color;
+      &:hover,&:focus { background-color: lighten($bg_color,5%); }
+      &:active,&:selected {
+        color: $selected_fg_color;
+        background-color: $selected_bg_color;
+        @include gradient();
+        border-color: black; //avoid jumparound due to today
+      }
+      &.calendar-day-heading {  //day of week heading
+        color: darken($fg_color, 10%);
+        margin-top: 1em;
+        font-size: 70%;
+      }
+    }
+      .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-work-day {
+
+      }
+      .calendar-nonwork-day {
+        color: $insensitive_fg_color;
+      }
+       // Today
+      .calendar-today {
+        font-weight: bold;
+        border: 1px solid transparent;
+        background-color: $selected_bg_color;
+        color: $selected_fg_color;
+
+        &:hover,&:focus {
+          background-color:lighten($selected_bg_color, 3%);
+          color: $selected_fg_color;
+        }
+
+        &:active,&:selected {
+          background-color: $selected_bg_color;
+          color: $selected_fg_color;
+
+          &:hover,&:focus {
+            background-color:lighten($selected_bg_color, 3%);
+            color: $selected_fg_color;
+          }
+        }
+      }
+
+      .calendar-day-with-events {
+        color: lighten($fg_color,10%);
+        font-weight: bold;
+        background-image: url("assets/calendar-today.svg");
+      }
+      .calendar-other-month-day {
+        color: $insensitive_fg_color;
+        opacity: 0.5;
+      }
+      .calendar-week-number {
+        font-size: 70%;
+        font-weight: bold;
+        width: 2.3em; height: 1.8em;
+        border-radius: 2px;
+        padding: 0.5em 0 0;
+        margin: 6px;
+        background-color: transparentize($fg_color,0.7);
+        color: $bg_color;
+      }
+
+      /* Message list */
+      .message-list {
+        width: 31.5em;
+        .message-title, .message-content, .message-body {
+          color: darken($fg_color, 5%);
+        }
+      }
+
+        .message-list-clear-button.button {
+          @include button(normal);
+          &:hover,&:focus { @include button(hover); }
+          margin: 1.5em 1.5em 0;
+        }
+
+        .message-list-sections {
+          spacing: 1em;
+        }
+
+        .message-list-section,
+        .message-list-section-list {
+          spacing: 0.4em;
+        }
+        .message-list-section-close{
+          & > StIcon {
+            icon-size: 16px;
+            border-radius: 16px;
+            padding: 8px;
+            color: $fg_color;
+            background-color: transparent;
+          }
+          &:hover > StIcon,
+          &:focus > StIcon
+          &:active > StIcon{
+            color: $red;
+            background: transparent;
+          }
+        }
+
+        .message {
+          &:hover,&:focus { 
+            background-color: darken($bg_color, 1%);
+            //@include gradient();
+            box-shadow: 2px 0px 0px 0px $g2 inset;
+           }
+          border: 1px solid darken($bg_color, 5%);
+          border-radius: 3px;
+          background: darken($bg_color, 1%);
+          box-shadow: none;
+        }
+
+          .message-icon-bin {
+            padding: 10px 3px 10px 10px;
+            &:rtl { padding: 10px 10px 10px 3px; }
+          }
+
+          .message-icon-bin > StIcon {
+            icon-size: 16px;
+            -st-icon-style: symbolic;
+          }
+
+          .message-secondary-bin {
+            padding: 0 12px;
+          }
+
+          .message-secondary-bin > .event-time {
+            color: darken($fg_color, 15%);
+            font-size: 0.7em;
+            /* HACK: the label should be baseline-aligned with a 1em label,
+                     fake this with some bottom padding */
+            padding-bottom: 0.13em;
+           
+          }
+
+          .message-secondary-bin > StIcon {
+            icon-size: 16px;
+          }
+
+          .message-title {
+            //color: darken($fg_color,5%);
+            
+          }
+
+          .message-content {
+          //  color: darken($fg_color,20%);
+            padding: 10px;
+            *:hover > StIcon,
+            *:focus > StIcon, {
+              color: $red;
+            }
+          }
+
+          .message-media-control {
+            padding: 12px;
+            color: darken($fg_color, 20%);
+
+            &:last-child:ltr { padding-right: 18px; }
+            &:last-child:rtl { padding-left: 18px; }
+            &:hover { color: $fg_color; }
+            &:insensitive { color: darken($fg_color,40%); }
+          }
+
+          .media-message-cover-icon {
+            icon-size: 48px !important;
+            &.fallback {
+              color: lighten($bg_color,10%);
+              background-color: $bg_color;
+              border: 2px solid $bg_color;
+              border-radius: 2px;
+              icon-size: 16px;
+              padding: 8px; }
+          }
+/* World clocks */
+.world-clocks-button {
+  
+  // city label
+  .world-clocks-city {
+    color: $fg_color;
+    font-weight: normal;
+  }
+
+  // timezone time
+  .world-clocks-time {
+    font-weight: bold;
+    color: $fg_color;
+    font-feature-settings: "lnum";
+    text-align: right;
+  }
+
+  // timezone offset label
+  .world-clocks-timezone {
+    color: darken($fg_color,20%);
+    font-feature-settings: "tnum";
+  }
+}
+
+  /* Weather */
+  .weather-button {
+  
+    .weather-header {
+      color: darken($fg_color, 10%);
+      font-weight: bold;
+  
+      &.location {
+        font-weight: normal;
+      }
+    }
+  
+    .weather-forecast-time {
+      color: darken($fg_color, 10%);
+      font-feature-settings: "tnum";
+      font-weight: normal;
+      padding-top: 0.2em;
+      padding-bottom: 0.4em;
+    }
+  
+    .weather-forecast-temp {
+      font-weight: bold;
+    }
+  }
+
+  // a little unstructured mess:
+
+  .system-switch-user-submenu-icon.user-icon {
+    icon-size: 20px;
+    padding: 0 2px;
+  }
+  .system-switch-user-submenu-icon.default-icon {
+    icon-size: 16px;
+    padding: 0 4px;
+  }
+
+  #appMenu {
+    spinner-image: url("assets/process-working.svg");
+    spacing: 4px;
+
+    .label-shadow { color: transparent; }
+  }
+
+  .aggregate-menu {
+    min-width: 21em;
+    .popup-menu-icon { padding: 0 4px; }
+  }
+
+  .system-menu-action {
+
+    color: $fg_color;
+   
+    border-radius: 32px; /* wish we could do 50% */
+    border: 1px solid $borders_color;
+    background: darken($bg_color, 3%);
+    padding: 13px;
+
+    &:hover, &:focus {
+      border: 1px solid $selected_bg_color;
+      color: $selected_bg_color;
+      background: transparent;
+    }
+    &:active {
+       background-color: darken($selected_bg_color, 10%);
+       color: $selected_fg_color; 
+       border: 1px solid darken($selected_bg_color, 10%);
+      }
+
+    & > StIcon { icon-size: 16px; }
+  }
+
+//Activities Ripples
+.ripple-box {
+  width: 52px;
+  height: 52px;
+  background-image: url("assets/corner-ripple-ltr.png");
+  background-size: contain;
+}
+
+.ripple-box:rtl {
+  background-image: url("assets/corner-ripple-rtl.png");
+}
+
+// not really top bar only
+.popup-menu-arrow { width: 16px; height: 16px; }
+.popup-menu-icon { icon-size: 1.09em; }
+
+//close buttons
+
+.window-close {
+  background-color: transparent;
+  background-image: url("assets/close-window.svg");
+  background-size: 32px;
+  border: none;
+  box-shadow: none;
+  color: transparent;
+  height: 32px;
+  width: 32px;
+}
+  .window-close {
+    -shell-close-overlap: 16px;
+    &:rtl { -st-background-image-shadow: 2px 2px 6px rgba(0,0,0,0.5); }
+  }
+
+/* NETWORK DIALOGS */
+
+.nm-dialog {
+  max-height: 34em;
+  min-height: 31em;
+  min-width: 32em;
+}
+
+  .nm-dialog-content {
+    spacing: 20px;
+    padding: 24px;
+  }
+  .nm-dialog-header-hbox { spacing: 10px; }
+  .nm-dialog-airplane-box { spacing: 12px; }
+
+  .nm-dialog-airplane-headline {
+    font-weight: bold;
+    text-align: center;
+  }
+
+  .nm-dialog-airplane-text { color: $fg_color; }
+  .nm-dialog-header-icon { icon-size: 32px; }
+  .nm-dialog-scroll-view { border: 2px solid $borders_color; background: transparent;}
+  .nm-dialog-header { font-weight: bold; }
+
+  .nm-dialog-item {
+    font-size: 110%;
+    border-bottom: 1px solid $borders_color;
+    padding: 12px;
+    spacing: 20px;
+  }
+
+  .nm-dialog-item:selected {
+    background-color: $selected_bg_color;
+    color: $selected_fg_color;
+  }
+
+  .nm-dialog-icons { spacing: .5em; }
+  .nm-dialog-icon { icon-size: 16px; }
+  .no-networks-label { color: #999999; }
+  .no-networks-box { spacing: 12px; }
+
+/* OVERVIEW */
+
+#overview,.controls-manager, .secondary-monitor-workspaces {
+  spacing: 24px; //
+}
+
+#overviewGroup {
+  background-color: $base_color;
+}
+
+.overview-controls {
+  padding-bottom: 32px;
+}
+
+  .window-picker { //container around window thumbnails
+    -horizontal-spacing: 16px;
+    -vertical-spacing: 16px;
+    padding: 0 16px 16px;
+
+    &.external-monitor { padding: 16px; }
+  }
+
+  .window-clone-border {
+    border: 4px solid transparentize($selected_bg_color,.7);
+    border-radius: 0px;
+    // For window decorations with round corners we can't match
+    // the exact shape when the window is scaled. So apply a shadow
+    // to fix that case
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
+  }
+  .window-caption {
+    spacing: 20px;
+    color: $topbar_color;
+    background-color: transparentize($main_dark, .3);
+    border-radius: 2px;
+    padding: 4px 8px;
+  }
+
+  //search entry
+  .search-entry {
+    width: 320px;
+    padding: 9px;
+    border-radius: 100px;
+    border: 1px solid $borders_color;
+    color: $fg_color;
+    background-color: $_dash_bg;
+    box-shadow: $depth;
+
+
+    .search-entry-icon { icon-size: 1em; padding: 0 4px; color: transparentize($fg_color,.3); }
+
+    &:hover, &:focus {
+      background-color: $_dash_bg;
+      border-color: transparentize($selected_bg_color, 0.2);
+      .search-entry-icon { color: $fg_color; }
+    }
+  }
+
+  //search results
+
+  #searchResultsBin {
+    max-width: 1000px;
+  }
+
+  #searchResultsContent {
+    padding-left: 20px;
+    padding-right: 20px;
+    spacing: 16px;
+  }
+
+  .search-section { spacing: 16px; } // This should be equal to #searchResultsContent spacing
+  .search-section-content { 
+    background-color: transparent;
+    border-radius: 0;
+    border: none;
+    box-shadow: none;
+    // This is the space between the provider icon and the results container
+    spacing: 32px; 
+  }
+  .search-statustext { // "no results"
+    @extend %status_text;
+  }
+  .list-search-results { spacing: 3px; }
+
+  .search-section-separator { height: 2px; background-color: rgba(255, 255, 255, 0.2); }
+
+  .list-search-result-content { spacing: 30px; }
+  .list-search-result-title { color: lighten($topbar_color,5%); spacing: 12px; }
+  .list-search-result-description { color: transparentize(lighten($topbar_color,15%), 0.5); }
+  .list-search-provider-details { width: 150px; color: lighten($topbar_color,5%); margin-top: 0.24em; }
+  .list-search-provider-content { spacing: 20px; }
+  .search-provider-icon { padding: 15px; }
+
+
+  /* DASHBOARD */
+  .dash-background {
+    background-color: $_dash_bg;
+  }
+
+  .dash-separator {
+    width: 1px;
+    background-color: $gray;
+  }
+
+  .dash-label { //osd tooltip
+    border-radius: 7px;
+    padding: 4px 12px;
+    color: $topbar_color;
+    background-color: $topbar_bg_color;
+    text-align: center;
+    border: 1px solid $borders_color;
+    -x-offset: 8px;
+  }
+
+  /* App Vault/Grid */
+  .icon-grid {
+    spacing: 30px;
+    -shell-grid-horizontal-item-size: 136px;
+    -shell-grid-vertical-item-size: 136px;
+
+    .overview-icon { icon-size: 96px; }
+  }
+  //.app-display { spacing: 20px; }
+
+  .system-action-icon {
+    background-color: black;
+    color: white;
+    border-radius: 99px;
+    icon-size: 48px;
+  }
+
+  .app-view-controls { //favorties | all toggle container
+    padding-bottom: 32px;
+
+  }
+  .app-view-control { //favorties | all toggle button
+    padding: 4px 32px;
+    &:checked { 
+      @include gradient();
+      color: #fff;
+    }
+    &:hover {
+      border: none;
+    }
+    &:first-child {
+      border-right-width: 0;
+      border-radius: 3px 0 0 3px;
+    }
+    &:last-child {
+     border-radius: 0 3px 3px 0;
+    }
+  }
+
+  //Icon tile
+  .search-provider-icon,
+  .list-search-result {
+    @extend %icon_tile;
+    &:active, &:checked { background-color: transparentize(darken($osd_bg_color,10%),.1); }
+    &:focus, &:selected, &:hover {
+      background-color: transparentize($bg_color,.7);
+      transition-duration: 200ms;
+    }
+  }
+  .app-well-app,
+  .app-well-app.app-folder,
+  .show-apps,
+  .grid-search-result {
+    
+    border: none;
+    & .overview-icon {
+      @extend %icon_tile;
+    }
+   
+    &:hover .overview-icon,
+    &:focus .overview-icon,
+    &:selected .overview-icon {
+      background-color: darken($_dash_bg, 4%);
+      transition-duration: 0ms;
+      border-image: none;
+      background-image: none;
+    }
+
+    &:active .overview-icon,
+    &:checked .overview-icon {
+      background-color: darken($_dash_bg, 7%);
+      box-shadow: inset $depth2;
+      color: $fg_color;
+    }
+
+  }
+
+  .app-well-app-running-dot { //running apps indicator
+    width: 4px; height: 4px;
+    background-color: $selected_bg_color;
+    border-radius: 10px !important;
+    box-shadow: 0px 0px 5px 4px transparentize($selected_bg_color,0.2);
+    margin-bottom: 0px;
+  }
+
+  %icon_tile {
+    color: $selected_fg_color;
+    padding: 7px 6px;
+    border: none;
+    transition-duration: 100ms;
+    text-align: center;
+    box-shadow: $depth;
+  }
+
+  /* App Folders */
+.app-well-app.app-folder {
+  background-color: $_dash_bg;
+}
+// expanded folder
+.app-folder-dialog { //style like the dash
+  background-color:  $_dash_bg;
+  .edit-folder-button {
+    @extend %button;
+
+    padding: 0;
+    width: 36px;
+    height: 36px;
+    border-radius: 18px;
+
+    & > StIcon { icon-size: 16px }
+  }
+}
+
+  .app-well-app.app-folder > .overview-icon {
+    background-color: transparentize($osd_bg_color,.6);
+  }
+  .show-apps .show-apps-icon {
+    color: $topbar_color;
+  }
+  .show-apps:checked .show-apps-icon,
+  .show-apps:focus .show-apps-icon {
+    color: $fg_color;
+    transition-duration: 100ms;
+  }
+
+
+  // Collections
+  .app-folder-popup { //expanded collection
+    -arrow-border-radius: 8px;
+    -arrow-background-color: transparentize($bg_color,0.5);
+    -arrow-base: 24px;
+    -arrow-rise: 11px;
+  }
+  .app-folder-popup-bin { padding: 5px; background: transparentize($bg_color,.5);;}
+  .app-folder-icon {
+    padding: 5px;
+    spacing-rows: 5px;
+    spacing-columns: 5px;
+  }
+
+  .page-indicator {
+    padding: 15px 20px;
+
+    .page-indicator-icon {
+      width: 12px;
+      height: 12px;
+      border-radius: 12px;
+      background-image: none;
+      background-color: rgba(255, 255, 255, 0.3);
+    }
+
+    &:hover .page-indicator-icon {  
+      background-image: none;
+      background-color: rgba(255, 255, 255, 0.5); 
+    }
+    &:active .page-indicator-icon { 
+      background-image: none;
+      background-color: rgba(255, 255, 255, 0.7);
+    }
+    &:checked .page-indicator-icon{ 
+      background-image: none;
+      background-color: #FFFFFF;
+      transition-duration: 0s; 
+    }
+  }
+
+  .no-frequent-applications-label { @extend %status_text; }
+
+  .app-well-app > .overview-icon.overview-icon-with-label,
+  .grid-search-result .overview-icon.overview-icon-with-label {
+    padding: 10px 8px 5px 8px;
+    spacing: 4px;
+  }
+
+  // Workspace pager
+  .workspace-thumbnails { //container ala dash
+    @extend %overview-panel;
+    visible-width: 32px; //amount visible before hover
+    spacing: 11px;
+    padding: 8px;
+    border-radius: 0;
+    //border-width: 1px 0 1px 1px; //fixme: can't have non unoform borders :(
+    &:rtl { border-radius: 0;}
+  }
+  .workspace-thumbnail-indicator {
+    border: 4px solid transparentize($selected_bg_color, .5);
+    box-shadow: $depth;
+    padding: 0;
+  }
+
+  //Some hacks I don't even
+  .search-display > StBoxLayout,
+  .all-apps,
+  .frequent-apps > StBoxLayout {
+    // horizontal padding to make sure scrollbars or dash don't overlap content
+    padding: 0px 88px 10px 88px;
+  }
+
+%overview-panel {
+  color:  $_bubble_fg_color;
+  background-color: transparent;
+  border: none;
+}
+
+%status_text {
+  font-size: 2em;
+  font-weight: bold;
+  color: $fg_color;
+}
+
+/* NOTIFICATIONS & MESSAGE TRAY */
+
+  .url-highlighter { link-color: lighten($selected_bg_color,10%); }
+
+  // Banners
+  .notification-banner {
+    font-size: 11pt;
+    width: 34em;
+    margin: 5px;
+    border-radius: 3px;
+    color: $topbar_color;
+    background-color: $bg_color;
+    border: 1px solid $borders_color;
+    box-shadow: 0 1px 4px black;
+    &:hover { background-color: transparentize($bg_color, 0.04); }
+    &:focus { background-color: transparentize($bg_color, 0.04); }
+    * { color: $fg_color; }
+
+    .notification-icon { padding: 5px; }
+    .notification-content { padding: 5px; spacing: 5px; }
+    .secondary-icon { icon-size: 1.09em; }
+    .notification-actions {
+      background-color: darken($bg_color, 2%);
+      padding-top: 2px;
+      spacing: 1px;
+    }
+    .notification-button {
+      padding: 5px;
+      background-color: transparentize($bg_color, 0.1);
+      box-shadow: none;
+      border: none;
+      &:first-child { border-radius: 0 0 0 3px; }
+      &:last-child { border-radius: 0 0 3px 0; }
+      &:hover, &focus { background-color: darken($bg_color,2%); color: $selected_bg_color;}
+    }
+  }
+  .summary-source-counter {
+    font-size: 10pt;
+    font-weight: bold;
+    height: 1.6em; width: 1.6em;
+    -shell-counter-overlap-x: 3px;
+    -shell-counter-overlap-y: 3px;
+    background-color: $selected_bg_color;
+    color: $selected_fg_color;
+    border: 2px solid $osd_fg_color;
+    box-shadow: 0 2px 2px rgba(0,0,0,0.5);
+    border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%;
+  }
+
+  .secondary-icon { icon-size: 1.09em; }
+
+  //chat bubbles
+  .chat-body { spacing: 5px; }
+  .chat-response { margin: 5px; }
+  .chat-log-message { color: darken($fg_color,10%); }
+  .chat-new-group { padding-top: 1em; }
+  .chat-received {
+    padding-left: 4px;
+    &:rtl { padding-left: 0px; padding-right: 4px; }
+  }
+  .chat-sent {
+    padding-left: 18pt;
+    color: darken($fg_color, 15%);
+    &:rtl { padding-left: 0; padding-right: 18pt; }
+  }
+  .chat-meta-message {
+    padding-left: 4px;
+    font-size: 9pt;
+    font-weight: bold;
+    color: darken($fg_color,20%);
+    &:rtl { padding-left: 0; padding-right: 4px; }
+  }
+
+  //hotplug
+  .hotplug-transient-box {
+    spacing: 6px;
+    padding: 2px 72px 2px 12px;
+  }
+    .hotplug-notification-item {
+      padding: 2px 10px;
+      &:focus { padding: 1px 71px 1px 11px; }
+    }
+
+    .hotplug-notification-item-icon {
+      icon-size: 24px;
+      padding: 2px 5px;
+    }
+
+    .hotplug-resident-box { spacing: 8px; }
+
+    .hotplug-resident-mount {
+      spacing: 8px;
+      border-radius: 4px;
+      &:hover { background-color: transparentize($bg_color,0.7); }
+    }
+
+    .hotplug-resident-mount-label {
+      color: inherit;
+      padding-left: 6px;
+    }
+
+    .hotplug-resident-mount-icon {
+      icon-size: 24px;
+      padding-left: 6px;
+    }
+
+    .hotplug-resident-eject-icon {
+      icon-size: 16px;
+    }
+
+    .hotplug-resident-eject-button {
+      padding: 7px;
+      border-radius: 5px;
+      color: pink;
+    }
+
+/* Eeeky things */
+
+//magnifier
+
+.magnifier-zoom-region {
+  border: 2px solid $selected_bg_color;
+  &.full-screen { border-width: 0; }
+}
+
+//Keyboard
+/* On-screen Keyboard */
+
+#keyboard {
+    background-color: transparentize($osd_bg_color, 0.3);
+}
+
+  .keyboard-layout {
+    spacing: 10px;
+    padding: 10px;
+  }
+
+  .keyboard-row { spacing: 15px; }
+
+  .keyboard-key {
+   @include button(normal);
+    background-color: $base_color;
+    min-height: 2em;
+    min-width: 2em;
+    font-size: 14pt;
+    font-weight: bold;
+    border-radius: 5px;
+    &:focus { @include button(focus); }
+    &:hover,&:checked { @include button(hover); }
+    &:active { @include button(active);}
+    &:grayed { //FIXME
+      background-color: $osd_bg_color;
+      color: $osd_fg_color;
+      border-color: $osd_borders_color;
+    }
+  }
+
+  .keyboard-subkeys { //long press on a key popup
+    color: white;
+    padding: 5px;
+    -arrow-border-radius: 10px;
+    -arrow-background-color: transparentize($osd_bg_color, 0.3);
+    -arrow-border-width: 2px;
+    -arrow-border-color: $_bubble_borders_color;
+    -arrow-base: 20px;
+    -arrow-rise: 10px;
+    -boxpointer-gap: 5px;
+  }
+
+// IBus Candidate Popup
+
+.candidate-popup-content {
+  padding: 0.5em;
+  spacing: 0.3em;
+}
+
+  .candidate-index {
+    padding: 0 0.5em 0 0;
+    color: darken($fg_color,10%);
+  }
+
+  .candidate-box {
+    padding: 0.3em 0.5em 0.3em 0.5em;
+    border-radius: 4px;
+    &:selected,&:hover { background-color: $selected_bg_color; color: $selected_fg_color; }
+  }
+
+  .candidate-page-button-box {
+    height: 2em;
+    .vertical & { padding-top: 0.5em; }
+    .horizontal & { padding-left: 0.5em; }
+  }
+
+  .candidate-page-button {
+    padding: 4px;
+  }
+
+  .candidate-page-button-previous { border-radius: 4px 0px 0px 4px; border-right-width: 0; }
+  .candidate-page-button-next { border-radius: 0px 4px 4px 0px;  }
+  .candidate-page-button-icon { icon-size: 1em; }
+
+/* Auth Dialogs & Screen Shield */
+
+.framed-user-icon {
+  background-size: contain;
+  border: 2px solid $osd_fg_color;
+  color: $osd_fg_color;
+  border-radius: 3px;
+  &:hover {
+    border-color: lighten($osd_fg_color,30%);
+    color: lighten($osd_fg_color,30%);
+  }
+}
+
+// LOGIN DIALOG
+
+.login-dialog-banner-view {
+  padding-top: 24px;
+  max-width: 23em;
+}
+
+.login-dialog {
+  //reset
+  border: none;
+  background-color: transparent;
+
+  .modal-dialog-button-box { spacing: 3px; }
+  .modal-dialog-button {
+    padding: 3px 18px;
+    &:default {
+      @include button(normal,$c:$selected_bg_color);
+      &:hover,&:focus { @include button(hover,$c:$selected_bg_color); }
+      &:active { @include button(active,$c:$selected_bg_color); }
+      &:insensitive { @include button(insensitive); }
+
+    }
+  }
+
+}
+
+  .login-dialog-logo-bin { padding: 24px 0px; }
+  .login-dialog-banner { color: darken($osd_fg_color,10%); }
+  .login-dialog-button-box { spacing: 5px; }
+  .login-dialog-message-warning { color: $warning_color; }
+  .login-dialog-message-hint { padding-top: 0; padding-bottom: 20px; }
+  .login-dialog-user-selection-box { padding: 100px 0px; }
+  .login-dialog-not-listed-label {
+    padding-left: 2px;
+    .login-dialog-not-listed-button:focus &,
+    .login-dialog-not-listed-button:hover & {
+      color: $osd_fg_color;
+    }
+  }
+  .login-dialog-not-listed-label {
+    font-size: 90%;
+    font-weight: bold;
+    color: darken($osd_fg_color,30%);
+    padding-top: 1em;
+  }
+
+  .login-dialog-user-list-view { -st-vfade-offset: 1em; }
+  .login-dialog-user-list {
+    spacing: 12px;
+    padding: .2em;
+    width: 23em;
+    &:expanded .login-dialog-user-list-item:selected { background-color: $selected_bg_color; color: $selected_fg_color; }
+    &:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid $selected_bg_color; }
+  }
+  .login-dialog-user-list-item {
+    border-radius: 5px;
+    padding: .2em;
+    color: darken($osd_fg_color,30%);
+    &:ltr { padding-right: 1em; }
+    &:rtl { padding-left: 1em; }
+    .login-dialog-timed-login-indicator {
+      height: 2px;
+      margin: 2px 0 0 0;
+      background-color: $osd_fg_color;
+    }
+    &:focus .login-dialog-timed-login-indicator { background-color: $selected_fg_color; }
+  }
+
+  .login-dialog-username,
+  .user-widget-label {
+    color: $osd_fg_color;
+    font-size: 120%;
+    font-weight: bold;
+    text-align: left;
+    padding-left: 15px;
+  }
+    .user-widget-label {
+      &:ltr { padding-left: 18px; }
+      &:rtl { padding-right: 18px; }
+    }
+
+  .login-dialog-prompt-layout {
+      padding-top: 24px;
+      padding-bottom: 12px;
+      spacing: 8px;
+      width: 23em;
+  }
+
+  .login-dialog-prompt-label {
+      color: darken($osd_fg_color, 20%);
+      font-size: 110%;
+      padding-top: 1em;
+  }
+
+  .login-dialog-session-list-button StIcon {
+      icon-size: 1.25em;
+  }
+
+  .login-dialog-session-list-button {
+      color: darken($osd_fg_color,30%);
+      &:hover,&:focus { color: $osd_fg_color; }
+      &:active { color: darken($osd_fg_color, 50%); }
+  }
+
+//SCREEN SHIELD
+
+.screen-shield-arrows {
+    padding-bottom: 3em;
+}
+
+.screen-shield-arrows Gjs_Arrow {
+    color: white;
+    width: 80px;
+    height: 48px;
+    -arrow-thickness: 12px;
+    -arrow-shadow: 0 1px 1px rgba(0,0,0,0.4);
+}
+
+.screen-shield-clock {
+  color: white;
+  text-shadow: 0px 1px 2px rgba(0,0,0,0.6);
+  font-weight: bold;
+  text-align: center;
+  padding-bottom: 1.5em;
+}
+
+.screen-shield-clock-time {
+  font-size: 72pt;
+  text-shadow: 0px 2px 2px rgba(0,0,0,0.4);
+}
+
+.screen-shield-clock-date { font-size: 28pt; }
+
+.screen-shield-notifications-container {
+  spacing: 6px;
+  width: 30em;
+  background-color: transparent;
+  max-height: 500px;
+  .summary-notification-stack-scrollview {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .notification,
+  .screen-shield-notification-source {
+    padding: 12px 6px;
+    border: 1px solid $_bubble_borders_color;
+    background-color: transparentize($osd_bg_color,0.5);
+    color: $_bubble_fg_color;
+    border-radius: 4px;
+  }
+  .notification { margin-right: 15px; } //compensate for space allocated to the scrollbar
+}
+
+
+.screen-shield-notification-label {
+  font-weight: bold;
+  padding: 0px 0px 0px 12px;
+}
+
+.screen-shield-notification-count-text { padding: 0px 0px 0px 12px; }
+
+#panel.lock-screen { background-color: transparentize($_bubble_bg_color, 0.5); }
+
+.screen-shield-background { //just the shadow, really
+  background: black;
+  box-shadow: 0px 2px 4px transparentize(black,0.6);
+}
+
+#lockDialogGroup {
+  background: #2e3436 url(resource:///org/gnome/shell/theme/noise-texture.png);
+  background-repeat: repeat;
+}
+
+#screenShieldNotifications {
+  StButton#vhandle, StButton#hhandle {
+    background-color: transparentize($bg_color,0.7);
+    &:hover, &:focus { background-color: transparentize($bg_color,0.5); }
+    &:active { background-color: transparentize($selected_bg_color,0.5); }
+  }
+}
+
+
+// Looking Glass
+#LookingGlassDialog {
+  background-color: rgba(0,0,0,0.80);
+  spacing: 4px;
+  padding: 4px;
+  border: 2px solid grey;
+  border-radius: 4px;
+  & > #Toolbar {
+    border: 1px solid grey;
+    border-radius: 4px;
+  }
+  .labels { spacing: 4px; }
+  .notebook-tab {
+    -natural-hpadding: 12px;
+    -minimum-hpadding: 6px;
+    font-weight: bold;
+    color: #ccc;
+    transition-duration: 100ms;
+    padding-left: .3em;
+    padding-right: .3em;
+    &:hover {
+      color: white;
+      text-shadow: black 0px 2px 2px;
+    }
+    &:selected {
+      border-bottom-width: 2px;
+      border-color: lighten($selected_bg_color,5%);
+      color: white;
+      text-shadow: black 0px 2px 2px;
+    }
+  }
+  StBoxLayout#EvalBox { padding: 4px; spacing: 4px; }
+  StBoxLayout#ResultsArea { spacing: 4px; }
+}
+
+  .lg-dialog {
+    StEntry {
+      selection-background-color: #bbbbbb;
+      selected-color: #333333;
+    }
+    .shell-link {
+      color: #999999;
+      &:hover { color: #dddddd; }
+     }
+  }
+
+  .lg-completions-text {
+      font-size: .9em;
+      font-style: italic;
+  }
+
+  .lg-obj-inspector-title {
+      spacing: 4px;
+  }
+
+  .lg-obj-inspector-button {
+      border: 1px solid gray;
+      padding: 4px;
+      border-radius: 4px;
+      &:hover { border: 1px solid #ffffff; }
+  }
+
+  #lookingGlassExtensions { padding: 4px; }
+
+  .lg-extensions-list {
+      padding: 4px;
+      spacing: 6px;
+  }
+
+  .lg-extension {
+      border: 1px solid #6f6f6f;
+      border-radius: 4px;
+      padding: 4px;
+  }
+
+  .lg-extension-name {
+      font-weight: bold;
+  }
+
+  .lg-extension-meta {
+      spacing: 6px;
+  }
+
+  #LookingGlassPropertyInspector {
+    background: rgba(0, 0, 0, 0.8);
+    border: 2px solid grey;
+    border-radius: 4px;
+    padding: 6px;
+  }
diff --git a/gnome-shell/v40/gnome-shell.css b/gnome-shell/v40/gnome-shell.css
new file mode 100644
index 0000000..dbdd353
--- /dev/null
+++ b/gnome-shell/v40/gnome-shell.css
@@ -0,0 +1,2074 @@
+/*****************
+* Drawing mixins *
+*****************/
+/* GLOBALS */
+stage {
+  font-size: 10pt;
+  color: #98abb2; }
+
+/* WIDGETS */
+/* Buttons */
+.button, .app-folder-dialog .edit-folder-button {
+  color: #98abb2;
+  background-color: #0e1018;
+  box-shadow: none;
+  border: 1px solid #12151e;
+  text-shadow: 0 1px black;
+  icon-shadow: 0 1px black;
+  border: 1px solid #12151e;
+  border-radius: 4px;
+  border-width: 0;
+  padding: 4px 32px; }
+  .button:focus, .app-folder-dialog .edit-folder-button:focus {
+    color: #c50ed2;
+    text-shadow: 0 1px black;
+    icon-shadow: 0 1px black;
+    box-shadow: none;
+    border: 1px solid #12151e; }
+  .button:insensitive, .app-folder-dialog .edit-folder-button:insensitive {
+    color: #58636d;
+    background-color: rgba(38, 43, 55, 0.66);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    border: none;
+    text-shadow: none;
+    icon-shadow: none; }
+  .button:active, .app-folder-dialog .edit-folder-button:active {
+    color: #c50ed2;
+    background-color: rgba(24, 27, 40, 0.95);
+    border: 1px solid #12151e;
+    text-shadow: none;
+    icon-shadow: none; }
+  .button:hover, .app-folder-dialog .edit-folder-button:hover {
+    color: #c50ed2;
+    background-color: #12151e;
+    border: 1px solid #12151e;
+    text-shadow: 0 1px black;
+    icon-shadow: 0 1px black; }
+
+.modal-dialog-linked-button {
+  padding: 10px;
+  border: 1px solid #12151e;
+  color: #98abb2;
+  background: #0e1018;
+  text-shadow: none;
+  icon-shadow: none;
+  box-shadow: none; }
+  .modal-dialog-linked-button:insensitive {
+    color: #58636d;
+    background-color: rgba(38, 43, 55, 0.66);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    border: none;
+    text-shadow: none;
+    icon-shadow: none; }
+  .modal-dialog-linked-button:active {
+    color: #c50ed2;
+    background-color: rgba(24, 27, 40, 0.95);
+    border: 1px solid #12151e;
+    text-shadow: none;
+    icon-shadow: none; }
+  .modal-dialog-linked-button:focus {
+    color: #c50ed2;
+    text-shadow: 0 1px black;
+    icon-shadow: 0 1px black;
+    box-shadow: none;
+    border: 1px solid #12151e; }
+    .modal-dialog-linked-button:focus:hover {
+      color: #c50ed2;
+      text-shadow: 0 1px black;
+      icon-shadow: 0 1px black;
+      box-shadow: none;
+      border: 1px solid #12151e; }
+  .modal-dialog-linked-button:hover {
+    color: #c50ed2;
+    background-color: #12151e;
+    border: 1px solid #12151e;
+    text-shadow: 0 1px black;
+    icon-shadow: 0 1px black; }
+  .modal-dialog-linked-button:first-child {
+    border-radius: 0px 0px 0px 2px; }
+  .modal-dialog-linked-button:last-child {
+    border-radius: 0px 0px 2px 0px; }
+  .modal-dialog-linked-button:first-child:last-child {
+    border-radius: 0px 0px 2px 2px; }
+
+/* Entries */
+StEntry {
+  background-color: #252a3e;
+  border-color: #12151e;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  border-radius: 2px;
+  padding: 4px;
+  border-width: 0;
+  color: #98abb2;
+  selection-background-color: #c50ed2;
+  selected-color: #f7f7f7; }
+  StEntry:focus {
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
+  StEntry:insensitive {
+    color: #58636d;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
+  StEntry StIcon.capslock-warning {
+    icon-size: 16px;
+    warning-color: #f47d49;
+    padding: 0 4px; }
+
+/* Scrollbars */
+StScrollView.vfade {
+  -st-vfade-offset: 68px; }
+
+StScrollView.hfade {
+  -st-hfade-offset: 68px; }
+
+StScrollBar {
+  padding: 0; }
+  StScrollView StScrollBar {
+    min-width: 14px;
+    min-height: 14px; }
+  StScrollBar StBin#trough {
+    border-radius: 0;
+    background-color: transparent; }
+  StScrollBar StButton#vhandle, StScrollBar StButton#hhandle {
+    border-radius: 8px;
+    background-color: #323844;
+    margin: 3px; }
+    StScrollBar StButton#vhandle:hover, StScrollBar StButton#hhandle:hover {
+      background-color: #7e8e96; }
+    StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active {
+      background-color: #c50ed2; }
+
+/* Slider */
+.slider {
+  height: 1em;
+  color: #b7b7b7;
+  border-color: black;
+  -slider-height: 0.1em;
+  -slider-background-color: #252a3e;
+  -slider-border-color: black;
+  -slider-active-background-color: #FED766;
+  -slider-active-border-color: #84ff39;
+  -slider-border-width: 0;
+  -slider-handle-radius: 6px;
+  -barlevel-height: 0.1em;
+  -barlevel-background-color: #252a3e;
+  -barlevel-border-color: black;
+  -barlevel-active-background-color: #FED766;
+  -barlevel-active-border-color: #84ff39;
+  -barlevel-border-width: 0;
+  -barlevel-handle-radius: 6px;
+  -barlevel-overdrive-color: #FED766;
+  -barlevel-overdrive-border-color: transparent;
+  -barlevel-overdrive-separator-width: 0px; }
+
+/* Check Boxes */
+.check-box StBoxLayout {
+  spacing: .8em; }
+
+.check-box StBin {
+  width: 24px;
+  height: 22px;
+  background-image: url("assets/checkbox-off.svg"); }
+
+.check-box:focus, .check-box:hover 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"); }
+
+/* Switches */
+.toggle-switch {
+  width: 65px;
+  height: 22px;
+  background-size: contain;
+  background-image: url("assets/toggle-off.svg"); }
+  .toggle-switch:checked {
+    background-image: url("assets/toggle-on.svg"); }
+
+.toggle-switch-us {
+  background-image: url("assets/toggle-off.svg"); }
+  .toggle-switch-us:checked {
+    background-image: url("assets/toggle-on.svg"); }
+
+.toggle-switch-intl {
+  background-image: url("assets/toggle-off.svg"); }
+  .toggle-switch-intl:checked {
+    background-image: url("assets/toggle-on.svg"); }
+
+/* links */
+.shell-link {
+  color: #A0C1B9; }
+  .shell-link:hover {
+    color: #bfd5d0; }
+
+/* Modal Dialogs */
+.headline {
+  font-size: 110%; }
+
+.lightbox {
+  background-color: black; }
+
+.flashspot {
+  background-color: white; }
+
+.modal-dialog {
+  border: none;
+  border-radius: 2px;
+  color: #98abb2;
+  background-color: rgba(14, 16, 24, 0.95);
+  box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.2); }
+  .modal-dialog .modal-dialog-content-box {
+    padding: 24px; }
+  .modal-dialog .run-dialog-entry {
+    width: 20em;
+    margin-bottom: 6px; }
+  .modal-dialog .run-dialog-error-box {
+    color: #e6006e;
+    padding-top: 16px;
+    spacing: 6px; }
+  .modal-dialog .run-dialog-button-box {
+    padding-top: 1em; }
+  .modal-dialog .run-dialog-label {
+    font-size: 11pt;
+    font-weight: bold;
+    color: #7b939c;
+    padding-bottom: .4em; }
+
+.mount-dialog-subject,
+.end-session-dialog-subject {
+  font-size: 13pt; }
+
+/* Message Dialog */
+.message-dialog-main-layout {
+  padding: 12px 20px 0;
+  spacing: 12px; }
+
+.message-dialog-content {
+  max-width: 28em;
+  spacing: 20px; }
+
+.message-dialog-icon {
+  min-width: 48px;
+  icon-size: 48px; }
+
+.message-dialog-title {
+  font-weight: bold; }
+
+.message-dialog-subtitle {
+  color: #364348;
+  font-weight: bold; }
+
+/* End Session Dialog */
+.end-session-dialog {
+  spacing: 42px;
+  border: none; }
+  .end-session-dialog .modal-dialog-linked-button:last-child {
+    background-gradient-start: #c50ed2;
+    background-gradient-end: #8500f7;
+    background-gradient-direction: horizontal;
+    color: #fff; }
+    .end-session-dialog .modal-dialog-linked-button:last-child:hover, .end-session-dialog .modal-dialog-linked-button:last-child:focus {
+      background: #d60066;
+      color: #fff; }
+
+.end-session-dialog-list {
+  padding-top: 20px; }
+
+.end-session-dialog-layout {
+  padding-left: 17px; }
+  .end-session-dialog-layout:rtl {
+    padding-right: 17px; }
+
+.end-session-dialog-description {
+  width: 28em;
+  padding-bottom: 10px; }
+  .end-session-dialog-description:rtl {
+    text-align: right; }
+
+.end-session-dialog-warning {
+  width: 28em;
+  color: #f47d49;
+  padding-top: 6px; }
+  .end-session-dialog-warning:rtl {
+    text-align: right; }
+
+.end-session-dialog-logout-icon {
+  border-radius: 3px;
+  width: 48px;
+  height: 48px;
+  background-size: contain; }
+
+.end-session-dialog-shutdown-icon {
+  color: #e6006e;
+  width: 48px;
+  height: 48px; }
+
+.end-session-dialog-inhibitor-layout {
+  spacing: 16px;
+  max-height: 200px;
+  padding-right: 65px;
+  padding-left: 65px; }
+
+.end-session-dialog-session-list,
+.end-session-dialog-app-list {
+  spacing: 1em; }
+
+.end-session-dialog-list-header {
+  font-weight: bold; }
+  .end-session-dialog-list-header:rtl {
+    text-align: right; }
+
+.end-session-dialog-app-list-item,
+.end-session-dialog-session-list-item {
+  spacing: 1em; }
+
+.end-session-dialog-app-list-item-name,
+.end-session-dialog-session-list-item-name {
+  font-weight: bold; }
+
+.end-session-dialog-app-list-item-description {
+  color: #899fa7;
+  font-size: 10pt; }
+
+/* ShellMountOperation Dialogs */
+.shell-mount-operation-icon {
+  icon-size: 48px; }
+
+.mount-dialog {
+  spacing: 24px; }
+  .mount-dialog .message-dialog-title {
+    padding-top: 10px;
+    padding-left: 17px;
+    padding-bottom: 6px;
+    max-width: 34em; }
+  .mount-dialog .message-dialog-title:rtl {
+    padding-left: 0px;
+    padding-right: 17px; }
+  .mount-dialog .message-dialog-body {
+    padding-left: 17px;
+    width: 28em; }
+  .mount-dialog .message-dialog-body:rtl {
+    padding-left: 0px;
+    padding-right: 17px; }
+
+.mount-dialog-app-list {
+  max-height: 200px;
+  padding-top: 24px;
+  padding-left: 49px;
+  padding-right: 32px; }
+
+.mount-dialog-app-list:rtl {
+  padding-right: 49px;
+  padding-left: 32px; }
+
+.mount-dialog-app-list-item {
+  color: #7b939c; }
+  .mount-dialog-app-list-item:hover {
+    color: #98abb2; }
+  .mount-dialog-app-list-item:ltr {
+    padding-right: 1em; }
+  .mount-dialog-app-list-item:rtl {
+    padding-left: 1em; }
+
+.mount-dialog-app-list-item-icon:ltr {
+  padding-right: 17px; }
+
+.mount-dialog-app-list-item-icon:rtl {
+  padding-left: 17px; }
+
+.mount-dialog-app-list-item-name {
+  font-size: 10pt; }
+
+/* Password or Authentication Dialog */
+.prompt-dialog {
+  width: 34em;
+  border: none;
+  border-radius: 2px; }
+  .prompt-dialog .message-dialog-main-layout {
+    spacing: 24px;
+    padding: 10px; }
+  .prompt-dialog .message-dialog-content {
+    spacing: 16px; }
+  .prompt-dialog .message-dialog-title {
+    color: #576c74; }
+
+.prompt-dialog-description:rtl {
+  text-align: right; }
+
+.prompt-dialog-password-box {
+  spacing: 1em;
+  padding-bottom: 1em; }
+
+.prompt-dialog-error-label {
+  font-size: 10pt;
+  color: #e6006e;
+  padding-bottom: 8px; }
+
+.prompt-dialog-info-label {
+  font-size: 10pt;
+  padding-bottom: 8px; }
+
+.hidden {
+  color: rgba(0, 0, 0, 0); }
+
+.prompt-dialog-null-label {
+  font-size: 10pt;
+  padding-bottom: 8px; }
+
+/* Polkit Dialog */
+.polkit-dialog-user-layout {
+  padding-left: 10px;
+  spacing: 10px; }
+  .polkit-dialog-user-layout:rtl {
+    padding-left: 0px;
+    padding-right: 10px; }
+
+.polkit-dialog-user-root-label {
+  color: #f47d49; }
+
+.polkit-dialog-user-icon {
+  border-radius: 3px;
+  background-size: contain;
+  width: 48px;
+  height: 48px; }
+
+/* Audio selection dialog */
+.audio-device-selection-dialog {
+  spacing: 30px; }
+
+.audio-selection-content {
+  spacing: 20px;
+  padding: 24px; }
+
+.audio-selection-title {
+  font-weight: bold;
+  text-align: center; }
+
+.audio-selection-box {
+  spacing: 20px; }
+
+.audio-selection-device {
+  border: 1px solid #98abb2;
+  border-radius: 12px; }
+  .audio-selection-device:active, .audio-selection-device:hover, .audio-selection-device:focus {
+    background-color: #c50ed2; }
+
+.audio-selection-device-box {
+  padding: 20px;
+  spacing: 20px; }
+
+.audio-selection-device-icon {
+  icon-size: 64px; }
+
+/* Access Dialog */
+.access-dialog {
+  spacing: 30px; }
+
+/* Geolocation Dialog */
+.geolocation-dialog {
+  spacing: 30px; }
+
+/* Extension Dialog */
+.extension-dialog .message-dialog-main-layout {
+  spacing: 24px;
+  padding: 10px; }
+
+.extension-dialog .message-dialog-title {
+  color: #576c74; }
+
+/* Inhibit-Shortcuts Dialog */
+.inhibit-shortcuts-dialog {
+  spacing: 30px; }
+
+/* Network Agent Dialog */
+.network-dialog-secret-table {
+  spacing-rows: 15px;
+  spacing-columns: 1em; }
+
+.keyring-dialog-control-table {
+  spacing-rows: 15px;
+  spacing-columns: 1em; }
+
+/* Popovers/Menus */
+.popup-menu {
+  min-width: 15em;
+  background-color: transparent;
+  color: #98abb2; }
+  .popup-menu .popup-sub-menu {
+    background-color: rgba(0, 0, 0, 0.2);
+    box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.2); }
+  .popup-menu .popup-menu-content {
+    padding: 15px 0; }
+  .popup-menu .popup-menu-item {
+    spacing: 5px;
+    padding: 5px; }
+    .popup-menu .popup-menu-item:ltr {
+      padding-right: 1.75em;
+      padding-left: 0; }
+    .popup-menu .popup-menu-item:rtl {
+      padding-right: 0;
+      padding-left: 1.75em; }
+    .popup-menu .popup-menu-item:checked {
+      background-gradient-start: #c50ed2;
+      background-gradient-end: #8500f7;
+      background-gradient-direction: horizontal;
+      color: #f7f7f7;
+      box-shadow: inset 0 1px 0px #1c1f2e;
+      font-weight: bold; }
+      .popup-menu .popup-menu-item:checked:hover {
+        background-color: rgba(197, 14, 210, 0.9);
+        color: #f7f7f7; }
+    .popup-menu .popup-menu-item.selected {
+      background-color: rgba(152, 171, 178, 0.1);
+      color: #98abb2; }
+    .popup-menu .popup-menu-item:active {
+      background-color: #c50ed2;
+      color: #f7f7f7; }
+    .popup-menu .popup-menu-item:insensitive {
+      color: rgba(152, 171, 178, 0.5); }
+  .popup-menu .popup-inactive-menu-item {
+    color: #98abb2; }
+    .popup-menu .popup-inactive-menu-item:insensitive {
+      color: rgba(152, 171, 178, 0.5); }
+  .popup-menu.panel-menu {
+    -boxpointer-gap: 4px;
+    margin-bottom: 1.75em; }
+
+.popup-menu-ornament {
+  text-align: right;
+  width: 1.2em; }
+
+.popup-menu-boxpointer,
+.candidate-popup-boxpointer {
+  -arrow-border-radius: 7px;
+  -arrow-background-color: #181b28;
+  -arrow-border-width: 1px;
+  -arrow-border-color: #12151e;
+  -arrow-base: 24px;
+  -arrow-rise: 11px;
+  -arrow-box-shadow: 0 1px 3px black; }
+
+.popup-separator-menu-item {
+  background: transparent; }
+  .popup-separator-menu-item-separator {
+    height: 1px;
+    margin: 6px 64px;
+    background-color: transparent;
+    border-color: transparent;
+    border-bottom-width: 1px;
+    border-bottom-style: solid; }
+  .popup-sub-menu .popup-separator-menu-item .popup-separator-menu-item-separator {
+    margin: 0 64px 0 32px;
+    background: transparent; }
+
+.background-menu {
+  -boxpointer-gap: 4px;
+  -arrow-rise: 0px; }
+
+/* fallback menu
+- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled
+  app menu inside the main app window itself rather than the top bar
+*/
+/* OSD */
+.osd-window {
+  text-align: center;
+  font-weight: bold;
+  spacing: 1em;
+  margin: 32px;
+  min-width: 64px;
+  min-height: 64px; }
+  .osd-window .osd-monitor-label {
+    font-size: 3em; }
+  .osd-window .level {
+    height: 0.4em;
+    border-radius: 0.3em;
+    color: #98abb2;
+    border: 1px solid #12151e;
+    -barlevel-height: 0.4em;
+    -barlevel-background-color: rgba(0, 0, 0, 0.5);
+    -barlevel-active-background-color: #c50ed2;
+    -barlevel-overdrive-color: #ff007a;
+    -barlevel-overdrive-separator-width: 0.2em; }
+  .osd-window .level-bar {
+    background-color: #c50ed2;
+    border-radius: 0.3em; }
+
+/* Pad OSD */
+.pad-osd-window {
+  padding: 32px;
+  background-color: rgba(0, 0, 0, 0.8); }
+  .pad-osd-window .pad-osd-title-box {
+    spacing: 12px; }
+  .pad-osd-window .pad-osd-title-menu-box {
+    spacing: 6px; }
+
+.combo-box-label {
+  width: 15em; }
+
+/* App Switcher */
+.switcher-popup {
+  padding: 8px;
+  spacing: 16px; }
+
+.switcher-list-item-container {
+  spacing: 8px; }
+
+.switcher-list .item-box {
+  padding: 8px;
+  border-radius: 4px; }
+
+.switcher-list .item-box:outlined {
+  padding: 6px;
+  border: 2px solid black; }
+
+.switcher-list .item-box:selected {
+  background-color: #c50ed2;
+  color: #f7f7f7; }
+
+.switcher-list .thumbnail-box {
+  padding: 2px;
+  spacing: 4px; }
+
+.switcher-list .thumbnail {
+  width: 256px; }
+
+.switcher-list .separator {
+  width: 1px;
+  background: #12151e; }
+
+.switcher-arrow {
+  border-color: rgba(0, 0, 0, 0);
+  color: rgba(152, 171, 178, 0.8); }
+  .switcher-arrow:highlighted {
+    color: #98abb2; }
+
+.input-source-switcher-symbol {
+  font-size: 34pt;
+  width: 96px;
+  height: 96px; }
+
+/* Window Cycler */
+.cycler-highlight {
+  border: 5px solid #c50ed2; }
+
+/* Workspace Switcher */
+.workspace-switcher-group {
+  padding: 12px; }
+
+.workspace-switcher {
+  background: transparent;
+  border: 0px;
+  border-radius: 0px;
+  padding: 0px;
+  spacing: 8px; }
+
+.ws-switcher-active-up,
+.ws-switcher-active-down,
+.ws-switcher-active-left,
+.ws-switcher-active-right {
+  height: 50px;
+  background-color: #c50ed2;
+  color: #f7f7f7;
+  border: none;
+  background-size: 32px;
+  border-radius: 8px; }
+
+.ws-switcher-active-up {
+  background-image: url("assets/ws-switch-arrow-up.png"); }
+
+.ws-switcher-active-down {
+  background-image: url("assets/ws-switch-arrow-down.png"); }
+
+.ws-switcher-box {
+  height: 50px;
+  border: 1px solid rgba(152, 171, 178, 0.1);
+  background: rgba(5, 5, 8, 0.95);
+  border-radius: 8px; }
+
+.osd-window,
+.resize-popup,
+.switcher-list, .workspace-switcher-container {
+  color: #98abb2;
+  background-color: rgba(24, 27, 40, 0.95);
+  border: none;
+  border-radius: 2px;
+  padding: 12px; }
+
+/* Tiled window previews */
+.tile-preview {
+  background-color: rgba(197, 14, 210, 0.5);
+  border: 1px solid #c50ed2; }
+
+.tile-preview-left.on-primary {
+  border-radius: 2px 2px 0 0; }
+
+.tile-preview-right.on-primary {
+  border-radius: 0 2px 0 0; }
+
+.tile-preview-left.tile-preview-right.on-primary {
+  border-radius: 2px 2px 0 0; }
+
+/* TOP BAR */
+#panel {
+  background-gradient-direction: none;
+  background-color: rgba(22, 25, 37, 0.95);
+  /* transition from solid to transparent */
+  transition-duration: 500ms;
+  font-weight: bold;
+  height: 2.1em;
+  padding: 0px 0px; }
+  #panel.unlock-screen, #panel.login-screen, #panel.lock-screen {
+    background-color: transparent; }
+  #panel #panelLeft, #panel #panelCenter {
+    spacing: 4px; }
+  #panel .panel-corner {
+    -panel-corner-radius: 0px;
+    -panel-corner-background-color: rgba(0, 0, 0, 0.2);
+    -panel-corner-border-width: 2px;
+    -panel-corner-border-color: transparent; }
+    #panel .panel-corner:active, #panel .panel-corner:overview, #panel .panel-corner:focus {
+      -panel-corner-border-color: #db10ea; }
+    #panel .panel-corner.lock-screen, #panel .panel-corner.login-screen, #panel .panel-corner.unlock-screen {
+      -panel-corner-radius: 0;
+      -panel-corner-background-color: transparent;
+      -panel-corner-border-color: transparent; }
+  #panel .panel-button {
+    -natural-hpadding: 12px;
+    -minimum-hpadding: 6px;
+    font-weight: bold;
+    color: white;
+    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.9);
+    transition-duration: 100ms; }
+    #panel .panel-button .app-menu-icon {
+      -st-icon-style: symbolic;
+      margin-left: 4px;
+      margin-right: 4px; }
+    #panel .panel-button:hover {
+      background: rgba(41, 47, 69, 0.95);
+      color: white;
+      transition-duration: 200ms; }
+    #panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked {
+      box-shadow: none;
+      background-gradient-start: #c50ed2;
+      background-gradient-end: #8500f7;
+      background-gradient-direction: horizontal;
+      color: #f7f7f7;
+      text-shadow: 0px 0px 2px rgba(92, 92, 92, 0.9);
+      transition-duration: 200ms; }
+      #panel .panel-button:active > .system-status-icon, #panel .panel-button:overview > .system-status-icon, #panel .panel-button:focus > .system-status-icon, #panel .panel-button:checked > .system-status-icon {
+        icon-shadow: red 0 2px 2px; }
+    #panel .panel-button .system-status-icon {
+      icon-size: 1.09em;
+      padding: 0 5px; }
+    .unlock-screen #panel .panel-button,
+    .login-screen #panel .panel-button,
+    .lock-screen #panel .panel-button {
+      color: #b5c3c8; }
+      .unlock-screen #panel .panel-button:focus, .unlock-screen #panel .panel-button:hover, .unlock-screen #panel .panel-button:active,
+      .login-screen #panel .panel-button:focus,
+      .login-screen #panel .panel-button:hover,
+      .login-screen #panel .panel-button:active,
+      .lock-screen #panel .panel-button:focus,
+      .lock-screen #panel .panel-button:hover,
+      .lock-screen #panel .panel-button:active {
+        color: #b5c3c8; }
+    #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: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: none; }
+  #panel .panel-status-indicators-box,
+  #panel .panel-status-menu-box {
+    spacing: 2px; }
+  #panel .power-status.panel-status-indicators-box {
+    spacing: 0; }
+  #panel .screencast-indicator {
+    color: #f47d49; }
+  #panel.solid {
+    background-color: #161925;
+    /* transition from transparent to solid */
+    transition-duration: 300ms; }
+    #panel.solid .panel-corner {
+      -panel-corner-background-color: black; }
+    #panel.solid .system-status-icon,
+    #panel.solid .app-menu-icon > StIcon,
+    #panel.solid .popup-menu-arrow {
+      icon-shadow: none; }
+
+#calendarArea {
+  padding: 0.75em 1.0em; }
+
+.calendar {
+  margin-bottom: 1em; }
+
+.calendar, .world-clocks-button, .weather-button, .events-button {
+  background: transparent;
+  border: none;
+  color: #98abb2; }
+
+.calendar,
+.datemenu-today-button,
+.datemenu-displays-box,
+.message-list-sections {
+  margin: 0 1.5em; }
+
+.datemenu-calendar-column {
+  spacing: 0.5em; }
+
+.datemenu-displays-section {
+  padding-bottom: 3em; }
+
+.datemenu-displays-box {
+  spacing: 1em; }
+
+.datemenu-calendar-column {
+  border: 0 solid transparent;
+  background: #171926; }
+  .datemenu-calendar-column:ltr {
+    border-left-width: 1px; }
+  .datemenu-calendar-column:rtl {
+    border-right-width: 1px; }
+
+.datemenu-today-button,
+.world-clocks-button,
+.weather-button,
+.events-section-title,
+.message-list-section-title,
+.events-button {
+  border-radius: 4px;
+  color: #98abb2;
+  padding: .4em; }
+
+.message-list-section-list:ltr {
+  padding-left: .4em; }
+
+.message-list-section-list:rtl {
+  padding-right: .4em; }
+
+.datemenu-today-button:hover, .datemenu-today-button:focus,
+.world-clocks-button:hover,
+.world-clocks-button:focus,
+.weather-button:hover,
+.weather-button:focus,
+.events-section-title:hover,
+.events-section-title:focus,
+.message-list-section-title:hover,
+.message-list-section-title:focus,
+.events-button:hover,
+.events-button:focus {
+  background-color: #222638; }
+
+.datemenu-today-button:active,
+.world-clocks-button:active,
+.weather-button:active,
+.events-section-title:active,
+.message-list-section-title:active,
+.events-button:active {
+  color: white;
+  background-color: #c50ed2; }
+
+.datemenu-today-button .date-label {
+  font-size: 1.5em; }
+
+.world-clocks-header,
+.weather-header,
+.events-section-title,
+.message-list-section-title,
+.events-title {
+  color: #7b939c;
+  font-weight: bold; }
+
+.events-button .event-time {
+  color: #8ca1a9; }
+
+.world-clocks-grid {
+  spacing-rows: 0.4em; }
+
+.weather-box {
+  spacing: 0.4em; }
+
+.calendar-month-label {
+  color: #899fa7;
+  font-weight: bold;
+  padding: 8px 0; }
+
+.pager-button {
+  color: white;
+  background-color: transparent;
+  width: 32px;
+  border-radius: 4px; }
+  .pager-button:hover, .pager-button:focus {
+    background-color: rgba(152, 171, 178, 0.05); }
+  .pager-button:active {
+    background-color: rgba(24, 27, 40, 0.05); }
+
+.calendar-change-month-back {
+  background-image: url("assets/calendar-arrow-left.svg"); }
+  .calendar-change-month-back:rtl {
+    background-image: url("assets/calendar-arrow-right.svg"); }
+
+.calendar-change-month-forward {
+  background-image: url("assets/calendar-arrow-right.svg"); }
+  .calendar-change-month-forward:rtl {
+    background-image: url("assets/calendar-arrow-left.svg"); }
+
+.calendar-change-month-back StIcon,
+.calendar-change-month-forward StIcon {
+  color: #899fa7; }
+
+.calendar-day-base {
+  font-size: 80%;
+  text-align: center;
+  width: 2.4em;
+  height: 2.4em;
+  padding: 0.1em;
+  margin: 2px;
+  border-radius: 1.4em;
+  color: #98abb2; }
+  .calendar-day-base:hover, .calendar-day-base:focus {
+    background-color: #222638; }
+  .calendar-day-base:active, .calendar-day-base:selected {
+    color: #f7f7f7;
+    background-color: #c50ed2;
+    background-gradient-start: #c50ed2;
+    background-gradient-end: #8500f7;
+    background-gradient-direction: horizontal;
+    border-color: black; }
+  .calendar-day-base.calendar-day-heading {
+    color: #7b939c;
+    margin-top: 1em;
+    font-size: 70%; }
+
+.calendar-day {
+  border-width: 0; }
+
+.calendar-day-top {
+  border-top-width: 1px; }
+
+.calendar-day-left {
+  border-left-width: 1px; }
+
+.calendar-nonwork-day {
+  color: #58636d; }
+
+.calendar-today {
+  font-weight: bold;
+  border: 1px solid transparent;
+  background-color: #c50ed2;
+  color: #f7f7f7; }
+  .calendar-today:hover, .calendar-today:focus {
+    background-color: #d20fe0;
+    color: #f7f7f7; }
+  .calendar-today:active, .calendar-today:selected {
+    background-color: #c50ed2;
+    color: #f7f7f7; }
+    .calendar-today:active:hover, .calendar-today:active:focus, .calendar-today:selected:hover, .calendar-today:selected:focus {
+      background-color: #d20fe0;
+      color: #f7f7f7; }
+
+.calendar-day-with-events {
+  color: #b5c3c8;
+  font-weight: bold;
+  background-image: url("assets/calendar-today.svg"); }
+
+.calendar-other-month-day {
+  color: #58636d;
+  opacity: 0.5; }
+
+.calendar-week-number {
+  font-size: 70%;
+  font-weight: bold;
+  width: 2.3em;
+  height: 1.8em;
+  border-radius: 2px;
+  padding: 0.5em 0 0;
+  margin: 6px;
+  background-color: rgba(152, 171, 178, 0.3);
+  color: #181b28; }
+
+/* Message list */
+.message-list {
+  width: 31.5em; }
+  .message-list .message-title, .message-list .message-content, .message-list .message-body {
+    color: #899fa7; }
+
+.message-list-clear-button.button {
+  color: #98abb2;
+  background-color: #0e1018;
+  box-shadow: none;
+  border: 1px solid #12151e;
+  text-shadow: 0 1px black;
+  icon-shadow: 0 1px black;
+  border: 1px solid #12151e;
+  margin: 1.5em 1.5em 0; }
+  .message-list-clear-button.button:hover, .message-list-clear-button.button:focus {
+    color: #c50ed2;
+    background-color: #12151e;
+    border: 1px solid #12151e;
+    text-shadow: 0 1px black;
+    icon-shadow: 0 1px black; }
+
+.message-list-sections {
+  spacing: 1em; }
+
+.message-list-section,
+.message-list-section-list {
+  spacing: 0.4em; }
+
+.message-list-section-close > StIcon {
+  icon-size: 16px;
+  border-radius: 16px;
+  padding: 8px;
+  color: #98abb2;
+  background-color: transparent; }
+
+.message-list-section-close:hover > StIcon,
+.message-list-section-close:focus > StIcon .message-list-section-close:active > StIcon {
+  color: #ff007a;
+  background: transparent; }
+
+.message {
+  border: 1px solid #0e1018;
+  border-radius: 3px;
+  background: #161925;
+  box-shadow: none; }
+  .message:hover, .message:focus {
+    background-color: #161925;
+    box-shadow: 2px 0px 0px 0px #8500f7 inset; }
+
+.message-icon-bin {
+  padding: 10px 3px 10px 10px; }
+  .message-icon-bin:rtl {
+    padding: 10px 10px 10px 3px; }
+
+.message-icon-bin > StIcon {
+  icon-size: 16px;
+  -st-icon-style: symbolic; }
+
+.message-secondary-bin {
+  padding: 0 12px; }
+
+.message-secondary-bin > .event-time {
+  color: #6c8791;
+  font-size: 0.7em;
+  /* HACK: the label should be baseline-aligned with a 1em label,
+                     fake this with some bottom padding */
+  padding-bottom: 0.13em; }
+
+.message-secondary-bin > StIcon {
+  icon-size: 16px; }
+
+.message-content {
+  padding: 10px; }
+  .message-content *:hover > StIcon,
+  .message-content *:focus > StIcon {
+    color: #ff007a; }
+
+.message-media-control {
+  padding: 12px;
+  color: #627a82; }
+  .message-media-control:last-child:ltr {
+    padding-right: 18px; }
+  .message-media-control:last-child:rtl {
+    padding-left: 18px; }
+  .message-media-control:hover {
+    color: #98abb2; }
+  .message-media-control:insensitive {
+    color: #364348; }
+
+.media-message-cover-icon {
+  icon-size: 48px !important; }
+  .media-message-cover-icon.fallback {
+    color: #2b3148;
+    background-color: #181b28;
+    border: 2px solid #181b28;
+    border-radius: 2px;
+    icon-size: 16px;
+    padding: 8px; }
+
+/* World clocks */
+.world-clocks-button .world-clocks-city {
+  color: #98abb2;
+  font-weight: normal; }
+
+.world-clocks-button .world-clocks-time {
+  font-weight: bold;
+  color: #98abb2;
+  font-feature-settings: "lnum";
+  text-align: right; }
+
+.world-clocks-button .world-clocks-timezone {
+  color: #627a82;
+  font-feature-settings: "tnum"; }
+
+/* Weather */
+.weather-button .weather-header {
+  color: #7b939c;
+  font-weight: bold; }
+  .weather-button .weather-header.location {
+    font-weight: normal; }
+
+.weather-button .weather-forecast-time {
+  color: #7b939c;
+  font-feature-settings: "tnum";
+  font-weight: normal;
+  padding-top: 0.2em;
+  padding-bottom: 0.4em; }
+
+.weather-button .weather-forecast-temp {
+  font-weight: bold; }
+
+.system-switch-user-submenu-icon.user-icon {
+  icon-size: 20px;
+  padding: 0 2px; }
+
+.system-switch-user-submenu-icon.default-icon {
+  icon-size: 16px;
+  padding: 0 4px; }
+
+#appMenu {
+  spinner-image: url("assets/process-working.svg");
+  spacing: 4px; }
+  #appMenu .label-shadow {
+    color: transparent; }
+
+.aggregate-menu {
+  min-width: 21em; }
+  .aggregate-menu .popup-menu-icon {
+    padding: 0 4px; }
+
+.system-menu-action {
+  color: #98abb2;
+  border-radius: 32px;
+  /* wish we could do 50% */
+  border: 1px solid #12151e;
+  background: #12151e;
+  padding: 13px; }
+  .system-menu-action:hover, .system-menu-action:focus {
+    border: 1px solid #c50ed2;
+    color: #c50ed2;
+    background: transparent; }
+  .system-menu-action:active {
+    background-color: #980ba2;
+    color: #f7f7f7;
+    border: 1px solid #980ba2; }
+  .system-menu-action > StIcon {
+    icon-size: 16px; }
+
+.ripple-box {
+  width: 52px;
+  height: 52px;
+  background-image: url("assets/corner-ripple-ltr.png");
+  background-size: contain; }
+
+.ripple-box:rtl {
+  background-image: url("assets/corner-ripple-rtl.png"); }
+
+.popup-menu-arrow {
+  width: 16px;
+  height: 16px; }
+
+.popup-menu-icon {
+  icon-size: 1.09em; }
+
+.window-close {
+  background-color: transparent;
+  background-image: url("assets/close-window.svg");
+  background-size: 32px;
+  border: none;
+  box-shadow: none;
+  color: transparent;
+  height: 32px;
+  width: 32px; }
+
+.window-close {
+  -shell-close-overlap: 16px; }
+  .window-close:rtl {
+    -st-background-image-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5); }
+
+/* NETWORK DIALOGS */
+.nm-dialog {
+  max-height: 34em;
+  min-height: 31em;
+  min-width: 32em; }
+
+.nm-dialog-content {
+  spacing: 20px;
+  padding: 24px; }
+
+.nm-dialog-header-hbox {
+  spacing: 10px; }
+
+.nm-dialog-airplane-box {
+  spacing: 12px; }
+
+.nm-dialog-airplane-headline {
+  font-weight: bold;
+  text-align: center; }
+
+.nm-dialog-airplane-text {
+  color: #98abb2; }
+
+.nm-dialog-header-icon {
+  icon-size: 32px; }
+
+.nm-dialog-scroll-view {
+  border: 2px solid #12151e;
+  background: transparent; }
+
+.nm-dialog-header {
+  font-weight: bold; }
+
+.nm-dialog-item {
+  font-size: 110%;
+  border-bottom: 1px solid #12151e;
+  padding: 12px;
+  spacing: 20px; }
+
+.nm-dialog-item:selected {
+  background-color: #c50ed2;
+  color: #f7f7f7; }
+
+.nm-dialog-icons {
+  spacing: .5em; }
+
+.nm-dialog-icon {
+  icon-size: 16px; }
+
+.no-networks-label {
+  color: #999999; }
+
+.no-networks-box {
+  spacing: 12px; }
+
+/* OVERVIEW */
+#overview, .controls-manager, .secondary-monitor-workspaces {
+  spacing: 24px; }
+
+#overviewGroup {
+  background-color: #181b28; }
+
+.overview-controls {
+  padding-bottom: 32px; }
+
+.window-picker {
+  -horizontal-spacing: 16px;
+  -vertical-spacing: 16px;
+  padding: 0 16px 16px; }
+  .window-picker.external-monitor {
+    padding: 16px; }
+
+.window-clone-border {
+  border: 4px solid rgba(197, 14, 210, 0.3);
+  border-radius: 0px;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
+
+.window-caption {
+  spacing: 20px;
+  color: white;
+  background-color: rgba(14, 16, 24, 0.7);
+  border-radius: 2px;
+  padding: 4px 8px; }
+
+.search-entry {
+  width: 320px;
+  padding: 9px;
+  border-radius: 100px;
+  border: 1px solid #12151e;
+  color: #98abb2;
+  background-color: #12151e;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
+  .search-entry .search-entry-icon {
+    icon-size: 1em;
+    padding: 0 4px;
+    color: rgba(152, 171, 178, 0.7); }
+  .search-entry:hover, .search-entry:focus {
+    background-color: #12151e;
+    border-color: rgba(197, 14, 210, 0.8); }
+    .search-entry:hover .search-entry-icon, .search-entry:focus .search-entry-icon {
+      color: #98abb2; }
+
+#searchResultsBin {
+  max-width: 1000px; }
+
+#searchResultsContent {
+  padding-left: 20px;
+  padding-right: 20px;
+  spacing: 16px; }
+
+.search-section {
+  spacing: 16px; }
+
+.search-section-content {
+  background-color: transparent;
+  border-radius: 0;
+  border: none;
+  box-shadow: none;
+  spacing: 32px; }
+
+.list-search-results {
+  spacing: 3px; }
+
+.search-section-separator {
+  height: 2px;
+  background-color: rgba(255, 255, 255, 0.2); }
+
+.list-search-result-content {
+  spacing: 30px; }
+
+.list-search-result-title {
+  color: white;
+  spacing: 12px; }
+
+.list-search-result-description {
+  color: rgba(255, 255, 255, 0.5); }
+
+.list-search-provider-details {
+  width: 150px;
+  color: white;
+  margin-top: 0.24em; }
+
+.list-search-provider-content {
+  spacing: 20px; }
+
+.search-provider-icon {
+  padding: 15px; }
+
+/* DASHBOARD */
+.dash-background {
+  background-color: #12151e; }
+
+.dash-separator {
+  width: 1px;
+  background-color: #252a3e; }
+
+.dash-label {
+  border-radius: 7px;
+  padding: 4px 12px;
+  color: white;
+  background-color: rgba(22, 25, 37, 0.95);
+  text-align: center;
+  border: 1px solid #12151e;
+  -x-offset: 8px; }
+
+/* App Vault/Grid */
+.icon-grid {
+  spacing: 30px;
+  -shell-grid-horizontal-item-size: 136px;
+  -shell-grid-vertical-item-size: 136px; }
+  .icon-grid .overview-icon {
+    icon-size: 96px; }
+
+.system-action-icon {
+  background-color: black;
+  color: white;
+  border-radius: 99px;
+  icon-size: 48px; }
+
+.app-view-controls {
+  padding-bottom: 32px; }
+
+.app-view-control {
+  padding: 4px 32px; }
+  .app-view-control:checked {
+    background-gradient-start: #c50ed2;
+    background-gradient-end: #8500f7;
+    background-gradient-direction: horizontal;
+    color: #fff; }
+  .app-view-control:hover {
+    border: none; }
+  .app-view-control:first-child {
+    border-right-width: 0;
+    border-radius: 3px 0 0 3px; }
+  .app-view-control:last-child {
+    border-radius: 0 3px 3px 0; }
+
+.search-provider-icon:active, .search-provider-icon:checked,
+.list-search-result:active,
+.list-search-result:checked {
+  background-color: rgba(5, 5, 8, 0.85); }
+
+.search-provider-icon:focus, .search-provider-icon:selected, .search-provider-icon:hover,
+.list-search-result:focus,
+.list-search-result:selected,
+.list-search-result:hover {
+  background-color: rgba(24, 27, 40, 0.3);
+  transition-duration: 200ms; }
+
+.app-well-app,
+.app-well-app.app-folder,
+.show-apps,
+.grid-search-result {
+  border: none; }
+  .app-well-app:hover .overview-icon,
+  .app-well-app:focus .overview-icon,
+  .app-well-app:selected .overview-icon,
+  .app-well-app.app-folder:hover .overview-icon,
+  .app-well-app.app-folder:focus .overview-icon,
+  .app-well-app.app-folder:selected .overview-icon,
+  .show-apps:hover .overview-icon,
+  .show-apps:focus .overview-icon,
+  .show-apps:selected .overview-icon,
+  .grid-search-result:hover .overview-icon,
+  .grid-search-result:focus .overview-icon,
+  .grid-search-result:selected .overview-icon {
+    background-color: #0b0c12;
+    transition-duration: 0ms;
+    border-image: none;
+    background-image: none; }
+  .app-well-app:active .overview-icon,
+  .app-well-app:checked .overview-icon,
+  .app-well-app.app-folder:active .overview-icon,
+  .app-well-app.app-folder:checked .overview-icon,
+  .show-apps:active .overview-icon,
+  .show-apps:checked .overview-icon,
+  .grid-search-result:active .overview-icon,
+  .grid-search-result:checked .overview-icon {
+    background-color: #050508;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
+    color: #98abb2; }
+
+.app-well-app-running-dot {
+  width: 4px;
+  height: 4px;
+  background-color: #c50ed2;
+  border-radius: 10px !important;
+  box-shadow: 0px 0px 5px 4px rgba(197, 14, 210, 0.8);
+  margin-bottom: 0px; }
+
+.search-provider-icon,
+.list-search-result, .app-well-app .overview-icon,
+.app-well-app.app-folder .overview-icon,
+.show-apps .overview-icon,
+.grid-search-result .overview-icon {
+  color: #f7f7f7;
+  padding: 7px 6px;
+  border: none;
+  transition-duration: 100ms;
+  text-align: center;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
+
+/* App Folders */
+.app-well-app.app-folder {
+  background-color: #12151e; }
+
+.app-folder-dialog {
+  background-color: #12151e; }
+  .app-folder-dialog .edit-folder-button {
+    padding: 0;
+    width: 36px;
+    height: 36px;
+    border-radius: 18px; }
+    .app-folder-dialog .edit-folder-button > StIcon {
+      icon-size: 16px; }
+
+.app-well-app.app-folder > .overview-icon {
+  background-color: rgba(24, 27, 40, 0.35); }
+
+.show-apps .show-apps-icon {
+  color: white; }
+
+.show-apps:checked .show-apps-icon,
+.show-apps:focus .show-apps-icon {
+  color: #98abb2;
+  transition-duration: 100ms; }
+
+.app-folder-popup {
+  -arrow-border-radius: 8px;
+  -arrow-background-color: rgba(24, 27, 40, 0.5);
+  -arrow-base: 24px;
+  -arrow-rise: 11px; }
+
+.app-folder-popup-bin {
+  padding: 5px;
+  background: rgba(24, 27, 40, 0.5); }
+
+.app-folder-icon {
+  padding: 5px;
+  spacing-rows: 5px;
+  spacing-columns: 5px; }
+
+.page-indicator {
+  padding: 15px 20px; }
+  .page-indicator .page-indicator-icon {
+    width: 12px;
+    height: 12px;
+    border-radius: 12px;
+    background-image: none;
+    background-color: rgba(255, 255, 255, 0.3); }
+  .page-indicator:hover .page-indicator-icon {
+    background-image: none;
+    background-color: rgba(255, 255, 255, 0.5); }
+  .page-indicator:active .page-indicator-icon {
+    background-image: none;
+    background-color: rgba(255, 255, 255, 0.7); }
+  .page-indicator:checked .page-indicator-icon {
+    background-image: none;
+    background-color: #FFFFFF;
+    transition-duration: 0s; }
+
+.app-well-app > .overview-icon.overview-icon-with-label,
+.grid-search-result .overview-icon.overview-icon-with-label {
+  padding: 10px 8px 5px 8px;
+  spacing: 4px; }
+
+.workspace-thumbnails {
+  visible-width: 32px;
+  spacing: 11px;
+  padding: 8px;
+  border-radius: 0; }
+  .workspace-thumbnails:rtl {
+    border-radius: 0; }
+
+.workspace-thumbnail-indicator {
+  border: 4px solid rgba(197, 14, 210, 0.5);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  padding: 0; }
+
+.search-display > StBoxLayout,
+.all-apps,
+.frequent-apps > StBoxLayout {
+  padding: 0px 88px 10px 88px; }
+
+.workspace-thumbnails {
+  color: #98abb2;
+  background-color: transparent;
+  border: none; }
+
+.search-statustext, .no-frequent-applications-label {
+  font-size: 2em;
+  font-weight: bold;
+  color: #98abb2; }
+
+/* NOTIFICATIONS & MESSAGE TRAY */
+.url-highlighter {
+  link-color: #e323f0; }
+
+.notification-banner {
+  font-size: 11pt;
+  width: 34em;
+  margin: 5px;
+  border-radius: 3px;
+  color: white;
+  background-color: #181b28;
+  border: 1px solid #12151e;
+  box-shadow: 0 1px 4px black; }
+  .notification-banner:hover {
+    background-color: rgba(24, 27, 40, 0.96); }
+  .notification-banner:focus {
+    background-color: rgba(24, 27, 40, 0.96); }
+  .notification-banner * {
+    color: #98abb2; }
+  .notification-banner .notification-icon {
+    padding: 5px; }
+  .notification-banner .notification-content {
+    padding: 5px;
+    spacing: 5px; }
+  .notification-banner .secondary-icon {
+    icon-size: 1.09em; }
+  .notification-banner .notification-actions {
+    background-color: #141722;
+    padding-top: 2px;
+    spacing: 1px; }
+  .notification-banner .notification-button {
+    padding: 5px;
+    background-color: rgba(24, 27, 40, 0.9);
+    box-shadow: none;
+    border: none; }
+    .notification-banner .notification-button:first-child {
+      border-radius: 0 0 0 3px; }
+    .notification-banner .notification-button:last-child {
+      border-radius: 0 0 3px 0; }
+    .notification-banner .notification-button:hover, .notification-banner .notification-buttonfocus {
+      background-color: #141722;
+      color: #c50ed2; }
+
+.summary-source-counter {
+  font-size: 10pt;
+  font-weight: bold;
+  height: 1.6em;
+  width: 1.6em;
+  -shell-counter-overlap-x: 3px;
+  -shell-counter-overlap-y: 3px;
+  background-color: #c50ed2;
+  color: #f7f7f7;
+  border: 2px solid #98abb2;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
+  border-radius: 0.9em; }
+
+.secondary-icon {
+  icon-size: 1.09em; }
+
+.chat-body {
+  spacing: 5px; }
+
+.chat-response {
+  margin: 5px; }
+
+.chat-log-message {
+  color: #7b939c; }
+
+.chat-new-group {
+  padding-top: 1em; }
+
+.chat-received {
+  padding-left: 4px; }
+  .chat-received:rtl {
+    padding-left: 0px;
+    padding-right: 4px; }
+
+.chat-sent {
+  padding-left: 18pt;
+  color: #6c8791; }
+  .chat-sent:rtl {
+    padding-left: 0;
+    padding-right: 18pt; }
+
+.chat-meta-message {
+  padding-left: 4px;
+  font-size: 9pt;
+  font-weight: bold;
+  color: #627a82; }
+  .chat-meta-message:rtl {
+    padding-left: 0;
+    padding-right: 4px; }
+
+.hotplug-transient-box {
+  spacing: 6px;
+  padding: 2px 72px 2px 12px; }
+
+.hotplug-notification-item {
+  padding: 2px 10px; }
+  .hotplug-notification-item:focus {
+    padding: 1px 71px 1px 11px; }
+
+.hotplug-notification-item-icon {
+  icon-size: 24px;
+  padding: 2px 5px; }
+
+.hotplug-resident-box {
+  spacing: 8px; }
+
+.hotplug-resident-mount {
+  spacing: 8px;
+  border-radius: 4px; }
+  .hotplug-resident-mount:hover {
+    background-color: rgba(24, 27, 40, 0.3); }
+
+.hotplug-resident-mount-label {
+  color: inherit;
+  padding-left: 6px; }
+
+.hotplug-resident-mount-icon {
+  icon-size: 24px;
+  padding-left: 6px; }
+
+.hotplug-resident-eject-icon {
+  icon-size: 16px; }
+
+.hotplug-resident-eject-button {
+  padding: 7px;
+  border-radius: 5px;
+  color: pink; }
+
+/* Eeeky things */
+.magnifier-zoom-region {
+  border: 2px solid #c50ed2; }
+  .magnifier-zoom-region.full-screen {
+    border-width: 0; }
+
+/* On-screen Keyboard */
+#keyboard {
+  background-color: rgba(24, 27, 40, 0.65); }
+
+.keyboard-layout {
+  spacing: 10px;
+  padding: 10px; }
+
+.keyboard-row {
+  spacing: 15px; }
+
+.keyboard-key {
+  color: #98abb2;
+  background-color: #0e1018;
+  box-shadow: none;
+  border: 1px solid #12151e;
+  text-shadow: 0 1px black;
+  icon-shadow: 0 1px black;
+  border: 1px solid #12151e;
+  background-color: #181b28;
+  min-height: 2em;
+  min-width: 2em;
+  font-size: 14pt;
+  font-weight: bold;
+  border-radius: 5px; }
+  .keyboard-key:focus {
+    color: #c50ed2;
+    text-shadow: 0 1px black;
+    icon-shadow: 0 1px black;
+    box-shadow: none;
+    border: 1px solid #12151e; }
+  .keyboard-key:hover, .keyboard-key:checked {
+    color: #c50ed2;
+    background-color: #12151e;
+    border: 1px solid #12151e;
+    text-shadow: 0 1px black;
+    icon-shadow: 0 1px black; }
+  .keyboard-key:active {
+    color: #c50ed2;
+    background-color: rgba(24, 27, 40, 0.95);
+    border: 1px solid #12151e;
+    text-shadow: none;
+    icon-shadow: none; }
+  .keyboard-key:grayed {
+    background-color: rgba(24, 27, 40, 0.95);
+    color: #98abb2;
+    border-color: rgba(0, 0, 0, 0.7); }
+
+.keyboard-subkeys {
+  color: white;
+  padding: 5px;
+  -arrow-border-radius: 10px;
+  -arrow-background-color: rgba(24, 27, 40, 0.65);
+  -arrow-border-width: 2px;
+  -arrow-border-color: #98abb2;
+  -arrow-base: 20px;
+  -arrow-rise: 10px;
+  -boxpointer-gap: 5px; }
+
+.candidate-popup-content {
+  padding: 0.5em;
+  spacing: 0.3em; }
+
+.candidate-index {
+  padding: 0 0.5em 0 0;
+  color: #7b939c; }
+
+.candidate-box {
+  padding: 0.3em 0.5em 0.3em 0.5em;
+  border-radius: 4px; }
+  .candidate-box:selected, .candidate-box:hover {
+    background-color: #c50ed2;
+    color: #f7f7f7; }
+
+.candidate-page-button-box {
+  height: 2em; }
+  .vertical .candidate-page-button-box {
+    padding-top: 0.5em; }
+  .horizontal .candidate-page-button-box {
+    padding-left: 0.5em; }
+
+.candidate-page-button {
+  padding: 4px; }
+
+.candidate-page-button-previous {
+  border-radius: 4px 0px 0px 4px;
+  border-right-width: 0; }
+
+.candidate-page-button-next {
+  border-radius: 0px 4px 4px 0px; }
+
+.candidate-page-button-icon {
+  icon-size: 1em; }
+
+/* Auth Dialogs & Screen Shield */
+.framed-user-icon {
+  background-size: contain;
+  border: 2px solid #98abb2;
+  color: #98abb2;
+  border-radius: 3px; }
+  .framed-user-icon:hover {
+    border-color: #f0f2f3;
+    color: #f0f2f3; }
+
+.login-dialog-banner-view {
+  padding-top: 24px;
+  max-width: 23em; }
+
+.login-dialog {
+  border: none;
+  background-color: transparent; }
+  .login-dialog .modal-dialog-button-box {
+    spacing: 3px; }
+  .login-dialog .modal-dialog-button {
+    padding: 3px 18px; }
+    .login-dialog .modal-dialog-button:default {
+      color: #98abb2;
+      background-color: #0e1018;
+      box-shadow: none;
+      border: 1px solid #12151e;
+      text-shadow: 0 1px black;
+      icon-shadow: 0 1px black;
+      border: 1px solid #12151e; }
+      .login-dialog .modal-dialog-button:default:hover, .login-dialog .modal-dialog-button:default:focus {
+        color: #c50ed2;
+        background-color: rgba(197, 14, 210, 0.7);
+        border: 1px solid #12151e;
+        text-shadow: 0 1px black;
+        icon-shadow: 0 1px black; }
+      .login-dialog .modal-dialog-button:default:active {
+        color: #c50ed2;
+        background-color: #c50ed2;
+        border: 1px solid #12151e;
+        text-shadow: none;
+        icon-shadow: none; }
+      .login-dialog .modal-dialog-button:default:insensitive {
+        color: #58636d;
+        background-color: rgba(38, 43, 55, 0.66);
+        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+        border: none;
+        text-shadow: none;
+        icon-shadow: none; }
+
+.login-dialog-logo-bin {
+  padding: 24px 0px; }
+
+.login-dialog-banner {
+  color: #7b939c; }
+
+.login-dialog-button-box {
+  spacing: 5px; }
+
+.login-dialog-message-warning {
+  color: #f47d49; }
+
+.login-dialog-message-hint {
+  padding-top: 0;
+  padding-bottom: 20px; }
+
+.login-dialog-user-selection-box {
+  padding: 100px 0px; }
+
+.login-dialog-not-listed-label {
+  padding-left: 2px; }
+  .login-dialog-not-listed-button:focus .login-dialog-not-listed-label,
+  .login-dialog-not-listed-button:hover .login-dialog-not-listed-label {
+    color: #98abb2; }
+
+.login-dialog-not-listed-label {
+  font-size: 90%;
+  font-weight: bold;
+  color: #4c5e65;
+  padding-top: 1em; }
+
+.login-dialog-user-list-view {
+  -st-vfade-offset: 1em; }
+
+.login-dialog-user-list {
+  spacing: 12px;
+  padding: .2em;
+  width: 23em; }
+  .login-dialog-user-list:expanded .login-dialog-user-list-item:selected {
+    background-color: #c50ed2;
+    color: #f7f7f7; }
+  .login-dialog-user-list:expanded .login-dialog-user-list-item:logged-in {
+    border-right: 2px solid #c50ed2; }
+
+.login-dialog-user-list-item {
+  border-radius: 5px;
+  padding: .2em;
+  color: #4c5e65; }
+  .login-dialog-user-list-item:ltr {
+    padding-right: 1em; }
+  .login-dialog-user-list-item:rtl {
+    padding-left: 1em; }
+  .login-dialog-user-list-item .login-dialog-timed-login-indicator {
+    height: 2px;
+    margin: 2px 0 0 0;
+    background-color: #98abb2; }
+  .login-dialog-user-list-item:focus .login-dialog-timed-login-indicator {
+    background-color: #f7f7f7; }
+
+.login-dialog-username,
+.user-widget-label {
+  color: #98abb2;
+  font-size: 120%;
+  font-weight: bold;
+  text-align: left;
+  padding-left: 15px; }
+
+.user-widget-label:ltr {
+  padding-left: 18px; }
+
+.user-widget-label:rtl {
+  padding-right: 18px; }
+
+.login-dialog-prompt-layout {
+  padding-top: 24px;
+  padding-bottom: 12px;
+  spacing: 8px;
+  width: 23em; }
+
+.login-dialog-prompt-label {
+  color: #627a82;
+  font-size: 110%;
+  padding-top: 1em; }
+
+.login-dialog-session-list-button StIcon {
+  icon-size: 1.25em; }
+
+.login-dialog-session-list-button {
+  color: #4c5e65; }
+  .login-dialog-session-list-button:hover, .login-dialog-session-list-button:focus {
+    color: #98abb2; }
+  .login-dialog-session-list-button:active {
+    color: #20282b; }
+
+.screen-shield-arrows {
+  padding-bottom: 3em; }
+
+.screen-shield-arrows Gjs_Arrow {
+  color: white;
+  width: 80px;
+  height: 48px;
+  -arrow-thickness: 12px;
+  -arrow-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); }
+
+.screen-shield-clock {
+  color: white;
+  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6);
+  font-weight: bold;
+  text-align: center;
+  padding-bottom: 1.5em; }
+
+.screen-shield-clock-time {
+  font-size: 72pt;
+  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4); }
+
+.screen-shield-clock-date {
+  font-size: 28pt; }
+
+.screen-shield-notifications-container {
+  spacing: 6px;
+  width: 30em;
+  background-color: transparent;
+  max-height: 500px; }
+  .screen-shield-notifications-container .summary-notification-stack-scrollview {
+    padding-top: 0;
+    padding-bottom: 0; }
+  .screen-shield-notifications-container .notification,
+  .screen-shield-notifications-container .screen-shield-notification-source {
+    padding: 12px 6px;
+    border: 1px solid #98abb2;
+    background-color: rgba(24, 27, 40, 0.45);
+    color: #98abb2;
+    border-radius: 4px; }
+  .screen-shield-notifications-container .notification {
+    margin-right: 15px; }
+
+.screen-shield-notification-label {
+  font-weight: bold;
+  padding: 0px 0px 0px 12px; }
+
+.screen-shield-notification-count-text {
+  padding: 0px 0px 0px 12px; }
+
+#panel.lock-screen {
+  background-color: rgba(24, 27, 40, 0.45); }
+
+.screen-shield-background {
+  background: black;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4); }
+
+#lockDialogGroup {
+  background: #2e3436 url(resource:///org/gnome/shell/theme/noise-texture.png);
+  background-repeat: repeat; }
+
+#screenShieldNotifications StButton#vhandle, #screenShieldNotifications StButton#hhandle {
+  background-color: rgba(24, 27, 40, 0.3); }
+  #screenShieldNotifications StButton#vhandle:hover, #screenShieldNotifications StButton#vhandle:focus, #screenShieldNotifications StButton#hhandle:hover, #screenShieldNotifications StButton#hhandle:focus {
+    background-color: rgba(24, 27, 40, 0.5); }
+  #screenShieldNotifications StButton#vhandle:active, #screenShieldNotifications StButton#hhandle:active {
+    background-color: rgba(197, 14, 210, 0.5); }
+
+#LookingGlassDialog {
+  background-color: rgba(0, 0, 0, 0.8);
+  spacing: 4px;
+  padding: 4px;
+  border: 2px solid grey;
+  border-radius: 4px; }
+  #LookingGlassDialog > #Toolbar {
+    border: 1px solid grey;
+    border-radius: 4px; }
+  #LookingGlassDialog .labels {
+    spacing: 4px; }
+  #LookingGlassDialog .notebook-tab {
+    -natural-hpadding: 12px;
+    -minimum-hpadding: 6px;
+    font-weight: bold;
+    color: #ccc;
+    transition-duration: 100ms;
+    padding-left: .3em;
+    padding-right: .3em; }
+    #LookingGlassDialog .notebook-tab:hover {
+      color: white;
+      text-shadow: black 0px 2px 2px; }
+    #LookingGlassDialog .notebook-tab:selected {
+      border-bottom-width: 2px;
+      border-color: #db10ea;
+      color: white;
+      text-shadow: black 0px 2px 2px; }
+  #LookingGlassDialog StBoxLayout#EvalBox {
+    padding: 4px;
+    spacing: 4px; }
+  #LookingGlassDialog StBoxLayout#ResultsArea {
+    spacing: 4px; }
+
+.lg-dialog StEntry {
+  selection-background-color: #bbbbbb;
+  selected-color: #333333; }
+
+.lg-dialog .shell-link {
+  color: #999999; }
+  .lg-dialog .shell-link:hover {
+    color: #dddddd; }
+
+.lg-completions-text {
+  font-size: .9em;
+  font-style: italic; }
+
+.lg-obj-inspector-title {
+  spacing: 4px; }
+
+.lg-obj-inspector-button {
+  border: 1px solid gray;
+  padding: 4px;
+  border-radius: 4px; }
+  .lg-obj-inspector-button:hover {
+    border: 1px solid #ffffff; }
+
+#lookingGlassExtensions {
+  padding: 4px; }
+
+.lg-extensions-list {
+  padding: 4px;
+  spacing: 6px; }
+
+.lg-extension {
+  border: 1px solid #6f6f6f;
+  border-radius: 4px;
+  padding: 4px; }
+
+.lg-extension-name {
+  font-weight: bold; }
+
+.lg-extension-meta {
+  spacing: 6px; }
+
+#LookingGlassPropertyInspector {
+  background: rgba(0, 0, 0, 0.8);
+  border: 2px solid grey;
+  border-radius: 4px;
+  padding: 6px; }
+
+.openweather-current-summarybox,
+.openweather-forecast-icon,
+.openweather-current-databox-captions,
+.openweather-current-databox-values,
+.openweather-current-icon,
+.openweather-forecast-summary,
+.openweather-forecast-temperature {
+  background: transparent; }
+
+.openweather-current-databox-captions, .openweather-forecast-day {
+  color: #c50ed2; }
diff --git a/gnome-shell/v40/gnome-shell.scss b/gnome-shell/v40/gnome-shell.scss
new file mode 100644
index 0000000..96a917e
--- /dev/null
+++ b/gnome-shell/v40/gnome-shell.scss
@@ -0,0 +1,6 @@
+$subtheme: 'main';
+
+@import "../colors"; //use gtk colors
+@import "../drawing";
+@import "common";
+@import "../extensions"
\ No newline at end of file