jjsm01/kimai2
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

improved dark mode, automatic theme switch (#5720)

Browse Source
This commit is contained in:
Kevin Papst
2025-12-19 23:51:27 +01:00
committed by GitHub
parent b61420d633
commit 8c1ed68817
90 changed files with 1855 additions and 1956 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
assets/js/forms/KimaiFormSelect.js
View File

@@ -80,6 +80,7 @@ export default class KimaiFormSelect extends KimaiFormTomselectPlugin {
// if there are more than X entries, the other ones are hidden and can only be found
// by typing some characters to trigger the internal option search
// see App\Form\Type\TagsType::MAX_AMOUNT_SELECT
// TODO make this value configurable with a data attribute
maxOptions: 500,
sortField:[{field: '$order'}, {field: '$score'}],
// required so it works in table.responsive, but requires z-index 1056, because bootstrap modal would otherwise hide it

2
assets/js/plugins/KimaiThemeInitializer.js
View File

@@ -48,7 +48,7 @@ export default class KimaiThemeInitializer extends KimaiPlugin {
}
const temp = document.createElement('div');
temp.innerHTML = '<div class="overlay"><div class="fas fa-sync fa-spin"></div></div>';
temp.innerHTML = '<div class="overlay"><div class="progress progress-sm"><div class="progress-bar progress-bar-indeterminate"></div></div></div>';
this.overlay = temp.firstElementChild;
document.querySelector(container).append(this.overlay);
});

24
assets/sass/_app-rtl.scss
View File

@@ -5,13 +5,20 @@
* file that was distributed with this source code.
*/
$modal-backdrop-opacity: 0.6 !default;
$modal-backdrop-opacity: 0.7 !default;
@import "~@tabler/core/scss/config";
/*
THIS DOES NOT WORK AS EXPECTED, AS TABLER IS NOT REGENERATED HERE.
SO WE CANNOT CHANGE VARIABLES, LIKE THE ABOVE...
*/
@import '~@tabler/core/dist/css/tabler.rtl.css';
@import '~@tabler/core/dist/css/tabler-themes.rtl.css';
@import '~tom-select/dist/scss/tom-select';
@import '~tom-select/dist/scss/tom-select.bootstrap5';
@import '~@tabler/core/dist/css/tabler-vendors.rtl.css';
/**
@@ -23,21 +30,6 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts/";
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';
/**
* We need that, to compile the rest of the file
*/
@import "~bootstrap/scss/functions";
@import "~@tabler/core/src/scss/variables";
@import "~@tabler/core/src/scss/variables-dark";
@import "~@tabler/core/src/scss/mixins";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/variables-dark";
@import "~bootstrap/scss/maps";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";
/**
* Kimai related stuff
*/

11
assets/sass/_app.scss
View File

