/* Styling across all StilleBot pages */
@import url('https://fonts.googleapis.com/css2?family=Lexend&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Symbols+2&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');

* {box-sizing: border-box;}

body, button { /* not sure why buttons don't get this by inheritance */
	font-family: 'Lexend', 'Noto Color Emoji', 'Noto Sans Symbols 2', sans-serif; /* Match the font names with the ones used in command_gui.js */
	line-height: 1.3;
}
code, pre {
	font-family: monospace, 'Noto Color Emoji', 'Noto Sans Symbols 2';
	font-size: 12px; /* For some reason, just specifying the family doesn't do what I expect; respecifying the size ensures that it stays the same */
}

td {padding: 0.25em 0.5em;}

table {border-collapse: collapse;}

input {background: #ffe;}
input[type=submit] {background: inherit;}
input[type=number] {width: 4.5em;} /* TODO: See if this breaks anything; it was just 4em */
input[type=color] {vertical-align: middle;}
input.narrow {width: 6em;}

dialog {
	/*position: fixed;*/ /* Was this needed for anything other than old Firefoxes? If not, remove it. */
	resize: both; overflow: auto; /* TODO: Should only some dialogs support resizing? */
}
/* Create a scroll context inside dialogs */
dialog > section {
	display: flex;
	flex-direction: column;
}
dialog > section > header {
	display: flex;
	justify-content: space-between;
}
dialog > section > header > h3 {
	margin: 0.5em 0;
}
dialog > section > div, dialog > section > form > div {
	overflow-y: auto;
	max-height: 70vh;
}
/* To give a dialog a single interior scrollable, add class "resizedlg"
to the dialog and "primary" to the one that should scroll. */
.resizedlg > section > div {
	display: flex;
	flex-direction: column;
}
.resizedlg > section > div > * {
	flex: 0 0;
}
.resizedlg > section > div > .primary {
	overflow-y: auto;
	flex: 1;
}
.dialog_cancel {
	position: relative;
	right: -8px; top: -8px;
}

.emotedtext {
	line-height: 35px;
}

main {
	max-width: 1200px;
	margin: auto;
	background-color: #eeeeee;
	padding: 0 0.5em;
}

.widetext {width: 100%;}

h1,h2,h3 {
	max-width: max-content;
	margin-left: auto; margin-right: auto;
}

.flagstable {min-width: 700px;}

.simpletext {display: flex;}
.simpletext input {flex-grow: 1;}
.simpletext button {flex-grow: 0;}

.optedmsg {
	padding: .5em;
	margin: .5em;
}

.iftrue {border-color: #0bb;}
.iffalse {border-color: #a08;}

nav a {
	font-size: smaller;
}

/* Hype train styles */
#status {
	background-color: #a0a0ff;
	font-size: 125%;
}
#status.active {
	background-color: #a0ffa0;
	font-weight: bold;
}
:root {
	/* Define some colours that can also be used in a gradient */
	--hype-level1: #ffffd0; /* Progressively more vibrant colours as you go up the levels */
	--hype-level2: #ffffb0; /* Or #ffffa0 */
	--hype-level3: #ffff90; /* Or #fff870 for a more 'gold' colour */
	--hype-level4: #ffff70; /* Or #fff040 */
	--hype-level5: #ffff50; /* Or #ffe820 */
	--hype-level6: #ffff00;
}
#nextlevel.level1 {background-color: var(--hype-level1);}
#nextlevel.level2 {background-color: var(--hype-level2);}
#nextlevel.level3 {background-color: var(--hype-level3);}
#nextlevel.level4 {background-color: var(--hype-level4);}
#nextlevel.level5 {background-color: var(--hype-level5);}
#nextlevel.level6 {background-color: var(--hype-level6);}
/* It'd be really cool to get the conductors' chat colours, but probably impractical */
#cond_bits.present, #cond_subs.present {background-color: #e060e0;}

.dirty {
	background-color: #fdd;
}

#templates {
	min-height: 30em;
}

#templates tbody tr:nth-child(odd) {
	background: #eef;
	cursor: pointer;
}

#templates tbody tr:nth-child(even) {
	background: #eff;
	cursor: pointer;
}

#templates tbody tr:hover {
	background: #ff0;
}

table[data-dest=""] > tr.targetrow {
	display: none;
}

