fix(style): add backdrop to code copy button (#185)

* fix(style): add backdrop to code copy button

* chore: run build:css
This commit is contained in:
Xin 2023-11-02 18:43:50 -04:00 committed by GitHub
parent 7be079f504
commit 088e9f7821
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 0 deletions

View File

@ -2501,6 +2501,19 @@ nav .search-wrapper {
--tw-shadow-color: rgb(115 115 115 / 0.4);
--tw-shadow: var(--tw-shadow-colored);
}
@supports (
((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px)))
) {
.code-copy-btn {
--tw-bg-opacity: .85;
--tw-backdrop-blur: blur(12px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
:is(html[class~="dark"] .code-copy-btn) {
--tw-bg-opacity: 0.8;
}
}
html {
font-size: 1rem;
-webkit-font-smoothing: antialiased;

View File

@ -0,0 +1,7 @@
@supports (
(-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
) {
.code-copy-btn {
@apply backdrop-blur-md bg-opacity-[.85] dark:bg-opacity-80;
}
}

View File

@ -8,6 +8,7 @@
@import "components/sidebar.css";
@import "components/navbar.css";
@import "components/scrollbar.css";
@import "components/code-copy.css";
html {
@apply text-base antialiased;