diff options
Diffstat (limited to 'WebInterface/NodeJSServer/src/style/partials')
5 files changed, 87 insertions, 6 deletions
diff --git a/WebInterface/NodeJSServer/src/style/partials/_colors.scss b/WebInterface/NodeJSServer/src/style/partials/_colors.scss index 2c954fa..4683325 100644 --- a/WebInterface/NodeJSServer/src/style/partials/_colors.scss +++ b/WebInterface/NodeJSServer/src/style/partials/_colors.scss @@ -4,6 +4,7 @@ $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; diff --git a/WebInterface/NodeJSServer/src/style/partials/_game.scss b/WebInterface/NodeJSServer/src/style/partials/_game.scss new file mode 100644 index 0000000..74b566b --- /dev/null +++ b/WebInterface/NodeJSServer/src/style/partials/_game.scss @@ -0,0 +1,13 @@ +@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/front-layer/_notifications.scss b/WebInterface/NodeJSServer/src/style/partials/front-layer/_notifications.scss index 4dd7361..d8e8159 100644 --- a/WebInterface/NodeJSServer/src/style/partials/front-layer/_notifications.scss +++ b/WebInterface/NodeJSServer/src/style/partials/front-layer/_notifications.scss @@ -2,7 +2,6 @@ .front-layer { .banner { - z-index: 1; background-color: white; border: none; border-radius: 16px 16px 0 0; @@ -34,6 +33,25 @@ 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; diff --git a/WebInterface/NodeJSServer/src/style/partials/game/_chat.scss b/WebInterface/NodeJSServer/src/style/partials/game/_chat.scss new file mode 100644 index 0000000..89b63b3 --- /dev/null +++ b/WebInterface/NodeJSServer/src/style/partials/game/_chat.scss @@ -0,0 +1,28 @@ +@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/_login.scss b/WebInterface/NodeJSServer/src/style/partials/modal/_login.scss index eed978f..71adf61 100644 --- a/WebInterface/NodeJSServer/src/style/partials/modal/_login.scss +++ b/WebInterface/NodeJSServer/src/style/partials/modal/_login.scss @@ -10,20 +10,41 @@ 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 { - flex-basis: 30%; margin-right: 2rem; - - grid-column: 1 2; + grid-column: 1 / 2; + line-height: 1.25em; } input { - flex-basis: calc(70% - 2rem); - grid-column: 2 3; + 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 { |