| OLD | NEW |
| 1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. | 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 | 2 * Use of this source code is governed by a BSD-style license that can be |
| 3 * found in the LICENSE file. */ | 3 * found in the LICENSE file. */ |
| 4 | 4 |
| 5 .search-hidden { | |
| 6 display: none !important; | |
| 7 } | |
| 8 | |
| 9 .search-highlighted { | |
| 10 background-color: rgba(255, 240, 120, 0.9); | |
| 11 } | |
| 12 | |
| 13 /* Container for the elements that make up the search bubble. */ | 5 /* Container for the elements that make up the search bubble. */ |
| 14 .search-bubble { | 6 .search-bubble { |
| 15 left: 0; | 7 left: 0; |
| 16 margin-top: 5px; | 8 margin-top: 5px; |
| 17 pointer-events: none; | 9 pointer-events: none; |
| 18 position: absolute; | 10 position: absolute; |
| 19 top: -1000px; /* Minor hack: position off-screen by default. */ | 11 top: -1000px; /* Minor hack: position off-screen by default. */ |
| 20 /* Create a z-context for search-bubble-innards, its after and before. */ | 12 /* Create a z-context for search-bubble-innards, its after and before. */ |
| 21 z-index: 1; | 13 z-index: 1; |
| 22 } | 14 } |
| 23 | 15 |
| 24 /* Contains the text content of the bubble. */ | 16 /* Contains the text content of the bubble. */ |
| 25 .search-bubble-innards { | 17 .search-bubble-innards { |
| 26 background: -webkit-linear-gradient(rgba(255, 248, 172, 0.9), | 18 background: linear-gradient(rgba(255, 248, 172, 0.9), |
| 27 rgba(255, 243, 128, 0.9)); | 19 rgba(255, 243, 128, 0.9)); |
| 28 border-radius: 2px; | 20 border-radius: 2px; |
| 29 padding: 4px 10px; | 21 padding: 4px 10px; |
| 30 text-align: center; | 22 text-align: center; |
| 31 width: 100px; | 23 width: 100px; |
| 32 } | 24 } |
| 33 | 25 |
| 34 /* Provides the border around the bubble (has to be behind ::after). */ | 26 /* Provides the border around the bubble (has to be behind ::after). */ |
| 35 .search-bubble-innards::before { | 27 .search-bubble-innards::before { |
| 36 border: 1px solid rgb(220, 198, 72); | 28 border: 1px solid rgb(220, 198, 72); |
| 37 border-radius: 2px; | 29 border-radius: 2px; |
| 38 bottom: -1px; | 30 bottom: -1px; |
| 39 content: ''; | 31 content: ''; |
| 40 left: -1px; | 32 left: -1px; |
| 41 position: absolute; | 33 position: absolute; |
| 42 right: -1px; | 34 right: -1px; |
| 43 top: -1px; | 35 top: -1px; |
| 44 z-index: -2; | 36 z-index: -2; |
| 45 } | 37 } |
| 46 | 38 |
| 47 /* Provides the arrow which points at the anchor element. */ | 39 /* Provides the arrow which points at the anchor element. */ |
| 48 .search-bubble-innards::after { | 40 .search-bubble-innards::after { |
| 49 -webkit-transform: rotate(45deg); | 41 -webkit-transform: rotate(45deg); |
| 50 background: | 42 background: linear-gradient(-45deg, rgb(251, 255, 181), |
| 51 -webkit-linear-gradient(-45deg, rgb(251, 255, 181), | |
| 52 rgb(255, 248, 172) 50%, | 43 rgb(255, 248, 172) 50%, |
| 53 rgba(255, 248, 172, 0)); | 44 rgba(255, 248, 172, 0)); |
| 54 border: 1px solid rgb(220, 198, 72); | 45 border: 1px solid rgb(220, 198, 72); |
| 55 border-bottom-color: transparent; | 46 border-bottom-color: transparent; |
| 56 border-right-color: transparent; | 47 border-right-color: transparent; |
| 57 content: ''; | 48 content: ''; |
| 58 height: 12px; | 49 height: 12px; |
| 59 left: 53px; | 50 left: 53px; |
| 60 position: absolute; | 51 position: absolute; |
| 61 top: -7px; | 52 top: -7px; |
| 62 width: 12px; | 53 width: 12px; |
| 63 z-index: -1; | 54 z-index: -1; |
| 64 } | 55 } |
| 65 | 56 |
| 66 .search-bubble-wrapper { | 57 .search-bubble-wrapper { |
| 67 position: relative; | 58 position: relative; |
| 68 } | 59 } |
| 69 | |
| 70 /* #mainview is here to win specificity. :( */ | |
| 71 #mainview #searchPage.page, | |
| 72 #mainview #searchBox.page { | |
| 73 padding-bottom: 0; | |
| 74 } | |
| OLD | NEW |