mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-09-24 11:28:23 +02:00
Merge branch 'master' of github.com:squidfunk/mkdocs-material
This commit is contained in:
squidfunk
commit
158e794f73
@ -1,6 +1,6 @@
|
||||
{
|
||||
"extends": [
|
||||
"stylelint-config-rational-order",
|
||||
"stylelint-config-recess-order",
|
||||
"stylelint-config-recommended",
|
||||
"stylelint-config-standard-scss"
|
||||
],
|
||||
|
||||
6535
package-lock.json
generated
6535
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -93,7 +93,7 @@
|
||||
"sass": "^1.58.3",
|
||||
"simple-icons": "^8.6.0",
|
||||
"stylelint": "^15.2.0",
|
||||
"stylelint-config-rational-order": "^0.1.2",
|
||||
"stylelint-config-recess-order": "^4.0.0",
|
||||
"stylelint-config-recommended": "^10.0.1",
|
||||
"stylelint-config-standard-scss": "^7.0.1",
|
||||
"stylelint-scss": "^4.4.0",
|
||||
|
||||
@ -34,8 +34,8 @@
|
||||
.inline {
|
||||
float: inline-start;
|
||||
width: px2rem(234px);
|
||||
margin-top: 0;
|
||||
margin-inline-end: px2rem(16px);
|
||||
margin-top: 0;
|
||||
margin-bottom: px2rem(16px);
|
||||
|
||||
// Modifier to move to end (ltr: right, rtl: left)
|
||||
|
||||
@ -64,8 +64,8 @@ a {
|
||||
|
||||
// Normalize horizontal separator styles
|
||||
hr {
|
||||
display: block;
|
||||
box-sizing: content-box;
|
||||
display: block;
|
||||
height: px2rem(1px);
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
@ -90,8 +90,8 @@ img {
|
||||
|
||||
// Reset table styles
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
// Reset table cell styles
|
||||
@ -103,10 +103,10 @@ th {
|
||||
|
||||
// Reset button styles
|
||||
button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@ -44,17 +44,17 @@ body {
|
||||
body,
|
||||
input,
|
||||
aside {
|
||||
color: var(--md-typeset-color);
|
||||
font-feature-settings: "kern", "liga";
|
||||
font-family: var(--md-text-font-family);
|
||||
font-feature-settings: "kern", "liga";
|
||||
color: var(--md-typeset-color);
|
||||
}
|
||||
|
||||
// Define monospaced fonts
|
||||
code,
|
||||
pre,
|
||||
kbd {
|
||||
font-feature-settings: "kern";
|
||||
font-family: var(--md-code-font-family);
|
||||
font-feature-settings: "kern";
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
@ -96,18 +96,18 @@ kbd {
|
||||
// Headline on level 1
|
||||
h1 {
|
||||
margin: 0 0 px2em(40px, 32px);
|
||||
color: var(--md-default-fg-color--light);
|
||||
font-weight: 300;
|
||||
font-size: px2em(32px);
|
||||
font-weight: 300;
|
||||
line-height: 1.3;
|
||||
color: var(--md-default-fg-color--light);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
// Headline on level 2
|
||||
h2 {
|
||||
margin: px2em(40px, 25px) 0 px2em(16px, 25px);
|
||||
font-weight: 300;
|
||||
font-size: px2em(25px);
|
||||
font-weight: 300;
|
||||
line-height: 1.4;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
@ -115,8 +115,8 @@ kbd {
|
||||
// Headline on level 3
|
||||
h3 {
|
||||
margin: px2em(32px, 20px) 0 px2em(16px, 20px);
|
||||
font-weight: 400;
|
||||
font-size: px2em(20px);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
@ -137,9 +137,9 @@ kbd {
|
||||
h5,
|
||||
h6 {
|
||||
margin: px2em(16px, 12.8px) 0;
|
||||
color: var(--md-default-fg-color--light);
|
||||
font-weight: 700;
|
||||
font-size: px2em(12.8px);
|
||||
font-weight: 700;
|
||||
color: var(--md-default-fg-color--light);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
@ -193,9 +193,9 @@ kbd {
|
||||
code,
|
||||
pre,
|
||||
kbd {
|
||||
font-variant-ligatures: none;
|
||||
color: var(--md-code-fg-color);
|
||||
direction: ltr;
|
||||
font-variant-ligatures: none;
|
||||
|
||||
// [print]: Wrap text and hide scollbars
|
||||
@media print {
|
||||
@ -228,14 +228,14 @@ kbd {
|
||||
// Code block
|
||||
> code {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: px2em(10.5px, 13.6px) px2em(16px, 13.6px);
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
word-break: normal;
|
||||
touch-action: auto;
|
||||
outline-color: var(--md-accent-fg-color);
|
||||
box-shadow: none;
|
||||
box-decoration-break: slice;
|
||||
touch-action: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--md-default-fg-color--lighter) transparent;
|
||||
|
||||
@ -266,10 +266,10 @@ kbd {
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: 0 px2em(8px, 12px);
|
||||
color: var(--md-default-fg-color);
|
||||
font-size: px2em(12px);
|
||||
vertical-align: text-top;
|
||||
color: var(--md-default-fg-color);
|
||||
word-break: break-word;
|
||||
vertical-align: text-top;
|
||||
background-color: var(--md-typeset-kbd-color);
|
||||
border-radius: px2rem(2px);
|
||||
box-shadow:
|
||||
@ -289,8 +289,8 @@ kbd {
|
||||
// Abbreviation
|
||||
abbr {
|
||||
text-decoration: none;
|
||||
border-bottom: px2rem(1px) dotted var(--md-default-fg-color--light);
|
||||
cursor: help;
|
||||
border-bottom: px2rem(1px) dotted var(--md-default-fg-color--light);
|
||||
|
||||
// Show tooltip for touch devices
|
||||
@media (hover: none) {
|
||||
@ -299,14 +299,14 @@ kbd {
|
||||
&[title]:is(:focus, :hover)::after {
|
||||
position: absolute;
|
||||
inset-inline: px2rem(16px);
|
||||
margin-top: 2em;
|
||||
padding: px2rem(4px) px2rem(6px);
|
||||
color: var(--md-default-bg-color);
|
||||
margin-top: 2em;
|
||||
font-size: px2rem(14px);
|
||||
color: var(--md-default-bg-color);
|
||||
content: attr(title);
|
||||
background-color: var(--md-default-fg-color);
|
||||
border-radius: px2rem(2px);
|
||||
box-shadow: var(--md-shadow-z3);
|
||||
content: attr(title);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -338,8 +338,8 @@ kbd {
|
||||
// Unordered and ordered list
|
||||
ul,
|
||||
ol {
|
||||
margin-inline-start: px2em(10px);
|
||||
padding: 0;
|
||||
margin-inline-start: px2em(10px);
|
||||
|
||||
// Adjust display mode if not hidden
|
||||
&:not([hidden]) {
|
||||
@ -358,8 +358,8 @@ kbd {
|
||||
|
||||
// List element
|
||||
li {
|
||||
margin-bottom: 0.5em;
|
||||
margin-inline-start: px2em(20px);
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
// Adjust spacing
|
||||
p,
|
||||
@ -453,10 +453,10 @@ kbd {
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
font-size: px2rem(12.8px);
|
||||
touch-action: auto;
|
||||
background-color: var(--md-default-bg-color);
|
||||
border: px2rem(1px) solid var(--md-typeset-table-color);
|
||||
border-radius: px2rem(2px);
|
||||
touch-action: auto;
|
||||
|
||||
// [print]: Reset display mode so table header wraps when printing
|
||||
@media print {
|
||||
@ -537,11 +537,11 @@ kbd {
|
||||
height: 1.2em;
|
||||
margin-inline-start: 0.5em;
|
||||
vertical-align: text-bottom;
|
||||
content: "";
|
||||
transition: background-color 125ms;
|
||||
mask-image: var(--md-typeset-table-sort-icon);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
transition: background-color 125ms;
|
||||
content: "";
|
||||
}
|
||||
|
||||
// Show sort icon on hover
|
||||
@ -572,8 +572,8 @@ kbd {
|
||||
// Data table wrapper
|
||||
&__table {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.5em;
|
||||
padding: 0 px2rem(16px);
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
// [print]: Reset display mode so table header wraps when printing
|
||||
@media print {
|
||||
|
||||
@ -43,8 +43,8 @@
|
||||
|
||||
// Banner wrapper
|
||||
&__inner {
|
||||
margin: px2rem(12px) auto;
|
||||
padding: 0 px2rem(16px);
|
||||
margin: px2rem(12px) auto;
|
||||
font-size: px2rem(14px);
|
||||
}
|
||||
|
||||
|
||||
@ -112,8 +112,8 @@ body {
|
||||
// Add ellipsis in case of overflowing text
|
||||
.md-ellipsis {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
@ -152,24 +152,24 @@ body {
|
||||
// Hack: if we don't set the negative `z-index`, the skip link will force the
|
||||
// creation of new layers when code blocks are near the header on scrolling
|
||||
z-index: -1;
|
||||
margin: px2rem(10px);
|
||||
padding: px2rem(6px) px2rem(10px);
|
||||
color: var(--md-default-bg-color);
|
||||
margin: px2rem(10px);
|
||||
font-size: px2rem(12.8px);
|
||||
color: var(--md-default-bg-color);
|
||||
background-color: var(--md-default-fg-color);
|
||||
border-radius: px2rem(2px);
|
||||
outline-color: var(--md-accent-fg-color);
|
||||
transform: translateY(px2rem(8px));
|
||||
opacity: 0;
|
||||
transform: translateY(px2rem(8px));
|
||||
|
||||
// Show skip link on focus
|
||||
&:focus {
|
||||
z-index: 10;
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
transition:
|
||||
transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
opacity 175ms 75ms;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -40,10 +40,10 @@
|
||||
width: px2em(24px);
|
||||
height: px2em(24px);
|
||||
color: var(--md-default-fg-color--lightest);
|
||||
cursor: pointer;
|
||||
border-radius: px2rem(2px);
|
||||
outline-color: var(--md-accent-fg-color);
|
||||
outline-offset: px2rem(2px);
|
||||
cursor: pointer;
|
||||
transition: color 250ms;
|
||||
|
||||
// [print]: Hide button
|
||||
@ -74,12 +74,12 @@
|
||||
width: px2em(18px);
|
||||
height: px2em(18px);
|
||||
margin: 0 auto;
|
||||
content: "";
|
||||
background-color: currentcolor;
|
||||
mask-image: var(--md-clipboard-icon);
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
content: "";
|
||||
}
|
||||
|
||||
// Inline clipboard button
|
||||
|
||||
@ -27,13 +27,13 @@
|
||||
// Show consent
|
||||
@keyframes consent {
|
||||
0% {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -34,8 +34,8 @@
|
||||
|
||||
// Content wrapper
|
||||
&__inner {
|
||||
margin: 0 px2rem(16px) px2rem(24px);
|
||||
padding-top: px2rem(12px);
|
||||
margin: 0 px2rem(16px) px2rem(24px);
|
||||
|
||||
// [screen +]: Adjust spacing between content area and sidebars
|
||||
@include break-from-device(screen) {
|
||||
@ -69,9 +69,9 @@
|
||||
// a document-level, i.e. linking to related source code files, printing etc.
|
||||
&__button {
|
||||
float: inline-end;
|
||||
padding: 0;
|
||||
margin: px2rem(8px) 0;
|
||||
margin-inline-start: px2rem(8px);
|
||||
padding: 0;
|
||||
|
||||
// [print]: Hide buttons
|
||||
@media print {
|
||||
|
||||
@ -27,20 +27,20 @@
|
||||
// Dialog
|
||||
.md-dialog {
|
||||
position: fixed;
|
||||
inset-inline-end: px2rem(16px);
|
||||
bottom: px2rem(16px);
|
||||
z-index: 4;
|
||||
min-width: px2rem(222px);
|
||||
padding: px2rem(8px) px2rem(12px);
|
||||
pointer-events: none;
|
||||
background-color: var(--md-default-fg-color);
|
||||
border-radius: px2rem(2px);
|
||||
box-shadow: var(--md-shadow-z3);
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
transition:
|
||||
transform 0ms 400ms,
|
||||
opacity 400ms;
|
||||
pointer-events: none;
|
||||
transform: translateY(100%);
|
||||
inset-inline-end: px2rem(16px);
|
||||
|
||||
// [print]: Hide dialog
|
||||
@media print {
|
||||
@ -49,17 +49,17 @@
|
||||
|
||||
// Active dialog
|
||||
&--active {
|
||||
transform: translateY(0);
|
||||
pointer-events: initial;
|
||||
opacity: 1;
|
||||
transition:
|
||||
transform 400ms cubic-bezier(0.075, 0.85, 0.175, 1),
|
||||
opacity 400ms;
|
||||
pointer-events: initial;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
// Dialog wrapper
|
||||
&__inner {
|
||||
color: var(--md-default-bg-color);
|
||||
font-size: px2rem(14px);
|
||||
color: var(--md-default-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -31,8 +31,8 @@
|
||||
|
||||
// Feedback fieldset
|
||||
fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
@ -89,11 +89,11 @@
|
||||
// Feedback note
|
||||
&__note {
|
||||
position: relative;
|
||||
transform: translateY(px2rem(8px));
|
||||
opacity: 0;
|
||||
transition:
|
||||
transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1),
|
||||
opacity 150ms;
|
||||
transform: translateY(px2rem(8px));
|
||||
|
||||
// Feedback note value
|
||||
> * {
|
||||
@ -103,8 +103,8 @@
|
||||
|
||||
// Show after submission
|
||||
:disabled & {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -108,16 +108,16 @@
|
||||
|
||||
// Footer link button
|
||||
&__button {
|
||||
margin: px2rem(4px);
|
||||
padding: px2rem(8px);
|
||||
margin: px2rem(4px);
|
||||
}
|
||||
|
||||
// Footer link direction (i.e. prev and next)
|
||||
&__direction {
|
||||
position: absolute;
|
||||
inset-inline: 0;
|
||||
margin-top: px2rem(-20px);
|
||||
padding: 0 px2rem(20px);
|
||||
margin-top: px2rem(-20px);
|
||||
font-size: px2rem(12.8px);
|
||||
opacity: 0.7;
|
||||
}
|
||||
@ -151,10 +151,10 @@
|
||||
// Copyright and theme information
|
||||
.md-copyright {
|
||||
width: 100%;
|
||||
margin: auto px2rem(12px);
|
||||
padding: px2rem(8px) 0;
|
||||
color: var(--md-footer-fg-color--lighter);
|
||||
margin: auto px2rem(12px);
|
||||
font-size: px2rem(12.8px);
|
||||
color: var(--md-footer-fg-color--lighter);
|
||||
|
||||
// [tablet portrait +]: Show copyright and social links in one line
|
||||
@include break-from-device(tablet portrait) {
|
||||
@ -172,8 +172,8 @@
|
||||
|
||||
// Social links
|
||||
.md-social {
|
||||
margin: 0 px2rem(8px);
|
||||
padding: px2rem(4px) 0 px2rem(12px);
|
||||
margin: 0 px2rem(8px);
|
||||
|
||||
// [tablet portrait +]: Show copyright and social links in one line
|
||||
@include break-from-device(tablet portrait) {
|
||||
|
||||
@ -31,11 +31,11 @@
|
||||
.md-button {
|
||||
display: inline-block;
|
||||
padding: px2em(10px) px2em(32px);
|
||||
color: var(--md-primary-fg-color);
|
||||
font-weight: 700;
|
||||
color: var(--md-primary-fg-color);
|
||||
cursor: pointer;
|
||||
border: px2rem(2px) solid currentcolor;
|
||||
border-radius: px2rem(2px);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
color 125ms,
|
||||
background-color 125ms,
|
||||
|
||||
@ -28,8 +28,8 @@
|
||||
// viewport. If this behavior is not desired, just set `position: static`.
|
||||
.md-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
inset-inline: 0;
|
||||
top: 0;
|
||||
z-index: 4;
|
||||
display: block;
|
||||
color: var(--md-primary-bg-color);
|
||||
@ -47,10 +47,10 @@
|
||||
|
||||
// Header is hidden
|
||||
&[hidden] {
|
||||
transform: translateY(-100%);
|
||||
transition:
|
||||
transform 250ms cubic-bezier(0.8, 0, 0.6, 1),
|
||||
box-shadow 250ms;
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
// Header in shadow state, i.e. shadow is visible
|
||||
@ -74,12 +74,12 @@
|
||||
&__button {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: px2rem(4px);
|
||||
padding: px2rem(8px);
|
||||
margin: px2rem(4px);
|
||||
color: currentcolor;
|
||||
vertical-align: middle;
|
||||
outline-color: var(--md-accent-fg-color);
|
||||
cursor: pointer;
|
||||
outline-color: var(--md-accent-fg-color);
|
||||
transition: opacity 250ms;
|
||||
|
||||
// Button on hover
|
||||
@ -100,8 +100,8 @@
|
||||
|
||||
// Button with logo, pointing to `config.site_url`
|
||||
&.md-logo {
|
||||
margin: px2rem(4px);
|
||||
padding: px2rem(8px);
|
||||
margin: px2rem(4px);
|
||||
|
||||
// [tablet -]: Hide button
|
||||
@include break-to-device(tablet) {
|
||||
@ -159,12 +159,12 @@
|
||||
// Second header topic - title of the current page
|
||||
& + & {
|
||||
z-index: -1;
|
||||
transform: translateX(px2rem(25px));
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition:
|
||||
transform 400ms cubic-bezier(1, 0.7, 0.1, 0.1),
|
||||
opacity 150ms;
|
||||
pointer-events: none;
|
||||
transform: translateX(px2rem(25px));
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
@ -182,20 +182,20 @@
|
||||
&__title {
|
||||
flex-grow: 1;
|
||||
height: px2rem(48px);
|
||||
margin-inline-end: px2rem(8px);
|
||||
margin-inline-start: px2rem(20px);
|
||||
margin-inline-end: px2rem(8px);
|
||||
font-size: px2rem(18px);
|
||||
line-height: px2rem(48px);
|
||||
|
||||
// Header title in active state, i.e. page title is visible
|
||||
&--active .md-header__topic {
|
||||
z-index: -1;
|
||||
transform: translateX(px2rem(-25px));
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition:
|
||||
transform 400ms cubic-bezier(1, 0.7, 0.1, 0.1),
|
||||
opacity 150ms;
|
||||
pointer-events: none;
|
||||
transform: translateX(px2rem(-25px));
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
@ -205,12 +205,12 @@
|
||||
// Second header topic - title of the current page
|
||||
+ .md-header__topic {
|
||||
z-index: 0;
|
||||
transform: translateX(0);
|
||||
pointer-events: initial;
|
||||
opacity: 1;
|
||||
transition:
|
||||
transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1),
|
||||
opacity 150ms;
|
||||
pointer-events: initial;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -43,8 +43,8 @@
|
||||
display: block;
|
||||
padding: 0 px2rem(12px);
|
||||
overflow: hidden;
|
||||
color: var(--md-default-fg-color--light);
|
||||
font-weight: 700;
|
||||
color: var(--md-default-fg-color--light);
|
||||
text-overflow: ellipsis;
|
||||
|
||||
// Navigaton button
|
||||
@ -75,8 +75,8 @@
|
||||
|
||||
// Navigation list
|
||||
&__list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
@ -171,8 +171,8 @@
|
||||
&--primary,
|
||||
&--primary & {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -194,11 +194,11 @@
|
||||
position: relative;
|
||||
height: px2rem(112px);
|
||||
padding: px2rem(60px) px2rem(16px) px2rem(4px);
|
||||
color: var(--md-default-fg-color--light);
|
||||
line-height: px2rem(48px);
|
||||
color: var(--md-default-fg-color--light);
|
||||
white-space: nowrap;
|
||||
background-color: var(--md-default-fg-color--lightest);
|
||||
cursor: pointer;
|
||||
background-color: var(--md-default-fg-color--lightest);
|
||||
|
||||
// Navigation icon
|
||||
.md-nav__icon {
|
||||
@ -215,23 +215,23 @@
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
background-color: currentcolor;
|
||||
mask-image: var(--md-nav-icon--prev);
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
// Navigation list
|
||||
~ .md-nav__list {
|
||||
overflow-y: auto;
|
||||
touch-action: pan-y;
|
||||
background-color: var(--md-default-bg-color);
|
||||
box-shadow:
|
||||
0 px2rem(1px) 0 var(--md-default-fg-color--lightest) inset;
|
||||
scroll-snap-type: y mandatory;
|
||||
touch-action: pan-y;
|
||||
|
||||
// Omit border on first child
|
||||
> :first-child {
|
||||
@ -241,19 +241,19 @@
|
||||
|
||||
// Top-level navigation title
|
||||
&[for="__drawer"] {
|
||||
color: var(--md-primary-bg-color);
|
||||
font-weight: 700;
|
||||
color: var(--md-primary-bg-color);
|
||||
background-color: var(--md-primary-fg-color);
|
||||
}
|
||||
|
||||
// Button with logo, pointing to `config.site_url`
|
||||
.md-logo {
|
||||
position: absolute;
|
||||
top: px2rem(4px);
|
||||
inset-inline: px2rem(4px);
|
||||
top: px2rem(4px);
|
||||
display: block;
|
||||
margin: px2rem(4px);
|
||||
padding: px2rem(8px);
|
||||
margin: px2rem(4px);
|
||||
}
|
||||
}
|
||||
|
||||
@ -280,8 +280,8 @@
|
||||
|
||||
// Navigation link
|
||||
.md-nav__link {
|
||||
margin-top: 0;
|
||||
padding: px2rem(12px) px2rem(16px);
|
||||
margin-top: 0;
|
||||
|
||||
// Navigation icon
|
||||
.md-nav__icon {
|
||||
@ -295,12 +295,12 @@
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
background-color: currentcolor;
|
||||
mask-image: var(--md-nav-icon--next);
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -353,11 +353,11 @@
|
||||
// Toggle for nested navigation
|
||||
&__toggle ~ & {
|
||||
display: flex;
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
transition:
|
||||
transform 250ms cubic-bezier(0.8, 0, 0.6, 1),
|
||||
opacity 125ms 50ms;
|
||||
transform: translateX(100%);
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
@ -367,11 +367,11 @@
|
||||
|
||||
// Show nested navigation when toggle is active
|
||||
&__toggle:checked ~ & {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
transition:
|
||||
transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
opacity 125ms 125ms;
|
||||
transform: translateX(0);
|
||||
|
||||
// Navigation list
|
||||
> .md-nav__list {
|
||||
@ -562,14 +562,14 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: px2rem(-2px);
|
||||
content: "";
|
||||
background-color: currentcolor;
|
||||
border-radius: 100%;
|
||||
transition: transform 250ms;
|
||||
mask-image: var(--md-nav-icon--next);
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
border-radius: 100%;
|
||||
transition: transform 250ms;
|
||||
content: "";
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
@ -607,8 +607,8 @@
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
margin-top: 0;
|
||||
padding: 0 px2rem(12px);
|
||||
margin-top: 0;
|
||||
font-weight: 700;
|
||||
background: var(--md-default-bg-color);
|
||||
box-shadow: 0 0 px2rem(8px) px2rem(8px) var(--md-default-bg-color);
|
||||
|
||||
@ -54,17 +54,17 @@
|
||||
@include break-to-device(tablet portrait) {
|
||||
position: absolute;
|
||||
top: px2rem(-20px);
|
||||
inset-inline-start: px2rem(-44px);
|
||||
width: px2rem(40px);
|
||||
height: px2rem(40px);
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
background-color: var(--md-default-bg-color);
|
||||
border-radius: px2rem(20px);
|
||||
transform-origin: center;
|
||||
transition:
|
||||
transform 300ms 100ms,
|
||||
opacity 200ms 200ms;
|
||||
pointer-events: none;
|
||||
transform-origin: center;
|
||||
inset-inline-start: px2rem(-44px);
|
||||
|
||||
// Show overlay when search is active
|
||||
[data-md-toggle="search"]:checked ~ .md-header & {
|
||||
@ -79,15 +79,15 @@
|
||||
@include break-from-device(tablet landscape) {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: hsla(0, 0%, 0%, 0.54);
|
||||
cursor: pointer;
|
||||
background-color: hsla(0, 0%, 0%, 0.54);
|
||||
transition:
|
||||
width 0ms 250ms,
|
||||
height 0ms 250ms,
|
||||
opacity 250ms;
|
||||
inset-inline-start: 0;
|
||||
|
||||
// Show overlay when search is active
|
||||
[data-md-toggle="search"]:checked ~ .md-header & {
|
||||
@ -134,18 +134,18 @@
|
||||
@include break-to-device(tablet portrait) {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
z-index: 2;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transform: translateX(5%);
|
||||
opacity: 0;
|
||||
transition:
|
||||
width 0ms 300ms,
|
||||
height 0ms 300ms,
|
||||
transform 150ms 150ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
opacity 150ms 150ms;
|
||||
transform: translateX(5%);
|
||||
inset-inline-start: 0;
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
@ -156,13 +156,13 @@
|
||||
[data-md-toggle="search"]:checked ~ .md-header & {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
transition:
|
||||
width 0ms 0ms,
|
||||
height 0ms 0ms,
|
||||
transform 150ms 150ms cubic-bezier(0.1, 0.7, 0.1, 1),
|
||||
opacity 150ms 150ms;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@ -259,8 +259,8 @@
|
||||
// [tablet landscape +]: Header-embedded search
|
||||
@include break-from-device(tablet landscape) {
|
||||
padding-inline-start: px2rem(44px);
|
||||
color: inherit;
|
||||
font-size: px2rem(16px);
|
||||
color: inherit;
|
||||
|
||||
// Search placeholder
|
||||
&::placeholder {
|
||||
@ -357,11 +357,11 @@
|
||||
> .md-icon {
|
||||
margin-inline-start: px2rem(4px);
|
||||
color: var(--md-default-fg-color--light);
|
||||
transform: scale(0.75);
|
||||
opacity: 0;
|
||||
transition:
|
||||
transform 150ms cubic-bezier(0.1, 0.7, 0.1, 1),
|
||||
opacity 150ms;
|
||||
transform: scale(0.75);
|
||||
|
||||
// Hide outline for pointer devices
|
||||
&:not(.focus-visible) {
|
||||
@ -372,9 +372,9 @@
|
||||
// Show buttons when search is active and input non-empty
|
||||
[data-md-toggle="search"]:checked ~ .md-header
|
||||
.md-search__input:valid ~ & {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
pointer-events: initial;
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
|
||||
// Search focus icon
|
||||
&:hover {
|
||||
@ -393,8 +393,8 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-inline: px2rem(72px) px2rem(44px);
|
||||
color: var(--md-default-fg-color--lighter);
|
||||
font-size: px2rem(18px);
|
||||
color: var(--md-default-fg-color--lighter);
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
transition: opacity 50ms;
|
||||
@ -445,13 +445,13 @@
|
||||
&__scrollwrap {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
background-color: var(--md-default-bg-color);
|
||||
// Hack: promote to own layer to reduce jitter
|
||||
backface-visibility: hidden;
|
||||
// Hack: Chrome 88+ has weird overscroll behavior. Overall, scroll snapping
|
||||
// seems to be something that is not ready for prime time on some browsers.
|
||||
// scroll-snap-type: y mandatory;
|
||||
touch-action: pan-y;
|
||||
background-color: var(--md-default-bg-color);
|
||||
// Hack: promote to own layer to reduce jitter
|
||||
backface-visibility: hidden;
|
||||
|
||||
// Mitigiate excessive repaints on non-retina devices
|
||||
@media (max-resolution: 1dppx) {
|
||||
@ -511,9 +511,9 @@
|
||||
// Search result metadata
|
||||
&__meta {
|
||||
padding: 0 px2rem(16px);
|
||||
color: var(--md-default-fg-color--light);
|
||||
font-size: px2rem(12.8px);
|
||||
line-height: px2rem(36px);
|
||||
color: var(--md-default-fg-color--light);
|
||||
background-color: var(--md-default-fg-color--lightest);
|
||||
scroll-snap-align: start;
|
||||
|
||||
@ -525,8 +525,8 @@
|
||||
|
||||
// Search result list
|
||||
&__list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
// Hack: omit accidental text selection on fast toggle of more button
|
||||
user-select: none;
|
||||
@ -566,8 +566,8 @@
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
scroll-snap-align: start;
|
||||
|
||||
// Hide native details marker
|
||||
@ -584,8 +584,8 @@
|
||||
// Search result more button
|
||||
> div {
|
||||
padding: px2em(12px) px2rem(16px);
|
||||
color: var(--md-typeset-a-color);
|
||||
font-size: px2rem(12.8px);
|
||||
color: var(--md-typeset-a-color);
|
||||
transition:
|
||||
color 250ms,
|
||||
background-color 250ms;
|
||||
@ -640,12 +640,12 @@
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
background-color: currentcolor;
|
||||
mask-image: var(--md-search-result-icon);
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
content: "";
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
@ -656,17 +656,17 @@
|
||||
|
||||
// Typesetted content
|
||||
.md-typeset {
|
||||
color: var(--md-default-fg-color--light);
|
||||
font-size: px2rem(12.8px);
|
||||
line-height: 1.6;
|
||||
color: var(--md-default-fg-color--light);
|
||||
|
||||
// Search result article title
|
||||
h1 {
|
||||
margin: px2rem(11px) 0;
|
||||
color: var(--md-default-fg-color);
|
||||
font-weight: 400;
|
||||
font-size: px2rem(16px);
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
color: var(--md-default-fg-color);
|
||||
|
||||
// Search term highlighting
|
||||
mark {
|
||||
@ -677,10 +677,10 @@
|
||||
// Search result section title
|
||||
h2 {
|
||||
margin: 0.5em 0;
|
||||
color: var(--md-default-fg-color);
|
||||
font-weight: 700;
|
||||
font-size: px2rem(12.8px);
|
||||
font-weight: 700;
|
||||
line-height: 1.6;
|
||||
color: var(--md-default-fg-color);
|
||||
|
||||
// Search term highlighting
|
||||
mark {
|
||||
@ -693,9 +693,9 @@
|
||||
&__terms {
|
||||
display: block;
|
||||
margin: 0.5em 0;
|
||||
color: var(--md-default-fg-color);
|
||||
font-size: px2rem(12.8px);
|
||||
font-style: italic;
|
||||
color: var(--md-default-fg-color);
|
||||
}
|
||||
|
||||
// Search term highlighting
|
||||
|
||||
@ -40,22 +40,22 @@
|
||||
background-color: var(--md-default-bg-color);
|
||||
border-radius: px2rem(2px);
|
||||
box-shadow: var(--md-shadow-z2);
|
||||
transform: translate3d(-50%, px2rem(6px), 0);
|
||||
opacity: 0;
|
||||
transition:
|
||||
transform 250ms 375ms,
|
||||
opacity 250ms 250ms,
|
||||
max-height 0ms 500ms;
|
||||
transform: translate3d(-50%, px2rem(6px), 0);
|
||||
|
||||
// Selection bubble on parent focus/hover
|
||||
.md-select:is(:focus-within, :hover) & {
|
||||
max-height: px2rem(200px);
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
opacity: 1;
|
||||
transition:
|
||||
transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1),
|
||||
opacity 250ms,
|
||||
max-height 0ms;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
}
|
||||
|
||||
// Selection bubble handle
|
||||
@ -67,18 +67,18 @@
|
||||
height: 0;
|
||||
margin-top: px2rem(-4px);
|
||||
margin-left: px2rem(-4px);
|
||||
content: "";
|
||||
border: px2rem(4px) solid transparent;
|
||||
border-top: 0;
|
||||
border-bottom-color: var(--md-default-bg-color);
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
// Selection list
|
||||
&__list {
|
||||
max-height: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
font-size: px2rem(16px);
|
||||
list-style-type: none;
|
||||
@ -95,8 +95,8 @@
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding-inline: px2rem(12px) px2rem(24px);
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition:
|
||||
background-color 250ms,
|
||||
color 250ms;
|
||||
|
||||
@ -45,16 +45,16 @@
|
||||
@include break-to-device(tablet) {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
inset-inline-start: px2rem(-242px);
|
||||
z-index: 5;
|
||||
display: block;
|
||||
width: px2rem(242px);
|
||||
height: 100%;
|
||||
background-color: var(--md-default-bg-color);
|
||||
transform: translateX(0);
|
||||
transition:
|
||||
transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
box-shadow 250ms;
|
||||
transform: translateX(0);
|
||||
inset-inline-start: px2rem(-242px);
|
||||
|
||||
// Show sidebar when drawer is active
|
||||
[data-md-toggle="drawer"]:checked ~ .md-container & {
|
||||
|
||||
@ -38,8 +38,8 @@
|
||||
// Show repository fact
|
||||
@keyframes fact {
|
||||
0% {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
50% {
|
||||
@ -47,8 +47,8 @@
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0%);
|
||||
opacity: 1;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -91,14 +91,14 @@
|
||||
|
||||
// Align with margin only (as opposed to normal button alignment)
|
||||
svg {
|
||||
margin-top: px2rem(12px);
|
||||
margin-inline-start: px2rem(12px);
|
||||
margin-top: px2rem(12px);
|
||||
}
|
||||
|
||||
// Adjust spacing if icon is present
|
||||
+ .md-source__repository {
|
||||
margin-inline-start: px2rem(-40px);
|
||||
padding-inline-start: px2rem(40px);
|
||||
margin-inline-start: px2rem(-40px);
|
||||
}
|
||||
}
|
||||
|
||||
@ -117,8 +117,8 @@
|
||||
display: flex;
|
||||
gap: px2rem(8px);
|
||||
width: 100%;
|
||||
margin: px2rem(2px) 0 0;
|
||||
padding: 0;
|
||||
margin: px2rem(2px) 0 0;
|
||||
overflow: hidden;
|
||||
font-size: px2rem(11px);
|
||||
list-style-type: none;
|
||||
@ -147,11 +147,11 @@
|
||||
height: px2rem(12px);
|
||||
margin-inline-end: px2rem(2px);
|
||||
vertical-align: text-top;
|
||||
content: "";
|
||||
background-color: currentcolor;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
content: "";
|
||||
}
|
||||
|
||||
// Adjust spacing for 2nd+ fact
|
||||
|
||||
@ -32,8 +32,8 @@
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
color: var(--md-primary-bg-color);
|
||||
line-height: 1.3;
|
||||
color: var(--md-primary-bg-color);
|
||||
background-color: var(--md-primary-fg-color);
|
||||
|
||||
// [print]: Hide tabs
|
||||
@ -53,9 +53,9 @@
|
||||
|
||||
// Navigation tabs list
|
||||
&__list {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-inline-start: px2rem(4px);
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
white-space: nowrap;
|
||||
list-style: none;
|
||||
@ -111,11 +111,11 @@
|
||||
// Hide tabs upon scrolling - disable transition to minimizes repaints
|
||||
// while scrolling down, while scrolling up seems to be okay
|
||||
.md-tabs[hidden] & {
|
||||
transform: translateY(50%);
|
||||
opacity: 0;
|
||||
transition:
|
||||
transform 0ms 100ms,
|
||||
opacity 100ms;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -43,11 +43,11 @@
|
||||
// Tag
|
||||
.md-tag {
|
||||
display: inline-block;
|
||||
padding: px2em(4px, 12.8px) px2em(12px, 12.8px);
|
||||
margin-inline-end: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
padding: px2em(4px, 12.8px) px2em(12px, 12.8px);
|
||||
font-weight: 700;
|
||||
font-size: px2rem(12.8px);
|
||||
font-weight: 700;
|
||||
line-height: 1.6;
|
||||
letter-spacing: initial;
|
||||
vertical-align: middle;
|
||||
@ -86,13 +86,13 @@
|
||||
height: 1.2em;
|
||||
margin-right: 0.4em;
|
||||
vertical-align: text-bottom;
|
||||
content: "";
|
||||
background-color: var(--md-default-fg-color--lighter);
|
||||
transition: background-color 125ms;
|
||||
mask-image: var(--md-tag-icon);
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
transition: background-color 125ms;
|
||||
content: "";
|
||||
}
|
||||
|
||||
// Linked tag on focus/hover
|
||||
|
||||
@ -71,29 +71,29 @@
|
||||
z-index: 0;
|
||||
width: var(--md-tooltip-width);
|
||||
max-width: calc(100vw - 2 * #{px2rem(16px)});
|
||||
color: var(--md-default-fg-color);
|
||||
font-family: var(--md-text-font-family);
|
||||
color: var(--md-default-fg-color);
|
||||
background-color: var(--md-default-bg-color);
|
||||
border-radius: px2rem(2px);
|
||||
box-shadow: var(--md-shadow-z2);
|
||||
transform: translateY(px2rem(-8px));
|
||||
// Hack: promote to own layer to reduce jitter
|
||||
backface-visibility: hidden;
|
||||
opacity: 0;
|
||||
transition:
|
||||
transform 0ms 250ms,
|
||||
opacity 250ms,
|
||||
z-index 250ms;
|
||||
transform: translateY(px2rem(-8px));
|
||||
// Hack: promote to own layer to reduce jitter
|
||||
backface-visibility: hidden;
|
||||
|
||||
// Active tooltip
|
||||
&--active {
|
||||
z-index: 2;
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
transition:
|
||||
transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1),
|
||||
opacity 250ms,
|
||||
z-index 0ms;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
// Show outline on target and for keyboard devices
|
||||
@ -144,11 +144,11 @@
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
margin: 0 1ch;
|
||||
font-size: px2em(13.6px, 16px);
|
||||
font-family: var(--md-code-font-family);
|
||||
outline: none;
|
||||
font-size: px2em(13.6px, 16px);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
outline: none;
|
||||
|
||||
// Hack: increase specificity to override default for anchors
|
||||
.md-annotation & {
|
||||
@ -175,14 +175,14 @@
|
||||
width: calc(100% + 1.2ch);
|
||||
width: max(2.2ch, 100% + 1.2ch);
|
||||
height: 2.2ch;
|
||||
margin: 0 -0.4ch;
|
||||
padding: 0 0.4ch;
|
||||
margin: 0 -0.4ch;
|
||||
content: "";
|
||||
background-color: var(--md-default-fg-color--lighter);
|
||||
border-radius: 2ch;
|
||||
transition:
|
||||
color 250ms,
|
||||
background-color 250ms;
|
||||
content: "";
|
||||
|
||||
// [reduced motion]: Disable animation
|
||||
@media not all and (prefers-reduced-motion) {
|
||||
@ -204,8 +204,8 @@
|
||||
|
||||
// Annotation index in code block
|
||||
code & {
|
||||
font-size: inherit;
|
||||
font-family: var(--md-code-font-family);
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
// Annotation index for active tooltip or on hover
|
||||
@ -235,9 +235,9 @@
|
||||
display: inline-block;
|
||||
padding-bottom: 0.1em;
|
||||
vertical-align: 0.065em;
|
||||
transform: scale(1.15);
|
||||
transition: transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1);
|
||||
content: attr(data-md-annotation-id);
|
||||
transition: transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1);
|
||||
transform: scale(1.15);
|
||||
|
||||
// [not print]: if we're not in print mode, show a `+` sign instead of
|
||||
// the original numbers, as context is already given by the position.
|
||||
|
||||
@ -30,20 +30,20 @@
|
||||
top: px2rem(48px + 16px);
|
||||
z-index: 2;
|
||||
display: block;
|
||||
margin-inline-start: 50%;
|
||||
padding: px2rem(8px) px2rem(16px);
|
||||
color: var(--md-default-fg-color--light);
|
||||
margin-inline-start: 50%;
|
||||
font-size: px2rem(14px);
|
||||
color: var(--md-default-fg-color--light);
|
||||
background-color: var(--md-default-bg-color);
|
||||
border-radius: px2rem(32px);
|
||||
outline: none;
|
||||
box-shadow: var(--md-shadow-z2);
|
||||
transform: translate(-50%, 0);
|
||||
transition:
|
||||
color 125ms,
|
||||
background-color 125ms,
|
||||
transform 125ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
opacity 125ms;
|
||||
transform: translate(-50%, 0);
|
||||
|
||||
// [print]: Hide back-to-top button
|
||||
@media print {
|
||||
@ -57,10 +57,10 @@
|
||||
|
||||
// Back-to-top button is hidden
|
||||
&[hidden] {
|
||||
transform: translate(-50%, px2rem(4px));
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition-duration: 0ms;
|
||||
pointer-events: none;
|
||||
transform: translate(-50%, px2rem(4px));
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
|
||||
@ -58,8 +58,8 @@
|
||||
top: px2rem(1px);
|
||||
margin-inline: px2rem(28px) px2rem(8px);
|
||||
color: inherit;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
|
||||
// Version selection icon
|
||||
&::after {
|
||||
@ -67,12 +67,12 @@
|
||||
width: px2rem(8px);
|
||||
height: px2rem(12px);
|
||||
margin-inline-start: px2rem(8px);
|
||||
content: "";
|
||||
background-color: currentcolor;
|
||||
mask-image: var(--md-version-icon);
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
@ -82,8 +82,8 @@
|
||||
top: px2rem(3px);
|
||||
z-index: 3;
|
||||
max-height: 0;
|
||||
margin: px2rem(4px) px2rem(16px);
|
||||
padding: 0;
|
||||
margin: px2rem(4px) px2rem(16px);
|
||||
overflow: auto;
|
||||
color: var(--md-default-fg-color);
|
||||
list-style-type: none;
|
||||
@ -131,8 +131,8 @@
|
||||
width: 100%;
|
||||
padding-inline: px2rem(12px) px2rem(24px);
|
||||
white-space: nowrap;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition:
|
||||
color 250ms,
|
||||
background-color 250ms;
|
||||
|
||||
@ -64,15 +64,15 @@ $admonitions: (
|
||||
// rendered as collapsible admonitions with summary elements as titles.
|
||||
.admonition {
|
||||
display: flow-root;
|
||||
margin: px2em(20px, 12.8px) 0;
|
||||
padding: 0 px2rem(12px);
|
||||
color: var(--md-admonition-fg-color);
|
||||
margin: px2em(20px, 12.8px) 0;
|
||||
font-size: px2rem(12.8px);
|
||||
page-break-inside: avoid;
|
||||
color: var(--md-admonition-fg-color);
|
||||
background-color: var(--md-admonition-bg-color);
|
||||
border: px2rem(1px) solid $clr-blue-a200;
|
||||
border-radius: px2rem(4px);
|
||||
box-shadow: var(--md-shadow-z1);
|
||||
page-break-inside: avoid;
|
||||
|
||||
// [print]: Omit shadow as it may lead to rendering errors
|
||||
@media print {
|
||||
@ -115,10 +115,10 @@ $admonitions: (
|
||||
// Admonition title
|
||||
.admonition-title {
|
||||
position: relative;
|
||||
margin-block: 0;
|
||||
margin-inline: px2rem(-12px);
|
||||
padding-block: px2rem(8px);
|
||||
padding-inline: px2rem(40px) px2rem(12px);
|
||||
margin-block: 0;
|
||||
margin-inline: px2rem(-12px);
|
||||
font-weight: 700;
|
||||
background-color: color.adjust($clr-blue-a200, $alpha: -0.9);
|
||||
border: none;
|
||||
@ -135,15 +135,15 @@ $admonitions: (
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: px2em(10px);
|
||||
inset-inline-start: px2rem(12px);
|
||||
width: px2rem(20px);
|
||||
height: px2rem(20px);
|
||||
content: "";
|
||||
background-color: $clr-blue-a200;
|
||||
inset-inline-start: px2rem(12px);
|
||||
mask-image: var(--md-admonition-icon--note);
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
content: "";
|
||||
}
|
||||
|
||||
// Inline code block
|
||||
|
||||
@ -36,8 +36,8 @@
|
||||
|
||||
// Footnote container
|
||||
.footnote {
|
||||
color: var(--md-default-fg-color--light);
|
||||
font-size: px2rem(12.8px);
|
||||
color: var(--md-default-fg-color--light);
|
||||
|
||||
// Footnote list - omit left indentation
|
||||
> ol {
|
||||
@ -55,15 +55,15 @@
|
||||
|
||||
// Show backreferences on footnote focus without transition
|
||||
&:focus-within .footnote-backref {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
transition: none;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
// Show backreferences on footnote hover/target
|
||||
&:is(:hover, :target) .footnote-backref {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
// Adjust spacing on first child
|
||||
@ -76,8 +76,8 @@
|
||||
|
||||
// Footnote reference
|
||||
.footnote-ref {
|
||||
font-weight: 700;
|
||||
font-size: px2em(12px, 16px);
|
||||
font-weight: 700;
|
||||
|
||||
// Hack: increase specificity to override default
|
||||
html & {
|
||||
@ -93,22 +93,22 @@
|
||||
// Footnote backreference
|
||||
.footnote-backref {
|
||||
display: inline-block;
|
||||
color: var(--md-typeset-a-color);
|
||||
// Hack: omit Unicode arrow for replacement with icon
|
||||
font-size: 0;
|
||||
color: var(--md-typeset-a-color);
|
||||
vertical-align: text-bottom;
|
||||
transform: translateX(px2rem(5px));
|
||||
opacity: 0;
|
||||
transition:
|
||||
color 250ms,
|
||||
transform 250ms 250ms,
|
||||
opacity 125ms 250ms;
|
||||
transform: translateX(px2rem(5px));
|
||||
|
||||
// [print]: Show footnote backreferences
|
||||
@media print {
|
||||
color: var(--md-typeset-a-color);
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
@ -126,12 +126,12 @@
|
||||
display: inline-block;
|
||||
width: px2rem(16px);
|
||||
height: px2rem(16px);
|
||||
content: "";
|
||||
background-color: currentcolor;
|
||||
mask-image: var(--md-footnotes-icon);
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
content: "";
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
|
||||
@ -39,8 +39,8 @@
|
||||
// Arithmatex content
|
||||
> * {
|
||||
width: min-content;
|
||||
margin-inline: auto !important; // stylelint-disable-line
|
||||
padding: 0 px2rem(16px);
|
||||
margin-inline: auto !important; // stylelint-disable-line
|
||||
touch-action: auto;
|
||||
|
||||
// MathJax container - see https://bit.ly/3HR8YJ5
|
||||
|
||||
@ -58,8 +58,8 @@
|
||||
// Critic block
|
||||
.critic.block {
|
||||
display: block;
|
||||
margin: 1em 0;
|
||||
padding-inline: px2rem(16px);
|
||||
margin: 1em 0;
|
||||
overflow: auto;
|
||||
box-shadow: none;
|
||||
|
||||
|
||||
@ -69,9 +69,9 @@
|
||||
display: block;
|
||||
min-height: px2rem(20px);
|
||||
padding-inline-end: px2rem(36px);
|
||||
cursor: pointer;
|
||||
border-start-start-radius: px2rem(2px);
|
||||
border-start-end-radius: px2rem(2px);
|
||||
cursor: pointer;
|
||||
|
||||
// Show outline for keyboard devices
|
||||
&.focus-visible {
|
||||
@ -89,17 +89,17 @@
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: px2em(10px);
|
||||
inset-inline-end: px2rem(8px);
|
||||
width: px2rem(20px);
|
||||
height: px2rem(20px);
|
||||
content: "";
|
||||
background-color: currentcolor;
|
||||
transition: transform 250ms;
|
||||
transform: rotate(0deg);
|
||||
inset-inline-end: px2rem(8px);
|
||||
mask-image: var(--md-details-icon);
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
transform: rotate(0deg);
|
||||
transition: transform 250ms;
|
||||
content: "";
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
|
||||
@ -143,8 +143,8 @@
|
||||
// .gd = Diff, delete
|
||||
// .gi = Diff, insert
|
||||
:is(.gd, .gi) {
|
||||
margin: 0 px2em(-2px);
|
||||
padding: 0 px2em(2px);
|
||||
margin: 0 px2em(-2px);
|
||||
border-radius: px2rem(2px);
|
||||
}
|
||||
|
||||
@ -159,8 +159,8 @@
|
||||
// Highlighted line
|
||||
.hll {
|
||||
display: block;
|
||||
margin: 0 px2em(-16px, 13.6px);
|
||||
padding: 0 px2em(16px, 13.6px);
|
||||
margin: 0 px2em(-16px, 13.6px);
|
||||
background-color: var(--md-code-hl-color);
|
||||
}
|
||||
|
||||
@ -168,10 +168,10 @@
|
||||
span.filename {
|
||||
position: relative;
|
||||
display: flow-root;
|
||||
margin-top: 1em;
|
||||
padding: px2em(9px, 13.6px) px2em(16px, 13.6px);
|
||||
font-weight: 700;
|
||||
margin-top: 1em;
|
||||
font-size: px2em(13.6px);
|
||||
font-weight: 700;
|
||||
background-color: var(--md-code-bg-color);
|
||||
border-bottom: px2rem(1px) solid var(--md-default-fg-color--lightest);
|
||||
border-top-left-radius: px2rem(2px);
|
||||
@ -197,14 +197,14 @@
|
||||
// don't overlay line numbers, as active annotations have a `z-index` of 2.
|
||||
z-index: 3;
|
||||
float: left;
|
||||
padding-left: px2em(16px, 13.6px);
|
||||
margin-right: px2em(16px, 13.6px);
|
||||
margin-left: px2em(-16px, 13.6px);
|
||||
padding-left: px2em(16px, 13.6px);
|
||||
color: var(--md-default-fg-color--light);
|
||||
background-color: var(--md-code-bg-color);
|
||||
box-shadow: px2rem(-1px) 0 var(--md-default-fg-color--lightest) inset;
|
||||
content: attr(data-linenos);
|
||||
user-select: none;
|
||||
background-color: var(--md-code-bg-color);
|
||||
box-shadow: px2rem(-1px) 0 var(--md-default-fg-color--lightest) inset;
|
||||
}
|
||||
|
||||
// Code block line anchors - Chrome and Safari seem to have a strange bug
|
||||
@ -279,10 +279,10 @@
|
||||
padding: px2em(10.5px, 13.6px) px2em(16px, 13.6px);
|
||||
padding-right: 0;
|
||||
font-size: px2em(13.6px);
|
||||
user-select: none;
|
||||
background-color: var(--md-code-bg-color);
|
||||
border-top-left-radius: px2rem(2px);
|
||||
border-bottom-left-radius: px2rem(2px);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
// Code block line numbers container
|
||||
@ -329,8 +329,8 @@
|
||||
|
||||
// Code block result container
|
||||
.highlight + .result {
|
||||
margin-top: calc(-1em + #{px2em(-2px)});
|
||||
padding: 0 px2em(16px);
|
||||
margin-top: calc(-1em + #{px2em(-2px)});
|
||||
overflow: visible;
|
||||
border: px2rem(1px) solid var(--md-code-bg-color);
|
||||
border-top-width: px2rem(2px);
|
||||
|
||||
@ -114,13 +114,13 @@
|
||||
display: block;
|
||||
width: var(--md-indicator-width);
|
||||
height: 2px;
|
||||
content: "";
|
||||
background: var(--md-accent-fg-color);
|
||||
transform: translateX(var(--md-indicator-x));
|
||||
transition:
|
||||
width 225ms,
|
||||
transform 250ms;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
content: "";
|
||||
transform: translateX(var(--md-indicator-x));
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -135,13 +135,13 @@
|
||||
flex-shrink: 0;
|
||||
width: auto;
|
||||
padding: px2em(10px, 12.8px) 1.25em px2em(8px, 12.8px);
|
||||
color: var(--md-default-fg-color--light);
|
||||
font-weight: 700;
|
||||
font-size: px2rem(12.8px);
|
||||
font-weight: 700;
|
||||
color: var(--md-default-fg-color--light);
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
border-bottom: px2rem(2px) solid transparent;
|
||||
border-radius: px2rem(2px) px2rem(2px) 0 0;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background-color 250ms,
|
||||
color 250ms;
|
||||
@ -255,10 +255,10 @@
|
||||
height: px2rem(18px);
|
||||
margin-top: px2rem(2px);
|
||||
color: var(--md-default-fg-color--light);
|
||||
border-radius: 100%;
|
||||
cursor: pointer;
|
||||
transition: background-color 250ms;
|
||||
pointer-events: initial;
|
||||
cursor: pointer;
|
||||
border-radius: 100%;
|
||||
transition: background-color 250ms;
|
||||
|
||||
// Tabbed button on hover
|
||||
&:hover {
|
||||
@ -271,6 +271,7 @@
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
background-color: currentcolor;
|
||||
transition:
|
||||
background-color 250ms,
|
||||
@ -279,7 +280,6 @@
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
@ -290,6 +290,7 @@
|
||||
justify-content: start;
|
||||
width: px2rem(24px);
|
||||
height: px2rem(38px);
|
||||
pointer-events: none;
|
||||
background:
|
||||
linear-gradient(
|
||||
to right,
|
||||
@ -297,7 +298,6 @@
|
||||
transparent
|
||||
);
|
||||
transition: opacity 125ms;
|
||||
pointer-events: none;
|
||||
|
||||
// Adjust for right-to-left languages
|
||||
[dir="rtl"] & {
|
||||
@ -338,8 +338,8 @@
|
||||
// Top-level tabbed labels
|
||||
.md-content__inner > .tabbed-set .tabbed-labels {
|
||||
max-width: 100vw;
|
||||
margin: 0 px2rem(-16px);
|
||||
padding-inline-start: px2rem(16px);
|
||||
margin: 0 px2rem(-16px);
|
||||
scroll-padding-inline-start: px2rem(16px);
|
||||
|
||||
// Hack: some browsers ignore the right padding on flex containers,
|
||||
@ -352,15 +352,15 @@
|
||||
// Tabbed control previous
|
||||
~ .tabbed-control--prev {
|
||||
width: px2rem(40px);
|
||||
margin-inline-start: px2rem(-16px);
|
||||
padding-inline-start: px2rem(16px);
|
||||
margin-inline-start: px2rem(-16px);
|
||||
}
|
||||
|
||||
// Tabbed control next
|
||||
~ .tabbed-control--next {
|
||||
width: px2rem(40px);
|
||||
margin-inline-end: px2rem(-16px);
|
||||
padding-inline-end: px2rem(16px);
|
||||
margin-inline-end: px2rem(-16px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -61,15 +61,15 @@
|
||||
.task-list-indicator::before {
|
||||
position: absolute;
|
||||
top: 0.15em;
|
||||
inset-inline-start: px2em(-24px);
|
||||
width: px2em(20px);
|
||||
height: px2em(20px);
|
||||
content: "";
|
||||
background-color: var(--md-default-fg-color--lightest);
|
||||
inset-inline-start: px2em(-24px);
|
||||
mask-image: var(--md-tasklist-icon);
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
content: "";
|
||||
}
|
||||
|
||||
// Tasklist indicator in checked state
|
||||
|
||||
Loading…
Reference in New Issue
Block a user