1243 lines
17 KiB
CSS
1243 lines
17 KiB
CSS
:root {
|
|
color-scheme: light;
|
|
font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
|
|
background: #f3f5f8;
|
|
color: #1b1f24;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: #f3f5f8;
|
|
}
|
|
|
|
.app {
|
|
padding: 32px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
|
|
.notice {
|
|
padding: 14px 18px;
|
|
border-radius: 12px;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.notice.inline {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.notice.info {
|
|
background: #e0f2fe;
|
|
color: #0c4a6e;
|
|
border: 1px solid #bae6fd;
|
|
}
|
|
|
|
.notice.success {
|
|
background: #dcfce7;
|
|
color: #166534;
|
|
border: 1px solid #bbf7d0;
|
|
}
|
|
|
|
.notice.error {
|
|
background: #fee2e2;
|
|
color: #991b1b;
|
|
border: 1px solid #fecaca;
|
|
}
|
|
|
|
.notice.warn {
|
|
background: #fef3c7;
|
|
color: #92400e;
|
|
border: 1px solid #fcd34d;
|
|
}
|
|
|
|
.visibility-list {
|
|
margin-top: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
font-size: 12px;
|
|
color: #78350f;
|
|
}
|
|
|
|
.visibility-item {
|
|
background: rgba(251, 191, 36, 0.2);
|
|
border-radius: 8px;
|
|
padding: 6px 8px;
|
|
}
|
|
.help {
|
|
gap: 12px;
|
|
}
|
|
|
|
.help-list {
|
|
margin: 0;
|
|
padding-left: 20px;
|
|
color: #334155;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.help-note {
|
|
margin: 0;
|
|
font-size: 13px;
|
|
color: #475569;
|
|
}
|
|
|
|
.notifications .notification-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.live {
|
|
gap: 12px;
|
|
}
|
|
|
|
.overview {
|
|
gap: 12px;
|
|
}
|
|
|
|
.summary-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.summary-card {
|
|
background: #f8fafc;
|
|
border-radius: 12px;
|
|
padding: 10px 12px;
|
|
border: 1px solid #e2e8f0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.summary-value {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.live-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.status-actions {
|
|
margin-top: 12px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.live-label {
|
|
font-size: 11px;
|
|
color: #64748b;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.live-value {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.live-value {
|
|
word-break: break-all;
|
|
}
|
|
|
|
.access-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.access-block {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.access-row {
|
|
padding: 12px 14px;
|
|
border-radius: 12px;
|
|
border: 1px solid #e2e8f0;
|
|
background: #f8fafc;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.access-row.ok {
|
|
border-color: #bbf7d0;
|
|
background: #f0fdf4;
|
|
}
|
|
|
|
.access-row.fail {
|
|
border-color: #fecaca;
|
|
background: #fef2f2;
|
|
}
|
|
|
|
.access-title {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.access-subtitle {
|
|
font-size: 11px;
|
|
color: #64748b;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.access-status {
|
|
color: #334155;
|
|
}
|
|
|
|
.access-error {
|
|
color: #b91c1c;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px 24px;
|
|
background: #101827;
|
|
color: #f7f7fb;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.header h1 {
|
|
margin: 0 0 8px;
|
|
font-size: 28px;
|
|
}
|
|
|
|
.header p {
|
|
margin: 0;
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.header-actions button {
|
|
min-width: 120px;
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.global-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.global-actions button {
|
|
min-width: 140px;
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tab {
|
|
border: 1px solid #e2e8f0;
|
|
background: #f8fafc;
|
|
color: #475569;
|
|
border-radius: 999px;
|
|
padding: 8px 14px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tab.active {
|
|
border-color: #2563eb;
|
|
background: #dbeafe;
|
|
color: #1e3a8a;
|
|
}
|
|
|
|
.log-tabs {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.pager {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.pager-info {
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
}
|
|
|
|
.notification-bell {
|
|
position: relative;
|
|
}
|
|
|
|
.bell-badge {
|
|
position: absolute;
|
|
top: -6px;
|
|
right: -6px;
|
|
background: #ef4444;
|
|
color: #fff;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
border-radius: 999px;
|
|
padding: 2px 6px;
|
|
}
|
|
|
|
.bell-panel {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 42px;
|
|
width: 320px;
|
|
background: #ffffff;
|
|
border-radius: 12px;
|
|
border: 1px solid #e2e8f0;
|
|
box-shadow: 0 20px 30px rgba(15, 23, 42, 0.15);
|
|
padding: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.bell-filters {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.bell-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 13px;
|
|
color: #1f2937;
|
|
}
|
|
|
|
.icon-btn.secondary {
|
|
background: #e2e8f0;
|
|
color: #1f2937;
|
|
}
|
|
|
|
.icon-btn.secondary.active {
|
|
background: #cbd5f5;
|
|
color: #1e3a8a;
|
|
}
|
|
|
|
.modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(15, 23, 42, 0.4);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 20;
|
|
padding: 20px;
|
|
}
|
|
|
|
.modal {
|
|
background: #ffffff;
|
|
border-radius: 16px;
|
|
padding: 24px;
|
|
width: min(640px, 100%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
box-shadow: 0 30px 60px rgba(15, 23, 42, 0.2);
|
|
}
|
|
.task-switcher {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
color: #e2e8f0;
|
|
min-width: 220px;
|
|
}
|
|
|
|
.task-switcher-label {
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.task-switcher select {
|
|
padding: 8px 10px;
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(226, 232, 240, 0.35);
|
|
background: #0f172a;
|
|
color: #e2e8f0;
|
|
}
|
|
|
|
.status-caption {
|
|
font-size: 13px;
|
|
color: #64748b;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.layout {
|
|
display: grid;
|
|
grid-template-columns: 260px minmax(0, 1fr) 320px;
|
|
gap: 20px;
|
|
align-items: start;
|
|
}
|
|
|
|
.top-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
gap: 20px;
|
|
align-items: start;
|
|
}
|
|
|
|
.main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
|
|
.sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.sidebar.left {
|
|
order: 0;
|
|
}
|
|
|
|
.sidebar.right {
|
|
order: 2;
|
|
}
|
|
|
|
.sticky {
|
|
position: sticky;
|
|
top: 20px;
|
|
height: calc(100vh - 40px);
|
|
overflow: auto;
|
|
}
|
|
|
|
.card {
|
|
background: #ffffff;
|
|
border-radius: 16px;
|
|
padding: 24px;
|
|
box-shadow: 0 10px 30px rgba(16, 24, 39, 0.08);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.card h2,
|
|
.card h3 {
|
|
margin: 0;
|
|
}
|
|
|
|
label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
font-size: 14px;
|
|
color: #425066;
|
|
}
|
|
|
|
.label-line {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.required {
|
|
color: #dc2626;
|
|
margin-left: 6px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.optional {
|
|
color: #64748b;
|
|
margin-left: 8px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
input {
|
|
padding: 8px 10px;
|
|
border-radius: 10px;
|
|
border: 1px solid #d1d7e0;
|
|
font-size: 13px;
|
|
}
|
|
|
|
textarea {
|
|
padding: 8px 10px;
|
|
border-radius: 10px;
|
|
border: 1px solid #d1d7e0;
|
|
font-size: 13px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.row {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.actions {
|
|
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
|
}
|
|
|
|
.row-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.row-header-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: #0f172a;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.section {
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.section:last-of-type {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.section summary {
|
|
list-style: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.section summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.row-inline {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: center;
|
|
}
|
|
|
|
.row-inline input {
|
|
flex: 1;
|
|
}
|
|
|
|
.row-inline.column {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.select-inline {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
}
|
|
|
|
.select-inline select {
|
|
padding: 6px 10px;
|
|
border-radius: 10px;
|
|
border: 1px solid #d1d7e0;
|
|
background: #ffffff;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.competitor-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.toggle-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
font-size: 13px;
|
|
color: #334155;
|
|
}
|
|
|
|
.checkbox {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.checkbox input {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.checkbox.inline {
|
|
margin-top: 24px;
|
|
font-size: 12px;
|
|
color: #475569;
|
|
}
|
|
|
|
button {
|
|
border: none;
|
|
border-radius: 10px;
|
|
padding: 10px 16px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ghost {
|
|
background: transparent;
|
|
color: #2563eb;
|
|
padding: 6px 10px;
|
|
}
|
|
|
|
.ghost.tiny {
|
|
font-size: 11px;
|
|
padding: 2px 6px;
|
|
}
|
|
|
|
.membership-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.modal-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
font-size: 13px;
|
|
color: #1f2937;
|
|
}
|
|
|
|
.modal-list-item {
|
|
padding: 8px 10px;
|
|
border-radius: 10px;
|
|
background: #f8fafc;
|
|
}
|
|
|
|
button.primary {
|
|
background: #2563eb;
|
|
color: #fff;
|
|
}
|
|
|
|
button.secondary {
|
|
background: #e2e8f0;
|
|
color: #1f2937;
|
|
}
|
|
|
|
button.danger {
|
|
background: #ef4444;
|
|
color: #fff;
|
|
}
|
|
|
|
.account-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.account-summary {
|
|
font-size: 12px;
|
|
color: #475569;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.role-presets {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.role-panel {
|
|
margin-top: 12px;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.role-list {
|
|
margin-top: 6px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.role-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 4px 8px;
|
|
border-radius: 999px;
|
|
background: #e2e8f0;
|
|
color: #1f2937;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.role-empty {
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
}
|
|
|
|
.role-badges {
|
|
display: flex;
|
|
gap: 6px;
|
|
margin: 6px 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
.busy-accounts {
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.account-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
padding: 12px 16px;
|
|
border-radius: 12px;
|
|
background: #f8fafc;
|
|
}
|
|
|
|
.account-phone {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.account-meta {
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.status {
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.status.ok {
|
|
color: #16a34a;
|
|
}
|
|
|
|
.status.limited {
|
|
color: #f97316;
|
|
}
|
|
|
|
.account-error {
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
max-width: 240px;
|
|
text-align: right;
|
|
}
|
|
|
|
.account-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.role-toggle {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.tasks-layout {
|
|
display: grid;
|
|
grid-template-columns: minmax(220px, 260px) minmax(320px, 1fr);
|
|
gap: 16px;
|
|
}
|
|
|
|
.task-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
max-height: 60vh;
|
|
overflow: auto;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.task-controls {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.task-search {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.task-search input {
|
|
width: 100%;
|
|
height: 34px;
|
|
font-size: 12px;
|
|
padding: 6px 10px;
|
|
}
|
|
|
|
.task-filters {
|
|
display: flex;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.task-filters .chip {
|
|
padding: 6px 10px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.select-inline {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.select-inline select {
|
|
height: 34px;
|
|
}
|
|
|
|
.chip {
|
|
border: 1px solid #e2e8f0;
|
|
background: #f8fafc;
|
|
color: #475569;
|
|
border-radius: 999px;
|
|
padding: 6px 12px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.chip.active {
|
|
border-color: #2563eb;
|
|
background: #dbeafe;
|
|
color: #1e3a8a;
|
|
}
|
|
|
|
.task-item {
|
|
border: 1px solid #e2e8f0;
|
|
background: #f8fafc;
|
|
padding: 10px 12px;
|
|
border-radius: 12px;
|
|
text-align: left;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 6px;
|
|
}
|
|
|
|
.icon-btn {
|
|
border-radius: 999px;
|
|
padding: 6px 12px;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.icon-btn.primary {
|
|
background: #2563eb;
|
|
color: #fff;
|
|
}
|
|
|
|
.icon-btn.danger {
|
|
background: #ef4444;
|
|
color: #fff;
|
|
}
|
|
|
|
.task-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
text-align: left;
|
|
}
|
|
|
|
.task-title-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.task-meta {
|
|
font-size: 11px;
|
|
color: #64748b;
|
|
}
|
|
|
|
.task-meta-row {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.task-meta.monitor {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.task-meta.monitor.on {
|
|
color: #16a34a;
|
|
}
|
|
|
|
.task-meta.monitor.off {
|
|
color: #f97316;
|
|
}
|
|
|
|
.task-item.active {
|
|
border-color: #2563eb;
|
|
background: #e0f2fe;
|
|
}
|
|
|
|
.task-title {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.task-summary {
|
|
background: #eef2ff;
|
|
border-radius: 12px;
|
|
padding: 10px 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.task-summary-title {
|
|
font-weight: 700;
|
|
font-size: 13px;
|
|
color: #1e293b;
|
|
}
|
|
|
|
.task-summary-row {
|
|
font-size: 12px;
|
|
color: #475569;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.task-badge {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
padding: 3px 6px;
|
|
border-radius: 999px;
|
|
background: #e2e8f0;
|
|
color: #475569;
|
|
}
|
|
|
|
.task-badge.ok {
|
|
background: #dcfce7;
|
|
color: #15803d;
|
|
}
|
|
|
|
.task-badge.off {
|
|
background: #e2e8f0;
|
|
color: #64748b;
|
|
}
|
|
|
|
.match-badge {
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
margin-left: 8px;
|
|
padding: 2px 6px;
|
|
border-radius: 999px;
|
|
background: #e2e8f0;
|
|
color: #475569;
|
|
}
|
|
|
|
.match-badge.ok {
|
|
background: #dcfce7;
|
|
color: #15803d;
|
|
}
|
|
|
|
.match-badge.warn {
|
|
background: #fee2e2;
|
|
color: #b91c1c;
|
|
}
|
|
|
|
.task-editor {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.login-box {
|
|
border-top: 1px solid #e2e8f0;
|
|
padding-top: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.collapsible {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.hint {
|
|
font-size: 11px;
|
|
color: #64748b;
|
|
}
|
|
|
|
label .hint {
|
|
display: block;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.tdata-report {
|
|
font-size: 12px;
|
|
color: #334155;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.tdata-errors {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.tdata-error-row {
|
|
padding: 8px 10px;
|
|
border-radius: 10px;
|
|
background: #fef2f2;
|
|
border: 1px solid #fecaca;
|
|
}
|
|
|
|
.tdata-error-path {
|
|
font-size: 12px;
|
|
color: #0f172a;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.tdata-error-text {
|
|
font-size: 12px;
|
|
color: #b91c1c;
|
|
}
|
|
|
|
.tdata-error-hint {
|
|
font-size: 11px;
|
|
color: #7c2d12;
|
|
}
|
|
|
|
.status-text {
|
|
font-size: 12px;
|
|
color: #1d4ed8;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.status-text.compact {
|
|
font-size: 11px;
|
|
color: #64748b;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.task-toolbar {
|
|
padding: 6px 10px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.sidebar-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.sidebar-actions button {
|
|
padding: 8px 10px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.sidebar-actions.expanded {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.side-stats {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px;
|
|
}
|
|
|
|
.side-stat {
|
|
background: #f8fafc;
|
|
border-radius: 10px;
|
|
padding: 8px 10px;
|
|
border: 1px solid #e2e8f0;
|
|
font-size: 11px;
|
|
color: #64748b;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.side-stat strong {
|
|
font-size: 14px;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.logs .log-row {
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.log-time {
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
display: flex;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.log-details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.log-users,
|
|
.log-errors {
|
|
font-size: 12px;
|
|
color: #475569;
|
|
white-space: pre-line;
|
|
}
|
|
|
|
.log-result-list {
|
|
display: grid;
|
|
gap: 6px;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.log-result {
|
|
font-size: 13px;
|
|
color: #1f2937;
|
|
}
|
|
|
|
.log-result.success {
|
|
color: #0f766e;
|
|
}
|
|
|
|
.log-result.error {
|
|
color: #b91c1c;
|
|
}
|
|
|
|
.invite-details {
|
|
margin-top: 10px;
|
|
padding: 10px 12px;
|
|
border-radius: 10px;
|
|
background: #f1f5f9;
|
|
color: #334155;
|
|
font-size: 12px;
|
|
display: grid;
|
|
gap: 4px;
|
|
white-space: pre-line;
|
|
}
|
|
|
|
.wrap {
|
|
word-break: break-all;
|
|
}
|
|
|
|
.pre-line {
|
|
white-space: pre-line;
|
|
}
|
|
|
|
button:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.empty {
|
|
padding: 12px;
|
|
border-radius: 10px;
|
|
background: #f1f5f9;
|
|
color: #64748b;
|
|
font-size: 14px;
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.top-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.sticky {
|
|
position: static;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.app {
|
|
padding: 20px;
|
|
}
|
|
|
|
.header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 16px;
|
|
}
|
|
|
|
.header-actions {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 12px;
|
|
width: 100%;
|
|
}
|
|
|
|
.task-switcher {
|
|
width: 100%;
|
|
}
|
|
|
|
.layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.sticky {
|
|
position: static;
|
|
height: auto;
|
|
}
|
|
|
|
.tasks-layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.account-row {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
}
|
|
|
|
.account-actions {
|
|
align-items: flex-start;
|
|
}
|
|
}
|