octospacc
/
sitoctt
mirror of https://gitlab.com/octtspacc/sitoctt
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Miglioramenti CSS (tema WM, generazione dei titoli link)

This commit is contained in:
octospacc 2022-08-28 17:13:34 +02:00
parent 560a3c1f45
commit b0f7233742
5 changed files with 111 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
Assets/Assets/WM.css
View File

@ -1,23 +1,33 @@
/*--------------------------------------------------------* /*--------------------------------------------------------*
* Costanti Globali * * Globale *
*--------------------------------------------------------*/ *--------------------------------------------------------*/
:Root { :Root {
--WindowPadding: 4px; --WindowPadding: 4px;
--TitleBarHeight: 28px; --TitleBarHeight: 28px;
--TitleBarForeground: #FFFFFF;
--TitleBarBackground: #2A0A3A;
--TaskBarForeground: #FFFFFF;
--TaskBarBackground: #2A0A3A;
--TaskBarHeight: 36px; --TaskBarHeight: 36px;
} }
/*--------------------------------------------------------*/ * {
Box-Sizing: Border-Box;
}
Body { Body {
Margin: 0; Margin: 0;
Padding: 0; Padding: 0;
Overflow-Y: Hidden; Overflow-Y: Hidden;
Background-Image: url(/home/octt/Dev/sitoctt-assets/public/Media/Backgrounds/Circles-Purple.png);
Background-Repeat: Repeat;
} }
/*--------------------------------------------------------*/
/*--------------------------------------------------------* /*--------------------------------------------------------*
@ -26,9 +36,9 @@ Body {
.Window { .Window {
Margin: Var(--WindowPadding); Margin: Var(--WindowPadding);
Border: Solid 2px; Border: Solid 3px Var(--TitleBarBackground);
Color: #000000; Color: #000000;
Background: #FFFFFF; Background: #EEE0FF;
} }
.WindowContent { .WindowContent {
Min-Width: 100%; Min-Width: 100%;
@ -41,32 +51,41 @@ Body {
.TitleBar { .TitleBar {
Padding: Var(--WindowPadding); Padding: Var(--WindowPadding);
Color: #FFFFFF; Color: Var(--TitleBarForeground);
Background: #000000; Background: Var(--TitleBarBackground);
Text-Align: Center; Text-Align: Center;
Vertical-Align: Top; Vertical-Align: Top;
Max-Height: Var(--TitleBarHeight); Max-Height: Var(--TitleBarHeight);
} }
.TitleBar span:nth-child(1) { .TitleBar > span:nth-child(1) {
Float: Left; Float: Left;
} }
.TitleBar span:nth-child(3) { .TitleBar > span:nth-child(3) {
Float: Right; Float: Right;
} }
.TaskBar { .TaskBar {
Width: 100%; Width: 100%;
Color: #FFFFFF; Color: Var(--TaskBarForeground);
Background: #000000; Background: Var(--TaskBarBackground);
Position: Fixed; Position: Fixed;
Bottom: 0px; Bottom: 0px;
Padding: Var(--WindowPadding); Padding: Var(--WindowPadding);
Min-Height: Var(--TaskBarHeight);
Max-Height: Var(--TaskBarHeight); Max-Height: Var(--TaskBarHeight);
Z-Index: 256; Z-Index: 256;
} }
.TaskBar > Details > Div {
Position: Fixed;
Left: 0px;
Bottom: Var(--TaskBarHeight);
Padding: Var(--WindowPadding);
Color: Var(--TaskBarForeground);
Background: Var(--TaskBarBackground);
}
.MenuButton { .MenuButton {
Display: Inline-Block; Display: Inline-Block;
Min-Height: 100%; Height: 100%;
} }
/*--------------------------------------------------------*/ /*--------------------------------------------------------*/
@ -77,32 +96,41 @@ Body {
* Fritto Misto - Andrebbe ordinato * * Fritto Misto - Andrebbe ordinato *
*--------------------------------------------------------*/ *--------------------------------------------------------*/
* { /* No selezione */
Box-Sizing: Border-Box; .NoSelect,
.TitleBar,
.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 { #MainWindow {
Width: 80vw; Max-Width: 80vw;
Position: Absolute; Position: Absolute;
Top: 16px; Top: 12px;
Right: 16px; Right: 12px;
Max-Height: 80vh; Max-Height: 90vh;
Z-Index: 16; Z-Index: 16;
} }
#MainWindow > .WindowContent { #MainWindow > .WindowContent {
Max-Height: Calc(80vh - Calc(Var(--TitleBarHeight) * 2) - Var(--WindowPadding)); Max-Height: Calc(90vh - Calc(Var(--TitleBarHeight) * 2) - Var(--WindowPadding));
} }
#TitlesWindow { #TitlesWindow {
Width: 50vw; Max-Width: 60vw;
Position: Absolute; Position: Absolute;
Top: 80px; Top: 80px;
Left: 16px; Left: 12px;
Max-Height: 50vh; Max-Height: 60vh;
Z-Index: 8; Z-Index: 8;
} }
#TitlesWindow > .WindowContent { #TitlesWindow > .WindowContent {
Max-Height: Calc(50vh - Calc(Var(--TitleBarHeight) * 2) - Var(--WindowPadding)); Max-Height: Calc(60vh - Calc(Var(--TitleBarHeight) * 2) - Var(--WindowPadding));
} }
/*--------------------------------------------------------*/ /*--------------------------------------------------------*/

