OpenSourceArk/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-06-14 11:52:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Refactored CSS variables integration

Browse Source
This commit is contained in:
squidfunk 2020-02-25 20:25:05 +01:00
parent b623010993
commit 309c2b7c03
36 changed files with 246 additions and 264 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
material/assets/javascripts/bundle.af710b79.min.js → material/assets/javascripts/bundle.506c8aca.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
material/assets/javascripts/bundle.506c8aca.min.js.map Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/javascripts/bundle.af710b79.min.js.map
View File

File diff suppressed because one or more lines are too long

8
material/assets/manifest.json
View File

@ -1,8 +1,8 @@
{ {
"assets/javascripts/bundle.js": "assets/javascripts/bundle.af710b79.min.js", "assets/javascripts/bundle.js": "assets/javascripts/bundle.506c8aca.min.js",
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.af710b79.min.js.map", "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.506c8aca.min.js.map",
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.926ffd9e.min.js", "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.926ffd9e.min.js",
"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.1782b0c8.min.css",
"assets/stylesheets/app.scss": "assets/stylesheets/app.d1c09be7.min.css" "assets/stylesheets/app.scss": "assets/stylesheets/app.5a1ee6a4.min.css"
} }

1
material/assets/stylesheets/app-palette.1782b0c8.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/app-palette.8adb38b9.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/app.5a1ee6a4.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/app.d1c09be7.min.css vendored
View File

File diff suppressed because one or more lines are too long

23
material/base.html
View File

