X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fsass%2Fcommon.scss;h=83e5b9045416cb42b541a0b6cd1f9b96dbca1be1;hb=cb6e69664f917891230a511608ceb568a5c176a0;hp=56129efb4c6308bfbd01df8cd560d70962e0d868;hpb=3a774bb649734fc3a2135ec1b52cef9a049880ee;p=alttp.git diff --git a/resources/sass/common.scss b/resources/sass/common.scss index 56129ef..83e5b90 100644 --- a/resources/sass/common.scss +++ b/resources/sass/common.scss @@ -24,6 +24,142 @@ h1 { } } +.modal-90w { + width: 90%; + max-width: none !important; +} + +.quote-alert { + position: relative; + &::after { + position: absolute; + top: 0; + right: 1ex; + content: "”"; + font-size: 3em; + opacity: .5; + } +} + +.snes-button-a, +.snes-button-b, +.snes-button-x, +.snes-button-y { + display: inline-block; + width: 1.5em; + height: 0; + padding: .75em 0; + box-shadow: .125ex .125ex .125ex rgba(0, 0, 0, .5); + border-radius: .75em; + font-size: 90%; + font-weight: bold; + text-align: center; + text-transform: uppercase; + line-height: 0; +} +.snes-button-a { + background: #c1121c; + color: white; +} +.snes-button-b { + background: #f7ba0b; + color: black; +} +.snes-button-x { + background: #00387b; + color: white; +} +.snes-button-y { + background: #007243; + color: white; +} +.snes-shoulder-l, +.snes-shoulder-r { + display: inline-block; + width: 3em; + height: 0; + padding: .75em 0; + box-shadow: .125ex .125ex .125ex rgba(0, 0, 0, .5); + border-radius: .75em; + font-size: 90%; + font-weight: bold; + text-align: center; + text-transform: uppercase; + line-height: 0; + background: #b2b4b2; + color: #54585a; +} +.snes-start, +.snes-select { + display: inline-flex; + flex-direction: column; + align-items: center; + vertical-align: middle; + font-size: 50%; + text-transform: uppercase; + + &::before { + display: inline-block; + content: ''; + background: #54585a; + width: 2em; + height: 0.7em; + border-radius: 0.35em; + transform: rotate(-40deg); + margin-bottom: 0.75em; + border: thin solid black; + } +} +.snes-dpad, +.snes-dpad-r, +.snes-dpad-dr, +.snes-dpad-d, +.snes-dpad-dl, +.snes-dpad-l, +.snes-dpad-ul, +.snes-dpad-u, +.snes-dpad-ur { + display: inline-block; + + &::before { + display: inline-block; + content: ''; + width: 2em; + height: 2em; + margin-right: 0.5ex; + vertical-align: middle; + background-repeat: no-repeat; + background-size: contain; + } + + &.compact { + position: relative; + > span { + display: none; + position: absolute; + left: -50%; + top: -125%; + background: $dark; + padding: 0.5ex 1ex; + white-space: nowrap; + } + &:active > span, + &:focus > span, + &:hover > span { + display: block; + } + } +} +.snes-dpad::before { background-image: url(/icon/dpad.svg); } +.snes-dpad-r::before { background-image: url(/icon/dpad-r.svg); } +.snes-dpad-dr::before { background-image: url(/icon/dpad-dr.svg); } +.snes-dpad-d::before { background-image: url(/icon/dpad-d.svg); } +.snes-dpad-dl::before { background-image: url(/icon/dpad-dl.svg); } +.snes-dpad-l::before { background-image: url(/icon/dpad-l.svg); } +.snes-dpad-ul::before { background-image: url(/icon/dpad-ul.svg); } +.snes-dpad-u::before { background-image: url(/icon/dpad-u.svg); } +.snes-dpad-ur::before { background-image: url(/icon/dpad-ur.svg); } + .spoiler { border-radius: 0.5ex; padding: 0 0.5ex;