aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/css
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/css')
-rw-r--r--frontend/src/css/Button.module.css91
-rw-r--r--frontend/src/css/Buttons.css3
-rw-r--r--frontend/src/css/Dialog.css5
-rw-r--r--frontend/src/css/Games.css6
-rw-r--r--frontend/src/css/Games.module.css61
-rw-r--r--frontend/src/css/Info.module.css21
-rw-r--r--frontend/src/css/Input.module.css15
-rw-r--r--frontend/src/css/Sidebar.module.css164
-rw-r--r--frontend/src/css/UploadRunDialog.css15
9 files changed, 357 insertions, 24 deletions
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 @@
1.default, .defaultWide, .sidebar, .logout {
2 border: none;
3 border-radius: 24px;
4 padding: 5px 10px;
5 background-color: #2b2e46;
6 font-family: BarlowSemiCondensed-Regular;
7 color: #CDCFDF;
8 font-size: 18px;
9 cursor: pointer;
10 transition: all 0.2s ease;
11}
12
13.sidebar.selected {
14 background-color: #202232;
15}
16
17.sidebar.selected:hover {
18 background-color: #202232;
19}
20
21.default:hover, .defaultWide:hover, .sidebar:hover {
22 background-color: rgb(38, 42, 62);
23}
24
25.defaultWide {
26 width: 100%;
27}
28
29.default.error, .defaultWide.error {
30 background-color: rgb(147, 45, 45);
31}
32
33.default.error:hover, .defaultWide.error {
34 background-color: rgb(105, 36, 36);
35}
36
37.sidebar {
38 display: flex;
39 width: 100%;
40 align-items: center;
41 font-family: BarlowSemiCondensed-Regular;
42 padding: 8px 12px;
43 height: 42px;
44 padding-right: 4px;
45 text-wrap: nowrap;
46 transition: all 0.2s ease;
47}
48
49.sidebar.min {
50 padding: 8px 9px;
51}
52
53.sidebar.min>span {
54 opacity: 0;
55 animation: sidebar_text_out 0.2s ease;
56 transform: translateX(-200px);
57}
58
59.sidebar img {
60 height: 24px;
61}
62
63.sidebar.profile>img {
64 border-radius: 24px;
65}
66
67.sidebar>span {
68 padding: 0px 8px;
69 transition: all 0.2s ease;
70}
71
72.logout {
73 background-color: #00000000;
74 display: flex;
75 align-items: center;
76}
77
78@keyframes sidebar_text_out {
79 0% {
80 opacity: 1;
81 transform: translateX(0px);
82 }
83 50% {
84 opacity: 0;
85 transform: translateX(0px);
86 }
87 60%, 100% {
88 transform: translateX(-200px);
89 }
90}
91
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 @@
1.default {
2
3}
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 @@
61 white-space: pre-wrap; 61 white-space: pre-wrap;
62} 62}
63 63
64.dialog-btns-container button {
65 border-radius: 24px;
66 padding: 5px 10px;
67}
68
69.dialog-btns-container button:nth-child(2):hover { 64.dialog-btns-container button:nth-child(2):hover {
70 background-color: rgb(105, 36, 36); 65 background-color: rgb(105, 36, 36);
71} 66}
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 @@
11} 11}
12 12
13.games-page-item-content { 13.games-page-item-content {
14 position: absolute; 14 position: relative;
15 left: 50px;
16 width: calc(100% - 100px);
17} 15}
18 16
19.games-page-item-content a { 17.games-page-item-content a {
@@ -96,4 +94,4 @@ span>b {
96.games-page-item-body-item-num { 94.games-page-item-body-item-num {
97 font-size: 50px; 95 font-size: 50px;
98 font-family: BarlowCondensed-Bold; 96 font-family: BarlowCondensed-Bold;
99} \ No newline at end of file 97}
diff --git a/frontend/src/css/Games.module.css b/frontend/src/css/Games.module.css
new file mode 100644
index 0000000..4c598cd
--- /dev/null
+++ b/frontend/src/css/Games.module.css
@@ -0,0 +1,61 @@
1.content {
2 position: relative;
3 display: flex;
4 flex-direction: column;
5 width: 100%;
6 gap: 24px;
7 margin-top: 24px;
8}
9
10.content a {
11 position: relative;
12 width: 100%;
13}
14
15.game {
16 display: flex;
17 width: 100%;
18 flex-direction: column;
19 overflow: hidden;
20 border-radius: 24px;
21 background-color: var(--primary-dark);
22}
23
24.header {
25 display: flex;
26 overflow: hidden;
27 position: relative;
28 flex: 1;
29}
30
31.header span {
32 position: relative;
33 z-index: 2;
34 display: flex;
35 text-align: center;
36 justify-content: center;
37 width: 100%;
38 padding: 24px 0px;
39 text-wrap: nowrap;
40}
41
42.header div {
43 position: absolute;
44 top: 0;
45 left: 0;
46 width: 100%;
47 height: 100%;
48 z-index: 1;
49 background-size: cover;
50 filter: blur(4px);
51}
52
53.infoBlockContainer {
54 flex: 1;
55 display: flex;
56 gap: 12px;
57 margin: 12px;
58 align-items: center;
59 justify-content: center;
60 height: 50%;
61}
diff --git a/frontend/src/css/Info.module.css b/frontend/src/css/Info.module.css
new file mode 100644
index 0000000..144346e
--- /dev/null
+++ b/frontend/src/css/Info.module.css
@@ -0,0 +1,21 @@
1.infoBlock {
2 background-color: var(--primary);
3 display: flex;
4 width: 100%;
5 border-radius: 18px;
6 text-align: center;
7 justify-content: center;
8 padding: 4px 0px;
9 text-wrap: nowrap;
10}
11
12.infoBlock > div > span:nth-child(1) {
13 margin-top: 0px;
14 font-size: 26px;
15}
16
17.infoBlock > div > span:nth-child(3) {
18 font-size: 50px;
19 font-family: BarlowCondensed-Bold;
20}
21
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 @@
1.sidebar {
2 background-color: #161723;
3 color: var(--text-color);
4 border: none;
5 border-radius: 300px;
6 font-family: BarlowSemiCondensed-Regular;
7 padding: 8px;
8 width: calc(100% - 16px);
9 outline: none;
10 font-size: 18px;
11}
12
13.sidebar::placehoder {
14 color: #2b2e46;
15}
diff --git a/frontend/src/css/Sidebar.module.css b/frontend/src/css/Sidebar.module.css
new file mode 100644
index 0000000..356b062
--- /dev/null
+++ b/frontend/src/css/Sidebar.module.css
@@ -0,0 +1,164 @@
1.sidebar {
2 display: flex;
3 width: 350px;
4 min-width: 350px;
5 height: 100vh;
6 color: var(--text-color);
7 font-family: BarlowSemiCondensed-Regular;
8 font-size: 18px;
9 background-color: var(--primary-dark);
10 flex-direction: column;
11}
12
13.logo, .logo>a {
14 height: fit-content;
15 display: flex;
16 width: calc(100% - 4px);
17 text-decoration: none;
18 padding-left: 4px;
19 background-color: var(--primary)
20}
21
22.logo>a>img {
23 padding: 12px 8px;
24 height: 80px;
25}
26
27.logo>a>div {
28 display: flex;
29 flex-direction: column;
30 width: 100%;
31}
32
33.logo>a>div>span {
34 font-size: 36px;
35 font-family: BarlowCondensed-Regular;
36 padding-left: 8px;
37}
38
39.logoTitle b {
40 display: flex;
41 height: 60px;
42 font-size: 56px;
43}
44
45/* btns */
46.btns {
47 display: flex;
48 flex-direction: column;
49 padding: 0px 8px;
50 height: 100%;
51 width: calc(100% - 16px);
52 justify-content: space-between;
53 background-color: var(--primary);
54 transition: all 0.3s ease;
55}
56
57.topBtns>span {
58 height: 28px;
59 display: flex;
60}
61
62.btns.min {
63 width: 42px;
64}
65
66.topBtns, .bottomBtns {
67 display: flex;
68 flex-direction: column;
69 gap: 8px;
70}
71
72.topBtns {
73 padding-top: 8px;
74}
75
76.bottomBtns {
77 padding-bottom: 8px;
78}
79
80.topBtns a, .bottomBtns a {
81 width: 100%;
82}
83
84.btnsContainer {
85 display: flex;
86}
87
88/* Clusterfuck */
89.searchContainer {
90 width: 0%;
91 transition: all 0.3s ease, overflow-y 0.0s ease 0.1s;
92 opacity: 0;
93 overflow-y: hidden;
94}
95
96.searchContainer.min {
97 width: 100%;
98 transition: all 0.3s ease, opacity 0.1s ease 0.1s;
99 opacity: 1;
100 overflow-y: auto;
101}
102
103.inpContainer {
104 padding: 8px;
105}
106
107.searchResults {
108 overflow-y: auto;
109 height: calc(100% - 54px);
110}
111
112/* this can be improved */
113.result {
114 margin: 10px 6px 0 6px;
115 height: 80px;
116 width: 100%;
117 max-width: 285px;
118 animation: result_in 0.2s ease;
119 animation-fill-mode: backwards;
120 overflow: hidden;
121
122 border-radius: 20px;
123 text-align: center;
124
125 display: grid;
126
127 border: 0;
128 transition: background-color .1s;
129 background-color: #2b2e46;
130 grid-template-rows: 20% 20% 60%;
131 width: calc(100% - 15px);
132}
133.result>span{
134 color: #888;
135 font-size: 16px;
136 font-family: BarlowSemiCondensed-Regular;
137}
138.result>span:nth-child(3), .result.player span{
139 font-size: 30px;
140 color: #CDCFDF;
141}
142
143.result.player img {
144 height: 80px;
145}
146
147.result.player span {
148 display: flex;
149 text-align: left;
150 margin-left: 90px;
151 width: fit-content;
152}
153
154@keyframes result_in {
155 0% {
156 opacity: 0;
157 transform: translateY(20px);
158 }
159 100% {
160 opacity: 1;
161 transform: translateY(0px);
162 }
163}
164
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{
96 } 96 }
97} 97}
98 98
99button, input {
100 background-color: #2b2e46;
101 border: none;
102 font-family: BarlowSemiCondensed-Regular;
103 color: #CDCFDF;
104 font-size: 18px;
105 cursor: pointer;
106 padding: 5px 0px;
107 transition: all 0.2s ease;
108}
109
110.upload-run-buttons-container button { 99.upload-run-buttons-container button {
111 border-radius: 32px; 100 border-radius: 32px;
112} 101}
113 102
114button:hover {
115 background-color: #222538;
116}
117
118.upload-run-map-container { 103.upload-run-map-container {
119 display: flex; 104 display: flex;
120} 105}
generated by cgit v1.2.3 (git 2.39.1) at 2025-11-08 21:29:42 +0000