nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-27 01:33:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

variant: build a color variant generator #188

Browse source
This commit is contained in:
Sören Weber 2022-02-19 00:46:34 +01:00
parent f81800ceaf
commit e9fa08dcf7
No known key found for this signature in database
GPG key ID: 07D17FF580AE7589
15 changed files with 459 additions and 167 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
exampleSite/config.toml
View file

@ -38,6 +38,10 @@ title = "Hugo Relearn Documentation"
titleSeparator = "::"
themeVariant = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ]
disableSeoHiddenPages = true
# this is for the stylesheet genertor to allow for interactivity in mermaid
# graphs; you usually will not need it and you should remove this for
# security reasons
mermaidInitialize = "{ \"securityLevel\": \"loose\"}"
[outputs]
# add JSON to the home page to support lunr search; This is a mandatory setting

7
exampleSite/content/basics/customization/_index.en.md
View file

@ -155,13 +155,6 @@ First, create a new CSS file in your local `static/css` folder prefixed by `them
--BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color of the title text */
--BOX-BG-color: rgba( 255, 255, 255, .833 ); /* color of the content background */
--BOX-TEXT-color: rgba( 16, 16, 16, 1 ); /* fixed color of the content text */
/* optional base colors for colored boxes as in attachments and notice shortcode */
--BOX-BLUE-color: rgba( 48, 117, 229, 1 );
--BOX-GREEN-color: rgba( 42, 178, 24, 1 );
--BOX-GREY-color: rgba( 128, 128, 128, 1 );
--BOX-ORANGE-color: rgba( 237, 153, 9, 1 );
--BOX-RED-color: rgba( 224, 62, 62, 1 );
}
```

247
exampleSite/content/basics/generator/_index.en.md Normal file
View file

