Explicitly set the background black when using the minimal theme.

.gitignore

@@ -1,2 +1,3 @@
 .sass-cache/
 *.sw?
+node_modules/

LISENCE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2016 Jonathan Bernard
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,4 +1,9 @@
-### Prerequisites
+## Demo
+
+[Live Demo](https://jdbernard.github.io/lightdm-uestibulum) (view in
+fullscreen).
+
+## Prerequisites
 
 * [lightdm-webkit2-greeter](https://github.com/Antergos/lightdm-webkit2-greeter)
 
@@ -29,3 +34,16 @@ Disable the GTK greeter:
 
 *On distributions other than Ubuntu, lightdm configuration files may be in
 different locations. Consult your distribution's documentation for details.*
+
+## Lisence
+
+Lisenced under the [MIT License](https://opensource.org/licenses/MIT)
+(see [LICENSEE.md](LICENSE.md)).
+
+### Attributions
+
+Images taken from [unsplash.com](unsplash.com). Used under the [unsplash
+lisence](https://unsplash.com/license).
+
+[Exo 2](https://fonts.google.com/specimen/Exo+2) font lisenced under the
+[Open Font Lisence](http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL_web).

css/lightdm-uestibulum.css

@@ -1,4 +1,6 @@
-@import url("https://fonts.googleapis.com/css?family=Abel|Aldrich|Audiowide|Black+Ops+One|Cherry+Cream+Soda|Exo|Exo 2|Graduate|Josefin+Sans|Kelly+Slab|Michroma|Monoton|Nixie+One|Open+Sans+Condensed:300|Orbitron|Poiret+One|Press+Start+2P|Prompt|Rajdhani|Raleway|Russo+One|Signika|Syncopate|Teko");
+@font-face {
+  font-family: Exo2;
+  src: local("Exo 2"), url(../fonts/Exo2-Medium.ttf); }
 * {
   margin: 0;
   padding: 0; }
@@ -11,11 +13,11 @@ h2 {
 
 body {
   color: white;
-  font-family: "Exo 2"; }
+  font-family: Exo2; }
 
-.bg {
+#background-image {
+  opacity: 1;
   display: block;
-  opacity: 0;
   transition: 1s;
   position: fixed;
   width: 100%;
@@ -23,18 +25,6 @@ body {
   right: 0;
   z-index: -1; }
 
-.morning #bg-morning {
-  opacity: 1; }
-
-.afternoon #bg-afternoon {
-  opacity: 1; }
-
-.evening #bg-evening {
-  opacity: 1; }
-
-.night #bg-night {
-  opacity: 1; }
-
 #ui-container {
   position: fixed;
   top: 0;
@@ -73,14 +63,6 @@ body {
     #power-panel.active #power-button {
       display: none; }
 
-#clock-panel {
-  background: rgba(0, 0, 0, 0.3);
-  font-size: 6vw;
-  font-weight: 500;
-  padding: 1vw 2vw;
-  width: 100%;
-  z-index: 1; }
-
 #login-panel {
   z-index: 2; }
   #login-panel input[type=password] {
@@ -139,6 +121,23 @@ body {
   #sessions.select-session #sessions-list {
     display: inline-block; }
 
+@keyframes throb {
+  from {
+    opacity: 1; }
+  to {
+    opacity: 0; } }
+#checking-credentials {
+  opacity: 0; }
+  #checking-credentials .c1, #checking-credentials .c2, #checking-credentials .c3 {
+    animation: alternate infinite 2s throb; }
+  #checking-credentials .c2 {
+    animation-delay: 200ms; }
+  #checking-credentials .c3 {
+    animation-delay: 400ms; }
+
+#login-panel.checking #checking-credentials {
+  opacity: 1; }
+
 .failed-auth input[type=password] {
   color: red;
   border-color: red !important; }
@@ -148,85 +147,7 @@ body {
 .lock-screen #session-panel {
   display: none !important; }
 
-@keyframes throb {
-  from {
-    opacity: 1; }
-  to {
-    opacity: 0; } }
 .throb {
   animation: alternate infinite 2s throb; }
 
-.evening #clock-panel {
-  border-bottom: 2px solid white;
-  text-align: right;
-  position: absolute;
-  right: 0;
-  top: 0; }
-.evening #login-panel {
-  position: absolute;
-  bottom: 2vw;
-  left: 1vw; }
-.evening #session-panel {
-  position: absolute;
-  bottom: 0.5vw;
-  left: 1vw; }
-
-.morning #clock-panel, .night #clock-panel, .afternoon #clock-panel {
-  border-top: 2px solid white;
-  position: absolute;
-  left: 0;
-  bottom: 0; }
-.morning #login-panel, .night #login-panel, .afternoon #login-panel {
-  position: absolute;
-  bottom: 2vw;
-  left: 20vw; }
-.morning #session-panel, .night #session-panel, .afternoon #session-panel {
-  position: absolute;
-  bottom: 0.5vw;
-  left: 20vw; }
-
-.morning #clock-panel {
-  text-shadow: 0 0 0.2vw #446688; }
-.morning #users:hover #user-display, .morning #sessions:hover #session-display,
-.morning #users-list li:hover, .morning #sessions-list li.session:hover {
-  color: #0088aa;
-  text-shadow: 0 0 0.5vw black; }
-.morning #power-panel {
-  opacity: 0.7; }
-
-.afternoon #clock-panel {
-  text-shadow: 0 0 2vw #448844; }
-.afternoon #users:hover #user-display, .afternoon #sessions:hover #session-display,
-.afternoon #users-list li:hover, .afternoon #sessions-list li.session:hover {
-  color: #00aa00;
-  text-shadow: 0 0 0.5vw black; }
-
-.evening #clock-panel {
-  text-shadow: 0 0 2vw #faaa3b; }
-.evening #users:hover #user-display, .evening #sessions:hover #session-display,
-.evening #users-list li:hover, .evening #sessions-list li.session:hover {
-  color: orange;
-  text-shadow: 0 0 0.5vw black; }
-.evening #power-panel {
-  opacity: 0.7; }
-
-.night #clock-panel {
-  text-shadow: 0 0 2vw #884488; }
-.night #users:hover #user-display, .night #sessions:hover #session-display,
-.night #users-list li:hover, .night #sessions-list li.session:hover {
-  color: #8822bb;
-  text-shadow: 0 0 0.2vw black; }
-
-/*.night {
-  #clock-panel {
-
-  }
-
-  #login-panel {
-    position: absolute;
-    bottom: 2vw;
-    left: 2vw;
-  }
-}*/
-
 /*# sourceMappingURL=lightdm-uestibulum.css.map */

