Tweaked LightDM GTK Greeter theme

gtk-3.0/apps/gnome-applications.css

@@ -344,6 +344,7 @@ SushiFontWidget {
  *************/
 GucharmapChartable {
     background-color: @theme_base_color;
+    color: @theme_text_color;
 }
 
 GucharmapChartable:active,

gtk-3.0/apps/lightdm-gtk-greeter.css

@@ -1,108 +1,248 @@
-/***********************
+/*********
- * lightdm gtk greeter *
+ * panel *
- ***********************/
+ *********/
-#login_window,
+#panel_window {
-#panel_window,
+    background-color: transparent;
-#panel_window .menubar,
-#panel_window .menubar > .menuitem,
-#restart_dialog,
-#shutdown_dialog,
-#login_window,
-#login_window #user_combobox .arrow {
-    background-color: @dark_bg_color;
     background-image: none;
-    color: @dark_fg_color;
+    color: white;
+    font: bold;
+    text-shadow: 0 1px alpha(black, 0.5);
+    icon-shadow: 0 1px alpha(black, 0.5);
+}
+
+#panel_window .menubar,
+#panel_window .menubar > .menuitem {
+    background-color: transparent;
+    background-image: none;
+    color: white;
+    font: bold;
+    text-shadow: 0 1px alpha(black, 0.5);
+    icon-shadow: 0 1px alpha(black, 0.5);
 }
 
 #panel_window .menubar > .menuitem:hover {
-    border-color: mix(@dark_bg_color, @dark_fg_color, 0.21);
+    border-style: none;
-    background-color: mix(@dark_bg_color, @dark_fg_color, 0.21);
+    background-color: alpha(white, 0.2);
     background-image: none;
-    color: shade(@dark_fg_color, 1.08);
+    color: white;
 }
 
-#restart_dialog,
+#panel_window .menubar > .menuitem *:hover {
+    color: white;
+}
+
+#panel_window .menubar > .menuitem:insensitive {
+    color: alpha(white, 0.7);
+}
+
+#panel_window .menubar .menu {
+    border-radius: 1px;
+}
+
+#panel_window .menubar .menu .menuitem {
+    font: normal;
+    text-shadow: none;
+}
+
+/****************
+ * login window *
+ ****************/
+#login_window,
 #shutdown_dialog,
-#login_window {
+#restart_dialog {
+    border-style: none;
+    border-radius: 2px;
+    background-color: @lightdm_bg_color;
+    color: @lightdm_fg_color;
+
+    /* draw border using box-shadow */
+    box-shadow: inset 1px 0 mix(shade(@lightdm_bg_color, 0.7), @lightdm_fg_color, 0.21),
+                inset -1px 0 mix(shade(@lightdm_bg_color, 0.7), @lightdm_fg_color, 0.21),
+                inset 0 1px mix(shade(@lightdm_bg_color, 0.7), @lightdm_fg_color, 0.21),
+                inset 0 -1px mix(shade(@lightdm_bg_color, 0.7), @lightdm_fg_color, 0.21);
+}
+
+#content_frame {
+    padding-bottom: 14px;
+}
+
+#login_window .menu {
+    border-radius: 1px;
+}
+
+#login_window GtkComboBox .button,
+#login_window GtkComboBox .button:hover,
+#login_window GtkComboBox .button:active,
+#login_window GtkComboBox .button:active:hover,
+#login_window GtkComboBox .button:focus,
+#login_window GtkComboBox .button:hover:focus,
+#login_window GtkComboBox .button:active:focus,
+#login_window GtkComboBox .button:active:hover:focus {
+    padding: 0;
+    background: none;
+    border-style: none;
+    box-shadow: none;
+}
+
+#login_window GtkComboBox .button:focus,
+#login_window GtkComboBox .button:hover:focus,
+#login_window GtkComboBox .button:active:focus,
+#login_window GtkComboBox .button:active:hover:focus {
+    background: none;
+    border-style: none;
+}
+
+#login_window #user_combobox {
+    color: @lightdm_fg_color;
+    font: 18px;
+}
+
+#login_window #user_combobox .menu {
+    font: normal;
+}
+
+#login_window #user_combobox .arrow {
+    color: mix(@lightdm_fg_color, @lightdm_bg_color, 0.5);
+}
+
+#login_window .entry {
+    padding: 3px 5px;
     border-width: 1px;
     border-style: solid;
