63 lines
5.4 KiB
CSS
63 lines
5.4 KiB
CSS
:root {
|
|
color-scheme: light;
|
|
--page: #f4f6fb;
|
|
--surface: #fff;
|
|
--ink: #192338;
|
|
--soft: #4e5b73;
|
|
--muted: #8c97aa;
|
|
--line: #e4e8f0;
|
|
--blue: #526fe8;
|
|
--blue-soft: #eef1ff;
|
|
--green: #51a981;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
body { min-width: 340px; margin: 0; color: var(--ink); background: var(--page); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 12px; }
|
|
button, input { font: inherit; }
|
|
button { cursor: pointer; }
|
|
.extension-shell { width: 360px; min-height: 470px; padding: 18px 17px 13px; background: radial-gradient(circle at 95% 0%, #e9edff 0, transparent 32%), var(--page); }
|
|
.extension-header, .extension-footer, .extension-page-context, .extension-brand, .match-card { display: flex; align-items: center; }
|
|
.extension-header { justify-content: space-between; margin-bottom: 24px; }
|
|
.extension-brand { gap: 8px; font-size: 14px; letter-spacing: -.04em; }
|
|
.extension-mark { display: grid; width: 27px; height: 27px; place-items: center; color: #fff; background: linear-gradient(145deg,#748df2,#5f5bdb); border-radius: 9px; box-shadow: 0 5px 12px #6874dc55; font-size: 18px; font-weight: 800; }
|
|
.extension-lock { color: var(--muted); font-size: 10px; font-weight: 700; }
|
|
.extension-lock--button { padding: 6px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; }
|
|
.extension-page-context { gap: 6px; max-width: 100%; margin-bottom: 23px; color: var(--muted); font-size: 10px; }
|
|
.extension-page-context strong { overflow: hidden; color: var(--soft); text-overflow: ellipsis; white-space: nowrap; }
|
|
.context-dot { width: 6px; height: 6px; flex: 0 0 auto; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 4px #51a9811c; }
|
|
.extension-title { margin-bottom: 24px; }
|
|
.extension-title--compact { margin-bottom: 17px; }
|
|
.extension-kicker { display: block; margin-bottom: 5px; color: var(--blue); font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
|
|
.extension-title h1, .options-card h1 { margin: 0 0 7px; font-size: 23px; letter-spacing: -.065em; }
|
|
.extension-title p, .options-card p { max-width: 315px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
|
|
.extension-form { display: flex; flex-direction: column; gap: 13px; }
|
|
.extension-form label { display: flex; flex-direction: column; gap: 6px; color: var(--soft); font-size: 10px; font-weight: 700; }
|
|
.extension-form input { min-height: 39px; padding: 0 11px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 9px; outline: none; font-size: 11px; }
|
|
.extension-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px #526fe81a; }
|
|
.extension-primary { display: flex; align-items: center; justify-content: space-between; min-height: 41px; padding: 0 13px; color: #fff; background: var(--blue); border: 0; border-radius: 9px; box-shadow: 0 8px 16px #526fe82b; font-size: 11px; font-weight: 700; }
|
|
.extension-primary:disabled { cursor: wait; opacity: .65; }
|
|
.extension-primary span { font-size: 16px; font-weight: 400; }
|
|
.extension-error { padding: 9px 10px; color: #b55262; background: #fff0f2; border: 1px solid #ffd7dc; border-radius: 8px; font-size: 10px; line-height: 1.4; }
|
|
.extension-matches { display: flex; flex-direction: column; gap: 7px; }
|
|
.match-card { width: 100%; gap: 9px; padding: 9px; color: var(--soft); text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; transition: 140ms ease; }
|
|
.match-card:hover { border-color: #bdc8fb; box-shadow: 0 5px 15px #526fe814; transform: translateY(-1px); }
|
|
.match-logo { display: grid; width: 31px; height: 31px; flex: 0 0 auto; place-items: center; color: #fff; background: linear-gradient(145deg,#8299ee,#5b70d3); border-radius: 9px; font-size: 9px; font-weight: 800; }
|
|
.match-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
|
|
.match-copy strong, .match-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.match-copy strong { color: var(--soft); font-size: 11px; }
|
|
.match-copy span { color: var(--muted); font-size: 10px; }
|
|
.match-arrow { color: var(--blue); font-size: 16px; }
|
|
.no-match { display: flex; align-items: center; padding: 18px 11px; flex-direction: column; gap: 5px; color: var(--muted); text-align: center; background: var(--surface); border: 1px dashed var(--line); border-radius: 11px; }
|
|
.no-match span { color: var(--blue); font-size: 22px; }
|
|
.no-match strong { color: var(--soft); font-size: 11px; }
|
|
.no-match small { max-width: 230px; font-size: 10px; line-height: 1.4; }
|
|
.extension-footer { justify-content: space-between; margin-top: 24px; padding-top: 12px; color: var(--muted); border-top: 1px solid var(--line); font-size: 9px; }
|
|
.extension-footer button { padding: 0; color: var(--blue); background: transparent; border: 0; font-size: 9px; font-weight: 700; }
|
|
.options-card { width: min(100% - 34px, 470px); margin: 70px auto; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 17px; box-shadow: 0 18px 50px #23335714; }
|
|
.options-card .extension-brand { margin-bottom: 41px; }
|
|
.options-card h1 { margin-top: 8px; }
|
|
.options-card .extension-form { margin-top: 24px; }
|
|
.settings-status { min-height: 17px; margin-top: 12px; font-size: 10px; }
|
|
.settings-status--success { color: var(--green); }
|
|
.settings-status--error { color: #bd5667; }
|
|
.options-note { display: block; margin-top: 16px; color: var(--muted); font-size: 10px; }
|