classic.css

.desktop {
	background: var(--Background);
}
.taskbar {
	outline: 1px solid var(--ButtonLight);
	border-top: 1px solid var(--ButtonHilight);
	background: var(--ButtonFace);
	color: var(--ButtonText);
}
.taskbar-divider {
	border-left: 1px solid var(--ButtonShadow);
	border-right: 1px solid var(--ButtonHilight);
}
.taskbar-time {
	font-family: sans-serif;
	font-family: "MS Sans Serif", "Segoe UI", sans-serif;
	font-size: 12px;
}
.start-menu-titlebar {
	/* background-image: url("images/start-menu-side.png"); */
	/* background-image: url("images/start-menu-side-98-js.png"); */
	background-image: url("images/start-menu-side-98-js-alt.png");
	background-repeat: no-repeat;
	background-position: bottom left;
	background-color: #000080;
}
.start-menu li a,
.start-menu .back-link {
	display: block;
	padding: 5px 0;
	color: blue !important; /* regardless of :visited */
}
.start-menu li a:before,
.start-menu .back-link:before,
.the-thing-heading:before {
	content: "»";
	text-decoration: none;
	display: inline-block;
	margin-right: 5px;
}
.start-menu .back-link:before {
	content: "«"
}
.the-thing-heading {
	/* font-size: 1em; */
}
.windows-cant-do-it-you-can {
	margin-top: 2em;
	/* background: white;
	padding: 5px;
	border: inset 1px; */
}
.task.selected {
	font-weight: bold;
}
.desktop-icon {
	position: absolute;
}
.folder-view:not([data-view-mode="DESKTOP"]):not([data-view-mode="LARGE_ICONS"]) .desktop-icon {
	display: flex;
	flex-direction: row;
	width: 150px;
	height: 16px;
}

.folder-view[data-view-mode="DESKTOP"] .desktop-icon,
.folder-view[data-view-mode="LARGE_ICONS"] .desktop-icon {
	width: 75px;
	height: 75px;
}
.desktop-icon .title {
	font-family: sans-serif;
	font-family: "MS Sans Serif", "Segoe UI", sans-serif;
	/*font-size: 10px;*/
	font-size: 8pt;
	background: var(--Background);
	color: white;
	position: relative;
}
.folder-view[data-view-mode="DESKTOP"] .desktop-icon .title,
.folder-view[data-view-mode="LARGE_ICONS"] .desktop-icon .title {
	margin-top: 5px;
}
.folder-view:not([data-view-mode="DESKTOP"]):not([data-view-mode="LARGE_ICONS"]) .desktop-icon .title {
	text-align: start;
	white-space: nowrap;
}

.folder-view.focused .desktop-icon.selected .title {
	background: var(--Hilight);
	color: var(--HilightText);
}
.folder-view.focused .desktop-icon.focused .title::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	border: 1px dotted #ffffff;
	mix-blend-mode: exclusion;
}
.desktop-icon .icon-wrapper .selection-effect {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	width: var(--icon-size, 32px);
	height: var(--icon-size, 32px);
	mask-image: var(--icon-image);
	-webkit-mask-image: var(--icon-image);
	background: var(--Hilight);
	opacity: 0.5;
}
.folder-view.focused .desktop-icon.selected .icon-wrapper .selection-effect {
	display: block;
}
.desktop-icon .icon-wrapper {
	position: relative;
}
.desktop-icon.shortcut .icon-wrapper:after {
	content: var(--shortcut-icon, url("images/icons/shortcut-32x32.png"));
	position: absolute;
	left: 0;
	top: 0;
}
.folder-view .marquee {
	border: 1px dotted #ffffff;
	mix-blend-mode: exclusion;
	/* TODO: fallback for browsers that don't support mix-blend-mode (something like #FF7F7F)... Edge doesn't support @supports either :/ */
	z-index: 1;
}

.help-window .item {
	font-family: 'Segoe UI', sans-serif;
	font-size: 12px;
	padding: 0 2px;
	position: relative; /* for ::after */
}
.help-window .item:hover {
	text-decoration: underline;
	color: #0000FF;
	cursor: pointer;
}
.help-window li:before {
	background-image: url("../../images/help-icons.png");
}
.help-window:not(.focused) .item.selected {
	background-color: var(--ButtonFace);
	color: var(--ButtonText); /* ?? */
}
.help-window.focused .item.selected {
	background-color: var(--Hilight);
	color: var(--HilightText);
	/* @TODO: separate focus state of the item */
	outline: 1px dotted black;
	outline-offset: -1px;
}
/* @TODO: separate focus state of the item; while mouse down, the main highlight does not move with the arrow keys but this does, among other differences */
/* .help-window.focused .item.selected::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	border: 1px dotted white;
	mix-blend-mode: difference;
} */

* {
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

.menu-hotkey {
	/* TODO: remove once this is in os-gui */
	text-decoration-skip: none;
    text-decoration-skip-ink: none;
}