2025-09-11 15:02:29 +02:00
|
|
|
/* =========================
|
|
|
|
|
Base Palette
|
|
|
|
|
========================= */
|
|
|
|
|
:root {
|
2025-09-11 10:22:20 +02:00
|
|
|
--c-verylow:#22c55e; --c-verylow-100:#dcfce7; --c-verylow-300:#86efac; --c-verylow-inv:#000;
|
Refactor risk management application with enhanced localization, user authentication, and UI improvements
- Added verbose names for Incident and ResidualRisk models for better clarity in admin interface.
- Updated impact choices for ResidualRisk and Risk models to ensure consistency and clarity.
- Implemented gettext_lazy for translatable strings in models and choices.
- Enhanced the Risk, ResidualRisk, Control, AuditLog, and Incident models with Meta options for better admin representation.
- Added login required decorators to views for improved security.
- Introduced new CSS variables and classes for better visual representation of risk levels.
- Created custom template tags for dynamic CSS class assignment based on risk likelihood and impact.
- Improved dashboard and statistics views with user authentication checks.
- Updated templates for risks, controls, incidents, and admin interface to include edit and delete options for staff users.
- Added new login and logout templates for user authentication.
- Enhanced list views for risks, controls, and incidents to include action buttons for staff users.
- Improved overall UI/UX with Bulma CSS framework for a more modern look and feel.
2025-09-09 14:25:59 +02:00
|
|
|
--c-low:#84cc16; --c-low-100:#ecfccb; --c-low-300:#bef264; --c-low-inv:#111;
|
|
|
|
|
--c-mid:#eab308; --c-mid-100:#fef9c3; --c-mid-300:#fde047; --c-mid-inv:#111;
|
|
|
|
|
--c-high:#f97316; --c-high-100:#ffedd5; --c-high-300:#fbbf24; --c-high-inv:#111;
|
2025-09-11 10:22:20 +02:00
|
|
|
--c-veryhigh:#dc2626; --c-veryhigh-100:#fee2e2;--c-veryhigh-300:#fca5a5; --c-veryhigh-inv:#000;
|
2025-09-11 15:02:29 +02:00
|
|
|
--prosoft-normal:#6f3165;
|
|
|
|
|
--prosoft-inv:#fff;
|
Refactor risk management application with enhanced localization, user authentication, and UI improvements
- Added verbose names for Incident and ResidualRisk models for better clarity in admin interface.
- Updated impact choices for ResidualRisk and Risk models to ensure consistency and clarity.
- Implemented gettext_lazy for translatable strings in models and choices.
- Enhanced the Risk, ResidualRisk, Control, AuditLog, and Incident models with Meta options for better admin representation.
- Added login required decorators to views for improved security.
- Introduced new CSS variables and classes for better visual representation of risk levels.
- Created custom template tags for dynamic CSS class assignment based on risk likelihood and impact.
- Improved dashboard and statistics views with user authentication checks.
- Updated templates for risks, controls, incidents, and admin interface to include edit and delete options for staff users.
- Added new login and logout templates for user authentication.
- Enhanced list views for risks, controls, and incidents to include action buttons for staff users.
- Improved overall UI/UX with Bulma CSS framework for a more modern look and feel.
2025-09-09 14:25:59 +02:00
|
|
|
}
|
|
|
|
|
|
2025-09-11 15:02:29 +02:00
|
|
|
/* =========================
|
|
|
|
|
Helpers (similar to Bulma)
|
|
|
|
|
========================= */
|
|
|
|
|
.has-text-prosoft { color: var(--prosoft-inv) !important; }
|
|
|
|
|
.has-background-prosoft { background: var(--prosoft-normal) !important; color: var(--prosoft-inv) !important; }
|
|
|
|
|
|
|
|
|
|
.has-background-prosoft a,
|
|
|
|
|
.has-background-prosoft abbr { color: var(--prosoft-inv); }
|
|
|
|
|
|
2025-09-11 15:30:42 +02:00
|
|
|
.table thead tr.has-background-prosoft th {
|
|
|
|
|
color: var(--prosoft-inv) !important;
|
|
|
|
|
}
|
|
|
|
|
|
2025-09-11 15:02:29 +02:00
|
|
|
abbr { text-decoration: none; }
|
|
|
|
|
|
|
|
|
|
/* =========================
|
|
|
|
|
Colorized Text / Background
|
|
|
|
|
========================= */
|
|
|
|
|
.has-text-control-verylow { color: var(--c-verylow) !important; }
|
|
|
|
|
.has-text-control-low { color: var(--c-low) !important; }
|
|
|
|
|
.has-text-control-mid { color: var(--c-mid) !important; }
|
|
|
|
|
.has-text-control-high { color: var(--c-high) !important; }
|
|
|
|
|
.has-text-control-veryhigh{ color: var(--c-veryhigh) !important; }
|
|
|
|
|
|
|
|
|
|
.has-background-control-verylow { background: var(--c-verylow) !important; color: var(--c-verylow-inv) !important; }
|
|
|
|
|
.has-background-control-low { background: var(--c-low) !important; color: var(--c-low-inv) !important; }
|
|
|
|
|
.has-background-control-mid { background: var(--c-mid) !important; color: var(--c-mid-inv) !important; }
|
|
|
|
|
.has-background-control-high { background: var(--c-high) !important; color: var(--c-high-inv) !important; }
|
|
|
|
|
.has-background-control-veryhigh{ background: var(--c-veryhigh) !important; color: var(--c-veryhigh-inv) !important; }
|
|
|
|
|
|
|
|
|
|
/* =========================
|
|
|
|
|
Buttons
|
|
|
|
|
========================= */
|
|
|
|
|
.button.is-prosoft { background: var(--prosoft-normal) !important; color: var(--prosoft-inv) !important; }
|
|
|
|
|
|
|
|
|
|
.button.is-control-verylow,
|
|
|
|
|
.button.is-control-low,
|
|
|
|
|
.button.is-control-mid,
|
|
|
|
|
.button.is-control-high,
|
|
|
|
|
.button.is-control-veryhigh {
|
|
|
|
|
border-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
.button.is-control-verylow { background: var(--c-verylow); color: var(--c-verylow-inv); }
|
|
|
|
|
.button.is-control-low { background: var(--c-low); color: var(--c-low-inv); }
|
|
|
|
|
.button.is-control-mid { background: var(--c-mid); color: var(--c-mid-inv); }
|
|
|
|
|
.button.is-control-high { background: var(--c-high); color: var(--c-high-inv); }
|
|
|
|
|
.button.is-control-veryhigh{ background: var(--c-veryhigh);color: var(--c-veryhigh-inv); }
|
|
|
|
|
|
|
|
|
|
.button.is-control-verylow:hover,
|
|
|
|
|
.button.is-control-low:hover,
|
|
|
|
|
.button.is-control-mid:hover,
|
|
|
|
|
.button.is-control-high:hover,
|
|
|
|
|
.button.is-control-veryhigh:hover {
|
|
|
|
|
filter: brightness(.92);
|
2025-09-11 10:22:20 +02:00
|
|
|
}
|
Refactor risk management application with enhanced localization, user authentication, and UI improvements
- Added verbose names for Incident and ResidualRisk models for better clarity in admin interface.
- Updated impact choices for ResidualRisk and Risk models to ensure consistency and clarity.
- Implemented gettext_lazy for translatable strings in models and choices.
- Enhanced the Risk, ResidualRisk, Control, AuditLog, and Incident models with Meta options for better admin representation.
- Added login required decorators to views for improved security.
- Introduced new CSS variables and classes for better visual representation of risk levels.
- Created custom template tags for dynamic CSS class assignment based on risk likelihood and impact.
- Improved dashboard and statistics views with user authentication checks.
- Updated templates for risks, controls, incidents, and admin interface to include edit and delete options for staff users.
- Added new login and logout templates for user authentication.
- Enhanced list views for risks, controls, and incidents to include action buttons for staff users.
- Improved overall UI/UX with Bulma CSS framework for a more modern look and feel.
2025-09-09 14:25:59 +02:00
|
|
|
|
2025-09-11 15:02:29 +02:00
|
|
|
.button.is-control-verylow.is-light { background: var(--c-verylow-100); color: var(--c-verylow); }
|
|
|
|
|
.button.is-control-low.is-light { background: var(--c-low-100); color: var(--c-low); }
|
|
|
|
|
.button.is-control-mid.is-light { background: var(--c-mid-100); color: var(--c-mid); }
|
|
|
|
|
.button.is-control-high.is-light { background: var(--c-high-100); color: var(--c-high); }
|
|
|
|
|
.button.is-control-veryhigh.is-light{ background: var(--c-veryhigh-100);color: var(--c-veryhigh); }
|
|
|
|
|
|
|
|
|
|
/* =========================
|
|
|
|
|
Tags
|
|
|
|
|
========================= */
|
|
|
|
|
.tag.is-prosoft { background: var(--prosoft-normal) !important; color: var(--prosoft-inv) !important; }
|
|
|
|
|
|
|
|
|
|
.tag.is-control-verylow { background: var(--c-verylow); color: var(--c-verylow-inv); }
|
|
|
|
|
.tag.is-control-low { background: var(--c-low); color: var(--c-low-inv); }
|
|
|
|
|
.tag.is-control-mid { background: var(--c-mid); color: var(--c-mid-inv); }
|
|
|
|
|
.tag.is-control-high { background: var(--c-high); color: var(--c-high-inv); }
|
|
|
|
|
.tag.is-control-veryhigh{ background: var(--c-veryhigh);color: var(--c-veryhigh-inv); }
|
|
|
|
|
|
|
|
|
|
.tag.is-control-verylow.is-light { background: var(--c-verylow-100); color: var(--c-verylow); }
|
|
|
|
|
.tag.is-control-low.is-light { background: var(--c-low-100); color: var(--c-low); }
|
|
|
|
|
.tag.is-control-mid.is-light { background: var(--c-mid-100); color: var(--c-mid); }
|
|
|
|
|
.tag.is-control-high.is-light { background: var(--c-high-100); color: var(--c-high); }
|
|
|
|
|
.tag.is-control-veryhigh.is-light{ background: var(--c-veryhigh-100);color: var(--c-veryhigh); }
|
|
|
|
|
|
|
|
|
|
/* =========================
|
|
|
|
|
Notifications
|
|
|
|
|
========================= */
|
|
|
|
|
.notification.is-control-verylow { background: var(--c-verylow-100); border-left: 4px solid var(--c-verylow); color:#111; }
|
|
|
|
|
.notification.is-control-low { background: var(--c-low-100); border-left: 4px solid var(--c-low); color:#111; }
|
|
|
|
|
.notification.is-control-mid { background: var(--c-mid-100); border-left: 4px solid var(--c-mid); color:#111; }
|
|
|
|
|
.notification.is-control-high { background: var(--c-high-100); border-left: 4px solid var(--c-high); color:#111; }
|
|
|
|
|
.notification.is-control-veryhigh{ background: var(--c-veryhigh-100);border-left: 4px solid var(--c-veryhigh);color:#111; }
|
|
|
|
|
.notification.is-prosoft { background: var(--prosoft-normal) !important; border-left: var(--prosoft-inv) !important; }
|
|
|
|
|
|
|
|
|
|
/* =========================
|
|
|
|
|
Messages
|
|
|
|
|
========================= */
|
|
|
|
|
.message.is-control-verylow .message-header { background: var(--c-verylow); color: var(--c-verylow-inv); }
|
|
|
|
|
.message.is-control-low .message-header { background: var(--c-low); color: var(--c-low-inv); }
|
|
|
|
|
.message.is-control-mid .message-header { background: var(--c-mid); color: var(--c-mid-inv); }
|
|
|
|
|
.message.is-control-high .message-header { background: var(--c-high); color: var(--c-high-inv); }
|
|
|
|
|
.message.is-control-veryhigh .message-header{ background: var(--c-veryhigh);color: var(--c-veryhigh-inv); }
|
|
|
|
|
|
|
|
|
|
.message.is-control-verylow .message-body { border-color: var(--c-verylow-300); }
|
|
|
|
|
.message.is-control-low .message-body { border-color: var(--c-low-300); }
|
|
|
|
|
.message.is-control-mid .message-body { border-color: var(--c-mid-300); }
|
|
|
|
|
.message.is-control-high .message-body { border-color: var(--c-high-300); }
|
|
|
|
|
.message.is-control-veryhigh .message-body{ border-color: var(--c-veryhigh-300); }
|
|
|
|
|
|
|
|
|
|
.message.is-prosoft { border-color: var(--prosoft-normal); }
|
|
|
|
|
|
|
|
|
|
/* =========================
|
|
|
|
|
Progress bars
|
|
|
|
|
========================= */
|
|
|
|
|
.progress.is-control-verylow::-webkit-progress-value { background: var(--c-verylow); }
|
|
|
|
|
.progress.is-control-low::-webkit-progress-value { background: var(--c-low); }
|
|
|
|
|
.progress.is-control-mid::-webkit-progress-value { background: var(--c-mid); }
|
|
|
|
|
.progress.is-control-high::-webkit-progress-value { background: var(--c-high); }
|
|
|
|
|
.progress.is-control-veryhigh::-webkit-progress-value{ background: var(--c-veryhigh); }
|
|
|
|
|
|
|
|
|
|
.progress.is-control-verylow::-moz-progress-bar { background: var(--c-verylow); }
|
|
|
|
|
.progress.is-control-low::-moz-progress-bar { background: var(--c-low); }
|
|
|
|
|
.progress.is-control-mid::-moz-progress-bar { background: var(--c-mid); }
|
|
|
|
|
.progress.is-control-high::-moz-progress-bar { background: var(--c-high); }
|
|
|
|
|
.progress.is-control-veryhigh::-moz-progress-bar{ background: var(--c-veryhigh); }
|
|
|
|
|
|
|
|
|
|
.progress.is-prosoft { background: var(--prosoft-normal) !important; }
|
|
|
|
|
|
|
|
|
|
/* =========================
|
|
|
|
|
Navbar / Topbar
|
|
|
|
|
========================= */
|
2025-09-08 08:10:30 +02:00
|
|
|
.navbar.topbar-nav {
|
2025-09-11 15:02:29 +02:00
|
|
|
background-color: #d6801e !important; /* Orange as in screenshot */
|
2025-09-08 08:10:30 +02:00
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
.navbar.topbar-nav .navbar-item,
|
2025-09-11 15:02:29 +02:00
|
|
|
.navbar.topbar-nav .navbar-link { color: #111; }
|
2025-09-08 08:10:30 +02:00
|
|
|
.navbar.topbar-nav .navbar-item:hover,
|
|
|
|
|
.navbar.topbar-nav .navbar-link:hover {
|
|
|
|
|
background-color: rgba(0,0,0,.04);
|
|
|
|
|
color: #111;
|
|
|
|
|
}
|
2025-09-11 15:02:29 +02:00
|
|
|
.navbar.topbar-nav .navbar-link::after { border-color: #6b2bbd; } /* purple arrow */
|
2025-09-07 20:52:19 +02:00
|
|
|
|
2025-09-11 15:02:29 +02:00
|
|
|
/* Logo block */
|
|
|
|
|
.logo { background-color: var(--prosoft-normal) !important; color: #fff; }
|
|
|
|
|
.logo .logo-text { color: #fff; font-weight: 700; }
|
Add FontAwesome webfonts and update templates for Risiko Management
- Added FontAwesome webfont files: fa-brands-400.woff2, fa-regular-400.woff2, fa-solid-900.woff2, and fa-v4compatibility.woff2.
- Updated base.html to include FontAwesome stylesheet.
- Renamed the application title from "Risiko Management" to "ISO27001 Management".
- Enhanced navigation menu with dynamic active states for Dashboard, Statistics, Risks, Controls, and Incidents.
- Created new templates for dashboard, controls, incidents, risks, and statistics with breadcrumb navigation.
2025-09-07 23:07:56 +02:00
|
|
|
|
2025-09-11 15:02:29 +02:00
|
|
|
/* =========================
|
|
|
|
|
Layout Elements
|
|
|
|
|
========================= */
|
2025-09-08 08:10:30 +02:00
|
|
|
.actions { display: flex; align-items: center; gap: 10px; padding-right: 10px; }
|
|
|
|
|
.search { border: 1px solid #c7c7c7; border-radius: 4px; padding: 4px 8px; font-size: 14px; }
|
2025-09-11 15:02:29 +02:00
|
|
|
.profile { background: #3c7d74; color: #fff; width: 28px; height: 28px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
|
2025-09-08 08:10:30 +02:00
|
|
|
|
|
|
|
|
.content { background: #fafafa; min-height: calc(100vh - 3.25rem); }
|
|
|
|
|
.home-icon { font-size: 20px; display: inline-block; margin: 10px; }
|
|
|
|
|
|
feat: Enhance Risk Management Module
- Updated Risk model to include description, created_at, and updated_at fields.
- Modified RiskSerializer to include created_at and updated_at in serialized output.
- Improved logging in signals for Risk and Control models, including serialization of values.
- Added new template tags for CIA label mapping.
- Refactored URL patterns for better clarity and added detail views for risks, controls, and incidents.
- Implemented list and detail views for risks, controls, and incidents with filtering options.
- Enhanced CSS for better UI/UX, including breadcrumbs and table styling.
- Created new templates for displaying individual risks, controls, and incidents with detailed information.
2025-09-08 15:03:12 +02:00
|
|
|
.navbar-dropdown { border-top: none; box-shadow: 0 8px 16px rgba(0,0,0,.1); }
|
|
|
|
|
|
2025-09-11 15:02:29 +02:00
|
|
|
/* =========================
|
|
|
|
|
Breadcrumbs
|
|
|
|
|
========================= */
|
|
|
|
|
.top-breadcrumb { padding: 10px 0; }
|
|
|
|
|
.breadcrumb:not(:last-child) { margin-bottom: 0; border-bottom: 1px solid var(--prosoft-normal); }
|
|
|
|
|
.breadcrumb { background-color: #f0ebeb; }
|
|
|
|
|
.breadcrumb a { color: var(--prosoft-normal) !important; }
|
|
|
|
|
|
|
|
|
|
/* =========================
|
|
|
|
|
Lists inside .content
|
|
|
|
|
========================= */
|
|
|
|
|
.content li { margin-top: 5px !important; }
|
|
|
|
|
.content li+li { margin: 0 !important; }
|
|
|
|
|
|
|
|
|
|
/* =========================
|
|
|
|
|
Dark Mode
|
|
|
|
|
========================= */
|
|
|
|
|
body.dark-mode { background-color: #121212; color: #f5f5f5; }
|
|
|
|
|
body.dark-mode .box { background-color: #1e1e1e; color: #f5f5f5; }
|
|
|
|
|
body.dark-mode a { color: #bb86fc; }
|
|
|
|
|
|
|
|
|
|
/* =========================
|
|
|
|
|
Risk Chip (custom widget)
|
|
|
|
|
========================= */
|
|
|
|
|
.risk-chip {
|
2025-09-10 10:49:14 +02:00
|
|
|
--chip-w: 260px;
|
|
|
|
|
--chip-id-w: 40px;
|
|
|
|
|
width: var(--chip-w);
|
|
|
|
|
display: inline-flex;
|
2025-09-11 15:02:29 +02:00
|
|
|
flex-direction: column; /* stacked style */
|
2025-09-10 10:49:14 +02:00
|
|
|
align-items: stretch;
|
|
|
|
|
border: 0;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
box-shadow: 0 4px 14px rgba(0,0,0,.08);
|
|
|
|
|
background: var(--chip-bg, #eee);
|
|
|
|
|
color: var(--chip-fg, #111);
|
|
|
|
|
}
|
2025-09-11 15:02:29 +02:00
|
|
|
.risk-chip .chip-head {
|
2025-09-10 10:49:14 +02:00
|
|
|
padding:.35rem .6rem;
|
|
|
|
|
font-size:.75rem;
|
|
|
|
|
font-weight:700;
|
|
|
|
|
text-transform:uppercase;
|
|
|
|
|
letter-spacing:.02em;
|
|
|
|
|
color:var(--chip-fg);
|
|
|
|
|
background:rgba(0,0,0,.10);
|
|
|
|
|
border-bottom:1px solid rgba(0,0,0,.12);
|
|
|
|
|
}
|
2025-09-11 15:02:29 +02:00
|
|
|
.risk-chip .chip-main { display:flex; align-items:stretch; }
|
2025-09-10 10:49:14 +02:00
|
|
|
|
2025-09-11 15:02:29 +02:00
|
|
|
/* left ID column with texture */
|
|
|
|
|
.risk-chip .chip-id {
|
2025-09-10 10:49:14 +02:00
|
|
|
flex: 0 0 var(--chip-id-w);
|
|
|
|
|
display: grid;
|
|
|
|
|
place-items: center;
|
|
|
|
|
font-size: 1.25rem;
|
|
|
|
|
position: relative;
|
|
|
|
|
background: rgba(0,0,0,.06);
|
|
|
|
|
}
|
2025-09-11 15:02:29 +02:00
|
|
|
.risk-chip .chip-id::after {
|
2025-09-10 10:49:14 +02:00
|
|
|
content:"";
|
|
|
|
|
position: absolute; inset:0;
|
|
|
|
|
background:
|
2025-09-11 15:02:29 +02:00
|
|
|
linear-gradient(to right, rgba(255,255,255,.15), rgba(0,0,0,.08) 60%),
|
2025-09-10 10:49:14 +02:00
|
|
|
repeating-linear-gradient(135deg, rgba(255,255,255,.12) 0 6px, transparent 6px 12px);
|
|
|
|
|
mix-blend-mode: soft-light;
|
|
|
|
|
opacity:.6;
|
|
|
|
|
}
|
|
|
|
|
|
2025-09-11 15:02:29 +02:00
|
|
|
/* right text column */
|
|
|
|
|
.risk-chip .chip-label {
|
2025-09-10 10:49:14 +02:00
|
|
|
flex: 1 1 auto;
|
|
|
|
|
padding: .5rem .75rem;
|
|
|
|
|
line-height: 1.25;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
border-left: 1px solid rgba(0,0,0,.08);
|
|
|
|
|
min-height: 2.25rem;
|
|
|
|
|
}
|
|
|
|
|
|
2025-09-11 15:02:29 +02:00
|
|
|
/* Color assignments for chip */
|
2025-09-10 10:49:14 +02:00
|
|
|
.risk-chip.is-control-verylow { --chip-bg: var(--c-verylow); --chip-fg: var(--c-verylow-inv); }
|
|
|
|
|
.risk-chip.is-control-low { --chip-bg: var(--c-low); --chip-fg: var(--c-low-inv); }
|
|
|
|
|
.risk-chip.is-control-mid { --chip-bg: var(--c-mid); --chip-fg: var(--c-mid-inv); }
|
|
|
|
|
.risk-chip.is-control-high { --chip-bg: var(--c-high); --chip-fg: var(--c-high-inv); }
|
|
|
|
|
.risk-chip.is-control-veryhigh{ --chip-bg: var(--c-veryhigh); --chip-fg: var(--c-veryhigh-inv); }
|
|
|
|
|
|
2025-09-11 15:02:29 +02:00
|
|
|
/* Responsive */
|
|
|
|
|
@media (max-width: 480px) { .risk-chip{ width: 100%; } }
|
|
|
|
|
@media (max-width: 1215px){ .risk-chip{ --chip-w: 100%; width: var(--chip-w); } }
|
2025-09-10 13:44:03 +02:00
|
|
|
|
2025-09-11 15:02:29 +02:00
|
|
|
/* =========================
|
|
|
|
|
Avatar with badge
|
|
|
|
|
========================= */
|
|
|
|
|
.avatar-wrap { position: relative; display: inline-block; }
|
2025-09-10 13:44:03 +02:00
|
|
|
.avatar-wrap .badge {
|
|
|
|
|
position: absolute;
|
2025-09-11 15:02:29 +02:00
|
|
|
top: -0.35rem; right: -0.35rem;
|
|
|
|
|
min-width: 1.25rem; height: 1.25rem;
|
2025-09-10 13:44:03 +02:00
|
|
|
padding: 0 .25rem;
|
2025-09-11 15:02:29 +02:00
|
|
|
font-size: 0.75rem; line-height: 1.25rem;
|
|
|
|
|
display: flex; align-items: center; justify-content: center;
|
2025-09-10 13:44:03 +02:00
|
|
|
box-shadow: 0 0 0 2px #fff;
|
|
|
|
|
}
|
|
|
|
|
.avatar-wrap .tag.is-medium + .badge {
|
2025-09-11 15:02:29 +02:00
|
|
|
min-width: 1.15rem; height: 1.15rem;
|
|
|
|
|
font-size: 0.70rem; line-height: 1.15rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* =========================
|
|
|
|
|
Bulma Design Changes
|
|
|
|
|
========================= */
|
|
|
|
|
|
|
|
|
|
/* ERP-style horizontal tabs */
|
|
|
|
|
.erp-tabs {
|
|
|
|
|
display: flex;
|
|
|
|
|
border-bottom: 2px solid var(--prosoft-normal);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.erp-tabs a {
|
|
|
|
|
padding: 0.5rem 1rem;
|
|
|
|
|
color: #111;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
border-bottom: 3px solid transparent;
|
2025-09-10 13:44:03 +02:00
|
|
|
}
|
|
|
|
|
|
2025-09-11 15:02:29 +02:00
|
|
|
.erp-tabs a.is-active {
|
|
|
|
|
color: var(--prosoft-normal);
|
|
|
|
|
border-color: var(--prosoft-normal);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.erp-tabs a:hover {
|
|
|
|
|
background: rgba(0,0,0,.03);
|
|
|
|
|
}
|
2025-09-11 21:13:26 +02:00
|
|
|
|
|
|
|
|
/* =========================
|
|
|
|
|
Dark Mode
|
|
|
|
|
========================= */
|
|
|
|
|
/* =========================
|
|
|
|
|
Dark Mode Palette
|
|
|
|
|
========================= */
|
|
|
|
|
body.dark-mode {
|
|
|
|
|
--bg-main: #121212;
|
|
|
|
|
--bg-surface: #1e1e1e;
|
|
|
|
|
--bg-hover: #2a2a2a;
|
|
|
|
|
--border-color: #333;
|
|
|
|
|
--text-main: #f5f5f5;
|
|
|
|
|
--text-muted: #bbb;
|
|
|
|
|
--link-color: #bb86fc;
|
|
|
|
|
--link-hover: #d0aaff;
|
|
|
|
|
|
|
|
|
|
background-color: var(--bg-main);
|
|
|
|
|
color: var(--text-main);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* =========================
|
|
|
|
|
Global Elements
|
|
|
|
|
========================= */
|
|
|
|
|
body.dark-mode a {
|
|
|
|
|
color: var(--link-color);
|
|
|
|
|
}
|
|
|
|
|
body.dark-mode a:hover {
|
|
|
|
|
color: var(--link-hover);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body.dark-mode .content {
|
|
|
|
|
background: var(--bg-surface);
|
|
|
|
|
color: var(--text-main);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* =========================
|
|
|
|
|
Navbar / Topbar
|
|
|
|
|
========================= */
|
|
|
|
|
body.dark-mode .navbar.topbar-nav {
|
|
|
|
|
background-color: var(--bg-surface) !important;
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
body.dark-mode .navbar.topbar-nav .navbar-item,
|
|
|
|
|
body.dark-mode .navbar.topbar-nav .navbar-link {
|
|
|
|
|
color: var(--text-main);
|
|
|
|
|
}
|
|
|
|
|
body.dark-mode .navbar.topbar-nav .navbar-item:hover,
|
|
|
|
|
body.dark-mode .navbar.topbar-nav .navbar-link:hover {
|
|
|
|
|
background-color: var(--bg-hover);
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
body.dark-mode .navbar.topbar-nav .navbar-link::after {
|
|
|
|
|
border-color: var(--link-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* =========================
|
|
|
|
|
Cards, Boxen, Dropdowns
|
|
|
|
|
========================= */
|
|
|
|
|
body.dark-mode .box,
|
|
|
|
|
body.dark-mode .card,
|
|
|
|
|
body.dark-mode .navbar-dropdown {
|
|
|
|
|
background: var(--bg-surface);
|
|
|
|
|
color: var(--text-main);
|
|
|
|
|
border: 1px solid var(--border-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* =========================
|
|
|
|
|
Breadcrumbs
|
|
|
|
|
========================= */
|
|
|
|
|
body.dark-mode .breadcrumb {
|
|
|
|
|
background-color: var(--bg-surface);
|
|
|
|
|
border-bottom: 1px solid var(--border-color);
|
|
|
|
|
}
|
|
|
|
|
body.dark-mode .breadcrumb a {
|
|
|
|
|
color: var(--link-color) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* =========================
|
|
|
|
|
Messages / Notifications
|
|
|
|
|
========================= */
|
|
|
|
|
body.dark-mode .notification {
|
|
|
|
|
background: var(--bg-surface);
|
|
|
|
|
color: var(--text-main);
|
|
|
|
|
border-left: 4px solid var(--prosoft-normal);
|
|
|
|
|
}
|
|
|
|
|
body.dark-mode .message .message-body {
|
|
|
|
|
background: var(--bg-surface);
|
|
|
|
|
color: var(--text-main);
|
|
|
|
|
border-color: var(--border-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* =========================
|
|
|
|
|
Tables
|
|
|
|
|
========================= */
|
|
|
|
|
body.dark-mode table,
|
|
|
|
|
body.dark-mode th,
|
|
|
|
|
body.dark-mode td {
|
|
|
|
|
background: var(--bg-surface);
|
|
|
|
|
color: var(--text-main);
|
|
|
|
|
border-color: var(--border-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* =========================
|
|
|
|
|
Inputs / Forms
|
|
|
|
|
========================= */
|
|
|
|
|
body.dark-mode input,
|
|
|
|
|
body.dark-mode select,
|
|
|
|
|
body.dark-mode textarea {
|
|
|
|
|
background: var(--bg-surface);
|
|
|
|
|
color: var(--text-main);
|
|
|
|
|
border: 1px solid var(--border-color);
|
|
|
|
|
}
|
|
|
|
|
body.dark-mode input::placeholder {
|
|
|
|
|
color: var(--text-muted);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* =========================
|
|
|
|
|
Navbar Dropdown (Dark Mode)
|
|
|
|
|
========================= */
|
|
|
|
|
body.dark-mode .navbar-dropdown {
|
|
|
|
|
background: var(--bg-surface);
|
|
|
|
|
border: 1px solid var(--border-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body.dark-mode .navbar-dropdown .navbar-item {
|
|
|
|
|
background: var(--bg-surface);
|
|
|
|
|
color: var(--text-main) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body.dark-mode .navbar-dropdown .navbar-item:hover {
|
|
|
|
|
background: var(--bg-hover);
|
|
|
|
|
color: #fff !important;
|
|
|
|
|
}
|