css/lightdm-uestibulum.css.map

@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "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",
+"mappings": "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",
 "sources": ["lightdm-uestibulum.scss"],
 "names": [],
 "file": "lightdm-uestibulum.css"

css/lightdm-uestibulum.scss

@@ -1,22 +1,23 @@
-@import url('https://fonts.googleapis.com/css?family=Abel|Aldrich|Audiowide|Black+Ops+One|Cherry+Cream+Soda|Exo|Exo 2|Graduate|Josefin+Sans|Kelly+Slab|Michroma|Monoton|Nixie+One|Open+Sans+Condensed:300|Orbitron|Poiret+One|Press+Start+2P|Prompt|Rajdhani|Raleway|Russo+One|Signika|Syncopate|Teko');
+//@import url('https://fonts.googleapis.com/css?family=Abel|Aldrich|Audiowide|Black+Ops+One|Cherry+Cream+Soda|Exo|Exo 2|Graduate|Josefin+Sans|Kelly+Slab|Michroma|Monoton|Nixie+One|Open+Sans+Condensed:300|Orbitron|Poiret+One|Press+Start+2P|Prompt|Rajdhani|Raleway|Russo+One|Signika|Syncopate|Teko');
+
+@font-face {
+  font-family: Exo2;
+  src: local("Exo 2"), url(../fonts/Exo2-Medium.ttf);
+}
 
 * { margin: 0; padding: 0; }
 
 h1 { font-size: 1.5vw; }
 h2 { font-size: 1vw; }
 
-$colorFG: white;
-$colorBG: black;
-$colorAccent: orange;
-
 body {
-  color: $colorFG;
+  color: white;
-  font-family: 'Exo 2'
+  font-family: Exo2
 }
 
-.bg {
+#background-image {
+  opacity: 1;
   display: block;
-  opacity: 0;
   transition: 1s;
 
   position: fixed;
@@ -26,11 +27,6 @@ body {
   z-index: -1;
 }
 
-.morning #bg-morning { opacity: 1; }
-.afternoon #bg-afternoon { opacity: 1; }
-.evening #bg-evening { opacity: 1; }
-.night #bg-night { opacity: 1; }
-
 #ui-container {
   position: fixed;
   top: 0;
@@ -79,15 +75,6 @@ body {
   }
 }
 
-#clock-panel {
-  background: rgba(0, 0, 0, 0.3);
-  font-size: 6vw;
-  font-weight: 500;
-  padding: 1vw 2vw;
-  width: 100%;
-  z-index: 1;
-}
-
 #login-panel {
 
   z-index: 2;
@@ -95,8 +82,8 @@ body {
   input[type=password] {
     background: none;
     border: none;
-    border-bottom: 2px solid $colorFG;
+    border-bottom: 2px solid white;
-    color: $colorFG;
+    color: white;
     font-size: 1vw;
     margin-top: 0.5em;
     opacity: 0;
@@ -166,6 +153,20 @@ body {
   }
 }
 
+@keyframes throb {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+#checking-credentials {
+  opacity: 0;
+  .c1, .c2, .c3 { animation: alternate infinite 2s throb; }
+  .c2 { animation-delay: 200ms; }
+  .c3 { animation-delay: 400ms; }
+}
+
+#login-panel.checking #checking-credentials { opacity: 1; }
+
 .failed-auth {
   input[type=password] {
     color: red;
@@ -178,105 +179,4 @@ body {
   #session-panel { display: none !important; }
 }
 
-@keyframes throb {
-  from { opacity: 1; }
-  to { opacity: 0; }
-}
-
 .throb { animation: alternate infinite 2s throb; }
-
-
-.evening {
-  #clock-panel {
-    border-bottom: 2px solid $colorFG;
-    text-align: right;
-
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-
-  #login-panel {
-    position: absolute;
-    bottom: 2vw;
-    left: 1vw;
-  }
-
-  #session-panel {
-    position: absolute;
-    bottom: 0.5vw;
-    left: 1vw;
-  }
-}
-
-.morning, .night, .afternoon {
-  #clock-panel {
-    border-top: 2px solid $colorFG;
-
-    position: absolute;
-    left: 0;
-    bottom: 0;
-  }
-
-  #login-panel {
-    position: absolute;
-    bottom: 2vw;
-    left: 20vw;
-  }
-
-  #session-panel {
-    position: absolute;
-    bottom: 0.5vw;
-    left: 20vw;
-  }
-}
-
-.morning {
-  #clock-panel { text-shadow: 0 0 0.2vw #446688; }
-  #users:hover #user-display, #sessions:hover #session-display,
-  #users-list li:hover, #sessions-list li.session:hover {
-    color: #0088aa;
-    text-shadow: 0 0 0.5vw black;
-  }
-  #power-panel { opacity: 0.7; }
-}
-
-.afternoon {
-  #clock-panel { text-shadow: 0 0 2vw #448844; }
-  #users:hover #user-display, #sessions:hover #session-display,
-  #users-list li:hover, #sessions-list li.session:hover {
-    color: #00aa00;
-    text-shadow: 0 0 0.5vw black;
-  }
-}
-
-.evening {
-  #clock-panel { text-shadow: 0 0 2vw #faaa3b; }
-  #users:hover #user-display, #sessions:hover #session-display,
-  #users-list li:hover, #sessions-list li.session:hover {
-    color: orange;
-    text-shadow: 0 0 0.5vw black;
-  }
-  #power-panel { opacity: 0.7; }
-}
-
-.night {
-  #clock-panel { text-shadow: 0 0 2vw #884488; }
-  #users:hover #user-display, #sessions:hover #session-display,
-  #users-list li:hover, #sessions-list li.session:hover {
-    color: #8822bb;
-    text-shadow: 0 0 0.2vw black;
-  }
-}
-
-/*.night {
-  #clock-panel {
-
-  }
-
-  #login-panel {
-    position: absolute;
-    bottom: 2vw;
-    left: 2vw;
-  }
-}*/

