143 lines
3.8 KiB
CSS
143 lines
3.8 KiB
CSS
:root {
|
|
--matrix-color-primary: #245a91;
|
|
--matrix-color-primary-hover: #174a7d;
|
|
--matrix-color-surface: #ffffff;
|
|
--matrix-color-surface-muted: #cedde8;
|
|
--matrix-color-border: #b9c5d1;
|
|
--matrix-color-text: #1f2933;
|
|
--matrix-color-text-muted: #52606d;
|
|
--matrix-color-danger: #b42318;
|
|
--matrix-color-danger-surface: #fff1f0;
|
|
--matrix-color-info-surface: #eaf3fc;
|
|
--matrix-focus-ring: 0 0 0 2px rgba(36, 90, 145, 0.25);
|
|
--matrix-radius-sm: 3px;
|
|
--matrix-radius-md: 5px;
|
|
--matrix-shadow-card: 0 8px 24px rgba(31, 41, 51, 0.14);
|
|
--matrix-control-height: 30px;
|
|
--matrix-font-size: 13px;
|
|
--matrix-space-1: 4px;
|
|
--matrix-space-2: 8px;
|
|
--matrix-space-3: 12px;
|
|
--matrix-space-4: 16px;
|
|
}
|
|
|
|
.matrix-v2,
|
|
.matrix-v2 * {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.matrix-v2 {
|
|
--bs-primary: var(--matrix-color-primary);
|
|
--bs-primary-rgb: 36, 90, 145;
|
|
--bs-body-color: var(--matrix-color-text);
|
|
--bs-body-font-family: Tahoma, Arial, sans-serif;
|
|
--bs-body-font-size: var(--matrix-font-size);
|
|
--bs-border-color: var(--matrix-color-border);
|
|
--bs-border-radius: var(--matrix-radius-sm);
|
|
--bs-border-radius-sm: var(--matrix-radius-sm);
|
|
margin: 0;
|
|
color: var(--matrix-color-text);
|
|
font: var(--matrix-font-size)/1.35 Tahoma, Arial, sans-serif;
|
|
min-height: 100vh;
|
|
background-color: var(--matrix-color-surface-muted) !important;
|
|
}
|
|
|
|
html:has(body.matrix-v2),
|
|
body.matrix-v2,
|
|
body.matrix-v2 #PageFrame {
|
|
min-height: 100%;
|
|
background-color: var(--matrix-color-surface-muted) !important;
|
|
}
|
|
|
|
.matrix-v2 button,
|
|
.matrix-v2 input,
|
|
.matrix-v2 select,
|
|
.matrix-v2 textarea {
|
|
font: inherit;
|
|
}
|
|
|
|
.matrix-v2 .card-header {
|
|
min-height: 34px;
|
|
padding: var(--matrix-space-1) var(--matrix-space-2) var(--matrix-space-1) var(--matrix-space-3);
|
|
color: #ffffff;
|
|
background: var(--matrix-color-primary);
|
|
}
|
|
|
|
.matrix-v2 .card-body {
|
|
padding: var(--matrix-space-4);
|
|
background: #f4f8fb;
|
|
}
|
|
|
|
.matrix-v2 .FormPanel,
|
|
.matrix-v2 .panel,
|
|
.matrix-v2 .card:not(.matrix-shell__navigation) {
|
|
background-color: #f4f8fb;
|
|
}
|
|
|
|
.matrix-v2 .col-form-label {
|
|
color: var(--matrix-color-text-muted);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.matrix-v2 .form-control-sm,
|
|
.matrix-v2 .form-select-sm {
|
|
min-height: var(--matrix-control-height);
|
|
height: var(--matrix-control-height);
|
|
padding: 3px 7px;
|
|
font-size: var(--matrix-font-size);
|
|
}
|
|
|
|
.matrix-v2 .form-control:hover,
|
|
.matrix-v2 .form-select:hover {
|
|
border-color: #66788a;
|
|
}
|
|
|
|
.matrix-v2 .form-control:focus,
|
|
.matrix-v2 .form-select:focus,
|
|
.matrix-v2 .btn:focus-visible,
|
|
.matrix-v2 .btn-close:focus-visible {
|
|
border-color: var(--matrix-color-primary);
|
|
outline: none;
|
|
box-shadow: var(--matrix-focus-ring);
|
|
}
|
|
|
|
.matrix-v2 .btn-sm {
|
|
min-height: var(--matrix-control-height);
|
|
padding: 3px 12px;
|
|
font-size: var(--matrix-font-size);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.matrix-v2 .btn-primary {
|
|
--bs-btn-bg: var(--matrix-color-primary);
|
|
--bs-btn-border-color: var(--matrix-color-primary);
|
|
--bs-btn-hover-bg: var(--matrix-color-primary-hover);
|
|
--bs-btn-hover-border-color: var(--matrix-color-primary-hover);
|
|
--bs-btn-active-bg: var(--matrix-color-primary-hover);
|
|
--bs-btn-active-border-color: var(--matrix-color-primary-hover);
|
|
}
|
|
|
|
.matrix-v2 .alert {
|
|
padding: var(--matrix-space-2) var(--matrix-space-3);
|
|
font-size: 12px;
|
|
border-radius: var(--matrix-radius-sm);
|
|
}
|
|
|
|
/* Shared title treatment for migrated and legacy-backed views. */
|
|
.matrix-v2 .title,
|
|
.matrix-v2 .card-header,
|
|
.matrix-v2 .matrix-page-heading,
|
|
.matrix-v2 .modal-header {
|
|
color: var(--matrix-color-text) !important;
|
|
background: #f8fafc !important;
|
|
border-color: #9aa8b6 !important;
|
|
}
|
|
|
|
.matrix-v2 .title a,
|
|
.matrix-v2 .title span,
|
|
.matrix-v2 .card-header a,
|
|
.matrix-v2 .card-header span,
|
|
.matrix-v2 .modal-header .modal-title {
|
|
color: inherit !important;
|
|
}
|