Skip to content

Allow themes to override chrome with custom properties #109

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
monkeyiq wants to merge 1 commit into from
Closed

Allow themes to override chrome with custom properties #109

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 58 additions & 14 deletions resources/css/default.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,30 @@ $fa-font-path: "../webfonts";

$light-yellow: #fffdbf;

// Theming overrides using CSS custom properties. Note that all uses of var() are preceeded by a static fallback color.
// Fallbacks could be removed if we don't care about older browsers such as IE11 and out-of-date embedded webviews.
:root {
/* Default red color scheme */
--ssp-chrome-primary-background: #{$primaryBackground};
--ssp-chrome-transition-background: #{$transitionBackground};
--ssp-chrome-secondary-background: #{$secondaryBackground};
--ssp-chrome-text: #{$chromeText};
--ssp-chrome-text-shadow: #{$chromeTextShadow};

/* small screen menu colors */
--ssp-chrome-menu: var(--ssp-chrome-secondary-background, #e8410c);
--ssp-chrome-menu-divider: var(--ssp-chrome-transition-background, #db0100);
--ssp-chrome-menu-active: var(--ssp-chrome-primary-background, #b8002c);
--ssp-chrome-menu-text: var(--ssp-chrome-text, #fff);

/* Loader dots color */
--ssp-chrome-loader: var(--ssp-chrome-transition-background, #db0100);

/* primary button colors */
--ssp-primary-button: var(--ssp-chrome-transition-background, #db0100);
--ssp-primary-button-text: var(--ssp-chrome-text, #fff);
}

/************************************************************
* GENERAL
************************************************************/
Expand Down Expand Up @@ -180,6 +204,7 @@ appears on the left side of the page.
bottom: 0;
z-index: 1000; /* so the menu or its navicon stays above all content */
background: $secondaryBackground;
background: var(--ssp-chrome-menu);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
Expand All @@ -188,7 +213,8 @@ appears on the left side of the page.
All anchors inside the menu should be styled like this.
*/
#menu a {
color: #fff;
color: $chromeText;
color: var(--ssp-chrome-menu-text);
border: none;
padding: 0.6em 0 0.6em 0.6em;
}
Expand All @@ -208,6 +234,7 @@ Add that light border to separate items into groups.
#menu .pure-menu ul,
#menu .pure-menu .menu-item-divided {
border-top: 1px solid $transitionBackground;
border-top: 1px solid var(--ssp-chrome-menu-divider);
}

/*
Expand All @@ -216,22 +243,25 @@ This styles the selected menu item `<li>`.
#menu .pure-menu-selected,
#menu .pure-menu-heading {
background: $primaryBackground;
color: black;
background: var(--ssp-chrome-menu-active);
color: var(--ssp-chrome-menu-active-text, black);
}

/*
This styles a link within a selected menu item `<li>`.
*/
#menu .pure-menu-selected a {
color: #fff;
color: $chromeText;
color: var(--ssp-chrome-menu-text);
}

/*
This styles the menu heading.
*/
#menu .pure-menu-heading {
font-size: 110%;
color: #fff;
color: $chromeText;
color: var(--ssp-chrome-menu-text);
margin: 0;
text-transform: none;
}
Expand Down Expand Up @@ -268,7 +298,8 @@ small screens.
.menu-link span {
position: relative;
display: block;
color: #fff;
color: $chromeText;
color: var(--ssp-chrome-menu-link, var(--ssp-chrome-menu-text));
}

.menu-link span,
Expand All @@ -280,6 +311,7 @@ small screens.
.menu-link span:focus,
.menu-link span:hover {
color: #010101cc;
color: var(--ssp-chrome-menu-link-active, #010101cc);
}

/* -- Responsive Styles (Media Queries) ------------------------------------- */
Expand Down Expand Up @@ -308,6 +340,7 @@ HEADER
#header {
height: 6rem;
background: linear-gradient(141deg, $primaryBackground 0%, $transitionBackground 51%, $secondaryBackground 75%);
background: linear-gradient(141deg, var(--ssp-chrome-primary-background) 0%, var(--ssp-chrome-transition-background) 51%, var(--ssp-chrome-secondary-background) 75%);
}

.logo-header {
Expand All @@ -319,8 +352,10 @@ HEADER
#logo {
font-family: sans-serif;
font-size: 2.5em;
color: white;
text-shadow: 0 3px 2px #532900;
color: $chromeText;
color: var(--ssp-chrome-text);
text-shadow: 0 3px 2px $chromeTextShadow;
text-shadow: 0 3px 2px var(--ssp-chrome-text-shadow);
}

.simple {
Expand Down Expand Up @@ -443,14 +478,17 @@ pre#xmlmetadata {
#footer {
width: 100%;
background: linear-gradient(141deg, $primaryBackground 0%, $transitionBackground 51%, $secondaryBackground 75%);
background: linear-gradient(141deg, var(--ssp-chrome-primary-background) 0%, var(--ssp-chrome-transition-background) 51%, var(--ssp-chrome-secondary-background) 75%);
height: 4rem;
padding: 2rem 0 0;
text-align: center;
color: white;
color: $chromeText;
color: var(--ssp-chrome-text);

a,
a:visited {
color: white;
color: $chromeText;
color: var(--ssp-chrome-text);

&:focus,
&:hover {
Expand Down Expand Up @@ -579,12 +617,15 @@ html[dir="rtl"] .pure-select {
}

.pure-button-red {
background-color: #db0100;
color: #fff;
background-color: $transitionBackground;
background-color: var(--ssp-primary-button);
color: $chromeText;
color: var(--ssp-primary-button-text);

&:hover,
&:focus {
background-color: #555;
background-color: var(--ssp-primary-button-active, #555);
padding: 0.5em 1em;
}
}
Expand Down Expand Up @@ -931,14 +972,17 @@ div.preferredidp {
@keyframes shadowPulse {
33% {
background: #FFF;
box-shadow: -24px 0 #db0100, 24px 0 #FFF;
box-shadow: -24px 0 $transitionBackground, 24px 0 #FFF;
box-shadow: -24px 0 var(--ssp-chrome-loader), 24px 0 #FFF;
}
66% {
background: #db0100;
background: $transitionBackground;
background: var(--ssp-chrome-loader);
box-shadow: -24px 0 #FFF, 24px 0 #FFF;
}
100% {
background: #FFF;
box-shadow: -24px 0 #FFF, 24px 0 #db0100;
box-shadow: -24px 0 #FFF, 24px 0 $transitionBackground;
box-shadow: -24px 0 #FFF, 24px 0 var(--ssp-chrome-loader);
}
}
6 changes: 5 additions & 1 deletion webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ module.exports = environment => {
const primaryBackground = Object.prototype.hasOwnProperty.call(env, 'primaryBackground') ? env.primaryBackground : '#b8002c';
const transitionBackground = Object.prototype.hasOwnProperty.call(env, 'transitionBackground') ? env.transitionBackground : '#db0100';
const secondaryBackground = Object.prototype.hasOwnProperty.call(env, 'secondaryBackground') ? env.secondaryBackground : '#e8410c';
const chromeText = Object.prototype.hasOwnProperty.call(env, 'chromeText') ? env.chromeText : '#fff';
const chromeTextShadow = Object.prototype.hasOwnProperty.call(env, 'chromeTextShadow') ? env.chromeTextShadow : '#532900';
return {
entry: {
bundle: './resources/js/bundle/main',
Expand Down Expand Up @@ -60,7 +62,9 @@ module.exports = environment => {
},
additionalData: "$primaryBackground: " + primaryBackground + '; ' +
"$transitionBackground: " + transitionBackground + "; " +
"$secondaryBackground: " + secondaryBackground + ";"
"$secondaryBackground: " + secondaryBackground + "; " +
"$chromeText: " + chromeText + "; " +
"$chromeTextShadow: " + chromeTextShadow + ";"
}
}
]
Expand Down
Loading