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// Generate a circle of any width.
7.circle(@diameter) {
8 border-radius: 50%;
9 width: @diameter;
10 height: @diameter;
11}
12
13.ellipsis-overflow() {
14 white-space: nowrap;
15 text-overflow: ellipsis;
16 overflow: hidden;
17}
18
19.fade-element(@duration, @type: ease-in-out, @target: all) {
20 transition: @target @duration @type;
21}
22
23.fancy-scrollbar() {
24 @_scrollbar-track: rgba(255, 255, 255, 0.025);
25 @_scrollbar-thumb: rgba(255, 255, 255, 0.5);
26
27 scrollbar-color: @_scrollbar-thumb @_scrollbar-track;
28 scrollbar-width: thin;
29
30 // scrollbar-width isn't inherited
31 * {
32 scrollbar-width: thin;
33 }
34
35 /* Turn on custom 8px wide scrollbar */
36 ::-webkit-scrollbar {
37 width: 10px; /* 1px wider than Lion. */
38 /* This is more usable for users trying to click it. */
39 background-color: @_scrollbar-track;
40 -webkit-border-radius: 100px;
41 }
42 /* hover effect for both scrollbar area, and scrollbar 'thumb' */
43 ::-webkit-scrollbar:hover {
44 background-color: rgba(0, 0, 0, 0.09);
45 }
46
47 ::-webkit-scrollbar:horizontal {
48 height: 10px;
49 }
50
51 /* The scrollbar 'thumb' ...that marque oval shape in a scrollbar */
52 ::-webkit-scrollbar-thumb {
53 background: @_scrollbar-thumb;
54 -webkit-border-radius: 100px;
55 background-clip: padding-box;
56 border: 2px solid rgba(255, 255, 255, 0);
57 min-height: 10px; /*Prevent it from getting too small */
58 }
59 ::-webkit-scrollbar-thumb:active {
60 /* Some darker color when you click it */
61 background: rgba(255, 255, 255, 0.61);
62 -webkit-border-radius: 100px;
63 }
64}
65
66.fancy-text(@colour) {
67 background-image: linear-gradient(@colour);
68 background-clip: text;
69 color: transparent;
70}
71
72.page-width(@extra-margin: 0px) {
73 width: calc(100% - (@extra-margin * 2));
74 max-width: (@container-sm - @extra-margin * 2);
75}
76
77.page-width-default() {
78 .page-width();
79
80 @media @desktop {
81 .page-width-desktop();
82 }
83}
84
85.page-width-desktop(@extra-margin: 0px) {
86 width: calc(100% - ((@extra-margin + @grid-gutter-width) * 2));
87 max-width: (@container-sm - @extra-margin * 2);
88}
89
90.default-border-radius() {
91 border-radius: @border-radius-base;
92}
93
94.default-box-shadow() {
95 box-shadow+: 0 1px @box-shadow-radius @box-shadow-color;
96}
97
98.default-bar-transition(@property: width, @duration: 0.25s, @function: cubic-bezier(0.645, 0.045, 0.355, 1)) {
99 transition: @property @duration @function;
100}
101
102.default-gutter-v2(@adjustment: 0) {
103 padding-left: (@gutter-v2 + @adjustment);
104 padding-right: (@gutter-v2 + @adjustment);
105
106 @media @desktop {
107 padding-left: (@gutter-v2-desktop + @adjustment);
108 padding-right: (@gutter-v2-desktop + @adjustment);
109 }
110}
111
112.light-header-overlay() {
113 &::after {
114 .full-size();
115 content: "";
116 background-color: hsla(var(--hsl-b5), 60%);
117 }
118}
119
120.inner-shadow-top() {
121 box-shadow+: inset 0 (@box-shadow-radius - 1px) @box-shadow-radius -1px @box-shadow-color;
122}
123
124.inset-box-shadow() {
125 box-shadow: inset 0 1px 3px fade(#000, 30%);
126}
127
128.link-blue-dark() {
129 color: @blue-dark;
130
131 .link-hover({
132 color: @blue;
133 });
134}
135
136// This style is for the remaining un-restyled sections,
137// nuke this when the entire site is correctly restyled
138.link-old() {
139 color: #2299bb;
140 .link-hover({ color: #6cf; });
141}
142
143.link-default() {
144 color: @osu-colour-l2;
145
146 .link-hover({
147 color: @osu-colour-l1;
148 });
149}
150
151.link-inverted() {
152 color: white;
153
154 .link-hover({
155 color: @osu-colour-l1;
156 });
157}
158
159.link-gray-dark() {
160 color: #555;
161
162 .link-hover({
163 color: #777;
164 });
165}
166
167.link-gray-light() {
168 color: @link-gray-light;
169
170 .link-hover({
171 color: @link-gray-light-hover;
172 });
173}
174
175.link-hover(@rules) {
176 &:hover,
177 &:focus,
178 &:active {
179 @rules();
180 }
181}
182
183// still used by store
184.link-pink() {
185 color: @pink;
186
187 .link-hover({
188 color: @pink-text;
189 });
190}
191
192.link-plain() {
193 text-decoration: none;
194
195 .link-hover({
196 text-decoration: none;
197 });
198}
199
200.link-white() {
201 color: #fff;
202
203 .link-hover({
204 color: #fff;
205 });
206}
207
208// used in notification banner
209.link-yellow() {
210 color: @yellow;
211
212 .link-hover({
213 color: @yellow-light;
214 });
215}
216
217.thick-box-shadow() {
218 box-shadow: 0 2px 10px fade(#000, 50%);
219}
220
221.thicker-box-shadow() {
222 box-shadow: 0 10px 20px fade(#000, 25%);
223}
224
225.solid-text-shadow() {
226 text-shadow: 0 1px 1px fade(#000, 75%);
227}
228
229.default-text-shadow() {
230 text-shadow: 0 1px 3px fade(#000, 75%);
231}
232
233.thick-text-shadow() {
234 text-shadow: 0 2px 4px fade(#000, 75%);
235}
236
237.default-line() {
238 display: block;
239 height: 1px;
240 border: 0;
241 border-top: 1px solid #ccc;
242 padding: 0;
243}
244
245.center-content() {
246 display: inline-flex;
247 justify-content: center;
248 align-items: center;
249}
250
251.at2x(@url, @w: auto, @h: auto) {
252 .at2x-simple(@url);
253 background-size: @w @h;
254}
255
256.at2x-simple(@url) {
257 @url2x: replace(@url, "(\.[^.]+)$", "@2x$1");
258 background-image: url(@url);
259
260 @media @highdpi {
261 background-image: url(@url2x);
262 }
263}
264
265.at2x-simple-var(@var) {
266 background-image: var(@var);
267
268 @media @highdpi {
269 background-image: var(~"@{var}-2x");
270 }
271}
272
273.at2x-fallback(@var, @fallback) {
274 @fallback2x: replace(@fallback, "(\.[^.]+)$", "@2x$1");
275 background-image: var(@var, url(@fallback));
276
277 @media @highdpi {
278 background-image: var(~"@{var}-2x", url(@fallback2x));
279 }
280}
281
282.at2x-var(@key, @url) {
283 @url2x: replace(@url, "(\.[^.]+)$", "@2x$1");
284 @{key}: url(@url);
285 @{key}-2x: url(@url2x);
286}
287
288// Will force the element to be rendered in its own layer
289// in hardware accelerated mode.
290// Be careful that elements using this will have z-index context applied.
291.own-layer() {
292 transform: translateZ(0);
293}
294
295.full-size() {
296 position: absolute;
297 left: 0;
298 top: 0;
299 height: 100%;
300 width: 100%;
301}
302
303// used to account rounding error in chrome where 100% is few pixels short to the actual 100%.
304.full-size-overflow() {
305 position: absolute;
306 left: -10px;
307 top: -10px;
308 right: -10px;
309 bottom: -10px;
310}
311
312.btn-bg() {
313 background-image: url("~@images/backgrounds/button.svg");
314 background-size: 200px;
315 background-position: 50% 50%;
316}
317
318.icon-bg() {
319 .btn-bg();
320 background-size: cover;
321}
322
323.reset-input() {
324 outline: none;
325 border: none;
326 padding: 0;
327 margin: 0;
328 background: none;
329 -webkit-appearance: none;
330 -moz-appearance: none;
331}
332
333.content-font() {
334 font-family: var(--font-content-override, var(--font-content));
335 line-height: 1.35;
336}
337
338.default-font() {
339 font-family: var(--font-default-override, var(--font-default));
340}
341
342.webkit-line-clamp(@lines) {
343 // Magic line-clamping on webkit browsers (safari, chrome, etc).
344 // Other browsers won't show ellipses.
345 display: -webkit-box;
346 -webkit-line-clamp: @lines;
347 // It's required to tell autoprefixer to ignore the following line.
348 // Reference: https://github.com/postcss/autoprefixer/issues/1141
349 /* autoprefixer: ignore next */
350 -webkit-box-orient: vertical;
351}