nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-10-27 10:43:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

boxes: use introduces --VARIABLE-BOX-* variables

Browse source
This commit is contained in:
Sören Weber 2022-05-29 09:38:16 +02:00
parent 141ec1578c
commit 68b0ccfcf6
No known key found for this signature in database
GPG key ID: 07D17FF580AE7589
3 changed files with 38 additions and 132 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
static/css/ie.css
View file

@ -185,11 +185,16 @@
color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-RED-TEXT-color) */ color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-RED-TEXT-color) */
} }
div.box.transparent {
background-color: transparent;
}
div.box.transparent > .box-label { div.box.transparent > .box-label {
color: #4a4a4a; /* var(--MAIN-TITLES-TEXT-color) */ color: #4a4a4a; /* var(--MAIN-TITLES-TEXT-color) */
} }
div.box.transparent > .box-content { div.box.transparent > .box-content {
background-color: transparent;
color: #101010; /* var(--MAIN-TEXT-color) */ color: #101010; /* var(--MAIN-TEXT-color) */
} }

69
static/css/theme.css
View file

@ -457,8 +457,9 @@ blockquote cite {
div.box { div.box {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color); --VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NEUTRAL-TEXT-color);
--VARIABLE-BOX-CAPTION-color: var(--INTERNAL-BOX-CAPTION-color); --VARIABLE-BOX-CAPTION-color: var(--INTERNAL-BOX-CAPTION-color);
--VARIABLE-BOX-BG-color: var(--INTERNAL-BOX-BG-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NEUTRAL-TEXT-color);
-webkit-print-color-adjust: exact; -webkit-print-color-adjust: exact;
color-adjust: exact; color-adjust: exact;
margin: 1.5rem 0; margin: 1.5rem 0;
@ -484,72 +485,6 @@ div.box > .box-content > :last-child {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
div.box.info {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-INFO-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-INFO-TEXT-color);
}
div.box.warning {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-WARNING-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-WARNING-TEXT-color);
}
div.box.note {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-NOTE-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NOTE-TEXT-color);
}
div.box.tip {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-TIP-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-TIP-TEXT-color);
}
div.box.primary {
--VARIABLE-BOX-color: var(--INTERNAL-PRIMARY-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
}
div.box.secondary {
--VARIABLE-BOX-color: var(--INTERNAL-SECONDARY-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
}
div.box.blue {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-BLUE-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-BLUE-TEXT-color);
}
div.box.green {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-GREEN-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREEN-TEXT-color);
}
div.box.grey {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-GREY-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREY-TEXT-color);
}
div.box.orange {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-ORANGE-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-WARNING-ORANGE-color);
}
div.box.red {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-RED-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-RED-TEXT-color);
}
div.box.transparent {
--VARIABLE-BOX-color: transparent;
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
--VARIABLE-BOX-CAPTION-color: var(--INTERNAL-MAIN-TITLES-TEXT-color);
background-color: transparent;
}
div.box.transparent > .box-content {
background-color: transparent;
}
/* attachments shortcode */ /* attachments shortcode */
div.attachments .box-content { div.attachments .box-content {

96
static/css/variant.css
View file

@ -194,112 +194,78 @@ h6 {
} }
div.box { div.box {
background-color: var(--INTERNAL-BOX-NEUTRAL-color); background-color: var(--VARIABLE-BOX-color);
} }
div.box > .box-label { div.box > .box-label {
color: var(--INTERNAL-BOX-CAPTION-color); color: var(--VARIABLE-BOX-CAPTION-color);
} }
div.box > .box-content { div.box > .box-content {
background-color: var(--INTERNAL-BOX-BG-color); background-color: var(--VARIABLE-BOX-BG-color);
color: var(--INTERNAL-BOX-NEUTRAL-TEXT-color); color: var(--VARIABLE-BOX-TEXT-color);
} }
div.box.info { div.box.info {
background-color: var(--INTERNAL-BOX-INFO-color); --VARIABLE-BOX-color: var(--INTERNAL-BOX-INFO-color);
} --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-INFO-TEXT-color);
div.box.info > .box-content {
color: var(--INTERNAL-BOX-INFO-TEXT-color);
} }
div.box.warning { div.box.warning {
background-color: var(--INTERNAL-BOX-WARNING-color); --VARIABLE-BOX-color: var(--INTERNAL-BOX-WARNING-color);
} --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-WARNING-TEXT-color);
div.box.warning > .box-content {
color: var(--INTERNAL-BOX-WARNING-TEXT-color);
} }
div.box.note { div.box.note {
background-color: var(--INTERNAL-BOX-NOTE-color); --VARIABLE-BOX-color: var(--INTERNAL-BOX-NOTE-color);
} --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NOTE-TEXT-color);
div.box.note > .box-content {
color: var(--INTERNAL-BOX-NOTE-TEXT-color);
} }
div.box.tip { div.box.tip {
background-color: var(--INTERNAL-BOX-TIP-color); --VARIABLE-BOX-color: var(--INTERNAL-BOX-TIP-color);
} --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-TIP-TEXT-color);
div.box.tip > .box-content {
color: var(--INTERNAL-BOX-TIP-TEXT-color);
} }
div.box.primary { div.box.primary {
background-color: var(--INTERNAL-PRIMARY-color); --VARIABLE-BOX-color: var(--INTERNAL-PRIMARY-color);
} --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
div.box.primary > .box-content {
color: var(--INTERNAL-MAIN-TEXT-color);
} }
div.box.secondary { div.box.secondary {
background-color: var(--INTERNAL-SECONDARY-color); --VARIABLE-BOX-color: var(--INTERNAL-SECONDARY-color);
} --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
div.box.secondary > .box-content {
color: var(--INTERNAL-MAIN-TEXT-color);
} }
div.box.blue { div.box.blue {
background-color: var(--INTERNAL-BOX-BLUE-color); --VARIABLE-BOX-color: var(--INTERNAL-BOX-BLUE-color);
} --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-BLUE-TEXT-color);
div.box.blue > .box-content {
color: var(--INTERNAL-BOX-BLUE-TEXT-color);
} }
div.box.green { div.box.green {
background-color: var(--INTERNAL-BOX-GREEN-color); --VARIABLE-BOX-color: var(--INTERNAL-BOX-GREEN-color);
} --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREEN-TEXT-color);
div.box.green > .box-content {
color: var(--INTERNAL-BOX-GREEN-TEXT-color);
} }
div.box.grey { div.box.grey {
background-color: var(--INTERNAL-BOX-GREY-color); --VARIABLE-BOX-color: var(--INTERNAL-BOX-GREY-color);
} --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREY-TEXT-color);
div.box.grey > .box-content {
color: var(--INTERNAL-BOX-GREY-TEXT-color);
} }
div.box.orange { div.box.orange {
background-color: var(--INTERNAL-BOX-ORANGE-color); --VARIABLE-BOX-color: var(--INTERNAL-BOX-ORANGE-color);
} --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-WARNING-ORANGE-color);
div.box.orange > .box-content {
color: var(--INTERNAL-BOX-ORANGE-TEXT-color);
} }
div.box.red { div.box.red {
background-color: var(--INTERNAL-BOX-RED-color); --VARIABLE-BOX-color: var(--INTERNAL-BOX-RED-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-RED-TEXT-color);
} }
div.box.red > .box-content { div.box.transparent {
color: var(--INTERNAL-BOX-RED-TEXT-color); --VARIABLE-BOX-color: transparent;
} --VARIABLE-BOX-CAPTION-color: var(--INTERNAL-MAIN-TITLES-TEXT-color);
--VARIABLE-BOX-BG-color: transparent;
div.box.transparent > .box-label { --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
color: var(--INTERNAL-MAIN-TITLES-TEXT-color);
}
div.box.transparent > .box-content {
color: var(--INTERNAL-MAIN-TEXT-color);
} }
code, code,