index.html

@@ -9,10 +9,7 @@
 
   </head>
   <body>
-    <img id=bg-morning class=bg src="img/morning.jpg">
+    <img id=background-image>
-    <img id=bg-afternoon class=bg src="img/afternoon.jpg">
-    <img id=bg-evening class=bg src="img/evening.jpg">
-    <img id=bg-night class=bg src="img/night.gif">
 
     <div id=ui-container>
       <div id=power-panel>
@@ -28,7 +25,7 @@
 
       <div id=login-panel>
         <h1>
-          <span id=greeting>Good day</span>,
+          <span id=greeting>Good day</span>
           <div id=users>
             <span id=user-display>User</span>
             <ul id=users-list></ul>
@@ -37,6 +34,9 @@
         </h1>
         <input type=password name=pwd placeholder='password...'>
         <i class='fa fa-exclamation-circle' id=fail-msg></i>
+        <div id=checking-credentials>checking credentials
+          <span class=c1>.</span><span class=c2>.</span><span class=c3>.</span>
+        </div>
       </div>
 
       <div id=session-panel>

js/lightdm-mock.js

@@ -96,6 +96,7 @@ if (!('lightdm' in window)) {
     lightdm.timed_login_user =
         lightdm.timed_login_delay > 0 ? lightdm.users[0] : null;
 
+    lightdm.get_str = function () {};
     lightdm.get_string_property = function () {};
     lightdm.get_integer_property = function () {};
     lightdm.get_boolean_property = function () {};

js/lightdm-uestibulum.js

@@ -1,10 +1,55 @@
 (function() {
 
-  var U = window.uestibulum = {};
+  var U = window.uestibulum = {
+    config: { fullNames: false, hidpi: true, theme: 'minimal' },
+    themes: {}
+  };
+
   _.templateSettings = {
     interpolate: /\{\{(.+?)\}\}/g
   };
 
+  U.load = function(tag, url) {
+    return new Promise(function(resolve, reject) {
+      var element = document.createElement(tag);
+      var parent = 'body';
+      var attr = 'src';
+
+      element.onload = resolve;
+      element.onerror = reject;
+
+      switch (tag) {
+        case 'script': element.async = true; break;
+        case 'link':
+          element.type = 'text/css';
+          element.rel = 'stylesheet';
+          attr = 'href';
+          parent = 'head';
+          break;
+        default:
+      }
+
+      element[attr] = url;
+      document[parent].appendChild(element);
+    });
+  };
+
+  U.ImageModel = Backbone.Model.extend({
+    defaults: { url: 'img/black.png' } });
+
+  U.BackgroundView = Backbone.View.extend({
+    el: '#background-image',
+
+    initialize: function(options) {
+      _.bindAll(this, 'render');
+      this.imgModel = options.imageModel;
+      this.imgModel.on('change:url', this.render);
+      this.render(); // perform an initial render
+    },
+
+    render: function() { this.$el.attr('src', this.imgModel.get('url')); }
+  });
+
   U.ClockView = Backbone.View.extend({
     el: '#clock-panel',
 
@@ -57,24 +102,45 @@
     },
 
     initialize: function(options) {
-      _.bindAll(this, 'enterPassword', 'getUserName',
+      _.bindAll(this, 'authComplete', 'enterPassword', 'getUserName',
                 'render', 'showPrompt', 'showUserSelect');
 
       this.uiView = options.uiView;
+      this.sessionView = options.sessionView;
       window.show_prompt = this.showPrompt;
+      window.authentication_complete = this.authComplete;
       this.user = lightdm.users[0];
 
       lightdm.authenticate(this.user.name);
       //lightdm.start_authentication(this.user.name);
     },
 
+    authComplete: function() {
+      console.log('authComplete. is_authenticated: ' + lightdm.is_authenticated);
+      this.$el.removeClass('checking');
+      this.$el.find('input[type=password]').prop('disabled', false);
+
+      if (lightdm.is_authenticated) {
+        console.log('Logging in: lightdm.login(' + this.user.name + ',' +
+                    this.sessionView.key + ')');
+        //lightdm.start_session(this.sessionView.session.key);
+        lightdm.login(this.user, this.sessionView.session.key);
+      }
+      else {
+        this.$el.addClass('failed-auth');
+        lightdm.authenticate(this.user.name);
+        //lightdm.start_authentication(this.loginView.user.name);
+      }
+    },
+
     getUserName: function(user) {
-      return user.display_name || user.real_name || user.name;
+      var name = user.display_name || user.real_name || user.name;
+      if (!U.config.fullNames) name = name.split(/\s/)[0];
+      return name;
     },
 
     render: function() {
       this.undelegateEvents();
-      var greeting = 'Good ' + this.uiView.timePeriod;
 
       var $userListEl = this.$el.find('#users-list');
       $userListEl.html(
@@ -84,9 +150,10 @@
         }, this).join('\n'));
 
       if (this.user) {
-        this.$el.find('#greeting').text(greeting);
+        this.$el.find('#greeting').text(this.uiView.getGreeting());
         this.$el.find('#user-display').text(this.getUserName(this.user));
       } 
+
       this.delegateEvents();
     },
 
@@ -123,6 +190,8 @@
       this.$el.removeClass('failed-auth');
       //if (e.key != 'Enter') return;
       if (e.keyCode != 13) return;
+      this.$el.addClass('checking');
+      this.$el.find('input[type=password]').prop('disabled', true);
       if (!lightdm.in_authentication) lightdm.authenticate(this.user.name);
       lightdm.respond($(e.target).val());
     }
@@ -140,6 +209,7 @@
       _.bindAll(this, 'render', 'showSessionSelect', 'selectSession');
 
       this.session = lightdm.sessions[0];
+      this.render();
     },
 
     render: function() {
@@ -170,59 +240,49 @@
     events: {},
 
     initialize: function(options) {
-      _.bindAll(this, 'render', 'authComplete', 'checkTimePeriod');
+      _.bindAll(this, 'render', 'setTheme');
 
-      window.authentication_complete = this.authComplete;
       window.autologin_timer_expired = function() {};
 
       if (lightdm.lock_hint) this.$el.addClass('lock-screen');
 
-      this.timePeriod = 'day';
+      this.bgImgModel = new U.ImageModel
-      this.loginView = new U.LoginView({uiView: this});
+      this.backgroundView = new U.BackgroundView({imageModel: this.bgImgModel});
       this.sessionView = new U.SessionView();
+      this.loginView = new U.LoginView({uiView: this, sessionView: this.sessionView});
       this.clockView = new U.ClockView();
       this.powerView = new U.PowerView();
-      this.render();
+      this.setTheme(U.config.theme || 'jdb')
+        .then(this.render);
     },
 
-    authComplete: function() {
+    render: function() { this.theme.render(this); },
-      if (lightdm.is_authenticated) {
+
-        //lightdm.start_session(this.sessionView.session.key);
+    getGreeting: function() { return this.theme.getGreeting(); },
-        lightdm.login(this.loginView.user, this.sessionView.session.key);
+
-      }
+    setTheme: function(themeName) {
+      var promise;
+      var uiView = this;
+
+      if (U.themes[themeName]) promise = Promise.resolve(U.themes[themeName]);
       else {
-        this.$el.find('#login-panel').addClass('failed-auth');
+        promise = Promise.all([
-        lightdm.authenticate(this.loginView.user.name);
+          U.load('script', 'themes/' + themeName + '/index.js'),
-        //lightdm.start_authentication(this.loginView.user.name);
+          U.load('link', 'themes/' + themeName + '/style.css') ]);
       }
-    },
 
-    render: function() {
+      return promise.then(function() {
-      var prevTimePeriod = this.timePeriod;
+        if (uiView.theme) uiView.theme.unload(uiView);
-      this.checkTimePeriod();
 
-      if (this.timePeriod != prevTimePeriod) {
+        uiView.theme = U.themes[themeName];
-        this.$el.removeClass(prevTimePeriod);
+        uiView.theme.init(uiView);
-        this.$el.addClass(this.timePeriod);
+        return uiView.theme;
-        this.loginView.render();
+      });
-        this.sessionView.render();
-      }
-    },
-
-    checkTimePeriod: function() {
-      var now = new Date();
-      if (now.getHours() >= 21 || now.getHours() < 4) this.timePeriod = 'night';
-      else if (now.getHours() < 12) this.timePeriod = 'morning';
-      else if (now.getHours() < 18) this.timePeriod = 'afternoon';
-      else this.timePeriod = 'evening';
     }
+
   });
 
-  $(document).ready(function() { 
+  $(document).ready(function() { U.uiView = new U.UIView(); });
-    U.uiView = new U.UIView();
-  });
-
-
 
 })();
 

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "lightdm-uestibulum",
+  "version": "1.0.0",
+  "description": "Custom theme for lightdm-webkit2-greeter.",
+  "main": "js/light-uestibulum.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git.jdb-labs.com:jdb/lightdm-uestibulum.git"
+  },
+  "keywords": [
+    "lightdm",
+    "greeter"
+  ],
+  "author": "Jonathan Bernard <jonathan@jdbernard.com>",
+  "license": "MIT",
+  "dependencies": {
+    "backbone": "^1.3.3",
+    "jquery": "^3.1.1"
+  }
+}

