syntaxerrormmm/proxmoxve-enthome
1
0
Fork 0
Code Issues Pull requests Releases 1 Activity Actions

Arricchimento con temi e plugin di Marpit.

Browse source
This commit is contained in:
Emiliano Vavassori 2025-05-08 22:47:54 +02:00
parent 2033c88557
commit 6087a83b6f
12 changed files with 1883 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

325
style/_template.css Normal file
View file

@ -0,0 +1,325 @@
/* @theme orwell */
/*
============================================
Created by Paulo Cunha
version: 1.0
last update: 28.mar.2024
============================================
*/
/* Importing COLOR SCHEMA */
@import "default";
@import "schema";
@import "structure";
/*-----------------------------------------------*/
/* Importing Font */
/* Font Credit: htts://https://www.cdnfonts.com/ */
/*-----------------------------------------------*/
/* @import url('https://fonts.cdnfonts.com/css/libre-bodoni-2'); */
@import url('https://fonts.cdnfonts.com/css/faustina-2');
/* @import url('https://fonts.cdnfonts.com/css/joan-2'); */
@import url('https://fonts.cdnfonts.com/css/fira-sans-condensed?styles=19730');
@import url('https://fonts.cdnfonts.com/css/noto-serif-thai');
/* -------------------- ROOT -------------------------------*/
:root {
/* Default items */
/* --default-font-family: 'Bookerly', 'Noto Serif Thai', 'Joan', 'Faustina', 'Libre Bodoni', sans-serif; */
--default-font-family: 'Bookerly', 'Noto Serif Thai', sans-serif;
--default-font-weight: initial;
--default-font-size: 22pt !important;
--default-font-color: #303155;
--default-letter-spacing: -0.4px;
--default-background-color: #fdf8ed ;
/* Paragraph */
--p-color: rgba(4, 20, 41, 0.814);
--p-font-size: 112%;
--p-font-weight: 500;
--p-line-height: 112%;
/* Title Page */
--titlepage-title-font-family: inherit;
--titlepage-subtitle-font-family: 'Fira Sans Condensed';
--titlepage-title-font-size: 32pt;
--titlepage-title-padding-bottom: 6pt;
/* Strong */
--strong-padding-left: 2px;
--strong-padding-right: 2px;
--strong-font-weight: 600;
/* Bold */
--bold-color: rgb(255, 8x, 0);
--bold-color: #e70000;
/* Italic */
--italic-color: #ffffff;
--italic-background-color: #ee0909;
/* Cool-List */
--cool-list-color: rgb(233, 26, 11);
/* H1 */
--h1-color: #32446b;
--h1-font-family: 'Fira Sans condensed';
--h1-font-size: 36pt;
--h1-font-weight: 900;
--h1-padding-bottom: 2mm;
--h1-margin-bottom: 10mm;
--h1-border-bottom: 1px solid orangered;
/* Code */
--code-background-color: rgba(206, 252, 0, 0.877);
--code-font-family: inherit;
--code-font-color: rgb(10, 10, 10);
--code-font-size: inherit;
--code-font-weight: 600;
--code-padding-left: 16px;
--code-padding-right: 16px;
--code-border-radius: 13pt;
/* List Item <li> */
--li-font-size: 22pt;
--li-hover-font-color: rgb(255, 255, 255);
--li-hover-background-color: rgba(10, 10, 10, 0.089);
/* Transition */
--transition-em-background-color: #264b97c5;
--transition-background-color: #7389c4;
/* Transition2 */
--transition2-em-background-color: #d63d00e3;
--transition2-background-color: #ee7614;
/* --transition2-em-background-color: #a3343494;
--transition2-background-color: #df8379; */
}
:root {
font-family: var(--default-font-family);
font-weight: var(--default-font-weight);
font-size: var(--default-font-size);
background-color: var(--default-background-color);
color: var(--default-font-color);
font-kerning: auto !important;
letter-spacing: var(--default-letter-spacing);
}
/* ----------------------- TITLE PAGE -------------------------------*/
section.titlepage .title {
font-family: var(--titlepage-title-font-family);
font-size: var(--titlepage-title-font-size);
border-bottom: var(--h1-border-bottom);
padding-bottom: var(--titlepage-title-padding-bottom);
}
section.titlepage .subtitle {
font-family: var(--titlepage-subtitle-font-family);
}
section.titlepage h1 {
font-family: var(--titlepage-title-font-family) !important;
font-size: var(--titlepage-title-font-size) !important;
padding-bottom: var(--titlepage-title-padding-bottom) !important;
}
section.titlepage h2 {
line-height: 0pt !important;
font-family: var(--titlepage-subtitle-font-family);
padding-bottom: 150pt !important;
}
section.titlepage .author,
section.titlepage .date,
section.titlepage .organization {
text-align: left;
}
/* -------------------- H1 -------------------------------*/
h1 {
font-family: var(--h1-font-family);
font-weight: var(--h1-font-weight);
font-size: var(--h1-font-size);
color: var(--h1-color);
padding-bottom: var(--h1-padding-bottom);
margin-bottom: var(--h1-margin-bottom);
border-bottom: var(--h1-border-bottom);
}
/* ------------------- PARAGRAPH ------------------------*/
p {
font-size: var(--p-font-size);
font-weight: var(--p-font-weight);
color: var(--p-color);
line-height: var(--p-line-height) !important;
}
/* ----------------- LIST ITEM ------------------------*/
li {
font-size: var(--li-font-size) !important;
}
li:hover {
background-color: var(--li-hover-background-color);
color: var(--li-hover-font-color);
}
/* --------------------- STRONG -------------------------*/
strong {
color: var(--bold-color) !important;
padding-left: var(--strong-padding-left);
padding-right: var(--strong-padding-right);
font-weight: var(--strong-font-weight);
}
/* ----------------------- CODE -------------------------------*/
section code {
font-family: var(--code-font-family);
font-size: var(--code-font-size);
font-weight: var(--code-font-weight) !important;
background-color: var(--code-background-color);
color: var(--code-font-color) !important;
padding-left: var(--code-padding-left) !important;
padding-right: var(--code-padding-right) !important;
border-end-start-radius: var(--code-border-radius);
border-start-end-radius: var(--code-border-radius);
border-end-end-radius: var(--code-border-radius);
border-start-start-radius: var(--code-border-radius);
}
/* -------------------- TRANSITION -------------------------------*/
section.transition {
background-color: var(--transition-background-color) !important;
}
section.transition em{
color: unset !important;
background-color: var(--transition-em-background-color);
font-family: unset;
font-weight: unset;
font-style: italic;
padding-left: var(--code-padding-left) !important;
padding-right: var(--code-padding-right) !important;
border-end-start-radius: var(--code-border-radius);
border-start-end-radius: var(--code-border-radius);
border-end-end-radius: var(--code-border-radius);
border-start-start-radius: var(--code-border-radius);
}
section.transition strong {
color: unset !important;
}
/* -------------------- TRANSITION2 -------------------------------*/
section.transition2 {
background-color: var(--transition2-background-color) !important;
}
section.transition2 strong {
color: unset !important;
}
section.transition2 em {
background-color: var(--transition2-em-background-color) !important;
color: unset !important;
background-color: unset;
font-family: unset;
font-weight: unset;
font-style: italic;
padding-left: var(--code-padding-left) !important;
padding-right: var(--code-padding-right) !important;
border-end-start-radius: var(--code-border-radius);
border-start-end-radius: var(--code-border-radius);
border-end-end-radius: var(--code-border-radius);
border-start-start-radius: var(--code-border-radius);
}
/* -------------------- BIBLIO -------------------------------*/
section.biblio {
font-family: var(--default-font-family) !important;
--border-color: #424b52;
--biblio-background-color: #b8c2f9;
--text-color: #000000;
--bold-color: #4760ff;
}
/* -------------------- COLUMNS -------------------------------*/
section.columns ul,
section.columns ol,
section.columns li {
color: var(--default-font-color);
font-family: var(--default-font-family);
font-size: 28px !important;
font-weight: 400;
}
/* ----------------------- CITE -------------------------------*/
section.cite {
background-color: #9aade2;
}
section.cite p{
color: rgb(34, 34, 48) !important;
font-family: 'Faustina';
font-weight: 600;
font-size: 34pt !important;
}
section.cite strong{
color: rgb(248, 248, 247) !important;
}

