mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-11-23 07:47:54 +00:00
variant: add primary and secondary color variables #239
This commit is contained in:
Sören Weber
parent
31c9c77c5e
commit
74c47913af
8 changed files with 68 additions and 62 deletions
|
|
@ -8,9 +8,9 @@
|
|||
:root {
|
||||
--MAIN-TEXT-color: #323232; /* Color of text by default */
|
||||
--MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5-h6 */
|
||||
--MAIN-LINK-color: #1C90F3; /* Color of links */
|
||||
--MAIN-LINK-color: #1c90f3; /* Color of links */
|
||||
--MAIN-LINK-HOVER-color: #167ad0; /* Color of hovered links */
|
||||
--MAIN-ANCHOR-color: #1C90F3; /* color of anchors on titles */
|
||||
--MAIN-ANCHOR-color: #1c90f3; /* color of anchors on titles */
|
||||
--MAIN-BG-color: #ffffff; /* color of text by default */
|
||||
|
||||
/* adjusted to base16-snazzy chroma style */
|
||||
|
|
@ -25,7 +25,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: #1C90F3; /* Background color of menu header */
|
||||
--MENU-HEADER-BG-color: #1c90f3; /* Background color of menu header */
|
||||
--MENU-HEADER-BORDER-color: #33a1ff; /*Color of menu header border */
|
||||
|
||||
--MENU-SEARCH-color: #ffffff; /* Color of search field text */
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
--MENU-SECTION-ACTIVE-CATEGORY-color: #777; /* Color of active category text */
|
||||
--MENU-SECTION-ACTIVE-CATEGORY-BG-color: #fff; /* Color of background for the active category (only) */
|
||||
|
||||
--MENU-VISITED-color: #33a1ff; /* Color of 'page visited' icons in menu */
|
||||
--MENU-VISITED-color: #1c90f3; /* Color of 'page visited' icons in menu */
|
||||
--MENU-SECTION-HR-color: #20272b; /* Color of <hr> separator in menu */
|
||||
|
||||
/* base styling for boxes */
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
--MAIN-LINK-color: #1c90f3; /* Color of links */
|
||||
--MAIN-LINK-HOVER-color: #4cabff; /* Color of hovered links */
|
||||
--MAIN-ANCHOR-color: #4cabff; /* color of anchors on titles */
|
||||
--MAIN-ANCHOR-color: #1c90f3; /* color of anchors on titles */
|
||||
--MAIN-BG-color: #202020; /* color for code background */
|
||||
|
||||
/* adjusted to neon chroma style */
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
--MENU-SECTION-ACTIVE-CATEGORY-color: #777; /* Color of active category text */
|
||||
--MENU-SECTION-ACTIVE-CATEGORY-BG-color: #fff; /* Color of background for the active category (only) */
|
||||
|
||||
--MENU-VISITED-color: #ff3333; /* Color of 'page visited' icons in menu */
|
||||
--MENU-VISITED-color: #f31c1c; /* Color of 'page visited' icons in menu */
|
||||
--MENU-SECTION-HR-color: #2b2020; /* Color of <hr> separator in menu */
|
||||
|
||||
/* base styling for boxes */
|
||||
|
|
|
|||
|
|
@ -8,9 +8,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-LINK-color: #1c90f3; /* Color of links */
|
||||
--MAIN-LINK-HOVER-color: #4cabff; /* Color of hovered links */
|
||||
--MAIN-ANCHOR-color: #4cabff; /* color of anchors on titles */
|
||||
--MAIN-LINK-color: #6c8ce3; /* Color of links */
|
||||
--MAIN-LINK-HOVER-color: #93b0ff; /* Color of hovered links */
|
||||
--MAIN-ANCHOR-color: #6c8ce3; /* color of anchors on titles */
|
||||
--MAIN-BG-color: #202020; /* color for code background */
|
||||
|
||||
/* adjusted to relearn-dark chroma style */
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
--MENU-SECTION-ACTIVE-CATEGORY-color: #82e550; /* Color of active category text */
|
||||
--MENU-SECTION-ACTIVE-CATEGORY-BG-color: #202020; /* Color of background for the active category (only) */
|
||||
|
||||
--MENU-VISITED-color: #569cd8; /* Color of 'page visited' icons in menu */
|
||||
--MENU-VISITED-color: #486ac9; /* Color of 'page visited' icons in menu */
|
||||
--MENU-SECTION-HR-color: #606060; /* Color of <hr> separator in menu */
|
||||
|
||||
/* base styling for boxes */
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
--MAIN-TEXT-color: #101010; /* Color of text by default */
|
||||
--MAIN-TITLES-TEXT-color: #4a4a4a; /* Color of titles h2-h3-h4-h5-h6 */
|
||||
--MAIN-LINK-color: #486ac9; /* Color of links */
|
||||
--MAIN-LINK-HOVER-color: #134fbf; /* Color of hovered links */
|
||||
--MAIN-ANCHOR-color: #134fbf; /* color of anchors on titles */
|
||||
--MAIN-LINK-HOVER-color: #202891; /* Color of hovered links */
|
||||
--MAIN-ANCHOR-color: #486ac9; /* color of anchors on titles */
|
||||
--MAIN-BG-color: #ffffff; /* color of text by default */
|
||||
|
||||
/* adjusted to relearn-light chroma style */
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
--MENU-SECTION-ACTIVE-CATEGORY-color: #444444; /* Color of active category text */
|
||||
--MENU-SECTION-ACTIVE-CATEGORY-BG-color: #ffffff; /* Color of background for the active category (only) */
|
||||
|
||||
--MENU-VISITED-color: #506397; /* Color of 'page visited' icons in menu */
|
||||
--MENU-VISITED-color: #486ac9; /* Color of 'page visited' icons in menu */
|
||||
--MENU-SECTION-HR-color: #606060; /* Color of <hr> separator in menu */
|
||||
|
||||
/* base styling for boxes */
|
||||
|
|
|
|||
|
|
@ -331,7 +331,7 @@ th {
|
|||
}
|
||||
|
||||
#sidebar ul li.visited > a .read-icon {
|
||||
color: #506397; /* var(--MENU-VISITED-color) */
|
||||
color: #486ac9; /* var(--MENU-VISITED-color) */
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
|
@ -1399,7 +1399,7 @@ option {
|
|||
|
||||
/* anchors */
|
||||
.anchor {
|
||||
color: #134fbf; /* var(--MAIN-ANCHOR-color) */
|
||||
color: #486ac9; /* var(--MAIN-ANCHOR-color) */
|
||||
cursor: pointer;
|
||||
font-size: .5em;
|
||||
margin-left: .66em;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,14 @@
|
|||
:root {
|
||||
/* initially use section background to avoid flickering on load when a non default variant is active;
|
||||
this is only possible because every color variant defines this variable, otherwise we would have been lost */
|
||||
--INTERNAL-PRIMARY-color: var(--PRIMARY-color, var(--MENU-HEADER-BG-color, rgba( 0, 0, 0, 0 ))); /* not --INTERNAL-MENU-HEADER-BG-color */
|
||||
--INTERNAL-SECONDARY-color: var(--SECONDARY-color, var(--MAIN-LINK-color, #486ac9)); /* not --INTERNAL-MAIN-LINK-color */
|
||||
|
||||
--INTERNAL-MAIN-TEXT-color: var(--MAIN-TEXT-color, #101010);
|
||||
--INTERNAL-MAIN-TITLES-TEXT-color: var(--MAIN-TITLES-TEXT-color, #4a4a4a);
|
||||
--INTERNAL-MAIN-LINK-color: var(--MAIN-LINK-color, #486ac9);
|
||||
--INTERNAL-MAIN-LINK-color: var(--MAIN-LINK-color, var(--SECONDARY-color, #486ac9)); /* not --INTERNAL-SECONDARY-color */
|
||||
--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-HOVER-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(--INTERNAL-MAIN-TEXT-color));
|
||||
|
|
@ -36,11 +41,9 @@
|
|||
--INTERNAL-MERMAID-theme: var(--CONFIG-MERMAID-theme, var(--MERMAID-theme, default));
|
||||
--INTERNAL-SWAGGER-theme: var(--CONFIG-SWAGGER-theme, var(--SWAGGER-theme, light));
|
||||
|
||||
--INTERNAL-TAG-BG-color: var(--TAG-BG-color, var(--INTERNAL-MENU-HEADER-BG-color));
|
||||
--INTERNAL-TAG-BG-color: var(--TAG-BG-color, var(--INTERNAL-PRIMARY-color));
|
||||
|
||||
/* initially use section background to avoid flickering on load when a non default variant is active;
|
||||
this is only possible because every color variant defines this variable, otherwise we would have been lost */
|
||||
--INTERNAL-MENU-HEADER-BG-color: var(--MENU-HEADER-BG-color, rgba( 0, 0, 0, 0 ));
|
||||
--INTERNAL-MENU-HEADER-BG-color: var(--MENU-HEADER-BG-color, var(--PRIMARY-color, rgba( 0, 0, 0, 0 ))); /* not --INTERNAL-PRIMARY-color */
|
||||
--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);
|
||||
|
|
@ -57,7 +60,7 @@
|
|||
--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-VISITED-color: var(--MENU-VISITED-color, var(--INTERNAL-SECONDARY-color));
|
||||
--INTERNAL-MENU-SECTION-HR-color: var(--MENU-SECTION-HR-color, #606060);
|
||||
|
||||
--INTERNAL-BOX-CAPTION-color: var(--BOX-CAPTION-color, rgba( 255, 255, 255, 1 ));
|
||||
|
|
|
|||
|
|
@ -243,7 +243,6 @@ var variants = {
|
|||
},
|
||||
|
||||
download: function(data, mimetype, filename){
|
||||
console.log( data );
|
||||
var blob = new Blob([data], { type: mimetype });
|
||||
var url = window.URL.createObjectURL(blob);
|
||||
var a = document.createElement('a');
|
||||
|
|
@ -320,6 +319,12 @@ var variants = {
|
|||
return this.normalizeColor( getComputedStyle( document.documentElement ).getPropertyValue( '--INTERNAL-'+c ) );
|
||||
},
|
||||
|
||||
getColorProperty: function( c, read_style ){
|
||||
var e = this.findColor( c );
|
||||
var p = this.normalizeColor( read_style.getPropertyValue( '--'+c ) ).replace( '--INTERNAL-', '--' );
|
||||
return p;
|
||||
},
|
||||
|
||||
findLoadedStylesheet: function( id ){
|
||||
var style = null;
|
||||
for( var n = 0; n < document.styleSheets.length; ++n ){
|
||||
|
|
@ -338,7 +343,8 @@ var variants = {
|
|||
},
|
||||
|
||||
changeColor: function( c, without_prompt ){
|
||||
without_prompt = without_prompt || false;
|
||||
var with_prompt = !(without_prompt || false);
|
||||
|
||||
var read_style = this.findLoadedStylesheet( 'custom-variant-style' );
|
||||
var write_style = this.findLoadedStylesheet( 'variant-style' );
|
||||
if( !read_style ){
|
||||
|
|
@ -346,46 +352,40 @@ var variants = {
|
|||
}
|
||||
|
||||
var e = this.findColor( c );
|
||||
var p = this.normalizeColor( read_style.getPropertyValue( '--'+c ) ).replace( '--INTERNAL-', '--' );
|
||||
var f = this.getColorValue( e.fallback );
|
||||
|
||||
var v = this.getColorValue( e.name );
|
||||
if( v == f || v == this.normalizeColor(e.default) ){
|
||||
v = '';
|
||||
}
|
||||
if( p ){
|
||||
v = p;
|
||||
}
|
||||
|
||||
var v = this.getColorProperty( c, read_style );
|
||||
var n = '';
|
||||
if( without_prompt ){
|
||||
if( !with_prompt ){
|
||||
n = v;
|
||||
}
|
||||
else{
|
||||
var t = c + '\n\n' + e.tooltip + '\n';
|
||||
if( e.fallback ){
|
||||
t += '\nInherits value "' + f + '" from ' + e.fallback + ' if not set\n';
|
||||
t += '\nInherits value "' + this.getColorValue(e.fallback) + '" from ' + e.fallback + ' if not set\n';
|
||||
}
|
||||
if( e.default ){
|
||||
else if( e.default ){
|
||||
t += '\nDefaults to value "' + this.normalizeColor(e.default) + '" if not set\n';
|
||||
}
|
||||
n = prompt( t, v );
|
||||
if( n === null ){
|
||||
// user canceld operation
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if( n ){
|
||||
// value set to specific value
|
||||
n = this.normalizeColor( n ).replace( '--INTERNAL-', '--' ).replace( '--', '--INTERNAL-' );
|
||||
if( without_prompt || n != v ){
|
||||
if( !with_prompt || n != v ){
|
||||
write_style.setProperty( '--'+c, n );
|
||||
}
|
||||
if( !without_prompt ){
|
||||
this.saveCustomVariant();
|
||||
}
|
||||
}
|
||||
else if( n !== null){
|
||||
else{
|
||||
// value emptied, so delete it
|
||||
write_style.removeProperty( '--'+c );
|
||||
if( !without_prompt ){
|
||||
this.saveCustomVariant();
|
||||
}
|
||||
|
||||
if( with_prompt ){
|
||||
this.saveCustomVariant();
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -396,28 +396,28 @@ var variants = {
|
|||
return f;
|
||||
},
|
||||
|
||||
generateColorVariable: function( e ){
|
||||
generateColorVariable: function( e, read_style ){
|
||||
var v = '';
|
||||
var gen = true;
|
||||
if( e.fallback ){
|
||||
f = this.findColor( e.fallback );
|
||||
gen = this.getColorValue(f.name) != this.getColorValue(e.name);
|
||||
}
|
||||
else if( e.default ){
|
||||
gen = this.normalizeColor(e.default) != this.getColorValue(e.name);
|
||||
}
|
||||
var gen = this.getColorProperty( e.name, read_style );
|
||||
if( gen ){
|
||||
v += ' --' + e.name + ': ' + this.getColorValue(e.name) + '; /* ' + e.tooltip + ' */\n';
|
||||
v += ' --' + e.name + ': ' + gen + '; /* ' + e.tooltip + ' */\n';
|
||||
}
|
||||
return v;
|
||||
},
|
||||
|
||||
generateStylesheet: function(){
|
||||
var read_style = this.findLoadedStylesheet( 'custom-variant-style' );
|
||||
var write_style = this.findLoadedStylesheet( 'variant-style' );
|
||||
if( !read_style ){
|
||||
read_style = write_style;
|
||||
}
|
||||
|
||||
var style =
|
||||
'/* ' + this.customvariantname + ' */\n' +
|
||||
':root {\n' +
|
||||
this.variantvariables.sort( function( l, r ){ return l.name.localeCompare(r.name); } ).reduce( function( a, e ){ return a + this.generateColorVariable( e ); }.bind( this ), '' ) +
|
||||
this.variantvariables.sort( function( l, r ){ return l.name.localeCompare(r.name); } ).reduce( function( a, e ){ return a + this.generateColorVariable( e, read_style ); }.bind( this ), '' ) +
|
||||
'}\n';
|
||||
console.log( style );
|
||||
return style;
|
||||
},
|
||||
|
||||
|
|
@ -517,12 +517,15 @@ var variants = {
|
|||
},
|
||||
|
||||
variantvariables: [
|
||||
{ name: 'PRIMARY-color', group: 'content', default: '#7dc903', tooltip: 'brand primary color', },
|
||||
{ name: 'SECONDARY-color', group: 'content', fallback: 'MAIN-LINK-color', tooltip: 'brand secondary color', },
|
||||
|
||||
{ name: 'MAIN-TEXT-color', group: 'content', default: '#101010', tooltip: 'text color of content and h1 titles', },
|
||||
{ name: 'MAIN-LINK-color', group: 'content', default: '#486ac9', tooltip: 'link color of content', },
|
||||
{ name: 'MAIN-LINK-color', group: 'content', fallback: 'SECONDARY-color', tooltip: 'link color of content', },
|
||||
{ name: 'MAIN-LINK-HOVER-color', group: 'content', fallback: 'MAIN-LINK-color', tooltip: 'hoverd link color of content', },
|
||||
{ name: 'MAIN-ANCHOR-color', group: 'content', fallback: 'MAIN-LINK-HOVER-color', tooltip: 'anchor color of titles', },
|
||||
{ name: 'MAIN-ANCHOR-color', group: 'content', fallback: 'MAIN-LINK-color', tooltip: 'anchor color of titles', },
|
||||
{ name: 'MAIN-BG-color', group: 'content', default: '#ffffff', tooltip: 'background color of content', },
|
||||
{ name: 'TAG-BG-color', group: 'content', fallback: 'MENU-HEADER-BG-color', tooltip: 'tag color', },
|
||||
{ name: 'TAG-BG-color', group: 'content', fallback: 'PRIMARY-color', tooltip: 'tag color', },
|
||||
|
||||
{ name: 'MAIN-TITLES-TEXT-color', group: 'headings', default: '#4a4a4a', tooltip: 'text color of h2-h6 titles and transparent box titles', },
|
||||
{ name: 'MAIN-TITLES-H1-color', group: 'headings', fallback: 'MAIN-TEXT-color', tooltip: 'text color of h1 titles', },
|
||||
|
|
@ -555,7 +558,7 @@ var variants = {
|
|||
{ name: 'MERMAID-theme', group: '3rd party', default: 'default', tooltip: 'name of the default Mermaid theme for this variant, can be overridden in config.toml', },
|
||||
{ name: 'SWAGGER-theme', group: '3rd party', default: 'light', tooltip: 'name of the default Swagger theme for this variant, can be overridden in config.toml', },
|
||||
|
||||
{ name: 'MENU-HEADER-BG-color', group: 'header', default: '#7dc903', tooltip: 'background color of menu header', },
|
||||
{ name: 'MENU-HEADER-BG-color', group: 'header', fallback: 'PRIMARY-color', tooltip: 'background color of menu header', },
|
||||
{ name: 'MENU-HEADER-BORDER-color', group: 'header', fallback: 'MENU-HEADER-BG-color', tooltip: 'separator color of menu header', },
|
||||
{ name: 'MENU-HOME-LINK-color', group: 'header', default: '#323232', tooltip: 'home button color if configured', },
|
||||
{ name: 'MENU-HOME-LINK-HOVER-color', group: 'header', default: '#808080', tooltip: 'hoverd home button color if configured', },
|
||||
|
|
@ -569,7 +572,7 @@ var variants = {
|
|||
{ name: 'MENU-SECTION-ACTIVE-CATEGORY-BG-color', group: 'sections', fallback: 'MAIN-BG-color', tooltip: 'background color of the displayed menu topic', },
|
||||
{ name: 'MENU-SECTIONS-LINK-color', group: 'sections', default: '#bababa', tooltip: 'link color of menu topics', },
|
||||
{ name: 'MENU-SECTIONS-LINK-HOVER-color', group: 'sections', fallback: 'MENU-SECTIONS-LINK-color', tooltip: 'hoverd link color of menu topics', },
|
||||
{ name: 'MENU-VISITED-color', group: 'sections', default: '#506397', tooltip: 'icon color of visited menu topics if configured', },
|
||||
{ name: 'MENU-VISITED-color', group: 'sections', fallback: 'SECONDARY-color', tooltip: 'icon color of visited menu topics if configured', },
|
||||
{ name: 'MENU-SECTION-HR-color', group: 'sections', default: '#606060', tooltip: 'separator color of menu footer', },
|
||||
|
||||
{ name: 'BOX-CAPTION-color', group: 'colored boxes', default: 'rgba( 255, 255, 255, 1 )', tooltip: 'text color of colored box titles', },
|
||||
|
|
|
|||
Loading…
Reference in a new issue