summaryrefslogtreecommitdiff
path: root/WebInterface/src/style/partials
diff options
context:
space:
mode:
Diffstat (limited to 'WebInterface/src/style/partials')
-rw-r--r--WebInterface/src/style/partials/_base.scss20
-rw-r--r--WebInterface/src/style/partials/_btn.scss75
-rw-r--r--WebInterface/src/style/partials/_colors.scss18
-rw-r--r--WebInterface/src/style/partials/_game.scss13
-rw-r--r--WebInterface/src/style/partials/backdrop/_base.scss58
-rw-r--r--WebInterface/src/style/partials/backdrop/_menu.scss43
-rw-r--r--WebInterface/src/style/partials/front-layer/_base.scss23
-rw-r--r--WebInterface/src/style/partials/front-layer/_copyright.scss10
-rw-r--r--WebInterface/src/style/partials/front-layer/_notifications.scss84
-rw-r--r--WebInterface/src/style/partials/front-layer/_server-listing.scss121
-rw-r--r--WebInterface/src/style/partials/game/_chat.scss28
-rw-r--r--WebInterface/src/style/partials/modal/_base.scss35
-rw-r--r--WebInterface/src/style/partials/modal/_login.scss55
13 files changed, 583 insertions, 0 deletions
diff --git a/WebInterface/src/style/partials/_base.scss b/WebInterface/src/style/partials/_base.scss
new file mode 100644
index 0000000..5f300fd
--- /dev/null
+++ b/WebInterface/src/style/partials/_base.scss
@@ -0,0 +1,20 @@
+@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/src/style/partials/_btn.scss b/WebInterface/src/style/partials/_btn.scss
new file mode 100644
index 0000000..cf5ee33
--- /dev/null
+++ b/WebInterface/src/style/partials/_btn.scss
@@ -0,0 +1,75 @@
+@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/src/style/partials/_colors.scss b/WebInterface/src/style/partials/_colors.scss
new file mode 100644
index 0000000..4683325
--- /dev/null
+++ b/WebInterface/src/style/partials/_colors.scss
@@ -0,0 +1,18 @@
+$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/src/style/partials/_game.scss b/WebInterface/src/style/partials/_game.scss
new file mode 100644
index 0000000..74b566b
--- /dev/null
+++ b/WebInterface/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/src/style/partials/backdrop/_base.scss b/WebInterface/src/style/partials/backdrop/_base.scss
new file mode 100644
index 0000000..1b7a924
--- /dev/null
+++ b/WebInterface/src/style/partials/backdrop/_base.scss
@@ -0,0 +1,58 @@
+@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/src/style/partials/backdrop/_menu.scss b/WebInterface/src/style/partials/backdrop/_menu.scss
new file mode 100644
index 0000000..26833d5
--- /dev/null
+++ b/WebInterface/src/style/partials/backdrop/_menu.scss
@@ -0,0 +1,43 @@
+@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/src/style/partials/front-layer/_base.scss b/WebInterface/src/style/partials/front-layer/_base.scss
new file mode 100644
index 0000000..6a2aa9a
--- /dev/null
+++ b/WebInterface/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/src/style/partials/front-layer/_copyright.scss b/WebInterface/src/style/partials/front-layer/_copyright.scss
new file mode 100644
index 0000000..31ac614
--- /dev/null
+++ b/WebInterface/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/src/style/partials/front-layer/_notifications.scss b/WebInterface/src/style/partials/front-layer/_notifications.scss
new file mode 100644
index 0000000..d8e8159
--- /dev/null
+++ b/WebInterface/src/style/partials/front-layer/_notifications.scss
@@ -0,0 +1,84 @@
+@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/src/style/partials/front-layer/_server-listing.scss b/WebInterface/src/style/partials/front-layer/_server-listing.scss
new file mode 100644
index 0000000..7e67178
--- /dev/null
+++ b/WebInterface/src/style/partials/front-layer/_server-listing.scss
@@ -0,0 +1,121 @@
+@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/src/style/partials/game/_chat.scss b/WebInterface/src/style/partials/game/_chat.scss
new file mode 100644
index 0000000..89b63b3
--- /dev/null
+++ b/WebInterface/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/src/style/partials/modal/_base.scss b/WebInterface/src/style/partials/modal/_base.scss
new file mode 100644
index 0000000..006c241
--- /dev/null
+++ b/WebInterface/src/style/partials/modal/_base.scss
@@ -0,0 +1,35 @@
+@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/src/style/partials/modal/_login.scss b/WebInterface/src/style/partials/modal/_login.scss
new file mode 100644
index 0000000..71adf61
--- /dev/null
+++ b/WebInterface/src/style/partials/modal/_login.scss
@@ -0,0 +1,55 @@
+.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;
+ }
+ }
+ }
+}
generated by cgit v1.2.3-54-g00ecf (git 2.45.0) at 2024-05-20 15:10:29 +0000