themes/jdb/img/hidpi/night.gif

@@ -0,0 +1 @@
+../night.gif

themes/jdb/index.js

@@ -0,0 +1,53 @@
+(function() {
+
+  var U = window.uestibulum;
+
+  function currentTimePeriod() {
+    var now = new Date();
+    if (now.getHours() >= 21 || now.getHours() < 4) return 'night';
+    else if (now.getHours() < 12) return 'morning';
+    else if (now.getHours() < 18) return 'afternoon';
+    else return 'evening';
+  }
+
+  var curTimePeriod;
+  var hidpi = U.config.hidpi;
+
+  var imagesByName = {
+    morning: 'morning.png',
+    afternoon: 'afternoon.png',
+    evening: 'evening.png',
+    night: 'night.gif' };
+
+  var T = {
+  
+    name: 'jdb',
+
+    init: function(uiView) {
+      uiView.$el.addClass('theme-' + uiView.theme.name);
+      curTimePeriod = null; // force the next render to figure out the time period
+    },
+
+    render: function(uiView, manualTimePeriod) {
+      var prevTimePeriod = curTimePeriod;
+      curTimePeriod = manualTimePeriod || currentTimePeriod();
+
+      if (curTimePeriod != prevTimePeriod) {
+        uiView.$el.removeClass(prevTimePeriod);
+        uiView.$el.addClass(curTimePeriod);
+        uiView.loginView.render();
+        uiView.bgImgModel.set('url', 'themes/jdb/img/' +
+          (hidpi ? 'hidpi/' : '') + imagesByName[curTimePeriod])
+      }
+    },
+
+    unload: function(uiView) {
+      uiView.$el.removeClass('theme-' + uiView.theme.name);
+      uiView.$el.removeClass(curTimePeriod);
+    },
+
+    getGreeting: function() { return 'Good ' + curTimePeriod + ', '; }
+
+  };
+  U.themes['jdb'] = T;
+})();

