mirror of https://gitlab.com/octtspacc/sitoctt
Miglioramenti CSS (tema WM, generazione dei titoli link)
This commit is contained in:
parent
560a3c1f45
commit
b0f7233742
|
@ -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));
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------*/
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------*/
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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> <span> <b>[staticoso:Page:Title]</b> </span> <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> <span> <b>Sezioni</b> </span> <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>
|
||||
|
|
Loading…
Reference in New Issue