More work towards music theme.

css/lightdm-uestibulum.css

@@ -63,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] {
@@ -129,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; }
@@ -138,11 +147,6 @@ body {
 .lock-screen #session-panel {
   display: none !important; }
 
-@keyframes throb {
-  from {
-    opacity: 1; }
-  to {
-    opacity: 0; } }
 .throb {
   animation: alternate infinite 2s throb; }
 

css/lightdm-uestibulum.css.map

@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "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",
+"mappings": "AAEA,UAGC;EAFC,WAAW,EAAE,IAAI;EACjB,GAAG,EAAE,6CAA6C;AAGpD,CAAE;EAAE,MAAM,EAAE,CAAC;EAAE,OAAO,EAAE,CAAC;;AAEzB,EAAG;EAAE,SAAS,EAAE,KAAK;;AACrB,EAAG;EAAE,SAAS,EAAE,GAAG;;AAEnB,IAAK;EACH,KAAK,EAAE,KAAK;EACZ,WAAW,EAAE,IAAI;;AAGnB,iBAAkB;EAChB,OAAO,EAAE,CAAC;EACV,OAAO,EAAE,KAAK;EACd,UAAU,EAAE,EAAE;EAEd,QAAQ,EAAE,KAAK;EACf,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,CAAC;EACT,KAAK,EAAE,CAAC;EACR,OAAO,EAAE,EAAE;;AAGb,aAAc;EACZ,QAAQ,EAAE,KAAK;EACf,GAAG,EAAE,CAAC;EACN,MAAM,EAAE,CAAC;EACT,IAAI,EAAE,CAAC;EACP,KAAK,EAAE,CAAC;EACR,OAAO,EAAE,CAAC;;AAGZ,YAAa;EACX,UAAU,EAAE,kBAAkB;EAC9B,UAAU,EAAE,sCAAsC;EAClD,MAAM,EAAE,OAAO;EACf,OAAO,EAAE,GAAG;EAEZ,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,GAAG;EACX,KAAK,EAAE,GAAG;EACV,OAAO,EAAE,GAAG;EAEZ,2BAAe;IACb,aAAa,EAAE,IAAI;IACnB,OAAO,EAAE,KAAK;IACd,UAAU,EAAE,EAAE;IACd,OAAO,EAAE,IAAI;IAEb,8BAAG;MACD,UAAU,EAAE,IAAI;MAEhB,iCAAG;QACD,aAAa,EAAE,GAAG;QAClB,SAAS,EAAE,KAAK;QAEhB,mCAAE;UAAE,YAAY,EAAE,KAAK;QAEvB,4CAAa;UAAE,aAAa,EAAE,CAAC;EAMrC,mBAAS;IACP,MAAM,EAAE,GAAG;IACX,kCAAe;MAAE,OAAO,EAAE,KAAK;IAC/B,iCAAc;MAAE,OAAO,EAAE,IAAI;;AAIjC,YAAa;EAEX,OAAO,EAAE,CAAC;EAEV,iCAAqB;IACnB,UAAU,EAAE,IAAI;IAChB,MAAM,EAAE,IAAI;IACZ,aAAa,EAAE,eAAe;IAC9B,KAAK,EAAE,KAAK;IACZ,SAAS,EAAE,GAAG;IACd,UAAU,EAAE,KAAK;IACjB,OAAO,EAAE,CAAC;IACV,UAAU,EAAE,IAAI;IAChB,KAAK,EAAE,IAAI;IAEX,wCAAS;MAAE,OAAO,EAAE,GAAG;EAGzB,mBAAO;IACL,MAAM,EAAE,OAAO;IACf,OAAO,EAAE,YAAY;IACrB,QAAQ,EAAE,QAAQ;IAElB,qBAAE;MACE,OAAO,EAAE,CAAC;MACV,UAAU,EAAE,IAAI;IAGpB,2BAAU;MAAE,OAAO,EAAE,CAAC;IAEtB,+BAAY;MACV,UAAU,EAAE,IAAI;MAChB,OAAO,EAAE,IAAI;IAIb,gFAAiB;MAAE,OAAO,EAAE,IAAI;IAChC,2CAAY;MAAE,OAAO,EAAE,YAAY;EAIvC,sBAAU;IACR,KAAK,EAAE,GAAG;IACV,OAAO,EAAE,CAAC;IACV,UAAU,EAAE,IAAI;IAEhB,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,IAAI;;AAId,cAAe;EACb,OAAO,EAAE,GAAG;EACZ,UAAU,EAAE,IAAI;EAChB,OAAO,EAAE,CAAC;EACV,oBAAQ;IAAE,OAAO,EAAE,CAAC;EAEpB,gCAAkB;IAAE,OAAO,EAAE,YAAY;;AAK3C,SAAU;EACR,MAAM,EAAE,OAAO;EACf,OAAO,EAAE,YAAY;EACrB,QAAQ,EAAE,QAAQ;EAElB,wBAAe;IACb,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,IAAI;EAIb,yCAAiB;IAAE,OAAO,EAAE,IAAI;EAChC,uCAAe;IAAE,OAAO,EAAE,YAAY;;AAI1C,gBAGC;EAFC,IAAK;IAAE,OAAO,EAAE,CAAC;EACjB,EAAG;IAAE,OAAO,EAAE,CAAC;AAGjB,qBAAsB;EACpB,OAAO,EAAE,CAAC;EACV,+EAAc;IAAE,SAAS,EAAE,2BAA2B;EACtD,yBAAI;IAAE,eAAe,EAAE,KAAK;EAC5B,yBAAI;IAAE,eAAe,EAAE,KAAK;;AAG9B,2CAA4C;EAAE,OAAO,EAAE,CAAC;;AAGtD,iCAAqB;EACnB,KAAK,EAAE,GAAG;EACV,YAAY,EAAE,cAAc;AAE9B,sBAAU;EAAE,OAAO,EAAE,YAAY;;AAIjC,2BAAe;EAAE,OAAO,EAAE,eAAe;;AAG3C,MAAO;EAAE,SAAS,EAAE,2BAA2B",
 "sources": ["lightdm-uestibulum.scss"],
 "names": [],
 "file": "lightdm-uestibulum.css"

