aboutsummaryrefslogtreecommitdiff
path: root/frontend
diff options
context:
space:
mode:
Diffstat (limited to 'frontend')
-rw-r--r--frontend/src/App.css53
-rw-r--r--frontend/src/api/Api.ts6
-rw-r--r--frontend/src/components/Sidebar.tsx174
-rw-r--r--frontend/src/css/About.css23
-rw-r--r--frontend/src/css/Dialog.css37
-rw-r--r--frontend/src/css/Games.css48
-rw-r--r--frontend/src/css/Login.css10
-rw-r--r--frontend/src/css/Maplist.css47
-rw-r--r--frontend/src/css/Maps.css650
-rw-r--r--frontend/src/css/ModMenu.css148
-rw-r--r--frontend/src/css/Profile.css229
-rw-r--r--frontend/src/css/Rankings.css33
-rw-r--r--frontend/src/css/Rules.css6
-rw-r--r--frontend/src/css/Sidebar.css380
-rw-r--r--frontend/src/css/UploadRunDialog.css124
15 files changed, 1495 insertions, 473 deletions
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 14a9972..eb39d85 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -2,17 +2,14 @@ main {
2 overflow: auto; 2 overflow: auto;
3 overflow-x: hidden; 3 overflow-x: hidden;
4 position: relative; 4 position: relative;
5 5 width: calc(100% - 23.75rem);
6 width: calc(100% - 380px);
7 height: 100vh; 6 height: 100vh;
8 left: 350px; 7 left: 21.875rem;
9 8 padding-right: 1.875rem;
10 padding-right: 30px; 9 font-size: 2.5rem;
11
12 font-size: 40px;
13 font-family: BarlowSemiCondensed-Regular; 10 font-family: BarlowSemiCondensed-Regular;
14 color: #cdcfdf; 11 color: #cdcfdf;
15 12 transition: all 0.3s ease;
16} 13}
17 14
18a { 15a {
@@ -39,7 +36,7 @@ body {
39 background-image: linear-gradient(-90deg, #202232 0%, #202232 25%, #2a2c41 50%, #202232 75%, #202232 100%); 36 background-image: linear-gradient(-90deg, #202232 0%, #202232 25%, #2a2c41 50%, #202232 75%, #202232 100%);
40 user-select: none; 37 user-select: none;
41 color: #00000000; 38 color: #00000000;
42 border-radius: 1000px; 39 border-radius: 62.5rem;
43} 40}
44 41
45@keyframes loader { 42@keyframes loader {
@@ -57,20 +54,21 @@ body {
57} 54}
58 55
59.loader { 56.loader {
60 width: 48px; 57 width: 3rem;
61 height: 48px; 58 height: 3rem;
62 border: 5px solid #FFF; 59 border: 0.3125rem solid #FFF;
63 border-bottom-color: transparent; 60 border-bottom-color: transparent;
64 border-radius: 50%; 61 border-radius: 50%;
65 display: inline-block; 62 display: inline-block;
66 box-sizing: border-box; 63 box-sizing: border-box;
67 animation: rotation 1s linear infinite; 64 animation: rotation 1s linear infinite;
68 } 65}
69 66
70@keyframes rotation { 67@keyframes rotation {
71 0% { 68 0% {
72 transform: rotate(0deg); 69 transform: rotate(0deg);
73 } 70 }
71
74 100% { 72 100% {
75 transform: rotate(360deg); 73 transform: rotate(360deg);
76 } 74 }
@@ -95,3 +93,32 @@ body {
95 font-family: 'BarlowSemiCondensed-SemiBold'; 93 font-family: 'BarlowSemiCondensed-SemiBold';
96 src: local('BarlowSemiCondensed-Regular'), url(./fonts/BarlowSemiCondensed-SemiBold.ttf) format('truetype'); 94 src: local('BarlowSemiCondensed-Regular'), url(./fonts/BarlowSemiCondensed-SemiBold.ttf) format('truetype');
97} 95}
96
97@media screen and (max-width: 768px) {
98 * {
99 box-sizing: border-box;
100 }
101
102 main {
103 width: 100%;
104 left: 0;
105 padding: 5rem 20px 1rem 20px;
106 height: auto;
107 min-height: 100vh;
108 font-size: 1.5rem;
109 }
110
111 .loader {
112 width: 2.5rem;
113 height: 2.5rem;
114 border: 0.25rem solid #FFF;
115 }
116}
117
118@media screen and (min-width: 1920px) {
119 main {
120 width: calc(100% - 25rem);
121 left: 23rem;
122 padding-right: 2rem;
123 }
124} \ No newline at end of file
diff --git a/frontend/src/api/Api.ts b/frontend/src/api/Api.ts
index 862e688..c84714d 100644
--- a/frontend/src/api/Api.ts
+++ b/frontend/src/api/Api.ts
@@ -12,7 +12,7 @@ import { UploadRunContent } from '@customTypes/Content';
12export const API = { 12export const API = {
13 // Auth 13 // Auth
14 get_token: () => get_token(), 14 get_token: () => get_token(),
15 15
16 delete_token: () => delete_token(), 16 delete_token: () => delete_token(),
17 // User 17 // User
18 get_user: (user_id: string) => get_user(user_id), 18 get_user: (user_id: string) => get_user(user_id),
@@ -42,10 +42,10 @@ export const API = {
42 delete_map_record: (token: string, map_id: number, record_id: number) => delete_map_record(token, map_id, record_id), 42 delete_map_record: (token: string, map_id: number, record_id: number) => delete_map_record(token, map_id, record_id),
43 // Mod 43 // Mod
44 post_map_summary: (token: string, map_id: string, content: ModMenuContent) => post_map_summary(token, map_id, content), 44 post_map_summary: (token: string, map_id: string, content: ModMenuContent) => post_map_summary(token, map_id, content),
45 45
46 put_map_image: (token: string, map_id: string, image: string) => put_map_image(token, map_id, image), 46 put_map_image: (token: string, map_id: string, image: string) => put_map_image(token, map_id, image),
47 put_map_summary: (token: string, map_id: string, content: ModMenuContent) => put_map_summary(token, map_id, content), 47 put_map_summary: (token: string, map_id: string, content: ModMenuContent) => put_map_summary(token, map_id, content),
48 48
49 delete_map_summary: (token: string, map_id: string, route_id: number) => delete_map_summary(token, map_id, route_id), 49 delete_map_summary: (token: string, map_id: string, route_id: number) => delete_map_summary(token, map_id, route_id),
50}; 50};
51 51
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 67f7f3d..f972c6f 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -19,7 +19,9 @@ const Sidebar: React.FC<SidebarProps> = ({ setToken, profile, setProfile, onUplo
19 19
20 const [searchData, setSearchData] = React.useState<Search | undefined>(undefined); 20 const [searchData, setSearchData] = React.useState<Search | undefined>(undefined);
21 const [isSidebarLocked, setIsSidebarLocked] = React.useState<boolean>(false); 21 const [isSidebarLocked, setIsSidebarLocked] = React.useState<boolean>(false);
22 const [isSidebarOpen, setSidebarOpen] = React.useState<boolean>(true); 22 const [isSidebarOpen, setSidebarOpen] = React.useState<boolean>(false);
23 const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState<boolean>(false);
24 const [isMobileSearchOpen, setIsMobileSearchOpen] = React.useState<boolean>(false);
23 25
24 const location = useLocation(); 26 const location = useLocation();
25 const path = location.pathname; 27 const path = location.pathname;
@@ -88,18 +90,34 @@ const Sidebar: React.FC<SidebarProps> = ({ setToken, profile, setProfile, onUplo
88 }; 90 };
89 91
90 const _handle_sidebar_lock = () => { 92 const _handle_sidebar_lock = () => {
91 if (!isSidebarLocked) { 93 if (window.innerWidth <= 768) {
92 _handle_sidebar_hide() 94 setIsMobileSearchOpen(!isMobileSearchOpen);
93 setIsSidebarLocked(true); 95 } else {
94 setTimeout(() => setIsSidebarLocked(false), 300); 96 if (!isSidebarLocked) {
97 _handle_sidebar_hide()
98 setIsSidebarLocked(true);
99 setTimeout(() => setIsSidebarLocked(false), 300);
100 }
95 } 101 }
96 }; 102 };
97 103
104 const _close_mobile_search = () => {
105 setIsMobileSearchOpen(false);
106 };
107
98 const _handle_search_change = async (q: string) => { 108 const _handle_search_change = async (q: string) => {
99 const searchResponse = await API.get_search(q); 109 const searchResponse = await API.get_search(q);
100 setSearchData(searchResponse); 110 setSearchData(searchResponse);
101 }; 111 };
102 112
113 const _toggle_mobile_menu = () => {
114 setIsMobileMenuOpen(!isMobileMenuOpen);
115 };
116
117 const _close_mobile_menu = () => {
118 setIsMobileMenuOpen(false);
119 };
120
103 React.useEffect(() => { 121 React.useEffect(() => {
104 if (path === "/") { handle_sidebar_click(1) } 122 if (path === "/") { handle_sidebar_click(1) }
105 else if (path.includes("games")) { handle_sidebar_click(2) } 123 else if (path.includes("games")) { handle_sidebar_click(2) }
@@ -112,90 +130,110 @@ const Sidebar: React.FC<SidebarProps> = ({ setToken, profile, setProfile, onUplo
112 }, [path]); 130 }, [path]);
113 131
114 return ( 132 return (
115 <div id='sidebar'> 133 <>
116 <Link to="/" tabIndex={-1}> 134 <div id='mobile-topbar'>
117 <div id='logo'> {/* logo */} 135 <Link to="/" tabIndex={-1}>
118 <img src={LogoIcon} alt="" height={"80px"} /> 136 <div id='mobile-logo'>
119 <div id='logo-text'> 137 <img src={LogoIcon} alt="" height={"50px"} />
120 <span><b>PORTAL 2</b></span><br /> 138 <div id='mobile-logo-text'>
121 <span>Least Portals Hub</span> 139 <span><b>LPHUB</b></span>
140 </div>
122 </div> 141 </div>
123 </div> 142 </Link>
124 </Link> 143 <button id='hamburger-menu' onClick={_toggle_mobile_menu} className={isMobileMenuOpen ? 'open' : ''}>
125 <div id='sidebar-list'> {/* List */} 144 <span></span>
126 <div id='sidebar-toplist'> {/* Top */} 145 <span></span>
146 <span></span>
147 </button>
148 </div>
149 <div id='sidebar' className={isMobileMenuOpen ? 'mobile-open' : ''}>
150 <Link to="/" tabIndex={-1}>
151 <div id='logo'> {/* logo */}
152 <img src={LogoIcon} alt="" height={"80px"} />
153 <div id='logo-text'>
154 <span><b>PORTAL 2</b></span><br />
155 <span>Least Portals Hub</span>
156 </div>
157 </div>
158 </Link>
159 <div id='sidebar-list'> {/* List */}
160 <div id='sidebar-toplist'> {/* Top */}
127 161
128 <button className='sidebar-button' onClick={() => _handle_sidebar_lock()}><img src={SearchIcon} alt="" /><span>Search</span></button> 162 <button className='sidebar-button' onClick={() => _handle_sidebar_lock()}><img src={SearchIcon} alt="" /><span>Search</span></button>
129 163
130 <span></span> 164 <span></span>
131 165
132 <Link to="/" tabIndex={-1}> 166 <Link to="/" tabIndex={-1} onClick={_close_mobile_menu}>
133 <button className='sidebar-button'><img src={HomeIcon} alt="homepage" /><span>Home&nbsp;Page</span></button> 167 <button className='sidebar-button'><img src={HomeIcon} alt="homepage" /><span>Home&nbsp;Page</span></button>
134 </Link> 168 </Link>
135 169
136 <Link to="/games" tabIndex={-1}> 170 <Link to="/games" tabIndex={-1} onClick={_close_mobile_menu}>
137 <button className='sidebar-button'><img src={PortalIcon} alt="games" /><span>Games</span></button> 171 <button className='sidebar-button'><img src={PortalIcon} alt="games" /><span>Games</span></button>
138 </Link> 172 </Link>
139 173
140 <Link to="/rankings" tabIndex={-1}> 174 <Link to="/rankings" tabIndex={-1} onClick={_close_mobile_menu}>
141 <button className='sidebar-button'><img src={FlagIcon} alt="rankings" /><span>Rankings</span></button> 175 <button className='sidebar-button'><img src={FlagIcon} alt="rankings" /><span>Rankings</span></button>
142 </Link> 176 </Link>
143 177
144 {/* <Link to="/news" tabIndex={-1}> 178 {/* <Link to="/news" tabIndex={-1}>
145 <button className='sidebar-button'><img src={NewsIcon} alt="news" /><span>News</span></button> 179 <button className='sidebar-button'><img src={NewsIcon} alt="news" /><span>News</span></button>
146 </Link> */} 180 </Link> */}
147 181
148 {/* <Link to="/scorelog" tabIndex={-1}> 182 {/* <Link to="/scorelog" tabIndex={-1}>
149 <button className='sidebar-button'><img src={TableIcon} alt="scorelogs" /><span>Score&nbsp;Logs</span></button> 183 <button className='sidebar-button'><img src={TableIcon} alt="scorelogs" /><span>Score&nbsp;Logs</span></button>
150 </Link> */} 184 </Link> */}
151 </div> 185 </div>
152 <div id='sidebar-bottomlist'> 186 <div id='sidebar-bottomlist'>
153 <span></span> 187 <span></span>
154 188
155 { 189 {
156 profile && profile.profile ? 190 profile && profile.profile ?
157 <button id='upload-run' className='submit-run-button' onClick={() => onUploadRun()}><img src={UploadIcon} alt="upload" /><span>Upload&nbsp;Record</span></button> 191 <button id='upload-run' className='submit-run-button' onClick={() => onUploadRun()}><img src={UploadIcon} alt="upload" /><span>Upload&nbsp;Record</span></button>
158 : 192 :
159 <span></span> 193 <span></span>
160 } 194 }
161 195
162 <Login setToken={setToken} profile={profile} setProfile={setProfile} /> 196 <Login setToken={setToken} profile={profile} setProfile={setProfile} />
163 197
164 <Link to="/rules" tabIndex={-1}> 198 <Link to="/rules" tabIndex={-1} onClick={_close_mobile_menu}>
165 <button className='sidebar-button'><img src={BookIcon} alt="rules" /><span>Leaderboard&nbsp;Rules</span></button> 199 <button className='sidebar-button'><img src={BookIcon} alt="rules" /><span>Leaderboard&nbsp;Rules</span></button>
166 </Link> 200 </Link>
167 201
168 <Link to="/about" tabIndex={-1}> 202 <Link to="/about" tabIndex={-1} onClick={_close_mobile_menu}>
169 <button className='sidebar-button'><img src={HelpIcon} alt="about" /><span>About&nbsp;LPHUB</span></button> 203 <button className='sidebar-button'><img src={HelpIcon} alt="about" /><span>About&nbsp;LPHUB</span></button>
170 </Link> 204 </Link>
205 </div>
171 </div> 206 </div>
172 </div> 207 <div id='search-panel' className={isMobileSearchOpen ? 'mobile-search-open' : ''}>
173 <div> 208 <input type="text" id='searchbar' placeholder='Search for map or a player...' onChange={(e) => _handle_search_change(e.target.value)} />
174 <input type="text" id='searchbar' placeholder='Search for map or a player...' onChange={(e) => _handle_search_change(e.target.value)} /> 209 <div className='mobile-search-header'>
210 <button className='mobile-search-close' onClick={_close_mobile_search}>✕</button>
211 </div>
175 212
176 <div id='search-data'> 213 <div id='search-data'>
177 214
178 {searchData?.maps.map((q, index) => ( 215 {searchData?.maps.map((q, index) => (
179 <Link to={`/maps/${q.id}`} className='search-map' key={index}> 216 <Link to={`/maps/${q.id}`} className='search-map' key={index} onClick={_close_mobile_search}>
180 <span>{q.game}</span> 217 <span>{q.game}</span>
181 <span>{q.chapter}</span> 218 <span>{q.chapter}</span>
182 <span>{q.map}</span> 219 <span>{q.map}</span>
183 </Link> 220 </Link>
184 ))} 221 ))}
185 {searchData?.players.map((q, index) => 222 {searchData?.players.map((q, index) =>
186 ( 223 (
187 <Link to={ 224 <Link to={
188 profile && q.steam_id === profile.steam_id ? `/profile` : 225 profile && q.steam_id === profile.steam_id ? `/profile` :
189 `/users/${q.steam_id}` 226 `/users/${q.steam_id}`
190 } className='search-player' key={index}> 227 } className='search-player' key={index} onClick={_close_mobile_search}>
191 <img src={q.avatar_link} alt='pfp'></img> 228 <img src={q.avatar_link} alt='pfp'></img>
192 <span style={{ fontSize: `${36 - q.user_name.length * 0.8}px` }}>{q.user_name}</span> 229 <span style={{ fontSize: `${36 - q.user_name.length * 0.8}px` }}>{q.user_name}</span>
193 </Link> 230 </Link>
194 ))} 231 ))}
195 232
233 </div>
196 </div> 234 </div>
197 </div> 235 </div>
198 </div> 236 </>
199 ); 237 );
200}; 238};
201 239
diff --git a/frontend/src/css/About.css b/frontend/src/css/About.css
index d4fdf07..c29e0bc 100644
--- a/frontend/src/css/About.css
+++ b/frontend/src/css/About.css
@@ -3,7 +3,7 @@
3 overflow-x: hidden; 3 overflow-x: hidden;
4 position: relative; 4 position: relative;
5 5
6 width: calc(100% - 380px); 6 width: calc(100% - 380px);
7 height: 100vh; 7 height: 100vh;
8 left: 350px; 8 left: 350px;
9 9
@@ -16,10 +16,27 @@
16} 16}
17 17
18h1 { 18h1 {
19 font-size: 80px; 19 font-size: 80px;
20} 20}
21 21
22h2 { 22h2 {
23 font-size: 60px; 23 font-size: 60px;
24} 24}
25 25
26@media screen and (max-width: 768px) {
27 #about {
28 width: 100%;
29 left: 0;
30 padding: 70px 20px 20px 20px;
31 height: calc(100vh - 60px);
32 font-size: 18px;
33 }
34
35 h1 {
36 font-size: 48px;
37 }
38
39 h2 {
40 font-size: 36px;
41 }
42} \ No newline at end of file
diff --git a/frontend/src/css/Dialog.css b/frontend/src/css/Dialog.css
index fc557d2..d2f0528 100644
--- a/frontend/src/css/Dialog.css
+++ b/frontend/src/css/Dialog.css
@@ -1,6 +1,6 @@
1.dimmer { 1.dimmer {
2 position: fixed; 2 position: fixed;
3 /* WHAT A SCHTUPID ACTION */ 3 /* WHAT A SCHTUPID ACTION */
4 width: 200%; 4 width: 200%;
5 height: 100%; 5 height: 100%;
6 background-color: rgba(0, 0, 0, 0.5); 6 background-color: rgba(0, 0, 0, 0.5);
@@ -8,12 +8,12 @@
8} 8}
9 9
10.dialog-container { 10.dialog-container {
11 position: absolute; 11 position: absolute;
12 top: 0px; 12 top: 0px;
13 left: -350px; 13 left: -350px;
14 width: 100%; 14 width: 100%;
15 height: 100%; 15 height: 100%;
16 z-index: 10000; 16 z-index: 10000;
17} 17}
18 18
19.dialog { 19.dialog {
@@ -40,7 +40,8 @@
40 padding: 8px; 40 padding: 8px;
41} 41}
42 42
43.dialog-header, .dialog-btns-container { 43.dialog-header,
44.dialog-btns-container {
44 background-color: #202232; 45 background-color: #202232;
45} 46}
46 47
@@ -93,3 +94,23 @@
93 opacity: 1; 94 opacity: 1;
94 } 95 }
95} 96}
97
98@media screen and (max-width: 768px) {
99 .dialog-container {
100 left: 0;
101 }
102
103 .dialog {
104 min-width: 300px;
105 max-width: 90vw;
106 }
107
108 .dialog-header {
109 font-size: 20px;
110 }
111
112 .dialog-description {
113 font-size: 16px;
114 padding: 12px 8px;
115 }
116} \ No newline at end of file
diff --git a/frontend/src/css/Games.css b/frontend/src/css/Games.css
index ec57a71..2fe5efa 100644
--- a/frontend/src/css/Games.css
+++ b/frontend/src/css/Games.css
@@ -96,4 +96,52 @@ span>b {
96.games-page-item-body-item-num { 96.games-page-item-body-item-num {
97 font-size: 50px; 97 font-size: 50px;
98 font-family: BarlowCondensed-Bold; 98 font-family: BarlowCondensed-Bold;
99}
100
101@media screen and (max-width: 768px) {
102 .games-page {
103 left: 0;
104 width: 100%;
105 padding-top: 60px;
106 }
107
108 .games-page-item-content {
109 left: 20px;
110 width: calc(100% - 40px);
111 }
112
113 .games-page-header {
114 margin-top: 20px;
115 margin-left: 20px;
116 }
117
118 span>b {
119 font-size: 40px;
120 }
121
122 .games-page-item {
123 height: auto;
124 min-height: 200px;
125 }
126
127 .games-page-item-header {
128 height: 120px;
129 }
130
131 .games-page-item-body {
132 height: auto;
133 padding: 10px 0;
134 }
135
136 .games-page-item-body-item {
137 height: 80px;
138 }
139
140 .games-page-item-body-item-title {
141 font-size: 20px;
142 }
143
144 .games-page-item-body-item-num {
145 font-size: 36px;
146 }
99} \ No newline at end of file 147} \ No newline at end of file
diff --git a/frontend/src/css/Login.css b/frontend/src/css/Login.css
index aa75f98..bb55237 100644
--- a/frontend/src/css/Login.css
+++ b/frontend/src/css/Login.css
@@ -2,11 +2,13 @@ span>img {
2 scale: 1.1; 2 scale: 1.1;
3 padding: 4px 0 0 8px; 3 padding: 4px 0 0 8px;
4} 4}
5.login>button>span{ 5
6.login>button>span {
6 max-width: 22ch; 7 max-width: 22ch;
7 overflow: hidden; 8 overflow: hidden;
8} 9}
9.login>button:nth-child(2){ 10
11.login>button:nth-child(2) {
10 position: relative; 12 position: relative;
11 left: 210px; 13 left: 210px;
12 width: 50px !important; 14 width: 50px !important;
@@ -16,9 +18,9 @@ span>img {
16 /* transition: opacity .1s; */ 18 /* transition: opacity .1s; */
17} 19}
18 20
19.login{ 21.login {
20 display: grid; 22 display: grid;
21 grid-template-columns: 50px auto 200px ; 23 grid-template-columns: 50px auto 200px;
22} 24}
23 25
24button:disabled { 26button:disabled {
diff --git a/frontend/src/css/Maplist.css b/frontend/src/css/Maplist.css
index 9880a27..65c3a28 100644
--- a/frontend/src/css/Maplist.css
+++ b/frontend/src/css/Maplist.css
@@ -72,7 +72,8 @@ h3 {
72 width: 100%; 72 width: 100%;
73} 73}
74 74
75.game-cat-button:hover, .game-cat-button.selected { 75.game-cat-button:hover,
76.game-cat-button.selected {
76 background-color: #202232; 77 background-color: #202232;
77} 78}
78 79
@@ -196,3 +197,47 @@ h3 {
196 opacity: 1; 197 opacity: 1;
197 } 198 }
198} 199}
200
201@media screen and (max-width: 768px) {
202 h1 {
203 font-size: 36px;
204 text-align: center;
205 }
206
207 h3 {
208 font-size: 28px;
209 margin: 0px 5px;
210 }
211
212 .portal-count {
213 font-size: 60px;
214 }
215
216 .blur.map span:nth-child(1) {
217 font-size: 40px;
218 }
219
220 .game-header-categories {
221 flex-direction: column;
222 height: auto;
223 }
224
225 .game-cat-button {
226 font-size: 18px;
227 padding: 10px 0;
228 }
229
230 .maplist {
231 grid-template-columns: repeat(1, 1fr);
232 grid-gap: 20px;
233 margin: 20px 0px;
234 }
235
236 .maplist-entry span {
237 font-size: 16px;
238 }
239
240 .map-entry-image {
241 height: 150px;
242 }
243} \ No newline at end of file
diff --git a/frontend/src/css/Maps.css b/frontend/src/css/Maps.css
index 5f28055..4c90c6f 100644
--- a/frontend/src/css/Maps.css
+++ b/frontend/src/css/Maps.css
@@ -1,16 +1,18 @@
1#background-image{ 1#background-image {
2 z-index: -1; 2 z-index: -1;
3 position: absolute; 3 position: absolute;
4 opacity: 10%; 4 opacity: 10%;
5 height: 50%; 5 height: 50%;
6 width: 100% 6 width: 100%
7} 7}
8#background-image>img{ 8
9#background-image>img {
9 object-fit: cover; 10 object-fit: cover;
10 width: 100%; 11 width: 100%;
11 height: 100%; 12 height: 100%;
12} 13}
13#background-image::before{ 14
15#background-image::before {
14 content: ""; 16 content: "";
15 position: absolute; 17 position: absolute;
16 width: 100%; 18 width: 100%;
@@ -20,12 +22,12 @@
20 22
21/* Section 1: map name*/ 23/* Section 1: map name*/
22 24
23#section1{ 25#section1 {
24 margin: 20px 0 0 0; 26 margin: 20px 0 0 0;
25 cursor: default; 27 cursor: default;
26} 28}
27 29
28.nav-button{ 30.nav-button {
29 height: 40px; 31 height: 40px;
30 background-color: #2b2e46; 32 background-color: #2b2e46;
31 33
@@ -35,49 +37,67 @@
35 border: none; 37 border: none;
36 transition: background-color .1s; 38 transition: background-color .1s;
37} 39}
40
38/* #section1>div>.nav-button:nth-child(1){border-radius: 0px;}:nth-child(1){border-radius: 20px 0 0 20px;} 41/* #section1>div>.nav-button:nth-child(1){border-radius: 0px;}:nth-child(1){border-radius: 20px 0 0 20px;}
39#section1>div>.nav-button:nth-child(2){border-radius: 0 20px 20px 0;margin-left: 2px;} */ 42#section1>div>.nav-button:nth-child(2){border-radius: 0 20px 20px 0;margin-left: 2px;} */
40.nav-button>span{padding: 0 8px 0 8px;} 43.nav-button>span {
41.nav-button:hover{background-color: #202232;cursor: pointer;} 44 padding: 0 8px 0 8px;
45}
46
47.nav-button:hover {
48 background-color: #202232;
49 cursor: pointer;
50}
42 51
43/* Section 2: navbar */ 52/* Section 2: navbar */
44#section2{ 53#section2 {
45 margin: 40px 0 0 0; 54 margin: 40px 0 0 0;
46 55
47 display: grid; gap: 2px; 56 display: grid;
57 gap: 2px;
48 grid-template-columns: 1fr 1fr 1fr; 58 grid-template-columns: 1fr 1fr 1fr;
49} 59}
50 60
51#section2>.nav-button{ 61#section2>.nav-button {
52 height: 50px; 62 height: 50px;
53 font-size: 22px; 63 font-size: 22px;
54 display: flex; 64 display: flex;
55 justify-content: center; 65 justify-content: center;
56 place-items: center; 66 place-items: center;
57} 67}
58#section2>.nav-button>img{scale: 1.2;} 68
59#section2>.nav-button:nth-child(1){border-radius: 30px 0 0 30px;} 69#section2>.nav-button>img {
60#section2>.nav-button:nth-child(3){border-radius: 0 30px 30px 0;} 70 scale: 1.2;
71}
72
73#section2>.nav-button:nth-child(1) {
74 border-radius: 30px 0 0 30px;
75}
76
77#section2>.nav-button:nth-child(3) {
78 border-radius: 0 30px 30px 0;
79}
61 80
62 81
63/* Section 3: category + history */ 82/* Section 3: category + history */
64 83
65#section3{ 84#section3 {
66 margin: 40px 0 0 0; 85 margin: 40px 0 0 0;
67 86
68 display: grid; 87 display: grid;
69 grid-template-columns: 1fr 1fr; 88 grid-template-columns: 1fr 1fr;
70 gap: 20px; 89 gap: 20px;
71} 90}
72 91
73#category{ 92#category {
74 display: grid; 93 display: grid;
75 height: 350px; 94 height: 350px;
76 border-radius: 24px; 95 border-radius: 24px;
77 overflow: hidden; 96 overflow: hidden;
78 97
79} 98}
80#category>p{ 99
100#category>p {
81 margin-bottom: 20px; 101 margin-bottom: 20px;
82 text-align: center; 102 text-align: center;
83 font-size: 50px; 103 font-size: 50px;
@@ -85,9 +105,13 @@
85 color: white; 105 color: white;
86} 106}
87 107
88p>span.portal-count{font-weight: bold;font-size: 100px;vertical-align: -15%;} 108p>span.portal-count {
109 font-weight: bold;
110 font-size: 100px;
111 vertical-align: -15%;
112}
89 113
90#category-image{ 114#category-image {
91 transform: translate(-20%, -15%); 115 transform: translate(-20%, -15%);
92 z-index: -1; 116 z-index: -1;
93 overflow: hidden; 117 overflow: hidden;
@@ -96,75 +120,103 @@ p>span.portal-count{font-weight: bold;font-size: 100px;vertical-align: -15%;}
96 filter: blur(4px) contrast(80%) brightness(80%); 120 filter: blur(4px) contrast(80%) brightness(80%);
97} 121}
98 122
99#category>span{ 123#category>span {
100 margin-top: 70px; 124 margin-top: 70px;
101 background-color: #202232; 125 background-color: #202232;
102 126
103 display: grid; 127 display: grid;
104 gap: 2px; 128 gap: 2px;
105} 129}
106#category>span>button{ 130
131#category>span>button {
107 font-family: inherit; 132 font-family: inherit;
108 font-size: 18px; 133 font-size: 18px;
109 border: none; 134 border: none;
110 height: 40px; 135 height: 40px;
111 color: inherit; 136 color: inherit;
112 137
113 cursor: pointer; 138 cursor: pointer;
114 transition: background-color .1s; 139 transition: background-color .1s;
115} 140}
116 141
117 142
118 143
119#history>div>hr{border: 1px solid #2b2e46;margin: 8px 20px 0px 20px;} 144#history>div>hr {
120#history{ 145 border: 1px solid #2b2e46;
146 margin: 8px 20px 0px 20px;
147}
148
149#history {
121 min-width: 560px; 150 min-width: 560px;
122 background-color: #202232; 151 background-color: #202232;
123 border-radius: 24px; 152 border-radius: 24px;
124 153
125} 154}
126 155
127#records{overflow-y: auto; height: 256px;} 156#records {
128#records::-webkit-scrollbar{display: none;} 157 overflow-y: auto;
158 height: 256px;
159}
160
161#records::-webkit-scrollbar {
162 display: none;
163}
129 164
130.record-top, .record{ 165.record-top,
166.record {
131 font-size: 18px; 167 font-size: 18px;
132 display: grid; 168 display: grid;
133 text-align: center; 169 text-align: center;
134 grid-template-columns: 1fr 1fr 1fr; 170 grid-template-columns: 1fr 1fr 1fr;
135} 171}
136.record-top{font-weight: bold;margin: 20px 20px 0 20px;cursor: default;} 172
137.record{ 173.record-top {
174 font-weight: bold;
175 margin: 20px 20px 0 20px;
176 cursor: default;
177}
178
179.record {
138 margin: 10px 20px 10px 20px; 180 margin: 10px 20px 10px 20px;
139 height: 44px; width: calc(100% - 40px); 181 height: 44px;
140 182 width: calc(100% - 40px);
183
141 color: inherit; 184 color: inherit;
142 border-radius: 40px; 185 border-radius: 40px;
143 place-items: center; 186 place-items: center;
144 187
145 border: 0; 188 border: 0;
146 cursor: pointer; 189 cursor: pointer;
147 transition: background-color .1s; 190 transition: background-color .1s;
148} 191}
149#history>span{ 192
193#history>span {
150 border-top: #202232 solid 2px; 194 border-top: #202232 solid 2px;
151 display: grid; 195 display: grid;
152 grid-template-columns: 1fr 1fr; 196 grid-template-columns: 1fr 1fr;
153} 197}
154#history>span>button{ 198
155 width: 100%; height: 40px; 199#history>span>button {
200 width: 100%;
201 height: 40px;
156 font-family: inherit; 202 font-family: inherit;
157 font-size: 18px; 203 font-size: 18px;
158 border: none; 204 border: none;
159 color: inherit; 205 color: inherit;
160 206
161 cursor: pointer; 207 cursor: pointer;
162 transition: background-color .1s; 208 transition: background-color .1s;
163} 209}
164#history>span>button:nth-child(1){border-radius: 0 0 0 24px;}
165#history>span>button:nth-child(2){border-radius: 0 0 24px 0;}
166 210
167#graph{ 211#history>span>button:nth-child(1) {
212 border-radius: 0 0 0 24px;
213}
214
215#history>span>button:nth-child(2) {
216 border-radius: 0 0 24px 0;
217}
218
219#graph {
168 display: grid; 220 display: grid;
169 grid-template-columns: 20px 1fr; 221 grid-template-columns: 20px 1fr;
170 grid-template-rows: 1fr 20px; 222 grid-template-rows: 1fr 20px;
@@ -173,45 +225,53 @@ p>span.portal-count{font-weight: bold;font-size: 100px;vertical-align: -15%;}
173 margin: 10px 10px 5px 10px; 225 margin: 10px 10px 5px 10px;
174 overflow: hidden; 226 overflow: hidden;
175} 227}
176#graph>div:nth-child(1){ /* numbers */ 228
177 width: 20px; 229#graph>div:nth-child(1) {
230 /* numbers */
231 width: 20px;
178 display: grid; 232 display: grid;
179 place-items: center; 233 place-items: center;
180 /* background-color: blue; */ 234 /* background-color: blue; */
181} 235}
182#graph>div:nth-child(1)>span{ 236
237#graph>div:nth-child(1)>span {
183 font-size: 12px; 238 font-size: 12px;
184 line-height: 0; 239 line-height: 0;
185} 240}
186 241
187#graph>div:nth-child(2){ /* big graph */ 242#graph>div:nth-child(2) {
243 /* big graph */
188 position: relative; 244 position: relative;
189 display: grid; 245 display: grid;
190} 246}
191#graph>div:nth-child(2)>tr{ 247
248#graph>div:nth-child(2)>tr {
192 display: flex; 249 display: flex;
193 align-items: center; 250 align-items: center;
194 grid-template-columns: repeat(auto-fit, minmax(1px, 1fr)); 251 grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
195} 252}
196#graph>div:nth-child(2)>tr>td.graph_hor{ 253
197 width: 100%; 254#graph>div:nth-child(2)>tr>td.graph_hor {
255 width: 100%;
198 height: 0; 256 height: 0;
199 padding: 0; 257 padding: 0;
200 258
201 outline: 1px solid red; 259 outline: 1px solid red;
202} 260}
203#graph>div:nth-child(2)>tr>td.graph_ver{ 261
204 width: 0; 262#graph>div:nth-child(2)>tr>td.graph_ver {
263 width: 0;
205 height: 100%; 264 height: 100%;
206 padding: 0; 265 padding: 0;
207 266
208 outline: 1px solid blue; 267 outline: 1px solid blue;
209 transform: translateY(50%); 268 transform: translateY(50%);
210 z-index: 0; 269 z-index: 0;
211 overflow: hidden; 270 overflow: hidden;
212} 271}
213 272
214#graph>div:nth-child(3){ /* dates */ 273#graph>div:nth-child(3) {
274 /* dates */
215 padding-right: 20px; 275 padding-right: 20px;
216 z-index: 1; 276 z-index: 1;
217 height: 16px; 277 height: 16px;
@@ -223,7 +283,7 @@ p>span.portal-count{font-weight: bold;font-size: 100px;vertical-align: -15%;}
223 grid-template-columns: repeat(auto-fit, minmax(1px, 1fr)); 283 grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
224} 284}
225 285
226.graph-button{ 286.graph-button {
227 position: absolute; 287 position: absolute;
228 padding: 0; 288 padding: 0;
229 border: 5px solid white; 289 border: 5px solid white;
@@ -232,12 +292,15 @@ p>span.portal-count{font-weight: bold;font-size: 100px;vertical-align: -15%;}
232 transform: translateX(-50%); 292 transform: translateX(-50%);
233} 293}
234 294
235#history>div>h5{text-align: center;height: 197px;} 295#history>div>h5 {
296 text-align: center;
297 height: 197px;
298}
236 299
237 300
238/* Section 4: Difficulty + count */ 301/* Section 4: Difficulty + count */
239 302
240#section4{ 303#section4 {
241 display: grid; 304 display: grid;
242 grid-template-columns: 1fr 1fr; 305 grid-template-columns: 1fr 1fr;
243 gap: 20px; 306 gap: 20px;
@@ -245,9 +308,9 @@ p>span.portal-count{font-weight: bold;font-size: 100px;vertical-align: -15%;}
245} 308}
246 309
247#difficulty, 310#difficulty,
248#count { 311#count {
249 background-color: #202232; 312 background-color: #202232;
250 min-width: 250px; 313 min-width: 250px;
251 text-align: center; 314 text-align: center;
252 cursor: default; 315 cursor: default;
253 316
@@ -255,69 +318,86 @@ p>span.portal-count{font-weight: bold;font-size: 100px;vertical-align: -15%;}
255 display: grid; 318 display: grid;
256 grid-template-rows: 20px 40px 40px; 319 grid-template-rows: 20px 40px 40px;
257} 320}
321
258#difficulty>span:nth-child(1), 322#difficulty>span:nth-child(1),
259#count>span:nth-child(1){ 323#count>span:nth-child(1) {
260 padding-top:10px; 324 padding-top: 10px;
261 font-size: 18px; 325 font-size: 18px;
262 color:#cdcfdf 326 color: #cdcfdf
263} 327}
264#difficulty>span:nth-child(2){ 328
329#difficulty>span:nth-child(2) {
265 font-size: 40px; 330 font-size: 40px;
266} 331}
267#difficulty>div{ 332
333#difficulty>div {
268 display: grid; 334 display: grid;
269 grid-template-columns: 1fr 1fr 1fr 1fr 1fr; 335 grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
270 padding: 0 calc(50% - 125px) 0 calc(50% - 125px); 336 padding: 0 calc(50% - 125px) 0 calc(50% - 125px);
271 place-items: center; 337 place-items: center;
272} 338}
273 339
274.difficulty-rating{ 340.difficulty-rating {
275 border-radius: 24px; 341 border-radius: 24px;
276 width: 40px; height: 3px; 342 width: 40px;
343 height: 3px;
277 background-color: #2b2e46; 344 background-color: #2b2e46;
278} 345}
279 346
280#count>div{ 347#count>div {
281 padding-top:10px; 348 padding-top: 10px;
282 font-size: 50px; 349 font-size: 50px;
283 color:white 350 color: white
284} 351}
285 352
286/* Section 5: route desc + video */ 353/* Section 5: route desc + video */
287#section5{ 354#section5 {
288 margin: 40px 0 20px 0; 355 margin: 40px 0 20px 0;
289 width: 100%; 356 width: 100%;
290} 357}
291 358
292#description{ 359#description {
293 width: 100%; height: auto; 360 width: 100%;
361 height: auto;
294 min-height: 342px; 362 min-height: 342px;
295} 363}
296 364
297 365
298 366
299 367
300#description>iframe{ 368#description>iframe {
301 margin: 20px; 369 margin: 20px;
302 float:right; 370 float: right;
303 border: 0; 371 border: 0;
304 border-radius: 24px; 372 border-radius: 24px;
305 width: 608px; height: 342px; 373 width: 608px;
374 height: 342px;
375}
376
377#description>h3 {
378 margin: 0 0 10px 0;
379 color: white;
306} 380}
307 381
308#description>h3{margin: 0 0 10px 0; color: white;} 382#description-text {
309#description-text{
310 display: block; 383 display: block;
311 font-size: 21px; 384 font-size: 21px;
312 word-wrap: break-word; 385 word-wrap: break-word;
313 text-align: justify; 386 text-align: justify;
314} 387}
315#description-text>b{font-size: inherit;} 388
316#description-text>a{font-size: inherit;color: #3c91e6;} 389#description-text>b {
390 font-size: inherit;
391}
392
393#description-text>a {
394 font-size: inherit;
395 color: #3c91e6;
396}
317 397
318 398
319/* Section 6: leaderboards */ 399/* Section 6: leaderboards */
320#section6{ 400#section6 {
321 margin: 40px 0 20px 0; 401 margin: 40px 0 20px 0;
322 min-height: 600px; 402 min-height: 600px;
323 background-color: #202232; 403 background-color: #202232;
@@ -328,39 +408,46 @@ p>span.portal-count{font-weight: bold;font-size: 100px;vertical-align: -15%;}
328} 408}
329 409
330 410
331#section6>hr{border: 1px solid #2b2e46;margin: 8px 20px 0px 20px;} 411#section6>hr {
332#leaderboard-top{ 412 border: 1px solid #2b2e46;
413 margin: 8px 20px 0px 20px;
414}
415
416#leaderboard-top {
333 display: grid; 417 display: grid;
334 font-size: 20px; 418 font-size: 20px;
335 height: 34px; 419 height: 34px;
336 padding-left: 60px; 420 padding-left: 60px;
337 margin: 0 20px 0 20px; 421 margin: 0 20px 0 20px;
338} 422}
339#leaderboard-top>span{ 423
340 424#leaderboard-top>span {
425
341 display: flex; 426 display: flex;
342 place-items: flex-end; 427 place-items: flex-end;
343} 428}
344 429
345#runner{ 430#runner {
346 display: grid; 431 display: grid;
347 grid-template-columns: 50% 50%; 432 grid-template-columns: 50% 50%;
348 align-items: end; 433 align-items: end;
349} 434}
350 435
351#page-number{ 436#page-number {
352 display: flex; 437 display: flex;
353 width: auto; 438 width: auto;
354 flex-direction: row-reverse; 439 flex-direction: row-reverse;
355} 440}
356#page-number>div{ 441
357width: 100px; 442#page-number>div {
358place-items: center; 443 width: 100px;
359display: grid; 444 place-items: center;
360grid-template-columns: 1fr 1fr 1fr; 445 display: grid;
361text-align: center; 446 grid-template-columns: 1fr 1fr 1fr;
447 text-align: center;
362} 448}
363#page-number>div>button{ 449
450#page-number>div>button {
364 width: 30px; 451 width: 30px;
365 height: 30px; 452 height: 30px;
366 background-color: #202232; 453 background-color: #202232;
@@ -369,9 +456,10 @@ text-align: center;
369 cursor: pointer; 456 cursor: pointer;
370} 457}
371 458
372.leaderboard-record{ 459.leaderboard-record {
373 margin: 10px 20px 0px 20px; 460 margin: 10px 20px 0px 20px;
374 height: 44px; width: calc(100% - 40px); 461 height: 44px;
462 width: calc(100% - 40px);
375 width: auto; 463 width: auto;
376 464
377 color: inherit; 465 color: inherit;
@@ -380,7 +468,7 @@ text-align: center;
380 padding: 0 0 0 60px; 468 padding: 0 0 0 60px;
381 font-size: 20px; 469 font-size: 20px;
382 font-family: inherit; 470 font-family: inherit;
383 471
384 grid-template-columns: 3% 4.5% 40% 4% 3.5% 15% 15% 15%; 472 grid-template-columns: 3% 4.5% 40% 4% 3.5% 15% 15% 15%;
385 display: grid; 473 display: grid;
386 474
@@ -389,33 +477,44 @@ text-align: center;
389 background-color: #2b2e46; 477 background-color: #2b2e46;
390} 478}
391 479
392.leaderboard-record>span:nth-child(1){display: grid;} 480.leaderboard-record>span:nth-child(1) {
393.leaderboard-record>span:nth-child(4){display: grid;} 481 display: grid;
394.leaderboard-record>span:last-child{flex-direction: row-reverse;} 482}
395.leaderboard-record>span{ 483
484.leaderboard-record>span:nth-child(4) {
485 display: grid;
486}
487
488.leaderboard-record>span:last-child {
489 flex-direction: row-reverse;
490}
491
492.leaderboard-record>span {
396 display: flex; 493 display: flex;
397 place-items: center; 494 place-items: center;
398 height: 44px; 495 height: 44px;
399} 496}
400 497
401.leaderboard-record>div>a>span>img{ 498.leaderboard-record>div>a>span>img {
402 height: 36px; 499 height: 36px;
403 border-radius: 50px; 500 border-radius: 50px;
404 padding: 0; 501 padding: 0;
405 scale: .95; 502 scale: .95;
406} 503}
407.leaderboard-record>div{ 504
505.leaderboard-record>div {
408 display: grid; 506 display: grid;
409 grid-template-columns: 50% 50%; 507 grid-template-columns: 50% 50%;
410 place-items: left; 508 place-items: left;
411} 509}
412.leaderboard-record>div>a>span{ 510
511.leaderboard-record>div>a>span {
413 display: flex; 512 display: flex;
414 place-items: center; 513 place-items: center;
415 height: 44px; 514 height: 44px;
416} 515}
417 516
418.leaderboard-record>span>button{ 517.leaderboard-record>span>button {
419 background-color: #0000; 518 background-color: #0000;
420 border: 0; 519 border: 0;
421 cursor: pointer; 520 cursor: pointer;
@@ -425,9 +524,9 @@ text-align: center;
425.hover-popup { 524.hover-popup {
426 position: relative; 525 position: relative;
427 display: inline-block; 526 display: inline-block;
428 } 527}
429 528
430 .hover-popup::after { 529.hover-popup::after {
431 content: attr(popup-text); 530 content: attr(popup-text);
432 position: absolute; 531 position: absolute;
433 /* top: 0%; */ 532 /* top: 0%; */
@@ -441,36 +540,42 @@ text-align: center;
441 opacity: 0; 540 opacity: 0;
442 color: #cdcfdf; 541 color: #cdcfdf;
443 /* transition: visibility 0s, opacity 0.3s ease; */ 542 /* transition: visibility 0s, opacity 0.3s ease; */
444 } 543}
445 544
446 .hover-popup:hover { 545.hover-popup:hover {
447 color: transparent; 546 color: transparent;
448 } 547}
449 548
450 .hover-popup:hover::after { 549.hover-popup:hover::after {
451 visibility: visible; 550 visibility: visible;
452 opacity: 1; 551 opacity: 1;
453 } 552}
454 553
455.leaderboard-record:last-child{margin: 10px 20px 10px 20px;} 554.leaderboard-record:last-child {
555 margin: 10px 20px 10px 20px;
556}
456 557
457 558
458#section7{ 559#section7 {
459 margin: 40px 0 20px 0; 560 margin: 40px 0 20px 0;
460 background-color: #202232; 561 background-color: #202232;
461 border-radius: 24px; 562 border-radius: 24px;
462 padding: 10px; 563 padding: 10px;
463} 564}
464 565
465#discussion-search{ 566#discussion-search {
466 height: 46px; 567 height: 46px;
467 width: 100%; 568 width: 100%;
468 display: grid; 569 display: grid;
469 grid-template-columns: 1fr 100px; 570 grid-template-columns: 1fr 100px;
470 margin: 0 0 20px 0; 571 margin: 0 0 20px 0;
471} 572}
472#discussion-search>input::placeholder{color: #aaa;} 573
473#discussion-search>input{ 574#discussion-search>input::placeholder {
575 color: #aaa;
576}
577
578#discussion-search>input {
474 background-color: #2b2e46; 579 background-color: #2b2e46;
475 font-size: 20px; 580 font-size: 20px;
476 padding-left: 10px; 581 padding-left: 10px;
@@ -479,15 +584,19 @@ text-align: center;
479 border-radius: 16px 0 0 16px; 584 border-radius: 16px 0 0 16px;
480 font-family: inherit; 585 font-family: inherit;
481} 586}
482#discussion-search>div>button:hover{filter: brightness(75%);} 587
483#discussion-search>div>button{ 588#discussion-search>div>button:hover {
589 filter: brightness(75%);
590}
591
592#discussion-search>div>button {
484 padding: 7px 16px; 593 padding: 7px 16px;
485 margin: 8px 0; 594 margin: 8px 0;
486 border: 0; 595 border: 0;
487 font-size: 16px; 596 font-size: 16px;
488 border-radius: 24px; 597 border-radius: 24px;
489 display: block; 598 display: block;
490 background-color:#3c91e6; 599 background-color: #3c91e6;
491 font-family: inherit; 600 font-family: inherit;
492 font-weight: bold; 601 font-weight: bold;
493 cursor: pointer; 602 cursor: pointer;
@@ -495,30 +604,46 @@ text-align: center;
495 604
496 transition: filter .2s; 605 transition: filter .2s;
497} 606}
498#discussion-search>div{ 607
608#discussion-search>div {
499 background-color: #2b2e46; 609 background-color: #2b2e46;
500 border-radius: 0 16px 16px 0; 610 border-radius: 0 16px 16px 0;
501} 611}
502#discussion-post>button:nth-child(1)>span>b{font-size: 18px;color:#cdcfdf;font-weight: lighter;} 612
503#discussion-post>button:nth-child(1){ 613#discussion-post>button:nth-child(1)>span>b {
614 font-size: 18px;
615 color: #cdcfdf;
616 font-weight: lighter;
617}
618
619#discussion-post>button:nth-child(1) {
504 background-color: #2b2e46; 620 background-color: #2b2e46;
505 display: grid; 621 display: grid;
506 grid-template-columns: minmax(0, 1fr) 150px; 622 grid-template-columns: minmax(0, 1fr) 150px;
507 623
508 border-radius: 16px; 624 border-radius: 16px;
509 padding: 16px 12px; 625 padding: 16px 12px;
510 margin: 8px 0 0 0; 626 margin: 8px 0 0 0;
511 border: 0; 627 border: 0;
512 width: 100%; height: 100px; 628 width: 100%;
629 height: 100px;
513 text-align: start; 630 text-align: start;
514 white-space: nowrap; 631 white-space: nowrap;
515 color: #cdcfdf; 632 color: #cdcfdf;
516 cursor: pointer; 633 cursor: pointer;
517 overflow: hidden; 634 overflow: hidden;
518} 635}
519#discussion-post>button:nth-child(1)>span:nth-child(1){font-size: 32px;} 636
520#discussion-post>button:nth-child(1)>span:nth-child(3){color: #aaa; font-size: 18px;} 637#discussion-post>button:nth-child(1)>span:nth-child(1) {
521#discussion-post>button:nth-child(1)>span:nth-child(4){ 638 font-size: 32px;
639}
640
641#discussion-post>button:nth-child(1)>span:nth-child(3) {
642 color: #aaa;
643 font-size: 18px;
644}
645
646#discussion-post>button:nth-child(1)>span:nth-child(4) {
522 opacity: .7; 647 opacity: .7;
523 height: 40px; 648 height: 40px;
524 display: flex; 649 display: flex;
@@ -526,15 +651,21 @@ text-align: center;
526 justify-content: end; 651 justify-content: end;
527} 652}
528 653
529#discussion-post{height: 100px;} 654#discussion-post {
530#discussion-post>button>button:hover{filter: brightness(75%); } 655 height: 100px;
531#discussion-post>button>button{ 656}
657
658#discussion-post>button>button:hover {
659 filter: brightness(75%);
660}
661
662#discussion-post>button>button {
532 padding: 7px 16px; 663 padding: 7px 16px;
533 664
534 border: 0; 665 border: 0;
535 font-size: 16px; 666 font-size: 16px;
536 border-radius: 24px; 667 border-radius: 24px;
537 background-color:#e52d04; 668 background-color: #e52d04;
538 font-family: BarlowSemiCondensed-Regular; 669 font-family: BarlowSemiCondensed-Regular;
539 font-weight: bold; 670 font-weight: bold;
540 cursor: pointer; 671 cursor: pointer;
@@ -544,20 +675,27 @@ text-align: center;
544} 675}
545 676
546 677
547#discussion-create>div{ 678#discussion-create>div {
548 display: grid; 679 display: grid;
549 text-align: start; 680 text-align: start;
550} 681}
551#discussion-create{ 682
683#discussion-create {
552 display: grid; 684 display: grid;
553 grid-template-columns: 1fr 40px; 685 grid-template-columns: 1fr 40px;
554 height: auto; 686 height: auto;
555 word-wrap: break-word; 687 word-wrap: break-word;
556} 688}
557 689
558#discussion-create>span{padding-left: 20px;} 690#discussion-create>span {
559#discussion-create>div>input::placeholder{color: #aaa;} 691 padding-left: 20px;
560#discussion-create>div>input{ 692}
693
694#discussion-create>div>input::placeholder {
695 color: #aaa;
696}
697
698#discussion-create>div>input {
561 background-color: #2b2e46; 699 background-color: #2b2e46;
562 font-size: 20px; 700 font-size: 20px;
563 padding-left: 10px; 701 padding-left: 10px;
@@ -567,17 +705,23 @@ text-align: center;
567 border: 0; 705 border: 0;
568 font-family: inherit; 706 font-family: inherit;
569} 707}
570#discussion-create>div>input:nth-child(2){font-size: 16px;}
571 708
572#discussion-create-button:hover{filter: brightness(75%);} 709#discussion-create>div>input:nth-child(2) {
573#discussion-create-button{ 710 font-size: 16px;
711}
712
713#discussion-create-button:hover {
714 filter: brightness(75%);
715}
716
717#discussion-create-button {
574 padding: 7px 16px; 718 padding: 7px 16px;
575 margin: 8px 0 0 0; 719 margin: 8px 0 0 0;
576 border: 0; 720 border: 0;
577 font-size: 16px; 721 font-size: 16px;
578 border-radius: 24px; 722 border-radius: 24px;
579 723
580 background-color:#3c91e6; 724 background-color: #3c91e6;
581 font-family: inherit; 725 font-family: inherit;
582 font-weight: bold; 726 font-weight: bold;
583 cursor: pointer; 727 cursor: pointer;
@@ -590,7 +734,7 @@ text-align: center;
590} 734}
591 735
592 736
593#discussion-thread>div:nth-child(1){ 737#discussion-thread>div:nth-child(1) {
594 display: grid; 738 display: grid;
595 grid-template-columns: 1fr 40px; 739 grid-template-columns: 1fr 40px;
596 height: auto; 740 height: auto;
@@ -599,10 +743,10 @@ text-align: center;
599} 743}
600 744
601#discussion-create>button:nth-child(2), 745#discussion-create>button:nth-child(2),
602#discussion-thread>div>button{ 746#discussion-thread>div>button {
603 height: 40px; 747 height: 40px;
604 float:inline-end; 748 float: inline-end;
605 color:#cdcfdf; 749 color: #cdcfdf;
606 background-color: #0000; 750 background-color: #0000;
607 border: 0; 751 border: 0;
608 font-size: 38px; 752 font-size: 38px;
@@ -610,32 +754,41 @@ text-align: center;
610} 754}
611 755
612 756
613#discussion-thread>div:nth-child(2)>a>img{ 757#discussion-thread>div:nth-child(2)>a>img {
614 width: 60px; height: 60px; 758 width: 60px;
759 height: 60px;
615 border-radius: 100px; 760 border-radius: 100px;
616 margin: 20px 0 0 0; 761 margin: 20px 0 0 0;
617} 762}
618#discussion-thread>div:nth-child(2)>div{ 763
764#discussion-thread>div:nth-child(2)>div {
619 height: max-content; 765 height: max-content;
620 padding: 20px 0 0 10px; 766 padding: 20px 0 0 10px;
621 display: inline-grid; 767 display: inline-grid;
622 grid-template-columns: min-content 1fr ; 768 grid-template-columns: min-content 1fr;
623 overflow: hidden; 769 overflow: hidden;
624 770
625} 771}
626#discussion-thread>div:nth-child(2)>div>span:nth-child(1){font-weight: bold;height: 30px;} 772
627#discussion-thread>div:nth-child(2)>div>span:nth-child(2){ 773#discussion-thread>div:nth-child(2)>div>span:nth-child(1) {
774 font-weight: bold;
775 height: 30px;
776}
777
778#discussion-thread>div:nth-child(2)>div>span:nth-child(2) {
628 opacity: 0.6; 779 opacity: 0.6;
629 height: 30px; 780 height: 30px;
630 font-size: 80%; 781 font-size: 80%;
631 padding-left: 10px; 782 padding-left: 10px;
632} 783}
633#discussion-thread>div:nth-child(2)>div>span:nth-child(3){ 784
785#discussion-thread>div:nth-child(2)>div>span:nth-child(3) {
634 grid-column: 1 / span 2; 786 grid-column: 1 / span 2;
635 height: max-content; 787 height: max-content;
636 word-wrap: break-word; 788 word-wrap: break-word;
637} 789}
638#discussion-thread>div:nth-child(2){ 790
791#discussion-thread>div:nth-child(2) {
639 display: grid; 792 display: grid;
640 grid-template-columns: 60px 1fr; 793 grid-template-columns: 60px 1fr;
641 font-size: 20px; 794 font-size: 20px;
@@ -644,15 +797,19 @@ text-align: center;
644} 797}
645 798
646 799
647#discussion-send{ 800#discussion-send {
648 height: 48px; 801 height: 48px;
649 width: 100%; 802 width: 100%;
650 display: grid; 803 display: grid;
651 grid-template-columns: 1fr 80px; 804 grid-template-columns: 1fr 80px;
652 margin: 10px 0 0 0; 805 margin: 10px 0 0 0;
653} 806}
654#discussion-send>input::placeholder{color: #aaa;} 807
655#discussion-send>input{ 808#discussion-send>input::placeholder {
809 color: #aaa;
810}
811
812#discussion-send>input {
656 background-color: #2b2e46; 813 background-color: #2b2e46;
657 padding-left: 10px; 814 padding-left: 10px;
658 color: white; 815 color: white;
@@ -661,20 +818,25 @@ text-align: center;
661 border-radius: 16px 0 0 16px; 818 border-radius: 16px 0 0 16px;
662 font-family: inherit; 819 font-family: inherit;
663} 820}
664#discussion-send>div{ 821
822#discussion-send>div {
665 background-color: #2b2e46; 823 background-color: #2b2e46;
666 border-radius: 0 16px 16px 0; 824 border-radius: 0 16px 16px 0;
667 825
668} 826}
669#discussion-send>div>button:hover{ filter: brightness(75%);} 827
670#discussion-send>div>button{ 828#discussion-send>div>button:hover {
829 filter: brightness(75%);
830}
831
832#discussion-send>div>button {
671 padding: 7px 20px; 833 padding: 7px 20px;
672 margin: 8px 0; 834 margin: 8px 0;
673 font-size: 16px; 835 font-size: 16px;
674 border: 0; 836 border: 0;
675 border-radius: 24px; 837 border-radius: 24px;
676 display: block; 838 display: block;
677 background-color:#3c91e6; 839 background-color: #3c91e6;
678 font-family: inherit; 840 font-family: inherit;
679 font-weight: bold; 841 font-weight: bold;
680 cursor: pointer; 842 cursor: pointer;
@@ -685,42 +847,158 @@ text-align: center;
685 847
686 848
687 849
688.triangle{ 850.triangle {
689 display: inline-block; 851 display: inline-block;
690 width: 8px; height: 0; 852 width: 8px;
691 border-top: 7px solid transparent; 853 height: 0;
692 border-right: 8px solid #cdcfdf; 854 border-top: 7px solid transparent;
693 border-bottom: 7px solid transparent; 855 border-right: 8px solid #cdcfdf;
856 border-bottom: 7px solid transparent;
694} 857}
695 858
696 /* such responsive, very mobile */
697@media screen and (max-width: 1480px) { 859@media screen and (max-width: 1480px) {
698 #section3.summary1{grid-template-columns: auto;} 860 #section3.summary1 {
699 #category{min-width: 608px;} 861 grid-template-columns: auto;
700 #history{min-width: 608px;} 862 }
701 #description{min-width: 608px;} 863
702 #section4.summary1{min-width: 588px;} 864 #category {
703 865 min-width: 608px;
704 #description>iframe{ 866 }
867
868 #history {
869 min-width: 608px;
870 }
871
872 #description {
873 min-width: 608px;
874 }
875
876 #section4.summary1 {
877 min-width: 588px;
878 }
879
880 #description>iframe {
705 padding: 0 0 0 calc(50% - 304px); 881 padding: 0 0 0 calc(50% - 304px);
706 float:none; 882 float: none;
707 justify-content: center; 883 justify-content: center;
708 align-items: center; 884 align-items: center;
709 } 885 }
710 886
711 #section1.summary1{ 887 #section1.summary1 {
712 grid-template-columns: auto; 888 grid-template-columns: auto;
713 place-items: center; 889 place-items: center;
714 text-align: center; 890 text-align: center;
715 891
716 } 892 }
717 893
718 #section2.summary1{ 894 #section2.summary1 {
719 grid-template-columns: auto; 895 grid-template-columns: auto;
720 width: 450px; 896 width: 450px;
721 margin: 40px auto 0 auto; 897 margin: 40px auto 0 auto;
722 } 898 }
723 #section2.summary1>.nav-button:nth-child(1){border-radius: 30px 30px 0 0;} 899
724 #section2.summary1>.nav-button:nth-child(2){border-radius: 0;} 900 #section2.summary1>.nav-button:nth-child(1) {
725 #section2.summary1>.nav-button:nth-child(3){border-radius: 0 0 30px 30px;} 901 border-radius: 30px 30px 0 0;
902 }
903
904 #section2.summary1>.nav-button:nth-child(2) {
905 border-radius: 0;
906 }
907
908 #section2.summary1>.nav-button:nth-child(3) {
909 border-radius: 0 0 30px 30px;
910 }
911}
912
913@media screen and (max-width: 768px) {
914 #section1 {
915 margin: 20px 0 0 0;
916 }
917
918 #section2 {
919 grid-template-columns: 1fr;
920 gap: 0;
921 }
922
923 #section2>.nav-button {
924 border-radius: 0;
925 font-size: 18px;
926 height: 45px;
927 }
928
929 #section2>.nav-button:nth-child(1) {
930 border-radius: 20px 20px 0 0;
931 }
932
933 #section2>.nav-button:nth-child(3) {
934 border-radius: 0 0 20px 20px;
935 }
936
937 #section3 {
938 grid-template-columns: 1fr;
939 gap: 20px;
940 }
941
942 #history {
943 min-width: unset;
944 width: 100%;
945 }
946
947 #category {
948 min-width: unset;
949 width: 100%;
950 }
951
952 #section4 {
953 grid-template-columns: 1fr;
954 }
955
956 #description>iframe {
957 width: 100%;
958 height: 250px;
959 margin: 20px 0;
960 padding: 0;
961 }
962
963 #section5 {
964 margin: 20px 0;
965 }
966
967 #description {
968 min-height: unset;
969 width: 100%;
970 }
971
972 #leaderboard-top {
973 font-size: 14px;
974 padding-left: 30px;
975 grid-template-columns: 20% 20% 8% 15% 8% 10% 10% 9%;
976 }
977
978 .leaderboard-record {
979 font-size: 14px;
980 padding-left: 30px;
981 grid-template-columns: 20% 20% 8% 15% 8% 10% 10% 9%;
982 }
983
984 .leaderboard-record>div>a>span>img {
985 height: 28px;
986 }
987
988 #page-number>div {
989 width: 80px;
990 }
991
992 #discussion-search {
993 grid-template-columns: 1fr 80px;
994 }
995
996 #discussion-search>div>button {
997 padding: 7px 10px;
998 font-size: 14px;
999 }
1000
1001 .nav-button {
1002 font-size: 16px;
1003 }
726} \ No newline at end of file 1004} \ No newline at end of file
diff --git a/frontend/src/css/ModMenu.css b/frontend/src/css/ModMenu.css
index c6d3d8d..f09a4b0 100644
--- a/frontend/src/css/ModMenu.css
+++ b/frontend/src/css/ModMenu.css
@@ -1,35 +1,39 @@
1div#modview{ 1div#modview {
2 position: absolute; 2 position: absolute;
3 left: 50%; 3 left: 50%;
4 z-index: 20; 4 z-index: 20;
5 width: 320px; height: auto; 5 width: 320px;
6 height: auto;
6 /* background-color: red; */ 7 /* background-color: red; */
7 8
8 transform: translateY(-68%); 9 transform: translateY(-68%);
9} 10}
10div#modview>div>button{ 11
12div#modview>div>button {
11 height: 30px; 13 height: 30px;
12} 14}
13 15
14div#modview>div:nth-child(1){ 16div#modview>div:nth-child(1) {
15 display: grid; 17 display: grid;
16 grid-template-columns: 50% 50%; 18 grid-template-columns: 50% 50%;
17} 19}
18 20
19div#modview>div:nth-child(2){ 21div#modview>div:nth-child(2) {
20 display: grid; 22 display: grid;
21 place-items: center; 23 place-items: center;
22} 24}
23 25
24#modview-menu{ 26#modview-menu {
25 position: absolute; 27 position: absolute;
26 left: calc(50% + 160px); top: 130px; 28 left: calc(50% + 160px);
29 top: 130px;
27 transform: translateX(-50%); 30 transform: translateX(-50%);
28 background-color: #2b2e46; 31 background-color: #2b2e46;
29 z-index: 2; color: white; 32 z-index: 2;
33 color: white;
30} 34}
31 35
32#modview-menu-image{ 36#modview-menu-image {
33 box-shadow: 0 0 40px 16px black; 37 box-shadow: 0 0 40px 16px black;
34 outline: 8px solid #2b2e46; 38 outline: 8px solid #2b2e46;
35 border-radius: 20px; 39 border-radius: 20px;
@@ -37,27 +41,43 @@ div#modview>div:nth-child(2){
37 display: grid; 41 display: grid;
38 grid-template-columns: 50% 50%; 42 grid-template-columns: 50% 50%;
39 /* place-items: center; */ 43 /* place-items: center; */
40 44
41} 45}
42#modview-menu-image>div:nth-child(1){ 46
43 height: 400px; width: 500px; 47#modview-menu-image>div:nth-child(1) {
48 height: 400px;
49 width: 500px;
44 display: grid; 50 display: grid;
45 grid-template-rows: 30% 70%; 51 grid-template-rows: 30% 70%;
46} 52}
47#modview-menu-image>div:nth-child(2){ 53
48 height: 400px; width: 500px; 54#modview-menu-image>div:nth-child(2) {
55 height: 400px;
56 width: 500px;
49 display: grid; 57 display: grid;
50 grid-template-rows: 20% 10%; 58 grid-template-rows: 20% 10%;
51} 59}
52 60
53#modview-menu-image>div>button{width: 300px;margin-left:100px;} 61#modview-menu-image>div>button {
54#modview-menu-image>div>img{width: 500px;} 62 width: 300px;
55#modview-menu-image>div>button{font-size: 20px;} 63 margin-left: 100px;
56#modview-menu-image>div>span>input[type="file"]{font-size: 15px;} 64}
65
66#modview-menu-image>div>img {
67 width: 500px;
68}
69
70#modview-menu-image>div>button {
71 font-size: 20px;
72}
73
74#modview-menu-image>div>span>input[type="file"] {
75 font-size: 15px;
76}
57 77
58 78
59#modview-menu-add, 79#modview-menu-add,
60#modview-menu-edit{ 80#modview-menu-edit {
61 box-shadow: 0 0 40px 16px black; 81 box-shadow: 0 0 40px 16px black;
62 outline: 8px solid #2b2e46; 82 outline: 8px solid #2b2e46;
63 border-radius: 20px; 83 border-radius: 20px;
@@ -67,19 +87,24 @@ div#modview>div:nth-child(2){
67} 87}
68 88
69#modview-menu-add>div, 89#modview-menu-add>div,
70#modview-menu-edit>div{ 90#modview-menu-edit>div {
71 display: grid; 91 display: grid;
72 margin: 20px; 92 margin: 20px;
73 width: 200px; 93 width: 200px;
74 font-size: 20px; 94 font-size: 20px;
75} 95}
76#modview-route-description>textarea{ 96
97#modview-route-description>textarea {
77 resize: none; 98 resize: none;
78 height: 160px; 99 height: 160px;
79 width: 1160px; 100 width: 1160px;
80} 101}
81#modview-route-showcase>input::placeholder{opacity: .5;} 102
82#modview_block{ 103#modview-route-showcase>input::placeholder {
104 opacity: .5;
105}
106
107#modview_block {
83 position: absolute; 108 position: absolute;
84 background-color: black; 109 background-color: black;
85 opacity: .3; 110 opacity: .3;
@@ -89,24 +114,89 @@ div#modview>div:nth-child(2){
89 z-index: 2; 114 z-index: 2;
90 cursor: no-drop; 115 cursor: no-drop;
91} 116}
92#modview-md{ 117
118#modview-md {
93 box-shadow: 0 0 40px 16px black; 119 box-shadow: 0 0 40px 16px black;
94 background-color: #2b2e46; 120 background-color: #2b2e46;
95 outline: 8px solid #2b2e46; 121 outline: 8px solid #2b2e46;
96 122
97 border-radius: 20px; 123 border-radius: 20px;
98 position: absolute; 124 position: absolute;
99 padding: 10px; top: 400px; 125 padding: 10px;
100 width: 1180px; height: 300px; 126 top: 400px;
127 width: 1180px;
128 height: 300px;
101 overflow-y: auto; 129 overflow-y: auto;
102 word-wrap: break-word; 130 word-wrap: break-word;
103} 131}
104#modview-md>span>a{ 132
133#modview-md>span>a {
105 padding-left: 20px; 134 padding-left: 20px;
106 color:aqua; 135 color: aqua;
107} 136}
108#modview-md>p{ 137
138#modview-md>p {
109 font-family: BarlowSemiCondensed-Regular; 139 font-family: BarlowSemiCondensed-Regular;
110 color: #cdcfdf; 140 color: #cdcfdf;
111 font-size: 21px; 141 font-size: 21px;
142}
143
144@media screen and (max-width: 768px) {
145 #modview_block {
146 left: 0;
147 width: 100%;
148 }
149
150 #modview-menu {
151 left: 50%;
152 top: 80px;
153 width: 90vw;
154 }
155
156 #modview-menu-image {
157 grid-template-columns: 1fr;
158 width: 100%;
159 }
160
161 #modview-menu-image>div:nth-child(1),
162 #modview-menu-image>div:nth-child(2) {
163 width: 100%;
164 height: auto;
165 }
166
167 #modview-menu-image>div>img {
168 width: 100%;
169 max-width: 400px;
170 }
171
172 #modview-menu-image>div>button {
173 width: 80%;
174 margin-left: 10%;
175 }
176
177 #modview-menu-add,
178 #modview-menu-edit {
179 grid-template-columns: 1fr;
180 width: 90vw;
181 }
182
183 #modview-menu-add>div,
184 #modview-menu-edit>div {
185 width: 90%;
186 }
187
188 #modview-route-description>textarea {
189 width: 100%;
190 max-width: 90vw;
191 }
192
193 #modview-md {
194 width: 90vw;
195 max-width: 600px;
196 top: 300px;
197 }
198
199 div#modview {
200 width: 90vw;
201 }
112} \ No newline at end of file 202} \ No newline at end of file
diff --git a/frontend/src/css/Profile.css b/frontend/src/css/Profile.css
index 0829477..9b5b4ef 100644
--- a/frontend/src/css/Profile.css
+++ b/frontend/src/css/Profile.css
@@ -1,4 +1,4 @@
1#section1.profile{ 1#section1.profile {
2 margin: 20px; 2 margin: 20px;
3 background: linear-gradient(0deg, #202232 50%, #2b2e46 50%); 3 background: linear-gradient(0deg, #202232 50%, #2b2e46 50%);
4 border-radius: 24px; 4 border-radius: 24px;
@@ -8,7 +8,8 @@
8 grid-template-columns: 250px 1fr; 8 grid-template-columns: 250px 1fr;
9 9
10} 10}
11#section1.profile>div:first-child{ 11
12#section1.profile>div:first-child {
12 overflow: hidden; 13 overflow: hidden;
13 border-radius: 100%; 14 border-radius: 100%;
14 display: grid; 15 display: grid;
@@ -21,76 +22,88 @@
21 22
22 23
23} 24}
24#profile-image>img{ 25
26#profile-image>img {
25 border-radius: 100%; 27 border-radius: 100%;
26 transition: filter 0.3s; 28 transition: filter 0.3s;
27 cursor: pointer; 29 cursor: pointer;
28} 30}
29 31
30#profile-image>span{ 32#profile-image>span {
31 z-index: 1; 33 z-index: 1;
32 position: absolute; 34 position: absolute;
33 opacity: 0; 35 opacity: 0;
34 color:white; 36 color: white;
35 transition: opacity 0.3s; 37 transition: opacity 0.3s;
36 cursor: pointer; 38 cursor: pointer;
37} 39}
38 40
39#profile-image:hover > img{filter: blur(5px) brightness(60%);z-index: 1;} 41#profile-image:hover>img {
40#profile-image:hover > span{opacity: 1;} 42 filter: blur(5px) brightness(60%);
43 z-index: 1;
44}
41 45
42#profile-top{ 46#profile-image:hover>span {
47 opacity: 1;
48}
49
50#profile-top {
43 height: 100px; 51 height: 100px;
44 display: grid; 52 display: grid;
45 grid-template-columns: 80% 20%; 53 grid-template-columns: 80% 20%;
46} 54}
47#profile-top>div:nth-child(1)>div>img{ 55
56#profile-top>div:nth-child(1)>div>img {
48 margin: 12px; 57 margin: 12px;
49 border-radius: 10px; 58 border-radius: 10px;
50} 59}
51 60
52#profile-top>div:nth-child(1){ 61#profile-top>div:nth-child(1) {
53 display: flex; 62 display: flex;
54 place-items: center; 63 place-items: center;
55 font-size: 50px; 64 font-size: 50px;
56 font-weight: bold; 65 font-weight: bold;
57 color: white; 66 color: white;
58} 67}
59#profile-top>div:nth-child(1)>div{ 68
69#profile-top>div:nth-child(1)>div {
60 display: flex; 70 display: flex;
61 height: 60px; 71 height: 60px;
62} 72}
63span.titles{ 73
74span.titles {
64 margin: 12px 12px 12px 0; 75 margin: 12px 12px 12px 0;
65 76
66 font-size: 18px; 77 font-size: 18px;
67 font-weight: 100; 78 font-weight: 100;
68 79
69 padding: 6px 20px 0px 20px; 80 padding: 6px 20px 0px 20px;
70 border-radius: 10px; 81 border-radius: 10px;
71} 82}
72 83
73#profile-top>div:nth-child(2){ 84#profile-top>div:nth-child(2) {
74 display: flex; 85 display: flex;
75 flex-direction: row-reverse; 86 flex-direction: row-reverse;
76 align-items: center; 87 align-items: center;
77 padding-right: 10px; 88 padding-right: 10px;
78} 89}
79#profile-top>div:nth-child(2)>a>img{ 90
91#profile-top>div:nth-child(2)>a>img {
80 height: 50px; 92 height: 50px;
81 padding: 0 5px 0 5px; 93 padding: 0 5px 0 5px;
82 scale: 0.9; 94 scale: 0.9;
83 filter: brightness(200%); 95 filter: brightness(200%);
84 96
85} 97}
86 98
87 99
88#profile-bottom{ 100#profile-bottom {
89 height: 100px; 101 height: 100px;
90 display: grid; 102 display: grid;
91 grid-template-columns: 1fr 1fr 1fr; 103 grid-template-columns: 1fr 1fr 1fr;
92} 104}
93#profile-bottom>div{ 105
106#profile-bottom>div {
94 margin: 12px; 107 margin: 12px;
95 background-color: #2b2e46; 108 background-color: #2b2e46;
96 border-radius: 20px; 109 border-radius: 20px;
@@ -98,28 +111,33 @@ span.titles{
98 place-items: center; 111 place-items: center;
99 grid-template-rows: 40% 50%; 112 grid-template-rows: 40% 50%;
100} 113}
101#profile-bottom>div>span:nth-child(1){ 114
115#profile-bottom>div>span:nth-child(1) {
102 color: inherit; 116 color: inherit;
103 font-size: 18px; 117 font-size: 18px;
104} 118}
105#profile-bottom>div>span:nth-child(2){ 119
120#profile-bottom>div>span:nth-child(2) {
106 color: white; 121 color: white;
107 font-size: 40px; 122 font-size: 40px;
108} 123}
109#profile-bottom>div>span:nth-child(2)>span{ 124
125#profile-bottom>div>span:nth-child(2)>span {
110 color: white; 126 color: white;
111 font-size: 20px; 127 font-size: 20px;
112} 128}
129
113/* #section1.profile>div>div{outline: red 1px dashed;} */ 130/* #section1.profile>div>div{outline: red 1px dashed;} */
114 131
115 132
116#section2.profile{ 133#section2.profile {
117 margin: 20px; 134 margin: 20px;
118 height: 60px; 135 height: 60px;
119 display: grid; 136 display: grid;
120 grid-template-columns: 1fr 1fr; 137 grid-template-columns: 1fr 1fr;
121} 138}
122#section2.profile>button{ 139
140#section2.profile>button {
123 display: flex; 141 display: flex;
124 justify-content: center; 142 justify-content: center;
125 align-items: center; 143 align-items: center;
@@ -133,32 +151,42 @@ span.titles{
133 151
134 transition: background-color .1s; 152 transition: background-color .1s;
135} 153}
136#section2.profile>button:nth-child(1){border-radius: 24px 0 0 24px;}
137#section2.profile>button:nth-child(2){border-radius: 0 24px 24px 0;}
138 154
139#section3.profile1>hr{border: 1px solid #2b2e46;margin: 8px 20px 0px 20px;} 155#section2.profile>button:nth-child(1) {
140#section3.profile1{ 156 border-radius: 24px 0 0 24px;
157}
158
159#section2.profile>button:nth-child(2) {
160 border-radius: 0 24px 24px 0;
161}
162
163#section3.profile1>hr {
164 border: 1px solid #2b2e46;
165 margin: 8px 20px 0px 20px;
166}
167
168#section3.profile1 {
141 margin: 20px; 169 margin: 20px;
142 display: block; 170 display: block;
143 171
144 background-color: #202232; 172 background-color: #202232;
145 border-radius: 24px; 173 border-radius: 24px;
146} 174}
147 175
148#profileboard-nav{ 176#profileboard-nav {
149 display: grid; 177 display: grid;
150 grid-template-columns: 1fr 1fr; 178 grid-template-columns: 1fr 1fr;
151} 179}
152 180
153#profileboard-nav>select{ 181#profileboard-nav>select {
154 182
155 /* appearance: none; */ 183 /* appearance: none; */
156 margin: 10px 20px 20px 20px; 184 margin: 10px 20px 20px 20px;
157 height: 50px; 185 height: 50px;
158 186
159 border-radius: 24px; 187 border-radius: 24px;
160 text-align: center; 188 text-align: center;
161 189
162 color: inherit; 190 color: inherit;
163 font-family: inherit; 191 font-family: inherit;
164 font-size: 24px; 192 font-size: 24px;
@@ -168,9 +196,17 @@ span.titles{
168} 196}
169 197
170 198
171#profileboard-top>span>img{height: 20px;scale: .8;} 199#profileboard-top>span>img {
172#profileboard-top>span>img,#profileboard-top>span>span{cursor: pointer;} 200 height: 20px;
173#profileboard-top{ 201 scale: .8;
202}
203
204#profileboard-top>span>img,
205#profileboard-top>span>span {
206 cursor: pointer;
207}
208
209#profileboard-top {
174 height: 34px; 210 height: 34px;
175 display: grid; 211 display: grid;
176 font-size: 20px; 212 font-size: 20px;
@@ -179,24 +215,24 @@ span.titles{
179 grid-template-columns: 15% 15% 5% 15% 5% 15% 15% 15%; 215 grid-template-columns: 15% 15% 5% 15% 5% 15% 15% 15%;
180} 216}
181 217
182#profileboard-top>span{ 218#profileboard-top>span {
183 display: flex; 219 display: flex;
184 place-items: flex-end; 220 place-items: flex-end;
185} 221}
186 222
187#profileboard-records{ 223#profileboard-records {
188 padding-bottom: 10px; 224 padding-bottom: 10px;
189} 225}
190 226
191.profileboard-record{ 227.profileboard-record {
192 width: calc(100% - 40px); 228 width: calc(100% - 40px);
193 margin: 10px 20px 0px 20px; 229 margin: 10px 20px 0px 20px;
194 height: 44px; 230 height: 44px;
195 231
196 border-radius: 20px; 232 border-radius: 20px;
197 padding: 0 0 0 40px; 233 padding: 0 0 0 40px;
198 font-size: 20px; 234 font-size: 20px;
199 235
200 color: inherit; 236 color: inherit;
201 font-family: inherit; 237 font-family: inherit;
202 border: 0; 238 border: 0;
@@ -211,35 +247,128 @@ span.titles{
211} 247}
212 248
213/* this right here should be illegal */ 249/* this right here should be illegal */
214.profileboard-record>span:nth-child(-n+8){filter: brightness(100%);} 250.profileboard-record>span:nth-child(-n+8) {
215.profileboard-record>span{ 251 filter: brightness(100%);
252}
253
254.profileboard-record>span {
216 display: flex; 255 display: flex;
217 place-items: flex-end; 256 place-items: flex-end;
218 filter: brightness(65%); 257 filter: brightness(65%);
219} 258}
220 259
221.profileboard-record>hr{ 260.profileboard-record>hr {
222 margin: 0 0 0 -60px; 261 margin: 0 0 0 -60px;
223 border: 0; 262 border: 0;
224 height: 2px; 263 height: 2px;
225 background-color: #202232; 264 background-color: #202232;
226} 265}
227 266
228.profileboard-record>span:nth-child(4){display: grid;} 267.profileboard-record>span:nth-child(4) {
229.profileboard-record>span{ 268 display: grid;
269}
270
271.profileboard-record>span {
230 272
231 display: flex; 273 display: flex;
232 place-items: center; 274 place-items: center;
233 height: 44px; 275 height: 44px;
234} 276}
235.profileboard-record>a>span{ 277
278.profileboard-record>a>span {
236 279
237 display: flex; 280 display: flex;
238 place-items: center; 281 place-items: center;
239 height: 44px; 282 height: 44px;
240} 283}
241.profileboard-record>span>button{ 284
285.profileboard-record>span>button {
242 background-color: #0000; 286 background-color: #0000;
243 border: 0; 287 border: 0;
244 cursor: pointer; 288 cursor: pointer;
245} 289}
290
291@media screen and (max-width: 768px) {
292 #section1.profile {
293 margin: 20px;
294 grid-template-columns: 1fr;
295 height: auto;
296 min-height: 300px;
297 background: linear-gradient(0deg, #202232 60%, #2b2e46 40%);
298 }
299
300 #section1.profile>div:first-child {
301 margin: 15px auto;
302 grid-row: 1;
303 }
304
305 #profile-top {
306 grid-template-columns: 1fr;
307 height: auto;
308 text-align: center;
309 }
310
311 #profile-top>div:nth-child(1) {
312 justify-content: center;
313 font-size: 32px;
314 }
315
316 #profile-top>div:nth-child(1)>div {
317 flex-direction: column;
318 height: auto;
319 }
320
321 #profile-top>div:nth-child(2) {
322 justify-content: center;
323 padding: 10px 0;
324 }
325
326 #profile-bottom {
327 grid-template-columns: 1fr;
328 height: auto;
329 }
330
331 #profile-bottom>div {
332 margin: 8px 12px;
333 }
334
335 #section2.profile {
336 margin: 20px;
337 height: 50px;
338 }
339
340 #section2.profile>button {
341 font-size: 18px;
342 }
343
344 #section3.profile1 {
345 margin: 20px;
346 }
347
348 #profileboard-nav {
349 grid-template-columns: 1fr;
350 }
351
352 #profileboard-nav>select {
353 margin: 20px;
354 height: 45px;
355 font-size: 18px;
356 }
357
358 #profileboard-top {
359 font-size: 14px;
360 padding-left: 20px;
361 grid-template-columns: 18% 18% 8% 15% 8% 10% 10% 13%;
362 }
363
364 .profileboard-record {
365 font-size: 14px;
366 padding-left: 20px;
367 grid-template-columns: 18% 18% 8% 15% 8% 10% 10% 13%;
368 }
369
370 span.titles {
371 font-size: 14px;
372 padding: 4px 12px 0px 12px;
373 }
374} \ No newline at end of file
diff --git a/frontend/src/css/Rankings.css b/frontend/src/css/Rankings.css
index edc5a00..b644ecd 100644
--- a/frontend/src/css/Rankings.css
+++ b/frontend/src/css/Rankings.css
@@ -27,7 +27,8 @@
27 transition: all 0.1s; 27 transition: all 0.1s;
28} 28}
29 29
30.nav-container button:hover, .nav-container button.selected { 30.nav-container button:hover,
31.nav-container button.selected {
31 background-color: #202232; 32 background-color: #202232;
32} 33}
33 34
@@ -105,3 +106,33 @@
105 border-radius: 200px; 106 border-radius: 200px;
106 transform: translateX(10px); 107 transform: translateX(10px);
107} 108}
109
110@media screen and (max-width: 768px) {
111
112 .nav-1 div,
113 .nav-2 div {
114 width: 95%;
115 }
116
117 .nav-container button {
118 font-size: 18px;
119 padding: 8px 0px;
120 }
121
122 .ranks-container {
123 width: calc(95% - 20px);
124 }
125
126 .rankings-leaderboard {
127 font-size: 16px;
128 }
129
130 .leaderboard-entry {
131 grid-template-columns: 15% 50% 35%;
132 font-size: 14px;
133 }
134
135 .leaderboard-entry img {
136 height: 28px;
137 }
138} \ No newline at end of file
diff --git a/frontend/src/css/Rules.css b/frontend/src/css/Rules.css
index bbc84c0..b7807cf 100644
--- a/frontend/src/css/Rules.css
+++ b/frontend/src/css/Rules.css
@@ -1,3 +1,9 @@
1main { 1main {
2 font-size: 24px; 2 font-size: 24px;
3}
4
5@media screen and (max-width: 768px) {
6 main {
7 font-size: 18px;
8 }
3} \ No newline at end of file 9} \ No newline at end of file
diff --git a/frontend/src/css/Sidebar.css b/frontend/src/css/Sidebar.css
index a91862e..8675dca 100644
--- a/frontend/src/css/Sidebar.css
+++ b/frontend/src/css/Sidebar.css
@@ -2,62 +2,69 @@
2 overflow: hidden; 2 overflow: hidden;
3 position: absolute; 3 position: absolute;
4 background-color: #2b2e46; 4 background-color: #2b2e46;
5 width: 320px; height: 100vh; 5 width: 320px;
6 height: 100vh;
6 min-height: 670px; 7 min-height: 670px;
7 8 transition: transform 0.3s ease;
8} 9}
9 10
10 /* logo */ 11/* logo */
11#logo{ 12#logo {
12 display: grid; 13 display: grid;
13 grid-template-columns: 60px 220px; 14 grid-template-columns: 60px 220px;
14 15
15 16
16 height: 80px; 17 height: 80px;
17 padding: 20px 0 20px 20px; 18 padding: 20px 0 20px 20px;
18 cursor: pointer; 19 cursor: pointer;
19 user-select: none; 20 user-select: none;
20} 21}
21 22
22#logo-text{ 23#logo-text {
23 font-family: BarlowCondensed-Regular; 24 font-family: BarlowCondensed-Regular;
24 font-size: 36px; 25 font-size: 36px;
25 color: #FFF; 26 color: #FFF;
26 line-height: 38px; 27 line-height: 38px;
27} 28}
28#logo-text>span>b{ 29
30#logo-text>span>b {
29 font-family: BarlowCondensed-Bold; 31 font-family: BarlowCondensed-Bold;
30 font-size: 56px; 32 font-size: 56px;
31} 33}
32 34
33 /* Sidelist */ 35/* Sidelist */
34#sidebar-list{ 36#sidebar-list {
35 z-index: 2; 37 z-index: 2;
36 background-color: #2b2e46; 38 background-color: #2b2e46;
37 position: relative; 39 position: relative;
38 height: calc(100vh - 120px); 40 height: calc(100vh - 120px);
39 width: 320px; 41 width: 320px;
40 /* min-height: 670px; */ 42 /* min-height: 670px; */
41 transition: width .3s; 43 transition: width .3s;
42} 44}
43#sidebar-toplist>button:nth-child(1){margin-top: 5px;} 45
44#sidebar-toplist{ 46#sidebar-toplist>button:nth-child(1) {
47 margin-top: 5px;
48}
49
50#sidebar-toplist {
45 display: grid; 51 display: grid;
46 52
47 margin: 0 5px 0 5px; 53 margin: 0 5px 0 5px;
48 justify-items: left; 54 justify-items: left;
49 height: 400px; 55 height: 400px;
50 grid-template-rows: 45px 50px 50px 50px 50px 50px 50px 50px auto; 56 grid-template-rows: 45px 50px 50px 50px 50px 50px 50px 50px auto;
51} 57}
52 58
53#sidebar-bottomlist{ 59#sidebar-bottomlist {
54 display: grid; 60 display: grid;
55 61
56 margin: 0 5px 0 5px; 62 margin: 0 5px 0 5px;
57 justify-items: left; 63 justify-items: left;
58 grid-template-rows: calc(100vh - 720px) 50px 50px 50px; 64 grid-template-rows: calc(100vh - 720px) 50px 50px 50px;
59} 65}
60.sidebar-button>span{ 66
67.sidebar-button>span {
61 font-family: BarlowSemiCondensed-Regular; 68 font-family: BarlowSemiCondensed-Regular;
62 font-size: 18px; 69 font-size: 18px;
63 color: #CDCFDF; 70 color: #CDCFDF;
@@ -65,36 +72,37 @@
65 line-height: 28px; 72 line-height: 28px;
66 transition: opacity .1s; 73 transition: opacity .1s;
67} 74}
68.sidebar-button{ 75
76.sidebar-button {
69 display: grid; 77 display: grid;
70 grid-template-columns: 50px auto; 78 grid-template-columns: 50px auto;
71 place-items: left; 79 place-items: left;
72 text-align: left; 80 text-align: left;
73 81
74 background-color: inherit; 82 background-color: inherit;
75 cursor: pointer; 83 cursor: pointer;
76 border: none; 84 border: none;
77 width: 310px; 85 width: 310px;
78 height: 40px; 86 height: 40px;
79 border-radius: 20px; 87 border-radius: 20px;
80 padding: 0.3em 0 0 11px; 88 padding: 0.4em 0 0 11px;
81 89
82 transition: 90 transition:
83 width .3s, 91 width .3s,
84 background-color .15s, 92 background-color .15s,
85 padding .3s; 93 padding .3s;
86} 94}
87 95
88.sidebar-button .avatar-img { 96.sidebar-button .avatar-img {
89 border-radius: 50px; 97 border-radius: 50px;
90} 98}
91 99
92.logout-button{ 100.logout-button {
93 display: grid; 101 display: grid;
94 grid-template-columns: 50px auto; 102 grid-template-columns: 50px auto;
95 place-items: left; 103 place-items: left;
96 text-align: left; 104 text-align: left;
97 105
98 background-color: inherit; 106 background-color: inherit;
99 cursor: pointer; 107 cursor: pointer;
100 border: none; 108 border: none;
@@ -103,10 +111,10 @@
103 border-radius: 20px; 111 border-radius: 20px;
104 padding: 0.4em 0 0 11px; 112 padding: 0.4em 0 0 11px;
105 113
106 transition: 114 transition:
107 width .3s, 115 width .3s,
108 background-color .15s, 116 background-color .15s,
109 padding .3s; 117 padding .3s;
110} 118}
111 119
112.submit-run-button { 120.submit-run-button {
@@ -114,7 +122,7 @@
114 grid-template-columns: 50px auto; 122 grid-template-columns: 50px auto;
115 place-items: left; 123 place-items: left;
116 text-align: left; 124 text-align: left;
117 125
118 background-color: inherit; 126 background-color: inherit;
119 cursor: pointer; 127 cursor: pointer;
120 border: none; 128 border: none;
@@ -123,10 +131,10 @@
123 border-radius: 20px; 131 border-radius: 20px;
124 padding: 0.4em 0 0 11px; 132 padding: 0.4em 0 0 11px;
125 133
126 transition: 134 transition:
127 width .3s, 135 width .3s,
128 background-color .15s, 136 background-color .15s,
129 padding .3s; 137 padding .3s;
130 background-color: #202232aa; 138 background-color: #202232aa;
131} 139}
132 140
@@ -135,7 +143,7 @@
135} 143}
136 144
137 145
138.submit-run-button>span{ 146.submit-run-button>span {
139 font-family: BarlowSemiCondensed-Regular; 147 font-family: BarlowSemiCondensed-Regular;
140 font-size: 18px; 148 font-size: 18px;
141 color: #CDCFDF; 149 color: #CDCFDF;
@@ -162,19 +170,21 @@ button>img {
162 padding: 5px; 170 padding: 5px;
163} 171}
164 172
165 /* Maplist */ 173/* Search Panel */
166#sidebar>div:nth-child(3){ 174#search-panel {
167 position: relative; 175 position: relative;
168 background-color: #202232; 176 background-color: #202232;
169 color: #424562; 177 color: #424562;
170 z-index: 1; 178 z-index: 1;
171 179
172 left: 52px; 180 left: 52px;
173 top: calc(-100vh + 120px); 181 top: calc(-100vh + 120px);
174 width: 268px; height: calc(100vh - 120px); 182 width: 268px;
183 height: calc(100vh - 120px);
175 min-height: 550px; 184 min-height: 550px;
176} 185}
177input#searchbar[type=text]{ 186
187input#searchbar[type=text] {
178 margin: 10px 0 0 6px; 188 margin: 10px 0 0 6px;
179 padding: 1px 0px 1px 16px; 189 padding: 1px 0px 1px 16px;
180 width: 240px; 190 width: 240px;
@@ -182,33 +192,47 @@ input#searchbar[type=text]{
182 192
183 font-family: BarlowSemiCondensed-Regular; 193 font-family: BarlowSemiCondensed-Regular;
184 font-size: 20px; 194 font-size: 20px;
185 195
186 background-color: #161723; 196 background-color: #161723;
187 color:#CDCFDF; 197 color: #CDCFDF;
188 198
189 border: 0; 199 border: 0;
190 border-radius: 20px; 200 border-radius: 20px;
191 201
192} 202}
193input[type=text]::placeholder{color:#2b2e46} 203
194input[type=text]:focus{outline: inherit;} 204input[type=text]::placeholder {
195a{text-decoration: none;height: 40px;} 205 color: #2b2e46
206}
207
208input[type=text]:focus {
209 outline: inherit;
210}
211
212a {
213 text-decoration: none;
214 height: 40px;
215}
196 216
197 217
198#search-data{ 218#search-data {
199 margin: 8px 0 8px 0; 219 margin: 8px 0 8px 0;
200 overflow-y: auto; 220 overflow-y: auto;
201 max-height: calc(100vh - 172px); 221 max-height: calc(100vh - 172px);
202 scrollbar-width: thin; 222 scrollbar-width: thin;
203} 223}
204#search-data::-webkit-scrollbar{display: none;} 224
205.search-map{ 225#search-data::-webkit-scrollbar {
226 display: none;
227}
228
229.search-map {
206 margin: 10px 6px 0 6px; 230 margin: 10px 6px 0 6px;
207 height: 80px; 231 height: 80px;
208 232
209 border-radius: 20px; 233 border-radius: 20px;
210 text-align: center; 234 text-align: center;
211 235
212 display: grid; 236 display: grid;
213 237
214 border: 0; 238 border: 0;
@@ -217,26 +241,28 @@ a{text-decoration: none;height: 40px;}
217 grid-template-rows: 20% 20% 60%; 241 grid-template-rows: 20% 20% 60%;
218 width: calc(100% - 15px); 242 width: calc(100% - 15px);
219} 243}
220.search-map>span{ 244
245.search-map>span {
221 color: #888; 246 color: #888;
222 font-size: 16px; 247 font-size: 16px;
223 font-family: BarlowSemiCondensed-Regular; 248 font-family: BarlowSemiCondensed-Regular;
224} 249}
225.search-map>span:nth-child(3){ 250
251.search-map>span:nth-child(3) {
226 font-size: 30px; 252 font-size: 30px;
227 color: #CDCFDF; 253 color: #CDCFDF;
228} 254}
229 255
230.search-player{ 256.search-player {
231 overflow: hidden; 257 overflow: hidden;
232 margin: 10px 6px 0 6px; 258 margin: 10px 6px 0 6px;
233 height: 80px; 259 height: 80px;
234 260
235 border-radius: 20px; 261 border-radius: 20px;
236 text-align: center; 262 text-align: center;
237 color: #CDCFDF; 263 color: #CDCFDF;
238 font-family: BarlowSemiCondensed-Regular; 264 font-family: BarlowSemiCondensed-Regular;
239 265
240 display: grid; 266 display: grid;
241 place-items: center; 267 place-items: center;
242 grid-template-columns: 20% 80%; 268 grid-template-columns: 20% 80%;
@@ -245,23 +271,237 @@ a{text-decoration: none;height: 40px;}
245 border: 0; 271 border: 0;
246 transition: background-color .1s; 272 transition: background-color .1s;
247 background-color: #2b2e46; 273 background-color: #2b2e46;
274 width: calc(100% - 15px);
275 box-sizing: border-box;
248} 276}
249.search-player>img{ 277
250 height: 60px; 278.search-player>img {
279 height: 60px;
251 border-radius: 20px; 280 border-radius: 20px;
252} 281}
253.search-player>span{ 282
254 width:154px; 283.search-player>span {
284 width: 100%;
255 font-size: 26px; 285 font-size: 26px;
286 overflow: hidden;
287 text-overflow: ellipsis;
288 white-space: nowrap;
256} 289}
257 290
291#mobile-topbar {
292 display: none;
293}
258 294
295#mobile-logo {
296 display: none;
297}
259 298
299#hamburger-menu {
300 display: none;
301}
260 302
303.mobile-search-header {
304 display: none;
305}
261 306
307.mobile-search-close {
308 display: none;
309}
262 310
263 311@media screen and (max-width: 768px) {
264 312
265 313 #sidebar {
266 314 position: fixed;
267 315 left: 0;
316 top: 60px;
317 width: 100%;
318 height: calc(100vh - 60px);
319 transform: translateX(-100%);
320 z-index: 1000;
321 transition: transform 0.3s ease;
322 }
323
324 #sidebar.mobile-open {
325 transform: translateX(0);
326 }
327
328 #logo {
329 display: none !important;
330 }
331
332 #mobile-topbar {
333 display: flex;
334 justify-content: space-between;
335 align-items: center;
336 position: fixed;
337 top: 0;
338 left: 0;
339 right: 0;
340 height: 60px;
341 background-color: #2b2e46;
342 padding: 0 18px;
343 z-index: 999;
344 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
345 }
346
347 #mobile-logo {
348 display: flex;
349 align-items: center;
350 gap: 10px;
351 }
352
353 #mobile-logo img {
354 height: 40px !important;
355 }
356
357 #mobile-logo-text {
358 display: flex;
359 flex-direction: column;
360 align-items: center;
361 font-family: BarlowCondensed-Regular;
362 color: #FFF;
363 line-height: 1.1;
364 }
365
366 #mobile-logo-text span:first-child {
367 font-family: BarlowCondensed-Bold;
368 font-size: 24px;
369 }
370
371 #mobile-logo-text span:last-child {
372 font-size: 14px;
373 }
374
375 #hamburger-menu {
376 display: flex;
377 flex-direction: column;
378 justify-content: space-around;
379 width: 30px;
380 height: 25px;
381 background: transparent;
382 border: none;
383 cursor: pointer;
384 padding: 0;
385 z-index: 1001;
386 }
387
388 #hamburger-menu span {
389 width: 30px;
390 height: 3px;
391 background: #CDCFDF;
392 border-radius: 10px;
393 transition: all 0.3s ease;
394 transform-origin: 1px;
395 }
396
397 #hamburger-menu.open span:nth-child(1) {
398 transform: rotate(45deg);
399 }
400
401 #hamburger-menu.open span:nth-child(2) {
402 opacity: 0;
403 transform: translateX(20px);
404 }
405
406 #hamburger-menu.open span:nth-child(3) {
407 transform: rotate(-45deg);
408 }
409
410 #sidebar-list {
411 height: calc(100vh - 60px);
412 width: 280px;
413 padding-top: 20px;
414 }
415
416 #sidebar-toplist {
417 height: auto;
418 grid-template-rows: 45px 20px 50px 50px 50px 50px auto;
419 }
420
421 #sidebar-bottomlist {
422 grid-template-rows: 50px 50px 50px 50px 50px;
423 margin-top: 20px;
424 }
425
426 .sidebar-button,
427 .logout-button,
428 .submit-run-button {
429 width: 270px !important;
430 }
431
432 .sidebar-button span,
433 .submit-run-button span {
434 opacity: 1 !important;
435 }
436
437 #search-panel {
438 position: fixed;
439 left: 0;
440 top: 60px;
441 width: 100%;
442 height: calc(100vh - 60px);
443 z-index: 998;
444 background-color: #202232;
445 transform: translateY(100%);
446 opacity: 0;
447 transition: transform 0.3s ease, opacity 0.3s ease;
448 pointer-events: none;
449 }
450
451 #search-panel.mobile-search-open {
452 transform: translateY(0);
453 opacity: 1;
454 pointer-events: auto;
455 }
456
457 .mobile-search-header {
458 display: flex;
459 align-items: center;
460 justify-content: flex-end;
461 padding: 10px 20px 0 20px;
462 gap: 10px;
463 }
464
465 #search-panel input#searchbar[type=text] {
466 width: calc(100% - 40px);
467 margin: 10px 20px;
468 }
469
470 .mobile-search-close {
471 display: block;
472 background-color: #2b2e46;
473 border: none;
474 color: #CDCFDF;
475 font-size: 28px;
476 width: 40px;
477 height: 40px;
478 border-radius: 50%;
479 cursor: pointer;
480 line-height: 1;
481 padding: 0;
482 transition: background-color 0.2s;
483 }
484
485 .mobile-search-close:hover {
486 background-color: #202232;
487 }
488
489 #search-panel #search-data {
490 max-height: calc(100vh - 140px);
491 padding: 0 10px;
492 }
493
494 .login {
495 grid-template-columns: 50px auto 50px;
496 }
497
498 .login>button:nth-child(2) {
499 left: 170px;
500 }
501
502 button>img {
503 scale: 2;
504 width: 20px;
505 padding: 5px;
506 }
507} \ No newline at end of file
diff --git a/frontend/src/css/UploadRunDialog.css b/frontend/src/css/UploadRunDialog.css
index f129bb8..56c2080 100644
--- a/frontend/src/css/UploadRunDialog.css
+++ b/frontend/src/css/UploadRunDialog.css
@@ -1,44 +1,47 @@
1div#upload-run{ 1div#upload-run {
2 position: absolute; 2 position: absolute;
3 left: 50%; 3 left: 50%;
4 z-index: 20; 4 z-index: 20;
5 width: 320px; height: auto; 5 width: 320px;
6 height: auto;
6 /* background-color: red; */ 7 /* background-color: red; */
7 8
8 transform: translateY(-68%); 9 transform: translateY(-68%);
9} 10}
10 11
11#upload-run-menu{ 12#upload-run-menu {
12 position: absolute; 13 position: absolute;
13 left: calc(50%); top: 130px; 14 left: calc(50%);
15 top: 130px;
14 transform: translateX(-50%); 16 transform: translateX(-50%);
15 background-color: #2b2e46; 17 background-color: #2b2e46;
16 z-index: 3; color: white; 18 z-index: 3;
19 color: white;
17 font-family: BarlowSemicondensed-SemiBold; 20 font-family: BarlowSemicondensed-SemiBold;
18} 21}
19 22
20#upload-run-menu-add, 23#upload-run-menu-add,
21#upload-run-menu-edit{ 24#upload-run-menu-edit {
22 box-shadow: 0 0 40px 16px black; 25 box-shadow: 0 0 40px 16px black;
23 outline: 8px solid #2b2e46; 26 outline: 8px solid #2b2e46;
24 border-radius: 20px; 27 border-radius: 20px;
25 font-size: 40px; 28 font-size: 40px;
26 text-wrap: nowrap; 29 text-wrap: nowrap;
27} 30}
28 31
29#upload-run-menu-add>div, 32#upload-run-menu-add>div,
30#upload-run-menu-edit>div{ 33#upload-run-menu-edit>div {
31 display: flex; 34 display: flex;
32 font-size: 20px; 35 font-size: 20px;
33 padding: 0px 15px; 36 padding: 0px 15px;
34 gap: 2px; 37 gap: 2px;
35} 38}
36 39
37#upload-run-menu-add>div .upload-run-item { 40#upload-run-menu-add>div .upload-run-item {
38 margin: 0px 20px; 41 margin: 0px 20px;
39} 42}
40 43
41#upload-run-block{ 44#upload-run-block {
42 position: absolute; 45 position: absolute;
43 background-color: black; 46 background-color: black;
44 opacity: .3; 47 opacity: .3;
@@ -51,7 +54,7 @@ div#upload-run{
51.upload-run-dropdown-container .dropdown-cur { 54.upload-run-dropdown-container .dropdown-cur {
52 user-select: none; 55 user-select: none;
53 cursor: pointer; 56 cursor: pointer;
54 width: 240px; 57 width: 240px;
55} 58}
56 59
57.upload-run-dropdown { 60.upload-run-dropdown {
@@ -81,9 +84,9 @@ div#upload-run{
81} 84}
82 85
83.upload-run-demo-name { 86.upload-run-demo-name {
84 text-overflow: ellipsis; 87 text-overflow: ellipsis;
85 overflow: hidden; 88 overflow: hidden;
86 width: 380px; 89 width: 380px;
87} 90}
88 91
89@keyframes dropdown-in { 92@keyframes dropdown-in {
@@ -96,7 +99,8 @@ div#upload-run{
96 } 99 }
97} 100}
98 101
99button, input { 102button,
103input {
100 background-color: #2b2e46; 104 background-color: #2b2e46;
101 border: none; 105 border: none;
102 font-family: BarlowSemiCondensed-Regular; 106 font-family: BarlowSemiCondensed-Regular;
@@ -123,38 +127,84 @@ button:hover {
123 display: flex; 127 display: flex;
124 margin-top: 10px; 128 margin-top: 10px;
125} 129}
130
126.upload-run-buttons-container button { 131.upload-run-buttons-container button {
127 width: 100%; 132 width: 100%;
128} 133}
129 134
130#host_demo, #partner_demo { 135#host_demo,
131 background-color: rgba(0, 0, 0, 0); 136#partner_demo {
132 display: none; 137 background-color: rgba(0, 0, 0, 0);
138 display: none;
133} 139}
134 140
135.upload-run-drag-area { 141.upload-run-drag-area {
136 border: 2px dashed grey; 142 border: 2px dashed grey;
137 border-radius: 10px; 143 border-radius: 10px;
138 height: 150px; 144 height: 150px;
139 cursor: pointer; 145 cursor: pointer;
140 width: 360px; 146 width: 360px;
141 transition: all 0.2s ease; 147 transition: all 0.2s ease;
142 text-align: center; 148 text-align: center;
143 display: flex; 149 display: flex;
144 flex-direction: column; 150 flex-direction: column;
145 align-items: center; 151 align-items: center;
146 justify-content: center; 152 justify-content: center;
147 margin: 20px 0px; 153 margin: 20px 0px;
148} 154}
149 155
150.upload-run-drag-area-highlight, .upload-run-drag-area-highlight-partner { 156.upload-run-drag-area-highlight,
151 border: 2px dashed white; 157.upload-run-drag-area-highlight-partner {
158 border: 2px dashed white;
152} 159}
153 160
154.upload-run-drag-area-hidden { 161.upload-run-drag-area-hidden {
155 height: fit-content; 162 height: fit-content;
156 text-align: left; 163 text-align: left;
157 border: none; 164 border: none;
158 align-items: flex-start; 165 align-items: flex-start;
159} 166}
160 167
168@media screen and (max-width: 768px) {
169 div#upload-run {
170 width: 90vw;
171 max-width: 400px;
172 }
173
174 #upload-run-menu {
175 left: 50%;
176 top: 80px;
177 width: 90vw;
178 }
179
180 #upload-run-menu-add,
181 #upload-run-menu-edit {
182 font-size: 28px;
183 width: 90vw;
184 }
185
186 #upload-run-menu-add>div,
187 #upload-run-menu-edit>div {
188 flex-direction: column;
189 font-size: 18px;
190 }
191
192 .upload-run-dropdown-container .dropdown-cur {
193 width: 80vw;
194 max-width: 300px;
195 }
196
197 .upload-run-dropdown {
198 width: 80vw;
199 max-width: 320px;
200 }
201
202 .upload-run-demo-name {
203 width: 90%;
204 }
205
206 .upload-run-drag-area {
207 width: 80vw;
208 max-width: 360px;
209 }
210} \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2025-11-08 21:51:05 +0000