-    border-color: shade(@dark_bg_color, 0.8);
+    border-color: shade(@lightdm_bg_color, 0.7);
     border-radius: 2px;
+    background-color: shade(@lightdm_bg_color, 0.9);
+    background-image: none;
+    color: @lightdm_fg_color;
+                                      
+    box-shadow: none;
+    transition: all 150ms ease-out;
+}
+
+#login_window .entry:focus,
+#login_window .entry:hover {
+    box-shadow: inset 1px 0 alpha(@dark_shadow, 0.10),
+                inset 0 1px alpha(@dark_shadow, 0.12),
+                inset -1px 0 alpha(@dark_shadow, 0.10),
+                inset 0 -1px alpha(@dark_shadow, 0.05);
 }
 
 #login_window .button,
-#restart_dialog .button,
 #shutdown_dialog .button,
-#user_image {
+#restart_dialog .button {
-    border-color: shade(@dark_bg_color, 0.8);
+    padding: 3px 15px;
-    background-color: shade(@dark_bg_color, 1.08);
+    border-width: 1px;
-    background-image: none;
-    color: @dark_fg_color;
     border-radius: 2px;
-}
+    border-style: solid;
+    border-color: shade(@lightdm_bg_color, 0.8);
+    background-color: shade(@lightdm_bg_color, 1.08);
+    background-image: none;
+    color: @lightdm_fg_color;
 
-#cancel_button,
+    transition: all 150ms ease-out;
-#login_button,
-#shutdown_button,
-#restart_button {
-    padding: 4px 16px;
 }
 
 #user_image {
-    padding: 4px;
+    padding: 3px;
+    border-radius: 2px;
+
+    /* draw border using box-shadow */
+    box-shadow: inset 1px 0 shade(@lightdm_bg_color, 0.7),
+                inset -1px 0 shade(@lightdm_bg_color, 0.7),
+                inset 0 1px shade(@lightdm_bg_color, 0.7),
+                inset 0 -1px shade(@lightdm_bg_color, 0.7);
 }
 
+#user_image_border {
+    border-radius: 2px;
+    background-color: shade(@lightdm_bg_color, 0.9);
+    background-image: none;
+
+    box-shadow: inset 1px 0 alpha(@dark_shadow, 0.07),
+                inset 0 1px alpha(@dark_shadow, 0.08),
+                inset -1px 0 alpha(@dark_shadow, 0.07),
+                inset 0 -1px alpha(@dark_shadow, 0.05);
+}
+
+#buttonbox_frame {
+    padding-top: 10px;
+    padding-bottom: 0;
+    border-style: none;
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
+    background-color: transparent;
+    background-image: none;
+    box-shadow: none;
+}
+
+/******************************
+ * default and focused button *
+ ******************************/
 #login_window .button.default,
-#restart_dialog .button.default,
 #shutdown_dialog .button.default,
+#restart_dialog .button.default,
 #login_window .button:focus,
+#login_window .button:active:focus,
+#shutdown_dialog .button:focus,
+#shutdown_dialog .button:active:focus,
 #restart_dialog .button:focus,
-#shutdown_dialog .button:focus {
+#restart_dialog .button:active:focus {
     border-color: shade(@theme_selected_bg_color, 0.8);
     background-color: shade(@theme_selected_bg_color, 1.08);
+    background-image: none;
     color: @theme_selected_fg_color;
 }
 
 #login_window .button.default:hover,
