mirror of https://gitlab.com/octtspacc/sitoctt
308 lines
6.9 KiB
CSS
308 lines
6.9 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 > 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 */
|
||
.NoSelect,
|
||
.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 + Var(--TitleBarHeight));
|
||
Right: 12px;
|
||
Z-Index: 20;
|
||
}
|
||
#MainWindow .WindowContent {
|
||
Max-Height: Calc(90vh - 24px - (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));
|
||
}
|
||
|
||
#FeedWindow Ul Li, #TitlesWindow .WindowContent Ul Li, .TaskBarMenu Ul Li {
|
||
List-Style-Type: None !Important;
|
||
}
|
||
#FeedWindow Ul, #TitlesWindow Ul, .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;
|
||
}
|
||
|
||
#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 ~ .Window {
|
||
Display: None;
|
||
Visibility: Hidden;
|
||
}
|
||
|
||
/*--------------------------------------------------------*/ |