feat(ui): rebuild all tools pages on Carbon Design System web components
- @carbon/web-components v2.50.0 via the IBM CDN (version-pinned); @carbon/styles CSS + IBM Plex Sans for tokens/typography - landing: Carbon header + cds-tile tool cards - fingerprint wizard: Carbon-styled form controls, cds-progress-bar scan progress, cds-tag badges, cds-inline-notification replacing swal - cropper: cds-toast replacing toastr, cds-checkbox review reasons, cds-tag process badge; vue-croppa pad kept in the Carbon layout - Bootstrap 4, swal, toastr and jQuery removed from all pages - behavior frozen: same flows, endpoints, validation and copy
This commit is contained in:
+145
-166
@@ -1,202 +1,181 @@
|
||||
/* YOUreka Tools — shared styling (Bootstrap 4 base + this overlay) */
|
||||
:root {
|
||||
--ink: #1a2340;
|
||||
--muted: #64748b;
|
||||
--faint: #94a3b8;
|
||||
--line: #e4e8f1;
|
||||
--bg: #f4f6fb;
|
||||
--surface: #ffffff;
|
||||
--brand: #3b4fd8;
|
||||
--brand-dark: #2f3eb0;
|
||||
--brand-soft: #eef1fe;
|
||||
--ok: #15803d;
|
||||
--ok-soft: #e8f7ee;
|
||||
--warn: #b45309;
|
||||
--warn-soft: #fdf3e3;
|
||||
--err: #b91c1c;
|
||||
--err-soft: #fdeaea;
|
||||
--radius: 14px;
|
||||
--shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px -12px rgba(16, 24, 40, 0.12);
|
||||
}
|
||||
/* YOUreka Tools — Carbon Design System styling.
|
||||
Depends on: @carbon/styles CSS (tokens + Carbon-styled native controls),
|
||||
IBM Plex Sans, and @carbon/web-components v2.50.0 (IBM CDN). */
|
||||
|
||||
/* ── base ───────────────────────────────────────────────────────────────── */
|
||||
[v-cloak] { display: none; }
|
||||
a { text-decoration: none; }
|
||||
|
||||
html, body { height: 100%; }
|
||||
body.app {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
background:
|
||||
radial-gradient(1200px 400px at 80% -10%, rgba(59, 79, 216, 0.08), transparent 60%),
|
||||
var(--bg);
|
||||
color: var(--ink);
|
||||
font-size: 14.5px;
|
||||
font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
background: var(--cds-background, #f4f4f4);
|
||||
color: var(--cds-text-primary, #161616);
|
||||
font-size: 14px;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
[v-cloak] { display: none; }
|
||||
a { text-decoration: none; }
|
||||
|
||||
/* ── navbar ─────────────────────────────────────────────── */
|
||||
.nav {
|
||||
background: var(--surface);
|
||||
border-bottom: 1px solid var(--line);
|
||||
padding: 0.65rem 0;
|
||||
/* prevent FOUC on web components */
|
||||
cds-button:not(:defined), cds-tag:not(:defined), cds-tile:not(:defined),
|
||||
cds-inline-notification:not(:defined), cds-toast:not(:defined),
|
||||
cds-toast-item:not(:defined), cds-progress-bar:not(:defined) {
|
||||
visibility: hidden;
|
||||
}
|
||||
.nav .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
|
||||
.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; color: var(--ink); text-decoration: none; }
|
||||
.brand:hover { text-decoration: none; color: var(--ink); }
|
||||
|
||||
/* ── header (Carbon ui-shell look) ──────────────────────────────────────── */
|
||||
.nav {
|
||||
background: #161616;
|
||||
height: 48px;
|
||||
padding: 0;
|
||||
}
|
||||
.nav .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 100%; max-width: none; padding: 0 1rem; }
|
||||
.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 600; color: #f4f4f4; font-size: 14px; }
|
||||
.brand:hover { color: #f4f4f4; }
|
||||
.brand small { color: #c6c6c6; font-weight: 400; }
|
||||
.brand-mark {
|
||||
width: 32px; height: 32px; border-radius: 9px;
|
||||
background: linear-gradient(135deg, var(--brand), var(--brand-dark));
|
||||
color: #fff; display: inline-flex; align-items: center; justify-content: center;
|
||||
width: 28px; height: 28px; border-radius: 4px;
|
||||
background: #0f62fe; color: #fff;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.brand-mark svg { width: 18px; height: 18px; }
|
||||
.brand small { color: var(--muted); font-weight: 500; }
|
||||
.nav-right { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
|
||||
.user-chip { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--muted); }
|
||||
.brand-mark svg { width: 16px; height: 16px; }
|
||||
.nav-right { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
|
||||
.nav-right .linklike { color: #c6c6c6; font-size: 13px; padding: 0.4rem 0.6rem; }
|
||||
.nav-right .linklike:hover { color: #f4f4f4; background: #353535; }
|
||||
.user-chip { display: inline-flex; align-items: center; gap: 0.45rem; color: #c6c6c6; font-size: 13px; }
|
||||
.user-chip .avatar {
|
||||
width: 26px; height: 26px; border-radius: 50%;
|
||||
background: var(--brand-soft); color: var(--brand);
|
||||
background: #0f62fe; color: #fff;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
font-size: 12px; font-weight: 700;
|
||||
font-size: 11px; font-weight: 700;
|
||||
}
|
||||
|
||||
/* ── layout ─────────────────────────────────────────────── */
|
||||
main.container { flex: 1 0 auto; }
|
||||
.narrow { max-width: 560px; margin-left: auto; margin-right: auto; }
|
||||
/* ── layout ─────────────────────────────────────────────────────────────── */
|
||||
main.container { flex: 1 0 auto; max-width: none; padding: 0 1rem; width: 100%; }
|
||||
main.container > * { max-width: 1136px; margin-left: auto; margin-right: auto; }
|
||||
main.container > .narrow { max-width: 560px; }
|
||||
.narrow { max-width: 560px; }
|
||||
.center-v { display: flex; flex-direction: column; justify-content: center; min-height: 70vh; }
|
||||
.page-head { margin: 2.2rem 0 1.4rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
|
||||
.page-head h1 { font-size: 1.45rem; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
|
||||
.page-head .sub { color: var(--muted); margin: 0.25rem 0 0; }
|
||||
.page-head { margin: 2rem auto 1.25rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
|
||||
.page-head h1 { font-size: 1.5rem; font-weight: 600; margin: 0; letter-spacing: 0; }
|
||||
.page-head .sub { color: var(--cds-text-secondary, #525252); margin: 0.25rem 0 0; font-size: 14px; }
|
||||
|
||||
/* ── cards ──────────────────────────────────────────────── */
|
||||
.card, .tool-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
/* ── panels (Carbon layer) ──────────────────────────────────────────────── */
|
||||
.card, .panel, .tool-card, .message-card {
|
||||
background: var(--cds-layer, #f4f4f4);
|
||||
border: 1px solid var(--cds-border-subtle, #c6c6c6);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.panel { padding: 1.35rem 1.5rem; margin-bottom: 1.25rem; }
|
||||
.panel-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
|
||||
.panel { padding: 1.25rem 1.5rem 1.5rem; margin-bottom: 1rem; }
|
||||
.panel-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; flex-wrap: wrap; }
|
||||
.step-chip {
|
||||
width: 24px; height: 24px; border-radius: 7px; flex: 0 0 auto;
|
||||
background: var(--brand-soft); color: var(--brand);
|
||||
font-size: 12.5px; font-weight: 700;
|
||||
width: 22px; height: 22px; border-radius: 2px; flex: 0 0 auto;
|
||||
background: var(--cds-layer-selected-inverse, #161616); color: #f4f4f4;
|
||||
font-size: 12px; font-weight: 600;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.panel-head h2 { font-size: 1.02rem; font-weight: 700; margin: 0; }
|
||||
.panel-head .hint { color: var(--faint); font-size: 12.5px; margin-left: auto; }
|
||||
.panel-head h2 { font-size: 1rem; font-weight: 600; margin: 0; }
|
||||
.panel-head .hint { color: var(--cds-text-helper, #6f6f6f); font-size: 12px; }
|
||||
|
||||
/* landing tool cards */
|
||||
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
|
||||
.tool-card { display: flex; flex-direction: column; padding: 1.5rem; color: inherit; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
|
||||
.tool-card:hover { text-decoration: none; color: inherit; border-color: var(--brand); transform: translateY(-2px); }
|
||||
/* ── hero + landing ─────────────────────────────────────────────────────── */
|
||||
.hero { padding: 2.5rem 0 1.75rem; }
|
||||
.hero h1 { font-size: 1.75rem; font-weight: 600; margin: 0 0 0.35rem; }
|
||||
.hero p { color: var(--cds-text-secondary, #525252); max-width: 560px; margin: 0; font-size: 14px; }
|
||||
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; max-width: 960px; }
|
||||
.tool-grid cds-tile { height: 100%; }
|
||||
.tool-card { display: flex; flex-direction: column; padding: 1.25rem; }
|
||||
.tool-card h3 { font-size: 1rem; font-weight: 600; margin: 0.75rem 0 0.3rem; }
|
||||
.tool-card p { color: var(--cds-text-secondary, #525252); margin: 0 0 1rem; font-size: 14px; }
|
||||
.tool-icon {
|
||||
width: 44px; height: 44px; border-radius: 12px; margin-bottom: 0.9rem;
|
||||
width: 40px; height: 40px; border-radius: 4px; margin: 0;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
background: var(--brand-soft); color: var(--brand);
|
||||
background: var(--cds-layer-selected-inverse, #161616); color: #fff;
|
||||
}
|
||||
.tool-icon svg { width: 22px; height: 22px; }
|
||||
.tool-card h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.3rem; }
|
||||
.tool-card p { color: var(--muted); margin: 0 0 1rem; }
|
||||
.tool-card .go { margin-top: auto; color: var(--brand); font-weight: 600; font-size: 13.5px; display: inline-flex; align-items: center; gap: 0.3rem; }
|
||||
.tool-icon svg { width: 20px; height: 20px; }
|
||||
.tool-card .go { margin-top: auto; color: var(--cds-link, #0f62fe); font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 0.3rem; }
|
||||
.tool-card .go svg { width: 14px; height: 14px; }
|
||||
|
||||
/* hero */
|
||||
.hero { padding: 3.2rem 0 2.2rem; }
|
||||
.hero h1 { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.4rem; }
|
||||
.hero p { color: var(--muted); max-width: 560px; margin: 0; }
|
||||
|
||||
/* ── forms ──────────────────────────────────────────────── */
|
||||
label { font-weight: 600; font-size: 13px; color: var(--ink); margin-bottom: 0.3rem; }
|
||||
/* ── forms (Carbon-styled native controls) ──────────────────────────────── */
|
||||
label { font-weight: 400; font-size: 12px; color: var(--cds-text-secondary, #525252); margin-bottom: 0.25rem; display: block; }
|
||||
.form-control {
|
||||
border-color: var(--line); border-radius: 10px; height: 42px;
|
||||
box-shadow: none; font-size: 14.5px; color: var(--ink);
|
||||
border: none; border-bottom: 1px solid var(--cds-border-strong, #8d8d8d);
|
||||
border-radius: 0; height: 40px; box-shadow: none;
|
||||
font-size: 14px; color: var(--cds-text-primary, #161616);
|
||||
background: var(--cds-field, #f4f4f4); padding: 0 0.75rem; width: 100%;
|
||||
appearance: auto;
|
||||
}
|
||||
.form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(59, 79, 216, 0.12); }
|
||||
select.form-control { appearance: auto; }
|
||||
select.form-control { padding-right: 2rem; }
|
||||
.form-control:focus { outline: 2px solid var(--cds-focus, #0f62fe); outline-offset: -2px; border-bottom-color: transparent; background: var(--cds-field, #f4f4f4); }
|
||||
textarea.form-control { height: auto; padding: 0.6rem 0.75rem; }
|
||||
|
||||
/* ── buttons ────────────────────────────────────────────── */
|
||||
.btn { border-radius: 10px; font-weight: 600; font-size: 14px; padding: 0.55rem 1.1rem; border: 1px solid transparent; text-decoration: none; }
|
||||
a.btn:hover, a.btn:focus { text-decoration: none; }
|
||||
.btn:focus { box-shadow: 0 0 0 3px rgba(59, 79, 216, 0.18); }
|
||||
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
|
||||
.btn-primary:hover, .btn-primary:focus { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
|
||||
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
|
||||
.btn-ghost:hover { background: var(--bg); border-color: var(--faint); color: var(--ink); }
|
||||
.btn-danger-ghost { background: transparent; border-color: #f3c6c6; color: var(--err); }
|
||||
.btn-danger-ghost:hover { background: var(--err-soft); border-color: var(--err); color: var(--err); }
|
||||
.btn[disabled], .btn.disabled { opacity: 0.55; pointer-events: none; }
|
||||
/* ── buttons (cds-button handles tool pages; these serve server pages) ──── */
|
||||
.btn {
|
||||
border-radius: 0; font-weight: 400; font-size: 14px;
|
||||
padding: 0.65rem 0.95rem; border: 1px solid transparent;
|
||||
text-decoration: none; display: inline-block; cursor: pointer;
|
||||
font-family: inherit; line-height: 1.2; text-align: center;
|
||||
}
|
||||
.btn-primary { background: var(--cds-button-primary, #0f62fe); border-color: var(--cds-button-primary, #0f62fe); color: #fff; }
|
||||
.btn-primary:hover, .btn-primary:focus { background: #0353e9; border-color: #0353e9; color: #fff; }
|
||||
.btn-ghost { background: transparent; border-color: var(--cds-border-strong, #8d8d8d); color: var(--cds-text-primary, #161616); }
|
||||
.btn-ghost:hover { background: var(--cds-layer-hover, #e8e8e8); color: var(--cds-text-primary, #161616); }
|
||||
.btn-danger { background: var(--cds-button-danger-primary, #da1e28); border-color: var(--cds-button-danger-primary, #da1e28); color: #fff; }
|
||||
.btn-danger-ghost { background: transparent; border: none; color: var(--cds-button-danger-primary, #da1e28); }
|
||||
.btn[disabled], .btn.disabled { opacity: 0.5; pointer-events: none; }
|
||||
.btn-block { display: flex; width: 100%; align-items: center; justify-content: center; }
|
||||
.linklike { background: none; border: none; padding: 0; color: var(--brand); font-weight: 600; cursor: pointer; font-size: 13px; }
|
||||
.linklike[disabled] { color: var(--faint); cursor: default; }
|
||||
.linklike { background: none; border: none; padding: 0; color: var(--cds-link, #0f62fe); font-weight: 400; cursor: pointer; font-size: 13px; font-family: inherit; }
|
||||
.linklike[disabled] { color: var(--cds-text-disabled, #c6c6c6); cursor: default; }
|
||||
|
||||
/* ── badges & status ────────────────────────────────────── */
|
||||
.badge-soft {
|
||||
display: inline-flex; align-items: center; gap: 0.35rem;
|
||||
border-radius: 999px; padding: 0.2rem 0.65rem;
|
||||
font-size: 12px; font-weight: 600; line-height: 1.4;
|
||||
}
|
||||
.badge-soft .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
|
||||
.badge-ok { background: var(--ok-soft); color: var(--ok); }
|
||||
.badge-warn { background: var(--warn-soft); color: var(--warn); }
|
||||
.badge-err { background: var(--err-soft); color: var(--err); }
|
||||
.badge-idle { background: #eef2f7; color: var(--muted); }
|
||||
.badge-brand { background: var(--brand-soft); color: var(--brand); }
|
||||
.badge-live .dot { animation: pulse 1.6s ease-in-out infinite; }
|
||||
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
|
||||
/* cds-button inside flex rows */
|
||||
cds-button { min-width: 0; }
|
||||
cds-button::part(button) { font-size: 14px; }
|
||||
|
||||
/* ── details grid ───────────────────────────────────────── */
|
||||
.details { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.9rem 1.4rem; margin: 0; }
|
||||
.details > div { min-width: 0; }
|
||||
.details dt { font-size: 12px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: 0.04em; }
|
||||
.details dd { margin: 0.15rem 0 0; font-weight: 600; overflow-wrap: anywhere; }
|
||||
|
||||
/* ── finger capture panels ──────────────────────────────── */
|
||||
.finger-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
|
||||
@media (max-width: 720px) { .finger-grid { grid-template-columns: 1fr; } }
|
||||
.finger { border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.2rem; }
|
||||
.finger.capturing { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(59, 79, 216, 0.10); }
|
||||
.finger.done { border-color: #bfe3cd; background: #fbfefc; }
|
||||
.finger-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
|
||||
.finger-head h3 { font-size: 0.95rem; font-weight: 700; margin: 0; }
|
||||
.finger .meta { color: var(--faint); font-size: 12.5px; margin-top: 0.6rem; overflow-wrap: anywhere; }
|
||||
|
||||
.progress { height: 8px; border-radius: 999px; background: #edf0f7; overflow: hidden; }
|
||||
.progress-bar { background: var(--brand); border-radius: 999px; transition: width .25s ease; }
|
||||
.progress-bar.striped {
|
||||
background-image: linear-gradient(45deg, rgba(255,255,255,.25) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.25) 50%, rgba(255,255,255,.25) 75%, transparent 75%, transparent);
|
||||
background-size: 1rem 1rem;
|
||||
animation: stripes 0.9s linear infinite;
|
||||
}
|
||||
@keyframes stripes { from { background-position: 1rem 0; } to { background-position: 0 0; } }
|
||||
|
||||
/* ── alerts ─────────────────────────────────────────────── */
|
||||
.alert-soft { border-radius: 10px; border: 1px solid var(--err-soft); background: var(--err-soft); color: var(--err); font-size: 13.5px; padding: 0.6rem 0.9rem; }
|
||||
|
||||
/* ── editor grid (cropper) ──────────────────────────────── */
|
||||
.editor-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
|
||||
@media (min-width: 900px) {
|
||||
.editor-grid { grid-template-columns: 300px 1fr; align-items: start; }
|
||||
}
|
||||
.panel-head { flex-wrap: wrap; }
|
||||
.panel-head .hint { flex-basis: 100%; margin-left: 0; }
|
||||
@media (min-width: 720px) {
|
||||
.panel-head .hint { flex-basis: auto; margin-left: auto; }
|
||||
}
|
||||
|
||||
/* ── footer ─────────────────────────────────────────────── */
|
||||
footer.foot { flex-shrink: 0; padding: 1.4rem 0 1.8rem; color: var(--faint); font-size: 12.5px; }
|
||||
footer.foot .container { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
|
||||
footer.foot a { color: var(--muted); }
|
||||
|
||||
/* ── message card (auth errors) ─────────────────────────── */
|
||||
.message-card { padding: 2.2rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
|
||||
.message-card h1 { font-size: 1.2rem; font-weight: 700; margin: 0; }
|
||||
.message-icon { width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; }
|
||||
.message-icon.error { background: var(--err-soft); color: var(--err); }
|
||||
.message-card .btn { margin-top: 0.5rem; min-width: 180px; }
|
||||
|
||||
.muted { color: var(--muted); }
|
||||
.faint { color: var(--faint); font-size: 12.5px; }
|
||||
/* ── badges → cds-tag; helper text ──────────────────────────────────────── */
|
||||
.faint { color: var(--cds-text-helper, #6f6f6f); font-size: 12px; }
|
||||
.muted { color: var(--cds-text-secondary, #525252); }
|
||||
.mt-1 { margin-top: 0.75rem; }
|
||||
.mt-2 { margin-top: 1.25rem; }
|
||||
.row-gap { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
|
||||
.flex-fill { flex: 1 1 auto; }
|
||||
|
||||
/* ── details grid ───────────────────────────────────────────────────────── */
|
||||
.details { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.9rem 1.4rem; margin: 0 0 0.25rem; }
|
||||
.details > div { min-width: 0; }
|
||||
.details dt { font-size: 12px; font-weight: 400; color: var(--cds-text-helper, #6f6f6f); }
|
||||
.details dd { margin: 0.15rem 0 0; font-weight: 400; font-size: 14px; overflow-wrap: anywhere; }
|
||||
|
||||
/* ── wizard finger panels ───────────────────────────────────────────────── */
|
||||
.finger-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
|
||||
@media (max-width: 720px) { .finger-grid { grid-template-columns: 1fr; } }
|
||||
.finger { background: var(--cds-layer, #f4f4f4); border: 1px solid var(--cds-border-subtle, #c6c6c6); padding: 1rem 1.1rem 1.1rem; }
|
||||
.finger.capturing { border-color: var(--cds-border-interactive, #0f62fe); box-shadow: inset 0 0 0 1px var(--cds-border-interactive, #0f62fe); }
|
||||
.finger.done { background: var(--cds-layer, #f4f4f4); border-color: var(--cds-border-subtle, #c6c6c6); }
|
||||
.finger-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; gap: 0.5rem; }
|
||||
.finger-head h3 { font-size: 0.95rem; font-weight: 600; margin: 0; }
|
||||
.finger .meta { color: var(--cds-text-helper, #6f6f6f); font-size: 12.5px; margin-top: 0.6rem; overflow-wrap: anywhere; }
|
||||
|
||||
/* ── cropper editor ─────────────────────────────────────────────────────── */
|
||||
.editor-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
|
||||
@media (min-width: 900px) { .editor-grid { grid-template-columns: 300px 1fr; align-items: start; } }
|
||||
.croppa-pad {
|
||||
border: 1px solid var(--cds-border-strong, #8d8d8d);
|
||||
width: 252px; height: 270px; overflow: hidden; background: var(--cds-field, #f4f4f4);
|
||||
}
|
||||
.croppa-pad img { width: 250px; display: block; }
|
||||
.review-options .form-check { margin-bottom: 0.35rem; }
|
||||
|
||||
/* ── notifications viewport (cropper toasts) ────────────────────────────── */
|
||||
.toast-viewport { position: fixed; top: 3.5rem; right: 1rem; z-index: 1100; width: min(360px, calc(100vw - 2rem)); }
|
||||
|
||||
/* ── footer ─────────────────────────────────────────────────────────────── */
|
||||
footer.foot { flex-shrink: 0; padding: 1.1rem 0 1.3rem; color: var(--cds-text-helper, #6f6f6f); font-size: 12px; border-top: 1px solid var(--cds-border-subtle, #c6c6c6); }
|
||||
footer.foot .container { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
|
||||
footer.foot a { color: var(--cds-text-secondary, #525252); }
|
||||
|
||||
/* ── message card (server error page) ───────────────────────────────────── */
|
||||
.message-card { padding: 2.25rem 2rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
|
||||
.message-card h1 { font-size: 1.25rem; font-weight: 600; margin: 0; }
|
||||
.message-icon { width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--cds-support-error, #da1e28); color: #fff; margin-bottom: 0.4rem; }
|
||||
.message-icon.error svg { width: 24px; height: 24px; }
|
||||
.message-card .btn { margin-top: 0.6rem; min-width: 200px; }
|
||||
|
||||
Reference in New Issue
Block a user