114 lines
8.9 KiB
CSS
114 lines
8.9 KiB
CSS
/* folk-newsletter-manager styles */
|
|
:host { display: block; max-width: 960px; margin: 0 auto; padding: 1.5rem; color: var(--rs-text-primary, #e5e5e5); font-family: system-ui, -apple-system, sans-serif; }
|
|
|
|
.nl-header { margin-bottom: 1.5rem; }
|
|
.nl-header h2 { font-size: 1.5rem; margin: 0 0 .25rem; }
|
|
.nl-header p { color: var(--rs-text-secondary, #a3a3a3); margin: 0; font-size: .9rem; }
|
|
|
|
/* Not-configured state */
|
|
.nl-setup { text-align: center; padding: 3rem 1.5rem; background: var(--rs-bg-surface, #1e1e2e); border: 1px dashed var(--rs-border, #404040); border-radius: 12px; }
|
|
.nl-setup h3 { font-size: 1.2rem; margin: 0 0 .5rem; }
|
|
.nl-setup p { color: var(--rs-text-secondary, #a3a3a3); margin: .5rem 0; font-size: .9rem; }
|
|
.nl-setup .nl-setup-steps { text-align: left; max-width: 420px; margin: 1.5rem auto 0; }
|
|
.nl-setup .nl-setup-steps li { color: var(--rs-text-secondary, #a3a3a3); margin-bottom: .5rem; font-size: .85rem; }
|
|
|
|
/* Tabs */
|
|
.nl-tabs { display: flex; gap: .5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--rs-border, #333); padding-bottom: 0; }
|
|
.nl-tab { padding: .6rem 1.2rem; background: none; border: none; border-bottom: 2px solid transparent; color: var(--rs-text-secondary, #a3a3a3); cursor: pointer; font-size: .9rem; transition: color .15s, border-color .15s; }
|
|
.nl-tab:hover { color: var(--rs-text-primary, #e5e5e5); }
|
|
.nl-tab.active { color: var(--rs-accent, #14b8a6); border-bottom-color: var(--rs-accent, #14b8a6); }
|
|
|
|
/* Tables */
|
|
.nl-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
|
|
.nl-table th { text-align: left; padding: .6rem .8rem; color: var(--rs-text-muted, #a3a3a3); border-bottom: 1px solid var(--rs-border, #333); font-weight: 500; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
|
|
.nl-table td { padding: .6rem .8rem; border-bottom: 1px solid var(--rs-border-subtle, #1a1a2e); }
|
|
.nl-table tr:hover td { background: var(--rs-bg-surface, #1e1e2e); }
|
|
|
|
/* Badges */
|
|
.nl-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: .75rem; font-weight: 500; }
|
|
.nl-badge--active { background: rgba(20,184,166,0.13); color: var(--rs-accent, #14b8a6); }
|
|
.nl-badge--draft { background: rgba(245,158,11,0.13); color: var(--rs-warning, #f59e0b); }
|
|
.nl-badge--finished { background: rgba(99,102,241,0.13); color: var(--rs-primary-hover, #818cf8); }
|
|
.nl-badge--running { background: rgba(20,184,166,0.13); color: var(--rs-accent, #14b8a6); }
|
|
.nl-badge--paused { background: rgba(239,68,68,0.13); color: var(--rs-error, #f87171); }
|
|
.nl-badge--enabled { background: rgba(20,184,166,0.13); color: var(--rs-accent, #14b8a6); }
|
|
.nl-badge--blocklisted { background: rgba(239,68,68,0.13); color: var(--rs-error, #f87171); }
|
|
|
|
/* Buttons */
|
|
.nl-btn { padding: .5rem 1rem; border-radius: 6px; border: 1px solid var(--rs-border, #333); background: var(--rs-bg-surface, #1e1e2e); color: var(--rs-text-primary, #e5e5e5); cursor: pointer; font-size: .85rem; transition: background .15s, border-color .15s; }
|
|
.nl-btn:hover { background: var(--rs-bg-surface-raised, #252538); border-color: var(--rs-accent, #14b8a6); }
|
|
.nl-btn--primary { background: var(--rs-accent, #14b8a6); border-color: var(--rs-accent, #14b8a6); color: var(--rs-text-inverse, #0a0a0a); font-weight: 500; }
|
|
.nl-btn--primary:hover { background: var(--rs-accent-hover, #0d9488); }
|
|
.nl-btn--sm { padding: .3rem .6rem; font-size: .8rem; }
|
|
|
|
/* Toolbar */
|
|
.nl-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; gap: .75rem; flex-wrap: wrap; }
|
|
.nl-toolbar input[type="search"] { padding: .4rem .8rem; background: var(--rs-input-bg, #0a0a0a); border: 1px solid var(--rs-input-border, #404040); border-radius: 6px; color: var(--rs-input-text, #e5e5e5); font-size: .85rem; min-width: 200px; }
|
|
|
|
/* Pagination */
|
|
.nl-pagination { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: 1rem; font-size: .85rem; color: var(--rs-text-secondary, #a3a3a3); }
|
|
|
|
/* Loading / Empty */
|
|
.nl-loading { text-align: center; padding: 3rem; color: var(--rs-text-secondary, #a3a3a3); }
|
|
.nl-empty { text-align: center; padding: 2rem; color: var(--rs-text-muted, #525252); font-size: .9rem; }
|
|
|
|
/* Create campaign form */
|
|
.nl-form { background: var(--rs-bg-surface, #1e1e2e); border: 1px solid var(--rs-border, #333); border-radius: 8px; padding: 1.25rem; margin-bottom: 1.5rem; }
|
|
.nl-form label { display: block; font-size: .8rem; color: var(--rs-text-secondary, #a3a3a3); margin-bottom: .25rem; }
|
|
.nl-form input, .nl-form select, .nl-form textarea { width: 100%; padding: .45rem .7rem; background: var(--rs-input-bg, #0a0a0a); border: 1px solid var(--rs-input-border, #404040); border-radius: 4px; color: var(--rs-input-text, #e5e5e5); font-size: .85rem; margin-bottom: .75rem; box-sizing: border-box; }
|
|
.nl-form textarea { min-height: 80px; resize: vertical; font-family: inherit; }
|
|
.nl-form-row { display: flex; gap: .75rem; }
|
|
.nl-form-row > * { flex: 1; }
|
|
|
|
/* Danger button */
|
|
.nl-btn--danger { border-color: var(--rs-error, #ef4444); color: var(--rs-error, #f87171); }
|
|
.nl-btn--danger:hover { background: rgba(239,68,68,0.13); border-color: var(--rs-error, #f87171); }
|
|
.nl-btn--send { background: var(--rs-primary, #6366f1); border-color: var(--rs-primary, #6366f1); color: #fff; font-weight: 500; }
|
|
.nl-btn--send:hover { background: var(--rs-primary-hover, #4f46e5); }
|
|
|
|
/* Actions cell */
|
|
.nl-actions-cell { white-space: nowrap; }
|
|
.nl-actions-cell .nl-btn { margin-right: .25rem; }
|
|
|
|
/* Error */
|
|
.nl-error { padding: .75rem 1rem; background: rgba(239,68,68,0.13); border: 1px solid var(--rs-error, #ef4444); border-radius: 6px; color: var(--rs-error, #f87171); font-size: .85rem; margin-bottom: 1rem; }
|
|
|
|
/* ── Editor ── */
|
|
.nl-editor-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
|
|
.nl-editor-header h2 { font-size: 1.3rem; margin: 0; }
|
|
|
|
.nl-editor-fields { margin-bottom: 1rem; }
|
|
.nl-editor-fields label { display: block; font-size: .8rem; color: var(--rs-text-secondary, #a3a3a3); margin-bottom: .25rem; }
|
|
.nl-editor-fields input { width: 100%; padding: .45rem .7rem; background: var(--rs-input-bg, #0a0a0a); border: 1px solid var(--rs-input-border, #404040); border-radius: 4px; color: var(--rs-input-text, #e5e5e5); font-size: .85rem; margin-bottom: .75rem; box-sizing: border-box; }
|
|
|
|
/* List selector */
|
|
.nl-list-selector { display: flex; flex-wrap: wrap; gap: .5rem; padding: .5rem; background: var(--rs-bg-surface, #1e1e2e); border: 1px solid var(--rs-border, #333); border-radius: 6px; margin-bottom: 1rem; min-height: 2.5rem; align-items: center; }
|
|
.nl-list-option { display: flex; align-items: center; gap: .4rem; padding: .3rem .6rem; background: var(--rs-input-bg, #0a0a0a); border: 1px solid var(--rs-border, #333); border-radius: 4px; cursor: pointer; font-size: .82rem; transition: border-color .15s; }
|
|
.nl-list-option:hover { border-color: var(--rs-accent, #14b8a6); }
|
|
.nl-list-option input[type="checkbox"] { accent-color: var(--rs-accent, #14b8a6); }
|
|
.nl-list-count { color: var(--rs-text-secondary, #a3a3a3); font-size: .75rem; margin-left: .25rem; }
|
|
|
|
/* Editor body + preview */
|
|
.nl-editor { display: flex; gap: 1rem; margin-bottom: 1rem; }
|
|
.nl-editor__body { flex: 1; display: flex; flex-direction: column; }
|
|
.nl-editor__body label { font-size: .8rem; color: var(--rs-text-secondary, #a3a3a3); margin-bottom: .25rem; }
|
|
.nl-editor__body textarea { flex: 1; min-height: 300px; padding: .6rem .8rem; background: var(--rs-input-bg, #0a0a0a); border: 1px solid var(--rs-input-border, #404040); border-radius: 4px; color: var(--rs-input-text, #e5e5e5); font-size: .85rem; font-family: 'Fira Code', 'Cascadia Code', monospace; resize: vertical; box-sizing: border-box; line-height: 1.5; }
|
|
.nl-editor__preview { flex: 1; display: flex; flex-direction: column; }
|
|
.nl-editor__preview label { font-size: .8rem; color: var(--rs-text-secondary, #a3a3a3); margin-bottom: .25rem; }
|
|
.nl-preview-frame { flex: 1; min-height: 300px; border: 1px solid var(--rs-input-border, #404040); border-radius: 4px; background: #fff; }
|
|
|
|
/* Editor action bar */
|
|
.nl-editor-actions { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; padding-top: .75rem; border-top: 1px solid var(--rs-border, #333); }
|
|
.nl-editor-actions__left, .nl-editor-actions__right { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
|
|
.nl-schedule-group { display: flex; align-items: center; gap: .35rem; }
|
|
.nl-schedule-group input[type="datetime-local"] { padding: .4rem .5rem; background: var(--rs-input-bg, #0a0a0a); border: 1px solid var(--rs-input-border, #404040); border-radius: 4px; color: var(--rs-input-text, #e5e5e5); font-size: .82rem; }
|
|
|
|
/* Responsive: stack editor panes vertically on narrow screens */
|
|
@media (max-width: 700px) {
|
|
.nl-editor { flex-direction: column; }
|
|
.nl-editor-actions { flex-direction: column; align-items: stretch; }
|
|
.nl-editor-actions__left, .nl-editor-actions__right { justify-content: center; }
|
|
.nl-form-row { flex-direction: column; }
|
|
.nl-schedule-group { flex-wrap: wrap; }
|
|
}
|