@ -0,0 +1,247 @@
+++
title = "Stylesheet generator"
weight = 26
hidden = true
+++
This interactive tool may help you to generate your own color variant stylesheet.
To get started, first select a color variant from the theme selector that fits you best as a starting point.
The graph is interactive and reflect the current colors. You can click on any of the colored boxes to adjust the respective color. The graph and the page will update accordingly.
The arrowed lines reflect how colors are inherited thru different parts of the theme if the descendent isn't overwritten. If you want to delete a color and let it inherit from its parent, just delete the value from the input field.
This is best seen in the `neon` variant with the differnet headings colors. There, colors for the heading `h1`, `h2`, `h3` and `h4` are explicitly set. `h5` is not set and inherits its value from `h4`. `h6` is also not set and inherits its value from `h5`.
## Variant generator
<div id="vargenerator" class="mermaid" style="background-color: var(--INTERNAL-MAIN-TEXT-color);" align="center">Graph</div>
<script>
function initGraph(){
var graphDefinition = generateGraph();
var element = document.querySelector( '#vargenerator' );
element.innerHTML = graphDefinition;
var interval_id = setInterval( function(){
if( document.querySelectorAll( '#vargenerator.mermaid > svg' ).length ){
clearInterval( interval_id );
generateGraphStyles();
}
}, 100 );
};
function adjustCSSRules(selector, props, sheets){
// get stylesheet(s)
if (!sheets) sheets = [...document.styleSheets];
else if (sheets.sup){ // sheets is a string
let absoluteURL = new URL(sheets, document.baseURI).href;
sheets = [...document.styleSheets].filter(i => i.href == absoluteURL);
}
else sheets = [sheets]; // sheets is a stylesheet
// CSS (& HTML) reduce spaces in selector to one.
selector = selector.replace(/\s+/g, ' ');
const findRule = s => [...s.cssRules].reverse().find(i => i.selectorText == selector)
let rule = sheets.map(findRule).filter(i=>i).pop()
const propsArr = props.sup
? props.split(/\s*;\s*/).map(i => i.split(/\s*:\s*/)) // from string
: Object.entries(props); // from Object
if (rule) for (let [prop, val] of propsArr){
// rule.style[prop] = val; is against the spec, and does not support !important.
rule.style.setProperty(prop, ...val.split(/ *!(?=important)/));
}
else {
sheet = sheets.pop();
if (!props.sup) props = propsArr.reduce((str, [k, v]) => `${str}; ${k}: ${v}`, '');
sheet.insertRule(`${selector} { ${props} }`, sheet.cssRules.length);
}
}
function changeColor( c ){
var style = null;
var theme = getTheme();
for( var n = 0; n < document.styleSheets.length; ++n ){
if( theme = parseTheme( document.styleSheets[n].href ) ){
var s = document.styleSheets[n];
for( var m = 0; m < s.rules.length; ++m ){
if( s.rules[m].selectorText == ':root' ){
style = s.rules[m].style;
break;
}
}
break;
}
}
if( !style ){
alert( 'Theme stylesheet for theme "' + theme + '" not set or found' );
return;
}
var r = document.querySelector( ':root' );
var v = getComputedStyle( document.documentElement ).getPropertyValue( '--INTERNAL-'+c ).trim();
var n = prompt( '--'+c, v ).trim();
if( n ){
r = style.quer
style.setProperty( '--'+c, n );
}
else{
style.removeProperty( '--'+c );
}
}
function styleGroup( selector, colorvar ){
adjustCSSRules( '#body svg '+selector+' > rect', 'color: var(--INTERNAL-'+colorvar+'); fill: var(--INTERNAL-'+colorvar+'); stroke: #80808080;' );
adjustCSSRules( '#body svg '+selector+' > .label .nodeLabel', 'color: var(--INTERNAL-'+colorvar+'); fill: var(--INTERNAL-'+colorvar+'); stroke: #80808080;' );
adjustCSSRules( '#body svg '+selector+' > .cluster-label .nodeLabel', 'color: var(--INTERNAL-'+colorvar+'); fill: var(--INTERNAL-'+colorvar+'); stroke: #80808080;' );
// adjustCSSRules( '#body svg '+selector+' rect', 'stroke: #80808080;' );
adjustCSSRules( '#body svg '+selector+' .nodeLabel', 'filter: grayscale(1) invert(1) contrast(10000);' );
}
function generateGraphStyles(){
variables.forEach( function( e ){
styleGroup( '.'+e.name, e.name );
});
//styleGroup( '.root', 'MAIN-TEXT-color' )
styleGroup( '#maincontent', 'MAIN-BG-color' )
styleGroup( '#mainheadings', 'MAIN-BG-color' )
styleGroup( '#inlinecode', 'CODE-INLINE-BG-color' )
styleGroup( '#blockcode', 'CODE-BLOCK-BG-color' )
styleGroup( '#coloredboxes', 'BOX-BG-color' );
styleGroup( '#menu', 'MENU-SECTIONS-BG-color' )
styleGroup( '#menuheader', 'MENU-HEADER-BG-color' )
styleGroup( '#menusections', 'MENU-SECTIONS-ACTIVE-BG-color' )
}
function generateGraph(){
var g_groups = {};
var g_edges = '';
var g_handler = '';
variables.forEach( function( e ){
var group = e.group || ' ';
g_groups[ group ] = ( g_groups[ group ] || [] ).concat( e.name );
if( e.fallback ){
g_edges += ' ' + e.fallback+':::'+e.fallback+' --> '+e.name+':::'+e.name+';\n';
}
g_handler += ' click '+e.name+' changeColor\n';
});
var graph =
'flowchart RL\n' +
' subgraph menu["menu"]\n' +
' direction TB\n' +
' subgraph menuheader["header"]\n' +
' direction LR\n' +
g_groups[ 'header' ].reduce( function( a, e ){ return a + ' ' + e + '\n'; }, '' ) +
' end\n' +
' subgraph menusections["sections"]\n' +
' direction LR\n' +
g_groups[ 'sections' ].reduce( function( a, e ){ return a + ' ' + e + '\n'; }, '' ) +
' end\n' +
' end\n' +
' subgraph maincontent["content"]\n' +
' direction TB\n' +
g_groups[ 'content' ].reduce( function( a, e ){ return a + ' ' + e + '\n'; }, '' ) +
' subgraph mainheadings["headings"]\n' +
' direction LR\n' +
g_groups[ 'headings' ].reduce( function( a, e ){ return a + ' ' + e + '\n'; }, '' ) +
' end\n' +
' subgraph inlinecode["inline code"]\n' +
' direction LR\n' +
g_groups[ 'inline code' ].reduce( function( a, e ){ return a + ' ' + e + '\n'; }, '' ) +
' end\n' +
' subgraph blockcode["code blocks"]\n' +
' direction LR\n' +
g_groups[ 'code blocks' ].reduce( function( a, e ){ return a + ' ' + e + '\n'; }, '' ) +
' end\n' +
' subgraph coloredboxes["colored boxes"]\n' +
' direction LR\n' +
g_groups[ 'colored boxes' ].reduce( function( a, e ){ return a + ' ' + e + '\n'; }, '' ) +
' end\n' +
' end\n' +
' class MENU-SECTIONS-BG-color menu\n' +
g_edges +
g_handler;
console.log( graph );
return graph;
}
var variables = [
{ name: 'MAIN-TEXT-color', group: 'content', default: '#101010' },
{ name: 'MAIN-LINK-color', group: 'content', default: '#486ac9' },
{ name: 'MAIN-LINK-HOVER-color', group: 'content', fallback: 'MAIN-LINK-color' },
{ name: 'MAIN-ANCHOR-color', group: 'content', fallback: 'MAIN-LINK-color' },
{ name: 'MAIN-BG-color', group: 'content', default: '#ffffff' },
{ name: 'TAG-BG-color', group: 'content', fallback: 'MENU-HEADER-BG-color' },
{ name: 'MAIN-TITLES-color', group: 'headings', default: '#444753' },
{ name: 'MAIN-TITLES-H1-color', group: 'headings', fallback: 'MAIN-TEXT-color' },
{ name: 'MAIN-TITLES-H2-color', group: 'headings', fallback: 'MAIN-TITLES-color' },
{ name: 'MAIN-TITLES-H3-color', group: 'headings', fallback: 'MAIN-TITLES-H2-color' },
{ name: 'MAIN-TITLES-H4-color', group: 'headings', fallback: 'MAIN-TITLES-H3-color' },
{ name: 'MAIN-TITLES-H5-color', group: 'headings', fallback: 'MAIN-TITLES-H4-color' },
{ name: 'MAIN-TITLES-H6-color', group: 'headings', fallback: 'MAIN-TITLES-H5-color' },
{ name: 'CODE-BLOCK-color', group: 'code blocks', default: '#000000' },
{ name: 'CODE-BLOCK-BG-color', group: 'code blocks', default: '#f8f8f8' },
{ name: 'CODE-BLOCK-BORDER-color', group: 'code blocks', fallback: 'CODE-BLOCK-BG-color' },
{ name: 'CODE-INLINE-color', group: 'inline code', default: '#5e5e5e' },
{ name: 'CODE-INLINE-BG-color', group: 'inline code', default: '#fffae9' },
{ name: 'CODE-INLINE-BORDER-color', group: 'inline code', fallback: 'CODE-INLINE-BG-color' },
{ name: 'MENU-HEADER-BG-color', group: 'header', default: '#7dc903' },
{ name: 'MENU-HEADER-BORDER-color', group: 'header', fallback: 'MENU-HEADER-BG-color' },
{ name: 'MENU-HOME-LINK-color', group: 'header', default: '#323232' },
{ name: 'MENU-HOME-LINK-HOVER-color', group: 'header', default: '#808080' },
{ name: 'MENU-SEARCH-color', group: 'header', default: '#e0e0e0' },
{ name: 'MENU-SEARCH-BG-color', group: 'header', default: '#323232' },
{ name: 'MENU-SEARCH-BOX-color', group: 'header', fallback: 'MENU-SEARCH-BG-color' },
{ name: 'MENU-SECTIONS-BG-color', group: 'sections', default: '#282830' },
{ name: 'MENU-SECTIONS-ACTIVE-BG-color', group: 'sections', default: '#202028' },
{ name: 'MENU-SECTION-ACTIVE-CATEGORY-color', group: 'sections', default: '#444444' },
{ name: 'MENU-SECTION-ACTIVE-CATEGORY-BG-color', group: 'sections', fallback: 'MAIN-BG-color' },
{ name: 'MENU-SECTIONS-LINK-color', group: 'sections', default: '#bababa' },
{ name: 'MENU-SECTIONS-LINK-HOVER-color', group: 'sections', fallback: 'MENU-SECTIONS-LINK-color' },
{ name: 'MENU-VISITED-color', group: 'sections', default: '#506397' },
{ name: 'MENU-SECTION-HR-color', group: 'sections', default: '#606060' },
{ name: 'BOX-CAPTION-color', group: 'colored boxes', default: 'rgba( 255, 255, 255, 1 )' },
{ name: 'BOX-BG-color', group: 'colored boxes', default: 'rgba( 255, 255, 255, .833 )' },
{ name: 'BOX-TEXT-color', group: 'colored boxes', default: 'rgba( 16, 16, 16, 1 )' },
{ name: 'BOX-BLUE-color', group: 'colored boxes', default: 'rgba( 48, 117, 229, 1 )' },
{ name: 'BOX-INFO-color', group: 'colored boxes', fallback: 'BOX-BLUE-color' },
{ name: 'BOX-BLUE-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color' },
{ name: 'BOX-INFO-TEXT-color', group: 'colored boxes', fallback: 'BOX-BLUE-TEXT-color' },
{ name: 'BOX-GREEN-color', group: 'colored boxes', default: 'rgba( 42, 178, 24, 1 )' },
{ name: 'BOX-TIP-color', group: 'colored boxes', fallback: 'BOX-GREEN-color' },
{ name: 'BOX-GREEN-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color' },
{ name: 'BOX-TIP-TEXT-color', group: 'colored boxes', fallback: 'BOX-GREEN-TEXT-color' },
{ name: 'BOX-GREY-color', group: 'colored boxes', default: 'rgba( 128, 128, 128, 1 )' },
{ name: 'BOX-NEUTRAL-color', group: 'colored boxes', fallback: 'BOX-GREY-color' },
{ name: 'BOX-GREY-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color' },
{ name: 'BOX-NEUTRAL-TEXT-color', group: 'colored boxes', fallback: 'BOX-GREY-TEXT-color' },
{ name: 'BOX-ORANGE-color', group: 'colored boxes', default: 'rgba( 237, 153, 9, 1 )' },
{ name: 'BOX-NOTE-color', group: 'colored boxes', fallback: 'BOX-ORANGE-color' },
{ name: 'BOX-ORANGE-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color' },
{ name: 'BOX-NOTE-TEXT-color', group: 'colored boxes', fallback: 'BOX-ORANGE-TEXT-color' },
{ name: 'BOX-RED-color', group: 'colored boxes', default: 'rgba( 237, 153, 9, 1 )' },
{ name: 'BOX-WARNING-color', group: 'colored boxes', fallback: 'BOX-RED-color' },
{ name: 'BOX-RED-TEXT-color', group: 'colored boxes', fallback: 'BOX-TEXT-color' },
{ name: 'BOX-WARNING-TEXT-color', group: 'colored boxes', fallback: 'BOX-RED-TEXT-color' },
];
initGraph();
</script>

