keii.dev
the browser-facing portion of osu!
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.page-tabs {
5 --border-size: 5px;
6 --tab-hover-border-colour: transparent;
7 --tab-active-border-colour: @osu-colour-h1;
8
9 display: flex;
10 gap: 20px;
11 width: 100%;
12 justify-content: center;
13 margin-bottom: 1px;
14 position: relative;
15
16 &::before {
17 content: "";
18
19 position: absolute;
20 top: 100%;
21 left: 0;
22
23 width: 100%;
24 height: 1px;
25
26 background-image: linear-gradient(
27 to left,
28 transparent 10%,
29 @osu-colour-b1 50%,
30 transparent 90%
31 );
32 }
33
34 &--follows {
35 max-width: max-content;
36 margin: 0 0 10px;
37 --border-size: 2px;
38 --tab-hover-border-colour: var(--tab-active-border-colour);
39
40 &::before {
41 background-image: none;
42 background-color: hsl(var(--hsl-d2));
43 width: 100%;
44 height: var(--border-size);
45 top: calc(100% - var(--border-size));
46 }
47 }
48
49 &__tab {
50 margin: 0;
51 padding: 5px 0;
52 border-bottom: var(--border-size) solid transparent;
53
54 font-size: 14px;
55 color: white;
56
57 cursor: pointer;
58 position: relative; // so it's above block's ::before
59
60 &:hover,
61 &:active,
62 &:focus {
63 color: @osu-colour-l1;
64 text-decoration: none;
65 border-bottom-color: var(--tab-hover-border-colour);
66 }
67
68 &--active {
69 font-weight: 700;
70 border-bottom-color: var(--tab-active-border-colour);
71 --tab-hover-border-colour: var(--tab-active-border-colour);
72 }
73
74 &--disabled {
75 color: #ccc;
76 cursor: default;
77
78 &:hover,
79 &:active,
80 &:focus {
81 color: #ccc;
82 text-decoration: none;
83 }
84 }
85 }
86}