Old PM15-style padlock icons for PM19 and up

[Sowmoots]

In Pale Moon 15 striped, 3D-looking padlock icons were used in the UI to show secure/EV/broken security status for sites. These were changed to flat, 2D-looking padlock icons in PM19.

For users that prefer how the padlock icons looked under PM15, this CSS code will change the look of these icons in PM19 and up back to the style used in PM15. This code also removes the empty areas that appear at the end of the status bar and the tab bar when padlocks are enabled but not shown in those areas.

Code: Select all

/*Restores the old striped padlock icons(broken/secure/trusted) that were changed to flat padlocks in Palemoon 19*/
/*Broken padlock*/
#padlock-ib[level="broken"][padshow="ib-trans-bg"],
#padlock-ib-left[level="broken"][padshow="ib-left"],
#padlock-ub-right[level="broken"][padshow="ub-right"],
#padlock-sb[level="broken"][padshow="statbar"],
#padlock-tab[level="broken"][padshow="tabs-bar"] {
    list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAnhJREFUeNqkU99LU1Ec/5zr3E/bMjfmXU0xXaMiX3oSHwzqpQeRalAUIfZUYH9A9FA++drrsB5CoughkCiooCAUwkRCG5rc2ObY5q9t7s6p9+6eezr3ug2DosADX875Xu7nx/me75cwxnCQZdmfSO8uDtga7YNfZ74Rt9v1/MLt7y//RSDUDh+i3XcXYksvsulkwe/zrH+ZXXs69+r86H87KG6W74dD4vCZy5NPjDy9Hv48N/9zTIo0xJxi64C7+Ugvk2Xk11anZEWZ0IBng/z+dYJQu9vi83nf1vIu0fs+Nb6oh29cH/e6mmDNZkDjcZRLpUhGVSMxxrrGCBmpEzgdDn1H3tip5Yk70/2nLl1zBkURDYkEElHTGLwBP0QQKAQPOIlk+RQ92dbeFri5q+zabcQ5KL05lyMCQdMJcdhQNsBUkvZctXqxURXwcBIr2IAl2NaR9Hf2YS3+Ed7g2UcgvK66ipyzuGc7lYK2nKoXrVINwsMB0iusZxdA7MfgC10BsQUhODqh0QawUsm8swGu5PO/EajVqNReIRt7DF3XwZgO16EWbBULKHtklOdzsBeL4BWHi999eR94i0cBbMokaPaHuG0FYBoE7sZqS2K7r4zM5KxZMGOVM6vmrnKibb6vgkEGJkwCObcMnVIYbW21yZA382DhClb6W6C8zpkFIxxYUzbAPxgbobwXTILD/tNgumoqEMEGSqfRaBUQGvJjpaMRS1MyKjPb2UrVtqFsgB/WGkkp8aeimqHDa0GRiqehaZSfGehxC452+9BzKx74YyvvqParSwuL94yfzQ8WAVJShqJQMzeG1eUURnv+MgvkoOP8S4ABADV6IMIW33wjAAAAAElFTkSuQmCC) !important;
}

/*Secure padlock*/
#padlock-ib[level="high"][padshow="ib-trans-bg"],
#padlock-ib-left[level="high"][padshow="ib-left"],
#padlock-ub-right[level="high"][padshow="ub-right"],
#padlock-sb[level="high"][padshow="statbar"],
#padlock-tabs[level="high"][padshow="tabs-bar"] {
    list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAe9JREFUeNqkk09oE0EUxr+dZLO7iY0tJixK06g1hSJ48SDiwYO96EXFgxf/HLyI4Fk8ePAg1VPPBRHEg/9QPClF0KuoFAmG1BBok5BGk9boJs06uzuzvlgD0m7bgLMM7Jt583vf+5hRfN/H/wxlI0Bx5vhJTdUvfvj4SYnHYw8nLn9+EpTHghZfTx+4ms8VHtWqpaaZ3N54N1u/n31+bDKwUlfB2vn09t6v2WdHLvXix3fGzj24mbaDcgMVZNLxcDKZeNmLx/aYM0Nxtd13C1HDkLa1ZPfiyuJih7SKLU18Oz0+kh7ZdX6l1bym6dEbLBReVpiCb/XGYL3RuWUmYlMrHffexJW5ciCg+OqEv3P0KOrzb5BIHaRdEigdCL6EQm4Ww6kUKuXSi0MXsqcDW2jU8lD0YSQzZ6BoKTBjFJ4IQQiJ3fvGwVQN0mud+vdMeG1PtdxdSCnJYYnYwA60fzbhcJsgAq7rrPNgHWDIzJBsTp55YKQmopXguZygHkFcVBe+bA6wlsuQVK3rTUSzYP34Dm63Yf9ywLkDQ99CwaC5H75claowjaq+hxphMLaFCKwSkG8O4K0FOuRBoU9Kgcp8FZ4n6N+HoDlAoA0BtqOfLeTnrneT/2yGGYoli6SLv9ceiEXZ5OF+XmO/47cAAwD3W/5lconD2wAAAABJRU5ErkJggg==) !important;
}

/*Trusted padlock*/
#padlock-ib[level="ev"][padshow="ib-trans-bg"],
#padlock-ib-left[level="ev"][padshow="ib-left"],
#padlock-ub-right[level="ev"][padshow="ub-right"],
#padlock-sb[level="ev"][padshow="statbar"],
#padlock-tabs[level="ev"][padshow="tabs-bar"] {
    list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAB3RJTUUH3AkaCBQSSJhU2wAAAAlwSFlzAAALEgAACxIB0t1+/AAAAdVJREFUeNpj/P//PwMlgAWXRPPpaH92dvb4c6cvMvLwci+fE3ZoFTZ1TNgEU1c55N64dmvF46eP3wuLCr6+f+bZwuqDoe1YbQJ5AR1HzDJ5UXbALxnGj5ppHhM8yeA7NrVYXSCmJMAiIiq8DcaXURXfySnA9oVoL/Byc/77+O3ddxj/6ePn34DUX2xqGZFjIWWNjZyMvHTsx6/vyznYOWtZmFjeMjIyMrx68Ubg45svrQKivP0/v/2aNy/86COssSAvL//QQNaa4fzTwwzqEgYTQA789/83g7ToW4bL1y8yyMrJ1D969EgfqDQQqxfuP7/NIMQqyWAt48MgzCLFIM4mB3Q4I8O/v/8Z1JTVGViZ2Bi+//kSgDcd7Ly7lOHfv3/gEBbgEWL48Pk9w89fPxj+/v3L8OvXL8IJSUpECaj5N9DpfxkE2SQY2NmeMvz8AzHg59/fDA8f38ZvwOsPT+Au+MT2keHDx/cM335+ZQAGHtgFTOwEXKAorMnw5x/EqSxAP3/+c46BmYWZgY2dlYH5HyPDz08/8Bvw8tsjsHNB0Qeinz96BuEDA/IPELPzsOA2gOkXW/itG7cqYWmDiYWJ4c399wx/fiLSECsnM0qeYKQ0OwMAN/rv8jWbqfQAAAAASUVORK5CYII=) !important;
}

/*Hide unused padlock icons that otherwise take up phantom space*/
#padlock-ib:not([padshow="ib-trans-bg"]),
#padlock-ib-left:not([padshow="ib-left"]),
#padlock-ub-right:not([padshow="ub-right"]),
#padlock-sb-panel:not([padshow="statbar"]),
#tabs-padlock-tbitem:not([padshow="tabs-bar"]) {
    visibility: collapse !important;
}

To use this code, put it in your userChrome.css file or use Stylish to create a new style and put the code in.

[Moonchild]

I've actually been planning to give users a choice in the padlock style, either modern (default) or classic. This code will become redundant once that's implemented, but in the meantime it's a good alternative

[Moonchild]

I'm adding the padlock style choice for classic/modern to Pale Moon 20.2. I'm also adopting the "cleanup" code to prevent phantom space (with some edits); thank you for pointing that out! It'll avoid unnecessary "jumping" of the user interface.