6
exampleSite/content/basics/generator/_index.pir.md Normal file
View file

@ -0,0 +1,6 @@
+++
title = "Stylesheet generrrat'r"
weight = 26
hidden = true
+++
{{< piratify >}}

10
layouts/partials/stylesheet.html
View file

@ -32,13 +32,21 @@
{{ "// on page load if the user has selected a non default variant" | safeJS }}
var theme = window.localStorage.getItem( 'theme' );
changeTheme( theme );
function parseTheme( s ){
if( !s || !s.match ){
return '';
}
var matches = s.match(/^.*\/theme-(.*?)\.css.*$/);
var theme = matches && matches.length == 2 ? matches[ 1 ] : '';
return theme;
}
function getTheme(){
var link = document.querySelector( '#variant-style' );
if( !link ){
return;
}
var path = link.getAttribute( 'href' );
var theme = path.match(/^.*\/theme-(.*?)\.css.*$/)[ 1 ];
var theme = parseTheme( path );
return theme;
}
function markTheme( theme ){

7
static/css/theme-blue.css
View file

@ -46,11 +46,4 @@
--BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color of the title text */
--BOX-BG-color: rgba( 255, 255, 255, .833 ); /* color of the content background */
--BOX-TEXT-color: rgba( 16, 16, 16, 1 ); /* fixed color of the content text */
/* optional base colors for colored boxes as in attachments and notice shortcode */
--BOX-BLUE-color: rgba( 48, 117, 229, 1 );
--BOX-GREEN-color: rgba( 42, 178, 24, 1 );
--BOX-GREY-color: rgba( 128, 128, 128, 1 );
--BOX-ORANGE-color: rgba( 237, 153, 9, 1 );
--BOX-RED-color: rgba( 224, 62, 62, 1 );
}

