9bcfd12cbe
- Updated the Django localization file with new and modified translations. - Enhanced dark mode styles for table rows to improve visibility on hover. - Added a new JavaScript file for future chart functionalities. - Changed the logo text in the base template from "RM" to "WIRA Intranet". - Improved the risk list display by replacing checkboxes with icons for CIA categories.
467 lines
No EOL
16 KiB
CSS
467 lines
No EOL
16 KiB
CSS
/* =========================
|
|
Base Palette
|
|
========================= */
|
|
:root {
|
|
--c-verylow:#22c55e; --c-verylow-100:#dcfce7; --c-verylow-300:#86efac; --c-verylow-inv:#000;
|
|
--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;
|
|
--c-veryhigh:#dc2626; --c-veryhigh-100:#fee2e2;--c-veryhigh-300:#fca5a5; --c-veryhigh-inv:#000;
|
|
--prosoft-normal:#6f3165;
|
|
--prosoft-inv:#fff;
|
|
}
|
|
|
|
/* =========================
|
|
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); }
|
|
|
|
.table thead tr.has-background-prosoft th {
|
|
color: var(--prosoft-inv) !important;
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
.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
|
|
========================= */
|
|
.navbar.topbar-nav {
|
|
background-color: #d6801e !important; /* Orange as in screenshot */
|
|
box-shadow: none;
|
|
}
|
|
.navbar.topbar-nav .navbar-item,
|
|
.navbar.topbar-nav .navbar-link { color: #111; }
|
|
.navbar.topbar-nav .navbar-item:hover,
|
|
.navbar.topbar-nav .navbar-link:hover {
|
|
background-color: rgba(0,0,0,.04);
|
|
color: #111;
|
|
}
|
|
.navbar.topbar-nav .navbar-link::after { border-color: #6b2bbd; } /* purple arrow */
|
|
|
|
/* Logo block */
|
|
.logo { background-color: var(--prosoft-normal) !important; color: #fff; }
|
|
.logo .logo-text { color: #fff; font-weight: 700; }
|
|
|
|
/* =========================
|
|
Layout Elements
|
|
========================= */
|
|
.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; }
|
|
.profile { background: #3c7d74; color: #fff; width: 28px; height: 28px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
|
|
|
|
.content { background: #fafafa; min-height: calc(100vh - 3.25rem); }
|
|
.home-icon { font-size: 20px; display: inline-block; margin: 10px; }
|
|
|
|
.navbar-dropdown { border-top: none; box-shadow: 0 8px 16px rgba(0,0,0,.1); }
|
|
|
|
/* =========================
|
|
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; }
|
|
.breadcrumb-add-icon {color: limegreen !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 {
|
|
--chip-w: 260px;
|
|
--chip-id-w: 40px;
|
|
width: var(--chip-w);
|
|
display: inline-flex;
|
|
flex-direction: column; /* stacked style */
|
|
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);
|
|
}
|
|
.risk-chip .chip-head {
|
|
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);
|
|
}
|
|
.risk-chip .chip-main { display:flex; align-items:stretch; }
|
|
|
|
/* left ID column with texture */
|
|
.risk-chip .chip-id {
|
|
flex: 0 0 var(--chip-id-w);
|
|
display: grid;
|
|
place-items: center;
|
|
font-size: 1.25rem;
|
|
position: relative;
|
|
background: rgba(0,0,0,.06);
|
|
}
|
|
.risk-chip .chip-id::after {
|
|
content:"";
|
|
position: absolute; inset:0;
|
|
background:
|
|
linear-gradient(to right, rgba(255,255,255,.15), rgba(0,0,0,.08) 60%),
|
|
repeating-linear-gradient(135deg, rgba(255,255,255,.12) 0 6px, transparent 6px 12px);
|
|
mix-blend-mode: soft-light;
|
|
opacity:.6;
|
|
}
|
|
|
|
/* right text column */
|
|
.risk-chip .chip-label {
|
|
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;
|
|
}
|
|
|
|
/* Color assignments for chip */
|
|
.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); }
|
|
|
|
/* Responsive */
|
|
@media (max-width: 480px) { .risk-chip{ width: 100%; } }
|
|
@media (max-width: 1215px){ .risk-chip{ --chip-w: 100%; width: var(--chip-w); } }
|
|
|
|
/* =========================
|
|
Avatar with badge
|
|
========================= */
|
|
.avatar-wrap { position: relative; display: inline-block; }
|
|
.avatar-wrap .badge {
|
|
position: absolute;
|
|
top: -0.35rem; right: -0.35rem;
|
|
min-width: 1.25rem; height: 1.25rem;
|
|
padding: 0 .25rem;
|
|
font-size: 0.75rem; line-height: 1.25rem;
|
|
display: flex; align-items: center; justify-content: center;
|
|
box-shadow: 0 0 0 2px #fff;
|
|
}
|
|
.avatar-wrap .tag.is-medium + .badge {
|
|
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;
|
|
}
|
|
|
|
.erp-tabs a.is-active {
|
|
color: var(--prosoft-normal);
|
|
border-color: var(--prosoft-normal);
|
|
}
|
|
|
|
.erp-tabs a:hover {
|
|
background: rgba(0,0,0,.03);
|
|
}
|
|
|
|
/* =========================
|
|
Dark Mode
|
|
========================= */
|
|
/* =========================
|
|
Dark Mode Palette
|
|
========================= */
|
|
body.dark-mode {
|
|
--bg-main: #3c3c3c;
|
|
--bg-surface: #3c3c3c;
|
|
--bg-hover: #2a2a2a;
|
|
--border-color: #333;
|
|
--text-main: #f5f5f5;
|
|
--text-muted: #bbb;
|
|
--link-color: #fff;
|
|
--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 {
|
|
|
|
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 {
|
|
|
|
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);
|
|
}
|
|
|
|
body.dark-mode .table.table tbody tr {
|
|
transition: background-color 0.2s ease, color 0.2s ease;
|
|
}
|
|
|
|
body.dark-mode .table.table tbody tr:hover {
|
|
background-color: #2a2a2a !important;
|
|
color: #ffffff !important;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Optional: auch für die Zellen, falls nötig */
|
|
body.dark-mode .table.table tbody tr:hover td {
|
|
background-color: #2a2a2a !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
/* =========================
|
|
Inputs / Forms
|
|
========================= */
|
|
body.dark-mode select,
|
|
body.dark-mode textarea {
|
|
background: var(--bg-surface);
|
|
color: var(--text-main);
|
|
}
|
|
|
|
body.dark-mode input::placeholder {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* =========================
|
|
Navbar Dropdown (Dark Mode)
|
|
========================= */
|
|
body.dark-mode .navbar-dropdown {
|
|
background: var(--bg-surface);
|
|
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
body.dark-mode .section.has-background-light {
|
|
background-color: var(--border-color) !important;
|
|
}
|
|
|
|
body.dark-mode .label.is-small {
|
|
color: var(--text-main) !important;
|
|
}
|
|
|
|
body.dark-mode .button.is-light {
|
|
background-color: var(--bg-main) !important;
|
|
color: var(--text-main) !important;
|
|
} |