micord/ervu-lkrp-ul
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

btn

Browse source
This commit is contained in:
m.epshtein 2024-06-13 20:13:46 +03:00
parent 11760676cb
commit 8bb5b44181
3 changed files with 270 additions and 219 deletions
Download patch file Download diff file Expand all files Collapse all files

451
frontend/src/resources/css/components-app.css
View file

@ -1,6 +1,20 @@
@charset "utf-8"; @charset "utf-8";
.webbpm div[id="page"],
.webbpm div[id="page"] > div,
.webbpm div[id="page"] > div > div {
display: flex;
flex-direction: column;
height: 100%;
}
.webbpm [id="page"] > div > div > [page-object]:first-child {
padding-top: 15px;
}
.webbpm [id="page"] > div > div > [page-object] { .webbpm [id="page"] > div > div > [page-object] {
display: inherit;
margin-bottom: 10px;
padding: 0 40px; padding: 0 40px;
} }
@ -15,33 +29,33 @@
} }
.webbpm .sub-header { .webbpm .sub-header {
color: #fff; color: var(--white);
font-weight: normal; font-weight: normal;
padding: 0 20px; padding: 0 20px;
margin-top: 10px; margin-top: 10px;
border-radius: 20px; border-radius: 20px;
background: #4c5969; background: var(--bg-secondary);
}
.webbpm .sub-header > .form-group { & > .form-group {
padding: 10px 0; padding: 10px 0;
margin-bottom: 0; margin-bottom: 0;
} }
.webbpm .sub-header>div > div:last-of-type { & > div > div:last-of-type {
font-size: 18px; font-size: 18px;
padding: 0; padding: 0;
}
} }
.webbpm .form-signup input.ng-invalid.ng-touched, .webbpm .form-signup input.ng-invalid.ng-touched,
.webbpm .form-signup input.ng-invalid.ng-touched ~ .input-group-append > .input-group-text, .webbpm .form-signup input.ng-invalid.ng-touched ~ .input-group-append > .input-group-text,
.webbpm .form-signup input.ng-invalid.ng-dirty, .webbpm .form-signup input.ng-invalid.ng-dirty,
.webbpm .form-signup input.ng-invalid.ng-dirty ~ .input-group-append > .input-group-text { .webbpm .form-signup input.ng-invalid.ng-dirty ~ .input-group-append > .input-group-text {
border-color: #1c92ea !important; border-color: var(--color-link) !important;
} }
.webbpm .form-signup .msg-alert { .webbpm .form-signup .msg-alert {
color: #1c92ea; color: var(--color-link);
} }
.webbpm input[type="text"], .webbpm input[type="text"],
@ -54,13 +68,13 @@
.webbpm select, .webbpm select,
.webbpm .selectize-control.single .selectize-input, .webbpm .selectize-control.single .selectize-input,
.webbpm .multi.plugin-remove_button .selectize-input { .webbpm .multi.plugin-remove_button .selectize-input {
color: #404954; color: var(--color-text-primary);
font-size: 16px; font-size: var(--size-text-primary);
min-height: 38px; min-height: 38px;
padding: 6px 8px; padding: 6px 8px;
border: 1px solid #e3e6ed; border: 1px solid var(--border-light);
border-radius: 8px; border-radius: 8px;
background-color: #fff; background-color: var(--white);
background-image: none; background-image: none;
box-shadow: none; box-shadow: none;
} }
@ -73,12 +87,12 @@
.webbpm .wb-touched.wb-invalid .input-group-addon:focus, .webbpm .wb-touched.wb-invalid .input-group-addon:focus,
.webbpm .wb-touched.wb-invalid .selectize-input, .webbpm .wb-touched.wb-invalid .selectize-input,
.webbpm .wb-touched.wb-invalid .selectize-input:focus { .webbpm .wb-touched.wb-invalid .selectize-input:focus {
border-color: #1c92ea !important; border-color: var(--color-link) !important;
box-shadow: none !important; box-shadow: none !important;
} }
.webbpm select option:checked { .webbpm select option:checked {
color: #1c92ea; color: var(--color-link);
} }
.webbpm .input-group input[name="password"], .webbpm .input-group input[name="password"],
@ -92,8 +106,8 @@
.webbpm .input-group input[name="password"] ~ .input-group-append > .input-group-text, .webbpm .input-group input[name="password"] ~ .input-group-append > .input-group-text,
.webbpm .input-group input[name="confirmPassword"] ~ .input-group-append > .input-group-text, .webbpm .input-group input[name="confirmPassword"] ~ .input-group-append > .input-group-text,
.webbpm .date input ~ .input-group-addon { .webbpm .date input ~ .input-group-addon {
color: #404954; color: var(--color-text-primary);
border-color: #e3e6ed; border-color: var(--border-light);
border-radius: 8px; border-radius: 8px;
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
@ -103,8 +117,8 @@
.webbpm .input-group input[name="password"] ~ .input-group-append > .input-group-text, .webbpm .input-group input[name="password"] ~ .input-group-append > .input-group-text,
.webbpm .input-group input[name="confirmPassword"] ~ .input-group-append > .input-group-text, .webbpm .input-group input[name="confirmPassword"] ~ .input-group-append > .input-group-text,
.webbpm .date input ~ .input-group-addon { .webbpm .date input ~ .input-group-addon {
color: #404954; color: var(--color-text-primary);
border-color: #e3e6ed; border-color: var(--border-light);
border-radius: 8px; border-radius: 8px;
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
@ -114,21 +128,21 @@
.webbpm international-phone-number .input-group-addon.flagInput { .webbpm international-phone-number .input-group-addon.flagInput {
border: 0; border: 0;
background-color: transparent; background-color: transparent;
}
.webbpm international-phone-number .input-group-addon.flagInput .btn { .btn {
border: 1px solid #e3e6ed; border: 1px solid var(--border-light);
border-right: 0; border-right: 0;
border-radius: 10px; border-radius: 10px;
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
.webbpm international-phone-number .input-group-addon.flagInput ~ input { & ~ input {
border-right: 1px solid #e3e6ed; border-right: 1px solid var(--border-light);
border-radius: 10px; border-radius: 10px;
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
}
} }
.webbpm .selectize-dropdown { .webbpm .selectize-dropdown {
@ -136,14 +150,14 @@
} }
.webbpm .selectize-dropdown-content { .webbpm .selectize-dropdown-content {
border: 1px solid #e3e6ed; border: 1px solid var(--border-light);
border-radius: 10px; border-radius: 10px;
background-color: #fff; background-color: var(--white);
box-shadow: 0 8px 12px rgb(77 72 91 / 5%), 0 6px 10px rgb(77 72 91 / 0%); box-shadow: 0 8px 12px rgb(77 72 91 / 5%), 0 6px 10px rgb(77 72 91 / 0%);
} }
.webbpm .selectize-dropdown .active { .webbpm .selectize-dropdown .active {
color: #1c92ea; color: var(--color-link);
background-color: transparent; background-color: transparent;
} }
@ -167,7 +181,7 @@
.webbpm .date .form-control[readonly] ~ .input-group-addon, .webbpm .date .form-control[readonly] ~ .input-group-addon,
.webbpm fieldset[disabled] .form-control, .webbpm fieldset[disabled] .form-control,
.webbpm .selectize-control .selectize-input.disabled { .webbpm .selectize-control .selectize-input.disabled {
background-color: #f5f7fa; background-color: var(--bg-light);
} }
.webbpm .selectize-control.form-control { .webbpm .selectize-control.form-control {
@ -184,9 +198,9 @@
} }
.webbpm drop-down-button .dropdown-menu.show { .webbpm drop-down-button .dropdown-menu.show {
border: 1px solid #e3e6ed; border: 1px solid var(--border-light);
border-radius: 10px; border-radius: 10px;
background-color: #fff; background-color: var(--white);
box-shadow: 0 8px 12px rgb(77 72 91 / 5%), 0 6px 10px rgb(77 72 91 / 0%); box-shadow: 0 8px 12px rgb(77 72 91 / 5%), 0 6px 10px rgb(77 72 91 / 0%);
} }
@ -198,17 +212,17 @@
} }
.webbpm .selectize-dropdown-content { .webbpm .selectize-dropdown-content {
font-size: 16px; font-size: var(--size-text-primary);
} }
.webbpm .selectize-dropdown .more_values { .webbpm .selectize-dropdown .more_values {
color: #404954; color: var(--color-text-primary);
background-color: #f0f7fd; background-color: #f0f7fd;
} }
/*----------------- Button ---------------- */ /*----------------- Button ---------------- */
.webbpm .btn { .webbpm .btn {
font-size: 16px; font-size: var(--size-text-primary);
font-family: 'SegoeSB'; font-family: 'SegoeSB';
padding: 6px 14px; padding: 6px 14px;
margin-bottom: 0; margin-bottom: 0;
@ -227,9 +241,9 @@
.webbpm .btn-main > * > .btn, .webbpm .btn-main > * > .btn,
.webbpm .btn-primary { .webbpm .btn-primary {
color: #fff !important; color: var(--white) !important;
border-color: #1c92ea; border-color: var(--color-link);
background: #1c92ea; background: var(--color-link);
box-shadow: 0px 0px 6px 2px rgb(77 72 91 / 6%); box-shadow: 0px 0px 6px 2px rgb(77 72 91 / 6%);
} }
.webbpm .btn-main > * > .btn:not(:disabled):not(.disabled):hover, .webbpm .btn-main > * > .btn:not(:disabled):not(.disabled):hover,
@ -248,23 +262,23 @@
.webbpm .btn-secondary, .webbpm .btn-secondary,
.webbpm .btn-default { .webbpm .btn-default {
color: #404954; color: var(--color-text-primary);
border: 1px solid #e3e6ed; border: 1px solid var(--border-light);
background: #fff; background: var(--white);
box-shadow: 0px 0px 6px 2px rgb(77 72 91 / 6%); box-shadow: 0px 0px 6px 2px rgb(77 72 91 / 6%);
} }
.webbpm .btn-secondary:not(:disabled):not(.disabled):hover, .webbpm .btn-secondary:not(:disabled):not(.disabled):hover,
.webbpm .btn-secondary:not(:disabled):not(.disabled):active, .webbpm .btn-secondary:not(:disabled):not(.disabled):active,
.webbpm .btn-default:not(:disabled):not(.disabled):hover, .webbpm .btn-default:not(:disabled):not(.disabled):hover,
.webbpm .btn-default:not(:disabled):not(.disabled):active { .webbpm .btn-default:not(:disabled):not(.disabled):active {
color: #1c92ea; color: var(--color-link);
border-color: #e3e6ed; border-color: var(--border-light);
background-color: #fff; background-color: var(--white);
} }
.webbpm .btn-secondary:not(:disabled):not(.disabled):focus, .webbpm .btn-secondary:not(:disabled):not(.disabled):focus,
.webbpm .btn-default:not(:disabled):not(.disabled):focus { .webbpm .btn-default:not(:disabled):not(.disabled):focus {
border-color: #e3e6ed; border-color: var(--border-light);
background-color: #fff; background-color: var(--white);
box-shadow: none; box-shadow: none;
} }
@ -281,14 +295,14 @@
.webbpm .btn-main .btn.disabled, .webbpm .btn-main .btn.disabled,
.webbpm .btn-main .btn:disabled { .webbpm .btn-main .btn:disabled {
color: rgba(255, 255, 255, 0.8) !important; color: rgba(255, 255, 255, 0.8) !important;
border-color: #1c92ea; border-color: var(--color-link);
background-color: #1c92ea; background-color: var(--color-link);
box-shadow: none; box-shadow: none;
} }
.webbpm ag-grid-angular .state-btn-edit, .webbpm ag-grid-angular .state-btn-edit,
.webbpm ag-grid-angular .state-btn-delete { .webbpm ag-grid-angular .state-btn-delete {
color: #1c92ea !important; color: var(--color-link) !important;
border: 0; border: 0;
background: transparent; background: transparent;
box-shadow: none; box-shadow: none;
@ -305,51 +319,52 @@
flex-direction: column; flex-direction: column;
max-width: 800px; max-width: 800px;
margin-top: 20px; margin-top: 20px;
}
.webbpm bread-crumb .status_bar { .status_bar {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: stretch; justify-content: stretch;
}
.webbpm bread-crumb .status_bar .crumb-element { .crumb-element {
color: #fff; color: var(--white);
font-size: 14px; font-size: var(--size-text-secondary);
padding: 4px 15px; padding: 4px 15px;
background-color: #4c5969; background-color: var(--bg-secondary);
border-radius: 20px; border-radius: 20px;
z-index: 1; z-index: 1;
} }
.webbpm bread-crumb .status_bar > div + div { & > div + div {
position: relative; position: relative;
display: flex; display: flex;
justify-content: end; justify-content: end;
flex: 1; flex: 1;
}
.webbpm bread-crumb .status_bar > div + div::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 2px;
background-color: #4c5969;
}
.webbpm bread-crumb .status_bar > div.active ~ div::before { &::before {
background-color: #e3e6ed; content: "";
} position: absolute;
left: 0;
right: 0;
top: 50%;
height: 2px;
background-color: var(--bg-secondary);
}
}
.webbpm bread-crumb .status_bar > div.active .crumb-element { & > div.active ~ div::before {
background-color: #1c92ea; background-color: var(--border-light);
} }
.webbpm bread-crumb .status_bar > div.active ~ div .crumb-element { & > div.active .crumb-element {
color: #989fa8; background-color: var(--color-link);
background-color: #e3e6ed; }
& > div.active ~ div .crumb-element {
color: #989fa8;
background-color: var(--border-light);
}
}
} }
/*--------------- end Bread-crumb ------------ */ /*--------------- end Bread-crumb ------------ */
@ -396,13 +411,13 @@
.webbpm ag-grid-angular .ag-header { .webbpm ag-grid-angular .ag-header {
border: 0; border: 0;
border-radius: 12px; border-radius: 12px;
background: #f5f7fa; background: var(--bg-light);
} }
.webbpm ag-grid-angular .ag-header-row { .webbpm ag-grid-angular .ag-header-row {
color: #404954; color: var(--color-text-primary);
font-family: 'SegoeSB'; font-family: 'SegoeSB';
font-size: 14px; font-size: var(--size-text-secondary);
font-weight: normal; font-weight: normal;
} }
@ -413,7 +428,7 @@
.webbpm ag-grid-angular .ag-header-group-cell { .webbpm ag-grid-angular .ag-header-group-cell {
font-family: 'SegoeB'; font-family: 'SegoeB';
font-size: 16px; font-size: var(--size-text-primary);
} }
.webbpm ag-grid-angular .ag-header-cell>.ag-cell-label-container>.ag-header-cell-label>.ag-header-cell-text { .webbpm ag-grid-angular .ag-header-cell>.ag-cell-label-container>.ag-header-cell-label>.ag-header-cell-text {
@ -422,16 +437,15 @@
.webbpm ag-grid-angular .ag-header .ag-floating-filter-body input { .webbpm ag-grid-angular .ag-header .ag-floating-filter-body input {
font-family: 'Segoe'; font-family: 'Segoe';
font-size: 14px; font-size: var(--size-text-secondary);
min-height: 20px; min-height: 20px;
padding: 2px; padding: 2px;
border: 1px solid #e3e6ed; border: 1px solid var(--border-light);
border-radius: 4px; border-radius: 4px;
background: transparent; background: transparent;
} }
.webbpm ag-grid-angular .ag-root, .webbpm ag-grid-angular :is(.ag-root, .ag-header-row) {
.webbpm ag-grid-angular .ag-header-row {
border: 0; border: 0;
} }
@ -440,7 +454,7 @@
} }
.webbpm ag-grid-angular .ag-row { .webbpm ag-grid-angular .ag-row {
border-color: #e3e6ed; border-color: var(--border-light);
} }
.webbpm ag-grid-angular .ag-row::before { .webbpm ag-grid-angular .ag-row::before {
display: none; display: none;
@ -454,13 +468,12 @@
border-width: 1px 0; border-width: 1px 0;
} }
.webbpm ag-grid-angular .ag-row.ag-row-odd, .webbpm ag-grid-angular :is(.ag-row.ag-row-odd, .ag-row.ag-row-selected) {
.webbpm ag-grid-angular .ag-row.ag-row-selected {
background-color: inherit !important; background-color: inherit !important;
} }
.webbpm ag-grid-angular .ag-row.ag-row-selected .ag-cell { .webbpm ag-grid-angular .ag-row.ag-row-selected .ag-cell {
color: #1c92ea; color: var(--color-link);
} }
.webbpm ag-grid-angular .ag-body-viewport .ag-row.ag-row-hover { .webbpm ag-grid-angular .ag-body-viewport .ag-row.ag-row-hover {
@ -483,8 +496,8 @@
.webbpm ag-grid-angular .ag-row .ag-cell { .webbpm ag-grid-angular .ag-row .ag-cell {
display: inline-flex; display: inline-flex;
color: #404954; color: var(--color-text-primary);
font-size: 16px; font-size: var(--size-text-primary);
padding: 0 10px; padding: 0 10px;
border: 1px solid transparent; border: 1px solid transparent;
} }
@ -532,7 +545,7 @@
} }
.webbpm ag-grid-angular .ag-cell.ag-cell-focus.ag-cell-inline-editing input { .webbpm ag-grid-angular .ag-cell.ag-cell-focus.ag-cell-inline-editing input {
font-size: 16px; font-size: var(--size-text-primary);
padding: 0; padding: 0;
border: 0; border: 0;
background: transparent; background: transparent;
@ -540,41 +553,42 @@
} }
.webbpm ag-grid-angular .ag-paging-panel { .webbpm ag-grid-angular .ag-paging-panel {
color: #404954; color: var(--color-text-primary);
font-size: 14px; font-size: var(--size-text-secondary);
border: 0; border: 0;
border-radius: 12px; border-radius: 12px;
background: #f5f7fa; background: var(--bg-light);
}
.webbpm ag-grid-angular .ag-paging-panel .ag-paging-button { .ag-paging-button {
display: flex; display: flex;
width: 32px; width: 32px;
height: 32px; height: 32px;
border: 1px solid #e3e6ed; border: 1px solid var(--border-light);
border-radius: 16px; border-radius: 16px;
box-shadow: 0px 0px 6px 2px rgb(77 72 91 / 6%); box-shadow: 0px 0px 6px 2px rgb(77 72 91 / 6%);
}
.webbpm ag-grid-angular .ag-paging-panel .ag-paging-button:not(:disabled) {
opacity: 1;
}
.webbpm ag-grid-angular .ag-paging-panel .ag-paging-button > span { &:not(:disabled) {
display: flex; opacity: 1;
align-items: center; }
justify-content: center;
width: 100%;
}
.webbpm ag-grid-angular .ag-paging-panel .ag-paging-button + .ag-paging-button { & > span {
margin-left: 8px; display: flex;
} align-items: center;
justify-content: center;
width: 100%;
}
.webbpm ag-grid-angular .ag-paging-panel .ag-paging-button[ref="btPrevious"] { & + .ag-paging-button {
margin-right: 16px; margin-left: 8px;
} }
.webbpm ag-grid-angular .ag-paging-panel .ag-paging-button[ref="btNext"]{
margin-left: 16px; &[ref="btPrevious"] {
margin-right: 16px;
}
&[ref="btNext"]{
margin-left: 16px;
}
}
} }
.webbpm ag-grid-angular .ag-floating-bottom { .webbpm ag-grid-angular .ag-floating-bottom {
@ -588,9 +602,9 @@
} }
.webbpm ag-grid-angular .ag-floating-bottom-container input { .webbpm ag-grid-angular .ag-floating-bottom-container input {
color: #404954; color: var(--color-text-primary);
font-family: 'SegoeSB'; font-family: 'SegoeSB';
font-size: 16px; font-size: var(--size-text-primary);
height: 20px; height: 20px;
padding: 0; padding: 0;
border: 0; border: 0;
@ -612,16 +626,16 @@
.webbpm .grid-mtm { .webbpm .grid-mtm {
width: 46%; width: 46%;
} & + .many-to-many-move-buttons {
.webbpm .grid-mtm + .many-to-many-move-buttons { width: 8%;
width: 8%; & button.btn {
} width: 100%;
.webbpm .grid-mtm + .many-to-many-move-buttons button.btn { }
width: 100%; }
} }
.webbpm ag-grid-angular .ag-overlay-loading-center { .webbpm ag-grid-angular .ag-overlay-loading-center {
border: 1px solid #e3e6ed; border: 1px solid var(--border-light);
box-shadow: 0px 0px 6px 2px rgb(77 72 91 / 6%); box-shadow: 0px 0px 6px 2px rgb(77 72 91 / 6%);
} }
@ -719,7 +733,7 @@
} }
.webbpm editable-grid ag-grid-angular text-area-grid-editor .form-control { .webbpm editable-grid ag-grid-angular text-area-grid-editor .form-control {
font-size: 16px; font-size: var(--size-text-primary);
min-height: 100px; min-height: 100px;
border: 0; border: 0;
background-color: #f0f7fd; background-color: #f0f7fd;
@ -808,7 +822,7 @@
} }
.webbpm editable-grid ag-grid-angular .ag-popup-editor one-to-may-auto-complete-grid-editor + button-component .btn { .webbpm editable-grid ag-grid-angular .ag-popup-editor one-to-may-auto-complete-grid-editor + button-component .btn {
color: #404954 !important; color: var(--color-text-primary) !important;
white-space: nowrap; white-space: nowrap;
padding: 0; padding: 0;
background-color: transparent !important; background-color: transparent !important;
@ -821,13 +835,13 @@
padding: 6px; padding: 6px;
border: 1px solid #f5f5f5; border: 1px solid #f5f5f5;
border-radius: 12px; border-radius: 12px;
background-color: #fff; background-color: var(--white);
box-shadow: 0px 100px 80px rgb(0 0 0 / 7%), 0px 40px 30px rgb(0 0 0 / 5%), 0px 22px 18px rgb(0 0 0 / 4%), 0px 12.5px 10px rgb(0 0 0 / 4%), 0px 6.5px 5px rgb(0 0 0 / 3%), 0px 2.5px 2px rgb(0 0 0 / 2%); box-shadow: 0px 100px 80px rgb(0 0 0 / 7%), 0px 40px 30px rgb(0 0 0 / 5%), 0px 22px 18px rgb(0 0 0 / 4%), 0px 12.5px 10px rgb(0 0 0 / 4%), 0px 6.5px 5px rgb(0 0 0 / 3%), 0px 2.5px 2px rgb(0 0 0 / 2%);
} }
.webbpm ag-grid-angular .ag-tab-header { .webbpm ag-grid-angular .ag-tab-header {
border: 0; border: 0;
background-color: #fff; background-color: var(--white);
} }
.webbpm ag-grid-angular .ag-tab-header .ag-tab { .webbpm ag-grid-angular .ag-tab-header .ag-tab {
@ -850,8 +864,8 @@
} }
.webbpm ag-grid-angular .ag-tab-body { .webbpm ag-grid-angular .ag-tab-body {
color: #404954; color: var(--color-text-primary);
font-size: 14px; font-size: var(--size-text-secondary);
padding: 0; padding: 0;
} }
@ -860,8 +874,8 @@
} }
.webbpm ag-grid-angular .ag-menu .ag-menu-option { .webbpm ag-grid-angular .ag-menu .ag-menu-option {
color: #404954; color: var(--color-text-primary);
font-size: 14px; font-size: var(--size-text-secondary);
} }
.webbpm ag-grid-angular .ag-menu .ag-menu-option-active { .webbpm ag-grid-angular .ag-menu .ag-menu-option-active {
@ -896,14 +910,14 @@
width: 300px; width: 300px;
border: 1px solid #efefef; border: 1px solid #efefef;
border-radius: 12px 0 0 12px; border-radius: 12px 0 0 12px;
background: #fff; background: var(--white);
box-shadow: -2px 0px 12px -6px rgb(0 0 0 / 20%); box-shadow: -2px 0px 12px -6px rgb(0 0 0 / 20%);
} }
.webbpm ag-grid-angular .ag-side-bar .ag-tool-panel-wrapper, .webbpm ag-grid-angular .ag-side-bar .ag-tool-panel-wrapper,
.webbpm ag-grid-angular .ag-side-bar .ag-tool-panel-wrapper .ag-filter-toolpanel-header { .webbpm ag-grid-angular .ag-side-bar .ag-tool-panel-wrapper .ag-filter-toolpanel-header {
color: #404954; color: var(--color-text-primary);
font-size: 16px; font-size: var(--size-text-primary);
font-weight: normal; font-weight: normal;
background: transparent; background: transparent;
} }
@ -924,9 +938,9 @@
} }
.webbpm ag-grid-angular .ag-side-bar .ag-side-buttons .ag-side-button button { .webbpm ag-grid-angular .ag-side-bar .ag-side-buttons .ag-side-button button {
color: #404954; color: var(--color-text-primary);
font-family: 'Segoe'; font-family: 'Segoe';
font-size: 14px; font-size: var(--size-text-secondary);
border: 0; border: 0;
border-radius: 10px; border-radius: 10px;
} }
@ -993,7 +1007,7 @@
.webbpm ag-grid-angular .ag-side-bar .card-header i { .webbpm ag-grid-angular .ag-side-bar .card-header i {
float: none; float: none;
font-size: 14px; font-size: var(--size-text-secondary);
text-align: center; text-align: center;
width: 16px; width: 16px;
margin: 0; margin: 0;
@ -1011,12 +1025,12 @@
} }
.webbpm ag-grid-angular .ag-side-bar .card-block button { .webbpm ag-grid-angular .ag-side-bar .card-block button {
color: #404954; color: var(--color-text-primary);
min-height: 35px; min-height: 35px;
margin-bottom: 6px; margin-bottom: 6px;
border: 1px solid #e3e6ed; border: 1px solid var(--border-light);
border-radius: 8px; border-radius: 8px;
background: #fff; background: var(--white);
box-shadow: 0px 2px 3px -2px rgb(0 0 0 / 20%); box-shadow: 0px 2px 3px -2px rgb(0 0 0 / 20%);
} }
@ -1042,18 +1056,18 @@
} }
.webbpm ag-grid-angular .ag-popup .ag-select-list-item { .webbpm ag-grid-angular .ag-popup .ag-select-list-item {
font-size: 16px; font-size: var(--size-text-primary);
background: transparent; background: transparent;
} }
.webbpm ag-grid-angular .ag-popup .ag-select-list-item.ag-active-item { .webbpm ag-grid-angular .ag-popup .ag-select-list-item.ag-active-item {
color: #1c92ea; color: var(--color-link);
} }
.webbpm ag-grid-angular .ag-popup .ag-popup-child:not(.ag-tooltip-custom) { .webbpm ag-grid-angular .ag-popup .ag-popup-child:not(.ag-tooltip-custom) {
padding: 6px 4px; padding: 6px 4px;
border: 0; border: 0;
border-radius: 10px; border-radius: 10px;
background-color: #fff; background-color: var(--white);
box-shadow: 0px 0px 6px 2px rgb(77 72 91 / 12%); box-shadow: 0px 0px 6px 2px rgb(77 72 91 / 12%);
} }
@ -1095,7 +1109,7 @@
height: 16px; height: 16px;
left: -24px; left: -24px;
top: 0; top: 0;
border: 1px solid #fff; border: 1px solid var(--white);
border-radius: 8px; border-radius: 8px;
box-shadow: 0px 1px 2px -1px rgb(0 0 0 / 45%); box-shadow: 0px 1px 2px -1px rgb(0 0 0 / 45%);
} }
@ -1110,12 +1124,12 @@
} }
.webbpm ag-grid-angular .ag-overlay-loading-center { .webbpm ag-grid-angular .ag-overlay-loading-center {
color: #404954; color: var(--color-text-primary);
font-size: 14px; font-size: var(--size-text-secondary);
padding: 20px; padding: 20px;
border: 1px solid #f5f5f5; border: 1px solid #f5f5f5;
border-radius: 12px; border-radius: 12px;
background: #fff; background: var(--white);
box-shadow: 0px 100px 80px rgb(0 0 0 / 7%), 0px 40px 30px rgb(0 0 0 / 5%), 0px 22px 18px rgb(0 0 0 / 4%), 0px 12.5px 10px rgb(0 0 0 / 4%), 0px 6.5px 5px rgb(0 0 0 / 3%), 0px 2.5px 2px rgb(0 0 0 / 2%); box-shadow: 0px 100px 80px rgb(0 0 0 / 7%), 0px 40px 30px rgb(0 0 0 / 5%), 0px 22px 18px rgb(0 0 0 / 4%), 0px 12.5px 10px rgb(0 0 0 / 4%), 0px 6.5px 5px rgb(0 0 0 / 3%), 0px 2.5px 2px rgb(0 0 0 / 2%);
} }
@ -1138,7 +1152,7 @@
} }
.webbpm ag-grid-angular .ag-filter label { .webbpm ag-grid-angular .ag-filter label {
font-size: 16px; font-size: var(--size-text-primary);
width: auto; width: auto;
margin: 0; margin: 0;
} }
@ -1151,11 +1165,11 @@
border: 0; border: 0;
border-radius: 15px; border-radius: 15px;
box-shadow: 0px 0px 30px 2px rgb(77 72 91 / 12%); box-shadow: 0px 0px 30px 2px rgb(77 72 91 / 12%);
background-color: #fff; background-color: var(--white);
} }
.webbpm .modal-header { .webbpm .modal-header {
border-bottom: 1px solid #e3e6ed; border-bottom: 1px solid var(--border-light);
} }
/*-------------- Containers --------------- */ /*-------------- Containers --------------- */
@ -1176,7 +1190,7 @@
margin-bottom: 30px; margin-bottom: 30px;
border: 0; border: 0;
border-radius: 20px; border-radius: 20px;
background-color: #e3e6ed; background-color: var(--border-light);
} }
.webbpm .nav-tabs .nav-item { .webbpm .nav-tabs .nav-item {
@ -1184,7 +1198,7 @@
} }
.webbpm .nav-tabs .nav-link { .webbpm .nav-tabs .nav-link {
color: #404954; color: var(--color-text-primary);
padding: 6px 14px; padding: 6px 14px;
border: 0; border: 0;
background-color: transparent; background-color: transparent;
@ -1197,10 +1211,10 @@
} }
.webbpm .nav-tabs .active .nav-link { .webbpm .nav-tabs .active .nav-link {
color: #fff; color: var(--white);
border: 0; border: 0;
border-radius: 20px; border-radius: 20px;
background-color: #1c92ea; background-color: var(--color-link);
box-shadow: 0px 0px 6px 2px rgb(77 72 91 / 24%); box-shadow: 0px 0px 6px 2px rgb(77 72 91 / 24%);
} }
@ -1217,7 +1231,7 @@
.webbpm .fieldset { .webbpm .fieldset {
border: 0; border: 0;
border-radius: 8px; border-radius: 8px;
background-color: #f5f7fa; background-color: var(--bg-light);
} }
.webbpm collapsible-panel:not(.grid-setting-panel):not(.column-states-panel):not(.filter-states-panel) .card-header, .webbpm collapsible-panel:not(.grid-setting-panel):not(.column-states-panel):not(.filter-states-panel) .card-header,
@ -1243,7 +1257,7 @@
.webbpm collapsible-panel:not(.grid-setting-panel):not(.column-states-panel):not(.filter-states-panel) .card i { .webbpm collapsible-panel:not(.grid-setting-panel):not(.column-states-panel):not(.filter-states-panel) .card i {
float: none; float: none;
font-size: 14px; font-size: var(--size-text-secondary);
margin-right: 6px; margin-right: 6px;
margin-left: 0; margin-left: 0;
} }
@ -1321,32 +1335,32 @@
} }
.webbpm .calendar .month .day { .webbpm .calendar .month .day {
font-size: 14px; font-size: var(--size-text-secondary);
} }
.webbpm .calendar .month .day.day-start { .webbpm .calendar .month .day.day-start {
color: #fff; color: var(--white);
border-radius: 4px; border-radius: 4px;
background-color: #1c92ea !important; background-color: var(--color-link) !important;
} }
.webbpm .calendar .month .day.day-start .day-content:hover { .webbpm .calendar .month .day.day-start .day-content:hover {
color: #fff; color: var(--white);
} }
.webbpm .calendar .month .day .day-content:hover { .webbpm .calendar .month .day .day-content:hover {
color: #1c92ea; color: var(--color-link);
background-color: transparent; background-color: transparent;
} }
.webbpm .date .bootstrap-datetimepicker-widget { .webbpm .date .bootstrap-datetimepicker-widget {
color: #404954; color: var(--color-text-primary);
width: min-content; width: min-content;
padding: 10px; padding: 10px;
margin: 0; margin: 0;
border: 1px solid #e3e6ed; border: 1px solid var(--border-light);
border-radius: 10px; border-radius: 10px;
background-color: #fff; background-color: var(--white);
box-shadow: 0 8px 12px rgb(77 72 91 / 5%), 0 6px 10px rgb(77 72 91 / 0%); box-shadow: 0 8px 12px rgb(77 72 91 / 5%), 0 6px 10px rgb(77 72 91 / 0%);
} }
.webbpm .date .bootstrap-datetimepicker-widget.dropdown-menu.bottom:before, .webbpm .date .bootstrap-datetimepicker-widget.dropdown-menu.bottom:before,
@ -1356,7 +1370,7 @@
} }
.webbpm .date .bootstrap-datetimepicker-widget table thead tr:first-child th:hover { .webbpm .date .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
color: #1c92ea; color: var(--color-link);
background-color: transparent; background-color: transparent;
} }
@ -1364,18 +1378,18 @@
.webbpm .bootstrap-datetimepicker-widget table td.hour:hover, .webbpm .bootstrap-datetimepicker-widget table td.hour:hover,
.webbpm .bootstrap-datetimepicker-widget table td.minute:hover, .webbpm .bootstrap-datetimepicker-widget table td.minute:hover,
.webbpm .bootstrap-datetimepicker-widget table td.second:hover { .webbpm .bootstrap-datetimepicker-widget table td.second:hover {
color: #1c92ea; color: var(--color-link);
background-color: transparent; background-color: transparent;
} }
.webbpm .date .bootstrap-datetimepicker-widget table td.today, .webbpm .date .bootstrap-datetimepicker-widget table td.today,
.webbpm .date .bootstrap-datetimepicker-widget table td.today:hover { .webbpm .date .bootstrap-datetimepicker-widget table td.today:hover {
color: #fff !important; color: var(--white) !important;
background-color: #1c92ea; background-color: var(--color-link);
} }
.webbpm .date .bootstrap-datetimepicker-widget table td.active { .webbpm .date .bootstrap-datetimepicker-widget table td.active {
color: #404954 !important; color: var(--color-text-primary) !important;
text-shadow: none; text-shadow: none;
background-color: #f9f9f9; background-color: #f9f9f9;
} }
@ -1393,9 +1407,9 @@
} }
.webbpm .btn-group-viewperiod.btn-group .btn.active { .webbpm .btn-group-viewperiod.btn-group .btn.active {
color: #fff !important; color: var(--white) !important;
border-color: #1c92ea !important; border-color: var(--color-link) !important;
background: #1c92ea !important; background: var(--color-link) !important;
box-shadow: 0px 0px 6px 2px rgb(77 72 91 / 6%); box-shadow: 0px 0px 6px 2px rgb(77 72 91 / 6%);
} }
.webbpm .btn-group-viewperiod.btn-group .btn.active:hover, .webbpm .btn-group-viewperiod.btn-group .btn.active:hover,
@ -1415,23 +1429,23 @@
} }
.webbpm .cal-week-view .cal-header.cal-weekend span { .webbpm .cal-week-view .cal-header.cal-weekend span {
color: #1c92ea; color: var(--color-link);
opacity: 0.7; opacity: 0.7;
} }
.webbpm .cal-month-view .cal-day-badge { .webbpm .cal-month-view .cal-day-badge {
height: 20px; height: 20px;
background-color: #1c92ea; background-color: var(--color-link);
} }
.webbpm .cal-month-view .cal-open-day-events { .webbpm .cal-month-view .cal-open-day-events {
color: #404954; color: var(--color-text-primary);
background-color: #e6ebee; background-color: #e6ebee;
box-shadow: none; box-shadow: none;
} }
.webbpm .cal-week-view .cal-event { .webbpm .cal-week-view .cal-event {
color: #1c92ea; color: var(--color-link);
} }
/*------------- Calendar - end ------------ */ /*------------- Calendar - end ------------ */
@ -1443,22 +1457,23 @@
margin: 30px auto; margin: 30px auto;
border: 0; border: 0;
border-radius: 15px; border-radius: 15px;
background-color: #fff; background-color: var(--white);
box-shadow: 0px 0px 30px 2px rgb(77 72 91 / 12%); box-shadow: 0px 0px 30px 2px rgb(77 72 91 / 12%);
}
.webbpm .block-dialog::before {
content: "\f332";
position: absolute;
color: #1c92ea;
font-family: bootstrap-icons !important;
font-size: 30px;
top: 60px;
left: 60px;
}
.webbpm .block-dialog .title, &::before {
.webbpm .block-dialog .title > div > div:last-of-type{ content: "\f332";
padding: 0; position: absolute;
color: var(--color-link);
font-family: bootstrap-icons !important;
font-size: 30px;
top: 60px;
left: 60px;
}
.title,
.title > div > div:last-of-type{
padding: 0;
}
} }
/*---------- Block-dialog - end ----------- */ /*---------- Block-dialog - end ----------- */
@ -1559,7 +1574,7 @@
.webbpm .modal-backdrop.show { .webbpm .modal-backdrop.show {
filter: alpha(opacity=25); filter: alpha(opacity=25);
opacity: 0.25; opacity: 0.25;
background-color: #000; background-color: var(--black);
} }
/*------------------ FilePreview ------------------*/ /*------------------ FilePreview ------------------*/