@ -43,9 +43,9 @@
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block styles %} {% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/app.d1c09be7.min.css' | url }}"> <link rel="stylesheet" href="{{ 'assets/stylesheets/app.5a1ee6a4.min.css' | url }}">
{% if palette.primary or palette.accent %} {% if palette.primary or palette.accent %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/app-palette.8adb38b9.min.css' | url }}"> <link rel="stylesheet" href="{{ 'assets/stylesheets/app-palette.1782b0c8.min.css' | url }}">
{% endif %} {% endif %}
{% if palette.primary %} {% if palette.primary %}
{% import "partials/palette.html" as map %} {% import "partials/palette.html" as map %}
@ -67,10 +67,15 @@
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% if config.extra.manifest %} {% if config.extra.manifest %}
<link rel="manifest" type="application/manifest+json" href="{{ config.extra.manifest | url }}" crossorigin="use-credentials"> <link rel="manifest" href="{{ config.extra.manifest | url }}" crossorigin="use-credentials">
{% endif %} {% endif %}
{% for path in config["extra_css"] %} {% for file in config["extra_css"] %}
{% set path,media = file.split(" ", 1) %}
{% if media %}
<link rel="stylesheet" href="{{ path | url }}" media="">
{% else %}
<link rel="stylesheet" href="{{ path | url }}"> <link rel="stylesheet" href="{{ path | url }}">
{% endif %}
{% endfor %} {% endfor %}
{% block analytics %} {% block analytics %}
{% if config.google_analytics %} {% if config.google_analytics %}
@ -94,10 +99,10 @@
{{ lang.t('skip.link.title') }} {{ lang.t('skip.link.title') }}
</a> </a>
{% endif %} {% endif %}
{% if self.announcement() %} {% if self.announce() %}
<aside class="md-announcement" data-md-component="announcement"> <aside class="md-announce" data-md-component="announce">
<div class="md-announcement__inner md-grid md-typeset"> <div class="md-announce__inner md-grid md-typeset">
{% block announcement %}{% endblock %} {% block announce %}{% endblock %}
</div> </div>
</aside> </aside>
{% endif %} {% endif %}
@ -195,7 +200,7 @@
{% endblock %} {% endblock %}
</div> </div>
{% block scripts %} {% block scripts %}
<script src="{{ 'assets/javascripts/bundle.af710b79.min.js' | url }}"></script> <script src="{{ 'assets/javascripts/bundle.506c8aca.min.js' | url }}"></script>
{%- set translations = {} -%} {%- set translations = {} -%}
{%- for key in [ {%- for key in [
"clipboard.copy", "clipboard.copy",

96
src/assets/stylesheets/_config.scss
View File

@ -48,99 +48,3 @@ $break-devices: (
large: px2em(2000px) large: px2em(2000px)
) )
); );
@function hex2rgb($hex) {
@return red($hex), green($hex), blue($hex);
}
// ----------------------------------------------------------------------------
// Variables: base colors
// ----------------------------------------------------------------------------
// Primary and accent colors
$md-color-primary: $clr-indigo-500 !default;
$md-color-accent: $clr-indigo-a200 !default;
// Shades of black
$md-color-black: hsla(0, 0%, 0%, 0.87) !default;
$md-color-black--light: hsla(0, 0%, 0%, 0.54) !default;
$md-color-black--lighter: hsla(0, 0%, 0%, 0.26) !default;
$md-color-black--lightest: hsla(0, 0%, 0%, 0.07) !default;
$md-color-black--transparent: hsla(0, 0%, 0%, 0) !default;
// Shades of white
$md-color-white: hsla(0, 0%, 100%, 1) !default;
$md-color-white--light: hsla(0, 0%, 100%, 0.7) !default;
$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
// ----------------------------------------------------------------------------
// Icons
$md-icon-size: $ms-base * 1.5;
$md-icon-padding: $ms-base * 0.5;
$md-icon-margin: $ms-base * 0.25;
// Code blocks
$md-code-background: hsla(0, 0%, 92.5%, 0.5);
$md-code-gutter: #F6F6F6;
$md-code-color: #37474F;
// Keystrokes
$md-keyboard-background: #FCFCFC;
$md-keyboard-color: #555555;

2
src/assets/stylesheets/app-palette.scss
View File

@ -33,7 +33,7 @@
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
@import "utilities/break"; @import "utilities/break";
@import "utilities/px2em"; @import "utilities/convert";
@import "config"; @import "config";

3
src/assets/stylesheets/app.scss
View File

@ -33,11 +33,12 @@
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
@import "utilities/break"; @import "utilities/break";
@import "utilities/px2em"; @import "utilities/convert";
@import "config"; @import "config";
@import "base/reset"; @import "base/reset";
@import "base/colors";
@import "base/icons"; @import "base/icons";
@import "base/typeset"; @import "base/typeset";

56
src/assets/stylesheets/base/_colors.scss Normal file
View File

@ -0,0 +1,56 @@
////
/// Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
///
/// Permission is hereby granted, free of charge, to any person obtaining a
/// copy of this software and associated documentation files (the "Software"),
/// to deal in the Software without restriction, including without limitation
/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
/// and/or sell copies of the Software, and to permit persons to whom the
/// Software is furnished to do so, subject to the following conditions:
///
/// The above copyright notice and this permission notice shall be included in
/// all copies or substantial portions of the Software.
///
/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
/// DEALINGS
////
// ----------------------------------------------------------------------------
// Rules: colors
// ----------------------------------------------------------------------------
:root {
// Default color shades
--md-default-fg-color: hsla(0, 0%, 0%, 0.87);
--md-default-fg-color--light: hsla(0, 0%, 0%, 0.54);
--md-default-fg-color--lighter: hsla(0, 0%, 0%, 0.26);
--md-default-fg-color--lightest: hsla(0, 0%, 0%, 0.07);
--md-default-bg-color: hsla(0, 0%, 100%, 1);
--md-default-bg-color--light: hsla(0, 0%, 100%, 0.7);
--md-default-bg-color--lighter: hsla(0, 0%, 100%, 0.3);
--md-default-bg-color--lightest: hsla(0, 0%, 100%, 0.12);
// Primary color shades
--md-primary-fg-color: hsla(#{hex2hsl($clr-indigo-500)}, 1);
--md-primary-fg-color--light: hsla(#{hex2hsl($clr-indigo-300)}, 1);
--md-primary-fg-color--dark: hsla(#{hex2hsl($clr-indigo-700)}, 1);
--md-primary-bg-color: var(--md-default-bg-color);
--md-primary-bg-color--light: var(--md-default-bg-color--light);
// Accent color shades
--md-accent-fg-color: hsla(#{hex2hsl($clr-indigo-a200)}, 1);
--md-accent-fg-color--light: hsla(#{hex2hsl($clr-indigo-a200)}, 0.1);
--md-accent-fg-color--dark: hsla(#{hex2hsl($clr-indigo-a700)}, 1);
--md-accent-bg-color: var(--md-default-bg-color);
--md-accent-bg-color--light: var(--md-default-bg-color--light);
// Code block color shades
--md-code-bg-color: hsla(0, 0%, 92.5%, 0.5);
--md-code-fg-color: hsla(200, 18%, 26%, 1);
}

2
src/assets/stylesheets/base/_icons.scss
View File

@ -35,7 +35,7 @@
cursor: pointer; cursor: pointer;
} }
// Inherit current color // SVG defaults
svg { svg {
display: block; display: block;
width: px2rem(24px); width: px2rem(24px);

83
src/assets/stylesheets/base/_typeset.scss
View File

@ -33,16 +33,16 @@ body {
// Default fonts // Default fonts
body, body,
input { input {
color: var(--md-color-text); color: var(--md-default-fg-color);
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;
} }
// Proportionally spaced fonts // Proportionally spaced fonts
pre,
code, code,
pre,
kbd { kbd {
color: var(--md-color-text); color: var(--md-default-fg-color);
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: var(--md-color-text--light); color: var(--md-default-fg-color--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: var(--md-color-text--light); color: var(--md-default-fg-color--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 var(--md-color-text--lighter); border-bottom: px2rem(1px) dotted var(--md-default-fg-color--lighter);
} }
// Links // Links
a { a {
color: var(--md-color-primary); color: var(--md-primary-fg-color);
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: var(--md-color-accent); color: var(--md-accent-fg-color);
} }
// Add URLs for print // Add URLs for print
@ -154,7 +154,7 @@ kbd {
// Show link URL // Show link URL
&::after { &::after {
color: var(--md-color-text--light); color: var(--md-default-fg-color--light);
content: " [" attr(href) "]"; content: " [" attr(href) "]";
} }
} }
@ -162,9 +162,10 @@ kbd {
// Code blocks // Code blocks
code, code,
pre { pre,
background-color: var(--md-code-background); kbd {
color: var(--md-code-color); background-color: var(--md-code-bg-color);
color: var(--md-code-fg-color);
font-size: 85%; font-size: 85%;
direction: ltr; direction: ltr;
@ -176,22 +177,16 @@ kbd {
// Inline code blocks, correct relative ems for smaller font size // Inline code blocks, correct relative ems for smaller font size
code { code {
$correct: 1 / 0.85; $f: 1 / 0.85;
margin: 0 0.25em * $correct; margin: 0 0.25em * $f;
padding: 0.0625em * $correct 0; padding: 0.0625em * $f 0;
border-radius: px2rem(2px); border-radius: px2rem(2px);
box-shadow: box-shadow:
+0.25em * $correct 0 0 var(--md-code-background), +0.25em * $f 0 0 var(--md-code-bg-color),
-0.25em * $correct 0 0 var(--md-code-background); -0.25em * $f 0 0 var(--md-code-bg-color);
word-break: break-word; word-break: break-word;
box-decoration-break: clone; box-decoration-break: clone;
// Remove box-shadows for print
@media print {
box-shadow: none;
box-decoration-break: initial;
}
} }
// Disable containing block inside headlines // Disable containing block inside headlines
@ -244,11 +239,11 @@ kbd {
// Scrollbar thumb // Scrollbar thumb
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: var(--md-color-text--lighter); background-color: var(--md-default-fg-color--lighter);
// Hovered scrollbar thumb // Hovered scrollbar thumb
&:hover { &:hover {
background-color: var(--md-color-accent); background-color: var(--md-accent-fg-color);
} }
} }
} }
@ -271,17 +266,19 @@ kbd {
// Keystrokes // Keystrokes
kbd { kbd {
$correct: 1 / 0.85; $f: 1 / 0.85;
padding: 0 0.25em * $correct; display: inline-block;
border: px2rem(1px) solid darken($md-keyboard-background, 20%); padding: 0 0.5em * $f;
border-radius: px2rem(3px); border-radius: px2rem(2px);
border-bottom-color: darken($md-keyboard-background, 25%); font-size: 0.75em;
background-color: $md-keyboard-background; line-height: 1.5;
color: $md-keyboard-color; box-shadow:
font-size: 85%; 0 px2rem(2px) 0 px2rem(1px) var(--md-default-fg-color--lighter),
box-shadow: 0 px2rem(1px) 0 darken($md-keyboard-background, 30%); 0 px2rem(2px) 0 var(--md-default-fg-color--lighter),
inset 0 px2rem(-2px) px2rem(4px) var(--md-default-bg-color);
word-break: break-word; word-break: break-word;
vertical-align: text-top;
} }
// Text highlighting marker // Text highlighting marker
@ -299,7 +296,7 @@ kbd {
// Abbreviations // Abbreviations
abbr { abbr {
border-bottom: px2rem(1px) dotted var(--md-color-text--light); border-bottom: px2rem(1px) dotted var(--md-default-fg-color--light);
text-decoration: none; text-decoration: none;
cursor: help; cursor: help;
} }
@ -324,14 +321,14 @@ kbd {
// Blockquotes, possibly nested // Blockquotes, possibly nested
blockquote { blockquote {
padding-left: px2rem(12px); padding-left: px2rem(12px);
border-left: px2rem(4px) solid var(--md-color-text--lighter); border-left: px2rem(4px) solid var(--md-default-fg-color--lighter);
color: var(--md-color-text--light); color: var(--md-default-fg-color--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 var(--md-color-text--lighter); border-right: px2rem(4px) solid var(--md-default-fg-color--lighter);
border-left: initial; border-left: initial;
} }
} }
@ -423,7 +420,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) var(--md-color-text--lightest); box-shadow: inset 0 0 0 px2rem(1px) var(--md-default-fg-color--lightest);
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
@ -449,15 +446,15 @@ kbd {
th { th {
min-width: px2rem(100px); min-width: px2rem(100px);
padding: px2rem(12px) px2rem(16px); padding: px2rem(12px) px2rem(16px);
background-color: var(--md-color-text--light); background-color: var(--md-default-fg-color--light);
color: var(--md-color-background); color: var(--md-default-bg-color);
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 var(--md-color-text--lightest); border-top: px2rem(1px) solid var(--md-default-fg-color--lightest);
vertical-align: top; vertical-align: top;
} }
@ -468,7 +465,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 var(--md-color-background) inset; box-shadow: 0 px2rem(1px) 0 var(--md-default-bg-color) inset;
} }
// Remove top border on first row // Remove top border on first row

8
src/assets/stylesheets/extensions/_admonition.scss
View File

@ -36,7 +36,7 @@
font-size: ms(-1); font-size: ms(-1);
box-shadow: box-shadow:
inset 0 0 0 px2rem(1px) transparentize($clr-blue-a200, 0.85), inset 0 0 0 px2rem(1px) transparentize($clr-blue-a200, 0.85),
inset 1px 0 $clr-blue-a200; inset px2rem(1px) 0 $clr-blue-a200;
overflow: auto; overflow: auto;
// Adjust for right-to-left languages // Adjust for right-to-left languages
@ -45,7 +45,7 @@
border-left: none; border-left: none;
box-shadow: box-shadow:
inset 0 0 0 px2rem(1px) transparentize($clr-blue-a200, 0.85), inset 0 0 0 px2rem(1px) transparentize($clr-blue-a200, 0.85),
inset -1px 0 $clr-blue-a200; inset px2rem(-1px) 0 $clr-blue-a200;
} }
// Adjust spacing on last element // Adjust spacing on last element
@ -81,14 +81,14 @@
border-left-color: $tint; border-left-color: $tint;
box-shadow: box-shadow:
inset 0 0 0 px2rem(1px) transparentize($tint, 0.85), inset 0 0 0 px2rem(1px) transparentize($tint, 0.85),
inset 1px 0 $tint; inset px2rem(1px) 0 $tint;
// Adjust for right-to-left languages // Adjust for right-to-left languages
[dir="rtl"] & { [dir="rtl"] & {
border-right-color: $tint; border-right-color: $tint;
box-shadow: box-shadow:
inset 0 0 0 px2rem(1px) transparentize($tint, 0.85), inset 0 0 0 px2rem(1px) transparentize($tint, 0.85),
inset -1px 0 $tint; inset px2rem(-1px) 0 $tint;
} }
// Title // Title

10
src/assets/stylesheets/extensions/_codehilite.scss
View File

@ -245,8 +245,8 @@ $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: var(--md-color-text--lighter); color: var(--md-default-fg-color--lighter);
box-shadow: inset 0 0 0 px2rem(1px) $md-code-background; box-shadow: inset 0 0 0 px2rem(1px) var(--md-code-bg-color);
user-select: none; user-select: none;
// Reset spacings // Reset spacings
@ -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 var(--md-color-text--lightest); border-right: px2rem(1px) solid var(--md-default-fg-color--lightest);
background-color: $md-code-gutter; background-color: #F6F6F6;
color: var(--md-color-text--lighter); color: var(--md-default-fg-color--lighter);
content: attr(data-linenos); content: attr(data-linenos);
user-select: none; user-select: none;

20
src/assets/stylesheets/extensions/_footnotes.scss
View File

@ -60,7 +60,7 @@
// Footnotes extension // Footnotes extension
.footnote { .footnote {
color: var(--md-color-text--light); color: var(--md-default-fg-color--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: var(--md-color-text); color: var(--md-default-fg-color);
} }
// 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: var(--md-color-accent); color: var(--md-accent-fg-color);
} }
} }
} }
@ -106,7 +106,7 @@
&::before { &::before {
display: inline; display: inline;
margin: 0 0.2em; margin: 0 0.2em;
border-left: px2rem(1px) solid var(--md-color-text--lighter); border-left: px2rem(1px) solid var(--md-default-fg-color--lighter);
font-size: 1.25em; font-size: 1.25em;
content: ""; content: "";
vertical-align: px2rem(-5px); vertical-align: px2rem(-5px);
@ -118,10 +118,10 @@
display: inline-block; display: inline-block;
transform: translateX(px2rem(5px)); transform: translateX(px2rem(5px));
transition: transition:
transform 250ms 125ms, transform 250ms 250ms,
color 250ms, color 250ms,
opacity 125ms 125ms; opacity 125ms 250ms;
color: var(--md-color-black--lighter); color: var(--md-default-fg-color--lighter);
// Hack: remove Unicode arrow for icon // Hack: remove Unicode arrow for icon
font-size: 0; font-size: 0;
opacity: 0; opacity: 0;
@ -138,13 +138,17 @@
width: px2rem(16px); width: px2rem(16px);
height: px2rem(16px); height: px2rem(16px);
background-color: currentColor; background-color: currentColor;
mask-image: url("{{ anchor }}"); mask-image: url("{{ keyboard-return }}");
content: ""; content: "";
// Adjust for right-to-left languages // Adjust for right-to-left languages
[dir="rtl"] & { [dir="rtl"] & {
// Flip icon vertically
svg {
transform: scaleX(-1) transform: scaleX(-1)
} }
} }
} }
}
} }

16
src/assets/stylesheets/extensions/_permalinks.scss
View File

@ -35,12 +35,12 @@
transition: transition:
transform 250ms 250ms, transform 250ms 250ms,
color 250ms, color 250ms,
opacity 125ms 250ms; opacity 125ms 250ms,
// visibility 0ms 500ms; visibility 0ms 500ms;
opacity: 0; opacity: 0;
// Hack: If we don't set visibility hidden, the text content of the node // Hack: If we don't set visibility hidden, the text content of the node
// will include the headerlink character, which is why Google indexes them. // will include the headerlink character, which is why Google indexes them.
// visibility: hidden; visibility: hidden;
// Adjust for RTL languages // Adjust for RTL languages
[dir="rtl"] & { [dir="rtl"] & {
@ -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: var(--md-color-text--lighter); color: var(--md-default-fg-color--lighter);
} }
// Hide for print // Hide for print
@ -67,17 +67,17 @@
transition: transition:
transform 250ms 250ms, transform 250ms 250ms,
color 250ms, color 250ms,
opacity 125ms 250ms; opacity 125ms 250ms,
// visibility 0ms; visibility 0ms;
opacity: 1; opacity: 1;
// visibility: visible; visibility: visible;
} }
// Active or targeted permalink // Active or targeted permalink
.headerlink:focus, .headerlink:focus,
.headerlink:hover, .headerlink:hover,
:target .headerlink { :target .headerlink {
color: var(--md-color-accent); color: var(--md-accent-fg-color);
} }
// Correct anchor offset for link blurring // Correct anchor offset for link blurring

