uBlock/platform/mv3/extension/css/tool-overlay-ui.css
Raymond Hill 0b0294af4f
[mv3] Add support for custom CSS-based cosmetic filters
Related issue:
https://github.com/uBlockOrigin/uBOL-home/issues/325

This is a first version, with support only for custom filters which are
plain CSS selectors. Future versions will extend support to style-based
and procedural cosmetic filters.

Manually text-editing existing custom filters is currently not supported,
this will be added in a future version in the Develop pane. To remove
existing custom filters, the "Remove a custom filter" tool can be used.
2025-07-06 16:43:22 -04:00

99 lines
2 KiB
CSS

:root {
--ubol-overlay-fill: rgba(255,255,255,0.2);
--ubol-overlay-border: #FFF;
--ubol-overlay-canvas: rgba(128,128,128,0.3);
}
:root.dark aside {
color-scheme: dark;
}
:root,
:root > body {
background: transparent;
height: 100vh;
height: 100svh;
margin: 0;
overflow: hidden;
width: 100vw;
}
:root > body.loading {
visibility: hidden;
}
:root :focus {
outline: none;
}
svg#overlay {
cursor: crosshair;
box-sizing: border-box;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
svg#overlay > path:first-child {
fill: var(--ubol-overlay-canvas);
fill-rule: evenodd;
}
svg#overlay > path + path {
stroke: var(--ubol-overlay-border);
stroke-width: 1.5px;
fill: var(--ubol-overlay-fill);
}
:root aside {
box-sizing: border-box;
cursor: default;
display: flex;
flex-direction: column;
position: fixed;
z-index: 100;
}
:root body[dir="rtl"] aside {
left: 2px;
right: unset;
}
:root.minimized aside > section:not(#windowbar) {
display: none !important;
}
:root.minimized aside {
min-width: min(12em, 100vw - 4px);
width: min(12em, 100vw - 4px);
}
:root aside #windowbar {
border-bottom: 1px solid var(--border-1);
display: flex;
}
:root aside #windowbar > div {
fill: none;
height: 2em;
stroke: var(--ink-1);
stroke-width: 2px;
width: 2em;
}
:root.minimized aside #windowbar > div {
height: 3em;
width: 3em;
}
:root.minimized aside #windowbar > #minimize svg > path,
#windowbar #minimize svg > rect {
display: none;
}
:root.minimized aside #windowbar > #minimize svg > rect {
display: initial;
}
:root #windowbar > #move {
align-items: center;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAFElEQVQI12NgwAfKy8v/M5ANYLoBshgEyQo6H9UAAAAASUVORK5CYII=');
cursor: grab;
display: flex;
justify-content: center;
flex-grow: 1;
}
:root #windowbar > div:hover {
background-color: var(--surface-2)
}