A game about forced loneliness, made by TACStudios
tacstudios.tngl.sh
1#root {
2 --dark-grey: var(--unity-colors-window-background);
3 --standard-grey: var(--unity-colors-app_toolbar_button-background-hover);
4 --standard-background-color: var(--unity-colors-window-background);
5 --light-grey: var(--unity-colors-dropdown-background);
6 --border-color: var(--unity-colors-dropdown-border);
7 --card-background: var(--unity-colors-inspector_titlebar-border_accent);
8
9 --doc-separator-color: #5D5D5D;
10
11 --tab-button-bar-height: 32px;
12
13 --bottom-bar-height: 56px;
14
15 --card-width: 300px;
16 --card-min-width: 200px;
17 --card-poster-icon-width: 92px;
18 --card-poster-icon-height: 64px;
19
20 --checkmark-icon: url("Icons/Check.png");
21 --questionnaire-empty-view-icon: url('Icons/EmptyViewIcon.png');
22}
23
24.color-recommendation-badge {
25 color: var(--recommendation-badge-color);
26 border-color: var(--recommendation-badge-color);
27}
28
29.icon{
30 min-width: 16px;
31 max-width: 16px;
32 min-height: 16px;
33 max-height: 16px;
34}
35
36Label{
37 overflow: hidden;
38 white-space: normal;
39}
40
41.view-headline{
42 font-size: 14px;
43 padding-bottom: 16px;
44}
45
46.recommendation-view-headline{
47 font-size: 14px;
48 padding-bottom: 16px;
49 margin-left: 10px;
50}
51
52.icon-package-manager{
53 background-image: var(--package-manager-icon);
54}
55
56.icon-questionmark {
57 background-image: var(--info-icon);
58}
59
60.icon-three-dots {
61 background-image: var(--three-dot-icon);
62 -unity-background-scale-mode: scale-to-fit;
63}
64
65.icon-package-installed{
66 margin-left: 4px;
67 background-image: var(--package-installed-icon);
68}
69
70.icon-NGO{background-image:url('Icons/Ngo.png')}
71.icon-N4E{background-image:url('Icons/N4E.png')}
72.icon-LS{background-image:url('Icons/ClientHosted.png')}
73.icon-DS{background-image:url('Icons/DedicatedServer.png')}
74.icon-DA{background-image:url('Icons/DistributedAuthority.png')}
75.icon-CustomNetcode{background-image:url('Icons/CustomNetcode.png')}
76.icon-NoNetcode{background-image:url('Icons/NoNetcode.png')}
77.icon-CloudCode{background-image:url('Icons/CloudCode.png')}
78
79/*Utilities*/
80
81.processing{
82 background-image: var(--spinner-icon-big);
83 rotate: 360000deg;
84 transition-property: rotate;
85 transition-timing-function: linear;
86 transition-duration: 2000s;
87 min-width: 64px;
88 max-width: 64px;
89 min-height: 64px;
90 max-height: 64px;
91 position: absolute;
92 top: 50%;
93 left: 50%;
94 translate: -50% -50%;
95}
96
97.flex-wrap{
98 flex-wrap: wrap;
99}
100
101.color-grey {
102 color: var(--badge-color-grey);
103 opacity: 0.8;
104 border-color: var(--badge-color-grey);
105}
106
107.highlight-background-color {
108 background-color: var(--standard-background-color);
109}
110
111.next-step-button {
112 padding: 6px;
113 margin-top: 6px;
114 min-height: 32px;
115 max-height: 32px;
116}
117
118.packageIcon {
119 background-image: var(--package-icon);
120 -unity-background-scale-mode: scale-to-fit;
121 margin-right: 4px;
122 background-size: 16px 16px;
123}
124
125.questionnaireIcon {
126 background-image: var(--questionnaire-icon);
127 -unity-background-scale-mode: scale-to-fit;
128 background-size: 14px 14px;
129}
130
131/* Questionnaire view */
132
133#questionnaire-view {
134 margin: 10px;
135 padding-bottom: 4px;
136}
137
138
139#questionnaire-view Label {
140 padding-left: 0px;
141 padding-right: 0px;
142}
143
144#questionnaire-view Toggle {
145 margin-left: 0px;
146 margin-right: 0px;
147}
148
149#advanced-questions > Toggle {
150 -unity-font-style: bold;
151}
152
153/*question-view One single question in question-view*/
154
155.question-view{
156 margin-bottom: 4px;
157}
158
159#advanced-questions .question-view > Label {
160 margin-bottom: 2px;
161}
162
163.question-view Toggle {
164 background-color: var(--dark-grey);
165}
166
167.question-view .question-text {
168 margin: 5px;
169 white-space: normal;
170}
171
172.question-view .unity-radio-button__label {
173 left: 32px;
174 white-space: nowrap;
175 text-overflow: ellipsis;
176 overflow: hidden;
177}
178
179.question-view .unity-radio-button__input {
180 position: absolute;
181 left: 16px;
182}
183
184.mandatory-question Label {
185 padding-bottom: 4px;
186 -unity-font-style: bold;
187}
188
189.question-section {
190}
191
192.question-section__no-scrollbar{
193 align-content: flex-start;
194 flex-shrink: 0;
195}
196
197/*bottom bar - holding the install button, spinning icon and the package count */
198#bottom-bar {
199 display: flex;
200 justify-content: space-between;
201 align-items: center;
202 padding-left: 15px;
203 padding-right: 15px;
204 max-height: var(--bottom-bar-height);
205 min-height: var(--bottom-bar-height);
206 flex-direction: row;
207 border-width: 1px;
208 background-color: var(--unity-colors-window-background);
209 border-top-color: var(--border-color);
210 font-size: 14px;
211}
212
213#bottom-bar #install-package-container {
214 flex-direction: row;
215}
216
217EnumField, DropdownField {
218 margin: 0px;
219 min-height: 19px;
220}
221
222/* recommendation view*/
223
224#main-sections-container{
225 flex-direction: row;
226 flex-wrap: wrap;
227}
228
229.main-section{
230 background-color: var(--card-background);
231 border-width: 1px;
232 border-color: var(--border-color);
233 padding-bottom: 16px;
234 margin: 0px 8px 8px 0px;
235 width: var(--card-width);
236 min-width: var(--card-min-width);
237 flex-grow: 1;
238 flex-shrink: 1;
239 padding-left: 16px;
240 padding-right: 16px;
241}
242
243.main-section .recommendation-item{
244 padding: 0px;
245 margin-left: -4px;
246 margin-right: -4px;
247
248}
249
250.main-section DropdownField{
251 margin-left: 0;
252 margin-right: 0;
253 margin-bottom: 8px;
254}
255
256.main-section .unity-help-box{
257 margin-top: 4px;
258 margin-left: 0;
259 margin-right: 0;
260}
261
262.sub-section{
263 margin-top: 0px;
264 margin-left: 0px;
265 margin-right: 8px;
266}
267
268.subsection-headline{
269 font-size: 12px;
270 -unity-font-style: bold;
271}
272
273.subsection-headline > .unity-base-field{
274 margin-top: 6px;
275 margin-bottom: 0px;
276}
277
278/*recommendation section - foldout that holds recommendations*/
279#card-headline{
280 font-size: 12px;
281 -unity-font-style: bold;
282 margin-bottom: 4px;
283}
284
285#associated-features-headline{
286 margin-top: 8px;
287}
288
289#card-poster-image{
290 margin-right: -16px;
291 margin-left: -16px;
292 min-width: 100%;
293 min-height: 92px;
294
295 background-color: var(--card-poster-image-bg-color);
296 margin-bottom: 16px;
297 align-items: center;
298 justify-content: center;
299}
300
301#card-poster-image >*{
302
303 min-width: var(--card-poster-icon-width);
304 max-width: var(--card-poster-icon-width);
305 min-height: var(--card-poster-icon-height);
306 max-height: var(--card-poster-icon-height);
307}
308
309#recommendation-view-section-container {
310 flex-grow: 1;
311 margin-left: 10px;
312 margin-bottom: 10px;
313}
314
315/*recommendation item - One Item that a user can select or unselect within recommendation section*/
316
317.recommendation-item {
318 border-width: 1px;
319 -unity-font-style: normal;
320 background-color: var(--card-background);
321 overflow: hidden;
322 flex-grow: 0;
323 flex-shrink: 1;
324 min-height: 32px;
325 margin-top: 4px;
326 padding:4px;
327}
328
329.recommendation-item #sub-info-text {
330 margin-left: 20px;
331 -unity-font-style: italic;
332 white-space: normal;
333 text-overflow: ellipsis;
334 overflow: hidden;
335}
336
337.recommendation-item #header {
338
339 flex-direction: row;
340 align-content: center;
341 align-items: center;
342 justify-content: space-between;
343}
344
345.recommendation-item-top-left-container {
346 flex-direction: row;
347 flex-grow: 1;
348 flex-shrink: 1;
349 align-items: center;
350}
351
352.recommendation-item-top-left-container Label {
353 flex-shrink: 1;
354}
355
356.recommendation-item-top-right-container {
357 max-width: 64px;
358 flex-shrink: 0;
359 flex-direction: row;
360 justify-content: flex-end;
361}
362
363.badge {
364 font-size: 9px;
365 padding: 1px;
366 margin-left: 4px;
367 padding-left: 3px;
368 padding-right: 3px;
369 border-width: 1px;
370 border-radius: 3px;
371 white-space: nowrap;
372 text-overflow: ellipsis;
373 overflow: hidden;
374 min-width: 24px;
375 flex-shrink: 1;
376}
377
378.pre-release-badge {
379 color: var(--pre-release-badge-color);
380 background-color: var(--pre-release-badge-color-bg);
381 border-color: var(--pre-release-badge-color);
382}
383
384/*Tab views - if we are sure we will not support 2022, we should merge this with TabView uss*/
385#tab-view{
386 height: 100%;
387}
388
389#tab-zone {
390 flex-direction: row;
391 justify-content: center;
392 align-items: center;
393 min-height: var(--tab-button-bar-height);
394 max-height: var(--tab-button-bar-height);
395}
396
397.tabs-container {
398 height: 100%;
399}
400
401.tab-content{
402 height: 100%;
403}
404
405#recommendation-tab-container
406{
407 height: 100%;
408}
409
410.main-split-view {
411 border-top-width: 1px;
412 border-top-color: var(--border-color);
413 height: 100%;
414 margin-bottom: 0px;
415}
416
417.main-split-view-right{
418 margin-top: 10px;
419}
420
421#unity-dragline-anchor{
422 background-color: var(--border-color);
423}
424
425#unity-dragline-anchor:hover{
426 background-color: white;
427 opacity: 0.3;
428}
429
430.tab-button {
431 margin: 0;
432 padding-top: 4px;
433 border-width: 0px;
434 border-bottom-width: 2px;
435 min-height: var(--tab-button-bar-height);
436 flex-grow: 0;
437 flex-shrink: 0;
438 border-color: var(--dark-grey);
439 background-color: var(--dark-grey);
440 padding-left: 12px;
441 padding-right: 12px;
442 align-items: center;
443
444}
445
446.tab-button:hover {
447 background-color: var(--standard-grey);
448}
449
450.tab-button.selected {
451 border-bottom-width: 2px;
452 border-bottom-color: var(--tab-button-highlight-color);
453}
454
455/* Getting started views */
456.onboarding-categories{
457 margin: 0px;
458 align-items: flex-start;
459}
460
461.onboarding-categories .unity-button-group{
462 flex-direction: column;
463 align-self: stretch;
464 margin: 0px;
465}
466
467.onboarding-category-button{
468 margin: 0px;
469 padding-left: 20px;
470 -unity-text-align: middle-left;
471 width: 100%;
472 min-height: 28px;
473 border-width: 0px;
474 background-color: transparent;
475 border-radius: 0px;
476}
477
478.onboarding-category-button:hover {
479 background-color: var(--standard-grey);
480}
481
482.onboarding-category-button:checked {
483 background-color: var(--unity-colors-highlight-background);
484 -unity-font-style: bold;
485 color: var(--onboarding-button-selected-text-color);
486}
487
488.onboarding-section-category-container{
489 padding-left: 12px;
490 padding-right: 12px;
491 margin-bottom: 24px;
492}
493
494.onboarding-section-mainbutton{
495 max-height: 24px;
496 align-self: flex-start;
497 padding: 2px 4px 2px 4px;
498 margin-left: 0;
499 margin-top: 4px;
500 margin-bottom: 16px;
501}
502
503/*onboarding section*/
504.onboarding-section {
505 background-color: var(--unity-colors-inspector_titlebar-border_accent);
506 padding: 16px;
507 margin-bottom: 8px;
508}
509
510.section-foldout {
511 background-color: var(--card-background);
512 padding: 16px;
513 padding-top: 8px;
514 margin-bottom: 8px;
515}
516
517.section-foldout .unity-foldout__checkmark {
518 /* Use width instead of display: none, which results in the title being cut */
519 width: 0;
520}
521
522.section-foldout .unity-foldout__text {
523 font-size: 14px;
524 -unity-font-style: Bold;
525 margin-bottom: 8px;
526 margin-left: -6px;
527}
528
529.section-foldout .onboarding-section-short-description {
530 margin-left: -16px;
531}
532
533.onboarding-section-title {
534 font-size: 14px;
535 -unity-font-style: Bold;
536 margin-bottom: 8px;
537}
538
539.three-dot-button {
540 background-color: transparent;
541 border-width: 0px;
542 padding: 0px;
543 margin: 0px;
544 width: 14px;
545 height: 14px;
546}
547
548.three-dot-button:hover {
549 background-color: var(--standard-grey);
550}
551
552.onboarding-section-short-description {
553 max-width: 700px;
554 overflow: hidden;
555 white-space: normal;
556}
557
558.horizontal-container {
559 flex-direction: row;
560 justify-content: flex-start;
561}
562
563.flex-spacer {
564 flex-grow: 1;
565}
566
567.doc-button {
568 border-width: 0px;
569 padding: 1px;
570 margin-left: 0px;
571 margin-right: 2px;
572 background-color: var(--card-background);
573 color: var(--link-color);
574}
575
576.doc-button:hover {
577 background-color: var(--dark-grey);
578}
579
580#doc-button-separator {
581 margin: 2px;
582 color: var(--doc-separator-color);
583}
584
585.checkmark-icon {
586 background-image: var(--checkmark-icon);
587 -unity-background-scale-mode: scale-to-fit;
588 background-size: 16px 16px;
589 min-width: 16px;
590 max-width: 16px;
591 min-height: 16px;
592 max-height: 16px;
593}
594
595/* Empty view which is shown when no recommendations are shown*/
596
597#empty-view {
598 flex-grow: 1;
599 align-items: center;
600 justify-content: center;
601}
602
603#empty-view-content{
604 height: 100%;
605 width: 75%;
606 max-width: 400px;
607 justify-content: center;
608}
609
610#empty-view-icon {
611 min-height: 50%;
612 background-image: var(--questionnaire-empty-view-icon);
613 background-size: contain;
614 margin-bottom: 8px;
615}
616
617#empty-view-message {
618 flex-shrink: 0;
619 flex-grow: 0;
620 width: 100%;
621 -unity-text-align: upper-left;
622 overflow: hidden;
623 white-space: normal;
624}
625
626