/** * Odoo Stack — Editorial Light Design System * Replaces the old dark Taskade theme. * Activate with . * * Principles: warm off-white bg, white surface, near-black fg, * emerald-only accent, 1px hairline borders, no gradients, no drop shadows. */ /* ============================================================ DESIGN TOKENS ============================================================ */ body.servers-taskade { --st-bg-deep: #FAFAF7; --st-bg: #F5F8F5; --st-surface: #FFFFFF; --st-elevated: #FFFFFF; --st-surface-2: #F5F5F0; --st-border: #E5E5E0; --st-border-soft: #EEEEE9; --st-text: #0A0A0A; --st-muted: #525252; /* Accent — emerald only */ --st-accent: #059669; --st-accent-hover: #047857; --st-accent-tint: rgba(5, 150, 105, 0.10); --st-accent-glow: rgba(5, 150, 105, 0.20); /* Semantic */ --st-success: #059669; --st-warning: #D97706; --st-danger: #DC2626; --st-info: #0E7490; --st-rose: #DC2626; --st-cyan: #0E7490; --st-orange: #D97706; /* Legacy aliases — kept so templates that reference --st-purple still work */ --st-purple: #059669; --st-purple-glow: rgba(5, 150, 105, 0.15); --st-indigo: #047857; /* Monospace — numbers, IDs, versions, statuses */ --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace; } /* ============================================================ BODY ============================================================ */ body.servers-taskade { background-color: var(--st-bg-deep); color: var(--st-text); } /* ============================================================ NAVBAR ============================================================ */ body.servers-taskade .navbar.navbar-light, body.servers-taskade nav.navbar { background: #FFFFFF !important; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--st-border) !important; box-shadow: none; } body.servers-taskade .navbar-brand { background: none; -webkit-background-clip: unset; -webkit-text-fill-color: unset; background-clip: unset; filter: none; color: var(--st-text) !important; font-weight: 700; letter-spacing: -0.02em; } body.servers-taskade .navbar-brand i, body.servers-taskade .navbar-brand svg { color: var(--st-accent) !important; } body.servers-taskade .navbar .nav-link { color: var(--st-muted) !important; font-size: 0.875rem; font-weight: 500; border-radius: 6px; padding: 0.375rem 0.75rem !important; transition: color 0.15s, background 0.15s; } body.servers-taskade .navbar .nav-link:hover, body.servers-taskade .navbar .nav-link:focus { color: var(--st-text) !important; background: var(--st-surface-2) !important; } body.servers-taskade .navbar .nav-link.active { color: var(--st-text) !important; background: none !important; border-bottom: 2px solid var(--st-accent); border-radius: 0; } /* Hide theme toggle — dashboard is light-only */ body.servers-taskade .theme-toggle, body.servers-taskade .theme-toggle-outer { display: none !important; } body.servers-taskade .dropdown-menu { background: var(--st-surface); border: 1px solid var(--st-border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); padding: 0.375rem; } body.servers-taskade .dropdown-item { color: var(--st-text); font-size: 0.875rem; border-radius: 6px; padding: 0.4rem 0.75rem; transition: background 0.15s; } body.servers-taskade .dropdown-item:hover, body.servers-taskade .dropdown-item:focus { background: var(--st-surface-2); color: var(--st-text); } body.servers-taskade .dropdown-divider { border-color: var(--st-border); margin: 0.25rem 0; } /* ============================================================ PAGE HEADER ============================================================ */ body.servers-taskade .page-header { background: var(--st-surface) !important; border: 1px solid var(--st-border) !important; border-radius: 8px !important; box-shadow: none !important; color: var(--st-text) !important; padding: 1.5rem 1.75rem !important; } body.servers-taskade .page-header h1 { font-size: 1.875rem !important; font-weight: 800; letter-spacing: -0.03em; color: var(--st-text) !important; line-height: 1.15; margin-bottom: 0.25rem; } body.servers-taskade .page-header .lead, body.servers-taskade .page-header p { color: var(--st-muted) !important; font-size: 0.9375rem; margin-bottom: 0; } body.servers-taskade .taskade-hero-icon { background: var(--st-surface-2); border: 1px solid var(--st-border); border-radius: 8px; box-shadow: none; color: var(--st-accent); } /* ============================================================ BUTTONS ============================================================ */ body.servers-taskade .btn-primary { background: var(--st-accent) !important; border: none !important; color: #fff !important; font-weight: 600; border-radius: 6px; transition: background 0.15s, box-shadow 0.15s; } body.servers-taskade .btn-primary:hover, body.servers-taskade .btn-primary:focus { background: var(--st-accent-hover) !important; color: #fff !important; box-shadow: 0 0 0 3px var(--st-accent-tint) !important; transform: none; filter: none; } body.servers-taskade .btn-success { background: var(--st-accent) !important; border: none !important; color: #fff !important; border-radius: 6px; } body.servers-taskade .btn-success:hover, body.servers-taskade .btn-success:focus { background: var(--st-accent-hover) !important; box-shadow: 0 0 0 3px var(--st-accent-tint) !important; } body.servers-taskade .btn-danger { background: var(--st-danger) !important; border: none !important; color: #fff !important; border-radius: 6px; } body.servers-taskade .btn-danger:hover, body.servers-taskade .btn-danger:focus { background: #b91c1c !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important; } body.servers-taskade .btn-warning { background: var(--st-warning) !important; border: none !important; color: #fff !important; border-radius: 6px; } body.servers-taskade .btn-warning:hover { background: #b45309 !important; } body.servers-taskade .btn-secondary, body.servers-taskade .btn-outline-secondary { background: var(--st-surface) !important; border: 1px solid var(--st-border) !important; color: var(--st-text) !important; border-radius: 6px; } body.servers-taskade .btn-secondary:hover, body.servers-taskade .btn-outline-secondary:hover { background: var(--st-surface-2) !important; border-color: #D0D0C9 !important; color: var(--st-text) !important; transform: none; filter: none; } body.servers-taskade .btn-light { background: var(--st-surface) !important; border: 1px solid var(--st-border) !important; color: var(--st-text) !important; border-radius: 6px; } body.servers-taskade .btn-light:hover { background: var(--st-surface-2) !important; color: var(--st-text) !important; } body.servers-taskade .btn-outline-danger { border-color: rgba(220, 38, 38, 0.4) !important; color: var(--st-danger) !important; background: transparent; border-radius: 6px; } body.servers-taskade .btn-outline-danger:hover { background: rgba(220, 38, 38, 0.06) !important; border-color: var(--st-danger) !important; color: var(--st-danger) !important; } body.servers-taskade .btn-sm { border-radius: 5px; font-size: 0.8125rem; } body.servers-taskade .btn-lg { font-size: 0.9375rem; padding: 0.6rem 1.25rem; border-radius: 6px; } body.servers-taskade .btn-link.text-muted { color: var(--st-muted) !important; } body.servers-taskade .btn-link.text-muted:hover { color: var(--st-text) !important; } body.servers-taskade .btn:hover { transform: none; filter: none; } /* ============================================================ CARDS ============================================================ */ body.servers-taskade .card { background: var(--st-surface); border: 1px solid var(--st-border) !important; border-radius: 8px; box-shadow: none; color: var(--st-text); } body.servers-taskade .card:hover { box-shadow: none; transform: none; } body.servers-taskade .card-header { background: var(--st-surface-2) !important; border-bottom: 1px solid var(--st-border); color: var(--st-text) !important; border-radius: 8px 8px 0 0 !important; font-weight: 600; } body.servers-taskade .card-header h5, body.servers-taskade .card-header h6, body.servers-taskade .card-header .comments-panel-title { color: var(--st-text) !important; } body.servers-taskade .card.border-primary { border-color: var(--st-accent) !important; box-shadow: 0 0 0 3px var(--st-accent-tint) !important; } body.servers-taskade .card.border-success { border-color: var(--st-accent) !important; } body.servers-taskade .card.border-info { border-color: var(--st-info) !important; } body.servers-taskade .card-body h5, body.servers-taskade .card-body h6, body.servers-taskade .card-body strong { color: var(--st-text); } /* ============================================================ FORMS ============================================================ */ body.servers-taskade .form-control, body.servers-taskade .form-select { background: #ffffff; border: 1px solid var(--st-border); color: var(--st-text); border-radius: 6px; transition: border-color 0.15s, box-shadow 0.15s; } body.servers-taskade .form-control:focus, body.servers-taskade .form-select:focus { background: #ffffff; border-color: var(--st-accent); box-shadow: 0 0 0 3px var(--st-accent-tint); color: var(--st-text); } body.servers-taskade .form-control::placeholder { color: #A3A3A3; } body.servers-taskade .form-control-lg { font-size: 0.9375rem; padding: 0.65rem 1rem; border-radius: 6px; } body.servers-taskade .form-select-lg { font-size: 0.9375rem; border-radius: 6px; } body.servers-taskade .form-label, body.servers-taskade label.form-label { color: var(--st-text); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.375rem; } body.servers-taskade .form-text, body.servers-taskade small.form-text { color: var(--st-muted) !important; } body.servers-taskade .input-group-text { background: var(--st-surface-2); border-color: var(--st-border); color: var(--st-accent); } body.servers-taskade .form-check-input { background-color: #ffffff; border-color: var(--st-border); } body.servers-taskade .form-check-input:checked { background-color: var(--st-accent); border-color: var(--st-accent); } body.servers-taskade .form-check-card { border-color: var(--st-border); background: var(--st-surface); border-radius: 6px; } body.servers-taskade .form-check-card:hover { border-color: var(--st-accent); background: var(--st-accent-tint); } /* Select2 */ body.servers-taskade .select2-container--bootstrap-5 .select2-selection { background: #ffffff !important; border-color: var(--st-border) !important; min-height: 42px; border-radius: 6px !important; } body.servers-taskade .select2-container--bootstrap-5 .select2-selection__rendered { color: var(--st-text) !important; line-height: 40px !important; } body.servers-taskade .select2-container--bootstrap-5 .select2-dropdown { background: var(--st-surface); border: 1px solid var(--st-border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } body.servers-taskade .select2-container--bootstrap-5 .select2-results__option { color: var(--st-text); border-radius: 4px; } body.servers-taskade .select2-container--bootstrap-5 .select2-results__option--highlighted { background: var(--st-accent-tint) !important; color: var(--st-text) !important; } body.servers-taskade .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice { background-color: var(--st-accent) !important; border: none !important; color: #fff !important; border-radius: 4px; } body.servers-taskade .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove { color: rgba(255, 255, 255, 0.8) !important; } /* Stage select */ body.servers-taskade .stage-select { background: #ffffff !important; border-color: var(--st-border) !important; color: var(--st-text) !important; border-radius: 6px !important; } /* ============================================================ TABLES ============================================================ */ body.servers-taskade .table { color: var(--st-text); --bs-table-bg: transparent; --bs-table-hover-bg: var(--st-surface-2); } body.servers-taskade .table th { color: var(--st-muted); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--st-border) !important; padding-top: 0.625rem; padding-bottom: 0.625rem; } body.servers-taskade .table td { border-color: var(--st-border-soft); vertical-align: middle; } body.servers-taskade .table tbody tr:hover { background: var(--st-surface-2) !important; } body.servers-taskade .table-borderless td, body.servers-taskade .table-borderless th { border: none; } /* Server list table wrapper */ body.servers-taskade .server-list-table { background: var(--st-surface); border: 1px solid var(--st-border); border-radius: 8px; backdrop-filter: none; box-shadow: none; } body.servers-taskade .server-list-table .table { color: var(--st-text); --bs-table-bg: transparent; --bs-table-hover-bg: var(--st-surface-2); } body.servers-taskade .server-list-table .table thead, body.servers-taskade .tasks-table .table thead { background: var(--st-surface-2) !important; border-bottom: 1px solid var(--st-border) !important; } body.servers-taskade .server-list-table .table thead th, body.servers-taskade .tasks-table .table thead th { color: var(--st-muted) !important; border-color: var(--st-border) !important; } body.servers-taskade .server-list-table .table tbody td, body.servers-taskade .tasks-table .table tbody td { border-color: var(--st-border-soft) !important; } body.servers-taskade .server-list-table .table tbody tr:hover, body.servers-taskade .tasks-table .table tbody tr:hover { background: var(--st-surface-2) !important; } /* Server card row inside project detail */ body.servers-taskade .server-card-row td { background: var(--st-surface-2) !important; } /* ============================================================ BADGES ============================================================ */ body.servers-taskade .badge.bg-success { background: rgba(5, 150, 105, 0.12) !important; color: var(--st-accent) !important; border: 1px solid rgba(5, 150, 105, 0.25); font-family: var(--font-mono); } body.servers-taskade .badge.bg-primary { background: var(--st-accent-tint) !important; color: var(--st-accent) !important; border: 1px solid rgba(5, 150, 105, 0.25); font-family: var(--font-mono); } body.servers-taskade .badge.bg-info { background: rgba(14, 116, 144, 0.1) !important; color: var(--st-info) !important; border: 1px solid rgba(14, 116, 144, 0.2); } body.servers-taskade .badge.bg-warning { background: rgba(217, 119, 6, 0.1) !important; color: var(--st-warning) !important; border: 1px solid rgba(217, 119, 6, 0.2); } body.servers-taskade .badge.bg-danger { background: rgba(220, 38, 38, 0.1) !important; color: var(--st-danger) !important; border: 1px solid rgba(220, 38, 38, 0.2); } body.servers-taskade .badge.bg-secondary { background: var(--st-surface-2) !important; color: var(--st-muted) !important; border: 1px solid var(--st-border); } body.servers-taskade .badge.bg-light.text-dark { background: var(--st-surface-2) !important; color: var(--st-text) !important; border: 1px solid var(--st-border); } /* ============================================================ PROGRESS ============================================================ */ body.servers-taskade .progress { background: var(--st-surface-2); border-radius: 999px; } /* ============================================================ MODALS ============================================================ */ body.servers-taskade .modal-content { background: var(--st-surface); border: 1px solid var(--st-border); border-radius: 8px; color: var(--st-text); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12); } body.servers-taskade .modal-header { border-bottom: 1px solid var(--st-border); padding: 1rem 1.25rem; } body.servers-taskade .modal-footer { border-top: 1px solid var(--st-border); padding: 0.875rem 1.25rem; } body.servers-taskade .btn-close { filter: none; } /* Task quick-view modal */ #tkTaskDetailModal .modal-content { background: var(--st-surface) !important; background-color: var(--st-surface) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12); opacity: 1 !important; } #tkTaskDetailModal .btn-close-white { filter: none; } body.servers-taskade .modal-backdrop.show { opacity: 0.4 !important; } /* ============================================================ LIST GROUP ============================================================ */ body.servers-taskade .list-group-item { background: var(--st-surface); border-color: var(--st-border); color: var(--st-text); } /* ============================================================ TOASTS ============================================================ */ body.servers-taskade .toast { background: var(--st-surface); border: 1px solid var(--st-border); color: var(--st-text); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } body.servers-taskade .toast-header { background: var(--st-surface-2); border-bottom: 1px solid var(--st-border); color: var(--st-text); } /* ============================================================ CODE ============================================================ */ body.servers-taskade code { background: rgba(5, 150, 105, 0.08); color: #047857; border-radius: 4px; padding: 0.1em 0.35em; font-family: var(--font-mono); font-size: 0.875em; } /* ============================================================ ALERTS ============================================================ */ body.servers-taskade .alert-warning { color: #92400e !important; background: rgba(251, 191, 36, 0.1) !important; border-color: rgba(217, 119, 6, 0.2) !important; } body.servers-taskade .alert-info { color: #155e75 !important; background: rgba(14, 116, 144, 0.08) !important; border-color: rgba(14, 116, 144, 0.2) !important; } body.servers-taskade .alert-danger { color: #9f1239 !important; background: rgba(220, 38, 38, 0.08) !important; border-color: rgba(220, 38, 38, 0.2) !important; } body.servers-taskade .alert-success { color: #065f46 !important; background: rgba(5, 150, 105, 0.08) !important; border-color: rgba(5, 150, 105, 0.2) !important; } /* ============================================================ FOOTER ============================================================ */ body.servers-taskade footer { background: var(--st-surface) !important; border-top: 1px solid var(--st-border) !important; backdrop-filter: none; } body.servers-taskade footer .text-muted { color: var(--st-muted) !important; } body.servers-taskade footer a.text-primary { color: var(--st-accent) !important; } /* ============================================================ EMPTY STATE ============================================================ */ body.servers-taskade .empty-state i { color: var(--st-accent); opacity: 0.5; filter: none; } body.servers-taskade .empty-state h3 { color: var(--st-text); } body.servers-taskade .empty-state p { color: var(--st-muted); } /* ============================================================ HEADINGS / TEXT ============================================================ */ body.servers-taskade h1, body.servers-taskade h2, body.servers-taskade h3, body.servers-taskade h4, body.servers-taskade h5, body.servers-taskade h6 { color: var(--st-text); } body.servers-taskade .text-muted { color: var(--st-muted) !important; } body.servers-taskade .bg-light { background: var(--st-surface-2) !important; color: var(--st-text) !important; } body.servers-taskade hr { border-color: var(--st-border); opacity: 1; } body.servers-taskade .border-bottom { border-bottom-color: var(--st-border) !important; } body.servers-taskade .border-top { border-top-color: var(--st-border) !important; } /* ============================================================ BREADCRUMB ============================================================ */ body.servers-taskade .breadcrumb { background: transparent; } body.servers-taskade .breadcrumb-item a { color: var(--st-accent); text-decoration: none; } body.servers-taskade .breadcrumb-item a:hover { color: var(--st-accent-hover); text-decoration: underline; } body.servers-taskade .breadcrumb-item.active { color: var(--st-muted); } body.servers-taskade .breadcrumb-item + .breadcrumb-item::before { color: var(--st-muted); } /* ============================================================ PAGINATION ============================================================ */ body.servers-taskade .page-link { background: var(--st-surface); border-color: var(--st-border); color: var(--st-text); transition: background 0.15s; } body.servers-taskade .page-link:hover { background: var(--st-surface-2); border-color: var(--st-border); color: var(--st-text); } body.servers-taskade .page-item.active .page-link { background: var(--st-accent); border-color: var(--st-accent); color: #fff; } /* ============================================================ NAV TABS / PILLS ============================================================ */ body.servers-taskade .nav-tabs { border-bottom: 1px solid var(--st-border); } body.servers-taskade .nav-tabs .nav-link { color: var(--st-muted); border-color: transparent; border-radius: 6px 6px 0 0; font-size: 0.875rem; font-weight: 500; } body.servers-taskade .nav-tabs .nav-link:hover { border-color: var(--st-border); color: var(--st-text); background: var(--st-surface-2); } body.servers-taskade .nav-tabs .nav-link.active { background: var(--st-surface); border-color: var(--st-border) var(--st-border) transparent; color: var(--st-text); } body.servers-taskade .nav-pills .nav-link { color: var(--st-muted); border-radius: 6px; font-size: 0.875rem; font-weight: 500; } body.servers-taskade .nav-pills .nav-link.active { background: var(--st-accent); color: #fff; } body.servers-taskade .tab-content { color: var(--st-text); } /* ============================================================ TASKADE TABS (server list / project detail) ============================================================ */ body.servers-taskade .taskade-tabs .nav-link { color: var(--st-muted); border-radius: 6px; font-size: 0.8125rem; font-weight: 500; } body.servers-taskade .taskade-tabs .nav-link.active { color: var(--st-text) !important; background: var(--st-surface-2) !important; border: 1px solid var(--st-border) !important; box-shadow: none !important; } /* ============================================================ PROJECT / TEAM / TASK CARDS ============================================================ */ body.servers-taskade .page-header, body.servers-taskade .project-card, body.servers-taskade .empty-state, body.servers-taskade .task-card, body.servers-taskade .team-card, body.servers-taskade .server-card { background: var(--st-surface) !important; border: 1px solid var(--st-border) !important; border-radius: 8px !important; box-shadow: none !important; color: var(--st-text) !important; } body.servers-taskade .project-card { border-left: 1px solid var(--st-border) !important; } body.servers-taskade .project-card:hover, body.servers-taskade .team-card:hover, body.servers-taskade .task-card:hover { border-color: var(--st-accent) !important; box-shadow: none !important; transform: none; } body.servers-taskade .project-card h5, body.servers-taskade .project-card h5 a, body.servers-taskade .team-card h5, body.servers-taskade .team-card h5 a, body.servers-taskade .task-card h5 a { color: var(--st-text) !important; } body.servers-taskade .project-card h5 a:hover, body.servers-taskade .team-card h5 a:hover, body.servers-taskade .task-card h5 a:hover { color: var(--st-accent) !important; text-decoration: underline; } body.servers-taskade .project-card .card-text, body.servers-taskade .team-card .card-text, body.servers-taskade .task-card .card-text { color: var(--st-muted) !important; } body.servers-taskade .project-meta, body.servers-taskade .team-meta { border-top: 1px solid var(--st-border) !important; } body.servers-taskade .project-meta-item, body.servers-taskade .team-meta-item, body.servers-taskade .task-meta-item { color: var(--st-muted) !important; font-family: var(--font-mono); font-size: 0.75rem; } body.servers-taskade .project-meta-item i, body.servers-taskade .team-meta-item i, body.servers-taskade .task-meta-item i { color: var(--st-muted) !important; } /* ============================================================ FORM CARDS / BILLING / MEMBERS / TASKS ============================================================ */ body.servers-taskade .form-card, body.servers-taskade .billing-header, body.servers-taskade .package-card, body.servers-taskade .member-item, body.servers-taskade .project-item, body.servers-taskade .tasks-table, body.servers-taskade .task-filters, body.servers-taskade .tasks-kanban, body.servers-taskade .chatter-container, body.servers-taskade .comment-item, body.servers-taskade .read-only-field { background: var(--st-surface) !important; border-color: var(--st-border) !important; color: var(--st-text) !important; border-radius: 8px; } body.servers-taskade .member-item:hover, body.servers-taskade .project-item:hover { box-shadow: none !important; background: var(--st-surface-2) !important; } body.servers-taskade .member-item.owner { border-left-color: var(--st-accent) !important; } body.servers-taskade .member-item.admin { border-left-color: var(--st-warning) !important; } body.servers-taskade .member-item.member { border-left-color: var(--st-muted) !important; } body.servers-taskade .project-item a { color: var(--st-text) !important; } body.servers-taskade .project-item a:hover { color: var(--st-accent) !important; } body.servers-taskade .read-only-field { background: var(--st-surface-2) !important; border: 1px solid var(--st-border) !important; color: var(--st-text) !important; } body.servers-taskade .read-only-field *:not(.badge):not(.bg-info):not(.bg-primary):not(.bg-secondary) { color: inherit !important; } /* ============================================================ TASK DETAIL / VIEW ============================================================ */ body.servers-taskade .task-detail, body.servers-taskade .task-content, body.servers-taskade .comment-section, body.servers-taskade .stage-log, body.servers-taskade .time-log { background: var(--st-surface) !important; border-color: var(--st-border) !important; color: var(--st-text) !important; } body.servers-taskade .task-title { color: var(--st-text) !important; font-size: 0.9375rem !important; font-weight: 600; } body.servers-taskade .task-title:hover { color: var(--st-accent) !important; } body.servers-taskade .task-content-preview { color: var(--st-muted) !important; } body.servers-taskade .dropdown-item.text-danger { color: var(--st-danger) !important; } /* ============================================================ TIME LOG TABLE ============================================================ */ body.servers-taskade .task-time-log-section .time-log-title { color: var(--st-text) !important; } body.servers-taskade .task-time-log-section .table { color: var(--st-text) !important; --bs-table-bg: transparent; --bs-table-color: var(--st-text); } body.servers-taskade .task-time-log-section .table thead, body.servers-taskade .task-time-log-section .table thead tr { background: var(--st-surface-2) !important; border-bottom: 1px solid var(--st-border) !important; } body.servers-taskade .task-time-log-section .table thead th { color: var(--st-muted) !important; background: transparent !important; border-color: var(--st-border) !important; font-weight: 700; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; padding-top: 0.625rem; padding-bottom: 0.625rem; } body.servers-taskade .task-time-log-section .table tbody td { color: var(--st-text) !important; border-color: var(--st-border-soft) !important; font-family: var(--font-mono); font-size: 0.8125rem; } body.servers-taskade .task-time-log-section .table.table-hover tbody tr:hover { background: var(--st-surface-2) !important; transform: none !important; color: var(--st-text) !important; } body.servers-taskade .task-time-log-section .table.table-hover tbody tr:hover td { color: var(--st-text) !important; } body.servers-taskade .task-time-log-section .text-muted { color: var(--st-muted) !important; } /* ============================================================ COMMENTS / CHATTER ============================================================ */ body.servers-taskade .form-card.task-comments-panel, body.servers-taskade .task-comments-panel.form-card { padding: 2rem 2.25rem 2.5rem !important; } body.servers-taskade .task-comments-panel .comments-list-scroll { padding: 1rem 0.75rem 0.25rem 0.25rem; margin-top: 0.25rem !important; } body.servers-taskade .task-comments-panel .comments-panel-header { margin-bottom: 1.25rem !important; } body.servers-taskade .card.task-comments-panel .comments-panel-body { padding: 1.5rem 1.75rem 2rem !important; } body.servers-taskade .form-card h5, body.servers-taskade .form-card h4, body.servers-taskade .form-card .comments-panel-title { color: var(--st-text) !important; } body.servers-taskade .comment-item strong, body.servers-taskade .comment-item .comment-content { color: var(--st-text) !important; } body.servers-taskade .comment-item .comment-content * { color: inherit !important; } body.servers-taskade .task-comments-panel small.text-muted, body.servers-taskade .task-comments-panel small.form-text, body.servers-taskade .form-card.task-comments-panel .text-muted, body.servers-taskade .form-card small.form-text.text-muted, body.servers-taskade .form-card small.text-muted { color: var(--st-muted) !important; } body.servers-taskade #taskForm small.text-muted, body.servers-taskade #taskForm small.form-text, body.servers-taskade #taskForm .form-text { color: var(--st-muted) !important; } body.servers-taskade .comments-empty-state { color: var(--st-muted) !important; } body.servers-taskade .comments-empty-state p, body.servers-taskade .comments-empty-state i { color: inherit !important; } body.servers-taskade .comment-item.border-bottom, body.servers-taskade .chatter-item.border-bottom { border-bottom-color: var(--st-border-soft) !important; } body.servers-taskade .chatter-message .bg-light { background: var(--st-surface-2) !important; } /* Icon-only delete on comments */ body.servers-taskade .btn.icon-only-btn { min-width: 2rem; display: inline-flex; align-items: center; justify-content: center; } /* ============================================================ AVATAR CIRCLES ============================================================ */ body.servers-taskade .avatar-circle.bg-info { background: rgba(14, 116, 144, 0.12) !important; color: var(--st-info) !important; border: 1px solid rgba(14, 116, 144, 0.2); } body.servers-taskade .avatar-circle.bg-primary { background: var(--st-accent-tint) !important; color: var(--st-accent) !important; border: 1px solid rgba(5, 150, 105, 0.2); } /* ============================================================ QUILL EDITOR ============================================================ */ body.servers-taskade #editor, body.servers-taskade .ql-toolbar, body.servers-taskade .ql-container { border-color: var(--st-border) !important; } body.servers-taskade .ql-toolbar { background: var(--st-surface-2) !important; border-radius: 6px 6px 0 0; } body.servers-taskade .ql-container { background: #ffffff !important; color: var(--st-text) !important; border-radius: 0 0 6px 6px; } body.servers-taskade .ql-editor { color: var(--st-text) !important; } body.servers-taskade .ql-editor.ql-blank::before { color: #A3A3A3 !important; } body.servers-taskade .ql-snow .ql-stroke { stroke: var(--st-muted) !important; } body.servers-taskade .ql-snow .ql-fill, body.servers-taskade .ql-snow .ql-stroke.ql-fill { fill: var(--st-muted) !important; } body.servers-taskade .ql-snow .ql-picker-label { color: var(--st-muted) !important; } body.servers-taskade .ql-snow .ql-picker-options { background: var(--st-surface) !important; border-color: var(--st-border) !important; border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } /* ============================================================ AI TASK CHAT ============================================================ */ body.servers-taskade .chat-container { background: var(--st-surface); border: 1px solid var(--st-border); border-radius: 8px; box-shadow: none; } body.servers-taskade #chatList .list-group-item:hover { background-color: var(--st-surface-2); } body.servers-taskade #chatList .list-group-item.active { background: var(--st-accent); border-color: var(--st-accent); color: #fff; } body.servers-taskade .chat-header { border-bottom-color: var(--st-border) !important; } body.servers-taskade .chat-input-area { border-top-color: var(--st-border) !important; } body.servers-taskade .message.user { background: var(--st-accent-tint) !important; color: var(--st-text); border: 1px solid rgba(5, 150, 105, 0.2); border-radius: 8px; } body.servers-taskade .message.assistant { background: var(--st-surface-2) !important; color: var(--st-text); border: 1px solid var(--st-border); border-radius: 8px; } body.servers-taskade .message-time { color: var(--st-muted) !important; font-family: var(--font-mono); font-size: 0.6875rem; } body.servers-taskade .file-upload-area { border: 2px dashed var(--st-border); background: var(--st-surface); border-radius: 6px; } body.servers-taskade .file-upload-area:hover { border-color: var(--st-accent); background: var(--st-accent-tint); } body.servers-taskade .addon-info { background: rgba(5, 150, 105, 0.08); color: var(--st-text); border: 1px solid rgba(5, 150, 105, 0.2); border-radius: 6px; } /* ============================================================ BILLING ============================================================ */ body.servers-taskade .package-price { color: var(--st-accent) !important; font-family: var(--font-mono); font-weight: 800; } body.servers-taskade .package-card { border-color: var(--st-border) !important; border-radius: 8px; } body.servers-taskade .package-card:hover { border-color: var(--st-accent) !important; } body.servers-taskade .package-card.current { border-color: var(--st-accent) !important; box-shadow: 0 0 0 3px var(--st-accent-tint) !important; } body.servers-taskade .feature-list li { color: var(--st-text); font-size: 0.875rem; } /* ============================================================ MISC ============================================================ */ body.servers-taskade .taskade-sidebar-inner { background: var(--st-surface) !important; border: 1px solid var(--st-border) !important; border-radius: 8px; } body.servers-taskade .port-badge { background: var(--st-surface-2) !important; border-color: var(--st-border) !important; color: var(--st-muted) !important; font-family: var(--font-mono); font-size: 0.75rem; } body.servers-taskade .project-badge { background: var(--st-accent) !important; color: #fff !important; border-radius: 4px; font-size: 0.75rem; padding: 0.15rem 0.5rem; } body.servers-taskade .task-count-badge { background: var(--st-surface-2) !important; color: var(--st-muted) !important; border: 1px solid var(--st-border) !important; font-family: var(--font-mono); font-size: 0.6875rem; } body.servers-taskade .card-body .fs-6 { color: var(--st-text); } body.servers-taskade a:not([class*="btn"]):not([class*="tk-btn"]):not(.nav-link):not(.navbar-brand):not(.dropdown-item) { color: var(--st-accent); } body.servers-taskade a:not([class*="btn"]):not([class*="tk-btn"]):not(.nav-link):not(.navbar-brand):not(.dropdown-item):hover { color: var(--st-accent-hover); } /* ============================================================ RING STAT CARDS (donut SVG) ============================================================ */ .tk-ring-card { display: flex; align-items: center; gap: 1rem; background: var(--st-surface); border: 1px solid var(--st-border); border-radius: 8px; padding: 1.25rem 1.5rem; backdrop-filter: none; box-shadow: none; transition: border-color 0.15s; } .tk-ring-card:hover { border-color: var(--st-accent); box-shadow: none; transform: none; } .tk-ring-wrap { position: relative; width: 80px; height: 80px; flex-shrink: 0; } .tk-ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); } .tk-ring-track { fill: none; stroke: var(--st-border); stroke-width: 8; } .tk-ring-fill { fill: none; stroke: var(--ring-color, var(--st-accent)); stroke-width: 8; stroke-linecap: round; filter: none; transition: stroke-dasharray 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .tk-ring-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .tk-ring-big { font-size: 1.375rem; font-weight: 800; line-height: 1; font-family: var(--font-mono); color: var(--st-text); } .tk-ring-info { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; } .tk-ring-title { font-weight: 600; font-size: 0.9375rem; color: var(--st-text); } .tk-ring-sub { font-size: 0.75rem; color: var(--st-muted); font-family: var(--font-mono); } /* ============================================================ INVENTORY PANEL (tk-panel) ============================================================ */ .tk-panel { background: var(--st-surface); border: 1px solid var(--st-border); border-radius: 8px; backdrop-filter: none; box-shadow: none; overflow: hidden; } .tk-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--st-border); } .tk-count-badge { background: var(--st-surface-2); color: var(--st-muted); font-size: 0.6875rem; font-weight: 700; border-radius: 999px; padding: 0.125rem 0.5rem; border: 1px solid var(--st-border); font-family: var(--font-mono); } .tk-btn-add { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.4rem 0.875rem; border-radius: 6px; font-size: 0.8125rem; font-weight: 600; text-decoration: none; color: #fff; background: var(--st-accent); border: none; box-shadow: none; transition: background 0.15s; } .tk-btn-add:hover { background: var(--st-accent-hover); color: #fff; filter: none; transform: none; } /* Search */ .tk-search-row { padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--st-border); } .tk-search-box { position: relative; max-width: 380px; } .tk-search-box > i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--st-muted); font-size: 0.875rem; pointer-events: none; } .tk-search-box input[type="search"] { width: 100%; background: #ffffff; border: 1px solid var(--st-border); border-radius: 6px; padding: 0.5rem 0.75rem 0.5rem 2.1rem; color: var(--st-text); font-size: 0.875rem; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .tk-search-box input[type="search"]:focus { border-color: var(--st-accent); box-shadow: 0 0 0 3px var(--st-accent-tint); } .tk-search-box input[type="search"]::placeholder { color: #A3A3A3; } /* Filter pills */ .tk-filter-pills { display: flex; flex-wrap: wrap; gap: 0.375rem; padding: 0.625rem 1.25rem; border-bottom: 1px solid var(--st-border); } .tk-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; border: 1px solid var(--st-border); background: var(--st-surface); color: var(--st-muted); cursor: pointer; transition: all 0.15s; } .tk-pill:hover { border-color: var(--st-accent); color: var(--st-text); background: var(--st-accent-tint); } .tk-pill.active { background: var(--st-accent); border-color: var(--st-accent); color: #fff; box-shadow: none; } .tk-pill i { font-size: 0.5rem; } .tk-pill-green i { color: var(--st-success); } .tk-pill-gray i { color: #A3A3A3; } .tk-pill-amber i { color: var(--st-warning); } .tk-pill-red i { color: var(--st-danger); } .tk-pill-green.active, .tk-pill-gray.active, .tk-pill-amber.active, .tk-pill-red.active { background: var(--st-accent); border-color: var(--st-accent); } /* List header */ .tk-list-header { display: grid; grid-template-columns: 36px 1fr 100px 100px 120px; gap: 0; padding: 0.5rem 1.25rem; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--st-muted); border-bottom: 1px solid var(--st-border); background: var(--st-surface-2); } /* Server row */ .tk-server-row { display: grid; grid-template-columns: 36px 1fr 100px 100px 120px; gap: 0; align-items: center; padding: 0.6875rem 1.25rem; border-bottom: 1px solid var(--st-border-soft); cursor: pointer; transition: background 0.12s; } .tk-server-row:hover { background: var(--st-surface-2); } .tk-server-row.expanded { background: var(--st-surface-2); } .tk-server-row.expanded .tk-chevron { transform: rotate(90deg); } .tk-chevron { color: var(--st-muted); font-size: 0.75rem; transition: transform 0.2s; } .tk-col-name { display: flex; align-items: center; gap: 0.625rem; min-width: 0; } /* Status dots */ .tk-status-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; } .dot-green { background: var(--st-accent); box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15); animation: tk-pulse-green 2s ease-in-out infinite; } .dot-amber { background: var(--st-warning); } .dot-red { background: var(--st-danger); } .dot-gray { background: #D1D5DB; } @keyframes tk-pulse-green { 0%, 100% { box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15); } 50% { box-shadow: 0 0 0 5px rgba(5, 150, 105, 0.08); } } .tk-srv-name { font-weight: 600; font-size: 0.9rem; color: var(--st-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-mono); } .tk-srv-sub { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; margin-top: 0.125rem; } .tk-link-cyan { color: var(--st-info) !important; text-decoration: none; font-weight: 500; font-size: 0.8125rem; } .tk-link-cyan:hover { text-decoration: underline; } .tk-link-green { color: var(--st-accent) !important; text-decoration: none; font-weight: 500; font-size: 0.8125rem; } .tk-link-green:hover { text-decoration: underline; } .tk-shared-tag { font-size: 0.6875rem; padding: 0.1rem 0.375rem; border-radius: 4px; background: rgba(14, 116, 144, 0.08); color: var(--st-info); border: 1px solid rgba(14, 116, 144, 0.2); font-family: var(--font-mono); } .tk-type-badge { font-size: 0.6875rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 4px; background: var(--st-surface-2); color: var(--st-muted); border: 1px solid var(--st-border); font-family: var(--font-mono); } .tk-ver-num { font-size: 0.8125rem; font-weight: 700; color: var(--st-text); font-family: var(--font-mono); } .tk-owner-tag { font-size: 0.6875rem; padding: 0.1rem 0.375rem; border-radius: 4px; background: var(--st-surface-2); color: var(--st-muted); border: 1px solid var(--st-border); margin-left: 0.25rem; font-family: var(--font-mono); } /* Status pills */ .tk-status-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.625rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 700; white-space: nowrap; font-family: var(--font-mono); } .tk-status-pill i { font-size: 0.5rem; } .pill-green { background: rgba(5, 150, 105, 0.1); color: var(--st-accent); border: 1px solid rgba(5, 150, 105, 0.25); } .pill-amber { background: rgba(217, 119, 6, 0.1); color: var(--st-warning); border: 1px solid rgba(217, 119, 6, 0.25); } .pill-gray { background: var(--st-surface-2); color: var(--st-muted); border: 1px solid var(--st-border); } .pill-red { background: rgba(220, 38, 38, 0.08); color: var(--st-danger); border: 1px solid rgba(220, 38, 38, 0.2); } /* Expand panel */ .tk-expand-panel { background: var(--st-surface-2); border-bottom: 1px solid var(--st-border); } /* Responsive */ @media (max-width: 767.98px) { .tk-list-header { display: none; } .tk-server-row { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem 1rem; } .tk-col-expand { display: none; } .tk-col-name { flex: 1 1 100%; } .tk-col-type, .tk-col-ver, .tk-col-status { flex: 0 0 auto; } } /* ============================================================ LAYOUT — SIDEBAR + MAIN ============================================================ */ .tk-layout-row { display: flex; gap: 1.25rem; align-items: flex-start; } .tk-sidebar { width: 270px; flex-shrink: 0; position: sticky; top: 74px; max-height: calc(100vh - 90px); overflow-y: auto; display: flex; flex-direction: column; gap: 0.875rem; } /* Single sidebar widget */ .tk-sidebar-panel { background: var(--st-surface); border: 1px solid var(--st-border); border-radius: 8px; backdrop-filter: none; box-shadow: none; padding: 0.625rem; } .tk-sidebar-panel--available { border-color: rgba(5, 150, 105, 0.35); } .tk-sidebar-panel--my-tasks { border-color: var(--st-border); } /* Legacy single wrapper */ .tk-sidebar-inner { background: var(--st-surface); border: 1px solid var(--st-border); border-radius: 8px; backdrop-filter: none; box-shadow: none; padding: 0.625rem; } .tk-sidebar-header { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--st-muted); padding: 0.5rem 0.625rem; border-bottom: 1px solid var(--st-border); margin-bottom: 0.375rem; } .tk-sidebar-header i { color: var(--st-muted); } .tk-sidebar-links { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.25rem 0; margin-bottom: 0.375rem; border-bottom: 1px solid var(--st-border); padding-bottom: 0.5rem; } .tk-sidebar-links a { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.625rem; border-radius: 6px; font-size: 0.8125rem; font-weight: 500; color: var(--st-muted); text-decoration: none; transition: all 0.12s; } .tk-sidebar-links a:hover { background: var(--st-surface-2); color: var(--st-text); } .tk-sidebar-links a i { color: var(--st-muted); font-size: 0.875rem; } .tk-sidebar-section { margin-bottom: 0.25rem; } .tk-sidebar-section-title { display: flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--st-muted); padding: 0.375rem 0.625rem 0.2rem; } .tk-sb-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .tk-sb-count { margin-left: auto; background: var(--st-surface-2); padding: 0 0.35rem; border-radius: 999px; font-size: 0.6rem; font-weight: 700; border: 1px solid var(--st-border); font-family: var(--font-mono); color: var(--st-muted); } .tk-sidebar-task { display: block; padding: 0.375rem 0.625rem; border-radius: 6px; text-decoration: none; transition: background 0.12s; } .tk-sidebar-task:hover { background: var(--st-surface-2); } .tk-sb-task-title { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--st-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tk-sb-task-project { font-size: 0.6875rem; color: var(--st-muted); font-family: var(--font-mono); } .tk-sidebar-empty { font-size: 0.75rem; color: var(--st-muted); padding: 0.25rem 0.625rem 0.25rem; font-style: italic; } .tk-main-content { flex: 1; min-width: 0; } /* Scrollbar for sidebar */ .tk-sidebar::-webkit-scrollbar { width: 3px; } .tk-sidebar::-webkit-scrollbar-track { background: transparent; } .tk-sidebar::-webkit-scrollbar-thumb { background: var(--st-border); border-radius: 3px; } .tk-sidebar::-webkit-scrollbar-thumb:hover { background: #D0D0C9; } @media (max-width: 991.98px) { .tk-layout-row { flex-direction: column; } .tk-sidebar { width: 100%; position: static; max-height: none; } .tk-sidebar-inner { display: flex; flex-wrap: wrap; gap: 0.5rem; } .tk-sidebar-panel--my-tasks { display: flex; flex-wrap: wrap; gap: 0.5rem; } .tk-sidebar-panel--my-tasks .tk-sidebar-header { flex: 0 0 100%; } .tk-sidebar-header { flex: 0 0 100%; } .tk-sidebar-links { flex: 0 0 100%; flex-direction: row; } .tk-sidebar-panel--my-tasks .tk-sidebar-section { flex: 1 1 180px; } .tk-sidebar-section { flex: 1 1 180px; } } /* ============================================================ SIDEBAR TASK ROW (play / complete buttons) ============================================================ */ .tk-sidebar-task-row { display: flex; align-items: center; gap: 4px; } .tk-sidebar-task-row .tk-sidebar-task { flex: 1; min-width: 0; } .tk-play-form { flex-shrink: 0; margin: 0; padding: 0; } .tk-play-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--st-border); background: var(--st-surface-2); color: var(--st-accent); font-size: 0.6rem; cursor: pointer; transition: background 0.12s; padding: 0; } .tk-play-btn:hover { background: var(--st-accent); color: #fff; border-color: var(--st-accent); transform: none; } .tk-server-badge { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 4px; font-size: 0.5rem; } .tk-badge-running { color: var(--st-accent); } .tk-badge-creating { color: var(--st-warning); } .tk-badge-stopped { color: #A3A3A3; } .tk-badge-error { color: var(--st-danger); } @keyframes tk-spin { to { transform: rotate(360deg); } } .tk-spin { animation: tk-spin 0.8s linear infinite; display: inline-block; } .tk-play-btn:disabled, .tk-complete-btn:disabled { opacity: 0.6; cursor: wait; pointer-events: none; } .tk-complete-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 5px; border: 1px solid rgba(5, 150, 105, 0.3); background: rgba(5, 150, 105, 0.08); color: var(--st-accent); font-size: 0.6875rem; cursor: pointer; transition: background 0.12s; padding: 0; flex-shrink: 0; } .tk-complete-btn:hover { background: var(--st-accent); color: #fff; border-color: var(--st-accent); transform: none; } /* ============================================================ KANBAN ============================================================ */ body.servers-taskade .kanban-column { background: var(--st-surface) !important; border: 1px solid var(--st-border); border-radius: 8px; } body.servers-taskade .kanban-column-header { border-bottom: 1px solid var(--st-border) !important; } body.servers-taskade .kanban-column-header h5 { color: var(--st-text) !important; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } body.servers-taskade .kanban-task-card { background: var(--st-surface) !important; border: 1px solid var(--st-border) !important; border-left: 2px solid var(--st-border) !important; border-radius: 6px !important; box-shadow: none !important; } body.servers-taskade .kanban-task-card:hover { border-color: var(--st-accent) !important; border-left-color: var(--st-accent) !important; box-shadow: none !important; } /* ============================================================ SERVERS PAGE — REACT CARD MOCKUP MATCH ============================================================ */ body.servers-taskade { --servers-page-bg: #FBF8F1; --servers-stone-50: #FAFAF9; --servers-stone-100: #F5F5F4; --servers-stone-200: #E7E5E4; --servers-stone-400: #A8A29E; --servers-stone-500: #78716C; --servers-stone-600: #57534E; --servers-stone-700: #44403C; --servers-stone-800: #292524; --servers-stone-900: #1C1917; --servers-green-50: #F0FDF4; --servers-green-100: #DCFCE7; --servers-green-500: #22C55E; --servers-green-600: #16A34A; --servers-green-700: #15803D; --servers-orange-100: #FFEDD5; --servers-orange-500: #F97316; --servers-orange-700: #C2410C; background: radial-gradient(ellipse at top right, rgba(34, 197, 94, 0.06), transparent 50%), radial-gradient(ellipse at top left, rgba(34, 197, 94, 0.04), transparent 50%), var(--servers-page-bg) !important; color: var(--servers-stone-900); } body.servers-taskade .navbar.navbar-light, body.servers-taskade nav.navbar { max-width: 1280px; min-height: auto; margin: 1rem auto 0; padding: 0.75rem 1rem; background: #18181B !important; border: 0 !important; border-radius: 1.25rem 1.25rem 0 0; box-shadow: 0 1px 2px rgba(28, 25, 23, 0.08); position: relative !important; top: auto !important; z-index: 20; } body.servers-taskade .navbar .container-fluid { padding: 0; gap: 1rem; flex-wrap: nowrap; } body.servers-taskade .navbar-brand { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; font-size: 1.125rem; font-weight: 800; letter-spacing: -0.03em; margin-right: 1.5rem; white-space: nowrap; } body.servers-taskade .navbar-brand i { color: var(--servers-green-500) !important; font-size: 1.5rem; } body.servers-taskade .navbar-collapse { min-width: 0; } body.servers-taskade .navbar-nav { align-items: center; gap: 0.35rem; } body.servers-taskade .navbar .nav-link { display: inline-flex; align-items: center; gap: 0.5rem; color: #A1A1AA !important; border: 1px solid transparent; border-radius: 0.5rem; padding: 0.5rem 0.75rem !important; font-size: 0.875rem; font-weight: 600; line-height: 1.25rem; } body.servers-taskade .navbar .nav-link:hover, body.servers-taskade .navbar .nav-link:focus { color: #FFFFFF !important; background: rgba(39, 39, 42, 0.72) !important; } body.servers-taskade .navbar .nav-link[href="/servers/"], body.servers-taskade .navbar .nav-link.active { color: #FFFFFF !important; background: #27272A !important; border-color: rgba(63, 63, 70, 0.5); } body.servers-taskade .navbar .dropdown-menu { background: #FFFFFF; border: 1px solid var(--servers-stone-200); } body.servers-taskade .navbar-toggler { background: #FFFFFF; border: 0; border-radius: 0.5rem; } body.servers-taskade .theme-toggle-outer, body.servers-taskade footer { display: none !important; } body.servers-taskade .main-content { width: 100%; max-width: 1280px; margin: 0 auto; padding: 2rem 1rem 3rem !important; } .server-cards-page { position: relative; min-height: calc(100vh - 88px); } .server-cards-main { position: relative; z-index: 1; padding: 0 1rem; } .server-page-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0.95rem 0 2rem; } .server-page-topbar h1 { margin: 0; color: var(--servers-stone-900); font-size: clamp(1.875rem, 3vw, 2.25rem); line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; } .server-page-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .server-icon-button, .server-view-button, .server-new-button, .server-card-action { appearance: none; text-decoration: none; border: 0; font: inherit; } .server-icon-button { width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; color: var(--servers-stone-500); background: #FFFFFF; border: 1px solid var(--servers-stone-200); border-radius: 0.5rem; box-shadow: 0 1px 2px rgba(28, 25, 23, 0.05); transition: color 0.15s, background 0.15s; } .server-icon-button:hover { color: var(--servers-stone-700); background: var(--servers-stone-50); } .server-view-switch { display: inline-flex; align-items: center; gap: 0.125rem; padding: 0.25rem; background: rgba(231, 229, 228, 0.5); border: 1px solid var(--servers-stone-200); border-radius: 0.5rem; box-shadow: 0 1px 2px rgba(28, 25, 23, 0.05); } .server-view-button { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; color: var(--servers-stone-500); background: transparent; border-radius: 0.375rem; transition: color 0.15s, background 0.15s, box-shadow 0.15s; } .server-view-button:hover { color: var(--servers-stone-700); } .server-view-button.active { color: var(--servers-stone-900); background: #FFFFFF; box-shadow: 0 1px 2px rgba(28, 25, 23, 0.08); } .server-new-button { min-height: 2.5rem; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; color: #FFFFFF !important; background: var(--servers-green-600); border-radius: 0.5rem; box-shadow: 0 1px 2px rgba(28, 25, 23, 0.08); font-size: 0.875rem; line-height: 1.25rem; font-weight: 800; transition: background 0.15s; } .server-tasks-button { min-height: 2.5rem; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; color: var(--servers-stone-700); background: #FFFFFF; border: 1px solid var(--servers-stone-200); border-radius: 0.5rem; box-shadow: 0 1px 2px rgba(28, 25, 23, 0.06); font-size: 0.875rem; line-height: 1.25rem; font-weight: 800; transition: background 0.15s, color 0.15s, border-color 0.15s; } .server-tasks-button:hover { color: var(--servers-stone-900); background: var(--servers-stone-50); border-color: #D6D3D1; } .server-new-button:hover { color: #FFFFFF !important; background: var(--servers-green-700); } .server-search-panel { position: relative; max-width: 28rem; margin: -1rem 0 1.5rem; } .server-search-panel i { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--servers-stone-500); } .server-search-panel input { width: 100%; height: 2.75rem; padding: 0.5rem 0.9rem 0.5rem 2.45rem; background: #FFFFFF; border: 1px solid var(--servers-stone-200); border-radius: 0.5rem; color: var(--servers-stone-900); outline: none; } .server-search-panel input:focus { border-color: rgba(22, 163, 74, 0.55); box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14); } .server-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } .server-card-grid[data-view="list"] { grid-template-columns: minmax(0, 1fr); } .server-design-card { display: flex; flex-direction: column; overflow: visible; min-width: 0; background: #FFFFFF; border: 1px solid var(--servers-stone-200); border-radius: 1rem; box-shadow: 0 1px 2px rgba(28, 25, 23, 0.05); transition: box-shadow 0.2s; animation: server-card-enter 0.4s ease-out both; } .server-design-card:has(.dropdown-menu.show) { z-index: 20; } .server-design-card.server-card-filtered-out { display: none !important; } .server-design-card:nth-child(2) { animation-delay: 0.06s; } .server-design-card:nth-child(3) { animation-delay: 0.12s; } .server-design-card:nth-child(4) { animation-delay: 0.18s; } .server-design-card:hover { box-shadow: 0 8px 18px rgba(28, 25, 23, 0.08); } @keyframes server-card-enter { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .server-design-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem; } .server-design-card__identity { display: flex; align-items: flex-start; gap: 0.75rem; min-width: 0; } .server-design-card__icon { width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; display: inline-flex; align-items: center; justify-content: center; color: var(--servers-stone-400); background: var(--servers-stone-50); border: 1px solid var(--servers-stone-100); border-radius: 0.5rem; } .server-design-card__title-wrap { min-width: 0; } .server-design-card__title-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; min-width: 0; } .server-design-card h2 { margin: 0; max-width: 100%; color: var(--servers-stone-900); font-size: 1rem; line-height: 1.35; font-weight: 800; overflow-wrap: anywhere; } .server-design-card p { margin: 0.25rem 0 0; color: var(--servers-stone-500); font-size: 0.75rem; line-height: 1.35; } .server-type-badge { display: inline-flex; align-items: center; min-height: 1.25rem; padding: 0.125rem 0.5rem; border-radius: 999px; color: var(--servers-stone-700); background: var(--servers-stone-200); font-size: 0.625rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .server-type-badge--enterprise { color: #FFFFFF; background: var(--servers-stone-800); } .server-type-badge--community { color: var(--servers-green-700); background: var(--servers-green-100); } .server-type-badge--shared { color: #0369A1; background: #E0F2FE; border: 1px solid #BAE6FD; } .server-health { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.375rem; min-height: 1.75rem; padding: 0.25rem 0.625rem; border-radius: 999px; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; white-space: nowrap; } .server-health span { width: 0.5rem; height: 0.5rem; border-radius: 999px; } .server-health--healthy { color: var(--servers-green-700); background: var(--servers-green-100); } .server-health--healthy span { background: var(--servers-green-500); } .server-health--working { color: var(--servers-orange-700); background: var(--servers-orange-100); } .server-health--working span { background: var(--servers-orange-500); animation: server-pulse 1.3s ease-in-out infinite; } .server-health--error, .server-health--stopped { color: var(--servers-stone-700); background: var(--servers-stone-100); } .server-health--error span { background: #EF4444; } .server-health--stopped span { background: var(--servers-stone-400); } @keyframes server-pulse { 50% { opacity: 0.35; } } .server-design-divider { height: 1px; margin: 0 1.25rem; border-top: 1px dashed var(--servers-stone-200); } .server-design-card__body { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; } .server-backup-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .server-micro-label { flex: 0 0 auto; color: var(--servers-stone-400); font-size: 0.625rem; line-height: 1rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .server-backup-time { color: var(--servers-stone-700); font-size: 0.875rem; font-weight: 600; } .server-provider-pill { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 1.35rem; padding: 0.125rem 0.5rem; color: var(--servers-stone-600); background: var(--servers-stone-100); border: 1px solid var(--servers-stone-200); border-radius: 999px; font-size: 0.75rem; font-weight: 600; } .server-provider-pill i { color: var(--servers-stone-400); } .server-usage { display: flex; flex-direction: column; gap: 0.75rem; } .server-usage-row { display: flex; align-items: center; gap: 1rem; } .server-usage-row .server-micro-label { width: 2rem; } .server-meter { flex: 1 1 auto; height: 0.5rem; overflow: hidden; background: var(--servers-stone-100); border-radius: 999px; } .server-meter span { display: block; height: 100%; background: var(--servers-green-500); border-radius: inherit; } .server-usage-row strong { width: 2rem; color: var(--servers-stone-500); font-size: 0.75rem; font-weight: 600; text-align: right; } .server-design-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding: 1.25rem; } .server-branch-line { min-width: 0; display: flex; align-items: center; gap: 0.5rem; color: var(--servers-stone-500); font-size: 0.75rem; line-height: 1rem; } .server-branch-line span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .server-card-actions { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; } .server-card-action { min-height: 2rem; display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; background: transparent; border: 1px solid transparent; border-radius: 0.5rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; transition: background 0.15s, color 0.15s, border-color 0.15s; } .server-card-action--muted { color: var(--servers-stone-600) !important; } .server-card-action--muted:hover { color: var(--servers-stone-700) !important; background: var(--servers-stone-100); } .server-card-action--primary { color: var(--servers-green-600) !important; border-color: #BBF7D0; } .server-card-action--primary:hover { color: var(--servers-green-700) !important; background: var(--servers-green-50); } .server-card-action--danger { color: #dc3545 !important; border-color: #f5c2c7; cursor: pointer; } .server-card-action--danger:hover { color: #b02a37 !important; background: #fff0f1; } .server-empty-card { display: grid; place-items: center; gap: 0.75rem; padding: 5rem 1.5rem; text-align: center; background: #FFFFFF; border: 1px solid var(--servers-stone-200); border-radius: 1rem; } .server-empty-card > i { color: var(--servers-stone-400); font-size: 2.5rem; } .server-empty-card h2 { margin: 0; color: var(--servers-stone-900); font-weight: 800; } .server-empty-card p { margin: 0 0 0.5rem; color: var(--servers-stone-500); } .server-tasks-modal .modal-content { border: 1px solid var(--servers-stone-200); border-radius: 1rem; overflow: hidden; } .server-tasks-modal .modal-header { align-items: flex-start; padding: 1.25rem 1.5rem; background: #FFFFFF; } .server-tasks-modal .modal-title { color: var(--servers-stone-900); font-weight: 800; letter-spacing: -0.025em; } .server-tasks-modal .modal-header p { color: var(--servers-stone-500); font-size: 0.875rem; margin-top: 0.2rem; } .server-tasks-modal .modal-body { padding: 1.25rem 1.5rem 1.5rem; background: var(--servers-page-bg); } .server-task-tabs { gap: 0.5rem; margin-bottom: 1rem; } .server-task-tabs .nav-link { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.25rem; padding: 0.45rem 0.85rem; color: var(--servers-stone-600) !important; background: #FFFFFF !important; border: 1px solid var(--servers-stone-200) !important; border-radius: 999px !important; font-size: 0.8125rem; font-weight: 800; } .server-task-tabs .nav-link.active { color: #FFFFFF !important; background: var(--servers-green-600) !important; border-color: var(--servers-green-600) !important; } .server-task-tabs .nav-link span { min-width: 1.35rem; min-height: 1.35rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(120, 113, 108, 0.12); font-size: 0.72rem; } .server-task-tabs .nav-link.active span { background: rgba(255, 255, 255, 0.22); } .server-task-list { display: flex; flex-direction: column; gap: 0.65rem; } .server-task-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.95rem 1rem; background: #FFFFFF; border: 1px solid var(--servers-stone-200); border-radius: 0.75rem; box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04); } .server-task-main { min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; text-decoration: none; } .server-task-main:hover .server-task-title { color: var(--servers-green-700); } .server-task-title { color: var(--servers-stone-900); font-size: 0.95rem; font-weight: 800; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .server-task-meta { color: var(--servers-stone-500); font-size: 0.78rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .server-task-action, .server-task-state { flex: 0 0 auto; min-height: 2.1rem; display: inline-flex; align-items: center; justify-content: center; padding: 0.4rem 0.75rem; border-radius: 0.5rem; font-size: 0.75rem; font-weight: 800; border: 1px solid var(--servers-stone-200); } .server-task-action { background: #FFFFFF; color: var(--servers-stone-700); } .server-task-action--primary { color: #FFFFFF; background: var(--servers-green-600); border-color: var(--servers-green-600); } .server-task-action--primary:hover { background: var(--servers-green-700); border-color: var(--servers-green-700); } .server-task-action--success, .server-task-state { color: var(--servers-green-700); background: var(--servers-green-50); border-color: #BBF7D0; } .server-task-empty { padding: 2rem; color: var(--servers-stone-500); text-align: center; background: #FFFFFF; border: 1px dashed var(--servers-stone-200); border-radius: 0.75rem; font-weight: 600; } @media (max-width: 991.98px) { body.servers-taskade .navbar.navbar-light, body.servers-taskade nav.navbar { margin: 0.5rem 0.5rem 0; } body.servers-taskade .navbar .container-fluid { flex-wrap: wrap; } body.servers-taskade .navbar-collapse { flex-basis: 100%; } body.servers-taskade .navbar-nav { align-items: stretch; padding-top: 0.75rem; } .server-card-grid { grid-template-columns: 1fr; } } @media (max-width: 767.98px) { body.servers-taskade .main-content { padding-left: 0.25rem !important; padding-right: 0.25rem !important; } .server-cards-main { padding: 0 0.75rem; } .server-page-topbar, .server-design-card__header, .server-design-card__footer { align-items: flex-start; flex-direction: column; } .server-page-actions, .server-card-actions { width: 100%; } .server-new-button { justify-content: center; } .server-page-actions .server-new-button { flex: 1 1 auto; } .server-page-actions .server-tasks-button { flex: 1 1 100%; justify-content: center; } .server-health { max-width: 100%; white-space: normal; } .server-task-row { align-items: stretch; flex-direction: column; } .server-task-title, .server-task-meta { white-space: normal; } .server-task-action, .server-task-state { width: 100%; } } /* ============================================================ SERVER LIST PAGE — COMPACT ADMIN DASHBOARD TREATMENT ============================================================ */ body.servers-taskade { --st-bg-deep: #FAFAF7; --st-bg: #FAFAF7; --st-surface-2: #F6F6F1; --st-border: #E4E3DC; --st-border-soft: #ECEBE5; --st-muted: #525252; } body.servers-taskade .main-content { padding-top: 2.5rem; } body.servers-taskade .navbar.navbar-light, body.servers-taskade nav.navbar { min-height: 68px; } body.servers-taskade .navbar .container-fluid { padding-left: 1rem; padding-right: 1rem; } body.servers-taskade .navbar-brand { font-size: 1.25rem; margin-right: 1.4rem; } body.servers-taskade .navbar-brand i { font-size: 1.2rem; } body.servers-taskade .navbar .nav-link { display: inline-flex; align-items: center; gap: 0.28rem; font-size: 0.98rem; font-weight: 650; padding: 0.5rem 0.75rem !important; } body.servers-taskade .page-header { min-height: 140px; display: flex; align-items: center; padding: 2rem 2.25rem !important; margin-bottom: 2.5rem !important; } body.servers-taskade .page-header h1 { font-size: 2.38rem !important; line-height: 1.05; letter-spacing: -0.055em; } body.servers-taskade .page-header p { font-size: 1.12rem; font-weight: 500; margin-top: 0.55rem; } body.servers-taskade .taskade-hero-icon { width: 42px; height: 42px; background: #F7FBFA; border-color: #BEE7D8; color: var(--st-accent); } body.servers-taskade .taskade-hero-icon i { font-size: 1.55rem; } body.servers-taskade .taskade-hero-title { display: inline-flex; align-items: center; gap: 0.5rem; } body.servers-taskade .taskade-hero-title > i { color: #2563EB !important; font-size: 2rem; line-height: 1; } .tk-layout-row { gap: 1.75rem; } .tk-sidebar { width: 330px; top: 88px; gap: 1.05rem; } .tk-sidebar-panel { padding: 0.85rem; } .tk-sidebar-panel--available { border-color: rgba(5, 150, 105, 0.34); box-shadow: inset -3px 0 0 rgba(5, 150, 105, 0.08); } .tk-available-header, .tk-sidebar-header { font-size: 0.86rem; letter-spacing: 0.055em; } .tk-available-row { padding: 1rem 0 0.65rem; } .tk-available-title, .tk-sb-task-title { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.015em; } .tk-available-project, .tk-sb-task-project { font-size: 0.75rem; } .tk-assign-me-btn { min-height: 30px; padding: 0.35rem 0.7rem; border-radius: 7px; font-size: 0.75rem; } .tk-sidebar-section { margin-bottom: 0.8rem; } .tk-sidebar-section-title { font-size: 0.78rem; padding-top: 0.55rem; } .tk-sb-count { min-width: 24px; min-height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.66rem; } .tk-play-btn, .tk-complete-btn { width: 28px; height: 28px; border-radius: 7px; } .tk-ring-card { min-height: 150px; gap: 1.4rem; padding: 1.35rem 2rem; } .tk-ring-wrap { width: 94px; height: 94px; } .tk-ring-track, .tk-ring-fill { stroke-width: 7; } .tk-ring-big { font-size: 1.55rem; } .tk-ring-title { font-size: 1.12rem; font-weight: 750; letter-spacing: -0.025em; } .tk-ring-sub { margin-top: 0.35rem; font-size: 0.82rem; font-weight: 650; } .tk-panel { border-radius: 8px; } .tk-panel-header { min-height: 74px; padding: 1rem 1.55rem; } .tk-panel-header .fw-semibold { font-size: 1.28rem; letter-spacing: -0.035em; } .tk-count-badge { min-width: 30px; min-height: 30px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem; } .tk-btn-add { min-height: 40px; padding: 0.55rem 1rem; border-radius: 7px; font-size: 0.93rem; } .tk-search-row { min-height: 79px; display: flex; align-items: center; padding: 0.85rem 1.55rem; } .tk-search-box { width: min(470px, 100%); max-width: 470px; } .tk-search-box > i { left: 14px; font-size: 1rem; } .tk-search-box input[type="search"] { height: 48px; border-radius: 7px; padding-left: 2.55rem; font-size: 1rem; } .tk-filter-pills { min-height: 63px; align-items: center; padding: 0.75rem 1.55rem; gap: 0.45rem; } .tk-pill { min-height: 37px; padding: 0.42rem 0.9rem; font-size: 0.84rem; } .tk-list-header, .tk-server-row { grid-template-columns: 44px minmax(260px, 1fr) 124px 124px 150px; } .tk-list-header { min-height: 42px; align-items: center; padding: 0.55rem 1.55rem; font-size: 0.78rem; } .tk-server-row { min-height: 84px; padding: 0.9rem 1.55rem; } .tk-col-name { gap: 0.8rem; } .tk-status-dot { width: 10px; height: 10px; } .dot-green { box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.13); } .tk-srv-name { font-size: 1.02rem; font-weight: 750; } .tk-srv-sub { gap: 0.56rem; font-size: 0.84rem; } .tk-link-cyan, .tk-link-green { font-size: 0.9rem; font-weight: 650; } .tk-type-badge, .tk-owner-tag, .tk-shared-tag { border-radius: 5px; font-size: 0.76rem; padding: 0.2rem 0.5rem; } .tk-ver-num { font-size: 1rem; font-weight: 800; } .tk-status-pill { min-height: 32px; padding: 0.35rem 0.8rem; font-size: 0.82rem; } @media (min-width: 1400px) { body.servers-taskade .main-content { padding-left: 3.75rem !important; padding-right: 3.75rem !important; } } @media (max-width: 1199.98px) { .tk-sidebar { width: 300px; } .tk-list-header, .tk-server-row { grid-template-columns: 38px minmax(220px, 1fr) 96px 104px 132px; } } @media (max-width: 991.98px) { body.servers-taskade .page-header { margin-bottom: 1.5rem !important; } .tk-layout-row { gap: 1.25rem; } .tk-sidebar { width: 100%; top: auto; } } @media (max-width: 767.98px) { body.servers-taskade .main-content { padding-top: 1.2rem; } body.servers-taskade .page-header { min-height: auto; padding: 1.35rem !important; } body.servers-taskade .page-header h1 { font-size: 1.85rem !important; } .tk-ring-card { min-height: 128px; padding: 1rem 1.15rem; } .tk-ring-wrap { width: 78px; height: 78px; } .tk-panel-header, .tk-search-row, .tk-filter-pills, .tk-list-header, .tk-server-row { padding-left: 1rem; padding-right: 1rem; } } body.servers-taskade .kanban-task-card .task-title { color: var(--st-text) !important; } body.servers-taskade .kanban-column-body.drag-over { background: var(--st-accent-tint) !important; border-color: var(--st-accent) !important; } /* ============================================================ VIEW TOGGLE (List / Kanban segmented control) ============================================================ */ body.servers-taskade .view-toggle-btn { background: var(--st-surface) !important; border: 1px solid var(--st-border) !important; color: var(--st-muted) !important; border-radius: 6px; font-size: 0.8125rem; font-weight: 500; } body.servers-taskade .view-toggle-btn:hover { background: var(--st-surface-2) !important; color: var(--st-text) !important; } body.servers-taskade .view-toggle-btn.active { background: var(--st-text) !important; border-color: var(--st-text) !important; color: #ffffff !important; box-shadow: none !important; } /* ============================================================ TASK MODAL LABELS ============================================================ */ .tk-modal-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--st-muted); margin-bottom: 3px; } .tk-modal-value { font-size: 0.875rem; color: var(--st-text); } /* ============================================================ PORT BADGES / misc mono fields ============================================================ */ body.servers-taskade .port-badge, body.servers-taskade .tk-ver-num, body.servers-taskade .tk-ring-big, body.servers-taskade .tk-ring-sub { font-family: var(--font-mono); } /* ============================================================ FINAL SERVER CARD OVERRIDES Keep these last: older dashboard rules above are intentionally broad. ============================================================ */ body.servers-taskade .navbar.navbar-light, body.servers-taskade nav.navbar { width: 100%; max-width: none; margin: 0; padding: 0.75rem 1rem; border-radius: 0; background: #18181B !important; border-bottom: 0 !important; box-shadow: 0 1px 2px rgba(28, 25, 23, 0.1); } body.servers-taskade .navbar .container-fluid { max-width: 1280px; margin: 0 auto; } body.servers-taskade .main-content { max-width: 1280px; padding-top: 2.5rem !important; } .server-cards-main { padding-left: 0; padding-right: 0; } .server-card-grid[data-view="list"] { grid-template-columns: minmax(0, 1fr) !important; } .server-card-grid[data-view="list"] .server-design-card { width: 100%; } .server-ops-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 1rem 1.25rem; position: relative; z-index: 3; } .server-op-button, .server-ops-row .server-actions-dropdown { min-height: 2rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.375rem 0.65rem; border: 1px solid var(--servers-stone-200) !important; border-radius: 0.5rem !important; color: var(--servers-stone-600) !important; background: #FFFFFF !important; box-shadow: none !important; font-size: 0.75rem; line-height: 1rem; font-weight: 700; text-decoration: none; white-space: nowrap; } .server-op-button:hover, .server-ops-row .server-actions-dropdown:hover { color: var(--servers-stone-900) !important; background: var(--servers-stone-50) !important; } .server-op-button--primary { color: var(--servers-green-700) !important; border-color: #BBF7D0 !important; background: var(--servers-green-50) !important; } .server-op-button--primary:hover { color: var(--servers-green-700) !important; background: var(--servers-green-100) !important; } .server-op-button--ticket { color: #dc3545 !important; border-color: #f5c2c7 !important; background: #fff0f1 !important; } .server-op-button--ticket:hover { color: #b02a37 !important; background: #ffe0e3 !important; } .server-op-chevron { font-size: 0.65rem; opacity: 0.75; } .server-ops-row .dropdown { display: inline-flex; position: relative; } .server-ops-row .dropdown-menu { border: 1px solid var(--servers-stone-200); border-radius: 0.625rem; padding: 0.375rem; box-shadow: 0 12px 28px rgba(28, 25, 23, 0.1) !important; z-index: 1080; min-width: 14rem; } .server-ops-row .dropdown-item { border-radius: 0.45rem; font-size: 0.82rem; font-weight: 600; } .server-ops-row form { margin: 0; } .server-design-card__footer { padding-top: 1rem; } @media (max-width: 991.98px) { body.servers-taskade nav.navbar, body.servers-taskade .navbar.navbar-light { margin: 0; } } @media (max-width: 767.98px) { .server-ops-row { align-items: stretch; } .server-op-button, .server-ops-row .server-actions-dropdown { flex: 1 1 auto; } } .server-design-card .server-usage-row .server-micro-label { width: 4.25rem; } .server-design-card .server-usage-row strong { width: 3rem; } .server-design-card .server-usage-row .server-storage-value { width: 9.5rem; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 0.08rem; white-space: nowrap; line-height: 1.05; } .server-storage-percent { font-size: 0.9rem; font-weight: 800; } .server-storage-value .server-storage-size { color: var(--servers-stone-400); font-size: 0.68rem; font-weight: 700; letter-spacing: 0; } /* ============================================================ TYPOGRAPHY NORMALIZATION Keep the new server cards as designed, but return shared UI to normal scale. ============================================================ */ body.servers-taskade .navbar-brand { font-size: 1.1rem !important; } body.servers-taskade .navbar-brand i { font-size: 1.15rem !important; } body.servers-taskade .navbar .nav-link { font-size: 0.875rem !important; font-weight: 600; } body.servers-taskade .page-header h1 { font-size: 1.875rem !important; } body.servers-taskade .page-header p { font-size: 0.9375rem !important; } body.servers-taskade .taskade-hero-icon i { font-size: 1.2rem !important; } body.servers-taskade .taskade-hero-title > i { font-size: 1.5rem !important; } .tk-available-header, .tk-sidebar-header { font-size: 0.72rem !important; } .tk-available-title, .tk-sb-task-title { font-size: 0.8125rem !important; } .tk-available-project, .tk-sb-task-project { font-size: 0.6875rem !important; } .tk-sidebar-section-title, .tk-list-header { font-size: 0.6875rem !important; } .tk-ring-big { font-size: 1.375rem !important; } .tk-ring-title { font-size: 0.9375rem !important; } .tk-ring-sub, .tk-pill, .tk-type-badge, .tk-owner-tag, .tk-shared-tag, .tk-status-pill { font-size: 0.75rem !important; } .tk-panel-header .fw-semibold { font-size: 1rem !important; } .tk-search-box input[type="search"] { font-size: 0.875rem !important; } .tk-srv-name { font-size: 0.9rem !important; } .tk-srv-sub, .tk-link-cyan, .tk-link-green { font-size: 0.8125rem !important; } .tk-ver-num { font-size: 0.8125rem !important; } @media (max-width: 767.98px) { body.servers-taskade .page-header h1 { font-size: 1.75rem !important; } } /* ============================================================ UNIFIED WORKSPACE POLISH Applies the Servers/Create Server language across legacy pages. ============================================================ */ body.servers-taskade .main-content { max-width: 1500px; margin: 0 auto; } body.servers-taskade .page-header, body.servers-taskade .admin-page-header { position: relative; overflow: hidden; background: #fff !important; border: 1px solid var(--st-border) !important; border-radius: 0.9rem !important; box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04) !important; margin-bottom: 1.5rem !important; padding: 1.45rem 1.65rem !important; } body.servers-taskade .page-header h1, body.servers-taskade .admin-page-header h1 { display: flex; align-items: center; gap: 0.75rem; color: var(--st-text) !important; font-size: clamp(1.65rem, 2vw, 2.15rem) !important; font-weight: 800 !important; letter-spacing: 0 !important; line-height: 1.1; width: 100%; } body.servers-taskade .page-header h1 i, body.servers-taskade .admin-page-header h1 i, body.servers-taskade .page-header .text-primary { color: var(--st-accent) !important; } body.servers-taskade .page-header h1 > i, body.servers-taskade .admin-page-header h1 > i { width: 2.35rem; height: 2.35rem; border: 1px solid #a7f3d0; border-radius: 0.7rem; background: #ecfdf5; color: var(--st-accent) !important; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem !important; flex: 0 0 auto; } body.servers-taskade .page-header p, body.servers-taskade .admin-page-header p { color: #57534e !important; font-size: 0.95rem !important; font-weight: 600; line-height: 1.45; max-width: 62rem; } body.servers-taskade .page-header > .d-flex, body.servers-taskade .admin-page-header > .d-flex { align-items: flex-start !important; gap: 1rem !important; flex-wrap: wrap; } body.servers-taskade .page-header > .d-flex > div:first-child, body.servers-taskade .admin-page-header > .d-flex > div:first-child { flex: 1 1 24rem; min-width: min(100%, 22rem); } body.servers-taskade .page-header > .d-flex > div:last-child:not(:first-child), body.servers-taskade .admin-page-header > .d-flex > div:last-child:not(:first-child) { display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: 0.6rem !important; justify-content: flex-end; } body.servers-taskade .page-header .btn, body.servers-taskade .admin-page-header .btn { min-height: 2.45rem; font-weight: 800; padding: 0.58rem 1rem !important; white-space: nowrap; } body.servers-taskade .project-search-form { border-top: 1px dashed var(--st-border) !important; margin-top: 1rem !important; padding-top: 1rem !important; max-width: 56rem; } body.servers-taskade .project-search-form .form-label { margin-bottom: 0.4rem !important; } body.servers-taskade .project-search-form .input-group { max-width: 100%; } body.servers-taskade .project-search-form .input-group-lg > .form-control, body.servers-taskade .project-search-form .input-group-lg > .btn, body.servers-taskade .project-search-form .input-group-lg > .input-group-text { min-height: 2.85rem; font-size: 0.95rem; } body.servers-taskade .project-search-form .input-group-lg > .input-group-text { padding-left: 0.9rem; padding-right: 0.9rem; } body.servers-taskade .project-search-form .input-group-lg > .btn { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } body.servers-taskade.team-tasks-list .page-header { padding: 1.45rem 1.65rem !important; border-radius: 0.9rem !important; } body.servers-taskade.team-tasks-list .page-header h1 { margin-bottom: 0.45rem !important; } body.servers-taskade.team-tasks-list .page-header p { margin-top: 0 !important; max-width: 70rem; } body.servers-taskade .card, body.servers-taskade .project-card, body.servers-taskade .team-card, body.servers-taskade .task-card, body.servers-taskade .task-column, body.servers-taskade .tasks-table, body.servers-taskade .chat-container, body.servers-taskade .restore-card { background: #fff !important; border: 1px solid var(--st-border) !important; border-radius: 0.9rem !important; box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04) !important; } body.servers-taskade .card:hover, body.servers-taskade .project-card:hover, body.servers-taskade .team-card:hover { border-color: #d6d3d1 !important; box-shadow: 0 10px 24px rgba(28, 25, 23, 0.06) !important; transform: none !important; } body.servers-taskade .card-header, body.servers-taskade .card-header.bg-primary, body.servers-taskade .card-header.bg-info, body.servers-taskade .card-header.bg-success, body.servers-taskade .card-header.bg-warning, body.servers-taskade .card-header.bg-danger, body.servers-taskade .card-header.bg-dark, body.servers-taskade .card-header.bg-secondary { background: #fff !important; border-bottom: 1px dashed var(--st-border) !important; border-radius: 0.9rem 0.9rem 0 0 !important; color: var(--st-text) !important; padding: 1rem 1.25rem !important; } body.servers-taskade .card-header h1, body.servers-taskade .card-header h2, body.servers-taskade .card-header h3, body.servers-taskade .card-header h4, body.servers-taskade .card-header h5, body.servers-taskade .card-header .h5, body.servers-taskade .card-header .text-white { color: var(--st-text) !important; font-weight: 800 !important; letter-spacing: 0 !important; margin-bottom: 0 !important; } body.servers-taskade .card-header i { color: var(--st-accent) !important; } body.servers-taskade .card-body { padding: 1.25rem !important; } body.servers-taskade .row.g-0 > .card, body.servers-taskade .card .card { border-radius: 0.65rem !important; } body.servers-taskade .section-label, body.servers-taskade .form-label, body.servers-taskade label.text-muted.small.text-uppercase, body.servers-taskade .text-muted.small.text-uppercase { color: #78716c !important; font-size: 0.7rem !important; font-weight: 800 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; } body.servers-taskade .form-control, body.servers-taskade .form-select, body.servers-taskade .input-group-text { border-color: var(--st-border) !important; border-radius: 0.65rem !important; box-shadow: none !important; } body.servers-taskade .input-group .form-control, body.servers-taskade .input-group .form-select, body.servers-taskade .input-group .input-group-text { border-radius: 0 !important; } body.servers-taskade .input-group > :first-child { border-top-left-radius: 0.65rem !important; border-bottom-left-radius: 0.65rem !important; } body.servers-taskade .input-group > :last-child { border-top-right-radius: 0.65rem !important; border-bottom-right-radius: 0.65rem !important; } body.servers-taskade .btn { border-radius: 0.65rem !important; font-weight: 700; letter-spacing: 0; } body.servers-taskade .btn-outline-primary, body.servers-taskade .btn-outline-info, body.servers-taskade .btn-outline-success { border-color: #bbf7d0 !important; color: var(--st-accent) !important; background: #fff !important; } body.servers-taskade .btn-outline-primary:hover, body.servers-taskade .btn-outline-info:hover, body.servers-taskade .btn-outline-success:hover, body.servers-taskade .btn-outline-primary:focus, body.servers-taskade .btn-outline-info:focus, body.servers-taskade .btn-outline-success:focus { background: #f0fdf4 !important; border-color: #86efac !important; color: var(--st-accent-hover) !important; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14) !important; } body.servers-taskade .btn-outline-secondary { background: #fff !important; border-color: var(--st-border) !important; color: #57534e !important; } body.servers-taskade .btn-outline-secondary:hover, body.servers-taskade .btn-outline-secondary:focus { background: #f5f5f0 !important; border-color: #d6d3d1 !important; color: var(--st-text) !important; } body.servers-taskade .table { color: var(--st-text); margin-bottom: 0; vertical-align: middle; } body.servers-taskade .table thead th { background: #f7f7f2 !important; border-bottom: 1px solid var(--st-border) !important; color: #57534e !important; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } body.servers-taskade .table tbody td { border-color: #eeeeea !important; color: #292524; font-size: 0.9rem; } body.servers-taskade .table-hover tbody tr:hover { background: #fafaf7 !important; } body.servers-taskade .badge.bg-primary, body.servers-taskade .badge.bg-info { background: #e0f2fe !important; border: 1px solid #bae6fd; color: #0369a1 !important; } body.servers-taskade .badge.bg-success { background: #dcfce7 !important; border: 1px solid #bbf7d0; color: #15803d !important; } body.servers-taskade .badge.bg-warning { background: #fef3c7 !important; border: 1px solid #fde68a; color: #92400e !important; } body.servers-taskade .badge.bg-danger { background: #fee2e2 !important; border: 1px solid #fecaca; color: #b91c1c !important; } body.servers-taskade .badge.bg-secondary { background: #f5f5f4 !important; border: 1px solid #e7e5e4; color: #57534e !important; } body.servers-taskade .alert { border: 1px solid var(--st-border) !important; border-radius: 0.8rem !important; box-shadow: none !important; } body.servers-taskade .alert-info { background: #f0f9ff !important; border-color: #bae6fd !important; color: #0c4a6e !important; } body.servers-taskade .alert-warning { background: #fffbeb !important; border-color: #fde68a !important; color: #78350f !important; } body.servers-taskade .alert-danger { background: #fef2f2 !important; border-color: #fecaca !important; color: #7f1d1d !important; } body.servers-taskade .progress { background: #f1f1ed !important; border-radius: 999px; overflow: hidden; } body.servers-taskade .progress-bar { background-color: var(--st-accent); } body.servers-taskade .progress-bar.bg-warning { background-color: var(--st-warning) !important; } body.servers-taskade .progress-bar.bg-danger { background-color: var(--st-danger) !important; } body.servers-taskade .display-1, body.servers-taskade .display-2, body.servers-taskade .display-3, body.servers-taskade .display-4, body.servers-taskade .display-5, body.servers-taskade .display-6, body.servers-taskade .card-body h2 { letter-spacing: 0 !important; font-weight: 800 !important; } body.servers-taskade .empty-state { background: #fff !important; border: 1px solid var(--st-border) !important; border-radius: 0.9rem !important; box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04) !important; } @media (max-width: 767.98px) { body.servers-taskade .page-header, body.servers-taskade .admin-page-header { padding: 1.2rem !important; } body.servers-taskade .page-header h1, body.servers-taskade .admin-page-header h1 { font-size: 1.55rem !important; } body.servers-taskade .page-header h1 > i, body.servers-taskade .admin-page-header h1 > i { width: 2.05rem; height: 2.05rem; font-size: 1.1rem !important; } body.servers-taskade .project-search-form .input-group { display: grid; grid-template-columns: auto 1fr; } body.servers-taskade .project-search-form .input-group .btn, body.servers-taskade .project-search-form .input-group a.btn { grid-column: 1 / -1; width: 100%; } } /* Keep the product mark matching the reference navbar. */ body.servers-taskade .navbar-brand i.bi-cloud-fill, body.servers-taskade .navbar-brand .bi-cloud-fill { color: var(--st-accent) !important; -webkit-text-fill-color: var(--st-accent) !important; background: none !important; border: 0 !important; box-shadow: none !important; }