keii.dev
1// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
2// See the LICENCE file in the repository root for full licence text.
3
4@import "app";
5
6@fa-weight-regular: 400;
7@fa-weight-solid: 900;
8
9@font-grade: Venera, sans-serif;
10@font-content: Inter, sans-serif;
11@font-default: Torus, Inter, "Helvetica Neue", Tahoma, Arial,
12 "Hiragino Kaku Gothic ProN", Meiryo, "Microsoft YaHei", "Apple SD Gothic Neo",
13 sans-serif;
14@font-default-vi: Quicksand, Torus, Inter, "Helvetica Neue", Tahoma, Arial,
15 "PingFang TC", "Microsoft JhengHei", "Apple SD Gothic Neo", system-ui,
16 sans-serif;
17@font-default-th: Torus, Inter, "Helvetica Neue", "Prompt", Tahoma, Arial,
18 "Hiragino Kaku Gothic ProN", Meiryo, "Microsoft YaHei", "Apple SD Gothic Neo",
19 sans-serif;
20@font-default-zh: Torus, Inter, "Helvetica Neue", Tahoma, Arial,
21 "Hiragino Sans GB", "Microsoft YaHei", "Apple SD Gothic Neo", system-ui,
22 sans-serif;
23@font-default-zh-tw: Torus, Inter, "Helvetica Neue", Tahoma, Arial,
24 "PingFang TC", "Microsoft JhengHei", "Apple SD Gothic Neo", system-ui,
25 sans-serif;
26
27@screen-mobile-max: (@screen-sm-min - 1px);
28@desktop: ~"(min-width: @{screen-sm-min})";
29@mobile: ~"(max-width: @{screen-mobile-max})";
30@narrow: ~"(max-width: 479px)";
31@narrow-up: ~"(min-width: 480px)";
32
33@highdpi: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)";
34
35@hover-transition-duration: 120ms;
36
37@header-pinned: js-header-is-pinned;
38
39@admin-menu-icon-width: 50px;
40
41// update app-deps.ts when changing the height of the header.
42@nav2-avatar-height: 60px;
43@nav2-avatar-height--pinned: 40px;
44@nav2-height: 90px;
45@nav2-height--pinned: 50px;
46@nav2-header-height: 360px;
47@nav2-header-image-height: 310px;
48
49// mobile nav
50// TODO: un-bootstrap names
51@navbar-height: @nav2-height--pinned; // also in lib/app-deps.ts
52@navbar-padding-horizontal: 10px;
53@navbar-padding-vertical: 10px;
54@navbar-mobile--content-height: @navbar-height - (@navbar-padding-vertical * 2);
55
56@bar-size: 3px;
57@logo-size: 100px;
58// header left margin (20) + logo (100) + menu left margin (10)
59@padding-big: (20px + @logo-size + 10px);
60
61@gutter-beatmapset: @gutter-v2;
62@gutter-beatmapset-desktop: 40px;
63
64@md-paragraph-space: 1.5em;
65
66// ┐(ﾟ ヮﾟ)┌
67@gutter-v2: 10px;
68@gutter-v2-desktop: 50px;
69
70@gutter-small-desktop: 20px;
71
72@gutter-sidebar-desktop: 30px;
73
74@height--nav-popup: 210px; // min-height; actual height will be calculated by js.
75
76@border-radius--nav-avatar: 10px;
77@border-radius--extra: 20px;
78@border-radius--large: 10px;
79
80@forum-item-overflow: @gutter-v2 - 2px;
81@forum-item-overflow-desktop: @gutter-v2-desktop - 20px;
82@forum-item-animate: all 120ms;
83
84@forum-signature-height: 150px;
85
86// here be z-indexes
87@z-index--header-bg: -1;
88
89@z-index--body-background: -1;
90
91@z-index--beatmapset-header: 1;
92@z-index--contest-header: 1;
93@z-index--header-nav-v4-active: 1;
94@z-index--page-header: 1;
95@z-index--notification-banner-v2: 1;
96@z-index--forum-post-edit-mode: 1;
97@z-index--forum-topic-reply-stick: 1; // inside fixed-bar
98@z-index--wiki-search: 1;
99
100@z-index--beatmaps-panel: 4;
101@z-index--profile-previous-usernames: 10;
102@z-index--page-extra-tabs: 99;
103@z-index--profile-page-cover-selector: 100; // must be at least 1 more than @z-index--page-extra-tabs
104@z-index--beatmap-discussion-editor-insertion-menu: 100;
105@z-index--simple-menu: 101;
106@z-index--simple-menu-hover-object: 102;
107@z-index--admin-menu: 499;
108@z-index--floating-toolbar: 500;
109@z-index--audio-player-floating: 501;
110@z-index--fixed-bar: 502;
111@z-index--nav-bar: 509;
112@z-index--blackout: 510;
113@z-index--nav-bar-mobile-active: 511;
114@z-index--blackout-visible: 512;
115@z-index--user-card-tooltip: 512;
116@z-index--nav-float: 999;
117// Xsolla overlay: 1000
118// navbar-static-top: 1000 (bootstrap nav for mobile)
119// modal-backdrop: 1040
120// modal: 1050
121@z-index--overlay: 9990;
122
123@box-shadow-x: 0;
124@box-shadow-y: 1px;
125@box-shadow-radius: 3px;
126@box-shadow-color: fade(#000, 25%);
127
128@avatar-size--base: 128px;
129
130@landing-dot-size: 17px;
131
132@profile-badge-size: 50px;
133@profile-user-bar-height: 60px;
134@profile-avatar-size: 120px;
135@profile-stats-box-width-desktop: 300px;
136
137@beatmap-picker-size: 38px;
138@beatmapset-avatar-size: 50px;
139
140@beatmapset-float-box-width: 275px;
141
142@header-container-min-height: @nav2-height + 70px;
143@header-title-height: 55px;
144
145// top padding + menu + page title
146@nav-avatar-size: 70px;
147@nav-sm-height: 20px + @nav-menu-height + @nav-page-title-height;
148@nav-page-title-height: 40px;
149@nav-menu-height: 20px;
150@nav-search-icon-width: 30px;
151
152// here be font-sizes
153@font-size--tiny: 8px;
154@font-size--small: 10px;
155@font-size--small-2: 11px;
156@font-size--normal: 12px;
157@font-size--normal-2: 13px;
158@font-size--title-small: 14px;
159@font-size--title-small-2: 15px;
160@font-size--title-small-3: 16px;
161@font-size--title-small-4: 18px;
162@font-size--large: 20px;
163@font-size--title: 24px;
164@font-size--large-2: 35px;
165@font-size--large-3: 40px;
166@font-size--large-4: 50px;
167@font-size--extra-large: 70px;
168
169@font-size--wiki: 14px;
170@font-size--wiki-search: 18px;
171
172@font-size--header-title: 32px;
173@font-size--header-title-mobile: 24px;
174@font-size--header-subtitle: 16px;
175@font-size--header-description: 12px;
176
177@font-size--header-wiki-2: 26px;
178@font-size--header-wiki-3: @font-size--large;
179@font-size--header-wiki-4: @font-size--title-small-4;
180@font-size--header-wiki-5: @font-size--title-small-3;
181@font-size--header-wiki-6: @font-size--title-small;
182
183@font-size--new-header-title: 30px;
184
185@font-size--forum-topic-entry-icon: 16px;
186@font-size--forum-topic-entry-icon-small: 10px;
187@font-size--forum-post-heading: 20px;
188@font-size--forum-quote-heading: 13px;
189
190@font-size--store-notice-text: 15px;
191@font-size--store-notice-title: 13px;
192
193@font-size--livestream-header: 15px;
194@font-size--livestream-featured-name: 30px;
195@font-size--livestream-featured-detail: 15px;
196@font-size--livestream-item-name: 15px;
197@font-size--livestream-item-detail: 10px;
198
199@font-size--nav-popup-link: 14px;
200@font-size--nav-popup-section: 12px;
201@font-size--nav-popup-title-large: 20px;
202@font-size--nav-popup-title: 15px;
203
204@font-size--paginator: 12px;
205@font-size--phone-input: 16px;
206
207@font-size--warning: 13px;
208@font-size--warning-icon: 20px;
209
210@flex-grid--gutter-width: 20px;
211
212@header-icon-size: 50px;
213@header-icon-margin: 8px;
214
215@forum-category-colour--osu-bg: @pink;
216@forum-category-colour--osu-link: @pink-text;
217@forum-category-colour--osu-link-hover: @pink;
218
219@forum-category-colour--language-specific-bg: @yellow;
220@forum-category-colour--language-specific-link: @yellow-text;
221@forum-category-colour--language-specific-link-hover: @yellow-dark;
222
223@forum-category-colour--other-bg: @green;
224@forum-category-colour--other-link: @green-text;
225@forum-category-colour--other-link-hover: @green;
226
227@forum-category-colour--beatmaps-bg: @purple;
228@forum-category-colour--beatmaps-link: @purple-text;
229@forum-category-colour--beatmaps-link-hover: @purple;
230
231@forum-category-colour--osu-bg: @pink;
232@forum-category-colour--osu-link: @pink-text;
233@forum-category-colour--osu-link-hover: @pink;
234
235@forum-category-colour--management-bg: @gray;
236@forum-category-colour--management-link: @gray-text;
237@forum-category-colour--management-link-hover: @gray;
238
239@forum-post--xs-avatar: 50px;
240
241@forum-topic-new-topic-button--width: 150px;
242@forum-topic-entry--main-margin: 40px;
243
244@forum-topic-nav-item--gutter: 2px;
245@forum-topic-nav-item--gutter-desktop: 3px;
246
247@beatmapset-panel-bg: hsl(var(--hsl-b2));
248@beatmapset-panel-height: 120px;
249@beatmapset-panel-extra-height-desktop: 140px;
250@beatmapset-panel-normal-height-desktop: 100px;
251
252@beatmap-discussion--avatar-size: 40px;
253@beatmap-discussion--reply-padding: (20px + @beatmap-discussion--avatar-size);
254@beatmap-discussion--timestamp-width: 110px;
255
256@beatmap-discussion--color-hype: @osu-colour-blue-3;
257@beatmap-discussion--color-mapper-note: @osu-colour-purple-1;
258@beatmap-discussion--color-praise: @osu-colour-blue-3;
259@beatmap-discussion--color-problem: @osu-colour-red-3;
260@beatmap-discussion--color-resolved: @osu-colour-lime-3;
261@beatmap-discussion--color-review: @osu-colour-c2;
262@beatmap-discussion--color-suggestion: @osu-colour-orange-3;
263
264@beatmap-score--hsl-perfect: var(--hsl-lime-1);
265
266@beatmappack-listing--gutter: 20px;
267
268@user-color-default: @blue-darker;
269
270@changelog-stream--stable: @blue;
271@changelog-stream--stable-fallback: @blue-darker;
272@changelog-stream--beta: @yellow-light;
273@changelog-stream--cutting-edge: @yellow-dark;
274@changelog-stream--lazer: @red;
275@changelog-stream--lazer-experimental: @red;
276@changelog-stream--web: @purple;
277@changelog-stream--wiki: #999;
278
279// FIXME: see FIXME for .fn-changelog-stream
280@changelog-stream--all: #fff;
281@changelog-stream--online: @green-light;
282@changelog-stream--offline: #000;
283
284@changelog-fg: #fff;
285@changelog-fg-content: @pink-lighter;
286
287@comment-dark-bg: @osu-colour-b5;
288@comment-dark-bg-extra: #222;
289@comment-dark-border-bg: @osu-colour-b2;
290@comment-dark-fg: #fff;
291
292@contest-selected-colour: #ffa500;
293
294@mod-width: 45px;
295@mod-height: 32px;
296
297@mod-height-normal: 22px;
298@mod-width-normal: (@mod-height-normal / @mod-height * @mod-width);
299
300@mod-height-small: 18px;
301@mod-width-small: (@mod-height-small / @mod-height * @mod-width);
302
303@page-spacing: 10px;
304
305@rank-width: 60px;
306@rank-height: 40px;
307
308@ranking-page-header-inset: 40px;
309
310@btn-circle-diameter: 30px;
311
312// store slider
313@slider-callout--arrow-height: 12px;
314@slider-callout--arrow-gap: 2px;
315@slider-callout--width: 128px;
316@slider-handle-protrusion: 5px;
317@slider-handle-height: @slider-height + 2 * @slider-handle-protrusion;
318@slider-handle-width: 10px;
319@slider-height: 10px;
320
321@user-card-icon-size: 26px; // starts becoming a muddled mess lower than this.
322@user-card-width: 290px;
323@user-card-width-min: 280px;
324@user-card-height: 120px;
325
326@user-list-icon-size: 20px;
327
328@flag-size-medium: 20px;