sitoctt/Assets/Standard.css

361 lines
7.0 KiB
CSS
Raw Normal View History

2022-07-24 13:48:02 +02:00
/*--------------------------------------------------------*
* Costanti Globali *
*--------------------------------------------------------*/
2022-07-19 18:26:01 +02:00
:Root {
--ScreenBorderPadding: 4px;
--ContentPadding: 8px;
}
2022-07-24 13:48:02 +02:00
/*--------------------------------------------------------*/
/*--------------------------------------------------------*
* Fritto Misto - Andrebbe ordinato *
*--------------------------------------------------------*/
2022-07-19 18:26:01 +02:00
::Selection {
Background-Color: RGBA(170, 170, 255, 0.2);
2022-06-21 13:56:53 +02:00
}
Body {
Margin: 0;
Box-Sizing: Border-Box;
2022-05-18 20:36:17 +02:00
Width: 100%;
Max-Width: 100%;
Position: Absolute;
Left: Auto;
Right: Auto;
2022-06-21 13:56:53 +02:00
Color: #080810;
Background: #eeddff;
2022-05-22 15:57:10 +02:00
Font-Size: 13pt;
2022-07-19 18:26:01 +02:00
Padding: Var(--ContentPadding);
Overflow-Wrap: Break-Word;
}
Div {
Box-Sizing: Border-Box;
}
2022-05-27 11:12:36 +02:00
Details Div {
2022-05-27 16:24:08 +02:00
Margin: 8px;
Padding: 4px;
}
2022-07-19 00:06:00 +02:00
.BorderBox,
.BorderBoxContainer > *,
2022-05-27 16:24:08 +02:00
Details Div Details {
2022-05-27 11:12:36 +02:00
Border: 2px Solid Purple;
Margin: 8px;
Padding: 4px;
}
.NoDisplay {
Display: None;
}
2022-05-27 11:12:36 +02:00
.NoCol {
Color: Transparent !important;
}
2022-07-21 22:39:54 +02:00
A {
2022-05-23 00:06:47 +02:00
Color: #d000d0;
}
2022-07-21 22:39:54 +02:00
H1, H2, H3, H4, H5, H6 {
2022-06-21 13:56:53 +02:00
Color: #503080;
}
2022-07-21 22:39:54 +02:00
Ul {
Padding-Left: 16px;
Padding-Right: 4px;
2022-05-23 00:06:47 +02:00
}
2022-07-21 22:39:54 +02:00
Table Td, Table Th, Table Tr {
Border: 2px Solid Purple;
Padding: 4px;
}
.ScrollBorderBox {
Border: 2px Solid Purple;
Padding: 8px;
Overflow-X: Auto;
}
2022-05-23 00:06:47 +02:00
2022-07-21 22:39:54 +02:00
#MainBox > * > A::before,
#MainBox > * > * > A::before,
#MainBox > * > * > * > A::before,
#MainBox > * > * > * > * > A::before {
Content: '🔗 ';
2022-06-21 13:56:53 +02:00
}
.NoLinkLink::before,
2022-07-21 22:39:54 +02:00
#StatCounter > A::before,
#RingsDiv > P > A::before {
Content: '' !important;
}
2022-07-24 13:48:02 +02:00
A:hover:not(
H3 > A, H4 > A, H5 > A, H6 > A,
.NoABigger, .NoABigger A,
.NoHoverLight, .NoHoverLight A
) {
Color: #eeddff !important;
Background: #700070 !important;
}
.ImgShiftedH, .ImgShiftedH Img {
Margin-Top: 4px;
Margin-Bottom: -4px;
}
2022-07-21 22:39:54 +02:00
Details > Summary:hover {
2022-06-21 13:56:53 +02:00
Font-Size: 15pt;
}
2022-07-21 22:39:54 +02:00
H1:hover {
2022-06-21 13:56:53 +02:00
Font-Size: 28pt;
}
2022-07-21 22:39:54 +02:00
H2:hover {
2022-06-21 13:56:53 +02:00
Font-Size: 21.5pt;
}
2022-07-21 22:39:54 +02:00
H3:hover {
2022-06-21 13:56:53 +02:00
Font-Size: 17.5pt;
}
.Inline {
Display: Inline;
}
#Container {
Max-Width: 100%;
}
2022-05-18 20:36:17 +02:00
#LeftBox, #RightBox {
Max-Width: 90vw;
2022-05-18 20:36:17 +02:00
Background: #300030;
Color: #fafaf0;
}
2022-07-21 22:39:54 +02:00
#LeftBox A, #RightBox A, #BottomBox A {
2022-05-18 20:36:17 +02:00
Color: #eeddff;
}
2022-07-21 22:39:54 +02:00
#LeftBox Ul Li, #RightBox Ul Li {
List-Style-Type: None;
}
#TopBox {
Width: 100%;
2022-07-19 18:26:01 +02:00
Padding: Var(--ContentPadding);
}
.HeaderElement {
Border: 2px Solid Purple;
Padding: 0px 8px 8px 8px;
}
#TopBox h1, #TopBox h2, #TopBox h3, #TopBox h4, #TopBox h5, #TopBox h6,
#BottomBox h1, #BottomBox h2, #BottomBox h3, #BottomBox h4, #BottomBox h5, #BottomBox h6 {
2022-05-27 16:24:08 +02:00
Display: Inline;
}
2022-05-18 20:36:17 +02:00
#LeftBox, #LeftBoxContainer {
Float: Left;
2022-07-19 18:26:01 +02:00
Padding: Var(--ContentPadding);
}
2022-05-18 20:36:17 +02:00
#RightBox, #RightBoxContainer {
2022-07-19 18:26:01 +02:00
Padding: Var(--ContentPadding);
}
2022-07-18 18:34:29 +02:00
#RightBox {
Float: Right;
}
2022-07-12 22:44:48 +02:00
#RightBoxContainer > Details > Summary {
Text-Align: Right;
}
#MainBox {
Margin: Auto;
Position: Absolute;
Z-Index: -1;
Left: 0;
Right: 0;
Width: 80%;
2022-07-19 18:26:01 +02:00
Padding-Top: Calc(Var(--ContentPadding) + 32px);
Padding-Bottom: Calc(Var(--ContentPadding) + 64px);
}
2022-07-23 13:52:09 +02:00
#MainBox Img,
#MainBox Video {
2022-07-09 17:42:49 +02:00
Max-Width: 90%;
Max-Height: 80vh;
}
2022-07-23 13:52:09 +02:00
#MainBox Img:hover,
#MainBox Video:hover {
2022-07-09 17:42:49 +02:00
Max-Width: 100%;
Max-Height: 90vh;
}
2022-07-23 13:52:09 +02:00
.Img36 Img,
.Img36 Video {
2022-07-22 00:36:27 +02:00
Max-Height: 36vh !important;
2022-07-19 18:26:01 +02:00
}
2022-07-23 13:52:09 +02:00
.Img36 Img:hover,
.Img36 Video:hover {
2022-07-22 00:36:27 +02:00
Max-Height: 64vh !important;
2022-07-19 18:26:01 +02:00
}
2022-07-24 13:48:02 +02:00
#MainBox p Img:not(.NoImgCenter, .NoImgCenter Img),
#MainBox p Video:not(.NoImgCenter, .NoImgCenter Video) {
Display: Block;
Margin-Left: Auto;
Margin-Right: Auto;
}
2022-07-23 13:52:09 +02:00
.ImgSidePadding Img,
.ImgSidePadding Video {
2022-07-22 00:36:27 +02:00
Padding-Left: 16px;
Padding-Right: 16px;
}
.Pixelated,
.Pixelated Img {
Image-Rendering: Pixelated;
-ms-interpolation-mode: nearest-neighbor;
}
#MainBoxTop {
Color: #505050;
}
#BottomBox {
Width: 100%;
2022-05-19 00:06:04 +02:00
Color: #fafaf0;
2022-07-19 18:26:01 +02:00
Background: RGBA(64, 0, 64, 0.6);
Text-Align: Right;
2022-07-19 18:26:01 +02:00
Padding: Var(--ContentPadding);
Z-Index: -1;
}
2022-05-27 13:06:58 +02:00
#LeftBoxContainer, #RightBoxContainer, #BottomBoxContainer {
Color: #808080;
}
#BottomBox, #BottomBoxContainer {
Box-Sizing: Border-Box;
Position: Fixed;
2022-05-18 13:06:53 +02:00
Bottom: 0;
Left: 0;
Right: 0;
2022-05-18 20:36:17 +02:00
Width: 100%;
}
#BottomBoxContainer {
2022-07-19 18:26:01 +02:00
Padding: Var(--ScreenBorderPadding);
}
2022-05-27 16:24:08 +02:00
#TopBoxLeft {
Text-Align: Left;
Display: Inline-Block;
}
#TopBoxRight {
Text-Align: Right;
Float: Right;
Clear: Both;
}
2022-06-30 23:52:50 +02:00
#MainBoxGlobalFooter,
2022-07-19 18:26:01 +02:00
#StatCounter,
.Center {
Text-Align: Center;
}
#MainBoxGlobalFooter span {
Vertical-Align: Top;
}
2022-05-18 20:36:17 +02:00
#LeftBoxCheck, #LeftBoxLabel {
Float: Left;
Left: 0;
2022-07-19 18:26:01 +02:00
Margin: Var(--ScreenBorderPadding);
2022-05-18 20:36:17 +02:00
}
#RightBoxCheck, #RightBoxLabel {
Float: Right;
Right: 0;
2022-07-19 18:26:01 +02:00
Margin: Var(--ScreenBorderPadding);
2022-05-18 20:36:17 +02:00
}
#BottomBoxCheck, #BottomBoxLabel {
Float: Left;
Left: 0;
2022-07-19 18:26:01 +02:00
Margin: Var(--ScreenBorderPadding);
}
#LeftBoxCheck, #RightBoxCheck, #BottomBoxCheck {
2022-05-18 20:36:17 +02:00
Position: Fixed;
Opacity: 0;
}
:Checked ~ .ToggleBox {
Display: None;
Visibility: Hidden;
}
/* No selezione */
#LeftBox,
#LeftBoxContainer,
#RightBox,
#RightBoxContainer,
#BottomBoxCheck,
#BottomBoxLabel {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
User-select: none;
}
2022-07-24 13:48:02 +02:00
/*--------------------------------------------------------*/
/*--------------------------------------------------------*
* Gradienti *
*--------------------------------------------------------*/
2022-05-27 16:24:08 +02:00
.MainIdTextGradientL {
Background: linear-gradient(to left, #d000d0, #8040d0);
Color: Transparent;
-webkit-background-clip: Text;
Background-Clip: Text;
}
.MainIdTextGradientR {
Background: linear-gradient(to right, #d000d0, #8040d0);
Color: Transparent;
-webkit-background-clip: Text;
Background-Clip: Text;
}
2022-07-24 13:48:02 +02:00
/*--------------------------------------------------------*/
/*--------------------------------------------------------*
* Animazioni *
*--------------------------------------------------------*/
H1, H2, H3, A, Img, Video, Summary {
Transition: 0.3s;
}
2022-05-27 16:24:08 +02:00
.BlinkA {
Animation: BlinkerA 0.25s Step-Start Infinite;
}
@keyframes BlinkerA {
0% {Position: Absolute; Visibility: Hidden;}
50% {Position: Static; Visibility: Visible;}
100% {Position: Absolute; Visibility: Hidden;}
}
.BlinkO {
Animation: BlinkerO 0.25s Step-Start Infinite;
}
@keyframes BlinkerO {
0% {Position: Static; Visibility: Visible;}
50% {Position: Absolute; Visibility: Hidden;}
100% {Position: Static; Visibility: Visible;}
}
2022-07-24 13:48:02 +02:00
/*--- Credits: https://codepen.io/jh3y/pen/WNrXqYz ---*/
.WavyText {
2022-07-19 18:26:01 +02:00
Text-Align: Center;
Position: Absolute;
2022-05-23 00:06:47 +02:00
Left: 50%;
2022-07-19 18:26:01 +02:00
White-Space: NoWrap;
Transform: Translate(-50%, -50%) Translate(Calc(Var(--x, 0) * 1%), Calc(Var(--y, 0) * 1%));
font-variation-settings: 'wght' Var(--lower);
2022-05-23 00:06:47 +02:00
Margin: 0;
}
2022-05-23 00:06:47 +02:00
.WavyText Span {
2022-07-19 18:26:01 +02:00
Color: HSLA(300, 100%, 20%, Var(--alpha-l));
2022-05-23 00:06:47 +02:00
Animation: Rise 2.25s infinite ease-in-out;
2022-07-19 18:26:01 +02:00
Animation-Delay: Calc((Var(--index) - 6) * 0.225s);
Display: Inline-Block;
}
2022-05-23 00:06:47 +02:00
@keyframes Rise {
2022-05-18 20:36:17 +02:00
50% {
2022-07-19 18:26:01 +02:00
font-variation-settings: 'wght' Var(--upper);
Color: HSLA(300, 100%, 30%, Var(--alpha-u));
Transform: Translate(0, -15%);
2022-05-18 20:36:17 +02:00
}
}
2022-07-24 13:48:02 +02:00
/*--- -------------------------------------------- ---*/
/*--------------------------------------------------------*/