AS1024/Kanboard-Prod
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add Themes: Dark, light and automatic mode

Browse Source
This commit is contained in:
Frédéric Guillot
2023-05-12 21:09:30 -07:00
committed by Frédéric Guillot
parent 65a5f0f47d
commit aade89c9ba
89 changed files with 1129 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
assets/css/app.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
assets/css/auto.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
assets/css/dark.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
assets/css/light.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

4
assets/css/src/activity_stream.css
View File

@@ -18,7 +18,7 @@
}
.activity-content {
margin-left: 55px
margin-left: 55px;
}
.activity-title {
@@ -28,7 +28,7 @@
}
.activity-description {
color: var(--color-medium);
color: var(--color-light);
margin-top: 10px
}

1
assets/css/src/base.css
View File

@@ -14,6 +14,7 @@ body {
}
body {
background-color: var(--body-background-color);
font-size: 100%;
padding-bottom: 10px;
color: var(--color-primary);

13
assets/css/src/board.css
View File

@@ -60,7 +60,7 @@
td.board-column-task-collapsed {
font-weight: bold;
background-color: #fbfbfb
background-color: var(--table-header-background-color)
}
#board th.board-column-header-collapsed {
@@ -79,14 +79,7 @@ td.board-column-task-collapsed {
.board-rotation {
white-space: nowrap;
-webkit-backface-visibility: hidden;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%
}
@@ -152,8 +145,8 @@ a.board-swimlane-toggle:focus {
}
.draggable-placeholder {
border: 2px dashed #000;
background: #fafafa;
border: 2px dashed var(--draggable-placeholder-border-color);
background: var(--draggable-placeholder-background-color);
height: 70px;
margin-bottom: 10px
}

14
assets/css/src/comment.css
View File

@@ -18,7 +18,7 @@
}
.comment-title {
border-bottom: 1px dotted #eee;
border-bottom: 1px dotted var(--comment-title-border-color);
margin-left: 55px
}
@@ -44,22 +44,22 @@
}
.comments .comment-highlighted {
background-color: #fff8dc;
border: 2px solid #ffeb8e
background-color: var(--comment-highlighted-background-color);
border: 2px solid var(--comment-highlighted-border-color);
}
.comments .comment-highlighted:hover {
background-color: #fff8dc
background-color: var(--comment-highlighted-hover-background-color)
}
.comments .comment:hover {
background: #fff8dc
background: var(--comment-highlighted-hover-background-color)
}
.comments .comment:nth-child(even):not(.comment-highlighted) {
background: #fbfbfb
background: var(--comment-nth-background-color);
}
.comments .comment:nth-child(even):not(.comment-highlighted):hover {
background: #fff8dc
background: var(--comment-highlighted-hover-background-color)
}

14
assets/css/src/dropdown.css
View File

