backy/docs/themes/hugo-theme-relearn/static/css/variant.css

436 lines
11 KiB
CSS
Raw Normal View History

@import "variant-internal.css";
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);
}
.footerVisitedLinks > *,
a,
.anchor,
#toc-menu,
#body a.highlight:after,
#searchresults .autocomplete-suggestion {
color: var(--INTERNAL-MAIN-LINK-color);
}
a:hover,
.anchor:hover,
#toc-menu:hover,
#body a.highlight:hover:after {
color: var(--INTERNAL-MAIN-LINK-HOVER-color);
}
#sidebar {
background: var(--INTERNAL-MENU-SECTIONS-BG-color);
}
#header-wrapper {
background-color: var(--INTERNAL-MENU-HEADER-BG-color);
border-color: var(--INTERNAL-MENU-HEADER-BORDER-color);
color: var(--INTERNAL-MENU-SEARCH-color);
}
.searchbox {
border-color: var(--INTERNAL-MENU-SEARCH-BORDER-color);
background-color: var(--INTERNAL-MENU-SEARCH-BG-color);
}
#sidebar .searchbox > :first-child,
#sidebar .searchbox button,
.searchbox span {
color: var(--INTERNAL-MENU-SEARCH-color);
}
.searchbox input::-webkit-input-placeholder,
.searchbox input::placeholder {
color: var(--INTERNAL-MENU-SEARCH-color);
}
#sidebar .collapsible-menu label,
#sidebar .select-container,
#sidebar a,
#sidebar button {
color: var(--INTERNAL-MENU-SECTIONS-LINK-color);
}
#sidebar select:hover,
#sidebar .collapsible-menu li:not(.active) > label:hover,
#sidebar .select-container:hover,
#sidebar a:hover,
#sidebar button:hover {
color: var(--INTERNAL-MENU-SECTIONS-LINK-HOVER-color);
}
#sidebar ul.enlarge > li.parent,
#sidebar ul.enlarge > li.active {
background-color: var(--INTERNAL-MENU-SECTIONS-ACTIVE-BG-color);
}
#sidebar li.active > label,
#sidebar li.active > a {
color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color);
}
#sidebar li.active > a {
background-color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-BG-color);
}
#sidebar ul li > a .read-icon {
color: var(--INTERNAL-MENU-VISITED-color);
}
#sidebar .nav-title {
color: var(--INTERNAL-MENU-SECTIONS-LINK-HOVER-color);
}
#sidebar hr {
border-color: var(--INTERNAL-MENU-SECTION-HR-color);
}
#footer {
color: var(--INTERNAL-MENU-SECTIONS-LINK-color);
}
mark {
background-color: var(--INTERNAL-ACCENT-color);
}
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.info {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-INFO-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-INFO-TEXT-color);
}
.cstyle.warning {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-WARNING-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-WARNING-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.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.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.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,
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 {
background-color: var(--INTERNAL-CODE-BLOCK-BG-color);
border-color: var(--INTERNAL-CODE-BLOCK-BORDER-color);
color: var(--INTERNAL-CODE-BLOCK-color);
}
table {
background-color: var(--INTERNAL-MAIN-BG-color);
}
.lightbox img{
background-color: var(--INTERNAL-MAIN-BG-color);
}
#topbar {
background-color: var(--INTERNAL-MAIN-BG-color);
}
#body a[aria-disabled="true"],
#searchresults .autocomplete-suggestion > .context {
color: var(--INTERNAL-MAIN-TEXT-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);
}
pre .copy-to-clipboard-button {
border-color: var(--INTERNAL-CODE-BLOCK-BORDER-color);
color: var(--INTERNAL-MAIN-LINK-color);
}
pre .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 > label {
color: var(--INTERNAL-MAIN-LINK-color);
}
.expand > label:hover {
color: var(--INTERNAL-MAIN-LINK-HOVER-color);
}
.expand > label:after {
background-color: var(--INTERNAL-MAIN-LINK-HOVER-color);
}
#homelinks {
background-color: var(--INTERNAL-MENU-HEADER-BORDER-color);
border-color: var(--INTERNAL-MENU-HEADER-BORDER-color);
}
#homelinks a {
color: var(--INTERNAL-MENU-HOME-LINK-color);
}
#homelinks a:hover {
color: var(--INTERNAL-MENU-HOME-LINK-HOVER-color);
}
#body a.highlight:after {
background-color: var(--INTERNAL-MAIN-LINK-color);
}
#body a.highlight:hover:after {
background-color: var(--INTERNAL-MAIN-LINK-HOVER-color);
}
.progress {
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 > *:hover,
.btn > *:focus,
.btn > *:active {
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.transparent:hover,
.btn.cstyle.transparent:focus,
.btn.cstyle.transparent: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);
}
#body .tags a.tag-link {
background-color: var(--INTERNAL-TAG-BG-color);
color: var(--INTERNAL-MAIN-BG-color);
}
#body .tags a.tag-link:before {
border-right-color: var(--INTERNAL-TAG-BG-color);
}
#body .tags a.tag-link:after {
background-color: var(--INTERNAL-MAIN-BG-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);
}
#body .tab-nav-button {
color: var(--INTERNAL-MAIN-TEXT-color);
}
#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);
}
#body .tab-nav-button.active > *{
background-color: var(--VARIABLE-BOX-BG-color);
}
#body .tab-nav-button > * > *{
border-color: var(--VARIABLE-BOX-color);
}
#body .tab-content{
background-color: var(--VARIABLE-BOX-color);
border-color: var(--VARIABLE-BOX-color);
}
#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;
}
#body .tab-panel-style.cstyle.initial.tab-nav-button.active,
#body .tab-panel-style.cstyle.default.tab-nav-button.active,
#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);
}
#body .tab-panel-style.cstyle.code.tab-nav-button:not(.active){
--VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color);
}
#body .tab-panel-style.cstyle.initial.tab-content,
#body .tab-panel-style.cstyle.default.tab-content,
#body .tab-panel-style.cstyle.transparent.tab-content{
background-color: var(--VARIABLE-BOX-BG-color);
}