mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-06-14 11:52:32 +03:00
Refactored CSS to use CSS Variables (#1409)
* First stab at using CSS variables * Port color-black to CSS variables and fix SCSS compile * add hex2rgb helper function * Port md-color-white to CSS variables * Port code color and background * Fix a rebase mistake * Fix lint * adopt upstream changes Co-authored-by: Martin Donath <squidfunk@users.noreply.github.com>
This commit is contained in:
parent
446e55767b
commit
ca50ed8200
@ -5,4 +5,4 @@
|
|||||||
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.926ffd9e.min.js.map",
|
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.926ffd9e.min.js.map",
|
||||||
"assets/stylesheets/app-palette.scss": "assets/stylesheets/app-palette.8adb38b9.min.css",
|
"assets/stylesheets/app-palette.scss": "assets/stylesheets/app-palette.8adb38b9.min.css",
|
||||||
"assets/stylesheets/app.scss": "assets/stylesheets/app.d1c09be7.min.css"
|
"assets/stylesheets/app.scss": "assets/stylesheets/app.d1c09be7.min.css"
|
||||||
}
|
}
|
||||||
|
@ -49,6 +49,10 @@ $break-devices: (
|
|||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@function hex2rgb($hex) {
|
||||||
|
@return red($hex), green($hex), blue($hex);
|
||||||
|
}
|
||||||
|
|
||||||
// ----------------------------------------------------------------------------
|
// ----------------------------------------------------------------------------
|
||||||
// Variables: base colors
|
// Variables: base colors
|
||||||
// ----------------------------------------------------------------------------
|
// ----------------------------------------------------------------------------
|
||||||
@ -71,6 +75,58 @@ $md-color-white--lighter: hsla(0, 0%, 100%, 0.3) !default;
|
|||||||
$md-color-white--lightest: hsla(0, 0%, 100%, 0.12) !default;
|
$md-color-white--lightest: hsla(0, 0%, 100%, 0.12) !default;
|
||||||
$md-color-white--transparent: hsla(0, 0%, 100%, 0) !default;
|
$md-color-white--transparent: hsla(0, 0%, 100%, 0) !default;
|
||||||
|
|
||||||
|
// ----------------------------------------------------------------------------
|
||||||
|
// CSS Variables: base colors
|
||||||
|
// ----------------------------------------------------------------------------
|
||||||
|
|
||||||
|
:root {
|
||||||
|
// Primary and accent colors
|
||||||
|
--md-color-primary: #{$md-color-primary};
|
||||||
|
--md-color-primary-values: #{hex2rgb($md-color-primary)};
|
||||||
|
--md-color-accent: #{$md-color-accent};
|
||||||
|
--md-color-accent-values: #{hex2rgb($md-color-accent)};
|
||||||
|
|
||||||
|
// Shades of black
|
||||||
|
--md-color-text: #{$md-color-black};
|
||||||
|
--md-color-text-values: 0, 0, 0;
|
||||||
|
--md-color-text--light: #{$md-color-black--light};
|
||||||
|
--md-color-text--lighter: #{$md-color-black--lighter};
|
||||||
|
--md-color-text--lightest: #{$md-color-black--lightest};
|
||||||
|
--md-color-text--transparent: #{$md-color-black--transparent};
|
||||||
|
|
||||||
|
// Shades of white
|
||||||
|
--md-color-background: #{$md-color-white};
|
||||||
|
--md-color-background--light: #{$md-color-white--light};
|
||||||
|
--md-color-background--lighter: #{$md-color-white--lighter};
|
||||||
|
--md-color-background--lightest: #{$md-color-white--lightest};
|
||||||
|
--md-color-background--transparent: #{$md-color-white--transparent};
|
||||||
|
|
||||||
|
// Code blocks
|
||||||
|
--md-code-background: hsla(0, 0%, 92.5%, 0.5);
|
||||||
|
--md-code-color: #37474F;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root.dark-mode {
|
||||||
|
// Primary and accent colors
|
||||||
|
--md-color-primary: #{$md-color-primary};
|
||||||
|
--md-color-accent: #{$md-color-accent};
|
||||||
|
|
||||||
|
// Shades of white
|
||||||
|
--md-color-background: #{$md-color-white};
|
||||||
|
--md-color-background--light: #{$md-color-white--light};
|
||||||
|
--md-color-background--lighter: #{$md-color-white--lighter};
|
||||||
|
--md-color-background--lightest: #{$md-color-white--lightest};
|
||||||
|
--md-color-background--transparent: #{$md-color-white--transparent};
|
||||||
|
|
||||||
|
// Shades of black
|
||||||
|
--md-color-text: #{$md-color-black};
|
||||||
|
--md-color-text-values: 255, 255, 255;
|
||||||
|
--md-color-text--light: #{$md-color-black--light};
|
||||||
|
--md-color-text--lighter: #{$md-color-black--lighter};
|
||||||
|
--md-color-text--lightest: #{$md-color-black--lightest};
|
||||||
|
--md-color-text--transparent: #{$md-color-black--transparent};
|
||||||
|
}
|
||||||
|
|
||||||
// ----------------------------------------------------------------------------
|
// ----------------------------------------------------------------------------
|
||||||
// Variables: sizing and spacing
|
// Variables: sizing and spacing
|
||||||
// ----------------------------------------------------------------------------
|
// ----------------------------------------------------------------------------
|
||||||
|
@ -51,7 +51,7 @@ button[data-md-color-accent] {
|
|||||||
background-color 250ms,
|
background-color 250ms,
|
||||||
opacity 250ms;
|
opacity 250ms;
|
||||||
border-radius: px2rem(2px);
|
border-radius: px2rem(2px);
|
||||||
color: $md-color-white;
|
color: var(--md-color-background);
|
||||||
font-size: ms(-1);
|
font-size: ms(-1);
|
||||||
text-align: left;
|
text-align: left;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -128,7 +128,7 @@ button[data-md-color-accent] {
|
|||||||
|
|
||||||
// Repository containing source
|
// Repository containing source
|
||||||
.md-nav__source {
|
.md-nav__source {
|
||||||
background-color: mix($color, $md-color-black, 75%);
|
background-color: $color; // TODO: https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables mix($color, var(--md-color-text), 75%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -158,9 +158,9 @@ button[data-md-color-accent] {
|
|||||||
|
|
||||||
// Color tile for presentation in theme documentation
|
// Color tile for presentation in theme documentation
|
||||||
button[data-md-color-primary="white"] {
|
button[data-md-color-primary="white"] {
|
||||||
background-color: $md-color-white;
|
background-color: var(--md-color-background);
|
||||||
color: $md-color-black;
|
color: var(--md-color-text);
|
||||||
box-shadow: 0 0 px2rem(1px) $md-color-black--light inset;
|
box-shadow: 0 0 px2rem(1px) var(--md-color-text--light) inset;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Overrides for black color
|
// Overrides for black color
|
||||||
@ -168,18 +168,18 @@ button[data-md-color-primary="white"] {
|
|||||||
|
|
||||||
// Application header (stays always on top)
|
// Application header (stays always on top)
|
||||||
.md-header {
|
.md-header {
|
||||||
background-color: $md-color-white;
|
background-color: var(--md-color-background);
|
||||||
color: $md-color-black;
|
color: var(--md-color-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hero teaser
|
// Hero teaser
|
||||||
.md-hero {
|
.md-hero {
|
||||||
background-color: $md-color-white;
|
background-color: var(--md-color-background);
|
||||||
color: $md-color-black;
|
color: var(--md-color-text);
|
||||||
|
|
||||||
// Add a border if there are no tabs
|
// Add a border if there are no tabs
|
||||||
&--expand {
|
&--expand {
|
||||||
border-bottom: px2rem(1px) solid $md-color-black--lightest;
|
border-bottom: px2rem(1px) solid var(--md-color-text--lightest);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -188,8 +188,8 @@ button[data-md-color-primary="white"] {
|
|||||||
|
|
||||||
// Repository containing source
|
// Repository containing source
|
||||||
.md-nav__source {
|
.md-nav__source {
|
||||||
background-color: $md-color-black--lightest;
|
background-color: var(--md-color-text--lightest);
|
||||||
color: $md-color-black;
|
color: var(--md-color-text);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -198,11 +198,11 @@ button[data-md-color-primary="white"] {
|
|||||||
|
|
||||||
// Search input
|
// Search input
|
||||||
.md-search__input {
|
.md-search__input {
|
||||||
background-color: $md-color-black--lightest;
|
background-color: var(--md-color-text--lightest);
|
||||||
|
|
||||||
// Search input placeholder
|
// Search input placeholder
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: $md-color-black--light;
|
color: var(--md-color-text--light);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -212,13 +212,13 @@ button[data-md-color-primary="white"] {
|
|||||||
|
|
||||||
// Site title in main navigation
|
// Site title in main navigation
|
||||||
html & .md-nav--primary .md-nav__title[for="__drawer"] {
|
html & .md-nav--primary .md-nav__title[for="__drawer"] {
|
||||||
background-color: $md-color-white;
|
background-color: var(--md-color-background);
|
||||||
color: $md-color-black;
|
color: var(--md-color-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hero teaser
|
// Hero teaser
|
||||||
.md-hero {
|
.md-hero {
|
||||||
border-bottom: px2rem(1px) solid $md-color-black--lightest;
|
border-bottom: px2rem(1px) solid var(--md-color-text--lightest);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -227,9 +227,9 @@ button[data-md-color-primary="white"] {
|
|||||||
|
|
||||||
// Tabs with outline
|
// Tabs with outline
|
||||||
.md-tabs {
|
.md-tabs {
|
||||||
border-bottom: px2rem(1px) solid $md-color-black--lightest;
|
border-bottom: px2rem(1px) solid var(--md-color-text--lightest);
|
||||||
background-color: $md-color-white;
|
background-color: var(--md-color-background);
|
||||||
color: $md-color-black;
|
color: var(--md-color-text);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -261,7 +261,7 @@ button[data-md-color-primary="black"] {
|
|||||||
|
|
||||||
// Repository containing source
|
// Repository containing source
|
||||||
.md-nav__source {
|
.md-nav__source {
|
||||||
background-color: mix($clr-black, $md-color-white, 75%);
|
background-color: var(--md-color-background); // TODO: mix($clr-black, var(--md-color-background, 75%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -270,7 +270,7 @@ button[data-md-color-primary="black"] {
|
|||||||
|
|
||||||
// Search input
|
// Search input
|
||||||
.md-search__input {
|
.md-search__input {
|
||||||
background-color: $md-color-white--lighter;
|
background-color: var(--md-color-background--lighter);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -33,7 +33,7 @@ body {
|
|||||||
// Default fonts
|
// Default fonts
|
||||||
body,
|
body,
|
||||||
input {
|
input {
|
||||||
color: $md-color-black;
|
color: var(--md-color-text);
|
||||||
font-feature-settings: "kern", "liga";
|
font-feature-settings: "kern", "liga";
|
||||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
}
|
}
|
||||||
@ -42,7 +42,7 @@ input {
|
|||||||
pre,
|
pre,
|
||||||
code,
|
code,
|
||||||
kbd {
|
kbd {
|
||||||
color: $md-color-black;
|
color: var(--md-color-text);
|
||||||
font-feature-settings: "kern";
|
font-feature-settings: "kern";
|
||||||
font-family: "Courier New", Courier, monospace;
|
font-family: "Courier New", Courier, monospace;
|
||||||
}
|
}
|
||||||
@ -73,7 +73,7 @@ kbd {
|
|||||||
// 1st level headline
|
// 1st level headline
|
||||||
h1 {
|
h1 {
|
||||||
margin: 0 0 px2rem(40px);
|
margin: 0 0 px2rem(40px);
|
||||||
color: $md-color-black--light;
|
color: var(--md-color-text--light);
|
||||||
font-size: ms(3);
|
font-size: ms(3);
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
letter-spacing: -0.01em;
|
letter-spacing: -0.01em;
|
||||||
@ -115,7 +115,7 @@ kbd {
|
|||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
margin: px2rem(16px) 0;
|
margin: px2rem(16px) 0;
|
||||||
color: $md-color-black--light;
|
color: var(--md-color-text--light);
|
||||||
font-size: ms(-1);
|
font-size: ms(-1);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
letter-spacing: -0.01em;
|
letter-spacing: -0.01em;
|
||||||
@ -129,12 +129,12 @@ kbd {
|
|||||||
// Horizontal separators
|
// Horizontal separators
|
||||||
hr {
|
hr {
|
||||||
margin: 1.5em 0;
|
margin: 1.5em 0;
|
||||||
border-bottom: px2rem(1px) dotted $md-color-black--lighter;
|
border-bottom: px2rem(1px) dotted var(--md-color-text--lighter);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Links
|
// Links
|
||||||
a {
|
a {
|
||||||
color: $md-color-primary;
|
color: var(--md-color-primary);
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
|
|
||||||
// Also enable color transition on pseudo elements
|
// Also enable color transition on pseudo elements
|
||||||
@ -146,7 +146,7 @@ kbd {
|
|||||||
// Focused or hover links
|
// Focused or hover links
|
||||||
&:focus,
|
&:focus,
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $md-color-accent;
|
color: var(--md-color-accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add URLs for print
|
// Add URLs for print
|
||||||
@ -154,7 +154,7 @@ kbd {
|
|||||||
|
|
||||||
// Show link URL
|
// Show link URL
|
||||||
&::after {
|
&::after {
|
||||||
color: $md-color-black--light;
|
color: var(--md-color-text--light);
|
||||||
content: " [" attr(href) "]";
|
content: " [" attr(href) "]";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -163,8 +163,8 @@ kbd {
|
|||||||
// Code blocks
|
// Code blocks
|
||||||
code,
|
code,
|
||||||
pre {
|
pre {
|
||||||
background-color: $md-code-background;
|
background-color: var(--md-code-background);
|
||||||
color: $md-code-color;
|
color: var(--md-code-color);
|
||||||
font-size: 85%;
|
font-size: 85%;
|
||||||
direction: ltr;
|
direction: ltr;
|
||||||
|
|
||||||
@ -182,8 +182,8 @@ kbd {
|
|||||||
padding: 0.0625em * $correct 0;
|
padding: 0.0625em * $correct 0;
|
||||||
border-radius: px2rem(2px);
|
border-radius: px2rem(2px);
|
||||||
box-shadow:
|
box-shadow:
|
||||||
+0.25em * $correct 0 0 $md-code-background,
|
+0.25em * $correct 0 0 var(--md-code-background),
|
||||||
-0.25em * $correct 0 0 $md-code-background;
|
-0.25em * $correct 0 0 var(--md-code-background);
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
box-decoration-break: clone;
|
box-decoration-break: clone;
|
||||||
|
|
||||||
@ -244,11 +244,11 @@ kbd {
|
|||||||
|
|
||||||
// Scrollbar thumb
|
// Scrollbar thumb
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
background-color: $md-color-black--lighter;
|
background-color: var(--md-color-text--lighter);
|
||||||
|
|
||||||
// Hovered scrollbar thumb
|
// Hovered scrollbar thumb
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $md-color-accent;
|
background-color: var(--md-color-accent);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -299,7 +299,7 @@ kbd {
|
|||||||
|
|
||||||
// Abbreviations
|
// Abbreviations
|
||||||
abbr {
|
abbr {
|
||||||
border-bottom: px2rem(1px) dotted $md-color-black--light;
|
border-bottom: px2rem(1px) dotted var(--md-color-text--light);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
cursor: help;
|
cursor: help;
|
||||||
}
|
}
|
||||||
@ -324,14 +324,14 @@ kbd {
|
|||||||
// Blockquotes, possibly nested
|
// Blockquotes, possibly nested
|
||||||
blockquote {
|
blockquote {
|
||||||
padding-left: px2rem(12px);
|
padding-left: px2rem(12px);
|
||||||
border-left: px2rem(4px) solid $md-color-black--lighter;
|
border-left: px2rem(4px) solid var(--md-color-text--lighter);
|
||||||
color: $md-color-black--light;
|
color: var(--md-color-text--light);
|
||||||
|
|
||||||
// Adjust for right-to-left languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
padding-right: px2rem(12px);
|
padding-right: px2rem(12px);
|
||||||
padding-left: initial;
|
padding-left: initial;
|
||||||
border-right: px2rem(4px) solid $md-color-black--lighter;
|
border-right: px2rem(4px) solid var(--md-color-text--lighter);
|
||||||
border-left: initial;
|
border-left: initial;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -423,7 +423,7 @@ kbd {
|
|||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-radius: px2rem(2px);
|
border-radius: px2rem(2px);
|
||||||
font-size: ms(-1);
|
font-size: ms(-1);
|
||||||
box-shadow: inset 0 0 0 px2rem(1px) $md-color-black--lightest;
|
box-shadow: inset 0 0 0 px2rem(1px) var(--md-color-text--lightest);
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
|
|
||||||
@ -449,15 +449,15 @@ kbd {
|
|||||||
th {
|
th {
|
||||||
min-width: px2rem(100px);
|
min-width: px2rem(100px);
|
||||||
padding: px2rem(12px) px2rem(16px);
|
padding: px2rem(12px) px2rem(16px);
|
||||||
background-color: $md-color-black--light;
|
background-color: var(--md-color-text--light);
|
||||||
color: $md-color-white;
|
color: var(--md-color-background);
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Table cells
|
// Table cells
|
||||||
td {
|
td {
|
||||||
padding: px2rem(12px) px2rem(16px);
|
padding: px2rem(12px) px2rem(16px);
|
||||||
border-top: px2rem(1px) solid $md-color-black--lightest;
|
border-top: px2rem(1px) solid var(--md-color-text--lightest);
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -468,7 +468,7 @@ kbd {
|
|||||||
// Add background on hover
|
// Add background on hover
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: rgba(0, 0, 0, 0.035);
|
background-color: rgba(0, 0, 0, 0.035);
|
||||||
box-shadow: 0 px2rem(1px) 0 $md-color-white inset;
|
box-shadow: 0 px2rem(1px) 0 var(--md-color-background) inset;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove top border on first row
|
// Remove top border on first row
|
||||||
|
@ -245,7 +245,7 @@ $codehilite-whitespace: transparent;
|
|||||||
// Disable user selection, so code can be easily copied without
|
// Disable user selection, so code can be easily copied without
|
||||||
// accidentally also copying the line numbers
|
// accidentally also copying the line numbers
|
||||||
.linenos {
|
.linenos {
|
||||||
color: $md-color-black--lighter;
|
color: var(--md-color-text--lighter);
|
||||||
box-shadow: inset 0 0 0 px2rem(1px) $md-code-background;
|
box-shadow: inset 0 0 0 px2rem(1px) $md-code-background;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|
||||||
@ -273,9 +273,9 @@ $codehilite-whitespace: transparent;
|
|||||||
margin-right: px2rem(12px);
|
margin-right: px2rem(12px);
|
||||||
margin-left: px2rem(-12px);
|
margin-left: px2rem(-12px);
|
||||||
padding-left: px2rem(12px);
|
padding-left: px2rem(12px);
|
||||||
border-right: px2rem(1px) solid $md-color-black--lightest;
|
border-right: px2rem(1px) solid var(--md-color-text--lightest);
|
||||||
background-color: $md-code-gutter;
|
background-color: $md-code-gutter;
|
||||||
color: $md-color-black--lighter;
|
color: var(--md-color-text--lighter);
|
||||||
content: attr(data-linenos);
|
content: attr(data-linenos);
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|
||||||
|
@ -60,7 +60,7 @@
|
|||||||
|
|
||||||
// Footnotes extension
|
// Footnotes extension
|
||||||
.footnote {
|
.footnote {
|
||||||
color: $md-color-black--light;
|
color: var(--md-color-text--light);
|
||||||
font-size: ms(-1);
|
font-size: ms(-1);
|
||||||
|
|
||||||
// Remove additional spacing on footnotes
|
// Remove additional spacing on footnotes
|
||||||
@ -74,7 +74,7 @@
|
|||||||
|
|
||||||
// Darken color for targeted footnote
|
// Darken color for targeted footnote
|
||||||
&:target {
|
&:target {
|
||||||
color: $md-color-black;
|
color: var(--md-color-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove spacing on first element
|
// Remove spacing on first element
|
||||||
@ -92,7 +92,7 @@
|
|||||||
// Active or targeted back reference
|
// Active or targeted back reference
|
||||||
&:hover .footnote-backref:hover,
|
&:hover .footnote-backref:hover,
|
||||||
&:target .footnote-backref {
|
&:target .footnote-backref {
|
||||||
color: $md-color-accent;
|
color: var(--md-color-accent);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -106,7 +106,7 @@
|
|||||||
&::before {
|
&::before {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin: 0 0.2em;
|
margin: 0 0.2em;
|
||||||
border-left: px2rem(1px) solid $md-color-black--lighter;
|
border-left: px2rem(1px) solid var(--md-color-text--lighter);
|
||||||
font-size: 1.25em;
|
font-size: 1.25em;
|
||||||
content: "";
|
content: "";
|
||||||
vertical-align: px2rem(-5px);
|
vertical-align: px2rem(-5px);
|
||||||
@ -121,7 +121,7 @@
|
|||||||
transform 250ms 125ms,
|
transform 250ms 125ms,
|
||||||
color 250ms,
|
color 250ms,
|
||||||
opacity 125ms 125ms;
|
opacity 125ms 125ms;
|
||||||
color: $md-color-black--lighter;
|
color: var(--md-color-black--lighter);
|
||||||
// Hack: remove Unicode arrow for icon
|
// Hack: remove Unicode arrow for icon
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
@ -50,7 +50,7 @@
|
|||||||
|
|
||||||
// Higher specificity for color due to palettes integration
|
// Higher specificity for color due to palettes integration
|
||||||
html body & {
|
html body & {
|
||||||
color: $md-color-black--lighter;
|
color: var(--md-color-text--lighter);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hide for print
|
// Hide for print
|
||||||
@ -77,7 +77,7 @@
|
|||||||
.headerlink:focus,
|
.headerlink:focus,
|
||||||
.headerlink:hover,
|
.headerlink:hover,
|
||||||
:target .headerlink {
|
:target .headerlink {
|
||||||
color: $md-color-accent;
|
color: var(--md-color-accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Correct anchor offset for link blurring
|
// Correct anchor offset for link blurring
|
||||||
|
@ -81,7 +81,7 @@
|
|||||||
right: px2rem(12px);
|
right: px2rem(12px);
|
||||||
width: px2rem(20px);
|
width: px2rem(20px);
|
||||||
height: px2rem(20px);
|
height: px2rem(20px);
|
||||||
background-color: $md-color-black--lighter;
|
background-color: var(--md-color-black--lighter);
|
||||||
mask-image: url("{{ chevron-down }}");
|
mask-image: url("{{ chevron-down }}");
|
||||||
content: "";
|
content: "";
|
||||||
|
|
||||||
|
@ -32,7 +32,7 @@
|
|||||||
display: none;
|
display: none;
|
||||||
order: 99;
|
order: 99;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: $md-color-white;
|
background-color: var(--md-color-background);
|
||||||
|
|
||||||
// Actual content
|
// Actual content
|
||||||
pre {
|
pre {
|
||||||
@ -47,7 +47,7 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
margin: 1em 0;
|
margin: 1em 0;
|
||||||
border: px2rem(1px) solid $md-color-black--lightest;
|
border: px2rem(1px) solid var(--md-color-text--lightest);
|
||||||
border-radius: 0.2em;
|
border-radius: 0.2em;
|
||||||
|
|
||||||
// Hide radio buttons
|
// Hide radio buttons
|
||||||
@ -95,7 +95,7 @@
|
|||||||
|
|
||||||
// Hovered tab label
|
// Hovered tab label
|
||||||
html &:hover {
|
html &:hover {
|
||||||
color: $md-color-accent;
|
color: var(--md-color-accent);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -107,7 +107,7 @@
|
|||||||
@include break-to-device(mobile) {
|
@include break-to-device(mobile) {
|
||||||
margin: 1em px2rem(-16px);
|
margin: 1em px2rem(-16px);
|
||||||
border: 0;
|
border: 0;
|
||||||
border-top: px2rem(1px) solid $md-color-black--lightest;
|
border-top: px2rem(1px) solid var(--md-color-text--lightest);
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
|
||||||
// Actual container with code, overflowing
|
// Actual container with code, overflowing
|
||||||
|
@ -57,7 +57,7 @@
|
|||||||
left: px2em(-24px);
|
left: px2em(-24px);
|
||||||
width: px2em(20px);
|
width: px2em(20px);
|
||||||
height: px2em(20px);
|
height: px2em(20px);
|
||||||
background-color: $md-color-black--lightest;
|
background-color: var(--md-color-black--lightest);
|
||||||
mask-image: url("{{ checkbox-blank-circle }}");
|
mask-image: url("{{ checkbox-blank-circle }}");
|
||||||
content: "";
|
content: "";
|
||||||
|
|
||||||
|
@ -26,13 +26,13 @@
|
|||||||
|
|
||||||
// Announcement bar
|
// Announcement bar
|
||||||
.md-announcement {
|
.md-announcement {
|
||||||
background-color: $md-color-black;
|
background-color: var(--md-color-text);
|
||||||
|
|
||||||
// Actual content
|
// Actual content
|
||||||
&__inner {
|
&__inner {
|
||||||
min-height: px2rem(48px);
|
min-height: px2rem(48px);
|
||||||
padding: 0 px2rem(16px);
|
padding: 0 px2rem(16px);
|
||||||
color: $md-color-white;
|
color: var(--md-color-background);
|
||||||
font-size: px2rem(14px);
|
font-size: px2rem(14px);
|
||||||
line-height: px2rem(48px);
|
line-height: px2rem(48px);
|
||||||
}
|
}
|
||||||
|
@ -35,8 +35,8 @@ $md-toggle__drawer--checked:
|
|||||||
// Stretch container to viewport and set base font-size to 10px for simple
|
// Stretch container to viewport and set base font-size to 10px for simple
|
||||||
// calculations base on relative ems (rems)
|
// calculations base on relative ems (rems)
|
||||||
html {
|
html {
|
||||||
height: 100%;
|
min-height: 100%;
|
||||||
background-color: $md-color-white;
|
background-color: var(--md-color-background);
|
||||||
// Hack: normally, we would set the base font-size to 62.5%, so we can base
|
// Hack: normally, we would set the base font-size to 62.5%, so we can base
|
||||||
// all calculations on 10px, but Chromium and Chrome define a minimal font
|
// all calculations on 10px, but Chromium and Chrome define a minimal font
|
||||||
// size of 12 if the system language is set to Chinese. For this reason we
|
// size of 12 if the system language is set to Chinese. For this reason we
|
||||||
@ -146,7 +146,7 @@ hr {
|
|||||||
width 0ms 250ms,
|
width 0ms 250ms,
|
||||||
height 0ms 250ms,
|
height 0ms 250ms,
|
||||||
opacity 250ms;
|
opacity 250ms;
|
||||||
background-color: $md-color-black--light;
|
background-color: var(--md-color-black--light);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
|
|
||||||
@ -177,8 +177,8 @@ hr {
|
|||||||
padding: px2rem(6px) px2rem(10px);
|
padding: px2rem(6px) px2rem(10px);
|
||||||
transform: translateY(px2rem(8px));
|
transform: translateY(px2rem(8px));
|
||||||
border-radius: px2rem(2px);
|
border-radius: px2rem(2px);
|
||||||
background-color: $md-color-black;
|
background-color: var(--md-color-text);
|
||||||
color: $md-color-white;
|
color: var(--md-color-background);
|
||||||
font-size: ms(-1);
|
font-size: ms(-1);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
||||||
|
@ -33,7 +33,7 @@
|
|||||||
height: px2rem(24px);
|
height: px2rem(24px);
|
||||||
transition: color 250ms;
|
transition: color 250ms;
|
||||||
border-radius: px2rem(2px);
|
border-radius: px2rem(2px);
|
||||||
color: $md-color-black--lightest;
|
color: var(--md-color-text--lightest);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
// Hack: put everything on the GPU to omit flickering
|
// Hack: put everything on the GPU to omit flickering
|
||||||
@ -52,12 +52,12 @@
|
|||||||
|
|
||||||
// Show on container hover
|
// Show on container hover
|
||||||
pre:hover & {
|
pre:hover & {
|
||||||
color: $md-color-black--light;
|
color: var(md-color-text--light);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Focused or hovered icon
|
// Focused or hovered icon
|
||||||
pre &:focus,
|
pre &:focus,
|
||||||
pre &:hover {
|
pre &:hover {
|
||||||
color: $md-color-accent;
|
color: var(--md-color-accent);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -94,7 +94,7 @@
|
|||||||
|
|
||||||
// Override default link color for icons
|
// Override default link color for icons
|
||||||
.md-typeset & {
|
.md-typeset & {
|
||||||
color: $md-color-black--lighter;
|
color: var(--md-color-text--lighter);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Align text with icon
|
// Align text with icon
|
||||||
|
@ -41,8 +41,8 @@
|
|||||||
opacity 400ms;
|
opacity 400ms;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: px2rem(2px);
|
border-radius: px2rem(2px);
|
||||||
background: $md-color-black;
|
background: var(--md-color-text);
|
||||||
color: $md-color-white;
|
color: var(--md-color-background);
|
||||||
font-size: px2rem(14px);
|
font-size: px2rem(14px);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
@ -35,8 +35,8 @@
|
|||||||
|
|
||||||
// Navigation within footer
|
// Navigation within footer
|
||||||
.md-footer-nav {
|
.md-footer-nav {
|
||||||
background-color: $md-color-black;
|
background-color: var(--md-color-text);
|
||||||
color: $md-color-white;
|
color: var(--md-color-background);
|
||||||
|
|
||||||
// Set spacing
|
// Set spacing
|
||||||
&__inner {
|
&__inner {
|
||||||
@ -123,14 +123,14 @@
|
|||||||
left: 0;
|
left: 0;
|
||||||
margin-top: px2rem(-20px);
|
margin-top: px2rem(-20px);
|
||||||
padding: 0 px2rem(20px);
|
padding: 0 px2rem(20px);
|
||||||
color: $md-color-white--light;
|
color: var(--md-color-background--light);
|
||||||
font-size: px2rem(15px);
|
font-size: px2rem(15px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Non-navigational information
|
// Non-navigational information
|
||||||
.md-footer-meta {
|
.md-footer-meta {
|
||||||
background-color: opacify($md-color-black, 0.025);
|
background-color: rgba(var(--md-color-text-values), 1.025);
|
||||||
|
|
||||||
// Set spacing
|
// Set spacing
|
||||||
&__inner {
|
&__inner {
|
||||||
@ -140,12 +140,12 @@
|
|||||||
|
|
||||||
// Use a decent color for non-hovered links and ensure specificity
|
// Use a decent color for non-hovered links and ensure specificity
|
||||||
html &.md-typeset a {
|
html &.md-typeset a {
|
||||||
color: $md-color-white--light;
|
color: var(--md-color-background--light);
|
||||||
|
|
||||||
// Focused or hovered link
|
// Focused or hovered link
|
||||||
&:focus,
|
&:focus,
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $md-color-white;
|
color: var(--md-color-background);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -154,7 +154,7 @@
|
|||||||
.md-footer-copyright {
|
.md-footer-copyright {
|
||||||
margin: 0 px2rem(12px);
|
margin: 0 px2rem(12px);
|
||||||
padding: px2rem(8px) 0;
|
padding: px2rem(8px) 0;
|
||||||
color: $md-color-white--lighter;
|
color: var(--md-color-background--lighter);
|
||||||
font-size: ms(-1);
|
font-size: ms(-1);
|
||||||
|
|
||||||
// [tablet portrait +]: Show next to social media links
|
// [tablet portrait +]: Show next to social media links
|
||||||
@ -170,7 +170,7 @@
|
|||||||
|
|
||||||
// Highlight copyright information
|
// Highlight copyright information
|
||||||
&__highlight {
|
&__highlight {
|
||||||
color: $md-color-white--light;
|
color: var(--md-color-background--light);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -33,9 +33,9 @@
|
|||||||
height: px2rem(48px);
|
height: px2rem(48px);
|
||||||
transition:
|
transition:
|
||||||
background-color 250ms,
|
background-color 250ms,
|
||||||
color 250ms;
|
color 250ms;
|
||||||
background-color: $md-color-primary;
|
background-color: var(--md-color-primary);
|
||||||
color: $md-color-white;
|
color: var(--md-color-background);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
// Hack: putting the header on the GPU avoids unnecessary repaints
|
// Hack: putting the header on the GPU avoids unnecessary repaints
|
||||||
|
@ -27,8 +27,8 @@
|
|||||||
// Hero teaser
|
// Hero teaser
|
||||||
.md-hero {
|
.md-hero {
|
||||||
transition: background 250ms;
|
transition: background 250ms;
|
||||||
background-color: $md-color-primary;
|
background-color: var(--md-color-primary);
|
||||||
color: $md-color-white;
|
color: var(--md-color-background);
|
||||||
font-size: ms(1);
|
font-size: ms(1);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
|
@ -118,12 +118,12 @@
|
|||||||
|
|
||||||
// Blurred link
|
// Blurred link
|
||||||
&[data-md-state="blur"] {
|
&[data-md-state="blur"] {
|
||||||
color: $md-color-black--light;
|
color: var(--md-color-text--light);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Active link
|
// Active link
|
||||||
.md-nav__item &--active {
|
.md-nav__item &--active {
|
||||||
color: $md-color-primary;
|
color: var(--md-color-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Reset active color for nested list titles
|
// Reset active color for nested list titles
|
||||||
@ -134,7 +134,7 @@
|
|||||||
// Focused or hovered link
|
// Focused or hovered link
|
||||||
&:focus,
|
&:focus,
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $md-color-accent;
|
color: var(--md-color-accent);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -145,7 +145,7 @@
|
|||||||
|
|
||||||
// [tablet -]: Layered navigation
|
// [tablet -]: Layered navigation
|
||||||
@include break-to-device(tablet) {
|
@include break-to-device(tablet) {
|
||||||
background-color: $md-color-white;
|
background-color: var(--md-color-background);
|
||||||
|
|
||||||
// Stretch primary navigation to drawer
|
// Stretch primary navigation to drawer
|
||||||
&--primary,
|
&--primary,
|
||||||
@ -175,8 +175,8 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
height: px2rem(112px);
|
height: px2rem(112px);
|
||||||
padding: px2rem(60px) px2rem(16px) px2rem(4px);
|
padding: px2rem(60px) px2rem(16px) px2rem(4px);
|
||||||
background-color: $md-color-black--lightest;
|
background-color: var(--md-color-text--lightest);
|
||||||
color: $md-color-black--light;
|
color: var(--md-color-text--light);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: px2rem(48px);
|
line-height: px2rem(48px);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@ -201,8 +201,8 @@
|
|||||||
|
|
||||||
// Main lists
|
// Main lists
|
||||||
~ .md-nav__list {
|
~ .md-nav__list {
|
||||||
background-color: $md-color-white;
|
background-color: var(--md-color-background);
|
||||||
box-shadow: inset 0 px2rem(1px) 0 $md-color-black--lightest;
|
box-shadow: inset 0 px2rem(1px) 0 var(--md-color-text--lightest);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
scroll-snap-type: y mandatory;
|
scroll-snap-type: y mandatory;
|
||||||
|
|
||||||
@ -215,8 +215,8 @@
|
|||||||
// Site title in main navigation
|
// Site title in main navigation
|
||||||
&[for="__drawer"] {
|
&[for="__drawer"] {
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: $md-color-primary;
|
background-color: var(--md-color-primary);
|
||||||
color: $md-color-white;
|
color: var(--md-color-background);
|
||||||
|
|
||||||
// Site logo
|
// Site logo
|
||||||
.md-nav__button {
|
.md-nav__button {
|
||||||
@ -251,7 +251,7 @@
|
|||||||
// List item
|
// List item
|
||||||
.md-nav__item {
|
.md-nav__item {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-top: px2rem(1px) solid $md-color-black--lightest;
|
border-top: px2rem(1px) solid var(--md-color-text--lightest);
|
||||||
|
|
||||||
// Adjust for right-to-left languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
@ -421,8 +421,8 @@
|
|||||||
&__source {
|
&__source {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 0 px2rem(4px);
|
padding: 0 px2rem(4px);
|
||||||
background-color: mix($md-color-primary, $md-color-black, 75%);
|
background-color: var(--md-color-primary); // mix(var(--md-color-primary), $md-color-black, 75%); // TODO: fix calculation https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables
|
||||||
color: $md-color-white;
|
color: var(--md-color-background);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -63,7 +63,7 @@ $md-toggle__search--checked:
|
|||||||
transform 300ms 100ms,
|
transform 300ms 100ms,
|
||||||
opacity 200ms 200ms;
|
opacity 200ms 200ms;
|
||||||
border-radius: px2rem(20px);
|
border-radius: px2rem(20px);
|
||||||
background-color: $md-color-white;
|
background-color: var(--md-color-background);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
||||||
@ -112,7 +112,7 @@ $md-toggle__search--checked:
|
|||||||
width 0ms 250ms,
|
width 0ms 250ms,
|
||||||
height 0ms 250ms,
|
height 0ms 250ms,
|
||||||
opacity 250ms;
|
opacity 250ms;
|
||||||
background-color: $md-color-black--light;
|
background-color: var(--md-color-black--light);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
// Adjust for right-to-left languages
|
// Adjust for right-to-left languages
|
||||||
@ -238,7 +238,7 @@ $md-toggle__search--checked:
|
|||||||
// Placeholder and icon color in active state
|
// Placeholder and icon color in active state
|
||||||
~ .md-search__icon,
|
~ .md-search__icon,
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: $md-color-black--light;
|
color: var(--md-color-text--light);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove the "x" rendered by Internet Explorer
|
// Remove the "x" rendered by Internet Explorer
|
||||||
@ -262,7 +262,7 @@ $md-toggle__search--checked:
|
|||||||
background-color 250ms cubic-bezier(0.1, 0.7, 0.1, 1),
|
background-color 250ms cubic-bezier(0.1, 0.7, 0.1, 1),
|
||||||
color 250ms cubic-bezier(0.1, 0.7, 0.1, 1);
|
color 250ms cubic-bezier(0.1, 0.7, 0.1, 1);
|
||||||
border-radius: px2rem(2px);
|
border-radius: px2rem(2px);
|
||||||
background-color: $md-color-black--lighter;
|
background-color: var(--md-color-text--lighter);
|
||||||
color: inherit;
|
color: inherit;
|
||||||
font-size: ms(0);
|
font-size: ms(0);
|
||||||
|
|
||||||
@ -273,30 +273,30 @@ $md-toggle__search--checked:
|
|||||||
|
|
||||||
// Icon color
|
// Icon color
|
||||||
+ .md-search__icon {
|
+ .md-search__icon {
|
||||||
color: $md-color-white;
|
color: var(--md-color-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Placeholder color
|
// Placeholder color
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: $md-color-white--light;
|
color: var(--md-color-background--light);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hovered search field
|
// Hovered search field
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $md-color-white--lightest;
|
background-color: var(--md-color-background--lightest);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Set light background on active search field
|
// Set light background on active search field
|
||||||
#{$md-toggle__search--checked} & {
|
#{$md-toggle__search--checked} & {
|
||||||
border-radius: px2rem(2px) px2rem(2px) 0 0;
|
border-radius: px2rem(2px) px2rem(2px) 0 0;
|
||||||
background-color: $md-color-white;
|
background-color: var(--md-color-background);
|
||||||
color: $md-color-black;
|
color: var(--md-color-text);
|
||||||
text-overflow: clip;
|
text-overflow: clip;
|
||||||
|
|
||||||
// Placeholder and icon color in active state
|
// Placeholder and icon color in active state
|
||||||
+ .md-search__icon,
|
+ .md-search__icon,
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: $md-color-black--light;
|
color: var(--md-color-text--light);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -435,8 +435,8 @@ $md-toggle__search--checked:
|
|||||||
// Wrapper for scrolling on overflow
|
// Wrapper for scrolling on overflow
|
||||||
&__scrollwrap {
|
&__scrollwrap {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: $md-color-white;
|
background-color: var(--md-color-background);
|
||||||
box-shadow: inset 0 px2rem(1px) 0 $md-color-black--lightest;
|
box-shadow: inset 0 px2rem(1px) 0 var(md-color-text--lightest);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
scroll-snap-type: y mandatory;
|
scroll-snap-type: y mandatory;
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
@ -473,11 +473,11 @@ $md-toggle__search--checked:
|
|||||||
|
|
||||||
// Scrollbar thumb
|
// Scrollbar thumb
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
background-color: $md-color-black--lighter;
|
background-color: var(--md-color-text--lighter);
|
||||||
|
|
||||||
// Hovered scrollbar thumb
|
// Hovered scrollbar thumb
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $md-color-accent;
|
background-color: var(--md-color-accent);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -486,14 +486,14 @@ $md-toggle__search--checked:
|
|||||||
|
|
||||||
// Search result
|
// Search result
|
||||||
.md-search-result {
|
.md-search-result {
|
||||||
color: $md-color-black;
|
color: var(--md-color-text);
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
|
|
||||||
// Search metadata
|
// Search metadata
|
||||||
&__meta {
|
&__meta {
|
||||||
padding: 0 px2rem(16px);
|
padding: 0 px2rem(16px);
|
||||||
background-color: $md-color-black--lightest;
|
background-color: var(--md-color-text--lightest);
|
||||||
color: $md-color-black--light;
|
color: var(--md-color-text--light);
|
||||||
font-size: ms(-1);
|
font-size: ms(-1);
|
||||||
line-height: px2rem(36px);
|
line-height: px2rem(36px);
|
||||||
scroll-snap-align: start;
|
scroll-snap-align: start;
|
||||||
@ -514,13 +514,13 @@ $md-toggle__search--checked:
|
|||||||
&__list {
|
&__list {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-top: px2rem(1px) solid $md-color-black--lightest;
|
border-top: px2rem(1px) solid var(--md-color-text--lightest);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// List item
|
// List item
|
||||||
&__item {
|
&__item {
|
||||||
box-shadow: 0 px2rem(-1px) 0 $md-color-black--lightest;
|
box-shadow: 0 px2rem(-1px) 0 var(--md-color-text--lightest);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Link inside item
|
// Link inside item
|
||||||
@ -534,7 +534,7 @@ $md-toggle__search--checked:
|
|||||||
// Focused or hovered link
|
// Focused or hovered link
|
||||||
&:focus,
|
&:focus,
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: transparentize($md-color-accent, 0.9);
|
background-color: rgba(var(--md-color-accent-values), 0.9);
|
||||||
|
|
||||||
// Slightly transparent icon
|
// Slightly transparent icon
|
||||||
.md-search-result__article::before {
|
.md-search-result__article::before {
|
||||||
@ -584,7 +584,7 @@ $md-toggle__search--checked:
|
|||||||
left: 0;
|
left: 0;
|
||||||
margin: px2rem(2px);
|
margin: px2rem(2px);
|
||||||
transition: opacity 250ms;
|
transition: opacity 250ms;
|
||||||
color: $md-color-black--light;
|
color: var(--md-color-text--light);
|
||||||
|
|
||||||
// Adjust for right-to-left languages
|
// Adjust for right-to-left languages
|
||||||
[dir="rtl"] & {
|
[dir="rtl"] & {
|
||||||
@ -613,7 +613,7 @@ $md-toggle__search--checked:
|
|||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
max-height: px2rem(33px);
|
max-height: px2rem(33px);
|
||||||
margin: 0.5em 0;
|
margin: 0.5em 0;
|
||||||
color: $md-color-black--light;
|
color: var(--md-color-text--light);
|
||||||
font-size: ms(-1);
|
font-size: ms(-1);
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
@ -64,7 +64,7 @@ $md-toggle__drawer--checked:
|
|||||||
transition:
|
transition:
|
||||||
transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
|
transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||||
box-shadow 250ms;
|
box-shadow 250ms;
|
||||||
background-color: $md-color-white;
|
background-color: var(--md-color-background);
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
|
|
||||||
// Adjust for right-to-left languages
|
// Adjust for right-to-left languages
|
||||||
@ -158,11 +158,11 @@ $md-toggle__drawer--checked:
|
|||||||
|
|
||||||
// Scrollbar thumb
|
// Scrollbar thumb
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
background-color: $md-color-black--lighter;
|
background-color: var(--md-color-text--lighter);
|
||||||
|
|
||||||
// Hovered scrollbar thumb
|
// Hovered scrollbar thumb
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $md-color-accent;
|
background-color: var(--md-color-accent);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -28,8 +28,8 @@
|
|||||||
.md-tabs {
|
.md-tabs {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
transition: background 250ms;
|
transition: background 250ms;
|
||||||
background-color: $md-color-primary;
|
background-color: var(--md-color-primary);
|
||||||
color: $md-color-white;
|
color: var(--md-color-background);
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|
||||||
// Omit transitions, in case JavaScript is not available
|
// Omit transitions, in case JavaScript is not available
|
||||||
|
Loading…
Reference in New Issue
Block a user