/* =================================================================== IGNY8 CUSTOM ADMIN STYLES - COMPLETE REDESIGN =================================================================== Using exact IGNY8 brand colors from frontend design system =================================================================== */ /* IGNY8 Brand Color Variables - Matching Frontend App */ :root { /* Primary Colors */ --igny8-primary: #0693e3; /* Primary brand blue */ --igny8-primary-dark: #0472b8; /* Primary dark */ --igny8-primary-light: #3da9e8; /* Primary light */ /* Accent Colors */ --igny8-success: #0bbf87; /* Success teal-green */ --igny8-success-dark: #08966b; /* Success dark */ --igny8-warning: #ff7a00; /* Warning orange */ --igny8-warning-dark: #cc5f00; /* Warning dark */ --igny8-danger: #ef4444; /* Danger red */ --igny8-danger-dark: #d13333; /* Danger dark */ --igny8-purple: #5d4ae3; /* Purple accent */ --igny8-purple-dark: #3a2f94; /* Purple dark */ /* Neutral Colors */ --igny8-navy: #0d1b2a; /* Dark navy background */ --igny8-navy-light: #1a2e44; /* Navy light */ --igny8-surface: #f8fafc; /* Page background */ --igny8-panel: #ffffff; /* Panel background */ --igny8-text: #1e293b; /* Main text */ --igny8-text-light: #64748b; /* Light text */ --igny8-text-dim: #94a3b8; /* Dimmed text */ --igny8-stroke: #e2e8f0; /* Borders */ --igny8-stroke-dark: #cbd5e1; /* Dark borders */ } /* =================================================================== GLOBAL RESETS =================================================================== */ body { background: var(--igny8-surface) !important; color: var(--igny8-text) !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; } /* =================================================================== HEADER - Clean Professional Design =================================================================== */ #header { background: linear-gradient(135deg, var(--igny8-primary) 0%, var(--igny8-primary-dark) 100%) !important; color: white !important; box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; padding: 0 !important; } #branding { padding: 16px 30px !important; } #branding h1 { margin: 0 !important; font-size: 20px !important; font-weight: 600 !important; } #branding h1 a:link, #branding h1 a:visited { color: white !important; text-decoration: none !important; display: flex !important; align-items: center !important; gap: 10px !important; } #header a:link, #header a:visited { color: white !important; } /* =================================================================== ADD RECORD BUTTON - Modern Accent Color =================================================================== */ .object-tools { margin-bottom: 24px !important; float: right !important; } .object-tools li { margin: 0 !important; list-style: none !important; } .object-tools a.addlink { background: linear-gradient(135deg, var(--igny8-success) 0%, var(--igny8-success-dark) 100%) !important; color: white !important; padding: 12px 28px !important; border-radius: 8px !important; font-weight: 600 !important; font-size: 14px !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 10px !important; box-shadow: 0 2px 6px rgba(11, 191, 135, 0.3) !important; transition: all 0.2s ease !important; border: none !important; text-transform: none !important; } .object-tools a.addlink:before { content: "\f067" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; font-size: 14px !important; margin-right: 0 !important; background: none !important; border: none !important; width: auto !important; height: auto !important; } .object-tools a.addlink:hover { background: linear-gradient(135deg, var(--igny8-success-dark) 0%, #067354 100%) !important; box-shadow: 0 4px 12px rgba(11, 191, 135, 0.4) !important; transform: translateY(-2px) !important; } /* =================================================================== EXPORT BUTTON - Purple Accent =================================================================== */ a[href*="export"], .export-button, input[name="_export"] { background: linear-gradient(135deg, var(--igny8-purple) 0%, var(--igny8-purple-dark) 100%) !important; color: white !important; padding: 10px 24px !important; border-radius: 8px !important; font-weight: 600 !important; font-size: 13px !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; box-shadow: 0 2px 6px rgba(93, 74, 227, 0.3) !important; transition: all 0.2s ease !important; border: none !important; cursor: pointer !important; } a[href*="export"]:hover, .export-button:hover, input[name="_export"]:hover { background: linear-gradient(135deg, var(--igny8-purple-dark) 0%, #2a1f6b 100%) !important; box-shadow: 0 4px 12px rgba(93, 74, 227, 0.4) !important; transform: translateY(-2px) !important; } /* =================================================================== SEARCH BAR & TOOLBAR - Professional Layout =================================================================== */ #toolbar { padding: 20px 24px !important; background: var(--igny8-panel) !important; border: 1px solid var(--igny8-stroke) !important; border-radius: 12px !important; margin-bottom: 24px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important; } #toolbar form { display: flex !important; gap: 12px !important; align-items: center !important; } #toolbar input[type="text"], #searchbar { flex: 1 !important; min-width: 320px !important; max-width: 500px !important; padding: 12px 18px !important; border: 1.5px solid var(--igny8-stroke) !important; border-radius: 8px !important; font-size: 14px !important; transition: all 0.2s ease !important; background: var(--igny8-panel) !important; color: var(--igny8-text) !important; } #toolbar input[type="text"]:focus, #searchbar:focus { border-color: var(--igny8-primary) !important; outline: none !important; box-shadow: 0 0 0 4px rgba(6, 147, 227, 0.1) !important; } #toolbar input[type="submit"], #toolbar button[type="submit"] { background: linear-gradient(135deg, var(--igny8-primary) 0%, var(--igny8-primary-dark) 100%) !important; color: white !important; padding: 12px 28px !important; border: none !important; border-radius: 8px !important; font-weight: 600 !important; font-size: 14px !important; cursor: pointer !important; transition: all 0.2s ease !important; box-shadow: 0 2px 6px rgba(6, 147, 227, 0.3) !important; } #toolbar input[type="submit"]:hover, #toolbar button[type="submit"]:hover { background: linear-gradient(135deg, var(--igny8-primary-dark) 0%, #035a8f 100%) !important; box-shadow: 0 4px 12px rgba(6, 147, 227, 0.4) !important; transform: translateY(-2px) !important; } /* =================================================================== ACTIONS BAR - Better Styling =================================================================== */ #changelist-form .actions { padding: 20px 24px !important; background: var(--igny8-panel) !important; border: 1px solid var(--igny8-stroke) !important; border-radius: 12px !important; margin-bottom: 24px !important; display: flex !important; align-items: center !important; gap: 16px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important; } #changelist-form .actions label { font-weight: 600 !important; color: var(--igny8-text) !important; font-size: 14px !important; margin-right: 0 !important; } #changelist-form .actions select { min-width: 240px !important; padding: 12px 18px !important; border: 1.5px solid var(--igny8-stroke) !important; border-radius: 8px !important; font-size: 14px !important; transition: all 0.2s ease !important; background: var(--igny8-panel) !important; color: var(--igny8-text) !important; } #changelist-form .actions select:focus { border-color: var(--igny8-primary) !important; outline: none !important; box-shadow: 0 0 0 4px rgba(6, 147, 227, 0.1) !important; } #changelist-form .actions button, #changelist-form .actions input[type="submit"] { background: linear-gradient(135deg, var(--igny8-primary) 0%, var(--igny8-primary-dark) 100%) !important; color: white !important; padding: 12px 28px !important; border: none !important; border-radius: 8px !important; font-weight: 600 !important; font-size: 14px !important; cursor: pointer !important; transition: all 0.2s ease !important; box-shadow: 0 2px 6px rgba(6, 147, 227, 0.3) !important; } #changelist-form .actions button:hover, #changelist-form .actions input[type="submit"]:hover { background: linear-gradient(135deg, var(--igny8-primary-dark) 0%, #035a8f 100%) !important; box-shadow: 0 4px 12px rgba(6, 147, 227, 0.4) !important; transform: translateY(-2px) !important; } /* =================================================================== FILTERS PANEL - Clear Organization =================================================================== */ #changelist-filter { background: var(--igny8-panel) !important; border: 1px solid var(--igny8-stroke) !important; border-radius: 12px !important; padding: 0 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important; } #changelist-filter h2 { background: linear-gradient(135deg, var(--igny8-navy) 0%, var(--igny8-navy-light) 100%) !important; color: white !important; padding: 18px 24px !important; margin: 0 !important; font-size: 16px !important; font-weight: 600 !important; border-radius: 12px 12px 0 0 !important; display: flex !important; align-items: center !important; gap: 10px !important; } #changelist-filter h2:before { content: "\f0b0" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; } #changelist-filter h3 { background: var(--igny8-surface) !important; color: var(--igny8-text) !important; padding: 14px 24px !important; margin: 0 !important; font-size: 14px !important; font-weight: 600 !important; border-top: 1px solid var(--igny8-stroke) !important; border-bottom: 1px solid var(--igny8-stroke) !important; } #changelist-filter ul { padding: 16px 24px !important; margin: 0 !important; } #changelist-filter li { padding: 0 !important; margin: 0 0 8px 0 !important; list-style: none !important; } #changelist-filter a { color: var(--igny8-text) !important; text-decoration: none !important; display: block !important; padding: 10px 16px !important; border-radius: 6px !important; transition: all 0.2s ease !important; font-size: 14px !important; } #changelist-filter a:hover { background: var(--igny8-surface) !important; color: var(--igny8-primary) !important; } #changelist-filter a.selected { background: linear-gradient(135deg, var(--igny8-primary) 0%, var(--igny8-primary-dark) 100%) !important; color: white !important; font-weight: 600 !important; box-shadow: 0 2px 4px rgba(6, 147, 227, 0.2) !important; } #changelist-filter .quiet { color: var(--igny8-text-dim) !important; font-size: 13px !important; } /* =================================================================== ADD RECORD BUTTON - Clean Professional Style =================================================================== */ .object-tools { margin-bottom: 20px !important; } .object-tools li { margin: 0 !important; } .object-tools a.addlink { background: linear-gradient(135deg, var(--igny8-primary) 0%, var(--igny8-primary-dark) 100%) !important; color: white !important; padding: 12px 24px !important; border-radius: 8px !important; font-weight: 600 !important; font-size: 14px !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; box-shadow: 0 2px 4px rgba(6, 147, 227, 0.3) !important; transition: all 0.2s ease !important; border: none !important; } .object-tools a.addlink:before { content: "+" !important; font-size: 18px !important; font-weight: bold !important; margin-right: 0 !important; background: none !important; border: none !important; width: auto !important; height: auto !important; } .object-tools a.addlink:hover { background: linear-gradient(135deg, var(--igny8-primary-dark) 0%, #035a8f 100%) !important; box-shadow: 0 4px 8px rgba(6, 147, 227, 0.4) !important; transform: translateY(-1px) !important; } /* Remove the background from the + icon */ .object-tools a.addlink:before { background: none !important; } /* =================================================================== SEARCH & ACTION BAR - Better Sizing and Layout =================================================================== */ #toolbar { padding: 16px 20px !important; background: var(--igny8-panel) !important; border: 1px solid var(--igny8-stroke) !important; border-radius: 8px !important; margin-bottom: 20px !important; display: flex !important; gap: 16px !important; align-items: center !important; flex-wrap: wrap !important; } #toolbar form { display: flex !important; gap: 12px !important; align-items: center !important; flex: 1 !important; max-width: 600px !important; } #toolbar input[type="text"] { flex: 1 !important; min-width: 250px !important; padding: 10px 16px !important; border: 1px solid var(--igny8-stroke) !important; border-radius: 6px !important; font-size: 14px !important; transition: all 0.2s ease !important; } #toolbar input[type="text"]:focus { border-color: var(--igny8-primary) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(6, 147, 227, 0.1) !important; } #toolbar input[type="submit"], #toolbar button[type="submit"] { background: linear-gradient(135deg, var(--igny8-primary) 0%, var(--igny8-primary-dark) 100%) !important; color: white !important; padding: 10px 24px !important; border: none !important; border-radius: 6px !important; font-weight: 600 !important; font-size: 14px !important; cursor: pointer !important; transition: all 0.2s ease !important; box-shadow: 0 2px 4px rgba(6, 147, 227, 0.2) !important; } #toolbar input[type="submit"]:hover, #toolbar button[type="submit"]:hover { background: linear-gradient(135deg, var(--igny8-primary-dark) 0%, #035a8f 100%) !important; box-shadow: 0 4px 8px rgba(6, 147, 227, 0.3) !important; transform: translateY(-1px) !important; } /* Action dropdown */ #changelist-form .actions { padding: 16px 20px !important; background: var(--igny8-panel) !important; border: 1px solid var(--igny8-stroke) !important; border-radius: 8px !important; margin-bottom: 20px !important; } #changelist-form .actions select { min-width: 220px !important; padding: 10px 16px !important; border: 1px solid var(--igny8-stroke) !important; border-radius: 6px !important; font-size: 14px !important; margin-right: 12px !important; transition: all 0.2s ease !important; } #changelist-form .actions select:focus { border-color: var(--igny8-primary) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(6, 147, 227, 0.1) !important; } #changelist-form .actions button, #changelist-form .actions input[type="submit"] { background: linear-gradient(135deg, var(--igny8-primary) 0%, var(--igny8-primary-dark) 100%) !important; color: white !important; padding: 10px 24px !important; border: none !important; border-radius: 6px !important; font-weight: 600 !important; font-size: 14px !important; cursor: pointer !important; transition: all 0.2s ease !important; box-shadow: 0 2px 4px rgba(6, 147, 227, 0.2) !important; } #changelist-form .actions button:hover, #changelist-form .actions input[type="submit"]:hover { background: linear-gradient(135deg, var(--igny8-primary-dark) 0%, #035a8f 100%) !important; box-shadow: 0 4px 8px rgba(6, 147, 227, 0.3) !important; transform: translateY(-1px) !important; } /* =================================================================== FILTERS - Clear Labels and Better Organization =================================================================== */ #changelist-filter { background: var(--igny8-panel) !important; border: 1px solid var(--igny8-stroke) !important; border-radius: 8px !important; padding: 0 !important; } #changelist-filter h2 { background: linear-gradient(135deg, var(--igny8-navy) 0%, var(--igny8-navy-light) 100%) !important; color: white !important; padding: 16px 20px !important; margin: 0 !important; font-size: 16px !important; font-weight: 600 !important; border-radius: 8px 8px 0 0 !important; } #changelist-filter h3 { background: var(--igny8-surface) !important; color: var(--igny8-text) !important; padding: 12px 20px !important; margin: 0 !important; font-size: 14px !important; font-weight: 600 !important; border-top: 1px solid var(--igny8-stroke) !important; border-bottom: 1px solid var(--igny8-stroke) !important; } #changelist-filter ul { padding: 12px 20px !important; margin: 0 0 16px 0 !important; } #changelist-filter li { padding: 8px 0 !important; margin: 0 !important; list-style: none !important; } #changelist-filter a { color: var(--igny8-text) !important; text-decoration: none !important; display: block !important; padding: 6px 12px !important; border-radius: 4px !important; transition: all 0.2s ease !important; font-size: 14px !important; } #changelist-filter a:hover { background: var(--igny8-surface) !important; color: var(--igny8-primary) !important; } #changelist-filter a.selected { background: linear-gradient(135deg, var(--igny8-primary) 0%, var(--igny8-primary-dark) 100%) !important; color: white !important; font-weight: 600 !important; } #changelist-filter .quiet { color: var(--igny8-text-dim) !important; font-size: 13px !important; } /* =================================================================== SIDEBAR NAVIGATION - IGNY8 Navy Background for Readability =================================================================== */ #changelist-filter { background: var(--igny8-surface) !important; } #changelist-filter h2 { background: var(--igny8-navy) !important; color: white !important; padding: 10px !important; margin: 0 0 10px 0 !important; border-radius: 4px !important; } #changelist-filter h3 { color: var(--igny8-text) !important; font-weight: bold !important; margin-top: 15px !important; padding: 8px 10px !important; background: var(--igny8-surface) !important; border-left: 3px solid var(--igny8-primary) !important; } #changelist-filter li { padding: 5px 10px !important; } #changelist-filter li.selected { background: rgba(6, 147, 227, 0.1) !important; border-left: 3px solid var(--igny8-primary) !important; } /* Module headers - Navy instead of bright blue */ .module h2, .inline-group h2 { background: var(--igny8-navy) !important; color: white !important; padding: 10px !important; border-radius: 4px 4px 0 0 !important; } /* Table headers - White with blue text for readability */ .module caption, .module th, thead th { background: var(--igny8-surface) !important; color: var(--igny8-primary) !important; font-weight: 600 !important; border-bottom: 2px solid var(--igny8-primary) !important; } #result_list thead th { background: var(--igny8-surface) !important; color: var(--igny8-primary) !important; padding: 12px 10px !important; border-bottom: 2px solid var(--igny8-primary) !important; } /* Table header links */ #result_list thead th a:link, #result_list thead th a:visited { color: var(--igny8-primary) !important; font-weight: 600 !important; } /* =================================================================== BUTTONS - IGNY8 Primary Blue =================================================================== */ .button, input[type=submit], input[type=button], .submit-row input, button, .btn { background: var(--igny8-primary) !important; color: white !important; border: none !important; padding: 10px 15px !important; border-radius: 4px !important; cursor: pointer !important; font-weight: 500 !important; } .button:hover, input[type=submit]:hover, input[type=button]:hover, button:hover, .btn:hover { background: var(--igny8-primary-dark) !important; color: white !important; } .button:active, .button:focus { background: var(--igny8-primary-dark) !important; } /* Default action button */ .default, input[type=submit].default { background: var(--igny8-primary) !important; border: 2px solid var(--igny8-primary-dark) !important; } /* Status badges */ .status-active { color: var(--igny8-success) !important; font-weight: bold; } .status-inactive { color: var(--igny8-danger) !important; } .status-pending { color: var(--igny8-warning) !important; font-weight: bold; } .status-succeeded, .status-completed { color: var(--igny8-success) !important; } .status-failed, .status-error { color: var(--igny8-danger) !important; } /* Credit indicators */ .credits-low { color: var(--igny8-danger) !important; font-weight: bold; } .credits-medium { color: var(--igny8-warning) !important; } .credits-high { color: var(--igny8-success) !important; } /* Quick action buttons */ .admin-action-button { padding: 5px 15px; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; margin: 2px; background-color: var(--igny8-primary); color: white; border: none; } .admin-action-button:hover { background-color: var(--igny8-primary-dark); color: white; text-decoration: none; } /* List view enhancements */ #content-main table tr:hover { background-color: var(--igny8-surface) !important; } /* Improve sidebar menu appearance */ #content-related h3 { background: var(--igny8-primary); color: white; padding: 10px; border-radius: 4px 4px 0 0; } /* Better form field spacing */ .form-row { padding: 10px; } /* Highlight required fields */ .required label:after { content: " *"; color: var(--igny8-danger); } /* Success messages */ .success, .messagelist .success { background-color: rgba(11, 191, 135, 0.1) !important; border-color: var(--igny8-success) !important; color: var(--igny8-success-dark) !important; } /* Warning messages */ .warning, .messagelist .warning { background-color: rgba(255, 122, 0, 0.1) !important; border-color: var(--igny8-warning) !important; color: var(--igny8-warning-dark) !important; } /* Error messages */ .error, .messagelist .error { background-color: rgba(239, 68, 68, 0.1) !important; border-color: var(--igny8-danger) !important; color: var(--igny8-danger-dark) !important; } /* Improve table readability */ #result_list tbody tr:nth-child(odd) { background-color: var(--igny8-surface); } #result_list tbody tr:nth-child(even) { background-color: var(--igny8-panel); } /* Better button styling */ .button, input[type=submit], input[type=button], .submit-row input { background: var(--igny8-primary) !important; color: white !important; border: none !important; padding: 10px 15px !important; border-radius: 4px !important; cursor: pointer !important; } .button:hover, input[type=submit]:hover, input[type=button]:hover { background: var(--igny8-primary-dark) !important; } /* Delete button styling */ .deletelink, .deletelink-box a, a.deletelink:link, a.deletelink:visited { background: var(--igny8-danger) !important; color: white !important; } .deletelink:hover, .deletelink-box a:hover { background: var(--igny8-danger-dark) !important; } /* =================================================================== SIDEBAR MODULE "ADD" LINKS - Icon Only with Theme Colors =================================================================== */ .module .addlink, .module a.addlink, #content-main .module .addlink { color: var(--igny8-text) !important; text-decoration: none !important; font-size: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: all 0.2s ease !important; } .module .addlink:before, .module a.addlink:before { content: "\f067" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; font-size: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; border-radius: 6px !important; background: linear-gradient(135deg, var(--igny8-success) 0%, var(--igny8-success-dark) 100%) !important; color: white !important; margin: 0 !important; transition: all 0.2s ease !important; box-shadow: 0 2px 4px rgba(11, 191, 135, 0.2) !important; } .module .addlink:hover:before, .module a.addlink:hover:before { background: linear-gradient(135deg, var(--igny8-success-dark) 0%, #067354 100%) !important; box-shadow: 0 4px 8px rgba(11, 191, 135, 0.3) !important; transform: translateY(-1px) scale(1.05) !important; } /* Module navigation styling */ .module { margin-bottom: 20px !important; background: var(--igny8-panel) !important; border: 1px solid var(--igny8-stroke) !important; border-radius: 8px !important; overflow: hidden !important; } .module h2 { background: linear-gradient(135deg, var(--igny8-navy) 0%, var(--igny8-navy-light) 100%) !important; color: white !important; padding: 14px 16px !important; font-size: 14px !important; font-weight: 600 !important; margin: 0 !important; display: flex !important; align-items: center !important; gap: 10px !important; } .module table { width: 100% !important; } .module tr { border-bottom: 1px solid var(--igny8-stroke) !important; } .module tr:last-child { border-bottom: none !important; } .module th, .module td { padding: 12px 16px !important; text-align: left !important; } .module th { background: var(--igny8-surface) !important; color: var(--igny8-text) !important; font-weight: 600 !important; font-size: 13px !important; } .module a { color: var(--igny8-primary) !important; text-decoration: none !important; transition: color 0.2s ease !important; } .module a:hover { color: var(--igny8-primary-dark) !important; } /* =================================================================== ALL BUTTONS - Consistent Theme Colors =================================================================== */ .button, input[type=submit], input[type=button], .submit-row input, button:not(.close) { background: linear-gradient(135deg, var(--igny8-primary) 0%, var(--igny8-primary-dark) 100%) !important; color: white !important; border: none !important; padding: 12px 24px !important; border-radius: 8px !important; cursor: pointer !important; font-weight: 600 !important; font-size: 14px !important; transition: all 0.2s ease !important; box-shadow: 0 2px 6px rgba(6, 147, 227, 0.3) !important; } .button:hover, input[type=submit]:hover, input[type=button]:hover, button:not(.close):hover { background: linear-gradient(135deg, var(--igny8-primary-dark) 0%, #035a8f 100%) !important; box-shadow: 0 4px 12px rgba(6, 147, 227, 0.4) !important; transform: translateY(-2px) !important; } /* Save buttons - Success color */ input[name="_save"], input[name="_continue"], .submit-row input[type="submit"]:first-child { background: linear-gradient(135deg, var(--igny8-success) 0%, var(--igny8-success-dark) 100%) !important; box-shadow: 0 2px 6px rgba(11, 191, 135, 0.3) !important; } input[name="_save"]:hover, input[name="_continue"]:hover { background: linear-gradient(135deg, var(--igny8-success-dark) 0%, #067354 100%) !important; box-shadow: 0 4px 12px rgba(11, 191, 135, 0.4) !important; } /* Delete buttons - Danger color */ .deletelink, .deletelink-box a, a.deletelink:link, a.deletelink:visited, input[name="_delete"], .delete-confirmation input[type="submit"] { background: linear-gradient(135deg, var(--igny8-danger) 0%, var(--igny8-danger-dark) 100%) !important; color: white !important; box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3) !important; } .deletelink:hover, .deletelink-box a:hover, input[name="_delete"]:hover { background: linear-gradient(135deg, var(--igny8-danger-dark) 0%, #b82222 100%) !important; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important; } /* =================================================================== TABLE IMPROVEMENTS =================================================================== */ #result_list { border: 1px solid var(--igny8-stroke) !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important; } #result_list thead th { background: linear-gradient(135deg, var(--igny8-surface) 0%, #f1f5f9 100%) !important; color: var(--igny8-text) !important; padding: 16px 12px !important; font-weight: 600 !important; font-size: 13px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; border-bottom: 2px solid var(--igny8-stroke-dark) !important; } #result_list thead th a { color: var(--igny8-text) !important; text-decoration: none !important; } #result_list tbody tr { transition: background-color 0.2s ease !important; } #result_list tbody tr:nth-child(odd) { background-color: white !important; } #result_list tbody tr:nth-child(even) { background-color: var(--igny8-surface) !important; } #result_list tbody tr:hover { background-color: rgba(6, 147, 227, 0.05) !important; } #result_list td { padding: 14px 12px !important; color: var(--igny8-text) !important; font-size: 14px !important; border-bottom: 1px solid var(--igny8-stroke) !important; } background: var(--igny8-danger-dark) !important; } /* =================================================================== LINKS - IGNY8 Primary Blue =================================================================== */ a, a:link, a:visited { color: var(--igny8-primary) !important; } a:hover, a:focus { color: var(--igny8-primary-dark) !important; } .breadcrumbs a { color: white !important; } /* =================================================================== ACTION BAR - IGNY8 Surface Color =================================================================== */ .actions { background: var(--igny8-surface) !important; border-radius: 4px !important; padding: 10px !important; } .actions select { border: 1px solid var(--igny8-stroke) !important; padding: 5px !important; border-radius: 3px !important; } .actions .button, .actions button { background: var(--igny8-primary) !important; } /* =================================================================== CHECKBOXES & ICONS - IGNY8 Colors =================================================================== */ input[type="checkbox"]:checked { accent-color: var(--igny8-primary) !important; } .vCheckboxLabel { display: inline !important; } /* =================================================================== SIDEBAR SECTIONS - Better Contrast =================================================================== */ #content-related .module { background: var(--igny8-panel) !important; border: 1px solid var(--igny8-stroke) !important; } #content-related h3 { background: var(--igny8-navy) !important; color: white !important; padding: 10px !important; border-radius: 4px 4px 0 0 !important; margin: 0 !important; } /* =================================================================== FIELDSET LEGENDS - Navy Background =================================================================== */ fieldset.module h2, .collapse h2 { background: var(--igny8-navy) !important; color: white !important; padding: 10px !important; border-radius: 4px 4px 0 0 !important; } /* =================================================================== BREADCRUMBS - Better Visibility =================================================================== */ .breadcrumbs { background: var(--igny8-navy) !important; color: white !important; padding: 10px 15px !important; } .breadcrumbs a { color: white !important; opacity: 0.9; } .breadcrumbs a:hover { opacity: 1; text-decoration: underline; } /* Improve filter sidebar */ #changelist-filter h2 { background: var(--igny8-primary); color: white; padding: 8px 10px; margin-bottom: 0; } #changelist-filter h3 { font-weight: bold; margin-top: 15px; padding-bottom: 5px; border-bottom: 1px solid var(--igny8-stroke); } /* Better pagination */ .paginator { font-size: 14px; padding: 10px; background: var(--igny8-surface); border-radius: 4px; } .paginator a { padding: 5px 10px; margin: 0 2px; background: var(--igny8-panel); border: 1px solid var(--igny8-stroke); border-radius: 3px; } .paginator a:hover { background: var(--igny8-primary); color: white; text-decoration: none; } /* Responsive improvements */ @media (max-width: 768px) { #content-main { padding: 10px; } .module table { font-size: 12px; } } /* Admin header improvements */ #header { background: linear-gradient(135deg, var(--igny8-primary) 0%, var(--igny8-primary-dark) 100%); color: white; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } #header a:link, #header a:visited { color: white; } #branding h1 { color: white; } /* Fieldset legend styling */ fieldset.module h2 { background: var(--igny8-primary); color: white; padding: 8px 10px; border-radius: 4px 4px 0 0; } /* Inline forms */ .inline-group { border: 1px solid var(--igny8-stroke); border-radius: 4px; margin-bottom: 20px; } .inline-group .tabular { overflow-x: auto; } /* Help text styling */ .help { font-size: 12px; color: var(--igny8-text-dim); display: block; margin-top: 5px; } /* Dashboard widget styling */ .dashboard-card { background: var(--igny8-panel); border: 1px solid var(--igny8-stroke); border-radius: 8px; padding: 20px; margin: 10px 0; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .dashboard-card h2 { margin-top: 0; border-bottom: 2px solid var(--igny8-primary); padding-bottom: 10px; } .metric { display: inline-block; margin: 10px 20px 10px 0; } .metric-value { font-size: 32px; font-weight: bold; color: var(--igny8-primary); display: block; } .metric-label { font-size: 12px; color: var(--igny8-text-dim); display: block; margin-top: 5px; } /* Alert styling */ .alert { padding: 15px; margin: 10px 0; border-radius: 4px; border-left: 4px solid; } .alert-error { background-color: rgba(239, 68, 68, 0.1); border-left-color: var(--igny8-danger); color: var(--igny8-danger-dark); } .alert-warning { background-color: rgba(255, 122, 0, 0.1); border-left-color: var(--igny8-warning); color: var(--igny8-warning-dark); } .alert-info { background-color: rgba(6, 147, 227, 0.1); border-left-color: var(--igny8-primary); color: var(--igny8-primary-dark); } .alert-success { background-color: rgba(11, 191, 135, 0.1); border-left-color: var(--igny8-success); color: var(--igny8-success-dark); } /* =================================================================== SIDEBAR MODULE ADD LINKS - Clean and Professional =================================================================== */ .module .addlink, .module a.addlink, #content-main .module .addlink { color: var(--igny8-primary) !important; text-decoration: none !important; font-size: 13px !important; font-weight: 500 !important; padding: 6px 10px !important; display: inline-block !important; border-radius: 4px !important; transition: all 0.2s ease !important; } .module .addlink:before, .module a.addlink:before { content: "+" !important; display: inline-block !important; width: 18px !important; height: 18px !important; line-height: 18px !important; text-align: center !important; border-radius: 3px !important; background: var(--igny8-primary) !important; color: white !important; margin-right: 6px !important; font-size: 14px !important; font-weight: bold !important; } .module .addlink:hover, .module a.addlink:hover { background: rgba(6, 147, 227, 0.1) !important; color: var(--igny8-primary-dark) !important; } .module .addlink:hover:before, .module a.addlink:hover:before { background: var(--igny8-primary-dark) !important; }