X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fsass%2Fcommon.scss;h=3e88649417c1dcc9b8ced28749acd14768bc205e;hb=c01ebf99d629029288a2ea7cf6874ca076d87f70;hp=83e5b9045416cb42b541a0b6cd1f9b96dbca1be1;hpb=18759929710746d45d0f69e4f09205db3ddc74af;p=alttp.git diff --git a/resources/sass/common.scss b/resources/sass/common.scss index 83e5b90..3e88649 100644 --- a/resources/sass/common.scss +++ b/resources/sass/common.scss @@ -12,15 +12,9 @@ h1 { } .button-bar { + margin: -0.5ex; > * { - margin-left: 0.5ex; - margin-right: 0.5ex; - } - > :first-child { - margin-left: 0; - } - > :last-child { - margin-right: 0; + margin: 0.5ex; } } @@ -29,6 +23,31 @@ h1 { max-width: none !important; } +.png-player { + display: flex; + flex-direction: column; + align-items: center; + + .screen { + background: black; + display: flex; + width: 100%; + height: auto; + + canvas { + flex-grow: 1; + -ms-interpolation-mode: nearest-neighbor; + image-rendering: crisp-edges; + image-rendering: pixelated; + } + } + + .controls { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + } +} + .quote-alert { position: relative; &::after { @@ -46,11 +65,11 @@ h1 { .snes-button-x, .snes-button-y { display: inline-block; - width: 1.5em; + width: 2em; height: 0; - padding: .75em 0; + padding: 1em 0; box-shadow: .125ex .125ex .125ex rgba(0, 0, 0, .5); - border-radius: .75em; + border-radius: 1em; font-size: 90%; font-weight: bold; text-align: center; @@ -193,6 +212,7 @@ h1 { } .zelda-icon { + position: relative; display: inline-flex; align-items: center; width: 2em; @@ -203,4 +223,27 @@ h1 { max-width: 100%; max-height: 100%; } + .strike { + position: absolute; + top: 0; + left: 0; + width: 2em; + height: 2em; + display: flex; + align-items: center; + justify-content: center; + pointer-events: none; + + svg { + width: 100%; + height: 100%; + } + + path { + fill: red; + stroke: black; + stroke-width: 1px; + vector-effect: non-scaling-stroke; + } + } }