first commit
This commit is contained in:
@@ -0,0 +1,339 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
|
||||
|
||||
:root {
|
||||
--bg: #f4f7fb;
|
||||
--bg-soft: #eef3f9;
|
||||
--card: #ffffff;
|
||||
--text: #182033;
|
||||
--muted: #5f6b86;
|
||||
--line: #dfe6f2;
|
||||
--brand: #1f6fff;
|
||||
--brand-strong: #1357d6;
|
||||
--ok-bg: #e8fff2;
|
||||
--ok-line: #64d49a;
|
||||
--warn-bg: #fff5df;
|
||||
--warn-line: #f4c86a;
|
||||
--err-bg: #ffecef;
|
||||
--err-line: #ff8799;
|
||||
--shadow: 0 10px 32px rgba(18, 38, 78, 0.08);
|
||||
font-family: 'Manrope', 'Segoe UI', Tahoma, sans-serif;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background:
|
||||
radial-gradient(1200px 500px at -10% -20%, #dbe8ff 0%, transparent 60%),
|
||||
radial-gradient(900px 500px at 110% 10%, #dff8ef 0%, transparent 55%),
|
||||
var(--bg);
|
||||
}
|
||||
|
||||
.page {
|
||||
max-width: 1040px;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 4px;
|
||||
font-size: 32px;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--brand);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover { text-decoration: underline; }
|
||||
|
||||
.hint {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin: 16px 0 24px;
|
||||
}
|
||||
|
||||
.cabinet-link,
|
||||
.user-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
font-size: 14px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.cabinet-link span,
|
||||
.user-bar span,
|
||||
.meta,
|
||||
.token-owner { color: var(--muted); }
|
||||
|
||||
.star-filter {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.star-filter label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: var(--card);
|
||||
border: 1px solid var(--line);
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.control-buttons,
|
||||
.token-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
padding: 10px 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
background: linear-gradient(180deg, #2c7bff 0%, #1f6fff 100%);
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 16px rgba(31, 111, 255, 0.22);
|
||||
}
|
||||
|
||||
button:hover { filter: brightness(1.03); }
|
||||
|
||||
button.secondary {
|
||||
background: #ecf1fa;
|
||||
color: #2c3a57;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.alert,
|
||||
.reply-form,
|
||||
.review,
|
||||
.cabinet-section,
|
||||
.auto-reply,
|
||||
.auto-reply-pools,
|
||||
.auto-reply-logs {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.alert {
|
||||
background: var(--warn-bg);
|
||||
border-color: var(--warn-line);
|
||||
padding: 12px 14px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.alert-error { background: var(--err-bg); border-color: var(--err-line); }
|
||||
.alert-success { background: var(--ok-bg); border-color: var(--ok-line); }
|
||||
|
||||
.auto-reply,
|
||||
.auto-reply-pools,
|
||||
.auto-reply-logs,
|
||||
.reply-form,
|
||||
.review,
|
||||
.cabinet-section {
|
||||
padding: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.auto-reply {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.auto-reply p,
|
||||
.auto-reply-pools p {
|
||||
margin: 6px 0 0;
|
||||
font-size: 14px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.auto-reply-pools form,
|
||||
.inline-reply form,
|
||||
.cabinet-form,
|
||||
.auth-form,
|
||||
.reply-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
textarea,
|
||||
.auth-form input,
|
||||
.cabinet-form input,
|
||||
.cabinet-form textarea,
|
||||
.auto-reply-pools textarea {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #cfd9ea;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.reply-form textarea { min-height: 100px; resize: vertical; }
|
||||
|
||||
.reply-form__actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.review__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.rating { margin-left: 8px; color: #ee9700; }
|
||||
.meta { display: flex; flex-direction: column; text-align: right; font-size: 13px; }
|
||||
|
||||
.details { margin: 0; }
|
||||
.details dt { font-weight: 700; margin-top: 6px; }
|
||||
.details dd { margin: 0; color: #314261; }
|
||||
|
||||
.answer {
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
background: #f0f6ff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.no-answer { margin-top: 10px; color: var(--muted); }
|
||||
|
||||
.inline-reply summary {
|
||||
cursor: pointer;
|
||||
color: var(--brand);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.token-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.token-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #eef2f8;
|
||||
}
|
||||
|
||||
.token-item:last-child { border-bottom: none; }
|
||||
|
||||
.badge {
|
||||
background: #eaf4ff;
|
||||
color: #1659c9;
|
||||
border-radius: 999px;
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
margin-left: 8px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.badge-inactive {
|
||||
background: #ffe9ee;
|
||||
color: #b2234e;
|
||||
}
|
||||
|
||||
.inline-form { margin: 0; }
|
||||
.auth-page { max-width: 480px; }
|
||||
.auth-form button { width: 100%; }
|
||||
|
||||
.logs-table-wrap { overflow-x: auto; }
|
||||
.logs-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
}
|
||||
.logs-table th,
|
||||
.logs-table td {
|
||||
border-bottom: 1px solid #ecf1f8;
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page { padding: 12px; }
|
||||
h1 { font-size: 24px; }
|
||||
h2 { font-size: 18px; }
|
||||
|
||||
.user-bar,
|
||||
.cabinet-link,
|
||||
.review__header,
|
||||
.auto-reply,
|
||||
.token-item,
|
||||
.reply-form__actions {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.meta { text-align: left; }
|
||||
|
||||
.control-buttons,
|
||||
.token-actions {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.logs-table {
|
||||
font-size: 13px;
|
||||
min-width: 720px;
|
||||
}
|
||||
|
||||
.logs-table th,
|
||||
.logs-table td {
|
||||
white-space: nowrap;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.logs-table td:last-child,
|
||||
.logs-table th:last-child {
|
||||
white-space: normal;
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
.auth-page { max-width: 100%; }
|
||||
}
|
||||
Reference in New Issue
Block a user