Add theming for Unity Greeter (#466)

* Add theming for Unity Greeter

* Generated css files from scss

- Replace alpha() and shade() in Sass with transparentize() and lighten()

* Rebase unity-greeter css code from upstream and drop excessive nesting

* Fix clock color and combo entry field

* Fix and improve Unity Greeter theming

- Fix panel icons
- Make password entry box rounder
- Add a bit of transparency to panel clock

7 files changed, 585 insertions, 0 deletions

diff --git a/common/gtk-3.0/3.20/gtk-dark.css b/common/gtk-3.0/3.20/gtk-dark.css
index bd35880..dc528ff 100644
--- a/common/gtk-3.0/3.20/gtk-dark.css
+++ b/common/gtk-3.0/3.20/gtk-dark.css
@@ -3559,6 +3559,87 @@ UnityPanelWidget,
   background-image: linear-gradient(to bottom, #5294E2);
   border-bottom: none; }
 
+.lightdm.menu {
+  background-image: none;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-color: rgba(255, 255, 255, 0.8);
+  border-radius: 4px;
+  padding: 1px;
+  color: white; }
+
+.lightdm-combo .menu {
+  background-color: rgba(64, 71, 86, 0.97);
+  border-radius: 0px;
+  padding: 0px;
+  color: white; }
+
+.lightdm.menu .menuitem *,
+.lightdm.menu .menuitem.check:active,
+.lightdm.menu .menuitem.radio:active {
+  color: white; }
+
+.lightdm.menubar {
+  color: rgba(255, 255, 255, 0.8);
+  background-image: none;
+  background-color: rgba(0, 0, 0, 0.5); }
+  .lightdm.menubar > .menuitem {
+    padding: 2px 6px; }
+
+.lightdm-combo.combobox-entry .button,
+.lightdm-combo .cell,
+.lightdm-combo .button,
+.lightdm-combo .entry,
+.lightdm.button,
+.lightdm.entry {
+  background-image: none;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-color: rgba(255, 255, 255, 0.4);
+  border-radius: 10px;
+  padding: 7px;
+  color: white;
+  text-shadow: none; }
+
+.lightdm.button,
+.lightdm.button:hover,
+.lightdm.button:active,
+.lightdm.button:active:focused,
+.lightdm.entry,
+.lightdm.entry:hover,
+.lightdm.entry:active,
+.lightdm.entry:active:focused {
+  background-image: none;
+  border-image: none; }
+
+.lightdm.button:focused,
+.lightdm.entry:focused {
+  border-color: rgba(255, 255, 255, 0.1);
+  border-width: 1px;
+  border-style: solid;
+  color: white; }
+
+.lightdm.entry:selected {
+  background-color: rgba(255, 255, 255, 0.8); }
+
+.lightdm.entry:active {
+  -gtk-icon-source: -gtk-icontheme("process-working-symbolic");
+  animation: dashentry_spinner 1s infinite linear; }
+
+.lightdm.option-button {
+  padding: 2px;
+  background: none;
+  border: 0; }
+
+.lightdm.toggle-button {
+  background: none;
+  border-width: 0; }
+  .lightdm.toggle-button.selected {
+    background-color: rgba(0, 0, 0, 0.7);
+    border-width: 1px; }
+
+@keyframes dashentry_spinner {
+  to {
+    -gtk-icon-transform: rotate(1turn); } }
+
 .overlay-bar {
   background-color: #5294E2;
   border-color: #5294E2;
diff --git a/common/gtk-3.0/3.20/gtk-darker.css b/common/gtk-3.0/3.20/gtk-darker.css
index 6fa3651..26f30e0 100644
--- a/common/gtk-3.0/3.20/gtk-darker.css
+++ b/common/gtk-3.0/3.20/gtk-darker.css
@@ -3557,6 +3557,87 @@ UnityPanelWidget,
   background-image: linear-gradient(to bottom, #5294E2);
   border-bottom: none; }
 
+.lightdm.menu {
+  background-image: none;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-color: rgba(255, 255, 255, 0.8);
+  border-radius: 4px;
+  padding: 1px;
+  color: white; }
+
+.lightdm-combo .menu {
+  background-color: rgba(64, 71, 86, 0.97);
+  border-radius: 0px;
+  padding: 0px;
+  color: white; }
+
+.lightdm.menu .menuitem *,
+.lightdm.menu .menuitem.check:active,
+.lightdm.menu .menuitem.radio:active {
+  color: white; }
+
+.lightdm.menubar {
+  color: rgba(255, 255, 255, 0.8);
+  background-image: none;
+  background-color: rgba(0, 0, 0, 0.5); }
+  .lightdm.menubar > .menuitem {
+    padding: 2px 6px; }
+
+.lightdm-combo.combobox-entry .button,
+.lightdm-combo .cell,
+.lightdm-combo .button,
+.lightdm-combo .entry,
+.lightdm.button,
+.lightdm.entry {
+  background-image: none;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-color: rgba(255, 255, 255, 0.4);
+  border-radius: 10px;
+  padding: 7px;
+  color: white;
+  text-shadow: none; }
+
+.lightdm.button,
+.lightdm.button:hover,
+.lightdm.button:active,
+.lightdm.button:active:focused,
+.lightdm.entry,
+.lightdm.entry:hover,
+.lightdm.entry:active,
+.lightdm.entry:active:focused {
+  background-image: none;
+  border-image: none; }
+
+.lightdm.button:focused,
+.lightdm.entry:focused {
+  border-color: rgba(255, 255, 255, 0.1);
+  border-width: 1px;
+  border-style: solid;
+  color: white; }
+
+.lightdm.entry:selected {
+  background-color: rgba(255, 255, 255, 0.8); }
+
+.lightdm.entry:active {
+  -gtk-icon-source: -gtk-icontheme("process-working-symbolic");
+  animation: dashentry_spinner 1s infinite linear; }
+
+.lightdm.option-button {
+  padding: 2px;
+  background: none;
+  border: 0; }
+
+.lightdm.toggle-button {
+  background: none;
+  border-width: 0; }
+  .lightdm.toggle-button.selected {
+    background-color: rgba(0, 0, 0, 0.7);
+    border-width: 1px; }
+
+@keyframes dashentry_spinner {
+  to {
+    -gtk-icon-transform: rotate(1turn); } }
+
 .overlay-bar {
   background-color: #5294E2;
   border-color: #5294E2;
diff --git a/common/gtk-3.0/3.20/gtk-solid-dark.css b/common/gtk-3.0/3.20/gtk-solid-dark.css
index 54eedfa..9a1a0fd 100644
--- a/common/gtk-3.0/3.20/gtk-solid-dark.css
+++ b/common/gtk-3.0/3.20/gtk-solid-dark.css
@@ -3559,6 +3559,87 @@ UnityPanelWidget,
   background-image: linear-gradient(to bottom, #5294E2);
   border-bottom: none; }
 
+.lightdm.menu {
+  background-image: none;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-color: rgba(255, 255, 255, 0.8);
+  border-radius: 4px;
+  padding: 1px;
+  color: white; }
+
+.lightdm-combo .menu {
+  background-color: #404756;
+  border-radius: 0px;
+  padding: 0px;
+  color: white; }
+
+.lightdm.menu .menuitem *,
+.lightdm.menu .menuitem.check:active,
+.lightdm.menu .menuitem.radio:active {
+  color: white; }
+
+.lightdm.menubar {
+  color: rgba(255, 255, 255, 0.8);
+  background-image: none;
+  background-color: rgba(0, 0, 0, 0.5); }
+  .lightdm.menubar > .menuitem {
+    padding: 2px 6px; }
+
+.lightdm-combo.combobox-entry .button,
+.lightdm-combo .cell,
+.lightdm-combo .button,
+.lightdm-combo .entry,
+.lightdm.button,
+.lightdm.entry {
+  background-image: none;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-color: rgba(255, 255, 255, 0.4);
+  border-radius: 10px;
+  padding: 7px;
+  color: white;
+  text-shadow: none; }
+
+.lightdm.button,
+.lightdm.button:hover,
+.lightdm.button:active,
+.lightdm.button:active:focused,
+.lightdm.entry,
+.lightdm.entry:hover,
+.lightdm.entry:active,
+.lightdm.entry:active:focused {
+  background-image: none;
+  border-image: none; }
+
+.lightdm.button:focused,
+.lightdm.entry:focused {
+  border-color: rgba(255, 255, 255, 0.1);
+  border-width: 1px;
+  border-style: solid;
+  color: white; }
+
+.lightdm.entry:selected {
+  background-color: rgba(255, 255, 255, 0.8); }
+
+.lightdm.entry:active {
+  -gtk-icon-source: -gtk-icontheme("process-working-symbolic");
+  animation: dashentry_spinner 1s infinite linear; }
+
+.lightdm.option-button {
+  padding: 2px;
+  background: none;
+  border: 0; }
+
+.lightdm.toggle-button {
+  background: none;
+  border-width: 0; }
+  .lightdm.toggle-button.selected {
+    background-color: rgba(0, 0, 0, 0.7);
+    border-width: 1px; }
+
+@keyframes dashentry_spinner {
+  to {
+    -gtk-icon-transform: rotate(1turn); } }
+
 .overlay-bar {
   background-color: #5294E2;
   border-color: #5294E2;
diff --git a/common/gtk-3.0/3.20/gtk-solid-darker.css b/common/gtk-3.0/3.20/gtk-solid-darker.css
index c61e4a9..4485d15 100644
--- a/common/gtk-3.0/3.20/gtk-solid-darker.css
+++ b/common/gtk-3.0/3.20/gtk-solid-darker.css
@@ -3557,6 +3557,87 @@ UnityPanelWidget,
   background-image: linear-gradient(to bottom, #5294E2);
   border-bottom: none; }
 
+.lightdm.menu {
+  background-image: none;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-color: rgba(255, 255, 255, 0.8);
+  border-radius: 4px;
+  padding: 1px;
+  color: white; }
+
+.lightdm-combo .menu {
+  background-color: #404756;
+  border-radius: 0px;
+  padding: 0px;
+  color: white; }
+
+.lightdm.menu .menuitem *,
+.lightdm.menu .menuitem.check:active,
+.lightdm.menu .menuitem.radio:active {
+  color: white; }
+
+.lightdm.menubar {
+  color: rgba(255, 255, 255, 0.8);
+  background-image: none;
+  background-color: rgba(0, 0, 0, 0.5); }
+  .lightdm.menubar > .menuitem {
+    padding: 2px 6px; }
+
+.lightdm-combo.combobox-entry .button,
+.lightdm-combo .cell,
+.lightdm-combo .button,
+.lightdm-combo .entry,
+.lightdm.button,
+.lightdm.entry {
+  background-image: none;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-color: rgba(255, 255, 255, 0.4);
+  border-radius: 10px;
+  padding: 7px;
+  color: white;
+  text-shadow: none; }
+
+.lightdm.button,
+.lightdm.button:hover,
+.lightdm.button:active,
+.lightdm.button:active:focused,
+.lightdm.entry,
+.lightdm.entry:hover,
+.lightdm.entry:active,
+.lightdm.entry:active:focused {
+  background-image: none;
+  border-image: none; }
+
+.lightdm.button:focused,
+.lightdm.entry:focused {
+  border-color: rgba(255, 255, 255, 0.1);
+  border-width: 1px;
+  border-style: solid;
+  color: white; }
+
+.lightdm.entry:selected {
+  background-color: rgba(255, 255, 255, 0.8); }
+
+.lightdm.entry:active {
+  -gtk-icon-source: -gtk-icontheme("process-working-symbolic");
+  animation: dashentry_spinner 1s infinite linear; }
+
+.lightdm.option-button {
+  padding: 2px;
+  background: none;
+  border: 0; }
+
+.lightdm.toggle-button {
+  background: none;
+  border-width: 0; }
+  .lightdm.toggle-button.selected {
+    background-color: rgba(0, 0, 0, 0.7);
+    border-width: 1px; }
+
+@keyframes dashentry_spinner {
+  to {
+    -gtk-icon-transform: rotate(1turn); } }
+
 .overlay-bar {
   background-color: #5294E2;
   border-color: #5294E2;
diff --git a/common/gtk-3.0/3.20/gtk-solid.css b/common/gtk-3.0/3.20/gtk-solid.css
index 7488d3e..c33579a 100644
--- a/common/gtk-3.0/3.20/gtk-solid.css
+++ b/common/gtk-3.0/3.20/gtk-solid.css
@@ -3561,6 +3561,87 @@ UnityPanelWidget,
   background-image: linear-gradient(to bottom, #5294E2);
   border-bottom: none; }
 
+.lightdm.menu {
+  background-image: none;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-color: rgba(255, 255, 255, 0.8);
+  border-radius: 4px;
+  padding: 1px;
+  color: white; }
+
+.lightdm-combo .menu {
+  background-color: #fdfdfe;
+  border-radius: 0px;
+  padding: 0px;
+  color: white; }
+
+.lightdm.menu .menuitem *,
+.lightdm.menu .menuitem.check:active,
+.lightdm.menu .menuitem.radio:active {
+  color: white; }
+
+.lightdm.menubar {
+  color: rgba(255, 255, 255, 0.8);
+  background-image: none;
+  background-color: rgba(0, 0, 0, 0.5); }
+  .lightdm.menubar > .menuitem {
+    padding: 2px 6px; }
+
+.lightdm-combo.combobox-entry .button,
+.lightdm-combo .cell,
+.lightdm-combo .button,
+.lightdm-combo .entry,
+.lightdm.button,
+.lightdm.entry {
+  background-image: none;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-color: rgba(255, 255, 255, 0.4);
+  border-radius: 10px;
+  padding: 7px;
+  color: white;
+  text-shadow: none; }
+
+.lightdm.button,
+.lightdm.button:hover,
+.lightdm.button:active,
+.lightdm.button:active:focused,
+.lightdm.entry,
+.lightdm.entry:hover,
+.lightdm.entry:active,
+.lightdm.entry:active:focused {
+  background-image: none;
+  border-image: none; }
+
+.lightdm.button:focused,
+.lightdm.entry:focused {
+  border-color: rgba(255, 255, 255, 0.1);
+  border-width: 1px;
+  border-style: solid;
+  color: white; }
+
+.lightdm.entry:selected {
+  background-color: rgba(255, 255, 255, 0.8); }
+
+.lightdm.entry:active {
+  -gtk-icon-source: -gtk-icontheme("process-working-symbolic");
+  animation: dashentry_spinner 1s infinite linear; }
+
+.lightdm.option-button {
+  padding: 2px;
+  background: none;
+  border: 0; }
+
+.lightdm.toggle-button {
+  background: none;
+  border-width: 0; }
+  .lightdm.toggle-button.selected {
+    background-color: rgba(0, 0, 0, 0.7);
+    border-width: 1px; }
+
+@keyframes dashentry_spinner {
+  to {
+    -gtk-icon-transform: rotate(1turn); } }
+
 .overlay-bar {
   background-color: #5294E2;
   border-color: #5294E2;
diff --git a/common/gtk-3.0/3.20/gtk.css b/common/gtk-3.0/3.20/gtk.css
index fd3b37b..836d47d 100644
--- a/common/gtk-3.0/3.20/gtk.css
+++ b/common/gtk-3.0/3.20/gtk.css
@@ -3561,6 +3561,87 @@ UnityPanelWidget,
   background-image: linear-gradient(to bottom, #5294E2);
   border-bottom: none; }
 
+.lightdm.menu {
+  background-image: none;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-color: rgba(255, 255, 255, 0.8);
+  border-radius: 4px;
+  padding: 1px;
+  color: white; }
+
+.lightdm-combo .menu {
+  background-color: rgba(253, 253, 254, 0.95);
+  border-radius: 0px;
+  padding: 0px;
+  color: white; }
+
+.lightdm.menu .menuitem *,
+.lightdm.menu .menuitem.check:active,
+.lightdm.menu .menuitem.radio:active {
+  color: white; }
+
+.lightdm.menubar {
+  color: rgba(255, 255, 255, 0.8);
+  background-image: none;
+  background-color: rgba(0, 0, 0, 0.5); }
+  .lightdm.menubar > .menuitem {
+    padding: 2px 6px; }
+
+.lightdm-combo.combobox-entry .button,
+.lightdm-combo .cell,
+.lightdm-combo .button,
+.lightdm-combo .entry,
+.lightdm.button,
+.lightdm.entry {
+  background-image: none;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-color: rgba(255, 255, 255, 0.4);
+  border-radius: 10px;
+  padding: 7px;
+  color: white;
+  text-shadow: none; }
+
+.lightdm.button,
+.lightdm.button:hover,
+.lightdm.button:active,
+.lightdm.button:active:focused,
+.lightdm.entry,
+.lightdm.entry:hover,
+.lightdm.entry:active,
+.lightdm.entry:active:focused {
+  background-image: none;
+  border-image: none; }
+
+.lightdm.button:focused,
+.lightdm.entry:focused {
+  border-color: rgba(255, 255, 255, 0.1);
+  border-width: 1px;
+  border-style: solid;
+  color: white; }
+
+.lightdm.entry:selected {
+  background-color: rgba(255, 255, 255, 0.8); }
+
+.lightdm.entry:active {
+  -gtk-icon-source: -gtk-icontheme("process-working-symbolic");
+  animation: dashentry_spinner 1s infinite linear; }
+
+.lightdm.option-button {
+  padding: 2px;
+  background: none;
+  border: 0; }
+
+.lightdm.toggle-button {
+  background: none;
+  border-width: 0; }
+  .lightdm.toggle-button.selected {
+    background-color: rgba(0, 0, 0, 0.7);
+    border-width: 1px; }
+
+@keyframes dashentry_spinner {
+  to {
+    -gtk-icon-transform: rotate(1turn); } }
+
 .overlay-bar {
   background-color: #5294E2;
   border-color: #5294E2;
diff --git a/common/gtk-3.0/3.20/sass/_unity.scss b/common/gtk-3.0/3.20/sass/_unity.scss
index 00fec8f..e04ee41 100644
--- a/common/gtk-3.0/3.20/sass/_unity.scss
+++ b/common/gtk-3.0/3.20/sass/_unity.scss
@@ -57,3 +57,102 @@ UnityPanelWidget,
   background-image: linear-gradient(to bottom, $selected_bg_color);
   border-bottom: none;
 }
+
+// Unity Greeter
+.lightdm.menu {
+  background-image: none;
+  background-color: transparentize(black, 0.6);
+  border-color: transparentize(white, 0.2);
+  border-radius: 4px;
+  padding: 1px;
+  color: white;
+}
+
+.lightdm-combo .menu {
+  background-color: lighten($header_bg, 8);
+  border-radius: 0px;
+  padding: 0px;
+  color: white;
+}
+
+.lightdm.menu .menuitem *,
+.lightdm.menu .menuitem.check:active,
+.lightdm.menu .menuitem.radio:active {
+  color: white;
+}
+
+.lightdm.menubar {
+  color: transparentize(white, 0.2);
+  background-image: none;
+  background-color: transparentize(black, 0.5);
+
+  & > .menuitem {
+    padding: 2px 6px;
+  }
+}
+
+.lightdm-combo.combobox-entry .button,
+.lightdm-combo .cell,
+.lightdm-combo .button,
+.lightdm-combo .entry,
+.lightdm.button,
+.lightdm.entry {
+  background-image: none;
+  background-color: transparentize(black, 0.7);
+  border-color: transparentize(white, 0.6);
+  border-radius: 10px;
+  padding: 7px;
+  color: white;
+  text-shadow: none;
+}
+
+.lightdm.button,
+.lightdm.button:hover,
+.lightdm.button:active,
+.lightdm.button:active:focused,
+.lightdm.entry,
+.lightdm.entry:hover,
+.lightdm.entry:active,
+.lightdm.entry:active:focused {
+  background-image: none;
+  border-image: none;
+}
+
+.lightdm.button:focused,
+.lightdm.entry:focused {
+  border-color: transparentize(white, 0.9);
+  border-width: 1px;
+  border-style: solid;
+  color: white;
+}
+
+.lightdm.entry:selected {
+  background-color: transparentize(white, 0.2);
+}
+
+.lightdm.entry:active {
+  -gtk-icon-source: -gtk-icontheme("process-working-symbolic");
+  animation: dashentry_spinner 1s infinite linear;
+}
+
+.lightdm.option-button {
+  padding: 2px;
+  background: none;
+  border: 0;
+}
+
+.lightdm.toggle-button {
+  background: none;
+  border-width: 0;
+
+  &.selected {
+    background-color: transparentize(black, 0.3);
+    border-width: 1px;
+  }
+}
+
+@keyframes dashentry_spinner {
+  to {
+    -gtk-icon-transform: rotate(1turn);
+  }
+}