Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-03-21 16:49:23 +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; animation: highlight 2s;
} }
:global(.reduce-motion) .settings-content.animate { :global([data-reduce-motion="true"]) .settings-content.animate {
animation: highlight-lite 2s !important; animation: highlight-lite 2s !important;
} }

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

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

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

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

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

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