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 html.col-resize * { | 9 html.col-resize * { |
10 cursor: col-resize !important; | 10 cursor: col-resize !important; |
(...skipping 1165 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1176 } | 1176 } |
1177 | 1177 |
1178 .thumbnail-bottom { | 1178 .thumbnail-bottom { |
1179 -webkit-box-align: center; | 1179 -webkit-box-align: center; |
1180 -webkit-box-orient: horizontal; | 1180 -webkit-box-orient: horizontal; |
1181 -webkit-box-pack: center; | 1181 -webkit-box-pack: center; |
1182 bottom: 0; | 1182 bottom: 0; |
1183 cursor: auto; | 1183 cursor: auto; |
1184 display: -webkit-box; | 1184 display: -webkit-box; |
1185 left: 0; | 1185 left: 0; |
1186 padding: 0 5px; | 1186 padding: 0 10px; |
1187 position: absolute; | 1187 position: absolute; |
1188 right: 0; | 1188 right: 0; |
1189 } | 1189 } |
1190 | 1190 |
1191 .thumbnail-bottom .filename-label { | 1191 .thumbnail-bottom .filename-label { |
1192 -webkit-box-flex: 1; | 1192 -webkit-box-flex: 1; |
1193 } | 1193 } |
1194 | 1194 |
1195 /* Styles specific for the grid view. */ | 1195 /* Styles specific for the grid view. */ |
1196 | 1196 |
1197 /* The item width and margins are chosen so that the standard File Open/Save | 1197 /* The item width and margins are chosen so that the standard File Open/Save |
1198 dialogs have three nicely aligned columns of thumbnails. */ | 1198 dialogs have three nicely aligned columns of thumbnails. */ |
1199 .thumbnail-grid .thumbnail-item { | 1199 body:not([new-ui]) .thumbnail-grid .thumbnail-item { |
1200 border: 2px solid transparent; /* Selection will make the border visible. */ | 1200 -webkit-margin-start: 8px; |
1201 margin-left: 8px; | 1201 border: 1px solid transparent; /* Selection will make the border visible. */ |
1202 margin-top: 7px; | 1202 margin-top: 7px; |
1203 padding: 0; | 1203 padding: 0; |
1204 position: relative; | 1204 position: relative; |
1205 text-align: center; | 1205 text-align: center; |
1206 } | 1206 } |
1207 | 1207 |
1208 .thumbnail-grid .thumbnail-frame { | 1208 body[new-ui] .thumbnail-grid .thumbnail-item { |
| 1209 -webkit-margin-start: 8px; |
| 1210 border: 3px solid transparent; /* Selection will make the border visible. */ |
| 1211 margin-top: 7px; |
| 1212 padding: 0; |
| 1213 position: relative; |
| 1214 } |
| 1215 |
| 1216 body:not([new-ui]) .thumbnail-grid .thumbnail-frame { |
1209 background-image: -webkit-image-set( | 1217 background-image: -webkit-image-set( |
1210 url('../images/files/ui/hashed_bg.gif') 1x, | 1218 url('../images/files/ui/hashed_bg.gif') 1x, |
1211 url('../images/files/ui/2x/hashed_bg.gif') 2x); | 1219 url('../images/files/ui/2x/hashed_bg.gif') 2x); |
1212 border: 1px solid rgb(217, 217, 217); | 1220 border: 1px solid rgb(217, 217, 217); |
1213 height: 180px; | 1221 height: 180px; |
1214 overflow: hidden; | 1222 overflow: hidden; |
1215 padding-bottom: 30px; /* .thumbnail-bottom height */ | 1223 padding-bottom: 30px; /* .thumbnail-bottom height */ |
1216 position: relative; | 1224 position: relative; |
1217 width: 240px; | 1225 width: 240px; |
1218 } | 1226 } |
1219 | 1227 |
1220 body[new-ui] .thumbnail-grid .thumbnail-frame { | 1228 body[new-ui] .thumbnail-grid .thumbnail-frame { |
1221 background-color: rgb(245, 245, 245); | 1229 background-color: rgb(245, 245, 245); |
1222 background-image: none; | 1230 height: 180px; |
| 1231 overflow: hidden; |
| 1232 position: relative; |
| 1233 width: 240px; |
1223 } | 1234 } |
1224 | 1235 |
1225 .thumbnail-grid .thumbnail-item[selected] .thumbnail-frame, | 1236 .thumbnail-grid .thumbnail-item[selected] .thumbnail-frame, |
1226 .thumbnail-grid .thumbnail-item.accepts .thumbnail-frame, | 1237 .thumbnail-grid .thumbnail-item.accepts .thumbnail-frame, |
1227 body:not([new-ui]) .thumbnail-grid .thumbnail-item:hover .thumbnail-frame { | 1238 body:not([new-ui]) .thumbnail-grid .thumbnail-item:hover .thumbnail-frame { |
1228 border-color: white; | 1239 border-color: white; |
1229 } | 1240 } |
1230 | 1241 |
1231 .thumbnail-grid .img-container { | 1242 .thumbnail-grid .img-container { |
1232 height: 100%; | 1243 height: 100%; |
1233 width: 100%; | 1244 width: 100%; |
1234 } | 1245 } |
1235 | 1246 |
1236 .thumbnail-grid .thumbnail-bottom { | 1247 body .thumbnail-grid .thumbnail-bottom { |
1237 background: rgba(0, 0, 0, 0.75); | 1248 background: rgba(0, 0, 0, 0.75); |
1238 color: #eee; | 1249 color: #eee; |
1239 height: 30px; | 1250 height: 30px; |
1240 } | 1251 } |
1241 | 1252 |
1242 .thumbnail-item .thumbnail-bottom .file-checkbox { | 1253 body[new-ui] .thumbnail-grid .thumbnail-bottom { |
| 1254 background: rgba(0, 0, 0, 0.55); |
| 1255 color: #fff; |
| 1256 } |
| 1257 |
| 1258 body:not([new-ui]) .thumbnail-item .thumbnail-bottom .file-checkbox { |
1243 left: 9px; | 1259 left: 9px; |
1244 position: absolute; | 1260 position: absolute; |
1245 top: 10px; | 1261 top: 10px; |
1246 } | 1262 } |
1247 | 1263 |
1248 /* Show the file name differently if the checkbox is present */ | 1264 /* Show the file name differently if the checkbox is present */ |
1249 .thumbnail-bottom.show-checkbox { | 1265 .thumbnail-bottom.show-checkbox { |
1250 -webkit-box-pack: start; | 1266 -webkit-box-pack: start; |
1251 padding-left: 28px; | 1267 -webkit-padding-start: 28px; |
1252 text-align: left; | 1268 text-align: start; |
1253 } | 1269 } |
1254 | 1270 |
1255 /* In the full page mode we can afford to show thumbnails as large as 320x240 | 1271 /* In the full page mode we can afford to show thumbnails as large as 320x240 |
1256 with no downscaling. */ | 1272 with no downscaling. */ |
1257 body[type='full-page'] .thumbnail-grid .thumbnail-item { | 1273 body[type='full-page'] .thumbnail-grid .thumbnail-item { |
1258 margin-left: 21px; | 1274 -webkit-margin-start: 21px; |
1259 margin-top: 20px; | 1275 margin-top: 20px; |
1260 } | 1276 } |
1261 | 1277 |
1262 body[type='full-page'] .thumbnail-grid .thumbnail-frame { | 1278 body[type='full-page']:not([new-ui]) .thumbnail-grid .thumbnail-frame { |
1263 height: 240px; | 1279 height: 240px; |
1264 padding-bottom: 34px; /* .thumbnail-bottom height */ | 1280 padding-bottom: 34px; /* .thumbnail-bottom height */ |
1265 width: 320px; | 1281 width: 320px; |
1266 } | 1282 } |
1267 | 1283 |
| 1284 body[type='full-page'][new-ui] .thumbnail-grid .thumbnail-frame { |
| 1285 height: 240px; |
| 1286 width: 320px; |
| 1287 } |
| 1288 |
1268 body[type='full-page'] .thumbnail-grid .thumbnail-bottom { | 1289 body[type='full-page'] .thumbnail-grid .thumbnail-bottom { |
1269 height: 34px; | 1290 height: 34px; |
1270 } | 1291 } |
1271 | 1292 |
1272 /* Padding counterweights negative margins of items, thus eliminating scroll | 1293 /* Padding counterweights negative margins of items, thus eliminating scroll |
1273 bar when it's not needed. Max height is set to fit 8 items before showing | 1294 bar when it's not needed. Max height is set to fit 8 items before showing |
1274 scroll bar. */ | 1295 scroll bar. */ |
1275 #default-actions-list { | 1296 #default-actions-list { |
1276 max-height: 328px; | 1297 max-height: 328px; |
1277 padding: 1px 0; | 1298 padding: 1px 0; |
(...skipping 1109 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
2387 body[new-ui] #iframe-drag-area { | 2408 body[new-ui] #iframe-drag-area { |
2388 -webkit-app-region: drag; | 2409 -webkit-app-region: drag; |
2389 height: 45px; | 2410 height: 45px; |
2390 left: 64px; | 2411 left: 64px; |
2391 position: absolute; | 2412 position: absolute; |
2392 right: 70px; | 2413 right: 70px; |
2393 top: 0; | 2414 top: 0; |
2394 width: auto; | 2415 width: auto; |
2395 z-index: 101; | 2416 z-index: 101; |
2396 } | 2417 } |
OLD | NEW |