| OLD | NEW |
| 1 /* | 1 /* |
| 2 * Copyright (c) 2014 The Chromium Authors. All rights reserved. | 2 * Copyright (c) 2014 The Chromium Authors. All rights reserved. |
| 3 * Use of this source code is governed by a BSD-style license that can be | 3 * Use of this source code is governed by a BSD-style license that can be |
| 4 * found in the LICENSE file. | 4 * found in the LICENSE file. |
| 5 */ | 5 */ |
| 6 | 6 |
| 7 .search-bar { | 7 .search-bar { |
| 8 flex: 0 0 23px; | 8 flex: 0 0 29px; |
| 9 background-color: #eee; | 9 background-color: #eee; |
| 10 border-top: 1px solid #ccc; | 10 border-top: 1px solid #ccc; |
| 11 display: flex; | 11 display: flex; |
| 12 overflow: hidden; | 12 overflow: hidden; |
| 13 z-index: 0; | 13 z-index: 0; |
| 14 } | 14 } |
| 15 | 15 |
| 16 .search-bar.replaceable { | 16 .search-bar.replaceable { |
| 17 flex: 0 0 44px; | 17 flex: 0 0 55px; |
| 18 } | |
| 19 | |
| 20 .search-toolbar { | |
| 21 margin-top: -2px; | |
| 22 } | 18 } |
| 23 | 19 |
| 24 .search-replace { | 20 .search-replace { |
| 25 -webkit-appearance: none; | 21 -webkit-appearance: none; |
| 26 border: 0; | 22 border: 0; |
| 27 padding: 0 3px; | 23 padding: 0 3px; |
| 28 margin: 0; | 24 margin: 0; |
| 29 flex: 1; | 25 flex: 1; |
| 30 } | 26 } |
| 31 | 27 |
| 32 .search-replace:focus { | 28 .search-replace:focus { |
| 33 outline: none; | 29 outline: none; |
| 34 } | 30 } |
| 35 | 31 |
| 36 .toolbar-replace-checkbox { | 32 .toolbar-replace-checkbox { |
| 37 margin-top: 2px; | 33 margin-top: 4px; |
| 34 margin-right: 2px; |
| 38 display: block; | 35 display: block; |
| 39 } | 36 } |
| 40 | 37 |
| 41 .toolbar-search { | 38 .toolbar-search { |
| 42 display: flex; | 39 display: flex; |
| 43 width: 100%; | 40 width: 100%; |
| 44 } | 41 } |
| 45 | 42 |
| 46 .toolbar-search > div { | 43 .toolbar-search > div { |
| 47 margin: 0px 2px; | 44 margin: 0px 2px; |
| 48 flex-shrink: 0; | 45 flex-shrink: 0; |
| 49 } | 46 } |
| 50 | 47 |
| 51 .toolbar-search-inputs { | 48 .toolbar-search-inputs { |
| 52 flex-grow: 1; | 49 flex-grow: 1; |
| 53 min-width: 150px; | 50 min-width: 150px; |
| 54 } | 51 } |
| 55 | 52 |
| 56 .toolbar-search-navigation-controls { | 53 .toolbar-search-navigation-controls { |
| 57 align-self: stretch; | 54 align-self: stretch; |
| 58 background-image: linear-gradient(rgb(228, 228, 228), rgb(206, 206, 206)); | |
| 59 } | 55 } |
| 60 | 56 |
| 61 .toolbar-search-navigation { | 57 .toolbar-search-navigation { |
| 62 display: inline-block; | 58 display: inline-block; |
| 63 width: 18px; | 59 width: 20px; |
| 64 height: 18px; | 60 height: 20px; |
| 65 background-repeat: no-repeat; | 61 background-repeat: no-repeat; |
| 66 background-position: 4px 7px; | 62 background-position: 4px 7px; |
| 67 border-left: 1px solid rgb(170, 170, 170); | 63 border-left: 1px solid rgb(170, 170, 170); |
| 68 opacity: 0.3; | 64 opacity: 0.3; |
| 69 } | 65 } |
| 70 | 66 |
| 71 .toolbar-search-navigation.enabled { | 67 .toolbar-search-navigation.enabled { |
| 72 opacity: 1.0; | 68 opacity: 1.0; |
| 73 } | 69 } |
| 74 | 70 |
| 75 .toolbar-search button.search-action-button { | 71 .toolbar-search button.search-action-button { |
| 76 border: 1px solid rgb(163, 163, 163); | 72 font-weight: 400; |
| 77 border-radius: 8px; | 73 height: 22px; |
| 78 margin: 1px 3px 0 3px; | 74 width: 87px; |
| 79 background-image: linear-gradient(rgb(241, 241, 241), rgb(220, 220, 220)); | |
| 80 width: 82px; | |
| 81 height: 20px; | |
| 82 white-space: nowrap; | |
| 83 } | |
| 84 | |
| 85 .toolbar-search button.search-action-button:active { | |
| 86 background-image: linear-gradient(rgb(185, 185, 185), rgb(156, 156, 156)); | |
| 87 } | 75 } |
| 88 | 76 |
| 89 .toolbar-search-control { | 77 .toolbar-search-control { |
| 90 display: -webkit-flex; | 78 display: -webkit-flex; |
| 91 position: relative; | 79 position: relative; |
| 92 background-color: white; | 80 background-color: white; |
| 93 } | 81 } |
| 94 | 82 |
| 95 .toolbar-search-buttons { | 83 .toolbar-search-buttons { |
| 96 flex-basis: 179px; | 84 flex-basis: 182px; |
| 97 } | 85 } |
| 98 | 86 |
| 99 .toolbar-replace-control, | 87 .toolbar-replace-control, |
| 100 #search-input-field { | 88 #search-input-field { |
| 101 margin-top: 1px; | 89 margin-top: 1px; |
| 102 line-height: 17px; | 90 line-height: 17px; |
| 103 } | 91 } |
| 104 | 92 |
| 105 .toolbar-search-control, .toolbar-replace-control { | 93 .toolbar-search-control, .toolbar-replace-control { |
| 106 border: 1px solid rgb(163, 163, 163); | 94 border: 1px solid rgb(163, 163, 163); |
| 107 height: 20px; | 95 height: 22px; |
| 108 border-radius: 2px; | 96 border-radius: 2px; |
| 109 width: 100%; | 97 width: 100%; |
| 110 margin-top: 1px; | 98 margin-top: 2px; |
| 99 margin-bottom: 2px; |
| 111 } | 100 } |
| 112 | 101 |
| 113 .toolbar-search-navigation.enabled:active { | 102 .toolbar-search-navigation.enabled:active { |
| 114 background-position: 4px 7px, 0 0; | 103 background-position: 4px 7px, 0 0; |
| 115 } | 104 } |
| 116 | 105 |
| 117 .toolbar-search-navigation.toolbar-search-navigation-prev { | 106 .toolbar-search-navigation.toolbar-search-navigation-prev { |
| 118 background-image: url(Images/searchPrev.png); | 107 background-image: url(Images/searchPrev.png); |
| 119 border-left: 1px solid rgb(163, 163, 163); | 108 border-left: 1px solid rgb(163, 163, 163); |
| 120 } | 109 } |
| 121 | 110 |
| 122 :host-context(.-theme-with-dark-background) .toolbar-search-navigation { | 111 :host-context(.-theme-with-dark-background) .toolbar-search-navigation { |
| 123 -webkit-filter: invert(90%); | 112 -webkit-filter: invert(90%); |
| 124 } | 113 } |
| 125 | 114 |
| 126 .toolbar-search-navigation.toolbar-search-navigation-prev.enabled:active { | 115 .toolbar-search-navigation.toolbar-search-navigation-prev.enabled:active { |
| 127 background-image: url(Images/searchPrev.png), linear-gradient(rgb(168, 168,
168), rgb(116, 116, 116)); | 116 background-image: url(Images/searchPrev.png), #f2f2f2; |
| 128 } | 117 } |
| 129 | 118 |
| 130 .toolbar-search-navigation.toolbar-search-navigation-next { | 119 .toolbar-search-navigation.toolbar-search-navigation-next { |
| 131 background-image: url(Images/searchNext.png); | 120 background-image: url(Images/searchNext.png); |
| 132 border-left: 1px solid rgb(230, 230, 230); | 121 border-left: 1px solid rgb(230, 230, 230); |
| 133 } | 122 } |
| 134 | 123 |
| 135 .toolbar-search-navigation.toolbar-search-navigation-next.enabled:active { | 124 .toolbar-search-navigation.toolbar-search-navigation-next.enabled:active { |
| 136 background-image: url(Images/searchNext.png), linear-gradient(rgb(168, 168,
168), rgb(116, 116, 116)); | 125 background-image: url(Images/searchNext.png), #f2f2f2; |
| 137 } | 126 } |
| 138 | 127 |
| 139 .search-results-matches { | 128 .search-results-matches { |
| 140 display: inline-block; | 129 display: inline-block; |
| 141 text-align: right; | 130 text-align: right; |
| 142 padding: 0 4px; | 131 padding: 0 4px; |
| 143 color: rgb(165, 165, 165); | 132 color: rgb(165, 165, 165); |
| 144 align-self: center; | 133 align-self: center; |
| 145 } | 134 } |
| OLD | NEW |