OLD | NEW |
1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 /* Copyright (c) 2012 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 #display-options { |
| 6 background-color: rgb(240, 240, 240); |
| 7 } |
| 8 |
| 9 #display-options-content-area { |
| 10 padding: 0; |
| 11 } |
| 12 |
5 #display-options-displays-view-host { | 13 #display-options-displays-view-host { |
6 padding: 20px; | 14 padding: 20px 0 20px 0; |
7 } | 15 } |
8 | 16 |
9 #display-options-displays-view { | 17 #display-options-displays-view { |
10 height: 300px; | |
11 position: relative; | 18 position: relative; |
| 19 width: 100%; |
| 20 } |
| 21 |
| 22 #display-options-displays-view-mirroring { |
| 23 margin: 20px 0 20px 0; |
12 } | 24 } |
13 | 25 |
14 #display-configurations { | 26 #display-configurations { |
15 border-top: 1px solid blue; | 27 background-color: white; |
16 padding-top: 20px; | 28 border-top: 1px solid lightgrey; |
17 text-align: right; | 29 height: 65px; |
| 30 padding: 15px; |
| 31 } |
| 32 |
| 33 /* The arrow at the border #display-configurations to point the focused display. |
| 34 * This is achieved by a square rotated by 45-deg, and it has border at the |
| 35 * upper-half, which were left/top before the rotation. */ |
| 36 #display-configuration-arrow { |
| 37 -webkit-transform: rotate(45deg); |
| 38 background-color: white; |
| 39 border-left: 1px solid lightgrey; |
| 40 border-top: 1px solid lightgrey; |
| 41 height: 20px; |
| 42 position: absolute; |
| 43 width: 20px; |
| 44 z-index: 1; |
| 45 } |
| 46 |
| 47 #display-options-buttons-container { |
| 48 float: right; |
| 49 z-index: 2; |
| 50 } |
| 51 |
| 52 html[dir=rtl] #display-options-buttons-container { |
| 53 float: left; |
| 54 } |
| 55 |
| 56 |
| 57 #selected-display-data-container { |
| 58 float: left; |
| 59 line-height: 200%; |
| 60 z-index: 2; |
| 61 } |
| 62 |
| 63 html[dir=rtl] #selected-display-data-container { |
| 64 float: right; |
| 65 } |
| 66 |
| 67 #selected-display-name { |
| 68 font-weight: bold; |
| 69 } |
| 70 |
| 71 #display-launcher { |
| 72 background-color: lightgrey; |
| 73 bottom: 0; |
| 74 height: 10px; |
| 75 position: absolute; |
18 } | 76 } |
19 | 77 |
20 .displays-display { | 78 .displays-display { |
21 background-color: white; | 79 background: rgb(240, 240, 240); |
22 border: dashed 1px; | 80 border: solid 1px; |
| 81 font-weight: bold; |
23 position: absolute; | 82 position: absolute; |
24 text-align: center; | 83 text-align: center; |
25 vertical-align: middle; | 84 vertical-align: middle; |
| 85 z-index: 2; |
26 } | 86 } |
27 | 87 |
28 .displays-primary { | 88 .display-mirrored { |
29 border: solid 1px blue; | 89 border: dashed 1px; |
30 } | 90 } |
31 | 91 |
32 .displays-focused { | 92 .displays-focused { |
33 border: solid 2px; | 93 border: solid 2px rgb(0, 138, 255); |
| 94 color: rgb(0, 138, 255); |
34 } | 95 } |
| 96 |
| 97 .display-options-single-button-container { |
| 98 margin: 5px 0 5px 0; |
| 99 } |
| 100 |
| 101 .display-options-button { |
| 102 width: 120px; |
| 103 } |
OLD | NEW |