polyrob 0.5.0__py3-none-any.whl

webview/static/css/pages/admin.css

@@ -0,0 +1,766 @@
+/**
+ * POLYROB Admin Pages - Shared Styles
+ *
+ * Created: 2024-12-05
+ * Version: 1.0.0
+ *
+ * This file contains styles specific to admin pages:
+ * - Dashboard
+ * - Users list
+ * - User detail
+ * - Activity log
+ */
+
+/* =============================================================================
+   DASHBOARD PAGE
+   ============================================================================= */
+
+/* Stats Grid */
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: var(--spacing-lg);
+    margin-bottom: var(--spacing-2xl);
+}
+
+.stat-card {
+    background: var(--color-bg-primary);
+    border: 1px solid var(--color-border);
+    padding: var(--spacing-xl);
+    text-align: center;
+    transition: border-color var(--transition-fast);
+}
+
+.stat-card:hover {
+    border-color: var(--color-accent-blue);
+}
+
+.stat-value {
+    font-size: 2.5rem;
+    font-weight: bold;
+    color: var(--color-accent-green);
+    font-family: var(--font-family-mono);
+}
+
+.stat-label {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-top: var(--spacing-sm);
+}
+
+.stat-sublabel {
+    font-size: var(--font-size-xs);
+    color: var(--color-text-secondary);
+    margin-top: var(--spacing-xs);
+}
+
+/* Breakdown bars */
+.breakdown-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-md);
+}
+
+.breakdown-item {
+    display: grid;
+    grid-template-columns: 100px 1fr 60px;
+    gap: var(--spacing-md);
+    align-items: center;
+}
+
+.breakdown-label {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-secondary);
+    text-transform: uppercase;
+}
+
+.breakdown-bar {
+    height: 20px;
+    background: var(--color-bg-primary);
+    position: relative;
+}
+
+.breakdown-bar-fill {
+    height: 100%;
+    background: var(--color-accent-blue);
+    transition: width var(--transition-slow);
+}
+
+.breakdown-count {
+    font-size: var(--font-size-sm);
+    color: var(--color-accent-green);
+    font-family: var(--font-family-mono);
+    text-align: right;
+}
+
+/* Activity feed (dashboard) */
+.activity-feed {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+}
+
+.activity-item {
+    display: grid;
+    grid-template-columns: 70px 120px 1fr;
+    gap: var(--spacing-md);
+    padding: var(--spacing-md);
+    background: var(--color-bg-primary);
+    border: 1px solid var(--color-border);
+    font-size: var(--font-size-sm);
+    transition: border-color var(--transition-fast);
+}
+
+.activity-item:hover {
+    border-color: var(--color-accent-blue);
+}
+
+.activity-time {
+    color: var(--color-text-muted);
+    font-family: var(--font-family-mono);
+}
+
+.activity-type {
+    text-transform: uppercase;
+    font-size: var(--font-size-xs);
+}
+
+.activity-action {
+    color: var(--color-text-secondary);
+}
+
+/* Alerts section */
+.alerts-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+}
+
+.alert-item {
+    padding: var(--spacing-md) var(--spacing-lg);
+    border-left: var(--border-width-accent) solid;
+    background: var(--color-bg-primary);
+    font-size: var(--font-size-sm);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.alert-item.severity-high {
+    border-left-color: var(--color-accent-red);
+}
+
+.alert-item.severity-warning {
+    border-left-color: var(--color-accent-yellow);
+}
+
+.alert-item.severity-low {
+    border-left-color: var(--color-accent-blue);
+}
+
+.alert-icon {
+    font-size: 16px;
+}
+
+.alert-message {
+    color: var(--color-text-secondary);
+    flex: 1;
+}
+
+.alert-count {
+    color: var(--color-accent-green);
+    font-family: var(--font-family-mono);
+}
+
+/* No alerts state */
+.no-alerts {
+    padding: var(--spacing-xl);
+    text-align: center;
+    color: var(--color-accent-green);
+    background: var(--color-bg-primary);
+    border: 1px solid var(--color-border);
+}
+
+/* Quick search layout */
+.quick-search {
+    display: flex;
+    gap: var(--spacing-md);
+    margin-bottom: var(--spacing-2xl);
+}
+
+.quick-search .form-input {
+    flex: 1;
+}
+
+/* Two column dashboard layout */
+.dashboard-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--spacing-2xl);
+}
+
+/* =============================================================================
+   USERS LIST PAGE
+   ============================================================================= */
+
+/* Search layout */
+.search-section {
+    margin-bottom: var(--spacing-xl);
+}
+
+.search-row {
+    display: flex;
+    gap: var(--spacing-md);
+    margin-bottom: var(--spacing-md);
+}
+
+.search-row .search-input {
+    flex: 1;
+}
+
+.search-row .filter-select {
+    min-width: 120px;
+}
+
+/* User table */
+.user-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.user-table th,
+.user-table td {
+    padding: var(--spacing-md);
+    text-align: left;
+    border-bottom: 1px solid var(--color-border);
+}
+
+.user-table th {
+    background: var(--color-bg-primary);
+    color: var(--color-text-muted);
+    font-size: var(--font-size-xs);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.user-table tr:hover td {
+    background: var(--color-bg-primary);
+}
+
+.user-table .wallet {
+    font-family: var(--font-family-mono);
+    color: var(--color-accent-blue);
+    font-size: var(--font-size-sm);
+}
+
+.user-table .tier,
+.user-table .role {
+    padding: var(--spacing-xs) var(--spacing-sm);
+    font-size: var(--font-size-xs);
+    text-transform: uppercase;
+    display: inline-block;
+}
+
+.user-table .credits {
+    font-family: var(--font-family-mono);
+    color: var(--color-accent-green);
+}
+
+.user-table .token-count {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+}
+
+.token-icon {
+    width: 16px;
+    height: 16px;
+}
+
+.user-table .actions {
+    text-align: right;
+}
+
+/* Blocked indicator */
+.blocked-indicator {
+    color: var(--color-accent-red);
+    font-weight: bold;
+}
+
+/* =============================================================================
+   USER DETAIL PAGE
+   ============================================================================= */
+
+/* User header */
+.user-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: var(--spacing-2xl);
+    padding-bottom: var(--spacing-xl);
+    border-bottom: 1px solid var(--color-border);
+}
+
+.user-identity h2 {
+    font-family: var(--font-family-mono);
+    color: var(--color-accent-blue);
+    font-size: var(--font-size-lg);
+    margin-bottom: var(--spacing-sm);
+}
+
+.user-identity .user-id {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+    font-family: var(--font-family-mono);
+}
+
+.user-badges {
+    display: flex;
+    gap: var(--spacing-sm);
+    margin-top: var(--spacing-md);
+}
+
+/* User detail specific badges */
+.badge-tier { background: var(--color-accent-green); color: var(--color-bg-primary); }
+.badge-role { background: var(--color-accent-blue); color: var(--color-bg-primary); }
+.badge-blocked { background: var(--color-accent-red); color: var(--color-bg-primary); }
+
+.user-actions {
+    display: flex;
+    gap: var(--spacing-sm);
+}
+
+/* Detail section */
+.detail-section {
+    margin-bottom: 32px;
+}
+
+/* Info grid */
+.info-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: var(--spacing-lg);
+}
+
+.info-item {
+    padding: var(--spacing-md);
+    background: var(--color-bg-primary);
+    border: 1px solid var(--color-border);
+}
+
+.info-label {
+    font-size: var(--font-size-xs);
+    color: var(--color-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-bottom: var(--spacing-xs);
+}
+
+.info-value {
+    font-family: var(--font-family-mono);
+    color: var(--color-text-primary);
+}
+
+/* Control select */
+.control-select {
+    padding: var(--spacing-sm) var(--spacing-md);
+    padding-right: 30px;
+    background: var(--color-bg-primary);
+    border: 1px solid var(--color-border);
+    color: var(--color-text-primary);
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-sm);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23909090' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 10px center;
+    cursor: pointer;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+}
+
+.control-select:focus {
+    outline: none;
+    border-color: var(--color-accent-blue);
+}
+
+/* Token status */
+.token-status {
+    background: var(--color-bg-primary);
+    padding: var(--spacing-xl);
+    border: 1px solid var(--color-border);
+}
+
+.token-status.has-token {
+    border-color: var(--color-accent-green);
+}
+
+.token-status.no-token {
+    border-color: var(--color-accent-yellow);
+}
+
+.token-status .status-icon {
+    font-size: 24px;
+    margin-right: var(--spacing-md);
+}
+
+.token-status .status-text {
+    flex: 1;
+}
+
+.token-status h4 {
+    color: var(--color-text-primary);
+    margin-bottom: var(--spacing-sm);
+}
+
+.token-status p {
+    color: var(--color-text-secondary);
+    font-size: var(--font-size-sm);
+}
+
+.token-ids {
+    margin-top: var(--spacing-md);
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-sm);
+    color: var(--color-accent-purple);
+}
+
+/* Credits form */
+.credits-actions {
+    display: flex;
+    gap: var(--spacing-md);
+    margin-top: var(--spacing-lg);
+}
+
+.credits-form {
+    display: flex;
+    gap: var(--spacing-sm);
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.credits-form input[type="number"] {
+    width: 100px;
+}
+
+.credits-form input[type="text"] {
+    width: 200px;
+}
+
+/* Transactions table */
+.transactions-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.transactions-table th,
+.transactions-table td {
+    padding: 10px;
+    text-align: left;
+    border-bottom: 1px solid var(--color-border);
+    font-size: var(--font-size-sm);
+}
+
+.transactions-table th {
+    background: var(--color-bg-primary);
+    color: var(--color-text-muted);
+    font-size: var(--font-size-xs);
+    text-transform: uppercase;
+}
+
+.transactions-table .amount-positive {
+    color: var(--color-accent-green);
+}
+
+.transactions-table .amount-negative {
+    color: var(--color-accent-red);
+}
+
+/* Audit events */
+.audit-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+}
+
+.audit-item {
+    display: grid;
+    grid-template-columns: 120px 100px 1fr;
+    gap: var(--spacing-md);
+    padding: var(--spacing-md);
+    background: var(--color-bg-primary);
+    border: 1px solid var(--color-border);
+    font-size: var(--font-size-sm);
+}
+
+.audit-time {
+    color: var(--color-text-muted);
+    font-family: var(--font-family-mono);
+}
+
+.audit-type {
+    text-transform: uppercase;
+    font-size: var(--font-size-xs);
+}
+
+.audit-action {
+    color: var(--color-text-secondary);
+}
+
+/* Block status */
+.block-status {
+    padding: var(--spacing-lg);
+    background: var(--color-bg-primary);
+    border: 1px solid var(--color-border);
+}
+
+.block-status.blocked {
+    border-color: var(--color-accent-red);
+}
+
+.block-reason {
+    margin-top: var(--spacing-sm);
+    font-size: var(--font-size-sm);
+    color: var(--color-text-secondary);
+}
+
+/* Sessions summary */
+.sessions-summary {
+    display: flex;
+    gap: var(--spacing-2xl);
+    padding: var(--spacing-lg);
+    background: var(--color-bg-primary);
+    border: 1px solid var(--color-border);
+}
+
+.sessions-stat {
+    text-align: center;
+}
+
+.sessions-stat .value {
+    font-size: var(--font-size-xl);
+    color: var(--color-accent-green);
+    font-family: var(--font-family-mono);
+}
+
+.sessions-stat .label {
+    font-size: var(--font-size-xs);
+    color: var(--color-text-muted);
+    text-transform: uppercase;
+}
+
+/* =============================================================================
+   ACTIVITY LOG PAGE
+   ============================================================================= */
+
+/* Filters section */
+.filters-section {
+    margin-bottom: var(--spacing-xl);
+}
+
+.filters-row {
+    display: flex;
+    gap: var(--spacing-md);
+    flex-wrap: wrap;
+}
+
+.filters-row .filter-select {
+    min-width: 150px;
+}
+
+.filters-row .filter-input {
+    min-width: 200px;
+}
+
+/* Activity table */
+.activity-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.activity-table th,
+.activity-table td {
+    padding: var(--spacing-md);
+    text-align: left;
+    border-bottom: 1px solid var(--color-border);
+}
+
+.activity-table th {
+    background: var(--color-bg-primary);
+    color: var(--color-text-muted);
+    font-size: var(--font-size-xs);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    position: sticky;
+    top: 0;
+}
+
+.activity-table tr:hover td {
+    background: var(--color-bg-primary);
+}
+
+.activity-table .timestamp {
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+    white-space: nowrap;
+}
+
+.activity-table .event-type {
+    text-transform: uppercase;
+    font-size: var(--font-size-xs);
+    padding: var(--spacing-xs) var(--spacing-sm);
+    display: inline-block;
+}
+
+.activity-table .actor {
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-sm);
+    color: var(--color-accent-blue);
+}
+
+.activity-table .target {
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-sm);
+    color: var(--color-accent-purple);
+}
+
+.activity-table .action {
+    color: var(--color-text-secondary);
+    font-size: var(--font-size-sm);
+}
+
+.activity-table .ip {
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-xs);
+    color: var(--color-text-muted);
+}
+
+.activity-table .success-indicator {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    display: inline-block;
+}
+
+.activity-table .success-indicator.success {
+    background: var(--color-accent-green);
+}
+
+.activity-table .success-indicator.failure {
+    background: var(--color-accent-red);
+}
+
+/* Stats bar */
+.stats-bar {
+    display: flex;
+    gap: var(--spacing-2xl);
+    padding: var(--spacing-lg);
+    background: var(--color-bg-primary);
+    border: 1px solid var(--color-border);
+    margin-bottom: var(--spacing-xl);
+}
+
+.stat-item {
+    text-align: center;
+}
+
+.stat-item .value {
+    font-size: var(--font-size-lg);
+    color: var(--color-accent-green);
+    font-family: var(--font-family-mono);
+}
+
+.stat-item .label {
+    font-size: var(--font-size-xs);
+    color: var(--color-text-muted);
+    text-transform: uppercase;
+}
+
+/* =============================================================================
+   RESPONSIVE STYLES
+   ============================================================================= */
+
+/* Responsive styles merged into single 768px breakpoint below */
+
+@media (max-width: 768px) {
+    /* Dashboard responsive */
+    .dashboard-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .activity-item {
+        grid-template-columns: 1fr;
+        gap: var(--spacing-xs);
+    }
+
+    .breakdown-item {
+        grid-template-columns: 80px 1fr 50px;
+    }
+
+    /* Users page responsive */
+    .search-row {
+        flex-direction: column;
+    }
+
+    .user-table {
+        font-size: var(--font-size-xs);
+    }
+
+    .user-table th:nth-child(3),
+    .user-table td:nth-child(3),
+    .user-table th:nth-child(5),
+    .user-table td:nth-child(5) {
+        display: none;
+    }
+
+    /* Activity page responsive */
+    .filters-row {
+        flex-direction: column;
+    }
+
+    .filters-row .filter-select,
+    .filters-row .filter-input {
+        width: 100%;
+    }
+
+    .activity-table th:nth-child(4),
+    .activity-table td:nth-child(4),
+    .activity-table th:nth-child(6),
+    .activity-table td:nth-child(6) {
+        display: none;
+    }
+
+    .stats-bar {
+        flex-wrap: wrap;
+        gap: var(--spacing-lg);
+    }
+
+    /* User detail responsive */
+    .user-header {
+        flex-direction: column;
+        gap: var(--spacing-lg);
+    }
+
+    .audit-item {
+        grid-template-columns: 1fr;
+        gap: var(--spacing-xs);
+    }
+
+    .sessions-summary {
+        flex-direction: column;
+        gap: var(--spacing-md);
+    }
+
+    .credits-form {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .credits-form input[type="number"],
+    .credits-form input[type="text"] {
+        width: 100%;
+    }
+}