dark theme

This commit is contained in:
Yuri Kuznetsov
2021-12-23 17:17:23 +02:00
parent 3f7c42a05e
commit 247521ba37
41 changed files with 539 additions and 158 deletions
@@ -12,9 +12,9 @@
"navbarHeight": 30,
"logo": "client/img/logo-37.png",
"textColor": "#dedede",
"chartGridColor": "#ddd",
"chartTickColor": "#e8eced",
"chartSuccessColor": "#85b75f",
"chartColorList": ["#6FA8D6", "#EDC555", "#DE6666", "#8A7CC2", "#c1834d", "#4E6CAD", "#ED8F42", "#d69cc7", "#bfbfbf"],
"chartColorAlternativeList": ["#6FA8D6", "#EDC555", "#DE6666", "#8A7CC2", "#c1834d"]
"chartGridColor": "#747272",
"chartTickColor": "#6e6b6b",
"chartSuccessColor": "#5d8a55",
"chartColorList": ["#7492cc", "#c29c4a", "#a1404a", "#6a5f96", "#b07e53", "#3a5691", "#9c7352", "#a17a97", "#858585"],
"chartColorAlternativeList": ["#7492cc", "#c29c4a", "#a1404a", "#6a5f96", "#b07e53"]
}
+41 -7
View File
@@ -1,25 +1,30 @@
#layout ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#layout ul > li {
background-color: #FFF;
background-color: var(--select-item-bg);
}
#layout ul.panels > li {
padding: 5px 10px;
margin-bottom: 20px;
min-height: 80px;
border: 1px solid #CCC;
border: 1px solid var(--select-item-border);
background-color: var(--panel-bg);
list-style: none;
}
#layout ul.rows {
min-height: 80px;
}
#layout ul.rows > li {
list-style: none;
border: 1px solid #CCC;
border: 1px solid var(--select-item-border);
background-color: var(--panel-bg);
margin: 8px 0;
padding: 5px;
height: 72px;
@@ -29,61 +34,77 @@
min-height: 30px;
margin-top: 12px;
}
#layout ul.panels ul.cells > li {
width: 46%;
float: left;
}
#layout ul.panels ul.cells > li[data-full-width="true"] {
width: 94%;
}
#layout ul.panels ul.cells[data-cell-count="1"] > li {
width: 94%;
a[data-action="minusCell"] {
display: none;
}
}
#layout ul.panels ul.cells[data-cell-count="2"] > li {
width: 46%;
}
#layout ul.panels ul.cells[data-cell-count="3"] > li {
width: 30%;
}
#layout ul.panels ul.cells[data-cell-count="4"] > li {
width: 22%;
}
#layout ul.cells > li {
list-style: none;
border: 1px solid #CCC;
border: 1px solid var(--select-item-border);
margin: 5px;
padding: 5px;
height: 32px;
}
#layout ul.cells > li.ui-state-hover {
border-color: #c78c8c;
border-color: var(--brand-primary);
}
#layout ul.cells.disabled > li {
margin: 5px 0;
}
#layout ul.rows > li > div {
}
#layout ul.disabled {
min-height: 200px;
width: 100%;
}
#layout ul.disabled > li a {
display: none;
}
#layout header {
font-weight: 600;
margin-bottom: 10px;
}
#layout ul.panels > li label {
display: inline;
}
#layout ul.panels > li header a {
font-weight: normal;
}
#layout ul.panels > li > div {
width: auto;
text-align: left;
@@ -93,26 +114,33 @@
ul.cells li.cell a.remove-field {
display: none;
}
ul.cells li.cell:hover a.remove-field {
display: block;
}
ul.cells[data-cell-count="1"] li.cell:hover a.remove-field[data-action="minusCell"] {
display: none;
}
ul.panels > li a.remove-panel {
display: none;
}
ul.panels > li:hover a.remove-panel {
display: block;
}
ul.rows > li a.remove-row {
display: none;
width: 5px;
height: 5px;
}
ul.rows > li:hover a.remove-row {
display: block;
}
ul.rows > li a.add-cell {
display: none;
position: relative;
@@ -121,23 +149,29 @@
top: 19px;
right: 7px;
}
ul.rows > li:hover a.add-cell {
display: block;
}
ul.rows > li[data-cell-count="4"]:hover a.add-cell {
display: none;
}
ul.panels > li a.edit-panel-label {
display: none;
}
ul.panels > li:hover a.edit-panel-label {
display: inline-block;
}
div.row-actions {
float: right;
height: 50px;
width: 12px;
}
.cell.ui-draggable-dragging {
opacity: 0.7;
}
}
+3 -2
View File
@@ -8,7 +8,7 @@
#layout ul li {
list-style: none;
border: 1px solid #CCC;
border: 1px solid var(--select-item-border);
margin: 5px 0;
padding: 5px;
height: 32px;
@@ -23,7 +23,8 @@
}
#layout ul > li {
background-color: #FFF;
background-color: var(--select-item-bg);
color: var(--select-item-text-color);
}
#layout ul.enabled > li .right {
@@ -4,4 +4,6 @@
@import "../variables.less";
@import "../../espo/root-variables.less";
@import "../../espo/iframe/iframe.less";
+83 -10
View File
@@ -1,23 +1,96 @@
@input-border-value: #ececec;
@body-bg-value: #4c4c4c;
@body-bg-value: #505050;
@panel-bg-value: #403d3d;
@panel-default-text-value: #dedede;
@panel-default-heading-bg-value: @panel-bg-value;
@panel-default-text-value: #b7b7b7;
@panel-default-bg-value: transparent;
@text-color-value: #dedede;
@text-white-color-value: @text-color-value;
@main-gray-value: #ececec;
@brand-primary-value: #6490b7;
@brand-success-value: #83CD77;
@brand-warning-value: #e4a133;
@gray-soft-value: #cfcfcf;
@gray-light-value: #807f7f;
@gray-value: #898989;
@brand-primary-value: #557593;
@brand-success-value: #588151;
@brand-warning-value: #ab8343;
@brand-danger-value: #b95855;
@state-danger-text-value: #a95e5c;
@state-success-text-value: #79a97b;
@state-warning-text-value: #ad8b50;
@state-info-text-value: #929eb1;
@state-success-bg-value: #3a5438;
@state-danger-bg-value: #422a2a;
@state-warning-bg-value: #443b1e;
@link-color-value: #92b9db;
@table-bg-value: transparent;
@table-bg-value: @panel-bg-value;
@navbar-inverse-color-value: #dedede;
@panel-primary-text-value: @panel-default-text-value;
@panel-success-bg-value: @state-success-bg-value;
@panel-danger-bg-value: @state-danger-bg-value;
@panel-warning-bg-value: @state-warning-bg-value;
@navbar-inverse-color-value: #d3d3d3;
@navbar-inverse-bg-value: #292929;
@navbar-inverse-link-color-value: #F7F7F7;
@navbar-inverse-link-color-value: @text-color-value;
@navbar-inverse-link-hover-color-value: #fff;
@navbar-bg-value: @body-bg-value;
@default-border-color-value: #666262;
@default-heading-bg-color-value: #222222;
@modal-backdrop-bg-value: #394350;
@modal-header-bg-value: @body-bg-value;
@modal-footer-bg-value: @body-bg-value;
@modal-content-bg-value: @body-bg-value;
@modal-header-border-color-value: @default-heading-bg-color-value;
@input-bg-value: #525050;
@input-color-value: @text-color-value;
@input-border-value: #666060;
@input-border-focus-value: #4b7b9d;
@site-footer-bg-value: @body-bg-value;
@site-footer-color-value: @gray-light-value;
@btn-default-bg-value: #6c6565;
@btn-default-border-value: @input-border-value;
@btn-default-color-value: #d1d1d1;
@btn-text-color-value: #b7b7b7;
@popover-bg-value: #282828;
@dropdown-bg-value: #282828;
@dropdown-link-color-value: @text-color-value;
@dropdown-link-hover-color-value: lighten(@text-color-value, 5%);
@dropdown-link-hover-bg-value: #000;
@dropdown-divider-bg-value: @default-border-color-value;
@select-item-bg-value: @default-heading-bg-color-value;
@select-item-border-value: @btn-default-border-value;
@calendar-today-bg-value: #544a38;
@calendar-border-value: #747272;
@calendar-busy-bg-value: #2e2e2e;
@label-color-value: #dfdfdf;
@well-bg-value: @panel-bg-value;
@well-border-value: @panel-default-border-value;
@code-bg-value: #565656;
@code-color-value: #cdcdcd;
+2
View File
@@ -4,4 +4,6 @@
@import "../variables.less";
@import "../../espo/root-variables.less";
@import "../../espo/iframe/iframe.less";
+1 -1
View File
@@ -31,7 +31,7 @@
}
input.global-search-input {
border: 1px solid @top-navbar-bg-color;
border: 1px solid var(--navbar-bg);
}
@media screen and (min-width: @screen-sm-min) {
@@ -4,4 +4,6 @@
@import "../variables.less";
@import "../../espo/root-variables.less";
@import "../../espo/iframe/iframe.less";
+14 -3
View File
@@ -171,7 +171,7 @@
left: 0;
height: @tob-bar-height;
width: 100%;
background-color: @top-navbar-bg-color;
background-color: var(--navbar-bg);
margin-left: @navbar-width;
padding-right: @navbar-width;
@@ -182,7 +182,11 @@
}
.global-search-container a.global-search-button {
color: @gray-light;
color: var(--navbar-link-color);
&:hover {
color: var(--navbar-link-hover-color);
}
}
.quick-create-container {
@@ -200,10 +204,17 @@
}
> li > a {
color: @gray-light;
color: var(--navbar-link-color);
&:hover {
color: var(--navbar-link-hover-color);
}
padding: 5px 10px;
}
> li.open > a {
background-color: var(--navbar-link-active-bg);
}
.notifications-badge-container {
position: fixed;
top: 0;
@@ -5,7 +5,6 @@
@navbar-minimized-width: 42px;
@tob-bar-height: 30px;
@top-navbar-bg-color: @main-gray;
@navbar-color-border-width: 0;
@navbar-tab-text-left-padding: 36px;
@navbar-tab-left-padding: 12px;
+4 -4
View File
@@ -68,10 +68,10 @@
@btn-default-color;
@btn-default-bg;
@btn-default-border;
@btn-default-bg-10;
@btn-default-bg-17;
@btn-default-border-12;
@btn-default-border-25
var(--btn-default-bg-5);
var(--btn-default-bg-17);
var(--btn-default-bg-12);
var(--btn-default-bg-25)
);
}
.btn-primary {
+14 -2
View File
@@ -435,10 +435,22 @@ input[type="checkbox"] {
);
}
.has-warning {
.form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
.form-control-validation-espo(
@state-warning-text;
@state-warning-text;
@state-warning-bg;
var(--state-warning-text-10);
var(--state-warning-text-10l)
);
}
.has-error {
.form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
.form-control-validation-espo(
@state-danger-text;
@state-danger-text;
@state-danger-bg;
var(--state-danger-text-10);
var(--state-danger-text-10l)
);
}
// Reposition feedback icon if input has visible label above
+2 -2
View File
@@ -112,8 +112,8 @@ button.list-group-item {
.list-group-item-variant-espo(success; @state-success-bg; @state-success-text; @state-success-bg-5);
.list-group-item-variant-espo(info; @state-info-bg; @state-info-text; @state-info-bg-5);
.list-group-item-variant(warning; @state-warning-bg; @state-warning-text);
.list-group-item-variant(danger; @state-danger-bg; @state-danger-text);
.list-group-item-variant-espo(warning; @state-warning-bg; @state-warning-text; var(--state-warning-bg-5));
.list-group-item-variant-espo(danger; @state-danger-bg; @state-danger-text; var(--state-danger-bg-5));
// Custom content options
+3 -3
View File
@@ -4,7 +4,7 @@
table {
background-color: @table-bg;
//background-color: @table-bg;
}
caption {
padding-top: @table-cell-padding;
@@ -159,8 +159,8 @@ table {
.table-row-variant-espo(success; @state-success-bg; @state-success-bg-5);
.table-row-variant-espo(info; @state-info-bg; @state-info-bg-5);
.table-row-variant(warning; @state-warning-bg);
.table-row-variant(danger; @state-danger-bg);
.table-row-variant-espo(warning; @state-warning-bg; var(--state-warning-bg-5));
.table-row-variant-espo(danger; @state-danger-bg; var(--state-danger-bg-5));
// Responsive tables
+4 -4
View File
@@ -112,10 +112,10 @@ mark,
.text-emphasis-variant(@state-info-text);
}
.text-warning {
.text-emphasis-variant(@state-warning-text);
.text-emphasis-variant-espo(@state-warning-text; var(--state-warning-text-10));
}
.text-danger {
.text-emphasis-variant(@state-danger-text);
.text-emphasis-variant-espo(@state-danger-text; var(--state-danger-text-10));
}
// Contextual backgrounds
@@ -134,10 +134,10 @@ mark,
.bg-variant-espo(@state-info-bg, @state-info-bg-5);
}
.bg-warning {
.bg-variant(@state-warning-bg);
.bg-variant-espo(@state-warning-bg; var(--state-warning-bg-5));
}
.bg-danger {
.bg-variant(@state-danger-bg);
.bg-variant-espo(@state-danger-bg; var(--state-danger-bg-5));
}
+22 -11
View File
@@ -247,7 +247,7 @@ div.list-kanban > div > table {
th.group-header {
font-weight: normal;
color: @white-color;
color: var(--text-white-color);
background-color: @gray-light;
position: relative;
@@ -268,10 +268,10 @@ div.list-kanban > div > table {
position: relative;
right: 14px;
color: @white-color;
color: var(--text-white-color);
&:hover, &:active {
color: @white-color
color: var(--text-white-color);
}
}
}
@@ -290,7 +290,7 @@ div.list-kanban > div > table {
> div:after {
left: ~"calc(100% - 10px)";
border-color: transparent transparent transparent @white-color;
border-color: transparent transparent transparent var(--body-bg);
background-color: @gray-light;
}
@@ -1582,20 +1582,25 @@ body .note-editor .panel-heading {
}
.autocomplete-suggestions {
border: 1px solid @input-border;
background: @white-color;
border: 1px solid var(--dropdown-border);
background-color: var(--dropdown-bg);
color: var(--dropdown-link-color);
cursor: default;
overflow: auto;
.box-shadow(0 6px 12px rgba(0,0,0,.175));
.autocomplete-suggestion.autocomplete-selected {
background-color: var(--dropdown-link-hover-bg) !important;
color: var(--dropdown-link-hover-color) !important;
}
}
.autocomplete-suggestion {
padding: 2px 5px;
white-space: nowrap;
overflow: hidden;
}
.autocomplete-selected {
background: @main-gray;
}
.autocomplete-suggestions strong {
font-weight: normal; color: @brand-primary;
}
@@ -1626,7 +1631,7 @@ label.attach-file-label {
}
.gray-box {
background-color: @gray-lighter;
background-color: var(--select-item-bg);
margin: 0 5px 3px 0;
padding: 2px 3px 2px 5px;
@@ -2043,7 +2048,7 @@ stream-head-text-container .span {
position: absolute;
bottom: 0;
left: 0;
background: linear-gradient(to bottom, transparent, @white-color);
background: linear-gradient(to bottom, transparent, var(--panel-bg));
}
}
}
@@ -2942,6 +2947,12 @@ a.link-gray {
}
}
pre {
background-color: var(--code-bg);
border-color: var(--code-border-color);
color: var(--code-color);
}
@import "elements/site.less";
@import "elements/modal.less";
@import "elements/buttons.less";
+3 -3
View File
@@ -131,7 +131,7 @@
}
.btn-text {
color: @gray-dark;
color: var(--btn-text-color);
border-radius: 0;
.far,
@@ -155,12 +155,12 @@
}
&:hover,
&:focus {
color: @gray-dark;
color: var(--btn-text-color);
text-decoration: none;
background-color: transparent;
.far,
.fas {
color: @gray-dark;
color: var(--btn-text-color);
}
}
&.disabled,
+1
View File
@@ -62,6 +62,7 @@
.modal-footer {
margin-top: @modal-title-padding;
padding: @panel-padding @panel-padding @panel-padding;
background-color: @modal-footer-bg;
}
.modal-footer > .main-btn-group {
+8
View File
@@ -44,8 +44,16 @@
font-size: 12px;
opacity: 0.6;
}
li.more {
li.open > a {
background-color: var(--dropdown-link-hover-bg);
color: var(--dropdown-link-hover-color);
}
}
}
@media screen and (min-width: @screen-sm-min) {
.tabs > .more {
li.show-more a {
+23 -19
View File
@@ -74,8 +74,8 @@
> .panel-heading {
.btn {
background-color: @panel-default-heading-bg;
border-color: @panel-default-heading-bg;
background-color: @panel-default-bg;
border-color: @panel-default-bg;
color: @gray-soft;
}
@@ -122,14 +122,18 @@
body {
.panel-default {
border-color: @panel-default-border;
> .panel-heading {
background-color: @panel-default-bg;
border-color: @panel-default-bg;
.btn-group,
.btn-group.open {
.dropdown-toggle.btn {
&,
&:focus {
background-color: @panel-default-heading-bg;
border-color: @panel-default-heading-bg;
background-color: @panel-default-bg;
border-color: @panel-default-bg;
color: @panel-default-text;
}
}
}
@@ -161,20 +165,20 @@ body {
}
.panel-danger {
> .panel-heading {
background-color: @state-danger-border;
background-color: @panel-danger-bg;
.btn,
.btn-danger {
color: @panel-danger-text;
background-color: @state-danger-border;
border-color: @state-danger-border;
background-color: @panel-danger-bg;
border-color: @panel-danger-bg;
}
.btn-group,
.btn-group.open {
.dropdown-toggle.btn {
&,
&:focus {
background-color: @state-danger-border;
border-color: @state-danger-border;
background-color: @panel-danger-bg;
border-color: @panel-danger-bg;
color: @panel-danger-text;
}
}
@@ -207,19 +211,19 @@ body {
}
.panel-success {
> .panel-heading {
background-color: @state-success-border;
background-color: @panel-success-bg;
.btn,
.btn-success {
color: @panel-success-text;
background-color: @state-success-border;
border-color: @state-success-border;
background-color: @panel-success-bg;
border-color: @panel-success-bg;
}
.btn-group.open {
.dropdown-toggle.btn {
&,
&:focus {
background-color: @state-success-border;
border-color: @state-success-border;
background-color: @panel-success-bg;
border-color: @panel-success-bg;
color: @panel-success-text;
}
}
@@ -228,19 +232,19 @@ body {
}
.panel-primary {
> .panel-heading {
background-color: @panel-primary-border;
background-color: @panel-primary-bg;
.btn,
.btn-primary {
color: @panel-primary-text;
background-color: @panel-primary-border;
border-color: @panel-primary-border;
background-color: @panel-primary-bg;
border-color: @panel-primary-bg;
}
.btn-group.open {
.dropdown-toggle.btn {
&,
&:focus {
background-color: @panel-primary-border;
border-color: @panel-primary-border;
background-color: @panel-primary-bg;
border-color: @panel-primary-bg;
color: @panel-primary-text;
}
}
+2 -2
View File
@@ -1,5 +1,5 @@
body > footer {
background-color: @gray-lighter;
background-color: var(--site-footer-bg);
}
body > footer > p {
@@ -15,5 +15,5 @@ body > footer > p a,
body > footer > p a:hover,
body > footer > p a:active,
body > footer > p a:visited {
color: @gray;
color: var(--site-footer-color);
}
+2
View File
@@ -1,6 +1,8 @@
@import "../bootstrap/variables.less";
@import "../value-variables.less";
@import "../variables.less";
@import "../root-variables.less";
@import "../fonts.less";
@import "iframe.less";
@@ -83,7 +83,7 @@
}
&.day:hover,
&.focused {
background: @gray-lighter;
background: @dropdown-link-hover-bg;
cursor: pointer;
}
&.disabled,
@@ -230,7 +230,7 @@
border-radius: 4px;
&:hover,
&.focused {
background: @gray-lighter;
background: @dropdown-link-hover-bg;
}
&.disabled,
&.disabled:hover {
@@ -270,7 +270,7 @@
tfoot tr th {
cursor: pointer;
&:hover {
background: @gray-lighter;
background: @dropdown-link-hover-bg;
}
}
@@ -63,4 +63,27 @@
.fc-view-container {
font-size: 85%;
}
}
}
.fc-unthemed td.fc-today {
background: var(--calendar-today-bg) !important;
}
.fc-unthemed th,
.fc-unthemed td,
.fc-unthemed thead,
.fc-unthemed tbody,
.fc-unthemed .fc-divider,
.fc-unthemed .fc-row,
.fc-unthemed .fc-content,
.fc-unthemed .fc-popover,
.fc-unthemed .fc-list-view,
.fc-unthemed .fc-list-heading td {
border-color: var(--calendar-border) !important;
}
.fc-unthemed .fc-divider,
.fc-unthemed .fc-popover .fc-header,
.fc-unthemed .fc-list-heading td {
background: var(--calendar-border) !important;
}
@@ -1,10 +1,10 @@
.selectize-control.plugin-drag_drop {
&.multi > .selectize-input > div.ui-sortable-placeholder {
visibility: visible !important;
background: #f2f2f2 !important;
background: rgba(0,0,0,0.06) !important;
//background: #f2f2f2 !important;
//background: rgba(0,0,0,0.06) !important;
border: 0 none !important;
.selectize-box-shadow(inset 0 0 12px 4px #fff);
//.selectize-box-shadow(inset 0 0 12px 4px #fff);
}
.ui-sortable-placeholder::after {
content: '!';
@@ -2,7 +2,8 @@
position: relative;
padding: @selectize-padding-dropdown-item-y @selectize-padding-dropdown-item-x;
border-bottom: 1px solid @selectize-color-border;
background: mix(@selectize-color-dropdown, @selectize-color-border, 85%);
//background: mix(@selectize-color-dropdown, @selectize-color-border, 85%);
background: @selectize-color-dropdown;
.selectize-border-radius(@selectize-border-radius @selectize-border-radius 0 0);
}
.selectize-dropdown-header-close {
@@ -22,17 +22,18 @@
@selectize-font-size: inherit;
@selectize-line-height: @line-height-computed;
@selectize-color-text: @text-color;
//@selectize-color-text: @text-color;
@selectize-color-highlight: rgba(255,237,40,0.4);
@selectize-color-input: @input-bg;
@selectize-color-input-full: @input-bg;
@selectize-color-input-error: @state-danger-text;
@selectize-color-input-error-focus: darken(@selectize-color-input-error, 10%);
//@selectize-color-input-error-focus: darken(@selectize-color-input-error, 10%);
@selectize-color-input-error-focus: var(--state-success-text-10);
@selectize-color-disabled: @input-bg;
@selectize-color-item: #efefef;
//@selectize-color-item: #efefef;
@selectize-color-item-border: rgba(0,0,0,0);
@selectize-color-item-active: @component-active-bg;
@selectize-color-item-active-text: #fff;
//@selectize-color-item-active: @component-active-bg;
//@selectize-color-item-active-text: #fff;
@selectize-color-item-active-border: rgba(0,0,0,0);
@selectize-color-optgroup: @dropdown-bg;
@selectize-color-optgroup-text: @dropdown-header-color;
@@ -46,7 +47,7 @@
@selectize-shadow-input: none;
@selectize-shadow-input-focus: inset 0 1px 2px rgba(0,0,0,0.15);
@selectize-shadow-input-error: inset 0 1px 1px rgba(0, 0, 0, .075);
@selectize-shadow-input-error-focus: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px lighten(@selectize-color-input-error, 20%);
//@selectize-shadow-input-error-focus: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px lighten(@selectize-color-input-error, 20%);
@selectize-border: 1px solid @input-border;
@selectize-border-radius: @input-border-radius;
@@ -130,7 +131,7 @@
&:focus {
border-color: @selectize-color-input-error-focus;
.selectize-box-shadow(@selectize-shadow-input-error-focus);
//.selectize-box-shadow(@selectize-shadow-input-error-focus);
}
}
@@ -154,3 +155,10 @@
.selectize-box-shadow(none);
.selectize-border-radius(0);
}
.selectize-control.plugin-drag_drop {
&.multi > .selectize-input > div.ui-sortable-placeholder {
background: transparent !important;
border: 1px solid var(--input-border-focus) !important;
}
}
@@ -10,17 +10,17 @@
@selectize-font-size: 13px;
@selectize-line-height: 18px;
@selectize-color-text: #303030;
//@selectize-color-text: #303030;
@selectize-color-border: #d0d0d0;
@selectize-color-highlight: rgba(125,168,208,0.2);
@selectize-color-input: #fff;
@selectize-color-input-full: @selectize-color-input;
@selectize-color-disabled: #fafafa;
@selectize-color-item: #f2f2f2;
//@selectize-color-item: #f2f2f2;
@selectize-color-item-text: @selectize-color-text;
@selectize-color-item-border: #d0d0d0;
@selectize-color-item-active: #e8e8e8;
@selectize-color-item-active-text: @selectize-color-text;
//@selectize-color-item-active: #e8e8e8;
//@selectize-color-item-active-text: @selectize-color-text;
@selectize-color-item-active-border: #cacaca;
@selectize-color-dropdown: #fff;
@selectize-color-dropdown-border: @selectize-color-border;
+11 -7
View File
@@ -1,9 +1,9 @@
#main > .calendar-container .timeline {
border: 1px solid @input-border;
border: 1px solid var(--calendar-border);
}
.calendar-container .timeline {
border-bottom: 1px solid @input-border;
border-bottom: 1px solid var(--calendar-border);
}
.vis-content .vis-item.clickable .vis-item-content {
@@ -23,7 +23,7 @@
.vis-foreground .vis-group,
.vis-labelset .vis-label {
border-bottom-color: @input-border !important;
border-bottom-color: var(--calendar-border) !important;
}
.vis-panel.vis-center,
@@ -32,11 +32,11 @@
.vis-panel.vis-top,
.vis-panel.vis-bottom,
.vis-time-axis .vis-grid.vis-major {
border-color: @input-border !important;
border-color: var(--calendar-border) !important;
}
.vis-item .vis-item-content {
color: #FFF !important;
color: var(--white-color) !important;
}
.vis-item.vis-range .vis-item-content,
@@ -78,7 +78,7 @@
}
.vis-item.vis-background.busy {
background-color: @gray-lighter;
background-color: var(--calendar-busy-bg);
}
.vis-item.vis-background.event-range {
@@ -94,4 +94,8 @@
.vis-timeline {
font-size: 93%;
}
}
}
.vis-time-axis .vis-grid.vis-minor {
border-color: var(--calendar-border) !important;
}
@@ -2,7 +2,7 @@
overflow-y: auto;
height: 150px;
width: 6.5em;
background: #fff;
//background: #fff;
border: 1px solid #ddd;
-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);
-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);
@@ -10,6 +10,9 @@
outline: none;
z-index: 10001;
margin: 0;
background: @dropdown-bg;
border-color: @dropdown-border;
}
.ui-timepicker-wrapper.ui-timepicker-with-duration {
@@ -34,20 +37,26 @@
padding: 3px 0 3px 5px;
cursor: pointer;
white-space: nowrap;
color: #000;
//color: #000;
list-style: none;
margin: 0;
color: @dropdown-link-color;
}
.ui-timepicker-list:hover .ui-timepicker-selected {
background: #fff; color: #000;
//background: #fff; color: #000;
color: var(--text-color);
background: @dropdown-link-hover-bg;
}
li.ui-timepicker-selected,
.ui-timepicker-list li:hover,
.ui-timepicker-list .ui-timepicker-selected:hover {
background: @brand-primary;
color: #fff;
//color: #fff;
color: var(--white-color);
}
li.ui-timepicker-selected .ui-timepicker-duration,
+72 -6
View File
@@ -13,6 +13,7 @@
--gray-dark: @gray-dark-value;
--gray-light: @gray-light-value;
--gray-lighter: @gray-lighter-value;
--gray: @gray-value;
--gray-light-5: darken(@gray-light-value, 5%);
--gray-light-7: darken(@gray-light-value, 7%);
@@ -91,8 +92,12 @@
--state-danger-bg: @state-danger-bg-value;
--state-danger-text: @state-danger-text-value;
--state-danger-text-10: darken(@state-danger-text-value, 10%);
--state-danger-bg-5: darken(@state-danger-bg-value, 5%);
--state-danger-bg-10: darken(@state-danger-bg-value, 10%);
--state-danger-text-10: darken(@state-danger-text-value, 10%);
--state-danger-text-10l: lighten(darken(@state-danger-text-value, 10%), 20);
--brand-info-5: darken(@brand-info-value, 5%);
--brand-info-10: darken(@brand-info-value, 10%);
@@ -140,9 +145,29 @@
--state-warning-bg: @state-warning-bg-value;
--state-warning-text: @state-warning-text-value;
--state-warning-text-10: darken(@state-warning-text-value, 10%);
--state-warning-text-10l: lighten(darken(@state-warning-text-value, 10%), 20);
--state-warning-bg-5: darken(@state-warning-bg-value, 5%);
--state-warning-bg-10: darken(@state-warning-bg-value, 10%);
--btn-default-bg: @btn-default-bg-value;
--btn-default-border: @btn-default-border-value;
--btn-default-color: @btn-default-color-value;
--btn-default-bg-5: darken(@btn-default-bg-value, 5%);
--btn-default-bg-12: darken(@btn-default-bg-value, 12%);
--btn-default-bg-17: darken(@btn-default-bg-value, 17%);
--btn-default-bg-25: darken(@btn-default-bg-value, 25%);
--btn-text-color: @btn-text-color-value;
--navbar-bg: @navbar-bg-value;
--navbar-link-color: @navbar-link-color-value;
--navbar-link-hover-color: @navbar-link-hover-color-value;
--navbar-link-hover-bg: @navbar-link-hover-bg-value;
--navbar-link-active-bg: darken(@navbar-bg-value, 10%);
--navbar-inverse-color: @navbar-inverse-color-value;
--navbar-inverse-bg: @navbar-inverse-bg-value;
--navbar-inverse-link-color: @navbar-inverse-link-color-value;
@@ -155,6 +180,8 @@
--navbar-inverse-link-disabled-color: @navbar-inverse-link-disabled-color-value;
--navbar-inverse-link-disabled-bg: @navbar-inverse-link-disabled-bg-value;
--input-color: @input-color-value;
--input-bg: @input-bg-value;
--input-border: @input-border-value;
--input-border-focus: @input-border-focus-value;
--input-border-focus-rgba: rgba(
@@ -165,8 +192,13 @@
);
--modal-backdrop-bg: @modal-backdrop-bg-value;
--modal-header-border-color: @modal-header-border-color-value;
--modal-header-bg: @modal-header-bg-value;
--modal-footer-bg: @modal-footer-bg-value;
--modal-content-bg: @modal-content-bg-value;
--text-color: @text-color-value;
--text-white-color: @text-white-color-value;
--link-color: @link-color-value;
--link-hover-color: @link-hover-color-value;
@@ -175,20 +207,54 @@
--table-bg-accent: @table-bg-accent-value;
--code-bg: @code-bg-value;
--code-border-color: @code-border-color-value;
--code-color: @code-color-value;
--default-heading-bg-color: @default-heading-bg-color-value;
--default-border-color: @default-border-color-value;
--panel-default-text: @panel-default-text-value;
--panel-default-heading-bg: @panel-default-heading-bg-value;
--panel-default-border: @panel-default-border-value;
--panel-primary-border: @panel-primary-border-value;
--panel-default-bg: @panel-default-bg-value;
--panel-primary-bg: @panel-primary-bg-value;
--panel-success-bg: @panel-success-bg-value;
--panel-danger-bg: @panel-danger-bg-value;
--panel-warning-bg: @panel-warning-bg-value;
--panel-info-bg: @panel-info-bg-value;
--btn-default-bg: @btn-default-bg-value;
--btn-default-border: @btn-default-border-value;
--panel-default-text: @panel-default-text-value;
--panel-primary-text: @panel-primary-text-value;
--panel-success-text: @panel-success-text-value;
--panel-danger-text: @panel-danger-text-value;
--panel-warning-text: @panel-warning-text-value;
--panel-info-text: @panel-info-text-value;
--login-panel-heading-bg: @login-panel-heading-bg-value;
--site-footer-bg: @site-footer-bg-value;
--site-footer-color: @site-footer-color-value;
--popover-bg: @popover-bg-value;
--dropdown-bg: @dropdown-bg-value;
--dropdown-link-color: @dropdown-link-color-value;
--dropdown-link-hover-color: @dropdown-link-hover-color-value;
--dropdown-link-hover-bg: @dropdown-link-hover-bg-value;
--dropdown-border: @dropdown-border-value;
--dropdown-divider-bg: @dropdown-divider-bg-value;
--calendar-today-bg: @calendar-today-bg-value;
--calendar-border: @calendar-border-value;
--calendar-busy-bg: @calendar-busy-bg-value;
--select-item-text-color: @select-item-text-color-value;
--select-item-bg: @select-item-bg-value;
--select-item-active-text-color: @select-item-active-text-color-value;
--select-item-active-bg: @select-item-active-bg-value;
--select-item-border: @select-item-border-value;
--label-color: @label-color-value;
--well-bg: @well-bg-value;
--well-border: @well-border-value;
}
+65 -8
View File
@@ -1,10 +1,11 @@
@main-gray-value: #E8ECED;
@white-color-value: #fafbfc;
@white-color-value: #FEFEFE;
@gray-base-value: #000;
@gray-soft-value: lighten(@gray-base-value, 39.0%);
@gray-dark-value: lighten(@gray-base-value, 20%);
@gray-value: lighten(@gray-base, 33.5%);
@gray-light-value: lighten(@gray-base, 46.7%);
@gray-lighter-value: lighten(@gray-base-value, 93.5%);
@@ -22,7 +23,7 @@
@state-primary-text-value: #5b9aca;
@state-success-bg-value: lighten(spin(@brand-success-value, 5), 31%);
@state-success-bg-value: lighten(spin(@brand-success-value, 5), 30%);
@state-success-text-value: darken(spin(@brand-success-value, 7), 17%);
@state-info-bg-value: #e5ddf8;
@@ -36,6 +37,11 @@
@state-info-bg-mix-value: mix(@state-info-bg-value, lighten(@gray-base-value, 93.5%), 50%);
@navbar-bg-value: @gray-lighter-value;
@navbar-link-color-value: @gray-light-value;
@navbar-link-hover-color-value: @gray-value;
@navbar-link-hover-bg-value: @body-bg-value;
@navbar-inverse-color-value: @gray-light-value;
@navbar-inverse-bg-value: #4A6492;
@navbar-inverse-border-value: transparent;
@@ -47,10 +53,17 @@
@input-border-value: #D1D5D6;
@input-border-focus-value: #66afe9;
@input-color-value: @gray-value;
@input-bg-value: @white-color-value;
@modal-backdrop-bg-value: #DBDBDB;
@modal-header-border-color-value: #e5e5e5;
@modal-header-bg-value: @default-heading-bg-color-value;
@modal-footer-bg-value: @body-bg-value;
@modal-content-bg-value: @body-bg-value;
@text-color-value: @gray-dark-value;
@text-white-color-value: @white-color-value;
@link-color-value: @brand-primary-value;
@link-hover-color-value: darken(@link-color-value, 15%);
@@ -60,21 +73,65 @@
@table-bg-value: transparent;
@table-bg-accent-value: #f9f9f9;
@code-bg-value: #f9f9f9;
@default-border-color-value: @main-gray-value;
@default-heading-bg-color-value: @main-gray-value;
@code-bg-value: #f9f9f9;
@code-border-color-value: @default-border-color-value;
@code-color-value: @gray-dark-value;
@panel-default-text-value: @gray-dark-value;
@panel-default-heading-bg-value: @default-heading-bg-color;
@panel-default-border-value: @default-border-color-value;
@panel-primary-border-value: darken(@brand-primary-value, 12%);
@panel-default-bg-value: @main-gray-value;
@panel-primary-bg-value: darken(@brand-primary-value, 12%);
@panel-danger-bg-value: @state-danger-bg-value;
@panel-warning-bg-value: #efda97;
@panel-success-bg-value: @state-success-bg-value;
@panel-info-bg-value: @state-info-bg-value;
@btn-default-bg-value: @main-gray;
@btn-default-border-value: @main-gray;
@panel-primary-border-value: darken(@brand-primary-value, 12%);
@panel-primary-text-value: @white-color-value;
@panel-danger-text-value: @state-danger-text-value;
@panel-success-text-value: @state-success-text-value;
@panel-warning-text-value: @state-warning-text-value;
@panel-info-text-value: @state-info-text-value;
@btn-default-color-value: #333;
@btn-default-bg-value: @main-gray-value;
@btn-default-border-value: @main-gray-value;
@btn-text-color-value: @gray-dark-value;
@site-footer-bg-value: @gray-lighter-value;
@site-footer-color-value: @gray-value;
@popover-bg-value: @white-color-value;
@dropdown-bg-value: @white-color-value;
@dropdown-link-color-value: @gray-dark-value;
@dropdown-link-hover-color-value: darken(@gray-dark-value, 5%);
@dropdown-link-hover-bg-value: #f5f5f5;
@dropdown-border-value: rgba(0,0,0,.15);
@dropdown-divider-bg-value: #e5e5e5;
@login-panel-heading-bg-value: @navbar-inverse-bg-value;
@gray-lighter-orange-mix-value: mix(orange, @gray-lighter-value, 50%);
@calendar-today-bg-value: #fcf8e3;
@calendar-border-value: #d1d5d6;
@calendar-busy-bg-value: @gray-lighter-value;
@select-item-text-color-value: @text-color-value;
@select-item-bg-value: #efefef;
@select-item-active-text-color-value: @white-color-value;
@select-item-active-bg-value: @brand-primary-value;
@select-item-border-value: @gray-light-value;
@label-color-value: #fff;
@well-bg-value: #f5f5f5;
@well-border-value: @default-border-color-value;
+51 -18
View File
@@ -10,20 +10,17 @@
@gray-dark: var(--gray-dark);
@gray-light: var(--gray-light);
@gray-lighter: var(--gray-lighter);
@gray: var(--gray);
@btn-default-bg: var(--btn-default-bg);
@btn-default-border: var(--btn-default-border);
@btn-default-color: var(--btn-default-color);
@btn-danger-bg: var(--brand-danger-5);
@btn-info-border: var(--brand-info-5);
@btn-success-border: var(--brand-success-5);
@btn-warning-border: var(--brand-warning-5);
@btn-default-bg-10: var(--main-gray-5);
@btn-default-border-12: var(--main-gray-12);
@btn-default-bg-17: var(--main-gray-17);
@btn-default-border-25: var(--main-gray-25);
@btn-primary-bg-10: var(--brand-primary-10);
@btn-primary-border-12: var(--brand-primary-12);
@btn-primary-bg-17: var(--brand-primary-17);
@@ -40,7 +37,7 @@
@btn-info-border-25: var(--brand-info-25);
@btn-success-bg-10: var(--brand-success-10);
@btn-success-border-12: var(--success-info-12);
@btn-success-border-12: var(--brand-success-12);
@btn-success-bg-17: var(--brand-success-17);
@btn-success-border-25: var(--brand-success-25);
@@ -75,6 +72,8 @@
@list-group-active-text-color: var(--main-gray-lighten-40);
@input-color: var(--input-color);
@input-bg: var(--input-bg);
@input-border: var(--input-border);
@input-border-focus: var(--input-border-focus);
@@ -106,7 +105,10 @@
@modal-inner-padding: @panel-padding;
@modal-header-bg: @default-heading-bg-color;
@modal-header-border-color: var(--modal-header-border-color);
@modal-header-bg: var(--modal-header-bg);
@modal-footer-bg: var(--modal-footer-bg);
@modal-content-bg: var(--modal-content-bg);
.container-fixed() {
margin-right: auto;
@@ -146,15 +148,16 @@
@state-success-text-10: var(--state-success-text-10);
@state-danger-border: var(--state-danger-bg-10);
@state-danger-text: var(--state-danger-text);
@state-info-bg: var(--state-info-bg);
@state-info-bg-5: var(--state-info-bg-5);
@state-info-border: var(--state-info-bg-10);
@state-warning-text: var(--state-warning-text);
@state-warning-border: var(--state-warning-bg-10);
@panel-warning-bg: var(--panel-warning-bg);
@state-warning-bg: var(--state-warning-bg);
@panel-primary-border: var(--panel-primary-border);
@@ -186,20 +189,38 @@
@navbar-inverse-link-disabled-color: var(--navbar-inverse-link-disabled-color);
@navbar-inverse-link-disabled-bg: var(--navbar-inverse-link-disabled-bg);
@panel-primary-text: @white-color;
@well-bg: @default-heading-bg-color;
@breadcrumb-bg: @default-heading-bg-color;
@well-border: var(--main-gray-7);
@well-bg: var(--well-bg);
@well-border: var(--well-border);
@progress-bg: @default-heading-bg-color;
@list-group-hover-bg: @default-heading-bg-color;
@panel-footer-bg: @default-heading-bg-color;
@label-color: var(--label-color);
@panel-default-border: var(--panel-default-border);
@panel-default-text: var(--panel-default-text);
@panel-default-heading-bg: var(--panel-default-heading-bg);
@panel-default-border: var(--default-border-color);
@panel-primary-text: var(--panel-primary-text);
@panel-warning-text: var(--panel-warning-text);
@panel-info-text: var(--panel-info-text);
@panel-success-text: var(--panel-success-text);
@panel-danger-text: var(--panel-danger-text);
@panel-default-bg: var(--panel-default-bg);
@panel-primary-bg: var(--panel-primary-bg);
@panel-warning-bg: var(--panel-warning-bg);
@panel-info-bg: var(--panel-info-bg);
@panel-success-bg: var(--panel-success-bg);
@panel-danger-bg: var(--panel-danger-bg);
@panel-primary-border: @panel-primary-bg;
@panel-warning-border: @panel-warning-bg;
@panel-info-border: @panel-info-bg;
@panel-success-border: @panel-success-bg;
@panel-danger-border: @panel-danger-bg;
@default-border-color: var(--default-border-color);
@@ -208,8 +229,10 @@
@thumbnail-border: @default-border-color;
@table-border-color: @default-border-color;
@navbar-default-toggle-hover-bg: @default-border-color;
@navbar-default-toggle-border-color: @default-border-color;
@nav-tabs-border-color: @default-border-color;
@nav-tabs-active-link-hover-border-color: @default-border-color;
@nav-tabs-justified-link-border-color: @default-border-color;
@@ -261,7 +284,17 @@
@well-padding: 14px;
@dropdown-link-hover-color: var(--gray-dark-5);
@dropdown-bg: var(--dropdown-bg);
@dropdown-link-hover-color: var(--dropdown-link-hover-color);
@dropdown-link-color: var(--dropdown-link-color);
@dropdown-link-hover-bg: var(--dropdown-link-hover-bg);
@dropdown-border: var(--dropdown-border);
@dropdown-divider-bg: var(--dropdown-divider-bg);
@popover-bg: @white-color;
@popover-title-bg: var(--white-color-3);
@popover-bg: var(--popover-bg);
@popover-title-bg: var(--white-color);
@selectize-color-text: var(--select-item-text-color);
@selectize-color-item: var(--select-item-bg);
@selectize-color-item-active: var(--select-item-active-bg);
@selectize-color-item-active-text: var(--select-item-active-text-color);
+10 -10
View File
@@ -9,7 +9,7 @@
@media screen and (min-width: @screen-sm-min) {
#navbar .navbar {
.navbar-right {
background-color: @navbar-bg;
background-color: var(--navbar-bg);
}
}
}
@@ -28,20 +28,16 @@
line-height: 17px;
}
.modal-content {
background-color: @white-color;
}
.dialog-record .modal-content > .modal-body {
background-color: @body-bg;
}
.modal-body > .list-group {
background-color: @white-color;
background-color: --var(modal-content-bg);
}
.list-container > .list {
background-color: @white-color;
background-color: @table-bg;
}
.panel-heading > .btn-group {
@@ -127,7 +123,7 @@ table.table {
.calendar-container > .calendar,
.calendar-container > .timeline {
background-color: @white-color;
background-color: @table-bg;
}
#main > .calendar-container {
@@ -153,7 +149,7 @@ table.table {
}
.field .list-group {
background-color: @white-color;
background-color: var(--default-border-color);
}
.field .grid-stack-item-content {
@@ -170,7 +166,7 @@ table.table {
}
.record .stick-sub.button-container {
background-color: @navbar-bg !important;
background-color: var(--navbar-bg) !important;
padding-bottom: 0;
}
@@ -185,3 +181,7 @@ table.table {
.list-kanban {
padding-right: 3px;
}
.well {
border-width: 0;
}
@@ -4,4 +4,6 @@
@import "../variables.less";
@import "../../espo/root-variables.less";
@import "../../espo/iframe/iframe.less";
+13 -7
View File
@@ -14,23 +14,29 @@
@brand-warning-value: #e4a133;
@panel-default-border-value: #dcdcdc;
@panel-primary-border-value: #849fab;
@panel-default-bg-value: transparent;
@panel-primary-bg-value: #849fab;
@panel-success-bg-value: #cee0ba;
@panel-danger-bg-value: #ebccd1;
@panel-warning-bg-value: #efda97;
@btn-default-bg-value: #f7f7f7;
@btn-default-border-value: #cccccc;
@input-border-focus-value: #99b4cc;
@panel-default-heading-bg-value: @white-color-value;
@modal-header-bg-value: @white-color-value;
@modal-footer-bg-value: @white-color-value;
@modal-content-bg-value: @white-color-value;
@table-bg-value: @white-color-value;
@navbar-bg: @body-bg;
@well-bg-value: @panel-bg-value;
@well-border-value: @panel-default-border-value;
@top-navbar-bg-color: @body-bg;
@select-item-border-value: @btn-default-border-value;
@modal-header-bg: @white-color;
@well-bg: @white-color;
@navbar-bg-value: @body-bg-value;
@panel-border-width: 0;
+2
View File
@@ -4,4 +4,6 @@
@import "../../hazyblue-vertical/variables.less";
@import "../../espo/root-variables.less";
@import "../../espo/iframe/iframe.less";
@@ -4,4 +4,6 @@
@import "../../sakura/variables.less";
@import "../../espo/root-variables.less";
@import "../../espo/iframe/iframe.less";
+2
View File
@@ -4,4 +4,6 @@
@import "../variables.less";
@import "../../espo/root-variables.less";
@import "../../espo/iframe/iframe.less";
@@ -4,4 +4,6 @@
@import "../../violet/variables.less";
@import "../../espo/root-variables.less";
@import "../../espo/iframe/iframe.less";
+2
View File
@@ -4,4 +4,6 @@
@import "../variables.less";
@import "../../espo/root-variables.less";
@import "../../espo/iframe/iframe.less";