Chromium Code Reviews Chromium Code Reviews
Issue 609293002:
Video Player: Update the design of cast menu. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master| OLD | NEW |
|---|---|
| 1 /* Copyright 2014 The Chromium Authors. All rights reserved. | 1 /* Copyright 2014 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 .cast-menu { | 5 .cast-menu { |
| 6 background: #222; | 6 background-color: rgba(0, 0, 0, 0.85); |
| 7 border: 0; | 7 border: 0; |
| 8 border-radius: 1px; | 8 border-radius: 1px; |
| 9 min-width: 120px; | 9 min-width: 120px; |
| 10 padding: 0 15px 15px; | 10 outline: none; |
| 11 overflow: hidden; | |
| 12 padding: 0 0 5px; | |
| 11 position: absolute; | 13 position: absolute; |
| 12 z-index: 1000; | 14 z-index: 1000; |
| 13 } | 15 } |
| 14 | 16 |
| 15 .cast-menu:before { | 17 .cast-menu:before { |
| 18 -webkit-margin-start: 10px; | |
| 19 border-bottom: solid 1px rgba(255, 255, 255, 0.25); | |
| 16 color: #fff; | 20 color: #fff; |
| 17 content: attr(playon-text); | 21 content: attr(playon-text); |
| 18 line-height: 42px; | 22 display: block; |
| 23 font-size: 12px; | |
| 24 margin-bottom: 5px; | |
| 25 padding-bottom: 6px; | |
| 26 padding-top: 6px; | |
| 27 } | |
| 28 | |
| 29 /* Make the bottom border's width one device pixel even on HiDPI. */ | |
|
yoshiki
2014/09/30 06:42:28
s/width/height/?
And could you add the link to th
fukino
2014/09/30 06:59:41
Done.
Made 'width' to 'the width of the horizontal
| |
| 30 @media (-webkit-min-device-pixel-ratio: 2) { | |
| 31 .cast-menu:before { | |
| 32 border-bottom: none; | |
| 33 background-image: linear-gradient(rgba(255, 255, 255, 0.25), | |
| 34 rgba(255, 255, 255, 0.25), | |
| 35 rgba(255, 255, 255, 0), | |
| 36 rgba(255, 255, 255, 0)); | |
| 37 background-position: bottom; | |
| 38 background-size: 100% 1px; | |
| 39 background-repeat: no-repeat; | |
| 40 } | |
| 19 } | 41 } |
| 20 | 42 |
| 21 .cast-menu.hidden { | 43 .cast-menu.hidden { |
| 22 display: none; | 44 display: none; |
| 23 } | 45 } |
| 24 | 46 |
| 25 .cast-menu > :not(hr) { | 47 .cast-menu > :not(hr) { |
| 26 -webkit-padding-end: 14px; | 48 -webkit-padding-end: 10px; |
| 27 -webkit-padding-start: 19px; | 49 -webkit-padding-start: 30px; |
| 28 background-color: #e6e6e6; | 50 color: rgba(255, 255, 255, 0.5); |
| 29 font-size: 12px; | 51 font-size: 12px; |
| 30 padding-bottom: 5px; | 52 padding-bottom: 5px; |
| 31 padding-top: 5px; | 53 padding-top: 6px; |
| 32 text-overflow: ellipsis; | 54 text-overflow: ellipsis; |
| 33 } | 55 } |
| 34 | 56 |
| 35 .cast-menu > [checked]:not(hr) { | 57 .cast-menu > :not(hr):hover { |
| 36 /* A checkmark has 19 px width. */ | 58 background-color: rgba(48, 48, 48, 0.85); |
| 37 -webkit-padding-start: 0; | |
| 38 } | 59 } |
| 39 | 60 |
| 40 .cast-menu > [selected]:not(hr) { | 61 .cast-menu > [checked]:not(hr) { |
| 41 background-color: #888; | 62 /* A checkmark has corresponding width and margin. */ |
| 63 -webkit-padding-start: 0; | |
| 42 color: #fff; | 64 color: #fff; |
| 43 } | 65 } |
| 44 | 66 |
| 45 .cast-menu > [selected]:not(hr):active { | 67 .cast-menu > [checked]:before { |
| 46 background-color: #888; | 68 content: -webkit-image-set( |
| 47 color: #fff; | 69 url('../images/media/media_check.png') 1x, |
| 70 url('../images/media/2x/media_check.png') 2x); | |
| 71 height: 8px; | |
| 72 margin: 0 10px; | |
| 73 width: 10px; | |
| 48 } | 74 } |
| 49 | |
| 50 .cast-menu > [checked]:hover:before, | |
| 51 .cast-menu > [checked]:active:before { | |
| 52 content: url('../../../webui/resources/images/checkbox_white.png'); | |
| 53 } | |
| 54 | |
| 55 .cast-menu > :not(hr):hover { | |
| 56 background-color: #555; | |
| 57 color: #fff; | |
| 58 } | |
| OLD | NEW |