37
style/kant.css Normal file
View file

@ -0,0 +1,37 @@
/* @theme kant */
/*
============================================
Created by Paulo Cunha
version: 1.0
last update: 30.dez.2021
============================================
*/
/* Importing COLOR SCHEMA */
@import "default";
@import "schema";
@import "structure";
/* Importing Font */
/* Font Credit: htts://https://www.cdnfonts.com/ */
/* @import url('https://fonts.cdnfonts.com/css/fira-sans-condensed?styles=19730'); */
/* @import url('https://fonts.cdnfonts.com/css/fira-sans-condensed');*/
@import url('https://fonts.cdnfonts.com/css/fira-sans-book');
/***************** COMMON STRUCTURE **********************/
:root {
/* font-family: 'Fira Sans Book'; */
font-family: 'Fira Sans Light';
font-weight: initial;
}
section.titlepage .author,
section.titlepage .date,
section.titlepage .organization {
text-align: left;
}

103
style/schema.css Normal file
View file

@ -0,0 +1,103 @@
/* @theme schema */
/* Last update: 23.jun.2023
30.dez.2021
*/
/* -------------------- ROOT ----------------------------------*/
:root {
/* --subtitle-color : #586e75; */
--subtitle-color: #93a1a1;
--h1-color: black;
--border-color: #e99211;
--bold-color: orangered;
--italic-color: black;
--italic-background-color: rgba(255, 210, 8, 0.713);
--background-color: #fdf6e3;
--list-item-color: rgb(50, 56, 56);
--after-color: rgb(255, 39, 1);
--main-color: rgb(207, 77, 17);
--darker-color: #246;
--lighter-color: #080a0a;
--extra-back-color: rgb(175, 172, 173);
--letter-spacing: 0.125px;
--cool-list-color: orangered;
--author-align: right;
--blockquote-strong: rgb(255, 1, 1);
/*------------ table colors --------------------------*/
--table-header-color: rgb(28, 36, 43);
--table-header-font-color: white;
--table-border-top: rgb(97, 96, 96);
--table-border-bottom: rgba(97, 97, 96, 0.315);
--table-nth-child-color: #eef1f3;
/* --table-hover-background-color: rgb(245, 253, 230); */
--table-hover-background-color: rgb(252, 11, 11);
/* --table-hover-color: black; */
--table-hover-color: white;
}
/* -------------------- TRANSITION ---------------------------------*/
section.transition {
--transitionpage-color: orangered;
}
/* -------------------- BIBLIO -------------------------------*/
section.biblio {
--text-color: white;
--biblio-background-color: rgb(11, 50, 175);
--border-color: darkorange;
--bold-color: orange;
}
/* ------------------- TITLEPAGE -----------------------------*/
section.titlepage {
/* fonts sizes */
--title-size: 150%;
--subtitle-size: 110%;
--author-size: 110%;
--date-size: 110%;
--institute-size: 90%;
--letter-spacing: 0.125px;
/* font weights */
--title-font-weight: 600;
--subtitle-font-weight: 600;
/* colors in style */
--title-color: #ee0d0d;
--title-color: #4d7baf;
--title-color: #0a67f1;
--title-color: #002b36;
--titlepage-color: #242d31;
--background-color: #faf7f7;
--border-color: #f0cf9e;
--border-color: #b5c9ee;
--border-color: #8aa6da;
--border-color: #6c71c4;
--border-color: #e99211;
}
/* ------------------- CITE -----------------------------*/
section.cite {
--background-color: #fdf6e3;
--strong-color: rgb(182, 112, 27);
}

