Mirrors
/
uBlock
mirror of https://github.com/gorhill/uBlock.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fine tune visuals of ruleset tools in popup panel

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;
z-index: 100;
}
#sticky > div {
align-items: stretch;
display: flex;
justify-content: space-between;
}
#switch {
display: flex;
flex-grow: 2;
justify-content: center;
margin: 1em 0;
margin: 0.5em 0;
}
#switch .fa-icon {
fill: #0046ff;
@ -66,6 +72,38 @@ hr {
body.off #switch .fa-icon {
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 {
display: grid;
@ -450,35 +488,3 @@ body.advancedUser #firewallContainer > div > span.noopRule.ownRule {
#actionSelector.colorBlind > span:nth-of-type(3) {
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>
<div id="main" class="tooltipContainer">
<div id="sticky">
<div id="switch" role="button" aria-label data-tip-position="under" tabindex="0">
<span class="fa-icon">power-off</span>
</div>
<div id="rulesetTools">
<span id="refresh" class="fa-icon">refresh</span>
<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 class="rulesetTools">
<span id="refresh" class="fa-icon">refresh</span>
</div>
<div id="switch" role="button" aria-label data-tip-position="under" tabindex="0">
<span class="fa-icon">power-off</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>
<hr>
</div>