Apply dark purple frontend theme
This commit is contained in:
@@ -1,13 +1,18 @@
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--bg: #f6f5f1;
|
||||
--surface: #ffffff;
|
||||
--ink: #161616;
|
||||
--muted: #696963;
|
||||
--line: #d8d6ce;
|
||||
--accent: #2f7664;
|
||||
--accent-strong: #245d50;
|
||||
--danger: #a43d32;
|
||||
color-scheme: dark;
|
||||
--bg: #07040d;
|
||||
--bg-2: #120a20;
|
||||
--surface: rgba(23, 15, 35, 0.88);
|
||||
--surface-strong: rgba(33, 22, 50, 0.92);
|
||||
--ink: #f4efff;
|
||||
--muted: #a89bbb;
|
||||
--line: rgba(161, 126, 255, 0.22);
|
||||
--line-strong: rgba(188, 154, 255, 0.42);
|
||||
--accent: #9b5cff;
|
||||
--accent-strong: #b889ff;
|
||||
--accent-ink: #170b28;
|
||||
--danger: #ff7f9b;
|
||||
--shadow: rgba(3, 2, 8, 0.48);
|
||||
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
@@ -22,7 +27,12 @@ body {
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--bg);
|
||||
background:
|
||||
linear-gradient(rgba(151, 91, 255, 0.07) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(151, 91, 255, 0.055) 1px, transparent 1px),
|
||||
linear-gradient(180deg, rgba(31, 19, 55, 0.94), var(--bg) 52%, #050309);
|
||||
background-color: var(--bg);
|
||||
background-size: 44px 44px, 44px 44px, auto;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
@@ -35,8 +45,41 @@ input {
|
||||
.shell {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
grid-template-rows: auto auto;
|
||||
align-content: center;
|
||||
place-items: center;
|
||||
padding: 24px;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.brand-lockup {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: var(--ink);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: 7px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(184, 137, 255, 0.9), rgba(113, 69, 214, 0.82)),
|
||||
var(--accent);
|
||||
box-shadow:
|
||||
0 0 0 4px rgba(155, 92, 255, 0.1),
|
||||
0 12px 30px rgba(109, 64, 214, 0.28);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.brand-lockup h1 {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.archive-box {
|
||||
@@ -45,7 +88,10 @@ input {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
box-shadow: 0 18px 42px rgba(28, 25, 19, 0.08);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.06),
|
||||
0 22px 58px var(--shadow);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.input-row {
|
||||
@@ -61,14 +107,21 @@ input {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 6px;
|
||||
color: var(--ink);
|
||||
background: #fbfaf7;
|
||||
background: rgba(7, 4, 13, 0.72);
|
||||
padding: 0 14px;
|
||||
outline: none;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: rgba(168, 155, 187, 0.7);
|
||||
}
|
||||
|
||||
input:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px rgba(47, 118, 100, 0.16);
|
||||
border-color: var(--accent-strong);
|
||||
box-shadow:
|
||||
0 0 0 3px rgba(155, 92, 255, 0.22),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
button {
|
||||
@@ -76,19 +129,37 @@ button {
|
||||
min-width: 112px;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
color: #ffffff;
|
||||
background: var(--accent);
|
||||
color: var(--accent-ink);
|
||||
background: linear-gradient(180deg, var(--accent-strong), var(--accent));
|
||||
padding: 0 18px;
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.26),
|
||||
0 14px 32px rgba(108, 57, 204, 0.28);
|
||||
transition:
|
||||
transform 160ms ease,
|
||||
box-shadow 160ms ease,
|
||||
filter 160ms ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: var(--accent-strong);
|
||||
filter: brightness(1.08);
|
||||
transform: translateY(-1px);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.3),
|
||||
0 18px 38px rgba(108, 57, 204, 0.34);
|
||||
}
|
||||
|
||||
button:focus-visible {
|
||||
outline: 3px solid rgba(184, 137, 255, 0.36);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
cursor: wait;
|
||||
opacity: 0.72;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.progress-wrap {
|
||||
@@ -99,14 +170,16 @@ button:disabled {
|
||||
height: 6px;
|
||||
overflow: hidden;
|
||||
border-radius: 999px;
|
||||
background: #e7e4dc;
|
||||
background: rgba(8, 5, 15, 0.78);
|
||||
border: 1px solid rgba(161, 126, 255, 0.14);
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: var(--accent);
|
||||
background: linear-gradient(90deg, #7c3cff, #d6b4ff);
|
||||
box-shadow: 0 0 18px rgba(184, 137, 255, 0.48);
|
||||
transition: width 220ms ease;
|
||||
}
|
||||
|
||||
@@ -116,6 +189,7 @@ button:disabled {
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.status-line.error {
|
||||
@@ -135,8 +209,10 @@ button:disabled {
|
||||
@media (max-width: 560px) {
|
||||
.shell {
|
||||
align-items: start;
|
||||
align-content: start;
|
||||
padding: 16px;
|
||||
padding-top: 20vh;
|
||||
padding-top: 18vh;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.archive-box {
|
||||
|
||||
@@ -9,6 +9,10 @@
|
||||
</head>
|
||||
<body>
|
||||
<main class="shell">
|
||||
<div class="brand-lockup" aria-label="sigilbox">
|
||||
<div class="brand-mark" aria-hidden="true"></div>
|
||||
<h1>sigilbox</h1>
|
||||
</div>
|
||||
<form class="archive-box" id="archive-form" autocomplete="off">
|
||||
<label class="sr-only" for="archive-url">URL</label>
|
||||
<div class="input-row">
|
||||
|
||||
Reference in New Issue
Block a user