Refine DICOM UPP relation loading

数据库Web可视化/static/styles.css

@@ -88,6 +88,37 @@ button {
   gap: 10px;
 }
 
+.top-loading {
+  position: fixed;
+  top: 66px;
+  left: 0;
+  right: 0;
+  z-index: 15;
+  height: 3px;
+  overflow: hidden;
+  background: rgba(31, 44, 60, 0.72);
+}
+
+.top-loading span {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 36%;
+  border-radius: 999px;
+  background: linear-gradient(90deg, transparent, var(--cyan), var(--blue), transparent);
+  animation: loading-sweep 1.1s ease-in-out infinite;
+}
+
+@keyframes loading-sweep {
+  from {
+    transform: translateX(-110%);
+  }
+
+  to {
+    transform: translateX(310%);
+  }
+}
+
 .hidden {
   display: none !important;
 }
@@ -279,13 +310,17 @@ button {
 }
 
 .filter-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  display: flex;
   gap: 7px;
+  overflow-x: auto;
+  padding-bottom: 4px;
   margin-top: 10px;
+  scrollbar-width: thin;
 }
 
 .filter-grid button {
+  min-width: 112px;
+  flex: 0 0 auto;
   height: 30px;
   border: 1px solid var(--line);
   border-radius: 7px;
@@ -304,6 +339,26 @@ button {
   height: 100%;
   overflow: auto;
   padding-right: 3px;
+  padding-bottom: 34px;
+}
+
+.list-panel {
+  position: relative;
+}
+
+.list-loading {
+  position: absolute;
+  right: 14px;
+  bottom: 10px;
+  left: 14px;
+  height: 26px;
+  display: grid;
+  place-items: center;
+  border: 1px solid rgba(25, 212, 194, 0.32);
+  border-radius: 999px;
+  color: #baf8ee;
+  background: rgba(7, 10, 15, 0.88);
+  font-size: 12px;
 }
 
 .relation-card {
@@ -342,11 +397,28 @@ button {
   font-size: 12px;
 }
 
-.card-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
+.card-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(112px, 0.72fr);
+  gap: 10px;
+  align-items: start;
+}
+
+.card-main,
+.card-side {
+  min-width: 0;
+  display: grid;
+  gap: 7px;
+}
+
+.card-side {
+  justify-items: end;
+}
+
+.important-tags {
+  max-width: 100%;
+  justify-content: flex-end;
+  flex-wrap: wrap;
 }
 
 .mini-badge {
@@ -402,12 +474,16 @@ button {
 }
 
 .metrics {
-  display: grid;
-  grid-template-columns: repeat(5, minmax(116px, 1fr));
+  display: flex;
   gap: 10px;
+  overflow-x: auto;
+  padding-bottom: 2px;
+  scrollbar-width: thin;
 }
 
 .metric {
+  min-width: 140px;
+  flex: 1 0 140px;
   min-height: 76px;
   padding: 13px;
   border: 1px solid var(--line);