hugo-theme-relearn/css/variant.css
2022-02-16 23:54:04 +00:00

273 lines
7.1 KiB
CSS

:root {
--INTERNAL-MAIN-TITLES-H1-color: var(--MAIN-TITLES-H1-color , var(--MAIN-TEXT-color));
--INTERNAL-MAIN-TITLES-H2-color: var(--MAIN-TITLES-H2-color , var(--MAIN-TITLES-TEXT-color));
--INTERNAL-MAIN-TITLES-H3-color: var(--MAIN-TITLES-H3-color , var(--INTERNAL-MAIN-TITLES-H2-color));
--INTERNAL-MAIN-TITLES-H4-color: var(--MAIN-TITLES-H4-color , var(--INTERNAL-MAIN-TITLES-H3-color));
--INTERNAL-MAIN-TITLES-H5-color: var(--MAIN-TITLES-H5-color , var(--INTERNAL-MAIN-TITLES-H4-color));
--INTERNAL-MAIN-TITLES-H6-color: var(--MAIN-TITLES-H6-color , var(--INTERNAL-MAIN-TITLES-H5-color));
--INTERNAL-BOX-TEXT-color: var(--BOX-TEXT-color);
--INTERNAL-BOX-BLUE-color: var(--BOX-BLUE-color, rgba( 48, 117, 229, 1 ));
--INTERNAL-BOX-GREEN-color: var(--BOX-GREEN-color, rgba( 42, 178, 24, 1 ));
--INTERNAL-BOX-GREY-color: var(--BOX-GREY-color, rgba( 128, 128, 128, 1 ));
--INTERNAL-BOX-ORANGE-color: var(--BOX-ORANGE-color, rgba( 237, 153, 9, 1 ));
--INTERNAL-BOX-RED-color: var(--BOX-RED-color, rgba( 224, 62, 62, 1 ));
--INTERNAL-BOX-INFO-color: var(--BOX-INFO-color, var(--INTERNAL-BOX-BLUE-color));
--INTERNAL-BOX-NEUTRAL-color: var(--BOX-NEUTRAL-color, var(--INTERNAL-BOX-GREY-color));
--INTERNAL-BOX-NOTE-color: var(--BOX-NOTE-color, var(--INTERNAL-BOX-ORANGE-color));
--INTERNAL-BOX-TIP-color: var(--BOX-TIP-color, var(--INTERNAL-BOX-GREEN-color));
--INTERNAL-BOX-WARNING-color: var(--BOX-WARNING-color, var(--INTERNAL-BOX-RED-color));
}
body {
background-color: var(--MAIN-BG-color, #ffffff);
color: var(--MAIN-TEXT-color);
}
a,
#toc-menu {
color: var(--MAIN-LINK-color);
}
a:hover,
#toc-menu:hover,
#body a.highlight:after {
color: var(--MAIN-LINK-HOVER-color);
}
#sidebar {
background: var(--MENU-SECTIONS-BG-color);
}
#header-wrapper {
background-color: var(--MENU-HEADER-BG-color);
color: var(--MENU-SEARCH-color, #efefef);
border-color: var(--MENU-HEADER-BORDER-color);
}
.searchbox {
border-color: var(--MENU-SEARCH-BOX-color);
background-color: var(--MENU-SEARCH-BG-color);
}
#sidebar a {
color: var(--MENU-SECTIONS-LINK-color);
}
#sidebar a:hover {
color: var(--MENU-SECTIONS-LINK-HOVER-color);
}
#sidebar ul.topics > li.parent,
#sidebar ul.topics > li.active {
background-color: var(--MENU-SECTIONS-ACTIVE-BG-color);
}
#sidebar ul li.active > a {
background-color: var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color);
color: var(--MENU-SECTION-ACTIVE-CATEGORY-color);
}
#sidebar ul li.visited > a .read-icon {
color: var(--MENU-VISITED-color);
}
#sidebar .nav-title {
color: var(--MENU-SECTIONS-LINK-HOVER-color);
}
#sidebar hr {
border-color: var(--MENU-SECTION-HR-color);
}
#footer {
color: var(--MENU-SECTIONS-LINK-color);
}
h1 {
color: var(--INTERNAL-MAIN-TITLES-H1-color);
}
h2 {
color: var(--INTERNAL-MAIN-TITLES-H2-color);
}
h3 {
color: var(--INTERNAL-MAIN-TITLES-H3-color);
}
h4 {
color: var(--INTERNAL-MAIN-TITLES-H4-color);
}
h5 {
color: var(--INTERNAL-MAIN-TITLES-H5-color);
}
h6 {
color: var(--INTERNAL-MAIN-TITLES-H6-color);
}
code {
background-color: var(--CODE-INLINE-BG-color, #fffae9);
border-color: var(--CODE-INLINE-BORDER-color, #f8e8c8);
color: var(--CODE-INLINE-color, #5e5e5e);
}
pre {
background-color: var(--CODE-BLOCK-BG-color, var(--MAIN-CODE-BG-color, #f8f8f8));
border-color: var(--CODE-BLOCK-BORDER-color, var(--MAIN-CODE-BG-color, #f8f8f8));
color: var(--CODE-BLOCK-color, var(--MAIN-CODE-color, #000000));
}
div.featherlight .featherlight-content{
background-color: var(--MAIN-BG-color, #ffffff);
}
#top-bar {
background-color: var(--MAIN-BG-color, #ffffff);
}
.copy-to-clipboard {
background-color: var(--CODE-INLINE-BG-color, #fffae9);
border-color: var(--CODE-INLINE-BORDER-color, #f8e8c8);
color: var(--CODE-INLINE-color, #5e5e5e);
}
.copy-to-clipboard:hover {
background-color: var(--CODE-INLINE-color, #5e5e5e);
color: var(--CODE-INLINE-BG-color, #fffae9);
}
pre .copy-to-clipboard {
border-color: var(--CODE-BLOCK-BORDER-color, #d8d8d8);
color: var(--MAIN-LINK-color, #486ac9);
}
pre .copy-to-clipboard:hover {
background-color: var(--MAIN-LINK-color, #486ac9);
border-color: var(--MAIN-LINK-color, #486ac9);
color: var(--CODE-BLOCK-BG-color, #f8f8f8);
}
#homelinks {
background-color: var(--MENU-HEADER-BORDER-color);
border-bottom-color: var(--MENU-HEADER-BORDER-color);
}
#homelinks a {
color: var(--MENU-HOME-LINK-color, #323232);
}
#homelinks a:hover {
color: var(--MENU-HOME-LINK-HOVER-color, var(--MENU-HOME-LINK-HOVERED-color, #808080));
}
#body a.highlight:after {
background-color: var(--MAIN-LINK-color);
}
.progress {
background-color: var(--MAIN-BG-color, #ffffff);
}
.btn-default {
color: var(--MAIN-TEXT-color) !important;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active {
color: var(--MAIN-BG-color, #ffffff) !important;
}
.anchor {
color: var(--MAIN-ANCHOR-color);
}
#body .tags a.tag-link {
background-color: var(--MENU-HEADER-BG-color);
color: var(--MAIN-BG-color, #ffffff);
}
#body .tags a.tag-link:before {
border-right-color: var(--MENU-HEADER-BG-color);
}
#body .tags a.tag-link:after {
background-color: var(--MAIN-BG-color, #ffffff);
}
#body .tab-nav-button.active {
background-color: var(--MAIN-BG-color, #ffffff) !important;
border-bottom-color: var(--MAIN-BG-color, #ffffff) !important;
}
div.box {
background-color: var(--INTERNAL-BOX-NEUTRAL-color);
color: var(--INTERNAL-BOX-NEUTRAL-color);
}
div.box > .box-label {
color: var(--BOX-CAPTION-color, rgba( 255, 255, 255, 1 ));
}
div.box > .box-content {
background-color: var(--BOX-BG-color, rgba( 255, 255, 255, .833 ));
color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-TEXT-color));
}
div.box.info {
background-color: var(--INTERNAL-BOX-INFO-color);
color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-INFO-color));
}
div.box.warning {
background-color: var(--INTERNAL-BOX-WARNING-color);
color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-WARNING-color));
}
div.box.note {
background-color: var(--INTERNAL-BOX-NOTE-color);
color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-NOTE-color));
}
div.box.tip {
background-color: var(--INTERNAL-BOX-TIP-color);
color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-TIP-color));
}
div.box.blue {
background-color: var(--INTERNAL-BOX-BLUE-color);
color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-BLUE-color));
}
div.box.green {
background-color: var(--INTERNAL-BOX-GREEN-color);
color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-GREEN-color));
}
div.box.grey {
background-color: var(--INTERNAL-BOX-GREY-color);
color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-GREY-color));
}
div.box.orange {
background-color: var(--INTERNAL-BOX-ORANGE-color);
color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-ORANGE-color));
}
div.box.red {
background-color: var(--INTERNAL-BOX-RED-color);
color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-RED-color));
}
div.box.transparent {
color: var(--MAIN-TEXT-color);
}
div.box.transparent > .box-label {
color: var(--MAIN-TITLES-TEXT-color);
}