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

Refactor Preview component styles for improved consistency and theme alignment

Browse Source
This commit is contained in:
sHa
2025-05-02 10:29:27 +03:00
parent 2938631e85
commit 5bf362d1f0
1 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/Preview.svelte
View File

@@ -214,7 +214,7 @@
top: 0; left: 0; right: 0; bottom: 0; top: 0; left: 0; right: 0; bottom: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background: var(--color-backdrop, rgba(0,0,0,0.95)); background: rgba(0,0,0,0.7); /* match .modal-backdrop in global.css */
z-index: 2000; z-index: 2000;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -228,7 +228,8 @@
max-height: 100vh; max-height: 100vh;
border-radius: 0; border-radius: 0;
box-shadow: none; box-shadow: none;
background: transparent; background: var(--color-card);
color: var(--color-text);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0; padding: 0;
@@ -240,7 +241,7 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 2rem 2.5rem 1rem 2.5rem; padding: 2rem 2.5rem 1rem 2.5rem;
background: transparent; background: var(--color-card);
color: var(--color-text); color: var(--color-text);
z-index: 2; z-index: 2;
flex: 0 0 auto; flex: 0 0 auto;
@@ -270,7 +271,7 @@
justify-content: center; justify-content: center;
width: 100vw; width: 100vw;
height: 100%; height: 100%;
background: transparent; background: var(--color-card);
padding: 0; padding: 0;
gap: 2.5rem; gap: 2.5rem;
overflow: hidden; overflow: hidden;
@@ -282,7 +283,7 @@
justify-content: center; justify-content: center;
min-width: 0; min-width: 0;
min-height: 0; min-height: 0;
background: transparent; background: var(--color-card);
height: 100%; height: 100%;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
@@ -308,14 +309,14 @@
max-height: 100%; max-height: 100%;
} }
.logo-details.fullscreen-details { .logo-details.fullscreen-details {
flex: 1 1 350px; flex: 1 1 300px;
min-width: 320px; min-width: 220px;
max-width: 400px; max-width: 300px;
background: var(--color-card, #23272e); background: var(--color-card);
color: var(--color-text); color: var(--color-text);
border-radius: 12px; border-radius: 12px;
padding: 2rem 2rem 1.5rem 2rem; padding: 2rem 2rem 1.5rem 2rem;
margin: 0; margin: 0 2rem 0 0;
box-shadow: 0 2px 16px 4px rgba(0,0,0,0.18); box-shadow: 0 2px 16px 4px rgba(0,0,0,0.18);
overflow-y: auto; overflow-y: auto;
align-self: center; align-self: center;