feat: improve admin experience and ignore local data
This commit is contained in:
+492
@@ -115,6 +115,13 @@ button:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.58;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.login-shell {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
@@ -292,6 +299,279 @@ button:hover {
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.me-shell {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
padding: 2rem;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background:
|
||||
radial-gradient(circle at 16% 18%, rgba(212, 112, 58, 0.3), transparent 20rem),
|
||||
radial-gradient(circle at 82% 16%, rgba(41, 92, 114, 0.18), transparent 24rem),
|
||||
radial-gradient(circle at 50% 100%, rgba(24, 34, 44, 0.16), transparent 24rem),
|
||||
linear-gradient(145deg, #f7ebdc 0%, #efdfca 42%, #e4d5c5 100%);
|
||||
}
|
||||
|
||||
.me-shell::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
|
||||
background-size: 56px 56px;
|
||||
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.75), transparent 90%);
|
||||
}
|
||||
|
||||
.me-backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.me-glow {
|
||||
position: absolute;
|
||||
border-radius: 999px;
|
||||
filter: blur(20px);
|
||||
opacity: 0.85;
|
||||
animation: login-float 16s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.me-glow--warm {
|
||||
top: 9%;
|
||||
left: max(2rem, 7vw);
|
||||
width: 17rem;
|
||||
height: 17rem;
|
||||
background: radial-gradient(circle, rgba(210, 104, 53, 0.28), rgba(210, 104, 53, 0.02));
|
||||
}
|
||||
|
||||
.me-glow--cool {
|
||||
right: max(2rem, 7vw);
|
||||
bottom: 10%;
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
background: radial-gradient(circle, rgba(47, 97, 117, 0.22), rgba(47, 97, 117, 0.03));
|
||||
animation-duration: 19s;
|
||||
animation-delay: -5s;
|
||||
}
|
||||
|
||||
.me-glow--light {
|
||||
top: 26%;
|
||||
right: 18%;
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.04));
|
||||
animation-duration: 12s;
|
||||
animation-delay: -2s;
|
||||
}
|
||||
|
||||
.me-stage {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: min(72rem, 100%);
|
||||
display: grid;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.me-grid,
|
||||
.me-side-stack,
|
||||
.me-tip-grid,
|
||||
.me-metrics-grid,
|
||||
.me-hero-copy,
|
||||
.me-identity-card {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.me-grid {
|
||||
grid-template-columns: minmax(0, 1.24fr) minmax(18rem, 0.86fr);
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.me-side-stack {
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.me-panel {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 32px;
|
||||
border: 1px solid rgba(24, 34, 44, 0.1);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.48), transparent 34%),
|
||||
rgba(255, 251, 245, 0.7);
|
||||
backdrop-filter: blur(18px);
|
||||
box-shadow: 0 28px 80px rgba(51, 35, 18, 0.12);
|
||||
padding: 1.4rem;
|
||||
}
|
||||
|
||||
.me-panel::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(145deg, rgba(255, 255, 255, 0.34), transparent 38%);
|
||||
}
|
||||
|
||||
.me-hero {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.3fr) minmax(18rem, 0.8fr);
|
||||
gap: 1rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.me-hero-copy {
|
||||
align-content: start;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.me-hero-copy h1,
|
||||
.me-subscription-card h2,
|
||||
.me-support-card h2 {
|
||||
margin: 0;
|
||||
line-height: 1.06;
|
||||
}
|
||||
|
||||
.me-hero-copy h1 {
|
||||
font-size: clamp(2.2rem, 5vw, 3.4rem);
|
||||
letter-spacing: -0.06em;
|
||||
}
|
||||
|
||||
.me-identity-card {
|
||||
align-content: space-between;
|
||||
gap: 0.8rem;
|
||||
min-height: 100%;
|
||||
padding: 1.15rem;
|
||||
border-radius: 26px;
|
||||
border: 1px solid rgba(24, 34, 44, 0.08);
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(201, 98, 51, 0.12), transparent 12rem),
|
||||
rgba(255, 255, 255, 0.44);
|
||||
}
|
||||
|
||||
.me-identity-card strong {
|
||||
font-size: 1.06rem;
|
||||
}
|
||||
|
||||
.me-subscription-card {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.me-action-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.me-action-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 3.2rem;
|
||||
min-width: 12rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.me-action-button--full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.me-link-card {
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
padding: 1rem 1.05rem;
|
||||
border-radius: 24px;
|
||||
border: 1px solid rgba(24, 34, 44, 0.08);
|
||||
background: rgba(255, 255, 255, 0.42);
|
||||
}
|
||||
|
||||
.me-link-card p {
|
||||
margin: 0;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.me-tip-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.9rem;
|
||||
}
|
||||
|
||||
.me-tip-card {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
padding: 1rem;
|
||||
border-radius: 22px;
|
||||
border: 1px solid rgba(24, 34, 44, 0.08);
|
||||
background: rgba(255, 255, 255, 0.38);
|
||||
}
|
||||
|
||||
.me-tip-card strong {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.me-tip-card p {
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.me-metrics-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.9rem;
|
||||
}
|
||||
|
||||
.me-metric-card {
|
||||
display: grid;
|
||||
gap: 0.42rem;
|
||||
min-height: 8.4rem;
|
||||
padding: 1rem 1.05rem;
|
||||
border-radius: 24px;
|
||||
border: 1px solid rgba(24, 34, 44, 0.08);
|
||||
}
|
||||
|
||||
.me-metric-card span {
|
||||
color: var(--muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.me-metric-card strong {
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.me-metric-card--paper {
|
||||
background: linear-gradient(180deg, rgba(255, 252, 247, 0.95), rgba(255, 250, 242, 0.72));
|
||||
}
|
||||
|
||||
.me-metric-card--warm {
|
||||
background: linear-gradient(180deg, rgba(247, 225, 203, 0.92), rgba(255, 250, 242, 0.72));
|
||||
}
|
||||
|
||||
.me-metric-card--ink {
|
||||
background: linear-gradient(180deg, rgba(223, 231, 236, 0.92), rgba(255, 250, 242, 0.72));
|
||||
}
|
||||
|
||||
.me-metric-card--sage {
|
||||
background: linear-gradient(180deg, rgba(224, 236, 228, 0.92), rgba(255, 250, 242, 0.72));
|
||||
}
|
||||
|
||||
.me-support-card {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.me-note-list {
|
||||
margin: 0;
|
||||
padding-left: 1.15rem;
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
color: var(--muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.wide-card {
|
||||
width: min(56rem, 100%);
|
||||
}
|
||||
@@ -780,6 +1060,171 @@ button:hover {
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.proxy-group-card {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.proxy-group-title,
|
||||
.proxy-group-caption {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.proxy-group-title {
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.proxy-group-builder {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
|
||||
}
|
||||
|
||||
.proxy-group-panel {
|
||||
display: grid;
|
||||
gap: 0.9rem;
|
||||
align-content: start;
|
||||
min-height: 20rem;
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 22px;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.32));
|
||||
}
|
||||
|
||||
.proxy-group-panel--selected {
|
||||
background: linear-gradient(180deg, rgba(255, 246, 238, 0.68), rgba(255, 255, 255, 0.34));
|
||||
}
|
||||
|
||||
.proxy-group-panel__header {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.proxy-group-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.proxy-group-search {
|
||||
flex: 1 1 16rem;
|
||||
}
|
||||
|
||||
.proxy-group-search input {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.proxy-toolbar-button,
|
||||
.proxy-sort-button {
|
||||
padding: 0.72rem 0.88rem;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.proxy-node-grid {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.proxy-node-chip {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
justify-content: space-between;
|
||||
gap: 0.85rem;
|
||||
width: 100%;
|
||||
padding: 0.9rem 1rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 18px;
|
||||
text-align: left;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.proxy-node-chip:hover {
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.proxy-node-chip__copy {
|
||||
display: grid;
|
||||
gap: 0.28rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.proxy-node-chip__copy strong {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.proxy-node-chip__copy span {
|
||||
color: var(--muted);
|
||||
font-size: 0.82rem;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.proxy-node-chip__action {
|
||||
flex: none;
|
||||
color: var(--accent-deep);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.proxy-sort-list {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.proxy-sort-item {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
padding: 0.95rem 1rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 18px;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
}
|
||||
|
||||
.proxy-sort-item__meta {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
gap: 0.85rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.proxy-sort-item__index {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
width: 2.2rem;
|
||||
height: 2.2rem;
|
||||
flex: none;
|
||||
border-radius: 999px;
|
||||
background: rgba(201, 98, 51, 0.12);
|
||||
color: var(--accent-deep);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.proxy-sort-item__sub {
|
||||
font-size: 0.82rem;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.proxy-sort-item__actions {
|
||||
display: flex;
|
||||
gap: 0.55rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.proxy-group-empty {
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
border: 1px dashed var(--border-strong);
|
||||
border-radius: 18px;
|
||||
background: rgba(255, 255, 255, 0.36);
|
||||
}
|
||||
|
||||
.list-row--card {
|
||||
padding: 0.9rem 1rem;
|
||||
border: 1px solid var(--border);
|
||||
@@ -822,12 +1267,18 @@ button:hover {
|
||||
@media (max-width: 960px) {
|
||||
.admin-shell,
|
||||
.login-layout,
|
||||
.me-grid,
|
||||
.me-hero,
|
||||
.me-tip-grid,
|
||||
.me-metrics-grid,
|
||||
.hero-panel,
|
||||
.hero-panel--compact,
|
||||
.hero-aside,
|
||||
.metrics-grid,
|
||||
.panel-grid,
|
||||
.form-grid,
|
||||
.proxy-group-builder,
|
||||
.proxy-node-grid,
|
||||
.checkbox-grid,
|
||||
.summary-grid,
|
||||
.feature-grid {
|
||||
@@ -863,6 +1314,10 @@ button:hover {
|
||||
.login-points {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.proxy-group-toolbar {
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
@@ -870,6 +1325,33 @@ button:hover {
|
||||
padding: 1.15rem;
|
||||
}
|
||||
|
||||
.me-shell {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.me-panel {
|
||||
padding: 1.05rem;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.me-action-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.me-action-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.me-glow--warm {
|
||||
width: 13rem;
|
||||
height: 13rem;
|
||||
}
|
||||
|
||||
.me-glow--cool {
|
||||
width: 15rem;
|
||||
height: 15rem;
|
||||
}
|
||||
|
||||
.login-card--brand {
|
||||
padding: 1.4rem;
|
||||
border-radius: 24px;
|
||||
@@ -884,4 +1366,14 @@ button:hover {
|
||||
width: 15rem;
|
||||
height: 15rem;
|
||||
}
|
||||
|
||||
.proxy-sort-item__actions {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.proxy-toolbar-button,
|
||||
.proxy-sort-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user