16
Assets/Assets/loli-documentatrice.css
View File

@ -93,3 +93,19 @@ article .e-content {
#BuildTimeLine > Span { #BuildTimeLine > Span {
Display: Inline-Block; Display: Inline-Block;
} }
.SectionTitle:Target {
Text-Decoration: Underline;
}
.SectionLink {
Opacity: 0.1;
}
.SectionLink:Hover {
Opacity: 0.8;
}
.SectionLink > A::Before {
Content: '🔗';
}
.SectionLink > A > Span {
Font-Size: 0;
}

61
Assets/Assets/sitoctt.css
View File

@ -1,10 +1,35 @@
/*--------------------------------------------------------* /*--------------------------------------------------------*
* Costanti Globali * * Globale *
*--------------------------------------------------------*/ *--------------------------------------------------------*/
:Root { :Root {
--ScreenBorderPadding: 4px; --ScreenBorderPadding: 4px;
--ContentPadding: 8px; --ContentPadding: 8px;
--BodyTextColor: #080810;
}
* {
Box-Sizing: Border-Box;
}
::Selection {
Background-Color: RGBA(170, 170, 255, 0.2);
}
Body {
Margin: 0;
Box-Sizing: Border-Box;
Width: 100%;
Max-Width: 100%;
Position: Absolute;
Left: Auto;
Right: Auto;
Color: Var(--BodyTextColor);
Background: #eeddff;
Font-Size: 13pt;
Padding: Var(--ContentPadding);
Overflow-Wrap: Break-Word;
} }
/*--------------------------------------------------------*/ /*--------------------------------------------------------*/
@ -15,26 +40,6 @@
* Fritto Misto - Andrebbe ordinato * * Fritto Misto - Andrebbe ordinato *
*--------------------------------------------------------*/ *--------------------------------------------------------*/
::Selection {
Background-Color: RGBA(170, 170, 255, 0.2);
}
Body {
Margin: 0;
Box-Sizing: Border-Box;
Width: 100%;
Max-Width: 100%;
Position: Absolute;
Left: Auto;
Right: Auto;
Color: #080810;
Background: #eeddff;
Font-Size: 13pt;
Padding: Var(--ContentPadding);
Overflow-Wrap: Break-Word;
}
Div {
Box-Sizing: Border-Box;
}
Details Div { Details Div {
Margin: 8px; Margin: 8px;
Padding: 4px; Padding: 4px;
@ -95,17 +100,22 @@ Pre.Code, .CodeScroll {
.NoLinkLink, .NoLinkLink A, .NoLinkLink, .NoLinkLink A,
.SectionLink A, .SectionLink A,
#StatCounter A, #StatCounter A,
#RingsDiv A #RingsDiv A,
.SectionTitle > A
)::Before { )::Before {
Content: '🔗 '; Content: '🔗 ';
} }
.SectionTitle:Target {
Color: #EEDDFF !Important;
Background: #700070 !Important;
Text-Decoration: Underline;
}
.SectionLink { .SectionLink {
Position: Absolute; Position: Absolute;
Left: -1.5em; Left: -1.5em;
Opacity: 0.1; Opacity: 0.08;
} }
.SectionLink:Target,
.SectionLink:Hover { .SectionLink:Hover {
Opacity: 0.8; Opacity: 0.8;
} }
@ -332,6 +342,7 @@ H3:hover {
} }
/* No selezione */ /* No selezione */
.NoSelect,
#LeftBox, #LeftBox,
#LeftBoxContainer, #LeftBoxContainer,
#RightBox, #RightBox,
@ -343,7 +354,7 @@ H3:hover {
-khtml-user-select: none; -khtml-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
User-select: none; User-Select: none;
} }
/*--------------------------------------------------------*/ /*--------------------------------------------------------*/

