refine Semi UI track replay workspace
This commit is contained in:
lingniu
@@ -18,6 +18,571 @@
|
||||
padding: 8px 14px;
|
||||
}
|
||||
|
||||
/* Semi UI trajectory replay workspace: one evidence rail, one map overlay and
|
||||
* one compact playback surface. */
|
||||
.v2-track-page {
|
||||
grid-template-columns: 326px minmax(0, 1fr);
|
||||
background: #edf2f7;
|
||||
}
|
||||
|
||||
.v2-track-rail {
|
||||
border-right: 0;
|
||||
background: #f4f7fb;
|
||||
padding: 8px;
|
||||
box-shadow: inset -1px 0 #dfe6ef;
|
||||
}
|
||||
|
||||
.v2-track-rail-shell.semi-card {
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
border: 1px solid #dfe6ef;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
box-shadow: 0 8px 24px rgba(27, 46, 72, .06);
|
||||
}
|
||||
|
||||
.v2-track-rail-shell > .semi-card-body {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.v2-track-query-panel {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex: 0 0 auto;
|
||||
overflow: visible;
|
||||
border-bottom: 1px solid #e3e9f1;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.v2-track-query-panel .v2-track-query-header {
|
||||
min-height: 58px;
|
||||
border-bottom: 0;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.v2-track-query-panel .v2-workspace-panel-copy > h5.semi-typography {
|
||||
color: #26384f;
|
||||
font-size: 15px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.v2-track-query-panel .v2-workspace-panel-copy > .semi-typography {
|
||||
color: #8491a2;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.v2-track-query-panel .v2-workspace-panel-actions {
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.v2-track-query-panel .v2-track-query-toggle.semi-button {
|
||||
width: auto;
|
||||
min-width: 78px;
|
||||
height: 32px;
|
||||
justify-content: center;
|
||||
border-radius: 7px;
|
||||
padding: 0 8px;
|
||||
color: #526780;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.v2-track-query-panel:not(.is-collapsed) .v2-track-query-toggle .semi-icon {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.v2-track-query-panel .v2-track-rail-hide.semi-button {
|
||||
width: 32px;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 7px;
|
||||
color: #76869a;
|
||||
}
|
||||
|
||||
.v2-track-query-panel .v2-track-query-summary {
|
||||
min-height: 56px;
|
||||
padding: 7px 12px 11px;
|
||||
background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
|
||||
}
|
||||
|
||||
.v2-track-query-panel .v2-track-query-summary strong {
|
||||
color: #30445d;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.v2-track-query-panel .v2-track-query-summary small,
|
||||
.v2-track-query-panel .v2-track-query-summary .semi-tag {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.v2-track-query-panel .v2-track-query {
|
||||
border-bottom: 0;
|
||||
padding: 10px 12px 13px;
|
||||
}
|
||||
|
||||
.v2-track-rail-result {
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.v2-track-result-header {
|
||||
min-height: 62px;
|
||||
background: #fbfcfe;
|
||||
padding: 9px 12px;
|
||||
}
|
||||
|
||||
.v2-track-result-header .v2-workspace-panel-copy > h5.semi-typography {
|
||||
color: #25384f;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.v2-track-result-header .v2-workspace-panel-copy > .semi-typography {
|
||||
color: #8592a3;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.v2-track-result-header .v2-workspace-panel-meta .semi-tag {
|
||||
border-radius: 999px;
|
||||
padding-inline: 8px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.v2-track-rail-tabs {
|
||||
height: 42px;
|
||||
flex-basis: 42px;
|
||||
border-block: 1px solid #e3e9f1;
|
||||
border-bottom-color: #dfe6ef;
|
||||
background: #fff;
|
||||
padding-inline: 7px;
|
||||
}
|
||||
|
||||
.v2-track-rail-tabs > .semi-button {
|
||||
height: 40px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.v2-track-rail-scroll {
|
||||
background: #f6f8fb;
|
||||
scrollbar-color: #c8d3e0 transparent;
|
||||
}
|
||||
|
||||
.v2-track-overview-panel {
|
||||
gap: 7px;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.v2-track-overview-section {
|
||||
overflow: hidden;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 8px rgba(32, 54, 82, .035);
|
||||
}
|
||||
|
||||
.v2-track-overview-section .v2-workspace-panel-header {
|
||||
border-bottom: 1px solid #edf1f5;
|
||||
background: #fbfcfe;
|
||||
}
|
||||
|
||||
.v2-track-overview-section .v2-workspace-panel-actions {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.v2-track-overview-section .v2-workspace-panel-header .semi-tag {
|
||||
flex: 0 0 auto;
|
||||
border-radius: 999px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.v2-track-quality-card.is-good {
|
||||
background: #f7fcf9;
|
||||
}
|
||||
|
||||
.v2-track-quality-card.is-warning {
|
||||
background: #fffaf2;
|
||||
}
|
||||
|
||||
.v2-track-quality-card.is-good .v2-workspace-panel-header {
|
||||
background: #f3fbf7;
|
||||
}
|
||||
|
||||
.v2-track-quality-card.is-warning .v2-workspace-panel-header {
|
||||
background: #fff8ed;
|
||||
}
|
||||
|
||||
.v2-track-stage {
|
||||
background: #e7edf4;
|
||||
}
|
||||
|
||||
.v2-track-stage-tools {
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
gap: 2px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(211, 221, 233, .95);
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, .95);
|
||||
padding: 3px;
|
||||
box-shadow: 0 10px 28px rgba(27, 45, 69, .12);
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
.v2-track-stage-tools > .semi-button {
|
||||
height: 34px;
|
||||
border: 0;
|
||||
border-radius: 7px;
|
||||
background: transparent;
|
||||
padding-inline: 10px;
|
||||
color: #5f7187;
|
||||
box-shadow: none;
|
||||
backdrop-filter: none;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.v2-track-stage-tools > .semi-button:hover {
|
||||
background: #f2f6fb;
|
||||
}
|
||||
|
||||
.v2-track-stage-tools > .semi-button.is-active {
|
||||
border: 0;
|
||||
background: #eaf2ff;
|
||||
color: var(--v2-blue);
|
||||
}
|
||||
|
||||
.v2-track-current-card.semi-card {
|
||||
top: 14px;
|
||||
left: 14px;
|
||||
width: min(360px, calc(100% - 330px));
|
||||
min-width: 310px;
|
||||
border: 1px solid rgba(210, 221, 234, .97);
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, .97);
|
||||
box-shadow: 0 14px 36px rgba(27, 46, 72, .15);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.v2-track-current-card .v2-workspace-panel-header {
|
||||
min-height: 52px;
|
||||
padding: 8px 11px;
|
||||
}
|
||||
|
||||
.v2-track-current-card .v2-workspace-panel-meta .semi-tag {
|
||||
min-width: 46px;
|
||||
justify-content: center;
|
||||
border-radius: 999px;
|
||||
padding-inline: 8px;
|
||||
font-size: 10px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.v2-track-current-card > .semi-card-body > .v2-track-current-metrics {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
border-block: 1px solid #e5ebf2;
|
||||
}
|
||||
|
||||
.v2-track-current-card > .semi-card-body > .v2-track-current-metrics > span {
|
||||
min-width: 0;
|
||||
padding: 7px 11px;
|
||||
}
|
||||
|
||||
.v2-track-current-card > .semi-card-body > .v2-track-current-metrics > span + span {
|
||||
border-left: 1px solid #e5ebf2;
|
||||
}
|
||||
|
||||
.v2-track-current-card > .semi-card-body > .v2-track-current-metrics small {
|
||||
color: #8491a2;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.v2-track-current-card > .semi-card-body > .v2-track-current-metrics strong {
|
||||
margin-top: 4px;
|
||||
color: #25384f;
|
||||
font-size: 12px;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.v2-track-current-card > .semi-card-body > .v2-track-current-source {
|
||||
display: flex;
|
||||
min-height: 34px;
|
||||
grid-template-columns: none;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #e8edf3;
|
||||
padding: 5px 10px;
|
||||
color: #66778c;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.v2-track-current-source .semi-tag {
|
||||
flex: 0 0 auto;
|
||||
border-radius: 6px;
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.v2-track-current-card > .semi-card-body > .v2-track-current-source > span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v2-track-current-source > span:last-child {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.v2-track-current-card > .semi-card-body > .v2-track-current-coverage {
|
||||
display: grid;
|
||||
min-height: 42px;
|
||||
grid-template-columns: 7px minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #e8edf3;
|
||||
padding: 7px 10px;
|
||||
}
|
||||
|
||||
.v2-track-current-coverage > i {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: #18a86b;
|
||||
box-shadow: 0 0 0 4px rgba(24, 168, 107, .1);
|
||||
}
|
||||
|
||||
.v2-track-current-coverage.is-warning > i {
|
||||
background: #eea33a;
|
||||
box-shadow: 0 0 0 4px rgba(238, 163, 58, .11);
|
||||
}
|
||||
|
||||
.v2-track-current-card > .semi-card-body > .v2-track-current-coverage > span {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 2px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.v2-track-current-coverage strong,
|
||||
.v2-track-current-coverage small {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v2-track-current-coverage strong {
|
||||
color: #34475e;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.v2-track-current-coverage small {
|
||||
color: #8795a8;
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.v2-track-current-coverage em {
|
||||
color: #6d7e92;
|
||||
font-size: 8px;
|
||||
font-style: normal;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.v2-track-current-card > .semi-card-body > p {
|
||||
min-height: 34px;
|
||||
padding: 8px 10px;
|
||||
color: #52657b;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.v2-track-playback-dock.semi-card {
|
||||
min-height: 96px;
|
||||
border-top-color: rgba(205, 216, 229, .98);
|
||||
background: rgba(255, 255, 255, .97);
|
||||
box-shadow: 0 -10px 30px rgba(24, 41, 63, .12);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.v2-track-playback-dock > .semi-card-body {
|
||||
min-height: 96px;
|
||||
grid-template-columns: 136px minmax(220px, 1fr) auto;
|
||||
gap: 14px;
|
||||
padding: 10px 14px !important;
|
||||
}
|
||||
|
||||
.v2-track-dock-summary strong {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.v2-track-dock-summary span {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.v2-track-segment-rail,
|
||||
.v2-track-segment-placeholder {
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.v2-track-progress-slider.semi-slider-wrapper {
|
||||
margin: 8px 0 4px;
|
||||
}
|
||||
|
||||
.v2-track-progress-meta {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.v2-track-dock-controls {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.v2-track-dock-controls > .semi-button {
|
||||
width: 32px;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.v2-track-dock-controls > .semi-button.is-primary {
|
||||
width: 40px;
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.v2-track-page {
|
||||
grid-template-columns: 304px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.v2-track-page.is-rail-collapsed {
|
||||
grid-template-columns: 0 minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.v2-track-current-card.semi-card {
|
||||
top: 62px;
|
||||
width: min(360px, calc(100% - 28px));
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.v2-track-page.is-rail-collapsed .v2-track-current-card.semi-card {
|
||||
top: 14px;
|
||||
width: min(360px, calc(100% - 330px));
|
||||
min-width: 310px;
|
||||
}
|
||||
|
||||
.v2-track-playback-dock > .semi-card-body {
|
||||
grid-template-columns: minmax(220px, 1fr) auto;
|
||||
}
|
||||
|
||||
.v2-track-dock-summary {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.v2-track-detail-sidesheet .v2-track-rail {
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.v2-track-detail-sidesheet .v2-track-rail-shell.semi-card {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.v2-track-query-panel .v2-track-query-header {
|
||||
min-height: 52px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.v2-track-result-header {
|
||||
min-height: 58px;
|
||||
}
|
||||
|
||||
.v2-track-stage-tools {
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.v2-track-stage-tools > .semi-button {
|
||||
width: 38px;
|
||||
min-width: 38px;
|
||||
height: 38px;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.v2-track-current-card.semi-card,
|
||||
.v2-track-page.is-rail-collapsed .v2-track-current-card.semi-card {
|
||||
top: auto;
|
||||
right: 8px;
|
||||
bottom: 110px;
|
||||
left: 8px;
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
border-radius: 11px;
|
||||
}
|
||||
|
||||
.v2-track-current-card .v2-workspace-panel-header {
|
||||
min-height: 46px;
|
||||
padding: 7px 9px;
|
||||
}
|
||||
|
||||
.v2-track-current-card > .semi-card-body > .v2-track-current-metrics > span {
|
||||
padding: 6px 9px;
|
||||
}
|
||||
|
||||
.v2-track-current-card > .semi-card-body > .v2-track-current-source {
|
||||
min-height: 31px;
|
||||
padding: 4px 9px;
|
||||
}
|
||||
|
||||
.v2-track-current-card > .semi-card-body > .v2-track-current-coverage {
|
||||
min-height: 34px;
|
||||
grid-template-columns: 7px minmax(0, 1fr) auto;
|
||||
padding: 5px 9px;
|
||||
}
|
||||
|
||||
.v2-track-current-coverage small {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.v2-track-current-card > .semi-card-body > p {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.v2-track-playback-dock.semi-card,
|
||||
.v2-track-playback-dock > .semi-card-body {
|
||||
min-height: 102px;
|
||||
}
|
||||
|
||||
.v2-track-playback-dock > .semi-card-body {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 8px;
|
||||
padding: 8px !important;
|
||||
}
|
||||
|
||||
.v2-track-rail-expand {
|
||||
bottom: calc(112px + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.v2-track-stage:has(.v2-track-current-card) .v2-track-rail-expand {
|
||||
bottom: calc(252px + env(safe-area-inset-bottom));
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Semi UI admin workspace scale.
|
||||
* Access management is the visual baseline: history and alerts use the same
|
||||
|
||||
Reference in New Issue
Block a user