7
static/css/theme-green.css
View file

@ -46,11 +46,4 @@
--BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color of the title text */
--BOX-BG-color: rgba( 255, 255, 255, .833 ); /* color of the content background */
--BOX-TEXT-color: rgba( 16, 16, 16, 1 ); /* fixed color of the content text */
/* optional base colors for colored boxes as in attachments and notice shortcode */
--BOX-BLUE-color: rgba( 48, 117, 229, 1 );
--BOX-GREEN-color: rgba( 42, 178, 24, 1 );
--BOX-GREY-color: rgba( 128, 128, 128, 1 );
--BOX-ORANGE-color: rgba( 237, 153, 9, 1 );
--BOX-RED-color: rgba( 224, 62, 62, 1 );
}

7
static/css/theme-learn.css
View file

@ -46,11 +46,4 @@
--BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color of the title text */
--BOX-BG-color: rgba( 255, 255, 255, .833 ); /* color of the content background */
--BOX-TEXT-color: rgba( 16, 16, 16, 1 ); /* fixed color of the content text */
/* optional base colors for colored boxes as in attachments and notice shortcode */
--BOX-BLUE-color: rgba( 48, 117, 229, 1 );
--BOX-GREEN-color: rgba( 42, 178, 24, 1 );
--BOX-GREY-color: rgba( 128, 128, 128, 1 );
--BOX-ORANGE-color: rgba( 237, 153, 9, 1 );
--BOX-RED-color: rgba( 224, 62, 62, 1 );
}

11
static/css/theme-neon.css
View file

@ -7,10 +7,9 @@
:root {
--MAIN-TEXT-color: #e0e0e0; /* Color of text by default */
--MAIN-TITLES-TEXT-color: #ffffff; /* Color of titles h2-h3-h4-h5-h6 */
--MAIN-TITLES-TEXT-color: #f300b2; /* Color of titles h2-h3-h4-h5-h6 */
/* optional overwrites for specific headers */
--MAIN-TITLES-H2-color: #f300b2; /* Color of h2 headlines */
--MAIN-TITLES-H3-color: #00f3d3; /* Color of h3 headlines */
--MAIN-TITLES-H4-color: #ffff00; /* Color of h4 headlines */
@ -33,7 +32,7 @@
--MENU-HOME-LINK-color: #323232; /* Color of the home button text */
--MENU-HOME-LINK-HOVER-color: #5e5e5e; /* Color of the hovered home button text */
--MENU-HEADER-BG-color: unset; /* Background color of menu header */
--MENU-HEADER-BG-color: transparent; /* Background color of menu header */
--MENU-HEADER-BORDER-color: transparent; /*Color of menu header border */
--MENU-SEARCH-color: #e0e0e0; /* Color of search field text */
@ -61,4 +60,10 @@
--BOX-GREY-color: rgba( 128, 128, 128, 1 );
--BOX-ORANGE-color: rgba( 237, 153, 9, 1 );
--BOX-RED-color: rgba( 224, 62, 62, 1 );
--BOX-BLUE-TEXT-color: var(--BOX-BLUE-color);
--BOX-GREEN-TEXT-color: var(--BOX-GREEN-color);
--BOX-GREY-TEXT-color: var(--BOX-GREY-color);
--BOX-ORANGE-TEXT-color: var(--BOX-ORANGE-color);
--BOX-RED-TEXT-color: var(--BOX-RED-color);
}

7
static/css/theme-red.css
View file

@ -46,11 +46,4 @@
--BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color of the title text */
--BOX-BG-color: rgba( 255, 255, 255, .833 ); /* color of the content background */
--BOX-TEXT-color: rgba( 16, 16, 16, 1 ); /* fixed color of the content text */
/* optional base colors for colored boxes as in attachments and notice shortcode */
--BOX-BLUE-color: rgba( 48, 117, 229, 1 );
--BOX-GREEN-color: rgba( 42, 178, 24, 1 );
--BOX-GREY-color: rgba( 128, 128, 128, 1 );
--BOX-ORANGE-color: rgba( 237, 153, 9, 1 );
--BOX-RED-color: rgba( 224, 62, 62, 1 );
}

7
static/css/theme-relearn-dark.css
View file

