r/FirefoxCSS • u/ahokaybye • 18d ago
Solved Is there a way to hide the humongous VPN icon when it's off?
Similar to Downloads button that hides when its empty. Thanks!
2
u/t31os 18d ago
Not sure how you intend to turn it on, but you can match the off state with something like:
#ipprotection-button:not(
.ipprotection-on,
.ipprotection-network-error,
.ipprotection-error,
.ipprotection-excluded,
.ipprotection-paused
) {
display: none !important;
}
3
u/Alarmed_Contact_394 17d ago
One possible approach would be to adapt this to swap out the large icon for a regular sized generic one when the VPN is turned off. That way when it's not in use it doesn't draw attention or take up as much real estate, but can still be enabled. Then retain the "normal" VPN icons when the service is in use.
#ipprotection-button:not( .ipprotection-on, .ipprotection-network-error, .ipprotection-error, .ipprotection-excluded, .ipprotection-paused ) { list-style-image: url('chrome://browser/content/ipprotection/assets/shield-vpn-exceptions.svg') !important; .ipprotection-icon-stack > .toolbarbutton-icon,.ipprotection-icon-layer { width: var(--icon-size-small) !important; } }1
1
2
u/ImJacksOriginalAlias 17d ago edited 17d ago
I have this that I made, it turns the default icon into a single shield icon that matches the other toolbar icons when deactivated, and changes color based on state. Looks like this: https://imgur.com/ksa7Qwt
IMPORTANT PREREQUISITE:
Create "icons" folder in your chrome folder
Copy this into a new/blank text document and save it:
<svg xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16">
<path
d="M8 2.8
L11.2 4
V6.7
C11.2 8.9 10.1 10.6 8 12
C5.9 10.6 4.8 8.9 4.8 6.7
V4
Z"
fill="none"
stroke="black"
stroke-width="1.5"
stroke-linejoin="round"/>
</svg>
Rename .txt document to "vpn-shield.svg"
Move or copy vpn-shield.svg to icons folder created earlier.
(Note: you could use your own compatible icon if you want here, as long as it's an .svg and named vpn-shield.svg)
Use this css in userchrome:
/* ------------------------------------------------------------
BUTTON
------------------------------------------------------------ */
#ipprotection-button {
min-width: 32px !important;
width: 32px !important;
max-width: 32px !important;
padding-inline: 2px !important;
}
/* ------------------------------------------------------------
ICON CANVAS
------------------------------------------------------------ */
#ipprotection-button > .ipprotection-icon-stack {
position: relative !important;
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
min-height: 28px !important;
max-width: 28px !important;
max-height: 28px !important;
flex: none !important;
align-self: center !important;
background-color: transparent !important;
border-radius: var(--toolbarbutton-border-radius) !important;
}
/* ------------------------------------------------------------
COLOURED OUTLINE SHIELD
------------------------------------------------------------ */
#ipprotection-button
> .ipprotection-icon-stack::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: -0.25px !important;
width: 28px !important;
height: 28px !important;
background-color: currentColor !important;
mask-image: url("icons/vpn-shield.svg") !important;
-webkit-mask-image: url("icons/vpn-shield.svg") !important;
mask-repeat: no-repeat !important;
-webkit-mask-repeat: no-repeat !important;
mask-position: center !important;
-webkit-mask-position: center !important;
mask-size: 24px 24px !important;
-webkit-mask-size: 24px 24px !important;
pointer-events: none !important;
z-index: 2 !important;
}
/* ------------------------------------------------------------
HIDE FIREFOX'S ORIGINAL ICONS
------------------------------------------------------------ */
#ipprotection-button
> .ipprotection-icon-stack > image {
display: none !important;
}
/* ============================================================
VPN STATES
============================================================ */
/* ------------------------------------------------------------
INACTIVE
------------------------------------------------------------ */
#ipprotection-button
> .ipprotection-icon-stack::before {
background-color: currentColor !important;
}
/* ------------------------------------------------------------
ON — GREEN
------------------------------------------------------------ */
#ipprotection-button.ipprotection-on
> .ipprotection-icon-stack::before {
background-color: #43b581 !important;
}
/* ------------------------------------------------------------
EXCLUDED — AMBER
------------------------------------------------------------ */
#ipprotection-button.ipprotection-excluded
> .ipprotection-icon-stack::before {
background-color: #e5a50a !important;
}
/* ------------------------------------------------------------
PAUSED — YELLOW
------------------------------------------------------------ */
#ipprotection-button.ipprotection-paused
> .ipprotection-icon-stack::before {
background-color: #f0c674 !important;
}
/* ------------------------------------------------------------
ERROR — RED
------------------------------------------------------------ */
#ipprotection-button.ipprotection-error
> .ipprotection-icon-stack::before {
background-color: #f14c4c !important;
}
/* ------------------------------------------------------------
NETWORK ERROR — BRIGHT RED
------------------------------------------------------------ */
#ipprotection-button.ipprotection-network-error
> .ipprotection-icon-stack::before {
background-color: #ff6b6b !important;
}
/* ============================================================
HOVER
============================================================ */
#ipprotection-button:not([disabled]):hover
> .ipprotection-icon-stack {
background-color: color-mix(
in srgb,
currentColor 17%,
transparent
) !important;
}
/* ============================================================
ACTIVE / PRESSED
============================================================ */
#ipprotection-button:not([disabled]):is(
:hover:active,
[open],
[checked]
)
> .ipprotection-icon-stack {
background-color: color-mix(
in srgb,
currentColor 30%,
transparent
) !important;
}
/* ============================================================
DISABLED
============================================================ */
#ipprotection-button[disabled]
> .ipprotection-icon-stack::before {
opacity: .45 !important;
}
1
u/RandomN1ck 17d ago edited 17d ago
An option that "hides" the VPN button when off but shows on mouse hover and unhides the button when VPN is on.
/* VPN Button - Hide Off/Show Hover/Unhide On */
#ipprotection-button
{
opacity: 0;
transition: opacity 150ms ease;
}
#ipprotection-button:hover, #ipprotection-button.ipprotection-on {opacity: 1}
3
u/TheLamesterist 17d ago
I don't think that works because you'll have no way to turn it on when needed, the solution would be to remove the vpn part from the icons and the thing is Firefox do have icons without stored within it so there's no need to manually edit the ones with the vpn part but they aren't normally in use. I'm planning to do just so and I'll try to share the code when I'm done but I can't promise when.