css/lightdm-uestibulum.scss

@@ -75,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;
@@ -162,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;
@@ -174,9 +179,4 @@ body {
   #session-panel { display: none !important; }
 }
 
-@keyframes throb {
-  from { opacity: 1; }
-  to { opacity: 0; }
-}
-
 .throb { animation: alternate infinite 2s throb; }

index.html

@@ -25,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>
@@ -34,8 +34,8 @@
         </h1>
         <input type=password name=pwd placeholder='password...'>
         <i class='fa fa-exclamation-circle' id=fail-msg></i>
-        <div id=checking-credentials>checking credentials!
+        <div id=checking-credentials>checking credentials
-          <span id=c1>.</span><span id=c2>.</span><span id=c3>.</span>
+          <span class=c1>.</span><span class=c2>.</span><span class=c3>.</span>
         </div>
       </div>
 

js/lightdm-uestibulum.js

@@ -1,7 +1,7 @@
 (function() {
 
   var U = window.uestibulum = {
-    config: { theme: 'jdb', hidpi: true },
+    config: { fullNames: false, hidpi: true, theme: 'music' },
     themes: {}
   };
 
@@ -116,23 +116,26 @@
 
     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);
-        this.$el.removeClass('checking');
         lightdm.login(this.user, this.sessionView.session.key);
       }
       else {
         this.$el.addClass('failed-auth');
-        this.$el.removeClass('checking');
+        lightdm.authenticate(this.user.name);
-        lightdm.authenticate(this.loginView.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() {
@@ -187,6 +190,7 @@
       //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());
     }
@@ -253,7 +257,7 @@
 
     render: function() { this.theme.render(this); },
 
-    getGreeting: function() { this.theme.getGreeting(); },
+    getGreeting: function() { return this.theme.getGreeting(); },
 
     setTheme: function(themeName) {
       var promise;

themes/jdb/index.js

@@ -25,6 +25,7 @@
 
     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) {
@@ -45,7 +46,7 @@
       uiView.$el.removeClass(curTimePeriod);
     },
 
-    getGreeting: function() { return 'Good ' + curTimePeriod; }
+    getGreeting: function() { return 'Good ' + curTimePeriod + ', '; }
 
   };
   U.themes['jdb'] = T;

themes/jdb/style.css

@@ -10,6 +10,13 @@
       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;

themes/jdb/style.css.map

@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "AAKA,UAAW;AAqFT;;;;;;;;;;KAUG;EA5FD,+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",
+"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

@@ -5,6 +5,15 @@ $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;

themes/music/index.js

@@ -36,14 +36,32 @@
     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 imagesByName = {
+  var facesForEvent = {
-    mixing: [],
+    mixing: ['m1', 'm2', 'm3'],
-    rehearsal: [],
+    rehearsal: ['r1', 'r2'],
-    service: [],
+    service: ['s1', 's2'],
-    other: [] }
+    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 = {
   
@@ -51,28 +69,36 @@
 
     init: function(uiView) {
       uiView.$el.addClass('theme-' + uiView.theme.name);
+      curEvent = null;  // force the first render to guess the event
     },
 
-    render: function(uiView, manualEvent) {
+    render: function(uiView, manualEvent, manualFaceIdx) {
       var prevEvent = curEvent;
+      var prevFace = curFace;
       curEvent = manualEvent || guessEvent();
 
       if (curEvent != prevEvent) {
-        uiView.$el.removeClass(prevEvent);
+
-        uiView.$el.addClass(curEvent);
+        // 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/' : '') + imagesByName[curEvent])
+          (hidpi ? 'hidpi/' : '') + curFace + '.jpg')
       }
     },
 
     unload: function(uiView) {
       uiView.$el.removeClass('theme-' + uiView.theme.name);
-      uiView.$el.removeClass(curEvent);
+      uiView.$el.removeClass(curFace);
     },
 
-    getGreeting: function() { return 'Good ' + curEvent; }
+    getGreeting: function() { return greetingForEvent[curEvent || 'other']; }
 
   };
-  U.themes['jdb'] = T;
+  U.themes['music'] = T;
 })();

themes/music/style.css

@@ -1,3 +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

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

themes/music/style.scss

@@ -4,5 +4,52 @@ $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 {}
+		}
+	}
 }