Skip to content

Instantly share code, notes, and snippets.

@najamelan
Created March 9, 2019 21:45
Show Gist options
  • Save najamelan/f8248c47aca9e4690a5aac29e52ed215 to your computer and use it in GitHub Desktop.
Save najamelan/f8248c47aca9e4690a5aac29e52ed215 to your computer and use it in GitHub Desktop.
Initial work in porting the rustdoc light theme to scss
$block-bg: #f5f5f5;
$color-stab-internal-bg: #ffb9b3;
$nav-separater-border: #000;
$stab-unstable-bg: #fff5d6;
$stab-deprecated-bg: #f3dfff;
$stab-portability-bg: #c4ecff;
$theme-picker-bg: #fff;
$kdb-box-shadow: #c6cbd1;
$pre-ignore-border-left: rgba(255, 142, 0, .4);
$pre-ignore-border-left-hover: #ff9200;
$information-hover-pre-ignore-border-left: #ff9200;
$pre-compile-fail-border-left: rgba(255, 0, 0, .4);
$pre-compile-fail-border-left-hover: #f00;
$information-hover-pre-compile-fail-border-left: #f00;
$target-code: #fdffd3;
$target-in-band: #fdffd3;
$help-bg: #e9e9e9;
$color-1: #000;
$color-2: #333;
$color-3: #c67e2d;
$color-4: #4e4c4c;
$color-5: #000;
$color-6: #508157;
$color-7: #ad448e;
$color-8: #ba5d00;
$color-9: #cd00e2;
$color-10: #068000;
$color-11: #767b27;
$color-12: #546e8a;
$color-13: #2c8093;
$color-14: #4d76ae;
$color-15: #7c5af3;
$color-16: #6841f1;
$color-17: #9a6e31;
$color-18: #de5249;
$color-19: #8e908c;
$color-20: #4d4d4c;
$color-21: #3873ad;
$color-22: #304ffe;
$color-23: #f5f5f5;
$color-24: #999;
$color-25: #555;
$color-26: #808080;
$color-27: #8959a8;
$color-28: #4271ae;
$color-29: #718c00;
$color-30: #c82829;
$color-31: #3e999f;
$color-32: #b76514;
$color-33: #ff9011;
$color-34: rgba(255, 0, 0, .3);
$color-35: #f00;
$color-36: rgba(255, 142, 0, .3);
$color-37: rgba(255, 142, 0, 1);
$color-38: #0089ff;
$color-39: #fff;
$color-40: #888;
$color-41: #fff;
$background-color-1: #fff;
$background-color-2: #f5f5f5;
$background-color-3: #f1f1f1;
$background-color-4: #fff;
$background-color-5: #f6fdb0;
$background-color-6: #ccc;
$background-color-7: #c7b6ff;
$background-color-8: #afc6e4;
$background-color-9: #b4d1b9;
$background-color-10: #e7b1a0;
$background-color-11: #b7bd49;
$background-color-12: #c6afb3;
$background-color-13: #ffc891;
$background-color-14: #f5c4ff;
$background-color-15: #8ce488;
$background-color-16: #c3e0ff;
$background-color-17: #9aecff;
$background-color-18: #f99650;
$background-color-19: transparent;
$background-color-20: rgba(78, 139, 202, .2);
$background-color-21: #4e8bca;
$background-color-22: #000;
$background-color-23: #e6e6e6;
$background-color-24: rgba(0, 0, 0, .3);
$background-color-25: #eee;
$background-color-26: #ff1f1f;
$background-color-27: #fafbfc;
$background-color-28: #f9f9f9;
$background-color-29: #e0e0e0;
$border-color-1: #000;
$border-color-2: #ddd;
$border-color-3: #e0e0e0;
$border-color-4: #66afe9;
$border-color-5: #ffc600;
$border-color-6: #b71c1c;
$border-color-7: #7f0087;
$border-color-8: #7ba5db;
$border-color-9: #bfbfbf;
$border-color-10: #c7c7c7;
$border-color-11: transparent #000 transparent transparent;
$border-color-12: #000;
$border-color-13: #999;
$border-color-14: #d1d5da;
$border-color-15: #717171;
$border-color-16: #ccc;
$border-top-color-1: #777;
$border-top-color-2: #000;
$border-top-color-3: #e6e6e6;
$border-top-color-4: #0089ff;
$border-top-color-5: #e0e0e0;
$border-right-color-1: #e0e0e0;
$border-right-color-2: #000;
$border-bottom-color-1: #d5d5d5;
$border-bottom-color-2: #ddd;
$border-bottom-color-3: #ddd;
$border-bottom-color-4: #777;
$border-bottom-color-5: #ddd;
$border-bottom-color-6: #e0e0e0;
$border-bottom-color-7: #000;
$border-bottom-color-8: #c6cbd1;
$border-bottom-color-9: #ccc;
// General structure and fonts
// Code highlighting
body
{
background-color: $background-color-1;
color: $color-1;
}
h1
{
color: $color-1;
&.fqn { border-bottom-color: $border-bottom-color-1; }
}
h2
{
border-bottom-color: $border-bottom-color-2;
color: $color-1;
}
h3:not(.impl):not(.method):not(.type):not(.tymethod)
{
border-bottom-color: $border-bottom-color-2;
color: $color-1;
}
h4:not(.method):not(.type):not(.tymethod)
{
border-bottom-color: $border-bottom-color-2;
color: $color-1;
}
.in-band { background-color: $background-color-1; }
.invisible { background: transparent; }
.docblock
{
code { background-color: $background-color-2; }
h1 { border-bottom-color: $border-bottom-color-5; }
h2 { border-bottom-color: $border-bottom-color-5; }
h3 { border-bottom-color: $border-bottom-color-5; }
h4 { border-bottom-color: $border-bottom-color-5; }
h5 { border-bottom-color: $border-bottom-color-5; }
table
{
border-color: $border-color-2;
td { border-color: $border-color-2; }
th { border-color: $border-color-2; }
}
&:not(.type-decl) a:not(.srclink):not(.test-arrow) { color: $color-21; }
}
.docblock-short
{
code { background-color: $background-color-2; }
a:not(.srclink):not(.test-arrow) { color: $color-21; }
}
pre
{
background-color: $background-color-2;
&.rust
{
.comment { color: $color-19; }
.doccomment { color: $color-20; }
.kw { color: $color-27; }
.kw-2 { color: $color-28; }
.prelude-ty { color: $color-28; }
.number { color: $color-29; }
.string { color: $color-29; }
.self { color: $color-30; }
.bool-val { color: $color-30; }
.prelude-val { color: $color-30; }
.macro { color: $color-31; }
.macro-nonterminal { color: $color-31; }
.lifetime { color: $color-32; }
.question-mark { color: $color-33; }
.attribute
{
color: $color-30;
.ident { color: $color-30; }
}
}
&.ignore
{
border-left: 2px solid $pre-ignore-border-left;
&:hover { border-left: 2px solid $pre-ignore-border-left-hover; }
.information:hover & { border-left: 2px solid $information-hover-pre-ignore-border-left; }
}
&.compile_fail
{
border-left: 2px solid $pre-compile-fail-border-left;
&:hover { border-left: 2px solid $pre-compile-fail-border-left-hover; }
.information:hover & { border-left: 2px solid $information-hover-pre-compile-fail-border-left; }
}
}
.information
{
> .compile_fail:hover { color: $color-35; }
> .ignore:hover { color: $color-37; }
}
.sidebar
{
background-color: $background-color-3;
.current { background-color: $background-color-4; }
.location
{
background-color: $background-color-4;
border-color: $border-color-1;
color: $color-2;
}
.version { border-bottom-color: $border-bottom-color-3; }
}
.source .sidebar { background-color: $background-color-4; }
.sidebar-title
{
border-bottom-color: $border-bottom-color-4;
border-top-color: $border-top-color-1;
}
.block a
{
&:hover { background: $block-bg; }
&.current
{
&.enum { color: $color-6; }
&.struct { color: $color-7; }
&.type { color: $color-8; }
&.foreigntype { color: $color-9; }
&.attr { color: $color-10; }
&.derive { color: $color-10; }
&.macro { color: $color-10; }
&.union { color: $color-11; }
&.constant { color: $color-12; }
&.static { color: $color-12; }
&.primitive { color: $color-13; }
&.mod { color: $color-14; }
&.trait { color: $color-15; }
&.traitalias { color: $color-16; }
&.fn { color: $color-17; }
&.method { color: $color-17; }
&.tymethod { color: $color-17; }
&.keyword { color: $color-18; }
}
}
.line-numbers
{
span { color: $color-3; }
.line-highlighted { background-color: $background-color-5 !important; }
&:target { background-color: $background-color-19; }
}
.content
{
.method .where { color: $color-4; }
.fn .where { color: $color-4; }
.where.fmt-newline { color: $color-4; }
.highlighted
{
background-color: $background-color-6;
color : $color-5 !important;
a { color: $color-5 !important; }
span { color: $color-5 !important; }
&.trait { background-color: $background-color-7; }
&.traitalias { background-color: $background-color-7; }
&.mod { background-color: $background-color-8; }
&.externcrate { background-color: $background-color-8; }
&.enum { background-color: $background-color-9; }
&.struct { background-color: $background-color-10; }
&.union { background-color: $background-color-11; }
&.fn { background-color: $background-color-12; }
&.method { background-color: $background-color-12; }
&.tymethod { background-color: $background-color-12; }
&.type { background-color: $background-color-13; }
&.foreigntype { background-color: $background-color-14; }
&.attr { background-color: $background-color-15; }
&.derive { background-color: $background-color-15; }
&.macro { background-color: $background-color-15; }
&.constant { background-color: $background-color-16; }
&.static { background-color: $background-color-16; }
&.primitive { background-color: $background-color-17; }
&.keyword { background-color: $background-color-18; }
}
.fnname { color: $color-17; }
span.enum { color: $color-6; }
a.enum { color: $color-6; }
span.struct { color: $color-7; }
a.struct { color: $color-7; }
span.type { color: $color-8; }
a.type { color: $color-8; }
span.foreigntype { color: $color-9; }
a.foreigntype { color: $color-9; }
span.attr { color: $color-10; }
a.attr { color: $color-10; }
span.derive { color: $color-10; }
a.derive { color: $color-10; }
span.macro { color: $color-10; }
a.macro { color: $color-10; }
span.union { color: $color-11; }
a.union { color: $color-11; }
span.constant { color: $color-12; }
a.constant { color: $color-12; }
span.static { color: $color-12; }
a.static { color: $color-12; }
span.primitive { color: $color-13; }
a.primitive { color: $color-13; }
span.externcrate { color: $color-14; }
span.mod { color: $color-14; }
a.mod { color: $color-14; }
span.trait { color: $color-15; }
a.trait { color: $color-15; }
span.traitalias { color: $color-16; }
a.traitalias { color: $color-16; }
span.fn { color: $color-17; }
a.fn { color: $color-17; }
span.method { color: $color-17; }
a.method { color: $color-17; }
span.tymethod { color: $color-17; }
a.tymethod { color: $color-17; }
span.keyword { color: $color-18; }
a.keyword { color: $color-18; }
}
nav
{
border-bottom-color: $border-bottom-color-6;
&.main
{
.current
{
border-bottom-color: $border-bottom-color-7;
border-top-color: $border-top-color-2;
}
.separator { border: 1px solid $nav-separater-border; }
}
}
a
{
color: $color-5;
&.test-arrow
{
background-color: $background-color-20;
color: $color-23;
&:hover { background-color: $background-color-21; }
}
}
.stability a { color: $color-21; }
.stab.internal
{
background : $color-stab-internal-bg;
border-color: $border-color-6;
a { color: $color-22; }
}
.collapse-toggle { color: $color-24; }
#crate-search
{
background-color: $background-color-1;
border-color: $border-color-3;
box-shadow: 0 0 0 1px #e0e0e0, 0 0 0 2px transparent;
color: $color-25;
+ .search-input { box-shadow: 1px 0 0 1px #e0e0e0, 0 0 0 2px transparent; }
}
.search-input
{
background-color: $background-color-1;
box-shadow : 0 0 0 1px #e0e0e0, 0 0 0 2px transparent;
color : $color-25;
&:focus { border-color: $border-color-4; }
}
.module-item .stab { color: $color-5; }
.stab.unstable
{
background : $stab-unstable-bg;
border-color: $border-color-5;
}
.stab.deprecated
{
background : $stab-deprecated-bg;
border-color: $border-color-7;
}
.stab.portability
{
background : $stab-portability-bg;
border-color: $border-color-8;
}
#help >div
{
background: $help-bg;
border-color: $border-color-9;
}
.since { color: $color-26; }
tr.result
{
span.primitive::after { color: $color-1; }
span.keyword::after { color: $color-1; }
}
.example-wrap > pre.line-number { border-color: $border-color-10; }
.toggle-label { color: $color-24; }
:target
{
> code { background: $target-code ; }
> .in-band { background: $target-in-band; }
}
.tooltip.compile_fail { color: $color-34; }
.tooltip.ignore { color: $color-36; }
.search-failed a { color: $color-38; }
.tooltip .tooltiptext
{
background-color: $background-color-22;
color: $color-39;
&::after { border-color: $border-color-11; }
}
.important-traits .tooltip .tooltiptext
{
background-color: $background-color-1;
border-color: $border-color-12;
color: $color-1;
}
#titles
{
> div
{
&:not(.selected)
{
background-color: $background-color-23;
border-top-color: $border-top-color-3;
}
&:hover { border-top-color: $border-top-color-4; }
> div.count { color: $color-40; }
&.selected { border-top-color: $border-top-color-4; }
}
}
.modal { background-color: $background-color-24; }
.modal-content
{
background-color: $background-color-25;
border-color: $border-color-13;
> .close
{
background-color: $background-color-25;
border-color: $border-color-13;
&:hover
{
background-color: $background-color-26;
color: $color-41;
+ .whiter { background-color: $background-color-26; }
}
}
> .whiter { background-color: $background-color-25; }
}
kbd
{
background-color : $background-color-27;
border-bottom-color: $border-bottom-color-8;
border-color : $border-color-14;
box-shadow : $kdb-box-shadow;
color : $color-5;
}
#theme-picker
{
background-color: $background-color-4;
border-color : $border-color-3;
&:hover { border-color: $border-color-15; }
&:focus { border-color: $border-color-15; }
}
#settings-menu
{
background-color: $background-color-4;
border-color : $border-color-3;
&:hover { border-color: $border-color-15; }
&:focus { border-color: $border-color-15; }
}
#theme-choices
{
background-color: $background-color-4;
border-color : $border-color-16;
> button
{
&:not(:first-child) { border-top-color: $border-top-color-5; }
&:hover { background-color: $background-color-25; }
&:focus { background-color: $background-color-25; }
}
}
#all-types
{
background-color: $background-color-4;
&:hover { background-color: $background-color-28; }
}
.search-results
{
td {
span.alias { color: $color-5; }
span.grey { color: $color-24; }
}
}
#sidebar-toggle
{
background-color: $background-color-3;
&:hover { background-color: $background-color-29; }
}
#source-sidebar
{
background-color: $background-color-3;
>.title { border-bottom-color: $border-bottom-color-9; }
}
div.files
{
> a
{
&:hover { background-color: $background-color-29; }
}
> .selected { background-color: $background-color-4; }
}
div.name
{
&:hover { background-color: $background-color-29; }
}
@media (max-width: 700px)
{
.sidebar-menu
{
background-color : $background-color-3 ;
border-bottom-color: $border-bottom-color-6;
border-right-color : $border-right-color-1 ;
}
.sidebar-elems
{
background-color : $background-color-3 ;
border-right-color: $border-right-color-2;
}
#sidebar-filler
{
background-color : $background-color-3 ;
border-bottom-color: $border-bottom-color-6;
}
#theme-picker { background: $theme-picker-bg; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment