| OLD | NEW |
| (Empty) |
| 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 | |
| 3 * found in the LICENSE file. | |
| 4 */ | |
| 5 | |
| 6 #context-menu { | |
| 7 position: fixed; | |
| 8 bottom: 0; /* The vertical position is controlled by context_menu_dom.js */ | |
| 9 left: -48px; | |
| 10 background-color: #c4c4c4; | |
| 11 border: 1px solid #a6a6a6; | |
| 12 z-index: 101; | |
| 13 transition-property: left; | |
| 14 transition-duration: 0.3s; | |
| 15 box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5); | |
| 16 opacity: 0.8; | |
| 17 } | |
| 18 | |
| 19 #context-menu:hover, | |
| 20 #context-menu.opened, | |
| 21 #context-menu.menu-opened { | |
| 22 left: 0; | |
| 23 opacity: 1; | |
| 24 } | |
| 25 | |
| 26 .no-gaps { | |
| 27 font-size: 0; | |
| 28 } | |
| 29 | |
| 30 .context-menu-icon { | |
| 31 margin-top: 2px; | |
| 32 } | |
| 33 | |
| 34 .context-menu-icon:hover, | |
| 35 .context-menu-stub:hover { | |
| 36 background-color: #d5d5d5; | |
| 37 } | |
| 38 | |
| 39 #context-menu.opened .context-menu-stub, | |
| 40 .context-menu-icon:active { | |
| 41 background-color: #a6a6a6; | |
| 42 } | |
| 43 | |
| 44 .context-menu-stub { | |
| 45 display: inline-block; | |
| 46 width: 12px; | |
| 47 height: 50px; | |
| 48 background: url("drag.webp"); | |
| 49 cursor: move; | |
| 50 } | |
| 51 | |
| 52 .etched { | |
| 53 position: relative; | |
| 54 } | |
| 55 | |
| 56 .etched:after { | |
| 57 content: ""; | |
| 58 width: 100%; | |
| 59 height: 100%; | |
| 60 position: absolute; | |
| 61 top: 0; | |
| 62 left: 0; | |
| 63 border-left: 1px solid rgba(255, 255, 255, 0.2); | |
| 64 border-top: 1px solid rgba(255, 255, 255, 0.2); | |
| 65 } | |
| 66 | |
| 67 #context-menu ul { | |
| 68 visibility: hidden; | |
| 69 position: absolute; | |
| 70 left: 24px; | |
| 71 padding: 0; | |
| 72 margin: 0; | |
| 73 list-style-type: none; | |
| 74 background: white; | |
| 75 outline: 1px solid rgba(0, 0, 0, 0.2); | |
| 76 padding: 0 0 6px; | |
| 77 box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); | |
| 78 z-index: 102; | |
| 79 } | |
| 80 | |
| 81 #context-menu ul.menu-align-bottom { | |
| 82 bottom: 24px; | |
| 83 } | |
| 84 | |
| 85 #context-menu ul:not(.menu-align-bottom) { | |
| 86 top: 24px; | |
| 87 } | |
| 88 | |
| 89 #context-menu ul.opened { | |
| 90 visibility: visible; | |
| 91 } | |
| 92 | |
| 93 #context-menu li { | |
| 94 padding: 6px 44px 6px 30px; | |
| 95 white-space: nowrap; | |
| 96 } | |
| 97 | |
| 98 #context-menu li:hover { | |
| 99 background-color: #EEE; | |
| 100 } | |
| 101 | |
| 102 #context-menu li.selected { | |
| 103 background-image: url('tick.webp'); | |
| 104 background-position: left center; | |
| 105 background-repeat: no-repeat; | |
| 106 } | |
| 107 | |
| 108 #context-menu li.menu-group-header { | |
| 109 pointer-events: none; | |
| 110 font-style: italic; | |
| 111 color: gray; | |
| 112 } | |
| 113 | |
| 114 #context-menu li.menu-group-item { | |
| 115 margin-left: 16px; | |
| 116 } | |
| 117 | |
| 118 .context-menu-screen { | |
| 119 width: 100%; | |
| 120 height: 100%; | |
| 121 position: fixed; | |
| 122 top: 0; | |
| 123 left: 0; | |
| 124 z-index: 100; | |
| 125 } | |
| OLD | NEW |