1800 lines
28 KiB
CSS
1800 lines
28 KiB
CSS
/* Pokemon Stock Monitor Dashboard Styles */
|
|
/* Dark theme matching the Chrome extension */
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
:root {
|
|
--bg-primary: #1a1a2e;
|
|
--bg-secondary: #16213e;
|
|
--bg-card: #0f3460;
|
|
--text-primary: #eee;
|
|
--text-secondary: #aaa;
|
|
--accent-yellow: #ffcb05;
|
|
--accent-green: #00c853;
|
|
--accent-red: #c62828;
|
|
--accent-blue: #0099ff;
|
|
--border-color: #333;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.app {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* Sidebar */
|
|
.sidebar {
|
|
width: 240px;
|
|
background: var(--bg-secondary);
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: fixed;
|
|
height: 100vh;
|
|
border-right: 1px solid var(--border-color);
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.logo-icon {
|
|
font-size: 28px;
|
|
}
|
|
|
|
.logo-text {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: var(--accent-yellow);
|
|
}
|
|
|
|
.nav-links {
|
|
list-style: none;
|
|
flex: 1;
|
|
}
|
|
|
|
.nav-links li {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.nav-links a {
|
|
display: block;
|
|
padding: 12px 15px;
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
border-radius: 8px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.nav-links a:hover {
|
|
background: rgba(255, 203, 5, 0.1);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.nav-links a.active {
|
|
background: var(--accent-yellow);
|
|
color: var(--bg-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.sidebar-footer {
|
|
padding-top: 20px;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.status-indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.status-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: var(--text-secondary);
|
|
}
|
|
|
|
.status-dot.active {
|
|
background: var(--accent-green);
|
|
box-shadow: 0 0 10px var(--accent-green);
|
|
}
|
|
|
|
.status-dot.error {
|
|
background: var(--accent-red);
|
|
}
|
|
|
|
/* Main Content */
|
|
.content {
|
|
flex: 1;
|
|
margin-left: 240px;
|
|
padding: 30px;
|
|
}
|
|
|
|
.page {
|
|
display: none;
|
|
}
|
|
|
|
.page.active {
|
|
display: block;
|
|
}
|
|
|
|
h1 {
|
|
margin-bottom: 25px;
|
|
font-size: 28px;
|
|
}
|
|
|
|
h2 {
|
|
margin-bottom: 15px;
|
|
font-size: 20px;
|
|
color: var(--accent-yellow);
|
|
}
|
|
|
|
h3 {
|
|
margin-bottom: 10px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* Stats Grid */
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.stat-card {
|
|
background: var(--bg-secondary);
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
border: 1px solid var(--border-color);
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.stat-card.clickable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.stat-card.clickable:hover {
|
|
border-color: var(--accent-yellow);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.stat-card.highlight {
|
|
border-color: var(--accent-green);
|
|
background: rgba(0, 200, 83, 0.1);
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 36px;
|
|
font-weight: 700;
|
|
color: var(--accent-yellow);
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Store Cards */
|
|
.store-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
gap: 15px;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.store-card {
|
|
background: var(--bg-secondary);
|
|
border-radius: 12px;
|
|
padding: 18px;
|
|
border: 1px solid var(--border-color);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.store-card:hover {
|
|
border-color: var(--accent-yellow);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.store-card.no-data {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.store-card.no-data:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.store-logo-container {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.store-logo-img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.store-icon-fallback {
|
|
font-size: 20px;
|
|
font-weight: 800;
|
|
width: 100%;
|
|
height: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.store-arrow {
|
|
font-size: 24px;
|
|
color: var(--text-secondary);
|
|
margin-left: auto;
|
|
}
|
|
|
|
.store-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.store-name {
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.store-stats {
|
|
display: flex;
|
|
gap: 12px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.store-stat {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.store-stat.in-stock {
|
|
color: var(--accent-green);
|
|
}
|
|
|
|
.store-stat.out-of-stock {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.store-stat.no-data {
|
|
color: var(--text-secondary);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Activity Feed */
|
|
.section {
|
|
background: var(--bg-secondary);
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.activity-feed {
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.activity-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.activity-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.activity-thumb {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 8px;
|
|
object-fit: cover;
|
|
flex-shrink: 0;
|
|
background: var(--bg-card);
|
|
}
|
|
|
|
.activity-thumb.activity-logo {
|
|
object-fit: contain;
|
|
padding: 8px;
|
|
background: #fff;
|
|
}
|
|
|
|
.activity-store-icon {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 18px;
|
|
font-weight: 800;
|
|
flex-shrink: 0;
|
|
padding: 6px;
|
|
}
|
|
|
|
.activity-store-logo {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.activity-store-fallback {
|
|
font-size: 16px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.activity-icon {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 20px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.activity-icon.pokemoncenter {
|
|
background: linear-gradient(135deg, #ffcb05 0%, #ff9500 100%);
|
|
}
|
|
|
|
.activity-icon.target {
|
|
background: linear-gradient(135deg, #cc0000 0%, #990000 100%);
|
|
}
|
|
|
|
.activity-icon.walmart {
|
|
background: linear-gradient(135deg, #0071ce 0%, #004c91 100%);
|
|
}
|
|
|
|
.activity-icon.bestbuy {
|
|
background: linear-gradient(135deg, #0046be 0%, #003087 100%);
|
|
}
|
|
|
|
.activity-icon.new-drop {
|
|
background: rgba(0, 153, 255, 0.2);
|
|
}
|
|
|
|
.activity-icon.restock {
|
|
background: rgba(0, 200, 83, 0.2);
|
|
}
|
|
|
|
.activity-name a {
|
|
color: var(--text-primary);
|
|
text-decoration: none;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.activity-name a:hover {
|
|
color: var(--accent-yellow);
|
|
}
|
|
|
|
.activity-badge {
|
|
display: inline-block;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
margin-left: 8px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.activity-badge.new-drop {
|
|
background: rgba(0, 153, 255, 0.2);
|
|
color: var(--accent-blue);
|
|
}
|
|
|
|
.activity-badge.restock {
|
|
background: rgba(0, 200, 83, 0.2);
|
|
color: var(--accent-green);
|
|
}
|
|
|
|
.activity-details {
|
|
flex: 1;
|
|
}
|
|
|
|
.activity-name {
|
|
font-weight: 500;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.activity-meta {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.activity-time {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Event Filter Badge */
|
|
.event-filter-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: var(--accent-yellow);
|
|
color: var(--bg-primary);
|
|
padding: 8px 12px;
|
|
border-radius: 20px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.filter-badge-text {
|
|
display: inline-block;
|
|
}
|
|
|
|
.filter-badge-close {
|
|
cursor: pointer;
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
opacity: 0.7;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.filter-badge-close:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Filters */
|
|
.filters {
|
|
display: flex;
|
|
gap: 15px;
|
|
margin-bottom: 20px;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
|
|
.filters select, .filters input[type="text"] {
|
|
padding: 10px 15px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
background: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.filters select:focus, .filters input:focus {
|
|
outline: none;
|
|
border-color: var(--accent-yellow);
|
|
}
|
|
|
|
.checkbox-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn-clear-filters {
|
|
margin-left: auto;
|
|
padding: 8px 16px !important;
|
|
margin-right: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
/* Products Grid */
|
|
.products-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.product-card {
|
|
background: var(--bg-secondary);
|
|
border-radius: 12px;
|
|
padding: 15px;
|
|
border: 1px solid var(--border-color);
|
|
transition: transform 0.2s, border-color 0.2s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.product-card:hover {
|
|
transform: translateY(-3px);
|
|
border-color: var(--accent-yellow);
|
|
}
|
|
|
|
.product-card.in-stock {
|
|
border-left: 4px solid var(--accent-green);
|
|
}
|
|
|
|
.product-card.out-of-stock {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.product-card.favorite {
|
|
border-color: var(--accent-yellow);
|
|
}
|
|
|
|
.product-image-container {
|
|
width: 100%;
|
|
height: 150px;
|
|
background: var(--bg-card);
|
|
border-radius: 8px;
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
/* Store badge overlay on product images */
|
|
.product-store-badge {
|
|
position: absolute;
|
|
bottom: 8px;
|
|
right: 8px;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 4px;
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
|
|
z-index: 10;
|
|
}
|
|
|
|
.store-badge-logo {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.store-badge-fallback {
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.product-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.product-image-placeholder {
|
|
font-size: 48px;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.product-logo-fallback {
|
|
max-width: 80%;
|
|
max-height: 60%;
|
|
object-fit: contain;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.product-store-icon {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 28px;
|
|
font-weight: 800;
|
|
opacity: 0.6;
|
|
padding: 12px;
|
|
}
|
|
|
|
.product-store-logo {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.product-store-fallback {
|
|
font-size: 24px;
|
|
font-weight: 800;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.product-name {
|
|
font-weight: 500;
|
|
margin-bottom: 8px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.product-meta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.product-price {
|
|
color: var(--accent-yellow);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.product-stock {
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.product-stock.in-stock {
|
|
background: rgba(0, 200, 83, 0.2);
|
|
color: var(--accent-green);
|
|
}
|
|
|
|
.product-stock.out-of-stock {
|
|
background: rgba(198, 40, 40, 0.2);
|
|
color: var(--accent-red);
|
|
}
|
|
|
|
.product-actions {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 10px;
|
|
padding-top: 10px;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.btn-favorite {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 18px;
|
|
opacity: 0.5;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.btn-favorite:hover, .btn-favorite.active {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Charts */
|
|
.charts-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.chart-card {
|
|
background: var(--bg-secondary);
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.chart-card canvas {
|
|
max-height: 300px;
|
|
}
|
|
|
|
/* Favorites */
|
|
.favorites-section {
|
|
max-width: 800px;
|
|
}
|
|
|
|
.add-favorite-form {
|
|
background: var(--bg-secondary);
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
margin-bottom: 30px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.form-row {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.form-row input, .form-row select {
|
|
padding: 10px 15px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.form-row input {
|
|
flex: 1;
|
|
min-width: 200px;
|
|
}
|
|
|
|
.suggestions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.suggestion-tag {
|
|
padding: 6px 12px;
|
|
background: var(--bg-card);
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.suggestion-tag:hover {
|
|
background: var(--accent-yellow);
|
|
color: var(--bg-primary);
|
|
}
|
|
|
|
.favorites-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.favorite-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
padding: 15px;
|
|
background: var(--bg-secondary);
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.favorite-icon {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.favorite-details {
|
|
flex: 1;
|
|
}
|
|
|
|
.favorite-name {
|
|
font-weight: 500;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.favorite-type {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.favorite-priority {
|
|
padding: 4px 10px;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.favorite-priority.high {
|
|
background: rgba(198, 40, 40, 0.2);
|
|
color: #ff6b6b;
|
|
}
|
|
|
|
.favorite-priority.medium {
|
|
background: rgba(255, 203, 5, 0.2);
|
|
color: var(--accent-yellow);
|
|
}
|
|
|
|
.favorite-priority.low {
|
|
background: rgba(0, 200, 83, 0.2);
|
|
color: var(--accent-green);
|
|
}
|
|
|
|
.btn-delete {
|
|
background: none;
|
|
border: none;
|
|
color: var(--accent-red);
|
|
cursor: pointer;
|
|
font-size: 18px;
|
|
opacity: 0.7;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.btn-delete:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Buttons */
|
|
.btn-primary {
|
|
padding: 10px 20px;
|
|
background: var(--accent-yellow);
|
|
color: var(--bg-primary);
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #ffd633;
|
|
}
|
|
|
|
.btn-secondary {
|
|
padding: 10px 20px;
|
|
background: var(--bg-card);
|
|
color: var(--text-primary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
margin-right: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--border-color);
|
|
}
|
|
|
|
/* Pagination */
|
|
#productsPagination {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.pagination {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 15px;
|
|
}
|
|
|
|
.btn-page {
|
|
padding: 8px 18px;
|
|
background: var(--bg-card);
|
|
color: var(--text-primary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.btn-page:hover:not(:disabled) {
|
|
background: var(--border-color);
|
|
}
|
|
|
|
.btn-page:disabled {
|
|
opacity: 0.4;
|
|
cursor: default;
|
|
}
|
|
|
|
.page-info {
|
|
color: var(--text-secondary);
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Settings */
|
|
.settings-section {
|
|
max-width: 600px;
|
|
}
|
|
|
|
.settings-section h3 {
|
|
margin-top: 25px;
|
|
}
|
|
|
|
.help-text {
|
|
color: var(--text-secondary);
|
|
font-size: 14px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
/* Modal */
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
z-index: 1000;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.modal.show {
|
|
display: flex;
|
|
}
|
|
|
|
.modal-content {
|
|
background: var(--bg-secondary);
|
|
border-radius: 12px;
|
|
max-width: 520px;
|
|
width: 100%;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: 90vh;
|
|
margin: auto;
|
|
}
|
|
|
|
.modal-lg {
|
|
max-width: 680px;
|
|
}
|
|
|
|
.modal-header {
|
|
padding: 20px 24px 16px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.modal-header h3 {
|
|
margin: 0;
|
|
padding-right: 32px;
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 20px 24px;
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
}
|
|
|
|
.modal-body h4 {
|
|
margin: 1.2rem 0 0.6rem;
|
|
font-size: 0.9rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.modal-body h4:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.modal-footer {
|
|
padding: 16px 24px;
|
|
border-top: 1px solid var(--border-color);
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.modal-close {
|
|
position: absolute;
|
|
top: 16px;
|
|
right: 18px;
|
|
font-size: 22px;
|
|
cursor: pointer;
|
|
color: var(--text-secondary);
|
|
line-height: 1;
|
|
background: none;
|
|
border: none;
|
|
}
|
|
|
|
.modal-close:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.form-row {
|
|
display: flex;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.form-row .form-group {
|
|
flex: 1;
|
|
min-width: 120px;
|
|
}
|
|
|
|
/* Loading */
|
|
.loading {
|
|
text-align: center;
|
|
padding: 40px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Scrollbar - subtle integrated style */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
::-webkit-scrollbar-corner {
|
|
background: transparent;
|
|
}
|
|
|
|
/* Firefox scrollbar */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
|
|
}
|
|
|
|
/* Control Panel */
|
|
.control-panel {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.control-card {
|
|
background: var(--bg-secondary);
|
|
border-radius: 12px;
|
|
border: 1px solid var(--border-color);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.control-card-header {
|
|
padding: 15px 20px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.control-card-header h3 {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.control-card-body {
|
|
padding: 20px;
|
|
}
|
|
|
|
.control-card-actions {
|
|
padding: 15px 20px;
|
|
border-top: 1px solid var(--border-color);
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.monitor-status-card {
|
|
grid-column: span 2;
|
|
}
|
|
|
|
.monitor-badge {
|
|
padding: 4px 12px;
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.monitor-badge.running {
|
|
background: rgba(0, 200, 83, 0.2);
|
|
color: var(--accent-green);
|
|
}
|
|
|
|
.monitor-badge.stopped {
|
|
background: rgba(198, 40, 40, 0.2);
|
|
color: var(--accent-red);
|
|
}
|
|
|
|
.last-check-text {
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.btn-large {
|
|
padding: 12px 24px;
|
|
font-size: 15px;
|
|
flex: 1;
|
|
}
|
|
|
|
.btn-danger {
|
|
padding: 10px 20px;
|
|
background: var(--accent-red);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.btn-danger:hover:not(:disabled) {
|
|
background: #d32f2f;
|
|
}
|
|
|
|
.btn-danger:disabled, .btn-primary:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.btn-icon {
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.interval-input {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.interval-input input {
|
|
width: 80px;
|
|
padding: 10px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
font-size: 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
.scrapers-card {
|
|
grid-column: span 2;
|
|
}
|
|
|
|
/* Chrome Extension Card */
|
|
.extension-card {
|
|
grid-column: span 2;
|
|
border-color: #ffcb05;
|
|
}
|
|
|
|
.extension-badge {
|
|
padding: 4px 12px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.extension-badge.connected {
|
|
background: rgba(0, 255, 0, 0.2);
|
|
color: #00ff00;
|
|
}
|
|
|
|
.extension-badge.disconnected {
|
|
background: rgba(255, 100, 100, 0.2);
|
|
color: #ff6464;
|
|
}
|
|
|
|
.extension-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 15px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.extension-stat {
|
|
background: var(--bg-primary);
|
|
padding: 12px;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
.extension-stat .stat-label {
|
|
display: block;
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.extension-stat .stat-value {
|
|
display: block;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.scrapers-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 15px;
|
|
}
|
|
|
|
.scraper-card {
|
|
background: var(--bg-primary);
|
|
border-radius: 10px;
|
|
padding: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
border: 1px solid var(--border-color);
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.scraper-card.enabled {
|
|
border-color: var(--accent-green);
|
|
}
|
|
|
|
.scraper-card.running {
|
|
border-color: var(--accent-yellow);
|
|
box-shadow: 0 0 10px rgba(255, 203, 5, 0.2);
|
|
}
|
|
|
|
.scraper-logo {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
padding: 8px;
|
|
}
|
|
|
|
.scraper-logo img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.scraper-logo-fallback {
|
|
font-size: 16px;
|
|
font-weight: 800;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.scraper-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.scraper-name {
|
|
font-weight: 600;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.scraper-status {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.status-running {
|
|
color: var(--accent-yellow);
|
|
}
|
|
|
|
.status-enabled {
|
|
color: var(--accent-green);
|
|
}
|
|
|
|
.status-disabled {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.scraper-last-run {
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.scraper-error {
|
|
font-size: 11px;
|
|
color: var(--accent-red);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* Toggle Switch */
|
|
.toggle-switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 50px;
|
|
height: 26px;
|
|
}
|
|
|
|
.toggle-switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.toggle-slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: var(--border-color);
|
|
transition: 0.3s;
|
|
border-radius: 26px;
|
|
}
|
|
|
|
.toggle-slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 20px;
|
|
width: 20px;
|
|
left: 3px;
|
|
bottom: 3px;
|
|
background-color: white;
|
|
transition: 0.3s;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.toggle-switch input:checked + .toggle-slider {
|
|
background-color: var(--accent-green);
|
|
}
|
|
|
|
.toggle-switch input:checked + .toggle-slider:before {
|
|
transform: translateX(24px);
|
|
}
|
|
|
|
/* News Page */
|
|
.news-stats-bar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: var(--bg-secondary);
|
|
padding: 15px 20px;
|
|
border-radius: 12px;
|
|
margin-bottom: 20px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.sentiment-overview {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
|
|
.sentiment-label {
|
|
color: var(--text-secondary);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.sentiment-bar {
|
|
display: flex;
|
|
width: 200px;
|
|
height: 8px;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
background: var(--border-color);
|
|
}
|
|
|
|
.sentiment-positive {
|
|
background: var(--accent-green);
|
|
}
|
|
|
|
.sentiment-neutral {
|
|
background: var(--text-secondary);
|
|
}
|
|
|
|
.sentiment-negative {
|
|
background: var(--accent-red);
|
|
}
|
|
|
|
.sentiment-text {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.news-count {
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.news-filters {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.manual-news-section {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.manual-news-section details {
|
|
background: var(--bg-secondary);
|
|
border-radius: 12px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.manual-news-section summary {
|
|
padding: 15px 20px;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.manual-news-section summary:hover {
|
|
color: var(--accent-yellow);
|
|
}
|
|
|
|
.manual-news-form {
|
|
padding: 0 20px 20px 20px;
|
|
}
|
|
|
|
.manual-news-form textarea {
|
|
width: 100%;
|
|
padding: 12px 15px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
font-size: 14px;
|
|
font-family: inherit;
|
|
resize: vertical;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.manual-news-form textarea:focus {
|
|
outline: none;
|
|
border-color: var(--accent-yellow);
|
|
}
|
|
|
|
.news-feed {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
|
|
.news-card {
|
|
background: var(--bg-secondary);
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
border: 1px solid var(--border-color);
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.news-card:hover {
|
|
border-color: var(--accent-yellow);
|
|
}
|
|
|
|
.news-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
margin-bottom: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.news-source {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.source-icon {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.news-time {
|
|
color: var(--text-secondary);
|
|
font-size: 12px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.sentiment-badge {
|
|
padding: 4px 10px;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.sentiment-badge.positive {
|
|
background: rgba(0, 200, 83, 0.2);
|
|
color: var(--accent-green);
|
|
}
|
|
|
|
.sentiment-badge.neutral {
|
|
background: rgba(170, 170, 170, 0.2);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.sentiment-badge.negative {
|
|
background: rgba(198, 40, 40, 0.2);
|
|
color: var(--accent-red);
|
|
}
|
|
|
|
.news-title {
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
margin-bottom: 8px;
|
|
color: var(--accent-yellow);
|
|
}
|
|
|
|
.news-content {
|
|
line-height: 1.5;
|
|
margin-bottom: 12px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.news-link {
|
|
color: var(--accent-blue);
|
|
text-decoration: none;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.news-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.news-keywords {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.keyword-tag {
|
|
padding: 4px 10px;
|
|
background: var(--bg-card);
|
|
border-radius: 12px;
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.news-correlation {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.correlation-badge {
|
|
display: inline-block;
|
|
padding: 4px 10px;
|
|
background: rgba(255, 203, 5, 0.2);
|
|
color: var(--accent-yellow);
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.news-actions {
|
|
margin-top: 12px;
|
|
padding-top: 12px;
|
|
border-top: 1px solid var(--border-color);
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.btn-delete-small {
|
|
padding: 6px 12px;
|
|
background: none;
|
|
border: 1px solid var(--accent-red);
|
|
color: var(--accent-red);
|
|
border-radius: 6px;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-delete-small:hover {
|
|
background: var(--accent-red);
|
|
color: white;
|
|
}
|
|
|
|
/* Users Page */
|
|
.users-section {
|
|
max-width: 800px;
|
|
}
|
|
|
|
.add-user-form {
|
|
background: var(--bg-card);
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.add-user-form h3 {
|
|
margin-bottom: 15px;
|
|
color: var(--accent-yellow);
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
color: var(--text-secondary);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.form-group input {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
background: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.users-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
|
|
.user-card {
|
|
background: var(--bg-card);
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
border-left: 4px solid var(--accent-blue);
|
|
}
|
|
|
|
.user-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.user-name {
|
|
font-size: 1.2rem;
|
|
font-weight: bold;
|
|
color: var(--accent-yellow);
|
|
}
|
|
|
|
.user-location {
|
|
color: var(--text-secondary);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.user-details {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.form-inline {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.form-inline input {
|
|
padding: 8px 12px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
background: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.user-zip-input {
|
|
width: 120px;
|
|
}
|
|
|
|
.user-radius-input {
|
|
width: 80px;
|
|
}
|
|
|
|
.btn-small {
|
|
padding: 6px 12px !important;
|
|
font-size: 0.85rem !important;
|
|
}
|
|
|
|
.btn-danger {
|
|
background: var(--accent-red);
|
|
color: white;
|
|
border: none;
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.user-stores {
|
|
margin-top: 15px;
|
|
padding-top: 15px;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.stores-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.retailer-section h4 {
|
|
color: var(--accent-blue);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.store-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.store-list li {
|
|
padding: 10px;
|
|
background: var(--bg-secondary);
|
|
border-radius: 4px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.store-address {
|
|
color: var(--text-secondary);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 40px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.loading {
|
|
text-align: center;
|
|
padding: 20px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.error {
|
|
color: var(--accent-red);
|
|
padding: 10px;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
.sidebar {
|
|
width: 60px;
|
|
padding: 15px 10px;
|
|
}
|
|
|
|
.logo-text, .nav-links a span {
|
|
display: none;
|
|
}
|
|
|
|
.content {
|
|
margin-left: 60px;
|
|
}
|
|
|
|
.stats-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.charts-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.control-panel {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.monitor-status-card,
|
|
.scrapers-card {
|
|
grid-column: span 1;
|
|
}
|
|
|
|
.control-card-actions {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.scrapers-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|