electron-findbar
Version:
Chrome-like findbar for your Electron app.
1 lines • 3.35 kB
HTML
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="Content-Security-Policy" content="script-src 'self'; style-src 'self' 'sha256-xegrQ38nadcaxMgXTqofPqPhLTW4XM5uk6u7cigFZb4='; default-src 'self'; connect-src 'none'; frame-src 'none'; object-src 'none'; font-src 'self'; img-src 'self'"><title>Find in page</title><style>*,:after,:before{box-sizing:border-box}body{margin:0;padding:0;font-weight:400;height:100vh;--bg-color:#fff;--border:#ddd;--color:#626262;--input-color:#111;--btn-hover-color:#ccc;--btn-active-color:#bbb;--font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-size:.75rem;--spacing:.5rem}body.dark{--bg-color:#1f1f1f;--border:#3f3f3f;--color:#a9a9aa;--input-color:#eee;--btn-hover-color:#333;--btn-active-color:#444}@media (prefers-color-scheme:dark){body:not(.light){--bg-color:#1f1f1f;--border:#3f3f3f;--color:#a9a9aa;--input-color:#eee;--btn-hover-color:#333;--btn-active-color:#444}}#match-case{fill:var(--color);user-select:none}#match-case>svg{width:20px}#close,#next,#previous{fill:none;stroke:var(--color);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}nav{display:flex;align-items:center;width:100%;height:100%;padding:var(--spacing);background-color:var(--bg-color);color:var(--color)}.linux nav{border-radius:10px;border:1px solid var(--border)}.btn-group,nav{gap:var(--spacing)}input,span{font-family:var(--font-family);font-size:var(--font-size)}span{color:var(--input-color);user-select:none}input{width:100%;background-color:transparent;color:var(--input-color);font-weight:500;border:none;outline:0}.divider{width:2px;height:100%;background-color:var(--btn-hover-color)}.btn-group{display:flex}button{background-color:transparent;border:none;border-radius:50%;cursor:default;width:26px;height:26px;padding:3px;text-align:center;transition:.2s linear all}button:hover{background-color:var(--btn-hover-color)}button:active{background-color:var(--btn-active-color)}button:focus{outline:0}button.disabled{opacity:.4}#next.disabled,#previous.disabled{background-color:transparent}.movable nav{-webkit-app-region:drag;app-region:drag}button,input{-webkit-app-region:no-drag;app-region:no-drag}</style></head><body class="movable"><nav><input id="input" spellcheck="false"> <span id="matches"></span> <button id="match-case" class="disabled" title="Match case"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke="none"><text x="4" y="15" font-size="14" font-family="monospace" font-weight="bold">A</text><text x="12" y="19" font-size="14" font-family="monospace">a</text></svg></button><div class="divider"></div><div class="btn-group"><button id="previous" class="disabled" title="Previous"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 15L12 10L17 15"/></svg></button> <button id="next" class="disabled" title="Next"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10L12 15L17 10"/></svg></button> <button id="close" title="Close"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 17.5L12 12.5L17 17.5"/><path d="M7 7.5L12 12.5L17 7.5"/></svg></button></div></nav></body></html>