sha/sLogos
1
0
Fork 0
mirror of https://github.com/shadoll/sLogos.git synced 2025-12-20 11:32:01 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: refactor theme and view mode switchers to use button group styles

Browse Source
This commit is contained in:
sHa
2025-05-29 01:53:37 +03:00
parent 5a5202eb80
commit fe67375590
2 changed files with 50 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
public/global.css
View File

@@ -115,7 +115,6 @@ button:hover {
outline: 2px solid var(--color-border);
}
.copy-btn,
.copy-group .png-btn {
background-color: var(--secondary-color);
@@ -184,6 +183,54 @@ button:hover {
margin-right: 0.5em;
}
/* Universal Button Group Styles */
.button-group {
display: inline-flex;
border: 1px solid var(--color-border);
border-radius: 6px;
overflow: hidden;
background: var(--color-card);
}
.button-group button {
background: none;
border: none;
color: var(--color-text);
cursor: pointer;
padding: 0.5em 0.7em;
transition: background 0.2s, color 0.2s, border-color 0.2s;
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid var(--color-border);
border-radius: 0;
position: relative;
}
.button-group button:last-child {
border-right: none;
}
.button-group button:hover:not(.active) {
background: var(--color-border);
color: var(--color-text);
}
.button-group button.active {
background: var(--color-accent);
color: #fff;
border-right-color: var(--color-accent);
}
.button-group button.active:hover {
background: var(--color-accent-hover, #2980b9);
border-right-color: var(--color-accent-hover, #2980b9);
}
.button-group button.active:last-child {
border-right: none;
}
/* Shared color switcher and color circle styles */
.format-row {
display: flex;

82
src/components/Header.svelte
View File

@@ -80,7 +80,7 @@
{/if}
</span>
<div class="theme-switcher">
<div class="theme-switch-group">
<div class="theme-switch-group button-group">
<button
on:click={() => setTheme("system")}
class:active={theme === "system"}
@@ -276,7 +276,7 @@
/>
</svg>
</button>
<div class="view-mode-group">
<div class="view-mode-group button-group">
<button
class:active={viewMode === "compact"}
on:click={setCompactView}
@@ -455,51 +455,6 @@
margin-left: auto;
}
.theme-switch-group {
display: flex;
border-radius: 6px;
overflow: hidden;
border: 1px solid var(--color-border);
background: var(--color-card);
}
.theme-switch-group button {
background: none;
border: none;
color: var(--color-text);
padding: 0.2em 0.7em;
font-size: 1.1rem;
border-radius: 0;
transition:
background 0.2s,
color 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.theme-switch-group button:first-child {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.theme-switch-group button:last-child {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.theme-switch-group button.active,
.theme-switch-group button:focus {
background: var(--color-accent);
color: var(--white);
font-weight: bold;
}
.theme-switch-group button:hover {
background: var(--color-accent);
color: var(--color-accent-text);
}
.compact-switch-btn {
background: none;
border: none;
@@ -520,37 +475,4 @@
background: var(--color-accent, #4f8cff);
color: #fff;
}
.view-mode-group {
display: inline-flex;
border: 1px solid var(--color-border);
border-radius: 8px;
overflow: hidden;
background: var(--color-background);
}
.view-mode-group button {
background: none;
border: none;
color: var(--color-text);
cursor: pointer;
padding: 0.5em 0.7em;
transition:
background 0.2s,
color 0.2s;
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid var(--color-border);
border-radius: 0;
}
.view-mode-group button:hover {
background: var(--color-card);
}
.view-mode-group button.active {
background: var(--color-accent, #4f8cff);
color: #fff;
}
</style>