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