Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* START OF USERCHROME FILE */
- /*================== Simplify Darkish Purple for Firefox ==================
- Author: dpcdpc11.gumroad.com
- ENJOY!
- */
- /*================ GLOBAL COLORS ================*/
- :root {
- --accent-color: 54, 54, 54;
- --secondary-accent-color: 140, 140, 140;
- --third-accent-color: 190, 190, 190;
- --light-color: 255, 255, 255;
- --dark-color: 36, 36, 36;
- --caption-min-color: 255, 133, 94;
- --caption-max-color: 255, 100, 159;
- --caption-close-color: 153, 132, 255;
- }
- /*================ LIGHT THEME ================*/
- :root {
- --main-bgcolor: var(--light-color);
- --transparent-bgcolor: var(--dark-color);
- }
- /*================ DARK THEME ================*/
- :root:-moz-lwtheme-brighttext,
- .sidebar-panel[lwt-sidebar-brighttext],
- body[lwt-sidebar-brighttext] {
- --main-bgcolor: var(--dark-color);
- --transparent-bgcolor: var(--accent-color);
- }
- /*================== MAIN HEADER ==================*/
- toolbox#navigator-toolbox {
- border: 0 !important;
- }
- /*================== TABS BAR ==================*/
- #titlebar #TabsToolbar {
- padding: 6px 0px 2px 6px !important;
- background: rgba(var(--dark-color), 1) !important;
- }
- .titlebar-spacer[type="pre-tabs"] {
- /* border: 0 !important; */
- display: none;
- }
- #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab[beforeselected-visible]::after, #tabbrowser-tabs[movingtab] > .tabbrowser-tab[visuallyselected]::before, .tabbrowser-tab[visuallyselected]::after {
- opacity: 0 !important;
- }
- .tab-line {
- height: 0px !important;
- }
- .tabbrowser-tab {
- margin-right: 5px !important;
- }
- .tabbrowser-tab:not([visuallyselected="true"]), .tabbrowser-tab:-moz-lwtheme {
- color: rgba(var(--secondary-accent-color), 1) !important;
- }
- tab[selected="true"] .tab-content {
- color: rgba(var(--secondary-accent-color), 1) !important;
- }
- tab[selected="true"] .tab-background {
- background: rgba(var(--accent-color), 1) !important;
- }
- .tabbrowser-tab::after, .tabbrowser-tab::before {
- border-left: 0 !important;
- opacity: 0 !important;
- }
- .tab-close-button {
- transition: all 0.3s ease !important;
- border-radius: 4px !important;
- }
- .tab-close-button:hover {
- fill-opacity: 0.2 !important;
- }
- .tabbrowser-tab > .tab-stack > .tab-background {
- border-radius: 4px !important;
- }
- .tabbrowser-tab > .tab-stack > .tab-background:not([selected="true"]) {
- transition: all 0.3s ease !important;
- }
- .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]) {
- background-color: rgba(var(--transparent-bgcolor), 0.7) !important;
- }
- /*================== BOOKMARKS TOOLBAR ==================*/
- #PersonalToolbar {
- background: rgba(var(--dark-color), 1) !important;
- color: rgba(var(--main-bgcolor), 1) !important;
- padding-bottom: 6px !important;
- padding-top: 1px !important;
- }
- toolbarbutton.bookmark-item {
- transition: all 0.3s ease !important;
- padding: 3px 5px !important;
- border-radius:4px !important;
- }
- toolbarbutton.bookmark-item .toolbarbutton-icon {
- fill: rgba(var(--main-bgcolor), 1) !important;
- }
- #PlacesToolbar toolbarseparator {
- -moz-appearance: none !important;
- width: 1px;
- margin: 0 8px !important;
- background-color: rgba(var(--main-bgcolor), 1) !important;
- }
- /*================== CAPTION BUTTONS ==================*/
- .titlebar-buttonbox {
- position: relative;
- margin-right: 0px;
- margin-top: -10px !important;
- }
- .titlebar-button {
- transition: all 0.3s ease !important;
- padding: 8px 10px !important;
- background: rgba(var(--dark-color), 1) !important;
- }
- .titlebar-button.titlebar-close {
- padding-right: 26px !important;
- }
- .titlebar-button > .toolbarbutton-icon {
- transition: all 0.3s ease !important;
- list-style-image: none;
- border-radius: 10px;
- }
- .titlebar-button.titlebar-min > .toolbarbutton-icon {
- background: rgba(var(--caption-min-color), 1); !important;
- }
- .titlebar-button.titlebar-max > .toolbarbutton-icon,
- .titlebar-button.titlebar-restore > .toolbarbutton-icon {
- background: rgba(var(--caption-max-color), 1); !important;
- }
- .titlebar-button.titlebar-close > .toolbarbutton-icon {
- background: rgba(var(--caption-close-color), 1); !important;
- }
- .titlebar-button:hover > .toolbarbutton-icon {
- background: rgba(var(--third-accent-color), 1); !important;
- }
- .titlebar-button.titlebar-min:hover > .toolbarbutton-icon,
- .titlebar-button.titlebar-max:hover > .toolbarbutton-icon,
- .titlebar-button.titlebar-restore:hover > .toolbarbutton-icon,
- .titlebar-button.titlebar-close:hover > .toolbarbutton-icon {
- }
- /*================== NEW TAB BUTTON ==================*/
- toolbar #tabs-newtab-button:not([disabled="true"]):not([checked]):not([open]):not(:active) > .toolbarbutton-icon,
- toolbar #tabs-newtab-button:not([disabled="true"]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-icon,
- toolbar #tabs-newtab-button:not([disabled="true"]):-moz-any([open], [checked], :active) > .toolbarbutton-icon {
- transition: all 0.3s ease !important;
- fill: rgba(var(--secondary-accent-color), 1) !important;
- border-radius: 4px !important;
- background-color: rgba(var(--transparent-bgcolor), 0.7) !important;
- }
- toolbar #tabs-newtab-button:not([disabled="true"]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon {
- background-color: rgba(var(--transparent-bgcolor), 1) !important;
- }
- /*================== NAV BAR ==================*/
- toolbar#nav-bar {
- background: rgba(var(--dark-color), 1) !important;
- box-shadow: none !important;
- padding-bottom: 4px !important;
- }
- toolbar#nav-bar toolbarbutton .toolbarbutton-icon,
- toolbar#nav-bar toolbarbutton #fxa-avatar-image {
- transition: all 0.3s ease !important;
- fill: rgba(var(--secondary-accent-color), 1) !important;
- }
- #urlbar > #urlbar-background {
- border-radius: 4px !important;
- border: 0 !important;
- background-color: rgba(var(--accent-color), 1) !important;
- }
- #urlbar:not([focused="true"]) > #urlbar-background,
- #urlbar > #urlbar-input-container {
- border-radius: 4px !important;
- }
- #PersonalToolbar .toolbarbutton-1:not([disabled="true"]):not([checked]):not([open]):not(:active):hover, .tabbrowser-arrowscrollbox:not([scrolledtostart="true"])::part(scrollbutton-up):hover, .tabbrowser-arrowscrollbox:not([scrolledtoend="true"])::part(scrollbutton-down):hover, .findbar-button:not(:-moz-any([checked="true"], [disabled="true"])):hover, toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):not([open]), toolbar .toolbarbutton-1:not([disabled="true"]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon, toolbar .toolbarbutton-1:not([disabled="true"]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text, toolbar .toolbarbutton-1:not([disabled="true"]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack {
- background-color: rgba(var(--transparent-bgcolor), 0.7) !important;
- }
- #PersonalToolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :hover:active), .findbar-button:not([disabled="true"]):-moz-any([checked="true"], :hover:active), toolbarbutton.bookmark-item:not(.subviewbutton):hover:active:not([disabled="true"]), toolbarbutton.bookmark-item[open="true"], toolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-icon, toolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-text, toolbar .toolbarbutton-1:not([disabled="true"]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-stack {
- background-color: rgba(var(--transparent-bgcolor), 0.2) !important;
- }
- :root:not([uidensity="compact"]) #back-button > .toolbarbutton-icon {
- background-color: transparent !important;
- }
- .urlbar-input-box {
- color: rgba(var(--third-accent-color), 1) !important;
- }
- /*================== SIDEBAR ==================*/
- #sidebar-box,
- .sidebar-panel[lwt-sidebar-brighttext] {
- background-color: rgba(var(--main-bgcolor), 1) !important;
- }
- #sidebar-header {
- border-color: rgba(var(--accent-color), 1) !important;
- }
- .sidebar-splitter {
- border-color: rgba(var(--accent-color), 1) !important;
- }
- #sidebar-switcher-target:hover,
- #sidebar-switcher-target:hover:active, #sidebar-switcher-target.active,
- #viewButton:hover,
- #viewButton[open] {
- background-color: rgba(var(--accent-color), 1) !important;
- }
- .sidebar-placesTreechildren {
- color: unset !important;
- }
- #search-box,
- .search-box {
- -moz-appearance: none !important;
- background-color: rgba(var(--accent-color), 1) !important;
- border-radius: 4px !important;
- color: unset !important;
- }
- .content-container {
- background-color: rgba(var(--main-bgcolor), 1) !important;
- color: unset !important;
- }
- #viewButton {
- color: unset !important;
- }
- /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/compact_urlbar_megabar.css made available under Mozilla Public License v. 2.0
- See the above repository for updates as well as full license text. */
- /* Make urlbar appear more compact */
- #urlbar[breakout]{
- margin-inline-start: 0px !important;
- width: 100% !important;
- left: 0 !important;
- top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
- }
- #urlbar[breakout]:not([open]){ bottom: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important; }
- .urlbarView{ margin-inline: 0 !important; width: auto !important; }
- .urlbarView-row{ padding: 0 2px !important; }
- .urlbarView-row-inner{ padding-inline-start: 4px !important; }
- #urlbar-background{ animation: none !important; }
- #urlbar-input-container{ padding: 0 !important; height: 100% !important; }
- #identity-box{ padding-block: var(--urlbar-icon-padding) }
- .urlbarView > .search-one-offs:not([hidden]){ padding-block: 0px !important; }
- /* END OF USERCHROME FILE */
- /* START OF USERCONTENT FILE */
- /*================ IMPORT USERCHROME.CSS ================*/
- @import "userChrome.css";
- /*================== NEW TAB BG COLOR ==================*/
- @media (prefers-color-scheme: dark) {
- @-moz-document url("about:newtab"), url("about:home"), url("about:blank") {
- body.activity-stream { background-color: rgba(var(--dark-color), 1) !important;}
- }
- }
- @media (prefers-color-scheme: light) {
- @-moz-document url("about:newtab"), url("about:home"), url("about:blank") {
- body.activity-stream { background-color: rgba(var(--light-color), 1) !important;}
- }
- }
- /*================== SEARCH BAR ==================*/
- .search-wrapper input {
- transition: all 0.3s ease !important;
- background: rgba(var(--accent-color), 0.2) var(--newtab-search-icon) 12px center no-repeat !important;
- background-size: 20px !important;
- border: 2px solid !important;
- border-color: rgba(var(--accent-color), 0.3) !important;
- box-shadow: none !important;
- }
- .search-wrapper .search-inner-wrapper:hover input,
- .search-wrapper .search-inner-wrapper:active input,
- .search-wrapper input:focus {
- border-color: rgba(var(--accent-color), 0.6) !important;
- }
- .search-wrapper .search-button,
- .search-wrapper .search-button {
- transition: all 0.3s ease !important;
- }
- .search-wrapper .search-button:focus,
- .search-wrapper .search-button:hover {
- background-color: rgba(var(--accent-color), 1) !important;
- }
- /*================== SEARCH BAR RESULTS ==================*/
- .contentSearchSuggestionTable .contentSearchSuggestionsContainer,
- .contentSearchSuggestionTable .contentSearchHeader {
- background-color: rgba(var(--accent-color), 1) !important;
- }
- .contentSearchSuggestionTable .contentSearchSuggestionRow.selected,
- .contentSearchSuggestionTable .contentSearchOneOffItem.selected {
- background-color: rgba(var(--secondary-accent-color), 0.2) !important;
- }
- .contentSearchSuggestionTable .contentSearchHeader,
- .contentSearchSuggestionTable .contentSearchSettingsButton,
- .contentSearchSuggestionTable .contentSearchOneOffsTable {
- border-color: rgba(var(--secondary-accent-color), 0.2) !important;
- }
- .contentSearchSuggestionTable {
- box-shadow: none !important;
- border: 2px solid rgba(var(--secondary-accent-color), 0.2) !important;
- border-radius: 3px !important;
- }
- /* END OF USERCONTENT FILE */
Add Comment
Please, Sign In to add comment