-
Quick Actions
+
⚡ Quick Actions
diff --git a/backend/staticfiles/admin/css/igny8_admin.css b/backend/staticfiles/admin/css/igny8_admin.css
index 59cab3d6..00b55e29 100644
--- a/backend/staticfiles/admin/css/igny8_admin.css
+++ b/backend/staticfiles/admin/css/igny8_admin.css
@@ -1,1471 +1,1303 @@
/* ===================================================================
- IGNY8 DJANGO ADMIN - MODERN UI DESIGN
+ IGNY8 CUSTOM ADMIN STYLES - COMPLETE REDESIGN
===================================================================
- 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
+ Using exact IGNY8 brand colors from frontend design system
=================================================================== */
-/* ===================================================================
- DESIGN TOKENS - Matching Frontend App
- =================================================================== */
+/* IGNY8 Brand Color Variables - Matching Frontend App */
:root {
- /* 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);
+ /* 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 RESET & BASE
+ GLOBAL RESETS
=================================================================== */
-* {
- box-sizing: border-box;
-}
-
body {
- 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);
+ 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 - Primary Navigation
+ HEADER - Clean Professional Design
=================================================================== */
#header {
- 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;
+ 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: 14px 24px;
- display: flex;
- align-items: center;
+ padding: 16px 30px !important;
}
#branding h1 {
- margin: 0;
- font-size: 18px;
- font-weight: 600;
- letter-spacing: -0.01em;
+ margin: 0 !important;
+ font-size: 20px !important;
+ font-weight: 600 !important;
}
-#branding h1 a {
- color: white;
- display: flex;
- align-items: center;
- gap: 8px;
- transition: opacity var(--transition-base);
+#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: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;
+#header a:link,
+#header a:visited {
+ color: white !important;
}
/* ===================================================================
- LAYOUT - Content Structure
+ ADD RECORD BUTTON - Modern Accent Color
=================================================================== */
-#content {
- padding: 24px;
- max-width: 1600px;
- margin: 0 auto;
-}
-
-#content-main {
- background: var(--color-panel);
- padding: 32px;
- border-radius: 8px;
- box-shadow: var(--shadow-sm);
-}
-
-.colM,
-.colMS {
- margin-right: 260px;
-}
-
-#changelist {
- background: var(--color-panel);
- padding: 32px;
- border-radius: 8px;
- box-shadow: var(--shadow-sm);
-}
-
-/* ===================================================================
- SIDEBAR - Module Navigation
- =================================================================== */
-#content-related {
- float: right;
- width: 240px;
- position: relative;
-}
-
-.module {
- margin-bottom: 24px;
- background: var(--color-panel);
- border-radius: 8px;
- box-shadow: var(--shadow-sm);
- overflow: hidden;
-}
-
-.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);
-}
-
-.module h2 i {
- color: var(--color-primary);
- font-size: 12px;
-}
-
-.module table {
- width: 100%;
- background: white;
-}
-
-.module tr {
- border-bottom: 1px solid var(--color-panel-alt);
- transition: background-color var(--transition-base);
-}
-
-.module tr:last-child {
- border-bottom: none;
-}
-
-.module tr:hover {
- background-color: rgba(6, 147, 227, 0.03);
-}
-
-.module td {
- padding: 12px 20px;
-}
-
-.module a {
- color: var(--color-text);
- font-size: 13px;
- font-weight: 500;
- transition: color var(--transition-base);
-}
-
-.module a:hover {
- color: var(--color-primary);
-}
-
-/* Sidebar Add Links - Icon Only */
-.module .addlink,
-.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";
- 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(--color-success-dark) 0%, #067354 100%);
- transform: translateY(-1px) scale(1.05);
- box-shadow: 0 4px 8px rgba(11, 191, 135, 0.3);
-}
-
-/* ===================================================================
- BUTTONS - Modern Style System
- =================================================================== */
-
-/* Base Button */
-.button,
-button[type="submit"],
-input[type="submit"],
-input[type="button"],
-.submit-row input,
-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,
-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);
-}
-
-.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"],
-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,
-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 */
-.deletelink,
-.deletelink-box a,
-a.deletelink,
-input[name="_delete"],
-.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(--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;
+ margin-bottom: 24px !important;
+ float: right !important;
}
.object-tools li {
- margin: 0;
- padding: 0;
- list-style: none;
+ margin: 0 !important;
+ list-style: none !important;
}
-.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.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: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.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: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;
+.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;
}
/* ===================================================================
- SEARCH & TOOLBAR
+ 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;
- background: var(--color-panel);
- border: 1px solid var(--color-stroke);
- border-radius: 8px;
- margin-bottom: 20px;
+ 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;
- gap: 12px;
- align-items: center;
+ display: flex !important;
+ gap: 12px !important;
+ align-items: center !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);
+ 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 {
- outline: none;
- border-color: var(--color-primary);
- box-shadow: 0 0 0 3px rgba(6, 147, 227, 0.1);
+ border-color: var(--igny8-primary) !important;
+ outline: none !important;
+ box-shadow: 0 0 0 4px rgba(6, 147, 227, 0.1) !important;
}
-#toolbar button[type="submit"],
-#toolbar input[type="submit"] {
- height: 40px;
- padding: 0 24px;
+#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
+ ACTIONS BAR - Better Styling
=================================================================== */
-.actions {
- 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;
+#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;
}
-.actions label {
- font-weight: 600;
- color: var(--color-text);
- font-size: 14px;
- margin: 0;
+#changelist-form .actions label {
+ font-weight: 600 !important;
+ color: var(--igny8-text) !important;
+ font-size: 14px !important;
+ margin-right: 0 !important;
}
-.actions select {
- 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);
+#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;
}
-.actions select:focus {
- outline: none;
- border-color: var(--color-primary);
- box-shadow: 0 0 0 3px rgba(6, 147, 227, 0.1);
+#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;
}
-.actions button,
-.actions input[type="submit"] {
- height: 40px;
- padding: 0 24px;
+#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;
}
-/* 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);
+#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
+ FILTERS PANEL - Clear Organization
=================================================================== */
#changelist-filter {
- position: absolute;
- top: 0;
- right: 0;
- width: 240px;
- background: var(--color-panel);
- border-radius: 8px;
- box-shadow: var(--shadow-sm);
- padding: 20px;
+ 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 {
- 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;
+ 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";
- font-family: "Font Awesome 6 Free";
- font-weight: 900;
- color: var(--color-primary);
+ content: "\f0b0" !important;
+ font-family: "Font Awesome 6 Free" !important;
+ font-weight: 900 !important;
}
#changelist-filter h3 {
- font-size: 13px;
- font-weight: 600;
- color: var(--color-text);
- margin: 20px 0 8px;
+ 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 {
- list-style: none;
- padding: 0;
- margin: 0 0 16px;
+ padding: 16px 24px !important;
+ margin: 0 !important;
}
#changelist-filter li {
- padding: 8px 0;
- border-bottom: 1px solid var(--color-panel-alt);
-}
-
-#changelist-filter li:last-child {
- border-bottom: none;
+ padding: 0 !important;
+ margin: 0 0 8px 0 !important;
+ list-style: none !important;
}
#changelist-filter a {
- color: var(--color-text);
- font-size: 13px;
- transition: color var(--transition-base);
+ 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 {
- color: var(--color-primary);
+ background: var(--igny8-surface) !important;
+ color: var(--igny8-primary) !important;
}
#changelist-filter a.selected {
- color: var(--color-primary);
- font-weight: 600;
+ 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;
}
/* ===================================================================
- TABLES - Modern Data Display
+ ADD RECORD BUTTON - Clean Professional Style
=================================================================== */
-.results {
- overflow-x: auto;
- margin-top: 20px;
+.object-tools {
+ margin-bottom: 20px !important;
}
-#result_list {
- width: 100%;
- border-collapse: separate;
- border-spacing: 0;
+.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: 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;
+ background: var(--igny8-surface) !important;
+ color: var(--igny8-primary) !important;
+ padding: 12px 10px !important;
+ border-bottom: 2px solid var(--igny8-primary) !important;
}
-#result_list thead th a {
- color: var(--color-text);
- font-weight: 700;
+/* Table header links */
+#result_list thead th a:link,
+#result_list thead th a:visited {
+ color: var(--igny8-primary) !important;
+ font-weight: 600 !important;
}
-#result_list thead th.sorted {
- color: var(--color-primary);
+/* ===================================================================
+ 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;
}
-#result_list thead th.sorted a {
- color: var(--color-primary);
+.button:hover, input[type=submit]:hover, input[type=button]:hover, button:hover, .btn:hover {
+ background: var(--igny8-primary-dark) !important;
+ color: white !important;
}
-/* 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;
+.button:active, .button:focus {
+ background: var(--igny8-primary-dark) !important;
}
-#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;
+/* Default action button */
+.default, input[type=submit].default {
+ background: var(--igny8-primary) !important;
+ border: 2px solid var(--igny8-primary-dark) !important;
}
-/* Table Body */
-#result_list tbody tr {
- transition: background-color var(--transition-base);
+/* 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: white;
+ background-color: var(--igny8-surface);
}
#result_list tbody tr:nth-child(even) {
- background: #fafbfc;
+ 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: rgba(6, 147, 227, 0.04);
+ background-color: rgba(6, 147, 227, 0.05) !important;
}
#result_list td {
- padding: 16px;
- color: var(--color-text);
- font-size: 14px;
- border-bottom: 1px solid var(--color-panel-alt);
+ padding: 14px 12px !important;
+ color: var(--igny8-text) !important;
+ font-size: 14px !important;
+ border-bottom: 1px solid var(--igny8-stroke) !important;
}
-
-#result_list td a {
- color: var(--color-primary);
- font-weight: 500;
-}
-
-/* Action Checkbox Column */
-#result_list td.action-checkbox {
- width: 40px;
- text-align: center;
+ background: var(--igny8-danger-dark) !important;
}
/* ===================================================================
- FORMS - Clean Input Design
+ LINKS - IGNY8 Primary Blue
=================================================================== */
-.form-row {
- margin-bottom: 24px;
+a, a:link, a:visited {
+ color: var(--igny8-primary) !important;
}
-.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);
+a:hover, a:focus {
+ color: var(--igny8-primary-dark) !important;
}
.breadcrumbs a {
- color: var(--color-primary);
- font-weight: 500;
+ 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 {
- color: var(--color-primary-dark);
+ opacity: 1;
+ text-decoration: underline;
}
-/* ===================================================================
- CALENDAR WIDGET
- =================================================================== */
-.calendarbox,
-.clockbox {
- background: white;
- border: 1px solid var(--color-stroke);
- border-radius: 8px;
- box-shadow: var(--shadow-lg);
- padding: 16px;
+/* Improve filter sidebar */
+#changelist-filter h2 {
+ background: var(--igny8-primary);
+ color: white;
+ padding: 8px 10px;
+ margin-bottom: 0;
}
-.calendar {
- width: 100%;
+#changelist-filter h3 {
+ font-weight: bold;
+ margin-top: 15px;
+ padding-bottom: 5px;
+ border-bottom: 1px solid var(--igny8-stroke);
}
-.calendar th,
-.calendar td {
- padding: 8px;
- text-align: center;
- border-radius: 4px;
+/* Better pagination */
+.paginator {
+ font-size: 14px;
+ padding: 10px;
+ background: var(--igny8-surface);
+ border-radius: 4px;
}
-.calendar th {
- font-weight: 600;
- color: var(--color-text);
- font-size: 12px;
- text-transform: uppercase;
- letter-spacing: 0.5px;
+.paginator a {
+ padding: 5px 10px;
+ margin: 0 2px;
+ background: var(--igny8-panel);
+ border: 1px solid var(--igny8-stroke);
+ border-radius: 3px;
}
-.calendar td a {
- display: block;
- padding: 8px;
- border-radius: 4px;
- color: var(--color-text);
- transition: all var(--transition-base);
+.paginator a:hover {
+ background: var(--igny8-primary);
+ color: white;
+ text-decoration: none;
}
-.calendar td a:hover {
- background: var(--color-panel-alt);
- color: var(--color-primary);
+/* Responsive improvements */
+@media (max-width: 768px) {
+ #content-main {
+ padding: 10px;
+ }
+
+ .module table {
+ font-size: 12px;
+ }
}
-.calendar td.selected a {
- background: var(--color-primary);
- color: white;
- font-weight: 600;
+/* 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);
}
-/* ===================================================================
- INLINE FORMS
- =================================================================== */
+#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 {
- margin-bottom: 32px;
- padding: 20px;
- background: var(--color-panel-alt);
- border-radius: 8px;
+ border: 1px solid var(--igny8-stroke);
+ border-radius: 4px;
+ margin-bottom: 20px;
}
-.inline-group h2 {
- margin: 0 0 16px;
- font-size: 16px;
- font-weight: 600;
- color: var(--color-text);
+.inline-group .tabular {
+ overflow-x: auto;
}
-.inline-related {
- margin-bottom: 16px;
- padding: 16px;
- background: white;
- border: 1px solid var(--color-stroke);
- border-radius: var(--radius-base);
+/* Help text styling */
+.help {
+ font-size: 12px;
+ color: var(--igny8-text-dim);
+ display: block;
+ margin-top: 5px;
}
-/* ===================================================================
- DASHBOARD - Custom Styles
- =================================================================== */
-.dashboard-container {
- padding: 20px;
- max-width: 1600px;
- margin: 0 auto;
+/* 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-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-card h2 {
+ margin-top: 0;
+ border-bottom: 2px solid var(--igny8-primary);
+ padding-bottom: 10px;
}
-.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 {
+ display: inline-block;
+ margin: 10px 20px 10px 0;
}
.metric-value {
- font-size: 16px;
- font-weight: 600;
+ font-size: 32px;
+ font-weight: bold;
+ color: var(--igny8-primary);
+ display: block;
}
-.metric-value.success {
- color: var(--color-success);
+.metric-label {
+ font-size: 12px;
+ color: var(--igny8-text-dim);
+ display: block;
+ margin-top: 5px;
}
-.metric-value.warning {
- color: var(--color-warning);
+/* Alert styling */
+.alert {
+ padding: 15px;
+ margin: 10px 0;
+ border-radius: 4px;
+ border-left: 4px solid;
}
-.metric-value.error {
- color: var(--color-danger);
+.alert-error {
+ background-color: rgba(239, 68, 68, 0.1);
+ border-left-color: var(--igny8-danger);
+ color: var(--igny8-danger-dark);
}
-.metric-value.info {
- color: var(--color-primary);
+.alert-warning {
+ background-color: rgba(255, 122, 0, 0.1);
+ border-left-color: var(--igny8-warning);
+ color: var(--igny8-warning-dark);
}
-.quick-actions {
- background: white;
- padding: 24px;
- border-radius: 8px;
- box-shadow: var(--shadow-sm);
- border: 1px solid var(--color-stroke);
+.alert-info {
+ background-color: rgba(6, 147, 227, 0.1);
+ border-left-color: var(--igny8-primary);
+ color: var(--igny8-primary-dark);
}
-.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);
+.alert-success {
+ background-color: rgba(11, 191, 135, 0.1);
+ border-left-color: var(--igny8-success);
+ color: var(--igny8-success-dark);
}
/* ===================================================================
- ALERTS SECTION
+ SIDEBAR MODULE ADD LINKS - Clean and Professional
=================================================================== */
-.alerts-section {
- margin-bottom: 32px;
- padding: 20px;
- background: white;
- border-radius: 8px;
- box-shadow: var(--shadow-sm);
- border: 1px solid var(--color-stroke);
+.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;
}
-.no-alerts {
- text-align: center;
- padding: 32px;
+.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;
}
-.no-alerts .icon {
- margin-bottom: 12px;
+.module .addlink:hover,
+.module a.addlink:hover {
+ background: rgba(6, 147, 227, 0.1) !important;
+ color: var(--igny8-primary-dark) !important;
}
-.alert-item {
- padding: 16px;
- margin-bottom: 12px;
- border-radius: var(--radius-base);
- display: flex;
- justify-content: space-between;
- align-items: center;
+.module .addlink:hover:before,
+.module a.addlink:hover:before {
+ background: var(--igny8-primary-dark) !important;
}
-
-.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
- =================================================================== */