table[data-builtin=""] > tr.paramrow {
	display: none;
}

table[data-dest]:not([data-dest="/set"]):not([data-dest="/web"]) > tr.destcfgrow {
	display: none;
}

/* Styling of command editors - classic, graphical, and raw */
#advanced_view header div {order: 2;} /* Force the close button to the end */
.buttonbox {
	display: flex;
	padding: 0; margin: 5px 0;
	list-style-type: none;
	gap: 5px;
	align-items: flex-end;
	flex-wrap: wrap;
}
.buttonbox.attached {margin-bottom: 1px;}
#cmdviewtabset label {
	background: #a0f0c0;
	padding-right: 0.25em;
}

#command_gui_position {
	border: 1px solid black;
	margin: 0.5em;
}
.msgedit {
	width: min-content;
	position: relative;
}
.msgedit .emotepicker {
	position: absolute;
	right: 0.2em;
	bottom: 1.7em;
	cursor: pointer;
}
.msgedit textarea {
	height: 14em;
	width: 560px;
}
.slashcommands.short {
	height: 1.2em;
	width: 560px;
	overflow: hidden;
	border: 1px solid transparent;
	white-space: nowrap;
	text-overflow: ellipsis;
	/* Hiding overflow can cause us to lose descenders. Setting line-height to 1 stops
	this, but we need to adjust other positioning to compensate. */
	line-height: 1;
	position: relative;
	top: 0.2em;
	padding-left: 3px;
	padding-right: 3px;
}
.slashcommands.full {
	position: fixed;
	visibility: hidden;
	border: 1px solid black;
	margin-top: -1.2em;
	background: white;
	width: 560px;
	max-height: 15em;
	overflow-y: auto;
	padding-left: 3px;
	padding-right: 3px;
}
.slashcommands.full:hover {visibility: visible;}
.slashcommands.short:hover ~ .slashcommands.full {visibility: visible;}
.slashcommands p {
	margin: 0;
	padding-left: 2em;
	text-indent: -2em;
}
.slashcommands p code {
	white-space: nowrap;
}
.slashcommands .curparam {
	background: #66339944;
}

#emotelist {
	max-width: 40em;
	padding-right: 1em;
	margin-bottom: 0.25em;
}
#emotelist h5 {
	margin: 0;
}
#emotepicker p {
	margin: 0;
}
.emoteset {
	border: 1px solid rebeccapurple;
	padding: 0.5em;
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 1em;
}
.emoteset img {
	cursor: pointer;
}

#typedesc {max-width: fit-content;}
#setprops {min-width: 25em;}
/* Alternating colours doesn't really improve things much
#setprops tr:nth-child(odd) {background: #dff;}
#setprops tr:nth-child(even) {background: #ddf;}
*/

#command_gui_position {position: relative;}

#command_gui_keybinds {
	display: block;
	position: absolute;
	top: 0; right: 0;
}

#command_gui_keybinds abbr {
	display: block;
	position: absolute;
	top: 0; right: 0;
	background: #ddd;
	border: 1px solid black;
	padding: 0.1em 0.25em;
	text-decoration: none;
}

#command_gui_keybinds input {display: none;}

#command_gui_keybinds input ~ ul {
	display: block;
	position: absolute;
	top: 0; right: 0;
	background: #ddd;
	border: 1px solid black;
	list-style-type: none;
	padding: 0; margin: 0;
	overflow: hidden;

	width: 0; height: 0;
}

#command_gui_keybinds input:checked ~ ul {
	width: unset; height: unset;
	padding: 0.5em;
}

#command_gui_keybinds li {
	white-space: nowrap;
}

.clipbtn {cursor: copy;}
#copied {
	opacity: 0;
	position: fixed;
	background: black;
	color: white;
	border: 1px solid green;
	margin-left: 1.5em;
	padding: 2px;
	cursor: default;
	transition: opacity 2s 0.5s;
}
#copied.shown {
	opacity: 1;
	transition: opacity .5s 0s;
}

nav#sidebar {
	display: none;
}

nav#topbar {height: 40px;}

#togglesidebar {
	/* Make the button look like a hamburger menu */
	border: 0;
	font-size: 0;
	padding: 0;
	height: 32px; width: 32px;
	margin-right: 8px;
	background: linear-gradient(transparent 0%, transparent 14%,
		#bbb 14%, #bbb 28%, transparent 28%, transparent 42%,
		#bbb 42%, #bbb 56%, transparent 56%, transparent 70%,
		#bbb 70%, #bbb 84%, transparent 84%);
}