2
src/assets/stylesheets/extensions/pymdown/_details.scss
View File

@ -81,7 +81,7 @@
right: px2rem(12px); right: px2rem(12px);
width: px2rem(20px); width: px2rem(20px);
height: px2rem(20px); height: px2rem(20px);
background-color: var(--md-color-black--lighter); background-color: var(--md-default-fg-color--lighter);
mask-image: url("{{ chevron-down }}"); mask-image: url("{{ chevron-down }}");
content: ""; content: "";

8
src/assets/stylesheets/extensions/pymdown/_tabbed.scss
View File

@ -32,7 +32,7 @@
display: none; display: none;
order: 99; order: 99;
width: 100%; width: 100%;
background-color: var(--md-color-background); background-color: var(--md-default-bg-color);
// 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 var(--md-color-text--lightest); border: px2rem(1px) solid var(--md-default-fg-color--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: var(--md-color-accent); color: var(--md-accent-fg-color);
} }
} }
} }
@ -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 var(--md-color-text--lightest); border-top: px2rem(1px) solid var(--md-default-fg-color--lightest);
border-radius: 0; border-radius: 0;
// Actual container with code, overflowing // Actual container with code, overflowing

2
src/assets/stylesheets/extensions/pymdown/_tasklist.scss
View File

@ -57,7 +57,7 @@
left: px2em(-24px); left: px2em(-24px);
width: px2em(20px); width: px2em(20px);
height: px2em(20px); height: px2em(20px);
background-color: var(--md-color-black--lightest); background-color: var(--md-default-fg-color--lightest);
mask-image: url("{{ checkbox-blank-circle }}"); mask-image: url("{{ checkbox-blank-circle }}");
content: ""; content: "";

