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 to use CSS Variables (#1409)

Browse Source 
* 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:
Benjamin Staneck 2020-02-25 15:04:58 +01:00 committed by GitHub
parent 446e55767b
commit ca50ed8200
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 184 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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
// ----------------------------------------------------------------------------

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

@ -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);
}
}

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

@ -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

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

@ -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;

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

@ -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;

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

@ -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

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

@ -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: "";

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

@ -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

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

@ -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: "";

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

@ -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);
}

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

@ -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;

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

@ -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);
}
}

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

@ -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

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

@ -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;

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

@ -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);
}
}

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

@ -34,8 +34,8 @@
transition:
background-color 250ms,
color 250ms;
background-color: $md-color-primary;
color: $md-color-white;
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

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

@ -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;

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

@ -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);
}
}

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

@ -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;

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

@ -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);
}
}
}

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

@ -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