From b0f72337429cef0cc201825b66f9b22738ef8109 Mon Sep 17 00:00:00 2001 From: octospacc Date: Sun, 28 Aug 2022 17:13:34 +0200 Subject: [PATCH] Miglioramenti CSS (tema WM, generazione dei titoli link) --- Assets/Assets/WM.css | 76 ++++++++++++++++++--------- Assets/Assets/loli-documentatrice.css | 16 ++++++ Assets/Assets/sitoctt.css | 61 ++++++++++++--------- StaticParts/Standard/BottomBox.html | 2 +- Templates/WM.html | 11 ++-- 5 files changed, 111 insertions(+), 55 deletions(-) diff --git a/Assets/Assets/WM.css b/Assets/Assets/WM.css index 1c1d34e..141741a 100644 --- a/Assets/Assets/WM.css +++ b/Assets/Assets/WM.css @@ -1,23 +1,33 @@ /*--------------------------------------------------------* - * Costanti Globali * + * Globale * *--------------------------------------------------------*/ :Root { --WindowPadding: 4px; + --TitleBarHeight: 28px; + --TitleBarForeground: #FFFFFF; + --TitleBarBackground: #2A0A3A; + + --TaskBarForeground: #FFFFFF; + --TaskBarBackground: #2A0A3A; --TaskBarHeight: 36px; } -/*--------------------------------------------------------*/ - - +* { + Box-Sizing: Border-Box; +} Body { Margin: 0; Padding: 0; 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 { Margin: Var(--WindowPadding); - Border: Solid 2px; + Border: Solid 3px Var(--TitleBarBackground); Color: #000000; - Background: #FFFFFF; + Background: #EEE0FF; } .WindowContent { Min-Width: 100%; @@ -41,32 +51,41 @@ Body { .TitleBar { Padding: Var(--WindowPadding); - Color: #FFFFFF; - Background: #000000; + Color: Var(--TitleBarForeground); + Background: Var(--TitleBarBackground); Text-Align: Center; Vertical-Align: Top; Max-Height: Var(--TitleBarHeight); } -.TitleBar span:nth-child(1) { +.TitleBar > span:nth-child(1) { Float: Left; } -.TitleBar span:nth-child(3) { +.TitleBar > span:nth-child(3) { Float: Right; } .TaskBar { Width: 100%; - Color: #FFFFFF; - Background: #000000; + Color: Var(--TaskBarForeground); + Background: Var(--TaskBarBackground); Position: Fixed; Bottom: 0px; Padding: Var(--WindowPadding); + Min-Height: Var(--TaskBarHeight); Max-Height: Var(--TaskBarHeight); Z-Index: 256; } +.TaskBar > Details > Div { + Position: Fixed; + Left: 0px; + Bottom: Var(--TaskBarHeight); + Padding: Var(--WindowPadding); + Color: Var(--TaskBarForeground); + Background: Var(--TaskBarBackground); +} .MenuButton { Display: Inline-Block; - Min-Height: 100%; + Height: 100%; } /*--------------------------------------------------------*/ @@ -77,32 +96,41 @@ Body { * Fritto Misto - Andrebbe ordinato * *--------------------------------------------------------*/ -* { - Box-Sizing: Border-Box; +/* No selezione */ +.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 { - Width: 80vw; + Max-Width: 80vw; Position: Absolute; - Top: 16px; - Right: 16px; - Max-Height: 80vh; + Top: 12px; + Right: 12px; + Max-Height: 90vh; Z-Index: 16; } #MainWindow > .WindowContent { - Max-Height: Calc(80vh - Calc(Var(--TitleBarHeight) * 2) - Var(--WindowPadding)); + Max-Height: Calc(90vh - Calc(Var(--TitleBarHeight) * 2) - Var(--WindowPadding)); } #TitlesWindow { - Width: 50vw; + Max-Width: 60vw; Position: Absolute; Top: 80px; - Left: 16px; - Max-Height: 50vh; + Left: 12px; + Max-Height: 60vh; Z-Index: 8; } #TitlesWindow > .WindowContent { - Max-Height: Calc(50vh - Calc(Var(--TitleBarHeight) * 2) - Var(--WindowPadding)); + Max-Height: Calc(60vh - Calc(Var(--TitleBarHeight) * 2) - Var(--WindowPadding)); } /*--------------------------------------------------------*/ diff --git a/Assets/Assets/loli-documentatrice.css b/Assets/Assets/loli-documentatrice.css index df80572..fba1039 100644 --- a/Assets/Assets/loli-documentatrice.css +++ b/Assets/Assets/loli-documentatrice.css @@ -93,3 +93,19 @@ article .e-content { #BuildTimeLine > Span { 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; +} diff --git a/Assets/Assets/sitoctt.css b/Assets/Assets/sitoctt.css index 8535062..21af11f 100644 --- a/Assets/Assets/sitoctt.css +++ b/Assets/Assets/sitoctt.css @@ -1,10 +1,35 @@ /*--------------------------------------------------------* - * Costanti Globali * + * Globale * *--------------------------------------------------------*/ :Root { --ScreenBorderPadding: 4px; --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 * *--------------------------------------------------------*/ -::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 { Margin: 8px; Padding: 4px; @@ -95,17 +100,22 @@ Pre.Code, .CodeScroll { .NoLinkLink, .NoLinkLink A, .SectionLink A, #StatCounter A, - #RingsDiv A + #RingsDiv A, + .SectionTitle > A )::Before { Content: '🔗 '; } +.SectionTitle:Target { + Color: #EEDDFF !Important; + Background: #700070 !Important; + Text-Decoration: Underline; +} .SectionLink { Position: Absolute; Left: -1.5em; - Opacity: 0.1; + Opacity: 0.08; } -.SectionLink:Target, .SectionLink:Hover { Opacity: 0.8; } @@ -332,6 +342,7 @@ H3:hover { } /* No selezione */ +.NoSelect, #LeftBox, #LeftBoxContainer, #RightBox, @@ -343,7 +354,7 @@ H3:hover { -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; - User-select: none; + User-Select: none; } /*--------------------------------------------------------*/ diff --git a/StaticParts/Standard/BottomBox.html b/StaticParts/Standard/BottomBox.html index 77ede3e..bf70acd 100644 --- a/StaticParts/Standard/BottomBox.html +++ b/StaticParts/Standard/BottomBox.html @@ -1,4 +1,4 @@ -

+

⬆️ Torna su diff --git a/Templates/WM.html b/Templates/WM.html index fe262a6..725d693 100644 --- a/Templates/WM.html +++ b/Templates/WM.html @@ -22,10 +22,11 @@ +
- - ❌ [staticoso:Page:Title] 🔼 ⬜ + 🔼   [staticoso:Page:Title]   ✏️
[staticoso:Page:Content] @@ -33,7 +34,7 @@
- - ❌ Sezioni 🔼 ⬜ + 🔼   Sezioni   📑
[staticoso:Page:Chapters] @@ -41,9 +42,9 @@
- [📚] Menu -
- 📚📚📚 + [📚] Menu

 +
+ [staticoso:Site:Menu]