nav#sidebar ul {
	padding-left: 8px;
	margin: 0;
	overflow: clip auto;
	position: absolute;
	top: 0px; bottom: 112px; /* Leave room for the avatar below */
}
nav#sidebar img {
	display: block;
	position: absolute;
	left: 0; bottom: 0px;
	width: 112px; height: 112px;
}

nav#sidebar.vis {
	display: block;
	position: fixed;
	left: 0px;
	width: 112px;
	top: 48px; bottom: 0;
	background-color: #a0f0c0;
}
#togglesidebarbox.sbvis {
	display: block;
	position: fixed;
	left: 0; top: 0;
	width: 112px; height: 48px;
	background-color: #a0f0c0;
	padding: 8px;
}
/* Firefox doesn't currently support the :has selector, so instead of the simpler directive
body:has(nav#sidebar) nav#topbar {padding-left: 100px;}
we use two directives, one to create the padding unconditionally, and one to remove it if
we don't want it. This means that Firefox, until it grows support for the :has selector,
will waste 100px of space when there's no sidebar.

The :has selector is supported in Ff 103 with a flag, and in Ff 121 without. The next ESR
release supporting :has will be 128 https://whattrainisitnow.com/calendar/ and that means
that I may be able to make use of this feature in mid-2024 or so. Check back then, and if
Debian is shipping a firefox-esr package of at least v 128, switch this out and rejoice!
*/
body nav#topbar {padding-left: 112px;}
body:not(:has(nav#sidebar.vis)) nav#topbar {
	padding-left: 0;
}

@media screen and (width >= 600px) {
	/* On wide enough screens, consume space for the entire body, not just the nav topbar */
	body nav#topbar {padding-left: 0;}
	body {padding-left: 112px;}
	body:not(:has(nav#sidebar.vis)) {
		padding-left: 0;
	}
}

#errcnt:empty {display: none;}
#errcnt {
	color: red;
	font-weight: bold;
}

.filedropzone {
	left: 0; right: 0;
	border: 1px dashed black;
	background: #eeeeff;
	margin: 0 0.25em;
	padding: 0.5em;
}

/* Warning banner for being on the old domain. Not too in-your-face. */
#domainbanner {
	background: #faa;
	border: 1px solid red;
	position: fixed;
	left: 120px; right: 0px;
	top: 10px; height: 30px;
	text-align: center;
}

img[src="/static/MustardMineBanner.png"] {
	max-width: 100%;
}

#unavailableindemo {
	visibility: hidden;
	opacity: 0;
	background: #fcf;
	border: 1px solid rebeccapurple;
	position: fixed;
	left: 120px; right: 0px;
	top: 40px; height: 1.5em;
	text-align: center;
	transition: all 0.5s;
}
#unavailableindemo.shown {
	visibility: visible;
	opacity: 1;
}

/* Image/audio library for alertbox etc */
#library p {margin: 0;}
#uploadfrm {
	border: 1px solid black;
	background: #eee;
	padding: 0 1em 1em 1em;
	width: 75vw;
}
.filelist {
	display: flex;
	flex-wrap: wrap;
}
.filelist > label, .filelist > div {
	border: 1px solid black; /* TODO: Show incomplete uploads with a different border */
	margin: 0.5em;
	padding: 0.5em;
	position: relative;
}
.filelist > div {
	display: flex;
	flex-direction: column;
}
.filelist figure {
	margin: 0;
	padding: 0 1em;
}
.filelist input[type=radio] {
	position: absolute;
}
input[name=chooseme]:checked ~ figure {
	background: aliceblue;
}
.filelist .inactive {
	display: none;
}
#uploads .confirmdelete {
	position: absolute;
	right: 0.5em; top: 0.5em;
}
.confirmdelete {
	width: 20px; height: 23px;
	padding: 0;
}
.thumbnail {
	width: 150px; height: 150px;
	background: none center/contain no-repeat;
}
figcaption {
	max-width: 150px;
	overflow-wrap: break-word;
}
.descr {
	max-width: calc(150px + 2em);
	font-size: smaller;
}
.thumbnail audio {max-width: 100%; max-height: 100%;}