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

theme: merge variant.css in theme.css #922

Browse source 
- for improving maintainability
- preparing for font switch
This commit is contained in:
Sören Weber 2024-10-03 12:43:53 +02:00
parent 157dd99577
commit 14d290cf63
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
4 changed files with 377 additions and 547 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

384
static/css/theme.css → assets/css/theme.css
View file

@ -107,13 +107,17 @@ need a way to calculate them ourself */
}
html {
color-scheme: only var(--INTERNAL-BROWSER-theme);
height: 100%;
width: 100%;
}
body {
background-color: var(--INTERNAL-MAIN-BG-color);
color: var(--INTERNAL-MAIN-TEXT-color);
display: flex;
flex-direction: row-reverse; /* to allow body to have initial focus for PS in some browsers and better SEO and a11y */
font-family: var(--INTERNAL-MAIN-font);
font-size: 1.015625rem;
font-weight: 300;
height: 100%;
@ -143,11 +147,26 @@ dd {
list-style: circle;
}
a,
.topbar-button button{
color: var(--INTERNAL-MAIN-LINK-color);
}
a:hover,
a:active,
a:focus,
.topbar-button button:hover,
.topbar-button button:active,
.topbar-button button:focus{
color: var(--INTERNAL-MAIN-LINK-HOVER-color);
}
.default-animation{
transition: all 0.35s ease;
}
#R-sidebar {
background: var(--INTERNAL-MENU-SECTIONS-BG-color);
display: flex;
flex-basis: auto;
flex-direction: column;
@ -169,6 +188,8 @@ dd {
}
#R-header-wrapper {
background-color: var(--INTERNAL-MENU-HEADER-BG-color);
color: var(--INTERNAL-MENU-SEARCH-color);
text-align: center;
padding: 1rem;
position: relative;
@ -183,6 +204,8 @@ dd {
}
.searchbox {
background-color: var(--INTERNAL-MENU-SEARCH-BG-color);
border-color: var(--INTERNAL-MENU-SEARCH-BORDER-color);
border-radius: 4px;
border-style: solid;
border-width: 1px;
@ -216,6 +239,7 @@ dd {
#R-sidebar .searchbox > :first-child,
#R-sidebar .searchbox > :last-child{
color: var(--INTERNAL-MENU-SEARCH-color);
opacity: .65;
}
@ -237,7 +261,11 @@ dd {
font-weight: 300;
}
.searchbox input::-webkit-input-placeholder{
color: var(--INTERNAL-MENU-SEARCH-color);
}
.searchbox input::placeholder {
color: var(--INTERNAL-MENU-SEARCH-color);
opacity: .45;
}
@ -266,6 +294,10 @@ dd {
margin: 0 auto;
}
#R-footer {
color: var(--INTERNAL-MENU-SECTIONS-LINK-color);
}
#R-footer > hr:first-child {
margin-top: 0;
}
@ -299,11 +331,15 @@ dd {
position: absolute;
}
#R-sidebar ul li > a .read-icon {
color: var(--INTERNAL-MENU-VISITED-color);
}
#R-sidebar ul li.visited > a .read-icon {
display: inline;
}
#R-sidebar .nav-title {
color: var(--INTERNAL-MENU-SECTIONS-LINK-color);
font-size: 2rem;
font-weight: 200;
letter-spacing: -.02175em;
@ -319,12 +355,15 @@ dd {
}
#R-content-wrapper hr {
border-color: var(--INTERNAL-MENU-SECTION-SEPARATOR-color);
border-bottom-style: solid;
border-bottom-width: 1px;
margin: 1.5rem 1rem 1rem 1rem;
}
article .R-taxonomy.tags {
--VARIABLE-TAGS-color: var(--INTERNAL-MAIN-BG-color);
--VARIABLE-TAGS-BG-color: var(--VARIABLE-BOX-color);
margin-left: 1rem;
margin-top: 1rem;
}
@ -334,9 +373,11 @@ article .R-taxonomy.tags ul > li ~ li:before {
}
article .R-taxonomy.tags a.term-link {
background-color: var(--VARIABLE-TAGS-BG-color);
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
box-shadow: 0 1px 2px rgba( 0, 0, 0, .2 );
color: var(--VARIABLE-TAGS-color);
display: inline-block;
font-size: 0.8em;
font-weight: 400;
@ -349,6 +390,7 @@ article .R-taxonomy.tags a.term-link {
article .R-taxonomy.tags a.term-link:before {
border-color: transparent;
border-right-color: var(--VARIABLE-TAGS-BG-color);
border-style: solid;
border-width: 1em 1em 1em 0;
content: "";
@ -360,6 +402,7 @@ article .R-taxonomy.tags a.term-link:before {
}
article .R-taxonomy.tags a.term-link:after {
background-color: var(--VARIABLE-TAGS-color);
border-radius: 100%;
content: "";
left: 1px;
@ -578,6 +621,12 @@ body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow p {
mark {
background: transparent;
background-image: linear-gradient(
to right,
color-mix( in srgb, var(--INTERNAL-ACCENT-color) 20%, transparent ),
color-mix( in srgb, var(--INTERNAL-ACCENT-color) 90%, transparent ) 4%,
color-mix( in srgb, var(--INTERNAL-ACCENT-color) 40%, transparent )
);
border-radius: 0.8em 0.3rem;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
@ -595,8 +644,10 @@ kbd {
border-style: solid;
border-width: 1px;
box-shadow: 0 .0625rem 0 .0625rem rgba( 134, 134, 134, .5 );
color: var(--INTERNAL-TEXT-color);
-webkit-print-color-adjust: exact;
color-adjust: exact;
font-family: var(--INTERNAL-CODE-font);
font-size: 0.75rem;
line-height: 1;
min-width: 0.75rem;
@ -607,6 +658,8 @@ kbd {
}
h1 {
color: var(--INTERNAL-MAIN-TITLES-H1-color);
font-family: var(--INTERNAL-MAIN-TITLES-H1-font);
font-size: 3.25rem;
font-weight: 200;
margin: 0.85rem 0 1rem 0;
@ -634,26 +687,36 @@ body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow h1 {
}
h2 {
color: var(--INTERNAL-MAIN-TITLES-H2-color);
font-family: var(--INTERNAL-MAIN-TITLES-H2-font);
font-size: 2.2rem;
font-weight: 500;
}
h3, .article-subheading {
color: var(--INTERNAL-MAIN-TITLES-H3-color);
font-family: var(--INTERNAL-MAIN-TITLES-H3-font);
font-size: 1.8rem;
font-weight: 500;
}
h4 {
color: var(--INTERNAL-MAIN-TITLES-H4-color);
font-family: var(--INTERNAL-MAIN-TITLES-H4-font);
font-size: 1.85rem;
font-weight: 300;
}
h5 {
color: var(--INTERNAL-MAIN-TITLES-H5-color);
font-family: var(--INTERNAL-MAIN-TITLES-H5-font);
font-size: 1.6rem;
font-weight: 300;
}
h6 {
color: var(--INTERNAL-MAIN-TITLES-H6-color);
font-family: var(--INTERNAL-MAIN-TITLES-H6-font);
font-size: 1.3rem;
font-weight: 300;
}
@ -693,22 +756,16 @@ blockquote cite {
/* colored boxes */
.cstyle {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-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;
}
div.box {
background-color: var(--VARIABLE-BOX-color);
border-color: var(--VARIABLE-BOX-color);
margin: 1.5rem 0;
border-style: solid;
border-width: 1px;
}
div.box > .box-label {
color: var(--VARIABLE-BOX-CAPTION-color);
font-weight: 500;
margin-left: .6rem;
margin-right: .6rem;
@ -716,6 +773,8 @@ div.box > .box-label {
}
div.box > .box-content {
background-color: var(--VARIABLE-BOX-BG-color);
color: var(--VARIABLE-BOX-TEXT-color);
padding-top: 1rem;
padding-bottom: 1rem;
padding-left: 1rem;
@ -824,14 +883,18 @@ code,
kbd,
pre:not(.mermaid),
samp {
font-family: var(--INTERNAL-CODE-font);
font-size: .934375rem;
vertical-align: baseline;
}
code {
background-color: var(--INTERNAL-CODE-INLINE-BG-color);
border-color: var(--INTERNAL-CODE-INLINE-BORDER-color);
border-radius: 2px;
border-style: solid;
border-width: 1px;
color: var(--INTERNAL-CODE-INLINE-color);
-webkit-print-color-adjust: economy;
color-adjust: economy;
padding-left: 2px;
@ -851,9 +914,12 @@ code.copy-to-clipboard-code {
}
pre:not(.mermaid) {
background-color: var(--INTERNAL-CODE-BLOCK-BG-color);
border-color: var(--INTERNAL-CODE-BLOCK-BORDER-color);
border-radius: 2px;
border-style: solid;
border-width: 1px;
color: var(--INTERNAL-CODE-BLOCK-color);
-webkit-print-color-adjust: economy;
color-adjust: economy;
line-height: 1.15;
@ -884,6 +950,8 @@ div.highlight{
}
/* we may have special treatment if highlight shortcode was used in table lineno mode */
div.highlight > div{
background-color: var(--INTERNAL-CODE-BLOCK-BG-color);
border-color: var(--INTERNAL-CODE-BLOCK-BORDER-color);
border-style: solid;
border-width: 1px;
}
@ -955,6 +1023,7 @@ hr {
}
table {
background-color: var(--INTERNAL-MAIN-BG-color);
border: 1px solid rgba( 134, 134, 134, .333 );
margin-bottom: 1rem;
margin-top: 1rem;
@ -1166,11 +1235,17 @@ tbody > tr:nth-child(even) > td {
}
.topbar-sidebar-divider {
border-inline-start-color: var(--INTERNAL-MENU-TOPBAR-SEPARATOR-color);
border-inline-start-style: solid;
border-inline-start-width: 1px;
margin-inline-end: -1px;
width: 1px;
}
@media screen and (max-width: 47.999rem) {
.topbar-sidebar-divider {
border-inline-start-color: transparent;
}
}
.topbar-sidebar-divider::after {
content: "\00a0";
}
@ -1239,6 +1314,7 @@ html[dir="rtl"] .topbar-button-next i {
}
#R-body a[aria-disabled="true"] {
color: var(--INTERNAL-MAIN-TEXT-color);
pointer-events: none;
text-decoration: none;
}
@ -1300,16 +1376,24 @@ html[dir="rtl"] .topbar-button-next i {
}
.copy-to-clipboard-button {
background-color: var(--INTERNAL-CODE-INLINE-BG-color);
border-color: var(--INTERNAL-CODE-INLINE-BORDER-color);
border-start-start-radius: 0;
border-start-end-radius: 2px;
border-end-end-radius: 2px;
border-end-start-radius: 0;
border-style: solid;
border-width: 1px;
color: var(--INTERNAL-CODE-INLINE-color);
cursor: pointer;
font-family: var(--INTERNAL-CODE-font);
font-size: .934375rem;
line-height: 1.15;
}
.copy-to-clipboard-button:hover {
background-color: var(--INTERNAL-CODE-INLINE-color);
color: var(--INTERNAL-CODE-INLINE-BG-color);
}
span > .copy-to-clipboard-button {
border-start-start-radius: 0;
@ -1350,14 +1434,23 @@ div.highlight > div table + .copy-to-clipboard-button,
div.highlight pre:not(.mermaid) + .copy-to-clipboard-button,
pre:not(.mermaid) > .copy-to-clipboard-button {
background-color: rgba( 160, 160, 160, .2 );
border-color: transparent;
border-radius: 2px;
border-style: solid;
border-width: 1px;
right: 4px;
color: var(--INTERNAL-MAIN-LINK-color);
padding: 5px 3px;
position: absolute;
right: 4px;
top: 4px;
}
div.highlight > div table + .copy-to-clipboard-button:hover,
div.highlight pre:not(.mermaid) + .copy-to-clipboard-button:hover,
pre:not(.mermaid) .copy-to-clipboard-button:hover {
background-color: var(--INTERNAL-MAIN-LINK-color);
border-color: var(--INTERNAL-MAIN-LINK-color);
color: var(--INTERNAL-CODE-BLOCK-BG-color);
}
.disableInlineCopyToClipboard span > code.copy-to-clipboard-code + span.copy-to-clipboard-button {
display: none;
@ -1370,12 +1463,22 @@ pre:not(.mermaid) > .copy-to-clipboard-button {
}
#R-homelinks {
background-color: var(--INTERNAL-MENU-HEADER-BORDER-color);
padding: 0;
}
#R-homelinks a {
color: var(--INTERNAL-MENU-HOME-LINK-color);
}
#R-homelinks a:hover {
color: var(--INTERNAL-MENU-HOME-LINK-HOVER-color);
}
#R-homelinks ul {
margin: .5rem 0;
}
#R-homelinks hr {
border-color: var(--INTERNAL-MENU-HEADER-SEPARATOR-color);
border-bottom-style: solid;
border-bottom-width: 1px;
margin: 0 1rem 3px 1rem;
@ -1404,12 +1507,23 @@ option {
inset-inline-start: 0;
position: absolute;
}
.expand:not(.box) > label {
color: var(--INTERNAL-MAIN-LINK-color);
}
.expand > input:active + label,
.expand > input:focus + label,
.expand > label:hover {
text-decoration: underline;
}
.expand:not(.box) > label:hover,
.expand:not(.box) > label:active,
.expand:not(.box) > label:focus,
.expand:not(.box) > input:hover + label,
.expand:not(.box) > input:active + label,
.expand:not(.box) > input:focus + label{
color: var(--INTERNAL-MAIN-LINK-HOVER-color);
}
.expand > label > .expander-icon {
font-size: .8rem;
@ -1501,9 +1615,11 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
.svg-reset-button {
background-color: rgba( 160, 160, 160, .2 );
border-color: transparent;
border-radius: 2px;
border-style: solid;
border-width: 1px;
color: var(--INTERNAL-MAIN-LINK-color);
cursor: pointer;
display: none;
font-size: .934375rem;
@ -1513,6 +1629,11 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
right: 4px;
top: 4px;
}
.svg-reset-button:hover {
background-color: var(--INTERNAL-MAIN-LINK-color);
border-color: var(--INTERNAL-MAIN-LINK-color);
color: var(--INTERNAL-MAIN-BG-color);
}
.mermaid:hover .svg-reset-button.zoomed {
display: block;
}
@ -1573,6 +1694,7 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
}
.topbar-content {
background-color: var(--INTERNAL-MAIN-BG-color);
border: 0 solid rgba( 134, 134, 134, .166 );
box-shadow: 1px 2px 5px 1px rgba( 134, 134, 134, .2 );
height: 0;
@ -1640,6 +1762,7 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
}
.btn {
background-color: var(--VARIABLE-BOX-color);
border-radius: 4px;
display: inline-block;
font-size: .9rem;
@ -1669,9 +1792,11 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
.btn > * {
background-color: transparent;
border-color: var(--VARIABLE-BOX-color);
border-radius: 4px;
border-style: solid;
border-width: 1px;
color: var(--VARIABLE-BOX-CAPTION-color);
padding: 6px 12px;
text-align: center;
touch-action: manipulation;
@ -1696,11 +1821,32 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
.btn.interactive > *:hover,
.btn.interactive > *:active,
.btn.interactive > *:focus {
background-color: var(--VARIABLE-BOX-BG-color);
color: var(--VARIABLE-BOX-TEXT-color);
text-decoration: none;
}
.btn.cstyle.transparent {
--VARIABLE-BOX-BG-color: var(--INTERNAL-BOX-BG-color);
}
.btn.interactive.cstyle.transparent:hover,
.btn.interactive.cstyle.transparent:focus,
.btn.interactive.cstyle.transparent:active,
.btn.interactive.cstyle.transparent:has(a:hover),
.btn.interactive.cstyle.transparent:has(a:focus),
.btn.interactive.cstyle.transparent:has(a:active) {
background-color: var(--INTERNAL-BOX-NEUTRAL-color);
}
.btn.cstyle.transparent > * {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color);
--VARIABLE-BOX-TEXT-color: var(--VARIABLE-BOX-CAPTION-color);
}
/* anchors */
.anchor {
color: var(--INTERNAL-MAIN-LINK-color);
cursor: pointer;
font-size: .5em;
margin-inline-start: .66em;
@ -1714,6 +1860,11 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
visibility: visible;
}
}
.anchor:hover,
.anchor:active,
.anchor:focus{
color: var(--INTERNAL-MAIN-LINK-HOVER-color);
}
h2:hover .anchor,
h3:hover .anchor,
@ -1964,7 +2115,12 @@ span.math:has(> mjx-container[display]) {
height: 0;
}
#R-searchresults .autocomplete-suggestion {
color: var(--INTERNAL-MAIN-LINK-color);
}
#R-searchresults .autocomplete-suggestion > .breadcrumbs {
color: var(--INTERNAL-PRIMARY-color);
font-size: .9rem;
font-weight: 400;
margin-top: .167em;
@ -1973,6 +2129,7 @@ span.math:has(> mjx-container[display]) {
}
#R-searchresults .autocomplete-suggestion > .context {
color: var(--INTERNAL-MAIN-TEXT-color);
font-size: 1rem;
font-weight: 300;
margin-top: .66em;
@ -1989,6 +2146,7 @@ span.math:has(> mjx-container[display]) {
}
.badge > * {
border-color: var(--VARIABLE-BOX-TEXT-color);
border-radius: 3px;
border-style: solid;
border-width: 1px;
@ -2011,11 +2169,19 @@ span.math:has(> mjx-container[display]) {
border-end-start-radius: 0;
}
.badge > .badge-content {
background-color: var(--VARIABLE-BOX-color);
color: var(--VARIABLE-BOX-CAPTION-color);
}
.badge-content:after {
/* avoid breakage if no content is given */
content: "\200b";
}
.badge.cstyle.transparent{
--VARIABLE-BOX-BG-color: var(--INTERNAL-BOX-BG-color);
}
/* task list and its checkboxes */
article ul > li:has(> input[type="checkbox"]) {
list-style: none;
@ -2030,9 +2196,11 @@ article ul > li:has(> input[type="checkbox"])::before {
article ul > li > input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
background-color: var(--INTERNAL-MAIN-BG-color); /* box background */
/* For iOS < 15 */
border: 0.15em solid currentColor;
border-radius: 0.15em;
color: var(--INTERNAL-MAIN-TEXT-color);
display: inline-grid;
font: inherit;
height: 1.15em;
@ -2080,6 +2248,7 @@ article ul > li > input[type="checkbox"]:checked::before {
}
.lightbox-back img {
background-color: var(--INTERNAL-MAIN-BG-color);
max-height: 95%;
max-width: 95%;
overflow: auto;
@ -2088,6 +2257,29 @@ article ul > li > input[type="checkbox"]:checked::before {
/* basic menu list styles (non-collapsible) */
#R-sidebar select,
#R-sidebar .collapsible-menu label,
#R-sidebar .menu-control,
#R-sidebar :is( a, span ) {
color: var(--INTERNAL-MENU-SECTIONS-LINK-color);
}
#R-sidebar select:hover,
#R-sidebar .collapsible-menu li:not(.active) > label:hover,
#R-sidebar .menu-control:hover,
#R-sidebar a:hover {
color: var(--INTERNAL-MENU-SECTIONS-LINK-HOVER-color);
}
#R-sidebar li.active > label,
#R-sidebar li.active > a {
color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color);
}
#R-sidebar li.active > a {
background-color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-BG-color);
}
#R-sidebar ul > li > :is( a, span ) {
display: block;
position: relative;
@ -2111,6 +2303,11 @@ article ul > li > input[type="checkbox"]:checked::before {
padding-top: 0;
}
#R-sidebar ul.enlarge > li.parent,
#R-sidebar ul.enlarge > li.active {
background-color: var(--INTERNAL-MENU-SECTIONS-ACTIVE-BG-color);
}
#R-sidebar ul.enlarge > li > :is( a, span ) {
font-size: 1.1rem;
line-height: 2rem;
@ -2269,6 +2466,7 @@ html[dir="rtl"] #R-sidebar ul.collapsible-menu > li > label > i.fa-chevron-right
appearance: none;
background-color: transparent;
border: 1px solid transparent;
color: var(--INTERNAL-MAIN-LINK-color);
display: block;
font-size: .9rem;
font-weight: 300;
@ -2277,11 +2475,20 @@ html[dir="rtl"] #R-sidebar ul.collapsible-menu > li > label > i.fa-chevron-right
}
#R-body .tab-nav-button.active{
background-color: var(--VARIABLE-BOX-color);
border-bottom-color: var(--VARIABLE-BOX-BG-color);
border-radius: 2px 2px 0 0;
color: var(--VARIABLE-BOX-TEXT-color);
cursor: default;
}
#R-body .tab-nav-button:not(.active):hover,
#R-body .tab-nav-button:not(.active):active,
#R-body .tab-nav-button:not(.active):focus {
color: var(--INTERNAL-MAIN-LINK-HOVER-color);
}
#R-body .tab-nav-button > .tab-nav-text{
border-bottom-color: var(--VARIABLE-BOX-color);
border-bottom-style: solid;
border-bottom-width: .15rem;
display: block;
@ -2289,6 +2496,7 @@ html[dir="rtl"] #R-sidebar ul.collapsible-menu > li > label > i.fa-chevron-right
}
/* https://stackoverflow.com/a/46452396 */
#R-body .tab-nav-button.active > .tab-nav-text{
background-color: var(--VARIABLE-BOX-BG-color);
border-bottom-color: transparent;
border-radius: 1px 1px 0 0;
text-shadow: -0.06ex 0 0 currentColor, 0.06ex 0 0 currentColor;
@ -2299,8 +2507,15 @@ html[dir="rtl"] #R-sidebar ul.collapsible-menu > li > label > i.fa-chevron-right
-webkit-text-stroke-width: 0.04ex;
}
}
#R-body .tab-nav-button:not(.active):hover > .tab-nav-text,
#R-body .tab-nav-button:not(.active):active > .tab-nav-text,
#R-body .tab-nav-button:not(.active):focus > .tab-nav-text {
border-bottom-color: var(--INTERNAL-MAIN-LINK-HOVER-color);
}
#R-body .tab-content{
background-color: var(--VARIABLE-BOX-color);
border-color: var(--VARIABLE-BOX-color);
border-style: solid;
border-width: 1px;
display: none;
@ -2315,6 +2530,8 @@ html[dir="rtl"] #R-sidebar ul.collapsible-menu > li > label > i.fa-chevron-right
}
#R-body .tab-content-text{
background-color: var(--VARIABLE-BOX-BG-color);
color: var(--VARIABLE-BOX-TEXT-color);
padding: 1rem;
}
@ -2333,9 +2550,40 @@ html[dir="rtl"] #R-sidebar ul.collapsible-menu > li > label > i.fa-chevron-right
border-width: 0;
}
.tab-panel-style.cstyle.initial,
.tab-panel-style.cstyle.default {
--VARIABLE-BOX-BG-color: var(--INTERNAL-MAIN-BG-color);
}
.tab-panel-style.cstyle.transparent {
--VARIABLE-BOX-color: rgba( 134, 134, 134, .4 );
--VARIABLE-BOX-BG-color: transparent;
}
#R-body .tab-panel-style.cstyle.initial.tab-nav-button.active,
#R-body .tab-panel-style.cstyle.default.tab-nav-button.active,
#R-body .tab-panel-style.cstyle.transparent.tab-nav-button.active{
background-color: var(--VARIABLE-BOX-BG-color);
border-left-color: var(--VARIABLE-BOX-color);
border-right-color: var(--VARIABLE-BOX-color);
border-top-color: var(--VARIABLE-BOX-color);
}
#R-body .tab-panel-style.cstyle.code.tab-nav-button:not(.active){
--VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color);
}
#R-body .tab-panel-style.cstyle.initial.tab-content,
#R-body .tab-panel-style.cstyle.default.tab-content,
#R-body .tab-panel-style.cstyle.transparent.tab-content{
background-color: var(--VARIABLE-BOX-BG-color);
}
/* bordering the menu and topbar */
#R-topbar {
background-color: var(--INTERNAL-MAIN-BG-color);
border-bottom-color: var(--INTERNAL-MAIN-TOPBAR-BORDER-color);
border-bottom-style: solid;
border-bottom-width: 1px;
}
@ -2344,6 +2592,7 @@ html[dir="rtl"] #R-sidebar ul.collapsible-menu > li > label > i.fa-chevron-right
border-bottom-color: transparent;
border-bottom-style: solid;
border-bottom-width: 1px;
border-inline-end-color: var(--INTERNAL-MENU-TOPBAR-BORDER-color);
border-inline-end-style: solid;
border-inline-end-width: 1px;
height: 3rem;
@ -2352,10 +2601,16 @@ html[dir="rtl"] #R-sidebar ul.collapsible-menu > li > label > i.fa-chevron-right
width: 100%;
z-index: 1;
}
@media screen and (max-width: 47.999rem) {
.mobile-support #R-header-topbar {
border-inline-end-color: var(--INTERNAL-MENU-BORDER-color);
}
}
#R-header-wrapper,
#R-homelinks,
#R-content-wrapper > * {
border-inline-end-color: var(--INTERNAL-MENU-BORDER-color);
border-inline-end-style: solid;
border-inline-end-width: 1px;
}
@ -2365,6 +2620,10 @@ html[dir="rtl"] #R-sidebar ul.collapsible-menu > li > label > i.fa-chevron-right
}
#R-sidebar ul.collapsible-menu li.active > a{
border-bottom-color: var(--INTERNAL-MENU-BORDER-color);
border-top-color: var(--INTERNAL-MENU-BORDER-color);
border-inline-start-color: var(--INTERNAL-MENU-BORDER-color);
border-inline-end-color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-BORDER-color);
border-style: solid;
border-width: 1px;
padding-bottom: calc( .25rem - var(--bpx1)*1px);
@ -2436,3 +2695,108 @@ body.notfound #shrug svg {
transform: scaleX(-1);
width: 15rem;
}
/* color style definitions */
.cstyle {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-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;
}
.cstyle.caution {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-CAUTION-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-CAUTION-TEXT-color);
}
.cstyle.important {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-IMPORTANT-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-IMPORTANT-TEXT-color);
}
.cstyle.info {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-INFO-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-INFO-TEXT-color);
}
.cstyle.note {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-NOTE-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NOTE-TEXT-color);
}
.cstyle.tip {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-TIP-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-TIP-TEXT-color);
}
.cstyle.warning {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-WARNING-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-WARNING-TEXT-color);
}
.cstyle.primary {
--VARIABLE-BOX-color: var(--INTERNAL-PRIMARY-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
}
.cstyle.secondary {
--VARIABLE-BOX-color: var(--INTERNAL-SECONDARY-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
}
.cstyle.accent {
--VARIABLE-BOX-color: var(--INTERNAL-ACCENT-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
}
.cstyle.blue {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-BLUE-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-BLUE-TEXT-color);
}
.cstyle.cyan {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-CYAN-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-CYAN-TEXT-color);
}
.cstyle.green {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-GREEN-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREEN-TEXT-color);
}
.cstyle.grey {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-GREY-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREY-TEXT-color);
}
.cstyle.magenta {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-MAGENTA-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-MAGENTA-TEXT-color);
}
.cstyle.orange {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-ORANGE-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-ORANGE-TEXT-color);
}
.cstyle.red {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-RED-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-RED-TEXT-color);
}
.cstyle.code {
--VARIABLE-BOX-color: var(--INTERNAL-CODE-BLOCK-BORDER-color);
--VARIABLE-BOX-CAPTION-color: var(--INTERNAL-CODE-BLOCK-color);
--VARIABLE-BOX-BG-color: var(--INTERNAL-CODE-BLOCK-BG-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-CODE-BLOCK-color);
}
.cstyle.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);
}

