diff --git a/.mozilla/firefox/userChrome.css b/.mozilla/firefox/userChrome.css new file mode 100644 index 0000000..932df9a --- /dev/null +++ b/.mozilla/firefox/userChrome.css @@ -0,0 +1,373 @@ + :root { + + /* Minimal Functional Fox variables*/ + --mff-bg: #292f36; + --mff-icon-color: #e0fbfc; + --mff-nav-toolbar-padding: 8px; + --mff-sidebar-bg: var(--mff-bg); + --mff-sidebar-color: #e0fbfc; + --mff-tab-border-radius: 0px; + --mff-tab-color: #fefefa; + --mff-tab-font-family: "Cantarell", sans; + --mff-tab-font-size: 11pt; + --mff-tab-font-weight: 400; + --mff-tab-height: 32px; + --mff-tab-pinned-bg: #70c1b3; + --mff-tab-selected-bg: #ee6c4d; + --mff-tab-soundplaying-bg: #9c89b8; + --mff-urlbar-color: #98c1d9; + --mff-urlbar-focused-color: #e0fbfc; + --mff-urlbar-font-family: "Cantarell", serif; + --mff-urlbar-font-size: 12pt; + --mff-urlbar-font-weight: 700; + --mff-urlbar-results-color: #e0fbfc; + --mff-urlbar-results-font-family: "mononoki Nerd Font", serif; + --mff-urlbar-results-font-size: 12pt; + --mff-urlbar-results-font-weight: 700; + --mff-urlbar-results-url-color: #98c1d9; + /* --mff-tab-selected-bg: linear-gradient(90deg, rgba(232,74,95,1) 0%, rgba(255,132,124,1) 50%, rgba(254,206,168,1) 100%); */ + /* --mff-urlbar-font-weight: 600; */ + + /* Overriden Firefox variables*/ + --autocomplete-popup-background: var(--mff-bg) !important; + --default-arrowpanel-background: var(--mff-bg) !important; + --default-arrowpanel-color: #fefefa !important; + --lwt-toolbarbutton-icon-fill: var(--mff-icon-color) !important; + --panel-disabled-color: #f9f9fa80; + --toolbar-bgcolor: var(--mff-bg) !important; + --urlbar-separator-color: transparent !important; +} + +/* + _____ _ ___ ___ + |_ _/_\ | _ ) __| + | |/ _ \| _ \__ \ + |_/_/ \_\___/___/ + +*/ + +.tab-background[selected="true"] { + /*background: var(--mff-tab-selected-bg) !important;*/ + border-bottom: 2px solid var(--mff-tab-selected-bg) !important; +} + +.tab-background:not[visuallyselected] { + /*background: var(--mff-tab-selected-bg) !important;*/ + border-bottom: 2px solid var(--mff-tab-selected-bg) !important; + opacity: 0.5 !important; +} + +/* This positions the tabs under the navaigator container */ +#titlebar { + -moz-box-ordinal-group: 3 !important; +} + +.tabbrowser-tab::after, +.tabbrowser-tab::before { + border-left: none !important; +} + +.tab-background { + border: none !important; +} + +.tabbrowser-arrowscrollbox { + margin-inline-start: 4px !important; + margin-inline-end: 0px !important; +} + +.tab-close-button { + display: none !important; +} + +.tab-text { + font-family: var(--mff-tab-font-family); + font-weight: var(--mff-tab-font-weight); + font-size: var(--mff-tab-font-size) !important; + color: var(--mff-tab-color); +} + +/* Hide the favicon for tabs */ +hbox.tab-content .tab-icon-image { + /*display: none !important;*/ +} + +/* Show the favicon for tabs that are pinned */ +hbox.tab-content[pinned=true] .tab-icon-image { + display: initial !important; +} + +hbox.tab-content[pinned=true] .tab-text { + display: none !important; +} + +#tabbrowser-tabs { + --tab-loading-fill: #033433 !important; + +} + +.tab-label-container:not([textoverflow]) { + display: flex; + overflow: hidden; + justify-content: center; + width: 50% !important; + max-width: 50% !important; + min-width: 50% !important; +} + +/* .tab-label-container::after { + content: "?" !important; + +} */ + +.tab-line { + display: none !important; +} + +.tabbrowser-tab { + border-radius: var(--mff-tab-border-radius) !important; + border-width: 0; + height: var(--mff-tab-height) !important; + margin-bottom: 0px !important; + margin-inline-end: 4px !important; + margin-top: 4px !important; + max-height: var(--mff-tab-height) !important; + min-height: var(--mff-tab-height) !important; +} + +.tabbrowser-tab[soundplaying="true"] { + background-color: var(--mff-tab-soundplaying-bg) !important; +} + +#tabs-newtab-button { + list-style-image: url("add.svg") !important; + opacity: 0.7; +} + +.tab-icon-sound { + display: none !important; +} + +/* + _____ ___ ___ _ ___ _ ___ +|_ _/ _ \ / _ \| | | _ ) /_\ | _ \ + | || (_) | (_) | |__| _ \/ _ \| / + |_| \___/ \___/|____|___/_/ \_\_|_\ +*/ + +.urlbar-icon > image { + fill: var(--mff-icon-color) !important; + color: var(--mff-icon-color) !important; +} + +.toolbarbutton-text { + color: var(--mff-icon-color) !important; +} +.urlbar-icon { + color: var(--mff-icon-color) !important; + +} + +.toolbarbutton-icon { +/* filter: drop-shadow(0 0 0.75rem crimson); */ +} + +#urlbar-results { + font-family: var(--mff-urlbar-results-font-family); + font-weight: var(--mff-urlbar-results-font-weight); + font-size: var(--mff-urlbar-results-font-size) !important; + color: var(--mff-urlbar-results-color) !important; +} + +.urlbarView-row[type="bookmark"] > span{ + color: green !important; +} + +.urlbarView-row[type="switchtab"] > span{ + color: orange !important; +} + +.urlbarView-url, .search-panel-one-offs-container { + color: var(--mff-urlbar-results-url-color) !important; + font-family: var(--mff-urlbar-font-family); + font-weight: var(--mff-urlbar-results-font-weight); + font-size: var(--mff-urlbar-font-size) !important; +} + +.urlbarView-favicon, .urlbarView-type-icon { + display: none !important; +} + +#urlbar-input { + font-size: var(--mff-urlbar-font-size) !important; + color: var(--mff-urlbar-color) !important; + font-family: var(--mff-urlbar-font-family) !important; + font-weight: var(--mff-urlbar-font-weight)!important; + text-align: center !important; +} + +#tracking-protection-icon-container, #identity-box { + display: none; +} + +#back-button > .toolbarbutton-icon{ + --backbutton-background: transparent !important; + border: none !important; +} + +#back-button { + list-style-image: url("left-arrow.svg") !important; +} + +#forward-button { + list-style-image: url("right-arrow.svg") !important; +} + +toolbar { + background-image: none !important; +} + +#urlbar-background { + opacity: .98 !important; +} + +#navigator-toolbox, toolbaritem { + border: none !important; +} + +#urlbar-background { + background-color: var(--mff-bg) !important; + border: none !important; +} + +.toolbar-items { + background-color: var(--mff-bg) !important; +} + +#sidebar-search-container { + background-color: var(--mff-sidebar-bg) !important; +} + +box.panel-arrowbox { + display: none; +} + +box.panel-arrowcontent { + border-radius: 8px !important; + border: none !important; +} + +tab.tabbrowser-tab { + overflow: hidden; +} + +tab.tabbrowser-tab:hover { + box-shadow: 0 1px 4px rgba(0,0,0,.05); +} + +image#star-button { + display: none; +} + +@keyframes show { + 0% {visibility: collapse; height: 0px;} + 1% {visibility: visible; height: 0px;} + 100% {visibility: visible; height: 44px;} +} + +@keyframes hide { + 0% {visibility: visible; height: 44px;} + 99% {visibility: visible; height: 0px;} + 100% {visibility: collapse; height: 0px;} +} + +#nav-bar { + padding: var(--mff-nav-toolbar-padding) !important; + min-height: 0px !important; + visibility: collapse; + height: 0px; + overflow: hidden !important; + animation-name: hide; + animation-duration: 0.3s; + animation-fill-mode: forwards; +} + +#navigator-toolbox:hover #nav-bar{ + animation-name: show; + animation-duration: 0.3s; + animation-fill-mode: forwards; +} + +#urlbar { + max-width: 70% !important; + margin: 0 15% !important; + position: unset!important; +} + +#urlbar-input:focus { + color: var(--mff-urlbar-focused-color) !important; +} + + +.megabar[breakout-extend="true"]:not([open="true"]) > #urlbar-background { + box-shadow: none !important; + background-color: transparent !important; +} + +toolbarbutton { + box-shadow: none !important; +} + + +/* + ___ ___ ___ ___ ___ _ ___ + / __|_ _| \| __| _ ) /_\ | _ \ + \__ \| || |) | _|| _ \/ _ \| / + |___/___|___/|___|___/_/ \_\_|_\ +*/ + +.close-icon, .urlbar-icon { + fill: var(--mff-icon-color) !important; +} + +.sidebar-placesTree { + color: var(--mff-sidebar-color) !important; +} + +#sidebar-switcher-target { +/* color: white !important; */ +} + +#sidebar-box { + --sidebar-background-color: var(--mff-sidebar-bg) !important; +} + +splitter#sidebar-splitter { + opacity: 0 !important; +} + +splitter#sidebar-splitter { + border: none !important; + background-color: transparent !important; +} + +image#sidebar-icon { + display: none; +} + + +/* + _ ___ ___ _____ _____ _ _ _ ___ _ + /_\ | _ \ _ \/ _ \ \ / / _ \/_\ | \| | __| | + / _ \| / / (_) \ \/\/ /| _/ _ \| .` | _|| |__ + /_/ \_\_|_\_|_\\___/ \_/\_/ |_|/_/ \_\_|\_|___|____| + */ + +.panel-arrowcontent { + padding: 0px !important; + margin: 0px !important; +} + +toolbarseparator { + display: none; +}