19
frontend/src/resources/css/components-lkrp.css
View file

@ -1 +1,20 @@
.webbpm.ervu_lkrp_ul .btn {
font-size: var(--size-text-secondary);
font-family: 'Inter';
color: #fff;
padding: 14px 40px;
border: 0;
border-radius: 4px;
background: var(--color-primary);
box-shadow: none;
}
.webbpm.ervu_lkrp_ul .field-set {
padding: 24px;
margin-bottom: 32px;
border: 1px solid var(--border-light);
border-radius: 4px;
background-color: var(--bg-light);
box-shadow: none;
}

19
frontend/src/resources/css/inbox-lkrp.css
View file

@ -30,20 +30,37 @@ body {
} }
.webbpm.ervu_lkrp_ul { .webbpm.ervu_lkrp_ul {
--black: #1d1e21; --color-text-primary: #1d1e21;
--color-bg-main: #223d36; --color-bg-main: #223d36;
--color-primary: #c64e1b;
--bg-light: #fafafa;
--border-light: #d2d2d2;
--h-header: 64px; --h-header: 64px;
--h-footer: 120px; --h-footer: 120px;
--size-text-primary: 18px;
--size-text-secondary: 16px;
} }
.webbpm.ervu_lkrp_ul .header { .webbpm.ervu_lkrp_ul .header {
min-height: var(--h-header); min-height: var(--h-header);
border: 0; border: 0;
background-color: var(--color-bg-main); background-color: var(--color-bg-main);
} }
.webbpm.ervu_lkrp_ul footer {
height: var(--h-footer);
border: 0;
background-color: var(--color-text-primary);
}
.webbpm.ervu_lkrp_ul .container { .webbpm.ervu_lkrp_ul .container {
padding-top: var(--h-header); padding-top: var(--h-header);
bottom: var(--h-footer); bottom: var(--h-footer);
} }
.webbpm.ervu_lkrp_ul .container .container-inside {
font-family: 'Inter';
}