From 3c0ec75c627874d98cb7e48729b130ce5aad46e6 Mon Sep 17 00:00:00 2001
From: Sam Hewitt <hewittsamuel@gmail.com>
Date: Mon, 23 May 2016 19:16:33 -0400
Subject: [PATCH] switch style improvements

---
 Paper/gtk-3.18/apps/_budgie.scss      | 47 ++++++++++++------
 Paper/gtk-3.18/gtk-dark.css           | 71 ++++++++++++++-------------
 Paper/gtk-3.18/gtk.css                | 69 +++++++++++++-------------
 Paper/gtk-3.18/widgets/_switches.scss | 49 ++++++++----------
 Paper/gtk-3.20/apps/_budgie.scss      | 55 ++++++++++++++-------
 5 files changed, 159 insertions(+), 132 deletions(-)

diff --git a/Paper/gtk-3.18/apps/_budgie.scss b/Paper/gtk-3.18/apps/_budgie.scss
index 075d16c..8d1fd34 100644
--- a/Paper/gtk-3.18/apps/_budgie.scss
+++ b/Paper/gtk-3.18/apps/_budgie.scss
@@ -41,11 +41,13 @@ $asset_suffix: if($variant == 'default', '', '-hc');
 
 // Budgie
 .budgie-container {
-  border: none;
-  box-shadow: none;
-  background: transparent;
-  font-size: 100%;
-  transition: 170ms ease-out;
+  background-image: none;
+  background-color: transparent;
+
+  &:backdrop {
+    background-image: none;
+    background-color: transparent;
+  }
 }
 
 // Budgie Menu
