diff options
Diffstat (limited to 'WebInterface/NodeJSServer/src/style')
16 files changed, 0 insertions, 653 deletions
diff --git a/WebInterface/NodeJSServer/src/style/about.scss b/WebInterface/NodeJSServer/src/style/about.scss deleted file mode 100644 index 3b45674..0000000 --- a/WebInterface/NodeJSServer/src/style/about.scss +++ /dev/null @@ -1,43 +0,0 @@ -@import 'partials/base'; -@import 'partials/backdrop/base'; -@import 'partials/backdrop/menu'; -@import 'partials/front-layer/base'; -@import 'partials/front-layer/copyright'; - - -h1, h2, p, a { - margin: 0.5rem 1rem; -} - -h1, h2 { - margin-top: 1rem; - text-align: center; -} - -.front-layer { - padding-bottom: 5rem; - display: flex; -} - -.about-container { - flex-grow: 1; - overflow-y: auto; - margin: 0.5rem; - display: flex; - flex-direction: column; - .about { - flex-grow: 1; - } - - .contact { - margin: 1rem; - display: grid; - grid-template-columns: 1fr 5fr; - grid-template-rows: 1fr 1fr 1fr 1fr 1fr; - flex-direction: column; - - h2 { - grid-column: 1/3; - } - } -} diff --git a/WebInterface/NodeJSServer/src/style/index.scss b/WebInterface/NodeJSServer/src/style/index.scss deleted file mode 100644 index 04c896a..0000000 --- a/WebInterface/NodeJSServer/src/style/index.scss +++ /dev/null @@ -1,10 +0,0 @@ -@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'; -@import 'partials/modal/login'; diff --git a/WebInterface/NodeJSServer/src/style/partials/_base.scss b/WebInterface/NodeJSServer/src/style/partials/_base.scss deleted file mode 100644 index 5f300fd..0000000 --- a/WebInterface/NodeJSServer/src/style/partials/_base.scss +++ /dev/null @@ -1,20 +0,0 @@ -@import 'colors'; - -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 deleted file mode 100644 index cf5ee33..0000000 --- a/WebInterface/NodeJSServer/src/style/partials/_btn.scss +++ /dev/null @@ -1,75 +0,0 @@ -@import 'colors'; - -.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/_colors.scss b/WebInterface/NodeJSServer/src/style/partials/_colors.scss deleted file mode 100644 index 4683325..0000000 --- a/WebInterface/NodeJSServer/src/style/partials/_colors.scss +++ /dev/null @@ -1,18 +0,0 @@ -$primary: #212121; -$primary-disabled: #21212161; -$primary-light: #484848; -$primary-dark: #000000; -$primary-text: #ffffff; -$primary-text-disabled: #ffffff61; -$primary-warning-text: #ef5350; -$secondary: #546e7a; -$secondary-disabled: #546e7a61; -$secondary-half-dark: #3e5864; -$secondary-dark: #29434e; -$secondary-dark-transparent: #29434e61; -$secondary-light: #819ca9; -$secondary-light-transparent: #819ca961; -$secondary-text: #ffffff; -$secondary-text-disabled: #ffffff61; - -$online-green: #339933; diff --git a/WebInterface/NodeJSServer/src/style/partials/_game.scss b/WebInterface/NodeJSServer/src/style/partials/_game.scss deleted file mode 100644 index 74b566b..0000000 --- a/WebInterface/NodeJSServer/src/style/partials/_game.scss +++ /dev/null @@ -1,13 +0,0 @@ -@import './colors'; - -.game-window { - width: calc(100% - 2rem); - height: 100%; - display: flex; - flex-direction: column; - background-color: $secondary-light; - margin: 1rem; - margin-bottom: 2rem; - border-style: none; - border-radius: 8px; -} diff --git a/WebInterface/NodeJSServer/src/style/partials/backdrop/_base.scss b/WebInterface/NodeJSServer/src/style/partials/backdrop/_base.scss deleted file mode 100644 index 1b7a924..0000000 --- a/WebInterface/NodeJSServer/src/style/partials/backdrop/_base.scss +++ /dev/null @@ -1,58 +0,0 @@ -@import '../colors'; - -.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 deleted file mode 100644 index 26833d5..0000000 --- a/WebInterface/NodeJSServer/src/style/partials/backdrop/_menu.scss +++ /dev/null @@ -1,43 +0,0 @@ -@import '../colors'; - -.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 deleted file mode 100644 index 6a2aa9a..0000000 --- a/WebInterface/NodeJSServer/src/style/partials/front-layer/_base.scss +++ /dev/null @@ -1,23 +0,0 @@ -.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 deleted file mode 100644 index 31ac614..0000000 --- a/WebInterface/NodeJSServer/src/style/partials/front-layer/_copyright.scss +++ /dev/null @@ -1,10 +0,0 @@ -.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 deleted file mode 100644 index d8e8159..0000000 --- a/WebInterface/NodeJSServer/src/style/partials/front-layer/_notifications.scss +++ /dev/null @@ -1,84 +0,0 @@ -@import '../colors'; - -.front-layer { - .banner { - 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; - } - - .notification-badge { - height: 1rem; - min-width: 1rem; - font-weight: bold; - color: $secondary-text; - font-size: 1rem; - padding: 0.5rem; - margin: 0.5rem 0 0.5rem 1rem; - text-align: center; - line-height: 1rem; - background-color: $secondary; - border: none; - border-radius: 50%; - - &.hidden { - display: none; - } - } - - .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 deleted file mode 100644 index 7e67178..0000000 --- a/WebInterface/NodeJSServer/src/style/partials/front-layer/_server-listing.scss +++ /dev/null @@ -1,121 +0,0 @@ -@import '../colors'; - -.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; - } - - .right-aligned-items { - margin-left: auto; - white-space: nowrap; - display: flex; - align-items: center; - - .player-count-dot { - background-color: $online-green; - border-radius: 50%; - min-width: 1rem; - min-height: 1rem; - width: 1rem; - height: 1rem; - margin-right: 0.25rem; - } - - .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; - } - - .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/game/_chat.scss b/WebInterface/NodeJSServer/src/style/partials/game/_chat.scss deleted file mode 100644 index 89b63b3..0000000 --- a/WebInterface/NodeJSServer/src/style/partials/game/_chat.scss +++ /dev/null @@ -1,28 +0,0 @@ -@import '../colors'; -@import '../btn'; - -.chat { - flex-grow: 1; - display: flex; - flex-direction: column; - - .messages { - flex-grow: 1; - background-color: white; - margin: 0.5rem; - } - - .input-message { - display: flex; - margin: 0.5rem; - - input { - font-size: 2rem; - flex-grow: 1; - } - - .btn { - margin-left: 1rem; - } - } -} diff --git a/WebInterface/NodeJSServer/src/style/partials/modal/_base.scss b/WebInterface/NodeJSServer/src/style/partials/modal/_base.scss deleted file mode 100644 index 006c241..0000000 --- a/WebInterface/NodeJSServer/src/style/partials/modal/_base.scss +++ /dev/null @@ -1,35 +0,0 @@ -@import '../colors'; - -.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: $primary; - 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 { - max-width: 85vw; - margin: 1rem; - text-align: center; - } - - .modal-body { - margin: 0.25rem; - } -} diff --git a/WebInterface/NodeJSServer/src/style/partials/modal/_login.scss b/WebInterface/NodeJSServer/src/style/partials/modal/_login.scss deleted file mode 100644 index 71adf61..0000000 --- a/WebInterface/NodeJSServer/src/style/partials/modal/_login.scss +++ /dev/null @@ -1,55 +0,0 @@ -.modal { - .modal-title { - white-space: nowrap; - overflow: hidden; - } - - .modal-body { - display: grid; - grid-template-columns: 10em 1fr; - grid-template-rows: 1fr 1fr 1fr; - grid-row-gap: 0.5rem; - - &.frst-warning { - grid-template-rows: 1fr 1rem 1fr 1fr; - } - - &.scnd-warning { - grid-template-rows: 1fr 1fr 1rem 1fr; - } - - div { - display: contents; - font-size: 1.25rem; - - label { - margin-right: 2rem; - grid-column: 1 / 2; - line-height: 1.25em; - } - - input { - grid-column: 2 / 3; - border-color: none; - } - - span { - margin-top: -0.5rem; - grid-column: 1 / 3; - color: $primary-warning-text; - background-color: $primary; - font-size: 0.9rem; - line-height: 1.2rem; - padding: 0.25rem; - - &.hidden { - display: none; - } - } - - button { - grid-column: 1 / 3; - } - } - } -} diff --git a/WebInterface/NodeJSServer/src/style/play.scss b/WebInterface/NodeJSServer/src/style/play.scss deleted file mode 100644 index 7286f74..0000000 --- a/WebInterface/NodeJSServer/src/style/play.scss +++ /dev/null @@ -1,17 +0,0 @@ -@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/copyright'; -@import 'partials/modal/base'; -@import 'partials/modal/login'; -@import 'partials/game'; -@import 'partials/game/chat'; - -remove_if_redirected { - width: 100vw; - height: 100vh; - text-align: center; -} |