diff options
author | TrueKuehli <rctcoaster2000@hotmail.de> | 2018-09-30 16:04:18 +0200 |
---|---|---|
committer | TrueKuehli <rctcoaster2000@hotmail.de> | 2018-09-30 16:04:18 +0200 |
commit | c0a4272fcc15da322b3b63fb0a3e211e786504e0 (patch) | |
tree | 8c2445b34d0a69e59b36e2b71e01820f0316669f /WebInterface | |
parent | f97f25ea54a0f888d2195d6868346854a2a005e0 (diff) |
Split up SASS into multiple files
This will make adding pages much more easy, as some elements can be reused.
Diffstat (limited to 'WebInterface')
15 files changed, 444 insertions, 464 deletions
diff --git a/WebInterface/NodeJSServer/dist/chat.js b/WebInterface/NodeJSServer/dist/chat.js deleted file mode 100644 index e9baff1..0000000 --- a/WebInterface/NodeJSServer/dist/chat.js +++ /dev/null @@ -1,34 +0,0 @@ -"use strict"; - -var connection = new signalR.HubConnectionBuilder().withUrl("https://192.168.2.58:5001/chatHub").build(); - -connection.on("ReceiveMessage", function (user, message) { - var msg = message.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"); - var encodedMsg = user + " says " + msg; - var li = document.createElement("li"); - li.textContent = encodedMsg; - document.getElementById("messagesList").appendChild(li); -}); - -connection.start().catch(function (err) { - return console.error(err.toString()); -}); - -document.getElementById("loginButton").addEventListener("click", function (event) { - var group = document.getElementById("userInput").value; - var password = document.getElementById("messageInput").value; - connection.invoke("Login", group, password).catch(function (err) { - return console.error(err.toString()); - }); - event.preventDefault(); -}); - -document.getElementById("sendButton").addEventListener("click", function (event) { - var user = document.getElementById("userInput").value; - var message = document.getElementById("messageInput").value; - var group = "TheCrew"; - connection.invoke("SendMessage", user, message).catch(function (err) { - return console.error(err.toString()); - }); - event.preventDefault(); -});
\ No newline at end of file diff --git a/WebInterface/NodeJSServer/dist/index.css b/WebInterface/NodeJSServer/dist/index.css deleted file mode 100644 index 21b5801..0000000 --- a/WebInterface/NodeJSServer/dist/index.css +++ /dev/null @@ -1 +0,0 @@ -html,body{height:100vh;margin:0;padding:0;font-family:'Roboto', sans-serif;font-display:swap;overflow:hidden;background-color:#212121;color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background-color:#546e7a;position:relative}.btn{border:none;border-radius:4px;padding:8px;margin:0;font-size:1rem;font-family:'Roboto Condensed', sans-serif;font-weight:bold;display:inline-block;background-color:#546e7a;color:#fff;text-transform:uppercase;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);cursor:pointer;letter-spacing:0.25rem;background-position:center;-webkit-transition:background 800ms ease, color 200ms ease, -webkit-box-shadow 100ms ease;transition:background 800ms ease, color 200ms ease, -webkit-box-shadow 100ms ease;transition:background 800ms ease, box-shadow 100ms ease, color 200ms ease;transition:background 800ms ease, box-shadow 100ms ease, color 200ms ease, -webkit-box-shadow 100ms ease}.btn:hover{background:#29434e radial-gradient(circle, transparent 1%, #29434e 1%) center/15000%;-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}.btn:active{background-color:#819ca9;background-size:100%;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12);box-shadow:0 1px 3px rgba(0,0,0,0.12);-webkit-transition:background 0s, -webkit-box-shadow 0s;transition:background 0s, -webkit-box-shadow 0s;transition:background 0s, box-shadow 0s;transition:background 0s, box-shadow 0s, -webkit-box-shadow 0s}.btn:disabled{color:#ffffff61;background:#546e7a61;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:background 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease;transition:background 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease;transition:background 200ms ease, box-shadow 200ms ease, color 200ms ease;transition:background 200ms ease, box-shadow 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease}.text-btn{padding:8px;margin:0;font-size:1rem;font-family:'Roboto Condensed', sans-serif;font-weight:bold;display:inline-block;color:#fff;background-color:rgba(0,0,0,0);text-transform:uppercase;-webkit-box-shadow:none;box-shadow:none;background-position:center;-webkit-transition:background 800ms ease, color 200ms ease, -webkit-box-shadow 100ms ease;transition:background 800ms ease, color 200ms ease, -webkit-box-shadow 100ms ease;transition:background 800ms ease, box-shadow 100ms ease, color 200ms ease;transition:background 800ms ease, box-shadow 100ms ease, color 200ms ease, -webkit-box-shadow 100ms ease}.text-btn:hover{background:#29434e61 radial-gradient(circle, transparent 1%, #29434e61 1%) center/15000%;-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}.text-btn:active{background-color:#819ca9;background-size:100%;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:background 0s, -webkit-box-shadow 0s;transition:background 0s, -webkit-box-shadow 0s;transition:background 0s, box-shadow 0s;transition:background 0s, box-shadow 0s, -webkit-box-shadow 0s}.text-btn:disabled{background:rgba(0,0,0,0);color:#ffffff61;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:background 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease;transition:background 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease;transition:background 200ms ease, box-shadow 200ms ease, color 200ms ease;transition:background 200ms ease, box-shadow 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease}.backdrop{background-color:#546e7a;color:#fff;font-size:1rem}.backdrop .header-bar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media (max-height: 550px){.backdrop .header-bar{margin-top:0.125rem}}.backdrop .header-bar .menu-icon{background-image:url("./ressources/menu.png");background-position:center;background-repeat:no-repeat;width:36px;height:36px;padding:4px;margin:1rem;display:inline-block;border:none;border-radius:32px;-webkit-transition:background-color 100ms ease;transition:background-color 100ms ease}@media (max-height: 550px){.backdrop .header-bar .menu-icon{padding:0;margin:0.125rem}}.backdrop .header-bar .menu-icon:hover{background-color:#29434e}.backdrop .header-bar .menu-icon.open{background-image:url("./ressources/menu_close.png")}.backdrop .header-bar .header{margin:0;padding:16px;text-align:center;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}@media (min-width: 450px){.backdrop .header-bar .header{margin-right:56px}}@media (max-height: 550px){.backdrop .header-bar .header{padding:0}}.backdrop .menu-actions{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:max-height 200ms ease, color 200ms ease, background-color 100ms ease;transition:max-height 200ms ease, color 200ms ease, background-color 100ms ease;position:relative;max-height:16rem;margin:0 1rem}.backdrop .menu-actions .menu-option{color:#fff;text-decoration:none;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;font-size:1.5rem;width:100%;text-align:center;padding:1rem;border:none;border-radius:8px;cursor:pointer}.backdrop .menu-actions .menu-option:hover{background-color:#3e5864}.backdrop .menu-actions .menu-option.active{background-color:#29434e}.backdrop .menu-actions.hidden{max-height:0;color:rgba(0,0,0,0)}.backdrop .menu-actions.hidden .menu-option{color:rgba(0,0,0,0);background-color:rgba(0,0,0,0) !important}.container{position:relative;border:none;border-radius:16px 16px 0 0;min-height:0;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:white;margin-top:8px;-webkit-animation-name:start;animation-name:start;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease;animation-timing-function:ease;color:black;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@-webkit-keyframes start{from{top:100vh}to{top:0}}@keyframes start{from{top:100vh}to{top:0}}.container .banner{z-index:1;background-color:white;border:none;border-radius:16px 16px 0 0;display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;margin-bottom:1rem;padding-top:1rem;max-height:10rem;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-transform-origin:top;transform-origin:top;-webkit-transition:max-height 200ms ease, visibility 200ms step-start, -webkit-transform 200ms ease;transition:max-height 200ms ease, visibility 200ms step-start, -webkit-transform 200ms ease;transition:max-height 200ms ease, transform 200ms ease, visibility 200ms step-start;transition:max-height 200ms ease, transform 200ms ease, visibility 200ms step-start, -webkit-transform 200ms ease;min-height:3.5rem;justify-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media (max-height: 550px){.container .banner{position:absolute;width:100%;-webkit-box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22);box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)}}.container .banner.hidden{-webkit-transform:scaleY(0);transform:scaleY(0);visibility:hidden;max-height:0;-webkit-transition:max-height 200ms ease, visibility 200ms step-end, -webkit-transform 200ms ease;transition:max-height 200ms ease, visibility 200ms step-end, -webkit-transform 200ms ease;transition:max-height 200ms ease, transform 200ms ease, visibility 200ms step-end;transition:max-height 200ms ease, transform 200ms ease, visibility 200ms step-end, -webkit-transform 200ms ease;min-height:0;margin-bottom:0}.container .banner .banner-text{-ms-flex-item-align:left;-ms-grid-row-align:left;align-self:left;margin:1rem;-webkit-box-flex:100;-ms-flex-positive:100;flex-grow:100}.container .banner .btn-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;text-align:right}.container .banner .btn-container .banner-button{color:#29434e;padding:8px 16px;margin:0;margin-right:1rem;letter-spacing:0.125rem}.container .banner hr{width:100%}@media (max-height: 550px){.container .banner hr{margin-bottom:0}}.container .server-listing{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#212121;color:#fff;min-height:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-style:none;border-radius:8px;margin:1rem;margin-bottom:2rem;padding:0.5rem;padding-top:0.25rem;-webkit-box-shadow:0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2);box-shadow:0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2)}.container .server-listing h1{text-align:center}@media (max-height: 550px){.container .server-listing h1{display:none}}.container .server-listing hr{width:100%}@media (max-height: 550px){.container .server-listing hr{display:none}}@media (max-height: 450px){.container .server-listing{padding-bottom:0.125rem}}.container .server-listing .server-entries{overflow-y:auto;min-height:0}.container .server-listing .server-entries .server{font-size:1.25rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#484848;padding:0.5rem;margin-bottom:0.25rem;border-style:none;border-radius:8px}@media (max-width: 1000px){.container .server-listing .server-entries .server{-ms-flex-wrap:wrap;flex-wrap:wrap}}.container .server-listing .server-entries .server .server-name{font-weight:bold;letter-spacing:0.125rem;white-space:nowrap;overflow:hidden;margin:0.5rem 0}.container .server-listing .server-entries .server .player-count{font-family:'Roboto Condensed', sans-serif}.container .server-listing .server-entries .server .player-count-static{white-space:nowrap;margin-left:0.25rem;letter-spacing:0;font-family:'Roboto Condensed', sans-serif}@media (max-width: 1000px){.container .server-listing .server-entries .server .player-count-static{display:none}}.container .server-listing .server-entries .server .player-count-dot{background-color:#393;border-radius:50%;min-width:1rem;min-height:1rem;width:1rem;height:1rem;margin-left:auto;margin-right:0.25rem}.container .server-listing .server-entries .server .join-btn{margin-left:0.5rem;min-width:12rem}.container .server-listing .button-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;margin-top:1rem;margin-right:0.25rem;min-height:2.5rem}@media (max-height: 450px){.container .server-listing .button-container{margin-top:0.125rem;min-height:2rem}}.container .copyright-container{-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;width:100%;margin:4px;bottom:0;text-align:center}.modal-container{position:absolute;top:0;width:100vw;height:100vh;background-color:#000000AA;display:-webkit-box;display:-ms-flexbox;display:flex;opacity:1;-webkit-transition:opacity 200ms ease;transition:opacity 200ms ease}.modal-container.hidden{opacity:0}.modal-container .modal{background-color:#546e7a;margin:auto;padding:1rem;border-style:none;border-radius:8px;-webkit-box-shadow:0 19px 38px rgba(0,0,0,0.3),0 15px 12px rgba(0,0,0,0.22);box-shadow:0 19px 38px rgba(0,0,0,0.3),0 15px 12px rgba(0,0,0,0.22)}.modal-container .modal-title{margin:1rem}.modal-container .modal-body{margin:0.25rem} diff --git a/WebInterface/NodeJSServer/dist/index.html b/WebInterface/NodeJSServer/dist/index.html index b2a32c3..b8d758e 100644 --- a/WebInterface/NodeJSServer/dist/index.html +++ b/WebInterface/NodeJSServer/dist/index.html @@ -9,7 +9,7 @@ <meta name="theme-color" content="#546e7a"> <title>Helden Online</title> <link rel="icon" href="ressources/Logo768.png"> - <link rel="stylesheet" href="index.css"> + <link rel="stylesheet" href="style/index.css"> <!-- <link rel="manifest" href="manifest.webmanifest"> --> <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed" rel="stylesheet"> </head> @@ -22,10 +22,10 @@ <div class="menu-actions hidden" id="menu"> <a class="menu-option active" id="listing-tab" href="./">Spiele-Liste</a> <a class="menu-option" id="github-tab" href="https://github.com/TrueDoctor/DiscoBot" target="_blank">Projekt auf GitHub</a> - <a class="menu-option" id="about-tab" href="about.html" target="_blank">About</a> + <a class="menu-option" id="about-tab" href="about" target="_blank">About</a> </div> </div> - <div class="container" id="front-layer"> + <div class="front-layer" id="front-layer"> <div class="banner" id="notifications"> <p class="banner-text" id="banner-info">Loading javascript.</p> <div class="btn-container"> @@ -54,6 +54,6 @@ <span>© 2018 Timon Scholz</span> </div> </div> - <script src="index.js"></script> + <script src="script/index.js"></script> </body> </html> diff --git a/WebInterface/NodeJSServer/dist/index.js b/WebInterface/NodeJSServer/dist/script/index.js index 67f33c0..67f33c0 100644 --- a/WebInterface/NodeJSServer/dist/index.js +++ b/WebInterface/NodeJSServer/dist/script/index.js diff --git a/WebInterface/NodeJSServer/dist/style/index.css b/WebInterface/NodeJSServer/dist/style/index.css new file mode 100644 index 0000000..5e74a1b --- /dev/null +++ b/WebInterface/NodeJSServer/dist/style/index.css @@ -0,0 +1 @@ +html,body{height:100vh;margin:0;padding:0;font-family:'Roboto', sans-serif;font-display:swap;overflow:hidden;background-color:#212121;color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background-color:#546e7a;position:relative}.btn{border:none;border-radius:4px;padding:8px;margin:0;font-size:1rem;font-family:'Roboto Condensed', sans-serif;font-weight:bold;display:inline-block;background-color:#546e7a;color:#fff;text-transform:uppercase;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);cursor:pointer;letter-spacing:0.25rem;background-position:center;-webkit-transition:background 800ms ease, color 200ms ease, -webkit-box-shadow 100ms ease;transition:background 800ms ease, color 200ms ease, -webkit-box-shadow 100ms ease;transition:background 800ms ease, box-shadow 100ms ease, color 200ms ease;transition:background 800ms ease, box-shadow 100ms ease, color 200ms ease, -webkit-box-shadow 100ms ease}.btn:hover{background:#29434e radial-gradient(circle, transparent 1%, #29434e 1%) center/15000%;-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}.btn:active{background-color:#819ca9;background-size:100%;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12);box-shadow:0 1px 3px rgba(0,0,0,0.12);-webkit-transition:background 0s, -webkit-box-shadow 0s;transition:background 0s, -webkit-box-shadow 0s;transition:background 0s, box-shadow 0s;transition:background 0s, box-shadow 0s, -webkit-box-shadow 0s}.btn:disabled{color:#ffffff61;background:#546e7a61;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:background 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease;transition:background 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease;transition:background 200ms ease, box-shadow 200ms ease, color 200ms ease;transition:background 200ms ease, box-shadow 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease}.text-btn{padding:8px;margin:0;font-size:1rem;font-family:'Roboto Condensed', sans-serif;font-weight:bold;display:inline-block;color:#fff;background-color:rgba(0,0,0,0);text-transform:uppercase;-webkit-box-shadow:none;box-shadow:none;background-position:center;-webkit-transition:background 800ms ease, color 200ms ease, -webkit-box-shadow 100ms ease;transition:background 800ms ease, color 200ms ease, -webkit-box-shadow 100ms ease;transition:background 800ms ease, box-shadow 100ms ease, color 200ms ease;transition:background 800ms ease, box-shadow 100ms ease, color 200ms ease, -webkit-box-shadow 100ms ease}.text-btn:hover{background:#29434e61 radial-gradient(circle, transparent 1%, #29434e61 1%) center/15000%;-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}.text-btn:active{background-color:#819ca9;background-size:100%;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:background 0s, -webkit-box-shadow 0s;transition:background 0s, -webkit-box-shadow 0s;transition:background 0s, box-shadow 0s;transition:background 0s, box-shadow 0s, -webkit-box-shadow 0s}.text-btn:disabled{background:rgba(0,0,0,0);color:#ffffff61;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:background 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease;transition:background 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease;transition:background 200ms ease, box-shadow 200ms ease, color 200ms ease;transition:background 200ms ease, box-shadow 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease}.backdrop{background-color:#546e7a;color:#fff;font-size:1rem}.backdrop .header-bar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media (max-height: 550px){.backdrop .header-bar{margin-top:0.125rem}}.backdrop .header-bar .menu-icon{background-image:url("../ressources/menu.png");background-position:center;background-repeat:no-repeat;width:36px;height:36px;padding:4px;margin:1rem;display:inline-block;border:none;border-radius:32px;-webkit-transition:background-color 100ms ease;transition:background-color 100ms ease}@media (max-height: 550px){.backdrop .header-bar .menu-icon{padding:0;margin:0.125rem}}.backdrop .header-bar .menu-icon:hover{background-color:#29434e}.backdrop .header-bar .menu-icon.open{background-image:url("../ressources/menu_close.png")}.backdrop .header-bar .header{margin:0;padding:16px;text-align:center;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}@media (min-width: 450px){.backdrop .header-bar .header{margin-right:56px}}@media (max-height: 550px){.backdrop .header-bar .header{padding:0}}.backdrop .menu-actions{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:max-height 200ms ease, color 200ms ease, background-color 100ms ease;transition:max-height 200ms ease, color 200ms ease, background-color 100ms ease;position:relative;max-height:16rem;margin:0 1rem}.backdrop .menu-actions .menu-option{color:#fff;text-decoration:none;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;font-size:1.5rem;width:100%;text-align:center;padding:1rem;border:none;border-radius:8px;cursor:pointer}.backdrop .menu-actions .menu-option:hover{background-color:#3e5864}.backdrop .menu-actions .menu-option.active{background-color:#29434e}.backdrop .menu-actions.hidden{max-height:0;color:rgba(0,0,0,0)}.backdrop .menu-actions.hidden .menu-option{color:rgba(0,0,0,0);background-color:rgba(0,0,0,0) !important}.front-layer{position:relative;border:none;border-radius:16px 16px 0 0;min-height:0;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:white;margin-top:8px;-webkit-animation-name:start;animation-name:start;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease;animation-timing-function:ease;color:black;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@-webkit-keyframes start{from{top:100vh}to{top:0}}@keyframes start{from{top:100vh}to{top:0}}.front-layer .banner{z-index:1;background-color:white;border:none;border-radius:16px 16px 0 0;display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;margin-bottom:1rem;padding-top:1rem;max-height:10rem;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-transform-origin:top;transform-origin:top;-webkit-transition:max-height 200ms ease, visibility 200ms step-start, -webkit-transform 200ms ease;transition:max-height 200ms ease, visibility 200ms step-start, -webkit-transform 200ms ease;transition:max-height 200ms ease, transform 200ms ease, visibility 200ms step-start;transition:max-height 200ms ease, transform 200ms ease, visibility 200ms step-start, -webkit-transform 200ms ease;min-height:3.5rem;justify-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media (max-height: 550px){.front-layer .banner{position:absolute;width:100%;-webkit-box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22);box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)}}.front-layer .banner.hidden{-webkit-transform:scaleY(0);transform:scaleY(0);visibility:hidden;max-height:0;-webkit-transition:max-height 200ms ease, visibility 200ms step-end, -webkit-transform 200ms ease;transition:max-height 200ms ease, visibility 200ms step-end, -webkit-transform 200ms ease;transition:max-height 200ms ease, transform 200ms ease, visibility 200ms step-end;transition:max-height 200ms ease, transform 200ms ease, visibility 200ms step-end, -webkit-transform 200ms ease;min-height:0;margin-bottom:0}.front-layer .banner .banner-text{-ms-flex-item-align:left;-ms-grid-row-align:left;align-self:left;margin:1rem;-webkit-box-flex:100;-ms-flex-positive:100;flex-grow:100}.front-layer .banner .btn-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;text-align:right}.front-layer .banner .btn-container .banner-button{color:#29434e;padding:8px 16px;margin:0;margin-right:1rem;letter-spacing:0.125rem}.front-layer .banner hr{width:100%}@media (max-height: 550px){.front-layer .banner hr{margin-bottom:0}}.front-layer .server-listing{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#212121;color:#fff;min-height:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-style:none;border-radius:8px;margin:1rem;margin-bottom:2rem;padding:0.5rem;padding-top:0.25rem;-webkit-box-shadow:0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2);box-shadow:0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2)}.front-layer .server-listing h1{text-align:center}@media (max-height: 550px){.front-layer .server-listing h1{display:none}}.front-layer .server-listing hr{width:100%}@media (max-height: 550px){.front-layer .server-listing hr{display:none}}@media (max-height: 450px){.front-layer .server-listing{padding-bottom:0.125rem}}.front-layer .server-listing .server-entries{overflow-y:auto;min-height:0}.front-layer .server-listing .server-entries .server{font-size:1.25rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#484848;padding:0.5rem;margin-bottom:0.25rem;border-style:none;border-radius:8px}@media (max-width: 1000px){.front-layer .server-listing .server-entries .server{-ms-flex-wrap:wrap;flex-wrap:wrap}}.front-layer .server-listing .server-entries .server .server-name{font-weight:bold;letter-spacing:0.125rem;white-space:nowrap;overflow:hidden;margin:0.5rem 0}.front-layer .server-listing .server-entries .server .player-count{font-family:'Roboto Condensed', sans-serif}.front-layer .server-listing .server-entries .server .player-count-static{white-space:nowrap;margin-left:0.25rem;letter-spacing:0;font-family:'Roboto Condensed', sans-serif}@media (max-width: 1000px){.front-layer .server-listing .server-entries .server .player-count-static{display:none}}.front-layer .server-listing .server-entries .server .player-count-dot{background-color:#393;border-radius:50%;min-width:1rem;min-height:1rem;width:1rem;height:1rem;margin-left:auto;margin-right:0.25rem}.front-layer .server-listing .server-entries .server .join-btn{margin-left:0.5rem;min-width:12rem}.front-layer .server-listing .button-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;margin-top:1rem;margin-right:0.25rem;min-height:2.5rem}@media (max-height: 450px){.front-layer .server-listing .button-container{margin-top:0.125rem;min-height:2rem}}@media (max-width: 450px){.front-layer .server-listing .button-container .btn{letter-spacing:0}}.front-layer .copyright-container{-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;width:100%;margin:4px;bottom:0;text-align:center}.modal-container{position:absolute;top:0;width:100vw;height:100vh;background-color:#000000AA;display:-webkit-box;display:-ms-flexbox;display:flex;opacity:1;-webkit-transition:opacity 200ms ease;transition:opacity 200ms ease}.modal-container.hidden{opacity:0}.modal-container .modal{background-color:#546e7a;margin:auto;padding:1rem;border-style:none;border-radius:8px;-webkit-box-shadow:0 19px 38px rgba(0,0,0,0.3),0 15px 12px rgba(0,0,0,0.22);box-shadow:0 19px 38px rgba(0,0,0,0.3),0 15px 12px rgba(0,0,0,0.22)}.modal-container .modal-title{margin:1rem}.modal-container .modal-body{margin:0.25rem} diff --git a/WebInterface/NodeJSServer/src/style/index.scss b/WebInterface/NodeJSServer/src/style/index.scss index b5ca607..da347cb 100644 --- a/WebInterface/NodeJSServer/src/style/index.scss +++ b/WebInterface/NodeJSServer/src/style/index.scss @@ -1,425 +1,10 @@ -@import 'partials/_colors.scss'; - -html,body { - height: 100vh; - margin: 0; - padding: 0; - font-family: 'Roboto', sans-serif; - font-display: swap; - overflow: hidden; - background-color: $primary; - color: $primary-text; - user-select: none; -} - -body { - display: flex; - flex-direction: column; - background-color: $secondary; - position: relative; -} - -.btn { - border: none; - border-radius: 4px; - padding: 8px; - margin: 0; - font-size: 1rem; - font-family: 'Roboto Condensed', sans-serif; - font-weight: bold; - display: inline-block; - background-color: $secondary; - color: $secondary-text; - text-transform: uppercase; - box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); - cursor: pointer; - letter-spacing: 0.25rem; - - background-position: center; - transition: background 800ms ease, box-shadow 100ms ease, color 200ms ease; - - &:hover { - background: $secondary-dark radial-gradient(circle, transparent 1%, $secondary-dark 1%) center/15000%; - box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); - } - - &:active { - background-color: $secondary-light; - background-size: 100%; - box-shadow: 0 1px 3px rgba(0,0,0,0.12); - transition: background 0s, box-shadow 0s; - } - - &:disabled { - color: $secondary-text-disabled; - background: $secondary-disabled; - box-shadow: none; - transition: background 200ms ease, box-shadow 200ms ease, color 200ms ease; - } -} - -.text-btn { - padding: 8px; - margin: 0; - font-size: 1rem; - font-family: 'Roboto Condensed', sans-serif; - font-weight: bold; - display: inline-block; - color: $secondary-text; - background-color: rgba(0, 0, 0, 0); - text-transform: uppercase; - box-shadow: none; - - background-position: center; - transition: background 800ms ease, box-shadow 100ms ease, color 200ms ease; - - &:hover { - background: $secondary-dark-transparent radial-gradient(circle, transparent 1%, $secondary-dark-transparent 1%) center/15000%; - box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); - } - - &:active { - background-color: $secondary-light; - background-size: 100%; - box-shadow: none; - transition: background 0s, box-shadow 0s; - } - - &:disabled { - background: rgba(0,0,0,0); - color: $secondary-text-disabled; - box-shadow: none; - transition: background 200ms ease, box-shadow 200ms ease, color 200ms ease; - } -} - -.backdrop { - background-color: $secondary; - color: $secondary-text; - font-size: 1rem; - - .header-bar { - display: flex; - align-items: center; - - @media (max-height: 550px) { - margin-top: 0.125rem; - } - - .menu-icon { - background-image: url("./ressources/menu.png"); - background-position: center; - background-repeat: no-repeat; - width: 36px; - height: 36px; - padding: 4px; - margin: 1rem; - display: inline-block; - border: none; - border-radius: 32px; - transition: background-color 100ms ease; - - @media (max-height: 550px) { - padding: 0; - margin: 0.125rem; - } - - &:hover { - background-color: $secondary-dark; - } - - &.open { - background-image: url("./ressources/menu_close.png"); - } - } - - .header { - margin: 0; - padding: 16px; - text-align: center; - flex-grow: 1; - - @media (min-width: 450px) { - margin-right: 56px; - } - - @media (max-height: 550px) { - padding: 0; - } - } - } - - .menu-actions { - box-sizing: border-box; - transition: max-height 200ms ease, color 200ms ease, background-color 100ms ease;; - position: relative; - max-height: 16rem; - margin: 0 1rem; - - .menu-option { - color: $primary-text; - text-decoration: none; - box-sizing: border-box; - display: inline-block; - font-size: 1.5rem; - width: 100%; - text-align: center; - padding: 1rem; - border: none; - border-radius: 8px; - cursor: pointer; - - &:hover { - background-color: $secondary-half-dark; - } - - &.active { - background-color: $secondary-dark; - } - } - - &.hidden { - max-height: 0; - color: rgba(0,0,0,0); - - .menu-option { - color: rgba(0,0,0,0); - background-color: rgba(0,0,0,0) !important; - } - } - } -} - -.container { - @keyframes start { - from {top: 100vh;} - to {top: 0;} - } - - position: relative; - border: none; - border-radius: 16px 16px 0 0; - min-height: 0; - height: 100%; - - box-sizing: border-box; - background-color: white; - margin-top: 8px; - animation-name: start; - animation-duration: 1s; - animation-timing-function: ease; - color: black; - - display: flex; - flex-direction: column; - - .banner { - z-index: 1; - background-color: white; - border: none; - border-radius: 16px 16px 0 0; - display: flex; - margin: 0; - margin-bottom: 1rem; - padding-top: 1rem; - max-height: 10rem; - flex-direction: row; - flex-wrap: wrap; - transform-origin: top; - transition: max-height 200ms ease, transform 200ms ease, visibility 200ms step-start; - min-height: 3.5rem; - justify-items: center; - justify-content: center; - - @media (max-height: 550px) { - position: absolute; - width: 100%; - box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); - } - - &.hidden { - transform: scaleY(0); - visibility: hidden; - max-height: 0; - transition: max-height 200ms ease, transform 200ms ease, visibility 200ms step-end; - min-height: 0; - margin-bottom: 0; - } - - .banner-text { - align-self: left; - margin: 1rem; - flex-grow: 100; - } - - .btn-container{ - display: flex; - flex-grow: 1; - text-align: right; - - - .banner-button { - color: $secondary-dark; - padding: 8px 16px; - margin: 0; - margin-right: 1rem; - letter-spacing: 0.125rem; - } - } - - hr { - width: 100%; - - @media (max-height: 550px) { - margin-bottom: 0; - } - } - } - - .server-listing { - box-sizing: border-box; - background-color: $primary; - color: $primary-text; - min-height: 0; - display: flex; - flex-direction: column; - border-style: none; - border-radius: 8px; - margin: 1rem; - margin-bottom: 2rem; - padding: 0.5rem; - padding-top: 0.25rem; - box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2); - h1 { - text-align: center; - @media (max-height: 550px) { - display: none; - } - } - hr { - width: 100%; - @media (max-height: 550px) { - display: none; - } - } - - @media (max-height: 450px) { - padding-bottom: 0.125rem - } - - .server-entries { - overflow-y: auto; - min-height: 0; - - .server { - font-size: 1.25rem; - display: flex; - flex-direction: row; - - @media (max-width: 1000px) { - flex-wrap: wrap; - } - - align-items: center; - background-color: $primary-light; - padding: 0.5rem; - margin-bottom: 0.25rem; - border-style: none; - border-radius: 8px; - - .server-name { - font-weight: bold; - letter-spacing: 0.125rem; - white-space: nowrap; - overflow: hidden; - margin: 0.5rem 0; - } - - .player-count { - font-family: 'Roboto Condensed', sans-serif; - } - - .player-count-static { - @media (max-width: 1000px) { - display: none; - } - - white-space: nowrap; - margin-left: 0.25rem; - letter-spacing: 0; - font-family: 'Roboto Condensed', sans-serif; - } - - .player-count-dot { - background-color: $online-green; - border-radius: 50%; - min-width: 1rem; - min-height: 1rem; - width: 1rem; - height: 1rem; - margin-left: auto; - margin-right: 0.25rem; - } - - .join-btn { - margin-left: 0.5rem; - min-width: 12rem; - } - } - } - - .button-container { - display: flex; - flex-direction: row-reverse; - margin-top: 1rem; - margin-right: 0.25rem; - min-height: 2.5rem; - - @media (max-height: 450px) { - margin-top: 0.125rem; - min-height: 2rem; - } - } - } - - .copyright-container { - box-sizing: border-box; - position: absolute; - width: 100%; - margin: 4px; - bottom: 0; - text-align: center; - } -} - -.modal-container { - position:absolute; - top: 0; - width: 100vw; - height: 100vh; - background-color: #000000AA; - display: flex; - opacity: 1; - transition: opacity 200ms ease; - - &.hidden { - opacity: 0; - } - - .modal { - background-color: #546e7a; - margin: auto; - padding: 1rem; - border-style: none; - border-radius: 8px; - box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); - } - - .modal-title { - margin: 1rem; - } - - .modal-body { - margin: 0.25rem; - } -} +@import 'partials/colors'; +@import 'partials/base'; +@import 'partials/btn'; +@import 'partials/backdrop/base'; +@import 'partials/backdrop/menu'; +@import 'partials/front-layer/base'; +@import 'partials/front-layer/notifications'; +@import 'partials/front-layer/server-listing'; +@import 'partials/front-layer/copyright'; +@import 'partials/modal/base'; diff --git a/WebInterface/NodeJSServer/src/style/partials/_base.scss b/WebInterface/NodeJSServer/src/style/partials/_base.scss new file mode 100644 index 0000000..77d5bdd --- /dev/null +++ b/WebInterface/NodeJSServer/src/style/partials/_base.scss @@ -0,0 +1,18 @@ +html,body { + height: 100vh; + margin: 0; + padding: 0; + font-family: 'Roboto', sans-serif; + font-display: swap; + overflow: hidden; + background-color: $primary; + color: $primary-text; + user-select: none; +} + +body { + display: flex; + flex-direction: column; + background-color: $secondary; + position: relative; +} diff --git a/WebInterface/NodeJSServer/src/style/partials/_btn.scss b/WebInterface/NodeJSServer/src/style/partials/_btn.scss new file mode 100644 index 0000000..6c41b1f --- /dev/null +++ b/WebInterface/NodeJSServer/src/style/partials/_btn.scss @@ -0,0 +1,73 @@ +.btn { + border: none; + border-radius: 4px; + padding: 8px; + margin: 0; + font-size: 1rem; + font-family: 'Roboto Condensed', sans-serif; + font-weight: bold; + display: inline-block; + background-color: $secondary; + color: $secondary-text; + text-transform: uppercase; + box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); + cursor: pointer; + letter-spacing: 0.25rem; + + background-position: center; + transition: background 800ms ease, box-shadow 100ms ease, color 200ms ease; + + &:hover { + background: $secondary-dark radial-gradient(circle, transparent 1%, $secondary-dark 1%) center/15000%; + box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); + } + + &:active { + background-color: $secondary-light; + background-size: 100%; + box-shadow: 0 1px 3px rgba(0,0,0,0.12); + transition: background 0s, box-shadow 0s; + } + + &:disabled { + color: $secondary-text-disabled; + background: $secondary-disabled; + box-shadow: none; + transition: background 200ms ease, box-shadow 200ms ease, color 200ms ease; + } +} + +.text-btn { + padding: 8px; + margin: 0; + font-size: 1rem; + font-family: 'Roboto Condensed', sans-serif; + font-weight: bold; + display: inline-block; + color: $secondary-text; + background-color: rgba(0, 0, 0, 0); + text-transform: uppercase; + box-shadow: none; + + background-position: center; + transition: background 800ms ease, box-shadow 100ms ease, color 200ms ease; + + &:hover { + background: $secondary-dark-transparent radial-gradient(circle, transparent 1%, $secondary-dark-transparent 1%) center/15000%; + box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); + } + + &:active { + background-color: $secondary-light; + background-size: 100%; + box-shadow: none; + transition: background 0s, box-shadow 0s; + } + + &:disabled { + background: rgba(0,0,0,0); + color: $secondary-text-disabled; + box-shadow: none; + transition: background 200ms ease, box-shadow 200ms ease, color 200ms ease; + } +} diff --git a/WebInterface/NodeJSServer/src/style/partials/backdrop/_base.scss b/WebInterface/NodeJSServer/src/style/partials/backdrop/_base.scss new file mode 100644 index 0000000..b283c0b --- /dev/null +++ b/WebInterface/NodeJSServer/src/style/partials/backdrop/_base.scss @@ -0,0 +1,56 @@ +.backdrop { + background-color: $secondary; + color: $secondary-text; + font-size: 1rem; + + .header-bar { + display: flex; + align-items: center; + + @media (max-height: 550px) { + margin-top: 0.125rem; + } + + .menu-icon { + background-image: url("../ressources/menu.png"); + background-position: center; + background-repeat: no-repeat; + width: 36px; + height: 36px; + padding: 4px; + margin: 1rem; + display: inline-block; + border: none; + border-radius: 32px; + transition: background-color 100ms ease; + + @media (max-height: 550px) { + padding: 0; + margin: 0.125rem; + } + + &:hover { + background-color: $secondary-dark; + } + + &.open { + background-image: url("../ressources/menu_close.png"); + } + } + + .header { + margin: 0; + padding: 16px; + text-align: center; + flex-grow: 1; + + @media (min-width: 450px) { + margin-right: 56px; + } + + @media (max-height: 550px) { + padding: 0; + } + } + } +} diff --git a/WebInterface/NodeJSServer/src/style/partials/backdrop/_menu.scss b/WebInterface/NodeJSServer/src/style/partials/backdrop/_menu.scss new file mode 100644 index 0000000..e98c798 --- /dev/null +++ b/WebInterface/NodeJSServer/src/style/partials/backdrop/_menu.scss @@ -0,0 +1,41 @@ +.backdrop { + .menu-actions { + box-sizing: border-box; + transition: max-height 200ms ease, color 200ms ease, background-color 100ms ease;; + position: relative; + max-height: 16rem; + margin: 0 1rem; + + .menu-option { + color: $primary-text; + text-decoration: none; + box-sizing: border-box; + display: inline-block; + font-size: 1.5rem; + width: 100%; + text-align: center; + padding: 1rem; + border: none; + border-radius: 8px; + cursor: pointer; + + &:hover { + background-color: $secondary-half-dark; + } + + &.active { + background-color: $secondary-dark; + } + } + + &.hidden { + max-height: 0; + color: rgba(0,0,0,0); + + .menu-option { + color: rgba(0,0,0,0); + background-color: rgba(0,0,0,0) !important; + } + } + } +} diff --git a/WebInterface/NodeJSServer/src/style/partials/front-layer/_base.scss b/WebInterface/NodeJSServer/src/style/partials/front-layer/_base.scss new file mode 100644 index 0000000..6a2aa9a --- /dev/null +++ b/WebInterface/NodeJSServer/src/style/partials/front-layer/_base.scss @@ -0,0 +1,23 @@ +.front-layer { + @keyframes start { + from {top: 100vh;} + to {top: 0;} + } + + position: relative; + border: none; + border-radius: 16px 16px 0 0; + min-height: 0; + height: 100%; + + box-sizing: border-box; + background-color: white; + margin-top: 8px; + animation-name: start; + animation-duration: 1s; + animation-timing-function: ease; + color: black; + + display: flex; + flex-direction: column; +} diff --git a/WebInterface/NodeJSServer/src/style/partials/front-layer/_copyright.scss b/WebInterface/NodeJSServer/src/style/partials/front-layer/_copyright.scss new file mode 100644 index 0000000..31ac614 --- /dev/null +++ b/WebInterface/NodeJSServer/src/style/partials/front-layer/_copyright.scss @@ -0,0 +1,10 @@ +.front-layer{ + .copyright-container { + box-sizing: border-box; + position: absolute; + width: 100%; + margin: 4px; + bottom: 0; + text-align: center; + } +} diff --git a/WebInterface/NodeJSServer/src/style/partials/front-layer/_notifications.scss b/WebInterface/NodeJSServer/src/style/partials/front-layer/_notifications.scss new file mode 100644 index 0000000..1465b77 --- /dev/null +++ b/WebInterface/NodeJSServer/src/style/partials/front-layer/_notifications.scss @@ -0,0 +1,64 @@ +.front-layer { + .banner { + z-index: 1; + background-color: white; + border: none; + border-radius: 16px 16px 0 0; + display: flex; + margin: 0; + margin-bottom: 1rem; + padding-top: 1rem; + max-height: 10rem; + flex-direction: row; + flex-wrap: wrap; + transform-origin: top; + transition: max-height 200ms ease, transform 200ms ease, visibility 200ms step-start; + min-height: 3.5rem; + justify-items: center; + justify-content: center; + + @media (max-height: 550px) { + position: absolute; + width: 100%; + box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); + } + + &.hidden { + transform: scaleY(0); + visibility: hidden; + max-height: 0; + transition: max-height 200ms ease, transform 200ms ease, visibility 200ms step-end; + min-height: 0; + margin-bottom: 0; + } + + .banner-text { + align-self: left; + margin: 1rem; + flex-grow: 100; + } + + .btn-container{ + display: flex; + flex-grow: 1; + text-align: right; + + + .banner-button { + color: $secondary-dark; + padding: 8px 16px; + margin: 0; + margin-right: 1rem; + letter-spacing: 0.125rem; + } + } + + hr { + width: 100%; + + @media (max-height: 550px) { + margin-bottom: 0; + } + } + } +} diff --git a/WebInterface/NodeJSServer/src/style/partials/front-layer/_server-listing.scss b/WebInterface/NodeJSServer/src/style/partials/front-layer/_server-listing.scss new file mode 100644 index 0000000..2921e22 --- /dev/null +++ b/WebInterface/NodeJSServer/src/style/partials/front-layer/_server-listing.scss @@ -0,0 +1,113 @@ +.front-layer { + .server-listing { + box-sizing: border-box; + background-color: $primary; + color: $primary-text; + min-height: 0; + display: flex; + flex-direction: column; + border-style: none; + border-radius: 8px; + margin: 1rem; + margin-bottom: 2rem; + padding: 0.5rem; + padding-top: 0.25rem; + box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2); + h1 { + text-align: center; + @media (max-height: 550px) { + display: none; + } + } + hr { + width: 100%; + @media (max-height: 550px) { + display: none; + } + } + + @media (max-height: 450px) { + padding-bottom: 0.125rem + } + + .server-entries { + overflow-y: auto; + min-height: 0; + + .server { + font-size: 1.25rem; + display: flex; + flex-direction: row; + + @media (max-width: 1000px) { + flex-wrap: wrap; + } + + align-items: center; + background-color: $primary-light; + padding: 0.5rem; + margin-bottom: 0.25rem; + border-style: none; + border-radius: 8px; + + .server-name { + font-weight: bold; + letter-spacing: 0.125rem; + white-space: nowrap; + overflow: hidden; + margin: 0.5rem 0; + } + + .player-count { + font-family: 'Roboto Condensed', sans-serif; + } + + .player-count-static { + @media (max-width: 1000px) { + display: none; + } + + white-space: nowrap; + margin-left: 0.25rem; + letter-spacing: 0; + font-family: 'Roboto Condensed', sans-serif; + } + + .player-count-dot { + background-color: $online-green; + border-radius: 50%; + min-width: 1rem; + min-height: 1rem; + width: 1rem; + height: 1rem; + margin-left: auto; + margin-right: 0.25rem; + } + + .join-btn { + margin-left: 0.5rem; + min-width: 12rem; + } + } + } + + .button-container { + display: flex; + flex-direction: row-reverse; + margin-top: 1rem; + margin-right: 0.25rem; + min-height: 2.5rem; + + @media (max-height: 450px) { + margin-top: 0.125rem; + min-height: 2rem; + } + + .btn { + @media (max-width: 450px) { + letter-spacing: 0; + } + } + } + } +} diff --git a/WebInterface/NodeJSServer/src/style/partials/modal/_base.scss b/WebInterface/NodeJSServer/src/style/partials/modal/_base.scss new file mode 100644 index 0000000..c8705e4 --- /dev/null +++ b/WebInterface/NodeJSServer/src/style/partials/modal/_base.scss @@ -0,0 +1,31 @@ +.modal-container { + position:absolute; + top: 0; + width: 100vw; + height: 100vh; + background-color: #000000AA; + display: flex; + opacity: 1; + transition: opacity 200ms ease; + + &.hidden { + opacity: 0; + } + + .modal { + background-color: #546e7a; + margin: auto; + padding: 1rem; + border-style: none; + border-radius: 8px; + box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); + } + + .modal-title { + margin: 1rem; + } + + .modal-body { + margin: 0.25rem; + } +} |