2
StaticParts/Standard/BottomBox.html
View File

@ -1,4 +1,4 @@
<h3> <h3 class="NoSelect">
<a href="#Container"> <a href="#Container">
<strong class="twa twa-up-arrow"><span>⬆️</span></strong><strong> Torna su</strong> <strong class="twa twa-up-arrow"><span>⬆️</span></strong><strong> Torna su</strong>
</a> </a>

11
Templates/WM.html
View File

@ -22,10 +22,11 @@
<!-- [staticoso:DynamicPart:*/Head] --> <!-- [staticoso:DynamicPart:*/Head] -->
<script src="[staticoso:Site:RelativeRoot]Assets/AVIF-Polyfill/index.js"></script> <script src="[staticoso:Site:RelativeRoot]Assets/AVIF-Polyfill/index.js"></script>
</head> </head>
<!-- TitleBar: <span> - ❌ </span> <span> [staticoso:Page:Title] </span> <span> 🔺 🔼 ⬜ 🔷 </span> -->
<body id="Body"> <body id="Body">
<div class="Window" id="MainWindow"> <div class="Window" id="MainWindow">
<div class="TitleBar"> <div class="TitleBar">
<span> - ❌ </span> <span> [staticoso:Page:Title] </span> <span> 🔼 ⬜ </span> <span> 🔼 </span> &nbsp; <span> <b>[staticoso:Page:Title]</b> </span> &nbsp; <span> <span class="twa twa-pencil"><span>✏️</span></span> </span>
</div> </div>
<div class="WindowContent" id="MainWindowContent"> <div class="WindowContent" id="MainWindowContent">
[staticoso:Page:Content] [staticoso:Page:Content]
@ -33,7 +34,7 @@
</div> </div>
<div class="Window" id="TitlesWindow"> <div class="Window" id="TitlesWindow">
<div class="TitleBar"> <div class="TitleBar">
<span> - ❌ </span> <span> Sezioni </span> <span> 🔼 ⬜ </span> <span> 🔼 </span> &nbsp; <span> <b>Sezioni</b> </span> &nbsp; <span> <span class="twa twa-bookmark-tabs"><span>📑</span></span> </span>
</div> </div>
<div class="WindowContent" id="MainWindowContent"> <div class="WindowContent" id="MainWindowContent">
[staticoso:Page:Chapters] [staticoso:Page:Chapters]
@ -41,9 +42,9 @@
</div> </div>
<div class="TaskBar"> <div class="TaskBar">
<details> <details>
<summary><span class="MenuButton"><big><b>[<span class="twa twa-books"><span>📚</span></span>] Menu</b></big></span></summary> <summary><span class="MenuButton"><big><b>[<span class="twa twa-books"><span>📚</span></span>] Menu</b></big></span><br><br></summary>
<div style="Position:Fixed; Left:0; Top:0;"> <div>
📚📚📚 [staticoso:Site:Menu]
</div> </div>
</details> </details>
</div> </div>