533
assets/css/variant.css
View file

@ -1,533 +0,0 @@
html {
color-scheme: only var(--INTERNAL-BROWSER-theme);
}
body {
background-color: var(--INTERNAL-MAIN-BG-color);
color: var(--INTERNAL-MAIN-TEXT-color);
font-family: var(--INTERNAL-MAIN-font);
}
a,
.anchor,
.topbar-button button,
#R-searchresults .autocomplete-suggestion {
color: var(--INTERNAL-MAIN-LINK-color);
}
a:hover,
a:active,
a:focus,
.anchor:hover,
.anchor:active,
.anchor:focus,
.topbar-button button:hover,
.topbar-button button:active,
.topbar-button button:focus{
color: var(--INTERNAL-MAIN-LINK-HOVER-color);
}
#R-sidebar {
background: var(--INTERNAL-MENU-SECTIONS-BG-color);
}
#R-header-wrapper {
background-color: var(--INTERNAL-MENU-HEADER-BG-color);
color: var(--INTERNAL-MENU-SEARCH-color);
}
.searchbox {
border-color: var(--INTERNAL-MENU-SEARCH-BORDER-color);
background-color: var(--INTERNAL-MENU-SEARCH-BG-color);
}
#R-sidebar .searchbox > :first-child,
#R-sidebar .searchbox > :last-child {
color: var(--INTERNAL-MENU-SEARCH-color);
}
.searchbox input::-webkit-input-placeholder,
.searchbox input::placeholder {
color: var(--INTERNAL-MENU-SEARCH-color);
}
#R-sidebar .collapsible-menu label,
#R-sidebar .menu-control,
#R-sidebar :is( a, span ) {
color: var(--INTERNAL-MENU-SECTIONS-LINK-color);
}
#R-sidebar select:hover,
#R-sidebar .collapsible-menu li:not(.active) > label:hover,
#R-sidebar .menu-control:hover,
#R-sidebar a:hover {
color: var(--INTERNAL-MENU-SECTIONS-LINK-HOVER-color);
}
#R-sidebar ul.enlarge > li.parent,
#R-sidebar ul.enlarge > li.active {
background-color: var(--INTERNAL-MENU-SECTIONS-ACTIVE-BG-color);
}
#R-sidebar li.active > label,
#R-sidebar li.active > a {
color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color);
}
#R-sidebar li.active > a {
background-color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-BG-color);
}
#R-sidebar ul li > a .read-icon {
color: var(--INTERNAL-MENU-VISITED-color);
}
#R-sidebar .nav-title {
color: var(--INTERNAL-MENU-SECTIONS-LINK-color);
}
#R-content-wrapper hr {
border-color: var(--INTERNAL-MENU-SECTION-SEPARATOR-color);
}
#R-footer {
color: var(--INTERNAL-MENU-SECTIONS-LINK-color);
}
mark {
background-image: linear-gradient(
to right,
color-mix( in srgb, var(--INTERNAL-ACCENT-color) 20%, transparent ),
color-mix( in srgb, var(--INTERNAL-ACCENT-color) 90%, transparent ) 4%,
color-mix( in srgb, var(--INTERNAL-ACCENT-color) 40%, transparent )
);
}
kbd {
color: var(--INTERNAL-TEXT-color);
font-family: var(--INTERNAL-CODE-font);
}
h1 {
color: var(--INTERNAL-MAIN-TITLES-H1-color);
font-family: var(--INTERNAL-MAIN-TITLES-H1-font);
}
h2 {
color: var(--INTERNAL-MAIN-TITLES-H2-color);
font-family: var(--INTERNAL-MAIN-TITLES-H2-font);
}
h3, .article-subheading {
color: var(--INTERNAL-MAIN-TITLES-H3-color);
font-family: var(--INTERNAL-MAIN-TITLES-H3-font);
}
h4 {
color: var(--INTERNAL-MAIN-TITLES-H4-color);
font-family: var(--INTERNAL-MAIN-TITLES-H4-font);
}
h5 {
color: var(--INTERNAL-MAIN-TITLES-H5-color);
font-family: var(--INTERNAL-MAIN-TITLES-H5-font);
}
h6 {
color: var(--INTERNAL-MAIN-TITLES-H6-color);
font-family: var(--INTERNAL-MAIN-TITLES-H6-font);
}
div.box {
background-color: var(--VARIABLE-BOX-color);
border-color: var(--VARIABLE-BOX-color);
}
div.box > .box-label {
color: var(--VARIABLE-BOX-CAPTION-color);
}
div.box > .box-content {
background-color: var(--VARIABLE-BOX-BG-color);
color: var(--VARIABLE-BOX-TEXT-color);
}
.cstyle.caution {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-CAUTION-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-CAUTION-TEXT-color);
}
.cstyle.important {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-IMPORTANT-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-IMPORTANT-TEXT-color);
}
.cstyle.info {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-INFO-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-INFO-TEXT-color);
}
.cstyle.note {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-NOTE-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NOTE-TEXT-color);
}
.cstyle.tip {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-TIP-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-TIP-TEXT-color);
}
.cstyle.warning {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-WARNING-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-WARNING-TEXT-color);
}
.cstyle.primary {
--VARIABLE-BOX-color: var(--INTERNAL-PRIMARY-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
}
.cstyle.secondary {
--VARIABLE-BOX-color: var(--INTERNAL-SECONDARY-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
}
.cstyle.accent {
--VARIABLE-BOX-color: var(--INTERNAL-ACCENT-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
}
.cstyle.blue {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-BLUE-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-BLUE-TEXT-color);
}
.cstyle.cyan {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-CYAN-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-CYAN-TEXT-color);
}
.cstyle.green {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-GREEN-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREEN-TEXT-color);
}
.cstyle.grey {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-GREY-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREY-TEXT-color);
}
.cstyle.magenta {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-MAGENTA-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-MAGENTA-TEXT-color);
}
.cstyle.orange {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-ORANGE-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-ORANGE-TEXT-color);
}
.cstyle.red {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-RED-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-RED-TEXT-color);
}
.cstyle.code {
--VARIABLE-BOX-color: var(--INTERNAL-CODE-BLOCK-BORDER-color);
--VARIABLE-BOX-CAPTION-color: var(--INTERNAL-CODE-BLOCK-color);
--VARIABLE-BOX-BG-color: var(--INTERNAL-CODE-BLOCK-BG-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-CODE-BLOCK-color);
}
.cstyle.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,
kbd,
pre:not(.mermaid),
samp {
font-family: var(--INTERNAL-CODE-font);
}
code {
background-color: var(--INTERNAL-CODE-INLINE-BG-color);
border-color: var(--INTERNAL-CODE-INLINE-BORDER-color);
color: var(--INTERNAL-CODE-INLINE-color);
}
pre:not(.mermaid) {
background-color: var(--INTERNAL-CODE-BLOCK-BG-color);
border-color: var(--INTERNAL-CODE-BLOCK-BORDER-color);
color: var(--INTERNAL-CODE-BLOCK-color);
}
div.highlight > div {
background-color: var(--INTERNAL-CODE-BLOCK-BG-color);
border-color: var(--INTERNAL-CODE-BLOCK-BORDER-color);
}
table {
background-color: var(--INTERNAL-MAIN-BG-color);
}
.lightbox-back img{
background-color: var(--INTERNAL-MAIN-BG-color);
}
#R-topbar {
background-color: var(--INTERNAL-MAIN-BG-color);
}
.topbar-sidebar-divider {
border-inline-start-color: var(--INTERNAL-MENU-TOPBAR-SEPARATOR-color);
}
@media screen and (max-width: 47.999rem) {
.topbar-sidebar-divider {
border-inline-start-color: transparent;
}
}
#R-body a[aria-disabled="true"],
#R-searchresults .autocomplete-suggestion > .context {
color: var(--INTERNAL-MAIN-TEXT-color);
}
#R-searchresults .autocomplete-suggestion > .breadcrumbs {
color: var(--INTERNAL-PRIMARY-color);
}
.copy-to-clipboard-button {
background-color: var(--INTERNAL-CODE-INLINE-BG-color);
border-color: var(--INTERNAL-CODE-INLINE-BORDER-color);
color: var(--INTERNAL-CODE-INLINE-color);
font-family: var(--INTERNAL-CODE-font);
}
.copy-to-clipboard-button:hover {
background-color: var(--INTERNAL-CODE-INLINE-color);
color: var(--INTERNAL-CODE-INLINE-BG-color);
}
div.highlight > div table + .copy-to-clipboard-button,
div.highlight pre:not(.mermaid) + .copy-to-clipboard-button,
pre:not(.mermaid) .copy-to-clipboard-button {
border-color: transparent;
color: var(--INTERNAL-MAIN-LINK-color);
}
div.highlight > div table + .copy-to-clipboard-button:hover,
div.highlight pre:not(.mermaid) + .copy-to-clipboard-button:hover,
pre:not(.mermaid) .copy-to-clipboard-button:hover {
background-color: var(--INTERNAL-MAIN-LINK-color);
border-color: var(--INTERNAL-MAIN-LINK-color);
color: var(--INTERNAL-CODE-BLOCK-BG-color);
}
.expand:not(.box) > label {
color: var(--INTERNAL-MAIN-LINK-color);
}
.expand:not(.box) > label:hover,
.expand:not(.box) > label:active,
.expand:not(.box) > label:focus,
.expand:not(.box) > input:hover + label,
.expand:not(.box) > input:active + label,
.expand:not(.box) > input:focus + label{
color: var(--INTERNAL-MAIN-LINK-HOVER-color);
}
.svg-reset-button {
border-color: transparent;
color: var(--INTERNAL-MAIN-LINK-color);
}
.svg-reset-button:hover {
background-color: var(--INTERNAL-MAIN-LINK-color);
border-color: var(--INTERNAL-MAIN-LINK-color);
color: var(--INTERNAL-MAIN-BG-color);
}
#R-homelinks {
background-color: var(--INTERNAL-MENU-HEADER-BORDER-color);
}
#R-homelinks a {
color: var(--INTERNAL-MENU-HOME-LINK-color);
}
#R-homelinks a:hover {
color: var(--INTERNAL-MENU-HOME-LINK-HOVER-color);
}
#R-homelinks hr {
border-color: var(--INTERNAL-MENU-HEADER-SEPARATOR-color);
}
.topbar-content {
background-color: var(--INTERNAL-MAIN-BG-color);
}
.btn {
background-color: var(--VARIABLE-BOX-color);
}
.btn > * {
border-color: var(--VARIABLE-BOX-color);
color: var(--VARIABLE-BOX-CAPTION-color);
}
.btn.interactive > *:hover,
.btn.interactive > *:active,
.btn.interactive > *:focus {
background-color: var(--VARIABLE-BOX-BG-color);
color: var(--VARIABLE-BOX-TEXT-color);
}
.btn.cstyle.transparent {
--VARIABLE-BOX-BG-color: var(--INTERNAL-BOX-BG-color);
}
.btn.cstyle.interactive.transparent:hover,
.btn.cstyle.interactive.transparent:focus,
.btn.cstyle.interactive.transparent:active,
.btn.cstyle.interactive.transparent:has(a:hover),
.btn.cstyle.interactive.transparent:has(a:focus),
.btn.cstyle.interactive.transparent:has(a:active) {
background-color: var(--INTERNAL-BOX-NEUTRAL-color);
}
.btn.cstyle.transparent > * {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color);
--VARIABLE-BOX-TEXT-color: var(--VARIABLE-BOX-CAPTION-color);
}
article .R-taxonomy.tags {
--VARIABLE-TAGS-color: var(--INTERNAL-MAIN-BG-color);
--VARIABLE-TAGS-BG-color: var(--VARIABLE-BOX-color);
}
article .R-taxonomy.tags a.term-link {
background-color: var(--VARIABLE-TAGS-BG-color);
color: var(--VARIABLE-TAGS-color);
}
article .R-taxonomy.tags a.term-link:before {
border-right-color: var(--VARIABLE-TAGS-BG-color);
}
article .R-taxonomy.tags a.term-link:after {
background-color: var(--VARIABLE-TAGS-color);
}
.badge > * {
border-color: var(--VARIABLE-BOX-TEXT-color);
}
.badge > .badge-content {
background-color: var(--VARIABLE-BOX-color);
color: var(--VARIABLE-BOX-CAPTION-color);
}
.badge.cstyle.transparent{
--VARIABLE-BOX-BG-color: var(--INTERNAL-BOX-BG-color);
}
article ul > li > input[type="checkbox"] {
background-color: var(--INTERNAL-MAIN-BG-color); /* box background */
color: var(--INTERNAL-MAIN-TEXT-color);
}
#R-body .tab-nav-button {
color: var(--INTERNAL-MAIN-LINK-color);
}
#R-body .tab-nav-button:not(.active):hover,
#R-body .tab-nav-button:not(.active):active,
#R-body .tab-nav-button:not(.active):focus {
color: var(--INTERNAL-MAIN-LINK-HOVER-color);
}
#R-body .tab-nav-button.active {
background-color: var(--VARIABLE-BOX-color);
border-bottom-color: var(--VARIABLE-BOX-BG-color);
color: var(--VARIABLE-BOX-TEXT-color);
}
#R-body .tab-nav-button > .tab-nav-text{
border-bottom-color: var(--VARIABLE-BOX-color);
}
#R-body .tab-nav-button.active > .tab-nav-text{
background-color: var(--VARIABLE-BOX-BG-color);
}
#R-body .tab-nav-button:not(.active):hover > .tab-nav-text,
#R-body .tab-nav-button:not(.active):active > .tab-nav-text,
#R-body .tab-nav-button:not(.active):focus > .tab-nav-text {
border-bottom-color: var(--INTERNAL-MAIN-LINK-HOVER-color);
}
#R-body .tab-content{
background-color: var(--VARIABLE-BOX-color);
border-color: var(--VARIABLE-BOX-color);
}
#R-body .tab-content-text{
background-color: var(--VARIABLE-BOX-BG-color);
color: var(--VARIABLE-BOX-TEXT-color);
}
.tab-panel-style.cstyle.initial,
.tab-panel-style.cstyle.default {
--VARIABLE-BOX-BG-color: var(--INTERNAL-MAIN-BG-color);
}
.tab-panel-style.cstyle.transparent {
--VARIABLE-BOX-color: rgba( 134, 134, 134, .4 );
--VARIABLE-BOX-BG-color: transparent;
}
#R-body .tab-panel-style.cstyle.initial.tab-nav-button.active,
#R-body .tab-panel-style.cstyle.default.tab-nav-button.active,
#R-body .tab-panel-style.cstyle.transparent.tab-nav-button.active{
background-color: var(--VARIABLE-BOX-BG-color);
border-left-color: var(--VARIABLE-BOX-color);
border-right-color: var(--VARIABLE-BOX-color);
border-top-color: var(--VARIABLE-BOX-color);
}
#R-body .tab-panel-style.cstyle.code.tab-nav-button:not(.active){
--VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color);
}
#R-body .tab-panel-style.cstyle.initial.tab-content,
#R-body .tab-panel-style.cstyle.default.tab-content,
#R-body .tab-panel-style.cstyle.transparent.tab-content{
background-color: var(--VARIABLE-BOX-BG-color);
}
#R-topbar {
border-bottom-color: var(--INTERNAL-MAIN-TOPBAR-BORDER-color);
}
#R-header-topbar {
border-inline-end-color: var(--INTERNAL-MENU-TOPBAR-BORDER-color);
}
@media screen and (max-width: 47.999rem) {
.mobile-support #R-header-topbar {
border-inline-end-color: var(--INTERNAL-MENU-BORDER-color);
}
}
#R-header-wrapper,
#R-homelinks,
#R-content-wrapper > * {
border-inline-end-color: var(--INTERNAL-MENU-BORDER-color);
}
#R-sidebar ul.collapsible-menu li.active > a{
border-bottom-color: var(--INTERNAL-MENU-BORDER-color);
border-top-color: var(--INTERNAL-MENU-BORDER-color);
border-inline-start-color: var(--INTERNAL-MENU-BORDER-color);
border-inline-end-color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-BORDER-color);
}

