]> git.localhorst.tv Git - alttp.git/blob - resources/sass/common.scss
log who sent manual random chats
[alttp.git] / resources / sass / common.scss
1 #header {
2         img {
3                 max-height: 2rem;
4                 width: auto;
5                 margin: -0.5rem 0.25rem;
6         }
7 }
8
9 h1 {
10         margin-top: 2.5rem;
11         margin-bottom: 2rem;
12 }
13
14 .aspect-box-container {
15         position: relative;
16         padding-top: 100%;
17 }
18 .aspect-box-content {
19         position: absolute;
20         top: 0;
21         left: 0;
22         width: 100%;
23         height: 100%;
24 }
25
26 .button-bar {
27         margin: -0.5ex;
28         > * {
29                 margin: 0.5ex;
30         }
31 }
32
33 .modal-90w {
34         width: 90%;
35         max-width: none !important;
36 }
37
38 .pic-end {
39         float: right;
40         margin-left: 1rem;
41         margin-bottom: 1rem;
42 }
43
44 .pic-start {
45         float: left;
46         margin-right: 1rem;
47         margin-bottom: 1rem;
48 }
49
50 .png-player {
51         display: flex;
52         flex-direction: column;
53         align-items: center;
54
55         .screen {
56                 background: black;
57                 display: flex;
58                 width: 100%;
59                 height: auto;
60
61                 canvas {
62                         flex-grow: 1;
63                         -ms-interpolation-mode: nearest-neighbor;
64                         image-rendering: crisp-edges;
65                         image-rendering: pixelated;
66                 }
67         }
68
69         .controls {
70                 margin-top: 0.5rem;
71                 margin-bottom: 0.5rem;
72         }
73 }
74
75 .quote-alert {
76         position: relative;
77         &::after {
78                 position: absolute;
79                 top: 0;
80                 right: 1ex;
81                 content: "”";
82                 font-size: 3em;
83                 opacity: .5;
84         }
85 }
86
87 .raw-html {
88         img[type="image/apng"] {
89                 cursor: pointer;
90         }
91 }
92
93 .slider-container {
94         overflow: hidden;
95         height: 100%;
96         width: 100%;
97
98         > .slider-slides {
99                 transition: transform 600ms;
100         }
101         &.horizontal {
102                 > .slider-slides {
103                         height: 100%;
104                         white-space: nowrap;
105                         > .slider-slide {
106                                 display: inline-block;
107                                 width: 100%;
108                         }
109                 }
110         }
111         &.vertical {
112                 > .slider-slides {
113                         width: 100%;
114                 }
115         }
116 }
117
118 .snes-button-a,
119 .snes-button-b,
120 .snes-button-x,
121 .snes-button-y {
122         display: inline-block;
123         width: 2em;
124         height: 0;
125         padding: 1em 0;
126         box-shadow: .125ex .125ex .125ex rgba(0, 0, 0, .5);
127         border-radius: 1em;
128         font-size: 90%;
129         font-weight: bold;
130         text-align: center;
131         text-transform: uppercase;
132         line-height: 0;
133 }
134 .snes-button-a {
135         background: #c1121c;
136         color: white;
137 }
138 .snes-button-b {
139         background: #f7ba0b;
140         color: black;
141 }
142 .snes-button-x {
143         background: #00387b;
144         color: white;
145 }
146 .snes-button-y {
147         background: #007243;
148         color: white;
149 }
150 .snes-shoulder-l,
151 .snes-shoulder-r {
152         display: inline-block;
153         width: 3em;
154         height: 0;
155         padding: .75em 0;
156         box-shadow: .125ex .125ex .125ex rgba(0, 0, 0, .5);
157         border-radius: .75em;
158         font-size: 90%;
159         font-weight: bold;
160         text-align: center;
161         text-transform: uppercase;
162         line-height: 0;
163         background: #b2b4b2;
164         color: #54585a;
165 }
166 .snes-start,
167 .snes-select {
168         display: inline-flex;
169         flex-direction: column;
170         align-items: center;
171         vertical-align: middle;
172         font-size: 50%;
173         text-transform: uppercase;
174
175         &::before {
176                 display: inline-block;
177                 content: '';
178                 background: #54585a;
179                 width: 2em;
180                 height: 0.7em;
181                 border-radius: 0.35em;
182                 transform: rotate(-40deg);
183                 margin-bottom: 0.75em;
184                 border: thin solid black;
185         }
186 }
187 .snes-dpad,
188 .snes-dpad-r,
189 .snes-dpad-dr,
190 .snes-dpad-d,
191 .snes-dpad-dl,
192 .snes-dpad-l,
193 .snes-dpad-ul,
194 .snes-dpad-u,
195 .snes-dpad-ur {
196         display: inline-block;
197
198         &::before {
199                 display: inline-block;
200                 content: '';
201                 width: 2em;
202                 height: 2em;
203                 margin-right: 0.5ex;
204                 vertical-align: middle;
205                 background-repeat: no-repeat;
206                 background-size: contain;
207         }
208
209         &.compact {
210                 position: relative;
211                 > span {
212                         display: none;
213                         position: absolute;
214                         left: -50%;
215                         top: -125%;
216                         background: $dark;
217                         padding: 0.5ex 1ex;
218                         white-space: nowrap;
219                 }
220                 &:active > span,
221                 &:focus > span,
222                 &:hover > span {
223                         display: block;
224                 }
225         }
226 }
227 .snes-dpad::before { background-image: url(/icon/dpad.svg); }
228 .snes-dpad-r::before { background-image: url(/icon/dpad-r.svg); }
229 .snes-dpad-dr::before { background-image: url(/icon/dpad-dr.svg); }
230 .snes-dpad-d::before { background-image: url(/icon/dpad-d.svg); }
231 .snes-dpad-dl::before { background-image: url(/icon/dpad-dl.svg); }
232 .snes-dpad-l::before { background-image: url(/icon/dpad-l.svg); }
233 .snes-dpad-ul::before { background-image: url(/icon/dpad-ul.svg); }
234 .snes-dpad-u::before { background-image: url(/icon/dpad-u.svg); }
235 .snes-dpad-ur::before { background-image: url(/icon/dpad-ur.svg); }
236
237 .spoiler {
238         border-radius: 0.5ex;
239         padding: 0 0.5ex;
240         background: $dark;
241         color: $light;
242
243         &.hidden {
244                 cursor: pointer;
245
246                 > .content {
247                         visibility: hidden;
248                 }
249         }
250 }
251
252 .text-discord {
253         color: $discord;
254 }
255 .text-twitch {
256         color: $twitch;
257 }
258
259 .text-gold {
260         color: $gold;
261 }
262 .text-silver {
263         color: $silver;
264 }
265 .text-bronze {
266         color: $bronze;
267 }
268
269 .zelda-icon {
270         position: relative;
271         display: inline-flex;
272         align-items: center;
273         vertical-align: middle;
274         width: 2em;
275         height: 2em;
276
277         img {
278                 margin: auto;
279                 max-width: 100%;
280                 max-height: 100%;
281         }
282         .item-map-icon {
283                 display: inline-block;
284                 width: 100%;
285                 height: 100%;
286         }
287         .strike {
288                 position: absolute;
289                 top: 0;
290                 left: 0;
291                 width: 2em;
292                 height: 2em;
293                 display: flex;
294                 align-items: center;
295                 justify-content: center;
296                 pointer-events: none;
297
298                 svg {
299                         width: 100%;
300                         height: 100%;
301                 }
302
303                 path {
304                         fill: red;
305                         stroke: black;
306                         stroke-width: 1px;
307                         vector-effect: non-scaling-stroke;
308                 }
309         }
310 }