50 lines
2.9 KiB
CSS
50 lines
2.9 KiB
CSS
#mainContent {display: flex;}
|
|
#mainContent .side {flex: 0 0 25%; overflow-x: hidden; padding-right: 4px;}
|
|
#mainContent .main {flex: 0 0 75%; overflow-x: hidden;}
|
|
|
|
#featureBar .nav-feature li:last-child {padding-left: 4px; position: relative;}
|
|
#featureBar .nav-feature li:last-child:before {content: ""; position: absolute; left: 2px; top: 5px; right: 0; bottom: 5px; width: 1px; background-color: var(--color-slate-300);}
|
|
|
|
.main, .side {border-radius: 2px;}
|
|
.side .title {height: 48px; padding-left: 16px; margin-bottom: 8px;}
|
|
.side .name-color {color: var(--color-slate-600);}
|
|
.side .metric-tree {padding-left: 24px; height: calc(100vh - 180px); overflow-y: scroll;}
|
|
.side .metric-item {padding-bottom: 12px;}
|
|
.side .metric-item a {color: var(--color-inherit);}
|
|
.side .metric-item:hover, .side .checkbox-primary:hover {color: var(--color-primary-500);}
|
|
.side .metric-current {color: var(--color-primary-600);}
|
|
|
|
.side .check-list-metric {padding-top: 0; padding-bottom: 12px; gap: 12px;}
|
|
|
|
.main .metric-name {height: 48px; padding-left: 16px; margin-bottom: 8px; border-bottom: 1px solid var(--color-slate-300);}
|
|
.main .flex-between {justify-content: space-between;}
|
|
.main .flex-start {justify-content: flex-start;}
|
|
.main .metric-name-weight {font-weight: 600; font-size: 0.9rem;}
|
|
.main .details {position: relative; margin-right: 4px;}
|
|
.main .details:after {content: ""; position: absolute; top: 5px; right: -2px; bottom: 5px; width: 1px; background-color: var(--color-slate-300);}
|
|
.main .chart-line-margin {margin-right: 16px;}
|
|
.main .table-and-chart {height: calc(100vh - 180px); display: flex;}
|
|
|
|
.table-and-chart .table-side {flex: 0 0 40%; overflow-x: hidden; padding-left: 16px; padding-top: 8px; padding-bottom: 16px; padding-right: 2px;}
|
|
.table-and-chart .chart-side {flex: 0 0 60%;}
|
|
.table-and-chart .chart-center {display:flex; justify-content: center; align-items: center;}
|
|
|
|
.icon-18 {font-size: 18px;}
|
|
.primary-hover-500 {color: var(--color-slate-800)}
|
|
.primary-hover-500:hover {color: var(--color-primary-500);}
|
|
|
|
.main .checked-content {transition: height 0.5s ease; height: 48px; padding-left: 8px; border-bottom: 1px solid var(--color-slate-300);}
|
|
.main .checked-label-content {height: 48px; padding-top: 3px; display: flex; flex-wrap: wrap;}
|
|
.main .checked-label-right {height: 48px; padding-right: 12px; justify-content: flex-end; display: flex; align-items: center;}
|
|
.main .checked-tip {padding-right: 6px; position: relative;}
|
|
.main .checked-tip:before {content: ""; position: absolute; top: 0px; left: -15px; bottom: 0px; width: 1px; background-color: var(--color-slate-300);}
|
|
.main .gray-pale {margin: 7px 4px; padding: 13px 12px; white-space: nowrap;}
|
|
.main .gray-pale-div {overflow: hidden;}
|
|
.main .gray-pale-withdelete {padding-right: 1px;}
|
|
|
|
.visibility-hidden {visibility: hidden;}
|
|
.gray-hidden {opacity: 0;}
|
|
.gray-visible {opacity: 1;}
|
|
.dropdown-icon {transform: rotate(90deg); transition: transform 0.3s ease;}
|
|
.dropdown-icon.rotate {transform: rotate(270deg); }
|