-
⚡ Quick Actions
+
Quick Actions
diff --git a/backend/staticfiles/admin/css/igny8_admin.css b/backend/staticfiles/admin/css/igny8_admin.css
index 00b55e29..59cab3d6 100644
--- a/backend/staticfiles/admin/css/igny8_admin.css
+++ b/backend/staticfiles/admin/css/igny8_admin.css
@@ -1,1303 +1,1471 @@
/* ===================================================================
- IGNY8 CUSTOM ADMIN STYLES - COMPLETE REDESIGN
+ IGNY8 DJANGO ADMIN - MODERN UI DESIGN
===================================================================
- Using exact IGNY8 brand colors from frontend design system
+ Built from scratch using IGNY8 frontend design system
+ Design tokens from: frontend/src/styles/tokens.css
+
+ Author: IGNY8 Design System
+ Last Updated: 2025-12-14
=================================================================== */
-/* IGNY8 Brand Color Variables - Matching Frontend App */
+/* ===================================================================
+ DESIGN TOKENS - 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 */
+ /* Primary Brand Colors */
+ --color-primary: #0693e3;
+ --color-primary-dark: #0472b8;
+
+ /* Success */
+ --color-success: #0bbf87;
+ --color-success-dark: #08966b;
+
+ /* Warning */
+ --color-warning: #ff7a00;
+ --color-warning-dark: #cc5f00;
+
+ /* Danger */
+ --color-danger: #ef4444;
+ --color-danger-dark: #d13333;
+
+ /* Purple */
+ --color-purple: #5d4ae3;
+ --color-purple-dark: #3a2f94;
+
+ /* Backgrounds */
+ --color-navy: #0d1b2a;
+ --color-navy-light: #142b3f;
+ --color-surface: #f8fafc;
+ --color-panel: #ffffff;
+ --color-panel-alt: #f1f5f9;
+
+ /* Text */
+ --color-text: #555a68;
+ --color-text-dim: #64748b;
+ --color-text-light: #e5eaf0;
+ --color-stroke: #e2e8f0;
+
+ /* Border Radius */
+ --radius-base: 6px;
+
+ /* Shadows */
+ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+
+ /* Transitions */
+ --transition-base: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* ===================================================================
- GLOBAL RESETS
+ GLOBAL RESET & BASE
=================================================================== */
+* {
+ box-sizing: border-box;
+}
+
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;
+ margin: 0;
+ padding: 0;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.6;
+ color: var(--color-text);
+ background: var(--color-surface);
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+ color: var(--color-primary);
+ text-decoration: none;
+ transition: color var(--transition-base);
+}
+
+a:hover {
+ color: var(--color-primary-dark);
}
/* ===================================================================
- HEADER - Clean Professional Design
+ HEADER - Primary Navigation
=================================================================== */
#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;
+ background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
+ box-shadow: var(--shadow-md);
+ position: sticky;
+ top: 0;
+ z-index: 100;
}
#branding {
- padding: 16px 30px !important;
+ padding: 14px 24px;
+ display: flex;
+ align-items: center;
}
#branding h1 {
- margin: 0 !important;
- font-size: 20px !important;
- font-weight: 600 !important;
+ margin: 0;
+ font-size: 18px;
+ font-weight: 600;
+ letter-spacing: -0.01em;
}
-#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;
+#branding h1 a {
+ color: white;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ transition: opacity var(--transition-base);
}
-#header a:link,
-#header a:visited {
- color: white !important;
+#branding h1 a:hover {
+ opacity: 0.9;
+}
+
+#branding h1 i {
+ font-size: 20px;
+}
+
+/* User Tools */
+#user-tools {
+ position: absolute;
+ top: 0;
+ right: 0;
+ padding: 14px 24px;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 13px;
+ color: white;
+}
+
+#user-tools strong {
+ font-weight: 600;
+ margin-right: 4px;
+}
+
+#user-tools a {
+ color: white;
+ padding: 8px 14px;
+ border-radius: var(--radius-base);
+ background: rgba(255, 255, 255, 0.12);
+ border: 1px solid rgba(255, 255, 255, 0.18);
+ transition: all var(--transition-base);
+ font-weight: 500;
+ white-space: nowrap;
+}
+
+#user-tools a:hover {
+ background: rgba(255, 255, 255, 0.22);
+ transform: translateY(-1px);
+ box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
+}
+
+/* Dashboard Link */
+.dashboard-link {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ padding: 8px 14px;
+ margin-right: 8px;
+ background: rgba(255, 255, 255, 0.15);
+ color: white;
+ border-radius: var(--radius-base);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ font-weight: 500;
+ transition: all var(--transition-base);
+}
+
+.dashboard-link:hover {
+ background: rgba(255, 255, 255, 0.25);
+ transform: translateY(-1px);
+ box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
+}
+
+.dashboard-link i {
+ font-size: 14px;
}
/* ===================================================================
- ADD RECORD BUTTON - Modern Accent Color
+ LAYOUT - Content Structure
=================================================================== */
-.object-tools {
- margin-bottom: 24px !important;
- float: right !important;
+#content {
+ padding: 24px;
+ max-width: 1600px;
+ margin: 0 auto;
}
-.object-tools li {
- margin: 0 !important;
- list-style: none !important;
+#content-main {
+ background: var(--color-panel);
+ padding: 32px;
+ border-radius: 8px;
+ box-shadow: var(--shadow-sm);
}
-.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;
+.colM,
+.colMS {
+ margin-right: 260px;
}
-.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;
+#changelist {
+ background: var(--color-panel);
+ padding: 32px;
+ border-radius: 8px;
+ box-shadow: var(--shadow-sm);
}
/* ===================================================================
- EXPORT BUTTON - Purple Accent
+ SIDEBAR - Module Navigation
=================================================================== */
-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;
+#content-related {
+ float: right;
+ width: 240px;
+ position: relative;
}
-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;
+.module {
+ margin-bottom: 24px;
+ background: var(--color-panel);
+ border-radius: 8px;
+ box-shadow: var(--shadow-sm);
+ overflow: hidden;
}
-/* ===================================================================
- 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;
+.module h2 {
+ background: white;
+ color: var(--color-text);
+ padding: 16px 20px 12px;
+ margin: 0;
+ font-size: 11px;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ border-bottom: 2px solid var(--color-primary);
}
-#toolbar form {
- display: flex !important;
- gap: 12px !important;
- align-items: center !important;
+.module h2 i {
+ color: var(--color-primary);
+ font-size: 12px;
}
-#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;
+.module table {
+ width: 100%;
+ background: white;
}
-#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;
+.module tr {
+ border-bottom: 1px solid var(--color-panel-alt);
+ transition: background-color var(--transition-base);
}
-#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;
+.module tr:last-child {
+ border-bottom: none;
}
-#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;
+.module tr:hover {
+ background-color: rgba(6, 147, 227, 0.03);
}
-/* ===================================================================
- 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;
+.module td {
+ padding: 12px 20px;
}
-#changelist-form .actions label {
- font-weight: 600 !important;
- color: var(--igny8-text) !important;
- font-size: 14px !important;
- margin-right: 0 !important;
+.module a {
+ color: var(--color-text);
+ font-size: 13px;
+ font-weight: 500;
+ transition: color var(--transition-base);
}
-#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;
+.module a:hover {
+ color: var(--color-primary);
}
-#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
- =================================================================== */
+/* Sidebar Add Links - Icon Only */
.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 a.addlink {
+ display: inline-flex !important;
+ align-items: center !important;
+ justify-content: center !important;
+ font-size: 0 !important;
+ padding: 0 !important;
+ margin-left: auto !important;
+ float: right !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;
+ content: "\f067";
+ font-family: "Font Awesome 6 Free";
+ font-weight: 900;
+ font-size: 11px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 22px;
+ height: 22px;
+ border-radius: 4px;
+ background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
+ color: white;
+ transition: all var(--transition-base);
+ box-shadow: 0 2px 4px rgba(11, 191, 135, 0.2);
}
.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;
+ background: linear-gradient(135deg, var(--color-success-dark) 0%, #067354 100%);
+ transform: translateY(-1px) scale(1.05);
+ box-shadow: 0 4px 8px rgba(11, 191, 135, 0.3);
}
/* ===================================================================
- ALL BUTTONS - Consistent Theme Colors
+ BUTTONS - Modern Style System
=================================================================== */
-.button,
-input[type=submit],
-input[type=button],
+
+/* Base Button */
+.button,
+button[type="submit"],
+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;
+a.button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ height: 40px;
+ padding: 0 20px;
+ font-size: 14px;
+ font-weight: 600;
+ border-radius: var(--radius-base);
+ border: none;
+ cursor: pointer;
+ transition: all var(--transition-base);
+ white-space: nowrap;
+ background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
+ color: white;
+ box-shadow: 0 2px 4px rgba(6, 147, 227, 0.2);
}
-.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;
+.button:hover,
+button[type="submit"]:hover,
+input[type="submit"]:hover,
+input[type="button"]:hover {
+ background: linear-gradient(135deg, var(--color-primary-dark) 0%, #035a8f 100%);
+ transform: translateY(-1px);
+ box-shadow: 0 4px 12px rgba(6, 147, 227, 0.3);
}
-/* Save buttons - Success color */
+.button:active {
+ transform: translateY(0);
+}
+
+.button:disabled,
+button[type="submit"]:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ transform: none;
+}
+
+/* Success Buttons */
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="_addanother"],
+.button.success {
+ background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
+ box-shadow: 0 2px 4px rgba(11, 191, 135, 0.2);
}
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;
+input[name="_continue"]:hover,
+input[name="_addanother"]:hover {
+ background: linear-gradient(135deg, var(--color-success-dark) 0%, #067354 100%);
+ box-shadow: 0 4px 12px rgba(11, 191, 135, 0.3);
}
-/* Delete buttons - Danger color */
+/* Delete Buttons */
.deletelink,
.deletelink-box a,
-a.deletelink:link,
-a.deletelink:visited,
+a.deletelink,
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;
+.button.danger {
+ background: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-dark) 100%);
+ color: white;
+ box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}
.deletelink:hover,
.deletelink-box a:hover,
+a.deletelink: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;
+ background: linear-gradient(135deg, var(--color-danger-dark) 0%, #b82222 100%);
+ box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+}
+
+/* Object Tools - Add/Import Buttons */
+.object-tools {
+ float: right;
+ margin: 0 0 20px;
+ padding: 0;
+ list-style: none;
+ display: flex;
+ gap: 12px;
+}
+
+.object-tools li {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+.object-tools a {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ height: 40px;
+ padding: 0 20px;
+ font-size: 14px;
+ font-weight: 600;
+ border-radius: var(--radius-base);
+ background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
+ color: white;
+ transition: all var(--transition-base);
+ box-shadow: 0 2px 4px rgba(11, 191, 135, 0.2);
+}
+
+.object-tools a:hover {
+ background: linear-gradient(135deg, var(--color-success-dark) 0%, #067354 100%);
+ transform: translateY(-1px);
+ box-shadow: 0 4px 12px rgba(11, 191, 135, 0.3);
+}
+
+.object-tools a:before {
+ content: "\f067";
+ font-family: "Font Awesome 6 Free";
+ font-weight: 900;
+ font-size: 13px;
+}
+
+/* Export Button */
+a[href*="export"],
+.button.export {
+ background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-purple-dark) 100%);
+ box-shadow: 0 2px 4px rgba(93, 74, 227, 0.2);
+}
+
+a[href*="export"]:hover {
+ background: linear-gradient(135deg, var(--color-purple-dark) 0%, #2b1f6b 100%);
+ box-shadow: 0 4px 12px rgba(93, 74, 227, 0.3);
+}
+
+a[href*="export"]:before {
+ content: "\f56d";
+ font-family: "Font Awesome 6 Free";
+ font-weight: 900;
}
/* ===================================================================
- TABLE IMPROVEMENTS
+ SEARCH & TOOLBAR
=================================================================== */
-#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;
+#toolbar {
+ padding: 20px;
+ background: var(--color-panel);
+ border: 1px solid var(--color-stroke);
+ border-radius: 8px;
+ margin-bottom: 20px;
}
-#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;
+#toolbar form {
+ display: flex;
+ gap: 12px;
+ align-items: center;
}
-#result_list thead th a {
- color: var(--igny8-text) !important;
- text-decoration: none !important;
+#toolbar input[type="text"],
+#searchbar {
+ flex: 1;
+ min-width: 300px;
+ max-width: 500px;
+ height: 40px;
+ padding: 0 16px;
+ border: 1px solid var(--color-stroke);
+ border-radius: var(--radius-base);
+ font-size: 14px;
+ color: var(--color-text);
+ background: white;
+ transition: all var(--transition-base);
}
-#result_list tbody tr {
- transition: background-color 0.2s ease !important;
+#toolbar input[type="text"]:focus,
+#searchbar:focus {
+ outline: none;
+ border-color: var(--color-primary);
+ box-shadow: 0 0 0 3px rgba(6, 147, 227, 0.1);
}
-#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;
+#toolbar button[type="submit"],
+#toolbar input[type="submit"] {
+ height: 40px;
+ padding: 0 24px;
}
/* ===================================================================
- 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 BAR
=================================================================== */
.actions {
- background: var(--igny8-surface) !important;
- border-radius: 4px !important;
- padding: 10px !important;
+ padding: 20px;
+ background: var(--color-panel);
+ border: 1px solid var(--color-stroke);
+ border-radius: 8px;
+ margin-bottom: 20px;
+ display: flex;
+ align-items: center;
+ gap: 16px;
+}
+
+.actions label {
+ font-weight: 600;
+ color: var(--color-text);
+ font-size: 14px;
+ margin: 0;
}
.actions select {
- border: 1px solid var(--igny8-stroke) !important;
- padding: 5px !important;
- border-radius: 3px !important;
+ min-width: 240px;
+ height: 40px;
+ padding: 0 16px;
+ border: 1px solid var(--color-stroke);
+ border-radius: var(--radius-base);
+ font-size: 14px;
+ color: var(--color-text);
+ background: white;
+ cursor: pointer;
+ transition: all var(--transition-base);
}
-.actions .button, .actions button {
- background: var(--igny8-primary) !important;
+.actions select:focus {
+ outline: none;
+ border-color: var(--color-primary);
+ box-shadow: 0 0 0 3px rgba(6, 147, 227, 0.1);
+}
+
+.actions button,
+.actions input[type="submit"] {
+ height: 40px;
+ padding: 0 24px;
+}
+
+/* Action Checkbox */
+.action-checkbox {
+ width: 18px;
+ height: 18px;
+ border-radius: 4px;
+ border: 1.5px solid var(--color-stroke);
+ cursor: pointer;
+ transition: all var(--transition-base);
+}
+
+.action-checkbox:checked {
+ background: var(--color-primary);
+ border-color: var(--color-primary);
}
/* ===================================================================
- CHECKBOXES & ICONS - IGNY8 Colors
+ FILTERS PANEL
=================================================================== */
-input[type="checkbox"]:checked {
- accent-color: var(--igny8-primary) !important;
+#changelist-filter {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 240px;
+ background: var(--color-panel);
+ border-radius: 8px;
+ box-shadow: var(--shadow-sm);
+ padding: 20px;
}
-.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;
+ font-size: 11px;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ color: var(--color-text);
+ padding-bottom: 12px;
+ margin: 0 0 16px;
+ border-bottom: 2px solid var(--color-primary);
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+#changelist-filter h2:before {
+ content: "\f0b0";
+ font-family: "Font Awesome 6 Free";
+ font-weight: 900;
+ color: var(--color-primary);
}
#changelist-filter h3 {
- font-weight: bold;
- margin-top: 15px;
- padding-bottom: 5px;
- border-bottom: 1px solid var(--igny8-stroke);
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--color-text);
+ margin: 20px 0 8px;
}
-/* Better pagination */
-.paginator {
- font-size: 14px;
- padding: 10px;
- background: var(--igny8-surface);
- border-radius: 4px;
+#changelist-filter ul {
+ list-style: none;
+ padding: 0;
+ margin: 0 0 16px;
}
-.paginator a {
- padding: 5px 10px;
- margin: 0 2px;
- background: var(--igny8-panel);
- border: 1px solid var(--igny8-stroke);
- border-radius: 3px;
+#changelist-filter li {
+ padding: 8px 0;
+ border-bottom: 1px solid var(--color-panel-alt);
}
-.paginator a:hover {
- background: var(--igny8-primary);
- color: white;
- text-decoration: none;
+#changelist-filter li:last-child {
+ border-bottom: none;
}
-/* Responsive improvements */
-@media (max-width: 768px) {
- #content-main {
- padding: 10px;
- }
-
- .module table {
- font-size: 12px;
- }
+#changelist-filter a {
+ color: var(--color-text);
+ font-size: 13px;
+ transition: color var(--transition-base);
}
-/* 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);
+#changelist-filter a:hover {
+ color: var(--color-primary);
}
-#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);
+#changelist-filter a.selected {
+ color: var(--color-primary);
+ font-weight: 600;
}
/* ===================================================================
- SIDEBAR MODULE ADD LINKS - Clean and Professional
+ TABLES - Modern Data Display
=================================================================== */
-.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;
+.results {
+ overflow-x: auto;
+ margin-top: 20px;
}
-.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;
+#result_list {
+ width: 100%;
+ border-collapse: separate;
+ border-spacing: 0;
}
-.module .addlink:hover,
-.module a.addlink:hover {
- background: rgba(6, 147, 227, 0.1) !important;
- color: var(--igny8-primary-dark) !important;
+#result_list thead th {
+ background: white;
+ color: var(--color-text);
+ padding: 16px;
+ font-size: 11px;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.8px;
+ text-align: left;
+ border-bottom: 2px solid var(--color-stroke);
+ position: sticky;
+ top: 0;
+ z-index: 10;
}
-.module .addlink:hover:before,
-.module a.addlink:hover:before {
- background: var(--igny8-primary-dark) !important;
+#result_list thead th a {
+ color: var(--color-text);
+ font-weight: 700;
}
+
+#result_list thead th.sorted {
+ color: var(--color-primary);
+}
+
+#result_list thead th.sorted a {
+ color: var(--color-primary);
+}
+
+/* Table Sorting Icons */
+#result_list thead th.sorted.ascending a:after {
+ content: "\f0d8";
+ font-family: "Font Awesome 6 Free";
+ font-weight: 900;
+ margin-left: 6px;
+ opacity: 0.6;
+}
+
+#result_list thead th.sorted.descending a:after {
+ content: "\f0d7";
+ font-family: "Font Awesome 6 Free";
+ font-weight: 900;
+ margin-left: 6px;
+ opacity: 0.6;
+}
+
+/* Table Body */
+#result_list tbody tr {
+ transition: background-color var(--transition-base);
+}
+
+#result_list tbody tr:nth-child(odd) {
+ background: white;
+}
+
+#result_list tbody tr:nth-child(even) {
+ background: #fafbfc;
+}
+
+#result_list tbody tr:hover {
+ background: rgba(6, 147, 227, 0.04);
+}
+
+#result_list td {
+ padding: 16px;
+ color: var(--color-text);
+ font-size: 14px;
+ border-bottom: 1px solid var(--color-panel-alt);
+}
+
+#result_list td a {
+ color: var(--color-primary);
+ font-weight: 500;
+}
+
+/* Action Checkbox Column */
+#result_list td.action-checkbox {
+ width: 40px;
+ text-align: center;
+}
+
+/* ===================================================================
+ FORMS - Clean Input Design
+ =================================================================== */
+.form-row {
+ margin-bottom: 24px;
+}
+
+.form-row label {
+ display: block;
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--color-text);
+ margin-bottom: 8px;
+}
+
+.form-row input[type="text"],
+.form-row input[type="email"],
+.form-row input[type="password"],
+.form-row input[type="number"],
+.form-row input[type="url"],
+.form-row textarea,
+.form-row select {
+ width: 100%;
+ height: 40px;
+ padding: 0 16px;
+ border: 1px solid var(--color-stroke);
+ border-radius: var(--radius-base);
+ font-size: 14px;
+ color: var(--color-text);
+ background: white;
+ transition: all var(--transition-base);
+}
+
+.form-row textarea {
+ height: auto;
+ min-height: 100px;
+ padding: 12px 16px;
+ resize: vertical;
+}
+
+.form-row input:focus,
+.form-row textarea:focus,
+.form-row select:focus {
+ outline: none;
+ border-color: var(--color-primary);
+ box-shadow: 0 0 0 3px rgba(6, 147, 227, 0.1);
+}
+
+/* Helptext */
+.help,
+.helptext {
+ display: block;
+ margin-top: 6px;
+ font-size: 12px;
+ color: var(--color-text-dim);
+ font-style: italic;
+}
+
+/* Required Fields */
+.required:after {
+ content: " *";
+ color: var(--color-danger);
+ font-weight: 600;
+}
+
+/* Error Messages */
+.errorlist {
+ list-style: none;
+ padding: 12px 16px;
+ margin: 8px 0;
+ background: rgba(239, 68, 68, 0.1);
+ border-left: 3px solid var(--color-danger);
+ border-radius: var(--radius-base);
+ color: var(--color-danger);
+ font-size: 13px;
+}
+
+.errorlist li {
+ margin: 0;
+}
+
+/* Success Messages */
+.success,
+.messagelist .success {
+ padding: 12px 16px;
+ margin: 16px 0;
+ background: rgba(11, 191, 135, 0.1);
+ border-left: 3px solid var(--color-success);
+ border-radius: var(--radius-base);
+ color: var(--color-success-dark);
+ font-size: 14px;
+}
+
+/* Warning Messages */
+.warning,
+.messagelist .warning {
+ padding: 12px 16px;
+ margin: 16px 0;
+ background: rgba(255, 122, 0, 0.1);
+ border-left: 3px solid var(--color-warning);
+ border-radius: var(--radius-base);
+ color: var(--color-warning-dark);
+ font-size: 14px;
+}
+
+/* Error Messages */
+.error,
+.messagelist .error {
+ padding: 12px 16px;
+ margin: 16px 0;
+ background: rgba(239, 68, 68, 0.1);
+ border-left: 3px solid var(--color-danger);
+ border-radius: var(--radius-base);
+ color: var(--color-danger-dark);
+ font-size: 14px;
+}
+
+/* Info Messages */
+.info,
+.messagelist .info {
+ padding: 12px 16px;
+ margin: 16px 0;
+ background: rgba(6, 147, 227, 0.1);
+ border-left: 3px solid var(--color-primary);
+ border-radius: var(--radius-base);
+ color: var(--color-primary-dark);
+ font-size: 14px;
+}
+
+/* ===================================================================
+ SUBMIT ROW - Form Actions
+ =================================================================== */
+.submit-row {
+ padding: 24px 0 0;
+ margin-top: 24px;
+ border-top: 1px solid var(--color-stroke);
+ display: flex;
+ gap: 12px;
+ align-items: center;
+}
+
+/* ===================================================================
+ PAGINATION
+ =================================================================== */
+.paginator {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 20px 0;
+ font-size: 13px;
+ color: var(--color-text);
+}
+
+.paginator a,
+.paginator span {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 36px;
+ height: 36px;
+ padding: 0 8px;
+ border-radius: var(--radius-base);
+ transition: all var(--transition-base);
+}
+
+.paginator a {
+ color: var(--color-text);
+ background: white;
+ border: 1px solid var(--color-stroke);
+}
+
+.paginator a:hover {
+ background: var(--color-panel-alt);
+ border-color: var(--color-primary);
+ color: var(--color-primary);
+}
+
+.paginator .this-page {
+ background: var(--color-primary);
+ color: white;
+ font-weight: 600;
+ border: 1px solid var(--color-primary);
+}
+
+.paginator .disabled {
+ opacity: 0.4;
+ pointer-events: none;
+}
+
+/* ===================================================================
+ BREADCRUMBS
+ =================================================================== */
+.breadcrumbs {
+ padding: 16px 24px;
+ background: white;
+ border-bottom: 1px solid var(--color-stroke);
+ font-size: 13px;
+ color: var(--color-text-dim);
+}
+
+.breadcrumbs a {
+ color: var(--color-primary);
+ font-weight: 500;
+}
+
+.breadcrumbs a:hover {
+ color: var(--color-primary-dark);
+}
+
+/* ===================================================================
+ CALENDAR WIDGET
+ =================================================================== */
+.calendarbox,
+.clockbox {
+ background: white;
+ border: 1px solid var(--color-stroke);
+ border-radius: 8px;
+ box-shadow: var(--shadow-lg);
+ padding: 16px;
+}
+
+.calendar {
+ width: 100%;
+}
+
+.calendar th,
+.calendar td {
+ padding: 8px;
+ text-align: center;
+ border-radius: 4px;
+}
+
+.calendar th {
+ font-weight: 600;
+ color: var(--color-text);
+ font-size: 12px;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.calendar td a {
+ display: block;
+ padding: 8px;
+ border-radius: 4px;
+ color: var(--color-text);
+ transition: all var(--transition-base);
+}
+
+.calendar td a:hover {
+ background: var(--color-panel-alt);
+ color: var(--color-primary);
+}
+
+.calendar td.selected a {
+ background: var(--color-primary);
+ color: white;
+ font-weight: 600;
+}
+
+/* ===================================================================
+ INLINE FORMS
+ =================================================================== */
+.inline-group {
+ margin-bottom: 32px;
+ padding: 20px;
+ background: var(--color-panel-alt);
+ border-radius: 8px;
+}
+
+.inline-group h2 {
+ margin: 0 0 16px;
+ font-size: 16px;
+ font-weight: 600;
+ color: var(--color-text);
+}
+
+.inline-related {
+ margin-bottom: 16px;
+ padding: 16px;
+ background: white;
+ border: 1px solid var(--color-stroke);
+ border-radius: var(--radius-base);
+}
+
+/* ===================================================================
+ DASHBOARD - Custom Styles
+ =================================================================== */
+.dashboard-container {
+ padding: 20px;
+ max-width: 1600px;
+ margin: 0 auto;
+}
+
+.dashboard-header {
+ background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
+ color: white;
+ padding: 32px;
+ border-radius: 8px;
+ margin-bottom: 32px;
+ box-shadow: var(--shadow-md);
+}
+
+.dashboard-header h1 {
+ margin: 0 0 8px;
+ font-size: 28px;
+ font-weight: 600;
+ letter-spacing: -0.02em;
+}
+
+.dashboard-header p {
+ margin: 0;
+ opacity: 0.9;
+ font-size: 14px;
+}
+
+.metrics-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: 20px;
+ margin-bottom: 32px;
+}
+
+.metric-card {
+ background: white;
+ padding: 24px;
+ border-radius: 8px;
+ box-shadow: var(--shadow-sm);
+ border: 1px solid var(--color-stroke);
+}
+
+.metric-card h3 {
+ margin: 0 0 16px;
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--color-text);
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.metric-card h3 i {
+ font-size: 16px;
+}
+
+.metric-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 12px 0;
+ border-bottom: 1px solid var(--color-panel-alt);
+}
+
+.metric-row:last-child {
+ border-bottom: none;
+}
+
+.metric-label {
+ font-size: 13px;
+ color: var(--color-text-dim);
+}
+
+.metric-value {
+ font-size: 16px;
+ font-weight: 600;
+}
+
+.metric-value.success {
+ color: var(--color-success);
+}
+
+.metric-value.warning {
+ color: var(--color-warning);
+}
+
+.metric-value.error {
+ color: var(--color-danger);
+}
+
+.metric-value.info {
+ color: var(--color-primary);
+}
+
+.quick-actions {
+ background: white;
+ padding: 24px;
+ border-radius: 8px;
+ box-shadow: var(--shadow-sm);
+ border: 1px solid var(--color-stroke);
+}
+
+.quick-actions h3 {
+ margin: 0 0 20px;
+ font-size: 16px;
+ font-weight: 600;
+ color: var(--color-text);
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.action-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+ gap: 12px;
+}
+
+.action-button {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+ padding: 20px;
+ background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
+ color: white;
+ border-radius: 8px;
+ font-weight: 500;
+ transition: all var(--transition-base);
+ box-shadow: 0 2px 4px rgba(6, 147, 227, 0.2);
+}
+
+.action-button:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 6px 16px rgba(6, 147, 227, 0.3);
+}
+
+.action-button.action-button-neutral {
+ background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
+ box-shadow: 0 2px 4px rgba(13, 27, 42, 0.3);
+}
+
+.action-button.action-button-neutral:hover {
+ box-shadow: 0 6px 16px rgba(13, 27, 42, 0.4);
+}
+
+.action-button i {
+ font-size: 24px;
+}
+
+.action-button .label {
+ font-size: 13px;
+}
+
+/* Dashboard Header Enhancements */
+.dashboard-header-content h1 {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.dashboard-header-content h1 i {
+ font-size: 32px;
+}
+
+.dashboard-nav a {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+}
+
+/* Alert Section Heading */
+.alerts-section h2 {
+ margin: 0 0 16px;
+ font-size: 18px;
+ font-weight: 600;
+ color: var(--color-text);
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.alerts-section h2 i {
+ color: var(--color-primary);
+ font-size: 20px;
+}
+
+/* No Alerts Section */
+.no-alerts .icon i {
+ color: var(--color-success);
+ font-size: 48px;
+}
+
+.no-alerts h3 {
+ margin: 0 0 8px;
+ color: var(--color-success);
+ font-size: 20px;
+ font-weight: 600;
+}
+
+.no-alerts p {
+ margin: 0;
+ color: var(--color-text-dim);
+ font-size: 14px;
+}
+
+/* Metric Card Icons */
+.metric-card h3 i {
+ color: var(--color-primary);
+ font-size: 18px;
+}
+
+.metric-card:nth-child(1) h3 i {
+ color: var(--color-primary);
+}
+
+.metric-card:nth-child(2) h3 i {
+ color: var(--color-purple);
+}
+
+.metric-card:nth-child(3) h3 i {
+ color: var(--color-success);
+}
+
+.metric-card:nth-child(4) h3 i {
+ color: var(--color-warning);
+}
+
+.metric-card:nth-child(5) h3 i {
+ color: var(--color-primary);
+}
+
+/* Quick Actions Heading */
+.quick-actions h3 i {
+ color: var(--color-warning);
+ font-size: 18px;
+}
+
+/* Alert Cards */
+.alert-card {
+ padding: 16px 20px;
+ border-radius: 8px;
+ margin-bottom: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ box-shadow: var(--shadow-sm);
+}
+
+.alert-card.error {
+ background: rgba(239, 68, 68, 0.1);
+ border-left: 4px solid var(--color-danger);
+}
+
+.alert-card.warning {
+ background: rgba(255, 122, 0, 0.1);
+ border-left: 4px solid var(--color-warning);
+}
+
+.alert-card.info {
+ background: rgba(6, 147, 227, 0.1);
+ border-left: 4px solid var(--color-primary);
+}
+
+.alert-content {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ flex: 1;
+}
+
+.alert-icon {
+ font-size: 24px;
+}
+
+.alert-message {
+ font-size: 14px;
+ font-weight: 500;
+ color: var(--color-text);
+}
+
+.alert-action {
+ padding: 8px 16px;
+ background: white;
+ border: 1px solid var(--color-stroke);
+ border-radius: var(--radius-base);
+ text-decoration: none;
+ color: var(--color-text);
+ font-size: 13px;
+ font-weight: 500;
+ transition: all var(--transition-base);
+}
+
+.alert-action:hover {
+ background: var(--color-panel-alt);
+ border-color: var(--color-primary);
+ color: var(--color-primary);
+}
+
+/* ===================================================================
+ ALERTS SECTION
+ =================================================================== */
+.alerts-section {
+ margin-bottom: 32px;
+ padding: 20px;
+ background: white;
+ border-radius: 8px;
+ box-shadow: var(--shadow-sm);
+ border: 1px solid var(--color-stroke);
+}
+
+.no-alerts {
+ text-align: center;
+ padding: 32px;
+}
+
+.no-alerts .icon {
+ margin-bottom: 12px;
+}
+
+.alert-item {
+ padding: 16px;
+ margin-bottom: 12px;
+ border-radius: var(--radius-base);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.alert-item.warning {
+ background: rgba(255, 122, 0, 0.1);
+ border-left: 3px solid var(--color-warning);
+}
+
+.alert-item.error {
+ background: rgba(239, 68, 68, 0.1);
+ border-left: 3px solid var(--color-danger);
+}
+
+/* ===================================================================
+ RESPONSIVE DESIGN
+ =================================================================== */
+@media (max-width: 1024px) {
+ .colM,
+ .colMS {
+ margin-right: 0;
+ }
+
+ #content-related {
+ float: none;
+ width: 100%;
+ margin-top: 32px;
+ }
+
+ #changelist-filter {
+ position: static;
+ width: 100%;
+ margin-bottom: 24px;
+ }
+
+ .metrics-grid {
+ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+ }
+
+ .action-grid {
+ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+ }
+}
+
+@media (max-width: 768px) {
+ #user-tools {
+ position: static;
+ padding: 12px 16px;
+ flex-wrap: wrap;
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ #content {
+ padding: 16px;
+ }
+
+ #content-main,
+ #changelist {
+ padding: 20px;
+ }
+
+ .object-tools {
+ float: none;
+ flex-direction: column;
+ width: 100%;
+ }
+
+ .object-tools a {
+ width: 100%;
+ justify-content: center;
+ }
+
+ .metrics-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .action-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+/* ===================================================================
+ UTILITY CLASSES
+ =================================================================== */
+.hidden {
+ display: none !important;
+}
+
+.text-center {
+ text-align: center;
+}
+
+.text-right {
+ text-align: right;
+}
+
+.mt-0 { margin-top: 0; }
+.mt-1 { margin-top: 8px; }
+.mt-2 { margin-top: 16px; }
+.mt-3 { margin-top: 24px; }
+.mt-4 { margin-top: 32px; }
+
+.mb-0 { margin-bottom: 0; }
+.mb-1 { margin-bottom: 8px; }
+.mb-2 { margin-bottom: 16px; }
+.mb-3 { margin-bottom: 24px; }
+.mb-4 { margin-bottom: 32px; }
+
+.p-0 { padding: 0; }
+.p-1 { padding: 8px; }
+.p-2 { padding: 16px; }
+.p-3 { padding: 24px; }
+.p-4 { padding: 32px; }
+
+/* ===================================================================
+ END OF IGNY8 ADMIN STYLES
+ =================================================================== */