/* ========================================================================= Shield Dark — temă full dark mode modernă pentru LicenseBox (Bulma + plugins) Se încarcă ULTIMUL în => suprascrie tema activă. Text alb, suprafețe dark. ========================================================================= */ :root { --sd-bg: #0d1017; --sd-surface: #161b24; --sd-surface-2: #1c2230; --sd-surface-3: #232b3b; --sd-border: #2a3242; --sd-border-2: #38425a; --sd-text: #e8ebf2; --sd-muted: #97a1b4; --sd-accent: #4f7cff; --sd-accent-2: #6b91ff; --sd-shadow: 0 8px 24px rgba(0,0,0,.45); --sd-radius: 12px; } /* ---- baza ---- */ html, body { background: var(--sd-bg) !important; color: var(--sd-text) !important; } body { color: var(--sd-text) !important; } .main_body, .section, .container, .content, .hero, .hero-body { background: transparent !important; color: var(--sd-text) !important; } /* text general */ h1,h2,h3,h4,h5,h6,p,span,label,td,th,li,dt,dd,strong,small,.content, .title,.subtitle,.label,.heading,.is-size-1,.is-size-2,.is-size-3,.is-size-4,.is-size-5,.is-size-6 { color: var(--sd-text) !important; } .subtitle, .help, .has-text-grey, .has-text-grey-light, .heading, .is-muted { color: var(--sd-muted) !important; } .title { color: #fff !important; } a { color: var(--sd-accent) !important; } a:hover { color: var(--sd-accent-2) !important; } hr { background: var(--sd-border) !important; } ::selection { background: var(--sd-accent); color:#fff; } /* ---- navbar (meniul de sus) ---- */ .navbar, .navbar.is-fixed-top, nav.navbar { background: var(--sd-surface) !important; border-bottom: 1px solid var(--sd-border) !important; box-shadow: 0 2px 10px rgba(0,0,0,.35) !important; } .navbar-item, .navbar-link { color: var(--sd-text) !important; } .navbar-item:hover, .navbar-link:hover, .navbar-item.is-active, a.navbar-item:focus, a.navbar-item:hover { background: var(--sd-surface-2) !important; color: #fff !important; } .navbar-link::after { border-color: var(--sd-accent) !important; } .navbar-dropdown, .navbar-dropdown.is-boxed { background: var(--sd-surface-2) !important; border: 1px solid var(--sd-border) !important; box-shadow: var(--sd-shadow) !important; } .navbar-divider { background: var(--sd-border) !important; } .navbar-burger span { background: var(--sd-text) !important; } /* meniu MOBIL (burger expandat) — avea fundal alb din Bulma */ .navbar-menu { background-color: transparent !important; } .navbar-menu.is-active { background-color: var(--sd-surface) !important; box-shadow: 0 8px 20px rgba(0,0,0,.5) !important; border-top: 1px solid var(--sd-border) !important; } .navbar-menu.is-active .navbar-item, .navbar-menu.is-active .navbar-link, .navbar-menu .navbar-item, .navbar-menu .navbar-link { color: var(--sd-text) !important; } .navbar-menu.is-active .navbar-item:hover, .navbar-menu.is-active .navbar-link:hover { background-color: var(--sd-surface-2) !important; } /* ---- boxuri / carduri / panouri ---- */ .box, .card, .panel, .message-body, .modal-card-body, .menu-list a { background: var(--sd-surface) !important; color: var(--sd-text) !important; border: 1px solid var(--sd-border) !important; box-shadow: var(--sd-shadow) !important; border-radius: var(--sd-radius) !important; } .card-header, .card-footer, .modal-card-head, .modal-card-foot, .panel-heading { background: var(--sd-surface-2) !important; color: #fff !important; border-color: var(--sd-border) !important; } .card-header-title { color:#fff !important; } /* ---- inputuri / select / textarea ---- */ .input, .textarea, .select select, input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="date"], input[type="url"], select { background: var(--sd-surface-2) !important; color: var(--sd-text) !important; border: 1px solid var(--sd-border-2) !important; box-shadow: none !important; outline: none !important; } /* placeholder mai DESCHIS ca sa se citeasca */ .input::placeholder, .textarea::placeholder, input::placeholder, textarea::placeholder { color: #9099ab !important; opacity: 1 !important; } /* focus/active/hover = accent, NICIODATA alb */ .input:focus, .textarea:focus, .select select:focus, .is-focused.input, .input:active, .input.is-active, .input.is-focused, .textarea:focus, .textarea.is-focused, input:focus, textarea:focus, select:focus { border-color: var(--sd-accent) !important; box-shadow: 0 0 0 3px rgba(79,124,255,.25) !important; outline: none !important; } .input:hover, .textarea:hover, .select select:hover { border-color: var(--sd-border-2) !important; } .select:not(.is-multiple):not(.is-loading)::after { border-color: var(--sd-accent) !important; } .label { color: var(--sd-text) !important; font-weight: 600; } .control.has-icons-left .icon, .control.has-icons-right .icon { color: var(--sd-muted) !important; } .checkbox:hover, .radio:hover { color: var(--sd-accent-2) !important; } /* ---- butoane ---- */ .button { background: var(--sd-surface-3) !important; color: var(--sd-text) !important; border: 1px solid var(--sd-border-2) !important; } .button:hover { background: #2b3446 !important; border-color: var(--sd-accent) !important; color:#fff !important; } .button.is-primary, .button.is-link { background: var(--sd-accent) !important; border-color: transparent !important; color: #fff !important; } .button.is-primary:hover, .button.is-link:hover { background: var(--sd-accent-2) !important; } .button.is-success { background: #2bb673 !important; color:#fff !important; border-color:transparent !important; } .button.is-danger { background: #e0405a !important; color:#fff !important; border-color:transparent !important; } .button.is-warning { background: #d9932b !important; color:#fff !important; border-color:transparent !important; } .button.is-info { background: #2b8fd9 !important; color:#fff !important; border-color:transparent !important; } .button.is-light { background: var(--sd-surface-3) !important; color: var(--sd-text) !important; } .button.is-white { background: var(--sd-surface-3) !important; color: var(--sd-text) !important; border-color:var(--sd-border-2) !important; } .button[disabled], .button.is-static { opacity:.5 !important; } /* ---- tabele (Bulma + DataTables) ---- */ .table, table.dataTable { background: var(--sd-surface) !important; color: var(--sd-text) !important; border-color: var(--sd-border) !important; } .table th, table.dataTable thead th, table.dataTable thead td { color: #fff !important; border-color: var(--sd-border-2) !important; background: var(--sd-surface-2) !important; } .table td, table.dataTable tbody td { color: var(--sd-text) !important; border-color: var(--sd-border) !important; } .table.is-striped tbody tr:not(.is-selected):nth-child(even), table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd { background: var(--sd-surface-2) !important; } .table.is-hoverable tbody tr:hover, table.dataTable tbody tr:hover { background: #222c3f !important; } .table tr.is-selected { background: var(--sd-accent) !important; } /* DataTables controale */ .dataTables_wrapper, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate { color: var(--sd-muted) !important; } .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--sd-text) !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--sd-accent) !important; color:#fff !important; border-color: transparent !important; } /* ---- notificari / tag-uri / breadcrumb ---- */ .notification { background: var(--sd-surface-2) !important; color: var(--sd-text) !important; border:1px solid var(--sd-border) !important; } .notification.is-success { background: rgba(43,182,115,.18) !important; color:#7ee0a9 !important; border-color: rgba(43,182,115,.4) !important; } .notification.is-danger { background: rgba(224,64,90,.18) !important; color:#ff9aa8 !important; border-color: rgba(224,64,90,.4) !important; } .notification.is-warning { background: rgba(217,147,43,.18) !important; color:#f2c67e !important; border-color: rgba(217,147,43,.4) !important; } .notification.is-info { background: rgba(43,143,217,.18) !important; color:#8fc7f2 !important; border-color: rgba(43,143,217,.4) !important; } .tag:not(body) { background: var(--sd-surface-3) !important; color: var(--sd-text) !important; } .tag.is-light { background: var(--sd-surface-3) !important; color: var(--sd-muted) !important; } /* badge-uri de STATUS cu culori semantice (Active/Valid=verde, Invalid/Blocked=rosu, etc.) */ .tag.is-info { background: rgba(43,143,217,.25) !important; color:#8fc7f2 !important; } .tag.is-success { background: rgba(43,182,115,.24) !important; color:#7ee0a9 !important; } .tag.is-danger { background: rgba(224,64,90,.24) !important; color:#ff9aa8 !important; } .tag.is-warning { background: rgba(217,147,43,.24) !important; color:#f2c67e !important; } .tag.is-primary, .tag.is-link { background: rgba(79,124,255,.24) !important; color:#9db4ff !important; } .tag.is-dark, .tag.is-black { background: var(--sd-surface-3) !important; color: var(--sd-text) !important; } .breadcrumb li a { color: var(--sd-muted) !important; } .breadcrumb li.is-active a { color: var(--sd-text) !important; } .breadcrumb li + li::before { color: var(--sd-border-2) !important; } /* ---- dropdown-uri generice ---- */ .dropdown-content { background: var(--sd-surface-2) !important; border:1px solid var(--sd-border) !important; box-shadow: var(--sd-shadow) !important; } .dropdown-item { color: var(--sd-text) !important; } .dropdown-item:hover, .dropdown-item.is-active { background: var(--sd-surface-3) !important; color:#fff !important; } .dropdown-divider { background: var(--sd-border) !important; } /* ---- modale ---- */ .modal-background { background: rgba(5,7,12,.8) !important; } .modal-card-title { color:#fff !important; } .modal-card { width: 720px !important; max-width: 94% !important; } .modal-card-body { max-height: 74vh !important; } .modal-card-body .textarea { min-height: 3em !important; } /* ---- pre / code ---- */ pre { background: #0a0d13 !important; color: #cfe3ff !important; border:1px solid var(--sd-border) !important; border-radius: 8px !important; } code { background: var(--sd-surface-3) !important; color: #ffcf8f !important; } /* ---- Select2 (formulare) ---- */ .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple, .select2-dropdown, .select2-search__field { background: var(--sd-surface-2) !important; color: var(--sd-text) !important; border-color: var(--sd-border-2) !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--sd-text) !important; } .select2-results__option { color: var(--sd-text) !important; background: var(--sd-surface-2) !important; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--sd-accent) !important; color:#fff !important; } .select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--sd-accent) !important; color:#fff !important; border:none !important; } /* ---- datetimepicker (xdsoft) — complet dark ---- */ .xdsoft_datetimepicker, .xdsoft_datetimepicker .xdsoft_datepicker, .xdsoft_datetimepicker .xdsoft_timepicker { background: var(--sd-surface-2) !important; color: var(--sd-text) !important; border-color: var(--sd-border) !important; box-shadow: var(--sd-shadow) !important; } .xdsoft_datetimepicker .xdsoft_label { background: var(--sd-surface-2) !important; color: #fff !important; } .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select { background: var(--sd-surface-3) !important; color: var(--sd-text) !important; border-color: var(--sd-border) !important; } .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select .xdsoft_option { background: var(--sd-surface-2) !important; color: var(--sd-text) !important; } .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select .xdsoft_option:hover, .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select .xdsoft_option.xdsoft_current { background: var(--sd-accent) !important; color:#fff !important; } .xdsoft_datetimepicker .xdsoft_calendar th { background: var(--sd-surface-3) !important; color: var(--sd-muted) !important; border-color: var(--sd-border) !important; } .xdsoft_datetimepicker .xdsoft_calendar td { background: var(--sd-surface) !important; color: var(--sd-text) !important; border-color: var(--sd-border) !important; } .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled { color: var(--sd-muted) !important; opacity:.5; } .xdsoft_datetimepicker .xdsoft_calendar td:hover, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time:hover { background: var(--sd-surface-3) !important; color:#fff !important; box-shadow:none !important; } .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, .xdsoft_datetimepicker .xdsoft_time.xdsoft_current { background: var(--sd-accent) !important; color:#fff !important; box-shadow:none !important; font-weight:700; } .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today { color: var(--sd-accent-2) !important; } .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time { background: var(--sd-surface) !important; color: var(--sd-text) !important; border-color: var(--sd-border) !important; } .xdsoft_datetimepicker .xdsoft_prev, .xdsoft_datetimepicker .xdsoft_next, .xdsoft_datetimepicker .xdsoft_today_button { filter: invert(1) brightness(1.6); } .xdsoft_datetimepicker .xdsoft_scrollbar > .xdsoft_scroller { background: var(--sd-border-2) !important; } /* ---- paginare DataTables + Bulma ---- */ .pagination-link, .pagination-previous, .pagination-next { background: var(--sd-surface-2) !important; color: var(--sd-text) !important; border-color: var(--sd-border-2) !important; } .pagination-link:hover, .pagination-previous:hover, .pagination-next:hover { border-color: var(--sd-accent) !important; color:#fff !important; background: var(--sd-surface-3) !important; } .pagination-link.is-current { background: var(--sd-accent) !important; border-color: transparent !important; color:#fff !important; } .pagination-previous[disabled], .pagination-next[disabled], .pagination-link[disabled], .pagination-previous.is-disabled, .pagination-next.is-disabled, .pagination [disabled] { background: var(--sd-surface) !important; color: var(--sd-muted) !important; border-color: var(--sd-border) !important; opacity:.55 !important; } .pagination-ellipsis { color: var(--sd-muted) !important; } /* ---- level / progres / hr ---- */ .progress::-webkit-progress-bar { background: var(--sd-surface-3) !important; } .level, .level-item { color: var(--sd-text) !important; } /* ---- scrollbar ---- */ * { scrollbar-color: var(--sd-border-2) var(--sd-bg); scrollbar-width: thin; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--sd-bg); } ::-webkit-scrollbar-thumb { background: var(--sd-border-2); border-radius: 6px; border: 2px solid var(--sd-bg); } ::-webkit-scrollbar-thumb:hover { background: #47536e; } /* ---- iconuri FontAwesome pastreaza culoarea semantica dar default light ---- */ .icon > i.fas, .icon > i.far, .icon > i.fab { color: inherit; } /* ========================================================================= FIX tabele striped (DataTables) — randurile albe. Celulele td/th au fundal alb din tema; le facem TRANSPARENTE ca sa arate culoarea randului, apoi fortam randurile dark (even=surface, odd=surface-2). Override final. ========================================================================= */ .table td, .table th, table.dataTable td, table.dataTable th, table.dataTable tbody td, table.dataTable tbody th, table.dataTable tbody tr td, table.dataTable tbody tr th { background-color: transparent !important; background: transparent !important; } /* randul de baza + par = surface */ .table tbody tr, table.dataTable tbody tr, table.dataTable.stripe tbody tr.even, table.dataTable.display tbody tr.even, table.dataTable tbody tr.even { background-color: var(--sd-surface) !important; } /* randul impar (striped) = surface-2 */ .table.is-striped tbody tr:not(.is-selected):nth-child(odd), table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd, table.dataTable tbody tr.odd { background-color: var(--sd-surface-2) !important; } /* hover pe intreg randul + celule */ .table.is-hoverable tbody tr:hover, table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover, table.dataTable.hover tbody tr:hover > *, table.dataTable.display tbody tr:hover > * { background-color: #222c3f !important; } /* rand selectat */ .table tr.is-selected, table.dataTable tbody tr.selected, table.dataTable tbody tr.selected > * { background-color: rgba(79,124,255,.25) !important; color:#fff !important; } /* textul din celule ramane deschis pe orice rand */ .table tbody td, .table tbody th, table.dataTable tbody td, table.dataTable tbody th { color: var(--sd-text) !important; } /* header tabel bine conturat */ .table thead th, table.dataTable thead th, table.dataTable thead td { background-color: var(--sd-surface-3) !important; color: #fff !important; border-color: var(--sd-border-2) !important; } /* controalele DataTables (Show entries / Search) */ .dataTables_length select, .dataTables_filter input { background: var(--sd-surface-2) !important; color: var(--sd-text) !important; border:1px solid var(--sd-border-2) !important; } .dataTables_length label, .dataTables_filter label { color: var(--sd-muted) !important; } /* ========================================================================= DASHBOARD — carduri statistici (.widget-card, NU .box), activities, helperele de text Bulma (dark->light), containere grafice CanvasJS. ========================================================================= */ .widget-card, .widget-stat, .widget-stat.widget-card { background-color: var(--sd-surface) !important; color: var(--sd-text) !important; border: 1px solid var(--sd-border) !important; box-shadow: var(--sd-shadow) !important; border-radius: var(--sd-radius) !important; } .widget-card-body, .widget-media, .media-body, .card-content, .inbox-messages, .inbox-messages li, .inbox-messages a { background-color: transparent !important; color: var(--sd-text) !important; } .widget-card a, .widget-card h3, .widget-card p, .widget-card span, .counter { color: var(--sd-text) !important; } .counter { color: #fff !important; } /* iconul rotund din card ramane cu accentul lui, doar fundalul dark */ .widget-background { background-color: var(--sd-surface-3) !important; } /* helperele Bulma de text INCHIS -> deschis in dark mode (folosite peste tot) */ .has-text-black, .has-text-black-bis, .has-text-black-ter, .has-text-dark, .has-text-grey-dark { color: var(--sd-text) !important; } .has-text-grey, .has-text-grey-light { color: var(--sd-muted) !important; } /* containere grafice CanvasJS transparente -> arata fundalul dark */ #chartContainer, #chartContainer2, #chart-loading, #chart-loading2, .canvasjs-chart-container { background: transparent !important; } /* ========================================================================= Fix-uri finale: hover dropdown, panou Activities (.message), CKEditor ========================================================================= */ /* hover pe itemii din dropdown-uri (fundal dropdown=surface-2 -> hover surface-3 ca sa se vada) */ .navbar-dropdown a.navbar-item:hover, .navbar-dropdown .navbar-item:hover, .navbar-dropdown a.navbar-item:focus { background-color: var(--sd-surface-3) !important; color: #fff !important; } /* panoul Activities =
*/ .message, .message.is-white, .message.is-primary, .message.is-link, .message.is-info { background-color: var(--sd-surface) !important; border: 1px solid var(--sd-border) !important; } .message-header { background-color: var(--sd-surface-2) !important; color: #fff !important; border-color: var(--sd-border) !important; } .message-header p, .message-header i { color: #fff !important; } .message-body { background-color: transparent !important; color: var(--sd-text) !important; border-color: var(--sd-border) !important; } /* CKEditor 5 (editorul de email pe pagina Licenses) */ .ck.ck-editor { --ck-color-base-background:#1c2230; --ck-color-text:#e8ebf2; --ck-color-base-border:#38425a; } .ck.ck-toolbar, .ck.ck-toolbar__items, .ck.ck-toolbar_grouping { background: var(--sd-surface-2) !important; border-color: var(--sd-border) !important; } .ck.ck-editor__main > .ck-editor__editable, .ck.ck-content, .ck-editor__editable, .ck.ck-editor__editable_inline { background: var(--sd-surface-2) !important; color: var(--sd-text) !important; border-color: var(--sd-border) !important; } .ck.ck-button, .ck.ck-toolbar .ck-button, .ck.ck-button .ck-button__label { color: var(--sd-text) !important; } .ck.ck-button:hover, .ck.ck-button.ck-on, .ck.ck-button:focus { background: var(--sd-surface-3) !important; color:#fff !important; } .ck.ck-icon, .ck.ck-icon * { color: var(--sd-text) !important; } .ck.ck-icon :not([fill="none"]) { fill: currentColor !important; } .ck.ck-dropdown__panel, .ck.ck-list, .ck.ck-balloon-panel { background: var(--sd-surface-2) !important; border-color: var(--sd-border) !important; } .ck.ck-list__item .ck-button:hover, .ck.ck-list__item .ck-button.ck-on { background: var(--sd-surface-3) !important; } .ck.ck-editor__editable.ck-blank::before, .ck-placeholder::before { color: var(--sd-muted) !important; } .ck.ck-reset_all, .ck.ck-reset { color: var(--sd-text) !important; } /* ========================================================================= LOGO — mult mai mare (scoate max-height 1.75rem al Bulma + max-width 200px) ========================================================================= */ .navbar, .navbar.is-primary, .navbar.is-link { min-height: 66px !important; } .navbar-brand { align-items: center !important; overflow: visible !important; } .navbar-brand > .navbar-item, .navbar-brand a.navbar-item:first-child, .navbar-brand a.navbar-item[href] { max-width: none !important; padding-top: .25rem !important; padding-bottom: .25rem !important; height: auto !important; } .navbar-brand img, .navbar-brand .navbar-item img { max-height: 54px !important; height: 54px !important; width: auto !important; } /* ========================================================================= Padding placeholder (aer in campuri) + tags-input (border alb agresiv) ========================================================================= */ .input { padding-left: 16px !important; padding-right: 16px !important; height: 2.75em !important; } .textarea { padding: 12px 16px !important; } .select select { padding-left: 16px !important; height: 2.75em !important; } /* tags-input (Licensed Domains / Licensed IPs) — pluginul are border alb -> dark */ .tags-input { background: var(--sd-surface-2) !important; border: 1px solid var(--sd-border-2) !important; border-radius: 12px !important; padding: 5px 9px !important; min-height: 2.75em !important; box-shadow: none !important; } .tags-input input, .tags-input .input { background: transparent !important; border: none !important; box-shadow: none !important; color: var(--sd-text) !important; height: auto !important; padding-left: 7px !important; } .tags-input input::placeholder { color: #9099ab !important; } .tags-input:focus-within { border-color: var(--sd-accent) !important; box-shadow: 0 0 0 3px rgba(79,124,255,.2) !important; } .tags-input .tag { background: var(--sd-accent) !important; color: #fff !important; } .tags-input .tag .delete, .tags-input .tag .delete::before, .tags-input .tag .delete::after { background: rgba(255,255,255,.28) !important; }