Adopt shared WebUI structural primitives
This commit is contained in:
@@ -1,34 +1,3 @@
|
||||
.dist-lists-page {
|
||||
position: relative;
|
||||
height: calc(100vh - 115px);
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.dist-lists-page *,
|
||||
.dist-lists-page *::before,
|
||||
.dist-lists-page *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.dist-lists-shell {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
border: var(--border-line);
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.dist-lists-sidebar,
|
||||
.dist-lists-workspace,
|
||||
.dist-lists-list-frame,
|
||||
.dist-lists-content-frame,
|
||||
.dist-lists-content {
|
||||
@@ -36,32 +5,6 @@
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.dist-lists-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
border-right: var(--border-line);
|
||||
background: var(--panel-soft);
|
||||
}
|
||||
|
||||
.dist-lists-sidebar-toolbar,
|
||||
.dist-lists-workspace-toolbar,
|
||||
.dist-lists-section-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
flex: 0 0 auto;
|
||||
border-bottom: var(--border-line);
|
||||
background: var(--panel-header);
|
||||
}
|
||||
|
||||
.dist-lists-sidebar-toolbar {
|
||||
min-height: 52px;
|
||||
padding: 8px 10px 8px 14px;
|
||||
}
|
||||
|
||||
.dist-lists-sidebar-toolbar > span,
|
||||
.dist-lists-toolbar-actions,
|
||||
.dist-lists-row-actions,
|
||||
.dist-lists-preview-actions,
|
||||
@@ -71,62 +14,11 @@
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.dist-lists-search {
|
||||
padding: 9px;
|
||||
border-bottom: var(--border-line);
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.dist-lists-search input {
|
||||
width: 100%;
|
||||
min-height: 34px;
|
||||
padding: 7px 9px;
|
||||
}
|
||||
|
||||
.dist-lists-list-frame {
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dist-lists-list {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.dist-lists-list > button {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
min-height: 56px;
|
||||
padding: 8px 9px;
|
||||
border: 0;
|
||||
border-radius: var(--radius-sm);
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.dist-lists-list > button:hover,
|
||||
.dist-lists-list > button:focus-visible {
|
||||
background: var(--primary-soft);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.dist-lists-list > button.is-selected {
|
||||
background: var(--primary-soft-strong);
|
||||
box-shadow: inset 3px 0 0 var(--accent);
|
||||
}
|
||||
|
||||
.dist-lists-list > button > span:first-child {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.dist-lists-list strong,
|
||||
.dist-lists-list small,
|
||||
.dist-lists-current-title strong,
|
||||
.dist-lists-current-title small,
|
||||
.dist-lists-source-cell strong,
|
||||
@@ -137,14 +29,12 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dist-lists-list strong,
|
||||
.dist-lists-current-title strong,
|
||||
.dist-lists-source-cell strong {
|
||||
color: var(--text-strong);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.dist-lists-list small,
|
||||
.dist-lists-current-title small,
|
||||
.dist-lists-source-cell small {
|
||||
margin-top: 3px;
|
||||
@@ -152,16 +42,8 @@
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.dist-lists-workspace {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.dist-lists-workspace-toolbar {
|
||||
min-height: 58px;
|
||||
padding: 8px 10px 8px 14px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.dist-lists-current-title {
|
||||
@@ -202,17 +84,6 @@
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.dist-lists-empty,
|
||||
.dist-lists-inline-empty {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: 110px;
|
||||
padding: 18px;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dist-lists-definition-fields {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(220px, 1.4fr) minmax(160px, 0.7fr) minmax(160px, 0.7fr);
|
||||
@@ -240,22 +111,10 @@
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.dist-lists-section {
|
||||
min-width: 0;
|
||||
margin-bottom: 14px;
|
||||
border: var(--border-line);
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.dist-lists-entry-section {
|
||||
min-height: 260px;
|
||||
}
|
||||
|
||||
.dist-lists-section-heading {
|
||||
min-height: 44px;
|
||||
padding: 7px 10px;
|
||||
}
|
||||
|
||||
.dist-lists-section-heading > span {
|
||||
min-width: 0;
|
||||
}
|
||||
@@ -323,39 +182,6 @@
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
|
||||
.dist-lists-metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(110px, 1fr));
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.dist-lists-metrics > span {
|
||||
min-height: 62px;
|
||||
padding: 9px 10px;
|
||||
border: var(--border-line);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.dist-lists-metrics small,
|
||||
.dist-lists-metrics strong {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dist-lists-metrics small {
|
||||
color: var(--muted);
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.dist-lists-metrics strong {
|
||||
margin-top: 6px;
|
||||
color: var(--text-strong);
|
||||
font-size: 15px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.dist-lists-content > .alert {
|
||||
margin: 8px 0;
|
||||
}
|
||||
@@ -475,10 +301,6 @@
|
||||
}
|
||||
|
||||
@media (max-width: 1040px) {
|
||||
.dist-lists-shell {
|
||||
grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.dist-lists-workspace-toolbar {
|
||||
align-items: flex-start;
|
||||
}
|
||||
@@ -505,20 +327,6 @@
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.dist-lists-shell {
|
||||
display: flex;
|
||||
min-height: calc(100vh - 115px);
|
||||
overflow: visible;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dist-lists-sidebar {
|
||||
min-height: 230px;
|
||||
max-height: 36vh;
|
||||
border-right: 0;
|
||||
border-bottom: var(--border-line);
|
||||
}
|
||||
|
||||
.dist-lists-workspace {
|
||||
min-height: 560px;
|
||||
}
|
||||
@@ -537,7 +345,6 @@
|
||||
|
||||
.dist-lists-definition-fields,
|
||||
.dist-lists-preview-inputs,
|
||||
.dist-lists-metrics,
|
||||
.dist-lists-channel-fieldset,
|
||||
.dist-lists-parameter-row {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
|
||||
Reference in New Issue
Block a user