src/remoting/webapp/toolbar.css

   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
   3  * found in the LICENSE file.
   4  */
   5
   6 .toolbar-container {
   7   position: fixed;
   8   top: -48px;
   9   width: 640px;
  10   -webkit-transition: top 0.15s ease;
  11   font-size: 13px;
  12   pointer-events: none;
  13   z-index: 1;
  14 }
  15
  16 .toolbar-visible {
  17   top: -8px;
  18 }
  19
  20 .toolbar-stub {
  21   position: absolute;
  22   width: 134px;
  23   height: 7px;
  24   left: 243px;
  25   border-bottom-left-radius: 7px;
  26   border-bottom-right-radius: 7px;
  27   background-color: #4695ff;
  28   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  29   pointer-events: all;
  30   clip: rect(0, 999px, 999px, -999px);
  31   -webkit-transition: height 0.15s ease;
  32 }
  33
  34 .toolbar-stub-extended,
  35 .toolbar-visible .toolbar-stub {
  36   height: 14px;
  37 }
  38
  39 .toolbar-border {
  40   border-radius: 7px;
  41   border: 3px solid #4695ff;
  42   width: 620px;
  43   padding: 10px 7px 5px 7px;
  44   background-color: #e9e9e9;
  45   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  46   pointer-events: all;
  47   display: -webkit-flex;
  48 }
  49
  50 .toolbar-border > div {
  51   margin: 5px 4px;
  52 }
  53
  54 /* Ensure that the 'connected to' string doesn't make the tool-bar overflow */
  55 #connected-to {
  56   max-width: 260px;
  57   overflow: hidden;
  58   white-space: nowrap;
  59 }
  60
  61 #new-connection {
  62   margin-__MSG_@@bidi_start_edge__: 0;
  63 }
  64
  65 .end-align {
  66   float: __MSG_@@bidi_end_edge__;
  67 }
  68
  69 .arrow-down {
  70   position: absolute;
  71   width: 0;
  72   height: 0;
  73   border-left: 5px solid transparent;
  74   border-right: 5px solid transparent;
  75   border-top: 5px solid white;
  76   left: 62px;
  77   bottom: 2px;
  78   opacity: 0.5;
  79   -webkit-transition: bottom 0.15s ease, opacity 0.1s linear;
  80 }
  81
  82 .toolbar-stub-extended .arrow-down,
  83 .toolbar-visible .arrow-down {
  84   bottom: 6px;
  85 }
  86
  87
  88 .toolbar-stub:hover .arrow-down {
  89   opacity: 1.0;
  90 }
  91
  92 .toolbar-visible .arrow-down {
  93   -webkit-transform: rotate(180deg);
  94 }