-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbus.css
212 lines (182 loc) · 9.97 KB
/
bus.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
label { cursor: hand; }
.tile,.picker label { background-image: url(https://lh3.googleusercontent.com/u/0/drive-viewer/AFGJ81rmuo_6NPyqvyGba4UwHRunneLejFLj5jGPy8LxN28UGAqkqJD1uuWnrFFfHvj-XHlTfl2uf4fIfR_SnKBTd5X8kDA-3A=w1600-h827); min-width: 7px; min-height: 47px; }
.bus input {
position: absolute;
left: -9999px;
}
.shadow label {
display: inline-flex;
flex-direction: column;
min-height: 47px;
justify-content: space-between;
align-items: center;
vertical-align: bottom;
position: relative;
}
.shadow label .bottom {
position: absolute;
bottom: 0;
}
.picker {
display: none;
position: absolute;
margin-top: 47px;
white-space: nowrap;
z-index: 998;
border: 1px solid gray;
border-radius: 7px;
padding: 1px;
background-color: silver;
opacity: 0.8;
transition: background-color 0.5s;
}
.picker input + .w { min-height: 20px; }
.picker input + .a,
.picker input + .l { min-height: 17px; max-height: 17px; }
.picker input + label:hover { background-color: white; }
.picker :checked + label {
border: 1px solid red;
background-color: white;
border-radius: 2px;
}
.picker label { display: inline-block; margin: 1px; }
:root {
--ax: -29px;
--wx: calc(var(--ax) - 18px);
--dx: calc(var(--wx) - 31px);
--hx: calc(var(--dx) - 25px);
--fx: calc(var(--hx) - 7px); --δf: 42px;
--rx: calc(var(--fx) - var(--δf)); --δr: 38px;
--dy: -47px;
--bg: silver;
}
.shadow:has(~ .picker :checked + .h0) .top, .h0 { background-position: var(--hx) 0; width: 7px; }
.shadow:has(~ .picker :checked + .h1) .top, .h1 { background-position: var(--hx) var(--dy); width: 7px; }
.shadow:has(~ .picker :checked + .t0) .top, .t0 { background-position: 0 0; width: 7px; }
.shadow:has(~ .picker :checked + .j0) .top, .j0 { background-position: -8px 0; width: 20px; }
.shadow:has(~ .picker :checked + .d0) .top, .d0 { background-position: var(--dx) 0; width: 16px; }
.shadow:has(~ .picker :checked + .d1) .top, .d1 { background-position: var(--dx) var(--dy); width: 16px; }
.shadow:has(~ .picker :checked + .d2) .top, .d2 { background-position: var(--dx) calc(var(--dy) * 2); width: 16px; }
.shadow:has(~ .picker :checked + .d3) .top, .d3 { background-position: var(--dx) calc(var(--dy) * 3); width: 16px; }
.shadow:has(~ .picker :checked + .d4) .top, .d4 { background-position: var(--dx) calc(var(--dy) * 4); width: 22px; }
.shadow:has(~ .picker :checked + .d5) .top, .d5 { background-position: var(--dx) calc(var(--dy) * 5); width: 22px; }
.shadow:has(~ .picker :checked + .d6) .top, .d6 { background-position: var(--dx) calc(var(--dy) * 6); width: 24px; }
.shadow:has(~ .picker :checked + .d7) .top, .d7 { background-position: var(--dx) calc(var(--dy) * 7); width: 22px; }
.shadow:has(~ .picker :checked + .d8) .top, .d8 { background-position: var(--dx) calc(var(--dy) * 8); width: 16px; }
.shadow:has(~ .picker :checked + .w) .top,
.w { min-height: 21px; }
.shadow:has(~ .picker :checked + .w0) .top, .w0 { background-position: var(--wx) 0; width: 25px; }
.shadow:has(~ .picker :checked + .w1) .top, .w1 { background-position: var(--wx) var(--dy); width: 25px; }
.shadow:has(~ .picker :checked + .w3) .top, .w3 { background-position: var(--wx) calc(var(--dy) * 3); width: 16px; }
.shadow:has(~ .picker :checked + .w4) .top, .w4 { background-position: var(--wx) calc(var(--dy) * 4); width: 14px; }
.shadow:has(~ .picker :checked + .w5) .top, .w5 { background-position: var(--wx) calc(var(--dy) * 5); width: 16px; }
.shadow:has(~ .picker :checked + .w6) .top, .w6 { background-position: var(--wx) calc(var(--dy) * 6); width: 7px; }
.shadow:has(~ .picker :checked + .w2) .top, .w2 { background-position: var(--wx) calc(var(--dy) * 2); width: 25px; }
.shadow:has(~ .picker :checked + .w7) .top, .w7 { background-position: var(--wx) calc(var(--dy) * 7); width: 30px; }
.shadow:has(~ .picker :checked + .w8) .top, .w8 { background-position: var(--wx) calc(var(--dy) * 8); width: 30px; }
.shadow:has(~ .picker :checked + .a) .bottom,
.a { min-height: 17px; }
.picker .blank { min-height: 17px; max-height: 17px; width: 16px; }
.shadow:has(~ .picker :checked + .a0) .bottom, .a0 { background-position: var(--ax) -29px; width: 16px; }
.shadow:has(~ .picker :checked + .a1) .bottom, .a1 { background-position: var(--ax) calc(var(--dy) * 1 - 29px); width: 17px; }
.shadow:has(~ .picker :checked + .a2) .bottom, .a2 { background-position: var(--ax) calc(var(--dy) * 2 - 29px); width: 15px; }
.shadow:has(~ .picker :checked + .a3) .bottom, .a3 { background-position: var(--ax) calc(var(--dy) * 3 - 29px); width: 16px; }
.shadow:has(~ .picker :checked + .a4) .bottom, .a4 { background-position: var(--ax) calc(var(--dy) * 4 - 29px); width: 17px; }
.shadow:has(~ .picker :checked + .a5) .bottom, .a5 { background-position: var(--ax) calc(var(--dy) * 5 - 29px); width: 15px; }
.shadow:has(~ .picker :checked + .a5) .bottom { right: 0; }
.shadow:has(~ .picker :checked + .a2) .bottom,
.slot:has(.picker :checked + .f) ~ .slot .shadow:has(~ .picker :checked + .a5) .bottom { left: 0; }
.slot:has(.picker :checked + .f) ~ .slot .shadow:has(~ .picker :checked + .a2) .bottom { right: 0; left: initial; }
.shadow:has(~ .picker input:checked + .l) .bottom,
.l { min-height: 17px; }
.shadow:has(~ .picker :checked + .l0) .bottom, .l0 { background-position: var(--wx) -29px; width: 20px; }
.shadow:has(~ .picker :checked + .l1) .bottom, .l1 { background-position: var(--wx) calc(var(--dy) * 1 - 29px); width: 20px; }
.shadow:has(~ .picker :checked + .l2) .bottom, .l2 { background-position: var(--wx) calc(var(--dy) * 2 - 29px); width: 20px; }
.shadow:has(~ .picker :checked + .l3) .bottom, .l3 { background-position: var(--wx) calc(var(--dy) * 3 - 29px); width: 20px; }
.shadow:has(~ .picker :checked + .l4) .bottom, .l4 { background-position: var(--wx) calc(var(--dy) * 4 - 29px); width: 13px; }
.shadow:has(~ .picker :checked + .l5) .bottom, .l5 { background-position: var(--wx) calc(var(--dy) * 5 - 29px); width: 13px; }
.shadow:has(~ .picker :checked + .l00) .bottom, .l00 { background-position: var(--wx) calc(var(--dy) * 9 - 29px); width: 39px; }
.shadow:has(~ .picker :checked + .l000) .bottom, .l000 { background-position: var(--wx) calc(var(--dy) * 10 - 29px); width: 58px; }
.shadow:has(~ .picker :checked + .l00) .bottom { left: -7px; }
.slot:has(.picker :checked + .f) ~ .slot .shadow:has(~ .picker :checked + .l00) .bottom { left: -2px; }
.shadow:has(~ .picker :checked + .l000) .bottom { left: 0; }
.slot:has(.picker :checked + .f) ~ .slot .shadow:has(~ .picker :checked + .l5) .bottom { right: 0; }
.shadow:has(~ .picker :checked + .spot2) .top, .spot2 { background-position: var(--fx) calc(var(--dy) * 2); width: 6px; }
.blank { background-position: var(--fx) calc(var(--dy) * 4); width: 22px; }
.shadow:has(~ .picker :checked + .f0) .top, .f0 { background-position: var(--fx) 0; width: var(--δf); }
.shadow:has(~ .picker :checked + .f1) .top, .f1 { background-position: var(--fx) calc(var(--dy) * 1); width: var(--δf); }
.shadow:has(~ .picker :checked + .f2) .top, .f2 { background-position: var(--fx) calc(var(--dy) * 3); width: var(--δf); }
.shadow:has(~ .picker :checked + .r0) .top, .r0 { background-position: var(--rx) 0; width: var(--δr); }
.shadow:has(~ .picker :checked + .r1) .top, .r1 { background-position: var(--rx) calc(var(--dy) * 1); width: var(--δr); }
.paint :checked + label,
.picker :checked + label,
.shadow:has(~ .picker :checked + .spot2) .top,
.spot2,
blink {
animation: blink-animation 1s steps(5, start) infinite;
-webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation { to { opacity: 0.2; } }
@-webkit-keyframes blink-animation { to { opacity: 0.2; } }
.slot,
.tile { display: inline-block; }
.shadow:has(.close) { background-color: #faa; }
.picker,
.open:checked + label,
.shadow:has(.close) label { display: none; }
.shadow:has(.open:checked) ~ .picker { display: inline-block; animation: fadeIn 0.5s; }
.shadow:has(.open:checked) ~ .shadow:has(.close) label { display: inline-flex; animation: fadeIn 0.5s; }
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 0.8; }
}
.bus {
display: inline-block;
margin: 10px;
border: 1px solid #eee;
padding: 10px;
border-radius: 10px;
white-space: nowrap;
background-color: var(--bg)!important;
}
*:has(#ddd:checked) ~ .bus {
transform: perspective(3cm) rotateX(351deg) rotateY(333deg);
}
*:has(#port:not(:checked)) ~ .bus .slot:has(.picker :checked + .h) ~ .slot,
*:has(#port:not(:checked)) ~ .bus .f,
*:has(#port:not(:checked)) ~ .bus .r,
.slot .f,
.slot .r,
.slot:has(:checked + .t) ~ .slot .t,
.slot:has(:checked + .h) ~ .slot .h,
.slot:has(:checked + :not(.f)) + .slot:has(:checked + .h) + .slot .picker input + :not(.f),
.slot:has(:checked + .f) ~ .slot .f,
.slot:has(:checked + .f) + .slot .picker input + :not(.h),
.slot:has(:checked + .f) ~ .slot:has(:checked + .h) ~ .slot .h,
.slot:has(:checked + .f) ~ .slot:has(:checked + .t) + .slot .picker input + :not(.r),
.slot:has(:checked + .r) ~ .slot,
.slot:has(.picker :checked + .spot) ~ .slot:has(.picker :checked + .spot) {
display: none;
}
.slot:has(:checked + .h) + .slot .f,
.slot:has(:checked + .f) + .slot .h,
.slot:has(:checked + .f) + .slot:has(:checked + .h) ~ .slot .picker input + :is(.spot1):is(.t):is(.w):is(.d):is(.j), /*:not(.f):not(.r):not(.t):not(.h),*/
.slot:has(:checked + .f) + .slot:has(:checked + .h) ~ .slot .t,
.slot:has(:checked + .f) ~ .slot:has(:checked + .t) + .slot .r {
display: inline-block;
}
.slot:has(:checked + .f) + .slot:has(:checked + .h) ~ .slot .f,
.slot:has(:checked + .f) + .slot:has(:checked + .h) ~ .slot:has(:checked + .t) + .slot .picker input + :not(.r) {
display: none;
}
.slot:has(.picker :checked + .f) ~ .slot .tile,
.slot:has(.picker :checked + .f) ~ .slot .picker input + :not(.r) {
transform: scaleX(-1);
}
.tile.bottom,
.picker .conditional,
.picker .conditional ~ * { display: none; }
.shadow,
.shadow:has(~ .picker .conditional ~ :checked):has(~ .picker :checked + .w) .bottom,
.picker :checked + .w ~ .conditional,
.picker :checked + .w ~ .conditional ~ * { display: inline-block; }