637 lines
17 KiB
CSS
637 lines
17 KiB
CSS
/* Every JSP loads this file, so legacy pages receive the same shell geometry too. */
|
|
@import url("matrix-shell-v2.css?v=7");
|
|
|
|
:root {
|
|
--matrix-theme-canvas: #cedde8;
|
|
--matrix-theme-panel: #f4f8fb;
|
|
--matrix-theme-panel-strong: #e7f0f6;
|
|
--matrix-theme-control: #ffffff;
|
|
--matrix-theme-border: #b8c7d3;
|
|
--matrix-theme-grid-head: #e8eef4;
|
|
--matrix-theme-grid-alt: #edf3f7;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
body #PageFrame {
|
|
min-height: 100%;
|
|
background-color: var(--matrix-theme-canvas) !important;
|
|
}
|
|
|
|
/* Application surfaces use a low-glare tint. Controls remain white. */
|
|
body .FormPanel,
|
|
body [id^="FormPanel"],
|
|
body .card,
|
|
body .panel,
|
|
body .well,
|
|
body .matrix-report-card,
|
|
body .matrix-tool-card,
|
|
body .matrix-query-card,
|
|
body .matrix-login__card,
|
|
body .modal-content,
|
|
body .ui-dialog,
|
|
body .tab-content {
|
|
background-color: var(--matrix-theme-panel) !important;
|
|
}
|
|
|
|
body input:not([type="button"]):not([type="submit"]):not([type="reset"]),
|
|
body select,
|
|
body textarea,
|
|
body .form-control,
|
|
body .form-select {
|
|
background-color: var(--matrix-theme-control) !important;
|
|
}
|
|
|
|
/* Replace the clipped legacy bitmap arrow with one consistent dropdown affordance. */
|
|
body .divselect {
|
|
height: auto !important;
|
|
min-height: 27px;
|
|
overflow: visible !important;
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
body select:not([multiple]) {
|
|
-webkit-appearance: none !important;
|
|
appearance: none !important;
|
|
min-height: 27px;
|
|
padding: 2px 30px 2px 7px !important;
|
|
border: 1px solid var(--matrix-theme-border) !important;
|
|
border-radius: 3px !important;
|
|
background-color: var(--matrix-theme-control) !important;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23485f73' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
|
|
background-repeat: no-repeat !important;
|
|
background-position: right 9px center !important;
|
|
background-size: 10px 7px !important;
|
|
cursor: pointer;
|
|
}
|
|
|
|
body select:not([multiple]):hover {
|
|
border-color: #71879a !important;
|
|
}
|
|
|
|
body select:not([multiple]):focus {
|
|
border-color: #2b6498 !important;
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px rgba(43, 100, 152, 0.16) !important;
|
|
}
|
|
|
|
body .modal-header,
|
|
body .ui-dialog-titlebar {
|
|
background-color: var(--matrix-theme-panel-strong) !important;
|
|
border-color: #91a6b7 !important;
|
|
}
|
|
|
|
body .modal-body,
|
|
body .modal-footer,
|
|
body .ui-dialog-content,
|
|
body .ui-dialog-buttonpane {
|
|
background-color: var(--matrix-theme-panel) !important;
|
|
}
|
|
|
|
/* Legacy notifications are appended to body and must sit above shell menus/dialogs. */
|
|
body #msgdiv,
|
|
body .ajaxmsg {
|
|
position: fixed !important;
|
|
z-index: 12000 !important;
|
|
max-width: min(90vw, 680px);
|
|
box-sizing: border-box;
|
|
box-shadow: 0 5px 18px rgba(31, 52, 72, .22);
|
|
}
|
|
|
|
body #dialdiv,
|
|
body [id$="Dialog"] {
|
|
z-index: 11000 !important;
|
|
}
|
|
|
|
/* Menus deliberately retain a white navigation surface. */
|
|
body .matrix-shell__navigation,
|
|
body .matrix-shell__navigation #MenuBar,
|
|
body #MenuForm,
|
|
body ul#master_0,
|
|
body ul#master_0 > li,
|
|
body ul#master_0 ul,
|
|
body ul#master_0 ul > li,
|
|
body .dropdown-menu,
|
|
body .navbar,
|
|
body .nav-menu {
|
|
background-color: #ffffff !important;
|
|
}
|
|
|
|
body.matrix-error-page {
|
|
display: grid;
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
padding: 24px;
|
|
place-items: center;
|
|
color: #263746;
|
|
background: var(--matrix-theme-canvas) !important;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
.matrix-error-card {
|
|
width: min(100%, 480px);
|
|
box-sizing: border-box;
|
|
padding: 30px;
|
|
text-align: center;
|
|
border: 1px solid var(--matrix-theme-border);
|
|
border-radius: 8px;
|
|
background: var(--matrix-theme-panel);
|
|
box-shadow: 0 8px 24px rgba(31, 52, 72, .12);
|
|
}
|
|
|
|
.matrix-error-card__code {
|
|
color: #b42318;
|
|
font-size: 38px;
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
}
|
|
|
|
.matrix-error-card h1 {
|
|
margin: 10px 0 6px;
|
|
font-size: 21px;
|
|
}
|
|
|
|
.matrix-error-card p {
|
|
margin: 0 0 20px;
|
|
color: #536779;
|
|
}
|
|
|
|
.matrix-error-card__action {
|
|
min-height: 34px;
|
|
padding: 6px 16px;
|
|
color: #fff;
|
|
border: 1px solid #245a91;
|
|
border-radius: 4px;
|
|
background: #245a91;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Compact toolbars for legacy forms that place controls in their title bar. */
|
|
body .title.matrix-form-title,
|
|
body .title:has(input:not([type="hidden"])),
|
|
body .title:has(select) {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 6px 12px;
|
|
min-height: 38px;
|
|
height: auto !important;
|
|
padding: 5px 10px !important;
|
|
}
|
|
|
|
body .title.matrix-form-title > .matrix-title-icon,
|
|
body .title:has(input:not([type="hidden"]), select) > .matrix-title-icon {
|
|
flex: 0 0 auto;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
body .title .matrix-form-title__heading,
|
|
body .title .matrix-form-title__field,
|
|
body .title .matrix-form-title__check {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin: 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
body .title .matrix-form-title__field,
|
|
body .title .matrix-form-title__check {
|
|
font-weight: 600;
|
|
}
|
|
|
|
body .title:has(input:not([type="hidden"]), select) > span:has(input:not([type="hidden"]), select),
|
|
body .title:has(input:not([type="hidden"]), select) > .divchk {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
margin: 0 !important;
|
|
line-height: normal !important;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
body .title:has(input:not([type="hidden"]), select) > div:not(.divselect) {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
float: none !important;
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
body .title:has(input:not([type="hidden"]), select) > input.button,
|
|
body .title:has(input:not([type="hidden"]), select) > button,
|
|
body .title:has(input:not([type="hidden"]), select) > .toolbaricon {
|
|
position: static !important;
|
|
float: none !important;
|
|
min-height: 27px;
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
body .title:has(input:not([type="hidden"]), select) > input.button,
|
|
body .title:has(input:not([type="hidden"]), select) > button {
|
|
width: auto !important;
|
|
padding: 3px 10px !important;
|
|
border: 1px solid #9aabb9 !important;
|
|
border-radius: 3px !important;
|
|
background: #e7edf2 !important;
|
|
color: #24313d !important;
|
|
font-weight: 600;
|
|
}
|
|
|
|
body .title:has(input:not([type="hidden"]), select) > .toolbaricon {
|
|
display: inline-flex !important;
|
|
width: 28px !important;
|
|
height: 27px !important;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 !important;
|
|
border: 1px solid #aebdca !important;
|
|
border-radius: 3px;
|
|
background: #fff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
body .title:has(input:not([type="hidden"]), select) > .divchk {
|
|
margin-left: auto !important;
|
|
}
|
|
|
|
body .title > .matrix-title-action {
|
|
margin-left: auto !important;
|
|
}
|
|
|
|
/* Upload Cases: compact workflow card with a clear primary action. */
|
|
.matrix-upload-cases .matrix-upload-cases__panel {
|
|
padding: 18px !important;
|
|
}
|
|
|
|
.matrix-upload-cases .matrix-upload-cases__panel .matrix-form-controls {
|
|
border-spacing: 0;
|
|
}
|
|
|
|
.matrix-upload-cases .matrix-upload-cases__fields {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
align-items: end;
|
|
gap: 14px 20px;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.matrix-upload-cases .matrix-upload-cases__fields > .widget {
|
|
display: grid;
|
|
width: 100%;
|
|
grid-template-columns: minmax(120px, .42fr) minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin: 0;
|
|
}
|
|
|
|
.matrix-upload-cases .matrix-upload-cases__fields .lblcontainer,
|
|
.matrix-upload-cases .matrix-upload-cases__fields .inputcontainer {
|
|
width: auto !important;
|
|
height: auto;
|
|
padding: 0 !important;
|
|
float: none;
|
|
}
|
|
|
|
.matrix-upload-cases .matrix-upload-cases__fields input[type="text"],
|
|
.matrix-upload-cases .matrix-upload-cases__fields input[type="file"] {
|
|
box-sizing: border-box;
|
|
width: 100% !important;
|
|
min-height: 32px;
|
|
}
|
|
|
|
.matrix-upload-cases .matrix-upload-cases__fields > input.button {
|
|
grid-column: 1 / -1;
|
|
justify-self: end;
|
|
min-width: 110px;
|
|
color: #fff;
|
|
border-color: #245a91;
|
|
background: #245a91;
|
|
}
|
|
|
|
/* Change Password: readable help and consistently aligned secure fields. */
|
|
.matrix-change-password .matrix-password-form {
|
|
padding: 18px !important;
|
|
}
|
|
|
|
.matrix-change-password .matrix-password-form__fields {
|
|
display: grid;
|
|
gap: 12px;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.matrix-change-password .matrix-password-form__fields > .widget {
|
|
display: grid;
|
|
width: 100%;
|
|
grid-template-columns: minmax(170px, .8fr) minmax(190px, 1fr);
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin: 0;
|
|
}
|
|
|
|
.matrix-change-password .matrix-password-form__fields .lblcontainer,
|
|
.matrix-change-password .matrix-password-form__fields .inputcontainer {
|
|
width: auto !important;
|
|
height: auto;
|
|
padding: 0 !important;
|
|
float: none;
|
|
}
|
|
|
|
.matrix-change-password .matrix-password-form__fields input[type="password"] {
|
|
box-sizing: border-box;
|
|
width: 100% !important;
|
|
min-height: 32px;
|
|
padding: 4px 8px;
|
|
border: 1px solid var(--matrix-theme-border);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.matrix-change-password .matrix-password-form__help {
|
|
grid-template-columns: 1fr !important;
|
|
margin-bottom: 4px !important;
|
|
padding: 10px 12px;
|
|
color: #365269;
|
|
border: 1px solid #bfd0dd;
|
|
border-radius: 4px;
|
|
background: #e7f0f6;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.matrix-form-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding: 12px 18px 18px;
|
|
}
|
|
|
|
.matrix-form-actions input.button {
|
|
min-width: 130px;
|
|
min-height: 32px;
|
|
margin: 0 !important;
|
|
color: #fff !important;
|
|
border-color: #245a91 !important;
|
|
background: #245a91 !important;
|
|
}
|
|
|
|
.matrix-change-password .matrix-form-actions #btnsave {
|
|
padding: 6px 16px !important;
|
|
color: #fff !important;
|
|
background-color: #245a91 !important;
|
|
background-image: none !important;
|
|
box-shadow: none !important;
|
|
filter: none !important;
|
|
font-family: Arial, sans-serif !important;
|
|
font-size: 12px !important;
|
|
font-weight: 700 !important;
|
|
line-height: 18px !important;
|
|
text-shadow: none !important;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.matrix-upload-cases .matrix-upload-cases__fields {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.matrix-change-password .matrix-password-form__fields > .widget {
|
|
grid-template-columns: 1fr;
|
|
gap: 4px;
|
|
}
|
|
}
|
|
|
|
body .title input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
|
|
body .title select {
|
|
box-sizing: border-box !important;
|
|
height: 27px !important;
|
|
min-height: 27px !important;
|
|
margin: 0 !important;
|
|
padding: 2px 7px !important;
|
|
border: 1px solid var(--matrix-theme-border) !important;
|
|
border-radius: 3px !important;
|
|
background-color: var(--matrix-theme-control) !important;
|
|
line-height: 21px !important;
|
|
}
|
|
|
|
body .title input[type="checkbox"],
|
|
body .title input[type="radio"] {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
/* Shared compact button system. This is intentionally last in the global
|
|
theme so page-specific legacy button gradients cannot produce a different
|
|
Save button on each screen. Background images are retained for old icons. */
|
|
body.matrix-v2 input.button,
|
|
body.matrix-v2 button.button,
|
|
body.matrix-v2 input[type="button"]:not(.form-control),
|
|
body.matrix-v2 input[type="submit"]:not(.form-control),
|
|
body.matrix-v2 input[type="reset"]:not(.form-control) {
|
|
box-sizing: border-box;
|
|
min-height: 28px;
|
|
padding: 4px 12px;
|
|
color: #294052 !important;
|
|
background-color: #f8fafc !important;
|
|
border: 1px solid #9aabb9 !important;
|
|
border-radius: 4px !important;
|
|
box-shadow: none !important;
|
|
filter: none !important;
|
|
font-family: Arial, sans-serif !important;
|
|
font-size: 12px !important;
|
|
font-weight: 700 !important;
|
|
line-height: 18px !important;
|
|
text-shadow: none !important;
|
|
cursor: pointer;
|
|
}
|
|
|
|
body.matrix-v2 a.matrix-button {
|
|
display: inline-flex;
|
|
box-sizing: border-box;
|
|
min-height: 28px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 4px 12px;
|
|
border: 1px solid #9aabb9;
|
|
border-radius: 4px;
|
|
background: #f8fafc;
|
|
color: #294052;
|
|
font: 700 12px/18px Arial, sans-serif;
|
|
text-decoration: none;
|
|
}
|
|
|
|
body.matrix-v2 a.matrix-button--primary {
|
|
border-color: #245a91;
|
|
background: #245a91;
|
|
color: #fff;
|
|
}
|
|
|
|
body.matrix-v2 a.matrix-button--primary:hover {
|
|
border-color: #1c4b79;
|
|
background: #1c4b79;
|
|
color: #fff;
|
|
}
|
|
|
|
body.matrix-v2 a.matrix-button:focus-visible {
|
|
outline: none;
|
|
box-shadow: 0 0 0 3px rgba(43, 100, 152, .2);
|
|
}
|
|
|
|
body.matrix-v2 :is(input.button, button.button, input[type="button"], input[type="submit"], input[type="reset"]):hover:not(:disabled):not(.buttondisabled) {
|
|
color: #17324a !important;
|
|
background-color: #e7eef4 !important;
|
|
border-color: #71879a !important;
|
|
}
|
|
|
|
body.matrix-v2 :is(input.button, button.button, input[type="button"], input[type="submit"], input[type="reset"]):focus-visible {
|
|
outline: none !important;
|
|
box-shadow: 0 0 0 3px rgba(43, 100, 152, .2) !important;
|
|
}
|
|
|
|
body.matrix-v2 :is(input, button):is(
|
|
#btnsave,
|
|
#btncompsave,
|
|
#btnok,
|
|
#btnfilter,
|
|
#btnfind,
|
|
#btngenreport,
|
|
#btnupload,
|
|
#btnsend,
|
|
#btntransfer,
|
|
#btnadd,
|
|
#btnlogin,
|
|
[value^="Save" i],
|
|
[value^="Submit" i],
|
|
[value^="Apply" i],
|
|
[value^="Generate" i],
|
|
[value^="Upload" i]
|
|
) {
|
|
color: #fff !important;
|
|
background-color: #245a91 !important;
|
|
border-color: #245a91 !important;
|
|
}
|
|
|
|
body.matrix-v2 :is(input, button):is(
|
|
#btnsave,
|
|
#btncompsave,
|
|
#btnok,
|
|
#btnfilter,
|
|
#btnfind,
|
|
#btngenreport,
|
|
#btnupload,
|
|
#btnsend,
|
|
#btntransfer,
|
|
#btnadd,
|
|
#btnlogin,
|
|
[value^="Save" i],
|
|
[value^="Submit" i],
|
|
[value^="Apply" i],
|
|
[value^="Generate" i],
|
|
[value^="Upload" i]
|
|
):hover:not(:disabled):not(.buttondisabled) {
|
|
color: #fff !important;
|
|
background-color: #1c4b79 !important;
|
|
border-color: #1c4b79 !important;
|
|
}
|
|
|
|
body.matrix-v2 :is(input, button):is(#btndelete, [value^="Delete" i]) {
|
|
color: #fff !important;
|
|
background-color: #b42318 !important;
|
|
border-color: #b42318 !important;
|
|
}
|
|
|
|
body.matrix-v2 :is(input, button)#btnsave[value^="Delete" i] {
|
|
color: #fff !important;
|
|
background-color: #b42318 !important;
|
|
border-color: #b42318 !important;
|
|
}
|
|
|
|
body.matrix-v2 :is(input, button):disabled,
|
|
body.matrix-v2 .buttondisabled {
|
|
opacity: .58;
|
|
cursor: not-allowed !important;
|
|
}
|
|
|
|
body .title > .divselect,
|
|
body .title .matrix-form-title__end {
|
|
position: static !important;
|
|
top: auto !important;
|
|
right: auto !important;
|
|
margin: 0 0 0 auto !important;
|
|
padding: 0 !important;
|
|
border: 0 !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
body .title > .divselect select {
|
|
width: 100% !important;
|
|
}
|
|
|
|
/* Scanning is the visual baseline for data-heavy tables. */
|
|
body table#casetable,
|
|
body .matrix-data-grid,
|
|
body .tableContainer > table {
|
|
color: #263746;
|
|
background: var(--matrix-theme-panel);
|
|
border-color: var(--matrix-theme-border);
|
|
}
|
|
|
|
body table#casetable > thead,
|
|
body .matrix-data-grid > thead,
|
|
body .tableContainer > table > thead,
|
|
body .flexigrid div.hDiv,
|
|
body .flexigrid div.hDiv th {
|
|
color: #31475b;
|
|
background: var(--matrix-theme-grid-head) !important;
|
|
border-color: #c3ced9 !important;
|
|
}
|
|
|
|
body table#casetable > thead th,
|
|
body .matrix-data-grid > thead th,
|
|
body .tableContainer > table > thead th,
|
|
body .tableContainer > table > thead td {
|
|
padding: 7px 8px;
|
|
color: #31475b;
|
|
background: var(--matrix-theme-grid-head) !important;
|
|
border-color: #c3ced9 !important;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
body table#casetable > tbody td,
|
|
body .matrix-data-grid > tbody td,
|
|
body .tableContainer > table > tbody td,
|
|
body .flexigrid div.bDiv td {
|
|
color: #263746;
|
|
background: var(--matrix-theme-control) !important;
|
|
border-color: #d9e2ea !important;
|
|
}
|
|
|
|
body table#casetable > tbody tr:nth-child(even) td,
|
|
body .matrix-data-grid > tbody tr:nth-child(even) td,
|
|
body .tableContainer > table > tbody tr:nth-child(even) td,
|
|
body .flexigrid div.bDiv tr.erow td {
|
|
background: var(--matrix-theme-grid-alt) !important;
|
|
}
|
|
|
|
body table#casetable > tbody tr:hover td,
|
|
body .matrix-data-grid > tbody tr:hover td,
|
|
body .tableContainer > table > tbody tr:hover td,
|
|
body .flexigrid div.bDiv tr:hover td {
|
|
background: #dcecf8 !important;
|
|
}
|
|
|
|
body .flexigrid,
|
|
body .flexigrid div.bDiv,
|
|
body .matrix-report-grid,
|
|
body .tableContainer {
|
|
background-color: var(--matrix-theme-panel) !important;
|
|
border-color: var(--matrix-theme-border) !important;
|
|
}
|