feat: expand EST test workspace
This commit is contained in:
+196
-146
@@ -3,138 +3,166 @@
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
background: #f4f6f8;
|
||||
color: #172a3a;
|
||||
background: #e9edf1;
|
||||
color: #202a34;
|
||||
font:
|
||||
15px system-ui,
|
||||
"Malgun Gothic",
|
||||
13px "Malgun Gothic",
|
||||
sans-serif;
|
||||
}
|
||||
.top {
|
||||
background: #122c40;
|
||||
color: white;
|
||||
padding: 32px max(24px, calc((100% - 1320px) / 2));
|
||||
header {
|
||||
background: #f3f5f7;
|
||||
}
|
||||
.titlebar {
|
||||
height: 38px;
|
||||
background: #294b68;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
gap: 20px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
.eyebrow {
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.12em;
|
||||
color: #8ed8cd;
|
||||
font-weight: 700;
|
||||
.titlebar strong {
|
||||
font-size: 15px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 27px;
|
||||
margin: 8px 0;
|
||||
.titlebar span {
|
||||
color: #c5d9e6;
|
||||
font-size: 11px;
|
||||
}
|
||||
.top p {
|
||||
margin: 0;
|
||||
color: #bfd0da;
|
||||
}
|
||||
.actions {
|
||||
.menubar {
|
||||
height: 32px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
gap: 27px;
|
||||
padding: 0 17px;
|
||||
background: #fafbfc;
|
||||
border-bottom: 1px solid #c3ccd5;
|
||||
}
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid #b9c5cf;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
button,
|
||||
.button {
|
||||
border: 0;
|
||||
border-radius: 7px;
|
||||
background: #087f73;
|
||||
color: white;
|
||||
padding: 10px 15px;
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
.toolbar i {
|
||||
height: 25px;
|
||||
border-left: 1px solid #bdc7d1;
|
||||
margin: 0 8px;
|
||||
}
|
||||
button:hover,
|
||||
.button:hover {
|
||||
filter: brightness(0.93);
|
||||
.toolbar input {
|
||||
width: 210px;
|
||||
}
|
||||
.secondary {
|
||||
background: #e9f0f1;
|
||||
color: #234253;
|
||||
.workspace {
|
||||
display: flex;
|
||||
min-height: calc(100vh - 142px);
|
||||
}
|
||||
main {
|
||||
max-width: 1320px;
|
||||
margin: auto;
|
||||
padding: 24px;
|
||||
aside {
|
||||
width: 150px;
|
||||
flex: none;
|
||||
background: #e3e9ef;
|
||||
border-right: 1px solid #aebcc8;
|
||||
}
|
||||
.notice {
|
||||
background: #fff6e1;
|
||||
border: 1px solid #efdfb5;
|
||||
border-radius: 8px;
|
||||
padding: 13px 16px;
|
||||
color: #705315;
|
||||
}
|
||||
.notice strong {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.metric,
|
||||
.card {
|
||||
background: white;
|
||||
border: 1px solid #dfe7ea;
|
||||
border-radius: 9px;
|
||||
}
|
||||
.metric {
|
||||
padding: 16px;
|
||||
}
|
||||
.metric span {
|
||||
display: block;
|
||||
color: #6d818c;
|
||||
font-size: 13px;
|
||||
}
|
||||
.metric strong {
|
||||
display: block;
|
||||
font-size: 21px;
|
||||
margin-top: 6px;
|
||||
.sidehead {
|
||||
padding: 11px 12px;
|
||||
background: #d0dbe5;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid #bdc8d1;
|
||||
}
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
border-bottom: 1px solid #cbd8dc;
|
||||
overflow: auto;
|
||||
flex-direction: column;
|
||||
padding: 8px;
|
||||
gap: 3px;
|
||||
}
|
||||
.tabs button {
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
color: #6a7f8b;
|
||||
border-radius: 0;
|
||||
padding: 14px 18px;
|
||||
border-bottom: 3px solid transparent;
|
||||
border: 1px solid transparent;
|
||||
font-weight: normal;
|
||||
color: #253847;
|
||||
padding: 10px;
|
||||
}
|
||||
.tabs button.active {
|
||||
color: #087f73;
|
||||
border-bottom-color: #087f73;
|
||||
background: #fff;
|
||||
border-color: #9eb6c8;
|
||||
color: #164f7b;
|
||||
font-weight: bold;
|
||||
}
|
||||
.tabs button span {
|
||||
margin-left: 8px;
|
||||
}
|
||||
.sideinfo {
|
||||
border-top: 1px solid #c4ced6;
|
||||
padding: 15px 12px;
|
||||
line-height: 1.8;
|
||||
color: #6a7b89;
|
||||
}
|
||||
.sideinfo b {
|
||||
color: #33546b;
|
||||
}
|
||||
.sideinfo p {
|
||||
font-size: 11px;
|
||||
}
|
||||
main {
|
||||
padding: 12px;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
.notice {
|
||||
background: #fff9e6;
|
||||
border: 1px solid #e4d6a8;
|
||||
padding: 8px 10px;
|
||||
color: #735c24;
|
||||
font-size: 12px;
|
||||
}
|
||||
.summary {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
background: #f7f9fb;
|
||||
border: 1px solid #bdc9d1;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.metric {
|
||||
padding: 8px 15px;
|
||||
border-right: 1px solid #d6dfe5;
|
||||
min-width: 150px;
|
||||
}
|
||||
.metric span {
|
||||
color: #667c8b;
|
||||
font-size: 11px;
|
||||
}
|
||||
.metric strong {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
margin-top: 3px;
|
||||
color: #244660;
|
||||
}
|
||||
.card {
|
||||
margin-top: 18px;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
border: 1px solid #b7c5cf;
|
||||
margin-top: 10px;
|
||||
min-height: 400px;
|
||||
}
|
||||
.cardhead {
|
||||
padding: 20px;
|
||||
background: #e5edf4;
|
||||
border-bottom: 1px solid #bccbd6;
|
||||
padding: 9px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.cardhead h2 {
|
||||
margin: 0;
|
||||
font-size: 19px;
|
||||
font-size: 14px;
|
||||
color: #234962;
|
||||
}
|
||||
.cardhead p {
|
||||
margin: 6px 0 0;
|
||||
color: #71838c;
|
||||
font-size: 13px;
|
||||
margin: 4px 0 0;
|
||||
color: #72818a;
|
||||
font-size: 11px;
|
||||
}
|
||||
.tablewrap {
|
||||
overflow: auto;
|
||||
@@ -146,89 +174,111 @@ table {
|
||||
}
|
||||
th,
|
||||
td {
|
||||
padding: 10px 12px;
|
||||
border-top: 1px solid #e8eef0;
|
||||
border: 1px solid #d6e0e6;
|
||||
padding: 4px 5px;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
}
|
||||
th {
|
||||
background: #f8fafb;
|
||||
color: #6a7d87;
|
||||
background: #eaf0f5;
|
||||
color: #365269;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
height: 31px;
|
||||
}
|
||||
td.money {
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
font-weight: 600;
|
||||
}
|
||||
tr:nth-child(even) {
|
||||
background: #f8fafb;
|
||||
}
|
||||
tr:hover {
|
||||
background: #edf6ff;
|
||||
}
|
||||
input,
|
||||
select {
|
||||
min-width: 70px;
|
||||
width: 100%;
|
||||
min-width: 75px;
|
||||
padding: 8px;
|
||||
border: 1px solid #cfdbdf;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #d1dce2;
|
||||
background: white;
|
||||
color: #203746;
|
||||
padding: 5px;
|
||||
color: #273b4b;
|
||||
font: inherit;
|
||||
}
|
||||
input:focus,
|
||||
select:focus {
|
||||
outline: 2px solid #74a8ca;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
input[type="number"] {
|
||||
text-align: right;
|
||||
}
|
||||
button,
|
||||
.button {
|
||||
background: #fff;
|
||||
border: 1px solid #b6c5d0;
|
||||
color: #29465a;
|
||||
padding: 6px 10px;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
button:hover,
|
||||
.button:hover {
|
||||
background: #ddecf7;
|
||||
border-color: #8faec1;
|
||||
}
|
||||
.delete {
|
||||
background: #f3f6f7;
|
||||
color: #8a5151;
|
||||
padding: 7px 10px;
|
||||
color: #87585b;
|
||||
padding: 4px 7px;
|
||||
}
|
||||
.details {
|
||||
padding: 16px 20px;
|
||||
color: #59717d;
|
||||
font-size: 13px;
|
||||
border-top: 1px solid #e8eef0;
|
||||
line-height: 1.7;
|
||||
padding: 12px;
|
||||
color: #667e8d;
|
||||
font-size: 12px;
|
||||
line-height: 1.8;
|
||||
border-top: 1px solid #d6e0e6;
|
||||
}
|
||||
.total {
|
||||
background: #f0f8f6;
|
||||
}
|
||||
.total td {
|
||||
font-weight: 700;
|
||||
background: #eaf3f8;
|
||||
font-weight: bold;
|
||||
}
|
||||
.empty {
|
||||
padding: 24px;
|
||||
color: #738892;
|
||||
padding: 25px;
|
||||
color: #758995;
|
||||
}
|
||||
.footnote {
|
||||
font-size: 12px;
|
||||
color: #72848d;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.tag {
|
||||
display: inline-block;
|
||||
padding: 4px 8px;
|
||||
background: #e5f4f0;
|
||||
color: #087f73;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.warning {
|
||||
color: #a45228;
|
||||
footer {
|
||||
height: 28px;
|
||||
border-top: 1px solid #becbd4;
|
||||
background: #e4eaf0;
|
||||
color: #586f80;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
font-size: 11px;
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
.top {
|
||||
display: block;
|
||||
}
|
||||
.actions {
|
||||
margin-top: 20px;
|
||||
aside {
|
||||
width: 110px;
|
||||
}
|
||||
.summary {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.metric {
|
||||
min-width: 50%;
|
||||
}
|
||||
.menubar {
|
||||
gap: 14px;
|
||||
overflow: auto;
|
||||
}
|
||||
main {
|
||||
padding: 16px;
|
||||
padding: 6px;
|
||||
}
|
||||
.metric strong {
|
||||
font-size: 17px;
|
||||
.titlebar span,
|
||||
.sideinfo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user