[更新]:ボタンの位置調整フェードアウトイベント追加

diff --git a/css/theme.css b/css/theme.css
index 9884479..446ca78 100644 (file)
--- a/css/theme.css
+++ b/css/theme.css
@@ -9,8 +9,20 @@
 
 }
 .gaussfade-out{
-  transition: ease 3s;
-  filter: blur(100px);
+  animation: rotation 2s ease 0s 1 alternate none running;
+}
+@keyframes rotation {
+  0% {
+    filter: blur(0px);
+  }
+
+  50% {
+    filter: blur(100px);
+  }
+
+  100% {
+    filter: blur(0px);
+  }
 }
 body {
   display: flex;
@@ -44,10 +56,21 @@ main {
 input {
   color: white;
 }
+
 .caret {
   fill: grey !important;
 }
+.row{
+  margin: 0 auto 30px;
+}
+.col.right{
+  height: 25px;
+}
+.col.right .row{
+  margin: 0;
+}
 .power-button {
+  vertical-align: bottom;
   fill: #bdc3c7;
 }
 .power-button:hover {
@@ -57,6 +80,9 @@ input {
   fill: white;
   transform: scale(0.95);
 }
+.input-field.col.s2.offset-s1{
+  margin-bottom: 20px;
+}
 div#console {
   z-index: 9999;
   position: absolute;

diff --git a/js/theme.js b/js/theme.js
index 1496ec7..ffd6691 100644 (file)
--- a/js/theme.js
+++ b/js/theme.js
@@ -52,6 +52,7 @@ $(greeter).on("ready", function(e) {
                and 'deny' will be emitted on failure */
                if (e.keyCode == 13) {
                        if(!$("#inputPassword").val() == ""){
+                               $("body").addClass("gaussfade-out");
                                let username = $user.children("option:selected").val();
                                let pass = $password.val();
                                greeter.auth(username, pass);
@@ -62,7 +63,6 @@ $(greeter).on("ready", function(e) {
 
        // when the user is authenticated, do a transition and login
        $(greeter).on("grant", () => {
-               $("body").addClass("gaussfade-out");
                let session_key = $session.children("option:selected").val();
 
                $cover.fadeIn("slow", () => greeter.login(session_key));
@@ -71,6 +71,7 @@ $(greeter).on("ready", function(e) {
                // inform the user that the credentials are invalid
                $password.removeClass("valid").addClass("invalid");
                $password.val("").prop("placeholder", "Incorrect Password");
+               setTimeout('$("body").removeClass("gaussfade-out")', 2000);
        });
 
        $(greeter.plugins.SplashScreen).on("active", function() {