]> git.localhorst.tv Git - alttp.git/blob - resources/sass/common.scss
fix some shit
[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         > * {
16                 margin-left: 0.5ex;
17                 margin-right: 0.5ex;
18         }
19         > :first-child {
20                 margin-left: 0;
21         }
22         > :last-child {
23                 margin-right: 0;
24         }
25 }
26
27 .modal-90w {
28         width: 90%;
29         max-width: none !important;
30 }
31
32 .quote-alert {
33         position: relative;
34         &::after {
35                 position: absolute;
36                 top: 0;
37                 right: 1ex;
38                 content: "”";
39                 font-size: 3em;
40                 opacity: .5;
41         }
42 }
43
44 .snes-button-a,
45 .snes-button-b,
46 .snes-button-x,
47 .snes-button-y {
48         display: inline-block;
49         width: 1.5em;
50         height: 0;
51         padding: .75em 0;
52         box-shadow: .125ex .125ex .125ex rgba(0, 0, 0, .5);
53         border-radius: .75em;
54         font-size: 90%;
55         font-weight: bold;
56         text-align: center;
57         text-transform: uppercase;
58         line-height: 0;
59 }
60 .snes-button-a {
61         background: #c1121c;
62         color: white;
63 }
64 .snes-button-b {
65         background: #f7ba0b;
66         color: black;
67 }
68 .snes-button-x {
69         background: #00387b;
70         color: white;
71 }
72 .snes-button-y {
73         background: #007243;
74         color: white;
75 }
76 .snes-shoulder-l,
77 .snes-shoulder-r {
78         display: inline-block;
79         width: 3em;
80         height: 0;
81         padding: .75em 0;
82         box-shadow: .125ex .125ex .125ex rgba(0, 0, 0, .5);
83         border-radius: .75em;
84         font-size: 90%;
85         font-weight: bold;
86         text-align: center;
87         text-transform: uppercase;
88         line-height: 0;
89         background: #b2b4b2;
90         color: #54585a;
91 }
92 .snes-start,
93 .snes-select {
94         display: inline-flex;
95         flex-direction: column;
96         align-items: center;
97         vertical-align: middle;
98         font-size: 50%;
99         text-transform: uppercase;
100
101         &::before {
102                 display: inline-block;
103                 content: '';
104                 background: #54585a;
105                 width: 2em;
106                 height: 0.7em;
107                 border-radius: 0.35em;
108                 transform: rotate(-40deg);
109                 margin-bottom: 0.75em;
110                 border: thin solid black;
111         }
112 }
113 .snes-dpad,
114 .snes-dpad-r,
115 .snes-dpad-dr,
116 .snes-dpad-d,
117 .snes-dpad-dl,
118 .snes-dpad-l,
119 .snes-dpad-ul,
120 .snes-dpad-u,
121 .snes-dpad-ur {
122         display: inline-block;
123
124         &::before {
125                 display: inline-block;
126                 content: '';
127                 width: 2em;
128                 height: 2em;
129                 margin-right: 0.5ex;
130                 vertical-align: middle;
131                 background-repeat: no-repeat;
132                 background-size: contain;
133         }
134
135         &.compact {
136                 position: relative;
137                 > span {
138                         display: none;
139                         position: absolute;
140                         left: -50%;
141                         top: -125%;
142                         background: $dark;
143                         padding: 0.5ex 1ex;
144                         white-space: nowrap;
145                 }
146                 &:active > span,
147                 &:focus > span,
148                 &:hover > span {
149                         display: block;
150                 }
151         }
152 }
153 .snes-dpad::before { background-image: url(/icon/dpad.svg); }
154 .snes-dpad-r::before { background-image: url(/icon/dpad-r.svg); }
155 .snes-dpad-dr::before { background-image: url(/icon/dpad-dr.svg); }
156 .snes-dpad-d::before { background-image: url(/icon/dpad-d.svg); }
157 .snes-dpad-dl::before { background-image: url(/icon/dpad-dl.svg); }
158 .snes-dpad-l::before { background-image: url(/icon/dpad-l.svg); }
159 .snes-dpad-ul::before { background-image: url(/icon/dpad-ul.svg); }
160 .snes-dpad-u::before { background-image: url(/icon/dpad-u.svg); }
161 .snes-dpad-ur::before { background-image: url(/icon/dpad-ur.svg); }
162
163 .spoiler {
164         border-radius: 0.5ex;
165         padding: 0 0.5ex;
166         background: $dark;
167         color: $light;
168
169         &.hidden {
170                 cursor: pointer;
171
172                 > .content {
173                         visibility: hidden;
174                 }
175         }
176 }
177
178 .text-discord {
179         color: $discord;
180 }
181 .text-twitch {
182         color: $twitch;
183 }
184
185 .text-gold {
186         color: $gold;
187 }
188 .text-silver {
189         color: $silver;
190 }
191 .text-bronze {
192         color: $bronze;
193 }
194
195 .zelda-icon {
196         position: relative;
197         display: inline-flex;
198         align-items: center;
199         width: 2em;
200         height: 2em;
201
202         img {
203                 margin: auto;
204                 max-width: 100%;
205                 max-height: 100%;
206         }
207         .strike {
208                 position: absolute;
209                 top: 0;
210                 left: 0;
211                 width: 2em;
212                 height: 2em;
213                 display: flex;
214                 align-items: center;
215                 justify-content: center;
216                 pointer-events: none;
217
218                 svg {
219                         width: 100%;
220                         height: 100%;
221                 }
222
223                 path {
224                         fill: red;
225                         stroke: black;
226                         stroke-width: 1px;
227                         vector-effect: non-scaling-stroke;
228                 }
229         }
230 }