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

theme: move default colors to own stylesheet

Browse source 
and only apply it to IE
This will help to simplify further develpment by relying only to variant.css for evergreen browsers
This commit is contained in:
Sören Weber 2022-05-28 22:58:55 +02:00
parent daa31343a3
commit af3bd11bcd
No known key found for this signature in database
GPG key ID: 07D17FF580AE7589
6 changed files with 449 additions and 297 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
layouts/partials/stylesheet.html
View file

@ -9,6 +9,7 @@
{{- with index $themevariants 0 }} {{- with index $themevariants 0 }}
<link href="{{(printf "css/theme-%s.css" .) | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" id="variant-style"> <link href="{{(printf "css/theme-%s.css" .) | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" id="variant-style">
{{- end }} {{- end }}
<link href="{{"css/ie.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
<link href="{{"css/variant.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"> <link href="{{"css/variant.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
<link href="{{"css/print.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"{{ if ne (.Scratch.Get "relearnOutputFormat") "PRINT" }} media="print"{{ end }}> <link href="{{"css/print.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet"{{ if ne (.Scratch.Get "relearnOutputFormat") "PRINT" }} media="print"{{ end }}>
{{- if .Site.Params.disableInlineCopyToClipBoard }} {{- if .Site.Params.disableInlineCopyToClipBoard }}

331
static/css/ie.css Normal file
View file

@ -0,0 +1,331 @@
@media all and (-ms-high-contrast:none) {
/* set default colors as in variant.css for IE11 */
body {
background-color: #ffffff; /* var(--MAIN-BG-color) */
color: #101010; /* var(--MAIN-TEXT-color) */
font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; /* var(--MAIN-font) */
}
a,
#toc-menu {
color: #486ac9; /* var(--MAIN-LINK-color) */
}
a:hover,
#toc-menu:hover,
#body a.highlight:after {
color: #134fbf; /* var(--MAIN-LINK-HOVER-color) */
}
#sidebar {
background: #282828; /* var(--MENU-SECTIONS-BG-color) */
}
#header-wrapper {
/* initially use section background to avoid flickering on load when a
non default variant is active */
background-color: rgba( 0, 0, 0, 0 ); /* var(--MENU-SECTIONS-BG-color) */
border-bottom-color: rgba( 0, 0, 0, 0 ); /* var(--MENU-SECTIONS-BG-color) */
color: #e0e0e0; /* var(--MENU-SEARCH-color) */
}
.searchbox {
border-color: #e0e0e0; /* var(--MENU-SEARCH-BORDER-color) */
background-color: #323232; /* var(--MENU-SEARCH-BG-color) */
}
#sidebar .collapsible-menu label:after,
#sidebar a {
color: #bababa; /* var(--MENU-SECTIONS-LINK-color) */
}
#sidebar select:hover,
#sidebar .collapsible-menu label:hover:after,
#sidebar a:hover {
color: #ffffff; /* var(--MENU-SECTIONS-LINK-HOVER-color) */
}
#sidebar ul.topics > li.parent,
#sidebar ul.topics > li.active {
background-color: rgba( 0, 0, 0, .166 ); /* var(--MENU-SECTIONS-ACTIVE-BG-color) */
}
#sidebar ul.topics li.active > a {
background-color: #ffffff; /* var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color) */
color: #444444; /* var(--MENU-SECTION-ACTIVE-CATEGORY-color) */
}
#sidebar ul li.visited > a .read-icon {
color: #486ac9; /* var(--MENU-VISITED-color) */
}
#sidebar .nav-title {
color: #ffffff; /* var(--MENU-SECTIONS-LINK-HOVER-color) */
}
#sidebar hr {
border-color: #606060; /* var(--MENU-SECTION-HR-color) */
}
#footer {
color: #bababa; /* var(--MENU-SECTIONS-LINK-color) */
}
h1 {
color: #101010; /* var(--MAIN-TEXT-color) */
font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; /* var(--MAIN-font) */
}
h2, h3, h4, h5, h6 {
color: #4a4a4a; /* var(--MAIN-TITLES-TEXT-color) */
font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; /* var(--MAIN-TITLES-TEXT-font) */
}
div.box {
background-color: #808080; /* var(--INTERNAL-BOX-NEUTRAL-color) */
}
div.box > .box-label {
color: rgba( 255, 255, 255, 1 ); /* var(--BOX-CAPTION-color) */
}
div.box > .box-content {
background-color: rgba( 255, 255, 255, .833 ); /* var(--BOX-BG-color) */
color: rgba( 16, 16, 16, 1 ); /* var(--BOX-TEXT-color) */
}
div.box.info {
background-color: rgba( 48, 117, 229, 1 ); /* var(--INTERNAL-BOX-INFO-color) */
}
div.box.info > .box-content {
color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-INFO-TEXT-color) */
}
div.box.warning {
background-color: rgba( 224, 62, 62, 1 ); /* var(--INTERNAL-BOX-WARNING-color) */
}
div.box.warning > .box-content {
color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-WARNING-TEXT-color) */
}
div.box.note {
background-color: rgba( 237, 153, 9, 1 ); /* var(--INTERNAL-BOX-NOTE-color) */
}
div.box.note > .box-content {
color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-NOTE-TEXT-color) */
}
div.box.tip {
background-color: rgba( 42, 178, 24, 1 ); /* var(--INTERNAL-BOX-TIP-color) */
}
div.box.tip > .box-content {
color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-TIP-TEXT-color) */
}
div.box.primary {
background-color: #7dc903; /* var(--INTERNAL-PRIMARY-color) */
}
div.box.primary > .box-content {
color: #101010; /* var(--INTERNAL-MAIN-TEXT-color) */
}
div.box.secondary {
background-color: #486ac9; /* var(--INTERNAL-SECONDARY-color) */
}
div.box.secondary > .box-content {
color: #101010; /* var(--INTERNAL-MAIN-TEXT-color) */
}
div.box.blue {
background-color: rgba( 48, 117, 229, 1 ); /* var(--INTERNAL-BOX-BLUE-color) */
}
div.box.blue > .box-content {
color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-BLUE-TEXT-color) */
}
div.box.green {
background-color: rgba( 42, 178, 24, 1 ); /* var(--INTERNAL-BOX-GREEN-color) */
}
div.box.green > .box-content {
color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-GREEN-TEXT-color) */
}
div.box.grey {
background-color: #808080; /* var(--INTERNAL-BOX-GREY-color) */
}
div.box.grey > .box-content {
color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-GREY-TEXT-color) */
}
div.box.orange {
background-color: rgba( 237, 153, 9, 1 ); /* var(--INTERNAL-BOX-ORANGE-color) */
}
div.box.orange > .box-content {
color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-ORANGE-TEXT-color) */
}
div.box.red {
background-color: rgba( 224, 62, 62, 1 ); /* var(--INTERNAL-BOX-RED-color) */
}
div.box.red > .box-content {
color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-RED-TEXT-color) */
}
div.box.transparent > .box-label {
color: #4a4a4a; /* var(--MAIN-TITLES-TEXT-color) */
}
div.box.transparent > .box-content {
color: #101010; /* var(--MAIN-TEXT-color) */
}
code,
kbd,
pre,
samp {
font-family: "Consolas", menlo, monospace; /* var(--CODE-font) */
}
code {
background-color: #fffae9; /* var(--CODE-INLINE-BG-color) */
border-color: #f8e8c8; /* var(--CODE-INLINE-BORDER-color) */
color: #5e5e5e; /* var(--CODE-INLINE-color) */
}
pre {
background-color: #f8f8f8; /* var(--CODE-BLOCK-BG-color) */
border-color: #d8d8d8; /* var(--CODE-BLOCK-BORDER-color) */
color: #000000; /* var(--CODE-BLOCK-color) */
}
div.featherlight .featherlight-content{
background-color: #ffffff /* var(--INTERNAL-MAIN-BG-color); */
}
#topbar {
background-color: #ffffff; /* var(--MAIN-BG-color) */
}
#body a[aria-disabled="true"] {
color: #101010; /* var(--MAIN-TEXT-color) - inherit is not processed correctly in Chrome */
}
.copy-to-clipboard-button {
background-color: #fffae9; /* var(--CODE-INLINE-BG-color) */
border-color: #f8e8c8; /* var(--CODE-INLINE-BORDER-color) */
color: #5e5e5e; /* var(--CODE-INLINE-color) */
font-family: "Consolas", menlo, monospace; /* var(--CODE-font) */
}
.copy-to-clipboard-button:hover {
background-color: #5e5e5e; /* var(--CODE-INLINE-color) */
color: #fffae9; /* var(--CODE-INLINE-BG-color) */
}
pre .copy-to-clipboard-button {
border-color: #d8d8d8; /* var(--CODE-BLOCK-BORDER-color) */
color: #486ac9; /* var(--MAIN-LINK-color) */
}
pre .copy-to-clipboard-button:hover {
background-color: #486ac9; /* var(--MAIN-LINK-color) */
border-color: #486ac9; /* var(--MAIN-LINK-color) */
color: #f8f8f8; /* var(--CODE-BLOCK-BG-color) */
}
#homelinks {
background-color: #7dc903; /* var(--MENU-HEADER-BORDER-color) */
border-color: #7dc903; /* var(--MENU-HEADER-BORDER-color) */
}
#homelinks a {
color: #323232 /* var(--MENU-HOME-LINK-color) */
}
#homelinks a:hover {
color: #808080 /* var(--MENU-HOME-LINK-HOVER-color) */;
}
#body a.highlight:after {
background-color: #486ac9; /* var(--MAIN-LINK-color) */
}
.progress {
background-color: #ffffff; /* var(--MAIN-BG-color) */
}
.btn-default {
color: #101010; /* var(--MAIN-TEXT-color) */
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active {
color: #ffffff;/* var(--MAIN-BG-color) */
}
.anchor {
color: #486ac9; /* var(--MAIN-ANCHOR-color) */
}
#body .tags a.tag-link {
background-color: #7dc903; /* var(--TAG-BG-color) */
color: #ffffff; /* var(--MAIN-BG-color) */
}
#body .tags a.tag-link:before {
border-right-color: #7dc903; /* var(--TAG-BG-color) */
}
#body .tags a.tag-link:after {
background: #ffffff; /* var(--MAIN-BG-color) */
}
#body .tab-nav-button.active {
background-color: #ffffff !important; /* var(--MAIN-BG-color) */
border-bottom-color: #ffffff !important; /* var(--MAIN-BG-color) */
}
}
@media all and (-ms-high-contrast:none) {
/* set further styles to fix broken stuff in IE11 */
/* turn off animiation in IE because this causes the menu
to move in from the left on every page load */
.default-animation{
transition: none;
}
/* our silly dinosaur browser wants to have the real colors */
#header-wrapper {
background-color: #7dc903; /* var(--MENU-HEADER-BG-color) */
border-bottom-color: #7dc903; /* var(--MENU-HEADER-BORDER-color) */
}
/* clears the 'X' from Internet Explorer's search input */
input[type=search]::-ms-clear { display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }
/* turn off variant selector as it uses modern stuff; don't change
order with block below */
.showVariantSwitch{
display: getamodernbrowser;
}
/* dumb IE11 doesn't understand initial, so we force a fallback here */
.showLangSwitch,
.showVisitedLinks,
.showFooter {
display: block;
}
}

