src/chrome/browser/resources/print_preview/common/search_bubble.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 /* Container for the elements that make up the search bubble. */
   6 .search-bubble {
   7   left: 0;
   8   margin-top: 5px;
   9   pointer-events: none;
  10   position: absolute;
  11   top: -1000px;  /* Minor hack: position off-screen by default. */
  12   /* Create a z-context for search-bubble-innards, its after and before. */
  13   z-index: 1;
  14 }
  15
  16 /* Contains the text content of the bubble.  */
  17 .search-bubble-innards {
  18   background: linear-gradient(rgba(255, 248, 172, 0.9),
  19                               rgba(255, 243, 128, 0.9));
  20   border-radius: 2px;
  21   overflow: hidden;
  22   padding: 4px 10px;
  23   text-align: center;
  24   text-overflow: ellipsis;
  25   width: 100px;
  26 }
  27
  28 /* Provides the border around the bubble (has to be behind ::after). */
  29 .search-bubble-innards::before {
  30   border: 1px solid rgb(220, 198, 72);
  31   border-radius: 2px;
  32   bottom: -1px;
  33   content: '';
  34   left: -1px;
  35   position: absolute;
  36   right: -1px;
  37   top: -1px;
  38   z-index: -2;
  39 }
  40
  41 /* Provides the arrow which points at the anchor element. */
  42 .search-bubble-innards::after {
  43   -webkit-transform: rotate(45deg);
  44   background: linear-gradient(-45deg, rgb(251, 255, 181),
  45                                       rgb(255, 248, 172) 50%,
  46                                       rgba(255, 248, 172, 0));
  47   border: 1px solid rgb(220, 198, 72);
  48   border-bottom-color: transparent;
  49   border-right-color: transparent;
  50   content: '';
  51   height: 12px;
  52   left: 53px;
  53   position: absolute;
  54   top: -7px;
  55   width: 12px;
  56   z-index: -1;
  57 }
  58
  59 .search-bubble-wrapper {
  60   position: relative;
  61 }