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 } 62
