2302 lines
38 KiB
CSS
2302 lines
38 KiB
CSS
:root {
|
|
/* colors */
|
|
--c-primary: 35, 101, 175;
|
|
--c-page-back: 247, 247, 247;
|
|
--c-text-primary: 50, 50, 50;
|
|
--c-title-primary: 50, 50, 50;
|
|
--c-border-primary: 231, 231, 231;
|
|
--c-success: 4, 184, 0;
|
|
--c-alert: 163, 25, 20;
|
|
--c-new: 119, 0, 147;
|
|
--c-ready: 255, 127, 55;
|
|
--c-disabled: 175, 175, 175;
|
|
--c-header-back: 255, 255, 255;
|
|
--c-default-grey-back: 240, 240, 240;
|
|
--c-header-sticky-back: 255, 255, 255;
|
|
--c-badge-notidication-back: rgb(var(--c-primary));
|
|
--c-menu-side-back: 255, 255, 255;
|
|
--c-menu-top-sub-back: 255, 255, 255;
|
|
--c-menu-top-sub-border: 35, 101, 175;
|
|
--c-menu-side-back: 255, 255, 255;
|
|
--c-menu-side-sub-back: 243, 248, 249;
|
|
--c-menu-side-sub-border: 35, 101, 175;
|
|
--c-menu-sub-border: 19, 191, 214;
|
|
--c-section-back: 255, 255, 255;
|
|
--c-section-header-border: var(--c-border-primary);
|
|
--c-section-header-button-back: 240, 240, 240;
|
|
--c-section-header-button-ico: 55, 55, 55;
|
|
--c-table-border: 220, 220, 220;
|
|
--c-table-seperator: 238, 238, 238;
|
|
--c-table-head-back: 240, 240, 240;
|
|
--c-table-odd-back: 247, 247, 247;
|
|
--c-list-second-line: 35, 101, 175;
|
|
--c-list-col-date: 170, 113, 219;
|
|
--c-panel-back: 255, 255, 255;
|
|
--c-panel-border: 35, 101, 175;
|
|
--c-panel-header-border: var(--c-border-primary);
|
|
--c-breadcrumb-button-back: 255, 255, 255;
|
|
/* grad */
|
|
--g-ok: linear-gradient(-24deg, rgb(102, 251, 123), rgb(134, 253, 75));
|
|
--g-next: linear-gradient(-24deg, rgb(102, 239, 251), rgb(75, 222, 253));
|
|
--g-waiting: linear-gradient(-24deg, rgb(102, 251, 123), rgb(134, 253, 75));
|
|
--g-alert: linear-gradient(-24deg, rgb(102, 251, 123), rgb(134, 253, 75));
|
|
/* dimansions */
|
|
--sz-header: 64px;
|
|
--sz-side-menu: 200px;
|
|
/* shadows*/
|
|
--sh-bottom: 0px 2px 16px 0px rgba(0, 0, 0, 0.1);
|
|
--sh-section: 0px 1px 8px 0px rgba(0, 0, 0, 0.1);
|
|
--sh-form: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
|
|
/* fonts */
|
|
--f-main: 'Roboto', 'sans-serif';
|
|
--f-size: 1em;
|
|
--f-list-second-line: 0.875em;
|
|
/* forms */
|
|
--form-input-font-size: 1em;
|
|
--form-input-padding: 8px 12px;
|
|
--form-input-border-radius: 8px;
|
|
--form-input-back: 255, 255, 255;
|
|
--form-input-border-color: var(--c-border-primary);
|
|
--form-input-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.1);
|
|
--form-description-color: 150, 150, 150;
|
|
--form-alert-color: 225, 10, 10;
|
|
--form-alert-shadow: 0px 1px 8px 0px rgba(var(--form-alert-color), 0.2),
|
|
inset 0px 1px 8px 0px rgba(var(--form-alert-color), 0.2);
|
|
--form-disabled-color: var(--c-disabled);
|
|
--button-font-size: 1em;
|
|
--button-color: 255, 255, 255;
|
|
--button-iconic-color: 0, 0, 0;
|
|
--button-padding: 8px 16px;
|
|
--button-border-radius: 8px;
|
|
--button-back-default: 15, 41, 72;
|
|
--button-back-hover-default: var(--c-primary);
|
|
--button-back-secondary: 35, 101, 175;
|
|
--button-back-iconic: 226, 226, 226;
|
|
--button-back-save: 0, 181, 107;
|
|
--button-back-cancel: 140, 140, 140;
|
|
--button-back-disabled: var(--c-disabled);
|
|
--button-back-ready: var(--c-ready);
|
|
--button-back-success: var(--c-success);
|
|
--button-back-alert: var(--c-alert);
|
|
/* layout */
|
|
--pd-main: 24px;
|
|
--section-border-radius: 12px;
|
|
--section-padding: 20px;
|
|
--section-m-padding: 12px;
|
|
--table-padding: 16px;
|
|
--panel-padding: 16px;
|
|
/* anim */
|
|
--trn-std: all 0.3s ease-in-out;
|
|
/* tabs */
|
|
--c-tab-back: 217, 217, 217;
|
|
--c-tab-text: 0, 0, 0;
|
|
--c-tab-selected-back: 2, 70, 146;
|
|
--c-tab-selected-text: 255, 255, 255;
|
|
--tab-border-radius: 8px 8px 0 0;
|
|
/* toast */
|
|
--toast-back: 230, 230, 230;
|
|
--toast-back-success: var(--c-success);
|
|
--toast-back-ready: var(--c-ready);
|
|
--toast-back-alert: var(--c-alert);
|
|
--toast-back-new: var(--c-new);
|
|
--toast-color: 0, 0, 0;
|
|
--toast-color-invert: 255, 255, 255;
|
|
--toast-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* standard */
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
min-width: 100%;
|
|
min-height: 100vh;
|
|
background-color: rgb(var(--c-page-back));
|
|
font-size: var(--f-size);
|
|
color: rgb(var(--c-text-primary));
|
|
}
|
|
|
|
*,
|
|
::after,
|
|
::before {
|
|
box-sizing: border-box;
|
|
font-family: var(--f-main);
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
color: rgb(var(--c-title-primary));
|
|
margin: 0;
|
|
}
|
|
|
|
img,
|
|
svg {
|
|
vertical-align: middle;
|
|
pointer-events: none;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: rgb(var(--c-title-primary));
|
|
}
|
|
|
|
ul,
|
|
li {
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.animate {
|
|
transition: var(--trn-std);
|
|
}
|
|
|
|
.clickable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.clickable:hover {
|
|
background-color: rgb(226, 240, 255);
|
|
}
|
|
|
|
/* general */
|
|
main {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
position: relative;
|
|
padding: calc(var(--sz-header) + var(--pd-main)) var(--pd-main) var(--pd-main) var(--pd-main);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
#main-content-w {
|
|
width: 100%;
|
|
}
|
|
|
|
.logo-header {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 166px;
|
|
margin-left: 16px;
|
|
}
|
|
|
|
.logo-header svg {
|
|
height: 44px;
|
|
}
|
|
.logo-header img {
|
|
max-height: 54px;
|
|
}
|
|
|
|
.flx {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.flx-nwrap {
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.flx-jc-sb {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.flx-ai-c {
|
|
align-items: center;
|
|
}
|
|
|
|
.m-col {
|
|
width: 100%;
|
|
}
|
|
|
|
.m-col-10 {
|
|
width: 10%;
|
|
}
|
|
|
|
table {
|
|
border: none;
|
|
min-width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
table.table-border {
|
|
border-radius: 4px;
|
|
border: 1px solid rgb(var(--c-table-border));
|
|
border-spacing: 0;
|
|
}
|
|
|
|
table tr td,
|
|
table tr th .table-head-content {
|
|
padding: var(--table-padding);
|
|
border-bottom: 1px solid rgb(var(--c-table-seperator));
|
|
}
|
|
|
|
table tbody tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
table.table-border thead th {
|
|
border-radius: 4px 4px 0 0;
|
|
background-color: rgb(var(--c-table-head-back));
|
|
}
|
|
|
|
table.table-border thead th:nth-child(1) {
|
|
border-radius: 4px 0 0 0;
|
|
}
|
|
|
|
table.table-border thead th:last-child {
|
|
border-radius: 0 4px 0 0;
|
|
}
|
|
|
|
.table-head-content {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.table-head-row-number {
|
|
max-width: 44px;
|
|
}
|
|
|
|
.table-head-content .ico-sort {
|
|
max-width: 12px;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.ico-sort.order-asc {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
table.table-border th,
|
|
table.table-border td {
|
|
text-align: left;
|
|
border-bottom: 1px solid rgb(var(--c-table-border));
|
|
border-right: 1px solid rgb(var(--c-table-border));
|
|
min-width: 160px;
|
|
}
|
|
|
|
table.table-border th {
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
table.table-border td {
|
|
vertical-align: top;
|
|
}
|
|
|
|
table.table-border thead th:last-child,
|
|
table.table-border tbody tr td:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
table.table-border tbody tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
table.table-colored tbody tr:nth-child(odd) {
|
|
background-color: rgb(var(--c-table-odd-back));
|
|
}
|
|
|
|
table.table-colored tbody tr:hover {
|
|
background-color: rgb(226, 240, 255);
|
|
}
|
|
|
|
.table-list td a {
|
|
display: inline-block;
|
|
}
|
|
|
|
.table-list td.cell-belge {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.table-cell-image {
|
|
max-height: 100px;
|
|
border: 1px solid #ececec;
|
|
}
|
|
|
|
.table-cell-flx-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.table-cell-align-right {
|
|
text-align: right !important;
|
|
}
|
|
|
|
.image-c {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/* forms */
|
|
form {
|
|
width: 100%;
|
|
}
|
|
|
|
input,
|
|
select,
|
|
textarea,
|
|
.input-a,
|
|
.form-select-activator {
|
|
background-color: rgb(var(--form-input-back));
|
|
border-radius: var(--form-input-border-radius);
|
|
border: 1px solid rgb(var(--form-input-border-color));
|
|
box-shadow: var(--form-input-shadow);
|
|
}
|
|
|
|
.form-select-activator {
|
|
cursor: pointer;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-right: 32px;
|
|
}
|
|
|
|
.form-select-activator .ico-c {
|
|
position: absolute;
|
|
right: 8px;
|
|
}
|
|
|
|
.form-select-activator .ico-close {
|
|
right: 36px;
|
|
}
|
|
|
|
.form-select-activator .ico-c svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.form-select-activator.disabled {
|
|
cursor: auto;
|
|
}
|
|
|
|
.form-select-activator.disabled.disabled-show-name {
|
|
border: none;
|
|
opacity: 1;
|
|
box-shadow: none;
|
|
font-size: 1.1em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.form-select-activator.disabled.disabled-show-name>.ico-c {
|
|
display: none;
|
|
}
|
|
|
|
.ico-c.select-close-selection {
|
|
position: absolute;
|
|
right: 2px;
|
|
top: 2px;
|
|
width: 16px;
|
|
height: 16px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type='text'],
|
|
input[type='password'],
|
|
input[type='date'],
|
|
input[type='datetime-local'],
|
|
input[type='tel'],
|
|
input[type='number'],
|
|
input[type='email'],
|
|
input[type='file'],
|
|
select,
|
|
textarea,
|
|
.input-a,
|
|
.form-select-activator {
|
|
padding: var(--form-input-padding);
|
|
height: 44px;
|
|
font-size: var(--form-input-font-size);
|
|
}
|
|
|
|
.form-select-activator {
|
|
min-height: 44px;
|
|
height: auto;
|
|
}
|
|
|
|
input[type='file'] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
textarea {
|
|
height: initial;
|
|
}
|
|
|
|
input::placeholder {
|
|
opacity: 0.5;
|
|
font-style: italic;
|
|
}
|
|
|
|
.invalid {
|
|
border: 2px solid rgb(var(--form-alert-color)) !important;
|
|
box-shadow: var(--form-alert-shadow);
|
|
}
|
|
|
|
.disabled,
|
|
input:disabled,
|
|
textarea:disabled {
|
|
border: 2px solid rgb(var(--form-disabled-color));
|
|
opacity: 0.4;
|
|
cursor: auto;
|
|
}
|
|
|
|
.changed {
|
|
border: 1px solid #efa471;
|
|
}
|
|
|
|
label {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
padding: 2px;
|
|
}
|
|
|
|
label>span {
|
|
padding-bottom: 4px;
|
|
padding-left: 8px;
|
|
width: 100%;
|
|
word-break: break-word;
|
|
}
|
|
|
|
label>input:not([type='radio']):not([type='checkbox']),
|
|
label>textarea,
|
|
label>select,
|
|
.form-select-activator {
|
|
width: 100%;
|
|
}
|
|
|
|
label.label-row {
|
|
flex-direction: row;
|
|
}
|
|
|
|
label.label-row>span {
|
|
padding-right: 8px;
|
|
padding-bottom: 0;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.label-radio {
|
|
align-items: center;
|
|
width: initial;
|
|
margin-right: 16px;
|
|
margin-bottom: 16px;
|
|
flex-wrap: nowrap;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.label-radio.disabled {
|
|
border: none;
|
|
}
|
|
|
|
.label-radio>span {
|
|
width: initial;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.label-radio.disabled>span {
|
|
color: rgb(var(--c-disabled));
|
|
}
|
|
|
|
.label-radio>span a {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.labe-content {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
|
|
.form-accept-content .label-radio {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.form-select-list-c {
|
|
width: 100%;
|
|
display: flex;
|
|
position: relative;
|
|
}
|
|
|
|
.form-select-input {
|
|
width: 100%;
|
|
}
|
|
|
|
.form-select-list {
|
|
box-shadow: var(--sh-bottom);
|
|
position: fixed;
|
|
z-index: 999;
|
|
background-color: rgb(255, 255, 255);
|
|
border: 2px solid rgb(150, 150, 150);
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.form-select-list-item {
|
|
padding: 12px 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.form-select-list-item:hover {
|
|
background-color: rgba(var(--c-primary), 0.2);
|
|
}
|
|
|
|
.form-select-list-item.selected {
|
|
background-color: rgba(var(--c-primary), 0.1);
|
|
}
|
|
|
|
.select-box-check {
|
|
width: 14px;
|
|
height: 14px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
/* buttons */
|
|
button,
|
|
.button-c {
|
|
padding: var(--button-padding);
|
|
background-color: rgb(var(--button-back-default));
|
|
color: rgb(var(--button-color));
|
|
border-radius: var(--button-border-radius);
|
|
font-size: var(--button-font-size);
|
|
cursor: pointer;
|
|
min-height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 8px;
|
|
border: none;
|
|
transition: var(--trn-std);
|
|
}
|
|
|
|
.button-c:hover {
|
|
color: rgb(255, 255, 255);
|
|
background-color: rgb(var(--button-back-hover-default));
|
|
}
|
|
|
|
.button-c:hover span {
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
|
|
button svg,
|
|
.button-c svg {
|
|
fill: rgb(var(--button-color));
|
|
max-width: 24px;
|
|
max-height: 24px;
|
|
}
|
|
|
|
.button-icon {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.button-icon i {
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.button-second {
|
|
background-color: rgb(var(--button-back-secondary));
|
|
}
|
|
|
|
.button-export,
|
|
.button-documents {
|
|
background-color: rgb(235, 235, 235);
|
|
width: 100%;
|
|
}
|
|
|
|
.button-export:hover svg {
|
|
fill: #fff;
|
|
}
|
|
|
|
.button-save {
|
|
background-color: rgb(var(--button-back-save));
|
|
}
|
|
|
|
.button-cancel {
|
|
background-color: rgb(var(--button-back-cancel));
|
|
}
|
|
|
|
.button-alert {
|
|
background-color: rgb(var(--button-back-alert));
|
|
}
|
|
|
|
.button-cancel:hover {
|
|
background-color: rgb(100, 100, 100);
|
|
}
|
|
|
|
.button-belge {
|
|
background-color: rgb(235, 235, 235);
|
|
}
|
|
|
|
.button-c:disabled {
|
|
background-color: rgb(var(--c-disabled));
|
|
}
|
|
|
|
/* icons */
|
|
svg {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
.ico-c {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
transition: var(--trn-std);
|
|
}
|
|
|
|
.ico-btn {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ico-c svg {
|
|
fill: rgb(var(--c-primary));
|
|
max-width: 24px;
|
|
max-height: 24px;
|
|
}
|
|
.ico-c.ico-btn:hover{
|
|
background-color: navy;
|
|
}
|
|
/* colors */
|
|
.back-grad {
|
|
padding: 6px 8px;
|
|
color: #fff;
|
|
border-radius: 4px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.back-grad-title {
|
|
background-image: linear-gradient(24deg, #73a4dc, #2365af);
|
|
}
|
|
|
|
.back-grad-new {
|
|
background-image: linear-gradient(24deg, #b212ed, #770093);
|
|
}
|
|
|
|
.back-grad-waiting {
|
|
background-image: linear-gradient(24deg, #eda512, #cb7c02);
|
|
}
|
|
|
|
.back-grad-alert {
|
|
background-image: linear-gradient(24deg, #f57c7c, #9a0000);
|
|
}
|
|
|
|
.back-grad-next {
|
|
background-image: linear-gradient(24deg, #73a4dc, #2365af);
|
|
}
|
|
|
|
.back-grad-ok {
|
|
background-image: linear-gradient(24deg, #2fc939, #097401);
|
|
}
|
|
|
|
.back-grad-beforeok {
|
|
background-image: linear-gradient(24deg, #ff6400, #00604b);
|
|
}
|
|
|
|
.back-grad-change {
|
|
background-image: linear-gradient(24deg, #008a17, #770093);
|
|
}
|
|
|
|
.back-grad-finish {
|
|
background-image: linear-gradient(24deg, #008a17, #770093);
|
|
}
|
|
.back-grad-sevk {
|
|
color: #777777;
|
|
background-image: linear-gradient(24deg, #bfcbd8, #e1dcdc);
|
|
}
|
|
.back-grad-sevk-ok {
|
|
color: #242424;
|
|
}
|
|
.back-grad-grey {
|
|
background-image: linear-gradient(24deg, #e6e6e6, #e1dcdc);
|
|
color: #000;
|
|
padding: 12px;
|
|
}
|
|
.back-grad-dgrey {
|
|
background-image: linear-gradient(24deg, #797979, #a1a1a1);
|
|
color: #000;
|
|
padding: 12px;
|
|
}
|
|
.back-grey {
|
|
background-color: #f1f1f1;
|
|
}
|
|
|
|
/* login */
|
|
.login-w {
|
|
min-width: 100%;
|
|
min-height: 100vh;
|
|
justify-content: center;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.login-page main {
|
|
padding: 32px;
|
|
max-width: 480px;
|
|
justify-content: center;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.section-login {
|
|
padding: 16px;
|
|
transition: var(--trn-std);
|
|
}
|
|
|
|
.section-login .section-content {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.login-header {
|
|
display: flex;
|
|
flex: 1;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid rgb(var(--c-border-primary));
|
|
padding-bottom: 16px;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.login-header h1 {
|
|
font-size: 1em;
|
|
}
|
|
|
|
.login-header .logo-header {
|
|
margin-left: 0;
|
|
max-width: 144px;
|
|
}
|
|
|
|
.button-login {
|
|
width: 100%;
|
|
}
|
|
|
|
.section-login form {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.login-nav {
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: right;
|
|
}
|
|
|
|
.login-nav-back {
|
|
text-align: left;
|
|
}
|
|
|
|
.login-nav a {
|
|
padding: 8px 0;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* header */
|
|
header {
|
|
background-color: rgb(var(--c-header-back));
|
|
box-shadow: var(--sh-bottom);
|
|
max-height: var(--sz-header);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 8px;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 30;
|
|
}
|
|
|
|
.header-c {
|
|
display: flex;
|
|
height: 64px;
|
|
align-items: center;
|
|
}
|
|
|
|
.header-c>.ico-c {
|
|
width: 32px;
|
|
height: 64px;
|
|
}
|
|
|
|
.ico-notification svg {
|
|
width: 18px;
|
|
}
|
|
|
|
.header-profile {
|
|
position: relative;
|
|
}
|
|
|
|
.b-menu-profile {
|
|
width: 64px;
|
|
height: 64px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
margin-left: 16px;
|
|
}
|
|
|
|
.profile-photo-c {
|
|
width: 56px;
|
|
height: 56px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.profile-photo-c img {
|
|
position: absolute;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
/* badge */
|
|
.badge-have {
|
|
position: relative;
|
|
}
|
|
|
|
.badge-have>.badge-c {
|
|
display: flex;
|
|
}
|
|
|
|
.badge-notification {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 100%;
|
|
background-color: var(--c-badge-notidication-back);
|
|
margin-bottom: 16px;
|
|
right: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
/* menu */
|
|
.menu-side-w {
|
|
position: fixed;
|
|
z-index: 8;
|
|
top: var(--sz-header);
|
|
height: calc(100% - var(--sz-header));
|
|
left: -200px;
|
|
width: 200px;
|
|
box-shadow: var(--sh-bottom);
|
|
background-color: rgb(var(--c-menu-side-back));
|
|
}
|
|
|
|
.menu-side-shadow {
|
|
z-index: 10;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
opacity: 0;
|
|
transition: var(--trn-std);
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
z-index: 7;
|
|
}
|
|
|
|
.menu-side-shadow.showme {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
pointer-events: all;
|
|
display: flex;
|
|
}
|
|
|
|
.ico-mobile-menu {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ico-mobile-menu svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
nav>ul {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
nav>ul>li {
|
|
display: flex;
|
|
width: 100%;
|
|
position: relative;
|
|
flex-direction: column;
|
|
}
|
|
|
|
nav>ul li .ico-c {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
nav ul li>a,
|
|
nav ul li>div {
|
|
display: flex;
|
|
width: 100%;
|
|
padding: 12px 16px;
|
|
align-items: center;
|
|
}
|
|
|
|
.menu-have-sub {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.menu-sub {
|
|
position: absolute;
|
|
height: auto;
|
|
background-color: rgb(var(--c-menu-top-sub-back));
|
|
z-index: 1;
|
|
min-width: 200px;
|
|
box-shadow: var(--sh-bottom);
|
|
}
|
|
|
|
header .menu-sub {
|
|
border-top: 3px solid rgb(var(--c-menu-side-sub-border));
|
|
}
|
|
|
|
.menu-sub>ul>li,
|
|
.menu-side-w nav>ul>li {
|
|
border-bottom: 1px solid rgba(var(--c-menu-sub-border), 0.15);
|
|
}
|
|
|
|
.menu-sub>ul>li:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.menu-open {
|
|
position: relative;
|
|
}
|
|
|
|
.menu-open>.menu-sub {
|
|
display: flex;
|
|
}
|
|
|
|
.menu-sub.menu-sub-left {
|
|
left: 100%;
|
|
}
|
|
|
|
.menu-sub.menu-sub-right {
|
|
right: 0;
|
|
}
|
|
|
|
.menu-sub-open>.menu-sub {
|
|
display: flex;
|
|
}
|
|
|
|
.menu-side-w .menu-sub {
|
|
background-color: rgb(var(--c-menu-side-sub-back));
|
|
border-left: 3px solid rgb(var(--c-menu-side-sub-border));
|
|
position: relative;
|
|
left: 0;
|
|
}
|
|
|
|
.menu-side-w .menu-open {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.menu-side-w>nav>ul>li .menu-have-sub:after {
|
|
content: '';
|
|
width: 8px;
|
|
height: 12px;
|
|
background-color: rgb(var(--c-primary));
|
|
-webkit-mask-image: url(../images/arrow.svg);
|
|
mask-image: url(../images/arrow.svg);
|
|
position: absolute;
|
|
right: 8px;
|
|
}
|
|
|
|
.menu-profile {
|
|
right: 0;
|
|
width: 360px;
|
|
}
|
|
|
|
/* layout */
|
|
|
|
.main-page main {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
section {
|
|
background-color: rgb(var(--c-section-back));
|
|
border-radius: var(--section-border-radius);
|
|
box-shadow: var(--sh-section);
|
|
position: relative;
|
|
width: 100%;
|
|
display: flex;
|
|
transition: var(--trn-std);
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.main-page main section {
|
|
width: 100%;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
padding: var(--section-m-padding);
|
|
border-bottom: 1px solid rgb(var(--c-section-header-border));
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.section-header h1 {
|
|
font-size: 1.1em;
|
|
font-weight: 500;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.section-header-count {
|
|
color: rgb(var(--c-primary));
|
|
font-size: 0.875em;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.ico-section {
|
|
width: 44px;
|
|
height: 44px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 8px;
|
|
margin-right: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ico-section svg {
|
|
width: 24px;
|
|
max-height: 24px;
|
|
}
|
|
|
|
.ico-section svg {
|
|
fill: rgb(255, 255, 255);
|
|
}
|
|
|
|
.section-header-buttons-c {
|
|
margin-left: auto;
|
|
position: relative;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.header-extra-buttons-C{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
margin-top: 16px;
|
|
}
|
|
.section-header-buttons {
|
|
padding: 8px;
|
|
border-radius: 8px;
|
|
border-top: 3px solid rgb(var(--c-border-primary));
|
|
min-width: inherit;
|
|
top: 100%;
|
|
}
|
|
|
|
.list-search-c {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.header-buttons-C{
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
.ico-section-header-btn {
|
|
background-color: rgb(var(--c-section-header-button-back));
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ico-section-header-btn svg {
|
|
fill: rgb(var(--c-section-header-button-ico));
|
|
transition: var(--trn-std);
|
|
}
|
|
|
|
.ico-section-header-btn:hover {
|
|
background-color: rgb(var(--button-back-hover-default));
|
|
}
|
|
|
|
.ico-section-header-btn:hover svg {
|
|
fill: rgb(255, 255, 255);
|
|
}
|
|
|
|
.section-content {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
|
|
.section-list {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.section-list .section-content {
|
|
width: 100%;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.section-content.section-inner {
|
|
padding: 10px;
|
|
}
|
|
|
|
.list-wrapper {
|
|
width: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.list-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.list-content-item {
|
|
display: flex;
|
|
}
|
|
|
|
.list-second-line {
|
|
font-size: var(--f-list-second-line);
|
|
color: rgb(var(--c-list-second-line));
|
|
}
|
|
|
|
.list-col-day {
|
|
color: rgb(var(--c-list-col-date));
|
|
}
|
|
|
|
.list-filter-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 12px;
|
|
border-radius: 8px;
|
|
margin-bottom: 8px;
|
|
background-color: rgb(var(--c-default-grey-back));
|
|
width: 100%;
|
|
}
|
|
|
|
.list-filter-content {
|
|
padding: 8px 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
}
|
|
|
|
.list-filter-item {
|
|
font-size: 0.875em;
|
|
flex-shrink: 0;
|
|
padding: 4px 32px 4px 6px;
|
|
margin-right: 8px;
|
|
background-color: rgb(255, 255, 255);
|
|
border-radius: 4px;
|
|
position: relative;
|
|
display: flex;
|
|
height: 26px;
|
|
}
|
|
|
|
.list-filter-close {
|
|
position: absolute;
|
|
width: 26px;
|
|
height: 26px;
|
|
background-color: rgb(163, 25, 20);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
right: 0;
|
|
top: 0;
|
|
border-radius: 0 4px 4px 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.list-filter-close:before,
|
|
.list-filter-close:after {
|
|
content: '';
|
|
width: 16px;
|
|
height: 2px;
|
|
background-color: rgb(255, 255, 255);
|
|
transform: rotate(45deg);
|
|
display: inline-block;
|
|
position: absolute;
|
|
}
|
|
|
|
.list-filter-close:after {
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
/* panel */
|
|
.panel-wrapper {
|
|
width: 100%;
|
|
position: fixed;
|
|
z-index: 10;
|
|
box-shadow: var(--sh-bottom);
|
|
top: var(--sz-header);
|
|
background-color: rgb(var(--c-panel-back));
|
|
border-top: 3px solid rgb(var(--c-panel-border));
|
|
height: calc(100% - var(--sz-header));
|
|
transition: var(--trn-std);
|
|
}
|
|
|
|
.panel-open,
|
|
.panel-close {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.panel-wrapper.panel-right {
|
|
left: 100%;
|
|
}
|
|
|
|
.panel-wrapper.panel-right.showme {
|
|
left: 0;
|
|
}
|
|
|
|
.panel-header,
|
|
.panel-footer {
|
|
padding: var(--panel-padding);
|
|
border-bottom: 1px solid rgb(var(--c-panel-header-border));
|
|
height: 64px;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.panel-header {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.panel-footer .button-c {
|
|
flex: 1;
|
|
}
|
|
|
|
.panel-close-btn,
|
|
.toast-close-btn {
|
|
width: 44px;
|
|
height: 44px;
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
right: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.toast-close-btn {
|
|
top: 0;
|
|
}
|
|
|
|
.panel-close-btn:before,
|
|
.panel-close-btn:after,
|
|
.toast-close-btn:before,
|
|
.toast-close-btn:after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 60%;
|
|
height: 2px;
|
|
background-color: rgb(var(--c-text-primary));
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.panel-close-btn:after,
|
|
.toast-close-btn:after {
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
.panel-content {
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
width: 100%;
|
|
height: calc(100vh - 64px - var(--sz-header));
|
|
padding-bottom: 16px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-content: flex-start;
|
|
}
|
|
|
|
.panel-have-footer .panel-content {
|
|
height: calc(100vh - 128px - var(--sz-header));
|
|
}
|
|
|
|
.panel-content-item {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
|
|
.panel-content-item.back-grey {
|
|
background-color: rgb(245, 245, 245);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.panel-notification-content {
|
|
padding: var(--panel-padding);
|
|
}
|
|
|
|
.panel-notification-content .panel-content-item {
|
|
background-color: rgb(245, 245, 245);
|
|
border-radius: 10px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.panel-notification-content .panel-content-item p {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.panel-notification-content .panel-content-item .panel-date {
|
|
color: rgb(120, 120, 120);
|
|
font-size: 0.75em;
|
|
}
|
|
|
|
.panel-export-content .panel-content-item {
|
|
padding: var(--panel-padding) var(--panel-padding) 0 var(--panel-padding);
|
|
}
|
|
|
|
.panel-filter-content .panel-content-item {
|
|
border-bottom: 1px solid rgb(var(--c-border-primary));
|
|
}
|
|
|
|
.panel-filter-content .panel-content-item {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.panel-filter-content .panel-content-item label {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.panel-documents-item .input-a {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.panel-documents-item .input-a i {
|
|
margin: 0;
|
|
width: 36px;
|
|
height: 36px;
|
|
}
|
|
|
|
.panel-documents-item input[type='file'] {
|
|
display: none;
|
|
}
|
|
|
|
.panel-page-menu-item {
|
|
width: 100%;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.preview-content {
|
|
padding: 16px;
|
|
width: 100%;
|
|
}
|
|
|
|
.preview-content .form-part-title-buttons,
|
|
.preview-content .form-inner-comment {
|
|
display: none !important;
|
|
}
|
|
|
|
.preview-content .form-part-title {
|
|
margin: 0;
|
|
padding: 8px;
|
|
background-color: #f1f1f1;
|
|
}
|
|
|
|
.preview-shadow {
|
|
width: 800px;
|
|
position: fixed;
|
|
left: 110%;
|
|
top: 110%;
|
|
}
|
|
|
|
.preview-page-part {
|
|
width: 100%;
|
|
}
|
|
|
|
.preview-page-part .form-part {
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.preview-part-title {
|
|
font-weight: 800;
|
|
padding: 16px;
|
|
}
|
|
|
|
.preview-part {
|
|
margin-bottom: 24px
|
|
}
|
|
|
|
.preview-content table,
|
|
.print-c table {
|
|
border: 1px solid #e7e7e7;
|
|
}
|
|
|
|
.preview-content table tr td,
|
|
.print-c table tr td {
|
|
padding: 6px;
|
|
}
|
|
|
|
.preview-content table tr td,
|
|
.print-c table tr td {
|
|
border-bottom: 1px solid #e7e7e7;
|
|
}
|
|
|
|
.preview-content table tr td:not(:last-child),
|
|
.print-c table tr td:not(:last-child) {
|
|
border-right: 1px solid #e7e7e7;
|
|
}
|
|
|
|
.table-no-line,
|
|
.table-no-line tr td {
|
|
border: none !important;
|
|
}
|
|
|
|
/* page toast */
|
|
.page-toast-w {
|
|
position: fixed;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
align-items: flex-end;
|
|
padding: 32px;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 9999;
|
|
width: 100%;
|
|
}
|
|
|
|
.page-toast-item {
|
|
display: flex;
|
|
position: relative;
|
|
border-radius: 16px;
|
|
padding: 16px 44px 16px 16px;
|
|
background-color: rgb(var(--toast-back));
|
|
width: 100%;
|
|
box-shadow: var(--toast-shadow);
|
|
transition: var(--trn-std);
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.toast-item-alert {
|
|
background-color: rgb(var(--toast-back-alert));
|
|
}
|
|
|
|
.toast-item-success {
|
|
background-color: rgb(var(--toast-back-success));
|
|
}
|
|
|
|
.toast-item-ready {
|
|
background-color: rgb(var(--toast-back-ready));
|
|
}
|
|
|
|
.page-toast-item span {
|
|
color: rgb(var(--toast-color-invert));
|
|
}
|
|
|
|
.page-toast-item .toast-close-btn:before,
|
|
.page-toast-item .toast-close-btn:after {
|
|
background-color: rgb(var(--toast-color-invert));
|
|
}
|
|
|
|
/* breadcrumb */
|
|
.breadcrumb-wrapper {
|
|
display: flex;
|
|
width: 100%;
|
|
margin-bottom: 16px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid rgb(var(--c-border-primary));
|
|
}
|
|
|
|
.breadcrumb-wrapper .ico-c {
|
|
max-width: 12px;
|
|
max-height: 12px;
|
|
}
|
|
|
|
.breadcrumb-wrapper a,
|
|
.breadcrumb-wrapper span,
|
|
.breadcrumb-wrapper .breadcrumb-link {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
.breadcrumbs-list {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.breadcrumbs-list,
|
|
.breadcrumbs-back {
|
|
border-radius: 8px;
|
|
background-color: rgb(var(--c-breadcrumb-button-back));
|
|
max-height: 32px;
|
|
}
|
|
|
|
.breadcrumbs-back {
|
|
margin-right: 8px;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.breadcrumbs-back .ico-clickable {
|
|
padding: 8px 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.breadcrumbs-back svg {
|
|
transform: rotate(180deg);
|
|
justify-content: center;
|
|
width: 8px;
|
|
}
|
|
|
|
.breadcrumbs-list a {
|
|
border-right: 1px solid rgb(var(--c-border-primary));
|
|
}
|
|
|
|
/* pagination */
|
|
.list-paging-wrapper {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
margin-top: 12px;
|
|
position: relative;
|
|
}
|
|
|
|
.pagination-content {
|
|
background-color: rgb(244, 244, 244);
|
|
border-radius: 8px;
|
|
padding: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
.pagination-nav {
|
|
display: flex;
|
|
width: 44px;
|
|
height: 44px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
margin: 0 8px;
|
|
}
|
|
|
|
.pagination-nav svg {
|
|
height: 16px;
|
|
}
|
|
|
|
.pagination-nav-prev svg {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.pagination-current-page {
|
|
border: none;
|
|
max-width: 60px;
|
|
margin: 0 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.pagination-total-page {
|
|
margin-right: 12px;
|
|
}
|
|
|
|
/* forms */
|
|
.section-header-search {
|
|
width: calc(100vw - 48px);
|
|
padding: 8px;
|
|
background-color: rgb(var(--c-section-header-button-back));
|
|
left: 24px;
|
|
max-width: 100vw;
|
|
position: fixed;
|
|
}
|
|
|
|
#list-search-form {
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
}
|
|
|
|
#list-search-form input {
|
|
flex: 1;
|
|
}
|
|
|
|
/* section forms */
|
|
.form-part {
|
|
background-color: rgb(var(--c-section-back));
|
|
border-radius: var(--section-border-radius);
|
|
box-shadow: var(--sh-form);
|
|
position: relative;
|
|
display: flex;
|
|
transition: var(--trn-std);
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
margin-bottom: 16px;
|
|
padding: 12px;
|
|
width: 100%;
|
|
}
|
|
|
|
.form-title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.form-title .form-item {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.form-title input {
|
|
width: 100%;
|
|
}
|
|
|
|
.form-title-buttons {
|
|
display: flex;
|
|
}
|
|
|
|
.form-title input {
|
|
font-size: 1.25em;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.title-second {
|
|
width: 100%;
|
|
display: flex;
|
|
padding-top: 16px;
|
|
padding-left: 8px;
|
|
}
|
|
|
|
.form-buttons {
|
|
display: flex;
|
|
}
|
|
|
|
.form-content {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
width: 100%;
|
|
}
|
|
|
|
.form-inner-content {
|
|
width: 100%;
|
|
}
|
|
|
|
.form-content .form-part {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.form-part-title {
|
|
display: flex;
|
|
width: 100%;
|
|
padding: 8px 0;
|
|
margin-bottom: 16px;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.form-part-title-buttons {
|
|
display: flex;
|
|
}
|
|
|
|
.form-part-content {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.form-item {
|
|
display: flex;
|
|
width: 100%;
|
|
margin-bottom: 20px;
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.form-item-display {
|
|
border: 1px solid #dddddd;
|
|
padding: 8px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.panel-content .form-item.form-item-display {
|
|
padding: 8px;
|
|
}
|
|
|
|
.form-item-wb {
|
|
flex-wrap: nowrap;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.display-title {
|
|
width: 100%;
|
|
padding-bottom: 8px;
|
|
border-bottom: 1px solid #e7e7e7;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.form-item-display-nb {
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.form-item-button {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.form-display-extra {
|
|
border-top: 1px solid #e7e7e7;
|
|
margin-top: 8px;
|
|
padding: 8px 8px 0 8px;
|
|
width: 100%;
|
|
}
|
|
|
|
.panel-content .form-item {
|
|
padding: 16px;
|
|
margin-bottom: 0;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.preview-content .form-item {
|
|
align-items: flex-start;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.preview-content .display-title {
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.form-select-input .form-item {
|
|
margin-bottom: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.preview-shadow .form-item-half {
|
|
width: 50%;
|
|
padding-right: 16px;
|
|
}
|
|
|
|
.form-item-title {
|
|
width: 100%;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.form-item-picture {
|
|
width: 120px;
|
|
height: 120px;
|
|
margin-right: 8px;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
border: 1px solid rgb(var(--c-border-primary));
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: rgb(var(--c-default-grey-back));
|
|
}
|
|
|
|
.form-item-picture.small-picture {
|
|
width: 64px;
|
|
height: 64px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.form-item-picture .image-c {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
display: flex;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.form-item-picture .image-c img {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.form-item-picture.form-item-picture-single {
|
|
width: 100%;
|
|
height: 300px;
|
|
}
|
|
|
|
.form-item-picture input[type='file'] {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: none;
|
|
}
|
|
|
|
.form-item-description,
|
|
.form-item-alert {
|
|
width: 100%;
|
|
padding: 2px 8px;
|
|
font-size: .9em;
|
|
}
|
|
|
|
.form-item-description {
|
|
color: rgb(var(--form-description-color));
|
|
font-style: italic;
|
|
}
|
|
|
|
.form-item-alert {
|
|
color: rgb(var(--form-alert-color));
|
|
font-weight: 600;
|
|
}
|
|
|
|
.form-inner-comment {
|
|
margin: 10px 0;
|
|
background-color: rgb(var(--c-default-grey-back));
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.form-inner-comment.success {
|
|
background-color: rgba(var(--toast-back-success), .2);
|
|
}
|
|
|
|
.form-inner-comment.waiting {
|
|
background-color: rgba(var(--toast-back-ready), .2);
|
|
}
|
|
|
|
.form-inner-comment.alert {
|
|
background-color: rgba(var(--toast-back-alert), .2);
|
|
}
|
|
|
|
.form-inner-comment.success-d {
|
|
padding: 12px;
|
|
width: 100%;
|
|
color: #fff;
|
|
background-color: rgba(var(--toast-back-success));
|
|
}
|
|
|
|
.form-inner-comment.waiting-d {
|
|
padding: 12px;
|
|
width: 100%;
|
|
color: #fff;
|
|
background-color: rgba(var(--toast-back-ready));
|
|
}
|
|
|
|
.form-inner-comment.alert-d {
|
|
padding: 12px;
|
|
width: 100%;
|
|
color: #fff;
|
|
background-color: rgba(var(--toast-back-alert));
|
|
}
|
|
|
|
.form-inner-comment.new-d {
|
|
padding: 12px;
|
|
width: 100%;
|
|
color: #fff;
|
|
background-color: rgba(var(--toast-back-new));
|
|
}
|
|
|
|
.waiting-d strong,
|
|
.alert-d strong,
|
|
.success-d strong,
|
|
.new-d strong {
|
|
color: #fff;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.button-documents {
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.file-item {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
border: 1px solid rgb(var(--form-input-border-color));
|
|
margin-bottom: 8px;
|
|
border-radius: 8px;
|
|
width: 100%;
|
|
}
|
|
|
|
.file-item-title {
|
|
width: 100%;
|
|
border-bottom: 1px solid rgb(var(--c-table-border));
|
|
padding: 8px;
|
|
}
|
|
|
|
.file-item-file-c {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.only-image .ico-replace {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.file-item-file {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 8px;
|
|
width: 100%;
|
|
}
|
|
|
|
.file-item-name {
|
|
word-wrap: break-word;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.file-item-file-c .ico-replace {
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
|
|
/* tabs */
|
|
.tabs-buttons-c {
|
|
display: flex;
|
|
margin: 32px 0;
|
|
border-bottom: 1px solid rgb(var(--c-border-primary));
|
|
width: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tab-button {
|
|
min-height: 48px;
|
|
background-color: rgb(var(--c-tab-back));
|
|
color: rgb(var(--c-tab-text));
|
|
padding: 12px 24px;
|
|
border-radius: var(--tab-border-radius);
|
|
cursor: pointer;
|
|
margin: 0 50px;
|
|
width: calc(100% - 100px);
|
|
flex-shrink: 0;
|
|
text-align: center;
|
|
transition: var(--trn-std);
|
|
}
|
|
|
|
.tab-button.tab-selected,
|
|
.tab-button:hover {
|
|
color: rgb(var(--c-tab-selected-text));
|
|
background-color: rgb(var(--c-tab-selected-back));
|
|
}
|
|
|
|
.tabs-contents-c {
|
|
display: flex;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tab-content {
|
|
width: 100%;
|
|
display: inline-block;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tab-animate {
|
|
transition-timing-function: ease-in-out;
|
|
transition-property: all;
|
|
}
|
|
|
|
.tab-nav-button {
|
|
position: absolute;
|
|
display: flex;
|
|
width: 44px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
height: 100%;
|
|
}
|
|
|
|
.tab-nav-button-prev {
|
|
left: 0;
|
|
}
|
|
|
|
.tab-nav-button-prev .ico-c {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.tab-nav-button-next {
|
|
right: 0;
|
|
}
|
|
|
|
.tab-nav-button .ico-c {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
.tab-nav-button .ico-c svg {
|
|
max-width: 32px;
|
|
max-height: 32px;
|
|
}
|
|
|
|
/* Site Management */
|
|
.menu-list-group {
|
|
display: flex;
|
|
width: 100%;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.menu-list-item {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 4px 8px 4px 16px;
|
|
border: 1px solid #dfdfdf;
|
|
margin-bottom: 8px;
|
|
border-radius: 8px;
|
|
cursor: grab;
|
|
}
|
|
|
|
.menu-list-item.menu-list-item-page {
|
|
cursor: default;
|
|
}
|
|
|
|
.menu-list-item-buttons {
|
|
display: flex;
|
|
}
|
|
|
|
/* Dashboard */
|
|
.dashboard-list-C {
|
|
display: flex;
|
|
width: 100%;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.dashboard-list-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: var(--table-padding);
|
|
border-bottom: 1px solid rgb(var(--c-table-seperator))
|
|
}
|
|
|
|
.dashboard-list-item:hover {
|
|
background-color: rgb(240, 240, 240);
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
.section-header{
|
|
flex-wrap: nowrap;
|
|
}
|
|
.section-header-buttons-c.collapsable .section-header-mobile-menu {
|
|
display: none;
|
|
}
|
|
|
|
.section-header-buttons {
|
|
display: flex;
|
|
box-shadow: none;
|
|
top: 0;
|
|
min-width: inherit;
|
|
background-color: transparent;
|
|
position: relative;
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.page-toast-w {
|
|
width: inherit;
|
|
max-width: 460px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.page-toast-item {
|
|
width: auto;
|
|
}
|
|
|
|
.section-header-search {
|
|
left: initial;
|
|
right: 100%;
|
|
max-width: 480px;
|
|
top: 100%;
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 992px) {
|
|
.menu-side-w .menu-sub {
|
|
position: absolute;
|
|
left: 100%;
|
|
}
|
|
|
|
table.table-border th,
|
|
table.table-border td {
|
|
min-width: inherit;
|
|
}
|
|
|
|
.menu-side-w {
|
|
left: 0;
|
|
}
|
|
|
|
.menu-side-shadow {
|
|
display: none;
|
|
pointer-events: none;
|
|
}
|
|
|
|
main {
|
|
padding: calc(var(--sz-header) + var(--pd-main)) var(--pd-main) var(--pd-main) calc(var(--sz-side-menu) + var(--pd-main));
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.section-header {
|
|
padding: var(--section-padding);
|
|
}
|
|
|
|
.main-page main section {
|
|
width: 49%;
|
|
}
|
|
|
|
.panel-wrapper {
|
|
max-width: 480px;
|
|
}
|
|
|
|
.panel-wrapper.panel-wide {
|
|
max-width: 800px;
|
|
}
|
|
|
|
.panel-wrapper.panel-full {
|
|
width: 100%;
|
|
max-width: calc(100% - 200px);
|
|
}
|
|
|
|
.panel-wrapper.panel-right.showme {
|
|
left: calc(100% - 480px);
|
|
}
|
|
|
|
.panel-wrapper.panel-right.panel-wide.showme {
|
|
left: calc(100% - 800px);
|
|
}
|
|
|
|
.panel-wrapper.panel-right.panel-full.showme {
|
|
left: 200px;
|
|
}
|
|
|
|
.form-item-half {
|
|
width: 50%;
|
|
padding-right: 16px;
|
|
}
|
|
|
|
.table-cell-flx-row .form-item {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1025px) {
|
|
.tabs-buttons-c {
|
|
overflow: visible;
|
|
}
|
|
|
|
.tab-button {
|
|
width: auto;
|
|
margin-right: 4px;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.tab-nav-button {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1200px) {
|
|
.menu-sub-mobile-fix {
|
|
width: initial;
|
|
min-width: 480px;
|
|
right: 0;
|
|
}
|
|
|
|
.form-content {
|
|
column-gap: 1%;
|
|
column-count: 2;
|
|
}
|
|
|
|
.form-inner-content-left {
|
|
width: 60%;
|
|
}
|
|
|
|
.form-inner-content-right {
|
|
width: 39%;
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1400px) {
|
|
.main-page main section {
|
|
width: 24%;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1600px) {
|
|
.section-header h1 {
|
|
font-size: 1.25em;
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
|
|
html,
|
|
body {
|
|
max-width: 100%;
|
|
}
|
|
|
|
header,
|
|
footer,
|
|
.breadcrumb-wrapper,
|
|
.tabs-buttons-c,
|
|
.menu-side-w,
|
|
.section-header-buttons-c,
|
|
.ico-section-header-btn,
|
|
.form-part-title-buttons,
|
|
.ico-sort,
|
|
.list-paging-wrapper,
|
|
.panel-wrapper {
|
|
display: none !important;
|
|
}
|
|
|
|
main {
|
|
padding: var(--pd-main) !important;
|
|
max-width: 100vw !important;
|
|
}
|
|
|
|
.form-item.form-item-half {
|
|
width: 50% !important;
|
|
}
|
|
|
|
.tab-content,
|
|
.table-list {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.list-wrapper {
|
|
overflow: visible;
|
|
overflow-x: visible;
|
|
width: 100%;
|
|
}
|
|
|
|
.print .main-w {
|
|
display: none;
|
|
}
|
|
|
|
.print-c {
|
|
width: 100%;
|
|
z-index: -1;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.print-c * {
|
|
font-size: 12pt;
|
|
}
|
|
} |