@ -46,11 +46,4 @@
--BOX-CAPTION-color: rgba( 240, 240, 240, 1 ); /* color of the title text */
--BOX-BG-color: rgba( 20, 20, 20, 1 ); /* color of the content background */
--BOX-TEXT-color: initial; /* automatic color of the content text */
/* optional base colors for colored boxes as in attachments and notice shortcode */
--BOX-BLUE-color: rgba( 48, 117, 229, 1 );
--BOX-GREEN-color: rgba( 42, 178, 24, 1 );
--BOX-GREY-color: rgba( 128, 128, 128, 1 );
--BOX-ORANGE-color: rgba( 237, 153, 9, 1 );
--BOX-RED-color: rgba( 224, 62, 62, 1 );
}

7
static/css/theme-relearn-light.css
View file

@ -46,11 +46,4 @@
--BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color of the title text */
--BOX-BG-color: rgba( 255, 255, 255, .833 ); /* color of the content background */
--BOX-TEXT-color: rgba( 16, 16, 16, 1 ); /* fixed color of the content text */
/* optional base colors for colored boxes as in attachments and notice shortcode */
--BOX-BLUE-color: rgba( 48, 117, 229, 1 );
--BOX-GREEN-color: rgba( 42, 178, 24, 1 );
--BOX-GREY-color: rgba( 128, 128, 128, 1 );
--BOX-ORANGE-color: rgba( 237, 153, 9, 1 );
--BOX-RED-color: rgba( 224, 62, 62, 1 );
}

50
static/css/theme.css
View file

@ -450,7 +450,6 @@ blockquote cite {
div.box {
background-color: #808080; /* var(--INTERNAL-BOX-NEUTRAL-color) */
color: #808080; /* var(--INTERNAL-BOX-NEUTRAL-color) */
-webkit-print-color-adjust: exact;
color-adjust: exact;
margin: 1.5rem 0;
@ -487,7 +486,6 @@ div.box > .box-content > :last-child {
div.box.info {
background-color: rgba( 48, 117, 229, 1 ); /* var(--INTERNAL-BOX-INFO-color) */
color: rgba( 48, 117, 229, 1 ); /* var(--INTERNAL-BOX-INFO-color) */
}
div.box.info > .box-label:first-child:before {
@ -496,9 +494,12 @@ div.box.info > .box-label:first-child:before {
margin-right: .35rem;
}
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) */
color: rgba( 224, 62, 62, 1 ); /* var(--INTERNAL-BOX-WARNING-color) */
}
div.box.warning > .box-label:first-child:before {
@ -507,9 +508,12 @@ div.box.warning > .box-label:first-child:before {
margin-right: .35rem;
}
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) */
color: rgba( 237, 153, 9, 1 ); /* var(--INTERNAL-BOX-NOTE-color) */
}
div.box.note > .box-label:first-child:before {
@ -518,9 +522,12 @@ div.box.note > .box-label:first-child:before {
margin-right: .35rem;
}
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) */
color: rgba( 42, 178, 24, 1 ); /* var(--INTERNAL-BOX-TIP-color) */
}
div.box.tip > .box-label:first-child:before {
@ -529,42 +536,61 @@ div.box.tip > .box-label:first-child:before {
margin-right: .35rem;
}
div.box.tip > .box-content {
color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-TIP-TEXT-color) */
}
div.box.blue {
background-color: rgba( 48, 117, 229, 1 ); /* var(--INTERNAL-BOX-BLUE-color) */
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) */
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) */
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) */
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) */
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 {
background-color: transparent;
color: #ffffff; /* var(--MAIN-TEXT-color) */
}
div.box.transparent > .box-label {
color: #7c7c7c; /* var(--MAIN-TITLES-TEXT-color) */
color: #444753; /* var(--MAIN-TITLES-TEXT-color) */
}
div.box.transparent > .box-content {
background-color: transparent;
color: #101010; /* var(--MAIN-TEXT-color) */
}
/* attachments shortcode */

216
static/css/variant.css
View file