themes/jdb/style.css

@@ -0,0 +1,76 @@
+.theme-jdb {
+  /*&.night {
+    #clock-panel {
+
+    }
+
+    #login-panel {
+      position: absolute;
+      bottom: 2vw;
+      left: 2vw;
+    }
+  }*/ }
+  .theme-jdb #clock-panel {
+    background: rgba(0, 0, 0, 0.3);
+    font-size: 6vw;
+    font-weight: 500;
+    padding: 1vw 2vw;
+    width: 100%;
+    z-index: 1; }
+  .theme-jdb.evening #clock-panel {
+    border-bottom: 2px solid white;
+    text-align: right;
+    position: absolute;
+    right: 0;
+    top: 0; }
+  .theme-jdb.evening #login-panel {
+    position: absolute;
+    bottom: 2vw;
+    left: 1vw; }
+  .theme-jdb.evening #session-panel {
+    position: absolute;
+    bottom: 0.5vw;
+    left: 1vw; }
+  .theme-jdb.morning #clock-panel, .theme-jdb.night #clock-panel, .theme-jdb.afternoon #clock-panel {
+    border-top: 2px solid white;
+    position: absolute;
+    left: 0;
+    bottom: 0; }
+  .theme-jdb.morning #login-panel, .theme-jdb.night #login-panel, .theme-jdb.afternoon #login-panel {
+    position: absolute;
+    bottom: 2vw;
+    left: 20vw; }
+  .theme-jdb.morning #session-panel, .theme-jdb.night #session-panel, .theme-jdb.afternoon #session-panel {
+    position: absolute;
+    bottom: 0.5vw;
+    left: 20vw; }
+  .theme-jdb.morning #clock-panel {
+    text-shadow: 0 0 0.2vw #446688; }
+  .theme-jdb.morning #users:hover #user-display, .theme-jdb.morning #sessions:hover #session-display,
+  .theme-jdb.morning #users-list li:hover, .theme-jdb.morning #sessions-list li.session:hover {
+    color: #0088aa;
+    text-shadow: 0 0 0.5vw black; }
+  .theme-jdb.morning #power-panel {
+    opacity: 0.7; }
+  .theme-jdb.afternoon #clock-panel {
+    text-shadow: 0 0 2vw #448844; }
+  .theme-jdb.afternoon #users:hover #user-display, .theme-jdb.afternoon #sessions:hover #session-display,
+  .theme-jdb.afternoon #users-list li:hover, .theme-jdb.afternoon #sessions-list li.session:hover {
+    color: #00aa00;
+    text-shadow: 0 0 0.5vw black; }
+  .theme-jdb.evening #clock-panel {
+    text-shadow: 0 0 2vw #faaa3b; }
+  .theme-jdb.evening #users:hover #user-display, .theme-jdb.evening #sessions:hover #session-display,
+  .theme-jdb.evening #users-list li:hover, .theme-jdb.evening #sessions-list li.session:hover {
+    color: orange;
+    text-shadow: 0 0 0.5vw black; }
+  .theme-jdb.evening #power-panel {
+    opacity: 0.7; }
+  .theme-jdb.night #clock-panel {
+    text-shadow: 0 0 2vw #884488; }
+  .theme-jdb.night #users:hover #user-display, .theme-jdb.night #sessions:hover #session-display,
+  .theme-jdb.night #users-list li:hover, .theme-jdb.night #sessions-list li.session:hover {
+    color: #8822bb;
+    text-shadow: 0 0 0.2vw black; }
+
+/*# sourceMappingURL=style.css.map */

themes/jdb/style.css.map

@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAKA,UAAW;AA8FT;;;;;;;;;;KAUG;EAtGH,uBAAa;IACX,UAAU,EAAE,kBAAkB;IAC9B,SAAS,EAAE,GAAG;IACd,WAAW,EAAE,GAAG;IAChB,OAAO,EAAE,OAAO;IAChB,KAAK,EAAE,IAAI;IACX,OAAO,EAAE,CAAC;EAIV,+BAAa;IACX,aAAa,EAAE,eAAkB;IACjC,UAAU,EAAE,KAAK;IAEjB,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE,CAAC;IACR,GAAG,EAAE,CAAC;EAGR,+BAAa;IACX,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,GAAG;EAGX,iCAAe;IACb,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,KAAK;IACb,IAAI,EAAE,GAAG;EAKX,iGAAa;IACX,UAAU,EAAE,eAAkB;IAE9B,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,CAAC;IACP,MAAM,EAAE,CAAC;EAGX,iGAAa;IACX,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,IAAI;EAGZ,uGAAe;IACb,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,KAAK;IACb,IAAI,EAAE,IAAI;EAKZ,+BAAa;IAAE,WAAW,EAAE,iBAAiB;EAC7C;6FACsD;IACpD,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,eAAe;EAE9B,+BAAa;IAAE,OAAO,EAAE,GAAG;EAI3B,iCAAa;IAAE,WAAW,EAAE,eAAe;EAC3C;iGACsD;IACpD,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,eAAe;EAK9B,+BAAa;IAAE,WAAW,EAAE,eAAe;EAC3C;6FACsD;IACpD,KAAK,EAAE,MAAM;IACb,WAAW,EAAE,eAAe;EAE9B,+BAAa;IAAE,OAAO,EAAE,GAAG;EAI3B,6BAAa;IAAE,WAAW,EAAE,eAAe;EAC3C;yFACsD;IACpD,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,eAAe",
+"sources": ["style.scss"],
+"names": [],
+"file": "style.css"
+}