6
src/assets/stylesheets/layout/_announce.scss
View File

@ -25,14 +25,14 @@
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
// Announcement bar // Announcement bar
.md-announcement { .md-announce {
background-color: var(--md-color-text); background-color: var(--md-default-fg-color);
// Actual content // Actual content
&__inner { &__inner {
min-height: px2rem(48px); min-height: px2rem(48px);
padding: 0 px2rem(16px); padding: 0 px2rem(16px);
color: var(--md-color-background); color: var(--md-default-bg-color);
font-size: px2rem(14px); font-size: px2rem(14px);
line-height: px2rem(48px); line-height: px2rem(48px);
} }

8
src/assets/stylesheets/layout/_base.scss
View File

@ -36,7 +36,7 @@ $md-toggle__drawer--checked:
// calculations base on relative ems (rems) // calculations base on relative ems (rems)
html { html {
min-height: 100%; min-height: 100%;
background-color: var(--md-color-background); background-color: var(--md-default-bg-color);
// 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: var(--md-color-black--light); background-color: var(--md-default-fg-color--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: var(--md-color-text); background-color: var(--md-default-fg-color);
color: var(--md-color-background); color: var(--md-default-bg-color);
font-size: ms(-1); font-size: ms(-1);
opacity: 0; opacity: 0;

6
src/assets/stylesheets/layout/_clipboard.scss
View File

@ -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: var(--md-color-text--lightest); color: var(--md-default-fg-color--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: var(md-color-text--light); color: var(--md-default-fg-color--light);
} }
// Focused or hovered icon // Focused or hovered icon
pre &:focus, pre &:focus,
pre &:hover { pre &:hover {
color: var(--md-color-accent); color: var(--md-accent-fg-color);
} }
} }

2
src/assets/stylesheets/layout/_content.scss
View File

@ -94,7 +94,7 @@
// Override default link color for icons // Override default link color for icons
.md-typeset & { .md-typeset & {
color: var(--md-color-text--lighter); color: var(--md-default-fg-color--lighter);
} }
// Align text with icon // Align text with icon

4
src/assets/stylesheets/layout/_dialog.scss
View File

@ -41,8 +41,8 @@
opacity 400ms; opacity 400ms;
border: none; border: none;
border-radius: px2rem(2px); border-radius: px2rem(2px);
background: var(--md-color-text); background: var(--md-default-fg-color);
color: var(--md-color-background); color: var(--md-default-bg-color);
font-size: px2rem(14px); font-size: px2rem(14px);
opacity: 0; opacity: 0;
z-index: 2; z-index: 2;

16
src/assets/stylesheets/layout/_footer.scss
View File

@ -26,6 +26,8 @@
// Application footer // Application footer
.md-footer { .md-footer {
background-color: var(--md-default-fg-color);
color: var(--md-default-bg-color);
// Hide for print // Hide for print
@media print { @media print {
@ -35,8 +37,6 @@
// Navigation within footer // Navigation within footer
.md-footer-nav { .md-footer-nav {
background-color: var(--md-color-text);
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: var(--md-color-background--light); color: var(--md-default-bg-color--light);
font-size: px2rem(15px); font-size: px2rem(15px);
} }
} }
// Non-navigational information // Non-navigational information
.md-footer-meta { .md-footer-meta {
background-color: rgba(var(--md-color-text-values), 1.025); background-color: var(--md-default-fg-color--lighter);
// 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: var(--md-color-background--light); color: var(--md-default-bg-color--light);
// Focused or hovered link // Focused or hovered link
&:focus, &:focus,
&:hover { &:hover {
color: var(--md-color-background); color: var(--md-default-bg-color);
} }
} }
} }
@ -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: var(--md-color-background--lighter); color: var(--md-default-bg-color--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: var(--md-color-background--light); color: var(--md-default-bg-color--light);
} }
} }

