276 lines
9.4 KiB
SCSS
276 lines
9.4 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){
|
|
background: $page-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.demo #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}; }
|
|
|
|
#page aside + article { @extend .vertical-rule-left-#{$theme}; }
|
|
|
|
aside {
|
|
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], a[rel=html], a[rel=haml] { @extend .syntax-switch-#{$theme}; }
|
|
&.sass a[rel=sass], &.scss a[rel=scss], &.css a[rel=css], &.html a[rel=html], &.haml a[rel=haml] { 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};
|
|
.container textarea { color: $code; }
|
|
}
|
|
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, 6); 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; }
|
|
|
|
.vertical-rule-left-dark {
|
|
@include box-shadow(rgba(#fff, .07) 1px 0 0 inset);
|
|
border-left: 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); }}
|
|
.container textarea { background: darken(#2f2f2f, 6); }
|
|
}
|
|
|
|
@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, .5);
|
|
$option-panel-bg: rgba(#fff, .06);
|
|
|
|
@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: darken(#fff, .04); 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; }
|
|
|
|
.vertical-rule-left-light {
|
|
@include single-box-shadow(rgba(#fff, 1), 1px, 0, 0 inset);
|
|
border-left: 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); } }
|
|
.container textarea { background: darken(#fff, .04); }
|
|
}
|
|
|
|
@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; }
|
|
}
|
|
}
|