| OLD | NEW |
|---|
| 1 /* https://github.com/bgrins/spectrum */ | 1 /* https://github.com/bgrins/spectrum */ |
| 2 .spectrum-container { | 2 .spectrum-container { |
| 3 position: absolute; | 3 width: 205px; |
| 4 top: 0; | 4 height: 220px; |
| 5 left: 0; | |
| 6 display: inline-block; | |
| 7 background: rgba(230, 230, 230, 1) !important; | |
| 8 border: 1px solid #646464; | |
| 9 padding: 10px; | |
| 10 width: 220px; | |
| 11 z-index: 10; | |
| 12 -webkit-user-select: none; | 5 -webkit-user-select: none; |
| 13 } | 6 } |
| 14 | 7 |
| 15 .spectrum-top { | 8 .spectrum-top { |
| 16 position: relative; | 9 position: relative; |
| 17 width: 100%; | 10 width: 100%; |
| 18 display: inline-block; | 11 display: inline-block; |
| 19 } | 12 } |
| 20 | 13 |
| 21 .spectrum-color { | 14 .spectrum-color { |
| 22 position: absolute; | 15 position: absolute; |
| 23 top: 0; | 16 top: 5px; |
| 24 left: 0; | 17 left: 5px; |
| 25 bottom: 0; | 18 width: 158px; |
| 26 right: 40px; | 19 height: 158px; |
| 20 outline: 1px solid #bbb; |
| 27 } | 21 } |
| 28 | 22 |
| 29 .spectrum-display-value { | 23 .spectrum-display-value { |
| 30 -webkit-user-select: text; | 24 -webkit-user-select: text; |
| 31 position: relative; | 25 display: inline-block; |
| 32 left: 2px; | 26 padding-left: 2px; |
| 33 top: -6px; | |
| 34 } | 27 } |
| 35 | 28 |
| 36 .spectrum-hue { | 29 .spectrum-hue { |
| 37 position: absolute; | 30 position: absolute; |
| 38 top: 0; | 31 top: 5px; |
| 39 right: 0; | 32 right: 5px; |
| 40 bottom: 0; | 33 width: 28px; |
| 41 left: 170px; | 34 height: 158px; |
| 42 -webkit-box-reflect: right -28px; | 35 -webkit-box-reflect: right -28px; |
| 43 } | 36 } |
| 44 | 37 |
| 45 .spectrum-fill { | 38 .spectrum-fill { |
| 46 /* Same as spectrum-color width to force aspect ratio. */ | 39 /* Same as spectrum-color width to force aspect ratio. */ |
| 47 margin-top: 150px; | 40 margin-top: 150px; |
| 48 } | 41 } |
| 49 | 42 |
| 50 .spectrum-range-container { | 43 .spectrum-range-container { |
| 51 position: relative; | 44 position: absolute; |
| 52 padding-bottom: 5px; | 45 bottom: 28px; |
| 46 left: 5px; |
| 47 display: flex; |
| 48 align-items: center; |
| 49 } |
| 50 |
| 51 .spectrum-text { |
| 52 position: absolute; |
| 53 bottom: 5px; |
| 54 left: 5px; |
| 55 display: flex; |
| 56 align-items: center; |
| 53 } | 57 } |
| 54 | 58 |
| 55 .spectrum-range-container * { | 59 .spectrum-range-container * { |
| 56 font-size: 11px; | 60 font-size: 11px; |
| 57 vertical-align: middle; | 61 vertical-align: middle; |
| 58 } | 62 } |
| 59 | 63 |
| 60 .spectrum-range-container label { | 64 .spectrum-range-container label { |
| 61 display: inline-block; | 65 display: inline-block; |
| 62 padding-right: 4px; | 66 padding-right: 4px; |
| 63 } | 67 } |
| 64 | 68 |
| 65 .spectrum-range-container input { | |
| 66 position: absolute; | |
| 67 left: 15px; | |
| 68 right: 40px; | |
| 69 margin: 3px 0 0 0; | |
| 70 } | |
| 71 | |
| 72 .spectrum-dragger, | 69 .spectrum-dragger, |
| 73 .spectrum-slider { | 70 .spectrum-slider { |
| 74 -webkit-user-select: none; | 71 -webkit-user-select: none; |
| 75 } | 72 } |
| 76 | 73 |
| 77 .spectrum-sat { | 74 .spectrum-sat { |
| 78 background-image: linear-gradient(to right, white, rgba(204, 154, 129, 0)); | 75 background-image: linear-gradient(to right, white, rgba(204, 154, 129, 0)); |
| 79 } | 76 } |
| 80 | 77 |
| 81 .spectrum-val { | 78 .spectrum-val { |
| (...skipping 24 matching lines...) Expand all Loading... |
| 106 height: 4px; | 103 height: 4px; |
| 107 left: -1px; | 104 left: -1px; |
| 108 right: -1px; | 105 right: -1px; |
| 109 } | 106 } |
| 110 | 107 |
| 111 .spectrum-container .swatch { | 108 .spectrum-container .swatch { |
| 112 width: 20px; | 109 width: 20px; |
| 113 height:20px; | 110 height:20px; |
| 114 margin: 0; | 111 margin: 0; |
| 115 } | 112 } |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 401013002:
DevTools: Freshen up popover styles. (Closed)
Base URL: svn://svn.chromium.org/blink/trunk