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.btn-circle {
5 @top: btn-circle;
6 --transition: all 120ms ease-in-out;
7 --bg: @osu-colour-l4;
8 --bg-hover: @osu-colour-l3;
9 --bg-disabled: #333;
10 --colour: @osu-colour-c1;
11 --colour-hover: @osu-colour-c1;
12 .reset-input();
13 .circle(@btn-circle-diameter);
14 .default-box-shadow();
15 cursor: pointer;
16 display: inline-block;
17 text-shadow: inherit;
18
19 flex: none;
20 background-color: var(--bg);
21 color: var(--colour);
22 transition: var(--transition);
23 font-size: 14px;
24
25 .link-hover({
26 background-color: var(--bg-hover);
27 color: var(--colour-hover);
28 text-decoration: none;
29 box-shadow: 0 5px 15px fade(#000, 40%);
30 });
31
32 &--bbcode {
33 .default-text-shadow();
34 font-size: 13px;
35 box-shadow: none;
36 background-color: transparent;
37
38 &:focus,
39 &:hover,
40 &:active {
41 background-color: @osu-colour-l3;
42 }
43 }
44
45 &--blank {
46 background-color: transparent;
47 box-shadow: none;
48 opacity: 0.7;
49 cursor: default;
50
51 &:focus,
52 &:hover,
53 &:active {
54 box-shadow: none;
55 background-color: transparent;
56 }
57 }
58
59 &--follow {
60 --bg: hsl(var(--hsl-b3));
61 --bg-hover: hsl(var(--hsl-b1));
62 --bg-disabled: hsl(var(--hsl-b3));
63 --colour: hsl(var(--hsl-l1));
64 --colour-hover: hsl(var(--hsl-c1));
65 .circle(40px);
66 font-size: 12px; // icon size
67 }
68
69 &--follow-small {
70 --bg: transparent;
71 --bg-hover: transparent;
72 --bg-disabled: transparent;
73 --colour: hsl(var(--hsl-l1));
74 --colour-hover: hsl(var(--hsl-c1));
75 font-size: 12px; // icon size
76 border-radius: 0;
77 width: 1em;
78 height: $width;
79 padding: 0;
80 vertical-align: middle;
81 }
82
83 &--page-toggle {
84 --bg: hsl(var(--hsl-b2));
85 --bg-hover: hsl(var(--hsl-b1));
86 .center-content();
87 .link-plain();
88 .link-white();
89 font-size: 12px; // icon size
90 box-shadow: none;
91 position: relative;
92
93 .link-hover({
94 box-shadow: none;
95 });
96 }
97
98 &--page-toggle-detail {
99 .circle(40px);
100 }
101
102 &--topic-entry {
103 .circle(30px);
104 box-shadow: none;
105 margin: 2.5px;
106 font-size: 14px;
107
108 &:focus,
109 &:hover,
110 &:active {
111 .default-box-shadow();
112 }
113 }
114
115 &--topic-nav {
116 margin: @forum-topic-nav-item--gutter;
117
118 @media @desktop {
119 margin: 0 @forum-topic-nav-item--gutter-desktop;
120 }
121 }
122
123 &--activated,
124 &.js-activated {
125 background-color: @osu-colour-h2;
126 color: @osu-colour-b5;
127
128 &:focus,
129 &:hover,
130 &:active {
131 background-color: @osu-colour-l3;
132 color: @osu-colour-b5;
133 }
134 }
135
136 // colour variations
137 &--purple {
138 background-color: @purple-dark;
139
140 .link-hover({
141 background-color: @purple;
142 });
143
144 &.@{top}--activated {
145 background-color: @purple-light;
146
147 .link-hover({
148 background-color: @purple-lighter;
149 });
150 }
151 }
152
153 &--yellow {
154 background-color: @yellow-dark;
155
156 .link-hover({
157 background-color: @yellow;
158 });
159
160 &.@{top}--activated {
161 background-color: @yellow-light;
162
163 .link-hover({
164 background-color: @yellow-lighter;
165 });
166 }
167 }
168
169 // overrides everything else
170 &[disabled],
171 &.js-disabled,
172 &--disabled {
173 background-color: var(--bg-disabled);
174 cursor: not-allowed;
175 }
176
177 // some browsers can't display flex for <button>
178 &__content {
179 .center-content();
180 height: 100%;
181 width: 100%;
182 // for icon-flip
183 position: relative;
184 }
185
186 &__icon {
187 .full-size();
188 .center-content();
189 --normal-opacity: 1;
190 --hover-opacity: 1;
191
192 opacity: var(--normal-opacity);
193 transition: var(--transition);
194
195 .@{top}:hover &,
196 .@{top}:active & {
197 opacity: var(--hover-opacity);
198 }
199
200 &--hover-hide {
201 --normal-opacity: 1;
202 --hover-opacity: 0;
203 }
204
205 &--hover-show {
206 --normal-opacity: 0;
207 --hover-opacity: 1;
208 }
209 }
210}