59
style/simple.css Normal file
View file

@ -0,0 +1,59 @@
/* @theme simple */
@import "default";
/* Add "Page" prefix and total page number */
section::after {
content: "pág. " attr(data-marpit-pagination) " / " attr(data-marpit-pagination-total);
color: rgba(207, 201, 201, 0.952);
}
section p {
margin-bottom: 0.6em;
line-height: 1.2em;
}
section li {
margin-top: 0.6em;
margin-bottom: 0.6em;
line-height: 1.2em;
font-size:100%;
color: rgba(128, 128, 128, 0.959);
}
h1 {
text-align: center;
color: darkslateblue;
}
.columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
justify-content: center !important;
}
/******************* lead *****************************/
/* lead class: first slide in a section. Use h1 as header.
Use: <!-- _class: lead --> */
section.lead {
background-color: orangered;
text-align: center;
color: white;
padding-top: auto;
padding-buttom: auto;
}
section.lead h1, section.lead h2, section.lead p, section.lead a {
color: white;
font-size: 200%
}
section.lead footer, section.lead header, section.lead:after {
/* hide header, footer and pagination */
display: none;
}

844
style/structure.css Normal file
View file

@ -0,0 +1,844 @@
/* @theme structure */
/*
============================================
Created by Paulo Cunha
version: 1.75
update: 06.mai.2024
update: 23.jun.2023
update: 12.mai.2022
update: 30.dez.2021
============================================
You may use freely (MIT license) provided
due credits are granted to the authors.
CLASSES:
<!-- _class: biblio -->
<!-- _class: blockquote -->
<!-- _class: cite -->
<!-- _class: columns -->
<!-- _class: columns3 -->
<!-- _class: columns-center -->
<!-- _class: columns3-center -->
<!-- _class: cool-list -->
<!-- _class: cool-list2 -->
<!-- _class: table -->
<!-- _class: transition -->
<!-- _class: titlepage -->
Credits: https://catalin.red/css3-ordered-list-styles/
for cool-list anda cool-list2.
*/
/***************** COMMON STRUCTURE **********************/
h1 {
color: var(--h1-color);
border-bottom: 1px solid var(--border-color);
}
section p {
margin-top: 0.5em;
margin-bottom: 0.25em;
line-height: 1.3em;
font-size: 32px;
}
section li {
margin-top: 0.5em;
margin-bottom: 0.25em;
line-height: 1.2em;
font-size: 105%;
color: val(--list-item-color);
}
section li:hover {
/* margin-top: 1em; */
/* margin-bottom: 1em; */
/* font-size: 150% !important; */
/* font-weight: 600 !important; */
/* color: #000000 !important; */
/* border: 1px solid rgb(8, 8, 8); */
background-color: rgb(250, 233, 2);
color: black !important;
background-color: rgb(208, 253, 6);
border-end-start-radius: 10pt;
border-start-end-radius: 10pt;
border-end-end-radius: 10pt;
border-start-start-radius: 10pt;
}
/* Definition for emphasis */
section em {
color: var(--italic-color);
background: var(--italic-background-color);
font-style: normal;
font-weight: bold;
font-family: sans-serif;
padding-top: 6px;
padding-left: 6px;
padding-right: 6px;
padding-bottom: 6px;
}
/* Definition for bold text */
section strong {
color: var(--bold-color);
padding-left: 5px;
padding-right: 5px;
font-weight: 600;
}
section figcaption{
font-size: 80%;
padding-top: 16px;
/* text-align: center; */
}
/* May append some string to page number */
/* Uses format "page-number / total pages" */
section::after {
color: rgb(51, 59, 77);
font-size: 0.8em;
content: ' ' attr(data-marpit-pagination) '/'
attr(data-marpit-pagination-total) ' ';
}
.small {
font-size: 24px;
}
/**------------------- TABLE -----------------------------*/
/*
Tables are always centered.
Credits: Juan Vera del Campo
Locus: https://github.com/Juanvvc
*/
section table {
margin-top: 40px;
/* width: auto; (24.01.2025 paulo.cunha) */
border: 0;
font-size: 24px;
margin-right: auto !important;
margin-left: auto !important;
}
section table th {
background-color: var(--table-header-color);
color: var(--table-header-font-color);
border: 1;
border-top: var(--table-border-top) solid 2px;
}
section table td {
border: 0;
}
section table tr:nth-child(2) {
background-color: #c4c6c6;
}
section table tr:last-child {
border-bottom: var(--table-border-bottom) solid 1px;
}
tr:nth-child(even) {
background-color: var(--table-nth-child-color) !important;
}
tr:hover {
color: var(--table-hover-color) !important;
background-color: var(--table-hover-background-color) !important;
font-weight: bold !important;
}
/**------------------- BLOCK QUOTE -----------------------------*/
/*
Block quote: used for footnote
substitution. Use as the last
element of a slide.
*/
section blockquote {
color: rgb(66, 66, 66);
font-size: 20px;
border-top: 0.1em dashed var(--extra-back-color);
margin-top: auto;
}
section blockquote p {
font-size: 1.12em !important;
letter-spacing: -0.5px !important;
}
section blockquote strong {
color: var(--blockquote-strong);
font-weight: bold;
font-size: 1.11em !important;
letter-spacing: -0.5px !important;
}
/**------------------- COLUMNS -----------------------------*/
/*
Adds two-columns class
*/
.columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
/* justify-content: center !important; */
}
.columns p {
margin-top: 0.5em;
margin-bottom: 0.25em;
line-height: 1.16em;
font-size: 30px;
}
.columns ol,
ul {
margin-top: 0.15em;
margin-bottom: 0.25em;
line-height: 1.73em !important;
font-size: 26px;
color: var();
}
/**------------------- COLUMNS CENTER ---------------------*/
/*
/*
Adds two-columns with centered contens class
*/
.columns-center {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
justify-items: center;
justify-content: center;
align-items: center;
}
/**------------------- THREE-COLUMNS -----------------------------*/
/*
Adds three-columns class
*/
.columns3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
/* justify-content: center !important; */
}
/**------------------- THREE-COLUMNS-CENTER ---------------------*/
/*
Adds three-columns with centered contens class
*/
.columns3-center {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
justify-items: center;
justify-content: center;
align-items: center;
}
/**------------------- TITLEPAGE -----------------------------*/
/*
Title Page Class: first slide in a deck.
Use:
<!-- _class: titlepage -->
# TTILE
## SUBTITLE
### AUTHOR
#### DATE
##### INSTITUTION
*/
section.titlepage {
background-color: var(--background-color);
}
/*
Titlepage informations
*/
section.titlepage .title {
font-size: var(--title-size);
font-weight: var(--title-font-weight);
color: var(--title-color);
border-bottom: 1px solid var(--border-color);
line-height: 1.2;
padding-bottom: 15px;
}
section.titlepage .subtitle {
font-size: var(--subtitle-size);
font-weight: var(--subtitle-font-weight);
line-height: 1.2;
color: var(--subtitle-color);
padding-top: 10px;
padding-bottom: 120px;
letter-spacing: var(--letter-spacing);
}
section.titlepage .author {
font-size: var(--author-size);
}
section.titlepage .date {
font-size: var(--date-size);
}
section.titlepage .organization {
font-size: var(--institute-size);
}
section.titlepage .author,
section.titlepage .date,
section.titlepage .organization {
font-weight: 400;
text-align: right;
color: var(--titlepage-color);
line-height: 1.25;
}
section.titlepage h3,
section.titlepage h4,
section.titlepage h5 {
font-weight: 400;
text-align: right;
color: var(--titlepage-color);
line-height: 0.45;
letter-spacing: var(--letter-spacing);
}
section.titlepage h1 {
font-size: var(--title-size) !important;
font-weight: var(--title-font-weight) !important;
text-align: left;
color: var(--title-color) !important;
border-bottom: 1px solid var(--border-color) !important;
line-height: 1.25;
/* padding-right: 20%; */
}
section.titlepage h2 {
font-size: var(--subtitle-size);
font-weight: var(--subtitle-font-weight);
text-align: left;
color: var(--subtitle-color) !important;
letter-spacing: var(--letter-spacing);
line-height: 1.2;
margin-top: -0.2em;
padding-bottom: 95px;
}
section.titlepage h3 {
font-size: var(--author-size);
}
section.titlepage h4 {
font-size: var(--date-size);
}
section.titlepage h5 {
font-size: var(--institute-size);
}
/* Omits page number in Title Page Slide */
section.titlepage footer,
section.titlepage header,
section.titlepage:after {
/* hide header, footer and pagination */
display: none;
}
/**------------------- TRANSITION -----------------------------*/
/*
transition class: first slide in a section. Use h1 as header.
Use:
<!-- _class: transition -->
# Header
*/
section.transition {
background-color: var(--transitionpage-color);
text-align: center !important;
font-weight: bold;
color: white;
padding-top: auto;
padding-buttom: auto;
}
section.transition h1,
section.transition h2,
section.transition p,
section.transition a {
color: rgb(243, 229, 212);
font-size: 200%;
border-bottom: none;
}
section.transition footer,
section.transition header,
section.transition:after {
/* hide header, footer and pagination */
display: none;
}
/**------------------- TRANSITION2 -----------------------------*/
/*
transition2 class: first slide in a section. Use h1 as header.
Use:
<!-- _class: transition2 -->
# Header
*/
section.transition2 {
background-color: rgb(137, 173, 207);
text-align: center !important;
font-weight: bold !important;
color: rgb(255, 255, 255);
padding-top: auto;
padding-buttom: auto;
}
section.transition2 h1,
section.transition2 h2,
section.transition2 p,
section.transition2 a {
color: rgb(217, 235, 247);
font-size: 200%;
border-bottom: none;
}
section.transition2 em {
background-color: rgb(60, 255, 0) !important;
}
section.transition2 footer,
section.transition2 header,
section.transition2:after {
/* hide header, footer and pagination */
display: none;
}
/**------------------- TRANSITION3 -----------------------------*/
/*
transition2 class: first slide in a section. Use h1 as header.
Use:
<!-- _class: transition3 -->
# Header
*/
section.transition3 {
background-color: rgb(66, 69, 71);
text-align: center !important;
font-weight: bold !important;
color: rgb(255, 255, 255);
padding-top: auto;
padding-buttom: auto;
}
section.transition3 h1,
section.transition3 h2,
section.transition3 p,
section.transition3 a {
color: rgb(244, 247, 217);
font-size: 200%;
border-bottom: none;
}
section.transition3 em {
background-color: rgb(60, 255, 0) !important;
}
section.transition3 strong {
color: rgb(71, 83, 90);
}
section.transition3 footer,
section.transition3 header,
section.transition3:after {
/* hide header, footer and pagination */
display: none;
}
/**------------------- CITE -----------------------------*/
/*
cite class: slide containg a citation
Use:
<!-- _class: cite -->
Text
*/
section.cite {
background-color: var(--background-color);
}
section.cite p {
color: black;
background-color: ;
letter-spacing: var(--letter-spacing);
font-size: 150%;
text-align: center;
line-height: 1.2em;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
/* font-style: oblique; */
padding-top: auto;
padding-bottom: auto;
padding-left: 100px;
padding-right: 100px;
}
section.cite strong {
color: var(--strong-color);
}
/* Omits page number in Title Page Slide */
section.cite footer,
section.cite header,
section.cite:after {
/* hide header, footer and pagination */
display: none;
}
/**------------------- BIBLIO -----------------------------*/
/*
slides containg bibliography
Use:
<!-- _class: biblio -->
# References
1. Item one
2. Item two
*/
section.biblio {
background-color: var(--biblio-background-color);
}
section.biblio p {
color: var(--text-color);
font-size: 80%;
font-weight: 300;
padding-left: 5px;
}
section.biblio h1 {
font-size: 35px;
color: var(--text-color);
border-bottom: 1px solid var(--border-color);
}
section.biblio strong {
color: var(--bold-color);
}
section.biblio a {
font-size: 31px;
font-weight: bold;
color: var(--bold-color);
}
section.biblio li {
color: var(--text-color);
}
section.biblio footer,
section.biblio header,
section.biblio:after {
/* hide header, footer and pagination */
display: none;
}
/**------------------- COOL-LIST -----------------------------**/
/*
Credits: https://catalin.red/css3-ordered-list-styles/
Use:
<!-- _class: cool-list -->
1. *Item One*
1. *Item two*
1. *Item two.one*
1. *Item two.two*
1. *Item two.three*
1. *Item Three*
*/
section.cool-list ol {
counter-reset: li;
/* Initiate a counter */
list-style: none;
/* Remove default numbering */
padding: 0;
/*text-shadow: 0 1px 0 rgba(255,255,255,.5);*/
}
section.cool-list li {
margin-bottom: 0.1em !important;
margin-top: 0.1em !important;
}
section.cool-list ol>li>em,
section.cool-list>ol>li>a {
position: relative;
display: block;
padding: 0.4em 0.4em 0.4em 2em;
margin: 0.5em 0;
background: #ddd;
color: #444;
text-decoration: none;
border-radius: 0.3em;
transition: all 0.3s ease-out;
font-style: normal;
}
section.cool-list ol>li>em:before,
section.cool-list>ol>li>a:before {
content: counter(li);
counter-increment: li;
position: absolute;
left: -1.3em;
top: 50%;
margin-top: -1.3em;
background: var(--cool-list-color);
height: 2em;
width: 2em;
line-height: 2em;
border: 0.3em solid #fff;
text-align: center;
font-weight: normal;
border-radius: 2em;
transition: all 0.3s ease-out;
color: white;
}
section.cool-list>ol>li>em:hover,
section.cool-list>ol>li>a:hover {
background: #eee;
font-weight: bolder;
}
/* Rotating effect */
/*
section.cool-list ol > li > em:hover:before,section.cool-list ol > li > a:hover:before{
transform: rotate(360deg);
}*/
/* Lists inside lists */
section.cool-list>ol ol {
margin: 0 0 0 2em;
/* Add some left margin for inner lists */
font-size: 75%;
counter-reset: li2;
/* Initiate a counter */
}
section.cool-list>ol ol>li>em:before,
section.cool-list>ol ol>li>a:before {
content: counter(li2);
counter-increment: li2;
}
section.cool-list>ol>li>ul {
list-style-type: disc;
margin: 0 0 0 1em;
font-size: 75%;
}
section.cool-list>ol ol>li>em {
background: #efefef;
}
/******************* cool-list2 *****************************/
/*
Credits: https://catalin.red/css3-ordered-list-styles/
Use:
<!-- _class: cool-list2 -->
1. *Item One*
1. *Item two*
1. *Item two.one*
1. *Item two.two*
1. *Item two.three*
1. *Item Three*
*/
section.cool-list2 ol {
counter-reset: li;
/* Initiate a counter */
list-style: none;
/* Remove default numbering */
padding: 0;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
section.cool-list2 ol ol {
margin: 0 0 0 2em;
/* Add some left margin for inner lists */
}
section.cool-list2 ol li em {
position: relative;
display: block;
padding: 0.4em 0.4em 0.4em 0.8em;
margin: 0.5em 0 0.5em 2.5em;
background: #ddd;
color: #444;
text-decoration: none;
transition: all 0.3s ease-out;
font-style: normal;
}
section.cool-list2 ol li em:hover {
background: #eee;
font-weight: bolder;
}
section.cool-list2 ol li em:before {
content: counter(li);
counter-increment: li;
position: absolute;
left: -2.5em;
top: 50%;
margin-top: -1em;
/* background: #fa8072; */
background: var(--lighter-color);
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}
section.cool-list2 ol li em:after {
position: absolute;
content: '';
border: 0.5em solid transparent;
left: -1em;
top: 50%;
margin-top: -0.5em;
transition: all 0.3s ease-out;
}
section.cool-list2 ol li em:hover:after {
left: -0.5em;
/* border-left-color: #fa8072; */
border-left-color: var(--lighter-color);
}
/* Lists inside lists */
section.cool-list2 ol ol {
margin: 0 0 0 2em;
/* Add some left margin for inner lists */
font-size: 75%;
counter-reset: li2;
/* Initiate a counter */
}
section.cool-list2 ol ol>li>em:before,
section.cool-list2 ol ol>li>a:before {
content: counter(li2);
counter-increment: li2;
background: lightgray;
}
section.cool-list2 ol ul {
list-style-type: disc;
margin: 0 0 0 1em;
font-size: 75%;
}
section.cool-list2 ol ol em {
background: #efefef;
}
/**------------------- POSITIONING - new 08.04.2025 -----------------------------*/
.topleft {
position: absolute;
top: 38px;
left: 26px;
}
.topright {
position: absolute;
top: 38px;
right: 26px;
}
.bottomleft {
position: absolute;
bottom: 38px;
left: 26px;
}
.bottomright {
position: absolute;
bottom: 38px;
right: 26px;
}
.centered {
position: absolute;
left: 0px;
right: 0pt;
top: 50%;
width: 100%;
text-align: center;
}
.center {
text-align: center;
}
.right {
text-align: right;
}