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// main: compiled.less
5@import "app";
6
7*,
8::before,
9::after {
10 box-sizing: border-box;
11}
12
13::selection {
14 color: #fff;
15 background-color: @osu-colour-h2;
16}
17
18::placeholder {
19 color: inherit;
20 opacity: 0.54; // stolen from firefox
21}
22
23:root {
24 --font-default: @font-default;
25 --font-default-vi: @font-default-vi;
26 --font-default-zh: @font-default-zh;
27 --font-default-th: @font-default-th;
28 --font-default-zh-tw: @font-default-zh-tw;
29 --font-content: @font-content;
30
31 --navbar-height: @navbar-height;
32 --scroll-padding-top: calc(
33 var(--navbar-height) + 1em + var(--scroll-padding-top-extra, 0px)
34 );
35 --page-gutter: @gutter-v2;
36
37 @media @desktop {
38 --navbar-height: @nav2-height--pinned;
39 --page-gutter: @gutter-v2-desktop;
40 }
41}
42
43html,
44body {
45 height: 100%;
46}
47
48html {
49 scroll-padding-top: var(--scroll-padding-top);
50 scroll-padding-bottom: 1em;
51}
52
53body {
54 .default-font();
55 // no overlap between rightmost side and scrollbar
56 -ms-overflow-style: scrollbar;
57 // prevent moving navbar
58 overflow-y: scroll;
59 // fix tooltip positioning on edge when combined with overflow-y scroll above
60 position: static;
61
62 --z-index--nav-bar-mobile: @z-index--nav-bar;
63 &.js-nav2--active {
64 --z-index--nav-bar-mobile: @z-index--nav-bar-mobile-active;
65 }
66
67 --header-pinned-animation-duration: 0ms;
68 &.js-animate-nav {
69 --header-pinned-animation-duration: 300ms;
70 }
71
72 --beatmapset-status-colour-default: var(--hsl-b3);
73 --beatmapset-graveyard-bg-hsl: 0, 0%, 0%;
74 --beatmapset-graveyard-colour: hsl(var(--hsl-b1));
75 --beatmapset-wip-bg-hsl: var(--hsl-darkorange-1);
76 --beatmapset-wip-colour: hsl(var(--beatmapset-status-colour-default));
77 --beatmapset-pending-bg-hsl: var(--hsl-orange-1);
78 --beatmapset-pending-colour: hsl(var(--beatmapset-status-colour-default));
79 --beatmapset-qualified-bg-hsl: var(--hsl-blue-1);
80 --beatmapset-qualified-colour: hsl(var(--beatmapset-status-colour-default));
81 --beatmapset-approved-bg-hsl: var(--hsl-lime-1);
82 --beatmapset-approved-colour: hsl(var(--beatmapset-status-colour-default));
83 --beatmapset-ranked-bg-hsl: var(--hsl-lime-1);
84 --beatmapset-ranked-colour: hsl(var(--beatmapset-status-colour-default));
85 --beatmapset-loved-bg-hsl: var(--hsl-pink-1);
86 --beatmapset-loved-colour: hsl(var(--beatmapset-status-colour-default));
87
88 --beatmapset-discussion-colour--hype: hsl(var(--hsl-blue-3));
89 --beatmapset-discussion-colour--mapper_note: hsl(var(--hsl-purple-1));
90 --beatmapset-discussion-colour--praise: hsl(var(--hsl-blue-3));
91 --beatmapset-discussion-colour--problem: hsl(var(--hsl-red-3));
92 --beatmapset-discussion-colour--resolved: hsl(var(--hsl-lime-3));
93 --beatmapset-discussion-colour--review: hsl(var(--hsl-c2));
94 --beatmapset-discussion-colour--suggestion: hsl(var(--hsl-orange-3));
95
96 --forum-bg: hsl(var(--hsl-h1));
97 --forum-text: @link-color;
98 --forum-text: @link-hover-color;
99 --forum-item-background-color: hsl(var(--hsl-b4));
100 --forum-item-background-color-hover: hsl(var(--hsl-b3));
101
102 // the referred variables are defined in blade layout
103 --base-hue: var(--base-hue-override, var(--base-hue-default));
104 --base-hue-deg: calc(var(--base-hue) * 1deg);
105
106 // level tier gradients
107 --level-tier-iron: #bab3ab, #bab3ab;
108 --level-tier-bronze: #b88f7a, #855c47;
109 --level-tier-silver: #e0e0eb, #a3a3c2;
110 --level-tier-gold: #f0e4a8, #e0c952;
111 --level-tier-platinum: #a8f0ef, #52e0df;
112 --level-tier-rhodium: #d9f8d3, #a0cf96;
113 --level-tier-radiant: #97dcff, #ed82ff;
114 --level-tier-lustrous: #ffe600, #ed82ff;
115}
116
117#popup-container {
118 backface-visibility: hidden;
119 position: fixed;
120 width: 100%;
121 top: 155px;
122 z-index: 9999;
123 pointer-events: none;
124
125 .alert {
126 .default-box-shadow();
127 border: none;
128 pointer-events: auto;
129 }
130
131 .popup-text {
132 vertical-align: middle;
133 font-weight: 700;
134 }
135}