Redesign settings UI and log entries, add wb3 logo
- Settings: tab per star with mini-toggle + template count badge - Templates: full-width textarea per template (not cramped columns) - Filter mode: pill-cards instead of raw radio buttons - Save button aligned right with border-top separator - Log: card-based entries (rating pill, meta row, review/reply blocks) - wb3.png logo, 160px on login, 40px in topbar with ring shadow - Fix CSS variable names (--c-* → --line/--card/--text/--muted) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+308
-15
@@ -129,14 +129,14 @@ a:hover { color: var(--blue-dark); text-decoration: underline; }
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.topbar__logo-img {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 8px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
object-fit: contain;
|
||||
flex-shrink: 0;
|
||||
background: white;
|
||||
padding: 3px;
|
||||
box-shadow: 0 2px 8px rgba(203,17,171,0.25);
|
||||
padding: 4px;
|
||||
box-shadow: 0 2px 10px rgba(203,17,171,0.3), 0 0 0 2px rgba(203,17,171,0.12);
|
||||
}
|
||||
|
||||
.topbar__name {
|
||||
@@ -931,14 +931,14 @@ textarea:focus {
|
||||
}
|
||||
|
||||
.login-promo__logo {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
object-fit: contain;
|
||||
border-radius: 20px;
|
||||
background: white;
|
||||
padding: 8px;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.25);
|
||||
margin-bottom: 28px;
|
||||
border-radius: 24px;
|
||||
background: #fff;
|
||||
padding: 16px;
|
||||
box-shadow: 0 12px 40px rgba(0,0,0,0.35), 0 0 0 4px rgba(255,255,255,0.15);
|
||||
margin-bottom: 32px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -1037,7 +1037,7 @@ textarea:focus {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 22px;
|
||||
color: var(--c-text);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* ─── Auth card ──────────────────────────────────────────────────── */
|
||||
@@ -1407,9 +1407,9 @@ textarea:focus {
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
color: var(--c-text-muted);
|
||||
color: var(--muted);
|
||||
padding: 8px 0 12px;
|
||||
border-bottom: 1px solid var(--c-border);
|
||||
border-bottom: 1px solid var(--line);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
@@ -1531,3 +1531,296 @@ fieldset:disabled button[type="submit"] {
|
||||
.star-chip--1 { background: #FEE2E2; color: #EF4444; }
|
||||
.star-chip--2 { background: #FFEDD5; color: #F97316; }
|
||||
.star-chip--3 { background: #FEF9C3; color: #CA8A04; }
|
||||
|
||||
/* ── Filter pills ────────────────────────────────────────── */
|
||||
.filter-pills {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.filter-pill {
|
||||
cursor: pointer;
|
||||
flex: 1 1 160px;
|
||||
min-width: 140px;
|
||||
}
|
||||
.filter-pill input { display: none; }
|
||||
.filter-pill span {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
padding: 12px 16px;
|
||||
border-radius: var(--r);
|
||||
border: 2px solid var(--line);
|
||||
background: var(--card);
|
||||
transition: border-color .15s, background .15s;
|
||||
}
|
||||
.filter-pill span strong { font-size: 13px; font-weight: 600; }
|
||||
.filter-pill span small { font-size: 11px; color: var(--muted); }
|
||||
.filter-pill input:checked + span {
|
||||
border-color: var(--wb);
|
||||
background: var(--wb-light);
|
||||
}
|
||||
.filter-pill input:checked + span strong { color: var(--wb); }
|
||||
|
||||
/* ── Star tabs ───────────────────────────────────────────── */
|
||||
.star-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.star-tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
border-radius: var(--r) var(--r) 0 0;
|
||||
border: 2px solid var(--line);
|
||||
border-bottom: none;
|
||||
cursor: pointer;
|
||||
background: var(--card);
|
||||
opacity: 0.5;
|
||||
transition: opacity .15s, background .15s, border-color .15s;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
bottom: -2px;
|
||||
}
|
||||
.star-tab.star-tab--on { opacity: 1; }
|
||||
.star-tab.star-tab--active {
|
||||
background: var(--bg);
|
||||
opacity: 1;
|
||||
z-index: 1;
|
||||
}
|
||||
.star-tab--1.star-tab--active { border-color: #EF4444; }
|
||||
.star-tab--2.star-tab--active { border-color: #F97316; }
|
||||
.star-tab--3.star-tab--active { border-color: #EAB308; }
|
||||
.star-tab--4.star-tab--active { border-color: #3B82F6; }
|
||||
.star-tab--5.star-tab--active { border-color: #22C55E; }
|
||||
.star-tab__label { font-weight: 700; font-size: 15px; }
|
||||
.star-tab--1 .star-tab__label { color: #EF4444; }
|
||||
.star-tab--2 .star-tab__label { color: #F97316; }
|
||||
.star-tab--3 .star-tab__label { color: #EAB308; }
|
||||
.star-tab--4 .star-tab__label { color: #3B82F6; }
|
||||
.star-tab--5 .star-tab__label { color: #22C55E; }
|
||||
.star-tab__count {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
border-radius: 99px;
|
||||
background: var(--line);
|
||||
color: var(--muted);
|
||||
padding: 0 5px;
|
||||
}
|
||||
/* mini toggle inside tab */
|
||||
.star-tab__toggle { cursor: pointer; display: flex; align-items: center; }
|
||||
.star-tab__toggle input { display: none; }
|
||||
.star-tab__toggle-track {
|
||||
display: inline-block;
|
||||
width: 28px;
|
||||
height: 16px;
|
||||
border-radius: 8px;
|
||||
background: var(--line);
|
||||
position: relative;
|
||||
transition: background .15s;
|
||||
}
|
||||
.star-tab__toggle-track::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px; left: 2px;
|
||||
width: 12px; height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
transition: transform .15s;
|
||||
}
|
||||
.star-tab__toggle input:checked ~ .star-tab__toggle-track { background: #22C55E; }
|
||||
.star-tab__toggle input:checked ~ .star-tab__toggle-track::after { transform: translateX(12px); }
|
||||
|
||||
/* ── Star panel ──────────────────────────────────────────── */
|
||||
.star-panel {
|
||||
border: 2px solid var(--line);
|
||||
border-radius: 0 var(--r) var(--r) var(--r);
|
||||
padding: 20px;
|
||||
background: var(--bg);
|
||||
}
|
||||
.star-panel__header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.pool-panel-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.pool-template-row {
|
||||
display: grid;
|
||||
grid-template-columns: 28px 1fr 36px;
|
||||
gap: 8px;
|
||||
align-items: start;
|
||||
}
|
||||
.pool-template-num {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: var(--line);
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.pool-template-input {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 14px;
|
||||
border: 1.5px solid var(--line);
|
||||
border-radius: var(--r);
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
resize: vertical;
|
||||
background: var(--card);
|
||||
color: var(--text);
|
||||
transition: border-color .15s;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.pool-template-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--wb);
|
||||
}
|
||||
.pool-template-del {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: var(--red-bg);
|
||||
color: var(--red);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 8px;
|
||||
transition: background .15s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.pool-template-del:hover { background: #fecaca; }
|
||||
.btn-add-template {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 9px 16px;
|
||||
border-radius: var(--r);
|
||||
border: 1.5px dashed var(--line);
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: border-color .15s, color .15s;
|
||||
}
|
||||
.btn-add-template:hover { border-color: var(--wb); color: var(--wb); }
|
||||
|
||||
/* ── Save button ─────────────────────────────────────────── */
|
||||
.settings-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
.btn-save {
|
||||
padding: 10px 28px;
|
||||
background: var(--wb);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: var(--r);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity .15s;
|
||||
}
|
||||
.btn-save:hover { opacity: 0.85; }
|
||||
fieldset:disabled .btn-save { opacity: 0.4; cursor: not-allowed; }
|
||||
fieldset:disabled .pool-template-input,
|
||||
fieldset:disabled .pool-template-del,
|
||||
fieldset:disabled .btn-add-template,
|
||||
fieldset:disabled .star-tab,
|
||||
fieldset:disabled .filter-pill { pointer-events: none; opacity: 0.5; }
|
||||
|
||||
/* ── Log entries ─────────────────────────────────────────── */
|
||||
.log-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
.log-entry {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 14px 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
align-items: flex-start;
|
||||
}
|
||||
.log-entry:last-child { border-bottom: none; }
|
||||
.log-entry__left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
width: 52px;
|
||||
}
|
||||
.log-entry__rating {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
font-weight: 800;
|
||||
font-size: 13px;
|
||||
}
|
||||
.log-entry__status { font-size: 11px; text-align: center; white-space: nowrap; }
|
||||
.log-entry__body { flex: 1; min-width: 0; }
|
||||
.log-entry__meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
align-items: baseline;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.log-entry__product { font-size: 13px; font-weight: 600; color: var(--text); }
|
||||
.log-entry__buyer { font-size: 12px; color: var(--muted); }
|
||||
.log-entry__time { font-size: 11px; color: var(--muted); margin-left: auto; }
|
||||
.log-entry__review {
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
padding: 8px 12px;
|
||||
background: var(--card);
|
||||
border-radius: 6px;
|
||||
border-left: 3px solid var(--line);
|
||||
margin-bottom: 6px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
.log-entry__reply {
|
||||
font-size: 13px;
|
||||
color: var(--text);
|
||||
padding: 8px 12px;
|
||||
background: var(--wb-light);
|
||||
border-radius: 6px;
|
||||
border-left: 3px solid var(--wb);
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
.log-entry__reply-ico {
|
||||
color: var(--wb);
|
||||
font-weight: 700;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user