<!-- @niceth: Nice to have - Thumbnails of notes images inside search (regex out from .Content variable) - Caching of index.json to load it once - ctr + k instead of cmd ? - Focused current note --> <style> search-menu { display: block; } #search { height: 100%; width: 0; position: fixed; background: var(--background-search); z-index: 1; top: 0; left: 0; border-right: 1px solid var(--separator-color); overflow-x: hidden; overflow-y: auto; opacity: 0; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } #search::-webkit-scrollbar { display: none; } #search-header { padding: 12px; position: fixed; padding-left: 12px; padding-right: 12px; background: var(--background-search); width: 250px; opacity: 1; height: 50px; z-index: 2; border-bottom: 1px solid var(--separator-color); } #search .input-container { position: relative } #search-input { width: 100%; height: 24px; border: 1px solid var(--separator-color); border-radius: 4px; padding-left: 24px; background-color: white; display: inline-block; } #search-input:focus { border: 1px solid var(--search-field-focused-color); } #search-header .input-container .search-icon { position: absolute; top: 6px; left: 8px; fill: darkGray; } #search-results img { width: 122px; height: 76px; border: 1px solid var(--separator-color); object-fit: cover; } #search-results { margin-top: 50px; overflow: auto; height: 100%; } #search-results a { width: 100%; padding-left: 25px; padding-right: 25px; padding-top: 12px; padding-bottom: 12px; display: inline-block; color: var(--text-base-color); border-bottom: 1px solid var(--separator-color); border-left: 6px solid var(--background-search); } #search-results a:first-child:hover, a:first-child:focus, .selected { outline: 0; background-color: var(--note-table-cell-selected-color); border-left: 6px solid var(--note-table-cell-ribbon-color) !important; } /* // Reseting default styles inside search component scope */ #search-results li { text-indent: 0; } #search-results li:before, #search-results h1:before, #search-results h2:before, #search-results h3:before, #search-results h4:before, #search-results h5:before, #search-results h6:before { content: ""; visibility: hidden; display: none; } </style> <search-menu id="search" data-turbolinks-permanent> <header id="search-header"> <div class="input-container"> <svg aria-hidden="true" class="search-icon" width="12" height="12" viewBox="0 0 18 18"> <path d="M18 16.5l-5.14-5.18h-.35a7 7 0 10-1.19 1.19v.35L16.5 18l1.5-1.5zM12 7A5 5 0 112 7a5 5 0 0110 0z"> </path> </svg> <input type="search" autocomplete="off" id="search-input" onkeyup="performSearch()" tabindex="0" placeholder="Search Notes"> </div> </header> <ul id="search-results"></ul> </search-menu>