159 lines
2.3 KiB
SCSS
159 lines
2.3 KiB
SCSS
// Slate documentation styles
|
|
// Imports Slate defaults and applies custom variables
|
|
|
|
@import 'variables';
|
|
|
|
// Base Slate styles
|
|
@import 'normalize';
|
|
@import 'icon-font';
|
|
|
|
// Custom overrides
|
|
body {
|
|
background-color: $content-bg;
|
|
color: $content-text;
|
|
font-family: $font-family;
|
|
}
|
|
|
|
// Navigation
|
|
.toc-wrapper {
|
|
background-color: $nav-bg;
|
|
width: $nav-width;
|
|
|
|
.toc-link {
|
|
color: $nav-text;
|
|
|
|
&.active {
|
|
background-color: $nav-active-bg;
|
|
color: $nav-active-text;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: $nav-hover-bg;
|
|
}
|
|
}
|
|
|
|
.toc-h2 {
|
|
padding-left: 25px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
// Code blocks
|
|
pre {
|
|
background-color: $code-bg;
|
|
|
|
code {
|
|
color: $code-text;
|
|
font-family: $code-font-family;
|
|
}
|
|
}
|
|
|
|
// Inline code
|
|
code {
|
|
background-color: $code-bg;
|
|
color: $code-text;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-family: $code-font-family;
|
|
}
|
|
|
|
// Language tabs
|
|
.lang-selector {
|
|
background-color: $lang-select-bg;
|
|
|
|
a {
|
|
color: $lang-select-text;
|
|
|
|
&.active {
|
|
background-color: $lang-select-active-bg;
|
|
color: $lang-select-active-text;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Tables
|
|
table {
|
|
margin-bottom: 1em;
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
|
|
th, td {
|
|
padding: 8px 12px;
|
|
border: 1px solid $border-color;
|
|
}
|
|
|
|
th {
|
|
background-color: $code-bg;
|
|
font-weight: 600;
|
|
}
|
|
|
|
tr:nth-child(even) {
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
}
|
|
}
|
|
|
|
// Headers
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: $content-text;
|
|
}
|
|
|
|
h1 {
|
|
border-bottom: 1px solid $border-color;
|
|
padding-bottom: 0.5em;
|
|
}
|
|
|
|
// Links
|
|
a {
|
|
color: $nav-active-text;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
// Content area
|
|
.page-wrapper {
|
|
margin-left: $nav-width;
|
|
max-width: $max-content-width;
|
|
|
|
.content {
|
|
padding: 30px;
|
|
}
|
|
}
|
|
|
|
// Code annotations
|
|
.code-annotation {
|
|
background-color: $code-annotation-bg;
|
|
color: $code-annotation-text;
|
|
padding: 4px 8px;
|
|
border-radius: 3px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
// Search
|
|
.search {
|
|
input {
|
|
background-color: $code-bg;
|
|
border: 1px solid $border-color;
|
|
color: $content-text;
|
|
|
|
&::placeholder {
|
|
color: $code-annotation-text;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Responsive
|
|
@media (max-width: 930px) {
|
|
.toc-wrapper {
|
|
width: 100%;
|
|
position: relative;
|
|
height: auto;
|
|
}
|
|
|
|
.page-wrapper {
|
|
margin-left: 0;
|
|
}
|
|
}
|