Repository URL to install this package:
Version:
2.0.11-8 ▾
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Notion Search</title>
</head>
<body>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
*,
*:focus {
outline: 0;
}
* {
box-sizing: border-box;
}
svg {
display: block;
width: 100%;
height: 100%;
fill: rgba(165, 165, 165, 0.5);
}
.enabled svg {
fill: rgba(165, 165, 165, 1);
}
#search-icon svg,
#clear-icon svg {
fill: rgba(165, 165, 165, 1);
}
#next,
#prev {
opacity: 0.5
}
#next.enabled,
#prev.enabled {
opacity: 1
}
#next,
#prev,
#search-icon,
#clear-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
}
#input-wrap {
display: flex;
position: relative;
}
#search-icon {
position: absolute;
left: 8px;
}
#clear-icon {
position: absolute;
right: 8px;
pointer-events: none;
opacity: 0;
}
#clear-icon.enabled {
pointer-events: auto;
opacity: 1;
cursor: pointer;
}
#button-separator {
opacity: 0.5;
}
#button-separator.enabled {
opacity: 1;
}
.icon {
width: 12px;
height: 12px;
flex-shrink: 0;
}
.button {
position: relative;
}
.button.enabled {
cursor: pointer;
}
.button.enabled::after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: inherit;
pointer-events: none;
transition: opacity 200ms ease-out;
background: rgb(165, 165, 165);
opacity: 0;
}
.button.enabled:hover::after {
opacity: 0.2;
}
</style>
<div id="container">
<div id="results">Not found</div>
<div id="prev" class="button">
<div class="icon">
<svg viewBox="0 0 30 30">
<polygon points="12.6 15 23 25.2 20.2 28 7 15 20.2 2 23 4.8" />
</svg>
</div>
</div>
<div id="button-separator"></div>
<div id="next" class="button">
<div class="icon">
<svg viewBox="0 0 30 30">
<polygon points="17.4,15 7,25.2 9.8,28 23,15 9.8,2 7,4.8" />
</svg>
</div>
</div>
<div id="input-wrap">
<div id="search-icon">
<div class="icon">
<svg viewBox="0 0 14 14">
<path d="M5.92239093,0.540000021 C2.94055203,0.540000021 0.5,2.98052217 0.5,5.96238099 C0.5,8.9442199 2.94055203,11.384762 5.92239093,11.384762 C7.02329179,11.384762 8.05258749,11.0564678 8.91032559,10.4866744 L12.1460745,13.6802311 C12.5695899,14.1037465 13.2589477,14.1037465 13.6823635,13.6802311 C14.1058788,13.2567158 14.1058788,12.5730353 13.6823635,12.1495199 L10.4410368,8.95033558 C11.0107904,8.09259747 11.3447619,7.06329182 11.3447619,5.96238099 C11.3447619,2.98052217 8.90420992,0.540000021 5.92239093,0.540000021 Z M5.92239093,2.70895241 C7.7320027,2.70895241 9.17580956,4.15272939 9.17580956,5.96238099 C9.17580956,7.77201268 7.7320027,9.21581954 5.92239093,9.21581954 C4.11275925,9.21581954 2.66895239,7.77201268 2.66895239,5.96238099 C2.66895239,4.15272939 4.11275925,2.70895241 5.92239093,2.70895241 Z"
/>
</svg>
</div>
</div>
<div id="clear-icon">
<div class="icon">
<svg viewBox="0 0 30 30">
<path d="M15,0C6.716,0,0,6.716,0,15s6.716,15,15,15s15-6.716,15-15S23.284,0,15,0z M22,20.6L20.6,22L15,16.4L9.4,22L8,20.6l5.6-5.6 L8,9.4L9.4,8l5.6,5.6L20.6,8L22,9.4L16.4,15L22,20.6z"
/>
</svg>
</div>
</div>
<input id="search" type="text" />
</div>
<div id="done" class="button enabled">Done</div>
</div>
<script>
window["__start"]()
</script>
</body>
</html>