diva.js 7.2.5 → 7.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,328 +0,0 @@
1
- /* App layout, canvas, and throbber styles. */
2
-
3
- :root {
4
- color-scheme: light;
5
- }
6
-
7
- * {
8
- box-sizing: border-box;
9
- }
10
-
11
- .list-reset {
12
- list-style: none;
13
- padding: 0;
14
- margin: 0;
15
- }
16
-
17
- .ui-button {
18
- background-color: transparent;
19
- border: none;
20
- padding: 0;
21
- text-align: left;
22
- cursor: pointer;
23
- color: var(--diva-text-primary);
24
- font-size: var(--diva-font-lg);
25
- }
26
-
27
- .ui-button:hover {
28
- background-color: var(--diva-surface);
29
- }
30
-
31
- .ui-card {
32
- border-radius: 6px;
33
- padding: 6px;
34
- cursor: pointer;
35
- width: 100%;
36
- }
37
-
38
- .ui-card--dark {
39
- background-color: var(--diva-dark-bg);
40
- }
41
-
42
- .diva-app {
43
- padding: 12px 24px;
44
- height: 100%;
45
- display: flex;
46
- flex-direction: column;
47
- flex: 1;
48
- min-height: 0;
49
- }
50
-
51
- .diva-app.is-fullscreen {
52
- padding: 0;
53
- min-height: 100vh;
54
- height: 100vh;
55
- }
56
-
57
- .diva-app-header {
58
- font-size: var(--diva-font-lg);
59
- font-weight: 600;
60
- margin-bottom: 8px;
61
- display: flex;
62
- align-items: center;
63
- gap: 12px;
64
- }
65
-
66
- .diva-app-title {
67
- font-size: var(--diva-font-xl);
68
- font-weight: 600;
69
- margin-bottom: 6px;
70
- text-align: left;
71
- color: var(--diva-text-primary);
72
- }
73
-
74
- .diva-app-title.is-fullscreen {
75
- color: var(--diva-white);
76
- }
77
-
78
- .diva-app-body {
79
- display: flex;
80
- gap: 0;
81
- align-items: stretch;
82
- flex: 1;
83
- min-height: 0;
84
- height: 100%;
85
- position: relative;
86
- }
87
-
88
- .diva-app-body.is-fullscreen {
89
- flex: 1;
90
- min-height: 0;
91
- }
92
-
93
- .diva-canvas-column {
94
- display: flex;
95
- flex-direction: column;
96
- gap: 24px;
97
- flex: 1;
98
- min-height: 0;
99
- }
100
-
101
- .diva-canvas-column.is-fullscreen {
102
- flex: 1;
103
- min-height: 0;
104
- height: 100%;
105
- }
106
-
107
- .diva-canvas-wrapper {
108
- position: relative;
109
- flex: 1;
110
- min-height: 0;
111
- }
112
-
113
- .diva-canvas {
114
- height: 100%;
115
- width: 100%;
116
- background-color: var(--diva-dark-bg);
117
- border-radius: 6px 0 0 6px;
118
- overflow: hidden;
119
- border: 1px solid var(--diva-dark-border);
120
- }
121
-
122
- .diva-canvas.is-fullscreen {
123
- flex: 1;
124
- height: 100%;
125
- border-radius: 0;
126
- }
127
-
128
- .diva-canvas.has-collection {
129
- border-radius: 0;
130
- }
131
-
132
- .metadata-panel {
133
- padding: 12px;
134
- height: 100%;
135
- overflow: auto;
136
- }
137
-
138
- .metadata-body {
139
- display: flex;
140
- flex-direction: column;
141
- gap: 10px;
142
- }
143
-
144
- .metadata-item {
145
- display: flex;
146
- flex-direction: column;
147
- gap: 4px;
148
- }
149
-
150
- .metadata-label {
151
- font-size: var(--diva-font-lg);
152
- font-weight: 600;
153
- color: var(--diva-text-muted);
154
- text-transform: uppercase;
155
- letter-spacing: 0.05em;
156
- }
157
-
158
- .metadata-value {
159
- font-size: var(--diva-font-lg);
160
- color: var(--diva-text-muted);
161
- line-height: 1.4;
162
- }
163
-
164
- .contents-empty {
165
- padding-left: 12px;
166
- font-size: var(--diva-font-lg);
167
- color: var(--diva-text-muted);
168
- }
169
-
170
- .sidebar-resizer,
171
- .collection-resizer {
172
- display: flex;
173
- align-items: center;
174
- justify-content: center;
175
- width: 12px;
176
- flex: 0 0 12px;
177
- font-size: var(--diva-font-xl);
178
- line-height: 1;
179
- color: var(--diva-white);
180
- background-color: var(--diva-text-muted);
181
- cursor: ew-resize;
182
- user-select: none;
183
- touch-action: none;
184
- align-self: stretch;
185
- }
186
-
187
- .sidebar-resizer.is-hidden,
188
- .collection-resizer.is-hidden {
189
- display: none;
190
- }
191
-
192
- .sidebar-panel.is-fullscreen,
193
- .collection-panel.is-fullscreen {
194
- height: 100%;
195
- border-radius: 0;
196
- }
197
-
198
- .sidebar-panel.is-hidden,
199
- .collection-panel.is-hidden {
200
- border-width: 0;
201
- padding: 0;
202
- opacity: 0;
203
- pointer-events: none;
204
- overflow: hidden;
205
- }
206
-
207
- .required-statement-dock {
208
- display: flex;
209
- justify-content: flex-end;
210
- width: 100%;
211
- margin-top: 12px;
212
- padding-right: 8px;
213
- }
214
-
215
- .required-statement {
216
- font-size: var(--diva-font-md);
217
- color: var(--diva-text-muted);
218
- line-height: 1.4;
219
- text-align: right;
220
- max-width: 20vw;
221
- min-width: 250px;
222
- }
223
-
224
-
225
- .diva-scrollbar-track {
226
- position: absolute;
227
- right: 4px;
228
- top: 4px;
229
- bottom: 4px;
230
- width: 12px;
231
- background: var(--diva-surface);
232
- border: 1px solid var(--diva-border);
233
- border-radius: 6px;
234
- z-index: 100;
235
- }
236
-
237
- .diva-scrollbar-thumb {
238
- position: absolute;
239
- left: 1px;
240
- right: 1px;
241
- background: var(--diva-text-muted);
242
- border-radius: 5px;
243
- min-height: 30px;
244
- cursor: pointer;
245
- }
246
-
247
- .diva-scrollbar-thumb:hover {
248
- background: var(--diva-text-primary);
249
- }
250
-
251
- .diva-scrollbar-thumb:active {
252
- background: var(--diva-dark-border);
253
- }
254
-
255
- .throbber-overlay {
256
- display: flex;
257
- align-items: center;
258
- justify-content: center;
259
- position: absolute;
260
- inset: 0;
261
- pointer-events: none;
262
- }
263
-
264
- .viewer-zoom-indicator {
265
- position: absolute;
266
- left: 12px;
267
- bottom: 12px;
268
- z-index: 30;
269
- pointer-events: none;
270
- padding: 4px 8px;
271
- border-radius: 6px;
272
- font-size: var(--diva-font-sm);
273
- font-weight: 600;
274
- color: var(--diva-white);
275
- background-color: rgb(0 0 0 / 55%);
276
- }
277
-
278
- .throbber {
279
- width: 64px;
280
- height: 64px;
281
- padding: 8px;
282
- background-color: var(--diva-white);
283
- border-radius: 8px;
284
- box-shadow: 0 8px 16px var(--diva-shadow-dark);
285
- display: flex;
286
- flex-wrap: wrap;
287
- }
288
-
289
- .throbber-cube {
290
- width: 16px;
291
- height: 16px;
292
- background-color: var(--diva-accent);
293
- animation-name: diva-cube-grid;
294
- animation-duration: 1.3s;
295
- animation-iteration-count: infinite;
296
- animation-timing-function: ease-in-out;
297
- }
298
-
299
- @keyframes diva-cube-grid {
300
- 0% {
301
- transform: scale3d(1, 1, 1);
302
- }
303
- 35% {
304
- transform: scale3d(0, 0, 1);
305
- }
306
- 70% {
307
- transform: scale3d(1, 1, 1);
308
- }
309
- 100% {
310
- transform: scale3d(1, 1, 1);
311
- }
312
- }
313
-
314
- @media (max-width: 720px) {
315
- .diva-app {
316
- padding: 12px;
317
- }
318
-
319
- .diva-app-body {
320
- flex-direction: column;
321
- gap: 12px;
322
- }
323
-
324
- .sidebar-resizer,
325
- .collection-resizer {
326
- display: none;
327
- }
328
- }
@@ -1,75 +0,0 @@
1
- /* Collection sidebar styles. */
2
-
3
- .collection-panel {
4
- height: 100%;
5
- min-height: 0;
6
- display: flex;
7
- flex-direction: column;
8
- border: 1px solid var(--diva-dark-border);
9
- border-radius: 6px 0 0 6px;
10
- background-color: var(--diva-page-bg);
11
- overflow: hidden;
12
- }
13
-
14
- .collection-header {
15
- padding: 12px;
16
- border-radius: 6px 0 0 0;
17
- background-color: var(--diva-surface);
18
- border-bottom: 1px solid var(--diva-border);
19
- }
20
-
21
- .collection-title {
22
- font-size: var(--diva-font-lg);
23
- font-weight: 600;
24
- color: var(--diva-text-muted);
25
- margin-bottom: 4px;
26
- }
27
-
28
- .collection-summary {
29
- font-size: var(--diva-font-md);
30
- color: var(--diva-text-muted);
31
- line-height: 1.4;
32
- }
33
-
34
- .collection-tree-item {
35
- padding-left: 12px;
36
- }
37
-
38
- .collection-node-button {
39
- padding: 6px 8px;
40
- width: 100%;
41
- display: flex;
42
- align-items: center;
43
- gap: 6px;
44
- }
45
-
46
- .collection-expand-icon {
47
- display: flex;
48
- align-items: center;
49
- justify-content: center;
50
- width: 16px;
51
- height: 16px;
52
- flex-shrink: 0;
53
- }
54
-
55
- .manifest-tree-item {
56
- padding: 6px 8px 6px 30px;
57
- }
58
-
59
- .manifest-tree-item.is-active {
60
- background-color: var(--diva-border);
61
- font-weight: 600;
62
- }
63
-
64
- .sidebar-pane.is-scroll {
65
- overflow-y: auto;
66
- }
67
-
68
- @media (max-width: 720px) {
69
- .collection-panel {
70
- width: 100%;
71
- height: auto;
72
- border-radius: 6px;
73
- }
74
-
75
- }