Home Explore Help
Sign In
gregory
/
ElectronMCLauncher
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Making error overlay more generic, WIP

Daniel Scalzi 7 years ago
parent
5c7e0c3c8a
commit
c6f9121806
2 changed files with 74 additions and 0 deletions
Unified View Show Diff Stats
  1. 4 0
      app/app.ejs
  2. 70 0
      app/overlay.ejs

+ 4 - 0
app/app.ejs
View File 

@@ -14,6 +14,9 @@
 
             height: calc(100% - 22px);
 
             height: calc(100% - 22px);
 
             background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
 
             background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
 
         }
 
         }
 
+        #main[overlay] {
 
+            filter: blur(3px) contrast(0.9) brightness(1.0);
 
+        }
 
     </style>
 
     </style>
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
@@ -23,5 +26,6 @@
 
         <% include login.ejs %>
 
         <% include login.ejs %>
 
         <% include landing.ejs %>
 
         <% include landing.ejs %>
 
     </div>
 
     </div>
 
+    <% include overlay.ejs %>
 
 </body>
 
 </body>
 
 </html>
 
 </html>

+ 70 - 0
app/overlay.ejs
View File 

@@ -0,0 +1,70 @@
 
+<style type="text/css">
 
+
 
+    #overlayContainer {
 
+        position: absolute;
 
+        top: 22px;
 
+        display: flex;
 
+        align-items: center;
 
+        justify-content: center;
 
+        width: 100%;
 
+        height: calc(100% - 22px);
 
+        background: rgba(0, 0, 0, 0.50);
 
+    }
 
+
 
+    #overlayContent {
 
+        position: relative;
 
+        display: flex;
 
+        flex-direction: column;
 
+        align-items: center;
 
+        justify-content: space-between;
 
+        width: 300px;
 
+        height: 35%;
 
+        box-sizing: border-box;
 
+        padding: 15px 0px;
 
+        /* background-color: #424242; */
 
+        text-align: center;
 
+    }
 
+
 
+    #overlayTitle {
 
+        font-family: 'Avenir Medium';
 
+        font-size: 20px;
 
+        color: #fff;
 
+        font-weight: bold;
 
+        letter-spacing: 1px;
 
+    }
 
+
 
+    #overlayDesc {
 
+        font-family: 'Avenir Book';
 
+        font-size: 12px;
 
+        color: #fff;
 
+        font-weight: bold;
 
+    }
 
+
 
+    #overlayAcknowledge {
 
+        background: none;
 
+        border: 1px solid #ffffff;
 
+        color: white;
 
+        font-family: 'Avenir Medium';
 
+        font-weight: bold;
 
+        border-radius: 2px;
 
+        width: 75px;
 
+        cursor: pointer;
 
+        transition: 0.25s ease;
 
+    }
 
+    #overlayAcknowledge:hover,
 
+    #overlayAcknowledge:focus {
 
+        box-shadow: 0px 0px 10px 0px #fff;
 
+        outline: none;
 
+    }
 
+    #overlayAcknowledge:active {
 
+        border-color: rgba(255, 255, 255, 0.75);
 
+        color: rgba(255, 255, 255, 0.75);
 
+    }
 
+</style>
 
+<div id="overlayContainer" style="display: none;">
 
+    <div id="overlayContent">
 
+        <span id="overlayTitle">LOGIN FAILED:<br>INVALID CREDENTIALS</span>
 
+        <span id="overlayDesc">Either the email or password you supplied is invalid. Please ensure everything is correct and try again.</span>
 
+        <button id="overlayAcknowledge">Try Again</button>
 
+    </div>
 
+</div>