ui/webui/resources/css/bubble.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 .bubble {
   6   position: absolute;
   7   white-space: normal;
   8   /* Height is dynamic, width fixed. */
   9   width: 300px;
  10   z-index: 9999;
  11 }
  12
  13 .bubble-content {
  14   color: black;
  15   line-height: 150%;
  16   margin: 1px;
  17   padding: 8px 11px 12px;
  18   position: relative;
  19   z-index: 3;
  20 }
  21
  22 /* When the close button is there, we need more padding on the right of the
  23  * bubble. */
  24 .bubble-close:not([hidden]) ~ .bubble-content {
  25   -webkit-padding-end: 22px;
  26 }
  27
  28 .bubble-close {
  29   height: 16px;
  30   position: absolute;
  31   right: 6px;
  32   top: 6px;
  33   width: 16px;
  34   z-index: 4;
  35 }
  36
  37 html[dir='rtl'] .bubble-close {
  38   left: 6px;
  39   right: auto;
  40 }
  41
  42 .bubble-close {
  43   background-image: -webkit-image-set(
  44       url(../../../resources/default_100_percent/close_2.png) 1x,
  45       url(../../../resources/default_200_percent/close_2.png) 2x);
  46 }
  47
  48 .bubble-close:hover {
  49   background-image: -webkit-image-set(
  50       url(../../../resources/default_100_percent/close_2_hover.png) 1x,
  51       url(../../../resources/default_200_percent/close_2_hover.png) 2x);
  52 }
  53
  54 .bubble-close:active {
  55   background-image: -webkit-image-set(
  56       url(../../../resources/default_100_percent/close_2_pressed.png) 1x,
  57       url(../../../resources/default_200_percent/close_2_pressed.png) 2x);
  58 }
  59
  60 .bubble-shadow {
  61   bottom: 0;
  62   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  63   left: 0;
  64   position: absolute;
  65   right: 0;
  66   top: 0;
  67   z-index: 1;
  68 }
  69
  70 .bubble-arrow {
  71   -webkit-transform: rotate(45deg);
  72   box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.15);
  73   height: 15px;
  74   position: absolute;
  75   width: 15px;
  76   z-index: 2;
  77 }
  78
  79 .bubble-content,
  80 .bubble-arrow {
  81   background: white;
  82 }
  83
  84 .bubble-shadow,
  85 .bubble-arrow {
  86   border: 1px solid rgba(0, 0, 0, 0.3);
  87 }
  88
  89 .bubble-shadow,
  90 .bubble-content {
  91   border-radius: 6px;
  92   box-sizing: border-box;
  93 }
  94
  95 .auto-close-bubble {
  96   position: fixed;
  97 }