Hugging Face's logo

Spaces:
fsanyoto
/
loopable
Running

App Files Community
loopable
File size: 4,274 Bytes
5351cc8
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
da5297e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
016c754
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5351cc8
 
 
 
016c754
 
 
 
 
 
 
5351cc8
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
.cg-dash-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.cg-ch-card {
  min-height: 240px;
  overflow: hidden;
}

.cg-ch-viz {
  flex: 1 1 150px;
  min-height: 120px;
  overflow: hidden;
}

.cg-ch-viz--kpi {
  min-height: 96px;
}

.cg-vega-frame,
.cg-vega-host,
.cg-vega-host > .vega-embed {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.cg-vega-host canvas,
.cg-vega-host svg {
  display: block;
  max-width: 100%;
}

.cg-ch-loading {
  display: grid;
  height: 100%;
  min-height: 120px;
  place-items: center;
  color: var(--lp-muted);
  font-size: var(--lp-fs-3xs);
}

/* ==========================================================================
   Wave-16 C-CHARTCAP (b) — the delta line under a KPI number.
   ==========================================================================
   Colour states direction, not judgment: green up / red down is the finance
   read `pages_sales` used, and `flat`/`off` stay muted. The refusal notes
   ("no orders yet") wear the muted tone too — they are honesty, not alarm. */
.cg-ch-kpidelta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 2px 8px 6px;
  font-size: var(--lp-fs-2xs);
  font-weight: 600;
  color: var(--lp-muted);
}

.cg-ch-kpidelta.is-up {
  color: var(--lp-green-deep);
}

.cg-ch-kpidelta.is-down {
  color: var(--lp-red-deep);
}

/* ==========================================================================
   Wave-16 C-CHARTCAP (c) — the table kind.
   ==========================================================================
   A summary card, styled like the sheet: hairline rows, numbers right-aligned
   in tabular figures, the group column free to truncate. The card scrolls its
   own overflow so a tall table never stretches the board row. */
.cg-ch-table {
  height: 100%;
  overflow: auto;
}

.cg-ch-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--lp-fs-2xs);
}

.cg-ch-table th,
.cg-ch-table td {
  padding: 3px 8px;
  text-align: left;
  border-bottom: 1px solid var(--lp-line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.cg-ch-table th {
  position: sticky;
  top: 0;
  background: var(--lp-surface);
  color: var(--lp-muted);
  font-weight: 600;
  font-size: var(--lp-fs-3xs);
}

.cg-ch-table .cg-ch-td-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Wave 14 items 18 + R7 — the chart editor's label column.
   ==========================================================================
   The base rule pins every editor label to `flex: 0 0 54px` (index.css:3917),
   which was sized for "Measure" / "Of" / "By". Item 18 replaces those with
   words a non-analyst can act on — "Which number", "Grouped by", "Break down
   by", "How far back", "Bottom axis label" — and every one of them WRAPS to two
   lines in 54px, which is exactly the failure R7 is a sweep for: a wrapped
   label breaks the row rhythm the whole pane is read by.

   Overridden from HERE rather than at the base rule because `index.css` is
   another session's fence this wave. `.cg-ch-cfgbody .cg-ch-row > span` is
   (0,2,1) against the base's (0,1,1), so this wins on SPECIFICITY and never on
   bundle order — a tie decided by import sequence is not a thing to bet a
   layout on ([[loopable-nav-logo-toggle]]).

   `nowrap` is the assertion, not the width: if a future label outgrows this
   column it will overflow visibly instead of quietly reflowing, which is the
   failure mode you can see. */
.cg-ch-cfgbody .cg-ch-row > span {
  flex: 0 0 104px;
  white-space: nowrap;
}

/* The checkbox row reads left-to-right — box, then sentence — so its label is
   not a column head and must not take the column width. */
.cg-ch-cfgbody .cg-ch-check > span {
  flex: 1 1 auto;
  white-space: normal;
}

@media (max-width: 820px) {
  .cg-ch-card {
    grid-column: span 12 !important;
  }

  /* Below the card's own breakpoint the pane is narrow enough that a 104px
     label column starves the control beside it. The labels stay unwrapped and
     the row scrolls its control instead. */
  .cg-ch-cfgbody .cg-ch-row > span {
    flex-basis: 88px;
  }
}