remoting/webapp/app_remoting/html/context_menu.css

   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 }