From 207a2540101b2f216bde94ae53286d2e52f044e3 Mon Sep 17 00:00:00 2001 From: Wolfboy248 Date: Mon, 25 Nov 2024 09:20:01 +0100 Subject: frontend: begin port to css modules, sidebar refactor --- frontend/src/css/Button.module.css | 91 +++++++++++++++++++ frontend/src/css/Buttons.css | 3 + frontend/src/css/Dialog.css | 5 -- frontend/src/css/Games.css | 6 +- frontend/src/css/Input.module.css | 15 ++++ frontend/src/css/Sidebar.module.css | 163 +++++++++++++++++++++++++++++++++++ frontend/src/css/UploadRunDialog.css | 15 ---- 7 files changed, 274 insertions(+), 24 deletions(-) create mode 100644 frontend/src/css/Button.module.css create mode 100644 frontend/src/css/Buttons.css create mode 100644 frontend/src/css/Input.module.css create mode 100644 frontend/src/css/Sidebar.module.css (limited to 'frontend/src/css') diff --git a/frontend/src/css/Button.module.css b/frontend/src/css/Button.module.css new file mode 100644 index 0000000..d1c3ad7 --- /dev/null +++ b/frontend/src/css/Button.module.css @@ -0,0 +1,91 @@ +.default, .defaultWide, .sidebar, .logout { + border: none; + border-radius: 24px; + padding: 5px 10px; + background-color: #2b2e46; + font-family: BarlowSemiCondensed-Regular; + color: #CDCFDF; + font-size: 18px; + cursor: pointer; + transition: all 0.2s ease; +} + +.sidebar.selected { + background-color: #202232; +} + +.sidebar.selected:hover { + background-color: #202232; +} + +.default:hover, .defaultWide:hover, .sidebar:hover { + background-color: rgb(38, 42, 62); +} + +.defaultWide { + width: 100%; +} + +.default.error, .defaultWide.error { + background-color: rgb(147, 45, 45); +} + +.default.error:hover, .defaultWide.error { + background-color: rgb(105, 36, 36); +} + +.sidebar { + display: flex; + width: 100%; + align-items: center; + font-family: BarlowSemiCondensed-Regular; + padding: 8px 12px; + height: 42px; + padding-right: 4px; + text-wrap: nowrap; + transition: all 0.2s ease; +} + +.sidebar.min { + padding: 8px 9px; +} + +.sidebar.min>span { + opacity: 0; + animation: sidebar_text_out 0.2s ease; + transform: translateX(-200px); +} + +.sidebar img { + height: 24px; +} + +.sidebar.profile>img { + border-radius: 24px; +} + +.sidebar>span { + padding: 0px 8px; + transition: all 0.2s ease; +} + +.logout { + background-color: #00000000; + display: flex; + align-items: center; +} + +@keyframes sidebar_text_out { + 0% { + opacity: 1; + transform: translateX(0px); + } + 50% { + opacity: 0; + transform: translateX(0px); + } + 60%, 100% { + transform: translateX(-200px); + } +} + diff --git a/frontend/src/css/Buttons.css b/frontend/src/css/Buttons.css new file mode 100644 index 0000000..de8f31d --- /dev/null +++ b/frontend/src/css/Buttons.css @@ -0,0 +1,3 @@ +.default { + +} diff --git a/frontend/src/css/Dialog.css b/frontend/src/css/Dialog.css index fc557d2..51bf0ae 100644 --- a/frontend/src/css/Dialog.css +++ b/frontend/src/css/Dialog.css @@ -61,11 +61,6 @@ white-space: pre-wrap; } -.dialog-btns-container button { - border-radius: 24px; - padding: 5px 10px; -} - .dialog-btns-container button:nth-child(2):hover { background-color: rgb(105, 36, 36); } diff --git a/frontend/src/css/Games.css b/frontend/src/css/Games.css index ec57a71..9270a98 100644 --- a/frontend/src/css/Games.css +++ b/frontend/src/css/Games.css @@ -11,9 +11,7 @@ } .games-page-item-content { - position: absolute; - left: 50px; - width: calc(100% - 100px); + position: relative; } .games-page-item-content a { @@ -96,4 +94,4 @@ span>b { .games-page-item-body-item-num { font-size: 50px; font-family: BarlowCondensed-Bold; -} \ No newline at end of file +} diff --git a/frontend/src/css/Input.module.css b/frontend/src/css/Input.module.css new file mode 100644 index 0000000..c216f73 --- /dev/null +++ b/frontend/src/css/Input.module.css @@ -0,0 +1,15 @@ +.sidebar { + background-color: #161723; + color: var(--text-color); + border: none; + border-radius: 300px; + font-family: BarlowSemiCondensed-Regular; + padding: 8px; + width: calc(100% - 16px); + outline: none; + font-size: 18px; +} + +.sidebar::placehoder { + color: #2b2e46; +} diff --git a/frontend/src/css/Sidebar.module.css b/frontend/src/css/Sidebar.module.css new file mode 100644 index 0000000..9436a93 --- /dev/null +++ b/frontend/src/css/Sidebar.module.css @@ -0,0 +1,163 @@ +.sidebar { + display: flex; + width: 350px; + min-width: 350px; + height: 100vh; + color: var(--text-color); + font-family: BarlowSemiCondensed-Regular; + font-size: 18px; + background-color: var(--primary-dark); + flex-direction: column; +} + +.logo, .logo>a { + height: fit-content; + display: flex; + width: calc(100% - 4px); + text-decoration: none; + padding-left: 4px; + background-color: var(--primary) +} + +.logo>a>img { + padding: 12px 8px; + height: 80px; +} + +.logo>a>div { + display: flex; + flex-direction: column; + width: 100%; +} + +.logo>a>div>span { + font-size: 36px; + font-family: BarlowCondensed-Regular; + padding-left: 8px; +} + +.logoTitle { + display: flex; + height: 60px; + font-size: 56px; +} + +/* btns */ +.btns { + display: flex; + flex-direction: column; + padding: 0px 8px; + height: 100%; + width: calc(100% - 16px); + justify-content: space-between; + background-color: var(--primary); + transition: all 0.3s ease; +} + +.topBtns>span { + height: 28px; + display: flex; +} + +.btns.min { + width: 42px; +} + +.topBtns, .bottomBtns { + display: flex; + flex-direction: column; + gap: 8px; +} + +.topBtns { + padding-top: 8px; +} + +.bottomBtns { + padding-bottom: 8px; +} + +.topBtns a, .bottomBtns a { + width: 100%; +} + +.btnsContainer { + display: flex; +} + +/* Clusterfuck */ +.searchContainer { + width: 0%; + transition: all 0.3s ease, overflow-y 0.0s ease 0.1s; + opacity: 0; + overflow-y: hidden; +} + +.searchContainer.min { + width: 100%; + transition: all 0.3s ease, opacity 0.1s ease 0.1s; + opacity: 1; + overflow-y: auto; +} + +.inpContainer { + padding: 8px; +} + +.searchResults { + overflow-y: auto; + height: calc(100% - 54px); +} + +.result { + margin: 10px 6px 0 6px; + height: 80px; + width: 100%; + max-width: 285px; + animation: result_in 0.2s ease; + animation-fill-mode: backwards; + overflow: hidden; + + border-radius: 20px; + text-align: center; + + display: grid; + + border: 0; + transition: background-color .1s; + background-color: #2b2e46; + grid-template-rows: 20% 20% 60%; + width: calc(100% - 15px); +} +.result>span{ + color: #888; + font-size: 16px; + font-family: BarlowSemiCondensed-Regular; +} +.result>span:nth-child(3), .result.player span{ + font-size: 30px; + color: #CDCFDF; +} + +.result.player img { + height: 80px; +} + +.result.player span { + display: flex; + text-align: left; + margin-left: 90px; + width: fit-content; +} + +@keyframes result_in { + 0% { + opacity: 0; + transform: translateY(20px); + } + 100% { + opacity: 1; + transform: translateY(0px); + } +} + diff --git a/frontend/src/css/UploadRunDialog.css b/frontend/src/css/UploadRunDialog.css index f129bb8..7cc2cf5 100644 --- a/frontend/src/css/UploadRunDialog.css +++ b/frontend/src/css/UploadRunDialog.css @@ -96,25 +96,10 @@ div#upload-run{ } } -button, input { - background-color: #2b2e46; - border: none; - font-family: BarlowSemiCondensed-Regular; - color: #CDCFDF; - font-size: 18px; - cursor: pointer; - padding: 5px 0px; - transition: all 0.2s ease; -} - .upload-run-buttons-container button { border-radius: 32px; } -button:hover { - background-color: #222538; -} - .upload-run-map-container { display: flex; } -- cgit v1.2.3