X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fsass%2Fcommon.scss;h=3e88649417c1dcc9b8ced28749acd14768bc205e;hb=c01ebf99d629029288a2ea7cf6874ca076d87f70;hp=f585be09416b6912a4d7b9efa104d8fe072cbf1d;hpb=0f171dfffd9c0c2cc895c9f282c5f4550844cc5a;p=alttp.git

diff --git a/resources/sass/common.scss b/resources/sass/common.scss
index f585be0..3e88649 100644
--- a/resources/sass/common.scss
+++ b/resources/sass/common.scss
@@ -11,6 +11,196 @@ h1 {
 	margin-bottom: 2rem;
 }
 
+.button-bar {
+	margin: -0.5ex;
+	> * {
+		margin: 0.5ex;
+	}
+}
+
+.modal-90w {
+	width: 90%;
+	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 {
+		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: 2em;
+	height: 0;
+	padding: 1em 0;
+	box-shadow: .125ex .125ex .125ex rgba(0, 0, 0, .5);
+	border-radius: 1em;
+	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;
+	background: $dark;
+	color: $light;
+
+	&.hidden {
+		cursor: pointer;
+
+		> .content {
+			visibility: hidden;
+		}
+	}
+}
+
+.text-discord {
+	color: $discord;
+}
+.text-twitch {
+	color: $twitch;
+}
+
 .text-gold {
 	color: $gold;
 }
@@ -20,3 +210,40 @@ h1 {
 .text-bronze {
 	color: $bronze;
 }
+
+.zelda-icon {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	width: 2em;
+	height: 2em;
+
+	img {
+		margin: auto;
+		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;
+		}
+	}
+}