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.2); | 6 background-color: rgba(255, 255, 255, 0.2); |
7 font-size: 20px; | |
8 } | 7 } |
9 | 8 |
10 .ui-button { | 9 .ui-button { |
11 background: white; | 10 background: white; |
12 border-radius: 6px; | 11 border-radius: 6px; |
13 overflow: hidden; | 12 overflow: hidden; |
14 position: absolute; | 13 position: absolute; |
15 text-align: center; | 14 text-align: center; |
16 vertical-align: middle; | 15 vertical-align: middle; |
17 } | 16 } |
| 17 |
| 18 .webvr-message-box { |
| 19 align-items: center; |
| 20 display: flex; |
| 21 flex-direction: column; |
| 22 justify-content: center; |
| 23 position: absolute; |
| 24 } |
| 25 |
| 26 /* Permanent security warning for WebVR. This uses a fixed-size absolutely |
| 27 * positioned DIV, the rectangle must match kWebVrWarningPermanentRect |
| 28 * in vr_shell.cc for use as a GL textured quad. */ |
| 29 #webvr-not-secure-permanent { |
| 30 height: 128px; |
| 31 left: 0; |
| 32 top: 0; |
| 33 width: 512px; |
| 34 } |
| 35 |
| 36 #webvr-not-secure-permanent .webvr-not-secure-icon { |
| 37 display: inline-block; |
| 38 margin: 20px 0; |
| 39 vertical-align: middle; |
| 40 } |
| 41 |
| 42 #webvr-not-secure-permanent .webvr-string { |
| 43 display: inline-block; |
| 44 margin: 20px 10.5px; |
| 45 vertical-align: middle; |
| 46 } |
| 47 |
| 48 /* This is a single-line (nowrap) short message. The width has some elasticity |
| 49 * for translations, and the underlying string had a request to translators |
| 50 * to keep it short. The maximum is based on the fixed-size container DIV, |
| 51 * excess will be clipped. There's space for about twice the length of the |
| 52 * English "Not secure" message. */ |
| 53 #webvr-not-secure-permanent .webvr-box { |
| 54 background-color: white; |
| 55 border-radius: 6px; |
| 56 box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); |
| 57 box-sizing: border-box; |
| 58 color: #444; |
| 59 font-size: 26px; |
| 60 height: 78px; |
| 61 max-width: 472px; |
| 62 min-width: 226px; |
| 63 overflow: hidden; |
| 64 padding: 0 20px; |
| 65 white-space: nowrap; |
| 66 } |
| 67 |
| 68 /* Transient security warning for WebVR. This uses a fixed-size absolutely |
| 69 * positioned DIV, the rectangle must match kWebVrWarningTransientRect |
| 70 * in vr_shell.cc for use as a GL textured quad. */ |
| 71 #webvr-not-secure-transient { |
| 72 height: 256px; |
| 73 left: 0; |
| 74 top: 128px; |
| 75 width: 512px; |
| 76 } |
| 77 |
| 78 /* This uses fixed width but the height has some elasticity for translations. |
| 79 * The maximum is based on the fixed-size container DIV, excess will be |
| 80 * clipped. */ |
| 81 #webvr-not-secure-transient > div { |
| 82 background-color: rgba(26, 26, 26, 0.8); |
| 83 border-radius: 6px; |
| 84 box-sizing: border-box; |
| 85 color: white; |
| 86 display: flex; |
| 87 flex-direction: column; |
| 88 font-size: 26px; |
| 89 justify-content: center; |
| 90 line-height: 1.4; |
| 91 max-height: 210px; |
| 92 min-height: 160px; |
| 93 padding: 20px; |
| 94 text-align: center; |
| 95 width: 512px; |
| 96 } |
OLD | NEW |