dbrun/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2026-01-30 16:31:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: improve fixed-fill-blur

Browse Source 
The original appearance is identical to `fixed-fill`
This commit is contained in:
ZhenShuo Leo
2025-12-27 15:05:25 +08:00
parent 8ab8807398
commit 230ee3ab16
2 changed files with 67 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
assets/css/compiled/main.css
View File

@@ -1709,6 +1709,12 @@
.bg-primary-200 {
background-color: rgba(var(--color-primary-200), 1);
}
.bg-primary-200\/50 {
background-color: color-mix(in srgb, rgba(rgba(var(--color-primary-200), 1), 1) 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, rgba(var(--color-primary-200), 1) 50%, transparent);
}
}
.bg-primary-500 {
background-color: rgba(var(--color-primary-500), 1);
}
@@ -1721,6 +1727,13 @@
.bg-white {
background-color: #fff;
}
.bg-linear-65 {
--tw-gradient-position: 65deg;
@supports (background-image: linear-gradient(in lab, red, red)) {
--tw-gradient-position: 65deg in oklab;
}
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-b {
--tw-gradient-position: to bottom in oklab;
background-image: linear-gradient(var(--tw-gradient-stops));
@@ -2241,6 +2254,16 @@
-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,);
}
.backdrop-brightness-112 {
--tw-backdrop-brightness: brightness(112%);
-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,);
}
.backdrop-saturate-220 {
--tw-backdrop-saturate: saturate(220%);
-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,);
}
.transition {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3244,18 +3267,46 @@
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
}
.dark\:from-neutral-900\/88 {
&:is(.dark *) {
--tw-gradient-from: color-mix(in srgb, rgba(rgba(var(--color-neutral-900), 1), 1) 88%, transparent);
@supports (color: color-mix(in lab, red, red)) {
--tw-gradient-from: color-mix(in oklab, rgba(var(--color-neutral-900), 1) 88%, transparent);
}
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
}
.dark\:from-primary-600 {
&:is(.dark *) {
--tw-gradient-from: rgba(var(--color-primary-600), 1);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
}
.dark\:via-neutral-800\/72 {
&:is(.dark *) {
--tw-gradient-via: color-mix(in srgb, rgba(rgba(var(--color-neutral-800), 1), 1) 72%, transparent);
@supports (color: color-mix(in lab, red, red)) {
--tw-gradient-via: color-mix(in oklab, rgba(var(--color-neutral-800), 1) 72%, transparent);
}
--tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-via-stops);
}
}
.dark\:to-neutral-800 {
&:is(.dark *) {
--tw-gradient-to: rgba(var(--color-neutral-800), 1);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
}
.dark\:to-neutral-900\/55 {
&:is(.dark *) {
--tw-gradient-to: color-mix(in srgb, rgba(rgba(var(--color-neutral-900), 1), 1) 55%, transparent);
@supports (color: color-mix(in lab, red, red)) {
--tw-gradient-to: color-mix(in oklab, rgba(var(--color-neutral-900), 1) 55%, transparent);
}
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
}
.dark\:to-secondary-800 {
&:is(.dark *) {
--tw-gradient-to: rgba(var(--color-secondary-800), 1);
@@ -3322,6 +3373,20 @@
opacity: 60%;
}
}
.dark\:backdrop-brightness-95 {
&:is(.dark *) {
--tw-backdrop-brightness: brightness(95%);
-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,);
}
}
.dark\:backdrop-saturate-180 {
&:is(.dark *) {
--tw-backdrop-saturate: saturate(180%);
-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,);
}
}
.dark\:hover\:\!bg-primary-700 {
&:is(.dark *) {
&:hover {