Merge mai/dokploy/modern-styling: flexsiebels palette + viewport fix + lifted cards
This commit is contained in:
m
@@ -1,67 +1,136 @@
|
||||
/* Feedback feature — participant + admin shared styles (issue #63). */
|
||||
/* Feedback feature — participant + admin shared styles. */
|
||||
/* Palette + tokens borrowed from flexsiebels variables.css. */
|
||||
|
||||
:root {
|
||||
--fb-bg: #fafafa;
|
||||
--fb-fg: #1a1a1a;
|
||||
--fb-muted: #666;
|
||||
--fb-border: #e0e0e0;
|
||||
--fb-accent: #2563eb;
|
||||
--fb-accent-hover: #1d4ed8;
|
||||
--fb-error: #dc2626;
|
||||
--fb-success: #16a34a;
|
||||
--fb-card-bg: #fff;
|
||||
--fb-mine-bg: #eff6ff;
|
||||
--fb-hidden-bg: #f3f3f3;
|
||||
/* Palette */
|
||||
--color-primary: #16a34a;
|
||||
--color-primary-hover: #15803d;
|
||||
--color-primary-light: #dcfce7;
|
||||
--color-success: #22c55e;
|
||||
--color-warning: #f59e0b;
|
||||
--color-error: #dc2626;
|
||||
|
||||
--color-text-primary: #111827;
|
||||
--color-text-secondary: #4b5563;
|
||||
--color-text-muted: #6b7280;
|
||||
--color-text-inverse: #ffffff;
|
||||
|
||||
--color-bg-primary: #ffffff;
|
||||
--color-bg-secondary: #f9fafb;
|
||||
--color-bg-tertiary: #f3f4f6;
|
||||
|
||||
--color-border-primary: #e5e7eb;
|
||||
--color-border-secondary: #d1d5db;
|
||||
--color-border-focus: #16a34a;
|
||||
|
||||
/* Radii / shadows */
|
||||
--radius-sm: 0.25rem;
|
||||
--radius-md: 0.5rem;
|
||||
--radius-lg: 0.75rem;
|
||||
--radius-xl: 1rem;
|
||||
--radius-full: 9999px;
|
||||
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.06);
|
||||
|
||||
/* Page-level gradient */
|
||||
--gradient-bg: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #d1fae5 100%);
|
||||
|
||||
/* Legacy aliases — keep existing class names working */
|
||||
--fb-bg: var(--color-bg-secondary);
|
||||
--fb-fg: var(--color-text-primary);
|
||||
--fb-muted: var(--color-text-muted);
|
||||
--fb-border: var(--color-border-primary);
|
||||
--fb-accent: var(--color-primary);
|
||||
--fb-accent-hover: var(--color-primary-hover);
|
||||
--fb-error: var(--color-error);
|
||||
--fb-success: var(--color-success);
|
||||
--fb-card-bg: var(--color-bg-primary);
|
||||
--fb-mine-bg: var(--color-primary-light);
|
||||
--fb-hidden-bg: var(--color-bg-tertiary);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--fb-bg: #0a0a0a;
|
||||
--fb-fg: #f5f5f5;
|
||||
--fb-muted: #9a9a9a;
|
||||
--fb-border: #2a2a2a;
|
||||
--fb-accent: #60a5fa;
|
||||
--fb-accent-hover: #93c5fd;
|
||||
--fb-card-bg: #161616;
|
||||
--fb-mine-bg: #1e293b;
|
||||
--fb-hidden-bg: #181818;
|
||||
--color-primary: #22c55e;
|
||||
--color-primary-hover: #16a34a;
|
||||
--color-primary-light: rgba(34, 197, 94, 0.15);
|
||||
--color-success: #4ade80;
|
||||
--color-warning: #fbbf24;
|
||||
--color-error: #f87171;
|
||||
|
||||
--color-text-primary: #f9fafb;
|
||||
--color-text-secondary: #d1d5db;
|
||||
--color-text-muted: #9ca3af;
|
||||
--color-text-inverse: #111827;
|
||||
|
||||
--color-bg-primary: #1f2937;
|
||||
--color-bg-secondary: #111827;
|
||||
--color-bg-tertiary: #374151;
|
||||
|
||||
--color-border-primary: #374151;
|
||||
--color-border-secondary: #4b5563;
|
||||
--color-border-focus: #22c55e;
|
||||
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.4);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
|
||||
|
||||
--gradient-bg: linear-gradient(135deg, #111827 0%, #1f2937 50%, #064e3b 100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Viewport reset — kill the user-agent body margin so dark page bg fills. */
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 100%;
|
||||
background: var(--color-bg-secondary);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
html { height: 100%; }
|
||||
body { min-height: 100vh; }
|
||||
|
||||
.fb-page {
|
||||
min-height: 100vh;
|
||||
background: var(--fb-bg);
|
||||
background: var(--gradient-bg);
|
||||
color: var(--fb-fg);
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.fb-shell {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
padding: 1.25rem 1rem 4rem;
|
||||
padding: 1.5rem 1rem 4rem;
|
||||
}
|
||||
|
||||
.fb-header h1 {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.75rem;
|
||||
margin: 0 0 0.25rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.fb-header p {
|
||||
margin: 0 0 1.25rem;
|
||||
color: var(--fb-muted);
|
||||
line-height: 1.5;
|
||||
margin: 0 0 1.5rem;
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.fb-banner {
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 6px;
|
||||
background: var(--fb-hidden-bg);
|
||||
border: 1px solid var(--fb-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-bg-primary);
|
||||
border: 1px solid var(--color-border-primary);
|
||||
box-shadow: var(--shadow-sm);
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.95rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.fb-banner--closed {
|
||||
@@ -76,15 +145,29 @@
|
||||
border-color: #fecaca;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.fb-banner--closed {
|
||||
background: rgba(245, 158, 11, 0.15);
|
||||
color: #fcd34d;
|
||||
border-color: rgba(245, 158, 11, 0.35);
|
||||
}
|
||||
.fb-banner--error {
|
||||
background: rgba(248, 113, 113, 0.15);
|
||||
color: #fca5a5;
|
||||
border-color: rgba(248, 113, 113, 0.35);
|
||||
}
|
||||
}
|
||||
|
||||
.fb-section {
|
||||
padding: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 1.75rem;
|
||||
}
|
||||
|
||||
.fb-section h2 {
|
||||
font-size: 1.1rem;
|
||||
font-size: 1.125rem;
|
||||
margin: 0 0 0.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.fb-name-row {
|
||||
@@ -104,14 +187,15 @@
|
||||
.fb-textarea,
|
||||
.fb-select {
|
||||
width: 100%;
|
||||
padding: 0.625rem 0.75rem;
|
||||
border: 1px solid var(--fb-border);
|
||||
border-radius: 6px;
|
||||
padding: 0.625rem 0.85rem;
|
||||
border: 1px solid var(--color-border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 1rem;
|
||||
background: var(--fb-card-bg);
|
||||
color: var(--fb-fg);
|
||||
background: var(--color-bg-primary);
|
||||
color: var(--color-text-primary);
|
||||
font-family: inherit;
|
||||
box-sizing: border-box;
|
||||
transition: border-color 150ms ease, box-shadow 150ms ease;
|
||||
}
|
||||
|
||||
.fb-textarea {
|
||||
@@ -122,9 +206,15 @@
|
||||
.fb-input:focus,
|
||||
.fb-textarea:focus,
|
||||
.fb-select:focus {
|
||||
outline: 2px solid var(--fb-accent);
|
||||
outline-offset: -1px;
|
||||
border-color: transparent;
|
||||
outline: none;
|
||||
border-color: var(--color-border-focus);
|
||||
box-shadow: 0 0 0 3px rgb(22 163 74 / 0.15);
|
||||
}
|
||||
|
||||
.fb-input:hover:not(:focus),
|
||||
.fb-textarea:hover:not(:focus),
|
||||
.fb-select:hover:not(:focus) {
|
||||
border-color: var(--color-border-secondary);
|
||||
}
|
||||
|
||||
.fb-question {
|
||||
@@ -158,16 +248,18 @@
|
||||
.fb-option-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.625rem;
|
||||
border: 1px solid var(--fb-border);
|
||||
border-radius: 6px;
|
||||
gap: 0.6rem;
|
||||
padding: 0.6rem 0.75rem;
|
||||
border: 1px solid var(--color-border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
background: var(--fb-card-bg);
|
||||
background: var(--color-bg-primary);
|
||||
transition: border-color 150ms ease, background 150ms ease;
|
||||
}
|
||||
|
||||
.fb-option-row:hover {
|
||||
border-color: var(--fb-accent);
|
||||
border-color: var(--color-primary);
|
||||
background: var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
.fb-option-row input {
|
||||
@@ -184,18 +276,25 @@
|
||||
min-width: 2.5rem;
|
||||
min-height: 2.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid var(--fb-border);
|
||||
border-radius: 6px;
|
||||
background: var(--fb-card-bg);
|
||||
color: var(--fb-fg);
|
||||
border: 1px solid var(--color-border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-bg-primary);
|
||||
color: var(--color-text-primary);
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
|
||||
}
|
||||
|
||||
.fb-scale__btn--active {
|
||||
background: var(--fb-accent);
|
||||
color: white;
|
||||
border-color: var(--fb-accent);
|
||||
.fb-scale__btn:hover {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.fb-scale__btn--active,
|
||||
.fb-scale__btn--active:hover {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-inverse);
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.fb-scale__labels {
|
||||
@@ -212,37 +311,53 @@
|
||||
justify-content: center;
|
||||
padding: 0.625rem 1.25rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
background: var(--fb-accent);
|
||||
color: white;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-inverse);
|
||||
font-family: inherit;
|
||||
min-height: 2.75rem;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: background 150ms ease, box-shadow 150ms ease, transform 100ms ease;
|
||||
}
|
||||
|
||||
.fb-btn:hover {
|
||||
background: var(--fb-accent-hover);
|
||||
.fb-btn:hover:not(:disabled) {
|
||||
background: var(--color-primary-hover);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.fb-btn:active:not(:disabled) {
|
||||
transform: translateY(1px);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.fb-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.fb-btn--ghost {
|
||||
background: transparent;
|
||||
color: var(--fb-fg);
|
||||
border-color: var(--fb-border);
|
||||
background: var(--color-bg-primary);
|
||||
color: var(--color-text-primary);
|
||||
border-color: var(--color-border-primary);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.fb-btn--ghost:hover {
|
||||
background: var(--fb-hidden-bg);
|
||||
.fb-btn--ghost:hover:not(:disabled) {
|
||||
background: var(--color-bg-secondary);
|
||||
border-color: var(--color-border-secondary);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.fb-btn--danger {
|
||||
background: var(--fb-error);
|
||||
background: var(--color-error);
|
||||
}
|
||||
|
||||
.fb-btn--danger:hover:not(:disabled) {
|
||||
background: #b91c1c;
|
||||
}
|
||||
|
||||
.fb-honeypot {
|
||||
@@ -272,20 +387,21 @@
|
||||
}
|
||||
|
||||
.fb-chat__post {
|
||||
padding: 0.625rem 0.75rem;
|
||||
border-radius: 8px;
|
||||
background: var(--fb-hidden-bg);
|
||||
border: 1px solid var(--fb-border);
|
||||
padding: 0.7rem 0.85rem;
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--color-bg-primary);
|
||||
border: 1px solid var(--color-border-primary);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.fb-chat__post--mine {
|
||||
background: var(--fb-mine-bg);
|
||||
border-color: var(--fb-accent);
|
||||
background: var(--color-primary-light);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.fb-chat__post--hidden {
|
||||
background: var(--fb-hidden-bg);
|
||||
color: var(--fb-muted);
|
||||
background: var(--color-bg-tertiary);
|
||||
color: var(--color-text-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@@ -352,10 +468,11 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--fb-border);
|
||||
border-radius: 8px;
|
||||
background: var(--fb-card-bg);
|
||||
padding: 0.85rem;
|
||||
border: 1px solid var(--color-border-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--color-bg-primary);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.fb-builder__card-head {
|
||||
|
||||
Reference in New Issue
Block a user