X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fsass%2Fcommon.scss;h=0d61af3f5605901eda06ee3f67b8b8cf17d09a63;hb=90922f8595a8d4fd7780a0b137eed66eaf7d6c49;hp=879253c893aba8a92603c913bdfc52b8521ffdad;hpb=f1c8c3cc53a09d1c261875d2f482b6e19bc48a9a;p=alttp.git

diff --git a/resources/sass/common.scss b/resources/sass/common.scss
index 879253c..0d61af3 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,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,11 @@ h1 {
 		max-width: 100%;
 		max-height: 100%;
 	}
+	.item-map-icon {
+		display: inline-block;
+		width: 100%;
+		height: 100%;
+	}
 	.strike {
 		position: absolute;
 		top: 0;