195 lines
6.1 KiB
SCSS
195 lines
6.1 KiB
SCSS
@mixin site-theme($theme, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $docs-nav-selected, $module-nav-selected, $option-panel-text, $option-panel-border, $option-panel-bg){
|
|
body {background: $page-bg; color: $text;
|
|
a { color: $link; } }
|
|
#page { @extend .horizontal-rule-#{$theme}; }
|
|
header { @extend .horizontal-rule-#{$theme}; border-width: 4px; }
|
|
#main-nav a[rel=home] { @include replace-text-with-dimensions("compass-logo-small-#{$theme}.png"); display: inline-block; }
|
|
nav a { color: $nav-link; }
|
|
|
|
#main-nav a { color: $main-nav;}
|
|
body.home #main-nav a[rel=home],
|
|
body.help #main-nav a[rel=help],
|
|
body.docs #main-nav a[rel=documentation],
|
|
body.get-involved #main-nav 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; @extend .round-corners-4;}
|
|
#module-nav {
|
|
ul { overflow: visible; }
|
|
li.selected { @extend .selected-marker-#{$theme};
|
|
a { color: $module-nav-selected; } } }
|
|
|
|
#search-docs {
|
|
input::-webkit-input-placeholder { color: $search; }
|
|
input { @extend .inset-panel-#{$theme}; color: $search;}}
|
|
|
|
aside { @extend .vertical-rule-#{$theme};
|
|
h2 { @extend .horizontal-rule-#{$theme};
|
|
a { color: $strong-text; } } }
|
|
|
|
#docs_panel > div {
|
|
@include round-bottom-corners;
|
|
background: $option-panel-bg; border: 1px solid $option-panel-border; border-top: 0;
|
|
|
|
a[rel=theme] { @extend .theme-switch-#{$theme}; } }
|
|
|
|
a[rel=sass], a[rel=scss] { @extend .syntax-switch-#{$theme} }
|
|
|
|
#version { color: $option-panel-text; a { color: rgba($nav-link, .7); } }
|
|
|
|
body.sass a[rel=sass], body.scss a[rel=scss] { color: rgba($heading, .7); @extend .round-corners-em; @extend .inset-panel-#{$theme}; }
|
|
|
|
|
|
#page > article {
|
|
#{headings()}{ color: $heading; }
|
|
h1, h2 { @extend .horizontal-rule-#{$theme}; }
|
|
h3 { @extend .heading-panel-#{$theme}; }
|
|
h2 a.help { color: $heading;}
|
|
.source-documentation { @extend .doc-panel-#{$theme}; }
|
|
}
|
|
|
|
footer .links li { @extend .vertical-rule-#{$theme}; }
|
|
|
|
code { @extend .code-block-#{$theme}; color: $code; }
|
|
.arg { color: $code; }
|
|
.arg[data-default-value] { color: rgba($code, .7); }
|
|
a[rel="view source"]{ color: rgba($heading, .5); &:hover{ color: rgba($heading, .8);} }
|
|
}
|
|
|
|
// Dark theme
|
|
.inset-panel-dark {
|
|
@include box-shadow(rgba(#fff, .1) 0 1px 0, rgba(#000, .8) 0 1px 7px 0px inset);
|
|
background-color: rgba(#000, .3); }
|
|
|
|
.horizontal-rule-dark {
|
|
@include box-shadow(rgba(#fff, .07) 0 1px 0);
|
|
border-bottom: 1px solid #121212; }
|
|
|
|
.vertical-rule-dark {
|
|
@include box-shadow(rgba(#fff, .07) 1px 0 0);
|
|
border-right: 1px solid #121212; }
|
|
|
|
.code-block-dark { @extend .code-block; @extend .inset-panel-dark; }
|
|
|
|
.heading-panel-dark {
|
|
background: rgba(#000, .2);
|
|
@include box-shadow(rgba(#000, .2) 0 0 0 1px inset);
|
|
a:hover { color: #fff;
|
|
.arg { color: rgba(#fff, .6);}
|
|
}
|
|
}
|
|
.doc-panel-dark {
|
|
background: rgba(#000, .1);
|
|
@include box-shadow(rgba(#000, .2) 0 0 0 1px inset);
|
|
}
|
|
|
|
.syntax-switch-dark {
|
|
color: #000; text-shadow: rgba(#fff, .08) 0 1px 0;
|
|
&:hover { color: #fff; text-shadow: #000 0 1px 0; } }
|
|
|
|
.theme-switch-dark {
|
|
color: rgba(#000, .8); text-shadow: rgba(#fff, .08) 0 1px 0;
|
|
&:hover { color: #eee; text-shadow: #000 0 1px 0; } }
|
|
|
|
.selected-marker-dark {
|
|
a:before{ border-bottom-color: #121212; }
|
|
&:before { border-bottom-color: #414141; }
|
|
&:after { border-bottom-color: #323232; }
|
|
}
|
|
|
|
@mixin dark-theme {
|
|
$page-bg: #343434;
|
|
|
|
$text: #c6c6c6;
|
|
$heading: white;
|
|
$strong-text: #dbdbdb;
|
|
|
|
$search: #6e6e6e;
|
|
|
|
$link: #dadbb1;
|
|
$nav-link: #bfbfbf;
|
|
$code: #85AFC9;
|
|
|
|
$main-nav: $strong-text;
|
|
$main-nav-selected: #fb292d;
|
|
$docs-nav-selected: $strong-text;
|
|
$module-nav-selected: $link;
|
|
|
|
$option-panel-text: rgba(#fff, .2);
|
|
$option-panel-border: rgba(#000, .3);
|
|
$option-panel-bg: rgba(#fff, .03);
|
|
|
|
@include site-theme(dark, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $docs-nav-selected, $module-nav-selected, $option-panel-text, $option-panel-border, $option-panel-bg);
|
|
}
|
|
|
|
// Light Theme
|
|
.inset-panel-light {
|
|
@include box-shadow(rgba(#fff, 1) 0 1px 0, rgba(#000, .5) 0 1px 3px 0px inset);
|
|
text-shadow: 0 1px 1px #fff;
|
|
background-color: rgba(#000, .04); }
|
|
|
|
.horizontal-rule-light {
|
|
@include single-box-shadow(rgba(#fff, 1), 0, 1px, 0);
|
|
border-bottom: 1px solid #bbb; }
|
|
|
|
.vertical-rule-light {
|
|
@include single-box-shadow(rgba(#fff, 1), 1px, 0, 0);
|
|
border-right: 1px solid #bbb; }
|
|
|
|
.code-block-light { @extend .code-block; @extend .inset-panel-light;}
|
|
|
|
.syntax-switch-light {
|
|
color: rgba(#000, .3); text-shadow: rgba(#fff, .08) 0 1px 0;
|
|
&:hover { color: #000; text-shadow: #fff 0 1px 0; }}
|
|
|
|
.theme-switch-light {
|
|
color: rgba(#000, .2); text-shadow: rgba(#fff, 1) 0 1px 0;
|
|
&:hover { color: #000; } }
|
|
|
|
.heading-panel-light {
|
|
background: #fff;
|
|
@include box-shadow(rgba(#000, .2) 0 0 0 1px inset);
|
|
a:hover { color: #000;
|
|
.arg { color: rgba(#000, .6); } }
|
|
}
|
|
|
|
.selected-marker-light {
|
|
a:before{ border-bottom-color: #bbbbbb; }
|
|
&:before { border-bottom-color: #fff; }
|
|
&:after { border-bottom-color: #e5e5e5; }
|
|
}
|
|
|
|
.doc-panel-light {
|
|
background: rgba(#fff, .5);
|
|
@include box-shadow(rgba(#000, .15) 0 0 0 1px inset);
|
|
}
|
|
|
|
@mixin light-theme {
|
|
$page-bg: #ececec; // image-url('bg-light.jpg');
|
|
|
|
$text: #222 ;
|
|
$heading: black;
|
|
$strong-text: #000;
|
|
|
|
$search: #666;
|
|
|
|
$link: #307eb6;
|
|
$nav-link: #555;
|
|
$code: #222;
|
|
|
|
$main-nav: #555;
|
|
$main-nav-selected: darken(#fb292d, 15);
|
|
$docs-nav-selected: $strong-text;
|
|
$module-nav-selected: $link;
|
|
|
|
$option-panel-text: rgba(#000, .3);
|
|
$option-panel-border: rgba(#000, .2);
|
|
$option-panel-bg: #fff;
|
|
|
|
@include site-theme(light, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $docs-nav-selected, $module-nav-selected, $option-panel-text, $option-panel-border, $option-panel-bg);
|
|
}
|
|
|
|
html.dark { @include dark-theme; }
|
|
html.light { @include light-theme; }
|