4
static/css/tabs.css
View file

@ -14,10 +14,6 @@
#body .tab-nav-button:first-child { #body .tab-nav-button:first-child {
margin-left: 9px; margin-left: 9px;
} }
#body .tab-nav-button.active {
background-color: #ffffff !important; /* var(--MAIN-BG-color) */
border-bottom-color: #ffffff !important; /* var(--MAIN-BG-color) */
}
#body .tab-nav-button:not(.active) { #body .tab-nav-button:not(.active) {
border-bottom-color: rgba( 134, 134, 134, .1 ) !important; border-bottom-color: rgba( 134, 134, 134, .1 ) !important;
margin-top: 7px; margin-top: 7px;

5
static/css/tags.css
View file

@ -6,11 +6,9 @@
} }
#body .tags a.tag-link { #body .tags a.tag-link {
background: #7dc903; /* var(--TAG-BG-color) */
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
border-top-right-radius: 3px; border-top-right-radius: 3px;
box-shadow: 0 1px 2px rgba(0,0,0,0.2); box-shadow: 0 1px 2px rgba(0,0,0,0.2);
color: #ffffff; /* var(--MAIN-BG-color) */
display: inline-block; display: inline-block;
font-size: 0.8em; font-size: 0.8em;
font-weight: 400; font-weight: 400;
@ -21,7 +19,7 @@
} }
#body .tags a.tag-link:before { #body .tags a.tag-link:before {
border-color: transparent #7dc903 transparent transparent; /* var(--TAG-BG-color) */ border-color: transparent;
border-style: solid; border-style: solid;
border-width: 1em 1em 1em 0; border-width: 1em 1em 1em 0;
content: ""; content: "";
@ -33,7 +31,6 @@
} }
#body .tags a.tag-link:after { #body .tags a.tag-link:after {
background: #ffffff; /* var(--MAIN-BG-color) */
border-radius: 100%; border-radius: 100%;
content: ""; content: "";
left: 1px; left: 1px;

