Chromium Code Reviews| OLD | NEW |
|---|---|
| 1 /* Copyright 2013 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 | 5 |
| 6 /* Overrides for the desktop user manager screen. */ | 6 /* Overrides for the desktop user manager screen. */ |
| 7 | 7 |
| 8 .oobe-display { | 8 .oobe-display { |
| 9 background-color: #eee; | 9 background-color: #eee; |
| 10 } | 10 } |
| 11 | 11 |
| 12 #outer-container { | 12 #outer-container { |
| 13 min-height: 0; | 13 min-height: 0; |
| 14 } | 14 } |
| 15 | 15 |
| 16 .bubble.faded { | 16 .bubble.faded { |
| 17 opacity: 0; | 17 opacity: 0; |
| 18 } | 18 } |
| 19 | 19 |
| 20 .pod { | 20 .pod { |
| 21 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); | 21 box-shadow: 0 1px 2px rgba(0,0,0,0.1); |
|
tommycli
2016/02/08 18:45:19
Why did the spaces go away?
Moe
2016/02/09 00:15:33
used an external css cleanup tool...
| |
| 22 height: 226px; | 22 height: 226px; |
| 23 /* On non-retina desktop, the text is blurry if we use the scale3d() | 23 /* On non-retina desktop, the text is blurry if we use the scale3d() |
| 24 inherited from user_pod_row.js */ | 24 inherited from user_pod_row.js */ |
| 25 transform: scale(0.9); | 25 transform: scale(0.9); |
| 26 } | 26 } |
| 27 | 27 |
| 28 podrow[ncolumns='6'] .pod { | 28 podrow[ncolumns='6'] .pod { |
| 29 transform: scale(0.8); | 29 transform: scale(0.8); |
| 30 } | 30 } |
| 31 | 31 |
| 32 /* Because of crbug.com/406529, the text in the .name div is janky if there's | 32 /* Because of crbug.com/406529, the text in the .name div is janky if there's |
| 33 both a transform:scale and a transition:opacity applied to a div, so we must | 33 both a transform:scale and a transition:opacity applied to a div, so we must |
| 34 apply the opacity change to the children instead. */ | 34 apply the opacity change to the children instead. */ |
| 35 .pod.faded { | 35 .pod.faded { |
| 36 opacity: 1; | 36 opacity: 1; |
| 37 } | 37 } |
| 38 | 38 |
| 39 .pod.faded .user-image-pane, | 39 .pod.faded .user-image-pane, |
| 40 .pod.faded .main-pane { | 40 .pod.faded .main-pane { |
| 41 opacity: .4; | 41 opacity: .4; |
| 42 } | 42 } |
| 43 | 43 |
| 44 .pod.hovered:not(.focused) { | 44 .pod.hovered:not(.focused) { |
| 45 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); | 45 box-shadow: 0 2px 4px rgba(0,0,0,0.2); |
| 46 } | 46 } |
| 47 | 47 |
| 48 .pod.focused { | 48 .pod.focused { |
| 49 box-shadow: 0 16px 21px rgba(0, 0, 0, 0.2); | 49 box-shadow: 0 16px 21px rgba(0,0,0,0.2); |
| 50 transform: scale(1) !important; | 50 transform: scale(1) !important; |
| 51 } | 51 } |
| 52 | 52 |
| 53 .pod.focused.locked { | 53 .pod.focused.locked { |
| 54 box-shadow: 0 12px 21px rgba(0, 0, 0, 0.2); | 54 box-shadow: 0 12px 21px rgba(0,0,0,0.2); |
| 55 height: 220px; | 55 height: 220px; |
| 56 } | 56 } |
| 57 | 57 |
| 58 .user-image-pane { | 58 .user-image-pane { |
| 59 border-top-left-radius: 2px; | 59 border-top-left-radius: 2px; |
| 60 border-top-right-radius: 2px; | 60 border-top-right-radius: 2px; |
| 61 height: 180px; | 61 height: 180px; |
| 62 left: 0; | 62 left: 0; |
| 63 top: 0; | 63 top: 0; |
| 64 width: 180px; | 64 width: 180px; |
| (...skipping 11 matching lines...) Expand all Loading... | |
| 76 height: 180px; | 76 height: 180px; |
| 77 width: 180px; | 77 width: 180px; |
| 78 } | 78 } |
| 79 | 79 |
| 80 .pod input[type='password'] { | 80 .pod input[type='password'] { |
| 81 height: 45px; /* 1px shorter as to not overlap the pod's rounded corners */ | 81 height: 45px; /* 1px shorter as to not overlap the pod's rounded corners */ |
| 82 top: 1px; | 82 top: 1px; |
| 83 } | 83 } |
| 84 | 84 |
| 85 .pod .indicator-container { | 85 .pod .indicator-container { |
| 86 background-color: rgba(255, 255, 255, 0.85); | 86 background-color: rgba(255,255,255,0.85); |
| 87 border-radius: 16px; | 87 border-radius: 16px; |
| 88 height: 32px; | 88 height: 32px; |
| 89 left: 8px; | 89 left: 8px; |
| 90 position: absolute; | 90 position: absolute; |
| 91 top: 8px; | 91 top: 8px; |
| 92 } | 92 } |
| 93 | 93 |
| 94 html[dir=rtl] .pod .indicators { | 94 html[dir=rtl] .pod .indicators { |
| 95 left: auto; | 95 left: auto; |
| 96 right: 8px; | 96 right: 8px; |
| (...skipping 11 matching lines...) Expand all Loading... | |
| 108 | 108 |
| 109 /* Using -webkit-mask on the indicators allows us to tweak the color. */ | 109 /* Using -webkit-mask on the indicators allows us to tweak the color. */ |
| 110 .pod .indicator-container > div { | 110 .pod .indicator-container > div { |
| 111 -webkit-mask-position: center; | 111 -webkit-mask-position: center; |
| 112 -webkit-mask-repeat: no-repeat; | 112 -webkit-mask-repeat: no-repeat; |
| 113 -webkit-mask-size: 24px; | 113 -webkit-mask-size: 24px; |
| 114 } | 114 } |
| 115 | 115 |
| 116 .pod.locked .locked-indicator { | 116 .pod.locked .locked-indicator { |
| 117 -webkit-mask-image: url(../../../../ui/webui/resources/images/lock.svg); | 117 -webkit-mask-image: url(../../../../ui/webui/resources/images/lock.svg); |
| 118 background-color: #757575; | 118 background-color: rgb(117,117,117); |
| 119 display: initial; | 119 display: initial; |
| 120 } | 120 } |
| 121 | 121 |
| 122 .pod.legacy-supervised .legacy-supervised-indicator { | 122 .pod.legacy-supervised .legacy-supervised-indicator { |
| 123 -webkit-mask-image: | 123 -webkit-mask-image: |
| 124 url(../../../../ui/webui/resources/images/supervisor_account.svg); | 124 url(../../../../ui/webui/resources/images/supervisor_account.svg); |
| 125 background-color: rgb(66, 133, 244); | 125 background-color: rgb(66,133,244); |
| 126 display: initial; | 126 display: initial; |
| 127 } | 127 } |
| 128 | 128 |
| 129 .pod.child .child-indicator { | 129 .pod.child .child-indicator { |
| 130 -webkit-mask-image: | 130 -webkit-mask-image: |
| 131 url(../../../../ui/webui/resources/images/account_child_invert.svg); | 131 url(../../../../ui/webui/resources/images/account_child_invert.svg); |
| 132 background-color: rgb(66, 133, 244); | 132 background-color: rgb(66,133,244); |
| 133 display: initial; | 133 display: initial; |
| 134 } | 134 } |
| 135 | 135 |
| 136 .main-pane { | 136 .main-pane { |
| 137 left: 0; | 137 left: 0; |
| 138 top: 0; | 138 top: 0; |
| 139 } | 139 } |
| 140 | 140 |
| 141 html[dir=rtl] .main-pane { | 141 html[dir=rtl] .main-pane { |
| 142 right: 0; | 142 right: 0; |
| 143 } | 143 } |
| 144 | 144 |
| 145 .name-container, | 145 .name-container, |
| 146 .pod.focused:not(.multiprofiles-policy-applied) .auth-container { | 146 .pod.focused:not(.multiprofiles-policy-applied) .auth-container { |
| 147 top: 180px; | 147 top: 180px; |
| 148 width: 180px; | 148 width: 180px; |
| 149 } | 149 } |
| 150 | 150 |
| 151 .pod.focused:not(.locked) .name-container { | 151 .pod.focused:not(.locked) .name-container { |
| 152 display: block; | 152 display: block; |
| 153 } | 153 } |
| 154 | 154 |
| 155 .pod .name { | 155 .pod .name { |
| 156 color: #363636; | 156 color: rgb(54,54,54); |
| 157 font-size: 15px; | 157 font-size: 15px; |
| 158 margin-top: 11px; | 158 margin-top: 11px; |
| 159 } | 159 } |
| 160 | 160 |
| 161 .pod.focused:not(.locked) .auth-container { | 161 .pod.focused:not(.locked) .auth-container { |
| 162 display: none; | 162 display: none; |
| 163 } | 163 } |
| 164 | 164 |
| 165 .pod[auth-type='offlinePassword'].focused.locked .password-entry-container { | 165 .pod[auth-type='offlinePassword'].focused.locked .password-entry-container { |
| 166 display: flex; | 166 display: flex; |
| 167 flex: auto; | 167 flex: auto; |
| 168 } | 168 } |
| 169 | 169 |
| 170 .action-box-area { | 170 .action-box-area { |
| 171 background-color: #f5f5f5; | 171 background-color: rgb(245,245,245); |
| 172 height: 24px; | 172 height: 24px; |
| 173 /* Because of crbug.com/406529, the text in the .name div is janky if there's | 173 /* Because of crbug.com/406529, the text in the .name div is janky if there's |
| 174 an opacity transition in this div. */ | 174 an opacity transition in this div. */ |
| 175 transition: none; | 175 transition: none; |
| 176 width: 24px; | 176 width: 24px; |
| 177 } | 177 } |
| 178 | 178 |
| 179 .action-box-button, | 179 .action-box-button, |
| 180 .action-box-button:hover, | 180 .action-box-button:hover, |
| 181 .action-box-area.active .action-box-button { | 181 .action-box-area.active .action-box-button { |
| (...skipping 17 matching lines...) Expand all Loading... | |
| 199 .action-box-remove-user-warning .remove-warning-button { | 199 .action-box-remove-user-warning .remove-warning-button { |
| 200 height: 30px; | 200 height: 30px; |
| 201 } | 201 } |
| 202 | 202 |
| 203 .action-box-remove-user-warning .remove-warning-button:focus { | 203 .action-box-remove-user-warning .remove-warning-button:focus { |
| 204 /* Override the default blue border inherited from | 204 /* Override the default blue border inherited from |
| 205 button.custom-appearance:focus. */ | 205 button.custom-appearance:focus. */ |
| 206 border: 1px solid transparent !important; | 206 border: 1px solid transparent !important; |
| 207 box-shadow: inset 0 0 0 1px #fff; | 207 box-shadow: inset 0 0 0 1px #fff; |
| 208 } | 208 } |
| OLD | NEW |