Spaces:
Build error
Build error
| /* ============================================ | |
| Minecraft Server Panel - Complete Stylesheet | |
| ============================================ */ | |
| /* CSS Variables */ | |
| :root { | |
| --bg-primary: #0f0f0f; | |
| --bg-secondary: #1a1a1a; | |
| --bg-tertiary: #252525; | |
| --bg-card: #1e1e1e; | |
| --bg-hover: #2a2a2a; | |
| --text-primary: #ffffff; | |
| --text-secondary: #b0b0b0; | |
| --text-muted: #666666; | |
| --accent-primary: #00d26a; | |
| --accent-secondary: #00a854; | |
| --accent-blue: #3b82f6; | |
| --accent-purple: #8b5cf6; | |
| --accent-orange: #f59e0b; | |
| --accent-red: #ef4444; | |
| --accent-cyan: #06b6d4; | |
| --border-color: #333333; | |
| --border-radius: 8px; | |
| --border-radius-lg: 12px; | |
| --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); | |
| --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); | |
| --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5); | |
| --transition-fast: 150ms ease; | |
| --transition-normal: 250ms ease; | |
| --sidebar-width: 240px; | |
| --header-height: 60px; | |
| } | |
| /* Reset & Base */ | |
| *, *::before, *::after { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html { | |
| font-size: 14px; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| body { | |
| font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif; | |
| background-color: var(--bg-primary); | |
| color: var(--text-primary); | |
| line-height: 1.5; | |
| min-height: 100vh; | |
| } | |
| a { | |
| color: var(--accent-primary); | |
| text-decoration: none; | |
| transition: color var(--transition-fast); | |
| } | |
| a:hover { | |
| color: var(--accent-secondary); | |
| } | |
| /* ============================================ | |
| Layout | |
| ============================================ */ | |
| .app-container { | |
| display: flex; | |
| min-height: 100vh; | |
| } | |
| /* Sidebar */ | |
| .sidebar { | |
| width: var(--sidebar-width); | |
| background: var(--bg-secondary); | |
| border-right: 1px solid var(--border-color); | |
| display: flex; | |
| flex-direction: column; | |
| position: fixed; | |
| height: 100vh; | |
| z-index: 100; | |
| } | |
| .sidebar-header { | |
| padding: 20px; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .logo-icon { | |
| font-size: 28px; | |
| } | |
| .logo-text { | |
| font-size: 20px; | |
| font-weight: 700; | |
| color: var(--accent-primary); | |
| } | |
| .sidebar-nav { | |
| flex: 1; | |
| padding: 16px 12px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .nav-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 12px 16px; | |
| border-radius: var(--border-radius); | |
| color: var(--text-secondary); | |
| transition: all var(--transition-fast); | |
| } | |
| .nav-item:hover { | |
| background: var(--bg-hover); | |
| color: var(--text-primary); | |
| } | |
| .nav-item.active { | |
| background: var(--accent-primary); | |
| color: var(--bg-primary); | |
| } | |
| .nav-icon { | |
| font-size: 18px; | |
| } | |
| .nav-text { | |
| font-weight: 500; | |
| } | |
| .sidebar-footer { | |
| padding: 16px; | |
| border-top: 1px solid var(--border-color); | |
| } | |
| .server-status { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 12px; | |
| background: var(--bg-tertiary); | |
| border-radius: var(--border-radius); | |
| margin-bottom: 12px; | |
| } | |
| .status-dot { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| background: var(--accent-red); | |
| } | |
| .status-dot.online { | |
| background: var(--accent-primary); | |
| box-shadow: 0 0 8px var(--accent-primary); | |
| } | |
| .status-dot.starting { | |
| background: var(--accent-orange); | |
| animation: pulse 1s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .status-text { | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| } | |
| .logout { | |
| color: var(--text-muted); | |
| } | |
| .logout:hover { | |
| color: var(--accent-red); | |
| background: rgba(239, 68, 68, 0.1); | |
| } | |
| /* Main Content */ | |
| .main-content { | |
| flex: 1; | |
| margin-left: var(--sidebar-width); | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 100vh; | |
| } | |
| .content-header { | |
| height: var(--header-height); | |
| padding: 0 24px; | |
| background: var(--bg-secondary); | |
| border-bottom: 1px solid var(--border-color); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| position: sticky; | |
| top: 0; | |
| z-index: 50; | |
| } | |
| .content-header h1 { | |
| font-size: 20px; | |
| font-weight: 600; | |
| } | |
| .header-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .header-info { | |
| display: flex; | |
| gap: 16px; | |
| color: var(--text-secondary); | |
| font-size: 13px; | |
| } | |
| .content-body { | |
| flex: 1; | |
| padding: 24px; | |
| overflow-y: auto; | |
| } | |
| /* ============================================ | |
| Components - Buttons | |
| ============================================ */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| padding: 10px 20px; | |
| font-size: 14px; | |
| font-weight: 500; | |
| border: none; | |
| border-radius: var(--border-radius); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| background: var(--bg-tertiary); | |
| color: var(--text-primary); | |
| } | |
| .btn:hover { | |
| background: var(--bg-hover); | |
| } | |
| .btn-primary { | |
| background: var(--accent-primary); | |
| color: var(--bg-primary); | |
| } | |
| .btn-primary:hover { | |
| background: var(--accent-secondary); | |
| } | |
| .btn-success { | |
| background: var(--accent-primary); | |
| color: var(--bg-primary); | |
| } | |
| .btn-success:hover { | |
| background: var(--accent-secondary); | |
| } | |
| .btn-danger { | |
| background: var(--accent-red); | |
| color: white; | |
| } | |
| .btn-danger:hover { | |
| background: #dc2626; | |
| } | |
| .btn-warning { | |
| background: var(--accent-orange); | |
| color: var(--bg-primary); | |
| } | |
| .btn-warning:hover { | |
| background: #d97706; | |
| } | |
| .btn-secondary { | |
| background: var(--bg-tertiary); | |
| border: 1px solid var(--border-color); | |
| } | |
| .btn-sm { | |
| padding: 6px 12px; | |
| font-size: 13px; | |
| } | |
| .btn-xs { | |
| padding: 4px 8px; | |
| font-size: 12px; | |
| } | |
| .btn-block { | |
| width: 100%; | |
| } | |
| .btn-group { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| /* ============================================ | |
| Components - Cards | |
| ============================================ */ | |
| .card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--border-radius-lg); | |
| overflow: hidden; | |
| } | |
| .card-header { | |
| padding: 16px 20px; | |
| background: var(--bg-tertiary); | |
| border-bottom: 1px solid var(--border-color); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .card-header h3 { | |
| font-size: 16px; | |
| font-weight: 600; | |
| } | |
| .card-body { | |
| padding: 20px; | |
| } | |
| /* ============================================ | |
| Components - Forms | |
| ============================================ */ | |
| .form-group { | |
| margin-bottom: 16px; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 6px; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| } | |
| input[type="text"], | |
| input[type="password"], | |
| input[type="number"], | |
| input[type="email"], | |
| select, | |
| textarea { | |
| width: 100%; | |
| padding: 10px 14px; | |
| font-size: 14px; | |
| background: var(--bg-tertiary); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--border-radius); | |
| color: var(--text-primary); | |
| transition: border-color var(--transition-fast); | |
| } | |
| input:focus, | |
| select:focus, | |
| textarea:focus { | |
| outline: none; | |
| border-color: var(--accent-primary); | |
| } | |
| textarea { | |
| resize: vertical; | |
| min-height: 100px; | |
| } | |
| .setting-item { | |
| margin-bottom: 16px; | |
| } | |
| .setting-item label { | |
| display: block; | |
| margin-bottom: 6px; | |
| font-weight: 500; | |
| } | |
| .setting-item.checkbox label { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| cursor: pointer; | |
| } | |
| .setting-item.checkbox input { | |
| width: auto; | |
| } | |
| .setting-hint { | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| margin-top: 4px; | |
| } | |
| /* ============================================ | |
| Components - Tables | |
| ============================================ */ | |
| .table-container { | |
| overflow-x: auto; | |
| } | |
| .data-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| .data-table th, | |
| .data-table td { | |
| padding: 12px 16px; | |
| text-align: left; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .data-table th { | |
| background: var(--bg-tertiary); | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| font-size: 13px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .data-table tr:hover { | |
| background: var(--bg-hover); | |
| } | |
| .data-table tr.banned { | |
| opacity: 0.6; | |
| } | |
| /* ============================================ | |
| Components - Badges & Status | |
| ============================================ */ | |
| .badge { | |
| display: inline-block; | |
| padding: 2px 8px; | |
| font-size: 11px; | |
| font-weight: 600; | |
| border-radius: 4px; | |
| text-transform: uppercase; | |
| } | |
| .badge.op { | |
| background: var(--accent-orange); | |
| color: var(--bg-primary); | |
| } | |
| .badge.banned { | |
| background: var(--accent-red); | |
| color: white; | |
| } | |
| .status-badge { | |
| display: inline-block; | |
| padding: 4px 10px; | |
| font-size: 12px; | |
| font-weight: 500; | |
| border-radius: 20px; | |
| } | |
| .status-badge.online { | |
| background: rgba(0, 210, 106, 0.2); | |
| color: var(--accent-primary); | |
| } | |
| .status-badge.offline { | |
| background: rgba(239, 68, 68, 0.2); | |
| color: var(--accent-red); | |
| } | |
| /* ============================================ | |
| Components - Modals | |
| ============================================ */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(0, 0, 0, 0.7); | |
| z-index: 1000; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 20px; | |
| } | |
| .modal.active { | |
| display: flex; | |
| } | |
| .modal-content { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--border-radius-lg); | |
| width: 100%; | |
| max-width: 500px; | |
| max-height: 90vh; | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .modal-content.modal-lg { | |
| max-width: 800px; | |
| } | |
| .modal-header { | |
| padding: 16px 20px; | |
| background: var(--bg-tertiary); | |
| border-bottom: 1px solid var(--border-color); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .modal-header h3 { | |
| font-size: 18px; | |
| font-weight: 600; | |
| } | |
| .modal-close { | |
| background: none; | |
| border: none; | |
| font-size: 24px; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| padding: 0; | |
| line-height: 1; | |
| } | |
| .modal-close:hover { | |
| color: var(--text-primary); | |
| } | |
| .modal-body { | |
| padding: 20px; | |
| overflow-y: auto; | |
| flex: 1; | |
| } | |
| .modal-footer { | |
| padding: 16px 20px; | |
| background: var(--bg-tertiary); | |
| border-top: 1px solid var(--border-color); | |
| display: flex; | |
| justify-content: flex-end; | |
| gap: 12px; | |
| } | |
| /* ============================================ | |
| Components - Toast Notifications | |
| ============================================ */ | |
| .toast-container { | |
| position: fixed; | |
| top: 20px; | |
| right: 20px; | |
| z-index: 2000; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .toast { | |
| padding: 14px 20px; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--shadow-lg); | |
| min-width: 280px; | |
| animation: slideIn 0.3s ease; | |
| } | |
| .toast.success { | |
| border-left: 4px solid var(--accent-primary); | |
| } | |
| .toast.error { | |
| border-left: 4px solid var(--accent-red); | |
| } | |
| .toast.info { | |
| border-left: 4px solid var(--accent-blue); | |
| } | |
| @keyframes slideIn { | |
| from { | |
| transform: translateX(100%); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateX(0); | |
| opacity: 1; | |
| } | |
| } | |
| /* ============================================ | |
| Components - Progress Bars | |
| ============================================ */ | |
| .progress-bar { | |
| width: 100%; | |
| height: 8px; | |
| background: var(--bg-tertiary); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: var(--accent-primary); | |
| border-radius: 4px; | |
| transition: width 0.3s ease; | |
| } | |
| .progress-fill.cpu { | |
| background: var(--accent-blue); | |
| } | |
| .progress-fill.memory { | |
| background: var(--accent-purple); | |
| } | |
| /* ============================================ | |
| Components - Empty States | |
| ============================================ */ | |
| .empty-state { | |
| text-align: center; | |
| padding: 40px 20px; | |
| color: var(--text-muted); | |
| } | |
| .empty-icon { | |
| font-size: 48px; | |
| display: block; | |
| margin-bottom: 16px; | |
| opacity: 0.5; | |
| } | |
| .empty-state p { | |
| margin-bottom: 8px; | |
| } | |
| .empty-hint { | |
| font-size: 13px; | |
| } | |
| /* ============================================ | |
| Components - Alerts | |
| ============================================ */ | |
| .alert { | |
| padding: 14px 18px; | |
| border-radius: var(--border-radius); | |
| margin-bottom: 16px; | |
| } | |
| .alert-error { | |
| background: rgba(239, 68, 68, 0.1); | |
| border: 1px solid var(--accent-red); | |
| color: var(--accent-red); | |
| } | |
| .alert-success { | |
| background: rgba(0, 210, 106, 0.1); | |
| border: 1px solid var(--accent-primary); | |
| color: var(--accent-primary); | |
| } | |
| .warning-box { | |
| background: rgba(245, 158, 11, 0.1); | |
| border: 1px solid var(--accent-orange); | |
| border-radius: var(--border-radius); | |
| padding: 14px 18px; | |
| margin-bottom: 16px; | |
| color: var(--accent-orange); | |
| } | |
| /* ============================================ | |
| Dashboard Specific | |
| ============================================ */ | |
| .dashboard-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); | |
| gap: 20px; | |
| } | |
| .status-card .status-indicator { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| margin-bottom: 24px; | |
| } | |
| .status-icon { | |
| font-size: 48px; | |
| } | |
| .status-details { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .status-label { | |
| font-size: 24px; | |
| font-weight: 700; | |
| } | |
| .status-uptime { | |
| color: var(--text-secondary); | |
| } | |
| .status-stats { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 16px; | |
| } | |
| .stat-item { | |
| background: var(--bg-tertiary); | |
| padding: 14px; | |
| border-radius: var(--border-radius); | |
| text-align: center; | |
| } | |
| .stat-label { | |
| display: block; | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| margin-bottom: 4px; | |
| } | |
| .stat-value { | |
| font-size: 20px; | |
| font-weight: 700; | |
| } | |
| .info-list .info-item { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 10px 0; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .info-list .info-item:last-child { | |
| border-bottom: none; | |
| } | |
| .info-label { | |
| color: var(--text-secondary); | |
| } | |
| .info-value { | |
| font-weight: 500; | |
| } | |
| .quick-actions { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 12px; | |
| } | |
| .action-btn { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 16px; | |
| background: var(--bg-tertiary); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--border-radius); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| color: var(--text-primary); | |
| } | |
| .action-btn:hover { | |
| background: var(--bg-hover); | |
| border-color: var(--accent-primary); | |
| } | |
| .action-icon { | |
| font-size: 24px; | |
| } | |
| .action-text { | |
| font-size: 13px; | |
| } | |
| .console-preview { | |
| background: var(--bg-primary); | |
| border-radius: var(--border-radius); | |
| padding: 12px; | |
| height: 200px; | |
| overflow-y: auto; | |
| font-family: 'JetBrains Mono', 'Fira Code', monospace; | |
| font-size: 12px; | |
| } | |
| .console-line { | |
| padding: 2px 0; | |
| color: var(--text-secondary); | |
| } | |
| .console-line.error { | |
| color: var(--accent-red); | |
| } | |
| .console-line.warning { | |
| color: var(--accent-orange); | |
| } | |
| .console-line.player_join { | |
| color: var(--accent-primary); | |
| } | |
| .console-line.player_leave { | |
| color: var(--accent-orange); | |
| } | |
| .resource-item { | |
| margin-bottom: 16px; | |
| } | |
| .resource-item:last-child { | |
| margin-bottom: 0; | |
| } | |
| .resource-header { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 6px; | |
| font-size: 13px; | |
| } | |
| .resource-label { | |
| color: var(--text-secondary); | |
| } | |
| /* ============================================ | |
| Console Page | |
| ============================================ */ | |
| .console-container { | |
| display: flex; | |
| flex-direction: column; | |
| height: calc(100vh - var(--header-height) - 48px); | |
| gap: 16px; | |
| } | |
| .console-window { | |
| flex: 1; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--border-radius-lg); | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| .console-header { | |
| padding: 12px 16px; | |
| background: var(--bg-tertiary); | |
| border-bottom: 1px solid var(--border-color); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .console-title { | |
| font-weight: 600; | |
| } | |
| .console-filters { | |
| display: flex; | |
| gap: 12px; | |
| } | |
| .console-filters select, | |
| .console-filters input { | |
| padding: 6px 12px; | |
| font-size: 13px; | |
| width: auto; | |
| } | |
| .console-output { | |
| flex: 1; | |
| padding: 16px; | |
| overflow-y: auto; | |
| font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; | |
| font-size: 13px; | |
| line-height: 1.6; | |
| background: #0a0a0a; | |
| } | |
| .console-output .console-line { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .console-time { | |
| color: var(--text-muted); | |
| flex-shrink: 0; | |
| } | |
| .console-message { | |
| word-break: break-word; | |
| } | |
| .console-input-container { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--border-radius-lg); | |
| padding: 16px; | |
| } | |
| .input-wrapper { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| background: var(--bg-primary); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--border-radius); | |
| padding: 4px 12px; | |
| } | |
| .input-prefix { | |
| color: var(--accent-primary); | |
| font-family: monospace; | |
| font-weight: bold; | |
| } | |
| .input-wrapper input { | |
| flex: 1; | |
| background: none; | |
| border: none; | |
| padding: 10px 0; | |
| } | |
| .command-history-hint { | |
| margin-top: 8px; | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| } | |
| .quick-commands-panel { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--border-radius-lg); | |
| padding: 16px; | |
| } | |
| .quick-commands-panel h4 { | |
| margin-bottom: 16px; | |
| } | |
| .quick-commands-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 16px; | |
| } | |
| .quick-cmd-group h5 { | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| margin-bottom: 8px; | |
| text-transform: uppercase; | |
| } | |
| .quick-cmd-group button { | |
| display: block; | |
| width: 100%; | |
| margin-bottom: 6px; | |
| padding: 8px 12px; | |
| font-size: 13px; | |
| background: var(--bg-tertiary); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--border-radius); | |
| color: var(--text-primary); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .quick-cmd-group button:hover { | |
| background: var(--bg-hover); | |
| border-color: var(--accent-primary); | |
| } | |
| /* ============================================ | |
| Players Page | |
| ============================================ */ | |
| .players-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| .players-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 16px; | |
| } | |
| .player-card { | |
| display: flex; | |
| gap: 16px; | |
| padding: 16px; | |
| background: var(--bg-tertiary); | |
| border-radius: var(--border-radius); | |
| } | |
| .player-avatar-lg { | |
| width: 64px; | |
| height: 64px; | |
| border-radius: var(--border-radius); | |
| } | |
| .player-info h4 { | |
| margin-bottom: 4px; | |
| } | |
| .player-status { | |
| display: inline-block; | |
| padding: 2px 8px; | |
| font-size: 11px; | |
| border-radius: 4px; | |
| margin-bottom: 8px; | |
| } | |
| .player-status.online { | |
| background: rgba(0, 210, 106, 0.2); | |
| color: var(--accent-primary); | |
| } | |
| .player-meta { | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| display: flex; | |
| gap: 12px; | |
| } | |
| .player-actions { | |
| display: flex; | |
| gap: 6px; | |
| margin-top: auto; | |
| } | |
| .player-cell { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .player-cell img { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 4px; | |
| } | |
| .action-buttons { | |
| display: flex; | |
| gap: 6px; | |
| } | |
| .two-column { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 20px; | |
| } | |
| .simple-list { | |
| list-style: none; | |
| } | |
| .simple-list li { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 10px 0; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .simple-list li:last-child { | |
| border-bottom: none; | |
| } | |
| .simple-list li img { | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 4px; | |
| } | |
| .simple-list li span { | |
| flex: 1; | |
| } | |
| .simple-list li.empty { | |
| color: var(--text-muted); | |
| justify-content: center; | |
| } | |
| .add-form { | |
| display: flex; | |
| gap: 8px; | |
| margin-top: 16px; | |
| } | |
| .add-form input { | |
| flex: 1; | |
| } | |
| /* ============================================ | |
| Mods Page | |
| ============================================ */ | |
| .mods-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| .upload-zone { | |
| border: 2px dashed var(--border-color); | |
| border-radius: var(--border-radius-lg); | |
| padding: 40px; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .upload-zone:hover, | |
| .upload-zone.dragover { | |
| border-color: var(--accent-primary); | |
| background: rgba(0, 210, 106, 0.05); | |
| } | |
| .upload-icon { | |
| font-size: 48px; | |
| margin-bottom: 16px; | |
| } | |
| .upload-hint { | |
| font-size: 13px; | |
| color: var(--text-muted); | |
| margin-top: 8px; | |
| } | |
| .upload-progress { | |
| padding: 20px; | |
| } | |
| .mods-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .mod-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| padding: 16px; | |
| background: var(--bg-tertiary); | |
| border-radius: var(--border-radius); | |
| transition: all var(--transition-fast); | |
| } | |
| .mod-item:hover { | |
| background: var(--bg-hover); | |
| } | |
| .mod-item.disabled { | |
| opacity: 0.5; | |
| } | |
| .mod-icon { | |
| font-size: 32px; | |
| } | |
| .mod-info { | |
| flex: 1; | |
| } | |
| .mod-info h4 { | |
| margin-bottom: 4px; | |
| } | |
| .mod-meta { | |
| display: flex; | |
| gap: 12px; | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| margin-bottom: 4px; | |
| } | |
| .mod-description { | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| } | |
| .mod-actions { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .recommended-mods { | |
| padding-top: 0; | |
| } | |
| .mod-recommendations { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | |
| gap: 16px; | |
| margin-bottom: 16px; | |
| } | |
| .rec-mod { | |
| padding: 16px; | |
| background: var(--bg-tertiary); | |
| border-radius: var(--border-radius); | |
| } | |
| .rec-mod h4 { | |
| margin-bottom: 8px; | |
| } | |
| .rec-mod p { | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| margin-bottom: 12px; | |
| } | |
| .mod-warning { | |
| padding: 12px; | |
| background: rgba(245, 158, 11, 0.1); | |
| border-radius: var(--border-radius); | |
| color: var(--accent-orange); | |
| font-size: 13px; | |
| } | |
| /* ============================================ | |
| Files Page | |
| ============================================ */ | |
| .files-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| .breadcrumb { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| padding: 12px 16px; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--border-radius); | |
| } | |
| .breadcrumb-item { | |
| padding: 4px 8px; | |
| border-radius: 4px; | |
| } | |
| .breadcrumb-item:hover { | |
| background: var(--bg-hover); | |
| } | |
| .breadcrumb-separator { | |
| color: var(--text-muted); | |
| } | |
| .files-list { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .file-item { | |
| display: flex; | |
| align-items: center; | |
| padding: 12px 16px; | |
| border-bottom: 1px solid var(--border-color); | |
| transition: background var(--transition-fast); | |
| } | |
| .file-item:hover { | |
| background: var(--bg-hover); | |
| } | |
| .file-item:last-child { | |
| border-bottom: none; | |
| } | |
| .file-item.protected { | |
| opacity: 0.6; | |
| } | |
| .file-link { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| flex: 1; | |
| color: var(--text-primary); | |
| } | |
| .file-link:hover { | |
| color: var(--accent-primary); | |
| } | |
| .file-icon { | |
| font-size: 20px; | |
| } | |
| .file-name { | |
| font-weight: 500; | |
| } | |
| .file-meta { | |
| display: flex; | |
| gap: 24px; | |
| color: var(--text-muted); | |
| font-size: 13px; | |
| margin-right: 16px; | |
| } | |
| .file-actions { | |
| display: flex; | |
| gap: 6px; | |
| } | |
| .code-editor { | |
| width: 100%; | |
| min-height: 400px; | |
| font-family: 'JetBrains Mono', 'Fira Code', monospace; | |
| font-size: 13px; | |
| background: var(--bg-primary); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--border-radius); | |
| padding: 16px; | |
| resize: vertical; | |
| } | |
| .backups-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .backup-item { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 12px 16px; | |
| background: var(--bg-tertiary); | |
| border-radius: var(--border-radius); | |
| } | |
| .backup-info { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .backup-name { | |
| font-weight: 500; | |
| } | |
| .backup-meta { | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| } | |
| .backup-actions { | |
| display: flex; | |
| gap: 6px; | |
| } | |
| /* ============================================ | |
| Import Page | |
| ============================================ */ | |
| .import-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| .instructions { | |
| line-height: 1.7; | |
| } | |
| .instructions h4 { | |
| margin-bottom: 16px; | |
| font-size: 18px; | |
| } | |
| .instruction-steps { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 24px; | |
| } | |
| .step { | |
| display: flex; | |
| gap: 16px; | |
| } | |
| .step-number { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 36px; | |
| height: 36px; | |
| background: var(--accent-primary); | |
| color: var(--bg-primary); | |
| border-radius: 50%; | |
| font-weight: 700; | |
| flex-shrink: 0; | |
| } | |
| .step-content h5 { | |
| margin-bottom: 8px; | |
| } | |
| .step-content p { | |
| color: var(--text-secondary); | |
| margin-bottom: 8px; | |
| } | |
| .step-content ul { | |
| margin-left: 20px; | |
| color: var(--text-secondary); | |
| } | |
| .file-structure { | |
| background: var(--bg-primary); | |
| border-radius: var(--border-radius); | |
| padding: 16px; | |
| margin-top: 12px; | |
| overflow-x: auto; | |
| } | |
| .file-structure pre { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 12px; | |
| line-height: 1.6; | |
| color: var(--text-secondary); | |
| } | |
| .guide-content h4 { | |
| margin-bottom: 12px; | |
| } | |
| .guide-content ol { | |
| margin-left: 20px; | |
| line-height: 1.8; | |
| } | |
| .guide-content ul { | |
| margin-left: 20px; | |
| margin-top: 8px; | |
| } | |
| .guide-content code { | |
| background: var(--bg-tertiary); | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| font-size: 13px; | |
| } | |
| /* ============================================ | |
| Settings Page | |
| ============================================ */ | |
| .settings-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| .settings-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 24px; | |
| } | |
| .setting-group { | |
| padding: 20px; | |
| background: var(--bg-tertiary); | |
| border-radius: var(--border-radius); | |
| } | |
| .setting-group h4 { | |
| margin-bottom: 16px; | |
| padding-bottom: 12px; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .pinger-info { | |
| display: grid; | |
| gap: 12px; | |
| } | |
| .info-row { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 8px 0; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .info-row:last-child { | |
| border-bottom: none; | |
| } | |
| .pinger-note { | |
| margin-top: 16px; | |
| padding: 12px; | |
| background: rgba(59, 130, 246, 0.1); | |
| border-radius: var(--border-radius); | |
| font-size: 13px; | |
| } | |
| .connection-info { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| .info-box { | |
| padding: 20px; | |
| background: var(--bg-tertiary); | |
| border-radius: var(--border-radius); | |
| } | |
| .info-box.warning { | |
| background: rgba(245, 158, 11, 0.1); | |
| border: 1px solid var(--accent-orange); | |
| } | |
| .info-box h4 { | |
| margin-bottom: 12px; | |
| } | |
| .connection-steps h5 { | |
| margin-top: 16px; | |
| margin-bottom: 8px; | |
| color: var(--accent-primary); | |
| } | |
| .connection-steps ol { | |
| margin-left: 20px; | |
| line-height: 1.8; | |
| } | |
| .connection-steps code { | |
| background: var(--bg-primary); | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| } | |
| .danger-zone { | |
| border-color: var(--accent-red); | |
| } | |
| .danger-zone .card-header { | |
| background: rgba(239, 68, 68, 0.1); | |
| color: var(--accent-red); | |
| } | |
| .danger-actions { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| } | |
| .danger-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 16px; | |
| background: var(--bg-tertiary); | |
| border-radius: var(--border-radius); | |
| } | |
| .danger-info h4 { | |
| margin-bottom: 4px; | |
| } | |
| .danger-info p { | |
| font-size: 13px; | |
| color: var(--text-muted); | |
| } | |
| /* ============================================ | |
| Login Page | |
| ============================================ */ | |
| .login-page { | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%); | |
| } | |
| .login-container { | |
| width: 100%; | |
| max-width: 400px; | |
| padding: 20px; | |
| } | |
| .login-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--border-radius-lg); | |
| padding: 40px; | |
| } | |
| .login-header { | |
| text-align: center; | |
| margin-bottom: 32px; | |
| } | |
| .login-logo { | |
| font-size: 64px; | |
| display: block; | |
| margin-bottom: 16px; | |
| } | |
| .login-header h1 { | |
| font-size: 24px; | |
| margin-bottom: 8px; | |
| } | |
| .login-header p { | |
| color: var(--text-muted); | |
| } | |
| .login-form { | |
| margin-bottom: 24px; | |
| } | |
| .login-footer { | |
| text-align: center; | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| } | |
| /* ============================================ | |
| Players List (Dashboard) | |
| ============================================ */ | |
| .players-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .player-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 10px; | |
| background: var(--bg-tertiary); | |
| border-radius: var(--border-radius); | |
| } | |
| .player-avatar { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 4px; | |
| } | |
| .player-name { | |
| font-weight: 500; | |
| } | |
| /* ============================================ | |
| Responsive Design | |
| ============================================ */ | |
| @media (max-width: 1024px) { | |
| .dashboard-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| :root { | |
| --sidebar-width: 60px; | |
| } | |
| .sidebar-header .logo-text, | |
| .nav-text, | |
| .status-text { | |
| display: none; | |
| } | |
| .sidebar-header { | |
| justify-content: center; | |
| } | |
| .nav-item { | |
| justify-content: center; | |
| padding: 12px; | |
| } | |
| .server-status { | |
| justify-content: center; | |
| } | |
| .content-header h1 { | |
| font-size: 16px; | |
| } | |
| .content-body { | |
| padding: 16px; | |
| } | |
| .console-container { | |
| height: auto; | |
| } | |
| .console-window { | |
| min-height: 400px; | |
| } | |
| .quick-commands-panel { | |
| display: none; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .btn-group { | |
| flex-wrap: wrap; | |
| } | |
| .header-actions { | |
| flex-wrap: wrap; | |
| } | |
| .file-meta { | |
| display: none; | |
| } | |
| } |