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