@@ -145,7 +147,6 @@ $asset_suffix: if($variant == 'default', '', '-hc');
 .raven {
   color: $fg_color;
   background-color: transparentize($bg_color, 0.02);
-  transition: 170ms ease-out;
 
   .raven-header {
     font: bold;
@@ -160,9 +161,6 @@ $asset_suffix: if($variant == 'default', '', '-hc');
     &.top { border-top-style: none; }
     &.bottom { border-bottom-style: none; }
 
-    >.button {
-      font:normal;
-    }
   }
 
   @if $variant=='default' {
@@ -170,13 +168,21 @@ $asset_suffix: if($variant == 'default', '', '-hc');
   }
 
   .raven-background {
-    background:transparent;
+    background-color: $base_color;
     border-bottom: 1px solid $borders_color;
     box-shadow:inset 0 1px 0 0 transparentize(white,0.9), 0 1px 1px 0 transparentize(black,0.9);
 
     &.middle { border-bottom-style: none; }  // applet background between two headers
+
+  }
+
+  .raven-calendar {
+    border:none;
+    padding: 2px;
+    border-bottom:1px solid $borders_color;
   }
 
+
   .powerstrip {
     background-color: transparent;
     border: none;
@@ -192,11 +198,14 @@ $asset_suffix: if($variant == 'default', '', '-hc');
     font-size: 100%;
 
     &:hover {
-      background: transparentize(black,0.9);
-      border: 1px solid transparentize(black,0.8);
       box-shadow: inset 0 1px transparentize(white,0.9), 1px 1px transparentize(black,0.8);
       transition: 170ms ease all;
     }
+
+    &:active {
+      box-shadow: 0 1px transparentize(white,0.9);
+      transition: 170ms ease all;
+    }
   }
 
   .option-subtitle {
@@ -219,13 +228,16 @@ $asset_suffix: if($variant == 'default', '', '-hc');
 
 // Notifications
 .budgie-notification-window {
-  border-radius: 1px;
+  border:none;
+  border-top: 1px solid transparentize(white,0.9);
+  border-radius: 4px;
+  background-color: $bg_color;
+  box-shadow: 0 2px 2px 0 $shadow_color;
 }
 
 .budgie-notification {
+
   &.background {
-    background-color: white;
-    border-radius: 4px;
   }
 
   .notification-title {
@@ -233,7 +245,10 @@ $asset_suffix: if($variant == 'default', '', '-hc');
     color: $fg_color;
   }
 
-  .notification-body { color: transparentize($budgie_panel_fg_color, 0.3); }
+  .notification-body {
+    border:none;
+    color: transparentize($budgie_panel_fg_color, 0.3);
+  }
 }
 
 .drop-shadow {
diff --git a/Paper/gtk-3.18/gtk-dark.css b/Paper/gtk-3.18/gtk-dark.css
index c79b24f..382e672 100644
--- a/Paper/gtk-3.18/gtk-dark.css
+++ b/Paper/gtk-3.18/gtk-dark.css
@@ -4236,36 +4236,33 @@ GtkSwitch {
   outline-offset: -4px;
   transition: all 200ms ease-in;
   border: none;
-  border-radius: 14px;
+  border-radius: 16px;
   color: transparent;
-  background-color: transparent;
+  background-color: rgba(0, 0, 0, 0.2);
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3); }
   GtkSwitch:insensitive {
-    background-color: rgba(0, 0, 0, 0.1); }
-  GtkSwitch:backdrop {
-    background-color: #37474f;
-    transition: 200ms ease-out; }
-    GtkSwitch:backdrop:insensitive {
-      background-color: #3d4f57; }
+    background-color: rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); }
   GtkSwitch:active, GtkSwitch:checked {
     background-color: #449ac2; }
     GtkSwitch:active:backdrop, GtkSwitch:checked:backdrop {
       background-color: #57a4c8; }
-      GtkSwitch:active:backdrop .slider:backdrop,
-      GtkSwitch:active:backdrop slider:backdrop, GtkSwitch:checked:backdrop .slider:backdrop,
-      GtkSwitch:checked:backdrop slider:backdrop {
-        box-shadow: none;
-        background-color: rgba(55, 71, 79, 0.9);
-        border: none; }
   GtkSwitch .slider {
-    padding: 2px;
-    border-radius: 50%;
+    border: none;
+    padding: 3px;
+    border-radius: 12px;
     transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    background-color: #2d3940;
-    box-shadow: none; }
+    background-color: #455a64;
+    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.2); }
+    GtkSwitch .slider:active {
+      background-color: white;
+      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.2); }
     GtkSwitch .slider:backdrop {
-      box-shadow: none; }
+      background-color: #475d67;
+      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1); }
     GtkSwitch .slider:insensitive {
+      background-color: #3b4c55;
+      border: 1px solid rgba(0, 0, 0, 0.2);
       box-shadow: none; }
   GtkSwitch .trough:active, GtkSwitch .trough:checked {
     background-color: #449ac2; }
@@ -4923,11 +4920,11 @@ treeview.view header button:active {
     border-right: 2px solid #449ac2; }
 
 .budgie-container {
-  border: none;
-  box-shadow: none;
-  background: transparent;
-  font-size: 100%;
-  transition: 170ms ease-out; }
+  background-image: none;
+  background-color: transparent; }
+  .budgie-container:backdrop {
+    background-image: none;
+    background-color: transparent; }
 
 .budgie-menu GtkSearchEntry.entry:not(:selected) {
   border: none;
@@ -5009,8 +5006,7 @@ treeview.view header button:active {
 
 .raven {
   color: #cfd8dc;
-  background-color: rgba(55, 71, 79, 0.98);
-  transition: 170ms ease-out; }
+  background-color: rgba(55, 71, 79, 0.98); }
   .raven .raven-header {
     font: bold;
     text-shadow: 0 1px rgba(0, 0, 0, 0.2);
@@ -5024,14 +5020,16 @@ treeview.view header button:active {
       border-top-style: none; }
     .raven .raven-header.bottom {
       border-bottom-style: none; }
-    .raven .raven-header > .button {
-      font: normal; }
   .raven .raven-background {
-    background: transparent;
+    background-color: #455a64;
     border-bottom: 1px solid #222c31;
     box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.1); }
     .raven .raven-background.middle {
       border-bottom-style: none; }
+  .raven .raven-calendar {
+    border: none;
+    padding: 2px;
+    border-bottom: 1px solid #222c31; }
   .raven .powerstrip {
     background-color: transparent;
     border: none;
@@ -5044,10 +5042,11 @@ treeview.view header button:active {
     box-shadow: 0 1px rgba(255, 255, 255, 0.1);
     font-size: 100%; }
     .raven .powerstrip .button:hover {
-      background: rgba(0, 0, 0, 0.1);
-      border: 1px solid rgba(0, 0, 0, 0.2);
       box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 1px 1px rgba(0, 0, 0, 0.2);
       transition: 170ms ease all; }
+    .raven .powerstrip .button:active {
+      box-shadow: 0 1px rgba(255, 255, 255, 0.1);
+      transition: 170ms ease all; }
   .raven .option-subtitle {
     font-size: smaller; }
 
@@ -5063,15 +5062,17 @@ treeview.view header button:active {
     padding: 8px; }
 
 .budgie-notification-window {
-  border-radius: 1px; }
+  border: none;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  background-color: #37474f;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2); }
 
-.budgie-notification.background {
-  background-color: white;
-  border-radius: 4px; }
 .budgie-notification .notification-title {
   font-size: 110%;
   color: #cfd8dc; }
 .budgie-notification .notification-body {
+  border: none;
   color: rgba(207, 216, 220, 0.7); }
 
 .drop-shadow, .budgie-session-dialog.background, .background.budgie-polkit-dialog {
diff --git a/Paper/gtk-3.18/gtk.css b/Paper/gtk-3.18/gtk.css
index f203c72..f41ca0c 100644
--- a/Paper/gtk-3.18/gtk.css
+++ b/Paper/gtk-3.18/gtk.css
@@ -4245,36 +4245,33 @@ GtkSwitch {
   outline-offset: -4px;
   transition: all 200ms ease-in;
   border: none;
-  border-radius: 14px;
+  border-radius: 16px;
   color: transparent;
   background-color: rgba(0, 0, 0, 0.1);
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0px 1px rgba(255, 255, 255, 0.3); }
   GtkSwitch:insensitive {
-    background-color: rgba(0, 0, 0, 0.1); }
-  GtkSwitch:backdrop {
-    background-color: #f7f7f7;
-    transition: 200ms ease-out; }
-    GtkSwitch:backdrop:insensitive {
-      background-color: #fafafa; }
+    background-color: rgba(0, 0, 0, 0.1);
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
   GtkSwitch:active, GtkSwitch:checked {
     background-color: #347D9F; }
     GtkSwitch:active:backdrop, GtkSwitch:checked:backdrop {
       background-color: #3a8cb2; }
-      GtkSwitch:active:backdrop .slider:backdrop,
-      GtkSwitch:active:backdrop slider:backdrop, GtkSwitch:checked:backdrop .slider:backdrop,
-      GtkSwitch:checked:backdrop slider:backdrop {
-        box-shadow: none;
-        background-color: rgba(247, 247, 247, 0.9);
-        border: none; }
   GtkSwitch .slider {
-    padding: 2px;
-    border-radius: 50%;
+    border: none;
+    padding: 3px;
+    border-radius: 12px;
     transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    background-color: #f7f7f7;
-    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2); }
+    background-color: #ffffff;
+    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.2); }
+    GtkSwitch .slider:active {
+      background-color: white;
+      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.2); }
     GtkSwitch .slider:backdrop {
-      box-shadow: none; }
+      background-color: #fcfcfc;
+      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1); }
     GtkSwitch .slider:insensitive {
+      background-color: #f2f2f2;
+      border: 1px solid rgba(0, 0, 0, 0.2);
       box-shadow: none; }
   GtkSwitch .trough:active, GtkSwitch .trough:checked {
     background-color: #347D9F; }
@@ -4938,11 +4935,11 @@ treeview.view header button:active {
     border-right: 2px solid #347D9F; }
 
 .budgie-container {
-  border: none;
-  box-shadow: none;
-  background: transparent;
-  font-size: 100%;
-  transition: 170ms ease-out; }
+  background-image: none;
+  background-color: transparent; }
+  .budgie-container:backdrop {
+    background-image: none;
+    background-color: transparent; }
 
 .budgie-menu GtkSearchEntry.entry:not(:selected) {
   border: none;
@@ -5024,8 +5021,7 @@ treeview.view header button:active {
 
 .raven {
   color: #444;
-  background-color: rgba(247, 247, 247, 0.98);
-  transition: 170ms ease-out; }
+  background-color: rgba(247, 247, 247, 0.98); }
   .raven .raven-header {
     font: bold;
     text-shadow: 0 1px rgba(0, 0, 0, 0.2);
@@ -5039,14 +5035,16 @@ treeview.view header button:active {
       border-top-style: none; }
     .raven .raven-header.bottom {
       border-bottom-style: none; }
-    .raven .raven-header > .button {
-      font: normal; }
   .raven .raven-background {
-    background: transparent;
+    background-color: #ffffff;
     border-bottom: 1px solid #d1d1d1;
     box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.1); }
     .raven .raven-background.middle {
       border-bottom-style: none; }
+  .raven .raven-calendar {
+    border: none;
+    padding: 2px;
+    border-bottom: 1px solid #d1d1d1; }
   .raven .powerstrip {
     background-color: transparent;
     border: none;
@@ -5059,10 +5057,11 @@ treeview.view header button:active {
     box-shadow: 0 1px rgba(255, 255, 255, 0.1);
     font-size: 100%; }
     .raven .powerstrip .button:hover {
-      background: rgba(0, 0, 0, 0.1);
-      border: 1px solid rgba(0, 0, 0, 0.2);
       box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 1px 1px rgba(0, 0, 0, 0.2);
       transition: 170ms ease all; }
+    .raven .powerstrip .button:active {
+      box-shadow: 0 1px rgba(255, 255, 255, 0.1);
+      transition: 170ms ease all; }
   .raven .option-subtitle {
     font-size: smaller; }
 
@@ -5078,15 +5077,17 @@ treeview.view header button:active {
     padding: 8px; }
 
 .budgie-notification-window {
-  border-radius: 1px; }
+  border: none;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  background-color: #f7f7f7;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2); }
 
-.budgie-notification.background {
-  background-color: white;
-  border-radius: 4px; }
 .budgie-notification .notification-title {
   font-size: 110%;
   color: #444; }
 .budgie-notification .notification-body {
+  border: none;
   color: rgba(207, 216, 220, 0.7); }
 
 .drop-shadow, .budgie-session-dialog.background, .background.budgie-polkit-dialog {
diff --git a/Paper/gtk-3.18/widgets/_switches.scss b/Paper/gtk-3.18/widgets/_switches.scss
index 3c926d9..6d0791d 100644
--- a/Paper/gtk-3.18/widgets/_switches.scss
+++ b/Paper/gtk-3.18/widgets/_switches.scss
@@ -11,61 +11,52 @@ GtkSwitch {
   transition: all 200ms ease-in;
 
   border: none;
-  border-radius: 14px;
+  border-radius: 16px;
   color: transparent;
 
-  background-color: if($variant == 'light', transparentize(black, 0.9), transparent);
+  background-color: if($variant == 'light', transparentize(black, 0.9), transparentize(black, 0.8));
   box-shadow: if($variant == 'light', (inset 0 0 0 1px transparentize(black, 0.8), 0px 1px $bottom_highlight), 0 0 0 1px transparentize(black, 0.7));
 
   &:insensitive {
     background-color: transparentize(black, 0.9);
+    box-shadow: if($variant == 'light', inset 0 0 0 1px transparentize(black, 0.9), 0 0 0 1px transparentize(black, 0.8));
   }
 
-  &:backdrop {
-    background-color: $backdrop_bg_color;
-    transition: $backdrop_transition;
-
-    &:insensitive { background-color: $insensitive_bg_color; }
-  }
-
-
   &:active,
   &:checked {
     background-color: $selected_bg_color;
 
     &:backdrop {
       background-color: $backdrop_selected_bg_color;
-
-      .slider,
-      slider {
-        &:backdrop {
-          box-shadow:none;
-          background-color:transparentize($bg_color, 0.1);
-          border:none;
-        }
-      }
     }
   }
 
   // Handle
   .slider {
-    padding:2px;
-    border-radius: 50%;
+    border:none;
+    padding:3px;
+    border-radius: 12px;
     transition: $button_transition;
-    background-color: if($variant == 'light', $bg_color, darken($bg_color, 5%));
+    background-color: $base_color;
+
+    box-shadow: inset 0 1px 0 0 transparentize(white,0.9),
+                0 2px 2px 0 transparentize(black, 0.8),
+                0 1px 2px 0 transparentize(black, 0.8);
 
-    box-shadow: if($variant == 'light', (
-                  0 2px 2px transparentize(black, 0.8),
-                  0 1px 2px transparentize(black, 0.8)
-                  ),(
-                  none
-                ));
+    &:active {
+      background-color: white;
+      box-shadow: 0 2px 2px 0 transparentize(black, 0.8),
+                  0 1px 2px 0 transparentize(black, 0.8);
+    }
 
     &:backdrop {
-      box-shadow:none;
+      background-color: $backdrop_base_color;
+      box-shadow: 0 1px 2px 0 transparentize(black, 0.9);
     }
 
     &:insensitive {
+      background-color: $insensitive_base_color;
+      border: 1px solid transparentize(black, 0.8);
       box-shadow:none;
     }
   }
diff --git a/Paper/gtk-3.20/apps/_budgie.scss b/Paper/gtk-3.20/apps/_budgie.scss
index ad9996c..8d1fd34 100644
--- a/Paper/gtk-3.20/apps/_budgie.scss
+++ b/Paper/gtk-3.20/apps/_budgie.scss
@@ -41,11 +41,13 @@ $asset_suffix: if($variant == 'default', '', '-hc');
 
 // Budgie
 .budgie-container {
-  border: none;
-  box-shadow: none;
-  background: transparent;
-  font-size: 100%;
-  transition: 170ms ease-out;
+  background-image: none;
+  background-color: transparent;
+
+  &:backdrop {
+    background-image: none;
+    background-color: transparent;
+  }
 }
 
 // Budgie Menu
@@ -145,23 +147,20 @@ $asset_suffix: if($variant == 'default', '', '-hc');
 .raven {
   color: $fg_color;
   background-color: transparentize($bg_color, 0.02);
-  transition: 170ms ease-out;
 
   .raven-header {
     font: bold;
     text-shadow: 0 1px $shadow_color;
+    icon-shadow: 0 1px $shadow_color;
     background-color: $bg_color;
     color: $fg_color;
-    border-top: 1px solid $borders_color;
-    border-bottom: 1px solid $borders_color;
+    border: solid $borders_color;
+    border-width: 1px 0 1px 0;
     box-shadow:inset 0 1px 0 0 transparentize(white,0.9),inset 0 -1px 0 0 transparentize(white,0.95), 0 1px 1px 0 transparentize(black,0.9);
 
     &.top { border-top-style: none; }
     &.bottom { border-bottom-style: none; }
 
-    >.button {
-      font:normal;
-    }
   }
 
   @if $variant=='default' {
@@ -169,13 +168,21 @@ $asset_suffix: if($variant == 'default', '', '-hc');
   }
 
   .raven-background {
-    background-color: transparentize($bg_color, 0.02);
+    background-color: $base_color;
     border-bottom: 1px solid $borders_color;
     box-shadow:inset 0 1px 0 0 transparentize(white,0.9), 0 1px 1px 0 transparentize(black,0.9);
 
     &.middle { border-bottom-style: none; }  // applet background between two headers
+
+  }
+
+  .raven-calendar {
+    border:none;
+    padding: 2px;
+    border-bottom:1px solid $borders_color;
   }
 
+
   .powerstrip {
     background-color: transparent;
     border: none;
@@ -191,11 +198,14 @@ $asset_suffix: if($variant == 'default', '', '-hc');
     font-size: 100%;
 
     &:hover {
-      background: transparentize(black,0.9);
-      border: 1px solid transparentize(black,0.8);
       box-shadow: inset 0 1px transparentize(white,0.9), 1px 1px transparentize(black,0.8);
       transition: 170ms ease all;
     }
+
+    &:active {
+      box-shadow: 0 1px transparentize(white,0.9);
+      transition: 170ms ease all;
+    }
   }
 
   .option-subtitle {
@@ -205,23 +215,29 @@ $asset_suffix: if($variant == 'default', '', '-hc');
 
 // MPRIS Applet
 .raven-mpris {
+  text-shadow: 0 1px $shadow_color;
+  icon-shadow: 0 1px $shadow_color;
   color: $budgie_panel_fg_color;
   background-color: transparentize($budgie_panel_bg_color, 0.2);
   border: solid transparentize(black, 0.8);
   border-width: 1px 0;
+  box-shadow:inset 0 1px 0 0 transparentize(white,0.9),inset 0 -1px 0 0 transparentize(white,0.95), 0 1px 1px 0 transparentize(black,0.9);
 
   .button.image-button { padding: 8px; }
 }
 
 // Notifications
 .budgie-notification-window {
-  border-radius: 1px;
+  border:none;
+  border-top: 1px solid transparentize(white,0.9);
+  border-radius: 4px;
+  background-color: $bg_color;
+  box-shadow: 0 2px 2px 0 $shadow_color;
 }
 
 .budgie-notification {
+
   &.background {
-    background-color: white;
-    border-radius: 4px;
   }
 
   .notification-title {
@@ -229,7 +245,10 @@ $asset_suffix: if($variant == 'default', '', '-hc');
     color: $fg_color;
   }
 
-  .notification-body { color: transparentize($budgie_panel_fg_color, 0.3); }
+  .notification-body {
+    border:none;
+    color: transparentize($budgie_panel_fg_color, 0.3);
+  }
 }
 
 .drop-shadow {