@ -1,14 +1,50 @@
:root {
--INTERNAL-TAG-BG-color: var(--TAG-BG-color, var(--MENU-HEADER-BG-color));
--INTERNAL-MAIN-TEXT-color: var(--MAIN-TEXT-color, #101010);
--INTERNAL-MAIN-TITLES-TEXT-color: var(--MAIN-TITLES-TEXT-color, #444753);
--INTERNAL-MAIN-LINK-color: var(--MAIN-LINK-color, #486ac9);
--INTERNAL-MAIN-LINK-HOVER-color: var(--MAIN-LINK-HOVER-color, var(--INTERNAL-MAIN-LINK-color));
--INTERNAL-MAIN-ANCHOR-color: var(--MAIN-ANCHOR-color, var(--INTERNAL-MAIN-LINK-color));
--INTERNAL-MAIN-BG-color: var(--MAIN-BG-color, #ffffff);
--INTERNAL-MAIN-TITLES-H1-color: var(--MAIN-TITLES-H1-color, var(--MAIN-TEXT-color));
--INTERNAL-MAIN-TITLES-H2-color: var(--MAIN-TITLES-H2-color, var(--MAIN-TITLES-TEXT-color));
--INTERNAL-MAIN-TITLES-H1-color: var(--MAIN-TITLES-H1-color, var(--INTERNAL-MAIN-TEXT-color));
--INTERNAL-MAIN-TITLES-H2-color: var(--MAIN-TITLES-H2-color, var(--INTERNAL-MAIN-TITLES-TEXT-color));
--INTERNAL-MAIN-TITLES-H3-color: var(--MAIN-TITLES-H3-color, var(--INTERNAL-MAIN-TITLES-H2-color));
--INTERNAL-MAIN-TITLES-H4-color: var(--MAIN-TITLES-H4-color, var(--INTERNAL-MAIN-TITLES-H3-color));
--INTERNAL-MAIN-TITLES-H5-color: var(--MAIN-TITLES-H5-color, var(--INTERNAL-MAIN-TITLES-H4-color));
--INTERNAL-MAIN-TITLES-H6-color: var(--MAIN-TITLES-H6-color, var(--INTERNAL-MAIN-TITLES-H5-color));
--INTERNAL-BOX-TEXT-color: var(--BOX-TEXT-color);
--INTERNAL-CODE-BLOCK-color: var(--CODE-BLOCK-color, var(--MAIN-CODE-color, #000000));
--INTERNAL-CODE-BLOCK-BG-color: var(--CODE-BLOCK-BG-color, var(--MAIN-CODE-BG-color, #f8f8f8));
--INTERNAL-CODE-BLOCK-BORDER-color: var(--CODE-BLOCK-BORDER-color, var(--MAIN-CODE-BG-color, var(--INTERNAL-CODE-BLOCK-BG-color)));
--INTERNAL-CODE-INLINE-color: var(--CODE-INLINE-color, #5e5e5e);
--INTERNAL-CODE-INLINE-BG-color: var(--CODE-INLINE-BG-color, #fffae9);
--INTERNAL-CODE-INLINE-BORDER-color: var(--CODE-INLINE-BORDER-color, var(--INTERNAL-CODE-INLINE-BG-color));
--INTERNAL-TAG-BG-color: var(--TAG-BG-color, var(--INTERNAL-MENU-HEADER-BG-color));
--INTERNAL-MENU-HEADER-BG-color: var(--MENU-HEADER-BG-color, #7dc903);
--INTERNAL-MENU-HEADER-BORDER-color: var(--MENU-HEADER-BORDER-color, var(--INTERNAL-MENU-HEADER-BG-color));
--INTERNAL-MENU-HOME-LINK-color: var(--MENU-HOME-LINK-color, #323232);
--INTERNAL-MENU-HOME-LINK-HOVER-color: var(--MENU-HOME-LINK-HOVER-color, var(--MENU-HOME-LINK-HOVERED-color, #808080));
--INTERNAL-MENU-SEARCH-color: var(--MENU-SEARCH-color, #e0e0e0);
--INTERNAL-MENU-SEARCH-BG-color: var(--MENU-SEARCH-BG-color, #323232);
--INTERNAL-MENU-SEARCH-BOX-color: var(--MENU-SEARCH-BOX-color, var(--INTERNAL-MENU-SEARCH-BG-color));
--INTERNAL-MENU-SECTIONS-ACTIVE-BG-color: var(--MENU-SECTIONS-ACTIVE-BG-color, #202028);
--INTERNAL-MENU-SECTIONS-BG-color: var(--MENU-SECTIONS-BG-color, #282830);
--INTERNAL-MENU-SECTIONS-LINK-color: var(--MENU-SECTIONS-LINK-color, #bababa);
--INTERNAL-MENU-SECTIONS-LINK-HOVER-color: var(--MENU-SECTIONS-LINK-HOVER-color, var(--INTERNAL-MENU-SECTIONS-LINK-color));
--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color: var(--MENU-SECTION-ACTIVE-CATEGORY-color, #444444);
--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-BG-color: var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color, var(--INTERNAL-MAIN-BG-color));
--INTERNAL-MENU-VISITED-color: var(--MENU-VISITED-color, #506397);
--INTERNAL-MENU-SECTION-HR-color: var(--MENU-SECTION-HR-color, #606060);
--INTERNAL-BOX-CAPTION-color: var(--BOX-CAPTION-color, rgba( 255, 255, 255, 1 ));
--INTERNAL-BOX-BG-color: var(--BOX-BG-color, rgba( 255, 255, 255, .833 ));
--INTERNAL-BOX-TEXT-color: var(--BOX-TEXT-color, rgba( 16, 16, 16, 1 ));
--INTERNAL-BOX-BLUE-color: var(--BOX-BLUE-color, rgba( 48, 117, 229, 1 ));
--INTERNAL-BOX-GREEN-color: var(--BOX-GREEN-color, rgba( 42, 178, 24, 1 ));
@ -21,71 +57,83 @@
--INTERNAL-BOX-NOTE-color: var(--BOX-NOTE-color, var(--INTERNAL-BOX-ORANGE-color));
--INTERNAL-BOX-TIP-color: var(--BOX-TIP-color, var(--INTERNAL-BOX-GREEN-color));
--INTERNAL-BOX-WARNING-color: var(--BOX-WARNING-color, var(--INTERNAL-BOX-RED-color));
--INTERNAL-BOX-BLUE-TEXT-color: var(--BOX-BLUE-TEXT-color, var(--INTERNAL-BOX-TEXT-color));
--INTERNAL-BOX-GREEN-TEXT-color: var(--BOX-GREEN-TEXT-color, var(--INTERNAL-BOX-TEXT-color));
--INTERNAL-BOX-GREY-TEXT-color: var(--BOX-GREY-TEXT-color, var(--INTERNAL-BOX-TEXT-color));
--INTERNAL-BOX-ORANGE-TEXT-color: var(--BOX-ORANGE-TEXT-color, var(--INTERNAL-BOX-TEXT-color));
--INTERNAL-BOX-RED-TEXT-color: var(--BOX-RED-TEXT-color, var(--INTERNAL-BOX-TEXT-color));
--INTERNAL-BOX-INFO-TEXT-color: var(--BOX-INFO-TEXT-color, var(--INTERNAL-BOX-BLUE-TEXT-color));
--INTERNAL-BOX-NEUTRAL-TEXT-color: var(--BOX-NEUTRAL-TEXT-color, var(--INTERNAL-BOX-GREY-TEXT-color));
--INTERNAL-BOX-NOTE-TEXT-color: var(--BOX-NOTE-TEXT-color, var(--INTERNAL-BOX-ORANGE-TEXT-color));
--INTERNAL-BOX-TIP-TEXT-color: var(--BOX-TIP-TEXT-color, var(--INTERNAL-BOX-GREEN-TEXT-color));
--INTERNAL-BOX-WARNING-TEXT-color: var(--BOX-WARNING-TEXT-color, var(--INTERNAL-BOX-RED-TEXT-color));
}
body {
background-color: var(--MAIN-BG-color, #ffffff);
color: var(--MAIN-TEXT-color);
background-color: var(--INTERNAL-MAIN-BG-color);
color: var(--INTERNAL-MAIN-TEXT-color);
}
a,
#toc-menu {
color: var(--MAIN-LINK-color);
color: var(--INTERNAL-MAIN-LINK-color);
}
a:hover,
#toc-menu:hover,
#body a.highlight:after {
color: var(--MAIN-LINK-HOVER-color);
color: var(--INTERNAL-MAIN-LINK-HOVER-color);
}
#sidebar {
background: var(--MENU-SECTIONS-BG-color);
background: var(--INTERNAL-MENU-SECTIONS-BG-color);
}
#header-wrapper {
background-color: var(--MENU-HEADER-BG-color);
color: var(--MENU-SEARCH-color, #efefef);
border-color: var(--MENU-HEADER-BORDER-color);
background-color: var(--INTERNAL-MENU-HEADER-BG-color);
color: var(--INTERNAL-MENU-SEARCH-color);
border-color: var(--INTERNAL-MENU-HEADER-BORDER-color);
}
.searchbox {
border-color: var(--MENU-SEARCH-BOX-color);
background-color: var(--MENU-SEARCH-BG-color);
border-color: var(--INTERNAL-MENU-SEARCH-BOX-color);
background-color: var(--INTERNAL-MENU-SEARCH-BG-color);
}
#sidebar a {
color: var(--MENU-SECTIONS-LINK-color);
color: var(--INTERNAL-MENU-SECTIONS-LINK-color);
}
#sidebar a:hover {
color: var(--MENU-SECTIONS-LINK-HOVER-color);
color: var(--INTERNAL-MENU-SECTIONS-LINK-HOVER-color);
}
#sidebar ul.topics > li.parent,
#sidebar ul.topics > li.active {
background-color: var(--MENU-SECTIONS-ACTIVE-BG-color);
background-color: var(--INTERNAL-MENU-SECTIONS-ACTIVE-BG-color);
}
#sidebar ul li.active > a {
background-color: var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color);
color: var(--MENU-SECTION-ACTIVE-CATEGORY-color);
background-color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-BG-color);
color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color);
}
#sidebar ul li.visited > a .read-icon {
color: var(--MENU-VISITED-color);
color: var(--INTERNAL-MENU-VISITED-color);
}
#sidebar .nav-title {
color: var(--MENU-SECTIONS-LINK-HOVER-color);
color: var(--INTERNAL-MENU-SECTIONS-LINK-HOVER-color);
}
#sidebar hr {
border-color: var(--MENU-SECTION-HR-color);
border-color: var(--INTERNAL-MENU-SECTION-HR-color);
}
#footer {
color: var(--MENU-SECTIONS-LINK-color);
color: var(--INTERNAL-MENU-SECTIONS-LINK-color);
}
h1 {
@ -113,85 +161,85 @@ h6 {
}
code {
background-color: var(--CODE-INLINE-BG-color, #fffae9);
border-color: var(--CODE-INLINE-BORDER-color, #f8e8c8);
color: var(--CODE-INLINE-color, #5e5e5e);
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(--CODE-BLOCK-BG-color, var(--MAIN-CODE-BG-color, #f8f8f8));
border-color: var(--CODE-BLOCK-BORDER-color, var(--MAIN-CODE-BG-color, #f8f8f8));
color: var(--CODE-BLOCK-color, var(--MAIN-CODE-color, #000000));
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(--MAIN-BG-color, #ffffff);
background-color: var(--INTERNAL-MAIN-BG-color);
}
#top-bar {
background-color: var(--MAIN-BG-color, #ffffff);
body #top-bar {
background-color: var(--INTERNAL-MAIN-BG-color);
}
.copy-to-clipboard-button {
background-color: var(--CODE-INLINE-BG-color, #fffae9);
border-color: var(--CODE-INLINE-BORDER-color, #f8e8c8);
color: var(--CODE-INLINE-color, #5e5e5e);
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(--CODE-INLINE-color, #5e5e5e);
color: var(--CODE-INLINE-BG-color, #fffae9);
background-color: var(--INTERNAL-CODE-INLINE-color);
color: var(--INTERNAL-CODE-INLINE-BG-color);
}
pre .copy-to-clipboard-button {
border-color: var(--CODE-BLOCK-BORDER-color, #d8d8d8);
color: var(--MAIN-LINK-color, #486ac9);
border-color: var(--INTERNAL-CODE-BLOCK-BORDER-color);
color: var(--INTERNAL-MAIN-LINK-color);
}
pre .copy-to-clipboard-button:hover {
background-color: var(--MAIN-LINK-color, #486ac9);
border-color: var(--MAIN-LINK-color, #486ac9);
color: var(--CODE-BLOCK-BG-color, #f8f8f8);
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(--MENU-HEADER-BORDER-color);
border-bottom-color: var(--MENU-HEADER-BORDER-color);
background-color: var(--INTERNAL-MENU-HEADER-BORDER-color);
border-bottom-color: var(--INTERNAL-MENU-HEADER-BORDER-color);
}
#homelinks a {
color: var(--MENU-HOME-LINK-color, #323232);
color: var(--INTERNAL-MENU-HOME-LINK-color);
}
#homelinks a:hover {
color: var(--MENU-HOME-LINK-HOVER-color, var(--MENU-HOME-LINK-HOVERED-color, #808080));
color: var(--INTERNAL-MENU-HOME-LINK-HOVER-color);
}
#body a.highlight:after {
background-color: var(--MAIN-LINK-color);
background-color: var(--INTERNAL-MAIN-LINK-color);
}
.progress {
background-color: var(--MAIN-BG-color, #ffffff);
background-color: var(--INTERNAL-MAIN-BG-color);
}
.btn-default {
color: var(--MAIN-TEXT-color) !important;
color: var(--INTERNAL-MAIN-TEXT-color) !important;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active {
color: var(--MAIN-BG-color, #ffffff) !important;
color: var(--INTERNAL-MAIN-BG-color) !important;
}
.anchor {
color: var(--MAIN-ANCHOR-color);
color: var(--INTERNAL-MAIN-ANCHOR-color);
}
#body .tags a.tag-link {
background-color: var(--INTERNAL-TAG-BG-color);
color: var(--MAIN-BG-color, #ffffff);
color: var(--INTERNAL-MAIN-BG-color);
}
#body .tags a.tag-link:before {
@ -199,77 +247,103 @@ pre .copy-to-clipboard-button:hover {
}
#body .tags a.tag-link:after {
background-color: var(--MAIN-BG-color, #ffffff);
background-color: var(--INTERNAL-MAIN-BG-color);
}
#body .tab-nav-button.active {
background-color: var(--MAIN-BG-color, #ffffff) !important;
border-bottom-color: var(--MAIN-BG-color, #ffffff) !important;
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);
color: var(--INTERNAL-BOX-NEUTRAL-color);
}
div.box > .box-label {
color: var(--BOX-CAPTION-color, rgba( 255, 255, 255, 1 ));
color: var(--INTERNAL-BOX-CAPTION-color);
}
div.box > .box-content {
background-color: var(--BOX-BG-color, rgba( 255, 255, 255, .833 ));
color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-TEXT-color));
background-color: var(--INTERNAL-BOX-BG-color);
color: var(--INTERNAL-BOX-NEUTRAL-TEXT-color);
}
div.box.info {
background-color: var(--INTERNAL-BOX-INFO-color);
color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-INFO-color));
}
div.box.info > .box-content {
color: var(--INTERNAL-BOX-INFO-TEXT-color);
}
div.box.warning {
background-color: var(--INTERNAL-BOX-WARNING-color);
color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-WARNING-color));
}
div.box.warning > .box-content {
color: var(--INTERNAL-BOX-WARNING-TEXT-color);
}
div.box.note {
background-color: var(--INTERNAL-BOX-NOTE-color);
color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-NOTE-color));
}
div.box.note > .box-content {
color: var(--INTERNAL-BOX-NOTE-TEXT-color);
}
div.box.tip {
background-color: var(--INTERNAL-BOX-TIP-color);
color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-TIP-color));
}
div.box.tip > .box-content {
color: var(--INTERNAL-BOX-TIP-TEXT-color);
}
div.box.blue {
background-color: var(--INTERNAL-BOX-BLUE-color);
color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-BLUE-color));
}
div.box.blue > .box-content {
color: var(--INTERNAL-BOX-BLUE-TEXT-color);
}
div.box.green {
background-color: var(--INTERNAL-BOX-GREEN-color);
color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-GREEN-color));
}
div.box.green > .box-content {
color: var(--INTERNAL-BOX-GREEN-TEXT-color);
}
div.box.grey {
background-color: var(--INTERNAL-BOX-GREY-color);
color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-GREY-color));
}
div.box.grey > .box-content {
color: var(--INTERNAL-BOX-GREY-TEXT-color);
}
div.box.orange {
background-color: var(--INTERNAL-BOX-ORANGE-color);
color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-ORANGE-color));
}
div.box.orange > .box-content {
color: var(--INTERNAL-BOX-ORANGE-TEXT-color);
}
div.box.red {
background-color: var(--INTERNAL-BOX-RED-color);
color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-RED-color));
}
div.box.transparent {
color: var(--MAIN-TEXT-color);
div.box.red > .box-content {
color: var(--INTERNAL-BOX-RED-TEXT-color);
}
div.box.transparent > .box-label {
color: var(--MAIN-TITLES-TEXT-color);
color: var(--INTERNAL-MAIN-TITLES-TEXT-color);
}
div.box.transparent > .box-content {
color: var(--INTERNAL-MAIN-TEXT-color);
}

33
static/js/mermaid.min.js vendored
View file

File diff suppressed because one or more lines are too long