dialog-ide 0.5.0

package/resources/bundle/play.css

@@ -0,0 +1,432 @@
+/* If using Google web fonts, import them here, before anything else */
+
+html {
+	/* These seven basic colors are used for most of the interface */
+	/* See below for how they're applied */
+	--theme-darkest: #000000;
+	--theme-dark: #222222;
+	--theme-medium: #888888;
+	--theme-light: #cccccc;
+	--theme-lightest: #eeeeee;
+	--accent-dark: #c95c03; /* An orange color chosen by forum poll */
+	--accent-light: #fc8f36; /* Will it work? Only real-world testing can say! */
+}
+
+#aadefaults {
+	--night-page: var(--theme-darkest); /* Night mode outside gameport */
+	--night-bg: inherit; /* Night mode background */
+	--night-fg: var(--theme-light); /* Night mode text */
+	--day-page: var(--theme-lightest); /* Day mode outside gameport */
+	--day-bg: inherit; /* Day mode background */
+	--day-fg: var(--theme-darkest); /* Day mode text */
+	--ui: var(--theme-medium); /* UI elements like menu lines and buttons */
+	--ui-hover: var(--theme-light); /* UI elements when hovered */
+	--menu-bg: var(--theme-light); /* Menu backgrounds */
+	--menu-fg: var(--theme-darkest); /* Menu text */
+	--menu-hover: var(--theme-lightest); /* Menu text when hovered (for options) */
+	--panel-dark: var(--theme-dark); /* Transcript panel bg/fg depending on mode */
+	--panel-light: var(--theme-light); /* Transcript panel fg/bg depending on mode */
+
+	--progress-bg: var(--theme-light); /* Background of progress bar */
+	--progress-top: var(--accent-light); /* Top half of progress bar */
+	--progress-bottom: var(--accent-dark); /* Bottom half of progress bar */
+
+	--night-link: var(--accent-dark); /* Night mode link */
+	--night-link-hover: var(--accent-light); /* Night mode link, hovered */
+	--day-link: var(--accent-dark); /* Day mode link */
+	--day-link-hover: var(--accent-light); /* Day mode link, hovered */
+
+	--font-status: Geneva, sans-serif; /* Status bar and menus */
+	--font-body: Georgia, serif; /* Main body text */
+
+	--night-scroll-fg: var(--theme-medium);
+	--night-scroll-bg: var(--theme-dark);
+	--day-scroll-fg: var(--theme-medium);
+	--day-scroll-bg: var(--theme-light);
+}
+
+#aadefaults2 {
+	--bg: var(--day-bg);
+	--text: var(--day-fg);
+	--link: var(--day-link);
+	--link-hover: var(--day-link-hover);
+	background-color: var(--day-page);
+	color: var(--text);
+	scrollbar-color: var(--day-scroll-fg) var(--day-scroll-bg);
+}
+
+.night #aadefaults2 {
+	--bg: var(--night-bg);
+	--text: var(--night-fg);
+	--link: var(--night-link);
+	--link-hover: var(--night-link-hover);
+	background-color: var(--night-page);
+	scrollbar-color: var(--night-scroll-fg) var(--night-scroll-bg);
+}
+
+html, body, #aabody1, #aabody2, #aabody3, #aadefaults, #aadefaults2 {
+	width: 100%;
+	height: 100%;
+	margin: 0;
+}
+
+body.enlarge {
+	font-size: 2em;
+}
+
+/* This undoes the normal h2 styling from https://searchfox.org/mozilla-central/source/layout/style/res/html.css */
+/* We're using h2 elements for each past player input, so that screen readers can easily jump to them */
+/* But that means we don't want them to be styled like h2s, we want them to be styled like normal text */
+h2 {
+	display: inline;
+	font-size: 1em;
+	font-weight: normal;
+}
+
+#aacontainer {
+	max-width: 200ch;
+	margin: auto;
+	position: relative;
+	line-height: 1.35em;
+	background-color: var(--bg);
+}
+
+#aaouterstatus {
+	padding-top: 20px;
+	min-height: 1.2em;
+	line-height: 1em;
+}
+
+#aastatusborder {
+	height: .1em;
+	background-color: var(--text);
+	opacity: 0; /* Fades in over one second when a status bar is created */
+	animation-fill-mode: both;
+}
+
+#aastatus {
+	padding-left: .3em;
+	padding-right: .3em;
+	font-family: var(--font-status);
+	min-height: 1.2em;
+	overflow: hidden;
+	display: none;
+	animation-name: fadein;
+	animation-duration: .9s;
+	animation-delay: .1s;
+	animation-fill-mode: both;
+}
+
+.nofont #aastatus {
+	font-family: sans-serif;
+}
+
+.aaprogress {
+	background-color: var(--progress-bottom);
+	height: .31em;
+	border-top: .19em solid var(--progress-top);
+}
+
+.aaouterprogress {
+	border-radius: .3em;
+	border: .1em solid var(--progress-bg);
+	margin-top: .2em;
+	text-align: left;
+	overflow: hidden;
+}
+
+#aamenubutton {
+	height: 1.3em;
+	width: 1.0em;
+	float: right;
+	margin-left: .3em;
+	padding-right: .3em;
+	position: relative;
+}
+
+#aamenulines {
+	margin-top: .3em;
+	width: 1.0em;
+	height: .125em;
+	border-top: .375em double var(--ui);
+	border-bottom: .125em solid var(--ui);
+	cursor: pointer;
+	float: right;
+}
+
+#aamenulines:hover {
+	border-color: var(--ui-hover);
+}
+
+.aacb {
+	width: 1em;
+	height: 1em;
+	vertical-align: middle;
+}
+
+#aamenu {
+	z-index: 1;
+	display: none;
+	position: relative;
+	top: .5em;
+	left: -18.6ch; /* I don't love these two being hardcoded */
+	width: 19.7ch; /* Maybe there's a better way to compute them */
+	overflow: hidden;
+	font-size: .8em;
+}
+
+#aamenulist {
+	background-color: var(--menu-bg);
+	color: var(--menu-fg);
+	border: 2px solid var(--menu-hover);
+	border-radius: .3em;
+	padding: .2em;
+	z-index: 1;
+}
+
+.aamenuoption {
+	margin: 1px;
+	overflow: hidden;
+	cursor: pointer;
+}
+
+.aamenuoption:hover {
+	color: var(--menu-hover);
+}
+
+.aahastooltip {
+	text-decoration: underline;
+	text-decoration-style: dotted;
+}
+
+#aaform {
+	margin: 0;
+}
+
+#aamain {
+	overflow-y: auto;
+	font-family: var(--font-body);
+	height: 80%;
+	margin: .3em;
+	padding-right: 1.3em;
+	clear: right;
+}
+
+.nofont #aamain {
+	font-family: serif;
+}
+
+#aascriptouter {
+	height: 80%;
+	margin: .3em;
+	padding-right: 1.3em;
+	clear: right;
+	display: none;
+}
+
+#aascriptinner {
+	width: 100%;
+	border: 0px;
+	padding: .2em;
+	background-color: var(--panel-light);
+	color: var(--panel-dark);
+}
+
+.night #aascriptinner { /* Invert dark and light at night */
+	background-color: var(--panel-dark);
+	color: var(--panel-light);
+}
+
+#aascriptclose {
+	border: .1em solid var(--menu-fg);
+	border-radius: .3em;
+	width: 20ch;
+	text-align: center;
+	margin: auto;
+	padding: .1em;
+	background-color: var(--ui);
+	color: var(--menu-fg);
+}
+
+#aascriptclose:hover {
+	background-color: var(--ui-hover);
+}
+
+#aainput {
+	width: 100%;
+	border: none;
+	outline: none;
+	font-family: var(--font-body);
+	font-size: 1em;
+	display: none;
+	background-color: transparent;
+	color: inherit; /* Necessary because some browsers have built-in CSS rules that apply to `form input`, and we want it to inherit from `body` */
+	padding: 0;
+	padding-bottom: 0.1em; /* Compensate for the height to ensure the bottom isn't cut off */
+	height: 1.1em;
+}
+
+.nofont #aainput {
+	font-family: serif;
+}
+
+@keyframes fadein {
+	0% {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+p {
+	margin: 0;
+	animation-name: fadein;
+	animation-duration: .9s;
+	animation-delay: .1s;
+	animation-fill-mode: both;
+	width: 100%;
+}
+
+#aastatus p {
+	animation-name: none;
+	animation-duration: 0;
+	animation-delay: 0;
+}
+
+a {
+	text-decoration: inherit;
+}
+
+.aalink {
+	color: var(--link);
+	cursor: pointer;
+}
+
+.aalink:hover {
+	color: var(--link-hover);
+	text-decoration: underline;
+}
+
+.aailink {
+	color: var(--link);
+}
+
+.aailink:hover {
+	color: var(--link-hover);
+	text-decoration: underline;
+}
+
+@keyframes fadelink {
+	0% {
+		color: var(--link);
+	}
+	to {
+		color: inherit;
+	}
+}
+
+.aadeadlink {
+	animation-name: fadelink;
+	animation-duration: .9s;
+	animation-delay: .1s;
+	animation-fill-mode: both;
+	cursor: text;
+}
+
+.aahidelink {
+	color: inherit;
+	cursor: text; /* Since now they're <a>s, they default to a pointer */
+}
+
+.aareveal {
+	margin-top: .8em;
+	margin-bottom: .8em;
+	color: var(--link);
+	animation-name: fadein;
+	animation-duration: .9s;
+	animation-delay: .1s;
+	animation-fill-mode: both;
+	text-align: center;
+	font-size: .8em;
+}
+
+.aareveal:hover {
+	color: var(--link-hover);
+	text-decoration: underline;
+}
+
+#aaaboutouter {
+	position: absolute;
+	top: 20%;
+	width: 100%;
+	z-index: 2;
+	display: none;
+}
+
+#aaerrorouter {
+	position: absolute;
+	top: 20%;
+	width: 100%;
+	z-index: 2;
+	display: none;
+}
+
+#aaaboutinner, #aaerrorinner {
+	background-color: var(--ui);
+	border: .1em solid var(--menu-fg);
+	border-radius: .3em;
+	width: 20em;
+	margin: auto;
+	padding: 1em;
+}
+
+.aaaboutline {
+	text-align: center;
+}
+
+#aaaboutmeta {
+	white-space: pre-line;
+}
+
+.aaerrorline {
+	margin-top: 1em;
+	margin-bottom: 1em;
+}
+
+img {
+	max-width: 100%;
+}
+
+.aaspacen {
+	display: inline-block;
+}
+
+.aaspanb {
+	font-weight: bold;
+}
+
+.aaspani {
+	font-style: italic;
+}
+
+.aaspanf {
+	font-family: monospace, monospace;
+	font-size: 1em;
+}
+
+.aaspanunb {
+	font-weight: normal;
+}
+
+.aaspanuni {
+	font-style: normal;
+}
+
+.aaspanunf {
+	font-family: var(--font-body);
+}
+
+.nofont .aaspanunf {
+	font-family: serif;
+}