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