mirror of
https://github.com/shadoll/sLogos.git
synced 2025-12-20 14:32:02 +00:00
Compare commits
17 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 43a3b37661 | |||
| 8c10f643d9 | |||
| 6c0d6cf2b5 | |||
| 71679ff608 | |||
| fdea176b86 | |||
| 10b072d521 | |||
| b0604fc2e7 | |||
| 6d83122c1b | |||
| 003b45d5b4 | |||
| 9d031dc874 | |||
| 27ae28be63 | |||
| 4a2230223c | |||
| 3dd4e50281 | |||
| c62d453946 | |||
| 0313d091fc | |||
| b044b81644 | |||
| a49568a389 |
@@ -28,10 +28,7 @@
|
||||
"disable": false,
|
||||
"brand": "Apple",
|
||||
"tags": [
|
||||
{
|
||||
"text": "tech",
|
||||
"color": "silver"
|
||||
}
|
||||
"tech"
|
||||
],
|
||||
"colors": [
|
||||
{
|
||||
@@ -43,6 +40,25 @@
|
||||
"target": "path"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "arm",
|
||||
"path": "logos/arm.svg",
|
||||
"format": "SVG",
|
||||
"disable": false,
|
||||
"tags": [
|
||||
"tech"
|
||||
],
|
||||
"colors": [
|
||||
{
|
||||
"label": "Dark Blue",
|
||||
"value": "#080225"
|
||||
}
|
||||
],
|
||||
"colorConfig": {
|
||||
"target": "g"
|
||||
},
|
||||
"brand": "arm"
|
||||
},
|
||||
{
|
||||
"name": "ATB",
|
||||
"path": "logos/atb.svg",
|
||||
@@ -50,7 +66,8 @@
|
||||
"disable": false,
|
||||
"brand": "ATB",
|
||||
"tags": [
|
||||
"retail"
|
||||
"retail",
|
||||
"grocery"
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -65,6 +82,17 @@
|
||||
],
|
||||
"brand": "Binance"
|
||||
},
|
||||
{
|
||||
"name": "BMW",
|
||||
"path": "logos/bmw.svg",
|
||||
"format": "SVG",
|
||||
"disable": false,
|
||||
"tags": [
|
||||
"automobile",
|
||||
"transport"
|
||||
],
|
||||
"brand": "BMW"
|
||||
},
|
||||
{
|
||||
"name": "Dalnoboy Service",
|
||||
"path": "logos/dalnoboy-service.svg",
|
||||
@@ -74,7 +102,13 @@
|
||||
"transport",
|
||||
"garage"
|
||||
],
|
||||
"brand": "Dalnoboy Service"
|
||||
"brand": "Dalnoboy Service",
|
||||
"colors": [
|
||||
{
|
||||
"label": "Orange",
|
||||
"value": "#ee7800"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Disney",
|
||||
@@ -112,6 +146,28 @@
|
||||
"selector": "#text"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Fiat",
|
||||
"path": "logos/fiat.svg",
|
||||
"format": "SVG",
|
||||
"disable": false,
|
||||
"tags": [
|
||||
"automobile",
|
||||
"transport"
|
||||
],
|
||||
"brand": "Fiat"
|
||||
},
|
||||
{
|
||||
"name": "Ford",
|
||||
"path": "logos/ford.svg",
|
||||
"format": "SVG",
|
||||
"disable": false,
|
||||
"tags": [
|
||||
"automobile",
|
||||
"transport"
|
||||
],
|
||||
"brand": "Ford"
|
||||
},
|
||||
{
|
||||
"name": "Gitea",
|
||||
"path": "logos/gitea.svg",
|
||||
@@ -130,10 +186,7 @@
|
||||
"disable": false,
|
||||
"brand": "Google",
|
||||
"tags": [
|
||||
{
|
||||
"text": "tech",
|
||||
"color": "silver"
|
||||
}
|
||||
"tech"
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -367,6 +420,16 @@
|
||||
"tags": [],
|
||||
"brand": "Nvidia"
|
||||
},
|
||||
{
|
||||
"name": "Okko",
|
||||
"path": "logos/okko.svg",
|
||||
"format": "SVG",
|
||||
"disable": false,
|
||||
"tags": [
|
||||
"fuel"
|
||||
],
|
||||
"brand": "Okko"
|
||||
},
|
||||
{
|
||||
"name": "Privat24",
|
||||
"path": "logos/privat24.svg",
|
||||
@@ -470,6 +533,26 @@
|
||||
},
|
||||
"brand": "RoomerIN"
|
||||
},
|
||||
{
|
||||
"name": "Sainsbury's",
|
||||
"path": "logos/sainsburys.svg",
|
||||
"format": "SVG",
|
||||
"disable": false,
|
||||
"tags": [
|
||||
"retail",
|
||||
"grocery"
|
||||
],
|
||||
"brand": "Sainsbury's",
|
||||
"colors": [
|
||||
{
|
||||
"label": "Orange",
|
||||
"value": "#F06C00"
|
||||
}
|
||||
],
|
||||
"colorConfig": {
|
||||
"target": "g"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Sendpulse",
|
||||
"path": "logos/sendpulse.svg",
|
||||
@@ -531,6 +614,28 @@
|
||||
"grocery"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Suzuki",
|
||||
"path": "logos/suzuki.svg",
|
||||
"format": "SVG",
|
||||
"disable": false,
|
||||
"tags": [
|
||||
"automobile",
|
||||
"transport"
|
||||
],
|
||||
"brand": "Suzuki"
|
||||
},
|
||||
{
|
||||
"name": "Suzuki",
|
||||
"path": "logos/suzuki_vertical.svg",
|
||||
"format": "SVG",
|
||||
"disable": false,
|
||||
"tags": [
|
||||
"automobile",
|
||||
"transport"
|
||||
],
|
||||
"brand": "Suzuki"
|
||||
},
|
||||
{
|
||||
"name": "Ukrposhta",
|
||||
"path": "logos/ukrposhta.svg",
|
||||
@@ -581,5 +686,23 @@
|
||||
"finance",
|
||||
"transfer"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "WOG",
|
||||
"path": "logos/wog.svg",
|
||||
"format": "SVG",
|
||||
"disable": false,
|
||||
"tags": [
|
||||
"fuel"
|
||||
],
|
||||
"brand": "WOG"
|
||||
},
|
||||
{
|
||||
"name": "Youtube",
|
||||
"path": "logos/youtube.svg",
|
||||
"format": "SVG",
|
||||
"disable": false,
|
||||
"tags": [
|
||||
]
|
||||
}
|
||||
]
|
||||
@@ -1,9 +1,47 @@
|
||||
:root {
|
||||
--primary-color: #3498db;
|
||||
--primary-color-hover: #2980b9;
|
||||
--secondary-color: #2c3e50;
|
||||
--background-color: #f8f9fa;
|
||||
--card-background: #ffffff;
|
||||
--text-color: #333333;
|
||||
--white: #ffffff;
|
||||
--black: #000000;
|
||||
--color-border: #ddd;
|
||||
--card-background: var(--white);
|
||||
--color-bg: var(--background-color);
|
||||
--color-text: var(--text-color);
|
||||
--color-card: var(--card-background);
|
||||
--color-accent: var(--primary-color);
|
||||
--color-accent-hover: var(--primary-color-hover);
|
||||
}
|
||||
|
||||
/* Dark theme overrides - using both media query and class-based approach */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-card: #23272e;
|
||||
--background-color: #181a20;
|
||||
--color-text: #f5f6fa;
|
||||
--color-border: #333842;
|
||||
--color-accent: #4f8cff;
|
||||
}
|
||||
}
|
||||
|
||||
/* Class-based theme overrides for explicit theme switching */
|
||||
:root.dark, [data-theme="dark"] {
|
||||
--color-card: #23272e;
|
||||
--background-color: #181a20;
|
||||
--color-text: #f5f6fa;
|
||||
--color-border: #333842;
|
||||
--color-accent: #4f8cff;
|
||||
}
|
||||
|
||||
:root.light, [data-theme="light"] {
|
||||
--color-bg: #fff;
|
||||
--color-card: #f8f8f8;
|
||||
--background-color: #f8f9fa;
|
||||
--color-text: #333333;
|
||||
--color-border: #ddd;
|
||||
--color-accent: #4f8cff;
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -12,10 +50,16 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:global(html),
|
||||
:global(body) {
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@@ -23,13 +67,15 @@ body {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
background-color: var(--color-accent);
|
||||
color: var(--white);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
@@ -37,13 +83,34 @@ button {
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #2980b9;
|
||||
background-color: var(--color-accent-hover);
|
||||
}
|
||||
|
||||
.view-toggle {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.view-toggle button {
|
||||
padding: 0.3rem 0.5rem;
|
||||
background: var(--color-card);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.view-toggle button.active,
|
||||
.view-toggle button:focus {
|
||||
background: var(--color-accent);
|
||||
color: var(--white);
|
||||
font-weight: bold;
|
||||
outline: 2px solid var(--color-border);
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
@@ -55,15 +122,17 @@ button:hover {
|
||||
.search-bar input {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #ddd;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
background: var(--color-card);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.copy-btn,
|
||||
.copy-group .png-btn {
|
||||
background-color: var(--secondary-color, #2c3e50);
|
||||
color: #fff;
|
||||
background-color: var(--secondary-color);
|
||||
color: var(--white);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
min-width: 2.5em;
|
||||
@@ -71,7 +140,7 @@ button:hover {
|
||||
margin: 0;
|
||||
padding: 0.4em 1em;
|
||||
font-size: 0.95em;
|
||||
border-right: 1px solid var(--color-border, #ddd);
|
||||
border-right: 1px solid var(--color-border);
|
||||
transition: background 0.2s, color 0.2s;
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
@@ -85,15 +154,15 @@ button:hover {
|
||||
.copy-btn:hover,
|
||||
.copy-group .png-btn:focus,
|
||||
.copy-group .png-btn:hover {
|
||||
background: #222;
|
||||
color: #fff;
|
||||
background: var(--black);
|
||||
color: var(--white);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.download-btn,
|
||||
.download-group .png-btn {
|
||||
background: #27ae60;
|
||||
color: #fff;
|
||||
color: var(--white);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
min-width: 2.5em;
|
||||
@@ -101,7 +170,7 @@ button:hover {
|
||||
margin: 0;
|
||||
padding: 0.4em 1em;
|
||||
font-size: 0.95em;
|
||||
border-right: 1px solid var(--color-border, #ddd);
|
||||
border-right: 1px solid var(--color-border);
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
@@ -115,11 +184,12 @@ button:hover {
|
||||
.download-group .png-btn:focus,
|
||||
.download-group .png-btn:hover {
|
||||
background: #219150;
|
||||
color: #fff;
|
||||
color: var(--white);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.copy-group, .download-group {
|
||||
.copy-group,
|
||||
.download-group {
|
||||
display: inline-flex;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
@@ -128,18 +198,36 @@ button:hover {
|
||||
}
|
||||
|
||||
/* Shared color switcher and color circle styles */
|
||||
.color-circle {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.08);
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
transition: border 0.2s, box-shadow 0.2s;
|
||||
.format-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.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;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.color-circle:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.color-circle.color-reset {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.color-switcher-preview,
|
||||
.color-switcher-inline,
|
||||
.color-switcher-under {
|
||||
@@ -147,26 +235,39 @@ button:hover {
|
||||
gap: 0.4em;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.color-switcher-preview {
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
.color-switcher-preview.align-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.color-switcher-preview.align-left {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.color-switcher-inline {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.color-switcher-under {
|
||||
margin: 0.5em 0 0 0;
|
||||
}
|
||||
|
||||
.logo-tag {
|
||||
display: inline-block;
|
||||
background: var(--color-accent, #4f8cff);
|
||||
color: #fff;
|
||||
background: var(--color-accent);
|
||||
color: var(--white);
|
||||
border-radius: 12px;
|
||||
padding: 0.2em 0.8em;
|
||||
font-size: 0.85em;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
margin-right: 0.3em;
|
||||
margin-top: 0.2em;
|
||||
margin-bottom: 0.2em;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
@@ -174,10 +275,11 @@ button:hover {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.logo-info {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
background: var(--color-card);
|
||||
color: var(--color-text);
|
||||
padding: 0.5rem 1rem;
|
||||
@@ -198,7 +300,8 @@ button:hover {
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.logo-preview img {
|
||||
.logo-preview img,
|
||||
div.logo-image img {
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
width: auto;
|
||||
@@ -208,32 +311,6 @@ button:hover {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.format-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Direct logo image size constraints that will work with any component structure */
|
||||
div.logo-image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* background-color removed for theme support */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div.logo-image img {
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.logo-image svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -241,11 +318,107 @@ div.logo-image img {
|
||||
max-height: 100%;
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* Modal styles */
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: var(--color-card);
|
||||
color: var(--color-text) !important;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid var(--color-border);
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.modal-content * {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
color: var(--color-text);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.preview-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
background-color: var(--color-card);
|
||||
color: var(--color-text);
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.preview-container img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.logo-details {
|
||||
margin-top: 1rem;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.logo-details p {
|
||||
margin: 0.5rem 0;
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.logo-details strong,
|
||||
.logo-details span {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* Grid specific */
|
||||
.logo-grid .logo-item .logo-image {
|
||||
/* height: 160px; */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -254,16 +427,259 @@ div.logo-image img {
|
||||
width: 120px;
|
||||
min-width: 120px;
|
||||
height: 100px;
|
||||
border-right: 1px solid #eee;
|
||||
border-right: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
/* Dark theme overrides */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-card: #23272e;
|
||||
--background-color: #181a20;
|
||||
--color-text: #f5f6fa;
|
||||
--color-border: #333842;
|
||||
--color-accent: #4f8cff;
|
||||
/* Row specific */
|
||||
.logo-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5em 0.5em;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.logo-row.grid {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
border-bottom: none;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
|
||||
margin-bottom: 1em;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.logo-row.list {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
margin-bottom: 0;
|
||||
padding: 0.5em 0.5em;
|
||||
}
|
||||
|
||||
.logo-img {
|
||||
flex-shrink: 0;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--color-card);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Header styles */
|
||||
.main-header {
|
||||
margin-bottom: 1.5rem;
|
||||
background: var(--color-card);
|
||||
color: var(--color-text);
|
||||
border-radius: 8px;
|
||||
padding: 1.2rem 1rem 0.7rem 1rem;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.header-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.header-controls {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.logo-count {
|
||||
font-family: system-ui, Arial, sans-serif;
|
||||
font-size: 0.6rem;
|
||||
font-weight: normal;
|
||||
color: var(--color-text);
|
||||
margin-left: 1rem;
|
||||
align-self: center;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.theme-switcher {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
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;
|
||||
outline: 2px solid var(--color-border);
|
||||
}
|
||||
|
||||
.theme-switch-group button:hover {
|
||||
background: var(--color-accent);
|
||||
color: var(--color-accent-text);
|
||||
}
|
||||
|
||||
.logos-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 3rem;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
color: #888;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.header-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.main-header {
|
||||
padding: 1rem 0.5rem 0.5rem 0.5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.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 .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-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-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: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;
|
||||
}
|
||||
|
||||
15
public/logos/arm.svg
Normal file
15
public/logos/arm.svg
Normal file
@@ -0,0 +1,15 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 4332.3 1318.7">
|
||||
|
||||
<g fill="currentColor" fill-rule="evenodd">
|
||||
<path d="M977.9,31.9h290.4v1247.6H977.9v-130.4C850.5,1297.2,693.4,1318,604.5,1318C219.3,1318,0,998,0,654.2
|
||||
C0,248.2,278.5-0.7,607.5-0.7c91.9,0,251.9,23.7,370.4,177.8V31.9z M296.3,660.1c0,216.3,136.3,397.1,346.7,397.1
|
||||
c183.7,0,352.6-133.3,352.6-394.1c0-272.6-168.9-403-352.6-403C432.6,260.1,296.3,437.9,296.3,660.1z M1614.1,31.9h290.4v112.6
|
||||
c32.6-38.5,80-80,121.5-103.7c56.3-32.6,112.6-41.5,177.8-41.5c71.1,0,148.2,11.9,228.2,59.3l-118.5,263.7
|
||||
c-65.2-41.5-118.5-44.4-148.2-44.4c-62.2,0-124.5,8.9-180.8,68.2c-80,85.9-80,204.5-80,287.4v646h-290.4V31.9z M2619.5,31.9h290.4
|
||||
v115.6C3007.7,29,3123.3-0.7,3218.1-0.7c130.4,0,251.9,62.2,323,183.7C3644.8,34.9,3801.9-0.7,3911.5-0.7
|
||||
c151.1,0,284.5,71.1,355.6,195.6c23.7,41.5,65.2,133.3,65.2,314.1v770.5h-290.4V592c0-139.3-14.8-195.6-26.7-222.2
|
||||
c-17.8-47.4-62.2-109.6-165.9-109.6c-71.1,0-133.3,38.5-171.9,91.9c-50.4,71.1-56.3,177.8-56.3,284.5v643h-290.4V592
|
||||
c0-139.3-14.8-195.6-26.7-222.2c-17.8-47.4-62.2-109.6-166-109.6c-71.1,0-133.3,38.5-171.9,91.9c-50.4,71.1-56.3,177.8-56.3,284.5
|
||||
v643h-290.4V31.9z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
18
public/logos/bmw.svg
Normal file
18
public/logos/bmw.svg
Normal file
@@ -0,0 +1,18 @@
|
||||
<svg width="100%" height="100%" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="center">
|
||||
<path id="blue"
|
||||
d="M477.778,300c-0,98.248 -79.53,177.778 -177.778,177.778l-0,-177.778l177.778,-0Zm-177.778,-177.778l-0,177.778l-177.778,-0c0,-98.248 79.53,-177.778 177.778,-177.778Z"
|
||||
style="fill:#0166b1;fill-rule:nonzero;" />
|
||||
<path id="white"
|
||||
d="M300,122.222c98.248,0 177.778,79.53 177.778,177.778l-177.778,0l0,-177.778Zm-177.778,177.778l177.778,0l0,177.778c-98.248,-0 -177.778,-79.53 -177.778,-177.778Z"
|
||||
style="fill:#fff;fill-rule:nonzero;" />
|
||||
</g>
|
||||
<g id="grey">
|
||||
<path id="path14"
|
||||
d="M300,122.222l0,9.748c92.643,-0 168.031,75.369 168.031,168.03l9.747,-0c-0,-98.178 -79.6,-177.778 -177.778,-177.778m0,345.808c-92.643,0 -168.03,-75.369 -168.03,-168.03l-9.748,-0c0,98.178 79.6,177.778 177.778,177.778m0,-477.778c-165.681,0 -300,134.319 -300,300c0,165.681 134.319,300 300,300c165.681,-0 300,-134.319 300,-300c-0,-165.681 -134.319,-300 -300,-300Zm280.492,300c-0,154.904 -125.571,280.492 -280.492,280.492c-154.921,-0 -280.492,-125.588 -280.492,-280.492c0,-154.904 125.588,-280.492 280.492,-280.492c154.904,0 280.492,125.588 280.492,280.492Z"
|
||||
style="fill:#6f6f6f;fill-rule:nonzero;" />
|
||||
<path id="B_x5F_22d_61_"
|
||||
d="M171.797,155.274c9.586,-10.028 15.014,-21.614 5.427,-32.674c-5.216,-6.003 -13.974,-7.316 -21.235,-4.358l-0.722,0.28l0.229,-0.63c1.075,-2.853 1.762,-11.953 -6.045,-18.236c-3.806,-3.063 -8.582,-4.201 -13.41,-3.711c-9.005,0.911 -15.931,7.018 -34.787,27.897c-5.692,6.3 -13.975,16.241 -18.944,22.681l51.792,48.793c17.164,-18.866 24.161,-25.884 37.695,-40.042Zm-67.583,-11.936c10.433,-12.671 21.517,-24.169 26.54,-28.719c1.586,-1.435 3.313,-2.87 5.41,-3.43c3.401,-0.928 6.908,1.47 7.701,4.935c0.793,3.483 -1.41,6.791 -3.859,9.521c-5.516,6.178 -25.747,27.196 -25.747,27.196l-10.045,-9.503Zm20.284,19.111c-0,0 19.702,-20.686 26.134,-27.301c2.555,-2.625 4.194,-4.218 5.956,-5.076c2.274,-1.102 4.758,-1.33 6.979,0.14c2.185,1.453 3.19,3.956 2.643,6.441c-0.652,2.957 -3.084,5.775 -5.093,7.928c-2.713,2.887 -26.081,27.721 -26.116,27.756l-10.503,-9.888Zm181.423,-65.366l16.583,-36.892l1.057,-3.273l-0.299,3.413l1.744,49.3c5.816,0.543 11.825,1.348 17.746,2.328l-2.696,-73.014c-8.283,-0.91 -16.53,-1.558 -24.777,-1.908l-16.336,40.27l-0.582,2.993l-0.581,-2.993l-16.319,-40.27c-8.247,0.35 -16.494,0.998 -24.777,1.908l-2.696,73.014c5.921,-0.98 11.93,-1.768 17.746,-2.328l1.744,-49.3l-0.299,-3.413l1.057,3.273l16.583,36.892l15.102,0l0,0Zm137.72,76.322c4.07,4.34 9.939,11.341 13.234,15.593l60.692,-38.257c-3.031,-3.938 -7.86,-9.923 -11.472,-14.141l-38.435,25.237l-2.626,2.24l1.956,-2.835l16.971,-33.637l-12.001,-11.918l-33.888,16.853l-2.855,1.943l2.273,-2.608l25.43,-38.152c-4.476,-3.78 -8.776,-7.246 -14.257,-11.446l-38.523,60.221c4.882,3.728 11.314,9.206 15.42,12.933l36.267,-18.691l2.326,-1.697l-1.709,2.31l-18.803,36.052Z"
|
||||
style="fill:#6f6f6f;fill-rule:nonzero;" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 9.4 KiB |
5
public/logos/fiat.svg
Normal file
5
public/logos/fiat.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 555.61293 420.69841" height="100%" width="100%">
|
||||
<path fill="currentColor" fill-rule="evenodd"
|
||||
d="M188.25961,110.03541h60.35085V530.73382H188.25961Zm258.71532,0v50.76074h46.78945V530.73382h58.47326V160.79615H598.268V110.03541ZM42.65507,530.73382h58.47481V339.87506h49.801V289.80989h-49.801V160.79615h64.96737V110.03541H42.65507ZM454.727,503.17571q.01858,13.82864.01549,27.55811H400.0476q-.072-23.873-.10844-47.98231c-.04492-16.04781-.12083-32.1235-.29434-48.1442-.34546-32.01041-1.07977-63.89534-2.75287-94.73225h-64.3291V530.73382H280.043V110.03541H403.44492a314.79248,314.79248,0,0,1,18.95559,44.95679,441.48955,441.48955,0,0,1,13.19735,48.70654c3.58477,16.748,6.43523,34.01736,8.72645,51.58877,2.29121,17.566,4.034,35.53864,5.38025,53.67162,1.34623,18.12369,2.30516,36.56186,3.00228,55.01785.69713,18.43739,1.14174,37.1366,1.433,55.69483.29124,18.5133.43687,37.3225.51432,55.76532Q454.71224,489.34128,454.727,503.17571ZM393.16621,289.80989c-4.70017-48.10237-12.762-92.62384-26.72156-129.01374h-33.8818V289.80989Z"
|
||||
transform="translate(-42.65507 -110.03541)" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
11
public/logos/ford.svg
Normal file
11
public/logos/ford.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.7 KiB |
@@ -1,5 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" style="enable-background:new 0 0 640 640;" xml:space="preserve"
|
||||
viewBox="5.67 143.05 628.65 387.55">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="5.67 143.05 628.65 387.55">
|
||||
<g>
|
||||
<path id="teabag" fill="#FFF"
|
||||
d="M395.9,484.2l-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5,21.2-17.9,33.8-11.8 c17.2,8.3,27.1,13,27.1,13l-0.1-109.2l16.7-0.1l0.1,117.1c0,0,57.4,24.2,83.1,40.1c3.7,2.3,10.2,6.8,12.9,14.4 c2.1,6.1,2,13.1-1,19.3l-61,126.9C423.6,484.9,408.4,490.3,395.9,484.2z">
|
||||
|
||||
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1041.73 179.59" overflow="visible"
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1041.73 179.59" overflow="visible"
|
||||
xml:space="preserve">
|
||||
<path fill="currentColor" d="M646.69,53.92l0,10.04c0,1.87-1.54,3.37-3.41,3.3c-2.85-0.11-6.83-0.25-9.27-0.29
|
||||
c-13.63,0-21.15,8.13-21.15,22.9v36.6c0,1.82-1.48,3.3-3.3,3.3H597.6c-1.82,0-3.29-1.48-3.29-3.3V52.98c0-1.82,1.48-3.3,3.29-3.3
|
||||
|
||||
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
7
public/logos/okko.svg
Normal file
7
public/logos/okko.svg
Normal file
@@ -0,0 +1,7 @@
|
||||
<svg data-v-3153e3cf="" width="100%" height="100%" viewBox="0 0 62 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="currentColor">
|
||||
<path
|
||||
d="M28.06 55.617h-1.209c-1.41 0-2.418 1.21-2.216 2.62h6.045c1.814-1.814 3.829-3.224 6.045-4.232-.604-2.418-1.007-5.038-.806-7.456-1.813.202-3.425.403-5.239 1.008-.604.201-.806.604-.604 1.209l1.813 4.232c-1.209.806-2.216 1.612-3.224 2.62h-.604zm16.121-23.98c-.403.806-.403 1.814.403 2.62 1.612 1.41 3.426 2.217 4.434 4.232.604 1.007 1.41 3.022-.403 3.224-1.613.201-4.03-1.41-5.441-2.418.604.806.806 1.813 1.209 2.62.201.402.403.604.604.604 1.612.806 4.232 1.41 5.441-.202 1.21-1.41.806-3.224-.403-4.836-1.209-2.015-3.224-2.62-4.635-4.232-.201-.201-.403-.604-.201-.806.201-.604.806-.806 1.41-.806.807-.201 1.814-.403 2.419-.604.604-.403.806-1.008 1.007-1.41l.202-1.008c-1.41.403-3.023.806-4.232 1.41-.403.403-1.41 1.008-1.814 1.612zm-20.755-8.463c2.62-4.635 5.642-9.068 8.866-13.3.605-2.015.202-3.627-.604-5.24l-1.612-3.626a144.276 144.276 0 00-9.068 17.531c-.403.806-.202 1.814.403 2.418.604.605 1.41 1.41 2.015 2.217zm-9.471 35.063c5.239-7.456 13.702-12.292 22.77-12.695.806 2.62 2.217 5.037 3.83 7.254 3.022-.605 6.044-.403 8.866.403l.806 2.015c0 .202 0 .403-.202.403h-.806c-1.41 0-2.418 1.21-2.217 2.62h5.643c.806 0 1.41-.806 1.209-1.612l-2.418-6.247c-1.612-.605-3.224-.806-4.837-1.008l-3.425-8.866c-.605-1.612-2.62-2.418-4.03-2.821-1.612-.403-3.628-.605-5.441-.403 2.015-1.008 4.03-2.016 6.247-2.822 1.209-.403 2.015-1.41 2.418-2.418.403-1.007.604-1.813 1.007-2.82-1.813.805-3.627 1.611-5.44 2.619l3.627-2.418c1.612-1.008 2.418-2.015 2.82-3.627.202-1.21.404-2.217.605-3.426-2.216.806-4.634 2.015-6.65 3.022 1.008-.806 2.62-1.813 3.628-2.418 2.216-1.41 3.425-3.627 3.627-6.247V13.3c-3.023 1.813-6.045 3.627-8.867 5.844 1.612-1.612 3.225-3.225 5.038-4.635 2.62-2.418 3.627-5.643 3.023-9.068-.403-1.814-.806-3.627-1.41-5.441-3.426 3.224-6.65 6.851-9.673 10.479-3.224 4.03-6.247 8.463-9.068 12.896-.403.806-.403 1.612 0 2.217 1.007 1.41 2.015 3.023 2.418 4.635 1.209 4.634-1.21 6.045-3.627 7.859-.605.403-.605 0-.403-.202l.604-.604c1.814-1.613 2.015-4.635.806-6.852-1.612-2.82-3.828-5.44-6.448-7.456-.403 1.008-1.008 2.015-2.62 3.023-1.007.604-3.224 2.217-5.037 4.836.806 1.21 1.612 2.015 2.82 2.821.404-.403.807-.806 1.411-1.209.403-.403 1.008-.201 1.21.202.402-.403.402.201 0 .604l-.404.403c-.403.403-1.007.202-1.209-.201 0 0 0-.202-.201-.202l-.403.403c.403.806 1.007 2.217 1.209 2.217.201 0 .201 0 .403-.202l1.612-1.41c0-.202.201 0 .201.201-1.612 3.023-3.425 6.65-4.433 9.875-.201.604 0 1.209.202 1.612.806 1.41 2.216 2.82 2.62 3.224-1.411 1.813-2.62 3.829-3.628 5.844-.201.403-.604.604-1.209.604H8.917c-1.41 0-2.418 1.21-2.217 2.62h7.255zm16.322 7.859h-4.03L20.2 71.939v-5.843h-3.224v13.501h3.224V75.97l2.217-2.015 4.03 5.844h4.232l-5.642-8.061 5.24-5.642zm16.121 0h-4.03l-6.046 5.843v-5.843h-3.224v13.501h3.224V75.97l2.217-2.015 4.03 5.844h4.232l-5.642-8.061 5.239-5.642zm-35.869 0c-1.008-.202-2.217-.403-3.224-.403-1.008 0-2.217.201-3.224.403a4.77 4.77 0 00-3.628 3.627c-.604 2.217-.604 4.232 0 6.448a4.77 4.77 0 003.628 3.627c1.007 0 2.216.202 3.224.202 1.007 0 2.216-.201 3.224-.403a4.77 4.77 0 003.627-3.627c.605-2.217.605-4.232 0-6.449-.403-1.612-1.813-3.022-3.627-3.425zm.604 9.068c-.201.604-.604 1.209-1.41 1.209-1.612.403-3.224.403-5.038 0-.604-.202-1.209-.605-1.41-1.21a9.823 9.823 0 010-4.835c.201-.605.604-1.21 1.41-1.21 1.612-.403 3.224-.403 5.038 0 .604.202 1.209.605 1.41 1.21a9.824 9.824 0 010 4.836zm49.975-5.643a4.77 4.77 0 00-3.627-3.627c-1.007-.201-2.217-.403-3.224-.403-1.008 0-2.217.202-3.224.403a4.77 4.77 0 00-3.627 3.627c-.605 2.217-.605 4.232 0 6.449a4.77 4.77 0 003.627 3.627c1.007.202 2.216.403 3.224.403s2.217-.201 3.224-.403a4.77 4.77 0 003.627-3.627c.605-2.015.605-4.232 0-6.449zm-3.022 5.643c-.202.604-.605 1.209-1.41 1.209-1.613.403-3.225.403-5.039 0-.604-.202-1.209-.605-1.41-1.21a9.824 9.824 0 010-4.835c.201-.605.604-1.21 1.41-1.21 1.612-.403 3.224-.403 5.038 0 .605.202 1.21.605 1.41 1.21a9.822 9.822 0 010 4.836z">
|
||||
</path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
6
public/logos/sainsburys.svg
Normal file
6
public/logos/sainsburys.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 96 19">
|
||||
<g fill="currentColor" fill-rule="evenodd">
|
||||
<path
|
||||
d="M95.113 4.578c-3.03-1.301-7.086-.602-7.086 2.789 0 3.825 5.875 3.03 5.875 5.099 0 1.661-2.775 1.829-4.78.24-.14-.12-.28-.19-.443-.19-.233 0-.372.095-.372.431v.937c0 .267.07.482.35.626C91.243 15.713 96 15.739 96 11.31c0-3.8-5.944-2.934-5.944-4.833 0-1.563 2.913-1.418 4.591-.242.14.096.327.193.442.193.233 0 .374-.097.374-.432v-.795c0-.265-.07-.505-.35-.624M87.84 4.213c1.091 0 2.32-4.213.302-4.213h-1.09c-.255 0-.301.19-.301.334 0 .288.694 1.006.694 1.987 0 1.004-.37 1.364-.37 1.676 0 .121.116.216.278.216h.487M81.925 11.679l-.14-.457-2.217-6.743c-.07-.192-.162-.266-.373-.266h-2.38c-.14 0-.21.074-.21.218 0 .072.023.145.117.385l3.873 9.704c.654 1.639-1.26 2.818-3.104 2.289-.28-.073-.466-.145-.723-.145-.162 0-.303.169-.303.336v1.374c0 .29.187.626 1.213.626 2.474 0 3.804-1.3 4.994-4.359l3.826-9.897c.047-.144.093-.216.093-.313a.214.214 0 0 0-.209-.218h-1.658c-.162 0-.279.098-.326.266l-2.286 6.743-.187.457M72.278 7.438c0-1.161.396-1.887 2.82-1.234.302.073.49.145.746.145.161 0 .302-.167.302-.337V4.584c0-.242-.163-.433-.467-.507-1.677-.412-2.702.385-3.564 1.234l-.046-.026v-.798c0-.168-.117-.291-.28-.291h-2.027c-.118 0-.234.123-.234.291v10.259c0 .165.116.289.234.289h2.235c.165 0 .281-.124.281-.29V7.439M67.535 14.754V4.504c0-.168-.117-.291-.234-.291h-2.244c-.164 0-.28.123-.28.291v8.266c-.444.266-1.38.749-2.175.749-1.542 0-1.637-.964-1.637-1.788V4.504c0-.168-.117-.291-.233-.291h-2.244c-.165 0-.282.123-.282.291v7.468c0 1.957 1.006 3.31 3.251 3.31 1.285 0 2.641-.652 3.343-1.085h.047v.557c0 .165.116.288.28.288h2.174c.117 0 .234-.123.234-.288M47.123.457c0-.17.116-.292.233-.292h2.24c.162 0 .278.121.278.292v4.829-.024c.444-.386 1.47-1.233 3.058-1.233 2.403 0 3.918 2.174 3.918 5.072 0 3.718-2.495 6.182-5.575 6.182-1.68 0-2.917-.605-3.733-1.258-.35-.264-.42-.72-.42-1.108V.457zm3.08 13.257c.232.144.582.264 1.258.264 1.494 0 2.543-1.593 2.543-4.296 0-1.016-.21-3.867-2.333-3.867-.839 0-1.446.485-1.797.75v6.52c0 .22.048.435.328.63zM44.962 4.578c-3.03-1.301-7.088-.602-7.088 2.789 0 3.825 5.875 3.03 5.875 5.099 0 1.661-2.775 1.829-4.78.24-.14-.12-.28-.19-.442-.19-.233 0-.373.095-.373.431v.937c0 .267.07.482.35.626 2.587 1.203 7.343 1.229 7.343-3.199 0-3.8-5.945-2.934-5.945-4.833 0-1.563 2.914-1.418 4.594-.242.14.096.325.193.442.193.233 0 .374-.097.374-.432v-.795c0-.265-.07-.505-.35-.624M27.11 4.496v10.25c0 .165.116.289.233.289h2.245c.163 0 .28-.124.28-.289V6.48c.445-.267 1.38-.749 2.175-.749 1.544 0 1.637.966 1.637 1.787v7.23c0 .164.116.288.234.288h2.245c.162 0 .28-.124.28-.289V7.277c0-1.958-1.006-3.312-3.251-3.312-1.286 0-2.642.653-3.344 1.089H29.8v-.558c0-.167-.117-.29-.281-.29h-2.175c-.117 0-.233.123-.233.29M22.086 4.504v10.242c0 .165.116.289.23.289h2.205c.16 0 .276-.124.276-.289V4.504c0-.168-.115-.291-.276-.291h-2.205c-.114 0-.23.123-.23.29M23.425.083c-1.013 0-1.498.629-1.498 1.356 0 .87.599 1.452 1.498 1.452s1.452-.582 1.452-1.452c0-.727-.484-1.356-1.452-1.356M15.89 3.965c-1.258 0-2.702.267-3.634.747a.64.64 0 0 0-.348.578v1.083c0 .34.256.482.396.482.28 0 .489-.265.629-.36.86-.601 1.722-1.013 2.864-1.013 1.419 0 1.629.963 1.629 2.144l-.005.044c0 .552-.181.654-2.206.92-1.235.168-4.052.746-4.052 3.37 0 2.167 1.676 3.323 3.632 3.323 1.071 0 1.956-.484 2.701-1.156l.046.625c0 .169.117.289.233.289h2.118c.163 0 .28-.12.28-.289V7.265c0-1.951-1.002-3.3-4.284-3.3zm1.49 8.765c0 .315-.795 1.162-1.87 1.162-1.238 0-1.706-.92-1.706-1.837 0-1.306.981-2.513 3.576-2.513v3.188zM.397 14.403c3.916 1.902 9.49.794 9.49-4.046 0-4.456-7.391-4.169-7.391-6.916 0-1.107 1.026-1.853 2.33-1.853 1.167 0 2.053.41 2.986 1.11.257.19.42.312.629.312.257 0 .327-.17.327-.387V1.228c0-.219-.046-.34-.257-.435C7.718.48 6.319.165 4.78.165 1.68.165 0 2.142 0 4.382c0 4.866 7.275 3.856 7.275 7.155 0 2-2.797 3.396-6.038 1.058-.304-.216-.444-.336-.654-.336-.396 0-.467.217-.467.434v1.227c0 .217.048.339.281.483" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
@@ -1,29 +1,122 @@
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 235.8 171" style="enable-background:new 0 0 235.8 171;" xml:space="preserve">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
x="0px" y="0px"
|
||||
viewBox="0 0 235.8 171">
|
||||
<style type="text/css">
|
||||
.st0{fill:#3C3C3B;}
|
||||
.st1{fill:#95C11F;}
|
||||
.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
|
||||
.st3{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_1_);}
|
||||
.st4{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_2_);}
|
||||
.st5{fill:url(#SVGID_3_);}
|
||||
.st6{fill:url(#SVGID_4_);}
|
||||
.st7{fill:url(#SVGID_5_);}
|
||||
.st8{fill:url(#SVGID_6_);}
|
||||
.st9{fill:url(#SVGID_7_);}
|
||||
.st10{fill:url(#SVGID_8_);}
|
||||
.st11{fill:url(#SVGID_9_);}
|
||||
.st12{fill:#878787;}
|
||||
.st13{fill-rule:evenodd;clip-rule:evenodd;fill:#706F6F;}
|
||||
.st14{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_10_);}
|
||||
.st15{fill-rule:evenodd;clip-rule:evenodd;fill:#3C3C3B;}
|
||||
.st16{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_11_);}
|
||||
.st17{opacity:0.8;}
|
||||
.st18{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_12_);}
|
||||
.st19{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_13_);}
|
||||
.st20{fill-rule:evenodd;clip-rule:evenodd;fill:#95C11F;}
|
||||
.st21{fill-rule:evenodd;clip-rule:evenodd;fill:url(#SVGID_14_);}
|
||||
.st22{fill:url(#SVGID_15_);}
|
||||
.st0 {
|
||||
fill: #3C3C3B;
|
||||
}
|
||||
|
||||
.st1 {
|
||||
fill: #95C11F;
|
||||
}
|
||||
|
||||
.st2 {
|
||||
fill-rule: evenodd;
|
||||
clip-rule: evenodd;
|
||||
fill: #FFFFFF;
|
||||
}
|
||||
|
||||
.st3 {
|
||||
fill-rule: evenodd;
|
||||
clip-rule: evenodd;
|
||||
fill: url(#SVGID_1_);
|
||||
}
|
||||
|
||||
.st4 {
|
||||
fill-rule: evenodd;
|
||||
clip-rule: evenodd;
|
||||
fill: url(#SVGID_2_);
|
||||
}
|
||||
|
||||
.st5 {
|
||||
fill: url(#SVGID_3_);
|
||||
}
|
||||
|
||||
.st6 {
|
||||
fill: url(#SVGID_4_);
|
||||
}
|
||||
|
||||
.st7 {
|
||||
fill: url(#SVGID_5_);
|
||||
}
|
||||
|
||||
.st8 {
|
||||
fill: url(#SVGID_6_);
|
||||
}
|
||||
|
||||
.st9 {
|
||||
fill: url(#SVGID_7_);
|
||||
}
|
||||
|
||||
.st10 {
|
||||
fill: url(#SVGID_8_);
|
||||
}
|
||||
|
||||
.st11 {
|
||||
fill: url(#SVGID_9_);
|
||||
}
|
||||
|
||||
.st12 {
|
||||
fill: #878787;
|
||||
}
|
||||
|
||||
.st13 {
|
||||
fill-rule: evenodd;
|
||||
clip-rule: evenodd;
|
||||
fill: #706F6F;
|
||||
}
|
||||
|
||||
.st14 {
|
||||
fill-rule: evenodd;
|
||||
clip-rule: evenodd;
|
||||
fill: url(#SVGID_10_);
|
||||
}
|
||||
|
||||
.st15 {
|
||||
fill-rule: evenodd;
|
||||
clip-rule: evenodd;
|
||||
fill: #3C3C3B;
|
||||
}
|
||||
|
||||
.st16 {
|
||||
fill-rule: evenodd;
|
||||
clip-rule: evenodd;
|
||||
fill: url(#SVGID_11_);
|
||||
}
|
||||
|
||||
.st17 {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.st18 {
|
||||
fill-rule: evenodd;
|
||||
clip-rule: evenodd;
|
||||
fill: url(#SVGID_12_);
|
||||
}
|
||||
|
||||
.st19 {
|
||||
fill-rule: evenodd;
|
||||
clip-rule: evenodd;
|
||||
fill: url(#SVGID_13_);
|
||||
}
|
||||
|
||||
.st20 {
|
||||
fill-rule: evenodd;
|
||||
clip-rule: evenodd;
|
||||
fill: #95C11F;
|
||||
}
|
||||
|
||||
.st21 {
|
||||
fill-rule: evenodd;
|
||||
clip-rule: evenodd;
|
||||
fill: url(#SVGID_14_);
|
||||
}
|
||||
|
||||
.st22 {
|
||||
fill: url(#SVGID_15_);
|
||||
}
|
||||
</style>
|
||||
<g>
|
||||
<g>
|
||||
@@ -41,7 +134,8 @@
|
||||
c7.5,1.6,16.5,3.6,18.3,4.3c1.4,0.5,2.7,1.4,3.3,2.8c0.4,0.8,0.5,1.7,0.3,2.5c-0.2,0.9-0.7,1.6-1.3,2.2c-0.7,0.8-1.4,1.5-2.1,2.2
|
||||
c-0.6,0.5-1.2,1.1-1.8,1.6c-7.3,6.1-13.1,9.7-18.9,12.7v46l-52.7,16H62.4z" />
|
||||
<polygon class="st2" points="101.7,142.6 84.8,147.3 84.8,68.4 101.7,76.8 " />
|
||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="45.1856" y1="137.0049" x2="99.5581" y2="82.6324">
|
||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="45.1856" y1="137.0049" x2="99.5581"
|
||||
y2="82.6324">
|
||||
<stop offset="0" style="stop-color:#BAE3FA" />
|
||||
<stop offset="6.445225e-002" style="stop-color:#CCEAFC" />
|
||||
<stop offset="0.1784" style="stop-color:#E3F3FE" />
|
||||
@@ -51,7 +145,8 @@
|
||||
<stop offset="1" style="stop-color:#B5DEF8" />
|
||||
</linearGradient>
|
||||
<polygon class="st3" points="84.3,67.4 84.3,148.4 63.2,155 63.2,68.4 " />
|
||||
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="85.5477" y1="126.4451" x2="130.384" y2="81.6087">
|
||||
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="85.5477" y1="126.4451" x2="130.384"
|
||||
y2="81.6087">
|
||||
<stop offset="0" style="stop-color:#BAE3FA" />
|
||||
<stop offset="6.445225e-002" style="stop-color:#CCEAFC" />
|
||||
<stop offset="0.1784" style="stop-color:#E3F3FE" />
|
||||
@@ -62,26 +157,30 @@
|
||||
</linearGradient>
|
||||
<polygon class="st4" points="115.8,67 115.9,138.8 101.9,142.8 102.3,67 " />
|
||||
|
||||
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="223.0337" y1="398.5147" x2="223.0337" y2="346.6498" gradientTransform="matrix(0 1 -1 0 462.5497 -73.9339)">
|
||||
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="223.0337" y1="398.5147" x2="223.0337"
|
||||
y2="346.6498" gradientTransform="matrix(0 1 -1 0 462.5497 -73.9339)">
|
||||
<stop offset="0" style="stop-color:#777776" />
|
||||
<stop offset="0.3251" style="stop-color:#B3B3B2" />
|
||||
<stop offset="0.399" style="stop-color:#D0D0D0" />
|
||||
<stop offset="1" style="stop-color:#757474" />
|
||||
</linearGradient>
|
||||
<polygon class="st5" points="64,159.6 64,153.3 115.9,138.6 115.9,144 " />
|
||||
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="84.3487" y1="108.7009" x2="85.1958" y2="108.7009">
|
||||
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="84.3487" y1="108.7009" x2="85.1958"
|
||||
y2="108.7009">
|
||||
<stop offset="0" style="stop-color:#706F6F" />
|
||||
<stop offset="1" style="stop-color:#9D9D9C" />
|
||||
</linearGradient>
|
||||
<rect x="84.3" y="67.4" class="st6" width="0.8" height="82.6" />
|
||||
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="101.714" y1="106.2443" x2="102.5611" y2="106.2443">
|
||||
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="101.714" y1="106.2443" x2="102.5611"
|
||||
y2="106.2443">
|
||||
<stop offset="0" style="stop-color:#706F6F" />
|
||||
<stop offset="1" style="stop-color:#9D9D9C" />
|
||||
</linearGradient>
|
||||
<rect x="101.7" y="67.4" class="st7" width="0.8" height="77.6" />
|
||||
<polygon class="st0" points="64,160.5 64,154.1 115.9,139.5 115.9,144.9 " />
|
||||
|
||||
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="224.366" y1="398.5147" x2="224.366" y2="346.6498" gradientTransform="matrix(0 1 -1 0 462.5497 -73.9339)">
|
||||
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="224.366" y1="398.5147" x2="224.366"
|
||||
y2="346.6498" gradientTransform="matrix(0 1 -1 0 462.5497 -73.9339)">
|
||||
<stop offset="0" style="stop-color:#3A3938" />
|
||||
<stop offset="0.3251" style="stop-color:#B3B3B2" />
|
||||
<stop offset="0.399" style="stop-color:#D0D0D0" />
|
||||
@@ -89,7 +188,8 @@
|
||||
</linearGradient>
|
||||
<polygon class="st8" points="64,160.9 64,154.6 115.9,139.9 115.9,145.3 " />
|
||||
|
||||
<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="222.0613" y1="373.4506" x2="227.9317" y2="371.7673" gradientTransform="matrix(0 1 -1 0 462.5497 -73.9339)">
|
||||
<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="222.0613" y1="373.4506" x2="227.9317"
|
||||
y2="371.7673" gradientTransform="matrix(0 1 -1 0 462.5497 -73.9339)">
|
||||
<stop offset="2.463050e-002" style="stop-color:#3A3938" />
|
||||
<stop offset="0.1576" style="stop-color:#454444" />
|
||||
<stop offset="0.1828" style="stop-color:#424241" />
|
||||
@@ -107,7 +207,8 @@
|
||||
<stop offset="1" style="stop-color:#706F6F" />
|
||||
</linearGradient>
|
||||
<polygon class="st9" points="64,161.7 64,155.3 115.9,140.6 115.9,146.1 " />
|
||||
<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="37.7973" y1="115.0491" x2="63.21" y2="115.0491">
|
||||
<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="37.7973" y1="115.0491" x2="63.21"
|
||||
y2="115.0491">
|
||||
<stop offset="2.463050e-002" style="stop-color:#3A3938" />
|
||||
<stop offset="0.1576" style="stop-color:#454444" />
|
||||
<stop offset="0.1828" style="stop-color:#424241" />
|
||||
@@ -125,7 +226,8 @@
|
||||
<stop offset="1" style="stop-color:#706F6F" />
|
||||
</linearGradient>
|
||||
<polygon class="st10" points="63.2,161.7 37.8,140.8 37.8,70.6 63.2,68.4 " />
|
||||
<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="63.21" y1="115.0491" x2="64.0571" y2="115.0491">
|
||||
<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="63.21" y1="115.0491" x2="64.0571"
|
||||
y2="115.0491">
|
||||
<stop offset="0" style="stop-color:#706F6F" />
|
||||
<stop offset="1" style="stop-color:#000000" />
|
||||
</linearGradient>
|
||||
@@ -136,7 +238,9 @@
|
||||
c-0.9-0.5-2.1-0.1-2.8,1c-0.2,0.3-0.3,0.6-0.3,0.9c0,0,0,0,0,0c-0.5,1.2-4.6-0.1-4.6-0.1C79.8,123.6,82,123,83,122.4
|
||||
C83,122.4,83,122.4,83,122.4z" />
|
||||
|
||||
<radialGradient id="SVGID_10_" cx="35.6766" cy="-1688.7755" r="1.5343" gradientTransform="matrix(0.8693 0.4943 -0.64 1.1254 -1028.9938 2002.7954)" gradientUnits="userSpaceOnUse">
|
||||
<radialGradient id="SVGID_10_" cx="35.6766" cy="-1688.7755" r="1.5343"
|
||||
gradientTransform="matrix(0.8693 0.4943 -0.64 1.1254 -1028.9938 2002.7954)"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" style="stop-color:#BDBCBC" />
|
||||
<stop offset="1" style="stop-color:#666665" />
|
||||
</radialGradient>
|
||||
@@ -150,7 +254,9 @@
|
||||
c0.8-0.4,1.8,0,2.3,0.9c0.1,0.3,0.2,0.5,0.3,0.8c0,0,0,0,0,0c0.5,1,2.5-0.4,2.5-0.4C106.7,121.2,104.7,120.8,103.9,120.3
|
||||
C103.9,120.3,103.9,120.3,103.9,120.3z" />
|
||||
|
||||
<radialGradient id="SVGID_11_" cx="296.9223" cy="-1344.4767" r="1.6453" gradientTransform="matrix(-0.7182 0.4084 0.5069 0.8914 999.733 1195.355)" gradientUnits="userSpaceOnUse">
|
||||
<radialGradient id="SVGID_11_" cx="296.9223" cy="-1344.4767" r="1.6453"
|
||||
gradientTransform="matrix(-0.7182 0.4084 0.5069 0.8914 999.733 1195.355)"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" style="stop-color:#BDBCBC" />
|
||||
<stop offset="1" style="stop-color:#666665" />
|
||||
</radialGradient>
|
||||
@@ -162,8 +268,10 @@
|
||||
<g>
|
||||
<polygon class="st1" points="83.4,140.1 75.1,142 75.1,89.4 68.7,89.4 68.7,149.6 83.4,145.8 " />
|
||||
<g>
|
||||
<polygon class="st1" points="100.7,136 95.9,137.2 95.8,89.5 90,89.5 89.9,138.6 86.1,139.4 86.1,145.1 100.7,141.3 "/>
|
||||
<polygon class="st1" points="109.4,89.4 109.3,134 103.5,135.4 103.5,140.6 113,138.1 113,89.4 "/>
|
||||
<polygon class="st1"
|
||||
points="100.7,136 95.9,137.2 95.8,89.5 90,89.5 89.9,138.6 86.1,139.4 86.1,145.1 100.7,141.3 " />
|
||||
<polygon class="st1"
|
||||
points="109.4,89.4 109.3,134 103.5,135.4 103.5,140.6 113,138.1 113,89.4 " />
|
||||
</g>
|
||||
</g>
|
||||
<polygon class="st12" points="68.2,89.4 68.7,89.4 68.7,149.6 68.2,149.7 " />
|
||||
@@ -337,7 +445,8 @@ AAAAAAAAcAv/X4ABAB5K7LMsWsNHAAAAAElFTkSuQmCC" transform="matrix(0.24 0 0 0.24 0
|
||||
</g>
|
||||
<g>
|
||||
|
||||
<linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="123.5676" y1="43.4801" x2="209.8533" y2="43.4801" gradientTransform="matrix(-1 0 0 1 243.7973 0)">
|
||||
<linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="123.5676" y1="43.4801"
|
||||
x2="209.8533" y2="43.4801" gradientTransform="matrix(-1 0 0 1 243.7973 0)">
|
||||
<stop offset="2.463050e-002" style="stop-color:#000000" />
|
||||
<stop offset="5.907518e-002" style="stop-color:#393837" />
|
||||
<stop offset="0.1305" style="stop-color:#727271" />
|
||||
@@ -365,7 +474,8 @@ AAAAAAAAcAv/X4ABAB5K7LMsWsNHAAAAAElFTkSuQmCC" transform="matrix(0.24 0 0 0.24 0
|
||||
<path class="st18" d="M34.3,73.3c-1.3,0,1.3-5.9,1.3-5.9L34,31.3c0,0,9.4-20,45.2-20.9c35.8-0.9,41,16.3,41,16.3l-1.6,46.9
|
||||
C119.1,80.4,35.7,73.4,34.3,73.3z" />
|
||||
|
||||
<linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="164.6338" y1="108.6704" x2="164.6338" y2="65.7225" gradientTransform="matrix(-1 0 0 1 243.7973 0)">
|
||||
<linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="164.6338" y1="108.6704"
|
||||
x2="164.6338" y2="65.7225" gradientTransform="matrix(-1 0 0 1 243.7973 0)">
|
||||
<stop offset="0" style="stop-color:#FFFFFF" />
|
||||
<stop offset="0.1606" style="stop-color:#D1D1D1" />
|
||||
<stop offset="0.3269" style="stop-color:#A3A3A2" />
|
||||
@@ -375,12 +485,14 @@ AAAAAAAAcAv/X4ABAB5K7LMsWsNHAAAAAElFTkSuQmCC" transform="matrix(0.24 0 0 0.24 0
|
||||
<stop offset="0.9043" style="stop-color:#151515" />
|
||||
<stop offset="1" style="stop-color:#000000" />
|
||||
</linearGradient>
|
||||
<path class="st19" d="M135.5,87c6.4-5.3,4.2-6.6,3.3-7.8c-1-1.3-13.2-4.3-18.2-5.2c-5.1-1-22.4-4.6-53-7.5
|
||||
<path class="st19"
|
||||
d="M135.5,87c6.4-5.3,4.2-6.6,3.3-7.8c-1-1.3-13.2-4.3-18.2-5.2c-5.1-1-22.4-4.6-53-7.5
|
||||
c-30.6-2.9-37.6,2.8-44.3,9.1c-6.7,6.3-4.8,15.7-3.9,17.6c5.1,10.6,18.5,15.4,18.5,15.4l0-13.1c-0.1-3.4,3.6-8.3,3.6-8.3
|
||||
c3.8-6.1,25.2-8.8,49.8-4.9c24.6,4,27.6,5.8,27.3,9.1c-0.1,1.7-2.7,3.8-2.7,3.8v4.5C122.6,96.6,129.1,92.4,135.5,87z" />
|
||||
<path class="st20" d="M118.1,73.2c0,0-24.6-18.5-66.5-8.5L118.1,73.2z" />
|
||||
|
||||
<linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="103.836" y1="73.2033" x2="222.802" y2="73.2033" gradientTransform="matrix(-1 0 0 1 243.7973 0)">
|
||||
<linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="103.836" y1="73.2033" x2="222.802"
|
||||
y2="73.2033" gradientTransform="matrix(-1 0 0 1 243.7973 0)">
|
||||
<stop offset="0" style="stop-color:#EDEDED" />
|
||||
<stop offset="3.354298e-002" style="stop-color:#DDDDDC" />
|
||||
<stop offset="0.103" style="stop-color:#B1B0B0" />
|
||||
@@ -408,7 +520,8 @@ AAAAAAAAcAv/X4ABAB5K7LMsWsNHAAAAAElFTkSuQmCC" transform="matrix(0.24 0 0 0.24 0
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="115.8462" y1="117.0116" x2="116.6933" y2="117.0116">
|
||||
<linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="115.8462" y1="117.0116" x2="116.6933"
|
||||
y2="117.0116">
|
||||
<stop offset="0" style="stop-color:#706F6F" />
|
||||
<stop offset="1" style="stop-color:#000000" />
|
||||
</linearGradient>
|
||||
|
||||
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 29 KiB |
17
public/logos/suzuki.svg
Normal file
17
public/logos/suzuki.svg
Normal file
@@ -0,0 +1,17 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 28">
|
||||
<g fill="#00368f">
|
||||
<rect x="138.06364" y="5.95997" width="5.93637" height="16.03085" />
|
||||
<polygon
|
||||
points="128.43102 21.99082 122.26057 16.12233 122.26057 21.99082 116.31824 21.99082 116.31824 5.95997 122.26057 5.95997 122.26057 11.65301 128.89495 5.95997 136.67496 5.95997 127.53718 13.76804 136.39792 21.99082 128.43102 21.99082" />
|
||||
<path
|
||||
d="M105.0573,22.60581c-8.16994,0-9.15016-3.41103-9.17666-5.97666-.01442-1.42581-.03136-4.05855-.03136-4.8569v-5.81564h5.68442v9.26336c0,2.35523,1.08684,3.40538,3.5236,3.40538,2.43723,0,3.52407-1.05015,3.52407-3.40538V5.9566h5.68473v5.81564c0,.78424-.01709,3.41698-.03167,4.8569-.0265,2.56564-1.00688,5.97666-9.17713,5.97666Z" />
|
||||
<polygon
|
||||
points="75.20953 21.99082 75.20953 18.67261 84.61007 9.89199 75.52169 9.89199 75.52169 5.95997 93.86465 5.95997 93.86465 9.28084 84.33491 18.04107 93.83439 18.04107 93.83439 21.99082 75.20953 21.99082" />
|
||||
<path
|
||||
d="M64.32688,22.60581c-8.17103,0-9.15079-3.41103-9.17697-5.97666-.01442-1.4186-.0312-4.05134-.0312-4.8569v-5.81564h5.68426v9.26336c0,2.35523,1.08684,3.40538,3.52391,3.40538s3.52391-1.05015,3.52391-3.40538V5.9566h5.6841v5.81564c0,.80556-.01678,3.43831-.0312,4.8569-.02618,2.56564-1.00594,5.97666-9.17681,5.97666Z" />
|
||||
<path
|
||||
d="M44.1849,22.37948c-8.50075,0-9.99006-2.60452-10.27259-5.44641h7.19144c.65238,1.89805,2.57316,1.89805,3.20909,1.89805.76919,0,2.54024-.13295,2.54024-1.36654,0-1.08025-1.20552-1.19659-3.03035-1.37219-.23831-.02289-.4887-.04704-.74991-.07463-5.84841-.61334-8.81777-1.59231-8.81777-5.24197,0-1.59012.87267-5.28885,8.9559-5.28885l.07322.00016c6.18221.0174,9.75127,1.9479,9.81446,5.30123h-6.60914c-.44653-1.58918-2.20911-1.82906-3.22962-1.82906-.39447,0-1.72668.04798-2.30616.66728-.19927.21291-.29021.47161-.27045.76919.05346.87298,1.711,1.06112,3.80942,1.29944.43147.04892.88208.10003,1.3413.15961,5.25608.6723,7.8109,2.3891,7.8109,5.24855,0,1.23139-.67308,5.25137-9.33517,5.27615h-.1248Z" />
|
||||
</g>
|
||||
<path fill="#de0039"
|
||||
d="M10.79075,6.13983l5.87702,3.94919c1.21775.8183,2.46441,1.61765,4.61253,1.61765,3.34385,0,6.32211-2.43131,6.32211-2.43131L13.79921,0s-1.50625,1.65691-6.23338,4.60268C2.6025,7.69576,0,8.59394,0,8.59394l17.81493,11.98074-1.17115.76751-5.7152-3.84043c-1.21178-.81428-2.46323-1.61685-4.61157-1.61685C2.9733,15.88491.00127,18.32277.00127,18.32277l13.80398,9.27589s1.50647-1.65698,6.2336-4.60274c4.96319-3.09301,7.56591-3.99126,7.56591-3.99126L9.62103,6.90833l1.16972-.7685Z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
24
public/logos/suzuki_vertical.svg
Normal file
24
public/logos/suzuki_vertical.svg
Normal file
@@ -0,0 +1,24 @@
|
||||
<svg viewBox="0 0 496.00001 332.42999" height="332.42999" width="496" xmlns="http://www.w3.org/2000/svg">
|
||||
<path id="refine_final" class="st0"
|
||||
d="m 223.59651,49.000052 46.92657,31.517149 c 9.72343,6.530577 19.67771,12.909917 36.82991,12.909917 26.69981,0 50.48049,-19.403463 50.48049,-19.403463 L 247.61833,1.481344e-4 c 0,0 -12.02703,13.2232368656 -49.772,36.7324318656 -39.63096,24.684824 -60.41129,31.852894 -60.41129,31.852894 l 142.24783,95.614216 -9.35135,6.12524 -45.63446,-30.64917 c -9.67576,-6.49849 -19.66829,-12.90352 -36.82225,-12.90352 -26.6987,0 -50.42964,19.45573 -50.42964,19.45573 l 110.22138,74.02775 c 0,0 12.0288,-13.22381 49.77376,-36.73293 39.62984,-24.68425 60.41193,-31.85289 60.41193,-31.85289 L 214.25658,55.133192 Z"
|
||||
style="fill:#de0039;stroke-width:7.98271" />
|
||||
<g id="g482" transform="matrix(4.5054987,0,0,4.5675933,-152.79187,228.99519)">
|
||||
<rect class="st1" x="138.06364" y="5.95997" width="5.9363699" height="16.030849" id="rect6"
|
||||
style="fill:#00368f" />
|
||||
<polygon class="st1"
|
||||
points="128.43102,21.99082 122.26057,16.12233 122.26057,21.99082 116.31824,21.99082 116.31824,5.95997 122.26057,5.95997 122.26057,11.65301 128.89495,5.95997 136.67496,5.95997 127.53718,13.76804 136.39792,21.99082 "
|
||||
id="polygon8" style="fill:#00368f" />
|
||||
<path class="st1"
|
||||
d="m 105.0573,22.60581 c -8.16994,0 -9.15016,-3.41103 -9.17666,-5.97666 -0.01442,-1.42581 -0.03136,-4.05855 -0.03136,-4.8569 V 5.95661 h 5.68442 v 9.26336 c 0,2.35523 1.08684,3.40538 3.5236,3.40538 2.43723,0 3.52407,-1.05015 3.52407,-3.40538 V 5.9566 h 5.68473 v 5.81564 c 0,0.78424 -0.0171,3.41698 -0.0317,4.8569 -0.0265,2.56564 -1.00688,5.97666 -9.17713,5.97666 z"
|
||||
id="path10" style="fill:#00368f" />
|
||||
<polygon class="st1"
|
||||
points="84.61007,9.89199 75.52169,9.89199 75.52169,5.95997 93.86465,5.95997 93.86465,9.28084 84.33491,18.04107 93.83439,18.04107 93.83439,21.99082 75.20953,21.99082 75.20953,18.67261 "
|
||||
id="polygon12" style="fill:#00368f" />
|
||||
<path class="st1"
|
||||
d="m 64.32688,22.60581 c -8.17103,0 -9.15079,-3.41103 -9.17697,-5.97666 -0.01442,-1.4186 -0.0312,-4.05134 -0.0312,-4.8569 V 5.95661 h 5.68426 v 9.26336 c 0,2.35523 1.08684,3.40538 3.52391,3.40538 2.43707,0 3.52391,-1.05015 3.52391,-3.40538 V 5.9566 h 5.6841 v 5.81564 c 0,0.80556 -0.01678,3.43831 -0.0312,4.8569 -0.02618,2.56564 -1.00594,5.97666 -9.17681,5.97666 z"
|
||||
id="path14" style="fill:#00368f" />
|
||||
<path class="st1"
|
||||
d="m 44.1849,22.37948 c -8.50075,0 -9.99006,-2.60452 -10.27259,-5.44641 h 7.19144 c 0.65238,1.89805 2.57316,1.89805 3.20909,1.89805 0.76919,0 2.54024,-0.13295 2.54024,-1.36654 0,-1.08025 -1.20552,-1.19659 -3.03035,-1.37219 -0.23831,-0.02289 -0.4887,-0.04704 -0.74991,-0.07463 -5.84841,-0.61334 -8.81777,-1.59231 -8.81777,-5.24197 0,-1.59012 0.87267,-5.28885 8.9559,-5.28885 l 0.07322,1.6e-4 c 6.18221,0.0174 9.75127,1.9479 9.81446,5.30123 H 46.48949 C 46.04296,9.19915 44.28038,8.95927 43.25987,8.95927 c -0.39447,0 -1.72668,0.04798 -2.30616,0.66728 -0.19927,0.21291 -0.29021,0.47161 -0.27045,0.76919 0.05346,0.87298 1.711,1.06112 3.80942,1.29944 0.43147,0.04892 0.88208,0.10003 1.3413,0.15961 5.25608,0.6723 7.8109,2.3891 7.8109,5.24855 0,1.23139 -0.67308,5.25137 -9.33517,5.27615 h -0.1248 z"
|
||||
id="path16" style="fill:#00368f" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
12
public/logos/wog.svg
Normal file
12
public/logos/wog.svg
Normal file
@@ -0,0 +1,12 @@
|
||||
<svg id="logo" viewBox="0 0 130 40" fill="none" stroke="none" height="100%" width="100%"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<path
|
||||
d="M79.37 12.49l-2.1 7.61c-.17.68-.79 3.47-1 5.52h-.18c-.2-2.23-.76-4.63-1-5.68l-1.67-7.46h-5.33l-1.68 7.46c-.23 1.05-.8 3.45-1 5.68h-.18c-.2-2.05-.82-4.85-1-5.52l-2.1-7.61H56l5.5 17.36c.68 2.13 1.79 3.24 3.7 3.24 1.88 0 3.08-1.17 3.55-3.24l.82-3.54c.36-1.49.86-3.65 1.09-5.29h.17c.23 1.64.73 3.8 1.08 5.3l.83 3.53c.5 2.07 1.68 3.24 3.55 3.24 1.91 0 3.03-1.11 3.7-3.24l5.5-17.36h-6.12zM96 12.05c-6.24 0-11.02 4.59-11.02 10.52S89.78 33.09 96 33.09c6.23 0 11.01-4.59 11.01-10.52.01-5.93-4.78-10.52-11-10.52zm0 15.93a5.36 5.36 0 01-5.45-5.41A5.36 5.36 0 0196 17.16a5.36 5.36 0 015.44 5.41 5.36 5.36 0 01-5.44 5.41zM129.8 21.06h-11.84v4.15h6.49c-.32 1.52-2.24 3.01-4.88 3.01-3.66 0-5.61-2.46-5.61-5.64a5.36 5.36 0 015.52-5.44c2.2 0 3.88 1.12 4.8 2.81l5.08-2.07c-1.8-3.51-5.11-5.81-9.87-5.81-6.17 0-11.01 4.56-11.01 10.52s4.64 10.52 11.01 10.52c6.99-.01 11.48-5.48 10.3-12.05z"
|
||||
fill="#009345"></path>
|
||||
<path d="M42.61 0a6.67 6.67 0 00-6 9.62l6 12.1 6-12.1a6.67 6.67 0 00-6-9.62z" fill="#8BC53F"></path>
|
||||
<path
|
||||
d="M21.23 29.02L15.77 40 .7 9.6A6.65 6.65 0 013.73.7a6.71 6.71 0 018.96 3.02l8.53 17.17a9.16 9.16 0 010 8.14zM39.18 29.02L33.72 40 18.65 9.6A6.65 6.65 0 0121.68.7a6.71 6.71 0 018.96 3.02l8.54 17.18a9.17 9.17 0 010 8.13z"
|
||||
fill="#009345"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
15
public/logos/youtube.svg
Normal file
15
public/logos/youtube.svg
Normal file
@@ -0,0 +1,15 @@
|
||||
<svg width="100%" height="100%" viewBox="0 0 2500 972" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M2499.59,724.777c-0,136.518 -110.685,247.202 -247.203,247.202l-978.283,0c-136.517,0 -247.202,-110.684 -247.202,-247.202l-0,-477.575c-0,-136.517 110.685,-247.202 247.202,-247.202l978.263,-0c136.517,-0 247.202,110.685 247.202,247.202l0,477.575l0.021,-0Z"
|
||||
fill="#ec2027" fill-rule="nonzero" />
|
||||
<g>
|
||||
<path
|
||||
d="M1272.54,775.227l-0,-516.056l-102.074,0l-0,-102.074l292.584,0l0,102.074l-102.033,0l0,516.056l-88.477,-0Zm467.171,-464.205l0,464.205l-81.082,-0l-0,-46.124c-17.099,38.996 -42.087,58.484 -75.068,58.484c-53.107,-0 -79.681,-37.328 -79.681,-111.942l-0,-364.623l79.846,-0l0,303.317c0,24.885 1.422,42.663 4.285,53.375c5.13,18.458 15.388,27.708 30.736,27.708c16.603,-0 27.666,-10.012 33.207,-30.097c3.028,-11.536 4.594,-30.756 4.594,-57.784l0,-296.519l83.163,-0Zm71.318,464.205l-0,-618.13l82.71,0l-0,193.209c13.843,-34.443 37.245,-51.644 70.143,-51.644c42.025,-0 69.547,29.952 82.504,89.837c6.634,30.221 9.909,82.483 9.909,156.83c-0,72.183 -3.605,123.786 -10.795,154.81c-13.575,58.278 -41.365,87.427 -83.327,87.427c-35,0 -59.164,-20.291 -72.534,-60.914l0,48.534l-78.61,0.041Zm123.478,-386.398c-22.599,-0 -36.483,23.814 -41.654,71.421c-1.051,9.641 -1.545,43.734 -1.545,102.342c-0,45.196 0.927,73.398 2.802,84.646c5.376,34.485 18.849,51.768 40.438,51.768c20.126,0 32.321,-21.136 36.668,-63.407c1.051,-8.838 1.566,-39.161 1.566,-91.074c-0,-53.746 -0.433,-84.419 -1.257,-91.877c-4.367,-42.56 -16.686,-63.819 -37.018,-63.819Zm341.263,227.117l77.745,0c-0,2.143 0.103,5.15 0.309,9.023c0.247,3.873 0.329,6.901 0.329,9.023c0,53.499 -9.867,92.433 -29.623,116.927c-19.755,24.431 -50.388,36.668 -91.98,36.668c-43.013,-0 -73.996,-14.853 -92.907,-44.517c-15.038,-23.567 -24.596,-57.907 -28.757,-103.063c-1.855,-19.797 -2.782,-57.104 -2.782,-111.941c0,-44.126 0.927,-75.521 2.782,-94.226c3.728,-37.986 11.824,-66.847 24.411,-86.624c20.6,-32.342 53.684,-48.534 99.396,-48.534c44.043,0 76.2,17.511 96.573,52.49c16.481,28.325 24.68,85.47 24.68,171.517l-0,35.247l-162.351,-0c-0.597,5.109 -0.927,15.017 -0.927,29.705c0,34.547 1.422,59.185 4.326,73.893c5.974,30.262 18.335,45.383 37.04,45.383c27.83,-0 41.736,-30.324 41.736,-90.971Zm-82.854,-131.676l80.073,-0l-0,-19.612c-0,-26.698 -1.855,-45.65 -5.583,-56.856c-5.748,-17.881 -17.387,-26.822 -34.856,-26.822c-14.605,0 -25.029,6.139 -31.188,18.417c-7.396,15.223 -10.507,36.977 -9.25,65.261l0.433,6.407c0.247,4.532 0.371,8.94 0.371,13.205Z"
|
||||
fill="#fff" fill-rule="nonzero" />
|
||||
</g>
|
||||
<g>
|
||||
<path fill="#000" fill-rule="evenodd"
|
||||
d="M125.826,778.729l0,-263.559l-125.393,-358.073l98.716,0l72.327,233.854l71.38,-233.854l95.915,0l-123.148,358.052l-0,263.58l-89.797,-0Zm243.68,-233.194c0,-80.403 6.098,-137.404 18.314,-171.065c18.19,-49.996 54.178,-75.025 107.965,-75.025c53.746,-0 89.879,25.008 108.275,75.025c12.216,33.352 18.314,90.374 18.314,171.065c-0,80.649 -6.098,137.671 -18.314,171.002c-18.396,49.749 -54.508,74.634 -108.275,74.634c-53.787,0 -89.775,-25.008 -107.965,-75.026c-12.216,-33.331 -18.314,-90.228 -18.314,-170.61Zm85.264,6.035c0,57.805 0.309,89.22 0.927,94.329c4.306,41.653 17.469,62.48 39.47,62.48c22.022,0 35.474,-17.86 40.397,-53.602c1.03,-7.807 1.545,-36.956 1.545,-87.489l0,-45.547c0,-47.318 -0.618,-75.808 -1.833,-85.47c-5.171,-35.473 -18.334,-53.21 -39.491,-53.21c-20.579,-0 -33.434,15.615 -38.584,46.783c-1.627,9.929 -2.451,36.133 -2.451,78.59l0.02,43.136Zm465.709,-239.662l0,466.821l-81.535,-0l-0,-46.392c-17.202,39.223 -42.375,58.814 -75.48,58.814c-53.437,-0 -80.155,-37.513 -80.155,-112.539l0,-366.704l80.3,-0l-0,305.027c-0,25.05 1.442,42.91 4.305,53.643c5.15,18.581 15.471,27.892 30.9,27.892c16.687,0 27.831,-10.094 33.393,-30.261c3.049,-11.598 4.635,-30.942 4.635,-58.093l0,-298.208l83.637,-0Z"
|
||||
style="fill-rule:nonzero;" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
446
src/App.svelte
446
src/App.svelte
@@ -1,7 +1,9 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import LogoGrid from './components/Grid.svelte';
|
||||
import LogoList from './components/List.svelte';
|
||||
import Grid from './components/Grid.svelte';
|
||||
import List from './components/List.svelte';
|
||||
import Header from './components/Header.svelte';
|
||||
import Preview from './components/Preview.svelte';
|
||||
|
||||
let viewMode = 'grid'; // 'grid' or 'list'
|
||||
let searchQuery = '';
|
||||
@@ -12,6 +14,8 @@
|
||||
let allTags = [];
|
||||
let selectedTags = [];
|
||||
let tagDropdownOpen = false;
|
||||
let showModal = false;
|
||||
let selectedLogo = null;
|
||||
|
||||
// Load logos from JSON file with cache busting
|
||||
onMount(async () => {
|
||||
@@ -49,18 +53,26 @@
|
||||
mq.addEventListener('change', () => {
|
||||
if (theme === 'system') applyTheme();
|
||||
});
|
||||
|
||||
// Open preview if URL contains anchor
|
||||
openLogoByAnchor(window.location.hash);
|
||||
});
|
||||
|
||||
$: {
|
||||
// Make sure to apply theme whenever it changes
|
||||
$: if (theme) {
|
||||
console.log('[Theme] Theme changed:', theme);
|
||||
applyTheme();
|
||||
}
|
||||
|
||||
// Compute all unique tags as strings
|
||||
// Compute all unique tags as objects with text and optional color
|
||||
$: allTags = Array.from(
|
||||
new Set(
|
||||
logos.flatMap(logo => (logo.tags || []))
|
||||
)
|
||||
).map(tag => typeof tag === 'object' ? tag.text : tag);
|
||||
new Map(
|
||||
logos.flatMap(logo => (logo.tags || []).map(tag => {
|
||||
if (typeof tag === 'string') return [tag, { text: tag }];
|
||||
return [tag.text, tag];
|
||||
}))
|
||||
).values()
|
||||
).sort((a, b) => a.text.localeCompare(b.text));
|
||||
|
||||
$: filteredLogos = logos.filter(logo => {
|
||||
const matchesSearch = logo.name.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
@@ -136,14 +148,20 @@
|
||||
if (theme === 'system') {
|
||||
effectiveTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
// Apply theme both ways for compatibility
|
||||
document.documentElement.setAttribute('data-theme', effectiveTheme);
|
||||
document.documentElement.className = effectiveTheme; // Add class-based theming
|
||||
console.log('[Theme] Applied theme:', effectiveTheme);
|
||||
}
|
||||
|
||||
function setTheme(newTheme) {
|
||||
if (newTheme === 'light' || newTheme === 'dark' || newTheme === 'system') {
|
||||
theme = newTheme;
|
||||
localStorage.setItem('theme', newTheme);
|
||||
console.log('[theme] setTheme:', newTheme);
|
||||
applyTheme();
|
||||
console.log('[Theme] setTheme:', newTheme);
|
||||
// Apply theme immediately after setting
|
||||
setTimeout(() => applyTheme(), 0);
|
||||
}
|
||||
}
|
||||
|
||||
function toggleTag(tag) {
|
||||
@@ -176,7 +194,21 @@
|
||||
}
|
||||
|
||||
function getTagObj(text) {
|
||||
return { text };
|
||||
return allTags.find(t => t.text === text);
|
||||
}
|
||||
|
||||
function openPreview(logo) {
|
||||
selectedLogo = logo;
|
||||
showModal = true;
|
||||
}
|
||||
|
||||
function openLogoByAnchor(hash) {
|
||||
if (!hash || !hash.startsWith('#preview-')) return;
|
||||
const anchor = decodeURIComponent(hash.replace('#preview-', '').replace(/-/g, ' '));
|
||||
const found = logos.find(l => l.name.replace(/\s+/g, '-').toLowerCase() === anchor.replace(/\s+/g, '-').toLowerCase());
|
||||
if (found) {
|
||||
openPreview(found);
|
||||
}
|
||||
}
|
||||
|
||||
// Listen for outside click to close dropdown
|
||||
@@ -188,84 +220,49 @@
|
||||
</script>
|
||||
|
||||
<main class="container">
|
||||
<header class="main-header">
|
||||
<div class="header-row">
|
||||
<h1>Logo Gallery</h1>
|
||||
<span class="logo-count">{logos.length} images in gallery</span>
|
||||
<div class="theme-switcher">
|
||||
<div class="theme-switch-group">
|
||||
<button on:click={() => setTheme('system')} class:active={theme === 'system'} aria-label="System theme">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="2"/><path d="M10 2a8 8 0 0 1 8 8" stroke="currentColor" stroke-width="2"/></svg>
|
||||
</button>
|
||||
<button on:click={() => setTheme('light')} class:active={theme === 'light'} aria-label="Light mode">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="5" stroke="currentColor" stroke-width="2"/><path d="M10 1v2M10 17v2M3.22 3.22l1.42 1.42M15.36 15.36l1.42 1.42M1 10h2M17 10h2M3.22 16.78l1.42-1.42M15.36 4.64l1.42-1.42" stroke="currentColor" stroke-width="2"/></svg>
|
||||
</button>
|
||||
<button on:click={() => setTheme('dark')} class:active={theme === 'dark'} aria-label="Dark mode">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 13A7 7 0 0 1 7 4.5a7 7 0 1 0 8.5 8.5z" stroke="currentColor" stroke-width="2"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-row header-controls">
|
||||
<div class="search-bar">
|
||||
<input type="text" placeholder="Search logos..." bind:value={searchQuery} />
|
||||
</div>
|
||||
<div class="tag-filter">
|
||||
{#each selectedTags as tagText}
|
||||
<button
|
||||
class="selected-tag"
|
||||
aria-label={`Remove tag: ${tagText}`}
|
||||
on:click={() => removeTag(tagText)}
|
||||
>
|
||||
<span>{tagText}</span>
|
||||
<span class="close">×</span>
|
||||
</button>
|
||||
{/each}
|
||||
<div class="tag-dropdown">
|
||||
<button class="dropdown-toggle" on:click={toggleDropdown} aria-label="Add tag filter">
|
||||
+ Tag{selectedTags.length ? '' : 's'}
|
||||
</button>
|
||||
{#if tagDropdownOpen}
|
||||
<div class="dropdown-list">
|
||||
{#each allTags.filter(tag => !selectedTags.includes(tag)) as tag}
|
||||
<button
|
||||
class="dropdown-tag"
|
||||
on:click={() => toggleTag(tag)}
|
||||
>
|
||||
{tag}
|
||||
</button>
|
||||
{/each}
|
||||
{#if allTags.filter(tag => !selectedTags.includes(tag)).length === 0}
|
||||
<span class="no-tags">No more tags</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="view-toggle">
|
||||
<button class:active={viewMode === 'grid'} on:click={setGridView} aria-label="Grid view">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="6" height="6" fill="currentColor"/><rect x="11" y="3" width="6" height="6" fill="currentColor"/><rect x="3" y="11" width="6" height="6" fill="currentColor"/><rect x="11" y="11" width="6" height="6" fill="currentColor"/></svg>
|
||||
</button>
|
||||
<button class:active={viewMode === 'list'} on:click={setListView} aria-label="List view">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="4" y="5" width="12" height="2" fill="currentColor"/><rect x="4" y="9" width="12" height="2" fill="currentColor"/><rect x="4" y="13" width="12" height="2" fill="currentColor"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<Header
|
||||
{logos}
|
||||
{theme}
|
||||
{setTheme}
|
||||
{viewMode}
|
||||
{setGridView}
|
||||
{setListView}
|
||||
bind:searchQuery
|
||||
{allTags}
|
||||
{selectedTags}
|
||||
{tagDropdownOpen}
|
||||
{toggleDropdown}
|
||||
{addTag}
|
||||
{removeTag}
|
||||
{toggleTag}
|
||||
{getTagObj}
|
||||
{closeDropdown}
|
||||
{filteredLogos}
|
||||
/>
|
||||
|
||||
<Preview
|
||||
bind:show={showModal}
|
||||
bind:logo={selectedLogo}
|
||||
{theme}
|
||||
{logos}
|
||||
openLogoByAnchor={openLogoByAnchor}
|
||||
/>
|
||||
|
||||
<div class="logos-container">
|
||||
{#if viewMode === 'grid'}
|
||||
<LogoGrid
|
||||
<Grid
|
||||
logos={filteredLogos}
|
||||
onCopy={copyUrl}
|
||||
onDownload={downloadLogo}
|
||||
theme={effectiveTheme}
|
||||
on:openPreview={e => openPreview(e.detail)}
|
||||
/>
|
||||
{:else}
|
||||
<LogoList
|
||||
<List
|
||||
logos={filteredLogos}
|
||||
onCopy={copyUrl}
|
||||
onDownload={downloadLogo}
|
||||
on:openPreview={e => openPreview(e.detail)}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -274,298 +271,3 @@
|
||||
<p>shadoll Logo Gallery. All logos are property of their respective owners.</p>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
:global(:root) {
|
||||
--color-bg: #fff;
|
||||
--color-text: #222;
|
||||
--color-card: #f8f8f8;
|
||||
--color-border: #ddd;
|
||||
--color-accent: #4f8cff;
|
||||
}
|
||||
:global([data-theme='dark']) {
|
||||
--color-bg: #181a1b;
|
||||
--color-text: #f3f3f3;
|
||||
--color-card: #23272a;
|
||||
--color-border: #333;
|
||||
--color-accent: #7da6ff;
|
||||
}
|
||||
:global(html), :global(body) {
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.main-header {
|
||||
margin-bottom: 1.5rem;
|
||||
background: var(--color-card);
|
||||
color: var(--color-text);
|
||||
border-radius: 8px;
|
||||
padding: 1.2rem 1rem 0.7rem 1rem;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
.header-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.header-controls {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--color-accent);
|
||||
margin-bottom: 0;
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.logo-count {
|
||||
font-family: system-ui, Arial, sans-serif;
|
||||
font-size: 0.6rem;
|
||||
font-weight: normal;
|
||||
color: var(--color-text, #444);
|
||||
margin-left: 1rem;
|
||||
align-self: center;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
.search-bar input {
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.8rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
background: var(--color-card);
|
||||
color: var(--color-text);
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
.search-bar input::placeholder {
|
||||
color: #888;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.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 .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-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-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: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;
|
||||
}
|
||||
|
||||
.view-toggle {
|
||||
display: flex;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.view-toggle button {
|
||||
padding: 0.3rem 0.5rem;
|
||||
background: var(--color-card);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.view-toggle button.active,
|
||||
.view-toggle button:focus {
|
||||
background: var(--color-accent);
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
outline: 2px solid var(--color-border);
|
||||
}
|
||||
|
||||
.theme-switcher {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.theme-switch-group {
|
||||
display: flex;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--color-border, #ccc);
|
||||
background: var(--color-card, #fff);
|
||||
}
|
||||
|
||||
.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: #fff;
|
||||
font-weight: bold;
|
||||
outline: 2px solid var(--color-border);
|
||||
}
|
||||
|
||||
.theme-switch-group button:hover {
|
||||
background: var(--color-accent, #f0f0f0);
|
||||
color: var(--color-accent-text, #4f8cff);
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.header-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.main-header {
|
||||
padding: 1rem 0.5rem 0.5rem 0.5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.logos-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:global(.logo-card), :global(.logo-item) {
|
||||
background: var(--color-card);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-border);
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 3rem;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
color: #888;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -359,7 +359,7 @@
|
||||
right: 0;
|
||||
min-width: 160px;
|
||||
background: var(--color-card, #fff);
|
||||
color: var(--color-text, #222);
|
||||
color: var(--text-color, #222);
|
||||
border: 1px solid var(--color-border, #ddd);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 16px 4px rgba(0,0,0,0.18);
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
<script>
|
||||
import Preview from './Preview.svelte';
|
||||
import Actions from './Actions.svelte';
|
||||
import Row from './Row.svelte';
|
||||
import InlineSvg from './InlineSvg.svelte';
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { getDefaultLogoColor, getThemeColor } from '../utils/colorTheme.js';
|
||||
|
||||
export let logos = [];
|
||||
export let onCopy;
|
||||
@@ -11,25 +12,185 @@
|
||||
let showModal = false;
|
||||
let selectedLogo = null;
|
||||
|
||||
function openPreview(logo) {
|
||||
selectedLogo = logo;
|
||||
showModal = true;
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
showModal = false;
|
||||
}
|
||||
|
||||
function isSvgLogo(logo) {
|
||||
return logo.format && logo.format.toLowerCase() === 'svg';
|
||||
}
|
||||
|
||||
export let theme;
|
||||
$: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
|
||||
|
||||
// Improved debug logging for color and theme for each logo
|
||||
$: {
|
||||
if (logos && logos.length) {
|
||||
logos.forEach(logo => {
|
||||
if (logo.colors) {
|
||||
const themeColor = getDefaultLogoColor(logo.colors, theme);
|
||||
const fallbackColor = getThemeColor(logo.colors, theme);
|
||||
const activeColor = logo._activeColor || themeColor;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Inline SVG logic for color switching
|
||||
let svgCache = {};
|
||||
|
||||
async function fetchInlineSvg(path) {
|
||||
if (svgCache[path]) return svgCache[path];
|
||||
const res = await fetch(path);
|
||||
const text = await res.text();
|
||||
svgCache[path] = text;
|
||||
return text;
|
||||
}
|
||||
</script>
|
||||
|
||||
<Preview show={showModal} logo={selectedLogo} theme={theme} on:close={() => showModal = false} />
|
||||
<Preview show={showModal} logo={selectedLogo} theme={theme} on:close={closeModal} />
|
||||
|
||||
<div class="logo-grid">
|
||||
{#each logos as logo}
|
||||
<Row {logo} view="grid" showActions={true} onPreview={() => { selectedLogo = logo; showModal = true; }}>
|
||||
<svelte:fragment slot="actions">
|
||||
<div class="logo-card">
|
||||
<div class="logo-image"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-label="Preview {logo.name}"
|
||||
on:click={() => openPreview(logo)}
|
||||
on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && openPreview(logo)}
|
||||
style="cursor:pointer;"
|
||||
>
|
||||
{#if isSvgLogo(logo)}
|
||||
{#key theme + (logo._activeColor || '')}
|
||||
<InlineSvg
|
||||
path={logo.path}
|
||||
color={logo.colors ? (logo._activeColor || getLogoThemeColor(logo)) : undefined}
|
||||
colorConfig={logo.colors ? logo.colorConfig : undefined}
|
||||
alt={logo.name}
|
||||
/>
|
||||
{/key}
|
||||
{:else}
|
||||
<img src={logo.path} alt={logo.name} />
|
||||
{/if}
|
||||
</div>
|
||||
<div class="logo-info">
|
||||
<h3>{logo.name}</h3>
|
||||
<div class="format-row">
|
||||
<span><strong>Format:</strong> {logo.format}</span>
|
||||
{#if logo.colors}
|
||||
<div class="color-switcher-preview align-right">
|
||||
<span
|
||||
class="color-circle color-reset"
|
||||
title="Reset to theme color"
|
||||
tabindex="0"
|
||||
role="button"
|
||||
aria-label="Reset to theme color"
|
||||
style="background: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: none;"
|
||||
on:click|stopPropagation={() => logo._activeColor = undefined}
|
||||
on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = undefined)}
|
||||
>
|
||||
<svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<circle cx="400" cy="400" r="400" style="fill:#d6d6d6;"/>
|
||||
<path d="M682.843,117.843l-565.686,565.685c-156.209,-156.21 -156.209,-409.476 0,-565.685c156.21,-156.21 409.476,-156.21 565.686,-0Z" style="fill:#33363f;"/>
|
||||
</svg>
|
||||
</span>
|
||||
{#each logo.colors as colorObj}
|
||||
<span
|
||||
class="color-circle"
|
||||
title={colorObj.label}
|
||||
style="background:{colorObj.value}"
|
||||
tabindex="0"
|
||||
role="button"
|
||||
on:click|stopPropagation={() => logo._activeColor = colorObj.value}
|
||||
on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = colorObj.value)}
|
||||
></span>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="logo-actions">
|
||||
<Actions {logo} {onCopy} {onDownload} />
|
||||
</svelte:fragment>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<p class="no-results">No logos found matching your search criteria.</p>
|
||||
{/each}
|
||||
</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));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
.logo-image {
|
||||
height: 260px;
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
.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;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
|
||||
188
src/components/Header.svelte
Normal file
188
src/components/Header.svelte
Normal file
@@ -0,0 +1,188 @@
|
||||
<script>
|
||||
export let logos = [];
|
||||
export let theme;
|
||||
export let setTheme;
|
||||
export let viewMode;
|
||||
export let setGridView;
|
||||
export let setListView;
|
||||
export let searchQuery;
|
||||
export let allTags = [];
|
||||
export let selectedTags = [];
|
||||
export let tagDropdownOpen;
|
||||
export let toggleDropdown;
|
||||
export let addTag;
|
||||
export let removeTag;
|
||||
export let getTagObj;
|
||||
</script>
|
||||
|
||||
<header class="main-header">
|
||||
<div class="header-row">
|
||||
<h1>Logo Gallery</h1>
|
||||
<span class="logo-count">{logos.length} images in gallery</span>
|
||||
<div class="theme-switcher">
|
||||
<div class="theme-switch-group">
|
||||
<button
|
||||
on:click={() => setTheme("system")}
|
||||
class:active={theme === "system"}
|
||||
aria-label="System theme"
|
||||
>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><circle
|
||||
cx="10"
|
||||
cy="10"
|
||||
r="8"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
/><path
|
||||
d="M10 2a8 8 0 0 1 8 8"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
/></svg
|
||||
>
|
||||
</button>
|
||||
<button
|
||||
on:click={() => setTheme("light")}
|
||||
class:active={theme === "light"}
|
||||
aria-label="Light mode"
|
||||
>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><circle
|
||||
cx="10"
|
||||
cy="10"
|
||||
r="5"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
/><path
|
||||
d="M10 1v2M10 17v2M3.22 3.22l1.42 1.42M15.36 15.36l1.42 1.42M1 10h2M17 10h2M3.22 16.78l1.42-1.42M15.36 4.64l1.42-1.42"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
/></svg
|
||||
>
|
||||
</button>
|
||||
<button
|
||||
on:click={() => setTheme("dark")}
|
||||
class:active={theme === "dark"}
|
||||
aria-label="Dark mode"
|
||||
>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path
|
||||
d="M15.5 13A7 7 0 0 1 7 4.5a7 7 0 1 0 8.5 8.5z"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
/></svg
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-row header-controls">
|
||||
<div class="search-bar">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search logos..."
|
||||
bind:value={searchQuery}
|
||||
/>
|
||||
</div>
|
||||
<div class="tag-filter">
|
||||
{#each selectedTags as tagText}
|
||||
<button
|
||||
class="selected-tag"
|
||||
aria-label={`Remove tag: ${getTagObj(tagText).text}`}
|
||||
on:click={() => removeTag(getTagObj(tagText).text)}
|
||||
>
|
||||
{getTagObj(tagText).text}
|
||||
<span class="close">×</span>
|
||||
</button>
|
||||
{/each}
|
||||
<div class="tag-dropdown">
|
||||
<button
|
||||
class="dropdown-toggle"
|
||||
on:click={toggleDropdown}
|
||||
aria-label="Add tag filter"
|
||||
>
|
||||
+ Tag{selectedTags.length ? "" : "s"}
|
||||
</button>
|
||||
{#if tagDropdownOpen}
|
||||
<div class="dropdown-list">
|
||||
{#each allTags.filter((t) => !selectedTags.includes(t.text)) as tagObj}
|
||||
<button
|
||||
class="dropdown-tag"
|
||||
style={tagObj.color
|
||||
? `background: ${tagObj.color}; color: #fff;`
|
||||
: ""}
|
||||
on:click={() => addTag(tagObj.text)}
|
||||
aria-label={`Add tag: ${tagObj.text}`}>{tagObj.text}</button
|
||||
>
|
||||
{/each}
|
||||
{#if allTags.filter((t) => !selectedTags.includes(t.text)).length === 0}
|
||||
<span class="no-tags">No more tags</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="view-toggle">
|
||||
<button
|
||||
class:active={viewMode === "grid"}
|
||||
on:click={setGridView}
|
||||
aria-label="Grid view"
|
||||
>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><rect x="3" y="3" width="6" height="6" fill="currentColor" /><rect
|
||||
x="11"
|
||||
y="3"
|
||||
width="6"
|
||||
height="6"
|
||||
fill="currentColor"
|
||||
/><rect x="3" y="11" width="6" height="6" fill="currentColor" /><rect
|
||||
x="11"
|
||||
y="11"
|
||||
width="6"
|
||||
height="6"
|
||||
fill="currentColor"
|
||||
/></svg
|
||||
>
|
||||
</button>
|
||||
<button
|
||||
class:active={viewMode === "list"}
|
||||
on:click={setListView}
|
||||
aria-label="List view"
|
||||
>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><rect x="4" y="5" width="12" height="2" fill="currentColor" /><rect
|
||||
x="4"
|
||||
y="9"
|
||||
width="12"
|
||||
height="2"
|
||||
fill="currentColor"
|
||||
/><rect x="4" y="13" width="12" height="2" fill="currentColor" /></svg
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
@@ -1,26 +1,35 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { onMount } from "svelte";
|
||||
export let path;
|
||||
export let color;
|
||||
export let colorConfig = { target: 'path', attribute: 'fill' };
|
||||
export let alt;
|
||||
export let colorConfig = { target: "path", attribute: "fill" };
|
||||
export const alt = "";
|
||||
|
||||
let svgHtml = '';
|
||||
let svgHtml = "";
|
||||
|
||||
async function fetchAndColorSvg() {
|
||||
const res = await fetch(path);
|
||||
let text = await res.text();
|
||||
if (!color) {
|
||||
// No user-selected color, render as-is (SVG uses fill="currentColor")
|
||||
svgHtml = text;
|
||||
// No user-selected color, add currentColor to ensure theme colors are applied
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(text, "image/svg+xml");
|
||||
const svg = doc.documentElement;
|
||||
|
||||
// Set currentColor on SVG element if no fill is specified
|
||||
if (!svg.hasAttribute("fill")) {
|
||||
svg.setAttribute("fill", "currentColor");
|
||||
}
|
||||
|
||||
svgHtml = doc.documentElement.outerHTML;
|
||||
return;
|
||||
}
|
||||
// Parse and update color only if user selected
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(text, 'image/svg+xml');
|
||||
const doc = parser.parseFromString(text, "image/svg+xml");
|
||||
// 1. Parse <style> rules and apply as inline attributes before removing <style>
|
||||
const styleEls = Array.from(doc.querySelectorAll('style'));
|
||||
styleEls.forEach(styleEl => {
|
||||
const styleEls = Array.from(doc.querySelectorAll("style"));
|
||||
styleEls.forEach((styleEl) => {
|
||||
const css = styleEl.textContent;
|
||||
// Only handle simple .class { ... } rules
|
||||
const regex = /\.([\w-]+)\s*{([^}]*)}/g;
|
||||
@@ -29,19 +38,22 @@
|
||||
const className = match[1];
|
||||
const rules = match[2];
|
||||
// Find all elements with this class
|
||||
doc.querySelectorAll('.' + className).forEach(el => {
|
||||
rules.split(';').forEach(rule => {
|
||||
const [prop, value] = rule.split(':').map(s => s && s.trim());
|
||||
doc.querySelectorAll("." + className).forEach((el) => {
|
||||
rules.split(";").forEach((rule) => {
|
||||
const [prop, value] = rule.split(":").map((s) => s && s.trim());
|
||||
if (prop && value) {
|
||||
// Apply all style properties, not just fill/stroke
|
||||
el.setAttribute(prop.replace(/-([a-z])/g, g => g[1].toUpperCase()), value);
|
||||
el.setAttribute(
|
||||
prop.replace(/-([a-z])/g, (g) => g[1].toUpperCase()),
|
||||
value,
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
// Remove all <style> elements
|
||||
styleEls.forEach(styleEl => styleEl.remove());
|
||||
styleEls.forEach((styleEl) => styleEl.remove());
|
||||
let targets;
|
||||
if (colorConfig.selector) {
|
||||
targets = doc.querySelectorAll(colorConfig.selector);
|
||||
@@ -50,21 +62,21 @@
|
||||
} else {
|
||||
targets = [];
|
||||
}
|
||||
targets.forEach(el => {
|
||||
targets.forEach((el) => {
|
||||
if (colorConfig.attribute) {
|
||||
// Legacy: force a single attribute
|
||||
el.setAttribute(colorConfig.attribute, color);
|
||||
} else {
|
||||
// Always override fill and stroke unless they are 'none'
|
||||
if (el.hasAttribute('fill') && el.getAttribute('fill') !== 'none') {
|
||||
el.setAttribute('fill', color);
|
||||
if (el.hasAttribute("fill") && el.getAttribute("fill") !== "none") {
|
||||
el.setAttribute("fill", color);
|
||||
}
|
||||
if (el.hasAttribute('stroke') && el.getAttribute('stroke') !== 'none') {
|
||||
el.setAttribute('stroke', color);
|
||||
if (el.hasAttribute("stroke") && el.getAttribute("stroke") !== "none") {
|
||||
el.setAttribute("stroke", color);
|
||||
}
|
||||
if (!el.hasAttribute('fill') && !el.hasAttribute('stroke')) {
|
||||
if (!el.hasAttribute("fill") && !el.hasAttribute("stroke")) {
|
||||
// If neither, prefer fill
|
||||
el.setAttribute('fill', color);
|
||||
el.setAttribute("fill", color);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<script>
|
||||
import Preview from './Preview.svelte';
|
||||
import Actions from './Actions.svelte';
|
||||
import Row from './Row.svelte';
|
||||
import InlineSvg from './InlineSvg.svelte';
|
||||
import { getThemeColor, getDefaultLogoColor } from '../utils/colorTheme.js';
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
|
||||
export let logos = [];
|
||||
@@ -11,25 +12,175 @@
|
||||
let showModal = false;
|
||||
let selectedLogo = null;
|
||||
|
||||
export let theme;
|
||||
let theme = getTheme();
|
||||
|
||||
function openPreview(logo) {
|
||||
selectedLogo = logo;
|
||||
showModal = true;
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
showModal = false;
|
||||
}
|
||||
|
||||
function isSvgLogo(logo) {
|
||||
return logo.format && logo.format.toLowerCase() === 'svg';
|
||||
}
|
||||
|
||||
function getTheme() {
|
||||
if (typeof window !== 'undefined' && window.matchMedia) {
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
return 'light';
|
||||
}
|
||||
|
||||
function handleThemeChange(e) {
|
||||
theme = e.matches ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
const mql = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
mql.addEventListener('change', handleThemeChange);
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
const mql = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
mql.removeEventListener('change', handleThemeChange);
|
||||
});
|
||||
|
||||
$: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
|
||||
|
||||
// Debug logging for color and theme
|
||||
$: {
|
||||
if (logos && logos.length) {
|
||||
logos.forEach(logo => {
|
||||
if (logo.colors) {
|
||||
const themeColor = getDefaultLogoColor(logo.colors, theme);
|
||||
const activeColor = logo._activeColor || themeColor;
|
||||
console.log('[LogoList] Logo:', logo.name, '| Theme:', theme, '| Theme color:', themeColor, '| Active color:', activeColor);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<Preview show={showModal} logo={selectedLogo} theme={theme} on:close={() => showModal = false} />
|
||||
<Preview show={showModal} logo={selectedLogo} on:close={closeModal} />
|
||||
|
||||
<div class="logo-list">
|
||||
{#each logos as logo}
|
||||
<Row {logo} view="list" showActions={true} onPreview={() => { selectedLogo = logo; showModal = true; }}>
|
||||
<svelte:fragment slot="actions">
|
||||
<div class="logo-item">
|
||||
<div class="logo-preview"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-label="Preview {logo.name}"
|
||||
on:click={() => openPreview(logo)}
|
||||
on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && openPreview(logo)}
|
||||
style="cursor:pointer;"
|
||||
>
|
||||
{#if isSvgLogo(logo)} <InlineSvg
|
||||
path={logo.path}
|
||||
color={logo.colors ? (logo._activeColor || getLogoThemeColor(logo)) : undefined}
|
||||
colorConfig={logo.colors ? logo.colorConfig : undefined}
|
||||
alt={logo.name}
|
||||
/>
|
||||
{:else}
|
||||
<img src={logo.path} alt={logo.name} />
|
||||
{/if}
|
||||
</div>
|
||||
<div class="logo-info">
|
||||
<h3>{logo.name}</h3>
|
||||
<div class="format-row">
|
||||
<span><strong>Format:</strong> {logo.format}</span>
|
||||
</div>
|
||||
{#if logo.colors}
|
||||
<div class="color-switcher-preview align-left">
|
||||
<span
|
||||
class="color-circle color-reset"
|
||||
title="Reset to theme color"
|
||||
tabindex="0"
|
||||
role="button"
|
||||
aria-label="Reset to theme color"
|
||||
style="background: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: none;"
|
||||
on:click|stopPropagation={() => logo._activeColor = undefined}
|
||||
on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = undefined)}
|
||||
>
|
||||
<svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<circle cx="400" cy="400" r="400" style="fill:#d6d6d6;"/>
|
||||
<path d="M682.843,117.843l-565.686,565.685c-156.209,-156.21 -156.209,-409.476 0,-565.685c156.21,-156.21 409.476,-156.21 565.686,-0Z" style="fill:#33363f;"/>
|
||||
</svg>
|
||||
</span>
|
||||
{#each logo.colors as colorObj}
|
||||
<span
|
||||
class="color-circle"
|
||||
title={colorObj.label}
|
||||
style={`background:${colorObj.value}`}
|
||||
tabindex="0"
|
||||
role="button"
|
||||
on:click|stopPropagation={() => logo._activeColor = colorObj.value}
|
||||
on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = colorObj.value)}
|
||||
></span>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="logo-actions">
|
||||
<Actions {logo} {onCopy} {onDownload} />
|
||||
</svelte:fragment>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<p class="no-results">No logos found matching your search criteria.</p>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:global(.logo-item) {
|
||||
background: var(--color-card);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
display: grid;
|
||||
grid-template-columns: 80px 2fr 3fr 150px;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
.logo-preview {
|
||||
height: 100px;
|
||||
width: 80px;
|
||||
padding: 0;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
}
|
||||
.logo-info h3 {
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--color-accent, #4f8cff);
|
||||
}
|
||||
.logo-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5em;
|
||||
gap: 1rem;
|
||||
}
|
||||
.no-results {
|
||||
text-align: center;
|
||||
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>
|
||||
|
||||
@@ -1,15 +1,22 @@
|
||||
<script>
|
||||
import { onMount, onDestroy, createEventDispatcher } from 'svelte';
|
||||
import InlineSvg from './InlineSvg.svelte';
|
||||
import { getDefaultLogoColor } from '../utils/colorTheme.js';
|
||||
import { getDefaultLogoColor, getThemeColor } from '../utils/colorTheme.js';
|
||||
|
||||
export let show = false;
|
||||
export let logo = null;
|
||||
export let theme;
|
||||
export let logos = [];
|
||||
export let openLogoByAnchor = () => {};
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function close() {
|
||||
dispatch('close');
|
||||
// Remove preview anchor from URL
|
||||
if (window.location.hash.startsWith('#preview-')) {
|
||||
history.replaceState(null, '', window.location.pathname + window.location.search);
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeydown(event) {
|
||||
@@ -22,58 +29,87 @@
|
||||
return logo && logo.format && logo.format.toLowerCase() === 'svg';
|
||||
}
|
||||
|
||||
// Helper to get tag object - simplified without tags.json
|
||||
function getTagObj(text) {
|
||||
return { text: typeof text === 'object' ? text.text : text };
|
||||
}
|
||||
|
||||
// Always use $theme directly, do not cache in a function
|
||||
export let theme;
|
||||
$: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
|
||||
|
||||
// Improved debug logging for color and theme
|
||||
$: {
|
||||
if (logo && logo.colors) {
|
||||
const themeColor = getDefaultLogoColor(logo.colors, theme);
|
||||
const fallbackColor = getThemeColor(logo.colors, theme);
|
||||
const activeColor = logo._activeColor || themeColor;
|
||||
}
|
||||
}
|
||||
|
||||
$: if (logo && logo.tags && logo.tags.length) {
|
||||
logo.tags.forEach(tag => {
|
||||
console.log('[LogoModal] Tag:', tag);
|
||||
});
|
||||
// Update URL hash when opening/closing preview
|
||||
$: if (show && logo) {
|
||||
const anchor = '#preview-' + encodeURIComponent(logo.name.replace(/\s+/g, '-').toLowerCase());
|
||||
if (window.location.hash !== anchor) {
|
||||
history.replaceState(null, '', window.location.pathname + window.location.search + anchor);
|
||||
}
|
||||
}
|
||||
|
||||
// On mount, check for preview anchor and open if present
|
||||
onMount(() => {
|
||||
document.addEventListener('keydown', handleKeydown);
|
||||
console.log('[LogoModal] Mounted, added keydown event listener');
|
||||
if (window.location.hash.startsWith('#preview-')) {
|
||||
openLogoByAnchor(window.location.hash);
|
||||
}
|
||||
window.addEventListener('hashchange', onHashChange);
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
document.removeEventListener('keydown', handleKeydown);
|
||||
window.removeEventListener('hashchange', onHashChange);
|
||||
});
|
||||
|
||||
function onHashChange() {
|
||||
if (window.location.hash.startsWith('#preview-')) {
|
||||
openLogoByAnchor(window.location.hash);
|
||||
} else {
|
||||
dispatch('close');
|
||||
}
|
||||
}
|
||||
|
||||
// Svelte action to remove width/height from SVGs for responsive scaling
|
||||
function removeSvgSize(node) {
|
||||
function cleanSvg() {
|
||||
const svgs = node.querySelectorAll('svg');
|
||||
svgs.forEach(svg => {
|
||||
svg.removeAttribute('width');
|
||||
svg.removeAttribute('height');
|
||||
svg.style.width = '100%';
|
||||
svg.style.height = '100%';
|
||||
});
|
||||
}
|
||||
cleanSvg();
|
||||
// In case SVG is loaded async (e.g. InlineSvg), observe for changes
|
||||
const observer = new MutationObserver(cleanSvg);
|
||||
observer.observe(node, { childList: true, subtree: true });
|
||||
return {
|
||||
destroy() {
|
||||
observer.disconnect();
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="modal-backdrop"
|
||||
<div class="modal-backdrop fullscreen"
|
||||
style="display: {show && logo ? 'flex' : 'none'}"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
>
|
||||
{#if logo}
|
||||
<div class="modal-content">
|
||||
<div class="modal-content fullscreen-modal">
|
||||
<div class="modal-header">
|
||||
<h2>{logo.name}</h2>
|
||||
<button class="close-btn" on:click={close} aria-label="Close preview">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="preview-container"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-label="Close preview"
|
||||
on:click={close}
|
||||
on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && close()}
|
||||
style="cursor:pointer;"
|
||||
<div class="modal-body fullscreen-body">
|
||||
<div class="preview-container fullscreen-preview"
|
||||
role="img"
|
||||
aria-label={logo.name}
|
||||
>
|
||||
<div class="preview-media-wrapper" use:removeSvgSize>
|
||||
{#if isSvgLogo(logo)}
|
||||
<InlineSvg
|
||||
path={logo.path}
|
||||
@@ -85,7 +121,8 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
|
||||
<img src={logo.path} alt={logo.name} />
|
||||
{/if}
|
||||
</div>
|
||||
<div class="logo-details">
|
||||
</div>
|
||||
<div class="logo-details fullscreen-details">
|
||||
{#if isSvgLogo(logo) && logo.colors}
|
||||
<div class="color-switcher-preview">
|
||||
<span
|
||||
@@ -123,8 +160,8 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
|
||||
<p><strong>Path:</strong> {logo.path}</p>
|
||||
{#if logo.tags && logo.tags.length}
|
||||
<div class="logo-tags">
|
||||
{#each logo.tags as tag}
|
||||
<span class="logo-tag">{typeof tag === 'object' ? tag.text : tag}</span>
|
||||
{#each logo.tags as tagObj}
|
||||
<span class="logo-tag" style={tagObj.color ? `background:${tagObj.color}` : ''}>{tagObj.text || tagObj}</span>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
@@ -135,118 +172,133 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:global(.modal-backdrop) {
|
||||
.modal-backdrop.fullscreen {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0,0,0,0.95);
|
||||
z-index: 2000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:global(.modal-content) {
|
||||
background: var(--color-card);
|
||||
color: var(--color-text);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid var(--color-border);
|
||||
transition: background 0.2s, color 0.2s;
|
||||
.modal-content.fullscreen-modal {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
max-width: 100vw;
|
||||
max-height: 100vh;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
padding: 2rem 2.5rem 1rem 2.5rem;
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
font-size: 2.2rem;
|
||||
color: var(--color-accent, #4f8cff);
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
font-size: 2.5rem;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
color: var(--color-text, #222);
|
||||
transition: color 0.2s;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: var(--color-accent, #4f8cff);
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.modal-body img {
|
||||
max-width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.preview-container {
|
||||
.modal-body.fullscreen-body {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
height: calc(100vh - 4.5rem);
|
||||
background: transparent;
|
||||
padding: 0 2.5rem 2.5rem 2.5rem;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
.preview-container.fullscreen-preview {
|
||||
flex: 2 1 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: var(--color-card);
|
||||
border-radius: 4px;
|
||||
padding: 2rem;
|
||||
min-height: 200px;
|
||||
max-height: 60vh;
|
||||
max-width: 100%;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
justify-content: center;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
background: transparent;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.preview-container img {
|
||||
max-width: 100%;
|
||||
max-height: 60vh;
|
||||
.preview-media-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.preview-media-wrapper img,
|
||||
.preview-media-wrapper svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.logo-details {
|
||||
padding: 1rem;
|
||||
background-color: var(--color-card);
|
||||
.logo-details.fullscreen-details {
|
||||
flex: 1 1 350px;
|
||||
min-width: 320px;
|
||||
max-width: 400px;
|
||||
background: var(--color-card, #23272e);
|
||||
color: var(--color-text);
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
border-radius: 12px;
|
||||
padding: 2rem 2rem 1.5rem 2rem;
|
||||
margin: 2rem 0 2rem 0;
|
||||
box-shadow: 0 2px 16px 4px rgba(0,0,0,0.18);
|
||||
overflow-y: auto;
|
||||
align-self: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.logo-details p {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.logo-tags {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.color-switcher-preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@media (max-width: 900px) {
|
||||
.modal-body.fullscreen-body {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 1.5rem;
|
||||
padding: 0 0.5rem 0.5rem 0.5rem;
|
||||
}
|
||||
|
||||
.color-circle.color-reset {
|
||||
background: none !important;
|
||||
.logo-details.fullscreen-details {
|
||||
margin: 0 auto 1.5rem auto;
|
||||
max-width: 100vw;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
padding: 1.2rem 0.7rem 1rem 0.7rem;
|
||||
}
|
||||
.modal-header {
|
||||
padding: 1.2rem 0.7rem 0.7rem 0.7rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,159 +0,0 @@
|
||||
<script>
|
||||
export let logo;
|
||||
export let onCopy;
|
||||
export let onDownload;
|
||||
export let view = 'grid'; // or 'list'
|
||||
export let showActions = true;
|
||||
export let onPreview = null;
|
||||
import InlineSvg from './InlineSvg.svelte';
|
||||
import { getDefaultLogoColor } from '../utils/colorTheme.js';
|
||||
</script>
|
||||
|
||||
<div class="logo-row {view}">
|
||||
<div
|
||||
class="logo-img"
|
||||
on:click={onPreview}
|
||||
on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && onPreview && onPreview(e)}
|
||||
tabindex="0"
|
||||
role="button"
|
||||
aria-label="Preview logo"
|
||||
>
|
||||
{#if logo.format && logo.format.toLowerCase() === 'svg'}
|
||||
<InlineSvg path={logo.path} color={logo.colors ? (logo._activeColor || getDefaultLogoColor(logo.colors)) : undefined} colorConfig={logo.colors ? logo.colorConfig : undefined} alt={logo.name} />
|
||||
{:else}
|
||||
<img src={logo.path} alt={logo.name} />
|
||||
{/if}
|
||||
</div>
|
||||
<div class="logo-info">
|
||||
<h3>{logo.name}</h3>
|
||||
<div class="format-row">
|
||||
<span><strong>Format:</strong> {logo.format}</span>
|
||||
{#if logo.colors}
|
||||
<div class="color-switcher-preview {view === 'grid' ? 'align-right' : 'align-left'}">
|
||||
<span class="color-circle color-reset" title="Reset to theme color" tabindex="0" role="button" aria-label="Reset to theme color" style="background: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: none;"
|
||||
on:click|stopPropagation={() => logo._activeColor = undefined}
|
||||
on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = undefined)}>
|
||||
<svg width="100%" height="100%" viewBox="0 0 800 800" version="1.1" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<circle cx="400" cy="400" r="400" style="fill:#d6d6d6;"/>
|
||||
<path d="M682.843,117.843l-565.686,565.685c-156.209,-156.21 -156.209,-409.476 0,-565.685c156.21,-156.21 409.476,-156.21 565.686,-0Z" style="fill:#33363f;"/>
|
||||
</svg>
|
||||
</span>
|
||||
{#each logo.colors as colorObj}
|
||||
<span class="color-circle" title={colorObj.label} style={`background:${colorObj.value}`} tabindex="0" role="button"
|
||||
on:click|stopPropagation={() => logo._activeColor = colorObj.value}
|
||||
on:keydown|stopPropagation={(e) => (e.key === 'Enter' || e.key === ' ') && (logo._activeColor = colorObj.value)}></span>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if logo.tags && logo.tags.length}
|
||||
<div class="logo-tags">
|
||||
{#each logo.tags as tag}
|
||||
<span class="logo-tag">{typeof tag === 'object' ? tag.text : tag}</span>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
<slot name="extra" />
|
||||
</div>
|
||||
{#if showActions}
|
||||
<div class="logo-actions">
|
||||
<slot name="actions" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.logo-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5em 0.5em;
|
||||
border-bottom: 1px solid #eee;
|
||||
gap: 1em;
|
||||
}
|
||||
.logo-row.grid {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
border-bottom: none;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.04);
|
||||
margin-bottom: 1em;
|
||||
padding: 1em;
|
||||
}
|
||||
.logo-row.list {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
margin-bottom: 0;
|
||||
padding: 0.5em 0.5em;
|
||||
}
|
||||
.logo-img {
|
||||
flex-shrink: 0;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
|
||||
cursor: pointer;
|
||||
}
|
||||
.logo-info {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
.logo-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
}
|
||||
.color-switcher-preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4em;
|
||||
}
|
||||
.color-switcher-preview.align-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.color-switcher-preview.align-left {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.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-circle.color-reset {
|
||||
background: none !important;
|
||||
}
|
||||
.logo-tag {
|
||||
display: inline-block;
|
||||
background: var(--color-accent, #4f8cff);
|
||||
color: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 0.2em 0.8em;
|
||||
font-size: 0.85em;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
margin-right: 0.3em;
|
||||
margin-top: 0.2em;
|
||||
margin-bottom: 0.2em;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user