sitoctt/Assets/Assets/WM.css

/*--------------------------------------------------------*
 *    Global                                              *
 *--------------------------------------------------------*/

:Root {
	--RectBlur: 4px;

	--WindowMargin: 4px;
	--WindowPadding: 8px;
	--WindowBorderSize: 4px;

	--WindowText: #000000;
	/*--WindowLinks: #0000EE;*/
	--WindowBackground: RGBA(238,224,255,0.90); /* #EEE0FF */

	--TitleBarHeight: 32px;
	--TitleBarText: #FFFFFF;
	--TitleBarBackground: RGBA(42,10,58,0.90); /* #2A0A3A */

	--TaskBarText: #111111;
	--TaskBarLinks: #0000EE;
	--TaskBarBackground: RGBA(204,170,221,0.85); /* #CCAADD */
	--TaskBarHeight: 36px;
}

* { Box-Sizing: Border-Box; }

Body {
	Margin: 0;
	Padding: 0;
	Overflow: Hidden;
	Overflow-Wrap: Break-Word;
}

/*--------------------------------------------------------*/



/*--------------------------------------------------------*
 *    Window Manager                                      *
 *--------------------------------------------------------*/

.Window {
	Position: Absolute;
	Margin: Var(--WindowMargin);
	Border: Solid Var(--WindowBorderSize) Var(--TitleBarBackground);
	Color: Var(--WindowText);
	Background: Var(--WindowBackground);
	Backdrop-Filter: Blur(Var(--RectBlur));
}
.WindowContent {
	Min-Width: Calc(100% + Var(--WindowMargin)*2 + Var(--WindowBorderSize)*2);
	Padding: Calc(Var(--WindowPadding)*2);
	Padding-Top: Var(--WindowPadding);
	Overflow-Y: Auto;
	Margin-Left: Calc(0px - Var(--WindowMargin) - Var(--WindowBorderSize));
	Margin-Top: Var(--WindowBorderSize);
	Color: Var(--WindowText);
	Background: Var(--WindowBackground);
	Backdrop-Filter: Blur(Var(--RectBlur));
	Border: Solid Var(--WindowBorderSize) Var(--TitleBarBackground);
}
.Window:Hover { Z-Index: 192 !Important; }
.Window A, .WindowContent A { /*Color: Var(--WindowLinks);*/ }

.TitleBar {
	Padding: Var(--WindowMargin);
	Color: Var(--TitleBarText);
	Background: Var(--TitleBarBackground);
	Backdrop-Filter: Blur(Var(--RectBlur));
	Vertical-Align: Top;
	Max-Height: Var(--TitleBarHeight);
}
.TitleBarContent { Text-Align: Center; }
.TitleBarContent > Span:Nth-Child(1) { Float: Left; }
.TitleBarContent > Span:Nth-Child(3) { Float: Right; }

.TaskBar {
	Width: 100%;
	Color: Var(--TaskBarText);
	Background: Var(--TaskBarBackground);
	Backdrop-Filter: Blur(Var(--RectBlur));
	Position: Fixed;
	Bottom: 0px;
	Padding: Var(--WindowMargin);
	Min-Height: Var(--TaskBarHeight);
	Max-Height: Var(--TaskBarHeight);
	Z-Index: 256;
}

.TaskBar > Details { Z-Index: 296; }
.TaskBar > Details > Summary { Width: Max-Content; }
.TaskBar > Details > Div {
	Position: Fixed;
	Left: 0px;
	Bottom: Var(--TaskBarHeight);
	Padding: Calc(Var(--WindowPadding)*2);
	Color: Var(--TaskBarText);
	Background: Var(--TaskBarBackground);
	Backdrop-Filter: Blur(Var(--RectBlur));
	Max-Height: Calc(90vh - Var(--TaskBarHeight));
	Overflow-Y: Scroll;
}
.TaskBarMenu { Font-Size: Larger; }
.TaskBarMenu A { Color: Var(--TaskBarLinks) !Important; }
.MenuButton {
	Display: Inline-Block;
	Height: 100%;
}
.TaskBarRight {
	Position: Absolute;
	Bottom: 0;
	Right: Calc(Var(--TaskBarHeight) - 4px); /* Accomodate show desktop icon */
	Height: Calc(Var(--TaskBarHeight) / 6 * 5); /* Try to vertically center the text lol */
}

/*---   "Shade Window" button   --------------------------*/
.CheckToggle {
	Position: Fixed;
	Opacity: 0;
	/*Visibility: Hidden;*/
}
.CheckLabel:Before { Content: '🔼'; }
:Checked ~ .TitleBarContent > Span > .CheckLabel:Before {
	Content: '🔽';
}
:Checked ~ .ToggleBox {
	Display: None;
	Visibility: Hidden;
}
/****   --------------------------------------------   ****/

.Absolute-↙, .Absolute-↙️ {
	Position: Absolute;
	Bottom: 0px;
	Left: 0px;
}

/*--------------------------------------------------------*/



/*--------------------------------------------------------*
 *    Mixed fried - Should be ordered                     *
 *--------------------------------------------------------*/

/* No selection */
.TitleBarContent,
.TaskBar,
#Desktop,
#TitlesWindow, #FeedWindow,
#DesktopCheck, #DesktopCheck ~ Label {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	User-Select: none;
}