6
layouts/partials/_relearn/themeVariants.gotmpl
View file

@ -108,7 +108,7 @@ Chroma auto run:
{{- end }}
{{- /*
- Add box styles to variables and variants
- Add box styles to variables and theme
*/}}
{{- with resources.Get "css/variables.css" }}
{{- $variablescontent := print ":root {\n" .Content }}
@ -124,7 +124,7 @@ Chroma auto run:
{{- /* the following code causes Hugo to generate our css file - although it is in comments */}}<!-- {{ $cssres.RelPermalink }} -->
{{- end }}
{{- with resources.Get "css/variant.css" }}
{{- with resources.Get "css/theme.css" }}
{{- $assetBusting := partialCached "assetbusting.gotmpl" . }}
{{- $variantcontent := print `@import "variables.css` $assetBusting `";` "\n\n" .Content }}
{{- range $page.Site.Params.boxStyle }}
@ -137,7 +137,7 @@ Chroma auto run:
"\n}\n"
}}
{{- end }}
{{- $cssres := $variantcontent | resources.FromString "css/variant.css" }}
{{- $cssres := $variantcontent | resources.FromString "css/theme.css" }}
{{- /* the following code causes Hugo to generate our css file - although it is in comments */}}<!-- {{ $cssres.RelPermalink }} -->
{{- end }}

1
layouts/partials/stylesheet.html
View file

@ -17,7 +17,6 @@
<link href="{{(printf "css/theme-%s.css" .identifier) | relURL}}{{ $assetBusting }}" rel="stylesheet" id="R-variant-style">
<link href="{{(printf "css/chroma-%s.css" .chroma) | safeHTML | relURL}}{{ $assetBusting }}" rel="stylesheet" id="R-variant-chroma-style">
{{- end }}
<link href="{{"css/variant.css" | relURL}}{{ $assetBusting }}" rel="stylesheet">
<link href="{{"css/print.css" | relURL}}{{ $assetBusting }}" rel="stylesheet" media="print">
{{- $f := printf "/static/css/format-%s.css" $outputFormat }}
{{- if or (partialCached "_relearn/fileExists.gotmpl" $f $f) (resources.Get (printf "/css/format-%s.css" $outputFormat)) }}