207 lines
3.9 KiB
SCSS
207 lines
3.9 KiB
SCSS
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100;200;300;400;500;600;700;800;900&display=swap');
|
|
|
|
$typography-font-family: 'Noto Sans Thai', sans-serif !default;
|
|
|
|
$primary: var(--brand-1);
|
|
$secondary: var(--brand-2);
|
|
$accent: #9c27b0;
|
|
|
|
$dark: var(--gray-10);
|
|
$dark-page: var(--gray-11);
|
|
|
|
$positive: #00bd9d;
|
|
$negative: var(--red-8);
|
|
$info: var(--blue-6);
|
|
$warning: #ffc224;
|
|
$danger: var(--orange-7);
|
|
|
|
$disabled: var(--stone-4);
|
|
$input-border: var(--gray-2);
|
|
|
|
$separator-color: var(--border-color);
|
|
$separator-dark-color: var(--border-color);
|
|
|
|
.q-separator {
|
|
transition: none;
|
|
}
|
|
|
|
.q-field__control {
|
|
background: var(--surface-1);
|
|
color: $primary;
|
|
|
|
&:has(:where(input:disabled, textarea:disabled)) {
|
|
background: var(--surface-tab);
|
|
}
|
|
}
|
|
|
|
.q-field--outlined .q-field__control {
|
|
border-radius: var(--radius-2);
|
|
|
|
&::before {
|
|
transition: none;
|
|
border-color: var(--border-color);
|
|
border-radius: var(--radius-2);
|
|
}
|
|
|
|
&:hover::before {
|
|
border-color: var(--border-color);
|
|
}
|
|
}
|
|
|
|
.q-menu,
|
|
.q-card {
|
|
box-shadow: var(--shadow-2) !important;
|
|
}
|
|
|
|
.q-dialog__backdrop {
|
|
background-color: hsla(0 0% 60% / 0.4) !important;
|
|
}
|
|
|
|
.q-field--dense .q-field__label {
|
|
font-family: 'Noto Sans Thai', sans-serif;
|
|
}
|
|
|
|
.q-field__inner {
|
|
font-family: 'Noto Sans Thai', sans-serif;
|
|
}
|
|
|
|
div.fullscreen.q-drawer__backdrop {
|
|
background-color: hsla(0 0% 60% / 0.4) !important;
|
|
}
|
|
|
|
.q-field--dense .q-field__label {
|
|
font-family: 'Noto Sans Thai', sans-serif;
|
|
}
|
|
|
|
.q-field__inner {
|
|
font-family: 'Noto Sans Thai', sans-serif;
|
|
}
|
|
|
|
.dp__menu.dp__menu_index.dp--menu-wrapper {
|
|
font-family: 'Noto Sans Thai', sans-serif;
|
|
}
|
|
|
|
.dp__overlay_cell.dp__overlay_cell_pad {
|
|
font-family: 'Noto Sans Thai', sans-serif;
|
|
}
|
|
|
|
.dp__overlay_cell_active.dp__overlay_cell_pad {
|
|
font-family: 'Noto Sans Thai', sans-serif;
|
|
}
|
|
|
|
.disabled,
|
|
.disabled *,
|
|
[disabled],
|
|
[disabled] * :not(:deep(.q-checkbox)) {
|
|
color: hsl(var(--text-mute)) !important;
|
|
}
|
|
|
|
.bg-disabled {
|
|
background: $disabled;
|
|
}
|
|
|
|
.text-disabled {
|
|
color: $disabled;
|
|
}
|
|
|
|
.input-border,
|
|
.input-border *,
|
|
[input-border],
|
|
[input-border] * :not(:deep(.q-checkbox)) {
|
|
color: hsl(var(--text-mute)) !important;
|
|
}
|
|
|
|
.bg-input-border {
|
|
background: $input-border;
|
|
}
|
|
|
|
.text-input-border {
|
|
color: $input-border;
|
|
}
|
|
|
|
.danger,
|
|
.danger *,
|
|
[danger],
|
|
[danger] * :not(:deep(.q-checkbox)) {
|
|
color: (var(--danger)) !important;
|
|
}
|
|
|
|
.bg-danger {
|
|
background: $danger;
|
|
}
|
|
|
|
.text-danger {
|
|
color: $danger;
|
|
}
|
|
|
|
.q-field--outlined.q-field--readonly .q-field__control:before {
|
|
border-color: transparent;
|
|
}
|
|
|
|
.q-field__native:not(textarea) {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
// q-tree
|
|
.q-tree__node-header.relative-position.row.no-wrap.items-center {
|
|
padding-block: 0px;
|
|
}
|
|
|
|
.q-tree__node-header:before {
|
|
color: hsl(var(--text-mute));
|
|
}
|
|
|
|
.q-tree__node-header.relative-position.row.no-wrap.items-center:has(
|
|
.clickable-node
|
|
):hover {
|
|
background-color: hsla(var(--info-bg) / 0.1);
|
|
}
|
|
|
|
.q-tree__node-header.relative-position.row.no-wrap.items-center:has(
|
|
.clickable-node.active-node
|
|
) {
|
|
background-color: hsla(var(--info-bg) / 0.1);
|
|
}
|
|
|
|
.q-tree__node-header {
|
|
padding-left: 0px !important;
|
|
}
|
|
|
|
.q-tree__node.relative-position.q-tree__node--child:not(:first-child)
|
|
.q-tree__node-header:before {
|
|
top: -32px !important;
|
|
}
|
|
|
|
.q-tree.q-tree--standard.text-transparent {
|
|
color: hsl(var(--text-mute)) !important;
|
|
}
|
|
|
|
.q-field__control {
|
|
align-items: center;
|
|
}
|
|
|
|
i.q-icon.mdi.mdi-alert.q-table__bottom-nodata-icon {
|
|
color: #ffc224 !important;
|
|
}
|
|
|
|
i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon {
|
|
color: hsl(var(--text-mute));
|
|
}
|
|
|
|
i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated {
|
|
color: var(--brand-1);
|
|
}
|
|
|
|
.q-item.q-item-type.row.no-wrap.q-item--dense.q-item--clickable.q-link.cursor-pointer.q-focusable.q-hoverable.surface-1
|
|
.q-focus-helper {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.clear-btn {
|
|
opacity: 0.6;
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|