feat(est): reproduce native tables and calculations
This commit is contained in:
@@ -0,0 +1,625 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #edf0f4;
|
||||
color: #203345;
|
||||
font:
|
||||
12px "Malgun Gothic",
|
||||
sans-serif;
|
||||
}
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
button {
|
||||
cursor: pointer;
|
||||
border: 1px solid #b4c4d2;
|
||||
background: linear-gradient(#fff, #e5edf4);
|
||||
padding: 5px 10px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
button:hover {
|
||||
background: #d9edff;
|
||||
border-color: #7da4c3;
|
||||
}
|
||||
button:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: default;
|
||||
}
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border: 1px solid #c5d2dd;
|
||||
background: #fff;
|
||||
padding: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
input:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
outline: 2px solid #7db3dd;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
input[type="checkbox"] {
|
||||
vertical-align: middle;
|
||||
accent-color: #346f9e;
|
||||
}
|
||||
header {
|
||||
flex: none;
|
||||
}
|
||||
.titlebar {
|
||||
height: 34px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 26px;
|
||||
padding: 0 12px;
|
||||
background: linear-gradient(90deg, #1f4b70, #487b9f);
|
||||
color: #fff;
|
||||
}
|
||||
.titlebar b {
|
||||
font-size: 14px;
|
||||
}
|
||||
.titlebar span {
|
||||
font-size: 11px;
|
||||
color: #d3e5f2;
|
||||
}
|
||||
.titlebar button {
|
||||
margin-left: auto;
|
||||
background: #ecf4fa;
|
||||
color: #254b66;
|
||||
font-size: 11px;
|
||||
padding: 3px 10px;
|
||||
}
|
||||
.menubar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
background: #f9fafb;
|
||||
border-bottom: 1px solid #becbd7;
|
||||
height: 29px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.menubar details {
|
||||
position: relative;
|
||||
}
|
||||
.menubar summary {
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
padding: 6px 13px;
|
||||
}
|
||||
.menubar summary:hover,
|
||||
.menubar details[open] > summary {
|
||||
background: #d9e9f6;
|
||||
}
|
||||
.menu {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
min-width: 210px;
|
||||
padding: 4px;
|
||||
background: #f8fafc;
|
||||
border: 1px solid #a6b9c8;
|
||||
box-shadow: 2px 4px 9px #19395130;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.menu button {
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
padding: 8px 14px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.menu button:hover {
|
||||
background: #d6e9f8;
|
||||
}
|
||||
.menu hr {
|
||||
width: 100%;
|
||||
margin: 3px 0;
|
||||
border: 0;
|
||||
border-top: 1px solid #d4dee7;
|
||||
}
|
||||
.menu-button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font-size: 12px;
|
||||
}
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 7px 9px;
|
||||
border-bottom: 1px solid #b7c6d3;
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
}
|
||||
.toolbar label {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.toolbar input[type="text"],
|
||||
#project-name {
|
||||
width: 210px;
|
||||
}
|
||||
.toolbar i {
|
||||
border-left: 1px solid #bac9d6;
|
||||
height: 24px;
|
||||
margin: 0 6px;
|
||||
}
|
||||
.work-tabs {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
background: #dbe4ed;
|
||||
padding: 4px 6px 0;
|
||||
border-bottom: 1px solid #8fa9be;
|
||||
overflow: auto;
|
||||
flex: none;
|
||||
}
|
||||
.work-tabs button {
|
||||
background: #e8edf3;
|
||||
border: 1px solid #b8c8d5;
|
||||
border-bottom: 0;
|
||||
padding: 7px 20px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.work-tabs .active {
|
||||
background: #fff;
|
||||
color: #1a547e;
|
||||
font-weight: bold;
|
||||
border-color: #8fa9be;
|
||||
box-shadow: inset 0 3px #4e8cb9;
|
||||
}
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
margin: 7px;
|
||||
border: 1px solid #afc0cd;
|
||||
background: #fff;
|
||||
}
|
||||
.work-title {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
padding: 7px 10px;
|
||||
background: #dce8f2;
|
||||
border-bottom: 1px solid #b6c7d6;
|
||||
flex: none;
|
||||
}
|
||||
.work-title b {
|
||||
font-size: 13px;
|
||||
color: #1b5279;
|
||||
}
|
||||
.work-title span {
|
||||
color: #688094;
|
||||
font-size: 11px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.row-tools {
|
||||
padding: 5px 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: #f1f5f8;
|
||||
border-bottom: 1px solid #c5d2dc;
|
||||
flex: none;
|
||||
}
|
||||
.row-tools input[type="search"] {
|
||||
width: 230px;
|
||||
margin-left: 14px;
|
||||
}
|
||||
#paging {
|
||||
display: flex;
|
||||
gap: 7px;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
color: #708393;
|
||||
font-size: 11px;
|
||||
}
|
||||
#paging button {
|
||||
padding: 2px 9px;
|
||||
}
|
||||
.work-area {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
#group-pane {
|
||||
width: 220px;
|
||||
flex: none;
|
||||
border-right: 3px solid #bdcbd7;
|
||||
overflow: auto;
|
||||
background: #f6f8fa;
|
||||
}
|
||||
#group-pane h2 {
|
||||
font-size: 12px;
|
||||
background: #e6edf3;
|
||||
padding: 8px 10px;
|
||||
margin: 0;
|
||||
color: #516e85;
|
||||
border-bottom: 1px solid #c2d1dd;
|
||||
}
|
||||
#group-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
#group-list button {
|
||||
border: 0;
|
||||
border-bottom: 1px solid #d4dfe8;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
}
|
||||
#group-list button:hover {
|
||||
background: #e6f1fa;
|
||||
}
|
||||
#group-list .active {
|
||||
background: #cde5f7;
|
||||
border-left: 3px solid #3278aa;
|
||||
}
|
||||
#group-list b {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
max-height: 37px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#group-list small {
|
||||
display: block;
|
||||
color: #7690a3;
|
||||
margin-top: 3px;
|
||||
}
|
||||
#group-list span {
|
||||
display: block;
|
||||
text-align: right;
|
||||
color: #24577c;
|
||||
margin-top: 3px;
|
||||
}
|
||||
#work-content {
|
||||
overflow: auto;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
background: #fff;
|
||||
}
|
||||
.sheet {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
min-width: 100%;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.sheet th,
|
||||
.sheet td {
|
||||
border-right: 1px solid #d2dde5;
|
||||
border-bottom: 1px solid #d2dde5;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.sheet thead th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 3;
|
||||
background: linear-gradient(#edf3f8, #dce6ee);
|
||||
color: #3c5a70;
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
padding: 8px 5px;
|
||||
min-width: 87px;
|
||||
}
|
||||
.sheet td {
|
||||
height: 29px;
|
||||
background: #fff;
|
||||
min-width: 87px;
|
||||
}
|
||||
.sheet tr:nth-child(even) td {
|
||||
background: #fafcfd;
|
||||
}
|
||||
.sheet input,
|
||||
.sheet select,
|
||||
.sheet textarea {
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding: 4px 6px;
|
||||
min-width: 85px;
|
||||
}
|
||||
.sheet input[type="number"] {
|
||||
text-align: right;
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
.sheet input::-webkit-inner-spin-button {
|
||||
appearance: none;
|
||||
}
|
||||
.sheet .row-number {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
background: #e8eff5 !important;
|
||||
min-width: 55px;
|
||||
max-width: 55px;
|
||||
text-align: center;
|
||||
color: #647e91;
|
||||
font-size: 10px;
|
||||
}
|
||||
.sheet .row-number input {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
min-width: 0;
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
margin: 0 4px 0 0;
|
||||
}
|
||||
.sheet .row-number label {
|
||||
padding: 7px 4px;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
.sheet tr.selected td {
|
||||
background: #e1f0fb;
|
||||
}
|
||||
.sheet tr.level td {
|
||||
background: #eaf0f6;
|
||||
font-weight: bold;
|
||||
}
|
||||
.sheet tr.heading td {
|
||||
background: #e3edf5;
|
||||
font-weight: bold;
|
||||
}
|
||||
.sheet .col-Name {
|
||||
min-width: 210px;
|
||||
}
|
||||
.sheet .col-Size {
|
||||
min-width: 185px;
|
||||
}
|
||||
.sheet .col-Code {
|
||||
min-width: 115px;
|
||||
}
|
||||
.sheet .col-LineData {
|
||||
min-width: 650px;
|
||||
position: relative;
|
||||
}
|
||||
.sheet .col-LineData textarea {
|
||||
min-width: 620px;
|
||||
height: 31px;
|
||||
resize: vertical;
|
||||
white-space: pre;
|
||||
font-family: "Malgun Gothic", monospace;
|
||||
font-weight: normal;
|
||||
padding-right: 22px;
|
||||
}
|
||||
.sheet .col-LineData .tiny {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 4px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
.sheet .col-VSusic {
|
||||
min-width: 250px;
|
||||
}
|
||||
.sheet .col-VSusic input {
|
||||
min-width: 250px;
|
||||
}
|
||||
.sheet .col-Level,
|
||||
.sheet .col-Index {
|
||||
min-width: 50px;
|
||||
}
|
||||
.sheet .col-Level input,
|
||||
.sheet .col-Index input {
|
||||
min-width: 50px;
|
||||
}
|
||||
#messages {
|
||||
background: #fff1df;
|
||||
border-bottom: 1px solid #ead5ae;
|
||||
padding: 9px;
|
||||
color: #9a4c15;
|
||||
flex: none;
|
||||
max-height: 70px;
|
||||
overflow: auto;
|
||||
}
|
||||
.totals {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
background: #e3edf5;
|
||||
border-top: 1px solid #b5c8d7;
|
||||
flex: none;
|
||||
overflow: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.totals span {
|
||||
padding: 9px 15px;
|
||||
border-left: 1px solid #c0d0dd;
|
||||
color: #617b8f;
|
||||
}
|
||||
.totals b {
|
||||
color: #183e5b;
|
||||
margin-left: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.totals span:last-child {
|
||||
background: #d4e6f3;
|
||||
}
|
||||
footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 24px;
|
||||
padding: 0 9px;
|
||||
background: #f0f4f7;
|
||||
color: #668093;
|
||||
font-size: 10px;
|
||||
flex: none;
|
||||
}
|
||||
dialog {
|
||||
border: 1px solid #8da9bf;
|
||||
padding: 0;
|
||||
max-width: 900px;
|
||||
min-width: 380px;
|
||||
max-height: 85vh;
|
||||
background: #fff;
|
||||
color: #203345;
|
||||
box-shadow: 0 15px 60px #1239;
|
||||
}
|
||||
dialog::backdrop {
|
||||
background: #17344c55;
|
||||
}
|
||||
.dialog-head {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #dbe9f4;
|
||||
padding: 9px 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 30px;
|
||||
align-items: center;
|
||||
z-index: 2;
|
||||
}
|
||||
.dialog-head button {
|
||||
padding: 0 7px;
|
||||
font-size: 19px;
|
||||
}
|
||||
#dialog-content {
|
||||
padding: 18px;
|
||||
overflow: auto;
|
||||
}
|
||||
#dialog-content table {
|
||||
border-collapse: collapse;
|
||||
min-width: 400px;
|
||||
}
|
||||
#dialog-content td,
|
||||
#dialog-content th {
|
||||
border: 1px solid #c8d5df;
|
||||
padding: 7px 10px;
|
||||
}
|
||||
#dialog-content textarea {
|
||||
width: 100%;
|
||||
min-width: 550px;
|
||||
font-family: monospace;
|
||||
white-space: pre;
|
||||
}
|
||||
.form-fields {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.form-fields label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 25px;
|
||||
}
|
||||
.form-fields input,
|
||||
.form-fields select {
|
||||
width: 220px;
|
||||
padding: 6px;
|
||||
}
|
||||
.marker-tools {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.business-tools {
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
background: #edf3f8;
|
||||
border-bottom: 1px solid #c9d6df;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.business-tools b {
|
||||
margin-right: 15px;
|
||||
}
|
||||
.business-note {
|
||||
padding: 12px 16px;
|
||||
color: #627e92;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.empty {
|
||||
padding: 30px;
|
||||
color: #7c90a0;
|
||||
}
|
||||
.muted {
|
||||
color: #7a90a0;
|
||||
padding: 10px;
|
||||
}
|
||||
.business-tools input[type="checkbox"] {
|
||||
width: auto;
|
||||
}
|
||||
.business-tools select {
|
||||
padding: 5px;
|
||||
}
|
||||
.error-row {
|
||||
background: #fff1e5;
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.toolbar label {
|
||||
margin-left: 4px;
|
||||
}
|
||||
.work-tabs button {
|
||||
padding: 7px 13px;
|
||||
}
|
||||
#group-pane {
|
||||
width: 150px;
|
||||
}
|
||||
.totals {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.totals span {
|
||||
padding: 8px;
|
||||
}
|
||||
.work-title span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media print {
|
||||
header,
|
||||
footer,
|
||||
.totals,
|
||||
.row-tools,
|
||||
#group-pane,
|
||||
.work-title,
|
||||
#messages,
|
||||
button {
|
||||
display: none !important;
|
||||
}
|
||||
body,
|
||||
main,
|
||||
.work-area,
|
||||
#work-content {
|
||||
display: block;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.sheet thead th {
|
||||
position: static;
|
||||
}
|
||||
.sheet .row-number {
|
||||
position: static;
|
||||
}
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border: 0;
|
||||
appearance: none;
|
||||
}
|
||||
.sheet {
|
||||
font-size: 9px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user