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
@ -49,6 +49,10 @@ $break-devices: (
|
||||
)
|
||||
);
|
||||
|
||||
@function hex2rgb($hex) {
|
||||
@return red($hex), green($hex), blue($hex);
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// 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--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
|
||||
// ----------------------------------------------------------------------------
|
||||
|
@ -51,7 +51,7 @@ button[data-md-color-accent] {
|
||||
background-color 250ms,
|
||||
opacity 250ms;
|
||||
border-radius: px2rem(2px);
|
||||
color: $md-color-white;
|
||||
color: var(--md-color-background);
|
||||
font-size: ms(-1);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
@ -128,7 +128,7 @@ button[data-md-color-accent] {
|
||||
|
||||
// Repository containing 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
|
||||
button[data-md-color-primary="white"] {
|
||||
background-color: $md-color-white;
|
||||
color: $md-color-black;
|
||||
box-shadow: 0 0 px2rem(1px) $md-color-black--light inset;
|
||||
background-color: var(--md-color-background);
|
||||
color: var(--md-color-text);
|
||||
box-shadow: 0 0 px2rem(1px) var(--md-color-text--light) inset;
|
||||
}
|
||||
|
||||
// Overrides for black color
|
||||
@ -168,18 +168,18 @@ button[data-md-color-primary="white"] {
|
||||
|
||||
// Application header (stays always on top)
|
||||
.md-header {
|
||||
background-color: $md-color-white;
|
||||
color: $md-color-black;
|
||||
background-color: var(--md-color-background);
|
||||
color: var(--md-color-text);
|
||||
}
|
||||
|
||||
// Hero teaser
|
||||
.md-hero {
|
||||
background-color: $md-color-white;
|
||||
color: $md-color-black;
|
||||
background-color: var(--md-color-background);
|
||||
color: var(--md-color-text);
|
||||
|
||||
// Add a border if there are no tabs
|
||||
&--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
|
||||
.md-nav__source {
|
||||
background-color: $md-color-black--lightest;
|
||||
color: $md-color-black;
|
||||
background-color: var(--md-color-text--lightest);
|
||||
color: var(--md-color-text);
|
||||
}
|
||||
}
|
||||
|
||||
@ -198,11 +198,11 @@ button[data-md-color-primary="white"] {
|
||||
|
||||
// Search input
|
||||
.md-search__input {
|
||||
background-color: $md-color-black--lightest;
|
||||
background-color: var(--md-color-text--lightest);
|
||||
|
||||
// Search input 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
|
||||
html & .md-nav--primary .md-nav__title[for="__drawer"] {
|
||||
background-color: $md-color-white;
|
||||
color: $md-color-black;
|
||||
background-color: var(--md-color-background);
|
||||
color: var(--md-color-text);
|
||||
}
|
||||
|
||||
// Hero teaser
|
||||
.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
|
||||
.md-tabs {
|
||||
border-bottom: px2rem(1px) solid $md-color-black--lightest;
|
||||
background-color: $md-color-white;
|
||||
color: $md-color-black;
|
||||
border-bottom: px2rem(1px) solid var(--md-color-text--lightest);
|
||||
background-color: var(--md-color-background);
|
||||
color: var(--md-color-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -261,7 +261,7 @@ button[data-md-color-primary="black"] {
|
||||
|
||||
// Repository containing 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
|
||||
.md-search__input {
|
||||
background-color: $md-color-white--lighter;
|
||||
background-color: var(--md-color-background--lighter);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -33,7 +33,7 @@ body {
|
||||
// Default fonts
|
||||
body,
|
||||
input {
|
||||
color: $md-color-black;
|
||||
color: var(--md-color-text);
|
||||
font-feature-settings: "kern", "liga";
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
@ -42,7 +42,7 @@ input {
|
||||
pre,
|
||||
code,
|
||||
kbd {
|
||||
color: $md-color-black;
|
||||
color: var(--md-color-text);
|
||||
font-feature-settings: "kern";
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
}
|
||||
@ -73,7 +73,7 @@ kbd {
|
||||
// 1st level headline
|
||||
h1 {
|
||||
margin: 0 0 px2rem(40px);
|
||||
color: $md-color-black--light;
|
||||
color: var(--md-color-text--light);
|
||||
font-size: ms(3);
|
||||
font-weight: 300;
|
||||
letter-spacing: -0.01em;
|
||||
@ -115,7 +115,7 @@ kbd {
|
||||
h5,
|
||||
h6 {
|
||||
margin: px2rem(16px) 0;
|
||||
color: $md-color-black--light;
|
||||
color: var(--md-color-text--light);
|
||||
font-size: ms(-1);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
@ -129,12 +129,12 @@ kbd {
|
||||
// Horizontal separators
|
||||
hr {
|
||||
margin: 1.5em 0;
|
||||
border-bottom: px2rem(1px) dotted $md-color-black--lighter;
|
||||
border-bottom: px2rem(1px) dotted var(--md-color-text--lighter);
|
||||
}
|
||||
|
||||
// Links
|
||||
a {
|
||||
color: $md-color-primary;
|
||||
color: var(--md-color-primary);
|
||||
word-break: break-word;
|
||||
|
||||
// Also enable color transition on pseudo elements
|
||||
@ -146,7 +146,7 @@ kbd {
|
||||
// Focused or hover links
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $md-color-accent;
|
||||
color: var(--md-color-accent);
|
||||
}
|
||||
|
||||
// Add URLs for print
|
||||
@ -154,7 +154,7 @@ kbd {
|
||||
|
||||
// Show link URL
|
||||
&::after {
|
||||
color: $md-color-black--light;
|
||||
color: var(--md-color-text--light);
|
||||
content: " [" attr(href) "]";
|
||||
}
|
||||
}
|
||||
@ -163,8 +163,8 @@ kbd {
|
||||
// Code blocks
|
||||
code,
|
||||
pre {
|
||||
background-color: $md-code-background;
|
||||
color: $md-code-color;
|
||||
background-color: var(--md-code-background);
|
||||
color: var(--md-code-color);
|
||||
font-size: 85%;
|
||||
direction: ltr;
|
||||
|
||||
@ -182,8 +182,8 @@ kbd {
|
||||
padding: 0.0625em * $correct 0;
|
||||
border-radius: px2rem(2px);
|
||||
box-shadow:
|
||||
+0.25em * $correct 0 0 $md-code-background,
|
||||
-0.25em * $correct 0 0 $md-code-background;
|
||||
+0.25em * $correct 0 0 var(--md-code-background),
|
||||
-0.25em * $correct 0 0 var(--md-code-background);
|
||||
word-break: break-word;
|
||||
box-decoration-break: clone;
|
||||
|
||||
@ -244,11 +244,11 @@ kbd {
|
||||
|
||||
// Scrollbar thumb
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: $md-color-black--lighter;
|
||||
background-color: var(--md-color-text--lighter);
|
||||
|
||||
// Hovered scrollbar thumb
|
||||
&:hover {
|
||||
background-color: $md-color-accent;
|
||||
background-color: var(--md-color-accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -299,7 +299,7 @@ kbd {
|
||||
|
||||
// Abbreviations
|
||||
abbr {
|
||||
border-bottom: px2rem(1px) dotted $md-color-black--light;
|
||||
border-bottom: px2rem(1px) dotted var(--md-color-text--light);
|
||||
text-decoration: none;
|
||||
cursor: help;
|
||||
}
|
||||
@ -324,14 +324,14 @@ kbd {
|
||||
// Blockquotes, possibly nested
|
||||
blockquote {
|
||||
padding-left: px2rem(12px);
|
||||
border-left: px2rem(4px) solid $md-color-black--lighter;
|
||||
color: $md-color-black--light;
|
||||
border-left: px2rem(4px) solid var(--md-color-text--lighter);
|
||||
color: var(--md-color-text--light);
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
padding-right: px2rem(12px);
|
||||
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;
|
||||
}
|
||||
}
|
||||
@ -423,7 +423,7 @@ kbd {
|
||||
max-width: 100%;
|
||||
border-radius: px2rem(2px);
|
||||
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;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
@ -449,15 +449,15 @@ kbd {
|
||||
th {
|
||||
min-width: px2rem(100px);
|
||||
padding: px2rem(12px) px2rem(16px);
|
||||
background-color: $md-color-black--light;
|
||||
color: $md-color-white;
|
||||
background-color: var(--md-color-text--light);
|
||||
color: var(--md-color-background);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
// Table cells
|
||||
td {
|
||||
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;
|
||||
}
|
||||
|
||||
@ -468,7 +468,7 @@ kbd {
|
||||
// Add background on hover
|
||||
&:hover {
|
||||
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
|
||||
|
@ -245,7 +245,7 @@ $codehilite-whitespace: transparent;
|
||||
// Disable user selection, so code can be easily copied without
|
||||
// accidentally also copying the line numbers
|
||||
.linenos {
|
||||
color: $md-color-black--lighter;
|
||||
color: var(--md-color-text--lighter);
|
||||
box-shadow: inset 0 0 0 px2rem(1px) $md-code-background;
|
||||
user-select: none;
|
||||
|
||||
@ -273,9 +273,9 @@ $codehilite-whitespace: transparent;
|
||||
margin-right: px2rem(12px);
|
||||
margin-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;
|
||||
color: $md-color-black--lighter;
|
||||
color: var(--md-color-text--lighter);
|
||||
content: attr(data-linenos);
|
||||
user-select: none;
|
||||
|
||||
|
@ -60,7 +60,7 @@
|
||||
|
||||
// Footnotes extension
|
||||
.footnote {
|
||||
color: $md-color-black--light;
|
||||
color: var(--md-color-text--light);
|
||||
font-size: ms(-1);
|
||||
|
||||
// Remove additional spacing on footnotes
|
||||
@ -74,7 +74,7 @@
|
||||
|
||||
// Darken color for targeted footnote
|
||||
&:target {
|
||||
color: $md-color-black;
|
||||
color: var(--md-color-text);
|
||||
}
|
||||
|
||||
// Remove spacing on first element
|
||||
@ -92,7 +92,7 @@
|
||||
// Active or targeted back reference
|
||||
&:hover .footnote-backref:hover,
|
||||
&:target .footnote-backref {
|
||||
color: $md-color-accent;
|
||||
color: var(--md-color-accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -106,7 +106,7 @@
|
||||
&::before {
|
||||
display: inline;
|
||||
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;
|
||||
content: "";
|
||||
vertical-align: px2rem(-5px);
|
||||
@ -121,7 +121,7 @@
|
||||
transform 250ms 125ms,
|
||||
color 250ms,
|
||||
opacity 125ms 125ms;
|
||||
color: $md-color-black--lighter;
|
||||
color: var(--md-color-black--lighter);
|
||||
// Hack: remove Unicode arrow for icon
|
||||
font-size: 0;
|
||||
opacity: 0;
|
||||
|
@ -50,7 +50,7 @@
|
||||
|
||||
// Higher specificity for color due to palettes integration
|
||||
html body & {
|
||||
color: $md-color-black--lighter;
|
||||
color: var(--md-color-text--lighter);
|
||||
}
|
||||
|
||||
// Hide for print
|
||||
@ -77,7 +77,7 @@
|
||||
.headerlink:focus,
|
||||
.headerlink:hover,
|
||||
:target .headerlink {
|
||||
color: $md-color-accent;
|
||||
color: var(--md-color-accent);
|
||||
}
|
||||
|
||||
// Correct anchor offset for link blurring
|
||||
|
@ -81,7 +81,7 @@
|
||||
right: px2rem(12px);
|
||||
width: px2rem(20px);
|
||||
height: px2rem(20px);
|
||||
background-color: $md-color-black--lighter;
|
||||
background-color: var(--md-color-black--lighter);
|
||||
mask-image: url("{{ chevron-down }}");
|
||||
content: "";
|
||||
|
||||
|
@ -32,7 +32,7 @@
|
||||
display: none;
|
||||
order: 99;
|
||||
width: 100%;
|
||||
background-color: $md-color-white;
|
||||
background-color: var(--md-color-background);
|
||||
|
||||
// Actual content
|
||||
pre {
|
||||
@ -47,7 +47,7 @@
|
||||
position: relative;
|
||||
flex-wrap: wrap;
|
||||
margin: 1em 0;
|
||||
border: px2rem(1px) solid $md-color-black--lightest;
|
||||
border: px2rem(1px) solid var(--md-color-text--lightest);
|
||||
border-radius: 0.2em;
|
||||
|
||||
// Hide radio buttons
|
||||
@ -95,7 +95,7 @@
|
||||
|
||||
// Hovered tab label
|
||||
html &:hover {
|
||||
color: $md-color-accent;
|
||||
color: var(--md-color-accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -107,7 +107,7 @@
|
||||
@include break-to-device(mobile) {
|
||||
margin: 1em px2rem(-16px);
|
||||
border: 0;
|
||||
border-top: px2rem(1px) solid $md-color-black--lightest;
|
||||
border-top: px2rem(1px) solid var(--md-color-text--lightest);
|
||||
border-radius: 0;
|
||||
|
||||
// Actual container with code, overflowing
|
||||
|
@ -57,7 +57,7 @@
|
||||
left: px2em(-24px);
|
||||
width: px2em(20px);
|
||||
height: px2em(20px);
|
||||
background-color: $md-color-black--lightest;
|
||||
background-color: var(--md-color-black--lightest);
|
||||
mask-image: url("{{ checkbox-blank-circle }}");
|
||||
content: "";
|
||||
|
||||
|
@ -26,13 +26,13 @@
|
||||
|
||||
// Announcement bar
|
||||
.md-announcement {
|
||||
background-color: $md-color-black;
|
||||
background-color: var(--md-color-text);
|
||||
|
||||
// Actual content
|
||||
&__inner {
|
||||
min-height: px2rem(48px);
|
||||
padding: 0 px2rem(16px);
|
||||
color: $md-color-white;
|
||||
color: var(--md-color-background);
|
||||
font-size: px2rem(14px);
|
||||
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
|
||||
// calculations base on relative ems (rems)
|
||||
html {
|
||||
height: 100%;
|
||||
background-color: $md-color-white;
|
||||
min-height: 100%;
|
||||
background-color: var(--md-color-background);
|
||||
// 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
|
||||
// size of 12 if the system language is set to Chinese. For this reason we
|
||||
@ -146,7 +146,7 @@ hr {
|
||||
width 0ms 250ms,
|
||||
height 0ms 250ms,
|
||||
opacity 250ms;
|
||||
background-color: $md-color-black--light;
|
||||
background-color: var(--md-color-black--light);
|
||||
opacity: 0;
|
||||
z-index: 3;
|
||||
|
||||
@ -177,8 +177,8 @@ hr {
|
||||
padding: px2rem(6px) px2rem(10px);
|
||||
transform: translateY(px2rem(8px));
|
||||
border-radius: px2rem(2px);
|
||||
background-color: $md-color-black;
|
||||
color: $md-color-white;
|
||||
background-color: var(--md-color-text);
|
||||
color: var(--md-color-background);
|
||||
font-size: ms(-1);
|
||||
opacity: 0;
|
||||
|
||||
|
@ -33,7 +33,7 @@
|
||||
height: px2rem(24px);
|
||||
transition: color 250ms;
|
||||
border-radius: px2rem(2px);
|
||||
color: $md-color-black--lightest;
|
||||
color: var(--md-color-text--lightest);
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
// Hack: put everything on the GPU to omit flickering
|
||||
@ -52,12 +52,12 @@
|
||||
|
||||
// Show on container hover
|
||||
pre:hover & {
|
||||
color: $md-color-black--light;
|
||||
color: var(md-color-text--light);
|
||||
}
|
||||
|
||||
// Focused or hovered icon
|
||||
pre &:focus,
|
||||
pre &:hover {
|
||||
color: $md-color-accent;
|
||||
color: var(--md-color-accent);
|
||||
}
|
||||
}
|
||||
|
@ -94,7 +94,7 @@
|
||||
|
||||
// Override default link color for icons
|
||||
.md-typeset & {
|
||||
color: $md-color-black--lighter;
|
||||
color: var(--md-color-text--lighter);
|
||||
}
|
||||
|
||||
// Align text with icon
|
||||
|
@ -41,8 +41,8 @@
|
||||
opacity 400ms;
|
||||
border: none;
|
||||
border-radius: px2rem(2px);
|
||||
background: $md-color-black;
|
||||
color: $md-color-white;
|
||||
background: var(--md-color-text);
|
||||
color: var(--md-color-background);
|
||||
font-size: px2rem(14px);
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
|
@ -35,8 +35,8 @@
|
||||
|
||||
// Navigation within footer
|
||||
.md-footer-nav {
|
||||
background-color: $md-color-black;
|
||||
color: $md-color-white;
|
||||
background-color: var(--md-color-text);
|
||||
color: var(--md-color-background);
|
||||
|
||||
// Set spacing
|
||||
&__inner {
|
||||
@ -123,14 +123,14 @@
|
||||
left: 0;
|
||||
margin-top: px2rem(-20px);
|
||||
padding: 0 px2rem(20px);
|
||||
color: $md-color-white--light;
|
||||
color: var(--md-color-background--light);
|
||||
font-size: px2rem(15px);
|
||||
}
|
||||
}
|
||||
|
||||
// Non-navigational information
|
||||
.md-footer-meta {
|
||||
background-color: opacify($md-color-black, 0.025);
|
||||
background-color: rgba(var(--md-color-text-values), 1.025);
|
||||
|
||||
// Set spacing
|
||||
&__inner {
|
||||
@ -140,12 +140,12 @@
|
||||
|
||||
// Use a decent color for non-hovered links and ensure specificity
|
||||
html &.md-typeset a {
|
||||
color: $md-color-white--light;
|
||||
color: var(--md-color-background--light);
|
||||
|
||||
// Focused or hovered link
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $md-color-white;
|
||||
color: var(--md-color-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -154,7 +154,7 @@
|
||||
.md-footer-copyright {
|
||||
margin: 0 px2rem(12px);
|
||||
padding: px2rem(8px) 0;
|
||||
color: $md-color-white--lighter;
|
||||
color: var(--md-color-background--lighter);
|
||||
font-size: ms(-1);
|
||||
|
||||
// [tablet portrait +]: Show next to social media links
|
||||
@ -170,7 +170,7 @@
|
||||
|
||||
// Highlight copyright information
|
||||
&__highlight {
|
||||
color: $md-color-white--light;
|
||||
color: var(--md-color-background--light);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -33,9 +33,9 @@
|
||||
height: px2rem(48px);
|
||||
transition:
|
||||
background-color 250ms,
|
||||
color 250ms;
|
||||
background-color: $md-color-primary;
|
||||
color: $md-color-white;
|
||||
color 250ms;
|
||||
background-color: var(--md-color-primary);
|
||||
color: var(--md-color-background);
|
||||
box-shadow: none;
|
||||
z-index: 2;
|
||||
// Hack: putting the header on the GPU avoids unnecessary repaints
|
||||
|
@ -27,8 +27,8 @@
|
||||
// Hero teaser
|
||||
.md-hero {
|
||||
transition: background 250ms;
|
||||
background-color: $md-color-primary;
|
||||
color: $md-color-white;
|
||||
background-color: var(--md-color-primary);
|
||||
color: var(--md-color-background);
|
||||
font-size: ms(1);
|
||||
overflow: hidden;
|
||||
|
||||
|
@ -118,12 +118,12 @@
|
||||
|
||||
// Blurred link
|
||||
&[data-md-state="blur"] {
|
||||
color: $md-color-black--light;
|
||||
color: var(--md-color-text--light);
|
||||
}
|
||||
|
||||
// Active link
|
||||
.md-nav__item &--active {
|
||||
color: $md-color-primary;
|
||||
color: var(--md-color-primary);
|
||||
}
|
||||
|
||||
// Reset active color for nested list titles
|
||||
@ -134,7 +134,7 @@
|
||||
// Focused or hovered link
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $md-color-accent;
|
||||
color: var(--md-color-accent);
|
||||
}
|
||||
}
|
||||
|
||||
@ -145,7 +145,7 @@
|
||||
|
||||
// [tablet -]: Layered navigation
|
||||
@include break-to-device(tablet) {
|
||||
background-color: $md-color-white;
|
||||
background-color: var(--md-color-background);
|
||||
|
||||
// Stretch primary navigation to drawer
|
||||
&--primary,
|
||||
@ -175,8 +175,8 @@
|
||||
position: relative;
|
||||
height: px2rem(112px);
|
||||
padding: px2rem(60px) px2rem(16px) px2rem(4px);
|
||||
background-color: $md-color-black--lightest;
|
||||
color: $md-color-black--light;
|
||||
background-color: var(--md-color-text--lightest);
|
||||
color: var(--md-color-text--light);
|
||||
font-weight: 400;
|
||||
line-height: px2rem(48px);
|
||||
white-space: nowrap;
|
||||
@ -201,8 +201,8 @@
|
||||
|
||||
// Main lists
|
||||
~ .md-nav__list {
|
||||
background-color: $md-color-white;
|
||||
box-shadow: inset 0 px2rem(1px) 0 $md-color-black--lightest;
|
||||
background-color: var(--md-color-background);
|
||||
box-shadow: inset 0 px2rem(1px) 0 var(--md-color-text--lightest);
|
||||
overflow-y: auto;
|
||||
scroll-snap-type: y mandatory;
|
||||
|
||||
@ -215,8 +215,8 @@
|
||||
// Site title in main navigation
|
||||
&[for="__drawer"] {
|
||||
position: relative;
|
||||
background-color: $md-color-primary;
|
||||
color: $md-color-white;
|
||||
background-color: var(--md-color-primary);
|
||||
color: var(--md-color-background);
|
||||
|
||||
// Site logo
|
||||
.md-nav__button {
|
||||
@ -251,7 +251,7 @@
|
||||
// List item
|
||||
.md-nav__item {
|
||||
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
|
||||
[dir="rtl"] & {
|
||||
@ -421,8 +421,8 @@
|
||||
&__source {
|
||||
display: block;
|
||||
padding: 0 px2rem(4px);
|
||||
background-color: mix($md-color-primary, $md-color-black, 75%);
|
||||
color: $md-color-white;
|
||||
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: var(--md-color-background);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -63,7 +63,7 @@ $md-toggle__search--checked:
|
||||
transform 300ms 100ms,
|
||||
opacity 200ms 200ms;
|
||||
border-radius: px2rem(20px);
|
||||
background-color: $md-color-white;
|
||||
background-color: var(--md-color-background);
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
|
||||
@ -112,7 +112,7 @@ $md-toggle__search--checked:
|
||||
width 0ms 250ms,
|
||||
height 0ms 250ms,
|
||||
opacity 250ms;
|
||||
background-color: $md-color-black--light;
|
||||
background-color: var(--md-color-black--light);
|
||||
cursor: pointer;
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
@ -238,7 +238,7 @@ $md-toggle__search--checked:
|
||||
// Placeholder and icon color in active state
|
||||
~ .md-search__icon,
|
||||
&::placeholder {
|
||||
color: $md-color-black--light;
|
||||
color: var(--md-color-text--light);
|
||||
}
|
||||
|
||||
// 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),
|
||||
color 250ms cubic-bezier(0.1, 0.7, 0.1, 1);
|
||||
border-radius: px2rem(2px);
|
||||
background-color: $md-color-black--lighter;
|
||||
background-color: var(--md-color-text--lighter);
|
||||
color: inherit;
|
||||
font-size: ms(0);
|
||||
|
||||
@ -273,30 +273,30 @@ $md-toggle__search--checked:
|
||||
|
||||
// Icon color
|
||||
+ .md-search__icon {
|
||||
color: $md-color-white;
|
||||
color: var(--md-color-background);
|
||||
}
|
||||
|
||||
// Placeholder color
|
||||
&::placeholder {
|
||||
color: $md-color-white--light;
|
||||
color: var(--md-color-background--light);
|
||||
}
|
||||
|
||||
// Hovered search field
|
||||
&:hover {
|
||||
background-color: $md-color-white--lightest;
|
||||
background-color: var(--md-color-background--lightest);
|
||||
}
|
||||
|
||||
// Set light background on active search field
|
||||
#{$md-toggle__search--checked} & {
|
||||
border-radius: px2rem(2px) px2rem(2px) 0 0;
|
||||
background-color: $md-color-white;
|
||||
color: $md-color-black;
|
||||
background-color: var(--md-color-background);
|
||||
color: var(--md-color-text);
|
||||
text-overflow: clip;
|
||||
|
||||
// Placeholder and icon color in active state
|
||||
+ .md-search__icon,
|
||||
&::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
|
||||
&__scrollwrap {
|
||||
height: 100%;
|
||||
background-color: $md-color-white;
|
||||
box-shadow: inset 0 px2rem(1px) 0 $md-color-black--lightest;
|
||||
background-color: var(--md-color-background);
|
||||
box-shadow: inset 0 px2rem(1px) 0 var(md-color-text--lightest);
|
||||
overflow-y: auto;
|
||||
scroll-snap-type: y mandatory;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
@ -473,11 +473,11 @@ $md-toggle__search--checked:
|
||||
|
||||
// Scrollbar thumb
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: $md-color-black--lighter;
|
||||
background-color: var(--md-color-text--lighter);
|
||||
|
||||
// Hovered scrollbar thumb
|
||||
&:hover {
|
||||
background-color: $md-color-accent;
|
||||
background-color: var(--md-color-accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -486,14 +486,14 @@ $md-toggle__search--checked:
|
||||
|
||||
// Search result
|
||||
.md-search-result {
|
||||
color: $md-color-black;
|
||||
color: var(--md-color-text);
|
||||
word-break: break-word;
|
||||
|
||||
// Search metadata
|
||||
&__meta {
|
||||
padding: 0 px2rem(16px);
|
||||
background-color: $md-color-black--lightest;
|
||||
color: $md-color-black--light;
|
||||
background-color: var(--md-color-text--lightest);
|
||||
color: var(--md-color-text--light);
|
||||
font-size: ms(-1);
|
||||
line-height: px2rem(36px);
|
||||
scroll-snap-align: start;
|
||||
@ -514,13 +514,13 @@ $md-toggle__search--checked:
|
||||
&__list {
|
||||
margin: 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 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
|
||||
@ -534,7 +534,7 @@ $md-toggle__search--checked:
|
||||
// Focused or hovered link
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: transparentize($md-color-accent, 0.9);
|
||||
background-color: rgba(var(--md-color-accent-values), 0.9);
|
||||
|
||||
// Slightly transparent icon
|
||||
.md-search-result__article::before {
|
||||
@ -584,7 +584,7 @@ $md-toggle__search--checked:
|
||||
left: 0;
|
||||
margin: px2rem(2px);
|
||||
transition: opacity 250ms;
|
||||
color: $md-color-black--light;
|
||||
color: var(--md-color-text--light);
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
@ -613,7 +613,7 @@ $md-toggle__search--checked:
|
||||
display: -webkit-box;
|
||||
max-height: px2rem(33px);
|
||||
margin: 0.5em 0;
|
||||
color: $md-color-black--light;
|
||||
color: var(--md-color-text--light);
|
||||
font-size: ms(-1);
|
||||
line-height: 1.4;
|
||||
text-overflow: ellipsis;
|
||||
|
@ -64,7 +64,7 @@ $md-toggle__drawer--checked:
|
||||
transition:
|
||||
transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
box-shadow 250ms;
|
||||
background-color: $md-color-white;
|
||||
background-color: var(--md-color-background);
|
||||
z-index: 3;
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
@ -158,11 +158,11 @@ $md-toggle__drawer--checked:
|
||||
|
||||
// Scrollbar thumb
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: $md-color-black--lighter;
|
||||
background-color: var(--md-color-text--lighter);
|
||||
|
||||
// Hovered scrollbar thumb
|
||||
&:hover {
|
||||
background-color: $md-color-accent;
|
||||
background-color: var(--md-color-accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -28,8 +28,8 @@
|
||||
.md-tabs {
|
||||
width: 100%;
|
||||
transition: background 250ms;
|
||||
background-color: $md-color-primary;
|
||||
color: $md-color-white;
|
||||
background-color: var(--md-color-primary);
|
||||
color: var(--md-color-background);
|
||||
overflow: auto;
|
||||
|
||||
// Omit transitions, in case JavaScript is not available
|
||||
|
Loading…
Reference in New Issue
Block a user