1 files changed, 270 insertions, 0 deletions
diff --git a/src/css/epicker-ui.css b/src/css/epicker-ui.css
new file mode 100644
index 0000000..d09e1ef
--- /dev/null
+++ b/src/css/epicker-ui.css
@@ -0,0 +1,270 @@
+html#ublock0-epicker,
+#ublock0-epicker body {
+    background: transparent;
+    cursor: not-allowed;
+    height: 100vh;
+    margin: 0;
+    overflow: hidden;
+    width: 100vw;
+}
+#ublock0-epicker :focus {
+    outline: none;
+}
+#ublock0-epicker aside {
+    background-color: var(--surface-1);
+    border: 1px solid var(--border-2);
+    bottom: 2px;
+    box-sizing: border-box;
+    cursor: default;
+    display: none;
+    max-height: calc(100vh - 4px);
+    max-width: 36rem;
+    min-width: 24rem;
+    overflow-y: auto;
+    padding: 4px;
+    position: fixed;
+    right: 2px;
+    width: calc(40% - 2px);
+}
+/* https://github.com/uBlockOrigin/uBlock-issues/discussions/2114 */
+#ublock0-epicker aside {
+    min-width: min(24rem, 100vw - 4px);
+}
+#ublock0-epicker.paused:not(.zap) aside {
+    display: block;
+}
+#ublock0-epicker #toolbar {
+    display: flex;
+}
+#ublock0-epicker ul {
+    margin: 0.25em 0 0 0;
+}
+#ublock0-epicker.preview #preview {
+    background-color: var(--button-preferred-surface);
+    color: var(--button-preferred-ink);
+}
+#ublock0-epicker #move {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAFElEQVQI12NgwAfKy8v/M5ANYLoBshgEyQo6H9UAAAAASUVORK5CYII=');
+    cursor: grab;
+    flex-grow: 1;
+    margin: 2px 4px;
+    opacity: 0.8;
+    }
+#ublock0-epicker aside.moving #move {
+    cursor: grabbing;
+}
+#ublock0-epicker section {
+    border: 0;
+    box-sizing: border-box;
+    display: inline-block;
+    width: 100%;
+}
+#ublock0-epicker section > div:first-child {
+    border: 1px solid var(--surface-3);
+    margin: 0;
+    position: relative;
+}
+#ublock0-epicker section.invalidFilter > div:first-child {
+    border-color: var(--error-surface);
+}
+#ublock0-epicker section .codeMirrorContainer {
+    border: none;
+    box-sizing: border-box;
+    height: 8em;
+    max-height: 50vh;
+    min-height: 1em;
+    padding: 2px;
+    width: 100%;
+    }
+.CodeMirror-lines,
+.CodeMirror pre {
+    padding: 0;
+    }
+
+#ublock0-epicker section .resultsetWidgets {
+    display: flex;
+    font-size: var(--font-size-smaller);
+    }
+#resultsetModifiers {
+    align-items: flex-end;
+    display: inline-flex;
+    flex-grow: 1;
+    justify-content: space-evenly;
+    }
+#resultsetModifiers.hide > * {
+    visibility: hidden;
+    }
+.resultsetModifier {
+    border: 0;
+    pointer-events: auto;
+    position: relative;
+    width: 40%;
+    }
+.resultsetModifier > span {
+    align-items: flex-end;
+    display: flex;
+    height: 100%;
+    pointer-events: none;
+    width: 100%;
+    }
+.resultsetModifier > span > span {
+    margin: 2px 0;
+    }
+.resultsetModifier  > span > span:nth-of-type(1) {
+    background-color: var(--checkbox-checked-ink);
+    border-inline-end: 1px solid var(--surface-3);
+    display: inline-block;
+    flex-shrink: 0;
+    height: 6px;
+    }
+.resultsetModifier  > span > span:nth-of-type(2) {
+    background-color: var(--checkbox-checked-ink);
+    clip-path: polygon(
+        calc(50% - 2px) 0%,
+        0% calc(100% - 6px),
+        0% 100%,
+        100% 100%,
+        100% calc(100% - 6px),
+        calc(50% + 2px) 0%
+    );
+    display: inline-block;
+    flex-shrink: 0;
+    height: 16px;
+    width: 16px;
+    }
+.resultsetModifier  > span > span:nth-of-type(3) {
+    background-color: var(--surface-3);
+    border-inline-start: 1px solid var(--surface-3);
+    display: inline-block;
+    flex-grow: 1;
+    height: 6px;
+    }
+.resultsetModifier input {
+    border: 0;
+    height: 100%;
+    left: 0;
+    margin: 0;
+    opacity: 0;
+    padding: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    }
+#resultsetCount {
+    align-items: center;
+    background-color: var(--surface-3);
+    color: var(--ink-1);
+    display: inline-flex;
+    justify-content: center;
+    min-width: 2.2em;
+    }
+#ublock0-epicker section.invalidFilter #resultsetCount {
+    background-color: var(--error-surface);
+    color: var(--ink-100);
+}
+#ublock0-epicker section > div:first-child + div {
+    direction: ltr;
+    margin: 2px 0;
+    text-align: right;
+}
+#ublock0-epicker ul {
+    padding: 0;
+    list-style-type: none;
+    text-align: left;
+    overflow: hidden;
+}
+#ublock0-epicker #candidateFilters {
+    max-height: 14em;
+    overflow-y: auto;
+}
+#ublock0-epicker #candidateFilters > li:first-of-type {
+    margin-bottom: 0.5em;
+}
+#ublock0-epicker .changeFilter > li > span:nth-of-type(1) {
+    font-weight: bold;
+}
+#ublock0-epicker .changeFilter > li > span:nth-of-type(2) {
+    font-size: smaller;
+    color: gray;
+}
+#ublock0-epicker #candidateFilters .changeFilter {
+    list-style-type: none;
+    margin: 0 0 0 1em;
+    overflow: hidden;
+    text-align: left;
+}
+#ublock0-epicker #candidateFilters .changeFilter li {
+    border: 1px solid transparent;
+    cursor: pointer;
+    direction: ltr;
+    font: 12px monospace;
+    white-space: nowrap;
+}
+#ublock0-epicker #candidateFilters .changeFilter li.active {
+    border: 1px dotted rgb(var(--blue-50));
+    }
+#ublock0-epicker #candidateFilters .changeFilter li:hover {
+    background-color: var(--surface-2);
+}
+
+/**
+    https://github.com/gorhill/uBlock/issues/3449
+    https://github.com/uBlockOrigin/uBlock-issues/issues/55
+**/
+@keyframes startDialog {
+  0% { opacity: 1.0; }
+  60% { opacity: 1.0; }
+  100% { opacity: 0.1; }
+}
+#ublock0-epicker.paused aside {
+    opacity: 0.1;
+    visibility: visible;
+    z-index: 100;
+}
+#ublock0-epicker.paused:not(.show):not(.hide) aside:not(:hover) {
+    animation-duration: 1.6s;
+    animation-name: startDialog;
+    animation-timing-function: linear;
+}
+#ublock0-epicker.paused aside:hover {
+    opacity: 1;
+}
+#ublock0-epicker.paused.show aside {
+    opacity: 1;
+}
+#ublock0-epicker.paused.hide aside {
+    opacity: 0.1;
+}
+
+#ublock0-epicker svg {
+    cursor: crosshair;
+    box-sizing: border-box;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+}
+#ublock0-epicker.paused svg {
+    cursor: not-allowed;
+}
+#ublock0-epicker svg > path:first-child {
+    fill: rgba(0,0,0,0.5);
+    fill-rule: evenodd;
+}
+#ublock0-epicker svg > path + path {
+    stroke: #F00;
+    stroke-width: 0.5px;
+    fill: rgba(255,63,63,0.20);
+}
+#ublock0-epicker.zap svg > path + path {
+    stroke: #FF0;
+    stroke-width: 0.5px;
+    fill: rgba(255,255,63,0.20);
+}
+#ublock0-epicker.preview svg > path {
+    fill: rgba(0,0,0,0.10);
+}
+#ublock0-epicker.preview svg > path + path {
+    stroke: none;
+}