sha/sLogos
1
0
Fork 0
mirror of https://github.com/shadoll/sLogos.git synced 2026-02-04 02:53:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Refactor Grid and List components by cleaning up unused styles and improving layout consistency

Browse Source
This commit is contained in:
sHa
2025-05-02 10:43:53 +03:00
parent 31cf501a8b
commit 7b5516d997
3 changed files with 114 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
public/global.css
View File

@@ -27,7 +27,8 @@
} }
/* Class-based theme overrides for explicit theme switching */ /* Class-based theme overrides for explicit theme switching */
:root.dark, [data-theme="dark"] { :root.dark,
[data-theme="dark"] {
--color-card: #23272e; --color-card: #23272e;
--background-color: #181a20; --background-color: #181a20;
--color-text: #f5f6fa; --color-text: #f5f6fa;
@@ -35,7 +36,8 @@
--color-accent: #4f8cff; --color-accent: #4f8cff;
} }
:root.light, [data-theme="light"] { :root.light,
[data-theme="light"] {
--color-bg: #fff; --color-bg: #fff;
--color-card: #f8f8f8; --color-card: #f8f8f8;
--background-color: #f8f9fa; --background-color: #f8f9fa;
@@ -256,6 +258,15 @@ button:hover {
margin: 0.5em 0 0 0; margin: 0.5em 0 0 0;
} }
.logo-card {
background: var(--color-card);
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: 8px;
transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
min-width: 320px;
}
.logo-tag { .logo-tag {
display: inline-block; display: inline-block;
background: var(--color-accent); background: var(--color-accent);
@@ -287,6 +298,11 @@ button:hover {
transition: background 0.2s, color 0.2s; transition: background 0.2s, color 0.2s;
} }
.logo-info h3 {
margin-bottom: 0.5rem;
color: var(--color-accent);
}
.logo-image, .logo-image,
.logo-preview { .logo-preview {
display: flex; display: flex;
@@ -582,104 +598,104 @@ footer {
} }
.tag-filter { .tag-filter {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.3rem; gap: 0.3rem;
align-items: center; align-items: center;
margin-left: 1rem; margin-left: 1rem;
position: relative; position: relative;
} }
.tag-filter .selected-tag { .tag-filter .selected-tag {
background: var(--color-accent, #4f8cff); background: var(--color-accent, #4f8cff);
color: #fff; color: #fff;
border: none; border: none;
border-radius: 12px; border-radius: 12px;
padding: 0.2em 0.8em 0.2em 0.8em; padding: 0.2em 0.8em 0.2em 0.8em;
font-size: 0.85em; font-size: 0.85em;
font-weight: 500; font-weight: 500;
letter-spacing: 0.02em; letter-spacing: 0.02em;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.3em; gap: 0.3em;
opacity: 1; opacity: 1;
transition: background 0.2s, color 0.2s; transition: background 0.2s, color 0.2s;
} }
.tag-filter .selected-tag .close { .tag-filter .selected-tag .close {
margin-left: 0.4em; margin-left: 0.4em;
font-size: 1.1em; font-size: 1.1em;
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
opacity: 0.7; opacity: 0.7;
transition: opacity 0.2s; transition: opacity 0.2s;
} }
.tag-filter .selected-tag .close:hover { .tag-filter .selected-tag .close:hover {
opacity: 1; opacity: 1;
} }
.tag-dropdown { .tag-dropdown {
position: relative; position: relative;
display: inline-block; display: inline-block;
} }
.tag-dropdown .dropdown-toggle { .tag-dropdown .dropdown-toggle {
background: var(--color-card); background: var(--color-card);
color: var(--color-text); color: var(--color-text);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 12px; border-radius: 12px;
padding: 0.2em 0.8em; padding: 0.2em 0.8em;
font-size: 0.85em; font-size: 0.85em;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
margin-left: 0.2em; margin-left: 0.2em;
transition: background 0.2s, color 0.2s; transition: background 0.2s, color 0.2s;
} }
.tag-dropdown .dropdown-list { .tag-dropdown .dropdown-list {
position: absolute; position: absolute;
left: 0; left: 0;
top: 110%; top: 110%;
min-width: 120px; min-width: 120px;
background: var(--color-card); background: var(--color-card);
color: var(--color-text); color: var(--color-text);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
z-index: 10; z-index: 10;
padding: 0.4em 0.2em; padding: 0.4em 0.2em;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.2em; gap: 0.2em;
} }
.tag-dropdown .dropdown-tag { .tag-dropdown .dropdown-tag {
background: var(--color-accent, #4f8cff); background: var(--color-accent, #4f8cff);
color: #fff; color: #fff;
border: none; border: none;
border-radius: 12px; border-radius: 12px;
padding: 0.2em 0.8em; padding: 0.2em 0.8em;
font-size: 0.85em; font-size: 0.85em;
font-weight: 500; font-weight: 500;
letter-spacing: 0.02em; letter-spacing: 0.02em;
cursor: pointer; cursor: pointer;
opacity: 0.85; opacity: 0.85;
margin: 0.1em 0; margin: 0.1em 0;
text-align: left; text-align: left;
transition: background 0.2s, color 0.2s; transition: background 0.2s, color 0.2s;
} }
.tag-dropdown .dropdown-tag:hover { .tag-dropdown .dropdown-tag:hover {
opacity: 1; opacity: 1;
background: var(--color-accent, #4f8cff); background: var(--color-accent, #4f8cff);
} }
.tag-dropdown .no-tags { .tag-dropdown .no-tags {
color: #888; color: #888;
font-size: 0.85em; font-size: 0.85em;
padding: 0.3em 0.8em; padding: 0.3em 0.8em;
text-align: center; text-align: center;
} }

45
src/components/Grid.svelte
View File

@@ -125,15 +125,7 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
</div> </div>
<style> <style>
:global(.logo-card) {
background: var(--color-card);
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: 8px;
/* overflow: hidden; removed to allow dropdown menus to escape the card */
transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
min-width: 320px;
}
.logo-grid { .logo-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
@@ -147,47 +139,16 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
} }
.logo-info { .logo-info {
padding: 1rem; padding: 1rem;
background: var(--color-card);
color: var(--color-text);
border-top: 1px solid var(--color-border); border-top: 1px solid var(--color-border);
transition: background 0.2s, color 0.2s;
}
.logo-info h3 {
margin-bottom: 0.5rem;
color: var(--color-accent, #4f8cff);
} }
.no-results { .no-results {
grid-column: 1 / -1; grid-column: 1 / -1;
text-align: center; text-align: center;
padding: 2rem; padding: 2rem;
color: #666; color: #666;
} }
.color-circle.color-reset {
background: none !important;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
border: none;
}
.color-circle.color-reset svg {
pointer-events: none;
}
.color-circle {
width: 24px;
height: 24px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 4px;
cursor: pointer;
box-sizing: border-box;
padding: 0;
}
.color-switcher-preview.align-right { .color-switcher-preview.align-right {
display: flex; display: flex;
align-items: center; align-items: center;

19
src/components/List.svelte
View File

@@ -152,10 +152,7 @@
border-radius: 4px; border-radius: 4px;
position: relative; position: relative;
} }
.logo-info h3 {
margin-bottom: 0.5rem;
color: var(--color-accent, #4f8cff);
}
.logo-list { .logo-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -166,21 +163,7 @@
padding: 2rem; padding: 2rem;
color: #666; color: #666;
} }
.color-circle {
width: 24px;
height: 24px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 4px;
cursor: pointer;
box-sizing: border-box;
}
.color-switcher-preview.align-left { .color-switcher-preview.align-left {
justify-content: flex-start; justify-content: flex-start;
} }
.color-circle.color-reset {
background: none !important;
}
</style> </style>