]> git.localhorst.tv Git - alttp.git/blob - resources/sass/tracker.scss
log who sent manual random chats
[alttp.git] / resources / sass / tracker.scss
1 .tracker {
2         display: flex;
3         flex-direction: column;
4         height: 100vh;
5         align-items: stretch;
6         justify-content: flex-start;
7
8         .auto-tracking {
9                 .custom-toggle {
10                         vertical-align: middle;
11                 }
12         }
13         .canvas {
14                 width: 100%;
15                 height: auto;
16                 max-height: 100%;
17         }
18         .dungeons {
19                 .count-display,
20                 .dungeon-tag {
21                         font-size: 0.5px;
22                         font-weight: bold;
23                         fill: white;
24                         stroke: black;
25                         stroke-width: 0.25px;
26                         stroke-linejoin: round;
27                         paint-order: stroke fill;
28                         dominant-baseline: middle;
29                         text-anchor: middle;
30                         pointer-events: none;
31                         user-select: none;
32                         &.is-zero {
33                                 display: none;
34                         }
35                         &.is-full {
36                                 fill: green;
37                         }
38                 }
39                 .count-display {
40                         font-size: 0.65px;
41                 }
42         }
43         .items {
44                 .med-display {
45                         font-size: 0.3px;
46                         font-weight: bold;
47                         fill: white;
48                         stroke: black;
49                         stroke-width: 0.15px;
50                         stroke-linejoin: round;
51                         paint-order: stroke fill;
52                         pointer-events: none;
53                         &.bottom-left {
54                                 transform: translate(-0.5px, 0.4px);
55                         }
56                         &.bottom-right {
57                                 transform: translate(0.1px, 0.4px);
58                         }
59                 }
60         }
61         .tracker-map {
62                 .location {
63                         .box {
64                                 width: 0.04px;
65                                 height: 0.04px;
66                                 transform: translate(-0.02px, -0.02px);
67                                 fill: #0d0;
68                                 stroke: black;
69                                 stroke-width: 1px;
70                                 vector-effect: non-scaling-stroke;
71                         }
72                         .text {
73                                 fill: black;
74                                 font-size: 0.02px;
75                                 font-weight: bold;
76                                 text-anchor: middle;
77                                 dominant-baseline: middle;
78                                 pointer-events: none;
79                                 user-select: none;
80                         }
81                         &.status-cleared {
82                                 .box {
83                                         fill: grey;
84                                         opacity: 0.4;
85                                 }
86                         }
87                         &.status-partial {
88                                 .box {
89                                         fill: yellow;
90                                 }
91                         }
92                         &.status-unavailable {
93                                 .box {
94                                         fill: red;
95                                 }
96                         }
97                         &.size-lg {
98                                 .box {
99                                         width: 0.08px;
100                                         height: 0.08px;
101                                         transform: translate(-0.04px, -0.04px);
102                                 }
103                                 .text {
104                                         font-size: 0.04px;
105                                 }
106                         }
107                         &.clickable {
108                                 .box:hover {
109                                         stroke: white;
110                                 }
111                         }
112                 }
113         }
114         .toggle-icon {
115                 &.inactive {
116                         opacity: .5;
117                 }
118         }
119         .tracker-toolbar {
120                 label .zelda-icon,
121                 .toggle-icon {
122                         display: inline-block;
123                         width: 2em;
124                         height: 2em;
125                 }
126                 .form-select {
127                         background-image: none;
128                         padding-right: 0.75rem;
129                         border: none;
130                 }
131         }
132         .zelda-icon {
133                 width: 100%;
134                 height: 100%;
135         }
136 }