]> git.localhorst.tv Git - alttp.git/blob - resources/sass/tracker.scss
vertical map layout
[alttp.git] / resources / sass / tracker.scss
1 .tracker {
2         .auto-tracking {
3                 .custom-toggle {
4                         vertical-align: middle;
5                 }
6         }
7         .count-display,
8         .med-display {
9                 background: black;
10                 font-weight: bold;
11                 text-align: center;
12         }
13         .dungeon {
14                 display: flex;
15                 flex-direction: row;
16                 align-items: stretch;
17                 justify-content: flex-start;
18                 gap: 1ex;
19                 > * {
20                         width: 2em;
21                         height: 2em;
22                 }
23                 .dungeon-smalls .count-display,
24                 .dungeon-tag {
25                         background: black;
26                         font-family: monospace;
27                         font-size: 115%;
28                         font-weight: bold;
29                         text-align: center;
30                 }
31                 .dungeon-checks,
32                 .dungeon-smalls {
33                         position: relative;
34                         .count-display {
35                                 pointer-events: none;
36                                 position: absolute;
37                                 top: .3ex;
38                                 left: .3ex;
39                                 bottom: .3ex;
40                                 right: .3ex;
41                                 &.is-zero {
42                                         display: none;
43                                 }
44                                 &.is-full {
45                                         color: green;
46                                 }
47                         }
48                 }
49         }
50         .dungeons {
51                 padding: 1ex;
52         }
53         .dungeon-ep,
54         .dungeon-pd {
55                 margin-top: 1ex;
56         }
57         .equipment {
58                 display: grid;
59                 grid-template-columns: 3em 3em 3em 3em 3em;
60                 gap: 1ex;
61                 padding: 1ex;
62         }
63         .inventory {
64                 font-size: 110%;
65         }
66         .items {
67                 display: grid;
68                 grid-template-columns: 3em 3em 3em 3em 3em;
69                 gap: 1ex;
70                 padding: 1ex;
71         }
72         .item {
73                 position: relative;
74                 width: 3em;
75                 height: 3em;
76
77                 .bottom-left,
78                 .bottom-right,
79                 .top-left,
80                 .top-right {
81                         position: absolute;
82                         width: 50%;
83                         height: 50%;
84                         .zelda-icon {
85                                 transform: scale(1.4);
86                         }
87                 }
88                 .bottom-left {
89                         bottom: 0;
90                         left: 0;
91                 }
92                 .bottom-right {
93                         bottom: 0;
94                         right: 0;
95                 }
96                 .top-left {
97                         top: 0;
98                         left: 0;
99                 }
100                 .top-right {
101                         top: 0;
102                         right: 0;
103                 }
104
105                 .left,
106                 .right {
107                         position: absolute;
108                         width: 50%;
109                         height: 100%;
110                         overflow: hidden;
111                         .zelda-icon {
112                                 width: 200%;
113                                 margin-left: -50%;
114                         }
115                 }
116                 .left {
117                         left: 0;
118                 }
119                 .right {
120                         right: 0;
121                 }
122                 .count-display,
123                 .med-display {
124                         pointer-events: none;
125                         &.is-zero {
126                                 display: none;
127                         }
128                 }
129                 .med-display {
130                         height: 30%;
131                         font-size: 80%;
132                         line-height: 1;
133                 }
134         }
135         .tracker-map {
136                 .canvas {
137                         width: 100%;
138                         height: auto;
139                         .location {
140                                 .box {
141                                         width: 0.04px;
142                                         height: 0.04px;
143                                         transform: translate(-0.02px, -0.02px);
144                                         fill: #0d0;
145                                         stroke: black;
146                                         stroke-width: 1px;
147                                         vector-effect: non-scaling-stroke;
148                                 }
149                                 .text {
150                                         fill: black;
151                                         font-size: 0.02px;
152                                         font-weight: bold;
153                                         text-anchor: middle;
154                                         dominant-baseline: middle;
155                                         pointer-events: none;
156                                         user-select: none;
157                                 }
158                                 &.status-cleared {
159                                         .box {
160                                                 fill: grey;
161                                                 opacity: 0.4;
162                                         }
163                                 }
164                                 &.status-partial {
165                                         .box {
166                                                 fill: yellow;
167                                         }
168                                 }
169                                 &.status-unavailable {
170                                         .box {
171                                                 fill: red;
172                                         }
173                                 }
174                                 &.size-lg {
175                                         .box {
176                                                 width: 0.08px;
177                                                 height: 0.08px;
178                                                 transform: translate(-0.04px, -0.04px);
179                                         }
180                                         .text {
181                                                 font-size: 0.04px;
182                                         }
183                                 }
184                                 &.clickable {
185                                         .box:hover {
186                                                 stroke: white;
187                                         }
188                                 }
189                         }
190                 }
191         }
192         .toggle-icon {
193                 &.inactive {
194                         opacity: .5;
195                 }
196         }
197         .tracker-toolbar {
198                 label .zelda-icon,
199                 .toggle-icon {
200                         display: inline-block;
201                         width: 2em;
202                         height: 2em;
203                 }
204                 .form-select {
205                         background-image: none;
206                         padding-right: 0.75rem;
207                         border: none;
208                 }
209         }
210         .zelda-icon {
211                 width: 100%;
212                 height: 100%;
213         }
214 }