diff --git a/client/res/ui/game_ui.css b/client/res/ui/game_ui.css new file mode 100644 index 0000000..cbd039e --- /dev/null +++ b/client/res/ui/game_ui.css @@ -0,0 +1,79 @@ +/* Custom fonts */ +@font-face { + font-family: 'Spicy Rice'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url("../fonts/spicy_rice_v21/spicy_rice_v21.woff2") format("woff2"), url("../fonts/spicy_rice_v21/spicy_rice_v21.woff") format("woff"), url("../fonts/spicy_rice_v21/spicy_rice_v21.ttf") format("truetype"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +@font-face { + font-family: 'Titan One'; + font-style: normal; + font-weight: 400; + src: url("../fonts/titan_one_v13/titan_one_v13.woff2") format('woff2'), url("../fonts/titan_one_v13/titan_one_v13.woff") format('woff'), url("../fonts/titan_one_v13/titan_one_v13.ttf") format('truetype'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* Base elements */ +:root { + color-scheme: dark; + --footer-links-height: 2em; +} + +html { + margin: 0; +} + +body { + --body-margin: 0.375em; + margin: var(--body-margin); +} + +/* Themes */ +.dark { + background-color: #213C40; +} + +.light { + background-color: #B1EDE8; +} + +/* Utility classes */ +.hidden { + display: none; +} + +/* Footer */ +.footer_link { + color: white; + font-family: sans-serif; + font-size: 1em; + font-weight: bold; + margin: 0.5em; + text-decoration: none; +} + +.footer_link:visited { + color: unset; +} + +.footer_links { + align-content: center; + align-items: center; + display: flex; + flex-direction: row; + flex-wrap: wrap; + height: var(--footer-links-height); + justify-content: flex-end; +} + +/* Unsupported browser message */ +.unsupported_browser { + display: none; +} + +.unsupported_show { + display: block; +} \ No newline at end of file diff --git a/client/res/ui/start/game_ui_start.css b/client/res/ui/start/game_ui_start.css new file mode 100644 index 0000000..7cf98c8 --- /dev/null +++ b/client/res/ui/start/game_ui_start.css @@ -0,0 +1,72 @@ +:root { + --game-begin-margin: 2em; + --header-actions-height: 3em; +} + +.game_begin { + align-items: center; + border-radius: 1.5em; + background-image: url("../../images/start_background.png"); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: center; + margin: var(--game-begin-margin); + /* + Viewport height - body margin (x2: top + bottom) - header actions height + - footer links height - game begin margin + */ + height: calc(100vh - var(--body-margin) * 2 + - var(--game-begin-margin) * 2 + - var(--header-actions-height) + - var(--footer-links-height)); +} + +.game_title { + color: #BD1E1E; + font-family: "Spicy Rice", serif; + font-weight: bold; + font-size: 5em; + margin-block-start: 0; + margin-block-end: 0; + margin-top: 0.5em; + margin-bottom: 0.5em; + text-align: center; + -webkit-text-stroke: 1px black; + text-shadow: 1px 0 0 red, 0 1px 0 red, -1px 0 0 red, 0 -1px 0 red; +} + +.top_button { + background-color: transparent; + border: none; + fill: white; + cursor: pointer; + padding: 0; +} + +.header_actions { + display: flex; + justify-content: flex-end; + height: var(--header-actions-height); +} + +.action_button { + border-color: black; + border-style: solid; + border-width: 0.125em; + background-color: #BD1E1E; + border-radius: 1em; + cursor: pointer; + font-family: "Titan One", sans-serif; + font-size: 3em; + margin-left: auto; + margin-right: auto; + padding-top: 0.5em; + padding-bottom: 0.5em; + padding-left: 1em; + padding-right: 1em; + text-transform: uppercase; +} \ No newline at end of file