+#shutdown_dialog .button.default:hover,
 #restart_dialog .button.default:hover,
-#shutdown_dialog .button.default:hover {
+#login_window .button:hover:focus,
+#login_window .button:active:hover:focus,
+#shutdown_dialog .button:hover:focus,
+#shutdown_dialog .button:active:hover:focus,
+#restart_dialog .button:hover:focus,
+#restart_dialog .button:active:hover:focus {
     border-color: shade(@theme_selected_bg_color, 0.7);
     background-color: @theme_selected_bg_color;
 }
 
-#login_window .button.default:active,
+/*******************
-#restart_dialog .button.default:active,
+ * shutdown button *
-#shutdown_dialog .button.default:active {
+ *******************/
-    border-color: shade(@theme_selected_bg_color, 0.8);
+#shutdown_button.button {
-    background-color: shade(@theme_selected_bg_color, 0.95);
+    border-color: shade(@error_bg_color, 0.8);
-}
+    background-color: shade(@error_bg_color, 1.08);
-
-#login_window .button.default:hover,
-#restart_dialog .button.default:hover,
-#shutdown_dialog .button.default:hover {
-    border-color: shade(@theme_selected_bg_color, 0.7);
-    background-color: shade(@theme_selected_bg_color, 0.97);
-}
-
-#login_window .button:hover,
-#restart_dialog .button:hover,
-#shutdown_dialog .button:hover {
-    border-color: shade(@dark_bg_color, 0.7);
-    background-color: shade(@dark_bg_color, 1.10);
     background-image: none;
+    color: @error_fg_color;
 }
 
-#login_button.button:hover {
+#shutdown_button.button:hover,
-    border-color: shade(@success_color, 0.7);
+#shutdown_button.button:active,
-    background-color: @success_color;
+#shutdown_button.button:active:hover {
+    border-color: shade(@error_bg_color, 0.7);
+    background-color: @error_bg_color;
 }
 
-#shutdown_button.button:hover {
+/******************
-    border-color: shade(@error_color, 0.7);
+ * restart button *
-    background-color: @error_color;
+ ******************/
+#restart_button.button {
+    border-color: shade(@warning_bg_color, 0.8);
+    background-color: shade(@warning_bg_color, 1.08);
+    background-image: none;
+    color: @warning_fg_color;
 }
 
-#restart_button.button:hover {
+#restart_button.button:hover,
-    border-color: shade(@warning_color, 0.7);
+#restart_button.button:active,
-    background-color: @warning_color;
+#restart_button.button:active:hover {
+    border-color: shade(@warning_bg_color, 0.7);
+    background-color: @warning_bg_color;
+}
+
+/********************
+ * password warning *
+ ********************/
+#greeter_infobar {
+    font: bold;
 }

gtk-3.0/gtk-dark.css

@@ -57,6 +57,10 @@
 @define-color osd_fg @dark_fg_color;
 @define-color osd_bg alpha(@osd_base, 0.8);
 
+/* lightdm greeter colors */
+@define-color lightdm_bg_color @dark_bg_color;
+@define-color lightdm_fg_color @dark_fg_color;
+
 /* window manager colors */
 @define-color wm_bg @titlebar_bg_color;
 @define-color wm_border_focused mix(shade(@titlebar_bg_color, 0.7), @titlebar_fg_color, 0.21);

gtk-3.0/gtk.css

@@ -57,6 +57,10 @@
 @define-color osd_fg @dark_fg_color;
 @define-color osd_bg alpha(@osd_base, 0.8);
 
+/* lightdm greeter colors */
+@define-color lightdm_bg_color @dark_bg_color;
+@define-color lightdm_fg_color @dark_fg_color;
+
 /* window manager colors */
 @define-color wm_bg @titlebar_bg_color;
 @define-color wm_border_focused mix(shade(@titlebar_bg_color, 0.7), @titlebar_fg_color, 0.21);