diff --git a/openprops.html b/openprops.html
index dcdc71b..71e43bf 100644
--- a/openprops.html
+++ b/openprops.html
@@ -6,7 +6,6 @@
system.css
-
diff --git a/theme/openprops/index.css b/theme/openprops/index.css
index 2825f05..71d39bf 100644
--- a/theme/openprops/index.css
+++ b/theme/openprops/index.css
@@ -1,2 +1,4 @@
+@import url('../../index.css');
+
@import url('open-props.min.css');
@import url('system-open-props.css');
diff --git a/theme/openprops/open-props.min.css b/theme/openprops/open-props.min.css
index 0a30dbb..09bcc4e 100644
--- a/theme/openprops/open-props.min.css
+++ b/theme/openprops/open-props.min.css
@@ -1,5 +1,206 @@
+@keyframes fade-in {
+ to {
+ opacity: 1;
+ }
+}
+@keyframes fade-in-bloom {
+ 0% {
+ filter: brightness(1) blur(20px);
+ opacity: 0;
+ }
+ 10% {
+ filter: brightness(2) blur(10px);
+ opacity: 1;
+ }
+ to {
+ filter: brightness(1) blur(0);
+ opacity: 1;
+ }
+}
+@keyframes fade-out {
+ to {
+ opacity: 0;
+ }
+}
+@keyframes fade-out-bloom {
+ to {
+ filter: brightness(1) blur(20px);
+ opacity: 0;
+ }
+ 10% {
+ filter: brightness(2) blur(10px);
+ opacity: 1;
+ }
+ 0% {
+ filter: brightness(1) blur(0);
+ opacity: 1;
+ }
+}
+@keyframes scale-up {
+ to {
+ transform: scale(1.25);
+ }
+}
+@keyframes scale-down {
+ to {
+ transform: scale(0.75);
+ }
+}
+@keyframes slide-out-up {
+ to {
+ transform: translateY(-100%);
+ }
+}
+@keyframes slide-out-down {
+ to {
+ transform: translateY(100%);
+ }
+}
+@keyframes slide-out-right {
+ to {
+ transform: translateX(100%);
+ }
+}
+@keyframes slide-out-left {
+ to {
+ transform: translateX(-100%);
+ }
+}
+@keyframes slide-in-up {
+ 0% {
+ transform: translateY(100%);
+ }
+}
+@keyframes slide-in-down {
+ 0% {
+ transform: translateY(-100%);
+ }
+}
+@keyframes slide-in-right {
+ 0% {
+ transform: translateX(-100%);
+ }
+}
+@keyframes slide-in-left {
+ 0% {
+ transform: translateX(100%);
+ }
+}
+@keyframes shake-x {
+ 0%,
+ to {
+ transform: translateX(0);
+ }
+ 20% {
+ transform: translateX(-5%);
+ }
+ 40% {
+ transform: translateX(5%);
+ }
+ 60% {
+ transform: translateX(-5%);
+ }
+ 80% {
+ transform: translateX(5%);
+ }
+}
+@keyframes shake-y {
+ 0%,
+ to {
+ transform: translateY(0);
+ }
+ 20% {
+ transform: translateY(-5%);
+ }
+ 40% {
+ transform: translateY(5%);
+ }
+ 60% {
+ transform: translateY(-5%);
+ }
+ 80% {
+ transform: translateY(5%);
+ }
+}
+@keyframes spin {
+ to {
+ transform: rotate(1turn);
+ }
+}
+@keyframes ping {
+ 90%,
+ to {
+ opacity: 0;
+ transform: scale(2);
+ }
+}
+@keyframes blink {
+ 0%,
+ to {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0.5;
+ }
+}
+@keyframes float {
+ 50% {
+ transform: translateY(-25%);
+ }
+}
+@keyframes bounce {
+ 25% {
+ transform: translateY(-20%);
+ }
+ 40% {
+ transform: translateY(-3%);
+ }
+ 0%,
+ 60%,
+ to {
+ transform: translateY(0);
+ }
+}
+@keyframes pulse {
+ 50% {
+ transform: scale(0.9);
+ }
+}
+@media (prefers-color-scheme: dark) {
+ @keyframes fade-in-bloom {
+ 0% {
+ filter: brightness(1) blur(20px);
+ opacity: 0;
+ }
+ 10% {
+ filter: brightness(0.5) blur(10px);
+ opacity: 1;
+ }
+ to {
+ filter: brightness(1) blur(0);
+ opacity: 1;
+ }
+ }
+}
+@media (prefers-color-scheme: dark) {
+ @keyframes fade-out-bloom {
+ to {
+ filter: brightness(1) blur(20px);
+ opacity: 0;
+ }
+ 10% {
+ filter: brightness(0.5) blur(10px);
+ opacity: 1;
+ }
+ 0% {
+ filter: brightness(1) blur(0);
+ opacity: 1;
+ }
+ }
+}
+
@layer --theme {
- :where(html) {
+ :root {
--font-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, Segoe UI,
Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
--font-serif: ui-serif, serif;
@@ -891,10 +1092,9 @@
--radius-conditional-5: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-5));
--radius-conditional-6: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-6));
}
-}
-@media (prefers-color-scheme: dark) {
- @layer --theme {
- :where(html) {
+
+ @media (prefers-color-scheme: dark) {
+ :root {
--shadow-color: 220 40% 2%;
--shadow-strength: 25%;
--inner-shadow-highlight: inset 0 -0.5px 0 0 hsla(0, 0%, 100%, 0.067),
@@ -902,203 +1102,3 @@
}
}
}
-@keyframes fade-in {
- to {
- opacity: 1;
- }
-}
-@keyframes fade-in-bloom {
- 0% {
- filter: brightness(1) blur(20px);
- opacity: 0;
- }
- 10% {
- filter: brightness(2) blur(10px);
- opacity: 1;
- }
- to {
- filter: brightness(1) blur(0);
- opacity: 1;
- }
-}
-@keyframes fade-out {
- to {
- opacity: 0;
- }
-}
-@keyframes fade-out-bloom {
- to {
- filter: brightness(1) blur(20px);
- opacity: 0;
- }
- 10% {
- filter: brightness(2) blur(10px);
- opacity: 1;
- }
- 0% {
- filter: brightness(1) blur(0);
- opacity: 1;
- }
-}
-@keyframes scale-up {
- to {
- transform: scale(1.25);
- }
-}
-@keyframes scale-down {
- to {
- transform: scale(0.75);
- }
-}
-@keyframes slide-out-up {
- to {
- transform: translateY(-100%);
- }
-}
-@keyframes slide-out-down {
- to {
- transform: translateY(100%);
- }
-}
-@keyframes slide-out-right {
- to {
- transform: translateX(100%);
- }
-}
-@keyframes slide-out-left {
- to {
- transform: translateX(-100%);
- }
-}
-@keyframes slide-in-up {
- 0% {
- transform: translateY(100%);
- }
-}
-@keyframes slide-in-down {
- 0% {
- transform: translateY(-100%);
- }
-}
-@keyframes slide-in-right {
- 0% {
- transform: translateX(-100%);
- }
-}
-@keyframes slide-in-left {
- 0% {
- transform: translateX(100%);
- }
-}
-@keyframes shake-x {
- 0%,
- to {
- transform: translateX(0);
- }
- 20% {
- transform: translateX(-5%);
- }
- 40% {
- transform: translateX(5%);
- }
- 60% {
- transform: translateX(-5%);
- }
- 80% {
- transform: translateX(5%);
- }
-}
-@keyframes shake-y {
- 0%,
- to {
- transform: translateY(0);
- }
- 20% {
- transform: translateY(-5%);
- }
- 40% {
- transform: translateY(5%);
- }
- 60% {
- transform: translateY(-5%);
- }
- 80% {
- transform: translateY(5%);
- }
-}
-@keyframes spin {
- to {
- transform: rotate(1turn);
- }
-}
-@keyframes ping {
- 90%,
- to {
- opacity: 0;
- transform: scale(2);
- }
-}
-@keyframes blink {
- 0%,
- to {
- opacity: 1;
- }
- 50% {
- opacity: 0.5;
- }
-}
-@keyframes float {
- 50% {
- transform: translateY(-25%);
- }
-}
-@keyframes bounce {
- 25% {
- transform: translateY(-20%);
- }
- 40% {
- transform: translateY(-3%);
- }
- 0%,
- 60%,
- to {
- transform: translateY(0);
- }
-}
-@keyframes pulse {
- 50% {
- transform: scale(0.9);
- }
-}
-@media (prefers-color-scheme: dark) {
- @keyframes fade-in-bloom {
- 0% {
- filter: brightness(1) blur(20px);
- opacity: 0;
- }
- 10% {
- filter: brightness(0.5) blur(10px);
- opacity: 1;
- }
- to {
- filter: brightness(1) blur(0);
- opacity: 1;
- }
- }
-}
-@media (prefers-color-scheme: dark) {
- @keyframes fade-out-bloom {
- to {
- filter: brightness(1) blur(20px);
- opacity: 0;
- }
- 10% {
- filter: brightness(0.5) blur(10px);
- opacity: 1;
- }
- 0% {
- filter: brightness(1) blur(0);
- opacity: 1;
- }
- }
-}