/*
 * Base of the desktop: the color tokens, the background and the icons.
 *
 * The variables hold the fallback colors. The settings write the colors of the
 * selected theme into the root element, thus each rule follows the theme.
 */
:root {
	--active-title: #4a5541;
	--background: #2e3427;
	--hilight: #4a5541;
	--hilight-text: #b5b166;
	--title-text: #d6e1ce;
	--window: #3d4536;
	--window-text: #d6e1ce;
	--scrollbar: #a5b19a;
	--inactive-title: #4a5541;
	--menu: #4a5541;
	--window-frame: #000000;
	--menu-text: #d6e1ce;
	--active-border: #4a5541;
	--inactive-border: #4a5541;
	--app-workspace: #31382c;
	--btn-face: #4a5541;
	--btn-shadow: #31382c;
	--gray-text: #31382c;
	--btn-text: #b5b166;
	--inactive-title-text: #75806c;
	--btn-hilight: #a5b19a;
	--btn-dkshadow: #404040;
	--btn-light: #4a5541;
	--info-text: #b5b166;
	--info-window: #4a5541;

	/*
	 * End color of the title bar gradient. A Win98 theme sets
	 * GradientActiveTitle; the Steam theme has none, thus this repeats
	 * the start color and the bar stays flat.
	 */
	--active-title-2: #4a5541;
	--inactive-title-2: #4a5541;

	/* Hover tint. The theme has no color for this state. */
	--btn-face-hover: #56614d;

	/* The line under the header of the start menu. */
	--start-header-line: #b5b166;

	/*
	 * The two parts of a scroll bar. Windows draws the bar as a pattern of
	 * white and the face of a button, and a browser can only give it one
	 * color. The part that moves takes the face of a button.
	 */
	--scrollbar-track: #a5b19a;
	--scrollbar-thumb: #4a5541;

	/*
	 * Minesweeper number colors. The theme does not set these.
	 * The classic values are too dark on this background.
	 */
	--cell-1: #8ab4ff;
	--cell-2: #7fdd7f;
	--cell-3: #ff8a80;
	--cell-4: #b0aaff;
	--cell-5: #e0a080;
	--cell-6: #7fe0dd;
	--cell-7: #f0f0f0;
	--cell-8: #b8c4ad;
}
/*
 * The scroll bars of the whole desktop. The part that moves takes the face of
 * a button with the frame of a button, in the way that Windows 98 draws it.
 * The bar behind it takes the color of the theme.
 *
 * The property scrollbar-color goes down the tree and reaches each element
 * that scrolls. The four rules under it do the same for a browser that does
 * not know that property; they also give the bar the form of a button.
 */
html {
	scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
::-webkit-scrollbar {
	width: 16px;
	height: 16px;
}
::-webkit-scrollbar-track {
	background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
	background: var(--scrollbar-thumb);
	box-shadow:
		inset -1px -1px 0 var(--btn-dkshadow),
		inset 1px 1px 0 var(--btn-hilight),
		inset -2px -2px 0 var(--btn-shadow),
		inset 2px 2px 0 var(--btn-light);
}
::-webkit-scrollbar-corner {
	background: var(--scrollbar-thumb);
}
body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	height: 100vh;
	background: var(--background);
	font-family: Tahoma, "MS Sans Serif", "Segoe UI", sans-serif;
	font-size: 11px;
	color: var(--btn-text);
	user-select: none;
}
#desktop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(100vh - 30px);
	background: var(--background);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 20px;
	box-sizing: border-box;
}
.desktop-icon {
	width: 70px;
	text-align: center;
	cursor: pointer;
	color: #ffffff;
	text-shadow: 1px 1px 2px #000000;
}
/*
 * The picture of an icon. An icon that is an SVG gets 44 px from the rule
 * below. An icon that is a character, such as an emoji, takes the font size.
 * A character draws over its box, thus it needs a smaller value to look as
 * big as the SVG icons.
 */
.desktop-icon > .icon-art {
	height: 48px;
	font-size: 34px;
	line-height: 48px;
	margin: 0 auto 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
}
.desktop-icon > .icon-art svg {
	width: 44px;
	height: 44px;
	display: block;
}

/*
 * The start of the desktop.
 *
 * Each load shows the desktop part by part, in the way that a computer starts
 * from a disk: the background stands alone, the task bar comes up from the
 * bottom edge, then one icon after the other appears. The browser loads the
 * files of the applications in that time, thus a slow line gets no wait on
 * top of the animation.
 *
 * The class booting holds the task bar away. It stands on the html element,
 * because a small script in the head of index.html puts it there: it thus
 * holds before the browser paints the page for the first time. The class
 * icon-off holds one icon away. js/shell.js removes both.
 */
/* The time of the task bar is also SHELL_BAR_MS in js/shell.js, because the
   icons come after the bar. */
#taskbar {
	transition: transform 300ms ease-out;
}
.desktop-icon {
	transition: opacity 200ms ease-out;
}
html.booting #taskbar {
	transform: translateY(100%);
}
.desktop-icon.icon-off {
	opacity: 0;
}
/* Each window goes away with the shut down. An application writes the display
   of its window into the element, thus this rule needs the higher weight. */
html.booting .window,
html.booting .dialog-window {
	display: none !important;
}