4
src/assets/stylesheets/layout/_header.scss
View File

@ -34,8 +34,8 @@
transition: transition:
background-color 250ms, background-color 250ms,
color 250ms; color 250ms;
background-color: var(--md-color-primary); background-color: var(--md-primary-fg-color);
color: var(--md-color-background); color: var(--md-primary-bg-color);
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

4
src/assets/stylesheets/layout/_hero.scss
View File

@ -27,8 +27,8 @@
// Hero teaser // Hero teaser
.md-hero { .md-hero {
transition: background 250ms; transition: background 250ms;
background-color: var(--md-color-primary); background-color: var(--md-primary-fg-color);
color: var(--md-color-background); color: var(--md-primary-bg-color);
font-size: ms(1); font-size: ms(1);
overflow: hidden; overflow: hidden;

27
src/assets/stylesheets/layout/_nav.scss
View File

@ -118,12 +118,12 @@
// Blurred link // Blurred link
&[data-md-state="blur"] { &[data-md-state="blur"] {
color: var(--md-color-text--light); color: var(--md-default-fg-color--light);
} }
// Active link // Active link
.md-nav__item &--active { .md-nav__item &--active {
color: var(--md-color-primary); color: var(--md-primary-fg-color);
} }
// 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: var(--md-color-accent); color: var(--md-accent-fg-color);
} }
} }
@ -145,7 +145,7 @@
// [tablet -]: Layered navigation // [tablet -]: Layered navigation
@include break-to-device(tablet) { @include break-to-device(tablet) {
background-color: var(--md-color-background); background-color: var(--md-default-bg-color);
// 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: var(--md-color-text--lightest); background-color: var(--md-default-fg-color--lightest);
color: var(--md-color-text--light); color: var(--md-default-fg-color--light);
font-weight: 400; font-weight: 400;
line-height: px2rem(48px); line-height: px2rem(48px);
white-space: nowrap; white-space: nowrap;
@ -201,8 +201,9 @@
// Main lists // Main lists
~ .md-nav__list { ~ .md-nav__list {
background-color: var(--md-color-background); background-color: var(--md-default-bg-color);
box-shadow: inset 0 px2rem(1px) 0 var(--md-color-text--lightest); box-shadow:
inset 0 px2rem(1px) 0 var(--md-default-fg-color--lightest);
overflow-y: auto; overflow-y: auto;
scroll-snap-type: y mandatory; scroll-snap-type: y mandatory;
@ -215,8 +216,8 @@
// Site title in main navigation // Site title in main navigation
&[for="__drawer"] { &[for="__drawer"] {
position: relative; position: relative;
background-color: var(--md-color-primary); background-color: var(--md-primary-fg-color);
color: var(--md-color-background); color: var(--md-primary-bg-color);
// Site logo // Site logo
.md-nav__button { .md-nav__button {
@ -251,7 +252,7 @@
// List item // List item
.md-nav__item { .md-nav__item {
padding: 0; padding: 0;
border-top: px2rem(1px) solid var(--md-color-text--lightest); border-top: px2rem(1px) solid var(--md-default-fg-color--lightest);
// Adjust for right-to-left languages // Adjust for right-to-left languages
[dir="rtl"] & { [dir="rtl"] & {
@ -421,8 +422,8 @@
&__source { &__source {
display: block; display: block;
padding: 0 px2rem(4px); padding: 0 px2rem(4px);
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 background-color: var(--md-primary-fg-color--dark);
color: var(--md-color-background); color: var(--md-primary-bg-color);
} }
} }

48
src/assets/stylesheets/layout/_search.scss
View File

@ -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: var(--md-color-background); background-color: var(--md-default-bg-color);
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: var(--md-color-black--light); background-color: var(--md-default-fg-color--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: var(--md-color-text--light); color: var(--md-default-fg-color--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: var(--md-color-text--lighter); background-color: var(--md-default-fg-color--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: var(--md-color-background); color: var(--md-primary-bg-color);
} }
// Placeholder color // Placeholder color
&::placeholder { &::placeholder {
color: var(--md-color-background--light); color: var(--md-primary-bg-color--light);
} }
// Hovered search field // Hovered search field
&:hover { &:hover {
background-color: var(--md-color-background--lightest); background-color: var(--md-default-bg-color--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: var(--md-color-background); background-color: var(--md-default-bg-color);
color: var(--md-color-text); color: var(--md-default-fg-color);
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: var(--md-color-text--light); color: var(--md-default-fg-color--light);
} }
} }
} }
@ -310,7 +310,6 @@ $md-toggle__search--checked:
transition: transition:
color 250ms cubic-bezier(0.1, 0.7, 0.1, 1), color 250ms cubic-bezier(0.1, 0.7, 0.1, 1),
opacity 250ms; opacity 250ms;
font-size: $md-icon-size;
cursor: pointer; cursor: pointer;
z-index: 2; z-index: 2;
@ -435,7 +434,7 @@ $md-toggle__search--checked:
// Wrapper for scrolling on overflow // Wrapper for scrolling on overflow
&__scrollwrap { &__scrollwrap {
height: 100%; height: 100%;
background-color: var(--md-color-background); background-color: var(--md-default-bg-color);
box-shadow: inset 0 px2rem(1px) 0 var(md-color-text--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;
@ -473,11 +472,11 @@ $md-toggle__search--checked:
// Scrollbar thumb // Scrollbar thumb
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: var(--md-color-text--lighter); background-color: var(--md-default-fg-color--lighter);
// Hovered scrollbar thumb // Hovered scrollbar thumb
&:hover { &:hover {
background-color: var(--md-color-accent); background-color: var(--md-accent-fg-color);
} }
} }
} }
@ -486,14 +485,14 @@ $md-toggle__search--checked:
// Search result // Search result
.md-search-result { .md-search-result {
color: var(--md-color-text); color: var(--md-default-fg-color);
word-break: break-word; word-break: break-word;
// Search metadata // Search metadata
&__meta { &__meta {
padding: 0 px2rem(16px); padding: 0 px2rem(16px);
background-color: var(--md-color-text--lightest); background-color: var(--md-default-fg-color--lightest);
color: var(--md-color-text--light); color: var(--md-default-fg-color--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 +513,13 @@ $md-toggle__search--checked:
&__list { &__list {
margin: 0; margin: 0;
padding: 0; padding: 0;
border-top: px2rem(1px) solid var(--md-color-text--lightest); border-top: px2rem(1px) solid var(--md-default-fg-color--lightest);
list-style: none; list-style: none;
} }
// List item // List item
&__item { &__item {
box-shadow: 0 px2rem(-1px) 0 var(--md-color-text--lightest); box-shadow: 0 px2rem(-1px) 0 var(--md-default-fg-color--lightest);
} }
// Link inside item // Link inside item
@ -534,7 +533,7 @@ $md-toggle__search--checked:
// Focused or hovered link // Focused or hovered link
&:focus, &:focus,
&:hover { &:hover {
background-color: rgba(var(--md-color-accent-values), 0.9); background-color: var(--md-accent-fg-color--light);
// Slightly transparent icon // Slightly transparent icon
.md-search-result__article::before { .md-search-result__article::before {
@ -584,12 +583,17 @@ $md-toggle__search--checked:
left: 0; left: 0;
margin: px2rem(2px); margin: px2rem(2px);
transition: opacity 250ms; transition: opacity 250ms;
color: var(--md-color-text--light); color: var(--md-default-fg-color--light);
// Adjust for right-to-left languages // Adjust for right-to-left languages
[dir="rtl"] & { [dir="rtl"] & {
right: 0; right: 0;
left: initial; left: initial;
// Flip icon vertically
svg {
transform: scaleX(-1);
}
} }
// [tablet portrait -]: Hide page icon // [tablet portrait -]: Hide page icon
@ -613,7 +617,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: var(--md-color-text--light); color: var(--md-default-fg-color--light);
font-size: ms(-1); font-size: ms(-1);
line-height: 1.4; line-height: 1.4;
text-overflow: ellipsis; text-overflow: ellipsis;

6
src/assets/stylesheets/layout/_sidebar.scss
View File

@ -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: var(--md-color-background); background-color: var(--md-default-bg-color);
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: var(--md-color-text--lighter); background-color: var(--md-default-fg-color--lighter);
// Hovered scrollbar thumb // Hovered scrollbar thumb
&:hover { &:hover {
background-color: var(--md-color-accent); background-color: var(--md-accent-fg-color);
} }
} }
} }

4
src/assets/stylesheets/layout/_tabs.scss
View File

@ -28,8 +28,8 @@
.md-tabs { .md-tabs {
width: 100%; width: 100%;
transition: background 250ms; transition: background 250ms;
background-color: var(--md-color-primary); background-color: var(--md-primary-fg-color);
color: var(--md-color-background); color: var(--md-primary-bg-color);
overflow: auto; overflow: auto;
// Omit transitions, in case JavaScript is not available // Omit transitions, in case JavaScript is not available

14
src/assets/stylesheets/utilities/_px2em.scss → src/assets/stylesheets/utilities/_convert.scss
View File

@ -20,12 +20,22 @@
/// DEALINGS /// DEALINGS
//// ////
// stylelint-disable unit-whitelist
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
// Helpers // Helpers
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
///
/// Convert color in HEX to HSL
///
@function hex2hsl($color) {
@return
round(hue($color)),
round(saturation($color)),
round(lightness($color));
}
// ----------------------------------------------------------------------------
/// ///
/// Convert font size in px to em /// Convert font size in px to em
/// ///

8
src/base.html
View File

@ -216,10 +216,10 @@
{% endif %} {% endif %}
<!-- Announcement bar --> <!-- Announcement bar -->
{% if self.announcement() %} {% if self.announce() %}
<aside class="md-announcement" data-md-component="announcement"> <aside class="md-announce" data-md-component="announce">
<div class="md-announcement__inner md-grid md-typeset"> <div class="md-announce__inner md-grid md-typeset">
{% block announcement %}{% endblock %} {% block announce %}{% endblock %}
</div> </div>
</aside> </aside>
{% endif %} {% endif %}