Rev 179 | Go to most recent revision | Only display areas with differences | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed
Rev 179 | Rev 198 | ||
---|---|---|---|
1 | <?php |
1 | <?php |
2 | /* Responsive Web Design for small viewports; see lcars-responsive.css */
|
2 | /* Responsive Web Design for small viewports; see lcars-responsive.css */
|
3 | use de\pointedears\css\least\Mixins;
|
3 | use de\pointedears\css\least\Mixins;
|
4 | ?>/* 0.5 to 0.5225s */ |
4 | ?>/* 0.5 to 0.5225s */ |
5 | #connectors { |
5 | #connectors { |
6 | opacity: 0; |
6 | opacity: 0; |
7 | <?php |
7 | <?php |
8 | Mixins::transition('', 'opacity 0s 0.5s linear'); |
8 | Mixins::transition('', 'opacity 0s 0.5s linear'); |
9 | ?>
|
9 | ?>
|
10 | }
|
10 | }
|
11 | 11 | ||
12 | #bow-bottom { |
12 | #bow-bottom { |
13 | bottom: 2.6em; |
13 | bottom: 2.6em; |
14 | height: 0em; |
14 | height: 0em; |
15 | opacity: 0; |
15 | opacity: 0; |
16 | <?php |
16 | <?php |
17 | Mixins::transition('', |
17 | Mixins::transition('', |
18 | 'bottom 0.0225s 0.5s linear,'
|
18 | 'bottom 0.0225s 0.5s linear,'
|
19 | . ' height 0.0225s 0.5s linear,'
|
19 | . ' height 0.0225s 0.5s linear,'
|
20 | . ' opacity 0s 0.5225s linear'); |
20 | . ' opacity 0s 0.5225s linear'); |
21 | ?>
|
21 | ?>
|
22 | }
|
22 | }
|
23 | 23 | ||
24 | #bow #bottom { |
24 | #bow #bottom { |
25 | visibility: hidden; |
25 | visibility: hidden; |
26 | <?php |
26 | <?php |
27 | Mixins::transition('', |
27 | Mixins::transition('', |
28 | 'visibility 0s 0.5225s linear'); |
28 | 'visibility 0s 0.5225s linear'); |
29 | ?>
|
29 | ?>
|
30 | }
|
30 | }
|
31 | 31 | ||
32 | .menu-container
|
32 | .menu-container
|
33 | {
|
33 | {
|
34 | top: 11em; |
34 | top: 11em; |
35 | width: 5em; |
35 | width: 5em; |
36 | bottom: 0; |
36 | bottom: 0; |
37 | z-index: 1; |
37 | z-index: 1; |
38 | background-color: #fc6; |
38 | background-color: #fc6; |
39 | <?php |
39 | <?php |
40 | Mixins::transition('', |
40 | Mixins::transition('', |
41 | 'top 0.5s 0.5s linear,'
|
41 | 'top 0.5s 0.5s linear,'
|
42 | . ' width 0.5s 0.5s linear,'
|
42 | . ' width 0.5s 0.5s linear,'
|
43 | . ' bottom 0.5s 0.5s linear,'
|
43 | . ' bottom 0.5s 0.5s linear,'
|
44 | . ' background-color 0s 1s linear'
|
44 | . ' background-color 0s 1s linear'
|
45 | ); |
45 | ); |
46 | ?>
|
46 | ?>
|
47 | }
|
47 | }
|
48 | 48 | ||
49 | .menu { |
49 | .menu { |
50 | height: 21.8em; |
50 | height: 21.8em; |
51 | <?php |
51 | <?php |
52 | Mixins::transition('', 'height 0.5s 0.5s linear'); |
52 | Mixins::transition('', 'height 0.5s 0.5s linear'); |
53 | ?>
|
53 | ?>
|
54 | }
|
54 | }
|
55 | 55 | ||
56 | .menu ul:first-child { |
56 | .menu ul:first-child { |
57 | padding-top: 0; |
57 | padding-top: 0; |
58 | <?php |
58 | <?php |
59 | Mixins::transition('', 'padding-top 0.5s 0.5s linear'); |
59 | Mixins::transition('', 'padding-top 0.5s 0.5s linear'); |
60 | ?>
|
60 | ?>
|
61 | }
|
61 | }
|
62 | 62 | ||
63 | .menu .button |
63 | .menu .button |
64 | {
|
64 | {
|
65 | width: 5em; |
65 | width: 5em; |
66 | <?php |
66 | <?php |
67 | Mixins::transition('', 'width 0.5s 0.5s linear'); |
67 | Mixins::transition('', 'width 0.5s 0.5s linear'); |
68 | ?>
|
68 | ?>
|
69 | }
|
69 | }
|
70 | 70 | ||
71 | /* 0.5225s to 0.6475s */
|
71 | /* 0.5225s to 0.6475s */
|
72 | #bow-top-left { |
72 | #bow-top-left { |
73 | height: 0; |
73 | height: 0; |
74 | <?php |
74 | <?php |
75 | Mixins::transition('', 'height 0.125s 0.5225s linear'); |
75 | Mixins::transition('', 'height 0.125s 0.5225s linear'); |
76 | ?>
|
76 | ?>
|
77 | }
|
77 | }
|
78 | 78 | ||
79 | /* at 0.6475s */
|
79 | /* at 0.6475s */
|
80 | #bow-top .text { |
80 | #bow-top .text { |
81 | opacity: 0; |
81 | opacity: 0; |
82 | <?php |
82 | <?php |
83 | Mixins::transition('-property', 'opacity'); |
83 | Mixins::transition('-property', 'opacity'); |
84 | Mixins::transition('-delay', '0.6475s'); |
84 | Mixins::transition('-delay', '0.6475s'); |
85 | Mixins::transition('-timing-function', 'linear'); |
85 | Mixins::transition('-timing-function', 'linear'); |
86 | ?>
|
86 | ?>
|
87 | }
|
87 | }
|
88 | 88 | ||
89 | .empty #bow-top .text { |
89 | .empty #bow-top .text { |
90 | opacity: 1; |
90 | opacity: 1; |
91 | }
|
91 | }
|
92 | 92 | ||
93 | /* 0.6475s to 1.1475s */
|
93 | /* 0.6475s to 1.1475s */
|
94 | #bow-top { |
94 | #bow-top { |
95 | left: 100%; |
95 | left: 100%; |
96 | min-width: auto; |
96 | min-width: auto; |
97 | border-top-left-radius: 0; |
97 | border-top-left-radius: 0; |
98 | border-bottom-left-radius: 0; |
98 | border-bottom-left-radius: 0; |
99 | border-top-right-radius: 1.2em; |
99 | border-top-right-radius: 1.2em; |
100 | border-bottom-right-radius: 1.2em; |
100 | border-bottom-right-radius: 1.2em; |
101 | opacity: 0; |
101 | opacity: 0; |
102 | <?php |
102 | <?php |
103 | Mixins::transition('', |
103 | Mixins::transition('', |
104 | 'left 0.5s 0.6475s linear,'
|
104 | 'left 0.5s 0.6475s linear,'
|
105 | . ' min-width 0s 0.6475s linear,'
|
105 | . ' min-width 0s 0.6475s linear,'
|
106 | . ' border-top-left-radius 0.5s 0.6475s linear,'
|
106 | . ' border-top-left-radius 0.5s 0.6475s linear,'
|
107 | . ' border-top-right-radius 0.5s 0.6475s linear,'
|
107 | . ' border-top-right-radius 0.5s 0.6475s linear,'
|
108 | . ' border-bottom-right-radius 0.5s 0.6475s linear,'
|
108 | . ' border-bottom-right-radius 0.5s 0.6475s linear,'
|
109 | . ' opacity 0s 1.1475s linear'); |
109 | . ' opacity 0s 1.1475s linear'); |
110 | ?>
|
110 | ?>
|
111 | }
|
111 | }
|
112 | 112 | ||
113 | .empty #bow-top { |
113 | .empty #bow-top { |
114 | left: 0%; |
114 | left: 0%; |
115 | min-width: 10em; |
115 | min-width: 10em; |
116 | border-top-left-radius: 1.2em; |
116 | border-top-left-radius: 1.2em; |
117 | border-bottom-left-radius: 1.2em; |
117 | border-bottom-left-radius: 1.2em; |
118 | border-top-right-radius: 1.2em; |
118 | border-top-right-radius: 1.2em; |
119 | border-bottom-right-radius: 1.2em; |
119 | border-bottom-right-radius: 1.2em; |
120 | opacity: 1; |
120 | opacity: 1; |
121 | }
|
121 | }
|
122 | 122 | ||
123 | .multi-display,
|
123 | .multi-display,
|
124 | #content.fixed |
124 | #content.fixed |
125 | {
|
125 | {
|
126 | <?php |
126 | <?php |
127 | Mixins::transition('', |
127 | Mixins::transition('', |
128 | 'top 0.25s 1.1475s linear,'
|
128 | 'top 0.25s 1.1475s linear,'
|
129 | . ' left 0.25s 1.3975s linear'); |
129 | . ' left 0.25s 1.3975s linear'); |
130 | ?>
|
130 | ?>
|
131 | }
|
131 | }
|
132 | 132 | ||
133 | .multi-display
|
133 | .multi-display
|
134 | {
|
134 | {
|
135 | top: 0.2em; |
135 | top: 0.2em; |
136 | left: 0.2em; |
136 | left: 0.2em; |
137 | }
|
137 | }
|
138 | 138 | ||
139 | #content.fixed { |
139 | #content.fixed { |
140 | left: 6.4em; |
140 | left: 6.4em; |
141 | top: 9.6em; |
141 | top: 9.6em; |
142 | }
|
142 | }
|
143 | 143 | ||
144 | .menu .bow |
144 | .menu .bow |
145 | {
|
145 | {
|
146 | background-color: #fc6; |
146 | background-color: #fc6; |
147 | <?php |
147 | <?php |
148 | Mixins::transition('', |
148 | Mixins::transition('', |
149 | 'width 0.5s 0.5s linear,'
|
149 | 'width 0.5s 0.5s linear,'
|
150 | . 'background-color 0s 1.6475s linear'
|
150 | . 'background-color 0s 1.6475s linear'
|
151 | ); |
151 | ); |
152 | ?>
|
152 | ?>
|
153 | }
|
153 | }
|
154 | 154 | ||
155 | .multi-display .lower .bg |
155 | .multi-display .lower .bg |
156 | {
|
156 | {
|
157 | top: 11em; |
157 | top: 11em; |
158 | <?php |
158 | <?php |
159 | Mixins::transition('', 'top 0.25s 1.1475s linear'); |
159 | Mixins::transition('', 'top 0.25s 1.1475s linear'); |
160 | ?>
|
160 | ?>
|
161 | }
|
161 | }
|
162 | 162 | ||
163 | body {
|
163 | body {
|
164 | margin-top: 9.6em; |
164 | margin-top: 9.6em; |
165 | margin-left: 6.4em; |
165 | margin-left: 6.4em; |
166 | <?php |
166 | <?php |
167 | Mixins::transition('', |
167 | Mixins::transition('', |
168 | 'margin-top 0.25s 1.1475s linear,'
|
168 | 'margin-top 0.25s 1.1475s linear,'
|
169 | . ' margin-left 0.25s 1.3975s linear'); |
169 | . ' margin-left 0.25s 1.3975s linear'); |
170 | ?>
|
170 | ?>
|
171 | }
|
171 | }
|
172 | 172 | ||
173 | .multi-display .upper .content #cmd2, |
173 | .multi-display .upper .content #cmd2, |
174 | .multi-display .upper .content #cmd3 |
174 | .multi-display .upper .content #cmd3 |
175 | {
|
175 | {
|
176 | display: none; |
176 | display: none; |
177 | }
|
177 | }
|
178 | 178 | ||
179 | .multi-display .upper .content #cmd1, |
179 | .multi-display .upper .content #cmd1, |
180 | .multi-display .upper .content #cmd4 |
180 | .multi-display .upper .content #cmd4 |
181 | {
|
181 | {
|
182 | right: 0; |
182 | right: 0; |
183 | }
|
183 | }
|
184 | 184 | ||
185 | .multi-display .upper .content .analysis |
185 | .multi-display .upper .content .analysis |
186 | {
|
186 | {
|
187 | right: 5.2em; |
187 | right: 5.2em; |
188 | }
|
188 | }
|
189 | 189 | ||
190 | .multi-display .upper .content .commands |
190 | .multi-display .upper .content .commands |
191 | {
|
191 | {
|
192 | width: 5.2em; |
192 | width: 5.2em; |
193 | }
|
193 | }
|
194 | 194 |