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 .snes-button-a,
  82 .snes-button-b,
  83 .snes-button-x,
  84 .snes-button-y {
  85         display: inline-block;
  86         width: 2em;
  87         height: 0;
  88         padding: 1em 0;
  89         box-shadow: .125ex .125ex .125ex rgba(0, 0, 0, .5);
  90         border-radius: 1em;
  91         font-size: 90%;
  92         font-weight: bold;
  93         text-align: center;
  94         text-transform: uppercase;
  95         line-height: 0;
  96 }
  97 .snes-button-a {
  98         background: #c1121c;
  99         color: white;
 100 }
 101 .snes-button-b {
 102         background: #f7ba0b;
 103         color: black;
 104 }
 105 .snes-button-x {
 106         background: #00387b;
 107         color: white;
 108 }
 109 .snes-button-y {
 110         background: #007243;
 111         color: white;
 112 }
 113 .snes-shoulder-l,
 114 .snes-shoulder-r {
 115         display: inline-block;
 116         width: 3em;
 117         height: 0;
 118         padding: .75em 0;
 119         box-shadow: .125ex .125ex .125ex rgba(0, 0, 0, .5);
 120         border-radius: .75em;
 121         font-size: 90%;
 122         font-weight: bold;
 123         text-align: center;
 124         text-transform: uppercase;
 125         line-height: 0;
 126         background: #b2b4b2;
 127         color: #54585a;
 128 }
 129 .snes-start,
 130 .snes-select {
 131         display: inline-flex;
 132         flex-direction: column;
 133         align-items: center;
 134         vertical-align: middle;
 135         font-size: 50%;
 136         text-transform: uppercase;
 137
 138         &::before {
 139                 display: inline-block;
 140                 content: '';
 141                 background: #54585a;
 142                 width: 2em;
 143                 height: 0.7em;
 144                 border-radius: 0.35em;
 145                 transform: rotate(-40deg);
 146                 margin-bottom: 0.75em;
 147                 border: thin solid black;
 148         }
 149 }
 150 .snes-dpad,
 151 .snes-dpad-r,
 152 .snes-dpad-dr,
 153 .snes-dpad-d,
 154 .snes-dpad-dl,
 155 .snes-dpad-l,
 156 .snes-dpad-ul,
 157 .snes-dpad-u,
 158 .snes-dpad-ur {
 159         display: inline-block;
 160
 161         &::before {
 162                 display: inline-block;
 163                 content: '';
 164                 width: 2em;
 165                 height: 2em;
 166                 margin-right: 0.5ex;
 167                 vertical-align: middle;
 168                 background-repeat: no-repeat;
 169                 background-size: contain;
 170         }
 171
 172         &.compact {
 173                 position: relative;
 174                 > span {
 175                         display: none;
 176                         position: absolute;
 177                         left: -50%;
 178                         top: -125%;
 179                         background: $dark;
 180                         padding: 0.5ex 1ex;
 181                         white-space: nowrap;
 182                 }
 183                 &:active > span,
 184                 &:focus > span,
 185                 &:hover > span {
 186                         display: block;
 187                 }
 188         }
 189 }
 190 .snes-dpad::before { background-image: url(/icon/dpad.svg); }
 191 .snes-dpad-r::before { background-image: url(/icon/dpad-r.svg); }
 192 .snes-dpad-dr::before { background-image: url(/icon/dpad-dr.svg); }
 193 .snes-dpad-d::before { background-image: url(/icon/dpad-d.svg); }
 194 .snes-dpad-dl::before { background-image: url(/icon/dpad-dl.svg); }
 195 .snes-dpad-l::before { background-image: url(/icon/dpad-l.svg); }
 196 .snes-dpad-ul::before { background-image: url(/icon/dpad-ul.svg); }
 197 .snes-dpad-u::before { background-image: url(/icon/dpad-u.svg); }
 198 .snes-dpad-ur::before { background-image: url(/icon/dpad-ur.svg); }
 199
 200 .spoiler {
 201         border-radius: 0.5ex;
 202         padding: 0 0.5ex;
 203         background: $dark;
 204         color: $light;
 205
 206         &.hidden {
 207                 cursor: pointer;
 208
 209                 > .content {
 210                         visibility: hidden;
 211                 }
 212         }
 213 }
 214
 215 .text-discord {
 216         color: $discord;
 217 }
 218 .text-twitch {
 219         color: $twitch;
 220 }
 221
 222 .text-gold {
 223         color: $gold;
 224 }
 225 .text-silver {
 226         color: $silver;
 227 }
 228 .text-bronze {
 229         color: $bronze;
 230 }
 231
 232 .zelda-icon {
 233         position: relative;
 234         display: inline-flex;
 235         align-items: center;
 236         width: 2em;
 237         height: 2em;
 238
 239         img {
 240                 margin: auto;
 241                 max-width: 100%;
 242                 max-height: 100%;
 243         }
 244         .strike {
 245                 position: absolute;
 246                 top: 0;
 247                 left: 0;
 248                 width: 2em;
 249                 height: 2em;
 250                 display: flex;
 251                 align-items: center;
 252                 justify-content: center;
 253                 pointer-events: none;
 254
 255                 svg {
 256                         width: 100%;
 257                         height: 100%;
 258                 }
 259
 260                 path {
 261                         fill: red;
 262                         stroke: black;
 263                         stroke-width: 1px;
 264                         vector-effect: non-scaling-stroke;
 265                 }
 266         }
 267 }