/* ================================================================ Power Pages - Service Request Theme Version: 3.0 (Bootstrap 5.2.2 Override) Palette: Black & White (with Light/Dark toggle) ================================================================ USAGE: 1. Power Pages already loads Bootstrap 5.2.2 OOB 2. Include THIS file AFTER Bootstrap to override OOB styles 3. Add [data-theme="dark"] on for dark mode ================================================================ */ /* ---------------------------------------------------------------- 1. CSS CUSTOM PROPERTIES (Design Tokens) ---------------------------------------------------------------- */ :root { /* ---- Light Theme (default) ---- */ --pp-bg-body: #f5f5f5; --pp-bg-primary: #ffffff; --pp-bg-secondary: #f7f7f8; --pp-bg-tertiary: #eeeeee; --pp-text-primary: #111111; --pp-text-secondary: #555555; --pp-text-muted: #888888; --pp-text-inverse: #ffffff; --pp-border-color: #d4d4d4; --pp-border-light: #e5e5e5; /* Navbar */ --pp-navbar-bg: #0D0D0D; --pp-navbar-text: #ffffff; --pp-navbar-text-muted: rgba(255, 255, 255, 0.65); --pp-navbar-hover-bg: rgba(255, 255, 255, 0.08); --pp-navbar-border: rgba(255, 255, 255, 0.08); --pp-navbar-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); /* Page Title Header (Gradient Banner) */ --pp-header-gradient: #78E5FF; --pp-header-text: #000000; --pp-header-subtitle: rgba(255, 255, 255, 0.72); /* Table */ --pp-table-header-bg: #1a1a1a; --pp-table-header-text: #ffffff; --pp-table-row-even: #ffffff; --pp-table-row-odd: #f7f7f8; --pp-table-row-hover: #e9e9e9; --pp-table-border: #e0e0e0; /* Buttons - Primary */ --pp-btn-primary-bg: #111111; --pp-btn-primary-text: #ffffff; --pp-btn-primary-border: #111111; --pp-btn-primary-hover-bg: #333333; --pp-btn-primary-hover-border: #333333; --pp-btn-primary-active-bg: #000000; /* Buttons - Secondary */ --pp-btn-secondary-bg: #ffffff; --pp-btn-secondary-text: #111111; --pp-btn-secondary-border: #111111; --pp-btn-secondary-hover-bg: #f0f0f0; --pp-btn-secondary-hover-border: #111111; --pp-btn-secondary-active-bg: #e4e4e4; /* Buttons - Disabled */ --pp-btn-disabled-bg: #d4d4d4; --pp-btn-disabled-text: #999999; --pp-btn-disabled-border: #d4d4d4; /* Form Inputs */ --pp-input-bg: #ffffff; --pp-input-border: #cccccc; --pp-input-focus-border: #111111; --pp-input-focus-shadow: rgba(0, 0, 0, 0.1); --pp-input-text: #111111; --pp-input-placeholder: #aaaaaa; /* Links */ --pp-link-color: #444444; --pp-link-hover: #000000; --pp-breadcrumb-divider: "\203A"; --pp-th-link-color: #aaaaaa; --pp-th-link-hover: #ffffff; /* Badges / Status */ --pp-badge-default-bg: #f0f0f0; --pp-badge-default-text: #333333; /* Pagination */ --pp-page-active-bg: #111111; --pp-page-active-text: #ffffff; --pp-page-hover-bg: #e5e5e5; /* Shadows & Misc */ --pp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); --pp-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); --pp-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1); --pp-transition: all 0.2s ease; --pp-transition-fast: all 0.15s ease; } /* ---- Dark Theme ---- */ [data-theme="dark"] { --pp-bg-body: #0a0a0a; --pp-bg-primary: #141414; --pp-bg-secondary: #1a1a1a; --pp-bg-tertiary: #222222; --pp-text-primary: #eeeeee; --pp-text-secondary: #aaaaaa; --pp-text-muted: #666666; --pp-text-inverse: #111111; --pp-border-color: #2e2e2e; --pp-border-light: #252525; --pp-navbar-bg: #050505; --pp-navbar-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); --pp-navbar-border: rgba(255, 255, 255, 0.05); --pp-header-gradient: linear-gradient( 135deg, #1a1a1a 0%, #2f2f2f 50%, #1e1e1e 100% ); --pp-table-header-bg: #1e1e1e; --pp-table-header-text: #eeeeee; --pp-table-row-even: #141414; --pp-table-row-odd: #1a1a1a; --pp-table-row-hover: #262626; --pp-table-border: #2a2a2a; --pp-btn-primary-bg: #eeeeee; --pp-btn-primary-text: #111111; --pp-btn-primary-border: #eeeeee; --pp-btn-primary-hover-bg: #ffffff; --pp-btn-primary-hover-border: #ffffff; --pp-btn-primary-active-bg: #d4d4d4; --pp-btn-secondary-bg: #1a1a1a; --pp-btn-secondary-text: #eeeeee; --pp-btn-secondary-border: #eeeeee; --pp-btn-secondary-hover-bg: #262626; --pp-btn-secondary-hover-border: #eeeeee; --pp-btn-secondary-active-bg: #333333; --pp-btn-disabled-bg: #2a2a2a; --pp-btn-disabled-text: #555555; --pp-btn-disabled-border: #2a2a2a; --pp-input-bg: #1a1a1a; --pp-input-border: #333333; --pp-input-focus-border: #eeeeee; --pp-input-focus-shadow: rgba(255, 255, 255, 0.08); --pp-input-text: #eeeeee; --pp-input-placeholder: #555555; --pp-link-color: #aaaaaa; --pp-link-hover: #ffffff; --pp-th-link-color: #aaaaaa; --pp-th-link-hover: #ffffff; --pp-badge-default-bg: #252525; --pp-badge-default-text: #cccccc; --pp-page-active-bg: #eeeeee; --pp-page-active-text: #111111; --pp-page-hover-bg: #262626; --pp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25); --pp-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); --pp-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45); } /* ================================================================ 2. BOOTSTRAP BASE OVERRIDES ================================================================ */ /* --- Body --- */ body { background-color: var(--pp-bg-body) !important; color: var(--pp-text-primary) !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; font-size: 14px !important; line-height: 1.55 !important; transition: background-color 0.3s ease, color 0.3s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--pp-link-color) !important ; text-decoration: none; transition: var(--pp-transition-fast); } a:hover { color: var(--pp-link-hover) !important; text-decoration: underline; } /* ================================================================ 3. BOOTSTRAP .navbar OVERRIDE (OOB Sticky Top Navbar) ================================================================ */ .navbar { background-color: var(--pp-navbar-bg) !important; box-shadow: var(--pp-navbar-shadow) !important; padding: 0 !important; border-bottom: 1px solid var(--pp-navbar-border) !important; z-index: 1030; transition: background-color 0.3s ease, box-shadow 0.3s ease; } .navbar.sticky-top { position: sticky !important; top: 0 !important; } .navbar > .container, .navbar > .container-fluid { min-height: 56px; display: flex; align-items: center; } /* Navbar Brand (Company Logo) */ .navbar-brand { color: var(--pp-navbar-text) !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: -0.3px; padding: 12px 0 !important; margin-right: 0 !important; transition: opacity 0.2s ease; display: flex; align-items: center; gap: 10px; } .navbar-brand:hover { color: var(--pp-navbar-text) !important; opacity: 0.85; text-decoration: none !important; } .navbar-brand img { height: 30px; width: auto; } /* Navbar Toggler (mobile hamburger) */ .navbar-toggler { border-color: var(--pp-navbar-border) !important; padding: 4px 8px !important; } .navbar-toggler:focus { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15) !important; } .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; } /* Navbar Nav links */ .navbar-nav .nav-link { color: var(--pp-navbar-text-muted) !important; font-size: 13px !important; font-weight: 500 !important; padding: 8px 14px !important; border-radius: 6px; transition: var(--pp-transition-fast); margin: 0 2px; } .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus { color: var(--pp-navbar-text) !important; background-color: var(--pp-navbar-hover-bg) !important; text-decoration: none !important; } .navbar-nav .nav-link.active, .navbar-nav .nav-item.show .nav-link { color: var(--pp-navbar-text) !important; background-color: var(--pp-navbar-hover-bg) !important; } /* Navbar Dropdown Menu */ .navbar .dropdown-menu { background-color: var(--pp-bg-primary) !important; border: 1px solid var(--pp-border-light) !important; border-radius: 8px !important; box-shadow: var(--pp-shadow-lg) !important; padding: 6px !important; margin-top: 4px !important; min-width: 200px; } .navbar .dropdown-item { color: var(--pp-text-primary) !important; font-size: 13px !important; padding: 8px 14px !important; border-radius: 5px !important; transition: var(--pp-transition-fast); } .navbar .dropdown-item:hover, .navbar .dropdown-item:focus { background-color: var(--pp-bg-secondary) !important; color: var(--pp-text-primary) !important; } .navbar .dropdown-item.active, .navbar .dropdown-item:active { background-color: var(--pp-btn-primary-bg) !important; color: var(--pp-btn-primary-text) !important; } .navbar .dropdown-divider { border-color: var(--pp-border-light) !important; margin: 4px 0 !important; } /* Navbar user avatar / icon */ .pp-navbar-avatar { width: 32px; height: 32px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.15); color: var(--pp-navbar-text); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; margin-right: 6px; } /* Navbar text helper */ .navbar-text { color: var(--pp-navbar-text-muted) !important; font-size: 13px; } /* ================================================================ 4. PAGE TITLE BANNER (Gradient - separate from navbar) ================================================================ */ .pp-page-header { background: var(--pp-header-gradient); color: var(--pp-header-text); padding: 15px 0; margin-bottom: 0; position: relative; overflow: hidden; } .pp-page-header::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: repeating-linear-gradient( 90deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 80px ); pointer-events: none; } .pp-page-header .container { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; } .pp-page-header h1, .pp-page-header .pp-page-title { font-size: 24px; font-weight: 700; color: var(--pp-header-text) !important; letter-spacing: -0.3px; margin: 0; line-height: 1.3; } .pp-page-header p, .pp-page-header .pp-page-subtitle { font-size: 14px; font-weight: 400; color: var(--pp-header-subtitle) !important; margin-top: 4px; margin-bottom: 0; } /* ================================================================ 5. BOOTSTRAP .container OVERRIDE ================================================================ */ .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { color: var(--pp-text-primary); } /* ================================================================ 6. BOOTSTRAP .card OVERRIDE ================================================================ */ .card { background-color: var(--pp-bg-primary) !important; border: 1px solid var(--pp-border-light) !important; border-radius: 10px 10px 10px 10px !important; box-shadow: var(--pp-shadow) !important; transition: var(--pp-transition); color: var(--pp-text-primary) !important; } .card-body { padding: 24px !important; color: var(--pp-text-primary) !important; } .card-header { background-color: var(--pp-bg-secondary) !important; border-bottom: 1px solid var(--pp-border-light) !important; color: var(--pp-text-primary) !important; font-weight: 600; padding: 16px 24px !important; } .card-footer { background-color: var(--pp-bg-secondary) !important; border-top: 1px solid var(--pp-border-light) !important; color: var(--pp-text-primary) !important; padding: 16px 24px !important; } .card + .card { margin-top: 20px; } /* ================================================================ 7. SECTION TITLES (inside content area) ================================================================ */ .pp-section-title { font-size: 17px; font-weight: 600; color: var(--pp-text-primary); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--pp-border-light); } .pp-section-subtitle { font-size: 13px; color: var(--pp-text-secondary); margin-top: -12px; margin-bottom: 16px; } /* ================================================================ 8. BOOTSTRAP .breadcrumb OVERRIDE ================================================================ */ .breadcrumb { /*background-color: var(--pp-bg-primary) !important; border-bottom: 1px solid var(--pp-border-light);*/ border-radius: 0 !important; padding: 14px 0 !important; margin-bottom: 0 !important; font-size: 13px; } .breadcrumb-item a { color: var(--pp-link-color) !important; text-decoration: none !important; padding: 2px 0; border-bottom: 1px solid transparent; transition: var(--pp-transition-fast); } .breadcrumb-item a:hover { color: var(--pp-link-hover) !important; border-bottom-color: var(--pp-link-hover); text-decoration: none !important; } .breadcrumb-item a:active { color: var(--pp-text-primary) !important; } .breadcrumb-item.active { color: var(--pp-text-primary) !important; font-weight: 500; } .breadcrumb-item + .breadcrumb-item::before { color: var(--pp-text-muted) !important; content: var(--pp-breadcrumb-divider) !important; font-size: 16px; font-weight: 300; } /* ================================================================ 9. BOOTSTRAP .table OVERRIDE ================================================================ */ .table { color: var(--pp-text-primary) !important; border-color: var(--pp-table-border) !important; font-size: 13px; margin-bottom: 0 !important; } /* Table Header */ .table > thead > tr > th, .table thead th { background-color: var(--pp-table-header-bg) !important; color: var(--pp-table-header-text) !important; font-weight: 600 !important; font-size: 12px !important; text-transform: uppercase; letter-spacing: 0.5px; padding: 12px 16px !important; border-bottom: 2px solid var(--pp-table-border) !important; white-space: nowrap; vertical-align: middle !important; } /* Alternating Row Colors via .table-striped */ .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--pp-table-row-odd) !important; color: var(--pp-text-primary) !important; --bs-table-accent-bg: var(--pp-table-row-odd) !important; } .table-striped > tbody > tr:nth-of-type(even) > * { background-color: var(--pp-table-row-even) !important; color: var(--pp-text-primary) !important; --bs-table-accent-bg: var(--pp-table-row-even) !important; } /* Also handle non-striped tables */ .table:not(.table-striped) > tbody > tr:nth-of-type(odd) > td { background-color: var(--pp-table-row-odd); } .table:not(.table-striped) > tbody > tr:nth-of-type(even) > td { background-color: var(--pp-table-row-even); } /* Table Row Hover via .table-hover */ .table-hover > tbody > tr:hover > * { background-color: var(--pp-table-row-hover) !important; color: var(--pp-text-primary) !important; --bs-table-accent-bg: var(--pp-table-row-hover) !important; } /* Table Cells */ .table > tbody > tr > td, .table tbody td { padding: 11px 16px !important; border-bottom: 1px solid var(--pp-table-border) !important; color: var(--pp-text-primary) !important; vertical-align: middle !important; transition: var(--pp-transition-fast); } /* Table bordered */ .table-bordered > :not(caption) > * > * { border-color: var(--pp-table-border) !important; } /* Clickable rows */ .table.table-clickable tbody tr { cursor: pointer; } .table.table-clickable tbody tr:hover { box-shadow: inset 3px 0 0 var(--pp-text-primary); } /* Table wrapper for horizontal scroll */ .table-responsive { border: 1px solid var(--pp-table-border); border-radius: 6px; } /* Empty table message */ .pp-table-empty { text-align: center; padding: 48px 16px !important; color: var(--pp-text-muted) !important; } .pp-table-empty-icon { font-size: 32px; margin-bottom: 8px; opacity: 0.4; } th a { color: var(--pp-th-link-color) !important ; } th a:hover { color: var(--pp-th-link-hover) !important; } .view-grid > table { border-collapse: collapse; border: unset !important; } td a { font-weight: bold; } /* ================================================================ 10. BOOTSTRAP .btn OVERRIDES ================================================================ */ /* Reset all btn base */ .btn { font-size: 13px !important; font-weight: 500 !important; border-radius: 6px !important; padding: 9px 18px !important; transition: var(--pp-transition) !important; line-height: 1.4 !important; letter-spacing: 0; } .btn:focus-visible { outline: 2px solid var(--pp-input-focus-border) !important; outline-offset: 2px !important; box-shadow: none !important; } /* --- .btn-primary --- */ .btn-primary { background-color: var(--pp-btn-primary-bg) !important; color: var(--pp-btn-primary-text) !important; border-color: var(--pp-btn-primary-border) !important; } .btn-primary:hover, .btn-primary:focus { background-color: var(--pp-btn-primary-hover-bg) !important; border-color: var(--pp-btn-primary-hover-border) !important; color: var(--pp-btn-primary-text) !important; transform: translateY(-1px); box-shadow: var(--pp-shadow) !important; } .btn-primary:active, .btn-primary.active { background-color: var(--pp-btn-primary-active-bg) !important; border-color: var(--pp-btn-primary-active-bg) !important; color: var(--pp-btn-primary-text) !important; transform: translateY(0); box-shadow: none !important; } /* --- .btn-secondary / .btn-outline-secondary --- */ .btn-secondary, .btn-outline-secondary { background-color: var(--pp-btn-secondary-bg) !important; color: var(--pp-btn-secondary-text) !important; border-color: var(--pp-btn-secondary-border) !important; } .btn-secondary:hover, .btn-secondary:focus, .btn-outline-secondary:hover, .btn-outline-secondary:focus { background-color: var(--pp-btn-secondary-hover-bg) !important; border-color: var(--pp-btn-secondary-hover-border) !important; color: var(--pp-btn-secondary-text) !important; transform: translateY(-1px); box-shadow: var(--pp-shadow-sm) !important; } .btn-secondary:active, .btn-secondary.active, .btn-outline-secondary:active, .btn-outline-secondary.active { background-color: var(--pp-btn-secondary-active-bg) !important; color: var(--pp-btn-secondary-text) !important; transform: translateY(0); box-shadow: none !important; } /* --- Disabled state --- */ .btn:disabled, .btn.disabled, .btn-primary:disabled, .btn-primary.disabled, .btn-secondary:disabled, .btn-secondary.disabled, .btn-outline-secondary:disabled, .btn-outline-secondary.disabled { background-color: var(--pp-btn-disabled-bg) !important; color: var(--pp-btn-disabled-text) !important; border-color: var(--pp-btn-disabled-border) !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; opacity: 0.7 !important; pointer-events: auto !important; } /* --- .btn-outline-danger --- */ .btn-outline-danger { background-color: transparent !important; color: #c0392b !important; border-color: #c0392b !important; } .btn-outline-danger:hover, .btn-outline-danger:focus { background-color: #c0392b !important; color: #ffffff !important; border-color: #c0392b !important; transform: translateY(-1px); } [data-theme="dark"] .btn-outline-danger { color: #f87171 !important; border-color: #f87171 !important; } [data-theme="dark"] .btn-outline-danger:hover, [data-theme="dark"] .btn-outline-danger:focus { background-color: #f87171 !important; color: #111111 !important; border-color: #f87171 !important; } /* --- Button Sizes --- */ .btn-sm { padding: 5px 12px !important; font-size: 12px !important; } .btn-lg { padding: 12px 24px !important; font-size: 15px !important; } /* ================================================================ 11. BOOTSTRAP .form-control, .form-select OVERRIDES ================================================================ */ .form-control, .form-select { background-color: var(--pp-input-bg) !important; border: 1px solid var(--pp-input-border) !important; color: var(--pp-input-text) !important; border-radius: 6px !important; padding: 9px 12px !important; font-size: 14px !important; transition: var(--pp-transition-fast) !important; } .form-select { padding-right: 36px !important; } .form-control::placeholder { color: var(--pp-input-placeholder) !important; } .form-control:focus, .form-select:focus { border-color: var(--pp-input-focus-border) !important; box-shadow: 0 0 0 3px var(--pp-input-focus-shadow) !important; background-color: var(--pp-input-bg) !important; color: var(--pp-input-text) !important; } .form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--pp-bg-tertiary) !important; color: var(--pp-text-muted) !important; cursor: not-allowed; opacity: 0.7; } /* Form Label */ .form-label { font-size: 13px !important; font-weight: 500 !important; color: var(--pp-text-primary) !important; margin-bottom: 6px !important; } /* Required field indicator */ .form-label.required::after { content: " *"; color: #c0392b; } [data-theme="dark"] .form-label.required::after { color: #f87171; } /* Help / Muted text under inputs */ .form-text { font-size: 12px !important; color: var(--pp-text-muted) !important; } /* Validation - error */ .form-control.is-invalid { border-color: #c0392b !important; } [data-theme="dark"] .form-control.is-invalid { border-color: #f87171 !important; } .invalid-feedback { font-size: 12px !important; color: #c0392b !important; } [data-theme="dark"] .invalid-feedback { color: #f87171 !important; } /* Checkbox & Radio */ .form-check-input { width: 16px !important; height: 16px !important; border-color: var(--pp-input-border) !important; background-color: var(--pp-input-bg) !important; } .form-check-input:checked { background-color: var(--pp-btn-primary-bg) !important; border-color: var(--pp-btn-primary-bg) !important; } .form-check-input:focus { box-shadow: 0 0 0 3px var(--pp-input-focus-shadow) !important; border-color: var(--pp-input-focus-border) !important; } .form-check-label { color: var(--pp-text-primary) !important; font-size: 14px; } /* ================================================================ 12. BOOTSTRAP .badge OVERRIDES ================================================================ */ .badge { font-size: 11px !important; font-weight: 600 !important; padding: 5px 10px !important; border-radius: 100px !important; letter-spacing: 0.2px; float: unset !important; } /* Default / generic */ .badge.bg-secondary, .badge.bg-light { background-color: var(--pp-badge-default-bg) !important; color: var(--pp-badge-default-text) !important; } /* Success */ .badge.bg-success { background-color: #e6f4ea !important; color: #1b7a3d !important; } [data-theme="dark"] .badge.bg-success { background-color: #162b1e !important; color: #4ade80 !important; } /* Warning */ .badge.bg-warning { background-color: #fef3e2 !important; color: #9a6700 !important; } [data-theme="dark"] .badge.bg-warning { background-color: #2b2210 !important; color: #fbbf24 !important; } /* Danger */ .badge.bg-danger { background-color: #fce8e8 !important; color: #c0392b !important; } [data-theme="dark"] .badge.bg-danger { background-color: #2b1414 !important; color: #f87171 !important; } /* Info */ .badge.bg-info { background-color: #e8f0fe !important; color: #1a56db !important; } [data-theme="dark"] .badge.bg-info { background-color: #14202b !important; color: #60a5fa !important; } /* Dot indicator inside badge */ .badge .badge-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: currentColor; margin-right: 4px; } /* ================================================================ 13. BOOTSTRAP .pagination OVERRIDE ================================================================ */ .pagination { gap: 4px !important; } .page-link { color: var(--pp-text-primary) !important; background-color: var(--pp-bg-primary) !important; border: 1px solid var(--pp-border-color) !important; border-radius: 6px !important; padding: 6px 12px !important; font-size: 13px !important; font-weight: 500 !important; transition: var(--pp-transition-fast) !important; min-width: 34px; text-align: center; } .page-link:hover { background-color: var(--pp-page-hover-bg) !important; color: var(--pp-text-primary) !important; border-color: var(--pp-border-color) !important; } .page-item.active .page-link { background-color: var(--pp-page-active-bg) !important; color: var(--pp-page-active-text) !important; border-color: var(--pp-page-active-bg) !important; } .page-item.disabled .page-link { color: var(--pp-text-muted) !important; background-color: var(--pp-bg-primary) !important; border-color: var(--pp-border-color) !important; opacity: 0.5; cursor: not-allowed; } /* ================================================================ 14. BOOTSTRAP .alert OVERRIDES ================================================================ */ .alert { border-radius: 6px !important; font-size: 14px; } /* ================================================================ 15. BOOTSTRAP .modal OVERRIDES ================================================================ */ .modal-content { background-color: var(--pp-bg-primary) !important; color: var(--pp-text-primary) !important; border: 1px solid var(--pp-border-light) !important; border-radius: 10px !important; box-shadow: var(--pp-shadow-lg) !important; } .modal-header { border-bottom-color: var(--pp-border-light) !important; color: var(--pp-text-primary) !important; } .modal-footer { border-top-color: var(--pp-border-light) !important; } .btn-close { filter: var(--pp-text-primary); } [data-theme="dark"] .btn-close { filter: invert(1); } /* ================================================================ 16. THEME TOGGLE SWITCH (in Navbar) ================================================================ */ .pp-theme-toggle { display: flex; align-items: center; gap: 8px; } .pp-toggle-switch { position: relative; width: 44px; height: 24px; cursor: pointer; display: inline-block; } .pp-toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .pp-toggle-track { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.2); border-radius: 24px; transition: var(--pp-transition); } .pp-toggle-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background-color: #ffffff; border-radius: 50%; transition: var(--pp-transition); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .pp-toggle-switch input:checked + .pp-toggle-track { background-color: rgba(255, 255, 255, 0.4); } .pp-toggle-switch input:checked + .pp-toggle-track .pp-toggle-knob { transform: translateX(20px); } .pp-toggle-icon { font-size: 14px; line-height: 1; color: var(--pp-navbar-text-muted); } .pp-toggle-icon:first-child { font-size: 16px; } /* ================================================================ 17. SUBGRID HEADER (inline tables in forms) ================================================================ */ .pp-subgrid-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .pp-subgrid-title { font-size: 15px; font-weight: 600; color: var(--pp-text-primary); } .pp-subgrid-count { font-size: 12px; color: var(--pp-text-muted); font-weight: 400; margin-left: 8px; } /* Inline add form panel */ .pp-inline-form-panel { background: var(--pp-bg-secondary); border: 1px solid var(--pp-border-light); border-radius: 6px; padding: 16px; margin-bottom: 16px; } /* ================================================================ 18. TOOLBAR (above list tables) ================================================================ */ .pp-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; } .pp-toolbar-left { display: flex; align-items: center; gap: 12px; } .pp-toolbar-right { display: flex; align-items: center; gap: 8px; } .pp-result-count { font-size: 13px; color: var(--pp-text-secondary); } /* ================================================================ 19. SEARCH WRAPPER (icon inside input) ================================================================ */ .pp-search-wrapper { position: relative; } .pp-search-wrapper .form-control { padding-left: 36px !important; } .pp-search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--pp-text-muted); pointer-events: none; z-index: 2; } /* ================================================================ 20. FORM ACTIONS BAR ================================================================ */ .pp-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 20px; border-top: 1px solid var(--pp-border-light); margin-top: 24px; } .pp-form-actions-flat { border-top: none; margin-top: 0; padding-top: 0; } /* ================================================================ 21. UTILITY CLASSES ================================================================ */ .text-muted { color: var(--pp-text-muted) !important; } .text-secondary { color: var(--pp-text-secondary) !important; } .pp-text-small { font-size: 12px; } .pp-hidden { display: none !important; } .pp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* Cell utilities for tables */ .pp-cell-nowrap { white-space: nowrap; } .pp-cell-actions { text-align: right; white-space: nowrap; } /* ================================================================ 22. RESPONSIVE OVERRIDES ================================================================ */ @media (max-width: 768px) { .pp-page-header h1, .pp-page-header .pp-page-title { font-size: 20px; } .card-body { padding: 16px !important; } .pp-page-header .container { flex-direction: column; align-items: flex-start; gap: 12px; } .table > thead > tr > th, .table > tbody > tr > td { padding: 8px 10px !important; font-size: 12px !important; } .navbar-brand { font-size: 16px !important; } } /* ================================================================ 23. ANIMATIONS ================================================================ */ @keyframes pp-fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .pp-fade-in { animation: pp-fadeIn 0.3s ease-out; } @keyframes pp-rowFlash { 0% { background-color: #e6f4ea; } 100% { background-color: transparent; } } [data-theme="dark"] .pp-row-flash { animation: pp-rowFlashDark 1.2s ease-out; } @keyframes pp-rowFlashDark { 0% { background-color: #162b1e; } 100% { background-color: transparent; } } .pp-row-flash { animation: pp-rowFlash 1.2s ease-out; } /* ================================================================ 24. SCROLLBAR STYLING ================================================================ */ .table-responsive::-webkit-scrollbar { height: 6px; } .table-responsive::-webkit-scrollbar-track { background: var(--pp-bg-secondary); border-radius: 3px; } .table-responsive::-webkit-scrollbar-thumb { background: var(--pp-border-color); border-radius: 3px; } .table-responsive::-webkit-scrollbar-thumb:hover { background: var(--pp-text-muted); } .footer { background-color: #000000; } .bg-primary { background-color: #000000 !important; } .mt-auto { margin-top: 10px !important; } .nav-link, .nav-link:hover, .nav-link:focus { color: var(--pp-navbar-text) !important; } /* ============================================================ MULTISTEP PROGRESS INDICATOR Power Pages WebForm Progress ============================================================ */ #wpProgressBar { margin: 24px 0 20px 0; } /* Remove default list styling */ #wpProgressBar .progress { display: flex; align-items: center; justify-content: space-between; list-style: none; padding: 0; margin: 0; background: transparent; border: none; position: relative; } /* Horizontal line connector */ #wpProgressBar .progress::before { content: ""; position: absolute; top: 20px; left: 12%; right: 12%; height: 2px; background-color: var(--pp-border-light); z-index: 0; } /* Each step */ #wpProgressBar .list-group-item { background: transparent; border: none; flex: 1; text-align: center; font-size: 13px; font-weight: 500; color: var(--pp-text-muted); position: relative; z-index: 1; padding: 0; } /* Step number circle */ #wpProgressBar .number { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--pp-border-color); background-color: var(--pp-bg-primary); color: var(--pp-text-secondary); font-weight: 600; /*margin-bottom: 6px;*/ padding-left: 8px; padding-top: 2px; transition: var(--pp-transition-fast); margin-right: 5px; /* adjust spacing as needed */ } /* Active step */ #wpProgressBar .list-group-item.active .number { background-color: var(--pp-btn-primary-bg); border-color: var(--pp-btn-primary-bg); color: var(--pp-btn-primary-text); } #wpProgressBar .list-group-item.active { color: var(--pp-text-primary); padding-bottom: 10px; } /* Completed steps, if Power Pages applies different class later */ #wpProgressBar .list-group-item.complete .number { background-color: var(--pp-btn-primary-bg); border-color: var(--pp-btn-primary-bg); color: var(--pp-btn-primary-text); } /* Incomplete steps */ #wpProgressBar .list-group-item.incomplete .number { opacity: 0.6; padding-bottom: 8px !important; } /* Optional, hide step text and show numbers only */ #wpProgressBar .list-group-item span:not(.number) { display: block; font-size: 12px; margin-top: 2px; } /* Cleaner number only mode, uncomment if you prefer numbers only */ /* #wpProgressBar .list-group-item { font-size: 0; } */ /* Accessibility fix */ #wpProgressBar .sr-only { position: absolute !important; left: -9999px !important; } /************************Extra*****************/ .input-group-text { padding: .550rem .75rem; margin-right: -4px; z-index: 2; } .entity-grid, .view-grid, .table-responsive { overflow-x: unset !important; } /* Checkbox */ input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: #000; /* black */ cursor: pointer; margin-top: unset !important; } /* CK height */ .ck, .ck-content { max-height: 300px !important; border: 1px solid #ddd !important; } .stickystyles-wrapper-insert { overflow-x: auto; } /* Alert Warning Style */ .alert-warning { border-color: var(--pp-page-active-text); color: var(--pp-page-active-bg); background-color: var(--pp-page-hover-bg); } /* Loading overlay */ #loading { position: fixed; left: 0; width: 100%; height: 100%; background: #FFF; z-index: 9999; display: flex; justify-content: center; align-items: center; pointer-events: none; } .loading-img { width: 8%; } .loading-info { z-index: 10000; text-align: right; position: absolute; padding-left: 140px; } .disabled-link { pointer-events: none; opacity: 0.6; cursor: default; } .resolution-text { /*background-color: #e8f5e9 !important; border: 1px solid #c8e6c9 !important; */ background-color:#eeffea; border-left:4px solid #69fc7d; border-radius:2px; margin-bottom:24px; padding:12px 16px; } .no-scroll { overflow: hidden; } .pp-page-header { background-color: #78E5FF !important; /* blue */ } /* ================================================================ TIMELINE SPECIFIC FIXES ================================================================ */ /* Remove the border from the comment boxes and their containers */ .notes .note, .notes .note .row, .notes .note .content, .notes .note .attachment-outer-border { border: none !important; border-top: none !important; border-bottom: none !important; border-left: none !important; border-right: none !important; box-shadow: none !important; background-color: transparent !important; } /* Fix for the rich text editor (CKEditor) area within notes */ .notes .note .description, .notes .note .ck-content, .notes .note .data-wrapper { border: none !important; background: transparent !important; padding: 0 !important; } /* Remove any potential grouping borders in the timeline list */ ul.notes, .notes-list { border: none !important; } /* Aligning the comment text to the start of the form */ .notes .note .col-lg-9 { padding-left: 0 !important; } html, body { height: 100%; } body { display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1; } .mt-auto { margin-top: auto !important; } .dropdown { top: 5px; } .dropdown-menu { --bs-dropdown-padding-y: unset; } .entitylist { margin-bottom: 15px; } /* List Tab */ .tab-menu { list-style: none; padding: 0 0 0 1px; margin: 0; display: flex; border-bottom: 1px solid #ddd; overflow: visible; } .tab-link { padding: 10px 40px; cursor: pointer; background: #e0e0e0; color: #333; /* ADD THE GAP HERE */ margin-right: 1px; font-weight: 600; transition: all 0.2s ease; border-radius: 8px 8px 0 0; /* Slightly more curve for a modern look */ border: 1px solid #ccc; border-bottom: none; /* Shadow for depth */ box-shadow: 0 -2px 5px rgba(0,0,0,0.05); } /* Mouse Over Style */ .tab-link:hover { background: #cccccc; box-shadow: 0 -4px 8px rgba(0,0,0,0.1); } /* Active Tab Style */ .tab-link.active { background: #000000; color: #ffffff; border-color: #000000; /* --- FIX FOR THE GAP --- */ position: relative; z-index: 2; /* Ensures it stays on top of the bar's border */ /* Move the tab down to overlap the bar */ margin-bottom: -2px; /* Optional: Ensure the bottom border of the tab matches its black color */ border-bottom: 2px solid #000000; } /* Remove margin from the last tab so it doesn't push the container */ .tab-link:last-child { margin-right: 0; } /* Icon Spacing */ .tab-link .fa { margin-right: 10px; } /* for disabled lookup and other controls */ .form-control-readonly { background-color: var(--pp-bg-tertiary) !important; color: var(--pp-text-muted) !important; cursor: not-allowed; opacity: 0.7; pointer-events: none; }