feat: use `@layer __vitepress_base` to wrap the styles in base.css

pull/4905/head
hotdogc1017 1 month ago
parent e25f2285c0
commit 5d79c65ff4
No known key found for this signature in database
GPG Key ID: 7259EF8E842AA8B8

@ -1,251 +1,253 @@
@media (prefers-reduced-motion: reduce) { @layer __vitepress_base {
@media (prefers-reduced-motion: reduce) {
*,
::before,
::after {
animation-delay: -1ms !important;
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
background-attachment: initial !important;
scroll-behavior: auto !important;
transition-duration: 0s !important;
transition-delay: 0s !important;
}
}
*, *,
::before, ::before,
::after { ::after {
animation-delay: -1ms !important; box-sizing: border-box;
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
background-attachment: initial !important;
scroll-behavior: auto !important;
transition-duration: 0s !important;
transition-delay: 0s !important;
} }
}
*,
::before,
::after {
box-sizing: border-box;
}
html { html {
line-height: 1.4; line-height: 1.4;
font-size: 16px; font-size: 16px;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
} }
html.dark { html.dark {
color-scheme: dark; color-scheme: dark;
} }
body { body {
margin: 0; margin: 0;
width: 100%; width: 100%;
min-width: 320px; min-width: 320px;
min-height: 100vh; min-height: 100vh;
line-height: 24px; line-height: 24px;
font-family: var(--vp-font-family-base); font-family: var(--vp-font-family-base);
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
color: var(--vp-c-text-1); color: var(--vp-c-text-1);
background-color: var(--vp-c-bg); background-color: var(--vp-c-bg);
font-synthesis: style; font-synthesis: style;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
main { main {
display: block; display: block;
} }
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
margin: 0; margin: 0;
line-height: 24px; line-height: 24px;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
} }
p { p {
margin: 0; margin: 0;
} }
strong, strong,
b { b {
font-weight: 600; font-weight: 600;
} }
/** /**
* Avoid 300ms click delay on touch devices that support the `touch-action` * Avoid 300ms click delay on touch devices that support the `touch-action`
* CSS property. * CSS property.
* *
* In particular, unlike most other browsers, IE11+Edge on Windows 10 on * In particular, unlike most other browsers, IE11+Edge on Windows 10 on
* touch devices and IE Mobile 10-11 DON'T remove the click delay when * touch devices and IE Mobile 10-11 DON'T remove the click delay when
* `<meta name="viewport" content="width=device-width">` is present. * `<meta name="viewport" content="width=device-width">` is present.
* However, they DO support removing the click delay via * However, they DO support removing the click delay via
* `touch-action: manipulation`. * `touch-action: manipulation`.
* *
* See: * See:
* - http://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch * - http://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
* - http://caniuse.com/#feat=css-touch-action * - http://caniuse.com/#feat=css-touch-action
* - http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay * - http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
*/ */
a, a,
area, area,
button, button,
[role='button'], [role='button'],
input, input,
label, label,
select, select,
summary, summary,
textarea { textarea {
touch-action: manipulation; touch-action: manipulation;
} }
a { a {
color: inherit; color: inherit;
text-decoration: inherit; text-decoration: inherit;
} }
ol, ol,
ul { ul {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
blockquote { blockquote {
margin: 0; margin: 0;
} }
pre, pre,
code, code,
kbd, kbd,
samp { samp {
font-family: var(--vp-font-family-mono); font-family: var(--vp-font-family-mono);
} }
img, img,
svg, svg,
video, video,
canvas, canvas,
audio, audio,
iframe, iframe,
embed, embed,
object { object {
display: block; display: block;
} }
figure { figure {
margin: 0; margin: 0;
} }
img, img,
video { video {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
} }
button, button,
input, input,
optgroup, optgroup,
select, select,
textarea { textarea {
border: 0; border: 0;
padding: 0; padding: 0;
line-height: inherit; line-height: inherit;
color: inherit; color: inherit;
} }
button { button {
padding: 0; padding: 0;
font-family: inherit; font-family: inherit;
background-color: transparent; background-color: transparent;
background-image: none; background-image: none;
} }
button:enabled, button:enabled,
[role='button']:enabled { [role='button']:enabled {
cursor: pointer; cursor: pointer;
} }
button:focus, button:focus,
button:focus-visible { button:focus-visible {
outline: 1px dotted; outline: 1px dotted;
outline: 4px auto -webkit-focus-ring-color; outline: 4px auto -webkit-focus-ring-color;
} }
button:focus:not(:focus-visible) { button:focus:not(:focus-visible) {
outline: none !important; outline: none !important;
} }
input:focus, input:focus,
textarea:focus, textarea:focus,
select:focus { select:focus {
outline: none; outline: none;
} }
table { table {
border-collapse: collapse; border-collapse: collapse;
} }
input { input {
background-color: transparent; background-color: transparent;
} }
input:-ms-input-placeholder, input:-ms-input-placeholder,
textarea:-ms-input-placeholder { textarea:-ms-input-placeholder {
color: var(--vp-c-text-3); color: var(--vp-c-text-3);
} }
input::-ms-input-placeholder, input::-ms-input-placeholder,
textarea::-ms-input-placeholder { textarea::-ms-input-placeholder {
color: var(--vp-c-text-3); color: var(--vp-c-text-3);
} }
input::placeholder, input::placeholder,
textarea::placeholder { textarea::placeholder {
color: var(--vp-c-text-3); color: var(--vp-c-text-3);
} }
input::-webkit-outer-spin-button, input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { input::-webkit-inner-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
margin: 0; margin: 0;
} }
input[type='number'] { input[type='number'] {
-moz-appearance: textfield; -moz-appearance: textfield;
} }
textarea { textarea {
resize: vertical; resize: vertical;
} }
select { select {
-webkit-appearance: none; -webkit-appearance: none;
} }
fieldset { fieldset {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6, h6,
li, li,
p { p {
overflow-wrap: break-word; overflow-wrap: break-word;
} }
vite-error-overlay { vite-error-overlay {
z-index: 9999; z-index: 9999;
} }
mjx-container { mjx-container {
overflow-x: auto; overflow-x: auto;
} }
mjx-container > svg { mjx-container > svg {
display: inline-block; display: inline-block;
margin: auto; margin: auto;
}
} }

Loading…
Cancel
Save