@@ -23,8 +23,8 @@ ul.dropdown-submenu-open {
list-style: none;
margin: 3px 0 0 1px;
padding: 6px 0;
background-color: #fff;
border: 1px solid #b2b2b2;
background-color: var(--dropdown-background-color);
border: 1px solid var(--dropdown-border-color);
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15)
}
@@ -34,7 +34,7 @@ ul.dropdown-submenu-open {
margin: 0;
padding: 8px 10px;
font-size: 0.9em;
border-bottom: 1px solid #f8f8f8;
border-bottom: 1px solid var(--dropdown-li-border-color);
cursor: pointer
}
@@ -61,7 +61,7 @@ ul.dropdown-submenu-open {
.dropdown-submenu-open a {
text-decoration: none;
color: #333
color: var(--color-primary)
}
.dropdown-submenu-open a:focus {
@@ -70,7 +70,7 @@ ul.dropdown-submenu-open {
.dropdown-menu-link-text,
.dropdown-menu-link-icon {
color: #333;
color: var(--color-primary);
text-decoration: none
}
@@ -79,11 +79,11 @@ ul.dropdown-submenu-open {
}
td a.dropdown-menu strong {
color: #333
color: var(--color-primary);
}
td a.dropdown-menu strong i {
color: #333
color: var(--color-primary);
}
td a.dropdown-menu i {

65
assets/css/src/form.css
View File

@@ -17,6 +17,7 @@ label {
input, textarea {
font-family: sans-serif;
background-color: var(--input-background-color);
}
input[type="number"],
@@ -25,7 +26,7 @@ input[type="email"],
input[type="password"],
input[type="text"]:not(.input-addon-field) {
color: var(--color-light);
border: 1px solid #ccc;
border: 1px solid var(--input-border-color);
width: 300px;
max-width: 95%;
font-size: 1em;
@@ -36,28 +37,12 @@ input[type="text"]:not(.input-addon-field) {
-moz-appearance: none
}
input[type="number"]::-webkit-input-placeholder,
input[type="date"]::-webkit-input-placeholder,
input[type="email"]::-webkit-input-placeholder,
input[type="password"]::-webkit-input-placeholder,
input[type="text"]:not(.input-addon-field)::-webkit-input-placeholder {
color: #dedede
}
input[type="number"]::-moz-placeholder,
input[type="date"]::-moz-placeholder,
input[type="email"]::-moz-placeholder,
input[type="password"]::-moz-placeholder,
input[type="text"]:not(.input-addon-field)::-moz-placeholder {
color: #dedede
}
input[type="number"]:-ms-input-placeholder,
input[type="date"]:-ms-input-placeholder,
input[type="email"]:-ms-input-placeholder,
input[type="password"]:-ms-input-placeholder,
input[type="text"]:not(.input-addon-field):-ms-input-placeholder {
color: #dedede
input[type="number"]::placeholder,
input[type="date"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="text"]:not(.input-addon-field)::placeholder {
color: var(--input-placeholder-color)
}
input[type="number"]:focus,
@@ -65,10 +50,10 @@ input[type="date"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="text"]:focus {
color: #000;
border-color: rgba(82, 168, 236, 0.8);
color: var(--input-focus-color);
border-color: var(--input-focus-border-color);
outline: 0;
box-shadow: 0 0 8px rgba(82, 168, 236, 0.6)
box-shadow: 0 0 8px var(--input-focus-shadow-color);
}
input[type="number"] {
@@ -93,31 +78,23 @@ input[type="text"]:not(.input-addon-field).form-input-small {
}
textarea:focus {
color: #000;
border-color: rgba(82, 168, 236, 0.8);
color: var(--input-focus-color);
border-color: var(--input-focus-border-color);
outline: 0;
box-shadow: 0 0 8px rgba(82, 168, 236, 0.6)
box-shadow: 0 0 8px var(--input-focus-shadow-color);
}
textarea {
padding: 4px;
border: 1px solid #ccc;
border: 1px solid var(--input-border-color);
width: 400px;
max-width: 99%;
height: 200px;
font-size: 1em
}
textarea::-webkit-input-placeholder {
color: #dedede
}
textarea::-moz-placeholder {
color: #dedede
}
textarea:-ms-input-placeholder {
color: #dedede
textarea::placeholder {
color: var(--input-placeholder-color)
}
select {
@@ -164,17 +141,17 @@ input[type="text"].form-max-width {
input.form-error,
textarea.form-error {
border: 2px solid #b94a48
border: 2px solid var(--form-error-color);
}
input.form-error:focus,
textarea.form-error:focus {
box-shadow: none;
border: 2px solid #b94a48
border: 2px solid var(--form-error-color)
}
.form-errors {
color: #b94a48;
color: var(--form-error-color);
list-style-type: none
}
@@ -184,7 +161,7 @@ ul.form-errors li {
.form-help {
font-size: 0.8em;
color: brown;
color: var(--form-help-color);
margin-bottom: 15px
}

2
assets/css/src/header.css
View File

@@ -4,7 +4,7 @@ header {
padding: 5px 10px;
margin-bottom: 5px;
border-bottom: 1px solid #dedede;
background-color: #fbfbfb
background-color: var(--header-background-color);
}
header .title-container {

4
assets/css/src/input_addon.css
View File

@@ -20,8 +20,8 @@
}
.input-addon-item {
background-color: rgba(147, 128, 108, 0.1);
color: #666;
background-color: var(--input-addon-background-color);
color: var(--input-addon-color);
font: inherit;
font-weight: normal
}

2
assets/css/src/modal.css
View File

@@ -15,7 +15,7 @@
top: 2%;
left: 50%;
transform: translateX(-50%);
background: #fff;
background: var(--body-background-color);
overflow: auto;
border-radius: 5px
}

4
assets/css/src/panel.css
View File

@@ -3,9 +3,9 @@
padding: 8px 35px 8px 10px;
margin-top: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border: 1px solid var(--panel-border-color);
color: var(--color-primary);
background-color: #fcfcfc;
background-color: var(--panel-background-color);
overflow: auto
}

10
assets/css/src/select_dropdown.css
View File

@@ -4,9 +4,9 @@
z-index: 1000;
min-width: 160px;
padding: 5px 0;
background: #fff;
background: var(--dropdown-background-color);
list-style: none;
border: 1px solid #ccc;
border: 1px solid var(--dropdown-border-color);
border-radius: 3px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
overflow: scroll
@@ -18,7 +18,7 @@
padding: 3px 10px;
color: var(--color-medium);
cursor: pointer;
border-bottom: 1px solid #f8f8f8;
border-bottom: 1px solid var(--dropdown-li-border-color);
line-height: 1.5em;
font-weight: 400
}
@@ -34,9 +34,9 @@
.select-dropdown-input-container {
position: relative;
border: 1px solid #ccc;
border: 1px solid var(--input-border-color);
border-radius: 5px;
background-color: #fff;
background-color: var(--input-background-color);
max-width: 300px
}

4
assets/css/src/sidebar.css
View File

@@ -60,7 +60,7 @@
.sidebar>ul li {
list-style-type: none;
line-height: 35px;
border-bottom: 1px dotted #efefef;
border-bottom: 1px dotted var(--sidebar-border-color);
padding-left: 13px
}
@@ -76,7 +76,7 @@
.sidebar>ul li.active a {
color: var(--color-primary);
font-weight: bold
font-weight: 400
}
.sidebar-icons>ul li {

12
assets/css/src/table.css
View File

@@ -25,7 +25,7 @@ table.table-small {
}
table.table-striped tr:nth-child(odd) {
background: #fefefe
background: var(--table-nth-background-color);
}
@media (max-width: 768px) {
@@ -41,8 +41,8 @@ table.table-striped tr:nth-child(odd) {
table th {
text-align: left;
padding: 0.5em 3px;
border: 1px solid #eee;
background: #fbfbfb
border: 1px solid var(--table-border-color);
background-color: var(--table-header-background-color)
}
table th a {
@@ -56,7 +56,7 @@ table th a:hover {
}
table td {
border: 1px solid #eee;
border: 1px solid var(--table-border-color);
padding: 0.5em 3px;
vertical-align: top
}
@@ -65,6 +65,10 @@ table td li {
margin-left: 20px
}
.task-table a {
color: #000;
}
.column-1 {
width: 1%
}

8
assets/css/src/table_drag_and_drop.css
View File

@@ -1,6 +1,6 @@
.draggable-row-handle {
cursor: move;
color: #dedede
color: var(--draggable-row-handle-color)
}
.draggable-row-handle:hover {
@@ -8,8 +8,8 @@
}
tr.draggable-item-selected {
background: #fff;
border: 2px solid #666;
background: var(--draggable-item-selected-background-color);
border: 2px solid var(--draggable-item-selected-border-color);
box-shadow: 4px 2px 10px -4px rgba(0, 0, 0, 0.55)
}
@@ -28,5 +28,5 @@ tr.draggable-item-selected td:last-child {
.table-stripped tr.draggable-item-hover,
.table-stripped tr.draggable-item-hover {
background: #FEFFF2
background: var(--draggable-item-hover-background-color)
}

28
assets/css/src/table_list.css
View File

@@ -4,8 +4,8 @@
}
.table-list-header {
background: #fbfbfb;
border: 1px solid #e5e5e5;
background: var(--table-list-header-background-color);
border: 1px solid var(--table-list-header-border-color);
border-radius: 5px 5px 0 0;
line-height: 28px;
padding-left: 3px;
@@ -13,7 +13,7 @@
}
.table-list-header a {
color: #333;
color: var(--color-primary);
font-weight: 500;
text-decoration: none;
margin-right: 10px
@@ -31,22 +31,22 @@
}
.table-list-header .table-list-header-menu {
text-align: right
text-align: right;
}
.table-list-row {
padding-left: 3px;
padding-right: 3px;
border-bottom: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5
border-bottom: 1px solid var(--table-list-border-color);
border-right: 1px solid var(--table-list-border-color);
}
.table-list-row.table-border-left {
border-left: 1px solid #e5e5e5
border-left: 1px solid var(--table-list-border-color);
}
.table-list-row:nth-child(odd) {
background: #fefefe
background: var(--table-list-nth-background-color)
}
.table-list-row:last-child {
@@ -54,9 +54,9 @@
}
.table-list-row:hover {
background: #fff8dc;
border-bottom: 1px solid #ffeb8e;
border-right: 1px solid #ffeb8e
background: var(--table-list-row-background-color);
border-bottom: 1px solid var(--table-list-row-hover-border-color);
border-right: 1px solid var(--table-list-row-hover-border-color)
}
.table-list-row .table-list-title {
@@ -74,7 +74,7 @@
}
.table-list-row .table-list-title a {
color: #333;
color: var(--color-primary);
text-decoration: none
}
@@ -147,11 +147,11 @@
}
.table-list-row .table-list-icons a:hover {
color: #333
color: var(--color-primary)
}
.table-list-row .table-list-icons a:hover i {
color: #333
color: var(--color-primary)
}
.table-list-category {

2
assets/css/src/task_icons.css
View File

@@ -87,7 +87,7 @@
.task-list-icons a,
.task-list-icons span,
.task-list-icons i {
color: #999;
color: var(--task-list-icons-color);
opacity: 1.0
}

2
assets/css/src/task_summary.css
View File

@@ -32,7 +32,7 @@
}
.task-summary-column {
color: var(--color-primary);
color: var(--color-dark);
}
.task-summary-column span {

294
assets/css/src/themes/auto.css Normal file
View File

@@ -0,0 +1,294 @@
:root {
--body-background-color: #FFF;
--header-background-color: #fbfbfb;
--color-primary: #333;
--color-light: #999;
--color-lighter: #dedede;
--color-dark: #000;
--color-medium: #555;
--color-error: #b94a48;
--link-color-primary: #3366CC;
--link-color-focus: #DF5353;
--link-color-hover: #333;
--alert-color-default: #c09853;
--alert-color-success: #468847;
--alert-color-error: #b94a48;
--alert-color-info: #3a87ad;
--alert-color-normal: #333;
--alert-background-color-default: #fcf8e3;
--alert-background-color-success: #dff0d8;
--alert-background-color-error: #f2dede;
--alert-background-color-info: #d9edf7;
--alert-background-color-normal: #f0f0f0;
--alert-border-color-default: #fbeed5;
--alert-border-color-success: #d6e9c6;
--alert-border-color-error: #eed3d7;
--alert-border-color-info: #bce8f1;
--alert-border-color-normal: #ddd;
--button-default-color: #333;
--button-default-background-color: #f5f5f5;
--button-default-border-color: #ddd;
--button-default-color-focus: #000;
--button-default-background-color-focus: #fafafa;
--button-default-border-color-focus: #bbb;
--button-primary-color: #fff;
--button-primary-background-color: #4d90fe;
--button-primary-border-color: #3079ed;
--button-primary-color-focus: #fff;
--button-primary-background-color-focus: #357ae8;
--button-primary-border-color-focus: #3079ed;
--button-danger-color: #fff;
--button-danger-background-color: #d14836;
--button-danger-border-color: #b0281a;
--button-danger-color-focus: #fff;
--button-danger-background-color-focus: #c53727;
--button-danger-border-color-focus: #b0281a;
--button-disabled-color: #ccc;
--button-disabled-background-color: #f7f7f7;
--button-disabled-border-color: #ccc;
--table-header-background-color: #fbfbfb;
--table-nth-background-color: #fefefe;
--table-border-color: #eee;
--avatar-color-letter: #fff;
--activity-title-color: #000;
--activity-title-border-color: #efefef;
--activity-event-background-color: #fafafa;
--activity-event-hover-color: #fff8dc;
--user-mention-color: #000;
--board-task-limit-color: #DF5353;
--table-list-header-border-color: #e5e5e5;
--table-list-header-background-color: #fbfbfb;
--table-list-nth-background-color: #fefefe;
--table-list-border-color: #e5e5e5;
--table-list-row-hover-border-color: #ffeb8e;
--table-list-row-background-color: #fff8dc;
--sidebar-border-color: #efefef;
--dropdown-background-color: #fff;
--dropdown-border-color: #b2b2b2;
--dropdown-li-border-color: #f8f8f8;
--input-addon-background-color: rgba(147, 128, 108, 0.1);
--input-addon-color: #666;
--views-background-color: #fafafa;
--views-border-color: #ddd;
--views-active-color: #000;
--input-focus-color: #000;
--input-focus-border-color: rgba(82, 168, 236, 0.8);
--input-focus-shadow-color: rgba(82, 168, 236, 0.6);
--input-background-color: #fff;
--input-border-color: #ccc;
--input-placeholder-color: #dedede;
--tooltip-background-color: #fff;
--tooltip-border-color: #ddd;
--tooltip-shadow-color: #aaa;
--panel-background-color: #fcfcfc;
--panel-border-color: #ddd;
--draggable-item-selected-background-color: #fff;
--draggable-item-selected-border-color: #666;
--draggable-item-hover-background-color: #FEFFF2;
--draggable-row-handle-color: #dedede;
--draggable-placeholder-background-color: #fafafa;
--draggable-placeholder-border-color: #000;
--task-list-icons-color: #999;
--form-help-color: brown;
--form-error-color: #b94a48;
--comment-title-border-color: #eee;
--comment-nth-background-color: #fbfbfb;
--comment-highlighted-background-color: #fff8dc;
--comment-highlighted-hover-background-color: #fff8dc;
--comment-highlighted-border-color: #ffeb8e;
}
html {
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root {
--body-background-color: #222;
--header-background-color: #222;
--color-primary: #a0a0a0;
--color-light: #a0a0a0;
--color-lighter: #efefef;
--color-dark: #000;
--color-medium: #4f4c4c;
--color-error: #b94a48;
--link-color-primary: #aaa;
--link-color-focus: #ddd;
--link-color-hover: #ddd;
--alert-color-default: #efefef;
--alert-color-success: #def6de;
--alert-color-error: #de9393;
--alert-color-info: #3a87ad;
--alert-color-normal: #333;
--alert-background-color-default: #333;
--alert-background-color-success: #304b27;
--alert-background-color-error: #500606;
--alert-background-color-info: #d9edf7;
--alert-background-color-normal: #f0f0f0;
--alert-border-color-default: #444;
--alert-border-color-success: #3c621b;
--alert-border-color-error: #7e0315;
--alert-border-color-info: #bce8f1;
--alert-border-color-normal: #ddd;
--button-default-color: #333;
--button-default-background-color: #f5f5f5;
--button-default-border-color: #ddd;
--button-default-color-focus: #000;
--button-default-background-color-focus: #fafafa;
--button-default-border-color-focus: #bbb;
--button-primary-color: #efefef;
--button-primary-background-color: #333;
--button-primary-border-color: #444;
--button-primary-color-focus: #fff;
--button-primary-background-color-focus: #555;
--button-primary-border-color-focus: #888;
--button-danger-color: #fff;
--button-danger-background-color: #d14836;
--button-danger-border-color: #b0281a;
--button-danger-color-focus: #fff;
--button-danger-background-color-focus: #c53727;
--button-danger-border-color-focus: #b0281a;
--button-disabled-color: #ccc;
--button-disabled-background-color: #f7f7f7;
--button-disabled-border-color: #ccc;
--table-header-background-color: #1a1a1a;
--table-nth-background-color: #2d2c2c;
--table-border-color: rgba(147, 128, 108, 0.25);
--avatar-color-letter: #fff;
--activity-title-color: #e3e2e2;
--activity-title-border-color: #efefef;
--activity-event-background-color: #313131;
--activity-event-hover-color: #000;
--user-mention-color: #fff;
--board-task-limit-color: #DF5353;
--table-list-header-border-color: rgba(147, 128, 108, 0.25);
--table-list-header-background-color: rgb(59, 59, 59);
--table-list-nth-background-color: #2d2c2c;
--table-list-border-color: rgba(147, 128, 108, 0.25);
--table-list-row-hover-border-color: rgba(147, 128, 108, 0.25);
--table-list-row-background-color: #434343;
--sidebar-border-color: rgba(147, 128, 108, 0.25);
--dropdown-background-color: #222;
--dropdown-border-color: #000;
--dropdown-li-border-color: #555;
--input-addon-background-color: #1a1a1a;
--input-addon-color: rgba(147, 128, 108, 0.25);
--views-background-color: #1a1a1a;
--views-border-color: rgba(147, 128, 108, 0.25);
--views-active-color: #949494;
--input-focus-color: #e6edf3;
--input-focus-border-color: rgba(82, 168, 236, 0.8);
--input-focus-shadow-color: rgba(82, 168, 236, 0.6);
--input-background-color: rgb(59, 59, 59);
--input-border-color: #777575;
--input-placeholder-color: #666;
--tooltip-background-color: #333;
--tooltip-border-color: #555;
--tooltip-shadow-color: #111;
--panel-background-color: #2c2c2c;
--panel-border-color: #000;
--draggable-item-selected-background-color: #222;
--draggable-item-selected-border-color: #111;
--draggable-item-hover-background-color: #555;
--draggable-row-handle-color: #444;
--draggable-placeholder-background-color: #444;
--draggable-placeholder-border-color: #666;
--task-list-icons-color: #cccccc;
--form-help-color: #a8a12f;
--form-error-color: #f2332f;
--comment-title-border-color: #eee;
--comment-nth-background-color: #2b2a2a;
--comment-highlighted-background-color: #2b2901;
--comment-highlighted-hover-background-color: #000;
--comment-highlighted-border-color: #c09e05;
}
html {
color-scheme: dark;
}
.select2-dropdown, .select2-close-mask {
background-color: var(--input-background-color);
}
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single {
background-color: var(--input-background-color);
border-color: var(--input-border-color);
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
border-color: var(--input-focus-border-color);
}
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--classic .select2-selection--single .select2-selection__rendered {
color: #fff;
}
.task-board-title {
color: #000;
}
.task-summary-column a, .task-summary-column a:hover {
color: #000;
}
}

159
assets/css/src/themes/dark.css Normal file
View File

@@ -0,0 +1,159 @@
:root {
--body-background-color: #222;
--header-background-color: #222;
--color-primary: #a0a0a0;
--color-light: #a0a0a0;
--color-lighter: #efefef;
--color-dark: #000;
--color-medium: #4f4c4c;
--color-error: #b94a48;
--link-color-primary: #aaa;
--link-color-focus: #ddd;
--link-color-hover: #ddd;
--alert-color-default: #efefef;
--alert-color-success: #def6de;
--alert-color-error: #de9393;
--alert-color-info: #3a87ad;
--alert-color-normal: #333;
--alert-background-color-default: #333;
--alert-background-color-success: #304b27;
--alert-background-color-error: #500606;
--alert-background-color-info: #d9edf7;
--alert-background-color-normal: #f0f0f0;
--alert-border-color-default: #444;
--alert-border-color-success: #3c621b;
--alert-border-color-error: #7e0315;
--alert-border-color-info: #bce8f1;
--alert-border-color-normal: #ddd;
--button-default-color: #333;
--button-default-background-color: #f5f5f5;
--button-default-border-color: #ddd;
--button-default-color-focus: #000;
--button-default-background-color-focus: #fafafa;
--button-default-border-color-focus: #bbb;
--button-primary-color: #efefef;
--button-primary-background-color: #333;
--button-primary-border-color: #444;
--button-primary-color-focus: #fff;
--button-primary-background-color-focus: #555;
--button-primary-border-color-focus: #888;
--button-danger-color: #fff;
--button-danger-background-color: #d14836;
--button-danger-border-color: #b0281a;
--button-danger-color-focus: #fff;
--button-danger-background-color-focus: #c53727;
--button-danger-border-color-focus: #b0281a;
--button-disabled-color: #ccc;
--button-disabled-background-color: #f7f7f7;
--button-disabled-border-color: #ccc;
--table-header-background-color: #1a1a1a;
--table-nth-background-color: #2d2c2c;
--table-border-color: rgba(147, 128, 108, 0.25);
--avatar-color-letter: #fff;
--activity-title-color: #e3e2e2;
--activity-title-border-color: #efefef;
--activity-event-background-color: #313131;
--activity-event-hover-color: #000;
--user-mention-color: #fff;
--board-task-limit-color: #DF5353;
--table-list-header-border-color: rgba(147, 128, 108, 0.25);
--table-list-header-background-color: rgb(59, 59, 59);
--table-list-nth-background-color: #2d2c2c;
--table-list-border-color: rgba(147, 128, 108, 0.25);
--table-list-row-hover-border-color: rgba(147, 128, 108, 0.25);
--table-list-row-background-color: #434343;
--sidebar-border-color: rgba(147, 128, 108, 0.25);
--dropdown-background-color: #222;
--dropdown-border-color: #000;
--dropdown-li-border-color: #555;
--input-addon-background-color: #1a1a1a;
--input-addon-color: rgba(147, 128, 108, 0.25);
--views-background-color: #1a1a1a;
--views-border-color: rgba(147, 128, 108, 0.25);
--views-active-color: #949494;
--input-focus-color: #e6edf3;
--input-focus-border-color: rgba(82, 168, 236, 0.8);
--input-focus-shadow-color: rgba(82, 168, 236, 0.6);
--input-background-color: rgb(59, 59, 59);
--input-border-color: #777575;
--input-placeholder-color: #666;
--tooltip-background-color: #333;
--tooltip-border-color: #555;
--tooltip-shadow-color: #111;
--panel-background-color: #2c2c2c;
--panel-border-color: #000;
--draggable-item-selected-background-color: #222;
--draggable-item-selected-border-color: #111;
--draggable-item-hover-background-color: #555;
--draggable-row-handle-color: #444;
--draggable-placeholder-background-color: #444;
--draggable-placeholder-border-color: #666;
--task-list-icons-color: #cccccc;
--form-help-color: #a8a12f;
--form-error-color: #f2332f;
--comment-title-border-color: #eee;
--comment-nth-background-color: #2b2a2a;
--comment-highlighted-background-color: #2b2901;
--comment-highlighted-hover-background-color: #000;
--comment-highlighted-border-color: #c09e05;
}
html {
color-scheme: dark;
}
.select2-dropdown, .select2-close-mask {
background-color: var(--input-background-color);
}
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single {
background-color: var(--input-background-color);
border-color: var(--input-border-color);
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
border-color: var(--input-focus-border-color);
}
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--classic .select2-selection--single .select2-selection__rendered {
color: #fff;
}
.task-board-title {
color: #000;
}
.task-summary-column a, .task-summary-column a:hover {
color: #000;
}

64
assets/css/src/variables.css → assets/css/src/themes/light.css
View File

@@ -1,4 +1,7 @@
:root {
--body-background-color: #FFF;
--header-background-color: #fbfbfb;
--color-primary: #333;
--color-light: #999;
--color-lighter: #dedede;
@@ -56,6 +59,10 @@
--button-disabled-background-color: #f7f7f7;
--button-disabled-border-color: #ccc;
--table-header-background-color: #fbfbfb;
--table-nth-background-color: #fefefe;
--table-border-color: #eee;
--avatar-color-letter: #fff;
--activity-title-color: #000;
@@ -66,4 +73,61 @@
--user-mention-color: #000;
--board-task-limit-color: #DF5353;
--table-list-header-border-color: #e5e5e5;
--table-list-header-background-color: #fbfbfb;
--table-list-nth-background-color: #fefefe;
--table-list-border-color: #e5e5e5;
--table-list-row-hover-border-color: #ffeb8e;
--table-list-row-background-color: #fff8dc;
--sidebar-border-color: #efefef;
--dropdown-background-color: #fff;
--dropdown-border-color: #b2b2b2;
--dropdown-li-border-color: #f8f8f8;
--input-addon-background-color: rgba(147, 128, 108, 0.1);
--input-addon-color: #666;
--views-background-color: #fafafa;
--views-border-color: #ddd;
--views-active-color: #000;
--input-focus-color: #000;
--input-focus-border-color: rgba(82, 168, 236, 0.8);
--input-focus-shadow-color: rgba(82, 168, 236, 0.6);
--input-background-color: #fff;
--input-border-color: #ccc;
--input-placeholder-color: #dedede;
--tooltip-background-color: #fff;
--tooltip-border-color: #ddd;
--tooltip-shadow-color: #aaa;
--panel-background-color: #fcfcfc;
--panel-border-color: #ddd;
--draggable-item-selected-background-color: #fff;
--draggable-item-selected-border-color: #666;
--draggable-item-hover-background-color: #FEFFF2;
--draggable-row-handle-color: #dedede;
--draggable-placeholder-background-color: #fafafa;
--draggable-placeholder-border-color: #000;
--task-list-icons-color: #999;
--form-help-color: brown;
--form-error-color: #b94a48;
--comment-title-border-color: #eee;
--comment-nth-background-color: #fbfbfb;
--comment-highlighted-background-color: #fff8dc;
--comment-highlighted-hover-background-color: #fff8dc;
--comment-highlighted-border-color: #ffeb8e;
}
html {
color-scheme: light;
}

6
assets/css/src/tooltip.css
View File

@@ -8,10 +8,10 @@
#tooltip-container {
padding: 5px;
background: #fff;
border: 1px solid #ddd;
background: var(--tooltip-background-color);
border: 1px solid var(--tooltip-border-color);
border-radius: 4px;
box-shadow: 0 6px 12px #aaa;
box-shadow: 0 6px 12px var(--tooltip-shadow-color);
position: absolute;
min-width: 350px
}

12
assets/css/src/views.css
View File

@@ -25,8 +25,8 @@
.views li {
white-space: nowrap;
background: #fafafa;
border: 1px solid #ddd;
background: var(--views-background-color);
border: 1px solid var(--views-border-color);
border-right: none;
padding: 4px 8px;
display: inline
@@ -37,13 +37,13 @@
display: block;
margin-top: 5px;
border-radius: 5px;
border: 1px solid #ddd
border: 1px solid var(--views-border-color)
}
}
.views li.active a {
font-weight: bold;
color: #000;
color: var(--views-active-color);
text-decoration: none
}
@@ -53,13 +53,13 @@
}
.views li:last-child {
border-right: 1px solid #ddd;
border-right: 1px solid var(--views-border-color);
border-top-right-radius: 5px;
border-bottom-right-radius: 5px
}
.views a {
color: var(--color-medium);
color: var(--color-ligth);
text-decoration: none
}