Last active
August 10, 2018 19:24
-
-
Save dnordstrom/4b4c779cc4099c5dd099bc44fbd079ed to your computer and use it in GitHub Desktop.
userChrome.css
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="UTF-8"?> | |
| <!DOCTYPE bindings> | |
| <bindings xmlns="http://www.mozilla.org/xbl"> | |
| <binding id="urlbar" extends="chrome://browser/content/urlbarBindings.xml#urlbar"> | |
| <handlers> | |
| <handler event="focus"> | |
| <![CDATA[ | |
| this.formatValue(); | |
| ]]> | |
| </handler> | |
| <handler event="blur"> | |
| <![CDATA[ | |
| this.formatValue(); | |
| ]]> | |
| </handler> | |
| </handlers> | |
| <implementation> | |
| <constructor> | |
| <![CDATA[ | |
| const self = this; | |
| gBrowser.addProgressListener({ | |
| QueryInterface: XPCOMUtils.generateQI([ | |
| "nsIWebProgressListener", | |
| "nsISupportsWeakReference" | |
| ]), | |
| // State notification is received on request complete: | |
| // page title should be available | |
| onStateChange() { | |
| self.formatValue(); | |
| } | |
| }); | |
| ]]> | |
| </constructor> | |
| <method name="formatValue"> | |
| <body> | |
| <![CDATA[ | |
| // Ignore if tab/search/history action selected in dropdown | |
| if (this._value.startsWith("moz-action")) return; | |
| let updatedTextContent = this._value; | |
| // Simplify URL box content if not focused/editing | |
| if (!this.focused) { | |
| let baseUrl = | |
| this._value.replace(/^\/\/|^.*?:(\/\/)?/, ""); | |
| try { | |
| updatedTextContent = | |
| gBrowser.selectedBrowser.contentTitle || baseUrl; | |
| } catch (err) { | |
| updatedTextContent = baseUrl; | |
| } | |
| } | |
| this.editor.rootElement.firstChild.textContent = updatedTextContent; | |
| ]]> | |
| </body> | |
| </method> | |
| </implementation> | |
| </binding> | |
| </bindings> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); | |
| /** | |
| * Custom UI Styles for Firefox (Quantum) | |
| * | |
| * @author Daniel Nordstrom | |
| */ | |
| /** | |
| * Settings & Variables | |
| */ | |
| :root { | |
| /* Number of buttons to hide to the left of navbar */ | |
| --uc-set-navbar-slider-buttons-count: 2; | |
| /* Color Palette */ | |
| --uc-colors-accent: #16A085; | |
| --uc-colors-verified-green: #12BC00; | |
| /* Color Adjustments */ | |
| --toolbox-border-bottom-color: var( | |
| inherit, | |
| --lwt-toolbarbutton-hover-background, | |
| --lwt-toolbar-field-background-color | |
| ) !important; | |
| --urlbar-separator-color: transparent !important; | |
| /* Photon Transitions */ | |
| --uc-transition-timing: cubic-bezier(.07, .95, 0, 1); | |
| --uc-transition: all 0.25s var(--uc-transition-timing); | |
| /* Sharp Edges */ | |
| --toolbarbutton-border-radius: 0px !important; | |
| /* Navigation Buttons - Slide On Mouseover */ | |
| --uc-set-navbar-slider-buttons-count: 2; | |
| /* Width of a navigation button on normal density */ | |
| --uc-navbar-slider-button-width: 37px; | |
| /* Optional added aesthetic space */ | |
| --uc-navbar-slider-spacing: 0; | |
| /* Negative margin needed to hide all buttons */ | |
| --uc-navbar-slider-total-margin: | |
| calc(-1 * ( | |
| (var(--uc-navbar-slider-spacing) * 1px) + | |
| (var(--uc-set-navbar-slider-buttons-count, 3) * var(--uc-navbar-slider-button-width)) | |
| )); | |
| } | |
| :root[uidensity="compact"] { --uc-navbar-slider-button-width: 32px; } | |
| :root[uidensity="touch"] { --uc-navbar-slider-button-width: 39px; } | |
| /** | |
| * Fonts & Sizes | |
| */ | |
| /* URL bar font size */ | |
| #urlbar { | |
| font-size: 12px !important; | |
| } | |
| /* Tab bar font size */ | |
| #tabbrowser-tabs { | |
| font-size: 12px !important; | |
| } | |
| /* URL bar autocomplete dropdown */ | |
| .ac-title, | |
| .ac-tags, | |
| .ac-separator, | |
| .ac-url, | |
| .ac-action { | |
| font-size: 12px !important; | |
| } | |
| /** | |
| * Bookmarks Toolbar | |
| * | |
| * Show when: | |
| * - Mouseover navbar | |
| * - On new tab page | |
| * - On customization page | |
| * - Menu bar active (by pressing alt or enabling its toolbar) | |
| * | |
| * Plus very minor size/style adjustments. | |
| */ | |
| /* Height - 22px default */ | |
| :root { --uc-bookmarks-toolbar-extra-padding: 2px; } | |
| :root[uidensity="compact"] { --uc-bookmarks-toolbar-height: 20px; } | |
| :root[uidensity="touch"] { --uc-bookmarks-toolbar-height: 26px; } | |
| /* Hide bookmarks toolbar behind navbar */ | |
| #nav-bar { | |
| z-index: 1 !important; | |
| } | |
| /* Slide up except in specific context */ | |
| :root:not([customizing]):not([title^="New Tab"]) /* Customize or new tab */ | |
| #navigator-toolbox:not(:hover) /* Mouseover UI */ | |
| #toolbar-menubar[inactive]:not(enabled) ~ /* Menu bar active or enabled */ | |
| #PersonalToolbar { /* Clear to hide */ | |
| margin-top: calc( | |
| -1 * | |
| calc( /* Negate height, and correct 2px since toolbar only pads bottom */ | |
| var(--uc-bookmarks-toolbar-height, 22px) + 2px) | |
| ) !important; | |
| } | |
| #PersonalToolbar { | |
| transition: var(--uc-transition) !important; | |
| /* Window dragging messes with mouseover area */ | |
| -moz-window-dragging: no-drag !important; | |
| } | |
| /* Subtle separator */ | |
| toolbarseparator { | |
| margin-left: 2px; | |
| margin-right: 2px; | |
| opacity: 0.2; | |
| } | |
| /** | |
| * Toolbar Buttons | |
| */ | |
| /* Hide unless navbar mouse-over or menu bar active (pressing Alt) */ | |
| :root:not([customizing]) #toolbar-menubar[inactive] ~ #TabsToolbar .tabs-newtab-button, | |
| :root:not([customizing]) #toolbar-menubar[inactive] ~ #TabsToolbar #tabbrowser-tabs ~ toolbarbutton, | |
| :root:not([customizing]) #toolbar-menubar[inactive] ~ #nav-bar #urlbar-container ~ toolbarbutton, | |
| :root:not([customizing]) #toolbar-menubar[inactive] ~ #nav-bar #urlbar-container #page-action-buttons, | |
| :root:not([customizing]) #toolbar-menubar[inactive] ~ #nav-bar #nav-bar-overflow-button { | |
| transition: var(--uc-transition) !important; | |
| opacity: 0 !important; | |
| } | |
| #navigator-toolbox:hover #toolbar-menubar ~ #TabsToolbar .tabs-newtab-button, | |
| #navigator-toolbox:hover #toolbar-menubar ~ #TabsToolbar #tabbrowser-tabs ~ toolbarbutton, | |
| #navigator-toolbox:hover #toolbar-menubar ~ #nav-bar #urlbar-container ~ toolbarbutton, | |
| #navigator-toolbox:hover #toolbar-menubar ~ #nav-bar #urlbar-container #page-action-buttons, | |
| #navigator-toolbox:hover #toolbar-menubar ~ #nav-bar #nav-bar-overflow-button { | |
| opacity: 1 !important; | |
| } | |
| :root:not([customizing]) #navigator-toolbox:not(:hover) #toolbar-menubar[inactive] ~ #nav-bar:not(:focus-within) #nav-bar-customization-target:first-child { | |
| margin-left: var(--uc-navbar-slider-total-margin) !important; | |
| transition: var(--uc-transition) !important; | |
| } | |
| /** | |
| * URL Bar | |
| */ | |
| /* Remove background and border */ | |
| #urlbar, | |
| #urlbar:hover, | |
| .searchbar-textbox, | |
| .searchbar-textbox:hover { | |
| border: none !important; | |
| box-shadow: none !important; | |
| background: transparent !important; | |
| } | |
| /* Page title in URL bar unless focused */ | |
| #urlbar { | |
| -moz-binding: url("binding-urlbar-focus.xml#urlbar") !important; | |
| } | |
| #urlbar:not([focused]) .urlbar-input-box { | |
| transition: var(--uc-transition) !important; | |
| opacity: 0.3 !important; | |
| } | |
| /* Page identity box in address bar */ | |
| #identity-box { | |
| --urlbar-separator-color: transparent !important; | |
| } | |
| :root:not([customizing]) #toolbar-menubar[inactive] ~ #nav-bar #identity-box { | |
| padding-inline-start: 8px !important; | |
| padding-inline-end: 8px !important; | |
| opacity: 0.3 !important; | |
| } | |
| :root:not([customizing]) #toolbar-menubar[inactive] ~ #nav-bar #identity-box:hover { | |
| opacity: 1 !important; | |
| } | |
| :root:not([customizing]) #toolbar-menubar[inactive] ~ #nav-bar #identity-box.verifiedIdentity #identity-icon-labels { | |
| visibility: collapse !important; | |
| transition-delay: 0 !important; | |
| } | |
| :root:not([customizing]) #toolbar-menubar[inactive] ~ #nav-bar #identity-box.verifiedIdentity:hover #identity-icon-labels, | |
| :root:not([customizing]) #toolbar-menubar[inactive] ~ #nav-bar #identity-box.verifiedIdentity[open] #identity-icon-labels { | |
| visibility: visible !important; | |
| transition: var(--uc-transition); | |
| transition-delay: 700ms !important; | |
| } | |
| /* Don't color the SSL icon bright green */ | |
| :root:not([customizing]) #toolbar-menubar[inactive] ~ #nav-bar #identity-box[class^="verified"]:hover #connection-icon, | |
| :root:not([customizing]) #toolbar-menubar[inactive] ~ #nav-bar #identity-box[class^="verified"][open] #connection-icon { | |
| fill: var(--uc-colors-verified-green) !important; | |
| } | |
| :root:not([customizing]) #toolbar-menubar[inactive] ~ #nav-bar #identity-box[class^="verified"] #connection-icon { | |
| fill: var(--lwt-toolbarbutton-icon-fill) !important; | |
| } | |
| :root:not([customizing]) #toolbar-menubar[inactive] ~ #nav-bar #urlbar[pageproxystate="invalid"] #identity-box { | |
| visibility: collapse !important; | |
| } | |
| /* Hide unnecessary items regardless of context */ | |
| :root #toolbar-menubar[inactive] ~ #nav-bar .urlbar-history-dropmarker, | |
| :root #toolbar-menubar[inactive] ~ #nav-bar .urlbar-go-button { | |
| visibility: hidden !important; | |
| } | |
| /** | |
| * Tab Bar | |
| */ | |
| /* Hide close buttons unless menu bar is active (pressing Alt) */ | |
| :root:not([customizing]) #toolbar-menubar[inactive] ~ #TabsToolbar .tab-close-button { | |
| display: none !important; | |
| } | |
| /* Remove tab borders */ | |
| .tabbrowser-tab:not(:hover):not([beforehovered]):not([beforeselected-visible]):not([visuallyselected])::after { | |
| border-color: var(--tabs-border-color) !important; | |
| margin-top: 0 !important; | |
| margin-bottom: 1px !important; | |
| opacity: 0 !important; | |
| } | |
| #tabbrowser-tabs .tabbrowser-tab:first-child { | |
| border-left-width: 1px !important; | |
| border-left-style: solid !important; | |
| border-left-color: transparent !important; | |
| } | |
| #tabbrowser-tabs .tabbrowser-tab:first-child[selected], | |
| #tabbrowser-tabs .tabbrowser-tab:hover { | |
| border-left-color: var(--tabs-border-color) !important; | |
| } | |
| /* Hide all-tabs button unless menu bar is active (pressing Alt) */ | |
| :root:not([customizing]) #toolbar-menubar[inactive] ~ #TabsToolbar #alltabs-button { | |
| display: none !important; | |
| } | |
| /* Remove shadows behind scroll buttons */ | |
| .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]), | |
| .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) { | |
| background-image: none !important; | |
| border-color: transparent !important; | |
| border-image: none !important; | |
| } | |
| :root:not([customizing]) #toolbar-menubar[inactive] ~ #TabsToolbar .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled="true"], | |
| :root:not([customizing]) #toolbar-menubar[inactive] ~ #TabsToolbar .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled="true"] { | |
| /* Uncomment to hide disabled scroll arrows unless menu bar is active (pressing Alt) */ | |
| /* opacity: 0 !important; */ | |
| } | |
| /** | |
| * Monochrome Icons | |
| */ | |
| /* Default theme */ | |
| .tabbrowser-tab:not(:hover) .tab-icon, | |
| .tabbrowser-tab:not(:hover) .tab-icon-image, | |
| #urlbar-container ~ toolbarbutton:not(:hover) .toolbarbutton-icon, | |
| #PersonalToolbar toolbarbutton:not(:hover) .toolbarbutton-icon:not([container]) { | |
| transition: var(--uc-transition) !important; | |
| filter: | |
| grayscale(100%) | |
| contrast(var(--uc-grayscale-icons-contrast, 100%)) | |
| brightness(var(--uc-grayscale-icons-brightness, 100%)); | |
| } | |
| /* Dark theme */ | |
| :root[lwthemetextcolor="bright"] { | |
| --uc-grayscale-icons-contrast: 90%; | |
| } | |
| /* Light theme */ | |
| :root[lwthemetextcolor="dark"] { | |
| --uc-grayscale-icons-contrast: 80%; | |
| --uc-grayscale-icons-brightness: 125%; | |
| } | |
| /* | |
| tab .tab-icon, | |
| .tab-icon-image { | |
| filter: brightness(1) grayscale(0.85) contrast(0.7) invert(1) !important; | |
| } | |
| tab[selected="true"] .tab-icon, | |
| tab[selected="true"] .tab-icon-image { | |
| filter: grayscale(1) contrast(0.85) !important; | |
| } | |
| .toolbarbutton-icon { | |
| filter: grayscale(1) contrast(0.85) !important; | |
| } | |
| #main-window[lwthemetextcolor="bright"] tab .tab-icon, | |
| #main-window[lwthemetextcolor="bright"] .tab-icon-image { | |
| filter: | |
| brightness(1) | |
| grayscale(1) | |
| contrast(0.7) | |
| invert(1) !important; | |
| } | |
| #main-window[lwthemetextcolor="bright"] tab[selected="true"] .tab-icon, | |
| #main-window[lwthemetextcolor="bright"] tab[selected="true"] .tab-icon-image { | |
| filter: | |
| grayscale(1) | |
| contrast(0.85) !important; | |
| } | |
| toolbar[brighttext] .webextension-browser-action .toolbarbutton-icon, | |
| toolbar[brighttext] .bookmark-item:not([container]) .toolbarbutton-icon { | |
| filter: | |
| brightness(1) | |
| grayscale(1) | |
| contrast(0.7) | |
| invert(1) !important; | |
| } | |
| #main-window[lwthemetextcolor="dark"] tab .tab-icon, | |
| #main-window[lwthemetextcolor="dark"] .tab-icon-image { | |
| filter: | |
| grayscale(1) | |
| contrast(0.5) !important; | |
| } | |
| #main-window[lwthemetextcolor="dark"] tab[selected="true"] .tab-icon, | |
| #main-window[lwthemetextcolor="dark"] tab[selected="true"] .tab-icon-image { | |
| filter: | |
| grayscale(1) | |
| contrast(0.85) !important; | |
| } | |
| toolbar[darktext] .toolbarbutton-icon { | |
| filter: | |
| grayscale(1) | |
| contrast(0.85) !important; | |
| } | |
| */ | |
| /** | |
| * Hamburber Menu | |
| */ | |
| /* Opera-style top left hamburger menu */ | |
| #PanelUI-button { | |
| background: transparent !important; | |
| -moz-box-ordinal-group: 0; | |
| border-left: none !important; | |
| position: absolute; | |
| margin-top: -30px; | |
| --toolbarbutton-active-background: transparent !important; | |
| } | |
| #PanelUI-menu-button { | |
| transition: var(--uc-transition) !important; | |
| list-style-image: url("chrome://branding/content/icon32.png") !important; | |
| } | |
| #PanelUI-menu-button:not([open]):not(:hover) { | |
| opacity: 0.3 !important; | |
| } | |
| #PanelUI-menu-button[open] .toolbarbutton-icon { | |
| filter: none !important; | |
| transform: scale(0.85); | |
| } | |
| :root[uidensity="compact"] #PanelUI-button { | |
| margin-top: -28px; | |
| } | |
| :root[uidensity="touch"] #PanelUI-button { | |
| margin-top: -36px; | |
| } | |
| :root[sizemode="maximized"] #TabsToolbar { | |
| padding-inline-start: 31px !important; | |
| } | |
| .titlebar-placeholder[type="pre-tabs"], | |
| .titlebar-placeholder[type="post-tabs"] { | |
| border-inline-end: none !important; | |
| width: 43px !important; | |
| } | |
| :root[uidensity="compact"] .titlebar-placeholder[type="pre-tabs"], | |
| :root[uidensity="compact"] .titlebar-placeholder[type="post-tabs"] { | |
| width: 31px !important; | |
| } | |
| :root[uidensity="touch"] .titlebar-placeholder[type="pre-tabs"], | |
| :root[uidensity="touch"] .titlebar-placeholder[type="post-tabs"] { | |
| width: 48px !important; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment