mirror of https://gitlab.com/octtspacc/sitoctt
252 lines
5.6 KiB
CSS
252 lines
5.6 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-Y: 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: 0;
|
|
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;
|
|
}
|
|
/**** -------------------------------------------- ****/
|
|
|
|
/*--------------------------------------------------------*/
|
|
|
|
|
|
|
|
/*--------------------------------------------------------*
|
|
* Mixed fried - Should be ordered *
|
|
*--------------------------------------------------------*/
|
|
|
|
/* No selection */
|
|
.NoSelect,
|
|
.TitleBarContent,
|
|
.TaskBar,
|
|
#TitlesWindow {
|
|
-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;
|
|
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;
|
|
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;
|
|
}
|
|
|
|
/*--------------------------------------------------------*/
|