basic auto tracking

[alttp.git] / resources / sass / common.scss

diff --git a/resources/sass/common.scss b/resources/sass/common.scss
index 879253c893aba8a92603c913bdfc52b8521ffdad..8fe76bbf588ac5c871dff2d3690e0b2ed34441f6 100644 (file)
--- 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,43 @@ h1 {
        max-width: none !important;
 }
 
+.pic-end {
+       float: right;
+       margin-left: 1rem;
+       margin-bottom: 1rem;
+}
+
+.pic-start {
+       float: left;
+       margin-right: 1rem;
+       margin-bottom: 1rem;
+}
+
+.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 {
@@ -41,16 +72,47 @@ h1 {
        }
 }
 
+.raw-html {
+       img[type="image/apng"] {
+               cursor: pointer;
+       }
+}
+
+.slider-container {
+       overflow: hidden;
+       height: 100%;
+       width: 100%;
+
+       > .slider-slides {
+               transition: transform 600ms;
+       }
+       &.horizontal {
+               > .slider-slides {
+                       height: 100%;
+                       white-space: nowrap;
+                       > .slider-slide {
+                               display: inline-block;
+                               width: 100%;
+                       }
+               }
+       }
+       &.vertical {
+               > .slider-slides {
+                       width: 100%;
+               }
+       }
+}
+
 .snes-button-a,
 .snes-button-b,
 .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;
@@ -196,6 +258,7 @@ h1 {
        position: relative;
        display: inline-flex;
        align-items: center;
+       vertical-align: middle;
        width: 2em;
        height: 2em;
 
@@ -204,6 +267,13 @@ h1 {
                max-width: 100%;
                max-height: 100%;
        }
+       .item-map-icon {
+               display: inline-block;
+               width: 100%;
+               height: 100%;
+               background: url(/items-v1.png);
+               background-size: 800% 1100%;
+       }
        .strike {
                position: absolute;
                top: 0;