65 lines
4.0 KiB
CSS
65 lines
4.0 KiB
CSS
/* folk-newsletter-manager styles */
|
|
:host { display: block; max-width: 960px; margin: 0 auto; padding: 1.5rem; color: #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: #a3a3a3; margin: 0; font-size: .9rem; }
|
|
|
|
/* Not-configured state */
|
|
.nl-setup { text-align: center; padding: 3rem 1.5rem; background: #1e1e2e; border: 1px dashed #404040; border-radius: 12px; }
|
|
.nl-setup h3 { font-size: 1.2rem; margin: 0 0 .5rem; }
|
|
.nl-setup p { color: #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: #a3a3a3; margin-bottom: .5rem; font-size: .85rem; }
|
|
|
|
/* Tabs */
|
|
.nl-tabs { display: flex; gap: .5rem; margin-bottom: 1.5rem; border-bottom: 1px solid #333; padding-bottom: 0; }
|
|
.nl-tab { padding: .6rem 1.2rem; background: none; border: none; border-bottom: 2px solid transparent; color: #a3a3a3; cursor: pointer; font-size: .9rem; transition: color .15s, border-color .15s; }
|
|
.nl-tab:hover { color: #e5e5e5; }
|
|
.nl-tab.active { color: #14b8a6; border-bottom-color: #14b8a6; }
|
|
|
|
/* Tables */
|
|
.nl-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
|
|
.nl-table th { text-align: left; padding: .6rem .8rem; color: #a3a3a3; border-bottom: 1px solid #333; font-weight: 500; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
|
|
.nl-table td { padding: .6rem .8rem; border-bottom: 1px solid #1a1a2e; }
|
|
.nl-table tr:hover td { background: #1e1e2e; }
|
|
|
|
/* Badges */
|
|
.nl-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: .75rem; font-weight: 500; }
|
|
.nl-badge--active { background: #14b8a622; color: #14b8a6; }
|
|
.nl-badge--draft { background: #f59e0b22; color: #f59e0b; }
|
|
.nl-badge--finished { background: #6366f122; color: #818cf8; }
|
|
.nl-badge--running { background: #14b8a622; color: #14b8a6; }
|
|
.nl-badge--paused { background: #ef444422; color: #f87171; }
|
|
.nl-badge--enabled { background: #14b8a622; color: #14b8a6; }
|
|
.nl-badge--blocklisted { background: #ef444422; color: #f87171; }
|
|
|
|
/* Buttons */
|
|
.nl-btn { padding: .5rem 1rem; border-radius: 6px; border: 1px solid #333; background: #1e1e2e; color: #e5e5e5; cursor: pointer; font-size: .85rem; transition: background .15s, border-color .15s; }
|
|
.nl-btn:hover { background: #252538; border-color: #14b8a6; }
|
|
.nl-btn--primary { background: #14b8a6; border-color: #14b8a6; color: #0a0a0a; font-weight: 500; }
|
|
.nl-btn--primary:hover { background: #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: #0a0a0a; border: 1px solid #404040; border-radius: 6px; color: #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: #a3a3a3; }
|
|
|
|
/* Loading / Empty */
|
|
.nl-loading { text-align: center; padding: 3rem; color: #a3a3a3; }
|
|
.nl-empty { text-align: center; padding: 2rem; color: #525252; font-size: .9rem; }
|
|
|
|
/* Create campaign form */
|
|
.nl-form { background: #1e1e2e; border: 1px solid #333; border-radius: 8px; padding: 1.25rem; margin-bottom: 1.5rem; }
|
|
.nl-form label { display: block; font-size: .8rem; color: #a3a3a3; margin-bottom: .25rem; }
|
|
.nl-form input, .nl-form select, .nl-form textarea { width: 100%; padding: .45rem .7rem; background: #0a0a0a; border: 1px solid #404040; border-radius: 4px; color: #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; }
|
|
|
|
/* Error */
|
|
.nl-error { padding: .75rem 1rem; background: #ef444422; border: 1px solid #ef4444; border-radius: 6px; color: #f87171; font-size: .85rem; margin-bottom: 1rem; }
|