vuepress-theme-plume
Version:
A Blog&Document Theme for VuePress 2.0
290 lines (244 loc) • 4.86 kB
CSS
@media (prefers-reduced-motion: reduce) {
*,
::before,
::after {
background-attachment: initial ;
transition-delay: 0s ;
transition-duration: 0s ;
animation-duration: 1ms ;
animation-delay: -1ms ;
animation-iteration-count: 1 ;
scroll-behavior: auto ;
}
}
:where(#app) *,
:where(#app) ::before,
:where(#app) ::after {
box-sizing: border-box;
}
html {
font-size: 16px;
line-height: 1.4;
scroll-padding-top: 48px;
}
@media (min-width: 960px) {
html {
scroll-padding-top: 112px;
}
}
@media (min-width: 1120px) {
html {
scroll-padding-top: 64px;
}
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-synthesis: style weight;
text-rendering: optimizelegibility;
-webkit-text-size-adjust: 100%;
}
html[data-theme="dark"] {
color-scheme: dark;
}
body {
width: 100%;
min-width: 320px;
min-height: 100vh;
margin: 0;
font-family: var(--vp-font-family-base);
font-weight: 400;
line-height: 24px;
background-color: var(--vp-c-bg);
direction: ltr;
}
html,
body {
color: var(--vp-c-text-1);
transition: var(--vp-t-color);
transition-property: color, background-color;
scrollbar-width: thin;
}
html.bg-gray body {
background-color: var(--vp-c-bg-alt);
}
main {
display: block;
}
:where(#app) h1,
:where(#app) h2,
:where(#app) h3,
:where(#app) h4,
:where(#app) h5,
:where(#app) h6 {
margin: 0;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
:where(#app) p {
margin: 0;
}
:where(#app) strong,
:where(#app) b {
font-weight: 600;
}
/**
* Avoid 300ms click delay on touch devices that support the `touch-action`
* CSS property.
*
* 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
* `<meta name="viewport" content="width=device-width">` is present.
* However, they DO support removing the click delay via
* `touch-action: manipulation`.
*
* See:
* - http://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
* - http://caniuse.com/#feat=css-touch-action
* - http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
*/
a,
area,
button,
[role="button"],
input,
label,
select,
summary,
textarea {
touch-action: manipulation;
}
a {
color: inherit;
text-decoration: inherit;
}
:where(#app) ol,
:where(#app) ul {
padding: 0;
margin: 0;
list-style: none;
}
blockquote {
margin: 0;
}
:where(#app) pre,
:where(#app) code,
:where(#app) kbd,
:where(#app) samp {
font-family: var(--vp-font-family-mono);
}
:where(#app) img,
:where(#app) svg,
video,
canvas,
audio,
:where(#app) iframe,
embed,
object {
display: block;
}
figure {
margin: 0;
}
:where(#app) img,
:where(#app) video {
max-width: 100%;
height: auto;
}
:where(#app) button,
:where(#app) input,
:where(#app) optgroup,
:where(#app) select,
:where(#app) textarea {
padding: 0;
line-height: inherit;
color: inherit;
border: 0;
}
:where(#app) textarea {
resize: vertical;
}
:where(#app) select {
-webkit-appearance: none;
appearance: none;
}
:where(#app) input {
background-color: transparent;
}
:where(#app) button {
padding: 0;
font-family: inherit;
background-color: transparent;
background-image: none;
}
:where(#app) button:enabled,
:where(#app) [role="button"]:enabled {
cursor: pointer;
}
:where(#app) button:focus,
:where(#app) button:focus-visible {
outline: 1px dotted;
outline: 4px auto -webkit-focus-ring-color;
}
:where(#app) button:focus:not(:focus-visible) {
outline: none ;
}
:where(#app) input:focus,
:where(#app) textarea:focus,
:where(#app) select:focus {
outline: none;
}
:where(#app) table {
border-collapse: collapse;
}
:where(#app) input:-ms-input-placeholder,
:where(#app) textarea:-ms-input-placeholder {
color: var(--vp-c-text-3);
transition: color var(--vp-t-color);
}
:where(#app) input::-ms-input-placeholder,
:where(#app) textarea::-ms-input-placeholder {
color: var(--vp-c-text-3);
transition: color var(--vp-t-color);
}
:where(#app) input::placeholder,
:where(#app) textarea::placeholder {
color: var(--vp-c-text-3);
transition: color var(--vp-t-color);
}
:where(#app) input::-webkit-outer-spin-button,
:where(#app) input::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none;
}
:where(#app) input[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}
:where(#app) fieldset {
padding: 0;
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
li,
p {
overflow-wrap: break-word;
}
vite-error-overlay {
z-index: 9999;
}
mjx-container {
display: inline-block;
margin: auto 2px;
vertical-align: middle;
}
mjx-container > svg {
display: inline-block;
margin: auto;
}