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

View File

@ -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));
}
/*--------------------------------------------------------*/

View File

@ -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;
}

View File

@ -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;
}
/*--------------------------------------------------------*/

View File

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

View File

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