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

style: update header layout and adjust tag background color for consistency

Browse Source
This commit is contained in:
sHa
2025-05-29 04:18:22 +03:00
parent 9c63c940cb
commit 13077a9925
2 changed files with 16 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
public/global.css
View File

@@ -1,6 +1,6 @@
:root { :root {
--primary-color: #3498db; --primary-color: #4619c2;
--primary-color-hover: #2980b9; --primary-color-hover: #6447b5;
--secondary-color: #2c3e50; --secondary-color: #2c3e50;
--background-color: #f8f9fa; --background-color: #f8f9fa;
--text-color: #333333; --text-color: #333333;
@@ -22,7 +22,7 @@
--background-color: #181a20; --background-color: #181a20;
--color-text: #f5f6fa; --color-text: #f5f6fa;
--color-border: #333842; --color-border: #333842;
--color-accent: #4f8cff; --color-accent: var(--primary-color);
} }
} }
@@ -33,7 +33,7 @@
--background-color: #181a20; --background-color: #181a20;
--color-text: #f5f6fa; --color-text: #f5f6fa;
--color-border: #333842; --color-border: #333842;
--color-accent: #4f8cff; --color-accent: var(--primary-color);
} }
:root.light, :root.light,
@@ -43,7 +43,7 @@
--background-color: #f8f9fa; --background-color: #f8f9fa;
--color-text: #333333; --color-text: #333333;
--color-border: #ddd; --color-border: #ddd;
--color-accent: #4f8cff; --color-accent: var(--primary-color);
} }
* { * {

15
src/components/Header.svelte
View File

@@ -462,8 +462,15 @@
height: 28px; height: 28px;
} }
.header-controls {
display: flex;
align-items: center;
gap: 1rem;
margin: 1rem 0;
}
.search-bar { .search-bar {
margin-bottom: 1.5rem; margin-bottom: 0;
width: 100%; width: 100%;
max-width: 500px; max-width: 500px;
position: relative; position: relative;
@@ -533,12 +540,11 @@
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.3rem; gap: 0.3rem;
align-items: center; align-items: center;
margin-left: 1rem;
position: relative; position: relative;
} }
.selected-tag { .selected-tag {
background: var(--color-accent, #4f8cff); background: var(--color-accent);
color: #fff; color: #fff;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
@@ -612,7 +618,7 @@
color: var(--color-text); color: var(--color-text);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 6px; border-radius: 6px;
padding: 0.4em 0.6em; padding: 0.6em 0.8em;
font-size: 0.9em; font-size: 0.9em;
cursor: pointer; cursor: pointer;
transition: background 0.2s, color 0.2s, border-color 0.2s; transition: background 0.2s, color 0.2s, border-color 0.2s;
@@ -621,6 +627,7 @@
justify-content: center; justify-content: center;
position: relative; position: relative;
gap: 0.3rem; gap: 0.3rem;
height: 40px;
} }
.filter-toggle:hover, .filter-toggle:hover,