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 }