78 lines
2.7 KiB
SCSS
78 lines
2.7 KiB
SCSS
@mixin site-theme($theme, $page-bg, $text, $strong-text, $heading, $link, $search, $search-bg, $nav-link, $main-nav, $main-nav-selected, $docs-nav-selected, $module-nav-selected, $version-text, $version-border){
|
|
body { background: $page-bg; color: $text;
|
|
a { color: $link; } }
|
|
#wrap { @extend .horizontal-rule-#{$theme}; }
|
|
header { @extend .horizontal-rule-#{$theme}; border-width: 4px; }
|
|
nav a { color: $nav-link; }
|
|
|
|
#main-nav a { color: $main-nav;}
|
|
body.home a[rel=home],
|
|
body.help a[rel=help],
|
|
body.docs a[rel=docs],
|
|
body.get-involved a[rel=get-involved]{ color: $main-nav-selected; }
|
|
|
|
#sub-nav { @extend .horizontal-rule-#{$theme}; }
|
|
#docs-nav { @extend .vertical-rule-#{$theme}; }
|
|
body.core a[rel=core], body.blueprint a[rel=blueprint]{ @extend .inset-panel-#{$theme}; color: $docs-nav-selected; }
|
|
#module-nav .selected { color: $module-nav-selected; }
|
|
|
|
#search-docs {
|
|
input::-webkit-input-placeholder { color: $search; }
|
|
input { @extend .inset-panel-#{$theme}; background-color: rgba($search-bg, .2); color: $search;}}
|
|
|
|
aside { @extend .vertical-rule-#{$theme};
|
|
h2 { @extend .horizontal-rule-#{$theme};
|
|
a { color: $text; } } }
|
|
|
|
#version { background: rgba($version-text, .03); color: rgba($version-text, .4); border: 1px solid rgba($version-border, .3); border-top: 0;
|
|
a { @include hover-link; color: rgba($version-text, .7); } }
|
|
|
|
#page > article {
|
|
#{headings()}{ color: $heading; } }
|
|
h1, h2 { @extend .horizontal-rule-#{$theme}; }
|
|
}
|
|
|
|
// Dark theme
|
|
.inset-panel-dark {
|
|
@include background-image(linear-gradient(rgba(#000, .5), rgba(#000, 0)));
|
|
@include single-box-shadow(rgba(#fff, .1), 0, 1px, 0);
|
|
background-color: rgba(#000, .2); }
|
|
|
|
.horizontal-rule-dark {
|
|
@include single-box-shadow(rgba(#fff, .07), 0, 1px, 0);
|
|
border-bottom: 1px solid #121212; }
|
|
|
|
.vertical-rule-dark {
|
|
@include single-box-shadow(rgba(#fff, .07), 1px, 0, 0);
|
|
border-right: 1px solid #121212; }
|
|
|
|
.code-block-dark { @extend .round-corners-4; @extend .inset-panel-dark;
|
|
display: inline-block;
|
|
padding-left: 2px;
|
|
padding-right: 2px; }
|
|
|
|
@mixin dark-theme {
|
|
$page-bg: #343434;
|
|
|
|
$text: #b6b6b6;
|
|
$heading: white;
|
|
$strong-text: #dbdbdb;
|
|
|
|
$search: #6e6e6e;
|
|
$search-bg: black;
|
|
|
|
$link: #dadbb1;
|
|
$nav-link: #bfbfbf;
|
|
|
|
$main-nav: $strong-text;
|
|
$main-nav-selected: #fb292d;
|
|
$docs-nav-selected: $text;
|
|
$module-nav-selected: $link;
|
|
|
|
$version-text: white;
|
|
$version-border: black;
|
|
|
|
@include site-theme(dark, $page-bg, $text, $strong-text, $heading, $link, $search, $search-bg, $nav-link, $main-nav, $main-nav-selected, $docs-nav-selected, $module-nav-selected, $version-text, $version-border);
|
|
}
|
|
|
|
html.dark { @include dark-theme; } |