mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-11-27 01:33:04 +00:00
boxes: use introduces --VARIABLE-BOX-* variables
This commit is contained in:
parent
141ec1578c
commit
68b0ccfcf6
3 changed files with 38 additions and 132 deletions
|
@ -185,11 +185,16 @@
|
|||
color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-RED-TEXT-color) */
|
||||
}
|
||||
|
||||
div.box.transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
div.box.transparent > .box-label {
|
||||
color: #4a4a4a; /* var(--MAIN-TITLES-TEXT-color) */
|
||||
}
|
||||
|
||||
div.box.transparent > .box-content {
|
||||
background-color: transparent;
|
||||
color: #101010; /* var(--MAIN-TEXT-color) */
|
||||
}
|
||||
|
||||
|
|
|
@ -457,8 +457,9 @@ blockquote cite {
|
|||
|
||||
div.box {
|
||||
--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-BG-color: var(--INTERNAL-BOX-BG-color);
|
||||
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NEUTRAL-TEXT-color);
|
||||
-webkit-print-color-adjust: exact;
|
||||
color-adjust: exact;
|
||||
margin: 1.5rem 0;
|
||||
|
@ -484,72 +485,6 @@ div.box > .box-content > :last-child {
|
|||
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 */
|
||||
|
||||
div.attachments .box-content {
|
||||
|
|
|
@ -194,112 +194,78 @@ h6 {
|
|||
}
|
||||
|
||||
div.box {
|
||||
background-color: var(--INTERNAL-BOX-NEUTRAL-color);
|
||||
background-color: var(--VARIABLE-BOX-color);
|
||||
}
|
||||
|
||||
div.box > .box-label {
|
||||
color: var(--INTERNAL-BOX-CAPTION-color);
|
||||
color: var(--VARIABLE-BOX-CAPTION-color);
|
||||
}
|
||||
|
||||
div.box > .box-content {
|
||||
background-color: var(--INTERNAL-BOX-BG-color);
|
||||
color: var(--INTERNAL-BOX-NEUTRAL-TEXT-color);
|
||||
background-color: var(--VARIABLE-BOX-BG-color);
|
||||
color: var(--VARIABLE-BOX-TEXT-color);
|
||||
}
|
||||
|
||||
div.box.info {
|
||||
background-color: var(--INTERNAL-BOX-INFO-color);
|
||||
}
|
||||
|
||||
div.box.info > .box-content {
|
||||
color: var(--INTERNAL-BOX-INFO-TEXT-color);
|
||||
--VARIABLE-BOX-color: var(--INTERNAL-BOX-INFO-color);
|
||||
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-INFO-TEXT-color);
|
||||
}
|
||||
|
||||
div.box.warning {
|
||||
background-color: var(--INTERNAL-BOX-WARNING-color);
|
||||
}
|
||||
|
||||
div.box.warning > .box-content {
|
||||
color: var(--INTERNAL-BOX-WARNING-TEXT-color);
|
||||
--VARIABLE-BOX-color: var(--INTERNAL-BOX-WARNING-color);
|
||||
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-WARNING-TEXT-color);
|
||||
}
|
||||
|
||||
div.box.note {
|
||||
background-color: var(--INTERNAL-BOX-NOTE-color);
|
||||
}
|
||||
|
||||
div.box.note > .box-content {
|
||||
color: var(--INTERNAL-BOX-NOTE-TEXT-color);
|
||||
--VARIABLE-BOX-color: var(--INTERNAL-BOX-NOTE-color);
|
||||
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NOTE-TEXT-color);
|
||||
}
|
||||
|
||||
div.box.tip {
|
||||
background-color: var(--INTERNAL-BOX-TIP-color);
|
||||
}
|
||||
|
||||
div.box.tip > .box-content {
|
||||
color: var(--INTERNAL-BOX-TIP-TEXT-color);
|
||||
--VARIABLE-BOX-color: var(--INTERNAL-BOX-TIP-color);
|
||||
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-TIP-TEXT-color);
|
||||
}
|
||||
|
||||
div.box.primary {
|
||||
background-color: var(--INTERNAL-PRIMARY-color);
|
||||
}
|
||||
|
||||
div.box.primary > .box-content {
|
||||
color: var(--INTERNAL-MAIN-TEXT-color);
|
||||
--VARIABLE-BOX-color: var(--INTERNAL-PRIMARY-color);
|
||||
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
|
||||
}
|
||||
|
||||
div.box.secondary {
|
||||
background-color: var(--INTERNAL-SECONDARY-color);
|
||||
}
|
||||
|
||||
div.box.secondary > .box-content {
|
||||
color: var(--INTERNAL-MAIN-TEXT-color);
|
||||
--VARIABLE-BOX-color: var(--INTERNAL-SECONDARY-color);
|
||||
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
|
||||
}
|
||||
|
||||
div.box.blue {
|
||||
background-color: var(--INTERNAL-BOX-BLUE-color);
|
||||
}
|
||||
|
||||
div.box.blue > .box-content {
|
||||
color: var(--INTERNAL-BOX-BLUE-TEXT-color);
|
||||
--VARIABLE-BOX-color: var(--INTERNAL-BOX-BLUE-color);
|
||||
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-BLUE-TEXT-color);
|
||||
}
|
||||
|
||||
div.box.green {
|
||||
background-color: var(--INTERNAL-BOX-GREEN-color);
|
||||
}
|
||||
|
||||
div.box.green > .box-content {
|
||||
color: var(--INTERNAL-BOX-GREEN-TEXT-color);
|
||||
--VARIABLE-BOX-color: var(--INTERNAL-BOX-GREEN-color);
|
||||
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREEN-TEXT-color);
|
||||
}
|
||||
|
||||
div.box.grey {
|
||||
background-color: var(--INTERNAL-BOX-GREY-color);
|
||||
}
|
||||
|
||||
div.box.grey > .box-content {
|
||||
color: var(--INTERNAL-BOX-GREY-TEXT-color);
|
||||
--VARIABLE-BOX-color: var(--INTERNAL-BOX-GREY-color);
|
||||
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREY-TEXT-color);
|
||||
}
|
||||
|
||||
div.box.orange {
|
||||
background-color: var(--INTERNAL-BOX-ORANGE-color);
|
||||
}
|
||||
|
||||
div.box.orange > .box-content {
|
||||
color: var(--INTERNAL-BOX-ORANGE-TEXT-color);
|
||||
--VARIABLE-BOX-color: var(--INTERNAL-BOX-ORANGE-color);
|
||||
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-WARNING-ORANGE-color);
|
||||
}
|
||||
|
||||
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 {
|
||||
color: var(--INTERNAL-BOX-RED-TEXT-color);
|
||||
}
|
||||
|
||||
div.box.transparent > .box-label {
|
||||
color: var(--INTERNAL-MAIN-TITLES-TEXT-color);
|
||||
}
|
||||
|
||||
div.box.transparent > .box-content {
|
||||
color: var(--INTERNAL-MAIN-TEXT-color);
|
||||
div.box.transparent {
|
||||
--VARIABLE-BOX-color: transparent;
|
||||
--VARIABLE-BOX-CAPTION-color: var(--INTERNAL-MAIN-TITLES-TEXT-color);
|
||||
--VARIABLE-BOX-BG-color: transparent;
|
||||
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
|
||||
}
|
||||
|
||||
code,
|
||||
|
|
Loading…
Reference in a new issue