mirror of https://gitlab.com/octtspacc/sitoctt
312 lines
7.8 KiB
CSS
312 lines
7.8 KiB
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;
|
||
}
|
||
/**** -------------------------------------------- ****/
|
||
|
||
/*--------------------------------------------------------*/
|