@@ -5,11 +5,14 @@
* file that was distributed with this source code.
*/
$modal-backdrop-opacity: 0.6 !default;
$modal-backdrop-opacity: 0.7 !default;
@import '~@tabler/core/src/scss/tabler';
@import '~@tabler/core/src/scss/vendor/litepicker';
@import '~@tabler/core/src/scss/vendor/tom-select';
@import '~@tabler/core/scss/tabler';
@import '~@tabler/core/scss/tabler-themes';
@import '~@tabler/core/scss/vendor/litepicker';
@import '~tom-select/dist/scss/tom-select.bootstrap5';
@import '~@tabler/core/scss/vendor/tom-select';
/**
* Everyone needs icons

3
assets/sass/_kimai.scss
View File

@@ -11,8 +11,7 @@
@import "modal";
@import "progressbar";
@import "avatar";
@import "theme-dark";
@import "pages";
@import "weekly-hours";
@import "tabler-fixes";
@import "help";
@import "rtl";

12
assets/sass/loading-spinner.scss
View File

@@ -12,14 +12,6 @@
width: 100%;
height: 100%;
z-index: 1021;
background: rgba(255, 255, 255, 0.7);
> .fas {
position: absolute;
top: 50vh;
left: 50vw;
margin-left: -15px;
margin-top: -15px;
color: #000;
font-size: 30px;
}
background-color: var(--tblr-backdrop-bg);
opacity: $modal-backdrop-opacity;
}

7
assets/sass/print.scss
View File

@@ -15,12 +15,11 @@
.content-wrapper {
margin: 0!important;
}
section.content {
margin: 0;
padding: 0;
}
span i.dot {
display: none;
margin-right: 0!important;
}
.float-help {
display: none;
}
}

27
assets/sass/tabler-fixes.scss
View File

@@ -17,16 +17,6 @@ fieldset.form-fieldset > legend {
--tblr-dropdown-divider-margin-y: .5rem;
}
/* fix translucent scroll border (e.g. timesheet modal duration dropdown) - see https://github.com/tabler/tabler/issues/1606 */
.dropdown-menu {
background-clip: border-box;
}
/* hide empty fieldset - see https://github.com/tabler/tabler/issues/1650 */
fieldset:empty {
display: none;
}
:host,:root,[data-bs-theme=light] {
/* remove the shadow from all form element groups */
--tblr-box-shadow-input: none;
@@ -43,20 +33,19 @@ fieldset:empty {
border-style: solid;
}
[data-bs-theme=dark] {
/* fixes https://github.com/tabler/tabler/issues/1974 */
.litepicker .container__days .day-item.is-in-range {
--litepicker-is-in-range-color: var(--tblr-primary-text-emphasis);
}
}
/* fixes contrast of batch-update checkboxes - https://github.com/kimai/kimai/issues/5146 */
.multiupdater[type=checkbox]
{
.multiupdater[type=checkbox] {
--tblr-border-color-translucent: rgba(4, 32, 69, .2);
}
/* fixes height for long tags https://github.com/kimai/kimai/issues/5169 */
.tag {
--tblr-tag-height: unset;
}
/* Page title (e.g. Dashboard) does not work properly in navbar, just outside */
.navbar {
.page-title {
color: var(--tblr-body-color);
}
}

22
assets/sass/tables.scss
View File

@@ -17,22 +17,18 @@ table.dataTable {
position: relative;
}
thead .sorting_asc,
thead .sorting_desc {
font-weight: bold;
}
thead .sorting:after,
thead .sorting_asc:after,
thead .sorting_desc:after {
padding-left: 5px;
font-family: 'Font Awesome 6 Free';
font-family: 'Font Awesome\ 6 Free';
opacity: 0.5;
font-size: 12px;
font-weight: 700
}
thead .sorting:after {
opacity: 0.2;
content: "\f0dc"; /* sort */
content: "\f0dc";
}
thead .sorting_asc:after {
content: "\f077";
@@ -42,7 +38,7 @@ table.dataTable {
}
thead > tr > th {
vertical-align: top;
vertical-align: middle;
white-space: nowrap;
}
@@ -92,7 +88,7 @@ table.dataTable {
&.summary td {
font-weight: bold;
border: 0;
background-color: var(--tblr-bg-surface-secondary);
background-color: var(--tblr-secondary-lt);
}
th.multiCheckbox {
width: 15px;
@@ -135,14 +131,6 @@ table.dataTable {
}
}
/* Quick entry form */
.form-dataTable {
table.dataTable {
.form-group {
margin-bottom: 0;
}
}
}
table.table-hover {
tr {

42
assets/sass/theme-dark.scss
View File

@@ -1,42 +0,0 @@
@include color-mode(dark, true) {
$dark-font-opacity: 0.6;
/*
--tblr-body-bg: #1e222b;
--tblr-bg-surface-tertiary: #1e222b;
--tblr-bg-surface: #1e222b;
--tblr-bg-surface-secondary: #17202b;
//--tblr-muted: #d9dcdf;
*/
.table thead th {
color: inherit;
opacity: $dark-font-opacity;
}
table.dataTable {
thead .sorting:after {
opacity: $dark-font-opacity;
}
}
.overlay {
background: rgba(0, 0, 0, 0.5);
> .fas {
color: var(--tblr-white);
}
}
/* Fix tabs pills (e.g. user profile) */
.nav {
--tblr-nav-link-color: inherit;
opacity: $dark-font-opacity;
}
.datagrid-title {
color: inherit;
opacity: $dark-font-opacity;
}
.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
color: inherit;
}
}

79
assets/sass/pages.scss → assets/sass/weekly-hours.scss
View File

@@ -5,12 +5,17 @@
* file that was distributed with this source code.
*/
/*
----------- This file contains rules that only page to certain pages -----------
*/
/* This file contains rules for the "weekly-hours" AKA "quick-entries" form */
/* weekly working times AKA quick-entries form */
section.quick-entry-page {
.quick-entry-page {
.form-dataTable {
table.dataTable {
.form-group {
margin-bottom: 0;
}
}
}
#quick_entry_form {
display: none;
@@ -46,20 +51,15 @@ section.quick-entry-page {
}
.btn-duration-preset {
display: none;
padding: 7px 5px 7px 2px;
min-width: 30px;
}
input.duration-input {
padding: 7px 5px;
max-width: 100%;
max-width: 50px;
border-bottom-right-radius: var(--tblr-border-radius);
border-top-right-radius: var(--tblr-border-radius);
}
}
table.dataTable thead th,
table.dataTable td.total {
padding: .75rem 2px;
}
}
/* make sure dropdown never hides behind table responsive */
@@ -69,25 +69,33 @@ section.quick-entry-page {
}
@media (min-width: 900px) {
section.quick-entry-page {
.quick-entry-page {
.ts-wrapper {
max-width: 170px;
}
}
}
@media (min-width: 1000px) {
section.quick-entry-page {
@media (min-width: 992px) {
.quick-entry-page {
.ts-wrapper {
max-width: 180px;
max-width: 100px;
}
}
}
@media (min-width: 1100px) {
.quick-entry-page {
.ts-wrapper {
max-width: 160px;
}
}
}
@media (min-width: 1200px) {
section.quick-entry-page {
.quick-entry-page {
.ts-wrapper {
max-width: 210px;
max-width: 165px;
}
.duration-widget {
max-width: 100%;
@@ -96,12 +104,12 @@ section.quick-entry-page {
}
@media (min-width: 1250px) {
section.quick-entry-page {
.quick-entry-page {
#quick_entry_box {
.duration-widget {
.input-group {
max-width: 70px;
min-width: 70px;
max-width: 85px;
min-width: 75px;
}
.btn-duration-preset {
display: flex;
@@ -111,48 +119,51 @@ section.quick-entry-page {
border-top-right-radius: 0;
}
}
table.dataTable thead th,
table.dataTable td.total {
padding: .75rem;
}
}
}
}
@media (min-width: 1300px) {
section.quick-entry-page {
.quick-entry-page {
#quick_entry_box {
.duration-widget {
input.duration-input {
max-width: 100%;
}
}
}
.ts-wrapper {
max-width: 230px;
max-width: 190px;
}
}
}
@media (min-width: 1400px) {
section.quick-entry-page {
.quick-entry-page {
.ts-wrapper {
max-width: 270px;
max-width: 235px;
}
}
}
@media (min-width: 1500px) {
section.quick-entry-page {
.quick-entry-page {
.ts-wrapper {
max-width: 300px;
max-width: 290px;
}
}
}
@media (min-width: 1600px) {
section.quick-entry-page {
.quick-entry-page {
.ts-wrapper {
max-width: 370px;
max-width: 340px;
}
}
}
@media (min-width: 1800px) {
section.quick-entry-page {
.quick-entry-page {
.ts-wrapper {
max-width: 450px;
}