@chenchaolong/plugin-trade-compliance-workbench 1.0.18 → 1.0.20

package/dist/lib/remote-ui/pages/analytics-prototype.css

@@ -0,0 +1,307 @@
+.tcw-analytics-prototype-shell {
+  display: grid;
+  gap: 10px;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  margin: 0;
+  color: #172033;
+  background: #fefefe;
+  font-size: 10px;
+  letter-spacing: 0;
+}
+
+.tcw-analytics-prototype-close {
+  display: inline-flex;
+  min-height: 34px;
+  align-items: center;
+  justify-self: end;
+  padding: 0 12px;
+  border: 1px solid #d3dbe7;
+  border-radius: 3px;
+  color: #34435a;
+  background: #fff;
+}
+
+.tcw-analytics-prototype-board {
+  display: grid;
+  grid-template-areas: "home filter" "drill export" "bottom bottom";
+  grid-template-columns: minmax(0, 2.08fr) minmax(0, 1fr);
+  grid-template-rows: 220px 170px 260px;
+  row-gap: 8px;
+  column-gap: 18px;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
+  padding: 0 10px 4px;
+  background: #fefefe;
+}
+
+.tcw-analytics-prototype-state {
+  min-width: 0;
+  min-height: 0;
+  max-width: 100%;
+}
+
+.tcw-analytics-prototype-label {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  min-height: 30px;
+  color: #151e2e;
+  font-size: 12px;
+}
+
+.tcw-analytics-prototype-index {
+  display: inline-grid;
+  width: 18px;
+  height: 18px;
+  flex: 0 0 18px;
+  place-items: center;
+  border-radius: 50%;
+  color: #fff;
+  background: #1769ff;
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.tcw-analytics-prototype-card,
+.tcw-analytics-prototype-home,
+.tcw-analytics-prototype-drill {
+  height: calc(100% - 30px);
+  box-sizing: border-box;
+  overflow: hidden;
+  border: 1px solid #cfd8e5;
+  border-radius: 3px;
+  background: #fefefe;
+  box-shadow: 0 2px 8px rgba(27, 44, 72, .06);
+}
+
+.tcw-analytics-prototype-card {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+}
+
+.tcw-analytics-prototype-card > header {
+  display: flex;
+  min-height: 38px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 14px;
+  border-bottom: 1px solid #dce3ed;
+  font-size: 14px;
+}
+
+.tcw-analytics-prototype-card > footer {
+  display: flex;
+  min-height: 40px;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding: 0 14px;
+  border-top: 1px solid #e1e6ed;
+}
+
+.tcw-analytics-prototype-card button,
+.tcw-analytics-prototype-drill button {
+  min-width: 0;
+  max-width: 100%;
+  min-height: 25px;
+  box-sizing: border-box;
+  padding: 4px 9px;
+  border: 1px solid #d3dbe7;
+  border-radius: 3px;
+  color: #34435a;
+  background: #fff;
+}
+
+.tcw-analytics-prototype-card button i,
+.tcw-analytics-prototype-drill button i,
+.tcw-analytics-prototype-close i { margin-right: 4px; }
+.tcw-analytics-prototype-card button.is-primary { border-color: #1769ff; color: #fff; background: #1769ff; }
+.tcw-analytics-prototype-card button.is-danger { border-color: #e83b43; color: #fff; background: #e83b43; }
+
+.tcw-analytics-prototype-home { padding: 8px 10px; background: #f9fbfd; }
+.tcw-analytics-prototype-home > header { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 7px; margin-bottom: 6px; font-size: 12px; }
+.tcw-analytics-prototype-home > header > i { color: #1769ff; font-size: 20px; }
+.tcw-analytics-prototype-home > header > span { margin-left: 30px; font-weight: 700; }
+.tcw-analytics-prototype-home time { padding: 7px 10px; border: 1px solid #dce3ed; border-radius: 3px; background: #fff; }
+.tcw-analytics-prototype-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
+.tcw-analytics-prototype-metrics article { display: grid; gap: 3px; min-height: 45px; padding: 7px; border: 1px solid #dce3ed; border-radius: 4px; background: #fff; }
+.tcw-analytics-prototype-metrics article > span { color: #647188; }
+.tcw-analytics-prototype-metrics article > strong { font-size: 17px; }
+.tcw-analytics-prototype-metrics article > strong.is-risk { color: #f04444; }
+.tcw-analytics-prototype-metrics article small b { color: #16a365; }
+.tcw-analytics-prototype-charts { display: grid; grid-template-columns: 1.65fr 1fr; grid-template-rows: 62px 62px; gap: 6px; margin-top: 6px; }
+.tcw-analytics-prototype-charts > section { position: relative; overflow: hidden; padding: 7px; border: 1px solid #dce3ed; border-radius: 4px; background: #fff; }
+.tcw-prototype-line-chart { position: relative; height: 36px; margin-top: 3px; background: repeating-linear-gradient(to bottom, #fff 0 12px, #e8edf4 13px); }
+.tcw-prototype-line-chart i { position: absolute; inset: 20px 5px auto; height: 2px; background: #559bf7; transform: none; }
+.tcw-prototype-line-chart i:nth-child(2) { top: 55px; background: #f7bb5c; transform: none; }
+.tcw-prototype-line-chart i:nth-child(3) { top: 80px; background: #56b693; transform: none; }
+.tcw-prototype-donut { display: grid; width: 46px; height: 46px; margin: 4px auto 0; place-content: center; border-radius: 50%; background: radial-gradient(circle, #fff 0 48%, transparent 49%), conic-gradient(#5d9df5 0 72%, #f8c251 72% 85%, #f16666 85%); text-align: center; }
+.tcw-prototype-donut b { font-size: 14px; }
+.tcw-prototype-donut span { color: #647188; }
+.tcw-prototype-bars { display: flex; height: 36px; align-items: end; justify-content: space-around; gap: 8px; padding: 4px 10px 0; }
+.tcw-prototype-bars i { width: 28px; background: #5b9df4; }
+.tcw-analytics-prototype-charts table,
+.tcw-analytics-prototype-drill table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 9px; }
+.tcw-analytics-prototype-charts th,
+.tcw-analytics-prototype-charts td,
+.tcw-analytics-prototype-drill th,
+.tcw-analytics-prototype-drill td { padding: 6px; border-bottom: 1px solid #e7ebf1; text-align: left; }
+
+.tcw-analytics-prototype-form,
+.tcw-analytics-prototype-export { display: grid; min-width: 0; max-width: 100%; box-sizing: border-box; align-content: start; gap: 8px; padding: 10px 12px; }
+.tcw-analytics-prototype-field { display: grid; grid-template-columns: 85px minmax(0, 1fr); align-items: center; gap: 10px; }
+.tcw-analytics-prototype-field > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
+.tcw-analytics-prototype-field > span:first-child { color: #3f4d62; font-weight: 600; }
+.tcw-analytics-prototype-field :is(input, select, textarea) { width: 100%; min-width: 0; max-width: 100%; min-height: 26px; box-sizing: border-box; padding: 4px 8px; border: 1px solid #d3dce8; border-radius: 3px; color: #526177; background: #fff; font: inherit; }
+.tcw-analytics-prototype-field textarea { min-height: 42px; resize: none; }
+.tcw-prototype-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-bottom: 7px; }
+.tcw-prototype-quick button { width: 100%; padding-inline: 3px; overflow-wrap: anywhere; }
+.tcw-prototype-quick button.is-active,
+.tcw-prototype-chart-types button.is-active { border-color: #1769ff; color: #1769ff; background: #eef5ff; }
+.tcw-prototype-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
+.tcw-prototype-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; min-width: 0; }
+
+.tcw-analytics-prototype-drill { padding: 8px; }
+.tcw-analytics-prototype-drill > header { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
+.tcw-prototype-drill-filters { display: grid; grid-template-columns: minmax(0, auto) minmax(0, auto) minmax(0, 1fr); align-items: center; gap: 10px; margin-bottom: 10px; }
+.tcw-prototype-drill-filters span { padding: 7px 9px; border: 1px solid #dbe3ed; }
+.tcw-prototype-drill-filters button { justify-self: end; }
+.tcw-analytics-prototype-drill .tcw-analytics-prototype-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 10px; }
+.tcw-analytics-prototype-drill .tcw-analytics-prototype-metrics article { min-height: 42px; padding: 6px; }
+.tcw-analytics-prototype-drill .tcw-analytics-prototype-metrics article > strong { font-size: 15px; }
+.tcw-analytics-prototype-drill a { color: #1769ff; }
+.tcw-prototype-export-list { display: grid; max-height: 185px; gap: 8px; padding: 10px; overflow: hidden; border: 1px solid #dce3ed; }
+
+.tcw-analytics-prototype-bottom {
+  display: grid;
+  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, .92fr) minmax(0, 1fr);
+  gap: 10px;
+  min-width: 0;
+}
+.tcw-analytics-prototype-bottom .tcw-analytics-prototype-label { min-height: 27px; }
+.tcw-analytics-prototype-bottom .tcw-analytics-prototype-card { min-height: 210px; }
+.tcw-analytics-prototype-bottom .tcw-analytics-prototype-card > header { min-height: 34px; padding-inline: 10px; font-size: 11px; }
+.tcw-analytics-prototype-bottom .tcw-analytics-prototype-card > footer { min-height: 36px; padding-inline: 8px; }
+.tcw-analytics-prototype-bottom .tcw-analytics-prototype-form { gap: 5px; padding: 7px 9px; }
+.tcw-analytics-prototype-bottom .tcw-analytics-prototype-field { grid-template-columns: 58px minmax(0, 1fr); gap: 5px; }
+.tcw-prototype-chart-types { display: grid; min-width: 0; max-width: 100%; box-sizing: border-box; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
+.tcw-prototype-chart-types button { display: inline-flex; width: 100%; min-width: 0; max-width: 100%; align-items: center; justify-content: center; gap: 2px; box-sizing: border-box; padding: 4px 2px; overflow-wrap: anywhere; white-space: normal; font-size: 8px; }
+.tcw-analytics-prototype-delete { display: grid; align-content: center; justify-items: center; gap: 11px; padding: 14px; text-align: center; }
+.tcw-analytics-prototype-delete > i { color: #ef4149; font-size: 23px; }
+.tcw-analytics-prototype-delete > p { margin: 1em 0; color: inherit; font: inherit; line-height: normal; }
+.tcw-analytics-prototype-delete > b { color: #d52d35; }
+.tcw-analytics-prototype-explain { display: grid; gap: 10px; margin: 0; padding: 13px; }
+.tcw-analytics-prototype-explain div { display: grid; gap: 3px; }
+.tcw-analytics-prototype-explain dt { font-weight: 700; }
+.tcw-analytics-prototype-explain dd { margin: 0; color: #5f6d82; line-height: 1.35; }
+
+@media (max-width: 1120px) {
+  .tcw-analytics-prototype-shell {
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .tcw-analytics-prototype-board {
+    grid-template-areas: "bottom" "home" "filter" "drill" "export";
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: repeat(5, auto);
+    row-gap: 12px;
+    min-width: 0;
+  }
+
+  .tcw-analytics-prototype-card,
+  .tcw-analytics-prototype-home,
+  .tcw-analytics-prototype-drill {
+    height: auto;
+    min-height: 0;
+  }
+
+  .tcw-analytics-prototype-bottom {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 600px) {
+  .tcw-analytics-prototype-board,
+  .tcw-analytics-prototype-bottom {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .tcw-analytics-prototype-home {
+    padding: 12px;
+  }
+
+  .tcw-analytics-prototype-home > header {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .tcw-analytics-prototype-home > header > span {
+    margin-left: 0;
+    text-align: right;
+  }
+
+  .tcw-analytics-prototype-home time {
+    grid-column: 1 / -1;
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .tcw-analytics-prototype-metrics,
+  .tcw-analytics-prototype-drill .tcw-analytics-prototype-metrics {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .tcw-analytics-prototype-charts {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: repeat(4, 155px);
+  }
+
+  .tcw-analytics-prototype-form,
+  .tcw-analytics-prototype-export {
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+
+  .tcw-analytics-prototype-field,
+  .tcw-analytics-prototype-bottom .tcw-analytics-prototype-field {
+    grid-template-columns: minmax(0, 1fr);
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+
+  .tcw-analytics-prototype-field :is(input, select, textarea) {
+    display: block;
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+
+  .tcw-prototype-quick,
+  .tcw-prototype-checks {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .tcw-prototype-drill-filters {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .tcw-prototype-drill-filters button {
+    width: 100%;
+    justify-self: stretch;
+  }
+
+  .tcw-analytics-prototype-drill table {
+    table-layout: fixed;
+    overflow-wrap: anywhere;
+  }
+}