1/* 2 * Copyright (C) 2022 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15export const SearchHtml = ` 16 <style> 17 :host{ 18 } 19 .root{ 20 background-color: var(--dark-background5,#fff); 21 border-radius: 40px; 22 padding: 3px 20px; 23 display: flex; 24 justify-content: center; 25 align-items: center; 26 border: 1px solid var(--dark-border,#c5c5c5); 27 width: 35vw; 28 overflow: hidden; 29 } 30 .root input{ 31 outline: none; 32 width: max-content; 33 border: 0px; 34 background-color: transparent; 35 font-size: inherit; 36 color: var(--dark-color,#666666); 37 flex: 1; 38 height: auto; 39 vertical-align:middle; 40 line-height:inherit; 41 height:inherit; 42 padding: 6px 6px 6px 6px; 43 max-height: inherit; 44 box-sizing: border-box; 45 } 46 ::placeholder { 47 color: #b5b7ba; 48 font-size: 1em; 49 } 50 .write::placeholder { 51 color: #b5b7ba; 52 font-size: 1em; 53 } 54 .readonly::placeholder { 55 color: #4f7ab3; 56 font-size: 1em; 57 } 58 .text-Roll::placeholder { 59 font-weight: 700; 60 color: #DB5860; 61 font-size: 1em; 62 } 63 :host([show-search-info]) .search-info{ 64 display: inline-flex; 65 higth:100%!important; 66 justify-content: center; 67 align-items: center; 68 } 69 :host(:not([show-search-info])) .search-info{ 70 display: none; 71 } 72 .search-info span{ 73 color:#ABABAB; 74 } 75 .search-info lit-icon{ 76 font-weight: bold; 77 } 78 79 :host([textRoll]) input { 80 position: relative; 81 animation: textRoll 5s ease-in-out 0s backwards; 82 white-space: nowrap; 83 overflow: hidden; 84 display: block; 85 text-overflow: ellipsis; 86 } 87 88 @keyframes textRoll { 89 0% { 90 left: 0; 91 } 92 100% { 93 left: 100%; 94 } 95 } 96 .search-history { 97 position: relative; 98 } 99 .search-history-list { 100 list-style-type: none; 101 margin: 0; 102 padding: 0; 103 position: absolute; 104 width: 37vw; 105 top: 100%; 106 background-color: #FFFFFF; 107 border: 1px solid #ddd; 108 max-height: 200px; 109 overflow-y: auto; 110 display: none; 111 border-radius: 0 0 20px 20px; 112 } 113 .search-history-list:hover{ 114 cursor: pointer; 115 } 116 .search-history-list-item { 117 overflow: hidden; 118 white-space: nowrap; 119 text-overflow: ellipsis; 120 cursor: pointer; 121 width: 100%; 122 } 123 .search-list:hover { 124 background-color: #e9e9e9; 125 } 126 .search-list { 127 display: flex; 128 justify-content: space-between; 129 padding-right: 20px; 130 padding-left: 45px; 131 } 132 input[name="retarge_index"]{ 133 width:100px!important; 134 } 135 </style> 136 <div class="root" style="display: none"> 137 <lit-icon id="search-icon" name="search" size="22" color="#aaaaaa"> 138 </lit-icon> 139 <input name="search" class="readonly" placeholder="Search" readonly/> 140 <div class="search-info"> 141 <span id="index">0</span><span>/</span><span id="total">0</span> 142 <lit-icon class="icon" id="arrow-left" name="caret-left" color="#AAAAAA" size="26"> 143 </lit-icon> 144 <span>|</span> 145 <lit-icon class="icon" id="arrow-right" name="caret-right" color="#AAAAAA" size="26"> 146 </lit-icon> 147 <input name="retarge_index" placeholder="Go" oninput="value=value.replace(/^(0+)|[^0-9]/g,'')"/> 148 </div> 149 </div> 150 <div id="prompt" style="display: none"></div> 151 <div class="search-history"> 152 <ul class="search-history-list"></ul> 153 </div> 154 `;