themes/jdb/style.scss

@@ -0,0 +1,111 @@
+$colorFG: white;
+$colorBG: black;
+$colorAccent: orange;
+
+
+.theme-jdb {
+
+  #clock-panel {
+    background: rgba(0, 0, 0, 0.3);
+    font-size: 6vw;
+    font-weight: 500;
+    padding: 1vw 2vw;
+    width: 100%;
+    z-index: 1;
+  }
+
+  &.evening {
+    #clock-panel {
+      border-bottom: 2px solid $colorFG;
+      text-align: right;
+
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+
+    #login-panel {
+      position: absolute;
+      bottom: 2vw;
+      left: 1vw;
+    }
+
+    #session-panel {
+      position: absolute;
+      bottom: 0.5vw;
+      left: 1vw;
+    }
+  }
+
+  &.morning, &.night, &.afternoon {
+    #clock-panel {
+      border-top: 2px solid $colorFG;
+
+      position: absolute;
+      left: 0;
+      bottom: 0;
+    }
+
+    #login-panel {
+      position: absolute;
+      bottom: 2vw;
+      left: 20vw;
+    }
+
+    #session-panel {
+      position: absolute;
+      bottom: 0.5vw;
+      left: 20vw;
+    }
+  }
+
+  &.morning {
+    #clock-panel { text-shadow: 0 0 0.2vw #446688; }
+    #users:hover #user-display, #sessions:hover #session-display,
+    #users-list li:hover, #sessions-list li.session:hover {
+      color: #0088aa;
+      text-shadow: 0 0 0.5vw black;
+    }
+    #power-panel { opacity: 0.7; }
+  }
+
+  &.afternoon {
+    #clock-panel { text-shadow: 0 0 2vw #448844; }
+    #users:hover #user-display, #sessions:hover #session-display,
+    #users-list li:hover, #sessions-list li.session:hover {
+      color: #00aa00;
+      text-shadow: 0 0 0.5vw black;
+    }
+  }
+
+  &.evening {
+    #clock-panel { text-shadow: 0 0 2vw #faaa3b; }
+    #users:hover #user-display, #sessions:hover #session-display,
+    #users-list li:hover, #sessions-list li.session:hover {
+      color: orange;
+      text-shadow: 0 0 0.5vw black;
+    }
+    #power-panel { opacity: 0.7; }
+  }
+
+  &.night {
+    #clock-panel { text-shadow: 0 0 2vw #884488; }
+    #users:hover #user-display, #sessions:hover #session-display,
+    #users-list li:hover, #sessions-list li.session:hover {
+      color: #8822bb;
+      text-shadow: 0 0 0.2vw black;
+    }
+  }
+
+  /*&.night {
+    #clock-panel {
+
+    }
+
+    #login-panel {
+      position: absolute;
+      bottom: 2vw;
+      left: 2vw;
+    }
+  }*/
+}

themes/minimal/fonts/OFL.txt

@@ -0,0 +1,94 @@
+Copyright (c) 2010, 2011 Vernon Adams (vern@newtypography.co.uk),
+with Reserved Font Name "Coda" and "Coda Caption".
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

themes/minimal/index.js

@@ -0,0 +1,29 @@
+(function() {
+
+  var U = window.uestibulum;
+
+  var T = {
+  
+    name: 'minimal',
+
+    init: function(uiView) {
+      // Logic to setup the theme
+      uiView.$el.addClass('theme-' + uiView.theme.name);
+    },
+
+    render: function(uiView) {
+      // custom render logic
+      uiView.loginView.render();
+      uiView.$('input[name="pwd"]').focus();
+    },
+
+    unload: function(uiView) {
+      // Logic to tear down the theme
+      uiView.$el.removeClass('theme-' + uiView.theme.name);
+    },
+
+    getGreeting: function() { return ''; }
+
+  };
+  U.themes['minimal'] = T;
+})();

themes/minimal/style.css

@@ -0,0 +1,55 @@
+@keyframes lightthrob {
+  from {
+    opacity: 1; }
+  to {
+    opacity: 0.5; } }
+@font-face {
+  font-family: Coda;
+  src: local("Coda"), url("fonts/Coda-Regular.ttf"); }
+#login-panel {
+  font-family: 'Coda', mono;
+  position: absolute;
+  left: 0;
+  top: calc(50% - 1rem);
+  width: 100%;
+  animation: alternate ease-in infinite 2s lightthrob; }
+  #login-panel * {
+    box-sizing: border-box; }
+  #login-panel #greeting {
+    display: none; }
+  #login-panel > h1 {
+    position: absolute;
+    text-align: right;
+    width: calc(50% - 1rem); }
+  #login-panel #user-display {
+    text-transform: lowercase; }
+  #login-panel .fa-user-circle {
+    display: none; }
+  #login-panel input[type=password] {
+    width: calc(50% - 1rem);
+    position: absolute;
+    right: 0;
+    border: none; }
+    #login-panel input[type=password]::placeholder {
+      opacity: 0; }
+
+#power-panel, #session-panel {
+  opacity: 0;
+  transition: opacity 1s; }
+  #power-panel:hover, #session-panel:hover {
+    opacity: 1; }
+
+#clock-panel {
+  visibility: hidden; }
+
+#ui-container {
+  background-color: black; }
+
+#ui-container.white {
+  background-color: white; }
+  #ui-container.white #login-panel {
+    color: black; }
+  #ui-container.white input[type=password] {
+    color: black; }
+
+/*# sourceMappingURL=style.css.map */

