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

45
src/components/Grid.svelte
View File

@@ -125,15 +125,7 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
</div>
<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 {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
@@ -147,47 +139,16 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
}
.logo-info {
padding: 1rem;
background: var(--color-card);
color: var(--color-text);
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 {
grid-column: 1 / -1;
text-align: center;
padding: 2rem;
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 {
display: flex;
align-items: center;

19
src/components/List.svelte
View File

@@ -152,10 +152,7 @@
border-radius: 4px;
position: relative;
}
.logo-info h3 {
margin-bottom: 0.5rem;
color: var(--color-accent, #4f8cff);
}
.logo-list {
display: flex;
flex-direction: column;
@@ -166,21 +163,7 @@
padding: 2rem;
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 {
justify-content: flex-start;
}
.color-circle.color-reset {
background: none !important;
}
</style>