rookeries/static/css/penguin-evening-theme.css

93 lines
2.3 KiB
CSS

/*
* Penguin Evening Theme
*
* @author: Dorian Pula (dorian.pula@amber-penguin-software.ca)
* @company: Amber Penguin Software
* @note: A soothing grey and amber CSS theme.
* @version: 0.5.0
* @license: AGPL v3
*/
@import url("penguin-common-theme.css");
/*** Colours. ***/
:root {
--evening-body-background-colour: #292929;
--evening-element-background-colour: #777777;
--evening-header-title-colour: var(--amber-penguin-yellow);
--evening-header-background-colour: #454545;
--evening-subheader-title-colour: #CCCCCC;
--evening-link-highlight-colour: var(--amber-penguin-yellow);
--evening-link-highlight-colour-text: var(--evening-body-background-colour);
--evening-link-text-colour: var(--amber-penguin-yellow);
--evening-footer-text-colour: #CCCCCC;
}
/*** General containers ***/
body.evening .sea-header {
background-color: var(--evening-header-background-colour);
}
body.evening .ice-floe,
body.evening .ice-menu {
background-color: var(--evening-element-background-colour);
}
body.evening .navigation-bar {
background-color: var(--evening-element-background-colour);
}
/*** General elements ***/
body.evening {
background-color: var(--evening-body-background-colour);
}
/*** Footer ***/
body.evening footer {
color: var(--evening-footer-text-colour);
}
/*** Article elements. ***/
body.evening h1 {
color: var(--evening-header-title-colour);
}
body.evening h2 {
color: var(--evening-subheader-title-colour);
}
/*** Navigation ***/
body.evening a,
body.evening .hoverable {
color: var(--evening-link-text-colour);
/* mixin: .small_bordered; */
border-radius: 5px;
padding: 5px;
}
body.evening a:hover,
body.evening .hoverable:hover {
background-color: var(--evening-link-highlight-colour);
color: var(--evening-link-highlight-colour-text);
/* mixin: .small_bordered; */
border-radius: 5px;
padding: 5px;
}
/* Hacks to resolve colour scheme issues in Bootstrap. */
body.evening .nav-pills > .active > a,
body.evening .nav-pills > .active > a:hover,
body.evening .nav-pills > .active > a:focus {
background-color: var(--evening-link-highlight-colour);
color: var(--evening-link-highlight-colour-text);
}
body.evening .nav > li > a:hover,
body.evening .nav > li > a:focus {
text-decoration: none;
background-color: var(--evening-link-highlight-colour);
color: var(--evening-link-highlight-colour-text);
}