diff options
Diffstat (limited to 'WebInterface/src/style/partials/front-layer')
4 files changed, 238 insertions, 0 deletions
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; + } + } + } + } +} |