mirror of https://github.com/istio/istio.io.git
Redo theming logic. (#3370)
This all got much simpler, more robust, and faster to load by using CSS variables.
This commit is contained in:
Martin Taillefer
GitHub
parent
8103d1f6e1
commit
19f40b74b7
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,3 +1,3 @@
|
|||
"use strict";function applyStyleSheet(a){const b=document.getElementsByTagName("link");for(let c=0;c<b.length;c++){const d=b[c];d.getAttribute("rel").includes("stylesheet")&&d.getAttribute("title")&&(d.disabled=!0,d.getAttribute("title")===a&&(d.disabled=!1))}let c=document.getElementById("light-theme-item");null!==c&&("Light Theme"===a?c.classList.add("active"):c.classList.remove("active")),c=document.getElementById("dark-theme-item"),null!==c&&("Dark Theme"===a?c.classList.add("active"):c.classList.remove("active"))}function createCookie(a,b,c){let d="";if(c){const a=new Date;a.setTime(a.getTime()+1e3*(60*(60*(24*c)))),d="; expires="+a.toGMTString()}document.cookie=a+"="+b+d+"; path=/"}function readCookie(a){const b=a+"=",d=document.cookie.split(";");for(let e,c=0;c<d.length;c++){for(e=d[c];" "===e.charAt(0);)e=e.substring(1,e.length);if(0===e.indexOf(b)){let a=e.substring(b.length,e.length);return"light"===a?a="Light Theme":"dark"==a&&(a="Dark Theme"),a}}return null}function setActiveStyleSheet(a){applyStyleSheet(a),createCookie("style",a)}function loadActiveStyleSheet(){let a=readCookie("style");null!==a&&applyStyleSheet(a)}loadActiveStyleSheet(),document.addEventListener("DOMContentLoaded",()=>{loadActiveStyleSheet()});
|
||||
"use strict";function applyStyleSheet(a){"Dark Theme"===a?document.body.classList.add("dark-theme"):document.body.classList.remove("dark-theme");let b=document.getElementById("light-theme-item");null!==b&&("Light Theme"===a?b.classList.add("active"):b.classList.remove("active")),b=document.getElementById("dark-theme-item"),null!==b&&("Dark Theme"===a?b.classList.add("active"):b.classList.remove("active"))}function createCookie(a,b,c){let d="";if(c){const a=new Date;a.setTime(a.getTime()+1e3*(60*(60*(24*c)))),d="; expires="+a.toGMTString()}document.cookie=a+"="+b+d+"; path=/"}function readCookie(a){const b=a+"=",d=document.cookie.split(";");for(let e,c=0;c<d.length;c++){for(e=d[c];" "===e.charAt(0);)e=e.substring(1,e.length);if(0===e.indexOf(b)){let a=e.substring(b.length,e.length);return"light"===a?a="Light Theme":"dark"==a&&(a="Dark Theme"),a}}return null}function setActiveStyleSheet(a){applyStyleSheet(a),createCookie("style",a)}function loadActiveStyleSheet(){let a=readCookie("style");null!==a&&applyStyleSheet(a)}loadActiveStyleSheet(),document.addEventListener("DOMContentLoaded",()=>{loadActiveStyleSheet()});
|
||||
|
||||
//# sourceMappingURL=styleSwitcher.min.js.map
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["../../src/js/styleSwitcher.js"],"names":[],"mappings":"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","file":"styleSwitcher.min.js","sourcesContent":["\"use strict\";\r\rfunction applyStyleSheet(title) {\r const links = document.getElementsByTagName('link');\r for (let i = 0; i < links.length; i++) {\r const link = links[i];\r if (link.getAttribute(\"rel\").includes(\"stylesheet\") && link.getAttribute(\"title\")) {\r\r // This needs to go to the disabled state first, and then adjusted below. Not sure why, but\r // not doing this first leads to states where no style sheet is loaded at all.\r link.disabled = true;\r\r if (link.getAttribute(\"title\") === title) {\r link.disabled = false;\r }\r }\r }\r\r // set the active theme menu item\r\r let item = document.getElementById(\"light-theme-item\");\r if (item !== null) {\r if (title === \"Light Theme\") {\r item.classList.add(\"active\");\r } else {\r item.classList.remove(\"active\");\r }\r }\r\r item = document.getElementById(\"dark-theme-item\");\r if (item !== null) {\r if (title === \"Dark Theme\") {\r item.classList.add(\"active\");\r } else {\r item.classList.remove(\"active\");\r }\r }\r}\r\rfunction createCookie(name, value, days) {\r let expires = \"\";\r if (days) {\r const date = new Date();\r date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));\r expires = \"; expires=\" + date.toGMTString();\r }\r document.cookie = name + \"=\" + value + expires + \"; path=/\";\r}\r\rfunction readCookie(name) {\r const nameEQ = name + \"=\";\r const ca = document.cookie.split(';');\r for (let i = 0; i < ca.length; i++) {\r let c = ca[i];\r while (c.charAt(0) === ' ') {\r c = c.substring(1, c.length);\r }\r\r if (c.indexOf(nameEQ) === 0) {\r let result = c.substring(nameEQ.length, c.length);\r\r // convert legacy cookie values\r if (result === \"light\") {\r result = \"Light Theme\";\r } else if (result === \"dark\") {\r result = \"Dark Theme\";\r }\r\r return result;\r }\r }\r return null;\r}\r\rfunction setActiveStyleSheet(title) {\r applyStyleSheet(title);\r createCookie(\"style\", title);\r}\r\rfunction loadActiveStyleSheet() {\r let cookie = readCookie(\"style\");\r if (cookie !== null) {\r applyStyleSheet(cookie);\r }\r}\r\rloadActiveStyleSheet();\rdocument.addEventListener('DOMContentLoaded', () => {\r loadActiveStyleSheet();\r});\r"]}
|
||||
{"version":3,"sources":["../../src/js/styleSwitcher.js"],"names":[],"mappings":"AAAA,aAEA,QAAS,CAAA,eAAT,CAAyB,CAAzB,CAAgC,CACd,YAAV,GAAA,CADwB,CAExB,QAAQ,CAAC,IAAT,CAAc,SAAd,CAAwB,GAAxB,CAA4B,YAA5B,CAFwB,CAIxB,QAAQ,CAAC,IAAT,CAAc,SAAd,CAAwB,MAAxB,CAA+B,YAA/B,CAJwB,CAS5B,GAAI,CAAA,CAAI,CAAG,QAAQ,CAAC,cAAT,CAAwB,kBAAxB,CAAX,CACa,IAAT,GAAA,CAVwB,GAWV,aAAV,GAAA,CAXoB,CAYpB,CAAI,CAAC,SAAL,CAAe,GAAf,CAAmB,QAAnB,CAZoB,CAcpB,CAAI,CAAC,SAAL,CAAe,MAAf,CAAsB,QAAtB,CAdoB,EAkB5B,CAAI,CAAG,QAAQ,CAAC,cAAT,CAAwB,iBAAxB,CAlBqB,CAmBf,IAAT,GAAA,CAnBwB,GAoBV,YAAV,GAAA,CApBoB,CAqBpB,CAAI,CAAC,SAAL,CAAe,GAAf,CAAmB,QAAnB,CArBoB,CAuBpB,CAAI,CAAC,SAAL,CAAe,MAAf,CAAsB,QAAtB,CAvBoB,CA0B/B,CAED,QAAS,CAAA,YAAT,CAAsB,CAAtB,CAA4B,CAA5B,CAAmC,CAAnC,CAAyC,CACrC,GAAI,CAAA,CAAO,CAAG,EAAd,CACA,GAAI,CAAJ,CAAU,CACN,KAAM,CAAA,CAAI,CAAG,GAAI,CAAA,IAAjB,CACA,CAAI,CAAC,OAAL,CAAa,CAAI,CAAC,OAAL,GAAwC,GAAtB,EAAiB,EAAjB,EAAY,EAAZ,EAAO,EAAP,CAAA,CAAI,GAAnC,CAFM,CAGN,CAAO,CAAG,aAAe,CAAI,CAAC,WAAL,EAC5B,CACD,QAAQ,CAAC,MAAT,CAAkB,CAAI,CAAG,GAAP,CAAa,CAAb,CAAqB,CAArB,CAA+B,UACpD,CAED,QAAS,CAAA,UAAT,CAAoB,CAApB,CAA0B,MAChB,CAAA,CAAM,CAAG,CAAI,CAAG,GADA,CAEhB,CAAE,CAAG,QAAQ,CAAC,MAAT,CAAgB,KAAhB,CAAsB,GAAtB,CAFW,CAGtB,IAAK,GACG,CAAA,CADH,CAAI,CAAC,CAAG,CAAb,CAAgB,CAAC,CAAG,CAAE,CAAC,MAAvB,CAA+B,CAAC,EAAhC,CAAoC,KAC5B,CAD4B,CACxB,CAAE,CAAC,CAAD,CADsB,CAET,GAAhB,GAAA,CAAC,CAAC,MAAF,CAAS,CAAT,CAFyB,EAG5B,CAAC,CAAG,CAAC,CAAC,SAAF,CAAY,CAAZ,CAAe,CAAC,CAAC,MAAjB,CAAJ,CAGJ,GAA0B,CAAtB,GAAA,CAAC,CAAC,OAAF,CAAU,CAAV,CAAJ,CAA6B,CACzB,GAAI,CAAA,CAAM,CAAG,CAAC,CAAC,SAAF,CAAY,CAAM,CAAC,MAAnB,CAA2B,CAAC,CAAC,MAA7B,CAAb,CASA,MANe,OAAX,GAAA,CAMJ,CALI,CAAM,CAAG,aAKb,CAJsB,MAAX,EAAA,CAIX,GAHI,CAAM,CAAG,YAGb,EAAO,CACV,CACJ,CACD,MAAO,KACV,CAED,QAAS,CAAA,mBAAT,CAA6B,CAA7B,CAAoC,CAChC,eAAe,CAAC,CAAD,CADiB,CAEhC,YAAY,CAAC,OAAD,CAAU,CAAV,CACf,CAED,QAAS,CAAA,oBAAT,EAAgC,CAC5B,GAAI,CAAA,CAAM,CAAG,UAAU,CAAC,OAAD,CAAvB,CACe,IAAX,GAAA,CAFwB,EAGxB,eAAe,CAAC,CAAD,CAEtB,CAED,oBAAoB,E,CACpB,QAAQ,CAAC,gBAAT,CAA0B,kBAA1B,CAA8C,IAAM,CAChD,oBAAoB,EACvB,CAFD,C","file":"styleSwitcher.min.js","sourcesContent":["\"use strict\";\r\rfunction applyStyleSheet(title) {\r if (title === \"Dark Theme\") {\r document.body.classList.add(\"dark-theme\");\r } else {\r document.body.classList.remove(\"dark-theme\");\r }\r\r // set the active theme menu item\r\r let item = document.getElementById(\"light-theme-item\");\r if (item !== null) {\r if (title === \"Light Theme\") {\r item.classList.add(\"active\");\r } else {\r item.classList.remove(\"active\");\r }\r }\r\r item = document.getElementById(\"dark-theme-item\");\r if (item !== null) {\r if (title === \"Dark Theme\") {\r item.classList.add(\"active\");\r } else {\r item.classList.remove(\"active\");\r }\r }\r}\r\rfunction createCookie(name, value, days) {\r let expires = \"\";\r if (days) {\r const date = new Date();\r date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));\r expires = \"; expires=\" + date.toGMTString();\r }\r document.cookie = name + \"=\" + value + expires + \"; path=/\";\r}\r\rfunction readCookie(name) {\r const nameEQ = name + \"=\";\r const ca = document.cookie.split(';');\r for (let i = 0; i < ca.length; i++) {\r let c = ca[i];\r while (c.charAt(0) === ' ') {\r c = c.substring(1, c.length);\r }\r\r if (c.indexOf(nameEQ) === 0) {\r let result = c.substring(nameEQ.length, c.length);\r\r // convert legacy cookie values\r if (result === \"light\") {\r result = \"Light Theme\";\r } else if (result === \"dark\") {\r result = \"Dark Theme\";\r }\r\r return result;\r }\r }\r return null;\r}\r\rfunction setActiveStyleSheet(title) {\r applyStyleSheet(title);\r createCookie(\"style\", title);\r}\r\rfunction loadActiveStyleSheet() {\r let cookie = readCookie(\"style\");\r if (cookie !== null) {\r applyStyleSheet(cookie);\r }\r}\r\rloadActiveStyleSheet();\rdocument.addEventListener('DOMContentLoaded', () => {\r loadActiveStyleSheet();\r});\r"]}
|
||||
|
|
@ -111,22 +111,19 @@
|
|||
|
||||
<!-- style sheets -->
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Work+Sans:400,500,300,700,300italic,400italic,500italic,700italic|Chivo:400,500,300,700,300italic,400italic,500italic,700italic">
|
||||
|
||||
{{ if .Site.Data.args.archive }}
|
||||
<link rel="stylesheet" href="/css/light_theme_archive.css" title="Light Theme">
|
||||
<link rel="alternate stylesheet" href="/css/dark_theme_archive.css" title="Dark Theme">
|
||||
{{ else if .Site.Data.args.preliminary }}
|
||||
<link rel="stylesheet" href="/css/light_theme_preliminary.css" title="Light Theme">
|
||||
<link rel="alternate stylesheet" href="/css/dark_theme_preliminary.css" title="Dark Theme">
|
||||
{{ else }}
|
||||
<link rel="stylesheet" href="/css/light_theme_normal.css" title="Light Theme">
|
||||
<link rel="alternate stylesheet" href="/css/dark_theme_normal.css" title="Dark Theme">
|
||||
{{ end }}
|
||||
|
||||
<script src="/js/styleSwitcher.min.js"></script>
|
||||
<link rel="stylesheet" href="/css/all.css">
|
||||
</head>
|
||||
|
||||
<body class="language-unknown">
|
||||
{{ $site_mode := ""}}
|
||||
{{ if .Site.Data.args.archive }}
|
||||
{{ $site_mode = "archive-site" }}
|
||||
{{ else if .Site.Data.args.preliminary }}
|
||||
{{ $site_mode = "preliminary-site" }}
|
||||
{{ end }}
|
||||
|
||||
<body class="language-unknown {{ $site_mode}}">
|
||||
<script src="/js/styleSwitcher.min.js"></script>
|
||||
|
||||
{{ partial "header.html" . }}
|
||||
{{ block "main" . }}{{ end }}
|
||||
{{ partial "footer.html" . }}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,10 @@
|
|||
#!/usr/bin/env sh
|
||||
set -e
|
||||
|
||||
mkdir -p static/css static/js static/img
|
||||
mkdir -p generated/css generated/js generated/img
|
||||
|
||||
npx sass src/sass/light_theme_archive.scss light_theme_archive.css -s compressed
|
||||
npx sass src/sass/light_theme_normal.scss light_theme_normal.css -s compressed
|
||||
npx sass src/sass/light_theme_preliminary.scss light_theme_preliminary.css -s compressed
|
||||
npx sass src/sass/dark_theme_archive.scss dark_theme_archive.css -s compressed
|
||||
npx sass src/sass/dark_theme_normal.scss dark_theme_normal.css -s compressed
|
||||
npx sass src/sass/dark_theme_preliminary.scss dark_theme_preliminary.css -s compressed
|
||||
mv light_theme* generated/css
|
||||
mv dark_theme* generated/css
|
||||
npx sass src/sass/_all.scss all.css -s compressed
|
||||
mv all.css* generated/css
|
||||
npx babel src/js/menu.js src/js/header.js src/js/sidebar.js src/js/tabs.js src/js/prism.js src/js/utils.js src/js/codeBlocks.js src/js/links.js src/js/scroll.js src/js/overlays.js src/js/clipboard.js --out-file generated/js/all.min.js --source-maps --minified --no-comments --presets minify
|
||||
npx babel src/js/styleSwitcher.js --out-file generated/js/styleSwitcher.min.js --source-maps --minified --no-comments --presets minify
|
||||
npx svgstore -o generated/img/icons.svg src/icons/**/*.svg
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@
|
|||
// Attach the event handlers to support the sidebar
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
if (sidebar == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
// toggle subtree in sidebar
|
||||
sidebar.querySelectorAll('.tree-toggle').forEach(o => {
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
"use strict";
function applyStyleSheet(title) {
const links = document.getElementsByTagName('link');
for (let i = 0; i < links.length; i++) {
const link = links[i];
if (link.getAttribute("rel").includes("stylesheet") && link.getAttribute("title")) {
// This needs to go to the disabled state first, and then adjusted below. Not sure why, but
// not doing this first leads to states where no style sheet is loaded at all.
link.disabled = true;
if (link.getAttribute("title") === title) {
link.disabled = false;
}
}
}
// set the active theme menu item
let item = document.getElementById("light-theme-item");
if (item !== null) {
if (title === "Light Theme") {
item.classList.add("active");
} else {
item.classList.remove("active");
}
}
item = document.getElementById("dark-theme-item");
if (item !== null) {
if (title === "Dark Theme") {
item.classList.add("active");
} else {
item.classList.remove("active");
}
}
}
function createCookie(name, value, days) {
let expires = "";
if (days) {
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
}
document.cookie = name + "=" + value + expires + "; path=/";
}
function readCookie(name) {
const nameEQ = name + "=";
const ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) === ' ') {
c = c.substring(1, c.length);
}
if (c.indexOf(nameEQ) === 0) {
let result = c.substring(nameEQ.length, c.length);
// convert legacy cookie values
if (result === "light") {
result = "Light Theme";
} else if (result === "dark") {
result = "Dark Theme";
}
return result;
}
}
return null;
}
function setActiveStyleSheet(title) {
applyStyleSheet(title);
createCookie("style", title);
}
function loadActiveStyleSheet() {
let cookie = readCookie("style");
if (cookie !== null) {
applyStyleSheet(cookie);
}
}
loadActiveStyleSheet();
document.addEventListener('DOMContentLoaded', () => {
loadActiveStyleSheet();
});
|
||||
"use strict";
function applyStyleSheet(title) {
const links = document.getElementsByTagName('link');
const link = links[i];
const links = document.getElementsByTagName('link');
if (link.getAttribute("rel").includes("stylesheet") && link.getAttribute("title")) {
const links = document.getElementsByTagName('link');
const links = document.getElementsByTagName('link');
// This needs to go to the disabled state first, and then adjusted below. Not sure why, but
}
// set the active theme menu item
let item = document.getElementById("light-theme-item");
if (item !== null) {
if (title === "Light Theme") {
item.classList.add("active");
} else {
item.classList.remove("active");
}
}
item = document.getElementById("dark-theme-item");
if (item !== null) {
if (title === "Dark Theme") {
item.classList.add("active");
} else {
item.classList.remove("active");
}
}
}
function createCookie(name, value, days) {
let expires = "";
if (days) {
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
}
document.cookie = name + "=" + value + expires + "; path=/";
}
function readCookie(name) {
const nameEQ = name + "=";
const ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) === ' ') {
c = c.substring(1, c.length);
}
if (c.indexOf(nameEQ) === 0) {
let result = c.substring(nameEQ.length, c.length);
// convert legacy cookie values
if (result === "light") {
result = "Light Theme";
} else if (result === "dark") {
result = "Dark Theme";
}
return result;
}
}
return null;
}
function setActiveStyleSheet(title) {
applyStyleSheet(title);
createCookie("style", title);
}
function loadActiveStyleSheet() {
let cookie = readCookie("style");
if (cookie !== null) {
applyStyleSheet(cookie);
}
}
loadActiveStyleSheet();
document.addEventListener('DOMContentLoaded', () => {
loadActiveStyleSheet();
});
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
@import "colors/colors";
|
||||
|
||||
@import "base/constants";
|
||||
@import "base/reset";
|
||||
@import "base/base";
|
||||
|
|
@ -91,7 +91,7 @@ table p:last-of-type {
|
|||
|
||||
th {
|
||||
color: $textBrandColor;
|
||||
background-color: $secondBrandColor;
|
||||
background-color: $mainBrandColor;
|
||||
font-weight: $tableHeaderWeight;
|
||||
|
||||
code {
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
$mainBrandColor: #466BB0;
|
||||
$secondBrandColor: #041A77;
|
||||
$textBrandColor: #FFFFFF;
|
||||
$textBrandColorLight: #CCCCCC;
|
||||
$textBrandHighlightColor: #de7d40;
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
$mainBrandColor: #466BB0;
|
||||
$secondBrandColor: #286AC7;
|
||||
$textBrandColor: #FFFFFF;
|
||||
$textBrandColorLight: #CCCCCC;
|
||||
$textBrandHighlightColor: #de7d40;
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
$mainBrandColor: #466BB0;
|
||||
$secondBrandColor: #68AAF7;
|
||||
$textBrandColor: #FFFFFF;
|
||||
$textBrandColorLight: #CCCCCC;
|
||||
$textBrandHighlightColor: #de7d40;
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
:root {
|
||||
--mainBrandColor: #466BB0;
|
||||
--secondBrandColor: #286AC7;
|
||||
--textBrandColor: #FFFFFF;
|
||||
--textBrandColorLight: #CCCCCC;
|
||||
--textBrandHighlightColor: #de7d40;
|
||||
|
||||
.preliminary-site {
|
||||
--secondBrandColor: #68AAF7;
|
||||
}
|
||||
|
||||
.archive-site {
|
||||
--secondBrandColor: #041A77;
|
||||
}
|
||||
}
|
||||
|
||||
$mainBrandColor: var(--mainBrandColor);
|
||||
$secondBrandColor: var(--secondBrandColor);
|
||||
$textBrandColor: var(--textBrandColor);
|
||||
$textBrandColorLight: var(--textBrandColorLight);
|
||||
$textBrandHighlightColor: var(--textBrandHighlightColor);
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
|
||||
$black: #000;
|
||||
$near-black: #2E2E2E;
|
||||
$white: #FFFFFF;
|
||||
$gray: #737373;
|
||||
$light-gray: lighten($gray, 52%);
|
||||
$medium-gray: lighten($gray, 35%);
|
||||
$dark-gray: darken($gray, 20%);
|
||||
|
||||
@import "brand";
|
||||
@import "light";
|
||||
@import "light_syntax";
|
||||
@import "dark";
|
||||
@import "dark_syntax";
|
||||
|
||||
$backgroundColor: var(--backgroundColor);
|
||||
|
||||
$textColor: var(--textColor);
|
||||
$textCodeColor: var(--textCodeColor);
|
||||
$disabledTextColor: var(--disabledTextColor);
|
||||
|
||||
$linkColor: var(--linkColor);
|
||||
$linkHoverColor: var(--linkHoverColor);
|
||||
$linkDisabledColor: var(--linkDisabledColor);
|
||||
$linkActiveColor: var(--linkActiveColor);
|
||||
|
||||
$h1Color: var(--h1Color);
|
||||
$h2Color: var(--h2Color);
|
||||
$h3Color: var(--h3Color);
|
||||
$h4Color: var(--h4Color);
|
||||
$h5Color: var(--h5Color);
|
||||
$h6Color: var(--h6Color);
|
||||
$h2UnderlineColor: var(--h2UnderlineColor);
|
||||
|
||||
$buttonActiveColor: var(--buttonActiveColor);
|
||||
$dividerBarColor: var(--dividerBarColor);
|
||||
$glossaryHeaderColor: var(--glossaryHeaderColor);
|
||||
$blockQuoteBackgroundColor: var(--blockQuotaBackgroundColor);
|
||||
$tipCalloutBackgroundColor: var(--tipCalloutBackgroundColor);
|
||||
$ideaCalloutBackgroundColor: var(--ideaCalloutBackgroundColor);
|
||||
$warningCalloutBackgroundColor: var(--warningCalloutBackgroundColor);
|
||||
$deprecatedBackgroundColor: var(--deprecateBackgroundColor);
|
||||
$boxBorderColor: var(--boxBorderColor);
|
||||
|
||||
$preBlockShadowColor: var(--preBlockShadowColor);
|
||||
$preBlockBorderColor: var(--preBlockBorderColor);
|
||||
$preBlockBackgroundColor: var(--preBlockBackgroundColor);
|
||||
$preBlockCommandOutputTextColor: var(--preBlockCommandOutputTextColor);
|
||||
$preBlockCommandOutputBackgroundColor: var(--preBlockCommandOutputBackgroundColor);
|
||||
|
||||
$dropdownBorderColor: var(--dropdownBorderColor);
|
||||
$dropdownCheck: var(--dropdownCheck);
|
||||
$dropdownHoverCheck: var(--dropdownHoverCheck);
|
||||
|
||||
$popoverBorderColor: var(--popoverBoardColor);
|
||||
$popoverShadowColor: var(--popoverShadowColor);
|
||||
$popoverHeaderBackgroundColor: var(--popoverHeaderBackgroundColor);
|
||||
$popoverHeaderTextColor: var(--popoverHeaderTextColor);
|
||||
$popoverBackgroundColor: var(--popoverBackgroundColor);
|
||||
$popoverTextColor: var(--popoverTextColor);
|
||||
|
||||
$headerLightShadowColor: var(--headerLightShadowColor);
|
||||
$headerDarkShadowColor: var(--heaserDarkShadowColor);
|
||||
|
||||
$figureBackgroundColor: var(--figureBackgroundColor);
|
||||
$figureCaptionColor: var(--figureCaptionColor);
|
||||
|
||||
$heroLogoColor: var(--heroLogoColor);
|
||||
$landingPanelBackgroundColor: var(--landingPanelBackgroundColor);
|
||||
$landingPanelBorderColor: var(--landingPanelBorderColor);
|
||||
$landingPanelTextColor: var(--landingPanelTextColor);
|
||||
$landingPanelShadowColor: var(--landingPanelShadowColor);
|
||||
$landingPanelShadowHoverColor: var(--landingPanelShadowHoverColor);
|
||||
|
||||
$floatingButtonColor: var(--floatingButtonColor);
|
||||
$floatingButtonHoverColor: var(--floatingButtonHoverColor);
|
||||
|
||||
$companyLogoBackgroundColor: var(--companyLogoBackgroundColor);
|
||||
$companyLogoTaglineColor: var(--companyLogoTaglineColor);
|
||||
|
||||
$textWeight: var(--textWeight);
|
||||
$linkWeight: var(--linkWeight);
|
||||
$h1Weight: var(--h1Weight);
|
||||
$h2Weight: var(--h2Weight);
|
||||
$h3Weight: var(--h3Weight);
|
||||
$h4Weight: var(--h4Weight);
|
||||
$h5Weight: var(--h5Weight);
|
||||
$h6Weight: var(--h6Weight);
|
||||
$tableHeaderWeight: var(--tableHeaderWeight);
|
||||
$boldTextWeight: var(--boldTextWeight);
|
||||
$heroLeadWeight: var(--heroLeadTextWeight);
|
||||
$blogAttributeWeight: var(--blogAttributeWeight);
|
||||
$sectionIndexLinkWeight: var(--sextionIndexLinkWeight);
|
||||
$buttonWeight: var(--buttonWeight);
|
||||
$tocLinkWeight: var(--tocLinkWeight);
|
||||
$sidebarLinkWeight: var(--sidebarLinkWeight);
|
||||
$sidebarCurrentPageWeight: var(--sidebarCurrentPageWeight);
|
||||
$glossaryHeaderWeight: var(--glossaryHeaderWeight);
|
||||
$glossaryWordWeight: var(--glossaryWordWeight);
|
||||
$figureCaptionWeight: var(--figureCaptionWeight);
|
||||
$textCodeWeight: var(--textCodeWeight);
|
||||
$faqQuestionWeight: var(--faqQuestionWeight);
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
.dark-theme {
|
||||
$not-so-dark-gray: lighten($dark-gray, 10%);
|
||||
--backgroundColor: #{$not-so-dark-gray};
|
||||
|
||||
--textColor: #dddddd;
|
||||
--textCodeColor: #cccccc;
|
||||
--disabledTextColor: #{darken(#dddddd, 25%)};
|
||||
|
||||
--linkColor: #e9ffaa;
|
||||
--linkHoverColor: #de7d40;
|
||||
--linkDisabledColor: #444444;
|
||||
--linkActiveColor: #de7d40;
|
||||
|
||||
--h1Color: #{$white};
|
||||
--h2Color: #{$white};
|
||||
--h3Color: #{$light-gray};
|
||||
--h4Color: #{$light-gray};
|
||||
--h5Color: #{$light-gray};
|
||||
--h6Color: #{$light-gray};
|
||||
--h2UnderlineColor: var(--mainBrandColor);
|
||||
|
||||
--buttonActiveColor: #e07484;
|
||||
--dividerBarColor: rgba(255, 255, 255, .1);
|
||||
--glossaryHeaderColor: #{$medium-gray};
|
||||
--blockQuoteBackgroundColor: #{$dark-gray};
|
||||
--tipCalloutBackgroundColor: #{$dark-gray};
|
||||
--ideaCalloutBackgroundColor: #{$dark-gray};
|
||||
--warningCalloutBackgroundColor: #{$dark-gray};
|
||||
--deprecatedBackgroundColor: silver;
|
||||
--boxBorderColor: var(--textColor);
|
||||
|
||||
--preBlockShadowColor: #777777;
|
||||
--preBlockBorderColor: #777777;
|
||||
--preBlockBackgroundColor: #2d2d2d;
|
||||
--preBlockCommandOutputTextColor: var(--textColor);
|
||||
--preBlockCommandOutputBackgroundColor: #{$dark-gray};
|
||||
|
||||
--dropdownBorderColor: #{$white};
|
||||
--dropdownCheck: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='white' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");
|
||||
--dropdownHoverCheck: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='white' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");
|
||||
|
||||
--popoverBorderColor: #777777;
|
||||
--popoverShadowColor: #777777;
|
||||
--popoverHeaderBackgroundColor: #{$dark-gray};
|
||||
--popoverHeaderTextColor: var(--textColor);
|
||||
--popoverBackgroundColor: var(--backgroundColor);
|
||||
--popoverTextColor: var(--textColor);
|
||||
|
||||
--headerLightShadowColor: rgba(0, 0, 0, .14);
|
||||
--headerDarkShadowColor: rgba(0, 0, 0, .28);
|
||||
|
||||
--figureBackgroundColor: #a3a3a3;
|
||||
--figureCaptionColor: #{$white};
|
||||
|
||||
--heroLogoColor: var(--textColor);
|
||||
--landingPanelBackgroundColor: #{$dark-gray};
|
||||
--landingPanelBorderColor: #777777;
|
||||
--landingPanelTextColor: var(--textColor);
|
||||
--landingPanelShadowColor: #777777;
|
||||
--landingPanelShadowHoverColor: #999999;
|
||||
|
||||
--floatingButtonColor: rgba(0, 0, 0, .4);
|
||||
--floatingButtonHoverColor: var(--textBrandHighlightColor);
|
||||
|
||||
--companyLogoBackgroundColor: lightgrey;
|
||||
--companyLogoTaglineColor: #{$black};
|
||||
|
||||
--textWeight: 300;
|
||||
--linkWeight: 300;
|
||||
--h1Weight: 400;
|
||||
--h2Weight: 400;
|
||||
--h3Weight: 500;
|
||||
--h4Weight: 500;
|
||||
--h5Weight: 500;
|
||||
--h6Weight: 500;
|
||||
--tableHeaderWeight: 400;
|
||||
--boldTextWeight: 600;
|
||||
--heroLeadWeight: 300;
|
||||
--blogAttributeWeight: 500;
|
||||
--sectionIndexLinkWeight: 400;
|
||||
--buttonWeight: 400;
|
||||
--tocLinkWeight: 300;
|
||||
--sidebarLinkWeight: 300;
|
||||
--sidebarCurrentPageWeight: 500;
|
||||
--glossaryHeaderWeight: 300;
|
||||
--glossaryWordWeight: 500;
|
||||
--figureCaptionWeight: 400;
|
||||
--textCodeWeight: 300;
|
||||
--faqQuestionWeight: 400;
|
||||
}
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
/* PrismJS 1.14.0
|
||||
http://prismjs.com/download.html#themes=prism-tomorrow&languages=clike+javascript+bash+docker+go+java+protobuf+python+yaml */
|
||||
/**
|
||||
* prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
|
||||
* Based on https://github.com/chriskempson/tomorrow-theme
|
||||
* @author Rose Pritchard
|
||||
*/
|
||||
|
||||
.dark-theme {
|
||||
.token.comment,
|
||||
.token.block-comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.token.tag,
|
||||
.token.attr-name,
|
||||
.token.namespace,
|
||||
.token.deleted {
|
||||
color: #e2777a;
|
||||
}
|
||||
|
||||
.token.function-name {
|
||||
color: #6196cc;
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.function {
|
||||
color: #f08d49;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.class-name,
|
||||
.token.constant,
|
||||
.token.symbol {
|
||||
color: #f8c555;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.important,
|
||||
.token.atrule,
|
||||
.token.keyword,
|
||||
.token.builtin {
|
||||
color: #dda9d8;
|
||||
}
|
||||
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.attr-value,
|
||||
.token.regex,
|
||||
.token.variable {
|
||||
color: #7ec699;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url {
|
||||
color: #67cdcc;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.token.inserted {
|
||||
color: green;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
body {
|
||||
--backgroundColor: #ffffff;
|
||||
|
||||
--textColor: #535f61;
|
||||
--textCodeColor: #d14;
|
||||
--disabledTextColor: #{lighten(#535f61, 50%)};
|
||||
|
||||
--linkColor: #469Bdd;
|
||||
--linkHoverColor: #1d67a0;
|
||||
--linkDisabledColor: #CCCCCC;
|
||||
--linkActiveColor: #b05464;
|
||||
|
||||
--h1Color: #{$near-black};
|
||||
--h2Color: #{$near-black};
|
||||
--h3Color: #{$dark-gray};
|
||||
--h4Color: #{$dark-gray};
|
||||
--h5Color: #{$dark-gray};
|
||||
--h6Color: #{$dark-gray};
|
||||
--h2UnderlineColor: var(--mainBrandColor);
|
||||
|
||||
--buttonActiveColor: #b05464;
|
||||
--dividerBarColor: rgba(0, 0, 0, .1);
|
||||
--glossaryHeaderColor: #{$medium-gray};
|
||||
--blockQuoteBackgroundColor: #{$light-gray};
|
||||
--tipCalloutBackgroundColor: #f2fff2;
|
||||
--ideaCalloutBackgroundColor: lightyellow;
|
||||
--warningCalloutBackgroundColor: #ffeeee;
|
||||
--deprecatedBackgroundColor: silver;
|
||||
--boxBorderColor: var(--secondBrandColor);
|
||||
|
||||
--preBlockShadowColor: #a7a7a7;
|
||||
--preBlockBorderColor: #f2f2f2;
|
||||
--preBlockBackgroundColor: var(--backgroundColor);
|
||||
--preBlockCommandOutputTextColor: var(--textColor);
|
||||
--preBlockCommandOutputBackgroundColor: #{$light-gray};
|
||||
|
||||
--dropdownBorderColor: #{$black};
|
||||
--dropdownCheck: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='black' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");
|
||||
--dropdownHoverCheck: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='white' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");
|
||||
|
||||
--popoverBorderColor: #777777;
|
||||
--popoverShadowColor: #777777;
|
||||
--popoverHeaderBackgroundColor: #{$light-gray};
|
||||
--popoverHeaderTextColor: var(--textColor);
|
||||
--popoverBackgroundColor: var(--backgroundColor);
|
||||
--popoverTextColor: var(--textColor);
|
||||
|
||||
--headerLightShadowColor: rgba(0, 0, 0, .14);
|
||||
--headerDarkShadowColor: rgba(0, 0, 0, .28);
|
||||
|
||||
--figureBackgroundColor: var(--backgroundColor);
|
||||
--figureCaptionColor: var(--textColor);
|
||||
|
||||
--heroLogoColor: var(--mainBrandColor);
|
||||
--landingPanelBackgroundColor: #{$light-gray};
|
||||
--landingPanelBorderColor: #dddddd;
|
||||
--landingPanelTextColor: var(--textColor);
|
||||
--landingPanelShadowColor: #a7a7a7;
|
||||
--landingPanelShadowHoverColor: #a7a7ee;
|
||||
|
||||
--floatingButtonColor: rgba(0, 0, 0, .4);
|
||||
--floatingButtonHoverColor: var(--textBrandHighlightColor);
|
||||
|
||||
--companyLogoBackgroundColor: var(--backgroundColor);
|
||||
--companyLogoTaglineColor: var(--textColor);
|
||||
|
||||
--textWeight: 400;
|
||||
--linkWeight: 400;
|
||||
--h1Weight: 400;
|
||||
--h2Weight: 400;
|
||||
--h3Weight: 500;
|
||||
--h4Weight: 500;
|
||||
--h5Weight: 500;
|
||||
--h6Weight: 500;
|
||||
--tableHeaderWeight: 400;
|
||||
--boldTextWeight: 700;
|
||||
--heroLeadWeight: 300;
|
||||
--blogAttributeWeight: 600;
|
||||
--sectionIndexLinkWeight: 400;
|
||||
--buttonWeight: 400;
|
||||
--tocLinkWeight: 400;
|
||||
--sidebarLinkWeight: 400;
|
||||
--sidebarCurrentPageWeight: 500;
|
||||
--glossaryHeaderWeight: 300;
|
||||
--glossaryWordWeight: 500;
|
||||
--figureCaptionWeight: 400;
|
||||
--textCodeWeight: 400;
|
||||
--faqQuestionWeight: 400;
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
@import "brand_colors/archive";
|
||||
@import "themes/dark";
|
||||
@import "themes/dark_syntax";
|
||||
@import "common";
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
@import "brand_colors/normal";
|
||||
@import "themes/dark";
|
||||
@import "themes/dark_syntax";
|
||||
@import "common";
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
@import "brand_colors/preliminary";
|
||||
@import "themes/dark";
|
||||
@import "themes/dark_syntax";
|
||||
@import "common";
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
@import "brand_colors/archive";
|
||||
@import "themes/light";
|
||||
@import "themes/light_syntax";
|
||||
@import "common";
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
@import "brand_colors/normal";
|
||||
@import "themes/light";
|
||||
@import "themes/light_syntax";
|
||||
@import "common";
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
@import "brand_colors/preliminary";
|
||||
@import "themes/light";
|
||||
@import "themes/light_syntax";
|
||||
@import "common";
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
}
|
||||
|
||||
&.disabled {
|
||||
color: lighten($textColor, 50%);
|
||||
color: $disabledTextColor;
|
||||
background-color: $backgroundColor;
|
||||
cursor: default;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,9 +13,8 @@
|
|||
|
||||
table td:first-of-type {
|
||||
color: $textBrandColor;
|
||||
background-color: $secondBrandColor;
|
||||
background-color: $mainBrandColor;
|
||||
font-weight: $tableHeaderWeight;
|
||||
border-bottom: 1px solid lighten($secondBrandColor, 7%);
|
||||
}
|
||||
|
||||
table td:last-of-type {
|
||||
|
|
|
|||
|
|
@ -1,91 +0,0 @@
|
|||
$black: #2E2E2E;
|
||||
$white: #FFFFFF;
|
||||
$gray: #737373;
|
||||
$light-gray: lighten($gray, 52%);
|
||||
$dark-gray: darken($gray, 20%);
|
||||
|
||||
$backgroundColor: lighten($dark-gray, 10%);
|
||||
|
||||
$textColor: #dddddd;
|
||||
$textCodeColor: #cccccc;
|
||||
|
||||
$linkColor: #e9ffaa;
|
||||
$linkHoverColor: #de7d40;
|
||||
$linkDisabledColor: #444444;
|
||||
$linkActiveColor: #de7d40;
|
||||
|
||||
$h1Color: $white;
|
||||
$h2Color: $white;
|
||||
$h3Color: $light-gray;
|
||||
$h4Color: $light-gray;
|
||||
$h5Color: $light-gray;
|
||||
$h6Color: $light-gray;
|
||||
$h2UnderlineColor: $mainBrandColor;
|
||||
|
||||
$buttonActiveColor: #e07484;
|
||||
$dividerBarColor: rgba(255, 255, 255, .1);
|
||||
$glossaryHeaderColor: lighten($gray, 35%);
|
||||
$blockQuoteBackgroundColor: $dark-gray;
|
||||
$tipCalloutBackgroundColor: $dark-gray;
|
||||
$ideaCalloutBackgroundColor: $dark-gray;
|
||||
$warningCalloutBackgroundColor: $dark-gray;
|
||||
$deprecatedBackgroundColor: silver;
|
||||
$preBlockShadowColor: #777777;
|
||||
$preBlockBorderColor: #777777;
|
||||
$preBlockBackgroundColor: #2d2d2d;
|
||||
$preBlockCommandOutputTextColor: $textColor;
|
||||
$preBlockCommandOutputBackgroundColor: $dark-gray;
|
||||
$boxBorderColor: $textColor;
|
||||
|
||||
$dropdownBorderColor: white;
|
||||
$dropdownCheck: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='white' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");
|
||||
$dropdownHoverCheck: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='white' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");
|
||||
|
||||
$popoverBorderColor: #777777;
|
||||
$popoverShadowColor: #777777;
|
||||
$popoverHeaderBackgroundColor: $dark-gray;
|
||||
$popoverHeaderTextColor: $textColor;
|
||||
$popoverBackgroundColor: $backgroundColor;
|
||||
$popoverTextColor: $textColor;
|
||||
|
||||
$headerLightShadowColor: rgba(0, 0, 0, .14);
|
||||
$headerDarkShadowColor: rgba(0, 0, 0, .28);
|
||||
|
||||
$figureBackgroundColor: #a3a3a3;
|
||||
$figureCaptionColor: $white;
|
||||
|
||||
$heroLogoColor: $textColor;
|
||||
$landingPanelBackgroundColor: $dark-gray;
|
||||
$landingPanelBorderColor: #777777;
|
||||
$landingPanelTextColor: $textColor;
|
||||
$landingPanelShadowColor: #777777;
|
||||
$landingPanelShadowHoverColor: #999999;
|
||||
|
||||
$floatingButtonColor: rgba(0, 0, 0, .4);
|
||||
$floatingButtonHoverColor: $textBrandHighlightColor;
|
||||
|
||||
$companyLogoBackgroundColor: lightgrey;
|
||||
$companyLogoTaglineColor: black;
|
||||
|
||||
$textWeight: 300;
|
||||
$linkWeight: 300;
|
||||
$h1Weight: 400;
|
||||
$h2Weight: 400;
|
||||
$h3Weight: 500;
|
||||
$h4Weight: 500;
|
||||
$h5Weight: 500;
|
||||
$h6Weight: 500;
|
||||
$tableHeaderWeight: 400;
|
||||
$boldTextWeight: 600;
|
||||
$heroLeadWeight: 300;
|
||||
$blogAttributeWeight: 500;
|
||||
$sectionIndexLinkWeight: 400;
|
||||
$buttonWeight: 400;
|
||||
$tocLinkWeight: 300;
|
||||
$sidebarLinkWeight: 300;
|
||||
$sidebarCurrentPageWeight: 500;
|
||||
$glossaryHeaderWeight: 300;
|
||||
$glossaryWordWeight: 500;
|
||||
$figureCaptionWeight: 400;
|
||||
$textCodeWeight: $textWeight;
|
||||
$faqQuestionWeight: 400;
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
/* PrismJS 1.14.0
|
||||
http://prismjs.com/download.html#themes=prism-tomorrow&languages=clike+javascript+bash+docker+go+java+protobuf+python+yaml */
|
||||
/**
|
||||
* prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
|
||||
* Based on https://github.com/chriskempson/tomorrow-theme
|
||||
* @author Rose Pritchard
|
||||
*/
|
||||
|
||||
.token.comment,
|
||||
.token.block-comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.token.tag,
|
||||
.token.attr-name,
|
||||
.token.namespace,
|
||||
.token.deleted {
|
||||
color: #e2777a;
|
||||
}
|
||||
|
||||
.token.function-name {
|
||||
color: #6196cc;
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.function {
|
||||
color: #f08d49;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.class-name,
|
||||
.token.constant,
|
||||
.token.symbol {
|
||||
color: #f8c555;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.important,
|
||||
.token.atrule,
|
||||
.token.keyword,
|
||||
.token.builtin {
|
||||
color: #dda9d8;
|
||||
}
|
||||
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.attr-value,
|
||||
.token.regex,
|
||||
.token.variable {
|
||||
color: #7ec699;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url {
|
||||
color: #67cdcc;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.token.inserted {
|
||||
color: green;
|
||||
}
|
||||
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
$black: #2E2E2E;
|
||||
$white: #FFFFFF;
|
||||
$gray: #737373;
|
||||
$light-gray: lighten($gray, 52%);
|
||||
$dark-gray: darken($gray, 20%);
|
||||
|
||||
$backgroundColor: $white;
|
||||
|
||||
$textColor: #535f61;
|
||||
$textCodeColor: #d14;
|
||||
|
||||
$linkColor: #469Bdd;
|
||||
$linkHoverColor: darken($linkColor, 20%);
|
||||
$linkDisabledColor: #CCCCCC;
|
||||
$linkActiveColor: #b05464;
|
||||
|
||||
$h1Color: $black;
|
||||
$h2Color: $black;
|
||||
$h3Color: $dark-gray;
|
||||
$h4Color: $dark-gray;
|
||||
$h5Color: $dark-gray;
|
||||
$h6Color: $dark-gray;
|
||||
$h2UnderlineColor: $mainBrandColor;
|
||||
|
||||
$buttonActiveColor: #b05464;
|
||||
$dividerBarColor: rgba(0, 0, 0, .1);
|
||||
$glossaryHeaderColor: lighten($gray, 35%);
|
||||
$blockQuoteBackgroundColor: $light-gray;
|
||||
$tipCalloutBackgroundColor: #f2fff2;
|
||||
$ideaCalloutBackgroundColor: lightyellow;
|
||||
$warningCalloutBackgroundColor: #ffeeee;
|
||||
$deprecatedBackgroundColor: silver;
|
||||
$preBlockShadowColor: #a7a7a7;
|
||||
$preBlockBorderColor: #f2f2f2;
|
||||
$preBlockBackgroundColor: $backgroundColor;
|
||||
$preBlockCommandOutputTextColor: $textColor;
|
||||
$preBlockCommandOutputBackgroundColor: lighten($gray, 50%);
|
||||
$boxBorderColor: $secondBrandColor;
|
||||
|
||||
$dropdownBorderColor: black;
|
||||
$dropdownCheck: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='black' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");
|
||||
$dropdownHoverCheck: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='white' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");
|
||||
|
||||
$popoverBorderColor: #777777;
|
||||
$popoverShadowColor: #777777;
|
||||
$popoverHeaderBackgroundColor: $light-gray;
|
||||
$popoverHeaderTextColor: $textColor;
|
||||
$popoverBackgroundColor: $backgroundColor;
|
||||
$popoverTextColor: $textColor;
|
||||
|
||||
$headerLightShadowColor: rgba(0, 0, 0, .14);
|
||||
$headerDarkShadowColor: rgba(0, 0, 0, .28);
|
||||
|
||||
$figureBackgroundColor: $backgroundColor;
|
||||
$figureCaptionColor: $textColor;
|
||||
|
||||
$heroLogoColor: $mainBrandColor;
|
||||
$landingPanelBackgroundColor: $light-gray;
|
||||
$landingPanelBorderColor: #dddddd;
|
||||
$landingPanelTextColor: $textColor;
|
||||
$landingPanelShadowColor: #a7a7a7;
|
||||
$landingPanelShadowHoverColor: #a7a7ee;
|
||||
|
||||
$floatingButtonColor: rgba(0, 0, 0, .4);
|
||||
$floatingButtonHoverColor: $textBrandHighlightColor;
|
||||
|
||||
$companyLogoBackgroundColor: $backgroundColor;
|
||||
$companyLogoTaglineColor: $textColor;
|
||||
|
||||
$textWeight: 400;
|
||||
$linkWeight: 400;
|
||||
$h1Weight: 400;
|
||||
$h2Weight: 400;
|
||||
$h3Weight: 500;
|
||||
$h4Weight: 500;
|
||||
$h5Weight: 500;
|
||||
$h6Weight: 500;
|
||||
$tableHeaderWeight: 400;
|
||||
$boldTextWeight: 700;
|
||||
$heroLeadWeight: 300;
|
||||
$blogAttributeWeight: 600;
|
||||
$sectionIndexLinkWeight: 400;
|
||||
$buttonWeight: 400;
|
||||
$tocLinkWeight: 400;
|
||||
$sidebarLinkWeight: 400;
|
||||
$sidebarCurrentPageWeight: 500;
|
||||
$glossaryHeaderWeight: 300;
|
||||
$glossaryWordWeight: 500;
|
||||
$figureCaptionWeight: 400;
|
||||
$textCodeWeight: $textWeight;
|
||||
$faqQuestionWeight: 400;
|
||||
Loading…
Reference in New Issue