From dbaf69557c0d6e648120b068fec1920b9391a24a Mon Sep 17 00:00:00 2001 From: Kyle Gunger Date: Fri, 18 Sep 2020 12:19:44 -0400 Subject: Update from local repo --- styles/client/base.css | 275 +++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 246 insertions(+), 29 deletions(-) (limited to 'styles/client/base.css') diff --git a/styles/client/base.css b/styles/client/base.css index cae61f6..889d7bf 100644 --- a/styles/client/base.css +++ b/styles/client/base.css @@ -11,12 +11,19 @@ html, body { display: block; + background-color: var(--main-bg); + color: var(--main-color); + + overflow: hidden; } -.topbar { +/* Topbar rules */ + +.topbar +{ position: fixed; - background-color: white; + background-color: var(--gui-bg-main); top: 0; left: 0; @@ -29,66 +36,95 @@ html, body { z-index: 1; } -.top-buttons { +.top-buttons +{ display: flex; } -button, input[type="button"] { - display: inline-block; - border: none; - background-color: dodgerblue; - padding: 10px; - font-size: medium; - border-radius: 5px; - box-sizing: border-box; -} - -button.top-button { +button.top-button +{ border-radius: 0; - background-color: white; + background-color: var(--top-bg-button); + color: var(--top-color-button); flex: 1; - border-left: 1px solid black; - border-right: 1px solid black; + border-left: 1px solid var(--top-border); + border-right: 1px solid var(--top-border); + + transition-duration: 0.2s; +} + +button.top-button:hover { + background-color: var(--top-bg-button-hover); + color: var(--top-color-button-hover); } -.top-buttons > button:first-child { +button.top-button:active { + background-color: var(--top-bg-button-active); + color: var(--top-color-button-active); +} + +.top-buttons > button:first-child +{ border-left: none; } -.top-buttons > button:last-child { +.top-buttons > button:last-child +{ border-right: none; } -div.new-game { +div.new-game +{ flex: 1; flex-grow: 1; - border-top: 2px solid black; + border-top: 2px solid var(--top-border); } -div.mobile-settings { +div.mobile-settings +{ flex: 1; flex-grow: 1; - border-top: 2px solid black; + border-top: 2px solid var(--top-border); } -div.topbar > div.status { +div.topbar > div.status +{ height: 5px; flex-basis: auto; + + background-color: var(--server-bg-loading); } -div.stats { +div.topbar > div.status[s=loading] { + background-color: var(--server-bg-loading); +} + +div.topbar > div.status[s=ok] { + background-color: var(--server-bg-ok); +} + +div.topbar > div.status[s=closed] { + background-color: var(--server-bg-closed); +} + +/* Content rules */ + +div.stats +{ padding: 5px; display: flex; flex-direction: column; } -div.stats > div { +div.stats > div +{ flex: 1; display: flex; } -div.stats > div > span { +div.stats > div > span +{ flex-basis: content; display: inline-block; } @@ -100,13 +136,194 @@ div.stats > div > span:last-child { } div.game { - background-color: white; + background-color: var(--gui-bg-game); + color: var(--gui-color-game); border-radius: 5px; - box-shadow: lightgray 3px 3px 2px; + box-shadow: var(--gui-shadow-game) 3px 3px 2px; box-sizing: border-box; margin-bottom: 10px; + padding: 5px; + + text-align: left; } div.game:last-child { margin-bottom: none; +} + +div.settings { + display:flex; + flex-direction: column; + padding: 5px; +} + +/* Table rules */ + +.table { + position: absolute; + z-index: 2; + width: 100vw; + height: 100vh; + + animation-duration: 0.8s; + + background-color: var(--table-bg); + + overflow: hidden; +} + +.table[state=open] ,.table[state=close]{ + animation-name: slide-in; + animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); + animation-iteration-count: 1; + animation-direction: normal; + animation-fill-mode: forwards; +} + +.table[state=close] { + animation-direction: reverse; +} + +.table[state=closed] { + transform: translate(0, -100vh); + opacity: 0; +} + +@keyframes slide-in { + from { + transform: translate(0, -100vh); + opacity: 0; + } + + to { + transform: translate(0, 0); + opacity: 1; + } +} + +/* Chat */ + +div.chat { + border-top-left-radius: 10px; + background-color: var(--chat-bg); + color: var(--chat-color); + + width: 50vw; + height: 50vh; + display: flex; + flex-direction: column; + position: absolute; + right: -50vw; + + box-sizing: border-box; + + top: 50vh; + + transition-duration: 0.2s; + + padding: 5px; + + z-index: 4; +} + +div.chat[show=true] { + right: 0; +} + +button.toggle-chat { + position: absolute; + bottom: 5px; + left: -5px; + transform-origin: bottom left; + transform: rotate(-90deg); +} + +div.chat > div { + box-sizing: border-box; + margin: 5px; +} + +div.chat-select, div.chat-input { + flex-basis: content; + display: flex; +} + +div.chat-text { + flex: 1; + overflow-y: auto; + overflow-x: hidden; + padding: 5px; + background-color: var(--chat-bg-text); + border-radius: 10px; + border: 5px solid rgba(0, 0, 0, 0); +} + +div.chat-select > button { + flex: 1; + + margin-right: 2px; + margin-left: 2px; +} + +div.chat-select > button[active="false"] { + background-color: var(--chat-bg-inactive); +} + +div.chat-select > button[active="false"]:hover { + background-color: var(--chat-bg-inactive-hover); +} + +div.chat-select > button[active="false"]:active { + background-color: var(--chat-bg-inactive-active); +} + +div.chat-select > button[active="true"] { + background-color: var(--chat-bg-active); +} + +div.chat-select > button[active="true"]:hover { + background-color: var(--chat-bg-active-hover); +} + +div.chat-select > button[active="true"]:active { + background-color: var(--chat-bg-active-active); +} + +div.chat-select > button:first-child { + margin-left: 0; +} + +div.chat-select > button:last-child { + margin-right: 0; +} + +div.chat-input > input { + flex: 5; + + margin: 0; + margin-right: 5px; + + border-radius: 5px; + + transition-duration: 0.2s; + border: none; + + background-color: var(--chat-bg-input); +} + +div.chat-input > input:hover { + background-color: var(--chat-bg-input-hover); +} + +div.chat-input > input:focus { + background-color: var(--chat-bg-input-active); +} + +div.chat-input > button { + flex: 1; +} + +div.chat-text > div { + word-wrap: break-word; + word-break: break-all; } \ No newline at end of file -- cgit v1.2.3