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