From 9da7831b737e23ccb6e28dd0a346b57ee8a4f874 Mon Sep 17 00:00:00 2001 From: overdodactyl Date: Sun, 4 Feb 2018 14:12:19 -0700 Subject: [PATCH] Add windows specific userChrome.css --- alternative_user_files/userChrome_windows.css | 1206 +++++++++++++++++ gulpfile.js | 22 +- userChrome-files/bookmarks_popup.css | 7 - userChrome-files/tab_line_color.css | 2 +- .../windows_fixes/context_menus.css | 96 ++ userChrome-files/windows_fixes/library.css | 19 + userChrome-files/windows_fixes/page_info.css | 28 + userChrome.css | 51 +- 8 files changed, 1405 insertions(+), 26 deletions(-) create mode 100644 alternative_user_files/userChrome_windows.css create mode 100644 userChrome-files/windows_fixes/context_menus.css create mode 100644 userChrome-files/windows_fixes/library.css create mode 100644 userChrome-files/windows_fixes/page_info.css diff --git a/alternative_user_files/userChrome_windows.css b/alternative_user_files/userChrome_windows.css new file mode 100644 index 0000000..86abe6d --- /dev/null +++ b/alternative_user_files/userChrome_windows.css @@ -0,0 +1,1206 @@ +/* Photon Colors CSS Variables v1.4.0 +* Colors are taken from: https://github.com/FirefoxUX/design-tokens */ + +:root { + --magenta-50: #ff1ad9; + --magenta-60: #ed00b5; + --magenta-70: #b5007f; + --magenta-80: #7d004f; + --magenta-90: #440027; + --purple-50: #9400ff; + --purple-60: #8000d7; + --purple-70: #6200a4; + --purple-80: #440071; + --purple-90: #25003e; + --blue-40: #45a1ff; + --blue-50: #0a84ff; + --blue-60: #0060df; + --blue-70: #003eaa; + --blue-80: #002275; + --blue-90: #000f40; + --teal-50: #00feff; + --teal-60: #00c8d7; + --teal-70: #008ea4; + --teal-80: #005a71; + --teal-90: #002d3e; + --green-50: #30e60b; + --green-60: #12bc00; + --green-70: #058b00; + --green-80: #006504; + --green-90: #003706; + --yellow-50: #ffe900; + --yellow-60: #d7b600; + --yellow-70: #a47f00; + --yellow-80: #715100; + --yellow-90: #3e2800; + --red-50: #ff0039; + --red-60: #d70022; + --red-70: #a4000f; + --red-80: #5a0002; + --red-90: #3e0200; + --orange-50: #ff9400; + --orange-60: #d76e00; + --orange-70: #a44900; + --orange-80: #712b00; + --orange-90: #3e1300; + --grey-10: #f9f9fa; + --grey-20: #ededf0; + --grey-30: #d7d7db; + --grey-40: #b1b1b3; + --grey-50: #737373; + --grey-60: #4a4a4f; + --grey-70: #38383d; + --grey-80: #2a2a2e; + --grey-90: #0c0c0d; + --ink-70: #363959; + --ink-80: #202340; + --ink-90: #0f1126; +} + +:root { + --primary-dark-color: var(--grey-70); + /* Color of FF dark theme nav-bar */ + --primary-light-color: var(--grey-40); + /* Off white */ + --light-accent-color: var(--grey-50); + /* Slightly darker off white */ + --dark-accent: var(--grey-80); + /* darker shade of main color */ + --mid-way-color: var(--grey-60); + /* inbetween main dark and light color */ + --primary-accent-color: var(--blue-40); + --primary-accent-color-dark: var(--blue-50); + --primary-accent-color-darkest: var(--blue-60); +} +@-moz-document url(chrome://browser/content/aboutDialog.xul) { + #clientBox { + color: var(--primary-light-color) !important; + background-color: var(--primary-dark-color) !important; + } + + #bottomBox { + background: var(--dark-accent) !important; + } +} +/* Bookmarks Pop up */ + +#editBMPanel_rows > row > textbox, +#editBMPanel_rows > row > hbox > textbox, +#editBMPanel_folderMenuList, +#editBookmarkPanelRemoveButton, +#editBookmarkPanelDoneButton, +#editBMPanel_foldersExpander, +#editBMPanel_tagsSelectorExpander { + -moz-appearance: none !important; + background: var(--grey-70) !important; + color: var(--primary-light-color) !important; + border: 1px solid var(--grey-50) !important; + box-shadow: none !important; +} + +#editBookmarkPanel .expander-down > .button-box > .button-icon { + filter: invert(65%) !important; +} + +#editBMPanel_folderTree, +#editBMPanel_tagsSelector { + -moz-appearance: none !important; + background: var(--grey-70) !important; + color: var(--primary-light-color) !important; + opacity: 1 !important; +} + +#editBMPanel_folderTree treechildren:not(.autocomplete-treebody)::-moz-tree-row, +#editBMPanel_tagsSelector treechildren:not(.autocomplete-treebody)::-moz-tree-row { + background: var(--grey-60) !important; + color: var(--primary-light-color) !important; +} + +#editBMPanel_folderTree treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover), +#editBMPanel_tagsSelector treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover) { + background: var(--dark-accent) !important; + color: var(--primary-accent-color) !important; + -moz-border-top-colors: var(--dark-accent) !important; + -moz-border-right-colors: var(--dark-accent) !important; + -moz-border-left-colors: var(--dark-accent) !important; + -moz-border-bottom-colors: var(--dark-accent) !important; +} + +/* Change the outline of icons to light instead of dark */ + +#editBMPanel_folderTree treechildren::-moz-tree-image { + fill: var(--primary-light-color) !important; +} + +#editBMPanel_folderTree treechildren::-moz-tree-image(selected) { + fill: white !important; +} + +/* Selected, in focus */ + +#editBMPanel_folderTree treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, current, focus) { + background: var(--primary-accent-color) !important; +} + +listitem[selected="true"] { + background-color: var(--primary-accent-color) !important; + color: white !important; +} + +#editBMPanel_folderTree treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, current) { + background: var(--blue-40) !important; +} + +#editBMPanel_folderTree { + border: 1px solid var(--grey-50) !important; + border-bottom: none !important; +} + +#editBMPanel_newFolderBox { + background: var(--grey-70) !important; + border: 1px solid var(--grey-50) !important; + box-shadow: none !important; +} +/* The following code is based on that found on +* https://www.jeffersonscher.com/gm/url-bar-tweaks.html +* Copyright © 2017 Jefferson Scher (BSD-3-Clause License or CC-BY License) */ + +:root { + --panel-separator-color: var(--grey-60) !important; +} + +#urlbar[focused=true], +.searchbar-textbox[focused=true] { + border: 1px solid var(--primary-accent-color) !important; + box-shadow: 0 1px 4px var(--primary-accent-color) !important; +} + +/* URL Bar Drop Down */ + +#PopupAutoCompleteRichResult .autocomplete-richlistbox { + background-color: var(--grey-60) !important; +} + +#PopupAutoCompleteRichResult .autocomplete-richlistitem { + border-bottom-color: var(--primary-light-color) !important; +} + +/* Hover color */ + +.autocomplete-richlistitem:hover, +treechildren.searchbar-treebody::-moz-tree-row(hover) { + background-color: var(--grey-70) !important; +} + +.autocomplete-richlistitem .ac-title, +.autocomplete-richlistitem .ac-action, +.autocomplete-richlistitem .ac-separator, +#PopupSearchAutoComplete { + color: var(--primary-light-color) !important; +} + +.autocomplete-richlistitem[selected=true] { + background-color: var(--primary-accent-color) !important; +} + +.autocomplete-richlistitem[selected=true] .ac-title, +.ac-title[selected], +.autocomplete-richlistitem[selected=true] .ac-action, +.ac-action[selected], +.autocomplete-richlistitem[selected=true] .ac-separator, +.ac-separator[selected] { + color: white !important; +} + +.autocomplete-richlistitem[selected=true] .ac-url, +.ac-url[selected] { + color: white !important; +} + +.ac-url { + color: var(--primary-accent-color) !important; +} + +.search-one-offs { + background: var(--grey-60) !important; +} + +.search-panel-input-value { + color: var(--primary-accent-color) !important; +} + +/* Search one-offs */ + +.search-panel-one-offs { + background: var(--grey-80) !important; +} + +.search-panel-header { + background-color: var(--grey-80) !important; + border-top: none !important; +} + +.search-panel-one-offs { + border-top: none !important; +} + +/* Searchbar */ + +panel[type="autocomplete"], +panel[type="autocomplete-richlistbox"], +.autocomplete-history-popup { + color: var(--primary-light-color) !important; + background: var(--primary-dark-color) !important; +} + +/* Changes the hover color and text color */ + +.autocomplete-tree { + color: var(--primary-light-color) !important; +} + +.searchbar-treebody::-moz-tree-row { + background-color: var(--grey-60) !important; +} + +.searchbar-treebody::-moz-tree-row(hover) { + background-color: background-color: var(--grey-70) !important; +} + +.searchbar-treebody::-moz-tree-row(selected) { + background-color: var(--primary-accent-color) !important; +} +/* Main context menu */ + +menupopup, +popup, +popup > menu > menupopup, +menupopup > menu > menupopup, +menupopup scrollbox { + -moz-appearance: none !important; + background: var(--grey-60) !important; + border: none !important; + padding: 0px 0px 0px 0px !important; +} + +/* More options right arrow */ + +.menu-right { + filter: invert(95%)!important; +} + +/* Top Row of Navigation Options */ + +#context-navigation menuitem { + color: var(--grey-10) !important; + background: var(--grey-70) !important; +} + +#context-navigation menuitem:hover { + background: var(--grey-80) !important; +} + +/* Menu items */ + +menupopup menu, +menuitem { + -moz-appearance: none !important; + color: var(--grey-10) !important; +} + +/* Menu Separators - removed */ + +menupopup menuseparator { + padding: 0 !important; + border-top: none !important; + margin: 2px 6px 2px 6px !important; +} + +/* Context menu, display disabled items in a different colour */ + +menuitem[disabled="true"] { + color: var(--grey-50) !important; +} + +menuitem:hover[disabled="true"] { + color: var(--grey-50) !important; + background-color: var(--grey-70) !important; +} + +#context-navigation menuitem[disabled="true"] { + color: var(--grey-50) !important; +} + +#context-navigation menuitem:hover[disabled="true"] { + color: var(--grey-50) !important; + background-color: var(--grey-80) !important; +} + +menupopup menu:hover, +menuitem:hover { + color: var(--grey-10) !important; + background-color: var(--grey-80) !important; +} + +/* Sidebar Header Context Menu */ + +.panel-arrowcontent { + color: var(--grey-10) !important; + background: var(--grey-60) !important; +} + +/* Sidebar border */ + +vbox#sidebar-box.chromeclass-extrachrome { + border-color: var(--grey-80) !important; + border-right: 1px !important; + border-style: solid !important; +} + +/* The following snippets are designed to fix problems + * only noticed on Windows computers */ + +@media screen and (-moz-windows-theme), + screen and (-moz-windows-classic), + screen and (-moz-windows-default-theme), + screen and (-moz-os-version: windows-win7), + screen and (-moz-os-version: windows-win8), + screen and (-moz-os-version: windows-win10) { + /* Remove white separators between menu items */ + + menupopup menuseparator { + -moz-appearance: none !important; + background: rgba(0, 0, 0, 0) !important; + border: 0px !important; + } + + /* Removes white bar between icons and menu items */ + + #context-navigation, + #context-sep-navigation { + padding: 0px !important; + } + + /* Bookmarks Toolbar, Toolbar Context menu, spacing tweaks */ + + #personal-bookmarks menupopup .bookmark-item, + #bookmarksMenuPopup, + menupopup#toolbar-context-menu, + menupopup#menu_ToolsPopup, + menupopup#goPopup, + menupopup#tabContextMenu { + padding-left: 4px !important; + padding-right: 4px !important; + } + + /* Tab menu */ + + menupopup > menu > menupopup > .popup-internal-box, + menupopup#toolbar-context-menu > menuitem { + padding-left: 1px !important; + padding-right: 1px !important; + } + + /* All menus padding tweaks */ + + menupopup, + menupopup > menu > menupopup, + #bookmarksMenuPopup menupopup > hbox { + padding: 4px 0px 4px 0px !important; + } + + #bookmarksMenuPopup menupopup { + padding: 0px 0px 0px 0px !important; + } + + #BMB_bookmarksPopup menupopup { + padding: 4px 0px 0px 0px !important; + } + + /* Context menu, spacing and font size similar to macOS */ + + menupopup menuitem, + menupopup menu { + font-size: 1.167em !important; + padding-top: 1px !important; + padding-bottom: 1px !important; + } + + menupopup menu menuitem, + menupopup menu menu { + font-size: 1em !important; + padding-top: 1px !important; + padding-bottom: 1px !important; + } + + menupopup#contentAreaContextMenu menuitem, + menupopup#contentAreaContextMenu menu { + padding-top: 2px !important; + padding-bottom: 2px !important; + } + + /* Menus, slightly adjust arrow */ + + menupopup .menu-right { + margin-right: 0px !important; + } + + /* Menus, slightly increase separator margin */ + + menupopup menuseparator { + margin: 2px !important; + } + + /* Context menus, border added because Windows has a different drop shadow effect than macOS */ + + #personal-bookmarks menupopup, + .panel-arrowcontent, + .box-inherit scrollbox-innerbox, + #BMB_bookmarksPopup menupopup[placespopup="true"] > hbox, + #bookmarksMenuPopup menupopup[placespopup="true"] > hbox, + menupopup#BMB_bookmarksPopup > menu > menupopup > hbox, + menupopup#bookmarksMenuPopup > menu > menupopup > hbox, + menupopup#contentAreaContextMenu, + menupopup#placesContext, + menupopup#bookmarksMenuPopup, + menupopup#PlacesChevronPopup, + menupopup#toolbar-context-menu, + menupopup#downloadsContextMenu, + menupopup#tabContextMenu, + menupopup > menu > menupopup { + border-color: var(--grey-70) !important; + border-width: 1px !important; + border-style: solid !important; + } +} +#customization-done-button { + color: var(--primary-light-color); + font-weight: 700; + border-color: var(--primary-accent-color-dark) !important; + background-color: var(--primary-accent-color) !important; +} + +#customization-done-button:-moz-any(:focus, :active, :hover):not([disabled]) { + background-color: var(--primary-accent-color-dark) !important; +} +/* Color of tab throbber animation */ + +:root { + --tab-loading-fill: var(--primary-accent-color) !important; +} + +.tab-throbber::before { + fill: var(--primary-accent-color) !important; + opacity: 1 !important; +} + +/*Pop Down Arrow */ + +.panel-arrow { + filter: invert(70%) !important; +} + +/* main menu */ + +.panel-subview-body, +#appMenu-zoomReset-button { + color: var(--grey-10) !important; + background: var(--grey-60) !important; +} + +/* header of sub menus */ + +.panel-subview-footer, +[class^="PanelUI-"] { + color: var(--grey-10) !important; + background: var(--grey-70) !important; +} + +/* webextension popup fix */ + +.webextension-popup-browser { + background: white !important; +} + +/* Fix for downloads menu */ + +photonpanelmultiview panelview { + background: none !important; + color: var(--primary-light-color) !important; +} + +#emptyDownloads { + background: var(--grey-60) !important; + color: var(--primary-light-color) !important; +} + +#downloadsFooterButtons { + background: var(--grey-70) !important; + color: var(--primary-light-color) !important; +} + +#downloadsFooter[showingsummary] > stack:not(:hover) { + background-color: var(--grey-80) !important; +} + +/* Fix downloads list - only appears to be necessary in Nightly */ + +#downloadsListBox { + background: var(--primary-dark-color) !important; +} + +#appMenu-mainView toolbarbutton:hover, +#customizationui-widget-multiview toolbarbutton:hover, +#widget-overflow-list toolbarbutton:hover { + background: var(--grey-80) !important; +} + +#BMB_bookmarksPopup { + background: none !important; +} + +/* Secure Connection Drop Down */ + +#identity-popup-securityView { + background: var(--grey-60) !important; +} + +/* Divider */ + +#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews { + background: var(--primary-light-color) !important; +} + +/* Button */ + +.identity-popup-expander[panel-multiview-anchor] { + background-color: var(--primary-accent-color) !important; + fill: var(--primary-light-color) !important; +} + +/* Secure connection drop-down - necessary change for FF 59 */ + +/* Main Background */ + +#identity-popup-mainView { + background: var(--grey-60) !important; + color: var(--primary-light-color) !important; +} + +/* Lock color */ + +#identity-popup[connection^="secure"] .identity-popup-security-content { + fill: var(--primary-accent-color) !important; +} + +/* Permissions logo - white (can't change background image only) + * Temporary hack until I fish out the icon and invert that */ + +#identity-popup-permissions-content { + filter: invert(90%) !important; +} + +/* Change color of text to account for ^^ */ + +#identity-popup-permissions-content { + color: var(--grey-70) !important; +} + +/* More info right button */ + +.identity-popup-expander { + border-right: solid 1px var(--grey-50) !important; + background-color: var(--grey-60) !important; + fill: var(--grey-50) !important; +} + +/* New update is available */ + +.popup-notification-button[default][highlight="true"]:not([disabled]) { + background-color: var(--primary-accent-color) !important; + color: #ccc; +} + +#update-available-whats-new { + color: var(--primary-accent-color) !important; +} + +.popup-notification-icon[popupid="update-available"], +.popup-notification-icon[popupid="update-manual"], +.popup-notification-icon[popupid="update-restart"] { + background-color: var(--primary-accent-color) !important; + border-radius: 50%; +} + +toolbarbutton { + text-shadow: none !important; +} + +.panel-banner-item > .toolbarbutton-multiline-text { + color: var(--primary-light-color) !important; +} + +.panel-banner-item { + background-color: hsla(96,65%,37%,.9) !important; +} + +#update-manual-whats-new { + color: var(--primary-accent-color) !important; +} + +/* Color of highlighted buttons */ + +toolbar[brighttext] { + --toolbarbutton-icon-fill-attention: var(--primary-accent-color-dark) !important; +} + +::-moz-selection { + background: var(--blue-40); + color: white !important; +} +/* Remove white flash on load */ + +#sidebar, +#sidebar-box, +#webextpanels-window, +#webext-panels-browser { + background: var(--primary-dark-color) !important; +} + +/* Sidebar */ + +.sidebar-placesTree { + -moz-appearance: none !important; + background: var(--grey-70) !important; + color: var(--primary-light-color) !important; + opacity: 1 !important; +} + +/* Change the outline of icons to light instead of dark */ + +.sidebar-placesTree::-moz-tree-image, +.sidebar-placesTreechildren::-moz-tree-image { + fill: var(--primary-light-color) !important; +} + +/* Sidebar Header */ + +.sidebar-header, +#sidebar-header { + background: var(--grey-80) !important; + color: var(--primary-light-color) !important; +} + +/* Sidebar search container */ + +#sidebar-search-container { + background: var(--grey-80) !important; + color: var(--primary-light-color) !important; +} + +/* Sidebar search box */ + +#sidebar-search-container textbox { + -moz-appearance: none !important; + border-radius: .3em !important; + background-color: var(--grey-60) !important; + color: var(--primary-light-color) !important; + border: solid 1px var(--mid-way-color) !important; +} + +/* Sidebar "view" button */ + +#sidebar-search-container #viewButton { + color: var(--primary-light-color) !important; +} + +/* Drop down arrow - next to "view" */ + +.button-menu-dropmarker, +.button-menubutton-dropmarker { + filter: invert(65%); +} + +/* Sidebar splitter + * Adjust width to personal preference - + * I keep it at 4 for easy mobility and Tree Style Tabs + * utilizes it for container indicators */ + +#sidebar-splitter { + width: 4px !important; + background: var(--primary-dark-color) !important; + opacity: 0 !important; +} + +/* Reverse color of sidebar header icon for Tree Style Tabs +* you may delete this snippit if you don't use the extension */ + +#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-icon { + filter: invert(60%); +} + +#button_treestyletab_piro_sakura_ne_jp-sidebar-action .toolbarbutton-icon { + filter: invert(87%); +} + +/* Siderbar slider - thank you u/_Dimitri_ + * Add this section if on Windows +scrollbar > slider { + max-width: 4px !important; +} + +scrollbar > slider > thumb, scrollbar > scrollbarbutton { + -moz-appearance: none !important; + background-color: var(--grey-80) !important;; +} +*/ +statuspanel .statuspanel-label { + background-color: var(--grey-80) !important; + color: var(--primary-light-color) !important; + border: none !important; +} +/* Top Border */ + +.browserContainer > findbar { + border-top: 1px solid var(--grey-80) !important; +} + +/* Alter buttons */ + +.findbar-find-previous, +.findbar-find-next { + border: none !important; + background: none !important; + border-radius: 2px !important; + fill: var(--primary-light-color) !important; +} + +/* Fix spacing */ + +.findbar-find-previous { + margin-left: 6px !important; +} + +/* Buttons on hover */ + +.findbar-find-previous:hover, +.findbar-find-next:hover { + background: var(--toolbarbutton-hover-background) !important; +} +@-moz-document url(chrome://browser/content/places/places.xul), +url(chrome://browser/content/places/bookmarkProperties.xul) { + /* Details Dock and Bookmark Properties*/ + + #detailsDeck, + #bookmarkproperties { + -moz-appearance: none !important; + background-color: var(--grey-70) !important; + color: var(--primary-light-color) !important; + border: 0px solid black !important; + } + + /* Toolbar */ + + toolbar { + -moz-appearance: none !important; + background-color: var(--grey-80) !important; + border: 0px solid black !important; + } + + /* Main Area */ + + #placeContent, + #places #downloadsRichListBox { + -moz-appearance: none !important; + border: 1px solid var(--grey-60) !important; + color: rgb(200,200,200) !important; + background-color: var(--grey-60) !important; + } + + /* Sidebar */ + + #placesList { + -moz-appearance: none !important; + color: rgb(200,200,200) !important; + background-color: rgba(12, 12, 13, .8) !important; + } + + /* Column Header */ + + #contentView treecol { + -moz-appearance: none !important; + border: 0px solid !important; + border-bottom: 1px solid !important; + border-right: 1px solid rgb(0,0,0) !important; + -moz-border-bottom-colors: rgb(0,0,0) !important; + background: linear-gradient(to bottom, + rgba(56,70,82,1) 0%, + rgba(35,39,48,1) 100%) !important; + color: white !important; + } + + /* Text Boxes - One Line */ + + #places textbox:not([multiline="true"]), + #editBookmarkPanelContent textbox:not([multiline="true"]) { + -moz-appearance: none !important; + color: var(--primary-light-color) !important; + background-color: var(--grey-60) !important; + } + + /* Bookmarks Description Field */ + + #places #editBMPanel_descriptionField, + #editBookmarkPanelContent #editBMPanel_descriptionField { + -moz-appearance: none !important; + background-color: var(--grey-60) !important; + color: var(--primary-light-color) !important; + } + + /* Bookmark Tag Options */ + + listbox { + -moz-appearance: none !important; + background-color: var(--grey-60) !important; + color: var(--primary-light-color) !important; + } + + #places listbox:focus > listitem[selected="true"] { + background-color: var(--primary-accent-color) !important; + color: black !important; + } + + /* * + * Tree Items * + * */ + + #places treechildren::-moz-tree-row { + background-color: transparent !important; + overflow-y: scroll !important; + } + + /* Change the outline of icons to light instead of dark */ + + #places treechildren::-moz-tree-image, + #places treechildren::-moz-tree-image { + fill: var(--primary-light-color) !important; + } + + /* Selected, not in focus */ + + #places treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, current) { + background: var(--blue-40) !important; + } + + treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected) { + -moz-border-top-colors: var(--grey-80) !important; + -moz-border-right-colors: var(--grey-80) !important; + -moz-border-left-colors: var(--grey-80) !important; + -moz-border-bottom-colors: var(--grey-80) !important; + } + + #placeContent treechildren:not(.autocomplete-treebody)::-moz-tree-row(odd) { + background: rgba(12, 12, 13, .1) !important; + } + + /* Selected, in focus */ + + #places treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, current, focus) { + background: var(--primary-accent-color) !important; + } + + #places treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover) { + background: var(--dark-accent) !important; + -moz-border-top-colors: var(--dark-accent) !important; + -moz-border-right-colors: var(--dark-accent) !important; + -moz-border-left-colors: var(--dark-accent) !important; + -moz-border-bottom-colors: var(--dark-accent) !important; + } + + #places treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover, selected) { + background: var(--primary-accent-color) !important; + } + + #placesMenu > menu { + color: var(--primary-light-color) !important; + } +} +@-moz-document url(chrome://browser/content/pageinfo/pageInfo.xul) { + #topBar { + -moz-appearance: none !important; + background: var(--grey-80) !important; + } + + #mainDeck { + background: var(--primary-dark-color) !important; + color: white !important; + } + + textbox { + color: var(--primary-light-color) !important; + } + + tree { + -moz-appearance: none !important; + border: 1px solid rgb(0,0,0) !important; + color: rgb(200,200,200) !important; + background-color: var(--grey-60) !important; + } + + treechildren::-moz-tree-row { + background-color: transparent !important; + overflow-y: scroll !important; + } + + treecol { + -moz-appearance: none !important; + border: 0px solid !important; + border-bottom: 1px solid !important; + border-right: 1px solid rgb(0,0,0) !important; + -moz-border-bottom-colors: rgb(0,0,0) !important; + background: linear-gradient(to bottom, + rgba(56,70,82,1) 0%, + rgba(35,39,48,1) 100%) !important; + color: white !important; + } + + treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, current, focus) { + background: var(--primary-accent-color) !important; + } + + .permission { + -moz-appearance: none !important; + background: var(--grey-60) !important; + color: var(--primary-light-color) !important; + border-color: var(--grey-70) !important; + } + + #permPluginTemplate { + color: var(--primary-light-color) !important; + } + + #permList { + border: 2px solid var(--grey-70) !important; + } + + /* [WINDOWS ONLY] fixes */ + +@media screen and (-moz-windows-theme) { + #topBar { + -moz-appearance: none !important; + background-color: var(--grey-80) !important; + border: none !important; + padding-top: 5px !important; + padding-bottom: 5px !important; + color: var(--grey-20) !important; + } +} + +@media screen and (-moz-windows-theme) { + #metaTagsCaption, + #security-identity, + #security-privacy, + #security-technical, + #security-identity-groupbox, + #security-privacy-groupbox, + #security-technical-groupbox { + -moz-appearance: none !important; + background-color: var(--grey-70) !important; + border: none !important; + color: var(--grey-10) !important; + } +} + +@media screen and (-moz-windows-theme) { + #security-identity-groupbox, + #security-privacy-groupbox, + #security-technical-groupbox { + -moz-appearance: none !important; + background-color: var(--grey-80) !important; + } +} +} +/* Remove 1px border underneath bookmarks bar */ + +#navigator-toolbox::after { + border-bottom: 0px !important; +} +/* Minimize white flash when loading some sites */ + +browser[type="content-primary"], +#content, +browser[type="content"] > html { + background: var(--primary-dark-color) !important; +} +#identity-box.verifiedIdentity { + --urlbar-separator-color: var(--grey-50) !important; +} + +.identity-popup-connection-secure, +#identity-box.verifiedIdentity #identity-icon-labels { + color: var(--primary-accent-color) !important; +} + +#identity-popup[connection^=secure] #identity-popup-securityView, +#identity-popup[connection^=secure] #identity-popup-security-content, +#connection-icon { + fill: var(--primary-accent-color) !important; +} +/* Change active tab line color */ + +.tab-line[selected="true"] { + background-color: var(--primary-accent-color) !important; +} +/* Remove white separators between menu items */ + +menupopup menuseparator { + -moz-appearance: none !important; + background: rgba(0, 0, 0, 0) !important; + border: 0px !important; +} + +/* Removes white bar between icons and menu items */ + +#context-navigation, +#context-sep-navigation { + padding: 0px !important; +} + +/* Bookmarks Toolbar, Toolbar Context menu, spacing tweaks */ + +#personal-bookmarks menupopup .bookmark-item, +#bookmarksMenuPopup, +menupopup#toolbar-context-menu, +menupopup#menu_ToolsPopup, +menupopup#goPopup, +menupopup#tabContextMenu { + padding-left: 4px !important; + padding-right: 4px !important; +} + +/* Tab menu */ + +menupopup > menu > menupopup > .popup-internal-box, +menupopup#toolbar-context-menu > menuitem { + padding-left: 1px !important; + padding-right: 1px !important; +} + +/* All menus padding tweaks */ + +menupopup, +menupopup > menu > menupopup, +#bookmarksMenuPopup menupopup > hbox { + padding: 4px 0px 4px 0px !important; +} + +#bookmarksMenuPopup menupopup { + padding: 0px 0px 0px 0px !important; +} + +#BMB_bookmarksPopup menupopup { + padding: 4px 0px 0px 0px !important; +} + +/* Context menu, spacing and font size similar to macOS */ + +menupopup menuitem, +menupopup menu { + font-size: 1.167em !important; + padding-top: 1px !important; + padding-bottom: 1px !important; +} + +menupopup menu menuitem, +menupopup menu menu { + font-size: 1em !important; + padding-top: 1px !important; + padding-bottom: 1px !important; +} + +menupopup#contentAreaContextMenu menuitem, +menupopup#contentAreaContextMenu menu { + padding-top: 2px !important; + padding-bottom: 2px !important; +} + +/* Menus, slightly adjust arrow */ + +menupopup .menu-right { + margin-right: 0px !important; +} + +/* Menus, slightly increase separator margin */ + +menupopup menuseparator { + margin: 2px !important; +} + +/* Context menus, border added because Windows has a different drop shadow effect than macOS */ + +#personal-bookmarks menupopup, +.panel-arrowcontent, +.box-inherit scrollbox-innerbox, +#BMB_bookmarksPopup menupopup[placespopup="true"] > hbox, +#bookmarksMenuPopup menupopup[placespopup="true"] > hbox, +menupopup#BMB_bookmarksPopup > menu > menupopup > hbox, +menupopup#bookmarksMenuPopup > menu > menupopup > hbox, +menupopup#contentAreaContextMenu, +menupopup#placesContext, +menupopup#bookmarksMenuPopup, +menupopup#PlacesChevronPopup, +menupopup#toolbar-context-menu, +menupopup#downloadsContextMenu, +menupopup#tabContextMenu, +menupopup > menu > menupopup { + border-color: var(--grey-70) !important; + border-width: 1px !important; + border-style: solid !important; +} +#metaTagsCaption, +#security-identity, +#security-privacy, +#security-technical, +#security-identity-groupbox, +#security-privacy-groupbox, +#security-technical-groupbox { + -moz-appearance: none !important; + background-color: var(--grey-70) !important; + border: none !important; + color: var(--grey-10) !important; +} + +#security-identity-groupbox, +#security-privacy-groupbox, +#security-technical-groupbox { + -moz-appearance: none !important; + background-color: var(--grey-80) !important; +} +#topBar { + -moz-appearance: none !important; + background-color: var(--grey-80) !important; + border: none !important; + padding-top: 5px !important; + padding-bottom: 5px !important; + color: var(--grey-20) !important; +} + +#metaTagsCaption, +#security-identity, +#security-privacy, +#security-technical, +#security-identity-groupbox, +#security-privacy-groupbox, +#security-technical-groupbox { + -moz-appearance: none !important; + background-color: var(--grey-70) !important; + border: none !important; + color: var(--grey-10) !important; +} + +#security-identity-groupbox, +#security-privacy-groupbox, +#security-technical-groupbox { + -moz-appearance: none !important; + background-color: var(--grey-80) !important; +} \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index fc27adc..06de7ee 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -4,9 +4,9 @@ var gulp = require('gulp'); var concatCss = require('gulp-concat-css'); /********************************** -* * -* userContent.css * -* * +* * +* userContent.css * +* * **********************************/ /* userContent file with no addons */ @@ -26,13 +26,21 @@ gulp.task('userContent_all', ['userContent_no_addons'], function() { /********************************** -* * -* userChrome.css * -* * +* * +* userChrome.css * +* * **********************************/ /* Add everything to userContent */ -gulp.task('userChrome_all', function() { +gulp.task('userChrome_windows', function() { + return gulp.src(['color_variables.css', 'userChrome-files/*.css', 'userChrome-files/windows_fixes/*.css' ]) + .pipe(concatCss('userChrome_windows.css')) + .pipe(gulp.dest('./alternative_user_files')); +}); + + +/* Add everything to userContent */ +gulp.task('userChrome_all', [`userChrome_windows`], function() { return gulp.src(['color_variables.css', 'userChrome-files/*.css']) .pipe(concatCss('userChrome.css')) .pipe(gulp.dest('.')); diff --git a/userChrome-files/bookmarks_popup.css b/userChrome-files/bookmarks_popup.css index 30f1c1f..86a63b0 100644 --- a/userChrome-files/bookmarks_popup.css +++ b/userChrome-files/bookmarks_popup.css @@ -25,16 +25,12 @@ opacity: 1 !important; } - - - #editBMPanel_folderTree treechildren:not(.autocomplete-treebody)::-moz-tree-row, #editBMPanel_tagsSelector treechildren:not(.autocomplete-treebody)::-moz-tree-row { background: var(--grey-60) !important; color: var(--primary-light-color) !important; } - #editBMPanel_folderTree treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover), #editBMPanel_tagsSelector treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover) { background: var(--dark-accent) !important; @@ -53,7 +49,6 @@ fill: white !important; } - /* Selected, in focus */ #editBMPanel_folderTree treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, current, focus){ background: var(--primary-accent-color) !important; @@ -73,8 +68,6 @@ listitem[selected="true"] { border-bottom: none !important; } - - #editBMPanel_newFolderBox { background: var(--grey-70) !important; border: 1px solid var(--grey-50) !important; diff --git a/userChrome-files/tab_line_color.css b/userChrome-files/tab_line_color.css index 7a6f264..ba7413c 100644 --- a/userChrome-files/tab_line_color.css +++ b/userChrome-files/tab_line_color.css @@ -1,4 +1,4 @@ /* Change active tab line color */ .tab-line[selected="true"] { background-color: var(--primary-accent-color) !important; -} \ No newline at end of file +} diff --git a/userChrome-files/windows_fixes/context_menus.css b/userChrome-files/windows_fixes/context_menus.css new file mode 100644 index 0000000..7354fd5 --- /dev/null +++ b/userChrome-files/windows_fixes/context_menus.css @@ -0,0 +1,96 @@ +/* Remove white separators between menu items */ +menupopup menuseparator { + -moz-appearance:none !important; + background: rgba(0, 0, 0, 0) !important; + border: 0px !important; +} + +/* Removes white bar between icons and menu items */ +#context-navigation, #context-sep-navigation { + padding: 0px !important; +} + +/* Bookmarks Toolbar, Toolbar Context menu, spacing tweaks */ +#personal-bookmarks menupopup .bookmark-item, +#bookmarksMenuPopup, +menupopup#toolbar-context-menu, +menupopup#menu_ToolsPopup, +menupopup#goPopup, +menupopup#tabContextMenu { + padding-left: 4px !important; + padding-right: 4px !important; +} + +/* Tab menu */ +menupopup > menu > menupopup > .popup-internal-box, +menupopup#toolbar-context-menu > menuitem { + padding-left: 1px !important; + padding-right: 1px !important; +} + +/* All menus padding tweaks */ +menupopup, +menupopup > menu > menupopup, +#bookmarksMenuPopup menupopup > hbox { + padding: 4px 0px 4px 0px !important; +} + +#bookmarksMenuPopup menupopup { + padding: 0px 0px 0px 0px !important; +} + +#BMB_bookmarksPopup menupopup { + padding: 4px 0px 0px 0px !important; +} + +/* Context menu, spacing and font size similar to macOS */ +menupopup menuitem, +menupopup menu { + font-size: 1.167em !important; + padding-top: 1px !important; + padding-bottom: 1px !important; +} + +menupopup menu menuitem, +menupopup menu menu { + font-size: 1em !important; + padding-top: 1px !important; + padding-bottom: 1px !important; +} + +menupopup#contentAreaContextMenu menuitem, +menupopup#contentAreaContextMenu menu { + padding-top: 2px !important; + padding-bottom: 2px !important; +} + +/* Menus, slightly adjust arrow */ +menupopup .menu-right { + margin-right: 0px !important; +} + +/* Menus, slightly increase separator margin */ +menupopup menuseparator { + margin: 2px !important; +} + +/* Context menus, border added because Windows has a different drop shadow effect than macOS */ +#personal-bookmarks menupopup, +.panel-arrowcontent, +.box-inherit scrollbox-innerbox, +#BMB_bookmarksPopup menupopup[placespopup="true"] > hbox, +#bookmarksMenuPopup menupopup[placespopup="true"] > hbox, +menupopup#BMB_bookmarksPopup > menu > menupopup > hbox, +menupopup#bookmarksMenuPopup > menu > menupopup > hbox, +menupopup#contentAreaContextMenu, +menupopup#placesContext, +menupopup#bookmarksMenuPopup, +menupopup#PlacesChevronPopup, +menupopup#toolbar-context-menu, +menupopup#downloadsContextMenu, +menupopup#tabContextMenu, +menupopup > menu > menupopup { + border-color: var(--grey-70) !important; + border-width: 1px !important; + border-style: solid !important; +} diff --git a/userChrome-files/windows_fixes/library.css b/userChrome-files/windows_fixes/library.css new file mode 100644 index 0000000..35e3a79 --- /dev/null +++ b/userChrome-files/windows_fixes/library.css @@ -0,0 +1,19 @@ +#metaTagsCaption, +#security-identity, +#security-privacy, +#security-technical, +#security-identity-groupbox, +#security-privacy-groupbox, +#security-technical-groupbox { + -moz-appearance: none !important; + background-color: var(--grey-70) !important; + border: none !important; + color: var(--grey-10) !important; +} + +#security-identity-groupbox, +#security-privacy-groupbox, +#security-technical-groupbox { + -moz-appearance: none !important; + background-color: var(--grey-80) !important; +} diff --git a/userChrome-files/windows_fixes/page_info.css b/userChrome-files/windows_fixes/page_info.css new file mode 100644 index 0000000..e1835e8 --- /dev/null +++ b/userChrome-files/windows_fixes/page_info.css @@ -0,0 +1,28 @@ +#topBar { + -moz-appearance: none !important; + background-color: var(--grey-80) !important; + border: none !important; + padding-top: 5px !important; + padding-bottom: 5px !important; + color: var(--grey-20) !important; +} + +#metaTagsCaption, +#security-identity, +#security-privacy, +#security-technical, +#security-identity-groupbox, +#security-privacy-groupbox, +#security-technical-groupbox { + -moz-appearance: none !important; + background-color: var(--grey-70) !important; + border: none !important; + color: var(--grey-10) !important; +} + +#security-identity-groupbox, +#security-privacy-groupbox, +#security-technical-groupbox { + -moz-appearance: none !important; + background-color: var(--grey-80) !important; +} diff --git a/userChrome.css b/userChrome.css index 0783771..1b27225 100644 --- a/userChrome.css +++ b/userChrome.css @@ -342,14 +342,22 @@ menuitem:hover { background-color: var(--grey-80) !important; } -/* Sidebar Header Context Menue */ +/* Sidebar Header Context Menu */ .panel-arrowcontent { color: var(--grey-10) !important; background: var(--grey-60) !important; } -/* The following snippets are designed to fix promblems +/* Sidebar border */ + +vbox#sidebar-box.chromeclass-extrachrome { + border-color: var(--grey-80) !important; + border-right: 1px !important; + border-style: solid !important; +} + +/* The following snippets are designed to fix problems * only noticed on Windows computers */ @media screen and (-moz-windows-theme), @@ -385,6 +393,14 @@ menuitem:hover { padding-right: 4px !important; } + /* Tab menu */ + + menupopup > menu > menupopup > .popup-internal-box, + menupopup#toolbar-context-menu > menuitem { + padding-left: 1px !important; + padding-right: 1px !important; + } + /* All menus padding tweaks */ menupopup, @@ -403,21 +419,32 @@ menuitem:hover { /* Context menu, spacing and font size similar to macOS */ - menupopup#contentAreaContextMenu menuitem, - menupopup#contentAreaContextMenu menu { - padding-left: 4px !important; - padding-right: 4px !important; - font-size: 1.08em !important; + menupopup menuitem, + menupopup menu { + font-size: 1.167em !important; + padding-top: 1px !important; + padding-bottom: 1px !important; } - /* Menus, slightly increase menu items spacing */ + menupopup menu menuitem, + menupopup menu menu { + font-size: 1em !important; + padding-top: 1px !important; + padding-bottom: 1px !important; + } - menupopup menu, - menuitem { + menupopup#contentAreaContextMenu menuitem, + menupopup#contentAreaContextMenu menu { padding-top: 2px !important; padding-bottom: 2px !important; } + /* Menus, slightly adjust arrow */ + + menupopup .menu-right { + margin-right: 0px !important; + } + /* Menus, slightly increase separator margin */ menupopup menuseparator { @@ -438,7 +465,9 @@ menuitem:hover { menupopup#bookmarksMenuPopup, menupopup#PlacesChevronPopup, menupopup#toolbar-context-menu, - menupopup#downloadsContextMenu { + menupopup#downloadsContextMenu, + menupopup#tabContextMenu, + menupopup > menu > menupopup { border-color: var(--grey-70) !important; border-width: 1px !important; border-style: solid !important;