| OLD | NEW |
| 1 /* Copyright 2013 The Chromium Authors. All rights reserved. | 1 /* Copyright 2013 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 #managed-user-created { | 5 #managed-user-created { |
| 6 width: 612px; | 6 width: 612px; |
| 7 } | 7 } |
| 8 | 8 |
| 9 /* Carousel slides. The way the carousel works is by looking at the currently | 9 #managed-user-created-image { |
| 10 * selected radio box, which tells us which slide is visible now. */ | 10 background-image: url('managed_user_create_confirm.png'); |
| 11 height: 177px; /* Placeholder value */ |
| 12 } |
| 11 | 13 |
| 12 .managed-user-created-slide-text { | 14 #managed-user-created-text { |
| 13 margin-top: 10px; | 15 margin-top: 10px; |
| 14 white-space: pre-wrap; | 16 white-space: pre-wrap; |
| 15 word-wrap: break-word; | 17 word-wrap: break-word; |
| 16 } | 18 } |
| 17 | |
| 18 .managed-user-created-slide-image { | |
| 19 height: 177px; /* Placeholder value */ | |
| 20 } | |
| 21 | |
| 22 .managed-user-created-slide:nth-child(1) .managed-user-created-slide-image { | |
| 23 background-image: url('managed_user_create_confirm_1.png'); | |
| 24 } | |
| 25 | |
| 26 .managed-user-created-slide:nth-child(2) .managed-user-created-slide-image { | |
| 27 background-image: url('managed_user_create_confirm_2.png'); | |
| 28 } | |
| 29 | |
| 30 .managed-user-created-slide:nth-child(3) .managed-user-created-slide-image { | |
| 31 background-image: url('managed_user_create_confirm_3.png'); | |
| 32 } | |
| 33 | |
| 34 /* Need to be adjusted to the number of slides. */ | |
| 35 #managed-user-created-slide-deck { | |
| 36 /* Number of slides multiplied by 100%. */ | |
| 37 width: 300%; | |
| 38 } | |
| 39 | |
| 40 #managed-user-created-slide-deck .managed-user-created-slide { | |
| 41 float: left; | |
| 42 /* 100% divided by number of slides. */ | |
| 43 width: 33.334%; | |
| 44 } | |
| 45 | |
| 46 #managed-user-created-viewport { | |
| 47 overflow: hidden; | |
| 48 width: 100%; | |
| 49 } | |
| 50 | |
| 51 html[dir='rtl'] #managed-user-created-slide-deck .managed-user-created-slide { | |
| 52 float: right; | |
| 53 } | |
| 54 | |
| 55 .content-area #managed-user-created-slide-deck { | |
| 56 -webkit-transition: all 750ms cubic-bezier(0.75, 0.00, 0.25, 1.00); | |
| 57 } | |
| 58 | |
| 59 /* The small circular buttons/indicators. They are labels for the radio boxes | |
| 60 * that control the slides, so clicking them will actually check the proper | |
| 61 * radio box for that slide and change the slide. */ | |
| 62 | |
| 63 #managed-user-created-small-buttons { | |
| 64 -webkit-box-flex: 1; | |
| 65 -webkit-margin-start: 274px; | |
| 66 } | |
| 67 | |
| 68 #managed-user-created-small-buttons button { | |
| 69 background: rgb(186, 186, 186); | |
| 70 border-radius: 4px; | |
| 71 border-width: 0; | |
| 72 display: inline-block; | |
| 73 min-height: 8px; | |
| 74 min-width: 8px; | |
| 75 padding: 0; | |
| 76 } | |
| 77 | |
| 78 #managed-user-created-small-buttons | |
| 79 .managed-user-created-small-button-selected { | |
| 80 background: rgb(67, 67, 67); | |
| 81 } | |
| 82 | |
| 83 /* Next and previous arrows. */ | |
| 84 | |
| 85 #managed-user-created-slide-arrows { | |
| 86 height: 30px; | |
| 87 position: absolute; | |
| 88 /* Needs to be adjusted according to the slide image size. */ | |
| 89 top: 122px; | |
| 90 width: 100%; | |
| 91 } | |
| 92 | |
| 93 #managed-user-created-slide-arrows button { | |
| 94 border-radius: 15px; | |
| 95 border-width: 0; | |
| 96 box-shadow: none; | |
| 97 height: 30px; | |
| 98 min-height: 30px; | |
| 99 min-width: 30px; | |
| 100 width: 30px; | |
| 101 } | |
| 102 | |
| 103 #managed-user-created-left-slide-arrow { | |
| 104 -webkit-transform: scaleX(-1); | |
| 105 background: url('arrow_next.png') no-repeat center, white; | |
| 106 float: left; | |
| 107 } | |
| 108 | |
| 109 #managed-user-created-right-slide-arrow { | |
| 110 background: url('arrow_next.png') no-repeat center, white; | |
| 111 float: right; | |
| 112 } | |
| OLD | NEW |