A game about forced loneliness, made by TACStudios
tacstudios.tngl.sh
1:root {
2 --header-container-height: 24px;
3 --resource-column-width: 220px;
4 --resource-list-icon-size: 16px;
5 --resource-grid-icon-size: 16px;
6 --pass-width: 26px;
7 --pass-list-height: 180px;
8 --pass-list-tilted-label-length: 200px;
9 --pass-title-allowance-margin: 120px; /* used to reserve enough space so that rotated pass names stay visible */
10 --pass-title-allowance-margin-with-scrollbar: 133px;
11 --dependency-row-height: 30px;
12 --dependency-block-height: 26px;
13 --dependency-block-width: var(--pass-width);
14 --hover-overlay-offset-top: 204px;
15
16 --side-panel-width: 380px;
17 --side-panel-pass-title-width: 330px; /* adjust if changing --side-panel-width */
18 --side-panel-attachment-label-width: 298px; /* adjust if changing --side-panel-width */
19
20 flex-grow: 1;
21 flex-direction: column;
22 min-width: 600px;
23 background-color: var(--main-background-color);
24}
25
26#content-container {
27 height: 100%;
28 margin-left: 10px;
29 flex-direction: row;
30}
31
32#main-container {
33 flex-direction: column;
34}
35
36#panel-container {
37 flex-direction: column;
38 width: var(--side-panel-width);
39 min-width: 280px;
40 flex-shrink: 0;
41 background-color: var(--side-panel-background-color);
42}
43
44/* Header */
45
46#header-container {
47 flex-direction: row;
48 height: var(--header-container-height);
49 min-height: 30px;
50 align-items: center;
51 justify-content: flex-start;
52 border-width: 0px 0 1px 0;
53 border-color: black;
54}
55
56#header-container .unity-base-popup-field__label {
57 min-width: auto;
58}
59
60#header-container PopupTextElement {
61 flex-grow: 0;
62}
63
64#capture-button {
65 width: 28px;
66 height: 28px;
67 background-size: 16px;
68 border-width: 0px 1px 0px 0;
69 border-radius: 0;
70 border-color: var(--unity-colors-app_toolbar-background);
71 margin: 0;
72 background-color: var(--main-background-color);
73}
74
75#current-graph-dropdown {
76 max-width: 200px;
77}
78
79#current-execution-dropdown {
80 max-width: 300px;
81}
82
83#header-container DropdownField .unity-base-popup-field__text {
84 overflow: hidden;
85 text-overflow: ellipsis;
86}
87
88/* Passes */
89
90#pass-list-scroll-view {
91 min-height: var(--pass-list-height);
92 flex-direction: column;
93}
94
95#pass-list {
96 margin-left: var(--resource-column-width);
97 flex-direction: row;
98 height: var(--pass-list-height);
99 align-items: flex-end;
100 flex-shrink: 0;
101 padding-right: var(--pass-title-allowance-margin-with-scrollbar);
102}
103
104#pass-list-scroll-view #unity-content-container {
105 flex-direction: row;
106}
107
108#pass-list-width-helper {
109 width: var(--pass-title-allowance-margin);
110}
111
112.pass-list__item {
113 position: absolute;
114 min-width: var(--pass-width);
115 width: var(--pass-width);
116 justify-content: center;
117 flex-direction: column;
118}
119
120.pass-list__item .pass-title {
121 width: var(--pass-list-tilted-label-length);
122 top: -50px;
123 left: -17px;
124 rotate: -45deg;
125 margin-bottom: 10px;
126 height: var(--pass-width);
127}
128
129.pass-list__item .pass-block {
130 margin-top: 2px;
131 height: 15px;
132 border-width: 0.5px; /* 1px width looks too wide for some reason? */
133 border-radius: 2px;
134 border-color: var(--pass-block-border-color);
135}
136
137.pass-block--culled {
138 background-color: var(--pass-block-color--culled);
139}
140
141.pass-block--async {
142 background-color: var(--pass-block-color--async);
143}
144
145
146.pass-list__item .pass-merge-indicator {
147 background-color: var(--merged-pass-accent-color);
148 height: 3px;
149 margin-bottom: 1px;
150 margin-top: 3px;
151 visibility: hidden;
152}
153
154.pass-block.pass--highlight {
155 background-color: var(--pass-block-color--highlight);
156}
157
158.pass-block.pass--highlight-border {
159 border-color: var(--pass-block-color--highlight);
160}
161
162.pass-title.pass--highlight {
163 color: var(--pass-block-text-color--highlight);
164 -unity-font-style: bold;
165}
166
167.pass-title.pass--hover-highlight {
168 color: var(--pass-block-text-color--highlight);
169 -unity-font-style: bold;
170}
171
172.pass-block.pass-compatibility-message-indicator {
173 background-color: var(--native-pass-accent-color);
174 border-color: var(--pass-block-border-color);
175}
176
177.pass-block.pass-compatibility-message-indicator--anim {
178 /* compatible pass animation transitions */
179 transition-property: background-color;
180 transition-duration: 0.7s;
181 transition-timing-function: ease-in-out;
182}
183
184.pass-block.pass-compatibility-message-indicator--compatible {
185 background-color: var(--native-pass-accent-compatible-color);
186}
187
188.pass-block.pass-synchronization-message-indicator {
189 background-color: var(--pass-block-color--async);
190}
191
192.pass-block.pass-block-script-link {
193 /*-unity-background-scale-mode:scale-to-fit;*/
194 border-width: 2px;
195 margin: -1px;
196 padding: 0;
197}
198
199#pass-list-corner-occluder {
200 position: absolute;
201 min-width: var(--resource-column-width);
202 min-height: var(--pass-list-height);
203 background-color: var(--main-background-color);
204}
205
206/* Resource container */
207
208#resource-container {
209 flex-direction: row;
210 margin-top: 5px;
211 height: 100%;
212}
213
214#resource-container ScrollView {
215 flex-grow: 1;
216}
217
218/* Grid lines */
219
220#grid-line-container {
221 position: absolute;
222}
223
224.grid-line {
225 position: absolute;
226 border-color: var(--grid-line-color);
227 border-left-width: 2px;
228 width: 0px;
229 flex-grow: 1;
230}
231
232.grid-line--highlight {
233 border-color: var(--grid-line-color--hover);
234}
235
236/* Resource list */
237
238#resource-list-scroll-view {
239 flex-direction: column;
240 margin-top: 6px;
241 width: var(--resource-column-width);
242 min-width: var(--resource-column-width);
243 max-width: var(--resource-column-width);
244 margin-right: 0;
245 margin-bottom: 12px;
246}
247
248.resource-list__item {
249 height: var(--dependency-row-height);
250 min-width: var(--resource-column-width);
251 flex-direction: row;
252 justify-content: space-between;
253 align-items: center;
254}
255
256.resource-list__item VisualElement {
257 flex-direction: row;
258}
259
260.resource-list__item Label {
261 overflow: hidden;
262 text-overflow: ellipsis;
263 padding-left: 4px;
264}
265
266.resource-list__item .resource-icon-container {
267 align-items: center;
268 flex-direction: row;
269 margin-right: 6px;
270 flex: none;
271}
272
273.resource-icon {
274 width: var(--resource-list-icon-size);
275 height: var(--resource-list-icon-size);
276}
277
278#resource-grid .resource-icon {
279 width: var(--resource-grid-icon-size);
280 height: var(--resource-grid-icon-size);
281 margin-top: 5px;
282 align-self: center;
283}
284
285.resource-list__item--highlight {
286 -unity-font-style: bold;
287 color: var(--pass-block-color--highlight);
288}
289
290/* Resource grid */
291
292#resource-grid-scroll-view .unity-scroll-view__content-container {
293 margin: 0px;
294}
295
296.resource-list-padding-item {
297 height: 13px;
298}
299
300#resource-grid {
301 flex-direction: column;
302 margin-top: 6px;
303 margin-bottom: 6px;
304 padding-right: var(--pass-title-allowance-margin);
305}
306
307#resource-grid-scroll-view.content-pan VisualElement {
308 cursor: pan;
309}
310
311.resource-grid__row {
312 height: var(--dependency-row-height);
313 flex-direction: row;
314}
315
316.resource-helper-line {
317 height: var(--dependency-row-height);
318 flex-shrink: 0;
319 -unity-background-image-tint-color: var(--resource-helper-line-color);
320 background-image: url("../Icons/RenderGraphViewer/dash.png");
321 background-repeat: repeat-x;
322 background-size: 8px 8px;
323 margin-top: 1px;
324}
325
326.resource-helper-line--highlight {
327 -unity-background-image-tint-color: var(--resource-helper-line-color--hover);
328}
329
330.usage-range-block {
331 margin-top: 2px;
332 background-color: var(--usage-range-color);
333 height: var(--dependency-block-height);
334}
335
336.usage-range-block--highlight {
337 position: absolute;
338 border-width: 1px;
339 border-color: var(--pass-block-color--highlight);
340 height: 27px;
341 margin-top: 8px;
342}
343
344.dependency-block {
345 position: absolute;
346 margin-top: 2px;
347 width: var(--dependency-block-width);
348 min-width: var(--dependency-block-width);
349 height: var(--dependency-block-height);
350 background-color: var(--main-background-color);
351}
352
353.dependency-block-read {
354 background-color: var(--resource-read-color);
355}
356
357.dependency-block-write {
358 background-color: var(--resource-write-color);
359}
360
361.dependency-block-readwrite {
362 /* foreground color is set in code when rendering the triangle */
363 background-color: var(--resource-write-color);
364}
365
366#hover-overlay {
367 /*display: none; /* for debugging */
368 /*background-color: rgba(255, 0, 0, 0.2); /* for debugging */
369 position: absolute;
370}
371
372#hover-overlay.content-pan {
373 cursor: pan;
374}
375
376.resource-grid-focus-overlay {
377 background-color: rgba(10, 10, 10, 0.2);
378 position: absolute;
379}
380
381#empty-state-message {
382 flex-direction: row;
383 height: 100%;
384 align-items: center;
385 justify-content: center;
386 -unity-text-align: middle-center;
387}
388
389#empty-state-message > TextElement {
390 max-width: 260px;
391}
392
393/* Resource & pass list panel */
394
395#panel-resource-list {
396 flex-grow: 1;
397 flex-shrink: 1;
398 min-height: 18px;
399 background-color: var(--side-panel-background-color);
400}
401
402#panel-resource-list-scroll-view {
403 min-height: 30px;
404}
405
406#panel-pass-list {
407 flex-grow: 0;
408 flex-shrink: 1;
409 min-height: 18px;
410 border-bottom-width: 0;
411 background-color: var(--side-panel-background-color);
412}
413
414#panel-pass-list-scroll-view {
415 min-height: 30px;
416}
417
418#panel-container .header-foldout {
419 margin: 0; /* Counteract built-in margins inside HeaderFoldout */
420}
421
422#panel-container .header-foldout > Toggle {
423 padding: 0 0 0 8px; /* Counteract built-in margins inside HeaderFoldout */
424}
425
426#panel-container .header-foldout > #unity-content {
427 margin: 0 5px 0 3px; /* Counteract built-in margins inside HeaderFoldout */
428}
429
430#empty-contents-message {
431 flex-direction: row;
432 height: 100%;
433 align-items: center;
434 justify-content: center;
435 -unity-text-align: middle-center;
436}
437
438#panel-container .panel-list__item {
439 margin-left: 6px;
440 background-color: var(--side-panel-background-color);
441 /* selection animation */
442 transition-property: background-color;
443 transition-duration: 0.7s;
444 transition-timing-function: ease-in-out;
445}
446
447#panel-container .panel-list__item--selection-animation {
448 background-color: var(--unity-colors-highlight-background-hover-lighter);
449}
450
451.panel-list__item .resource-icon-container {
452 align-items: center;
453 flex-direction: row;
454 margin-right: 4px;
455 flex: none;
456}
457
458.panel-list__item .resource-icon--imported {
459 width: var(--resource-list-icon-size);
460 height: var(--resource-list-icon-size);
461}
462
463.panel-list__item .resource-icon--global {
464 width: var(--resource-list-icon-size);
465 height: var(--resource-list-icon-size);
466}
467
468.panel-list__item > Label {
469 -unity-font-style: normal;
470 margin-top: 2px;
471 color: var(--unity-colors-default-text);
472}
473
474.panel-list__item .unity-foldout__text {
475 color: var(--unity-colors-default-text);
476}
477
478.panel-list__line-break {
479 border-top-width: 2px;
480 border-color: var(--side-panel-item-border-color);
481 margin-left: -15px; /* counteract foldout indent */
482 margin-top: 2px;
483 margin-bottom: 4px;
484}
485
486ScrollView TextElement {
487 margin-left: 4px;
488}
489
490.unity-foldout__text {
491 color: var(--unity-colors-default-text);
492}
493
494.custom-foldout-arrow #unity-checkmark {
495 background-image: resource("ArrowNavigationRight");
496 width: 16px;
497 height: 16px;
498 rotate: 90deg;
499}
500
501.custom-foldout-arrow > Toggle > VisualElement:checked #unity-checkmark {
502 rotate: 270deg;
503 margin-top: 2px;
504 flex-grow: 0;
505 flex-shrink: 0;
506}
507
508.panel-search-field {
509 margin-left: 6px;
510 margin-top: 6px;
511 width: 98%;
512 height: 20px;
513}
514
515/* Resource List panel only */
516
517.panel-resource-list__item {
518 margin-bottom: 6px;
519 border-radius: 4px;
520 border-width: 1px;
521 border-color: var(--side-panel-item-border-color);
522 margin-top: 4px;
523 margin-right: 4px;
524 padding-top: 4px;
525 padding-bottom: 6px;
526 -unity-font-style: bold;
527}
528
529.panel-resource-list__item .resource-icon {
530 margin-top: 1px;
531 margin-left: 2px;
532 margin-right: 6px;
533 flex-grow: 0;
534 flex-shrink: 0;
535}
536
537.panel-resource-list__item > Toggle > VisualElement {
538 max-width: 100%
539}
540
541.panel-resource-list__item > Toggle > VisualElement > Label {
542 overflow: hidden;
543 flex-shrink: 1;
544 text-overflow: ellipsis;
545}
546
547/* Pass List panel only */
548
549.panel-pass-list__item {
550 margin-top: 2px;
551}
552
553.panel-pass-list__item > Toggle > VisualElement {
554 max-width: 100%
555}
556.panel-pass-list__item > Toggle > VisualElement > Label {
557 overflow: hidden;
558 flex-shrink: 1;
559 text-overflow: ellipsis;
560}
561
562.panel-pass-list__item .sub-header-text {
563 margin-top: 6px;
564 margin-bottom: 2px;
565 -unity-font-style: bold;
566}
567
568.info-foldout {
569 border-radius: 4px;
570 border-width: 1px;
571 border-color: var(--side-panel-item-border-color);
572 margin-top: 6px;
573 margin-left: 4px;
574 margin-right: 4px;
575 padding-top: 4px;
576 padding-bottom: 6px;
577}
578
579.info-foldout > Toggle > VisualElement {
580 max-width: 100%;
581}
582
583.info-foldout > Toggle > VisualElement > Label {
584 margin-left: 6px;
585 flex-shrink: 1;
586 flex-grow: 1;
587 max-width: 100%;
588 overflow: hidden;
589 text-overflow: ellipsis;
590}
591
592.info-foldout > TextElement {
593 -unity-font-style: normal;
594 margin-right: 4px;
595 margin-left: -6px;
596 color: var(--unity-colors-default-text);
597}
598
599.info-foldout__secondary-text {
600 margin-left: 0px;
601 overflow: hidden;
602 text-overflow: ellipsis;
603 color: var(--side-panel-secondary-text-color);
604}
605
606.panel-pass-list__item > #unity-content {
607 margin-bottom: 12px;
608}
609
610