themes/minimal/style.css.map

@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAAA,qBAGC;EAFC,IAAK;IAAE,OAAO,EAAE,CAAC;EACjB,EAAG;IAAE,OAAO,EAAE,GAAG;AAGnB,UAGC;EAFC,WAAW,EAAE,IAAI;EACjB,GAAG,EAAE,4CAA4C;AAGnD,YAAa;EACX,WAAW,EAAE,YAAY;EACzB,QAAQ,EAAE,QAAQ;EAClB,IAAI,EAAE,CAAC;EACP,GAAG,EAAE,gBAAgB;EACrB,KAAK,EAAE,IAAI;EACX,SAAS,EAAE,wCAAwC;EAEnD,cAAE;IAAE,UAAU,EAAE,UAAU;EAC1B,sBAAU;IAAE,OAAO,EAAE,IAAI;EAEzB,iBAAO;IACL,QAAQ,EAAE,QAAQ;IAClB,UAAU,EAAE,KAAK;IACjB,KAAK,EAAE,gBAAgB;EAGzB,0BAAc;IAAE,cAAc,EAAE,SAAS;EACzC,4BAAgB;IAAE,OAAO,EAAE,IAAI;EAE/B,iCAAqB;IACnB,KAAK,EAAE,gBAAgB;IACvB,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,IAAI;IAEZ,8CAAe;MAAE,OAAO,EAAE,CAAC;;AAI/B,4BAA6B;EAC3B,OAAO,EAAE,CAAC;EACV,UAAU,EAAE,UAAU;EAEtB,wCAAQ;IAAE,OAAO,EAAE,CAAC;;AAGtB,YAAa;EAAE,UAAU,EAAE,MAAM;;AAEjC,aAAc;EACZ,gBAAgB,EAAE,KAAK;;AAGzB,mBAAoB;EAElB,gBAAgB,EAAE,KAAK;EAEvB,gCAAa;IAAE,KAAK,EAAE,KAAK;EAC3B,wCAAqB;IAAE,KAAK,EAAE,KAAK",
+"sources": ["style.scss"],
+"names": [],
+"file": "style.css"
+}

themes/minimal/style.scss

@@ -0,0 +1,60 @@
+@keyframes lightthrob {
+  from { opacity: 1; }
+  to { opacity: 0.5; }
+}
+
+@font-face {
+  font-family: Coda;
+  src: local("Coda"), url("fonts/Coda-Regular.ttf");
+}
+
+#login-panel { 
+  font-family: 'Coda', mono;
+  position: absolute;
+  left: 0;
+  top: calc(50% - 1rem);
+  width: 100%;
+  animation: alternate ease-in infinite 2s lightthrob;
+
+  * { box-sizing: border-box; }
+  #greeting { display: none; }
+
+  & > h1 {
+    position: absolute;
+    text-align: right;
+    width: calc(50% - 1rem);
+  }
+
+  #user-display { text-transform: lowercase; }
+  .fa-user-circle { display: none; }
+
+  input[type=password] {
+    width: calc(50% - 1rem);
+    position: absolute;
+    right: 0;
+    border: none;
+
+    &::placeholder { opacity: 0; }
+  }
+}
+
+#power-panel, #session-panel {
+  opacity: 0;
+  transition: opacity 1s;
+
+  &:hover { opacity: 1; }
+}
+
+#clock-panel { visibility: hidden; }
+
+#ui-container {
+  background-color: black;
+}
+
+#ui-container.white {
+
+  background-color: white;
+
+  #login-panel { color: black; }
+  input[type=password] { color: black; }
+}

themes/music/index.js

@@ -0,0 +1,104 @@
+(function() {
+
+  var U = window.uestibulum;
+
+  function guessEvent() {
+    var now = new Date();
+
+    var day = now.getDay();
+    var hour = now.getHours();
+
+    switch (day) {
+      // Sunday
+      case 0:
+             if (hour >=  8 && hour < 10) return 'rehearsal';
+        else if (hour >= 10 && hour < 13) return 'service';
+        else if (hour >= 13 && hour < 15) return 'mixing';
+        else if (hour >= 15 && hour < 18) return 'rehearsal';
+        else if (hour >= 18 && hour < 21) return 'service';
+        break;
+
+      // Wednesday
+      case 3:
+             if (hour == 18) return 'rehearsal';
+        else if (hour >= 19 && hour < 21) return 'service';
+        break;
+ 
+      // Tuesday, Thursday
+      case 2: case 4:
+        if (hour >= 19 && hour < 21) return 'rehearsal';
+        break;
+
+      // Monday, Friday, Saturday
+      default:
+    }
+
+    return 'other';
+  }
+
+  function randomInt(max) {
+    max = Math.floor(max);
+    return Math.floor(Math.random() * max);
+  }
+
+  var curEvent;
+  var curFace;
+  var hidpi = U.config.hidpi;
+
+  var facesForEvent = {
+    mixing: ['m1', 'm2', 'm3'],
+    rehearsal: ['r1', 'r2'],
+    service: ['s1', 's2'],
+    other: ['o1', 'o2', 'o3']
+  };
+
+  var greetingForEvent = {
+    mixing: 'Get mixing!',
+    rehearsal: 'Practice makes the master.',
+    service: 'Worship the Lord!',
+    other: 'Where words fail, music speaks.'
+  };
+
+  // Unneeded at present because all images are named after the faces:
+  // <face-name>.jpg
+  //var imagesForFace = { };
+
+  var T = {
+  
+    name: 'music',
+
+    init: function(uiView) {
+      uiView.$el.addClass('theme-' + uiView.theme.name);
+      curEvent = null;  // force the first render to guess the event
+    },
+
+    render: function(uiView, manualEvent, manualFaceIdx) {
+      var prevEvent = curEvent;
+      var prevFace = curFace;
+      curEvent = manualEvent || guessEvent();
+
+      if (curEvent != prevEvent) {
+
+        // Get a face at random for this 
+        var evFaces = facesForEvent[curEvent];
+        var faceIdx = manualFaceIdx || randomInt(evFaces.length);
+        curFace = evFaces[faceIdx];
+
+        uiView.$el.removeClass(prevFace);
+        uiView.$el.addClass(curFace);
+        uiView.loginView.render();
+        uiView.bgImgModel.set('url', 'themes/music/img/' +
+          (hidpi ? 'hidpi/' : '') + curFace + '.jpg')
+      }
+    },
+
+    unload: function(uiView) {
+      uiView.$el.removeClass('theme-' + uiView.theme.name);
+      uiView.$el.removeClass(curFace);
+    },
+
+    getGreeting: function() { return greetingForEvent[curEvent || 'other']; }
+
+  };
+  U.themes['music'] = T;
+})();

