Skip to content

Instantly share code, notes, and snippets.

@myfonj
Last active July 24, 2023 23:38
Show Gist options
  • Save myfonj/f5415dd0580663a82ea18407ef2ee5de to your computer and use it in GitHub Desktop.
Save myfonj/f5415dd0580663a82ea18407ef2ee5de to your computer and use it in GitHub Desktop.
My userChrome for Firefox Developer edition
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
@namespace svg url("http://www.w3.org/2000/svg");
/*
userChrome.css
version: 2023-07-25
https://gist.github.com/myfonj/f5415dd0580663a82ea18407ef2ee5de/edit
§ HOWTO (Firefox ~88):
1. about:config
Create pref:
toolkit.legacyUserProfileCustomizations.stylesheets
(boolean)
`true`.
2. <firefox user profile folder>
See about:support#profile-row
3. This file
<firefox user profile folder>\chrome\userChrome.css
I.e. create `chrome` folder and `userChrome.css` file in it.
(You can use this file.)
4. Live editing
a. Open Devtools (F12) > Settings (F1) > Advanced
[✓] "Enable browser chrome and add-on debugging toolboxes"
[✓] "Enable remote debugging"
b. Tools > Browser tools > Browser Toolbox (Ctrl+Shift+Alt+I)
c. (confirm connection)
d. Console, $('head'), inspect; you should see this rule:
*/
html|html > html|head {
--userChrome----anchor----shortcut----teleport----userChrome: 'click ↑↑↑';
/*
Since Firefox ~109 you can also use 'Filter Stylesheets' search field in Styles tab.
*/
}
/*
e. Click "userChrome.css" on the right side above that rule
f. Edit, save (Ctrl+S), pick this file once again in the file manager…
g. and confirm overwrite.
h. Next time save will work without asking.
Happy hacking.
(Devtools have own profile with settings and possibly own
<firefox user profile folder>\chrome_debugger_profile\chrome\userChrome.css
but it does not seem to be injected into them and affects just few marginal areas.)
§ Changelog
2023-02-22 spelling corrections
2021-09-21 search bar in URL panel: collapsed to "button" until focused (ah, what a nostalgia!)
*/
/*
§ Birb favicon for formerly birb site, instead of 𝕏
(fixme: rework to clip-path or something less verbose)
*/
html|img.tab-icon-image[src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAB7ElEQVR4Ae1XMZLCMAwUdw0ldJQ8ATpKnkBJByUd8ALyA/gBdJTQUtHS8QT4AaRM5ctmThmfogQ75CYNmhGTbGJr45Vk0yAiQzXaF9VsHwIZAofDgYwxqo9GI/K16/X6cqyxvdVqmdvtZh6PhwmCIHXcw7vdrpFj8ny9XhsYxhe8lwWHw2EycLFYpNh0Ok2w8/nsFHy1WrkE1wnAN5tNMkGv10ux3W6XIab5fD5P3ovldCGrP2Ap4LiW8uRJAcIwe1wpArYU0FJimhQgxaQ9cqX4BZYCgSVmS8HBfRP1JQEsY1xKGSmAcTC+l0QrIWDraicVMBBA4O1265ScpQnAMbkMwphjub1HAI7EkxoDK7n0/gQQGATsCmDMo+z++Hf8E5CjPZ9PiqKIZrMZhWFIl8slxcbjMTWbTTqdTuRrXoz5i2WXRIL+WxWw2+Uml13rnJUT4K9E9nMFaF3SxiojoO1u2rJzl4z3/+oIcHBMLiUp2rDe3ozg+BIYtNee87KjGzLGndPx7JD/0K7xog2Gl30ymaSY1jm9CPhsrXnnBK1zOhHgCWWtF7l2TtA6p3S1E+73exoMBrRcLul4PJKL3e93arfbSUeMA1O/36eYPHU6nWQu7pyaqRlfZnezV05anhSN34va7PPXrHYCP+VaTG3LBV1KAAAAAElFTkSuQmCC"]
{
object-position: 1e2px;
background-color: transparent;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"><path \
fill="%231da1f2" d="M67.812,16.141c-2.348,1.039-4.869,1.743-7.519,2.06c2.703-1.62,4.778-4.187,5.756-7.244c-2.529,1.5-5.33,2.592-8.313,3.176C55.349,11.591,51.948,10,48.182,10c-7.229,0-13.092,5.861-13.092,13.093c0,1.026,0.118,2.021,0.338,2.981C24.543,25.526,14.9,20.317,8.441,12.395c-1.126,1.936-1.771,4.184-1.771,6.581c0,4.542,2.312,8.551,5.824,10.898c-2.146-0.069-4.165-0.657-5.93-1.638c-0.002,0.055-0.002,0.11-0.002,0.162c0,6.345,4.513,11.638,10.504,12.84c-1.101,0.298-2.256,0.457-3.449,0.457c-0.846,0-1.667-0.078-2.465-0.231c1.667,5.2,6.499,8.986,12.23,9.09C18.9,54.066,13.253,56.16,7.122,56.16c-1.055,0-2.096-0.061-3.122-0.184c5.794,3.717,12.676,5.882,20.067,5.882c24.083,0,37.251-19.949,37.251-37.249c0-0.566-0.014-1.134-0.039-1.694C63.838,21.068,66.058,18.765,67.812,16.141z"\
/></svg>\
');
}
/* notification */
html|img.tab-icon-image[src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACcklEQVR4Ae1XvYpaURCe3YQgCQStYkihIT/NhkQ7IYTYBhKwtNPSTn0CfQP1CbQznRaBYGWxbLDzCRItNoRUasgua3X2zIG5nJ0713uu+yMsOzBc/bz3zHfmm5l73AMABTu0fdix3U4CqfsP4PvTF3CcOoD/z9/C1ydpgzkRGAwGoJQSvVAogEvwo2ev4EPsEcT37xns88PH8ENjEok9YEUYj8dhOp2aa6fT8fBqtWqu2WwW5vN5IIG+3u0XHVCyw7MT+PTnpw9X3PP5vEKr1WoeVi6XDTYej5X0DLlOeaD/Th1Iz8gLtdttEzCTyXhYr9fzEeOOQTaR4Pf7JOBSUNqXy+UFeYKkwOJD/SX7dvoPin/n4RJwKVqtlg+TpEin0+rX4ZE6effet/Pj1Buli9BdAi4FBuaYLQUGn81marFYqI8vXyvdel5gnZWg4OEEdLqVTrtZHD/bGAbDwPSdE3X08JuwENH0jLiAIQEM3O12Q4vzUgTQcXEehDC0ZrO5TXB3AuhYeJR2G9sy9dEJYGAkYHcAYXaNRHEc1k1wNJwF6/UaKpUKrFYrmEwmHlYsFiEWi8FoNIKoFokx7ZhPSSzQa+sCcrvdeNrxit+3kMKdAO0Sq586QJqSNnZlBBqNhq/dpLTTlNRnh6sjQMFxcS4JTzthKJGjFJtvwJ2gofbS75R2nIaE0eQMOzuEErB73B4+3CntpVLJw6TJGYkAvd3CgvO08ynJMScCtCDv9U0unROkycldnIT9fh9yuRzU63UYDofgYng6SiQSZiLqwObEpMlDMpk0a9HklEys+G3ebnbmuAVJEXgmvCm7+2+4cwLn54MZvpiMZWwAAAAASUVORK5CYII="]
{
object-position: 1e2px;
background-color: transparent;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"><path \
fill="%231da1f2" d="M67.812,16.141c-2.348,1.039-4.869,1.743-7.519,2.06c2.703-1.62,4.778-4.187,5.756-7.244c-2.529,1.5-5.33,2.592-8.313,3.176C55.349,11.591,51.948,10,48.182,10c-7.229,0-13.092,5.861-13.092,13.093c0,1.026,0.118,2.021,0.338,2.981C24.543,25.526,14.9,20.317,8.441,12.395c-1.126,1.936-1.771,4.184-1.771,6.581c0,4.542,2.312,8.551,5.824,10.898c-2.146-0.069-4.165-0.657-5.93-1.638c-0.002,0.055-0.002,0.11-0.002,0.162c0,6.345,4.513,11.638,10.504,12.84c-1.101,0.298-2.256,0.457-3.449,0.457c-0.846,0-1.667-0.078-2.465-0.231c1.667,5.2,6.499,8.986,12.23,9.09C18.9,54.066,13.253,56.16,7.122,56.16c-1.055,0-2.096-0.061-3.122-0.184c5.794,3.717,12.676,5.882,20.067,5.882c24.083,0,37.251-19.949,37.251-37.249c0-0.566-0.014-1.134-0.039-1.694C63.838,21.068,66.058,18.765,67.812,16.141z"\
/><circle r="14" cx="15" cy="15" fill="red" opacity=".7" /></svg>\
');
}
/*
§ unround everything everywhere
*/
*|*:not(#\0):not(#\0):not(#\0),
*|*:not(#\0):not(#\0):not(#\0)::before,
*|*:not(#\0):not(#\0):not(#\0)::after {
border-radius: 0 !important;
}
/* */
@-moz-document url("chrome://browser/content/browser.xhtml") {
/*
§ Close Findbar: left
*/
findbar {
display: flex;
padding-left: 3em;
padding-right: : 3em;
outline: #0FF6 solid;
outline-offset: -2px;
position: relative;
}
findbar .findbar-closebutton { }
findbar .findbar-closebutton::before,
findbar .findbar-closebutton::after {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
border: 1px solid red !important;
width: 3em;
}
findbar .findbar-closebutton::before {
left: 0;
}
findbar .findbar-closebutton::after {
/* Strange, that `right: 0` does not work here. */
left: calc(100vw - 3em);
}
/*
§ Tabs: Un-Protonize
Restore former sharp tabs so they resemble
the initial "Alpenglow" theme from Fx 81 (2020),
not the "Proton" from Fx 89 (2021) with rounded floating tabs.
*/
#tabbrowser-tabs
{
& .tabbrowser-tab
{
--tab-border-radius: 0;
padding-inline-start: 0px !important;
padding-inline-end: 1px !important;
& .tab-background {
--REM: 'reversing to get container stripes down';
margin: 0 !important;
display: flex;
flex-direction: column-reverse;
position: relative;
--tweaks-focus-bar-thicness: 2px;
padding-top: var(--tweaks-focus-bar-thicness);
--REM: 'space for focus strip; not necessary.';
}
& .tab-content
{
.tabbrowser-tab[selected="true"] &
{
outline-color: #0FF6;
outline-style: solid;
outline-offset: -2px;
&:-moz-window-inactive
{
outline-color: #CCC6;
}
}
}
& .tab-background
{
.tabbrowser-tab[selected="true"] &
{
&:-moz-window-inactive::before
{
background-color: #CCC6;
}
&::before
{
--REM: 'not using original strip of background, using this pseudo instead';
content: '';
position: absolute;
inset: 0 0 auto 0;
height: var(--tweaks-focus-bar-thicness);
order: 5;
background-color: var(--focus-outline-color);
z-index: 2;
}
}
}
}
}
.tab-context-line {
--REM: 'container tab indentity';
max-width: .5em;
height: .5em !important;;
margin-inline-start: .7em !important;
}
/*
§ Tabs > Favicons: contrasting on any background with cycled highlight
Place cursor on the favicon to change its higlight:
- 0th second (initial): shape outlined by small shadow - light in dark theme and dark in light theme,
- 1st second: transparent background - i.e. no higlight like in vanilla theme,
- 2nd second: solid black background,
- 3rd second: solid white background,
- then cycle repeats.
Last displayed state remains after hover finishes.
*/
@keyframes cycle-background-and-filter {
0%, 23%, 100% {
background-color: rgba(255, 255, 255, 0);
filter: drop-shadow(0 0 0.5px);
}
25%, 48% {
background-color: rgba(0, 0, 0, 0);
filter: none;
}
50%, 73% {
background-color: rgba(0, 0, 0, 1);
filter: none;
}
75%, 98% {
background-color: rgba(255, 255, 255, 1);
filter: none;
}
}
/*
<image
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
class="menu-iconic-icon"
src="page-icon:https://jira.jtfg.com/projects/INFP/summary"/>
*/
xul|image.menu-iconic-icon[src^="page-icon:"],
html|*.tab-icon-image {
animation-name: cycle-background-and-filter;
animation-delay: 0;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-direction: forwards;
animation-timing-function: linear;
animation-play-state: paused;
}
.tabbrowser-tab:focus html|*.tab-icon-image,
.tabbrowser-tab html|*.tab-icon-image:hover {
animation-play-state: running;
--comment: "you can use shift+tab from location bar (Alt+D or Ctrl+L or F6)";
}
/*
§ Tabs: Dim Unloaded
*/
.tabbrowser-tab[pending] {
filter: grayscale(100%);
opacity: 0.5;
}
/*
§ Tabs: width without upper limit, smaller lower limit.
*/
.tabbrowser-tab {
max-width: none !important;
--tab-min-width: 4.5em;
}
.tab-content {
padding-inline-end: 0 !important;
--comment: "reset padding relies on the fade overlay";
}
/*
§ audio tabs slightly wider
*/
.tabbrowser-tab[fadein]:not([pinned])[soundplaying="true"] {
--tab-min-width: 4.5em;
}
/*
§ Fix notification dot placement
background defined in chrome://browser/skin/tabs.css
*/
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
background-position: center bottom !important;
}
/*
§ both "playing" and favicon visible
(Fx 89 displays favicon and swaps to play/mute button on tab bar hover)
*/
.tab-icon-stack {
display: inline-flex;
}
.tab-icon-stack > * {
opacity: 1 !important;
}
/*
§ Tabs: Numbered
Visible mnemonics for ctrl+number key switching.
Known issues: last visible tab should have number 9.
:has selector will probably solve it:
.tabbrowser-tab[fadein]:not([hidden]):not(:has(~:not([hidden])))
Sadly, it is not technically possible to select "last visible" tab
that should display `[9]` without (hopefuly upcoming) :has() selector support
| (eight or more visible tabs) | LAST VISIBLE TAB | one or more hidden tabs |
With :has() this will probably do the trick:
(eight ~ visible ~ tabs) ~ tab:not([hidden]):not(:has(~tab[hidden]))
*/
#TabsToolbar {
counter-reset: numkeyidx;
}
.tab-content::after {
content: none;
position: absolute;
top: 0;
left: 0;
width: .8em;
line-height: 1.2em;
text-align: center;
color: var(--toolbar-bgcolor, -moz-DialogText);
background-color: var(--toolbar-color, -moz-Dialog);
opacity: .6;
pointer-events: none;
}
.tabbrowser-tab[fadein]:not([hidden]) {
counter-increment: numkeyidx;
}
.tabbrowser-tab[fadein]:not([hidden]) .tab-content::after {
content: counter(numkeyidx)
}
/* 1 */ .tabbrowser-tab[fadein]:not([hidden])~
/* 2 */ .tabbrowser-tab[fadein]:not([hidden])~
/* 3 */ .tabbrowser-tab[fadein]:not([hidden])~
/* 4 */ .tabbrowser-tab[fadein]:not([hidden])~
/* 5 */ .tabbrowser-tab[fadein]:not([hidden])~
/* 6 */ .tabbrowser-tab[fadein]:not([hidden])~
/* 7 */ .tabbrowser-tab[fadein]:not([hidden])~
/* 8 */ .tabbrowser-tab[fadein]:not([hidden])~
/* 9 */ .tabbrowser-tab[fadein]:not([hidden]):not(:last-child) .tab-content:not(:hover)::after {
content: none;
--REM: "verbosity to skip hidden tabs";
}
.tabbrowser-tab[pinned] .tab-content::after {
left: 0
}
/*
§ Accomodate numbers better in pinned tabs
*/
.tabbrowser-tab[pinned] .tab-content {
padding-inline-start: .3em !important;
padding-inline-end: .3em !important;
}
.tabbrowser-tab[pinned] .tab-label-container {
}
/*
§ Tabs: aging
Un-focused tab slowly changes color (swaps text / background color).
Works with Light or Dark theme only.
*/
.tabbrowser-tab:not([selected]):not([pending]) .tab-label {
animation-name: tab-age-color;
animation-fill-mode: forwards;
animation-timing-function: steps(1, end);
animation-duration: calc(1s * 60 * 60 * 1.5);
}
@keyframes tab-age-color {
from {
color: var(--toolbar-color, #fff)
}
to {
color: var(--toolbar-bgcolor, #000)
}
}
.tabbrowser-tab[selected] .tab-background {
background-color: var(--toolbar-bgcolor) !important;
background-image: none !important;;
}
.tabbrowser-tab:not([selected]):not([pending]) .tab-background {
animation-name: tab-age-background;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-duration: calc(1s * 60 * 60 * 3);
}
@keyframes tab-age-background {
from {
background-color: var(--toolbar-bgcolor, #000)
}
to {
background-color: var(--toolbar-color, #fff)
}
}
/*
§ Tab: Close button (×): hide
*/
#tabbrowser-tabs .tabbrowser-tab .tab-close-button {
visibility: collapse;
}
/*
§ Window controls hidden when maximized
@note: alt+spacebar or taskbar context menu FTW
*/
html|*#main-window[sizemode="maximized"] .titlebar-buttonbox-container,
html|*#main-window[sizemode="maximized"] .titlebar-spacer[type="post-tabs"] {
visibility: collapse;
}
/*
§ Leave some space after tabs for "grip"
*/
#tabbrowser-tabs {
margin-right: 1.5em;
}
/*
§ Tabs - hide close button (x)
*/
.tab-close-button {
visibility: collapse !important
}
/*
§ Less disruptive generic bookmark icons
*/
#PlacesToolbarItems>.bookmark-item:not([image^="page-icon:http"])>.toolbarbutton-icon {
opacity: 0.5;
}
/* */
/*
§ ☆ "Add/Edit Bookmark": Show "URL" and "Keyword" and hide bookmarks in Ctrl+D doorhanger popup
Nobody wants to launch Library just to edit bookmark URL or change keyyword.
*/
*|*.editBMPanel_locationRow ,
*|*.editBMPanel_keywordRow ,
*|*.editBMPanel_keywordRow > * {
display: block !important;
}
*|*.editBMPanel_tagsRow {
display: none;
}
} /* 338 */
@-moz-document url('chrome://browser/content/pageinfo/pageInfo.xhtml'){
/*
§ Page Info image dynamic background
Page Info (Ctrl+I modal) > Media > Image preview: dynamic background revealing transparency
*/
html|img#thepreviewimage
{ image-rendering: -moz-crisp-edges !important
; background-color: #ccc !important
; background-image: url(data:image/gif;base64,R0lGODlhCgAKAIAAAAAAAP///yH5BAEAAAAALAAAAAAKAAoAAAIRhB2ZhxoM3GMSykqd1VltzxQAOw==) !important
}
html|img#thepreviewimage:hover
{ background-color: #fff !important
; background-image: none !important
}
html|img#thepreviewimage:active:hover
{ background-color: #666 !important
; background-image: none !important
}
html|img#thepreviewimage:active
{ background-color: #000 !important
; background-image: none !important
}
/* */
}
/*
§ collapse unfocused search in toolbar
0px breaks tabbing back
FIXME :root:not([customizing="true"]) condition
*/
#search-container:not(:focus-within) {
min-inline-size: 2em !important;
max-inline-size: 0;
animation: none !important;
transition: none !important;
margin: 0 !important;
}
#search-container:not(:focus-within) .searchbar-search-icon {
margin: 0 .25em !important
}
#search-container:not(:focus-within) html|*.searchbar-textbox {
opacity: 0;
}
/*
§ context menu: hide "Set Image as Desktop Background"
§ and "Email image…"
§ and "Inspect Accessibility Properties"
I'm not using background images ever
*/
menuseparator[id="context-sep-setbackground"] ,
menuitem[id="context-setDesktopBackground"] ,
menuitem[id="context-sendimage"],
menuitem[id="context-inspect-a11y"] {
visibility: collapse !important;
}
/*
§ URLbar "Firefox Suggest" label remove
<div xmlns="http://www.w3.org/1999/xhtml"
class="urlbarView-row"
role="option"
id="urlbarView-row-1847"
has-url="true"
label="Firefox Suggest">
*/
html|*.urlbarView-row[label="Firefox Suggest"]::before {
content: none !important;
}
html|*.urlbarView-row[label="Firefox Suggest"] {
margin-top: 0 !important;
}
/*
§ URLbar show URL always, even when there is "action" label
*/
html|*.urlbarView-url {
visibility: visible !important;
}
/*
§ no unnecessary icons for bookmark folders in the toolbar:
"🗀 label" -> "label▾" / "label▴"
*/
#PlacesToolbar toolbarbutton.bookmark-item > image[src^="page-icon:javascript:"] ,
#PlacesToolbar toolbarbutton.bookmark-item[type="menu"] > image {
visibility: collapse;
}
#PlacesToolbar toolbarbutton.bookmark-item[type="menu"] > label::after {
content: '▾';
opacity: .5;
}
#PlacesToolbar toolbarbutton.bookmark-item[type="menu"][open] > label::after {
content: '▴';
}
/*
§ no unnecessary icons for bookmarklets in the toolbar:
dimmed "!" instead of "globe"
*/
#PlacesToolbar toolbarbutton.bookmark-item > image[src^="page-icon:javascript:"] + label {
display: flex !important;
flex-direction: row-reverse;
}
#PlacesToolbar toolbarbutton.bookmark-item > image[src^="page-icon:javascript:"] + label::after {
content: '! ';
opacity: .5;
}
/*
§ Dimmed toolbar separator
(most unnecessary comment ever)
*/
toolbarseparator {
opacity: .4;
}
(function findStringInAllSheetsTexts (search) {
search = (search || '').toLowerCase();
var vsitedSheets = new Set();
var result = new Map();
function crawlImports (sheet) {
if (vsitedSheets.has(sheet)) {
return
};
vsitedSheets.add(sheet);
var matches = [];
[...sheet.cssRules]
.forEach(rule => {
if (rule.cssText.toLowerCase().includes(search)) {
matches.push(rule.cssText);
}
if (rule.styleSheet) {
crawlImports(rule.styleSheet);
}
});
if (matches.length) {
result.set(sheet, matches);
}
};
[...document.styleSheets].forEach(sheet => crawlImports(sheet));
var forlog = {};
[...result.entries()].forEach(entry=> {
console.log(entry[0]);
console.log(entry[0].href || entry[0].ownerNode);
entry[1].forEach(_=>console.log(_));
});
})('verdana');
(function getAllSheetsTexts() {
var allSheets = new Set();
var sheetCSSTexts = new Map();
function addWithImports (sheet) {
if (allSheets.has(sheet)) {
console.debug('already linked or imported');
return
};
allSheets.add(sheet);
let CSSText = ['/*', sheet.href, '*/'];
[...sheet.cssRules]
.forEach(rule => {
CSSText.push(rule.cssText);
if (rule.styleSheet) {
addWithImports(rule.styleSheet);
}
})
sheetCSSTexts.set(sheet, CSSText.join('\n'));
};
[...document.styleSheets].forEach(sheet => addWithImports(sheet));
copy([...sheetCSSTexts.values()].join('\n'));
return "(check your clipboard)";
})();
@-moz-document url-prefix("about:")
{
*|*:not(#\0):not(#\0):not(#\0),
*|*:not(#\0):not(#\0):not(#\0)::before,
*|*:not(#\0):not(#\0):not(#\0)::after {
border-radius: 0 !important;
}
}
@-moz-document url("chrome://devtools/content/responsive.html/index.xhtml")
{
/* #app {align-items: flex-start !important; } */
}
@-moz-document domain(mail.google.com) {
/* Apply styling to all icons and keep them aligned nicely */
img:-moz-any(.yE,.Ab,.f.gW,.f.hf) {
width: 0px !important;
height: 0px !important;
padding-left: 16px;
padding-top: 16px;
background-repeat: no-repeat;
background-size: cover;
}
/* Multiple attachments */
img:-moz-any(.yE,.f.gW)[title*=","] {
background-image: url(https://ssl.gstatic.com/docs/doclist/images/icon_11_collection_list.png) !important;
background-position: 0px 1px !important;
}
/* Specific icons for specific attachment types */
/* Generic files */
img:-moz-any(.yE,.f.gW):-moz-any(
[title$=".p7s"i],
[title$=".eml"i],
[title$=".vcf"i],
[title$=".dat"i]
):not([title*=","]) {
background-image: url(https://ssl.gstatic.com/docs/doclist/images/icon_10_generic_list.png) !important;
background-position: left !important;
}
/* video */
img:-moz-any(.yE,.f.gW):-moz-any(
[title$=".avi"i],
[title$=".mp4"i],
[title$=".m4v"i],
[title$=".3gpp"i],
[title$=".3gp"i],
[title$=".3g2"i],
[title$=".mov"i],
[title$=".mpg"i],
[title$=".mpeg"i],
[title$=".vob"i],
[title$=".asf"i],
[title$=".asx"i],
[title$=".wmv"i],
[title$=".mkv"i],
[title$=".webm"i],
[title$=".ogv"i],
[title$=".flv"i],
[title$=".swf"i]
):not([title*=","]) {
background-image: url(https://ssl.gstatic.com/docs/doclist/images/icon_11_video_list.png) !important;
background-position: left !important;
}
/* Binary files and executables */
img:-moz-any(.yE,.f.gW):-moz-any(
[title$=".bin"i],
[title$=".ex_"i],
[title$=".out"i],
[title$=".run"i],
[title$=".prc"i],
[title$=".pdb"i],
[title$=".xpi"i],
[title$=".jar"i],
[title$=".pyc"i],
[title$=".class"i],
[title$=".rom"i],
[title$=".bundle"i],
[title$=".apk"i]
):not([title*=","]) {
background-image: url(https://ssl.gstatic.com/docs/common/jfk_sprite43.png) !important;
/* Google Docs Spreadsheets Insert Gadget */
background-position: -24px -1453px !important;
}
/* Images and photographs */
img:-moz-any(.yE,.f.gW):-moz-any(
[title$=".bmp"i],
[title$=".jpeg"i],
[title$=".jpg"i],
[title$=".dib"i],
[title$=".gif"i],
[title$=".png"i],
[title$=".tif"i],
[title$=".tiff"i],
[title$=".psd"i]
):not([title*=","]) {
background-image: url(https://ssl.gstatic.com/docs/doclist/images/icon_11_image_list.png) !important;
background-position: left !important;
}
/* Vector graphics and line drawings */
img:-moz-any(.yE,.f.gW):-moz-any(
[title$=".svg"i],
[title$=".svgz"i],
[title$=".ai"i],
[title$=".wmf"i],
[title$=".wmz"i]
):not([title*=","]) {
background-image: url(https://ssl.gstatic.com/docs/doclist/images/icon_11_drawing_list.png) !important;
background-position: left !important;
}
/* Word-processing documents */
img:-moz-any(.yE,.f.gW):-moz-any(
[title$=".doc"i],
[title$=".dot"i],
[title$=".docx"i],
[title$=".dotx"i],
[title$=".rtf"i],
[title$=".odt"i]
):not([title*=","]) {
background-image: url(https://ssl.gstatic.com/docs/doclist/images/icon_11_document_list.png) !important;
background-position: left !important;
}
/* Web pages and XML documents */
img:-moz-any(.yE,.f.gW):-moz-any(
[title$=".html"i],
[title$=".htm"i],
[title$=".xhtml"i],
[title$=".url"i],
[title$=".mht"i],
[title$=".mhtml"i],
[title$=".xml"i],
[title$=".xul"i],
[title$=".epub"i],
[title$="/"]):not([title*=","]) {
background-image: url(https://ssl.gstatic.com/docs/doclist/images/icon_11_sites_list.png) !important;
background-position: left !important;
}
/* Scripts and source code */
img:-moz-any(.yE,.f.gW):-moz-any(
[title$=".js"i],
[title$=".css"i],
[title$=".patch"i],
[title$=".patc"i],
[title$=".pat"i],
[title$=".diff"i],
[title$=".rdf"i],
[title$=".php"i],
[title$=".vb"i],
[title$=".vbs"i],
[title$=".sh"i],
[title$=".bat"i],
[title$=".cmd"i],
[title$=".c"i],
[title$=".cpp"i],
[title$=".h"i],
[title$=".java"i],
[title$=".py"i]
):not([title*=","]) {
background-image: url(https://ssl.gstatic.com/docs/doclist/images/icon_11_script_list.png) !important;
background-position: left !important;
}
/* Audio and music */
img:-moz-any(.yE,.f.gW):-moz-any(
[title$=".mp3"i],
[title$=".wma"i],
[title$=".m4a"i],
[title$=".aac"i],
[title$=".ogg"i],
[title$=".oga"i],
[title$=".ac3"i],
[title$=".dts"i],
[title$=".wav"i],
[title$=".flac"i],
[title$=".wv"i],
[title$=".m3u"i],
[title$=".pls"i],
[title$=".mid"i]
):not([title*=","]) {
background-image: url(https://ssl.gstatic.com/docs/doclist/images/icon_10_audio_list.png) !important;
background-position: left !important;
}
/* Portable documents (PDF and PostScript) */
img:-moz-any(.yE,.f.gW):-moz-any(
[title$=".pdf"i],
[title$=".ps"i]
):not([title*=","]) {
background-image: url(https://ssl.gstatic.com/docs/doclist/images/icon_10_pdf_list.png) !important;
background-position: left !important;
}
/* Presentations */
img:-moz-any(.yE,.f.gW):-moz-any(
[title$=".ppt"i],
[title$=".pptx"i],
[title$=".pps"i],
[title$=".ppsx"i],
[title$=".odp"i]
):not([title*=","]) {
background-image: url(https://ssl.gstatic.com/docs/doclist/images/icon_11_presentation_list.png) !important;
background-position: left !important;
}
/* Download links */
img:-moz-any(.yE,.f.gW):-moz-any(
[title$=".torrent"i]
):not([title*=","]) {
background-image: url(https://ssl.gstatic.com/docs/common/jfk_sprite43.png) !important;
background-position: -2px -170px !important;
/* Got a better icon from Google Docs? */
}
/* Fonts and typefaces */
img:-moz-any(.yE,.f.gW):-moz-any(
[title$=".ttf"i],
[title$=".otf"i],
[title$=".pfb"i],
[title$=".pfm"i]
):not([title*=","]) {
background-image: url(https://ssl.gstatic.com/docs/common/jfk_sprite43.png) !important;
background-position: -23px -1092px !important;
}
/* Plain text */
img:-moz-any(.yE,.f.gW):-moz-any(
[title$=".txt"i],
[title$=".asc"i],
[title$=".pgp"i],
[title$=".log"i]
):not([title*=","]) {
background-image: url(https://ssl.gstatic.com/docs/doclist/images/mediatype/icon_1_text_x16.png) !important;
background-position: left !important;
}
/* Spreadsheets */
img:-moz-any(.yE,.f.gW):-moz-any(
[title$=".xls"i],
[title$=".xlsx"i],
[title$=".xlsb"i],
[title$=".csv"i],
[title$=".ods"i]
):not([title*=","]) {
background-image: url(https://ssl.gstatic.com/docs/doclist/images/icon_10_spreadsheet_list.png) !important;
background-position: left !important;
}
/* File archives */
img:-moz-any(.yE,.f.gW):-moz-any(
[title$=".zip"i],
[title$=".rar"i],
[title$=".cab"i],
[title$=".tar"i],
[title$=".gz"i],
[title$=".tgz"i],
[title$=".bz2"i],
[title$=".7z"i]
):not([title*=","]) {
background-image: url(https://ssl.gstatic.com/docs/doclist/images/icon_9_archive_list.png) !important;
background-position: left !important;
}
}
@myfonj
Copy link
Author

myfonj commented Sep 13, 2022

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment