7cb8b02b1d
Switched to "Red Hat Text" and "Teko" fonts via Google Fonts. Updated color palette from cool blues to warm reds and yellows, including backgrounds, accents, and error states. Refreshed button, top bar, and card styles for improved visual hierarchy and softer appearance.
242 lines
4.7 KiB
CSS
242 lines
4.7 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Text:wght@400;500;600;700&family=Teko:wght@500;600&display=swap');
|
|
|
|
:root {
|
|
--bg: #f7f7f8;
|
|
--bg-strong: #fff6f6;
|
|
--text: #474747;
|
|
--muted: #777777;
|
|
--border: #e7e7e7;
|
|
--shadow: 0 18px 55px rgba(20, 20, 20, 0.08);
|
|
--card: #ffffff;
|
|
--accent: #a52431;
|
|
--accent-strong: #8d1e2a;
|
|
--accent-soft: #f8e5e8;
|
|
--highlight: #ffd62f;
|
|
--danger: #a52431;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: "Red Hat Text", "Segoe UI", system-ui, -apple-system, sans-serif;
|
|
background: radial-gradient(120% 120% at 6% 12%, var(--bg-strong) 0%, #fffdf7 45%, var(--bg) 85%);
|
|
color: var(--text);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.main-layout {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.top-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 14px 24px;
|
|
background: var(--accent);
|
|
border-bottom: 1px solid var(--accent-strong);
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
color: #ffd62f;
|
|
}
|
|
|
|
.top-bar .brand {
|
|
font-family: "Teko", "Red Hat Text", sans-serif;
|
|
font-weight: 600;
|
|
letter-spacing: 0.6px;
|
|
color: #ffd62f;
|
|
}
|
|
|
|
.content {
|
|
padding: 28px 32px 40px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
align-items: center;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0 0 10px;
|
|
letter-spacing: 0.2px;
|
|
font-family: "Teko", "Red Hat Text", sans-serif;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.controls {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
margin-bottom: 14px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.btn {
|
|
background: #4a4a4a;
|
|
color: #ffffff;
|
|
border: 1px solid #404040;
|
|
padding: 10px 15px;
|
|
border-radius: 12px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
|
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.btn:hover:not(:disabled) {
|
|
transform: translateY(-1px);
|
|
background: #3f3f3f;
|
|
}
|
|
|
|
.btn:disabled {
|
|
opacity: 0.45;
|
|
cursor: not-allowed;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.btn.secondary {
|
|
background: #f4f4f4;
|
|
color: #474747;
|
|
border: 1px solid #d3d3d3;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.btn.secondary:hover:not(:disabled) {
|
|
background: #e9e9e9;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.drop-hint {
|
|
padding: 26px;
|
|
border: 1px dashed var(--border);
|
|
border-radius: 14px;
|
|
text-align: center;
|
|
color: var(--muted);
|
|
background: #ffffff;
|
|
width: min(1100px, 100%);
|
|
margin: 0 auto;
|
|
box-shadow: 0 8px 18px rgba(165, 36, 49, 0.06);
|
|
}
|
|
|
|
.error-banner {
|
|
margin-top: 10px;
|
|
padding: 12px 14px;
|
|
border-radius: 10px;
|
|
background: #fcebec;
|
|
border: 1px solid #f3c6cd;
|
|
color: var(--accent-strong);
|
|
}
|
|
|
|
.document-shell {
|
|
position: relative;
|
|
margin-top: 14px;
|
|
border-radius: 14px;
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow);
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
canvas {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.overlay {
|
|
position: absolute;
|
|
border: 1px dashed var(--accent);
|
|
border-radius: 10px;
|
|
padding: 8px;
|
|
background: rgba(255, 255, 255, 0.96);
|
|
box-shadow: 0 12px 30px rgba(165, 36, 49, 0.15);
|
|
user-select: none;
|
|
touch-action: none;
|
|
}
|
|
|
|
.overlay.signature img {
|
|
display: block;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
.overlay-controls {
|
|
position: absolute;
|
|
top: -44px;
|
|
right: 0;
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
|
|
.overlay-btn {
|
|
background: #ffffff;
|
|
color: var(--accent-strong);
|
|
border: 1px solid var(--accent);
|
|
border-radius: 8px;
|
|
padding: 6px 10px;
|
|
cursor: pointer;
|
|
box-shadow: 0 6px 16px rgba(165, 36, 49, 0.16);
|
|
}
|
|
|
|
.overlay-input {
|
|
border: 1px solid var(--border);
|
|
background: #ffffff;
|
|
color: var(--text);
|
|
font-size: 18px;
|
|
padding: 6px 8px;
|
|
min-width: 180px;
|
|
border-radius: 8px;
|
|
outline: none;
|
|
}
|
|
|
|
.paging {
|
|
margin-top: 14px;
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.modal-backdrop {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(15, 23, 42, 0.35);
|
|
backdrop-filter: blur(3px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 2000;
|
|
}
|
|
|
|
.modal {
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 14px;
|
|
padding: 18px;
|
|
min-width: 760px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.modal-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-top: 12px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.modal canvas {
|
|
background: #ffffff;
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.spacer {
|
|
flex: 1;
|
|
}
|