<head> <meta charset="utf-8"> <style> :focus { outline: none; } html, body { background: transparent !important; color: black; font: 12px sans-serif; height: 100%; margin: 0; overflow: hidden; width: 100%; } ul, li, div { display: block; } ul { margin: 0.25em 0 0 0; } button { background-color: #ccc; border: 1px solid #aaa; border-radius: 3px; box-sizing: border-box; box-shadow: none; color: #000; cursor: pointer; margin: 0 0 0 2px; opacity: 0.7; padding: 4px 6px; } button:first-of-type { margin-left: 0; } button:disabled { color: #999; background-color: #ccc; } button:not(:disabled):hover { opacity: 1; } #create:not(:disabled) { background-color: #ffdca8; } section { border: 0; box-sizing: border-box; display: inline-block; position: relative; width: 100%; } section > textarea { background-color: #fff; border: 1px solid #ccc; box-sizing: border-box; font: 11px monospace; height: 6em; overflow: hidden; padding: 0; resize: none; width: 100%; } section > div { direction: ltr; margin: 2px 0; text-align: right; } section > div > span:last-of-type { position: absolute; right: 0; } ul { padding: 0; list-style-type: none; text-align: left; overflow: hidden; } aside > ul { height: 16em; overflow-y: auto; } aside > ul > li:first-of-type { margin-bottom: 0.5em; } ul > li > span:nth-of-type(1) { font-weight: bold; } ul > li > span:nth-of-type(2) { font-size: smaller; color: gray; } ul > li > ul { list-style-type: none; margin: 0 0 0 1em; overflow: hidden; text-align: left; } ul > li > ul > li { font: 11px monospace; white-space: nowrap; cursor: pointer; direction: ltr; } ul > li > ul > li:hover { background-color: white; } svg { position: fixed; top: 0; left: 0; cursor: crosshair; width: 100%; height: 100%; } .paused > svg { cursor: not-allowed; } svg > path:first-child { fill: rgba(0,0,0,0.75); fill-rule: evenodd; } svg > path + path { stroke: #F00; stroke-width: 0.5px; fill: rgba(255,31,31,0.25); } aside { background-color: #eee; bottom: 4px; box-sizing: border-box; visibility: hidden; height: calc(40% - 4px); padding: 4px; position: fixed; right: 4px; width: calc(40% - 4px); } body.paused > aside { opacity: 0.1; visibility: visible; z-index: 100; } body.paused > aside:hover { opacity: 1; } </style> </head> <body direction="{{bidi_dir}}"> <svg><path></path><path></path></svg> <aside> <section> <textarea lang="en" dir="ltr" spellcheck="false"></textarea> <div><!-- --><button id="create" type="button" disabled="disabled">{{create}}</button><!-- --><button id="pick" type="button">{{pick}}</button><!-- --><button id="quit" type="button">{{quit}}</button><!-- --></div> </section> <ul> <li id="netFilters"> <span>{{netFilters}}</span><ul lang="en" class="changeFilter"></ul> </li> <li id="cosmeticFilters"> <span>{{cosmeticFilters}}</span> <span>{{cosmeticFiltersHint}}</span> <ul lang="en" class="changeFilter"></ul> </li> </ul> </aside> </body>