kstyagi23
8f9210d6be
- Changed button text and messages from "crawl" to "archive" for clarity. - Updated HTML elements to reflect the new terminology and improve user guidance. - Modified footer content to emphasize local-first archiving and provide source link. - Added a link to the project's repository in the index page and test to ensure it appears.
1456 lines
24 KiB
CSS
1456 lines
24 KiB
CSS
:root {
|
|
color-scheme: light;
|
|
--canvas: #f3f5f1;
|
|
--surface: #ffffff;
|
|
--surface-muted: #edf1ed;
|
|
--surface-strong: #e4ebe5;
|
|
--ink: #17201a;
|
|
--ink-soft: #334038;
|
|
--muted: #6b776f;
|
|
--quiet: #8a958d;
|
|
--line: #d8dfd8;
|
|
--line-strong: #c4cec5;
|
|
--night: #18221b;
|
|
--night-soft: #223128;
|
|
--night-line: rgba(239, 246, 239, 0.16);
|
|
--accent: #2168d8;
|
|
--accent-dark: #1855b4;
|
|
--accent-soft: #e6efff;
|
|
--success: #18714d;
|
|
--success-soft: #e3f4ea;
|
|
--danger: #b3473d;
|
|
--danger-soft: #fae9e6;
|
|
--warning: #996514;
|
|
--warning-soft: #fff4d6;
|
|
--radius-lg: 22px;
|
|
--radius-md: 14px;
|
|
--radius-sm: 9px;
|
|
--shadow: 0 18px 48px rgba(27, 42, 32, 0.08);
|
|
font-family: "Aptos", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
min-width: 320px;
|
|
background: var(--canvas);
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
min-width: 320px;
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
color: var(--ink);
|
|
background: var(--canvas);
|
|
}
|
|
|
|
button,
|
|
input {
|
|
font: inherit;
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
}
|
|
|
|
button:focus-visible,
|
|
input:focus-visible,
|
|
summary:focus-visible,
|
|
a:focus-visible {
|
|
outline: 3px solid rgba(33, 104, 216, 0.34);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.skip-link {
|
|
position: fixed;
|
|
z-index: 20;
|
|
top: 12px;
|
|
left: 12px;
|
|
padding: 10px 13px;
|
|
border-radius: var(--radius-sm);
|
|
color: #fff;
|
|
background: var(--accent-dark);
|
|
text-decoration: none;
|
|
transform: translateY(-160%);
|
|
transition: transform 160ms ease;
|
|
}
|
|
|
|
.skip-link:focus {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.site-shell {
|
|
width: min(1200px, calc(100% - 48px));
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.site-header {
|
|
display: grid;
|
|
grid-template-columns: minmax(210px, 1fr) auto minmax(250px, 1fr);
|
|
align-items: center;
|
|
gap: 28px;
|
|
min-height: 82px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.brand {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-self: start;
|
|
gap: 11px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.brand-mark {
|
|
position: relative;
|
|
display: grid;
|
|
width: 31px;
|
|
height: 31px;
|
|
place-items: center;
|
|
overflow: hidden;
|
|
border-radius: 9px;
|
|
background: var(--night);
|
|
}
|
|
|
|
.brand-mark::before,
|
|
.brand-mark::after {
|
|
position: absolute;
|
|
content: "";
|
|
}
|
|
|
|
.brand-mark::before {
|
|
width: 13px;
|
|
height: 13px;
|
|
border: 2px solid #fff;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.brand-mark::after {
|
|
right: 6px;
|
|
bottom: 6px;
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
background: #8db5ff;
|
|
}
|
|
|
|
.brand-copy {
|
|
display: grid;
|
|
gap: 2px;
|
|
}
|
|
|
|
.brand-copy strong {
|
|
color: var(--ink);
|
|
font-size: 1rem;
|
|
font-weight: 760;
|
|
letter-spacing: -0.04em;
|
|
}
|
|
|
|
.brand-copy span {
|
|
color: var(--quiet);
|
|
font-size: 0.64rem;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.site-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.site-nav a {
|
|
color: var(--muted);
|
|
font-size: 0.75rem;
|
|
font-weight: 680;
|
|
text-decoration: none;
|
|
transition: color 150ms ease;
|
|
}
|
|
|
|
.site-nav a:hover {
|
|
color: var(--accent-dark);
|
|
}
|
|
|
|
.header-tools {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 17px;
|
|
}
|
|
|
|
.source-link {
|
|
padding: 7px 10px;
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: 7px;
|
|
color: var(--ink-soft);
|
|
font-size: 0.69rem;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
|
|
}
|
|
|
|
.source-link:hover {
|
|
border-color: #9fbff4;
|
|
color: var(--accent-dark);
|
|
background: var(--accent-soft);
|
|
}
|
|
|
|
.service-status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
color: var(--muted);
|
|
font-size: 0.68rem;
|
|
font-weight: 620;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.service-status > i,
|
|
.pulse-dot {
|
|
display: inline-block;
|
|
flex: 0 0 auto;
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background: var(--success);
|
|
}
|
|
|
|
.service-status[data-online="false"] > i {
|
|
background: var(--danger);
|
|
}
|
|
|
|
main {
|
|
padding: 48px 0 76px;
|
|
}
|
|
|
|
.workbench {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 0.88fr) minmax(460px, 1.12fr);
|
|
overflow: hidden;
|
|
min-height: 580px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--surface);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.observatory,
|
|
.capture-console {
|
|
position: relative;
|
|
min-width: 0;
|
|
}
|
|
|
|
.observatory {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
overflow: hidden;
|
|
padding: clamp(34px, 5vw, 62px);
|
|
color: #eaf0eb;
|
|
background: var(--night);
|
|
}
|
|
|
|
.observatory::before {
|
|
position: absolute;
|
|
top: -126px;
|
|
right: -126px;
|
|
width: 290px;
|
|
height: 290px;
|
|
border: 1px solid rgba(230, 242, 233, 0.12);
|
|
border-radius: 50%;
|
|
content: "";
|
|
box-shadow: 0 0 0 42px rgba(230, 242, 233, 0.025);
|
|
}
|
|
|
|
.observatory-copy,
|
|
.metric-grid,
|
|
.observatory-foot {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.eyebrow {
|
|
margin: 0 0 11px;
|
|
color: var(--accent);
|
|
font-size: 0.63rem;
|
|
font-weight: 780;
|
|
letter-spacing: 0.13em;
|
|
}
|
|
|
|
.observatory .eyebrow {
|
|
color: #a9c7ff;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
p {
|
|
margin-top: 0;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
color: var(--ink);
|
|
letter-spacing: -0.055em;
|
|
}
|
|
|
|
h1 {
|
|
max-width: 500px;
|
|
margin-bottom: 20px;
|
|
color: #f6f9f7;
|
|
font-size: clamp(3rem, 4.8vw, 4.8rem);
|
|
font-weight: 730;
|
|
line-height: 0.95;
|
|
}
|
|
|
|
h1 em {
|
|
color: #a9c7ff;
|
|
font-style: normal;
|
|
}
|
|
|
|
h2 {
|
|
margin-bottom: 0;
|
|
font-size: clamp(1.72rem, 2.5vw, 2.35rem);
|
|
font-weight: 730;
|
|
line-height: 1;
|
|
}
|
|
|
|
h3 {
|
|
margin-bottom: 6px;
|
|
font-size: 0.96rem;
|
|
font-weight: 740;
|
|
}
|
|
|
|
.lede {
|
|
max-width: 430px;
|
|
margin-bottom: 0;
|
|
color: #bdc8c0;
|
|
font-size: 0.91rem;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.metric-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
margin: 35px 0;
|
|
}
|
|
|
|
.metric-card {
|
|
min-height: 88px;
|
|
padding: 15px;
|
|
border: 1px solid var(--night-line);
|
|
border-radius: var(--radius-sm);
|
|
background: rgba(255, 255, 255, 0.045);
|
|
}
|
|
|
|
.metric-card.metric-primary {
|
|
border-color: #b9cdf1;
|
|
background: #e9f0fc;
|
|
}
|
|
|
|
.metric-value,
|
|
.metric-label {
|
|
display: block;
|
|
}
|
|
|
|
.metric-value {
|
|
overflow: hidden;
|
|
color: #f4f8f5;
|
|
font-size: clamp(1.25rem, 1.9vw, 1.62rem);
|
|
font-weight: 760;
|
|
letter-spacing: -0.06em;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.metric-primary .metric-value {
|
|
color: #183e78;
|
|
}
|
|
|
|
.metric-label {
|
|
margin-top: 6px;
|
|
color: #aab8af;
|
|
font-size: 0.59rem;
|
|
font-weight: 720;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.metric-primary .metric-label {
|
|
color: #58719a;
|
|
}
|
|
|
|
.observatory-foot {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
max-width: 430px;
|
|
padding-top: 17px;
|
|
border-top: 1px solid var(--night-line);
|
|
}
|
|
|
|
.observatory-foot .pulse-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
margin-top: 5px;
|
|
background: #a9c7ff;
|
|
}
|
|
|
|
.observatory-foot p {
|
|
margin: 0;
|
|
color: #aebbb2;
|
|
font-size: 0.71rem;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.capture-console {
|
|
padding: clamp(32px, 4.5vw, 54px);
|
|
background: var(--surface);
|
|
}
|
|
|
|
.console-head {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 18px;
|
|
margin-bottom: 31px;
|
|
}
|
|
|
|
.console-step {
|
|
padding: 5px 8px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
color: var(--quiet);
|
|
font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
|
|
font-size: 0.6rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.field-label,
|
|
.limit-grid label > span,
|
|
.text-rule > span {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
color: var(--ink-soft);
|
|
font-size: 0.7rem;
|
|
font-weight: 720;
|
|
}
|
|
|
|
.url-input-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: var(--radius-sm);
|
|
background: #fbfcfa;
|
|
transition: border-color 150ms ease, box-shadow 150ms ease;
|
|
}
|
|
|
|
.url-input-wrap:focus-within {
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 4px rgba(33, 104, 216, 0.1);
|
|
}
|
|
|
|
.url-input-wrap > span {
|
|
padding-left: 15px;
|
|
color: var(--accent);
|
|
font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
|
|
font-size: 0.95rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.url-input-wrap input {
|
|
width: 100%;
|
|
min-width: 0;
|
|
padding: 15px;
|
|
border: 0;
|
|
outline: 0;
|
|
color: var(--ink);
|
|
background: transparent;
|
|
font-size: 0.93rem;
|
|
}
|
|
|
|
.url-input-wrap input::placeholder,
|
|
.text-rule input::placeholder {
|
|
color: #9aa49d;
|
|
}
|
|
|
|
.quick-settings {
|
|
display: grid;
|
|
gap: 9px;
|
|
margin-top: 17px;
|
|
}
|
|
|
|
.switch-row,
|
|
.connection-control {
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--surface-muted);
|
|
}
|
|
|
|
.switch-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 18px;
|
|
min-height: 72px;
|
|
padding: 13px 15px;
|
|
}
|
|
|
|
.switch-row strong,
|
|
.switch-row small,
|
|
.connection-control strong,
|
|
.connection-control small {
|
|
display: block;
|
|
}
|
|
|
|
.switch-row strong,
|
|
.connection-control strong {
|
|
margin-bottom: 3px;
|
|
color: var(--ink-soft);
|
|
font-size: 0.79rem;
|
|
font-weight: 730;
|
|
}
|
|
|
|
.switch-row small,
|
|
.connection-control small {
|
|
max-width: 330px;
|
|
color: var(--muted);
|
|
font-size: 0.68rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.switch {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.switch input {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
opacity: 0;
|
|
}
|
|
|
|
.switch > span {
|
|
position: relative;
|
|
display: block;
|
|
width: 39px;
|
|
height: 22px;
|
|
border: 1px solid #b4c0b6;
|
|
border-radius: 999px;
|
|
background: #d6ddd7;
|
|
transition: border-color 150ms ease, background 150ms ease;
|
|
}
|
|
|
|
.switch > span::after {
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 3px;
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
box-shadow: 0 1px 3px rgba(23, 32, 26, 0.18);
|
|
content: "";
|
|
transition: transform 150ms ease;
|
|
}
|
|
|
|
.switch input:checked + span {
|
|
border-color: var(--accent);
|
|
background: var(--accent);
|
|
}
|
|
|
|
.switch input:checked + span::after {
|
|
transform: translateX(16px);
|
|
}
|
|
|
|
.switch input:disabled + span {
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.connection-control {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: 11px 16px;
|
|
padding: 13px 15px;
|
|
}
|
|
|
|
.connection-value {
|
|
align-self: center;
|
|
color: var(--muted);
|
|
font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
|
|
font-size: 0.66rem;
|
|
}
|
|
|
|
.connection-value output {
|
|
color: var(--accent-dark);
|
|
font-weight: 800;
|
|
}
|
|
|
|
.connection-control input[type="range"] {
|
|
width: 100%;
|
|
height: 4px;
|
|
grid-column: 1 / -1;
|
|
margin: 2px 0 0;
|
|
accent-color: var(--accent);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.advanced-settings {
|
|
display: grid;
|
|
gap: 8px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.setting-panel {
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
background: #fbfcfa;
|
|
}
|
|
|
|
.setting-panel summary {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 14px;
|
|
min-height: 49px;
|
|
padding: 0 14px;
|
|
color: var(--ink-soft);
|
|
cursor: pointer;
|
|
font-size: 0.75rem;
|
|
font-weight: 720;
|
|
list-style: none;
|
|
}
|
|
|
|
.setting-panel summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.setting-panel summary::after {
|
|
color: var(--muted);
|
|
content: "+";
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.setting-panel[open] summary {
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.setting-panel[open] summary::after {
|
|
content: "-";
|
|
}
|
|
|
|
.summary-value {
|
|
overflow: hidden;
|
|
color: var(--quiet);
|
|
font-size: 0.64rem;
|
|
font-weight: 560;
|
|
text-align: right;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.limit-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
gap: 8px;
|
|
padding: 14px;
|
|
}
|
|
|
|
.limit-grid label > span {
|
|
margin-bottom: 6px;
|
|
color: var(--muted);
|
|
font-size: 0.61rem;
|
|
}
|
|
|
|
.limit-grid input,
|
|
.text-rule input {
|
|
width: 100%;
|
|
min-width: 0;
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: 6px;
|
|
outline: 0;
|
|
color: var(--ink);
|
|
background: #fff;
|
|
transition: border-color 150ms ease, box-shadow 150ms ease;
|
|
}
|
|
|
|
.limit-grid input {
|
|
padding: 9px 7px;
|
|
font-size: 0.74rem;
|
|
}
|
|
|
|
.limit-grid input:focus,
|
|
.text-rule input:focus {
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 3px rgba(33, 104, 216, 0.1);
|
|
}
|
|
|
|
.file-rules {
|
|
padding: 14px;
|
|
}
|
|
|
|
.file-rules > p {
|
|
margin-bottom: 12px;
|
|
color: var(--muted);
|
|
font-size: 0.68rem;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.asset-choices {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 7px;
|
|
}
|
|
|
|
.asset-choices label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
min-height: 33px;
|
|
padding: 0 8px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
color: var(--ink-soft);
|
|
background: #fff;
|
|
font-size: 0.67rem;
|
|
}
|
|
|
|
.asset-choices input {
|
|
width: 13px;
|
|
height: 13px;
|
|
margin: 0;
|
|
accent-color: var(--accent);
|
|
}
|
|
|
|
.text-rule {
|
|
display: block;
|
|
margin-top: 13px;
|
|
}
|
|
|
|
.text-rule > span {
|
|
margin-bottom: 6px;
|
|
color: var(--muted);
|
|
font-size: 0.64rem;
|
|
}
|
|
|
|
.text-rule input {
|
|
padding: 10px 11px;
|
|
font-size: 0.74rem;
|
|
}
|
|
|
|
.proxy-row {
|
|
min-height: 72px;
|
|
margin: 14px;
|
|
}
|
|
|
|
.proxy-row.is-unavailable {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.form-message {
|
|
min-height: 1.25em;
|
|
margin: 13px 0 0;
|
|
color: var(--danger);
|
|
font-size: 0.73rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.form-message.success {
|
|
color: var(--success);
|
|
}
|
|
|
|
.console-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 18px;
|
|
margin-top: 13px;
|
|
}
|
|
|
|
.capture-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
flex: 0 0 auto;
|
|
min-height: 43px;
|
|
padding: 0 14px 0 16px;
|
|
border: 1px solid var(--accent);
|
|
border-radius: 7px;
|
|
color: #fff;
|
|
background: var(--accent);
|
|
font-size: 0.75rem;
|
|
font-weight: 760;
|
|
transition: transform 150ms ease, background 150ms ease, box-shadow 150ms ease;
|
|
}
|
|
|
|
.capture-button:hover:not(:disabled) {
|
|
background: var(--accent-dark);
|
|
box-shadow: 0 8px 16px rgba(33, 104, 216, 0.22);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.capture-button:disabled {
|
|
cursor: wait;
|
|
opacity: 0.58;
|
|
}
|
|
|
|
.capture-button span:last-child {
|
|
font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.console-actions p {
|
|
max-width: 270px;
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 0.64rem;
|
|
line-height: 1.45;
|
|
text-align: right;
|
|
}
|
|
|
|
.activity-section {
|
|
padding-top: 72px;
|
|
}
|
|
|
|
.section-heading {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: 22px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.section-heading .eyebrow {
|
|
margin-bottom: 9px;
|
|
}
|
|
|
|
.section-heading h2 {
|
|
margin-bottom: 8px;
|
|
font-size: clamp(1.65rem, 2.2vw, 2.1rem);
|
|
}
|
|
|
|
.section-heading p:not(.eyebrow) {
|
|
max-width: 560px;
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 0.77rem;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.quiet-button,
|
|
.job-action,
|
|
.icon-button {
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: 7px;
|
|
color: var(--ink-soft);
|
|
background: var(--surface);
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
|
|
}
|
|
|
|
.quiet-button {
|
|
min-height: 34px;
|
|
padding: 0 12px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.quiet-button:hover,
|
|
.job-action:hover,
|
|
.icon-button:hover {
|
|
border-color: #9fbff4;
|
|
color: var(--accent-dark);
|
|
background: var(--accent-soft);
|
|
}
|
|
|
|
.empty-state {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
min-height: 119px;
|
|
padding: 21px;
|
|
border: 1px dashed var(--line-strong);
|
|
border-radius: var(--radius-md);
|
|
background: rgba(255, 255, 255, 0.48);
|
|
}
|
|
|
|
.empty-state[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.empty-state p {
|
|
max-width: 560px;
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 0.76rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.empty-mark {
|
|
display: grid;
|
|
flex: 0 0 auto;
|
|
width: 36px;
|
|
height: 36px;
|
|
place-items: center;
|
|
border-radius: 50%;
|
|
color: var(--accent-dark);
|
|
background: var(--accent-soft);
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.job-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 13px;
|
|
}
|
|
|
|
.job-card {
|
|
position: relative;
|
|
contain-intrinsic-size: auto 270px;
|
|
content-visibility: auto;
|
|
overflow: hidden;
|
|
min-height: 252px;
|
|
padding: 19px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface);
|
|
box-shadow: 0 3px 10px rgba(27, 42, 32, 0.025);
|
|
transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
|
|
}
|
|
|
|
.job-card:hover {
|
|
border-color: #c5d0c6;
|
|
box-shadow: 0 10px 24px rgba(27, 42, 32, 0.07);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.job-card::before {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 3px;
|
|
content: "";
|
|
background: #bdc8bf;
|
|
}
|
|
|
|
.job-card[data-state="running"]::before,
|
|
.job-card[data-state="queued"]::before {
|
|
background: var(--accent);
|
|
}
|
|
|
|
.job-card[data-state="ready"]::before {
|
|
background: var(--success);
|
|
}
|
|
|
|
.job-card[data-state="failed"]::before,
|
|
.job-card[data-state="cancelled"]::before,
|
|
.job-card[data-state="expired"]::before {
|
|
background: var(--danger);
|
|
}
|
|
|
|
.job-topline,
|
|
.job-actions,
|
|
.job-stats,
|
|
.job-meta,
|
|
.job-tags {
|
|
display: flex;
|
|
}
|
|
|
|
.job-topline {
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.job-host {
|
|
overflow: hidden;
|
|
color: var(--ink);
|
|
font-size: 0.91rem;
|
|
font-weight: 760;
|
|
letter-spacing: -0.03em;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.state-pill {
|
|
flex: 0 0 auto;
|
|
padding: 5px 7px;
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: 999px;
|
|
color: var(--muted);
|
|
font-size: 0.57rem;
|
|
font-weight: 760;
|
|
letter-spacing: 0.07em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.state-pill.ready {
|
|
border-color: #a9d8bd;
|
|
color: var(--success);
|
|
background: var(--success-soft);
|
|
}
|
|
|
|
.state-pill.failed,
|
|
.state-pill.cancelled,
|
|
.state-pill.expired {
|
|
border-color: #edc0ba;
|
|
color: var(--danger);
|
|
background: var(--danger-soft);
|
|
}
|
|
|
|
.state-pill.running,
|
|
.state-pill.queued {
|
|
border-color: #b9cff2;
|
|
color: var(--accent-dark);
|
|
background: var(--accent-soft);
|
|
}
|
|
|
|
.job-url {
|
|
overflow: hidden;
|
|
margin: 6px 0 16px;
|
|
color: var(--quiet);
|
|
font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
|
|
font-size: 0.64rem;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.job-phase {
|
|
min-height: 35px;
|
|
margin: 0 0 12px;
|
|
color: var(--ink-soft);
|
|
font-size: 0.75rem;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.job-progress {
|
|
overflow: hidden;
|
|
height: 4px;
|
|
margin: 0 0 15px;
|
|
border-radius: 999px;
|
|
background: var(--surface-strong);
|
|
}
|
|
|
|
.job-progress > span {
|
|
display: block;
|
|
width: var(--progress, 0%);
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
background: var(--accent);
|
|
transition: width 220ms ease;
|
|
}
|
|
|
|
.job-card[data-state="ready"] .job-progress > span {
|
|
background: var(--success);
|
|
}
|
|
|
|
.job-card[data-state="failed"] .job-progress > span,
|
|
.job-card[data-state="cancelled"] .job-progress > span,
|
|
.job-card[data-state="expired"] .job-progress > span {
|
|
background: var(--danger);
|
|
}
|
|
|
|
.job-stats {
|
|
margin-bottom: 13px;
|
|
border-top: 1px solid var(--line);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.job-stats div {
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding: 10px 7px;
|
|
}
|
|
|
|
.job-stats div + div {
|
|
border-left: 1px solid var(--line);
|
|
}
|
|
|
|
.job-stats strong,
|
|
.job-stats span,
|
|
.job-meta span {
|
|
display: block;
|
|
}
|
|
|
|
.job-stats strong {
|
|
overflow: hidden;
|
|
color: var(--ink);
|
|
font-size: 0.8rem;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.job-stats span,
|
|
.job-meta span:first-child {
|
|
margin-top: 3px;
|
|
color: var(--quiet);
|
|
font-size: 0.57rem;
|
|
font-weight: 650;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.job-meta {
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
min-height: 18px;
|
|
margin-bottom: 9px;
|
|
color: var(--muted);
|
|
font-size: 0.65rem;
|
|
}
|
|
|
|
.job-meta span:last-child {
|
|
max-width: 56%;
|
|
overflow: hidden;
|
|
text-align: right;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.job-tags {
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
min-height: 21px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.job-tags span {
|
|
padding: 3px 6px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
color: var(--muted);
|
|
font-size: 0.57rem;
|
|
}
|
|
|
|
.job-warning {
|
|
overflow: hidden;
|
|
margin: 0 0 10px;
|
|
color: var(--warning);
|
|
font-size: 0.65rem;
|
|
line-height: 1.35;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.job-actions {
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 7px;
|
|
}
|
|
|
|
.job-action {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 30px;
|
|
padding: 0 9px;
|
|
}
|
|
|
|
.job-action.primary {
|
|
border-color: var(--accent);
|
|
color: #fff;
|
|
background: var(--accent);
|
|
}
|
|
|
|
.job-action.primary:hover {
|
|
border-color: var(--accent-dark);
|
|
color: #fff;
|
|
background: var(--accent-dark);
|
|
}
|
|
|
|
.job-action.danger {
|
|
border-color: #e1b4ae;
|
|
color: var(--danger);
|
|
}
|
|
|
|
.job-action:disabled {
|
|
cursor: wait;
|
|
opacity: 0.56;
|
|
}
|
|
|
|
.site-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 22px;
|
|
padding: 22px 0 30px;
|
|
border-top: 1px solid var(--line);
|
|
color: var(--muted);
|
|
font-size: 0.68rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.site-footer p {
|
|
margin: 0;
|
|
}
|
|
|
|
.footer-links {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.footer-links a {
|
|
color: var(--accent-dark);
|
|
font-weight: 720;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.footer-links a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.report-dialog {
|
|
width: min(760px, calc(100% - 30px));
|
|
max-height: min(760px, calc(100vh - 44px));
|
|
padding: 0;
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: var(--radius-md);
|
|
color: var(--ink);
|
|
background: var(--surface);
|
|
box-shadow: 0 24px 70px rgba(27, 42, 32, 0.2);
|
|
}
|
|
|
|
.report-dialog::backdrop {
|
|
background: rgba(24, 34, 27, 0.36);
|
|
}
|
|
|
|
.dialog-head {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
padding: 23px 24px 18px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.dialog-head .eyebrow {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.dialog-head h2 {
|
|
margin: 0;
|
|
font-size: 1.65rem;
|
|
}
|
|
|
|
.icon-button {
|
|
width: 31px;
|
|
height: 31px;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.report-content {
|
|
overflow: auto;
|
|
max-height: calc(min(760px, 100vh - 44px) - 102px);
|
|
padding: 22px 24px 28px;
|
|
}
|
|
|
|
.report-summary {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 9px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.report-summary div {
|
|
padding: 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
background: var(--surface-muted);
|
|
}
|
|
|
|
.report-summary strong,
|
|
.report-summary span {
|
|
display: block;
|
|
}
|
|
|
|
.report-summary strong {
|
|
overflow: hidden;
|
|
color: var(--accent-dark);
|
|
font-size: 0.98rem;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.report-summary span {
|
|
margin-top: 4px;
|
|
color: var(--muted);
|
|
font-size: 0.59rem;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.report-list {
|
|
margin: 0;
|
|
padding-left: 18px;
|
|
color: var(--ink-soft);
|
|
font-size: 0.76rem;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.report-list li + li {
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.report-subhead {
|
|
margin: 21px 0 9px;
|
|
color: var(--accent-dark);
|
|
font-size: 0.68rem;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
scroll-behavior: auto !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 980px) {
|
|
.site-header {
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
}
|
|
|
|
.site-nav {
|
|
display: none;
|
|
}
|
|
|
|
.workbench {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.observatory {
|
|
min-height: 460px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 680px) {
|
|
.site-shell {
|
|
width: min(100% - 28px, 1200px);
|
|
}
|
|
|
|
.site-header {
|
|
min-height: 72px;
|
|
gap: 14px;
|
|
}
|
|
|
|
.brand-copy span,
|
|
.service-status span {
|
|
display: none;
|
|
}
|
|
|
|
.header-tools {
|
|
gap: 10px;
|
|
}
|
|
|
|
.source-link {
|
|
padding: 6px 8px;
|
|
}
|
|
|
|
main {
|
|
padding: 28px 0 56px;
|
|
}
|
|
|
|
.workbench {
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.observatory,
|
|
.capture-console {
|
|
padding: 28px 22px;
|
|
}
|
|
|
|
.observatory {
|
|
min-height: 0;
|
|
}
|
|
|
|
h1 {
|
|
font-size: clamp(2.65rem, 13vw, 3.85rem);
|
|
}
|
|
|
|
.metric-grid {
|
|
margin: 28px 0;
|
|
}
|
|
|
|
.metric-card {
|
|
min-height: 82px;
|
|
padding: 13px;
|
|
}
|
|
|
|
.console-head {
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.limit-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.asset-choices {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.console-actions,
|
|
.section-heading,
|
|
.site-footer {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.console-actions p {
|
|
max-width: none;
|
|
text-align: left;
|
|
}
|
|
|
|
.activity-section {
|
|
padding-top: 56px;
|
|
}
|
|
|
|
.section-heading {
|
|
gap: 15px;
|
|
}
|
|
|
|
.job-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.report-summary {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.site-footer {
|
|
gap: 10px;
|
|
}
|
|
|
|
.footer-links {
|
|
flex-wrap: wrap;
|
|
gap: 8px 14px;
|
|
white-space: normal;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 390px) {
|
|
.metric-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.summary-value {
|
|
max-width: 122px;
|
|
}
|
|
}
|