@import '/client/css/espo/light.css'; :root { --btn-primary-bg: #2A3349; --btn-primary-border: #2A3349; --btn-primary-hover-bg: #1f2536; --btn-primary-hover-border: #1f2536; } a, a:hover { color: #0074be; } body, body[data-navbar="side"] #navbar .navbar-right, body[data-navbar="side"].minimized.side-menu-opened #navbar .navbar-right, .list-sticky-bar { background-color: #f0f0f0; } #navbar .navbar-brand img { height: initial !important; margin-top: 5px; } #navbar .navbar { border-right: 1px solid #2A3349 !important; background-color: #2A3349; } .tab-divider span.label-text { color: #fff !important; } .navbar-inverse .navbar-nav .tab a span { color: #ffffff; opacity: 0.7; } #navbar .navbar-inverse .navbar-nav .tab.active a.nav-link, #navbar .navbar-inverse .navbar-nav .tab.active a.nav-link:hover { background-color: #e8494f; } #navbar .navbar-inverse .navbar-nav .tab.active a.nav-link .short-label, #navbar .navbar-inverse .navbar-nav .tab.active a.nav-link .full-label { opacity: 1; } #navbar .navbar-inverse .navbar-nav li.tab a:focus, #navbar .navbar-inverse .navbar-nav li.tab a:hover, #navbar .navbar-inverse .navbar-nav li.tab.open a, #navbar .navbar-inverse .navbar-left-container .navbar-nav .dropdown-menu { background-color: #1f2536; } #navbar .navbar-inverse .navbar-left-container .navbar-nav li.tab-group ul.dropdown-menu { padding-top: 3px !important; padding-bottom: 3px !important; } #navbar .navbar-inverse .navbar-left-container .navbar-nav .dropdown-menu .divider { background-color: #242b3f; margin: 3px 0; } #navbar .navbar-inverse .navbar-nav li.tab a:focus span, #navbar .navbar-inverse .navbar-nav li.tab a:hover span { opacity: 1; } /* Login */ #catalyst-login::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: -1; background-image: url('/client/modules/catalyst/img/loginbg.jpg'); background-size: cover; } #login .logo-container { width: 100%; height: initial; text-align: center; padding: 0 50px; } #login .logo-container img.logo { max-width: 350px; width:100%; } #login { border: none; border-radius: 16px; padding:35px 35px 25px 35px; } #login.panel .panel-heading { background: none; padding-bottom: 35px; } #login.panel .panel-body { padding: 0; } #login-form .catalyst-system-links { padding-top:15px; font-size: 0.75rem; font-style: italic; } #login-form .catalyst-system-links .application-name { float: right; } #login-form .cell[data-name="sign-in"] { text-align: center; } #login-form .manual-login { margin-top: 20px; } #sign-in { padding-left: 12px; padding-right: 12px; } #sign-in span { margin-left: 8px } /* Case - Fixed work items panel */ .panel .caseitems { /* padding-top: 0; */ margin-top: -35px; } /* ============================================================================= DARK MODE Activated by adding the class "dark" to the element. ============================================================================= */ html.dark { /* ── Core backgrounds ───────────────────────────────────────────── */ --body-bg: #12141c; --panel-bg: #1a1d28; --panel-default-bg: #1a1d28; --table-bg: #1a1d28; --table-bg-accent: #1f2331; /* ── Text ───────────────────────────────────────────────────────── */ --text-color: #bfc3cc; --text-white-color: #ebedf2; --text-muted-color: #707683; --text-gray-color: #8a90a0; --gray-soft: #707683; --gray: #8a90a0; --gray-dark: #bfc3cc; --gray-light: #5a6070; --gray-lighter: #292e3d; /* ── Links ──────────────────────────────────────────────────────── */ --link-color: #4e92d7; --link-hover-color: #6aa6e3; /* ── Borders & dividers ─────────────────────────────────────────── */ --default-border-color: #292e3d; --panel-default-border: #292e3d; --panel-primary-border: #1e3a5f; --panel-success-border: #1a3d2a; --panel-danger-border: #3d1f28; --panel-warning-border: #3d2f0f; --panel-info-border: #2a2040; --code-border-color: #292e3d; --input-border: #292e3d; --default-heading-bg-color: #1a1d28; --warning-bg: #1f1d12; --calendar-border: #292e3d; --dropdown-divider-bg: #292e3d; /* ── Inputs ─────────────────────────────────────────────────────── */ --input-bg: #202533; --input-color: #ebedf2; --input-bg-disabled: #1a1d28; --input-color-disabled: #707683; /* ── Buttons (default) ──────────────────────────────────────────── */ --btn-default-bg: #252b3b; --btn-default-border: #292e3d; --btn-default-color: #bfc3cc; --btn-default-hover-bg: #2e3548; --btn-default-hover-border: #3a435c; --btn-default-active-bg: #363e54; --btn-default-active-border: #47526e; --btn-text-color: #bfc3cc; /* ── Buttons (success) ──────────────────────────────────────────── */ --btn-success-bg: #1e4a2a; --btn-success-border: #255933; --btn-success-color: #a0d9aa; --btn-success-hover-bg: #255933; --btn-success-hover-border: #2e6e3f; --btn-success-active-bg: #2e6e3f; --btn-success-active-border: #388049; /* ── Dropdowns & popovers ───────────────────────────────────────── */ --dropdown-bg: #1a1d28; --popover-bg: #1a1d28; --dropdown-border: #292e3d; --dropdown-link-color: #bfc3cc; --dropdown-link-hover-color: #ebedf2; --dropdown-link-hover-bg: #252b3b; --dropdown-link-active-bg: #2e3548; --dropdown-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* ── Navbar ─────────────────────────────────────────────────────── */ --navbar-bg: #161921; --navbar-inverse-bg: #161921; --navbar-inverse-border: #1a1d28; --navbar-inverse-link-color: #bfc3cc; --navbar-inverse-link-hover-color: #ebedf2; --navbar-inverse-link-hover-bg: #252b3b; --navbar-inverse-link-active-bg: #2e3548; --navbar-inverse-link-icon-color: #8a90a0; --navbar-inverse-link-icon-hover-color: #bfc3cc; --navbar-link-color: #8a90a0; --navbar-link-hover-color: #bfc3cc; --navbar-link-hover-bg: #12141c; --navbar-link-active-bg: #252b3b; /* ── Modals ─────────────────────────────────────────────────────── */ --modal-content-bg: #12141c; --modal-header-bg: #161921; --modal-footer-bg: #161921; --modal-header-border-color: #292e3d; --modal-border-color: #292e3d; --modal-backdrop-bg: rgba(0, 0, 0, 0.75); /* ── Panels (coloured headings) ─────────────────────────────────── */ --panel-primary-bg: #1a2d47; --panel-success-bg: #162a1f; --panel-danger-bg: #2e1620; --panel-warning-bg: #2b2210; --panel-info-bg: #1e1830; --panel-primary-text: #4e92d7; --panel-success-text: #66c482; --panel-danger-text: #e0828f; --panel-warning-text: #d4aa60; --panel-info-text: #a895c8; /* ── State colours ──────────────────────────────────────────────── */ --state-default-bg: #252b3b; --state-default-text: #8a90a0; --state-primary-bg: #1a2d47; --state-primary-text: #4e92d7; --state-primary-border: #1e3a5f; --state-danger-bg: #2e1620; --state-danger-text: #e0828f; --state-danger-border: #4a1f2e; --state-info-bg: #1e1830; --state-info-text: #a895c8; --state-info-border: #2d2345; --state-success-bg: #162a1f; --state-success-text: #66c482; --state-success-border: #1d3828; --state-warning-bg: #2b2210; --state-warning-text: #d4aa60; --state-warning-border: #3d3115; /* ── Selects / tags ─────────────────────────────────────────────── */ --select-item-bg: #252b3b; --select-item-text-color: #bfc3cc; --select-item-active-bg: #4e92d7; --select-item-active-text-color: #fff; --select-item-border: #707683; /* ── Labels & badges ────────────────────────────────────────────── */ --label-default-bg: #707683; /* ── Code blocks ────────────────────────────────────────────────── */ --code-bg: #161921; --code-color: #bfc3cc; /* ── Scrollbars ─────────────────────────────────────────────────── */ --scroll-bg: #161921; --scroll-thumb-bg: #292e3d; /* ── Tooltips ───────────────────────────────────────────────────── */ --tooltip-bg: #ebedf2; --tooltip-color: #12141c; /* ── Wells ──────────────────────────────────────────────────────── */ --well-bg: #1a1d28; --well-border: #292e3d; /* ── Shadows ────────────────────────────────────────────────────── */ --default-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4); --top-bar-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); /* ── Misc ───────────────────────────────────────────────────────── */ --collapsed-modal-bg: #202533; --blockquote-border-color: #202533; --calendar-today-bg: #2b2210; --calendar-busy-bg: #3d2d55; --site-footer-color: #707683; } /* ─── Body & sticky bars ────────────────────────────────────────── */ html.dark body { background-color: #12141c !important; } html.dark body, html.dark body[data-navbar="side"] #navbar .navbar-right, html.dark body[data-navbar="side"].minimized.side-menu-opened #navbar .navbar-right, html.dark .list-sticky-bar { background-color: #12141c; } html.dark .list-sticky-bar, html.dark .stick-sub.button-container { background-color: #161921; } /* ─── Links ─────────────────────────────────────────────────────── */ html.dark a, html.dark a:hover { color: #4e92d7; } /* ─── Navbar (catawesome hard-coded values) ─────────────────────── */ html.dark #navbar .navbar { border-right-color: #161921 !important; background-color: #161921; } html.dark #navbar .navbar-inverse .navbar-nav .tab.active a.nav-link, html.dark #navbar .navbar-inverse .navbar-nav .tab.active a.nav-link:hover { background-color: #942a33; /* Darker red from mockup */ } html.dark #navbar .navbar-inverse .navbar-nav li.tab a:focus, html.dark #navbar .navbar-inverse .navbar-nav li.tab a:hover, html.dark #navbar .navbar-inverse .navbar-nav li.tab.open a, html.dark #navbar .navbar-inverse .navbar-left-container .navbar-nav .dropdown-menu { background-color: #12141c; } html.dark #navbar .navbar-inverse .navbar-left-container .navbar-nav .dropdown-menu .divider { background-color: #1a1d28; } /* ─── Panel headings ────────────────────────────────────────────── */ html.dark body .panel-default > .panel-heading { background-color: transparent; /* Makes it blend into the panel like the mockup */ border-bottom: 1px solid var(--default-border-color); /* Adds the subtle divider */ color: #ebedf2; } /* ─── Inputs ────────────────────────────────────────────────────── */ html.dark .form-control, html.dark .selectize-input { background-color: #202533; color: #ebedf2; border-color: #292e3d; } html.dark .form-control::placeholder { color: #707683; } html.dark .form-control[disabled], html.dark .form-control[readonly], html.dark fieldset[disabled] .form-control { background-color: #1a1d28; color: #707683; } /* ─── Tables ────────────────────────────────────────────────────── */ html.dark .table > tbody > tr > td, html.dark .table > tbody > tr > th, html.dark .table > thead > tr > td, html.dark .table > thead > tr > th { border-top-color: #292e3d; } html.dark .table > thead > tr > th { border-bottom-color: #292e3d; } html.dark .table-hover > tbody > tr:hover { background-color: #1f2331; } /* ========================================================================== THEME TOGGLE ========================================================================== */ .dropdown-menu a.active { font-weight: 600; }