compass/doc-src/content/stylesheets/partials/_theme.scss

260 lines
8.8 KiB
SCSS

@mixin site-theme($theme, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $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; }
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.tutorial #main-nav a[rel=help],
body.reference #main-nav a[rel=documentation],
body#changelog #main-nav a[rel=documentation],
body#get-involved #main-nav a[rel=get-involved]{ color: $main-nav-selected; }
#search-docs input {
@extend .inset-panel-#{$theme}; color: $search;
&::-webkit-input-placeholder { color: $search; } }
#{headings()}{ color: $heading;
strong { color: $main-nav-selected; }
em { color: $code; } }
#page > article h2 { @extend .horizontal-rule-top-#{$theme}; }
hr { @extend .horizontal-rule-#{$theme};
border-bottom-width: 8px}
body#home h2 { @extend .horizontal-rule-#{$theme}; }
aside { @extend .vertical-rule-#{$theme};
h2 a { color: $strong-text; }
h2, h3 { @extend .horizontal-rule-#{$theme}; }}
footer .links li { @extend .vertical-rule-#{$theme}; }
code { @extend .code-block-#{$theme}; color: $code; }
#theme_pref { @extend .theme-switch-#{$theme}; }
#docs_panel div, .syntax_pref { background: $option-panel-bg; border-color: $option-panel-border; }
body#home .overview div { @extend .inset-panel-#{$theme};
h4 { @extend .horizontal-rule-#{$theme}; } }
#featured_sites li { @extend .inset-panel-#{$theme}; }
}
@mixin docs-theme($theme, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected){
#page > article {
h1 { @extend .horizontal-rule-#{$theme}; }
h2 { @extend .horizontal-rule-top-#{$theme}; }
h3 { @extend .heading-panel-#{$theme}; }
h1 + h2, hr + h2 {
@extend .clear-box-shadow; border-top: 0;
margin-top: 0;}
}
#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;}
#main-nav a[rel=home] { @include replace-text-with-dimensions("compass-logo-small-#{$theme}.png"); display: inline-block; float: left; }
#module-nav {
ul { overflow: visible; }}
body.getting-started #module-nav li.getting-started,
body.tutorial #module-nav li.tutorials,
body.support #module-nav li.support,
#module-nav li.selected { @extend .selected-marker-#{$theme};
a { color: $module-nav-selected; } }
a[rel=sass], a[rel=scss], a[rel=css] { @extend .syntax-switch-#{$theme}; }
&.sass a[rel=sass], &.scss a[rel=scss], &.css a[rel=css] { color: $heading; color: rgba($heading, .7); @extend .round-corners-em; @extend .inset-panel-#{$theme}; }
#version { color: rgba($heading, .3); a { color: rgba($nav-link, .7); } }
.mixin-source, .example-source { @extend .mixin-panel-#{$theme}; }
h2 a.help { color: $heading;}
.source-documentation { @extend .doc-panel-#{$theme}; }
#demo { @extend .demo-#{$theme}; }
.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: darken(#2f2f2f, 4); background-color: rgba(#000, .3); }
.horizontal-rule-dark {
@include box-shadow(rgba(#fff, .07) 0 1px 0);
border-bottom: 1px solid #121212; }
.horizontal-rule-top-dark {
@include box-shadow(rgba(#fff, .07) 0 1px 0 inset);
border-top: 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; }
.demo-dark {
@include box-shadow(rgba(#000, .5) 0 2px 10px inset, rgba(#fff, .3) 0 1px 2px 0px, rgba(#000, .8) 0 0 0 1px inset); }
.heading-panel-dark {
background: darken(#2f2f2f, 6);
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: darken(#2f2f2f, 4);
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 {
cursor: pointer;
a { color: #000; color: rgba(#000, .8); text-shadow: rgba(#fff, .08) 0 1px 0; }
&:hover a { 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-panel-dark {
@extend .inset-panel-dark;
td.gutter { background: rgba(#fff, .05); .line { border-right: 2px solid rgba(#fff, .15); color: rgba(#fff, .5); }}
}
@mixin dark-theme($docs: false) {
$page-bg: #2f2f2f;
$text: #c6c6c6;
$heading: white;
$strong-text: #dbdbdb;
$search: #6e6e6e;
$code: #dadbb1;
$nav-link: #bfbfbf;
$link: saturate(lighten(#85AFC9, 4), 19);
$main-nav: white;
$main-nav-selected: #fb292d;
$docs-nav-selected: $strong-text;
$module-nav-selected: $link;
$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, $option-panel-border, $option-panel-bg);
@if($docs){
@include docs-theme(dark, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected);
.syntaxhighlighter, pre, pre .code-block:first-child {
&::-webkit-scrollbar-track-piece { -webkit-box-shadow: rgba(#000, .5) 0 0 3px 1px inset; background: rgba(#000, .2); }
}
.syntaxhighlighter, pre, pre .code-block:first-child {
&::-webkit-scrollbar-thumb:horizontal { background: -webkit(linear-gradient(rgba(#fff, .3), rgba(#fff, 0))) #000; -webkit-box-shadow: rgba(black, 0.8) 0px 0 0 1px inset; }
}
}
}
// 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 box-shadow(#fff 0 1px 0);
border-bottom: 1px solid #bbb; }
.horizontal-rule-top-light {
@include box-shadow(#fff 0 1px 0 inset);
border-top: 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; background: rgba(#fff, .5); }
.demo-light { @include box-shadow(rgba(#000, .3) 0 2px 10px inset, #fff 0 1px 2px 0px, rgba(#000, .05) 0 0 0 1px inset); }
.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 {
cursor: pointer;
a {color: rgba(#000, .2); text-shadow: rgba(#fff, 1) 0 1px 0;}
&:hover a { color: #000; } }
.heading-panel-light {
background: rgba(#fff, .5);
@include box-shadow(rgba(#000, .13) 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(#000, .03);
text-shadow: rgba(#fff, .9) 0 1px 1px;
@include box-shadow(rgba(#000, .15) 0 0 0 1px inset);
}
.mixin-panel-light {
@extend .inset-panel-light;
background: rgba(#fff, .8);
td.gutter { background: rgba(#000, .08); .line { border-right: 2px solid rgba(#000, .2); color: rgba(#000, .4); } }
}
@mixin light-theme($docs: false) {
$page-bg: #ececec; // image-url('bg-light.jpg');
$text: #111;
$heading: #222;
$strong-text: #000;
$search: #666;
$link: #307eb6;
$nav-link: #444;
$code: #222;
$main-nav: #000;
$main-nav-selected: darken(#fb292d, 15);
$docs-nav-selected: $strong-text;
$module-nav-selected: $link;
$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, $option-panel-border, $option-panel-bg);
@if($docs){
@include docs-theme(light, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected);
.syntaxhighlighter::-webkit-scrollbar-track-piece { -webkit-box-shadow: rgba(#000, .3) 0 0 3px 1px inset; background: rgba(#ddd, .8); }
.syntaxhighlighter::-webkit-scrollbar-thumb:horizontal { background: -webkit(linear-gradient(rgba(#000, 0) 40%, rgba(#000, .2))) #fff; -webkit-box-shadow: rgba(black, 0.2) 0px 0 0 1px inset; }
}
}