blitzwing/cobalt-7
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

web: move svg icon params to css & clean up

Browse source
This commit is contained in:
wukko 2024-06-24 23:46:37 +06:00
parent b153c06294
commit 56081db857
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
5 changed files with 55 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
web/src/components/save/Omnibox.svelte
View file

@ -41,7 +41,7 @@
class:focused={isFocused}
class:downloadable={validLink(link)}
>
<IconLink id="input-link-icon" color="var(--gray)" size="18px" />
<IconLink id="input-link-icon" />
<input
id="link-area"
@ -115,6 +115,13 @@
outline: var(--secondary) 0.5px solid;
}
:global(#input-link-icon) {
stroke: var(--gray);
width: 18px;
height: 18px;
stroke-width: 2px;
}
#input-container.focused :global(#input-link-icon) {
stroke: var(--secondary);
}

31
web/src/components/settings/SettingsTab.svelte
View file

@ -1,26 +1,26 @@
<script lang="ts">
import { page } from "$app/stores";
export let categoryName: string;
export let categoryLink: string;
export let tabName: string;
export let tabLink: string;
export let iconColor: "gray" | "blue" | "green" = "gray";
$: isActive = $page.url.pathname === `/settings/${categoryLink}`;
$: isActive = $page.url.pathname === `/settings/${tabLink}`;
</script>
<a
class="settings-category"
href="/settings/{categoryLink}"
class="settings-tab"
href="/settings/{tabLink}"
class:active={isActive}
>
<div class="category-icon" style="background: var(--{iconColor})">
<div class="tab-icon" style="background: var(--{iconColor})">
<slot></slot>
</div>
<span>{categoryName}</span>
<span>{tabName}</span>
</a>
<style>
.settings-category {
.settings-tab {
display: flex;
flex-direction: row;
align-items: center;
@ -32,20 +32,27 @@
border-radius: var(--border-radius);
}
.settings-category:hover {
.settings-tab :global(svg) {
stroke: var(--white);
stroke-width: 1.5px;
height: 18px;
width: 18px;
}
.settings-tab:hover {
background: var(--button-hover-transparent);
}
.settings-category.active {
.settings-tab.active {
background: var(--secondary);
color: var(--primary);
}
.settings-category span {
.settings-tab span {
font-size: 14.5px;
}
.category-icon {
.tab-icon {
display: flex;
justify-content: center;
align-items: center;

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

@ -12,8 +12,7 @@
import IconHeart from "@tabler/icons-svelte/IconHeart.svelte";
import IconInfoCircle from "@tabler/icons-svelte/IconInfoCircle.svelte";
const iconSize = 21;
const iconStroke = 1.2;
const settingsLink = "/settings/general/appearance";
</script>
<nav id="sidebar">
@ -21,30 +20,30 @@
<div id="sidebar-tabs">
<div id="sidebar-actions" class="sidebar-inner-container">
<SidebarTab tabName="save" tabLink="/">
<IconDownload size={iconSize} stroke={iconStroke} />
<IconDownload />
</SidebarTab>
<SidebarTab tabName="trim" tabLink="/trim">
<IconCut size={iconSize} stroke={iconStroke} />
<IconCut />
</SidebarTab>
<SidebarTab tabName="crop" tabLink="/crop">
<IconCrop size={iconSize} stroke={iconStroke} />
<IconCrop />
</SidebarTab>
<SidebarTab tabName="convert" tabLink="/convert">
<IconTransform size={iconSize} stroke={iconStroke} />
<IconTransform />
</SidebarTab>
<SidebarTab tabName="settings" tabLink="/settings">
<IconSettings size={iconSize} stroke={iconStroke} />
<SidebarTab tabName="settings" tabLink={settingsLink}>
<IconSettings />
</SidebarTab>
</div>
<div id="sidebar-info" class="sidebar-inner-container">
<SidebarTab tabName="updates" tabLink="/updates">
<IconComet size={iconSize} stroke={iconStroke} />
<IconComet />
</SidebarTab>
<SidebarTab tabName="donate" tabLink="/donate">
<IconHeart size={iconSize} stroke={iconStroke} />
<IconHeart />
</SidebarTab>
<SidebarTab tabName="about" tabLink="/about">
<IconInfoCircle size={iconSize} stroke={iconStroke} />
<IconInfoCircle />
</SidebarTab>
</div>
</div>

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

@ -59,6 +59,12 @@
border-radius: var(--border-radius);
}
.sidebar-tab :global(svg) {
stroke-width: 1.2px;
height: 21px;
width: 21px;
}
.sidebar-tab.active {
color: var(--sidebar-bg);
background: var(--sidebar-highlight);

28
web/src/routes/settings/+layout.svelte
View file

@ -7,10 +7,6 @@
import IconMovie from "@tabler/icons-svelte/IconMovie.svelte";
import IconMusic from "@tabler/icons-svelte/IconMusic.svelte";
import IconFileSettings from "@tabler/icons-svelte/IconFileSettings.svelte";
const iconSize = 18;
const iconStroke = 1.5;
const iconColor = "var(--white)";
</script>
<div id="settings-page">
@ -19,34 +15,34 @@
<nav id="settings-navigation">
<SettingsSection sectionTitle="general">
<SettingsTab
categoryName="appearance"
categoryLink="general/appearance"
tabName="appearance"
tabLink="general/appearance"
iconColor="blue"
>
<IconSunHigh size={iconSize} stroke={iconStroke} color={iconColor} />
<IconSunHigh />
</SettingsTab>
</SettingsSection>
<SettingsSection sectionTitle="save">
<SettingsTab
categoryName="video"
categoryLink="save/video"
tabName="video"
tabLink="save/video"
iconColor="green"
>
<IconMovie size={iconSize} stroke={iconStroke} color={iconColor} />
<IconMovie />
</SettingsTab>
<SettingsTab
categoryName="audio"
categoryLink="save/audio"
tabName="audio"
tabLink="save/audio"
iconColor="green"
>
<IconMusic size={iconSize} stroke={iconStroke} color={iconColor}/>
<IconMusic />
</SettingsTab>
<SettingsTab
categoryName="metadata"
categoryLink="save/metadata"
tabName="metadata"
tabLink="save/metadata"
iconColor="green"
>
<IconFileSettings size={iconSize} stroke={iconStroke} color={iconColor}/>
<IconFileSettings />
</SettingsTab>
</SettingsSection>
</nav>