external/uBlock
1
0
Fork 0
mirror of https://github.com/gorhill/uBlock.git synced 2024-11-11 17:41:03 +01:00
Code Issues Projects Releases Packages Wiki Activity

Fine tune visuals of ruleset tools in popup panel

Browse source
This commit is contained in:
Raymond Hill 2020-02-01 11:36:14 -05:00
parent 0627fcfb62
commit 4629732a69
No known key found for this signature in database
GPG key ID: 25E1490B761470C2
2 changed files with 50 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
src/css/popup-fenix.css
View file

@ -48,10 +48,16 @@ hr {
top: 0; top: 0;
z-index: 100; z-index: 100;
} }
#sticky > div {
align-items: stretch;
display: flex;
justify-content: space-between;
}
#switch { #switch {
display: flex; display: flex;
flex-grow: 2;
justify-content: center; justify-content: center;
margin: 1em 0; margin: 0.5em 0;
} }
#switch .fa-icon { #switch .fa-icon {
fill: #0046ff; fill: #0046ff;
@ -66,6 +72,38 @@ hr {
body.off #switch .fa-icon { body.off #switch .fa-icon {
fill: #ccc; fill: #ccc;
} }
.rulesetTools {
background-color: transparent;
border: 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: space-evenly;
padding: 0.5em;
}
.rulesetTools [id] {
background-color: #ffe;
border: 1px solid #ddc;
border-radius: 4px;
cursor: pointer;
fill: #888;
flex-grow: 1;
font-size: 2.2em;
padding: 0;
visibility: hidden;
}
.rulesetTools [id]:not(:first-of-type) {
margin-top: 0.25em;
}
.rulesetTools [id]:hover {
fill: black;
}
body.needReload #refresh,
body.needSave #saveRules,
body.needSave #revertRules {
visibility: visible;
}
.itemRibbon { .itemRibbon {
display: grid; display: grid;
@ -450,35 +488,3 @@ body.advancedUser #firewallContainer > div > span.noopRule.ownRule {
#actionSelector.colorBlind > span:nth-of-type(3) { #actionSelector.colorBlind > span:nth-of-type(3) {
background-color: rgb(0, 19, 110); background-color: rgb(0, 19, 110);
} }
#rulesetTools {
background-color: transparent;
border: 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-evenly;
left: 0;
padding: 0.2em;
position: absolute;
top: 0;
}
#rulesetTools [id] {
background-color: #ffe;
border: 1px solid #ddc;
border-radius: 4px;
cursor: pointer;
fill: #888;
font-size: 1.8em;
padding: 0.2em 0.4em;
visibility: hidden;
}
#rulesetTools [id]:hover {
fill: black;
}
body.needReload #refresh,
body.needSave #saveRules,
body.needSave #revertRules {
visibility: visible;
}

18
src/popup-fenix.html
View file

@ -13,13 +13,17 @@
<body> <body>
<div id="main" class="tooltipContainer"> <div id="main" class="tooltipContainer">
<div id="sticky"> <div id="sticky">
<div id="switch" role="button" aria-label data-tip-position="under" tabindex="0"> <div>
<span class="fa-icon">power-off</span> <div class="rulesetTools">
</div> <span id="refresh" class="fa-icon">refresh</span>
<div id="rulesetTools"> </div>
<span id="refresh" class="fa-icon">refresh</span> <div id="switch" role="button" aria-label data-tip-position="under" tabindex="0">
<span id="saveRules" class="fa-icon" data-i18n-tip="popupTipSaveRules" data-tip-position="under">lock</span> <span class="fa-icon">power-off</span>
<span id="revertRules" class="fa-icon" data-i18n-tip="popupTipRevertRules" data-tip-position="under">eraser</span> </div>
<div class="rulesetTools">
<span id="saveRules" class="fa-icon" data-i18n-tip="popupTipSaveRules" data-tip-position="under">lock</span>
<span id="revertRules" class="fa-icon" data-i18n-tip="popupTipRevertRules" data-tip-position="under">eraser</span>
</div>
</div> </div>
<hr> <hr>
</div> </div>