OLD | NEW |
1 /* Copyright 2016 The Chromium Authors. All rights reserved. | 1 /* Copyright 2016 The Chromium Authors. All rights reserved. |
2 * Use of this source code is governed by a BSD-style license that can be | 2 * Use of this source code is governed by a BSD-style license that can be |
3 * found in the LICENSE file. */ | 3 * found in the LICENSE file. */ |
4 | 4 |
5 html { | 5 html { |
6 background-color: rgba(255, 255, 255, 0); | 6 background-color: rgba(255, 255, 255, 0); |
7 } | 7 } |
8 | 8 |
9 #ui { | 9 #ui { |
10 --scaleFactor: 4; | |
11 left: 0; | 10 left: 0; |
| 11 max-width: 1920px; |
12 position: absolute; | 12 position: absolute; |
13 top: 0; | 13 top: 0; |
14 transform: scale(0.25, 0.25); | |
15 transform-origin: left top; | 14 transform-origin: left top; |
16 width: 400%; | |
17 } | 15 } |
18 | 16 |
19 /* This class manages the position of elements on the texture page. | 17 /* This class manages the position of elements on the texture page. |
20 * Each UI element should have a bounding div of this class. */ | 18 * Each UI element should have a bounding div of this class. */ |
21 .ui-element { | 19 .ui-element { |
22 float: left; | 20 float: left; |
23 margin: 2px; | 21 margin: 2px; |
24 } | 22 } |
25 | 23 |
26 .webvr-message-box { | 24 .webvr-message-box { |
27 align-items: center; | 25 align-items: center; |
28 display: flex; | 26 display: flex; |
29 flex-direction: column; | 27 flex-direction: column; |
30 justify-content: center; | 28 justify-content: center; |
31 } | 29 } |
32 | 30 |
33 /* Permanent security warning for WebVR. */ | |
34 #webvr-not-secure-permanent { | |
35 height: 128px; | |
36 width: 512px; | |
37 } | |
38 | |
39 #webvr-not-secure-permanent .webvr-not-secure-icon { | 31 #webvr-not-secure-permanent .webvr-not-secure-icon { |
40 display: inline-block; | 32 display: inline-block; |
41 margin: 20px 0; | 33 margin: 20px 0; |
42 vertical-align: middle; | 34 vertical-align: middle; |
43 } | 35 } |
44 | 36 |
45 #webvr-not-secure-permanent .webvr-string { | 37 #webvr-not-secure-permanent .webvr-string { |
46 display: inline-block; | 38 display: inline-block; |
47 margin: 20px 10.5px; | 39 margin: 20px 10.5px; |
48 vertical-align: middle; | 40 vertical-align: middle; |
49 } | 41 } |
50 | 42 |
51 /* This is a single-line (nowrap) short message. The width has some elasticity | 43 /* This is a single-line (nowrap) short message. The width is elastic for |
52 * for translations, and the underlying string had a request to translators | 44 * translations, and the underlying string had a request to translators |
53 * to keep it short. The maximum is based on the fixed-size container DIV, | 45 * to keep it short. */ |
54 * excess will be clipped. There's space for about twice the length of the | |
55 * English "Not secure" message. */ | |
56 #webvr-not-secure-permanent .webvr-box { | 46 #webvr-not-secure-permanent .webvr-box { |
57 background-color: white; | 47 background-color: white; |
58 border-radius: 6px; | 48 border-radius: 6px; |
59 box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); | 49 box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); |
60 box-sizing: border-box; | 50 box-sizing: border-box; |
61 color: #444; | 51 color: #444; |
62 font-size: 26px; | 52 font-size: 26px; |
63 height: 78px; | 53 height: 78px; |
64 max-width: 472px; | |
65 min-width: 226px; | 54 min-width: 226px; |
66 overflow: hidden; | 55 overflow: hidden; |
67 padding: 0 20px; | 56 padding: 0 20px; |
68 white-space: nowrap; | 57 white-space: nowrap; |
69 } | 58 } |
70 | 59 |
71 /* Transient security warning for WebVR. */ | 60 /* This uses fixed width but the height is elastic for translations. */ |
72 #webvr-not-secure-transient { | |
73 height: 256px; | |
74 width: 512px; | |
75 } | |
76 | |
77 /* This uses fixed width but the height has some elasticity for translations. | |
78 * The maximum is based on the fixed-size container DIV, excess will be | |
79 * clipped. */ | |
80 #webvr-not-secure-transient > div { | 61 #webvr-not-secure-transient > div { |
81 background-color: rgba(26, 26, 26, 0.8); | 62 background-color: rgba(26, 26, 26, 0.8); |
82 border-radius: 6px; | 63 border-radius: 6px; |
83 box-sizing: border-box; | 64 box-sizing: border-box; |
84 color: white; | 65 color: white; |
85 display: flex; | 66 display: flex; |
86 flex-direction: column; | 67 flex-direction: column; |
87 font-size: 26px; | 68 font-size: 26px; |
88 justify-content: center; | 69 justify-content: center; |
89 line-height: 1.4; | 70 line-height: 1.4; |
90 max-height: 210px; | |
91 min-height: 160px; | 71 min-height: 160px; |
92 overflow: hidden; | 72 overflow: hidden; |
93 padding: 20px; | 73 padding: 20px; |
94 text-align: center; | 74 text-align: center; |
95 width: 512px; | 75 width: 512px; |
96 } | 76 } |
97 | 77 |
98 .round-button .button { | 78 .round-button .button { |
99 background-color: #eee; | 79 background-color: #eee; |
100 background-position: center; | 80 background-position: center; |
(...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
136 background-color: #555; | 116 background-color: #555; |
137 color: white; | 117 color: white; |
138 font-size: 24px; | 118 font-size: 24px; |
139 padding: 12px; | 119 padding: 12px; |
140 } | 120 } |
141 | 121 |
142 #omni-container { | 122 #omni-container { |
143 --tranX: 0; | 123 --tranX: 0; |
144 --tranY: -0.65; | 124 --tranY: -0.65; |
145 --tranZ: -1.2; | 125 --tranZ: -1.2; |
| 126 height: 164px; |
| 127 overflow: hidden; |
| 128 width: 512px; |
146 } | 129 } |
147 | 130 |
148 #omni { | 131 #omni { |
149 align-items: center; | 132 align-items: center; |
150 background-color: rgba(255, 255, 255, 0.9); | 133 background-color: rgba(255, 255, 255, 0.9); |
151 border-radius: 100px; | 134 border-radius: 100px; |
152 box-sizing: border-box; | 135 box-sizing: border-box; |
153 display: flex; | 136 display: flex; |
154 height: 104px; | 137 height: 104px; |
155 justify-content: center; | 138 justify-content: center; |
156 margin-bottom: 60px; | 139 margin-bottom: 60px; |
157 margin-top: 0; | 140 margin-top: 0; |
158 opacity: 1; | 141 opacity: 1; |
| 142 overflow: hidden; |
159 transition: opacity 500ms ease, margin-top 500ms ease; | 143 transition: opacity 500ms ease, margin-top 500ms ease; |
160 white-space: nowrap; | 144 white-space: nowrap; |
161 width: 512px; | 145 width: 512px; |
162 } | 146 } |
163 | 147 |
164 #omni-content { | 148 #omni-content { |
165 align-items: center; | 149 align-items: center; |
166 display: flex; | 150 display: flex; |
167 max-width: 448px; | 151 max-width: 448px; |
168 } | 152 } |
(...skipping 25 matching lines...) Expand all Loading... |
194 border: 4px solid rgb(86, 203, 255); | 178 border: 4px solid rgb(86, 203, 255); |
195 } | 179 } |
196 | 180 |
197 #omni.idle { | 181 #omni.idle { |
198 background-color: #ececec; | 182 background-color: #ececec; |
199 } | 183 } |
200 | 184 |
201 #omni.idle #domain { | 185 #omni.idle #domain { |
202 color: black; | 186 color: black; |
203 } | 187 } |
OLD | NEW |