summaryrefslogtreecommitdiffstats
path: root/src/css/epicker-ui.css
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-17 05:47:55 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-17 05:47:55 +0000
commit31d6ff6f931696850c348007241195ab3b2eddc7 (patch)
tree615cb1c57ce9f6611bad93326b9105098f379609 /src/css/epicker-ui.css
parentInitial commit. (diff)
downloadublock-origin-31d6ff6f931696850c348007241195ab3b2eddc7.tar.xz
ublock-origin-31d6ff6f931696850c348007241195ab3b2eddc7.zip
Adding upstream version 1.55.0+dfsg.upstream/1.55.0+dfsg
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'src/css/epicker-ui.css')
-rw-r--r--src/css/epicker-ui.css270
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;
+}