 Chromium Code Reviews
 Chromium Code Reviews Issue 10919253:
  Fix img misalign and hide "by" when nothing selected in new wallpaepr picker ui  (Closed) 
  Base URL: svn://svn.chromium.org/chrome/trunk/src
    
  
    Issue 10919253:
  Fix img misalign and hide "by" when nothing selected in new wallpaepr picker ui  (Closed) 
  Base URL: svn://svn.chromium.org/chrome/trunk/src| 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 html { | 5 html { | 
| 6 height: 100%; | 6 height: 100%; | 
| 7 } | 7 } | 
| 8 | 8 | 
| 9 body { | 9 body { | 
| 10 background-color: #f1f1f1; | 10 background-color: #f1f1f1; | 
| (...skipping 64 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 75 padding: 10px 2px 4px 2px; | 75 padding: 10px 2px 4px 2px; | 
| 76 } | 76 } | 
| 77 | 77 | 
| 78 #category-container, | 78 #category-container, | 
| 79 #custom-container { | 79 #custom-container { | 
| 80 -webkit-box-flex: 1; | 80 -webkit-box-flex: 1; | 
| 81 -webkit-box-orient: vertical; | 81 -webkit-box-orient: vertical; | 
| 82 display: -webkit-box; | 82 display: -webkit-box; | 
| 83 } | 83 } | 
| 84 | 84 | 
| 85 #category-container[hidden], | |
| 86 #custom-container[hidden] { | |
| 87 display: none; | |
| 88 } | |
| 89 | |
| 90 #custom-container { | 85 #custom-container { | 
| 91 background-color: #FFF; | 86 background-color: #FFF; | 
| 92 margin: 10px; | 87 margin: 10px; | 
| 93 padding: 10px 40px; | 88 padding: 10px 40px; | 
| 94 } | 89 } | 
| 95 | 90 | 
| 96 #custom-container > div { | 91 #custom-container > div { | 
| 97 margin: 10px 0 5px 0; | 92 margin: 10px 0 5px 0; | 
| 98 } | 93 } | 
| 99 | 94 | 
| (...skipping 14 matching lines...) Expand all Loading... | |
| 114 | 109 | 
| 115 .image-picker [role=listitem] { | 110 .image-picker [role=listitem] { | 
| 116 border: 1px solid rgba(0, 0, 0, 0.15); | 111 border: 1px solid rgba(0, 0, 0, 0.15); | 
| 117 border-radius: 4px; | 112 border-radius: 4px; | 
| 118 height: 80px; | 113 height: 80px; | 
| 119 margin: 10px; | 114 margin: 10px; | 
| 120 padding: 2px; | 115 padding: 2px; | 
| 121 width: 128px; | 116 width: 128px; | 
| 122 } | 117 } | 
| 123 | 118 | 
| 119 /* The width and height of img tag need to be set here. Otherwise, incorrect | |
| 120 * image size may be used when layout. Some images may be misaligned as a | |
| 
flackr
2012/09/13 20:55:01
grammar nit: "Otherwise, an incorrect image size m
 
bshe
2012/09/13 21:13:54
Done.
 | |
| 121 * result. See http://code.google.com/p/chromium/issues/detail?id=148480 for | |
| 122 * screen shot. | |
| 123 */ | |
| 124 .image-picker img { | |
| 125 height: 80px; | |
| 126 width: 128px; | |
| 127 } | |
| 128 | |
| 124 .image-picker [selected][lead] { | 129 .image-picker [selected][lead] { | 
| 125 border: 2px solid rgb(0, 102, 204); | 130 border: 2px solid rgb(0, 102, 204); | 
| 126 padding: 1px; | 131 padding: 1px; | 
| 127 } | 132 } | 
| 128 | 133 | 
| 129 .wallpaper-attr { | 134 #wallpaper-attribute { | 
| 130 -webkit-box-orient: vertical; | 135 -webkit-box-orient: vertical; | 
| 131 display: -webkit-box; | 136 display: -webkit-box; | 
| 132 } | 137 } | 
| 133 | 138 | 
| 134 .bottom-bar { | 139 .bottom-bar { | 
| 135 -webkit-box-align: center; | 140 -webkit-box-align: center; | 
| 136 -webkit-box-orient: horizontal; | 141 -webkit-box-orient: horizontal; | 
| 137 -webkit-box-pack: end; | 142 -webkit-box-pack: end; | 
| 138 display: -webkit-box; | 143 display: -webkit-box; | 
| 139 height: 30px; | 144 height: 30px; | 
| 140 padding: 10px 15px; | 145 padding: 10px 15px; | 
| 141 } | 146 } | 
| 142 | 147 | 
| 143 .bottom-bar > .spacer { | 148 .bottom-bar > .spacer { | 
| 144 -webkit-box-flex: 1; | 149 -webkit-box-flex: 1; | 
| 145 } | 150 } | 
| 146 | 151 | 
| 147 /* Custom wallpaper thumbnail container. */ | 152 /* Custom wallpaper thumbnail container. */ | 
| 148 #preview { | 153 #preview { | 
| 149 -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); | 154 -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); | 
| 150 height: 80px; | 155 height: 80px; | 
| 151 width: 128px; | 156 width: 128px; | 
| 152 } | 157 } | 
| 158 | |
| 159 /* [hidden] does display:none, but its priority is too low. */ | |
| 160 [hidden] { | |
| 161 display: none !important; | |
| 162 } | |
| OLD | NEW |