Skip to content

Instantly share code, notes, and snippets.

@s-zeid

s-zeid/tst-separator.url

Last active September 7, 2022 07:09
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save s-zeid/f4c51606f99e990774133e9eb46905ee to your computer and use it in GitHub Desktop.
Save s-zeid/f4c51606f99e990774133e9eb46905ee to your computer and use it in GitHub Desktop.
Download ZIP
Tree Style Tab separator data: URI (public domain / Creative Commons Zero)
Raw
tst-separator.url
data:text/html;charset=utf-8,<html id="separator" data-string="\u2013" data-length="35" data-background="GrayText" data-opacity="0.125"> <link rel="help" href="https://gist.github.com/f4c51606f99e990774133e9eb46905ee" /><script>addEventListener("load", () => { const html = document.documentElement; document.title = JSON.parse(`"${html.dataset.string.replace('"', '\\"')}"`).repeat(Number(html.dataset.length) || 1); const background = document.querySelector("[id='background']"); background.style.background = html.dataset.background || "unset"; background.style.opacity = html.dataset.opacity || "1"; });</script><style>body, [id="background"] { height: 100%; margin: 0; }</style><link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQIHWP4zwAAAgEBAMVfG14AAAAASUVORK5CYII=" /><div id="background">
Raw
tst.css
/* Height, opacity, and hide icon for Tree Style Tab separator data: URI tabs
<https://gist.github.com/f4c51606f99e990774133e9eb46905ee> */
.tab[data-current-uri^="data:text/html;"][data-current-uri*='<link rel="help" href="https://gist.github.com/f4c51606f99e990774133e9eb46905ee" />'] {
height: var(--favicon-size); padding-left: 0;
}
.tab[data-current-uri^="data:text/html;"][data-current-uri*='<link rel="help" href="https://gist.github.com/f4c51606f99e990774133e9eb46905ee" />'] .favicon {
display: none !important;
}
.tab[data-current-uri^="data:text/html;"][data-current-uri*='<link rel="help" href="https://gist.github.com/f4c51606f99e990774133e9eb46905ee" />'] .label {
opacity: 0.375 !important;
}
Raw
userChrome.css
/* Set the bookmarks toolbar icon in userChrome.css since the actual favicon is transparent */
#personal-bookmarks .bookmark-item[image*="https://gist.github.com/f4c51606f99e990774133e9eb46905ee"][label="Separator"] .toolbarbutton-icon {
background: center center no-repeat url("data:image/svg+xml,<svg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 32 32'%0A%20%20%20%20 fill%3D'none' stroke%3D'currentcolor' stroke-width%3D'4'>%0A <path d%3D'M0%2C16 h32' %2F>%0A <path d%3D'M6%2C6 h20 M6%2C26 h20' opacity%3D'0.3125' %2F>%0A<%2Fsvg>");
}
/* Narrow icon for when the bookmarks toolbar items are moved to the main toolbar and text is hidden (see below) */
#personal-bookmarks .bookmark-item[image*="https://gist.github.com/f4c51606f99e990774133e9eb46905ee"][label="Separator"] .toolbarbutton-icon {
background: center center no-repeat url("data:image/svg+xml,<svg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 32 32'%0A%20%20%20%20 fill%3D'none' stroke%3D'currentcolor' stroke-width%3D'4'>%0A <path d%3D'M4%2C16 h24' %2F>%0A <path d%3D'M9%2C6 h14 M9%2C26 h14' opacity%3D'0.3125' %2F>%0A<%2Fsvg>");
}
/* Optional: hide bookmarks toolbar button text when moved to the main toolbar */
#nav-bar #personal-bookmarks .bookmark-item .toolbarbutton-text {
display: none !important;
}
#nav-bar #personal-bookmarks .bookmark-item .toolbarbutton-icon {
margin-inline-end: 0 !important;
}
/* Optional: hide bookmarks toolbar overflow button in the main toolbar */
#nav-bar #PlacesChevron {
display: none !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment