Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-01-23 19:26:26 +01:00
Code Issues Projects Releases Packages Wiki Activity

web: convert global state classes to data attributes

Browse source 
also cleaned up unnecessary dupe in sidebar component
This commit is contained in:
wukko 2024-07-12 19:15:55 +06:00
parent b12ad56cc1
commit 5ccde7995e
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
4 changed files with 10 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/src/components/settings/SettingsCategory.svelte
View file

@ -35,7 +35,7 @@
animation: highlight 2s;
}
:global(.reduce-motion) .settings-content.animate {
:global([data-reduce-motion="true"]) .settings-content.animate {
animation: highlight-lite 2s !important;
}

6
web/src/components/sidebar/Sidebar.svelte
View file

@ -1,8 +1,6 @@
<script lang="ts">
import { t } from "$lib/i18n/translations";
import { device } from "$lib/device";
import CobaltLogo from "$components/sidebar/CobaltLogo.svelte";
import SidebarTab from "$components/sidebar/SidebarTab.svelte";
@ -22,7 +20,7 @@
<svelte:window bind:innerWidth={screenWidth} />
<nav id="sidebar" aria-label={$t("a11y.tabs.tabPanel")} class:on-iPhone={device.is.iPhone}>
<nav id="sidebar" aria-label={$t("a11y.tabs.tabPanel")}>
<CobaltLogo />
<div id="sidebar-tabs">
<div id="sidebar-actions" class="sidebar-inner-container">
@ -114,7 +112,7 @@
/* add padding for notch / dynamic island in landscape */
@media screen and (orientation: landscape) {
#sidebar.on-iPhone {
:global([data-iphone="true"]) #sidebar {
padding-left: env(safe-area-inset-left);
}
}

2
web/src/components/sidebar/SidebarTab.svelte
View file

@ -70,7 +70,7 @@
width: 21px;
}
:global(.on-iPhone .sidebar-tab svg) {
:global([data-iphone="true"] .sidebar-tab svg) {
will-change: transform;
}

12
web/src/routes/+layout.svelte
View file

@ -26,9 +26,9 @@
<div style="display: contents" data-theme={$currentTheme}>
<div
id="cobalt"
class:on-iPhone={device.is.iPhone}
class:reduce-motion={reduceMotion}
class:reduce-transparency={reduceTransparency}
data-iphone={device.is.iPhone}
data-reduce-motion={reduceMotion}
data-reduce-transparency={reduceTransparency}
>
{#if device.is.iPhone && app.is.installed}
<NotchSticker />
@ -142,13 +142,13 @@
/* add padding for notch / dynamic island in landscape */
@media screen and (orientation: landscape) {
#cobalt.on-iPhone {
#cobalt[data-iphone="true"] {
grid-template-columns:
calc(var(--sidebar-width) + env(safe-area-inset-left) + 8px)
1fr;
}
#cobalt.on-iPhone #content {
#cobalt[data-iphone="true"] #content {
padding-right: env(safe-area-inset-right);
}
}
@ -297,7 +297,7 @@
white-space: pre-line;
}
.reduce-motion :global(*) {
[data-reduce-motion="true"] :global(*) {
animation: none !important;
transition: none !important;
}