/* Dark Theme Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #1f2937; } ::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #6b7280; } /* Table row hover */ .table-row-hover { transition: background-color 0.15s ease; } .table-row-hover:hover { background-color: rgba(55, 65, 81, 0.5); } /* Flash message animation */ .flash-message { animation: flashIn 0.3s ease-out; } .flash-message.fade-out { animation: flashOut 0.4s ease-in forwards; } @keyframes flashIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes flashOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-8px); } } /* Status badges */ .badge-active { display: inline-flex; padding: 2px 10px; font-size: 0.75rem; font-weight: 500; border-radius: 9999px; background-color: rgba(6, 78, 59, 0.5); color: #34d399; border: 1px solid #065f46; } .badge-revoked { display: inline-flex; padding: 2px 10px; font-size: 0.75rem; font-weight: 500; border-radius: 9999px; background-color: rgba(127, 29, 29, 0.5); color: #f87171; border: 1px solid #991b1b; } .badge-expired { display: inline-flex; padding: 2px 10px; font-size: 0.75rem; font-weight: 500; border-radius: 9999px; background-color: rgba(120, 53, 15, 0.5); color: #fbbf24; border: 1px solid #92400e; } /* CSS variables are injected dynamically via PHP injectCssVariables() in the . No fallback :root block here — it would override the dynamic values. */ /* Medienpicker */ .media-picker { position: relative; border: 2px dashed #4b5563; border-radius: 0.75rem; padding: 1.5rem; text-align: center; cursor: pointer; transition: all 0.2s ease; background: rgba(31, 41, 55, 0.5); } .media-picker:hover { border-color: #6b7280; background: rgba(55, 65, 81, 0.5); } .media-picker.drag-over { border-color: #2563eb; background: rgba(37, 99, 235, 0.1); } .media-picker .preview-container { position: relative; display: inline-block; } .media-picker .preview-img { max-width: 200px; max-height: 120px; border-radius: 0.5rem; object-fit: contain; } .media-picker .remove-btn { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; background: #ef4444; color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; transition: background 0.2s; } .media-picker .remove-btn:hover { background: #dc2626; } .media-picker .upload-hint { color: #9ca3af; font-size: 0.875rem; } .media-picker .upload-hint svg { margin: 0 auto 0.5rem; } /* Color Picker Group */ .color-picker-group { display: flex; align-items: center; gap: 0.5rem; } .color-picker-group input[type="color"] { width: 40px; height: 40px; border: 2px solid #4b5563; border-radius: 0.5rem; cursor: pointer; background: transparent; padding: 2px; } .color-picker-group input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } .color-picker-group input[type="color"]::-webkit-color-swatch { border: none; border-radius: 0.375rem; } .color-picker-group input[type="text"] { width: 90px; font-family: monospace; font-size: 0.875rem; text-transform: uppercase; } /* Appearance Section Headers */ .appearance-section { margin-bottom: 2rem; } .appearance-section h3 { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--card-border, #374151); } /* Tab Navigation */ .tab-nav { display: flex; gap: 0; border-bottom: 2px solid var(--card-border, #374151); margin-bottom: 1.5rem; } .tab-nav a { padding: 0.75rem 1.25rem; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary, #9ca3af); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s; } .tab-nav a:hover { color: var(--text-primary, #f3f4f6); } .tab-nav a.active { color: var(--primary-color, #2563eb); border-bottom-color: var(--primary-color, #2563eb); }