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