themes/music/style.css

@@ -0,0 +1,35 @@
+.theme-music.o3 {
+  text-shadow: 0 0 1vw black; }
+  .theme-music.o3 #clock-panel {
+    position: absolute;
+    bottom: 21.5vw;
+    font-size: 5vw;
+    left: 9vw;
+    transform: rotateY(48deg) rotateX(-33deg) rotateZ(-22deg) translateX(-10vw); }
+  .theme-music.o3 #login-panel #greeting {
+    position: absolute;
+    left: 35vw;
+    bottom: 30.3vw;
+    font-size: 3vw;
+    transform-origin: left;
+    transform: rotateY(48deg) rotateX(-33deg) rotateZ(-22deg) translateX(-25vw); }
+  .theme-music.o3 #login-panel #users-list li.user {
+    display: inline-block; }
+  .theme-music.o3 #login-panel #users {
+    transform: rotateY(46deg) rotateX(-33deg) rotateZ(-32deg) translateX(6vw) skewX(-13deg);
+    position: absolute;
+    bottom: 6vw;
+    left: 6vw;
+    font-size: 4vw; }
+  .theme-music.o3 #login-panel input[type=password] {
+    transform: rotateY(48deg) rotateX(-33deg) rotateZ(-31.5deg) translateX(32vw) skewX(-13deg);
+    position: absolute;
+    bottom: 2.2vw;
+    left: 6vw;
+    font-size: 3vw !important;
+    transform-origin: left;
+    /* color: lightgrey; */
+    background: rgba(255, 255, 255, 0.3) !important;
+    box-shadow: 0 0 1vw black; }
+
+/*# sourceMappingURL=style.css.map */

themes/music/style.css.map

@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAME,eAAK;EAEH,WAAW,EAAE,aAAa;EAE1B,4BAAa;IACX,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,GAAG;IACd,IAAI,EAAE,GAAG;IACT,SAAS,EAAE,gEAAgE;EAK9E,sCAAU;IACT,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,IAAI;IACV,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,GAAG;IACd,gBAAgB,EAAE,IAAI;IACtB,SAAS,EAAE,gEAAgE;EAG5E,gDAAoB;IAAE,OAAO,EAAE,YAAY;EAE3C,mCAAO;IACL,SAAS,EAAE,4EAA4E;IACvF,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,GAAG;IACT,SAAS,EAAE,GAAG;EAGhB,iDAAqB;IACnB,SAAS,EAAE,+EAA+E;IAC1F,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,KAAK;IACb,IAAI,EAAE,GAAG;IACT,SAAS,EAAE,cAAc;IACzB,gBAAgB,EAAE,IAAI;IACtB,uBAAuB;IACvB,UAAU,EAAE,mCAAmC;IAC/C,UAAU,EAAE,aAAa",
+"sources": ["style.scss"],
+"names": [],
+"file": "style.css"
+}

themes/music/style.scss

@@ -0,0 +1,55 @@
+$colorFG: white;
+$colorBG: black;
+$colorAccent: orange;
+
+
+.theme-music {
+  &.o3 {
+
+    text-shadow: 0 0 1vw black;
+
+    #clock-panel {
+      position: absolute;
+      bottom: 21.5vw;
+      font-size: 5vw;
+      left: 9vw;
+      transform: rotateY(48deg) rotateX(-33deg) rotateZ(-22deg) translateX(-10vw);
+    }
+
+		#login-panel {
+
+			#greeting {
+				position: absolute;
+				left: 35vw;
+				bottom: 30.3vw;
+				font-size: 3vw;
+				transform-origin: left;
+				transform: rotateY(48deg) rotateX(-33deg) rotateZ(-22deg) translateX(-25vw);
+			}
+
+			#users-list li.user { display: inline-block; }
+
+			#users {
+					transform: rotateY(46deg) rotateX(-33deg) rotateZ(-32deg) translateX(6vw) skewX(-13deg);
+					position: absolute;
+					bottom: 6vw;
+					left: 6vw;
+					font-size: 4vw;
+			}
+
+			input[type=password] {
+					transform: rotateY(48deg) rotateX(-33deg) rotateZ(-31.5deg) translateX(32vw) skewX(-13deg);
+					position: absolute;
+					bottom: 2.2vw;
+					left: 6vw;
+					font-size: 3vw !important;
+					transform-origin: left;
+					/* color: lightgrey; */
+					background: rgba(255, 255, 255, 0.3) !important;
+					box-shadow: 0 0 1vw black;
+			}
+
+			#checking-credentials {}
+		}
+	}
+}