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 }