#MainWindow {
	Max-Width: 85vw;
	Max-Height: Calc(90vh - 24px);
	Top: Calc(/*24px*/56px + Var(--TitleBarHeight));
	Right: 12px;
	Z-Index: 20;
}
#MainWindow .WindowContent {
	Max-Height: Calc(90vh - /*24px*/56px - (Var(--TitleBarHeight) * 2) - Var(--WindowMargin));
}

#TitlesWindow {
	Max-Width: 60vw;
	Max-Height: 60vh;
	Top: Calc(8px + 6vh + (Var(--TitleBarHeight)*2));
	Left: 12px;
	Z-Index: 12;
}
#TitlesWindow .WindowContent {
	Max-Height: Calc(60vh - (Var(--TitleBarHeight) * 2) - Var(--WindowMargin));
}

#FeedWindow {
	Max-Width: 75vw;
	Max-Height: 40vh;
	Top: 8px;
	Left: Calc(8px + 3vw);
	Z-Index: 8;
}
#FeedWindow .WindowContent {
	Max-Height: Calc(40vh - (Var(--TitleBarHeight) * 2) - Var(--WindowMargin));
}

:Where(#FeedWindow, #TitlesWindow .WindowContent, .TaskBarMenu) Ul Li {
	List-Style-Type: None !Important;
}
:Where(#FeedWindow, #TitlesWindow, .TaskBarMenu) Ul {
	Padding-Top: 0px;
	Padding-Left: 8px;
	Padding-Right: 4px;
}

/* Tared for a reasonably-256x32 image */
#CountWindow { 
	/*Max-Width: Calc(256px + 8px);*/
	Max-Height: Calc(32px + 8px + Var(--TitleBarHeight));
	Bottom: Calc(8px + 32px + 8px + Var(--TitleBarHeight) + Var(--TaskBarHeight));
	Left: 8px;
	Z-Index: 4;
}
#CountWindow .WindowContent {
	Padding: 0px;
	Min-Height: Calc(32px + 8px);
	Max-Height: Calc(32px + 8px);
	Overflow: Hidden;
	Text-Align: Center;
}
#CountWindow .WindowContent Img {
	Width: 100%;
	/*
	Margin-Left: -4px;
	Margin-Right: -4px;
	*/
}

/* Tared for a 88x31 buttons and everything less tall */
#SlideWindow {
	Max-Width: 50vw;
	Min-Height: Calc(32px + 8px);
	Max-Height: Calc(31px + 8px + Var(--TitleBarHeight));
	Bottom: Calc(8px + Var(--TaskBarHeight) + 31px);
	Left: Calc(8px + 2vw);
	Z-Index: 16;
}
#SlideWindow .WindowContent {
	Max-Height: Calc(31px + 8px);
	Padding: 0px;
	Overflow: Hidden;
}

#Desktop {
	Position: Absolute;
	Top: 0px;
	Left: 0px;
	Width: 100vw;
	Height: 100vh;
}
#DesktopButtons {
	Bottom: Calc(Var(--TaskBarHeight) + Var(--WindowMargin));
	Left: Calc(Var(--WindowMargin) * 2);
}
#DesktopButtons:Hover { Z-Index: 192 !Important; }

/*---   "Show Desktop" feature   -------------------------*/
#DesktopCheck {
	/* -4px to leave a bit of padding */
	Width: Calc(Var(--TaskBarHeight) - 4px);
	Height: Calc(Var(--TaskBarHeight) - 4px);
}
#DesktopCheck ~ Label { Height: Var(--TaskBarHeight); }
#DesktopCheck, #DesktopCheck ~ Label {
	Position: Absolute;
	Bottom: 0 !Important;
	Right: 0px;
	Z-Index: 320 !Important;
	/* Emoji is taller than normal letters, so make it smaller */
	Font-Size: Calc(Var(--TaskBarHeight) - 8px); 
	Line-Height: Var(--TaskBarHeight);
}
#DesktopCheck ~ Label > Span {
	Display: Inline-Block;
	/* To get PERFECT vertical align */
	/*Padding-Bottom: 4px;
	Line-Height: Calc(Var(--TaskBarHeight) - 2px);*/
}
#DesktopCheck:Checked ~ Label > Span {
	Background-Color: Var(--TitleBarBackground);
}
#DesktopCheck:Checked ~ :Where(.Window, * > .Window) {
	Display: None;
	Visibility: Hidden;
}
/****   --------------------------------------------   ****/

/*---   Draggable windows   ------------------------------*/
/* Currently broken if we have multiple windows,
   due to the resizable div area covering the top left part of the screen.
   Applying a transformation of scaleY(-1) translateY(100%) fixes it vertically
   but dragging the window around the screen is flipped.
   How the f do I make this work?
*/
.DragContainer {
	Position: Absolute;
	Display: Inline-Block;
}
.DragBox {
	Position: Relative;
	Width: 20px;
	Height: 20px;
	Resize: Both;
	Overflow: Scroll;
	Z-Index: 1024;
}
.DragContainer > .Window {
	Top: Initial !Important;
	Margin-Top: -24px;
	Margin-Right: -24px;
}
/****   --------------------------------------------   ****/

/*--------------------------------------------------------*/