From af3bd11bcdbebf0529bdc8e640f17f1323604e76 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Sat, 28 May 2022 22:58:55 +0200 Subject: [PATCH] theme: move default colors to own stylesheet and only apply it to IE This will help to simplify further develpment by relying only to variant.css for evergreen browsers --- layouts/partials/stylesheet.html | 1 + static/css/ie.css | 331 +++++++++++++++++++++++++++++++ static/css/tabs.css | 4 - static/css/tags.css | 5 +- static/css/theme.css | 210 ++------------------ static/css/variant.css | 195 +++++++++--------- 6 files changed, 449 insertions(+), 297 deletions(-) create mode 100644 static/css/ie.css diff --git a/layouts/partials/stylesheet.html b/layouts/partials/stylesheet.html index 6624fb4eb1..9d511428e2 100644 --- a/layouts/partials/stylesheet.html +++ b/layouts/partials/stylesheet.html @@ -9,6 +9,7 @@ {{- with index $themevariants 0 }} {{- end }} + {{- if .Site.Params.disableInlineCopyToClipBoard }} diff --git a/static/css/ie.css b/static/css/ie.css new file mode 100644 index 0000000000..8d6ea06cd5 --- /dev/null +++ b/static/css/ie.css @@ -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; + } +} diff --git a/static/css/tabs.css b/static/css/tabs.css index 2d82593fc4..11babb6deb 100644 --- a/static/css/tabs.css +++ b/static/css/tabs.css @@ -14,10 +14,6 @@ #body .tab-nav-button:first-child { 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) { border-bottom-color: rgba( 134, 134, 134, .1 ) !important; margin-top: 7px; diff --git a/static/css/tags.css b/static/css/tags.css index dd3da7a210..dc68a4448c 100644 --- a/static/css/tags.css +++ b/static/css/tags.css @@ -6,11 +6,9 @@ } #body .tags a.tag-link { - background: #7dc903; /* var(--TAG-BG-color) */ border-bottom-right-radius: 3px; border-top-right-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,0.2); - color: #ffffff; /* var(--MAIN-BG-color) */ display: inline-block; font-size: 0.8em; font-weight: 400; @@ -21,7 +19,7 @@ } #body .tags a.tag-link:before { - border-color: transparent #7dc903 transparent transparent; /* var(--TAG-BG-color) */ + border-color: transparent; border-style: solid; border-width: 1em 1em 1em 0; content: ""; @@ -33,7 +31,6 @@ } #body .tags a.tag-link:after { - background: #ffffff; /* var(--MAIN-BG-color) */ border-radius: 100%; content: ""; left: 1px; diff --git a/static/css/theme.css b/static/css/theme.css index 1cbdf6e52e..4eb4b89e61 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -49,11 +49,8 @@ html { } body { - background-color: #ffffff; /* var(--MAIN-BG-color) */ - color: #101010; /* var(--MAIN-TEXT-color) */ display: flex; - flex-direction: row-reverse; /* IE11 to allow body to have initial focus for PS */ - font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; /* var(--MAIN-font) */ + flex-direction: row-reverse; /* IE11 to allow body to have initial focus for PS and better SEO and a11y */ font-size: 16.25px; font-weight: 300; 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 { position: relative; } @@ -103,7 +90,6 @@ th { } #sidebar { - background: #282828; /* var(--MENU-SECTIONS-BG-color) */ display: flex; flex-basis: auto; flex-direction: column; @@ -122,11 +108,8 @@ th { } #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: 4px solid rgba( 0, 0, 0, 0 ); /* var(--MENU-SECTIONS-BG-color) */ - color: #e0e0e0; /* var(--MENU-SEARCH-color) */ + border-bottom-style: solid; + border-bottom-width: 4px; text-align: center; padding: 1rem; position: relative; @@ -136,9 +119,9 @@ th { } .searchbox { - border: 1px solid #e0e0e0; /* var(--MENU-SEARCH-BORDER-color) */ border-radius: 4px; - background-color: #323232; /* var(--MENU-SEARCH-BG-color) */ + border-style: solid; + border-width: 1px; position: relative; margin-top: 1rem; } @@ -190,17 +173,6 @@ th { 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 { padding: 0 1rem; } @@ -262,10 +234,6 @@ th { 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 { margin-left: -1rem; margin-right: -1rem; @@ -273,11 +241,6 @@ th { 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 { list-style: none; padding: 0; @@ -331,12 +294,10 @@ th { } #sidebar ul li.visited > a .read-icon { - color: #486ac9; /* var(--MENU-VISITED-color) */ display: inline; } #sidebar .nav-title { - color: #ffffff; /* var(--MENU-SECTIONS-LINK-HOVER-color) */ font-size: 2rem; font-weight: 200; letter-spacing: -1px; @@ -352,14 +313,11 @@ th { } #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; } -#footer { - color: #bababa; /* var(--MENU-SECTIONS-LINK-color) */ -} - #body { display: flex; flex-basis: 100%; @@ -466,16 +424,12 @@ th { } h1 { - color: #101010; /* var(--MAIN-TEXT-color) */ - font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; /* var(--MAIN-font) */ font-weight: 200; text-align: center; text-transform: uppercase; } 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; text-rendering: optimizeLegibility; } @@ -505,21 +459,17 @@ div.box { --VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color); --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NEUTRAL-TEXT-color); --VARIABLE-BOX-CAPTION-color: var(--INTERNAL-BOX-CAPTION-color); - background-color: #808080; /* var(--INTERNAL-BOX-NEUTRAL-color) */ -webkit-print-color-adjust: exact; color-adjust: exact; margin: 1.5rem 0; } div.box > .box-label { - color: rgba( 255, 255, 255, 1 ); /* var(--BOX-CAPTION-color) */ font-weight: 500; padding: .2rem .6rem; } 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-left: 1rem; padding-right: 1rem; @@ -537,111 +487,56 @@ div.box > .box-content > :last-child { div.box.info { --VARIABLE-BOX-color: var(--INTERNAL-BOX-INFO-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 { --VARIABLE-BOX-color: var(--INTERNAL-BOX-WARNING-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 { --VARIABLE-BOX-color: var(--INTERNAL-BOX-NOTE-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 { --VARIABLE-BOX-color: var(--INTERNAL-BOX-TIP-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 { --VARIABLE-BOX-color: var(--INTERNAL-PRIMARY-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 { --VARIABLE-BOX-color: var(--INTERNAL-SECONDARY-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 { --VARIABLE-BOX-color: var(--INTERNAL-BOX-BLUE-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 { --VARIABLE-BOX-color: var(--INTERNAL-BOX-GREEN-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 { --VARIABLE-BOX-color: var(--INTERNAL-BOX-GREY-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 { --VARIABLE-BOX-color: var(--INTERNAL-BOX-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 { --VARIABLE-BOX-color: var(--INTERNAL-BOX-RED-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 { @@ -651,13 +546,8 @@ div.box.transparent { background-color: transparent; } -div.box.transparent > .box-label { - color: #4a4a4a; /* var(--MAIN-TITLES-TEXT-color) */ -} - div.box.transparent > .box-content { background-color: transparent; - color: #101010; /* var(--MAIN-TEXT-color) */ } /* attachments shortcode */ @@ -715,16 +605,14 @@ code, kbd, pre, samp { - font-family: "Consolas", menlo, monospace; /* var(--CODE-font) */ font-size: 92%; vertical-align: baseline; } code { - background-color: #fffae9; /* var(--CODE-INLINE-BG-color) */ - border: 1px solid #f8e8c8; /* var(--CODE-INLINE-BORDER-color) */ border-radius: 2px; - color: #5e5e5e; /* var(--CODE-INLINE-color) */ + border-style: solid; + border-width: 1px; -webkit-print-color-adjust: economy; color-adjust: economy; padding-left: 2px; @@ -743,10 +631,9 @@ code.copy-to-clipboard-code { } pre { - background-color: #f8f8f8; /* var(--CODE-BLOCK-BG-color) */ - border: 1px solid #d8d8d8; /* var(--CODE-BLOCK-BORDER-color) */ border-radius: 2px; - color: #000000; /* var(--CODE-BLOCK-color) */ + border-style: solid; + border-width: 1px; -webkit-print-color-adjust: economy; color-adjust: economy; line-height: 1.15; @@ -958,7 +845,6 @@ td { } #topbar { - background-color: #ffffff; /* var(--MAIN-BG-color) */ min-height: 3rem; position: relative; z-index: 480; @@ -1068,7 +954,6 @@ span.nav i{ } #body a[aria-disabled="true"] { - color: #101010; /* var(--MAIN-TEXT-color) - inherit is not processed correctly in Chrome */ pointer-events: none; text-decoration: none; } @@ -1087,7 +972,7 @@ span.nav i{ } } @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 { left: -230px; } @@ -1124,12 +1009,10 @@ span.nav i{ } .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; - color: #5e5e5e; /* var(--CODE-INLINE-color) */ + border-style: solid; + border-width: 1px; cursor: pointer; - font-family: "Consolas", menlo, monospace; /* var(--CODE-font) */ font-size: 92%; padding-left: 22px; } @@ -1145,42 +1028,23 @@ span.nav i{ 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 { background-color: rgba( 160, 160, 160, .2 ); - border: 1px solid #d8d8d8; /* var(--CODE-BLOCK-BORDER-color) */ border-radius: 2px; - color: #486ac9; /* var(--MAIN-LINK-color) */ + border-style: solid; + border-width: 1px; padding: 5px 3px 5px 25px; position: absolute; right: 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 { - background-color: #7dc903; /* var(--MENU-HEADER-BORDER-color) */ - border-bottom: 4px solid #7dc903; /* var(--MENU-HEADER-BORDER-color) */ + border-bottom-style: solid; + border-bottom-width: 4px; padding: 7px 0; } -#homelinks a { - color: #323232 /* var(--MENU-HOME-LINK-color) */ -} - -#homelinks a:hover { - color: #808080 /* var(--MENU-HOME-LINK-HOVER-color) */; -} - option { color: initial; } @@ -1298,7 +1162,6 @@ option { } #body a.highlight:after { - background-color: #486ac9; /* var(--MAIN-LINK-color) */ content: ""; display: block; height: 1px; @@ -1331,7 +1194,6 @@ option { } .progress { - background-color: #ffffff; /* var(--MAIN-BG-color) */ border: 0px solid rgba( 134, 134, 134, .166 ); box-shadow: 1px 2px 5px 1px rgba( 134, 134, 134, .2 ); height: 0; @@ -1372,8 +1234,9 @@ option { .btn { background-image: none !important; - border: 1px solid transparent !important; border-radius: 4px !important; + border-style: solid !important; + border-width: 1px !important; cursor: pointer !important; display: inline-block !important; font-size: 14px !important; @@ -1400,7 +1263,6 @@ option { } .btn-default { - color: #101010 !important; /* var(--MAIN-TEXT-color) */ background-color: transparent; border-color: rgba( 134, 134, 134, .333 ) !important; } @@ -1408,7 +1270,6 @@ option { .btn-default:hover, .btn-default:focus, .btn-default:active { - color: #ffffff !important; /* var(--MAIN-BG-color) */ background-color: rgba( 134, 134, 134, .75 ) !important; border-color: rgba( 134, 134, 134, .75 ) !important; } @@ -1419,7 +1280,6 @@ option { /* anchors */ .anchor { - color: #486ac9; /* var(--MAIN-ANCHOR-color) */ cursor: pointer; font-size: .5em; 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 */ input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, diff --git a/static/css/variant.css b/static/css/variant.css index 5583a561e5..f346525fb6 100644 --- a/static/css/variant.css +++ b/static/css/variant.css @@ -191,105 +191,6 @@ h6 { 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 { background-color: var(--INTERNAL-BOX-NEUTRAL-color); } @@ -406,6 +307,102 @@ 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); +} + +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 { + 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); +} + +#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; +}