210
static/css/theme.css
View file

@ -49,11 +49,8 @@ html {
} }
body { body {
background-color: #ffffff; /* var(--MAIN-BG-color) */
color: #101010; /* var(--MAIN-TEXT-color) */
display: flex; display: flex;
flex-direction: row-reverse; /* IE11 to allow body to have initial focus for PS */ flex-direction: row-reverse; /* IE11 to allow body to have initial focus for PS and better SEO and a11y */
font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; /* var(--MAIN-font) */
font-size: 16.25px; font-size: 16.25px;
font-weight: 300; font-weight: 300;
height: 100%; height: 100%;
@ -77,16 +74,6 @@ body #body-inner .chapter h1 {
} }
} }
a,
#toc-menu {
color: #486ac9; /* var(--MAIN-LINK-color) */
}
a:hover,
#toc-menu:hover {
color: #134fbf; /* var(--MAIN-LINK-HOVER-color) */
}
pre { pre {
position: relative; position: relative;
} }
@ -103,7 +90,6 @@ th {
} }
#sidebar { #sidebar {
background: #282828; /* var(--MENU-SECTIONS-BG-color) */
display: flex; display: flex;
flex-basis: auto; flex-basis: auto;
flex-direction: column; flex-direction: column;
@ -122,11 +108,8 @@ th {
} }
#header-wrapper { #header-wrapper {
/* initially use section background to avoid flickering on load when a border-bottom-style: solid;
non default variant is active */ border-bottom-width: 4px;
background-color: rgba( 0, 0, 0, 0 ); /* var(--MENU-SECTIONS-BG-color) */
border-bottom: 4px solid rgba( 0, 0, 0, 0 ); /* var(--MENU-SECTIONS-BG-color) */
color: #e0e0e0; /* var(--MENU-SEARCH-color) */
text-align: center; text-align: center;
padding: 1rem; padding: 1rem;
position: relative; position: relative;
@ -136,9 +119,9 @@ th {
} }
.searchbox { .searchbox {
border: 1px solid #e0e0e0; /* var(--MENU-SEARCH-BORDER-color) */
border-radius: 4px; border-radius: 4px;
background-color: #323232; /* var(--MENU-SEARCH-BG-color) */ border-style: solid;
border-width: 1px;
position: relative; position: relative;
margin-top: 1rem; margin-top: 1rem;
} }
@ -190,17 +173,6 @@ th {
z-index: 410; z-index: 410;
} }
#sidebar .collapsible-menu label:after,
#sidebar a {
color: #bababa; /* var(--MENU-SECTIONS-LINK-color) */
}
#sidebar select:hover,
#sidebar .collapsible-menu label:hover:after,
#sidebar a:hover {
color: #ffffff; /* var(--MENU-SECTIONS-LINK-HOVER-color) */
}
#sidebar a.padding { #sidebar a.padding {
padding: 0 1rem; padding: 0 1rem;
} }
@ -262,10 +234,6 @@ th {
padding-right: 1rem; padding-right: 1rem;
} }
#sidebar ul.topics > li.parent {
background-color: rgba( 0, 0, 0, .166 ); /* var(--MENU-SECTIONS-ACTIVE-BG-color) */
}
#sidebar ul.topics li > a { #sidebar ul.topics li > a {
margin-left: -1rem; margin-left: -1rem;
margin-right: -1rem; margin-right: -1rem;
@ -273,11 +241,6 @@ th {
padding-right: 1rem; padding-right: 1rem;
} }
#sidebar ul.topics li.active > a {
background-color: #ffffff; /* var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color) */
color: #444444; /* var(--MENU-SECTION-ACTIVE-CATEGORY-color) */
}
#sidebar ul { #sidebar ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
@ -331,12 +294,10 @@ th {
} }
#sidebar ul li.visited > a .read-icon { #sidebar ul li.visited > a .read-icon {
color: #486ac9; /* var(--MENU-VISITED-color) */
display: inline; display: inline;
} }
#sidebar .nav-title { #sidebar .nav-title {
color: #ffffff; /* var(--MENU-SECTIONS-LINK-HOVER-color) */
font-size: 2rem; font-size: 2rem;
font-weight: 200; font-weight: 200;
letter-spacing: -1px; letter-spacing: -1px;
@ -352,14 +313,11 @@ th {
} }
#sidebar hr { #sidebar hr {
border-bottom: 1px solid #606060; /* var(--MENU-SECTION-HR-color) */ border-bottom-style: solid;
border-bottom-width: 1px;
margin: 1.5rem 1rem 1rem 1rem; margin: 1.5rem 1rem 1rem 1rem;
} }
#footer {
color: #bababa; /* var(--MENU-SECTIONS-LINK-color) */
}
#body { #body {
display: flex; display: flex;
flex-basis: 100%; flex-basis: 100%;
@ -466,16 +424,12 @@ th {
} }
h1 { h1 {
color: #101010; /* var(--MAIN-TEXT-color) */
font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; /* var(--MAIN-font) */
font-weight: 200; font-weight: 200;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
} }
h2, h3, h4, h5, h6 { h2, h3, h4, h5, h6 {
color: #4a4a4a; /* var(--MAIN-TITLES-TEXT-color) */
font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; /* var(--MAIN-TITLES-TEXT-font) */
letter-spacing: -1px; letter-spacing: -1px;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
} }
@ -505,21 +459,17 @@ 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-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);
background-color: #808080; /* var(--INTERNAL-BOX-NEUTRAL-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;
} }
div.box > .box-label { div.box > .box-label {
color: rgba( 255, 255, 255, 1 ); /* var(--BOX-CAPTION-color) */
font-weight: 500; font-weight: 500;
padding: .2rem .6rem; padding: .2rem .6rem;
} }
div.box > .box-content { div.box > .box-content {
background-color: rgba( 255, 255, 255, .833 ); /* var(--BOX-BG-color) */
color: rgba( 16, 16, 16, 1 ); /* var(--BOX-TEXT-color) */
padding-bottom: .1rem; padding-bottom: .1rem;
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
@ -537,111 +487,56 @@ div.box > .box-content > :last-child {
div.box.info { div.box.info {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-INFO-color); --VARIABLE-BOX-color: var(--INTERNAL-BOX-INFO-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-INFO-TEXT-color); --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-INFO-TEXT-color);
background-color: rgba( 48, 117, 229, 1 ); /* var(--INTERNAL-BOX-INFO-color) */
}
div.box.info > .box-content {
color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-INFO-TEXT-color) */
} }
div.box.warning { div.box.warning {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-WARNING-color); --VARIABLE-BOX-color: var(--INTERNAL-BOX-WARNING-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-WARNING-TEXT-color); --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-WARNING-TEXT-color);
background-color: rgba( 224, 62, 62, 1 ); /* var(--INTERNAL-BOX-WARNING-color) */
}
div.box.warning > .box-content {
color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-WARNING-TEXT-color) */
} }
div.box.note { div.box.note {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-NOTE-color); --VARIABLE-BOX-color: var(--INTERNAL-BOX-NOTE-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NOTE-TEXT-color); --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NOTE-TEXT-color);
background-color: rgba( 237, 153, 9, 1 ); /* var(--INTERNAL-BOX-NOTE-color) */
}
div.box.note > .box-content {
color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-NOTE-TEXT-color) */
} }
div.box.tip { div.box.tip {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-TIP-color); --VARIABLE-BOX-color: var(--INTERNAL-BOX-TIP-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-TIP-TEXT-color); --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-TIP-TEXT-color);
background-color: rgba( 42, 178, 24, 1 ); /* var(--INTERNAL-BOX-TIP-color) */
}
div.box.tip > .box-content {
color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-TIP-TEXT-color) */
} }
div.box.primary { div.box.primary {
--VARIABLE-BOX-color: var(--INTERNAL-PRIMARY-color); --VARIABLE-BOX-color: var(--INTERNAL-PRIMARY-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color); --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
background-color: #7dc903; /* var(--INTERNAL-PRIMARY-color) */
}
div.box.primary > .box-content {
color: #101010; /* var(--INTERNAL-MAIN-TEXT-color) */
} }
div.box.secondary { div.box.secondary {
--VARIABLE-BOX-color: var(--INTERNAL-SECONDARY-color); --VARIABLE-BOX-color: var(--INTERNAL-SECONDARY-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color); --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
background-color: #486ac9; /* var(--INTERNAL-SECONDARY-color) */
}
div.box.secondary > .box-content {
color: #101010; /* var(--INTERNAL-MAIN-TEXT-color) */
} }
div.box.blue { div.box.blue {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-BLUE-color); --VARIABLE-BOX-color: var(--INTERNAL-BOX-BLUE-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-BLUE-TEXT-color); --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-BLUE-TEXT-color);
background-color: rgba( 48, 117, 229, 1 ); /* var(--INTERNAL-BOX-BLUE-color) */
}
div.box.blue > .box-content {
color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-BLUE-TEXT-color) */
} }
div.box.green { div.box.green {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-GREEN-color); --VARIABLE-BOX-color: var(--INTERNAL-BOX-GREEN-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREEN-TEXT-color); --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREEN-TEXT-color);
background-color: rgba( 42, 178, 24, 1 ); /* var(--INTERNAL-BOX-GREEN-color) */
}
div.box.green > .box-content {
color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-GREEN-TEXT-color) */
} }
div.box.grey { div.box.grey {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-GREY-color); --VARIABLE-BOX-color: var(--INTERNAL-BOX-GREY-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREY-TEXT-color); --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREY-TEXT-color);
background-color: #808080; /* var(--INTERNAL-BOX-GREY-color) */
}
div.box.grey > .box-content {
color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-GREY-TEXT-color) */
} }
div.box.orange { div.box.orange {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-ORANGE-color); --VARIABLE-BOX-color: var(--INTERNAL-BOX-ORANGE-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-WARNING-ORANGE-color); --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-WARNING-ORANGE-color);
background-color: rgba( 237, 153, 9, 1 ); /* var(--INTERNAL-BOX-ORANGE-color) */
}
div.box.orange > .box-content {
color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-ORANGE-TEXT-color) */
} }
div.box.red { div.box.red {
--VARIABLE-BOX-color: var(--INTERNAL-BOX-RED-color); --VARIABLE-BOX-color: var(--INTERNAL-BOX-RED-color);
--VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-RED-TEXT-color); --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-RED-TEXT-color);
background-color: rgba( 224, 62, 62, 1 ); /* var(--INTERNAL-BOX-RED-color) */
}
div.box.red > .box-content {
color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-RED-TEXT-color) */
} }
div.box.transparent { div.box.transparent {
@ -651,13 +546,8 @@ div.box.transparent {
background-color: transparent; background-color: transparent;
} }
div.box.transparent > .box-label {
color: #4a4a4a; /* var(--MAIN-TITLES-TEXT-color) */
}
div.box.transparent > .box-content { div.box.transparent > .box-content {
background-color: transparent; background-color: transparent;
color: #101010; /* var(--MAIN-TEXT-color) */
} }
/* attachments shortcode */ /* attachments shortcode */
@ -715,16 +605,14 @@ code,
kbd, kbd,
pre, pre,
samp { samp {
font-family: "Consolas", menlo, monospace; /* var(--CODE-font) */
font-size: 92%; font-size: 92%;
vertical-align: baseline; vertical-align: baseline;
} }
code { code {
background-color: #fffae9; /* var(--CODE-INLINE-BG-color) */
border: 1px solid #f8e8c8; /* var(--CODE-INLINE-BORDER-color) */
border-radius: 2px; border-radius: 2px;
color: #5e5e5e; /* var(--CODE-INLINE-color) */ border-style: solid;
border-width: 1px;
-webkit-print-color-adjust: economy; -webkit-print-color-adjust: economy;
color-adjust: economy; color-adjust: economy;
padding-left: 2px; padding-left: 2px;
@ -743,10 +631,9 @@ code.copy-to-clipboard-code {
} }
pre { pre {
background-color: #f8f8f8; /* var(--CODE-BLOCK-BG-color) */
border: 1px solid #d8d8d8; /* var(--CODE-BLOCK-BORDER-color) */
border-radius: 2px; border-radius: 2px;
color: #000000; /* var(--CODE-BLOCK-color) */ border-style: solid;
border-width: 1px;
-webkit-print-color-adjust: economy; -webkit-print-color-adjust: economy;
color-adjust: economy; color-adjust: economy;
line-height: 1.15; line-height: 1.15;
@ -958,7 +845,6 @@ td {
} }
#topbar { #topbar {
background-color: #ffffff; /* var(--MAIN-BG-color) */
min-height: 3rem; min-height: 3rem;
position: relative; position: relative;
z-index: 480; z-index: 480;
@ -1068,7 +954,6 @@ span.nav i{
} }
#body a[aria-disabled="true"] { #body a[aria-disabled="true"] {
color: #101010; /* var(--MAIN-TEXT-color) - inherit is not processed correctly in Chrome */
pointer-events: none; pointer-events: none;
text-decoration: none; text-decoration: none;
} }
@ -1087,7 +972,7 @@ span.nav i{
} }
} }
@media screen and (max-width: 47.938em) { @media screen and (max-width: 47.938em) {
/* we don't support sidebar flyout in IE */ /* we don't support sidebar flyout in mobile */
.mobile-support #sidebar { .mobile-support #sidebar {
left: -230px; left: -230px;
} }
@ -1124,12 +1009,10 @@ span.nav i{
} }
.copy-to-clipboard-button { .copy-to-clipboard-button {
background-color: #fffae9; /* var(--CODE-INLINE-BG-color) */
border: 1px solid #f8e8c8; /* var(--CODE-INLINE-BORDER-color) */
border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0;
color: #5e5e5e; /* var(--CODE-INLINE-color) */ border-style: solid;
border-width: 1px;
cursor: pointer; cursor: pointer;
font-family: "Consolas", menlo, monospace; /* var(--CODE-font) */
font-size: 92%; font-size: 92%;
padding-left: 22px; padding-left: 22px;
} }
@ -1145,42 +1028,23 @@ span.nav i{
padding-right: 5px; padding-right: 5px;
} }
.copy-to-clipboard-button:hover {
background-color: #5e5e5e; /* var(--CODE-INLINE-color) */
color: #fffae9; /* var(--CODE-INLINE-BG-color) */
}
pre .copy-to-clipboard-button { pre .copy-to-clipboard-button {
background-color: rgba( 160, 160, 160, .2 ); background-color: rgba( 160, 160, 160, .2 );
border: 1px solid #d8d8d8; /* var(--CODE-BLOCK-BORDER-color) */
border-radius: 2px; border-radius: 2px;
color: #486ac9; /* var(--MAIN-LINK-color) */ border-style: solid;
border-width: 1px;
padding: 5px 3px 5px 25px; padding: 5px 3px 5px 25px;
position: absolute; position: absolute;
right: 4px; right: 4px;
top: 4px; top: 4px;
} }
pre .copy-to-clipboard-button:hover {
background-color: #486ac9; /* var(--MAIN-LINK-color) */
border-color: #486ac9; /* var(--MAIN-LINK-color) */
color: #f8f8f8; /* var(--CODE-BLOCK-BG-color) */
}
#homelinks { #homelinks {
background-color: #7dc903; /* var(--MENU-HEADER-BORDER-color) */ border-bottom-style: solid;
border-bottom: 4px solid #7dc903; /* var(--MENU-HEADER-BORDER-color) */ border-bottom-width: 4px;
padding: 7px 0; padding: 7px 0;
} }
#homelinks a {
color: #323232 /* var(--MENU-HOME-LINK-color) */
}
#homelinks a:hover {
color: #808080 /* var(--MENU-HOME-LINK-HOVER-color) */;
}
option { option {
color: initial; color: initial;
} }
@ -1298,7 +1162,6 @@ option {
} }
#body a.highlight:after { #body a.highlight:after {
background-color: #486ac9; /* var(--MAIN-LINK-color) */
content: ""; content: "";
display: block; display: block;
height: 1px; height: 1px;
@ -1331,7 +1194,6 @@ option {
} }
.progress { .progress {
background-color: #ffffff; /* var(--MAIN-BG-color) */
border: 0px solid rgba( 134, 134, 134, .166 ); border: 0px solid rgba( 134, 134, 134, .166 );
box-shadow: 1px 2px 5px 1px rgba( 134, 134, 134, .2 ); box-shadow: 1px 2px 5px 1px rgba( 134, 134, 134, .2 );
height: 0; height: 0;
@ -1372,8 +1234,9 @@ option {
.btn { .btn {
background-image: none !important; background-image: none !important;
border: 1px solid transparent !important;
border-radius: 4px !important; border-radius: 4px !important;
border-style: solid !important;
border-width: 1px !important;
cursor: pointer !important; cursor: pointer !important;
display: inline-block !important; display: inline-block !important;
font-size: 14px !important; font-size: 14px !important;
@ -1400,7 +1263,6 @@ option {
} }
.btn-default { .btn-default {
color: #101010 !important; /* var(--MAIN-TEXT-color) */
background-color: transparent; background-color: transparent;
border-color: rgba( 134, 134, 134, .333 ) !important; border-color: rgba( 134, 134, 134, .333 ) !important;
} }
@ -1408,7 +1270,6 @@ option {
.btn-default:hover, .btn-default:hover,
.btn-default:focus, .btn-default:focus,
.btn-default:active { .btn-default:active {
color: #ffffff !important; /* var(--MAIN-BG-color) */
background-color: rgba( 134, 134, 134, .75 ) !important; background-color: rgba( 134, 134, 134, .75 ) !important;
border-color: rgba( 134, 134, 134, .75 ) !important; border-color: rgba( 134, 134, 134, .75 ) !important;
} }
@ -1419,7 +1280,6 @@ option {
/* anchors */ /* anchors */
.anchor { .anchor {
color: #486ac9; /* var(--MAIN-ANCHOR-color) */
cursor: pointer; cursor: pointer;
font-size: .5em; font-size: .5em;
margin-left: .66em; margin-left: .66em;
@ -1570,36 +1430,6 @@ rapi-doc {
} }
} }
@media all and (-ms-high-contrast:none) {
/* turn off animiation in IE because this causes the menu
to move in from the left on every page load */
.default-animation{
transition: none;
}
/* our silly dinosaur browser wants to have the real colors */
#header-wrapper {
background-color: #7dc903; /* var(--MENU-HEADER-BG-color) */
border-bottom: 4px solid #7dc903; /* var(--MENU-HEADER-BORDER-color) */
}
/* clears the 'X' from Internet Explorer's search input */
input[type=search]::-ms-clear { display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }
/* turn off variant selector as it uses modern stuff; don't change
order with block below */
.showVariantSwitch{
display: getamodernbrowser;
}
/* dumb IE11 doesn't understand initial, so we force a fallback here */
.showLangSwitch,
.showVisitedLinks,
.showFooter {
display: block;
}
}
/* clears the 'X' from Chrome's search input */ /* clears the 'X' from Chrome's search input */
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-cancel-button,

195
static/css/variant.css
View file

@ -191,105 +191,6 @@ h6 {
font-family: var(--INTERNAL-MAIN-TITLES-H6-font); font-family: var(--INTERNAL-MAIN-TITLES-H6-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);
}
div.featherlight .featherlight-content{
background-color: var(--INTERNAL-MAIN-BG-color);
}
body #topbar {
background-color: var(--INTERNAL-MAIN-BG-color);
}
#body a[aria-disabled="true"] {
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);
}
.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);
}
#homelinks {
background-color: var(--INTERNAL-MENU-HEADER-BORDER-color);
border-bottom-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);
}
.progress {
background-color: var(--INTERNAL-MAIN-BG-color);
}
.btn-default {
color: var(--INTERNAL-MAIN-TEXT-color) !important;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active {
color: var(--INTERNAL-MAIN-BG-color) !important;
}
.anchor {
color: var(--INTERNAL-MAIN-ANCHOR-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);
}
#body .tab-nav-button.active {
background-color: var(--INTERNAL-MAIN-BG-color) !important;
border-bottom-color: var(--INTERNAL-MAIN-BG-color) !important;
}
div.box { div.box {
background-color: var(--INTERNAL-BOX-NEUTRAL-color); background-color: var(--INTERNAL-BOX-NEUTRAL-color);
} }
@ -406,6 +307,102 @@ samp {
font-family: var(--INTERNAL-CODE-font); 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);
}
div.featherlight .featherlight-content{
background-color: var(--INTERNAL-MAIN-BG-color);
}
#topbar {
background-color: var(--INTERNAL-MAIN-BG-color);
}
#body a[aria-disabled="true"] {
color: var(--INTERNAL-MAIN-TEXT-color);
}
.copy-to-clipboard-button { .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); 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);
}
#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);
}
.progress {
background-color: var(--INTERNAL-MAIN-BG-color);
}
.btn-default {
color: var(--INTERNAL-MAIN-TEXT-color) !important;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active {
color: var(--INTERNAL-MAIN-BG-color) !important;
}
.anchor {
color: var(--INTERNAL-MAIN-ANCHOR-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);
}
#body .tab-nav-button.active {
background-color: var(--INTERNAL-MAIN-BG-color) !important;
border-bottom-color: var(--INTERNAL-MAIN-BG-color) !important;
}