diff --git a/packages/nicolium/src/styles/new/chats.scss b/packages/nicolium/src/styles/new/chats.scss index fdeef17ed..6994e481c 100644 --- a/packages/nicolium/src/styles/new/chats.scss +++ b/packages/nicolium/src/styles/new/chats.scss @@ -13,11 +13,11 @@ background: white; box-shadow: 0 25px 75px -15px #0004; - &:where([dir="ltr"], [dir="ltr"] *) { + [dir="ltr"] & { right: 1.25rem; } - &:where([dir="rtl"], [dir="rtl"] *) { + [dir="rtl"] & { left: 1.25rem; } @@ -231,7 +231,7 @@ background-color: rgb(var(--color-gray-100)); } - &:hover:is(.dark *) { + .dark &:hover { background-color: rgb(var(--color-gray-800)); } @@ -331,7 +331,7 @@ color: rgb(var(--color-gray-600)); } - &:hover:is(.dark *) { + .dark &:hover { color: rgb(var(--color-gray-500)); } diff --git a/packages/nicolium/src/styles/new/components.scss b/packages/nicolium/src/styles/new/components.scss index 0131049af..da93db2fa 100644 --- a/packages/nicolium/src/styles/new/components.scss +++ b/packages/nicolium/src/styles/new/components.scss @@ -306,7 +306,7 @@ padding-bottom: 0.375rem; padding-right: 1rem; - &:where([dir="rtl"], [dir="rtl"] *) { + [dir="rtl"] & { padding-left: 1rem; padding-right: 0; } @@ -342,7 +342,7 @@ > .⁂-icon { margin-left: 0.25rem; - &:where([dir="rtl"], [dir="rtl"] *) { + [dir="rtl"] & { transform: rotate(180deg); } } @@ -357,7 +357,7 @@ a.⁂-list-item, background-image: linear-gradient(to right, rgb(var(--color-gradient-start) / 0.2), rgb(var(--color-gradient-end) / 0.2)); } - &:hover:is(.dark *) { + .dark &:hover { background-image: linear-gradient(to right, rgb(var(--color-gradient-start) / 0.05), rgb(var(--color-gradient-end) / 0.05)); } } @@ -427,7 +427,7 @@ a.⁂-list-item, height: 1.5rem; width: 1.5rem; - &:where([dir="rtl"], [dir="rtl"] *) { + [dir="rtl"] & { transform: rotate(180deg); } } @@ -553,11 +553,11 @@ a.⁂-list-item, color: rgb(var(--color-gray-500)); } - &:hover:is(.dark *) { + .dark &:hover { background-color: rgb(var(--color-gray-800)); } - &:focus:is(.dark *) { + .dark &:focus { background-color: rgb(var(--color-primary-800)); } @@ -572,7 +572,7 @@ a.⁂-list-item, background-color: rgb(var(--color-gray-800)); } - &:hover:is(.dark *) { + .dark &:hover { background-color: rgb(var(--color-gray-800)); } } @@ -606,11 +606,11 @@ a.⁂-list-item, color: rgb(var(--color-gray-500)); } - &:hover:is(.dark *) { + .dark &:hover { background-color: rgb(var(--color-gray-800)); } - &:focus:is(.dark *) { + .dark &:focus { background-color: rgb(var(--color-primary-800)); } } @@ -710,11 +710,11 @@ div[data-viewport-type='window']:has(.⁂-empty-message) { color: rgb(var(--color-gray-300)); } - &:hover:is(.dark *) { + .dark &:hover { color: rgb(var(--color-gray-200)); } - &:where([dir="rtl"], [dir="rtl"] *) { + [dir="rtl"] & { transform: rotate(180deg); } } diff --git a/packages/nicolium/src/styles/new/compose.scss b/packages/nicolium/src/styles/new/compose.scss index bb5c77865..f472c7237 100644 --- a/packages/nicolium/src/styles/new/compose.scss +++ b/packages/nicolium/src/styles/new/compose.scss @@ -64,7 +64,7 @@ outline-color: rgb(var(--color-gray-800)); } - &:focus-within:is(.dark *) { + .dark &:focus-within { border-color: rgb(var(--color-primary-500)); outline-color: rgb(var(--color-primary-500)); } @@ -115,7 +115,7 @@ align-items: center; gap: 1rem; - &:where([dir="rtl"], [dir="rtl"] *) { + [dir="rtl"] & { margin-left: 0; margin-right: auto; } @@ -158,7 +158,7 @@ opacity: 0.75; } - &:hover:is(.dark *) { + .dark &:hover { background-color: rgb(var(--color-primary-600)); } @@ -212,7 +212,7 @@ transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); opacity: 0.75; } - &:hover:is(.dark *) { + .dark &:hover { background-color: rgb(var(--color-primary-600)); } } @@ -295,7 +295,7 @@ transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); padding-left: 0.5rem; padding-right: 0.5rem; - &:where([dir="rtl"], [dir="rtl"] *) { + [dir="rtl"] & { left: 0; right: auto; } @@ -346,7 +346,7 @@ transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--color-gray-800)); } - &:hover:is(.dark *) { + .dark &:hover { background-color: rgb(var(--color-gray-700)); } @@ -370,7 +370,7 @@ transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); background-color: rgb(var(--color-gray-900)); } - &:hover:is(.dark *) { + .dark &:hover { background-color: rgb(var(--color-gray-800)); } } diff --git a/packages/nicolium/src/styles/new/events.scss b/packages/nicolium/src/styles/new/events.scss index 81f1ec6b8..e487a3395 100644 --- a/packages/nicolium/src/styles/new/events.scss +++ b/packages/nicolium/src/styles/new/events.scss @@ -243,7 +243,7 @@ color: rgb(var(--color-gray-600)); } - &:focus-within:is(.dark *) { + .dark &:focus-within { border-color: rgb(var(--color-primary-500)); } diff --git a/packages/nicolium/src/styles/new/forms.scss b/packages/nicolium/src/styles/new/forms.scss index 0f62cbb9d..f9e19ba7b 100644 --- a/packages/nicolium/src/styles/new/forms.scss +++ b/packages/nicolium/src/styles/new/forms.scss @@ -68,7 +68,7 @@ outline: 2px solid rgb(var(--color-gray-800)); } - &:focus:is(.dark *) { + .dark &:focus { border-color: rgb(var(--color-primary-500)); outline-color: rgb(var(--color-primary-500)); } @@ -97,7 +97,7 @@ @include mixins.text($size: xs, $theme: muted); text-align: right; - &:where([dir="rtl"], [dir="rtl"] *) { + [dir="rtl"] & { text-align: left; } @@ -444,7 +444,7 @@ &--sm:has(input:checked) .⁂-toggle__knob { transform: translateX(0.875rem); - :is([dir='rtl']) & { + [dir='rtl'] & { transform: translateX(-0.875rem); } } @@ -452,7 +452,7 @@ &--md:has(input:checked) .⁂-toggle__knob { transform: translateX(1rem); - :is([dir='rtl']) & { + [dir='rtl'] & { transform: translateX(-1rem); } } diff --git a/packages/nicolium/src/styles/new/layout.scss b/packages/nicolium/src/styles/new/layout.scss index 826e1a7b0..18c303ea2 100644 --- a/packages/nicolium/src/styles/new/layout.scss +++ b/packages/nicolium/src/styles/new/layout.scss @@ -91,7 +91,7 @@ body { box-shadow: none; } - &:where([dir="rtl"], [dir="rtl"] *) { + [dir="rtl"] & { right: 0.5rem; transform-origin: bottom right; } @@ -157,7 +157,7 @@ body { color: rgb(var(--color-gray-100)); } - &:hover:is(.dark *) { + .dark &:hover { background-color: rgb(var(--color-gray-800)); } @@ -362,7 +362,7 @@ body { color: rgb(var(--color-gray-600)); } - &:hover:is(.dark *) { + .dark &:hover { color: rgb(var(--color-gray-500)); } } @@ -465,7 +465,7 @@ body { color: rgb(var(--color-gray-400)); } - &:hover:is(.dark *) { + .dark &:hover { color: rgb(var(--color-gray-200)); } @@ -775,7 +775,7 @@ body { color: #fff; } - &:where([dir="rtl"], [dir="rtl"] *) { + [dir="rtl"] & { transform: rotate(180deg); } } @@ -1142,7 +1142,7 @@ body { color: rgb(var(--color-gray-600)); } - &:hover:is(.dark *) { + .dark &:hover { color: rgb(var(--color-gray-500)); } } diff --git a/packages/nicolium/src/styles/new/settings.scss b/packages/nicolium/src/styles/new/settings.scss index 613deb7f0..5e6c2b2b8 100644 --- a/packages/nicolium/src/styles/new/settings.scss +++ b/packages/nicolium/src/styles/new/settings.scss @@ -88,7 +88,7 @@ color: rgb(var(--color-danger-200)); } - &:hover:is(.dark *) { + .dark &:hover { background-color: rgb(var(--color-danger-500)); color: rgb(var(--color-gray-100)); } diff --git a/packages/nicolium/src/styles/new/statuses.scss b/packages/nicolium/src/styles/new/statuses.scss index f21e494bb..ab70da3ee 100644 --- a/packages/nicolium/src/styles/new/statuses.scss +++ b/packages/nicolium/src/styles/new/statuses.scss @@ -236,7 +236,7 @@ } - &:hover:is(.dark *) { + .dark &:hover { background-color: rgb(var(--color-primary-800)); color: #fff; } @@ -246,7 +246,7 @@ color: rgb(var(--color-gray-600)); } - &:hover:is(.dark *) { + .dark &:hover { color: #fff; } } @@ -274,7 +274,7 @@ color: rgb(var(--color-accent-300)); } - &:hover:is(.dark *) { + .dark &:hover { color: rgb(var(--color-accent-300)); } @@ -289,7 +289,7 @@ color: rgb(var(--color-success-400)); } - &:hover:is(.dark *) { + .dark &:hover { color: rgb(var(--color-success-400)); } } @@ -520,7 +520,7 @@ color: rgb(var(--color-success-400)); } - &:hover:is(.dark *) { + .dark &:hover { color: rgb(var(--color-success-400)); } } diff --git a/packages/nicolium/src/styles/new/timelines.scss b/packages/nicolium/src/styles/new/timelines.scss index 414a288ac..f4d20a3ef 100644 --- a/packages/nicolium/src/styles/new/timelines.scss +++ b/packages/nicolium/src/styles/new/timelines.scss @@ -133,7 +133,7 @@ color: rgb(var(--color-gray-600)); } - &:hover:is(.dark *) { + .dark &:hover { border-color: rgb(var(--color-primary-800)); background-color: rgb(var(--color-primary-900)); }