Sebastian Slettebakken
338d7bc8dc
- Add main application component (App.tsx) to manage counters - Create Counter component for individual counter display and editing - Implement CreateCounter component for adding new counters - Add API utility for handling server requests - Set up Vite configuration with proxy for API calls - Introduce TypeScript configuration for app and node environments - Style application with global CSS for consistent design
440 lines
9.4 KiB
CSS
440 lines
9.4 KiB
CSS
/* Clean, readable App stylesheet — uses variables from ./styles/theme.css (fallbacks provided) */
|
|
|
|
/* ---------------------------
|
|
Tokens / defaults
|
|
--------------------------- */
|
|
:root {
|
|
/* Catppuccin — Mocha (dark) inspired palette */
|
|
--cp-rosewater: #f5e0dc;
|
|
--cp-flamingo: #f2cdcd;
|
|
--cp-pink: #f5c2e7;
|
|
--cp-mauve: #cba6f7;
|
|
--cp-red: #f38ba8;
|
|
--cp-maroon: #eba0ac;
|
|
--cp-peach: #fab387;
|
|
--cp-yellow: #f9e2af;
|
|
--cp-green: #a6e3a1;
|
|
--cp-teal: #94e2d5;
|
|
--cp-sky: #89dceb;
|
|
--cp-sapphire: #74c7ec;
|
|
--cp-blue: #89b4fa;
|
|
--cp-lavender: #b4befe;
|
|
|
|
/* UI tokens mapped to Catppuccin */
|
|
--bg: #1e1e2e;
|
|
--card: #313244;
|
|
--text: #cdd6f4;
|
|
--subtext: #bac2de;
|
|
--muted: #94a1b2;
|
|
--accent: var(--cp-blue);
|
|
--accent-2: var(--cp-mauve);
|
|
--danger: var(--cp-red);
|
|
--confirm: var(--cp-green);
|
|
--danger-rgb: 220,38,38;
|
|
--border: #45475a;
|
|
--radius: 10px;
|
|
|
|
/* helper for rgba() with accent */
|
|
--accent-rgb: 137, 180, 250;
|
|
/* rgb({--cp-blue}) approximation */
|
|
|
|
/* motion / elevations */
|
|
--transition-fast: 150ms;
|
|
--elevation-1: 0 6px 20px rgba(2, 6, 23, 0.6);
|
|
|
|
--max-width: 1500px;
|
|
|
|
/* counter sizing token (adjustable) */
|
|
--counter-height: 300px;
|
|
}
|
|
|
|
/* ---------------------------
|
|
Global / base
|
|
--------------------------- */
|
|
* { box-sizing: border-box; }
|
|
|
|
html, body, #root {
|
|
height: 100%;
|
|
margin: 0;
|
|
font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
.app {
|
|
max-width: var(--max-width);
|
|
margin: 28px auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
/* ---------------------------
|
|
Header / title / actions
|
|
--------------------------- */
|
|
.app-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.title {
|
|
margin-left: 0;
|
|
font-size: 42px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.2px;
|
|
}
|
|
|
|
.subtitle {
|
|
margin: 4px 0 0 0;
|
|
font-size: 13px;
|
|
color: var(--subtext);
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Prominent create button */
|
|
.create-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 140px;
|
|
padding: 12px 18px;
|
|
font-size: 15px;
|
|
line-height: 1;
|
|
border-radius: 10px;
|
|
background: var(--cp-teal);
|
|
color: var(--card);
|
|
border: 1px solid var(--border);
|
|
cursor: pointer;
|
|
font-weight: 700;
|
|
box-shadow: 0 8px 24px rgba(2,6,23,0.08);
|
|
transition: transform var(--transition-fast), filter var(--transition-fast), box-shadow var(--transition-fast);
|
|
}
|
|
.create-btn:hover:not(:disabled) {
|
|
filter: brightness(1.06);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 12px 32px rgba(2,6,23,0.10);
|
|
}
|
|
.create-btn:disabled { opacity: 0.6; cursor: default; }
|
|
|
|
/* ---------------------------
|
|
Generic card marker (no visuals)
|
|
Components provide visuals; .card remains as semantic marker
|
|
--------------------------- */
|
|
.card {
|
|
border-radius: var(--radius);
|
|
color: inherit;
|
|
}
|
|
|
|
/* ---------------------------
|
|
Modal
|
|
--------------------------- */
|
|
.modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(2,6,23,0.5);
|
|
z-index: 1000;
|
|
padding: 20px;
|
|
}
|
|
|
|
.modal {
|
|
width: 100%;
|
|
max-width: 560px;
|
|
background: var(--card);
|
|
color: inherit;
|
|
padding: 20px;
|
|
border-radius: calc(var(--radius) + 4px);
|
|
box-shadow: var(--elevation-1);
|
|
border: 1px solid var(--border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.modal-title { margin: 0; font-size: 18px; font-weight: 700; }
|
|
|
|
.modal-body { display: grid; gap: 10px; }
|
|
|
|
.modal-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.modal-actions-left {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.modal-actions-right {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
/* ---------------------------
|
|
Forms / inputs / buttons
|
|
--------------------------- */
|
|
.form-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center; /* centers pretty file input in modals */
|
|
}
|
|
|
|
.label-text {
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
color: var(--subtext);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.text-input {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border);
|
|
background: transparent;
|
|
color: var(--text);
|
|
outline: none;
|
|
}
|
|
.text-input:focus {
|
|
box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.06);
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
/* Primary / secondary button styles (reusable) */
|
|
.btn-primary {
|
|
background: var(--accent);
|
|
color: var(--card);
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
padding: 10px 14px;
|
|
border-radius: 10px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
}
|
|
.btn-secondary {
|
|
background: transparent;
|
|
color: var(--text);
|
|
border: 1px solid var(--border);
|
|
padding: 10px 12px;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
}
|
|
.btn-confirm {
|
|
background: var(--confirm);
|
|
color: var(--card);
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
padding: 10px 14px;
|
|
border-radius: 10px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
}
|
|
.btn-danger {
|
|
background: var(--danger);
|
|
color: var(--card);
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
padding: 10px 14px;
|
|
border-radius: 10px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* ---------------------------
|
|
Counter card (component-owned visuals)
|
|
--------------------------- */
|
|
.counter {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
padding: 18px;
|
|
border-radius: 12px;
|
|
border: 1px solid var(--border);
|
|
background: var(--card);
|
|
box-shadow: var(--elevation-1);
|
|
width: 100%;
|
|
min-width: 260px;
|
|
max-width: 420px;
|
|
height: var(--counter-height);
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Title, image, value, controls order */
|
|
.counter__label {
|
|
width: 100%;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: var(--text);
|
|
text-align: center;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.counter__image {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex: 1 1 auto;
|
|
align-items: center;
|
|
padding: 6px 0;
|
|
}
|
|
.counter__image img {
|
|
border-radius: 8px;
|
|
max-width: 180px;
|
|
max-height: calc(var(--counter-height) * 0.35);
|
|
object-fit: cover;
|
|
display: block;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.counter__value {
|
|
font-size: 28px;
|
|
font-weight: 800;
|
|
color: var(--text);
|
|
min-width: 72px;
|
|
line-height: 1;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.counter__controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
justify-content: center;
|
|
width: 100%;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.counter__button {
|
|
background: transparent;
|
|
color: var(--text);
|
|
border: 1px solid var(--border);
|
|
width: 56px;
|
|
height: 48px;
|
|
border-radius: 10px;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
|
|
}
|
|
.counter__button:hover:not(:disabled) {
|
|
background: rgba(var(--accent-rgb), 0.08);
|
|
transform: translateY(-2px);
|
|
}
|
|
.counter__button:active:not(:disabled){ transform: translateY(0); }
|
|
.counter__button:disabled { opacity: 0.45; cursor: default; }
|
|
|
|
.counter__edit-button {
|
|
padding: 8px 12px;
|
|
border-radius: 10px;
|
|
border: 1px solid var(--border);
|
|
background: transparent;
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
}
|
|
.counter__edit-button:hover:not(:disabled) {
|
|
background: rgba(var(--accent-rgb), 0.06);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* ---------------------------
|
|
Pretty file input (Create/Edit)
|
|
--------------------------- */
|
|
.file-input-label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 10px 12px;
|
|
border-radius: 10px;
|
|
border: 1px dashed var(--border);
|
|
color: var(--subtext);
|
|
cursor: pointer;
|
|
background: transparent;
|
|
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
|
|
}
|
|
.file-input-label input[type="file"] { display: none; }
|
|
|
|
.file-input-thumb {
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 10px;
|
|
object-fit: cover;
|
|
box-shadow: none;
|
|
flex: 0 0 56px;
|
|
}
|
|
.file-input-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
color: var(--subtext);
|
|
flex: 0 0 20px;
|
|
opacity: 0.9;
|
|
}
|
|
.file-input-text {
|
|
font-size: 13px;
|
|
color: var(--subtext);
|
|
white-space: nowrap;
|
|
}
|
|
.file-input-label:hover,
|
|
.file-input-label:focus-within {
|
|
border-color: rgba(var(--accent-rgb), 0.18);
|
|
color: var(--text);
|
|
background: rgba(var(--accent-rgb), 0.03);
|
|
}
|
|
|
|
|
|
/* drag visuals for counter cards */
|
|
.counter-card.dragging {
|
|
opacity: 0.5;
|
|
transform: scale(0.98);
|
|
transition: transform 120ms ease, opacity 120ms ease;
|
|
}
|
|
.counter-card.drag-over {
|
|
outline: 3px dashed rgba(var(--accent-rgb), 0.9);
|
|
outline-offset: 8px;
|
|
}
|
|
|
|
/* ---------------------------
|
|
Utilities / footer
|
|
--------------------------- */
|
|
.app button { font-family: inherit; }
|
|
|
|
.footer {
|
|
margin-top: 18px;
|
|
font-size: 12px;
|
|
color: var(--subtext);
|
|
text-align: center;
|
|
}
|
|
|
|
/* ---------------------------
|
|
Responsive tweaks
|
|
--------------------------- */
|
|
@media (max-width: 520px) {
|
|
.app { padding: 14px; margin: 18px auto; }
|
|
.modal { padding: 14px; border-radius: 10px; }
|
|
.create-btn { padding: 8px 10px; }
|
|
:root { --counter-height: 300px; }
|
|
.counter { padding: 14px; height: var(--counter-height); }
|
|
.file-input-thumb { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 8px; }
|
|
} |