prehistoric-systems/uBlock
1
0
Fork 0
mirror of https://github.com/gorhill/uBlock.git synced 2026-03-11 09:04:36 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

[mv3] Have the slider button size dictates all other dimensions

Browse source
This commit is contained in:
Raymond Hill 2025-05-12 16:55:23 -04:00
parent 82c6d5e8ff
commit 569dfea3cb
No known key found for this signature in database
GPG key ID: 25E1490B761470C2
4 changed files with 48 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
platform/mv3/extension/css/filtering-mode.css
View file

@ -1,20 +1,24 @@
:root {
--filtering-mode-button-size: 60px; /* should be multiple of 4 */
--filtering-mode-slider-width: calc(4 * var(--filtering-mode-button-size) + 3px);
}
.filteringModeSlider {
align-items: center;
container-type: size;
display: flex;
height: 60px;
height: var(--filtering-mode-button-size);
justify-content: center;
position: relative;
width: 240px;
width: var(--filtering-mode-slider-width);
}
.filteringModeButton {
background-color: var(--surface-1);
box-sizing: border-box;
border-radius: 30% 15% / 15% 30%;
height: calc(25cqw + 2px);
border-radius: 20%;
height: var(--filtering-mode-button-size);
position: absolute;
width: calc(25cqw + 2px);
width: var(--filtering-mode-button-size);
z-index: 10;
}
@ -23,9 +27,8 @@
border: 4px solid var(--accent-surface-1);
border-radius: inherit;
box-sizing: border-box;
height: calc(100% - 2px);
margin: 1px;
width: calc(100% - 2px);
height: 100%;
width: 100%;
}
.filteringModeSlider.moving .filteringModeButton > div,
@ -40,14 +43,12 @@
.filteringModeSlider span[data-level] {
background-color: var(--accent-surface-1);
border: 1px solid var(--accent-surface-1);
box-sizing: border-box;
display: inline-flex;
flex-shrink: 0;
height: 30%;
margin-left: 1px;
width: 25%;
width: var(--filtering-mode-button-size);
}
.filteringModeSlider span[data-level]:first-of-type {
margin-left: 0;
}
@ -60,25 +61,33 @@
left: 0;
}
.filteringModeSlider[data-level="1"] .filteringModeButton {
left: calc(25% - 1px);
left: calc(var(--filtering-mode-button-size) + 1px);
}
.filteringModeSlider[data-level="2"] .filteringModeButton {
left: calc(50% - 1px);
left: calc(var(--filtering-mode-button-size) * 2 + 2px);
}
.filteringModeSlider[data-level="3"] .filteringModeButton {
left: calc(75% - 1px);
left: calc(var(--filtering-mode-button-size) * 3 + 3px);
}
[dir="rtl"] .filteringModeSlider span[data-level] {
margin-left: 0;
margin-right: 1px;
}
[dir="rtl"] .filteringModeSlider span[data-level]:first-of-type {
margin-right: 0;
}
[dir="rtl"] .filteringModeSlider[data-level="0"] .filteringModeButton {
left: 75%;
right: 0;
}
[dir="rtl"] .filteringModeSlider[data-level="1"] .filteringModeButton {
left: 50%;
right: calc(var(--filtering-mode-button-size) + 1px);
}
[dir="rtl"] .filteringModeSlider[data-level="2"] .filteringModeButton {
left: 25%;
right: calc(var(--filtering-mode-button-size) * 2 + 2px);
}
[dir="rtl"] .filteringModeSlider[data-level="3"] .filteringModeButton {
left: 0;
right: calc(var(--filtering-mode-button-size) * 3 + 3px);
}

16
platform/mv3/extension/css/popup.css
View file

@ -10,7 +10,10 @@
--popup-gap: var(--font-size);
--popup-gap-thin: calc(0.5 * var(--popup-gap));
--popup-gap-extra-thin: calc(0.25 * var(--popup-gap));
--popup-main-min-width: 18em;
--popup-main-min-width: calc(
var(--filtering-mode-slider-width) +
var(--filtering-mode-button-size) / 2
);
--popup-firewall-min-width: 30em;
--popup-rule-cell-width: 5em;
font-size: var(--font-size);
@ -34,11 +37,14 @@ a {
display: flex;
flex-direction: column;
max-width: 340px;
min-width: 100%;
min-width: var(--popup-main-min-width);
}
:root.portrait #main {
align-self: inherit;
}
:root.mobile #main {
min-width: 100%;
}
hr {
border: 0;
border-top: 1px solid var(--hr-ink);
@ -70,11 +76,6 @@ body[data-forbid~="dashboard"] #gotoDashboard {
display: none;
}
.lrspacer {
padding-left: var(--default-gap-small);
padding-right: var(--default-gap-small);
}
#filteringModeText {
color: var(--ink-3);
margin-bottom: var(--default-gap-small);
@ -102,7 +103,6 @@ body[data-forbid~="dashboard"] #gotoDashboard {
align-self: center;
margin-bottom: var(--popup-gap);
margin-top: var(--popup-gap);
width: calc(var(--popup-main-min-width) - 1em);
}
.rulesetTools {

6
platform/mv3/extension/css/settings.css
View file

@ -1,3 +1,7 @@
:root {
--filtering-mode-button-size: 32px;
}
body.loading {
visibility: hidden;
}
@ -67,9 +71,7 @@ label:has(input[type="checkbox"][disabled]) + legend {
white-space: pre-line;
}
.filteringModeSlider {
height: calc(60px / 2);
pointer-events: none;
width: calc(240px / 2);
}
h3[data-i18n="filteringMode0Name"]::first-letter {

18
platform/mv3/extension/popup.html
View file

@ -18,19 +18,15 @@
<div id="main">
<div id="hostname"><span></span>&shy;<span></span></div>
<!-- -------- -->
<div class="lrspacer">
<div class="filteringModeSlider">
<div class="filteringModeButton"><div></div></div>
<span data-level="0"></span>
<span data-level="1"></span>
<span data-level="2"></span>
<span data-level="3"></span>
</div>
<div class="filteringModeSlider">
<div class="filteringModeButton"><div></div></div>
<span data-level="0"></span>
<span data-level="1"></span>
<span data-level="2"></span>
<span data-level="3"></span>
</div>
<!-- -------- -->
<div class="lrspacer">
<div id="filteringModeText"><label data-i18n="popupFilteringModeLabel">_</label><br><span>_</span><span></span></div>
</div>
<div id="filteringModeText"><label data-i18n="popupFilteringModeLabel">_</label><br><span>_</span><span></span></div>
<!-- -------- -->
<div class="toolRibbon pageTools">
<span id="gotoZapper" class="fa-icon tool enabled" data-i18n-title="zapperTipEnter">bolt<span class="caption" data-i18n="zapperTipEnter"></span></span>