114 lines
2.8 KiB
CSS
114 lines
2.8 KiB
CSS
:root {
|
|
--bg-slate-900: #0F172A;
|
|
--bg-slate-800: #1E293B;
|
|
--text-cyan-400: #22D3EE;
|
|
--bg-cyan-500: #06B6D4;
|
|
--border-slate-700: #334155;
|
|
--text-slate-200: #E2E8F0;
|
|
--text-slate-400: #94A3B8;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg-slate-900);
|
|
color: var(--text-slate-200);
|
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
}
|
|
|
|
.navbar {
|
|
background-color: rgba(30, 41, 59, 0.8); /* bg-slate-800 with opacity */
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
border-bottom: 1px solid var(--border-slate-700);
|
|
}
|
|
|
|
.puzzle-board {
|
|
background-color: var(--bg-slate-900);
|
|
border: 2px dashed var(--border-slate-700);
|
|
aspect-ratio: 4 / 3;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.pieces-tray {
|
|
background-color: var(--bg-slate-800);
|
|
border-radius: 0.75rem;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
border: 1px solid var(--border-slate-700);
|
|
}
|
|
|
|
.btn-cyan {
|
|
background-color: var(--bg-cyan-500);
|
|
color: var(--bg-slate-900);
|
|
font-weight: bold;
|
|
border: none;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.btn-cyan:hover {
|
|
background-color: var(--text-cyan-400);
|
|
color: var(--bg-slate-900);
|
|
}
|
|
|
|
.form-select {
|
|
background-color: var(--bg-slate-800);
|
|
color: var(--text-slate-200);
|
|
border-color: var(--border-slate-700);
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
|
|
}
|
|
.form-select:focus {
|
|
background-color: var(--bg-slate-800);
|
|
color: var(--text-slate-200);
|
|
border-color: var(--text-cyan-400);
|
|
box-shadow: 0 0 0 0.25rem rgba(34, 211, 238, 0.25);
|
|
}
|
|
|
|
.text-cyan {
|
|
color: var(--text-cyan-400);
|
|
}
|
|
|
|
.text-slate-400 {
|
|
color: var(--text-slate-400);
|
|
}
|
|
|
|
.rounded-xl {
|
|
border-radius: 0.75rem;
|
|
}
|
|
|
|
/* --- Gallery --- */
|
|
.gallery-scroll-container {
|
|
overflow-x: auto;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--border-slate-700) var(--bg-slate-900);
|
|
}
|
|
|
|
.gallery-scroll-container::-webkit-scrollbar {
|
|
height: 8px;
|
|
}
|
|
|
|
.gallery-scroll-container::-webkit-scrollbar-track {
|
|
background: var(--bg-slate-900);
|
|
}
|
|
|
|
.gallery-scroll-container::-webkit-scrollbar-thumb {
|
|
background-color: var(--border-slate-700);
|
|
border-radius: 10px;
|
|
border: 2px solid var(--bg-slate-900);
|
|
}
|
|
|
|
.gallery-item {
|
|
display: block;
|
|
flex: 0 0 auto; /* Prevent shrinking */
|
|
width: 150px; /* Fixed width for items */
|
|
height: 112px; /* Fixed height for items (4:3 ratio) */
|
|
transition: transform 0.2s ease-in-out;
|
|
}
|
|
|
|
.gallery-item:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.gallery-item img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover; /* Ensure images fill the container */
|
|
} |