GTK 3.20 :: Lightdm rewrite (#516)

* * [GTK 3.20] Lightdm rewirte.

* * Fixed panel color.

Author: megax

gtk-3.20/scss/apps/_lightdm.scss

@@ -4,48 +4,40 @@
 
 @include exports("lightdm") {
     #panel_window {
-        background-color: transparent;
+        background-color: $lightdm_bg_color;
         background-image: none;
         color: $white;
         font: bold;
         text-shadow: 0 1px alpha($black, .5);
         -gtk-icon-shadow: 0 1px alpha($black, .5);
 
         menubar {
-            padding-left: 5px;
+            padding-left: $spacing;
 
             &, > menuitem {
                 background-color: transparent;
                 background-image: none;
+                border-style: none;
                 color: $white;
-                font: bold;
                 text-shadow: 0 1px alpha($black, .5);
                 -gtk-icon-shadow: 0 1px alpha($black, .5);
 
-                *:hover { color: $white; }
-
                 &:hover {
-                    border-style: none;
                     background-color: alpha($white, .2);
                     background-image: none;
                     color: $white;
                 }
 
-                &:disabled { color: alpha($white, .7); }
-
-                menu {
-                    border-radius: 1px;
+                *:hover { color: $white; }
 
-                    menuitem {
-                        font: normal;
-                        text-shadow: none;
-                    }
-                }
+                &:disabled { color: alpha($white, .7); }
             }
+
+            menu > menuitem { font: normal; }
         }
     }
 
-    #content_frame { padding-bottom: 14px; }
+    #content_frame { padding-bottom: $spacing * 3; }
 
     #login_window, #shutdown_dialog, #restart_dialog {
         border-style: none;
@@ -59,66 +51,15 @@
                     inset 0 1px mix(shade($lightdm_bg_color, .7), $lightdm_fg_color, .21),
                     inset 0 -1px mix(shade($lightdm_bg_color, .7), $lightdm_fg_color, .21);
 
-        button {
-            padding: 3px 15px;
-            border-width: 1px;
-            border-radius: $roundness;
-            border-style: solid;
-            border-color: shade($lightdm_bg_color, .8);
-            background-color: shade($lightdm_bg_color, 1.08);
-            background-image: none;
-            color: $lightdm_fg_color;
-            transition: all 150ms ease-out;
-
-            &.default, &:focus, &:active:focus {
-                border-color: shade($selected_bg_color, .8);
-                background-color: shade($selected_bg_color, 1.08);
-                background-image: none;
-                color: $selected_fg_color;
-
-                &:hover {
-                    border-color: shade($selected_bg_color, .7);
-                    background-color: $selected_bg_color;
-                }
-            }
-        }
+        @extend %panelbutton;
     }
 
-
     #login_window {
-        menu { border-radius: 1px; }
+        menu { border-radius: 0; }
 
-        combobox button {
-            &, &:hover, &:active, &:active:hover,
-            &:focus, &:hover:focus, &:active:focus, &:active:hover:focus {
-                padding: 0;
-                background: none;
-                border-style: none;
-                box-shadow: none;
-            }
-        }
+        button { @include button($lightdm_bg_color, $lightdm_fg_color); }
 
-        entry {
-            padding: 3px 5px;
-            border-width: 1px;
-            border-style: solid;
-            border-color: shade($lightdm_bg_color, .8);
-            border-radius: $roundness;
-            background-color: shade($lightdm_bg_color, .9);
-            background-image: none;
-            color: $lightdm_fg_color;
-            box-shadow: none;
-            transition: all 150ms ease-out;
-
-            &:focus, &:hover {
-                border-color: shade($lightdm_bg_color, .7);
-
-                box-shadow: inset 1px 0 alpha($dark_shadow, .1),
-                            inset 0 1px alpha($dark_shadow, .12),
-                            inset -1px 0 alpha($dark_shadow, .1),
-                            inset 0 -1px alpha($dark_shadow, .05);
-            }
-        }
+        entry { @include entry($lightdm_bg_color, $lightdm_fg_color); }
     }
 
     #user_combobox {
@@ -131,7 +72,6 @@
     }
 
     #user_image {
-        padding: 3px;
         border-radius: $roundness;
 
         /* draw border using box-shadow */
@@ -152,7 +92,7 @@
     }
 
     #buttonbox_frame {
-        padding-top: 10px;
+        padding-top: $spacing * 2;
         padding-bottom: 0;
         border-style: none;
         border-bottom-left-radius: $roundness;
@@ -162,32 +102,14 @@
         box-shadow: none;
     }
 
-
-
     /* shutdown button */
     #shutdown_button {
-        border-color: shade($error_bg_color, .8);
-        background-color: shade($error_bg_color, 1.08);
-        background-image: none;
-        color: $error_fg_color;
-
-        &:hover, &:active, &:active:hover {
-            border-color: shade($error_bg_color, .7);
-            background-color: $error_bg_color;
-        }
+        button { @include button($error_bg_color, $error_fg_color); }
     }
 
     /* restart button */
     #restart_button {
-        border-color: shade($warning_bg_color, .8);
-        background-color: shade($warning_bg_color, 1.08);
-        background-image: none;
-        color: $warning_fg_color;
-
-        &:hover, &:active, &:active:hover {
-            border-color: shade($warning_bg_color, .7);
-            background-color: $warning_bg_color;
-        }
+        button { @include button($warning_bg_color, $warning_fg_color); }
     }
 
      /* password warning */

gtk-3.20/scss/apps/_panel.scss

@@ -17,7 +17,7 @@
         background-image: none;
         color: $panel_fg_color;
 
-        &:hover, &:hover {
+        &:hover {
             @include linear-gradient(mix($panel_bg_color, $panel_fg_color, .11));
 
             border-color: mix($panel_bg_color, $panel_fg_color, .11);
@@ -47,7 +47,7 @@
     PanelApplet {
         border: 0;
 
-        .button {
+        button {
             @extend %panelbutton;
         }
     }