/** This file adjusts things so that Tabler looks specific to the project. Add your own styles to this file. */ * { scrollbar-color: inherit; } /* Set Inter as the default font family with sans-serif fallback and 14px size */ :root { --tblr-font-sans-serif: 'Inter', sans-serif; --tblr-font-size-base: 14.2px; } /* Light theme */ :root, [data-bs-theme=light], [data-menu-theme=light] { --tblr-body-color: rgb(46, 46, 46); /* Light border color */ --tblr-input-border-color: rgb(197, 201, 209); /* --tblr-border-color: rgb(210, 214, 222); */ --tblr-darker-border-color: #d2d6de; --tblr-neutral-bg-color: #ffffff; } /* Dark theme */ [data-bs-theme=dark], [data-menu-theme=dark] { /* Main content colors - using neutral whites instead of light greens */ --tblr-body-color: #e2e2e2; /* Light neutral gray for main text */ --tblr-body-color-rgb: 226, 226, 226; --tblr-body-bg: #151e15; --tblr-body-bg-rgb: 21, 30, 21; /* Inverted (Dark) border color */ --tblr-input-border-color: rgb(46, 47, 50); --tblr-darker-border-color: #242528; --tblr-neutral-bg-color: var(--tblr-body-bg); } /* All inputs are darker bordered */ [data-bs-theme=light] select, [data-bs-theme=light] input, [data-bs-theme=light] textarea, [data-bs-theme=light] .form-control { border-color: var(--tblr-input-border-color); } /* Hack of a hack */ [data-bs-theme=light] .select2.select2-container { border: 1px solid var(--tblr-input-border-color) !important; } body { font-family: var(--tblr-font-sans-serif); font-size: var(--tblr-font-size-base); } /* Tabler view */ .table thead th, .table tfoot th { font-size: var(--tblr-font-size-base); text-transform: none; letter-spacing: normal; color: var(--tblr-dark); } /* Dropdown menu / Navigation menu */ .nav-menu-item-container { display: flex; flex-direction: row; padding-left: 0; } .navbar-expand-lg .navbar-nav { flex-wrap: wrap; } .dropdown-header { font-size: calc(var(--tblr-font-size-base) * 0.9); text-transform: none; letter-spacing: normal; color: var(--tblr-muted); margin: 0.5rem 0; } .nav-link:focus, .nav-link:hover, .dropdown-item:focus, .dropdown-item:hover { /*color: rgba(var(--tblr-primary-rgb), 0.8) !important;*/ color: var(--tblr-link-hover-color) !important; } /* Link hover is light for left vertical dark menu theme */ .navbar-vertical.navbar-dark .nav-link:focus, .navbar-vertical.navbar-dark .nav-link:hover, .navbar-vertical.navbar-dark .dropdown-item:focus, .navbar-vertical.navbar-dark .dropdown-item:hover, [data-menu-theme="dark"] .btn-link:hover, [data-menu-theme="dark"] a:not(.btn):hover { color: #e2e2e2 !important; } /* CRUD general view */ .breadcrumb { margin-top: -0.5rem !important; margin-bottom: 0.75rem !important; font-size: calc(var(--tblr-font-size-base) * 0.9); } section.header-operation.container-fluid, section.header-operation.container-fluid.mb-2 { margin-bottom: 0 !important; padding-bottom: 1.25rem; padding-top: 1.25rem; background-color: var(--tblr-neutral-bg-color); border-radius: 4px 4px 0 0; border: 1px solid var(--tblr-darker-border-color); border-width: 1px 1px 0 1px; border-bottom: none; } main > section[class*="container"], main > div[class*="container"] { background-color: var(--tblr-neutral-bg-color); padding-bottom: 1rem; padding-top: 1rem; border-radius: 0 0 4px 4px; border: 1px solid var(--tblr-darker-border-color); } /* Select2 */ .select2-container .select2-selection--single { height: auto !important; min-height: 18px; } /* Grid */ /* Make remove_filters_button more prominent */ #remove_filters_button { margin-left: 1rem; background-color: var(--tblr-warning) !important; color: var(--tblr-gray-100) !important; } #remove_filters_button i { margin-right: 0.25rem; display: none; } /* X char */ #remove_filters_button:before { margin-right: 0.25rem; content: "✖"; font-size: 1rem; } [bp-section="crud-operation-list"] .align-items-center { margin-bottom: 1rem !important; } #crudTable th { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .markdown > table > :not(caption) > * > *, .table > :not(caption) > * > * { line-height: 118%; } .navbar.navbar-filters { background-color: var(--tblr-body-bg); } .navbar.navbar-filters .nav-link { text-transform: none; font-size: calc(var(--tblr-font-size-base) * 0.9); } /* Rule 1 */ /*#crudTable tr th:first-child, #crudTable table.dataTable tr th:first-child, */ #crudTable tr td:first-child, #crudTable table.dataTable tr td:first-child, /* Rule 2 */ .markdown > table > :not(caption) > * > *, .table > :not(caption) > * > * { padding: 0.32rem; } /* Grid row form view handle ⋮ */ #crudTable_wrapper #crudTable.dtr-none > tbody > tr > td > div.dtr-control::before, #crudTable_wrapper table.dataTable.dtr-none > tbody > tr > td > div.dtr-control::before { vertical-align: text-bottom; margin-left: 0.1rem; margin-right: 0.4rem; } /* Grid button */ #crudTable .btn-link { background-color: var(--tblr-neutral-bg-color); border-color: var(--tblr-border-color); } /* Hover */ #crudTable .btn-link:hover { background-color: var(--tblr-primary); color: var(--tblr-gray-200); } /* Delete is error colroed*/ #crudTable .btn-link[data-button-type="delete"]:hover { background-color: var(--tblr-danger); } /* Preview is info */ #crudTable .btn-link[bp-button="preview"]:hover { background-color: var(--tblr-info); } /* Edit is warning */ #crudTable .btn-link[bp-button="edit"]:hover { background-color: var(--tblr-warning); } /* Small */ #crudTable .btn-link.btn-sm { padding: 0.25rem 0.5rem; font-size: calc(var(--tblr-font-size-base) * 0.9); } /* Badge */ .badge { user-select: text; } .badge-thin { font-weight: 400; } a.badge.bg-secondary { /* Dark grey background badge has white text */ color: #e2e2e2; } /* Form */ div.row div.form-group { padding-bottom: 6px; } .form-group label { font-weight: 600; } .bg-light-blue { background-color: #bbe1f8; } .bg-lighter-blue { background-color: #edf8ff; } /* Buttons, button icon */ .btn .la { margin-right: 0.5rem; } /* Only if there is a text next to it */ .btn .la:only-child { margin-right: 0; } /* Space between buttons */ .btn + .btn { margin-left: 5px; }