fliegerjohn/mobile-config-firefox
1
0
Fork 1
mirror of https://codeberg.org/claui/mobile-config-firefox.git synced 2024-09-19 18:47:19 +02:00
Code Issues Projects Releases Packages Wiki Activity

Add @user0’s contributions as of 2023-05-21

Browse source
This commit is contained in:
@user0 2023-05-21 09:50:32 +02:00 committed by Claudia Pellegrino
parent e40b13098d
commit ad06da4868
No known key found for this signature in database
GPG key ID: 7AA67DE7B73139CE
26 changed files with 1180 additions and 180 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/userChrome/alt-browser.css Normal file
View file

@ -0,0 +1,43 @@
/* Copyright 2022 plata
* SPDX-License-Identifier: MPL-2.0 */
/* Move navigation bar to bottom */
@media (max-width: 700px) {
#browser {
-moz-box-ordinal-group: 0 !important;
}
/* Hide navigation bar in kiosk mode (to prevent bug #29). We can assume FF
* is in kiosk mode when fullscreen and max-width conditions are met,
* because at this max-width the fullscreen button is hidden
* (see appMenu.css). */
#nav-bar[inFullscreen],
#TabsToolbar[inFullscreen] {
display: none;
}
/* https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/toolbars_below_content.css */
#TabsToolbar > .titlebar-buttonbox-container {
display: none;
}
/* Fix panels sizing */
.panel-viewstack {
max-height: unset !important;
}
/* Tabs below */
#titlebar {
-moz-box-ordinal-group: 2; /* Fx <112 compatibility */
order: 2;
}
/* Adjust menu popup spawn height */
#appMenu-popup {
margin-bottom: 20px !important;
}
/* Adjust all-tabs popup spawn height */
#customizationui-widget-panel {
margin-bottom: 60px !important;
}
}

29
src/userChrome/appMenu.css
View file

@ -7,13 +7,20 @@
* height. This is due to the position="bottomcenter topright" attribute in * height. This is due to the position="bottomcenter topright" attribute in
* the HTML, which we can't override via CSS. */ * the HTML, which we can't override via CSS. */
#appMenu-popup { #appMenu-popup {
margin-top: -390px !important; /*margin-top: -390px !important;*/
height: 310px; margin-bottom: 62px !important;
max-height: 310px; padding-left: 10px !important;
padding-right: 10px !important;
/*height: 310px;*/
/*max-height: 310px;*/
height: 330px;
max-height: 330px;
} }
#appMenu-protonMainView vbox.panel-subview-body { #appMenu-protonMainView vbox.panel-subview-body {
height: 300px !important; /*height: 300px !important;*/
max-height: 300px !important; /*max-height: 300px !important;*/
height: 318px !important;
max-height: 318px !important;
} }
#appMenu-multiView box.panel-viewstack:first-child { #appMenu-multiView box.panel-viewstack:first-child {
/* Use the whole space in the menu, instead of slowly increasing the /* Use the whole space in the menu, instead of slowly increasing the
@ -42,16 +49,16 @@
* are over the FF in fullscreen) */ * are over the FF in fullscreen) */
#appMenu-fxa-status2, /* FF login */ #appMenu-fxa-status2, /* FF login */
#appMenu-fxa-separator, /* FF login */ #appMenu-fxa-separator, /* FF login */
#appMenu-new-window-button2, /*#appMenu-new-window-button2,*/
#appMenu-protonMainView toolbarseparator, /* all separators */ #appMenu-protonMainView toolbarseparator, /* all separators */
#appMenu-save-file-button2, /* Save file can be done from Print too */ /*#appMenu-save-file-button2, /* Save file can be done from Print too */
#appMenu-fullscreen-button2, #appMenu-fullscreen-button2,
#appMenu-passwords-button, /* accessible from settings */ #appMenu-passwords-button, /* accessible from settings */
#appMenu-extensions-themes-button, /* accessible from settings */ /*#appMenu-extensions-themes-button, /* accessible from settings */
#appMenu-bookmarks-button, /* submenu */ #appMenu-bookmarks-button, /* submenu */
#appMenu-history-button, /* submenu */ /*#appMenu-history-button, /* submenu */
#appMenu-more-button2, /* submenu */ /*#appMenu-more-button2, /* submenu */
#appMenu-help-button2, /* submenu */ /*#appMenu-help-button2, /* submenu */
.subviewbutton[shortcut]::after { /* menu shortcuts ("Ctrl+T" etc.) */ .subviewbutton[shortcut]::after { /* menu shortcuts ("Ctrl+T" etc.) */
display: none !important; display: none !important;
} }

10
src/userChrome/browser.css
View file

@ -15,4 +15,14 @@
#TabsToolbar[inFullscreen] { #TabsToolbar[inFullscreen] {
display: none; display: none;
} }
/* https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/toolbars_below_content.css */
#TabsToolbar > .titlebar-buttonbox-container {
display: none;
}
/* Fix panels sizing */
.panel-viewstack {
max-height: unset !important;
}
} }

263
src/userChrome/color_variable_template.css
View file

@ -4,45 +4,254 @@ See the above repository for updates as well as full license text. */
/* You should enable any non-default theme for these to apply properly. Built-in dark and light themes should work */ /* You should enable any non-default theme for these to apply properly. Built-in dark and light themes should work */
:root { :root {
/* Popup panels */ /* Popup panels */
--arrowpanel-background: olive !important; --arrowpanel-background: black !important;
--arrowpanel-border-color: green !important; --arrowpanel-border-color: #dc8add !important;
--arrowpanel-color: cyan !important; --arrowpanel-color: #dc8add !important;
--arrowpanel-dimmed: rgba(0,0,0,0.4) !important; --arrowpanel-dimmed: rgba(220,138,221,0.6) !important;
--arrowpanel-dimmed-further: rgba(220,138,221,0.3) !important;
/*
--panel-background: black !important;
--panel-border-color: #dc8add !important;
--panel-color: white !important;
--panel-separator-color: #dc8add !important;
*/
--panel-item-hover-bgcolor: rgba(220,138,221,0.5) !important;
--panel-item-active-bgcolor: #dc8add !important;
--panel-banner-item-background-color: #dc8add !important;
--panel-banner-item-hover-bgcolor: #dc8add !important;
--panel-banner-item-active-bgcolor: #dc8add !important;
--panel-banner-item-update-supported-bgcolor: #dc8add !important;
--panel-banner-item-info-icon-bgcolor: #dc8add !important;
--panel-banner-item-color: #dc8add !important;
--panel-description-color: #dc8add !important;
--panel-disabled-color: rgba(220,138,221,0.6) !important;
--uc-menu-bkgnd: transparent !important;
--uc-menu-color: #dc8add !important;
--uc-menu-dimmed: #dc8add !important;
--uc-menu-disabled: #dc8add !important;
--menuitem-disabled-hover-background-color: #dc8add !important;
/* window and toolbar background */ /* window and toolbar background */
--lwt-accent-color: red !important; --lwt-accent-color: #dc8add !important;
--lwt-accent-color-inactive: green !important; --lwt-accent-color-inactive: #e8b1e8 !important;
--toolbar-bgcolor: rgba(0,0,0,0.4) !important; --toolbar-non-lwt-bgcolor: black !important;
--toolbar-non-lwt-textcolor: #dc8add !important;
--toolbar-bgcolor: black !important;
--toolbar-color: #dc8add !important;
--tabpanel-background-color: black !important;
/* tabs with system theme - text is not controlled by variable */ /* tabs with system theme - text is not controlled by variable */
--tab-selected-bgcolor: powderblue !important; --tab-selected-bgcolor: #dc8add !important;
/* tabs with any other theme */ /* tabs with any other theme */
--lwt-text-color: cyan !important; --lwt-text-color: white !important;
--lwt-selected-tab-background-color: cornflowerblue !important; --lwt-selected-tab-background-color: #dc8add !important;
/* toolbar area */ /* toolbar area */
--toolbarbutton-icon-fill: white !important; /*
--lwt-toolbarbutton-hover-background: orange !important; --toolbarbutton-icon-fill: #dc8add !important;
--lwt-toolbarbutton-active-background: red !important; */
--toolbarbutton-icon-fill-attention: white !important;
--toolbarbutton-hover-background: #dc8add !important;
--toolbarbutton-active-background: #dc8add !important;
--lwt-toolbarbutton-icon-fill-attention: white !important;
--lwt-toolbarbutton-hover-background: #dc8add !important;
--lwt-toolbarbutton-active-background: #dc8add !important;
--toolbarseparator-color: black !important;
/* urlbar */ /* urlbar */
--toolbar-field-border-color: green !important; --toolbar-field-border-color: #dc8add !important;
--toolbar-field-focus-border-color: pink !important; --toolbar-field-focus-border-color: #dc8add !important;
--urlbar-popup-url-color: cyan !important; --urlbar-popup-url-color: white !important;
/*
--urlbar-box-bgcolor: var(--button-bgcolor);
--urlbar-box-focus-bgcolor: var(--button-bgcolor);
--urlbar-box-hover-bgcolor: var(--button-hover-bgcolor);
--urlbar-box-active-bgcolor: var(--button-active-bgcolor);
--urlbar-box-text-color: inherit;
--urlbar-box-hover-text-color: var(--urlbar-box-text-color);
--lwt-brighttext-url-color: #00ddff;
*/
/* urlbar Firefox < 92 */ /* urlbar Firefox < 92 */
--lwt-toolbar-field-background-color: olive !important; --lwt-toolbar-field-background-color: #dc8add !important;
--lwt-toolbar-field-focus: grey !important; --lwt-toolbar-field-focus: white !important;
--lwt-toolbar-field-color: red !important; --lwt-toolbar-field-color: white !important;
--lwt-toolbar-field-focus-color: white !important; --lwt-toolbar-field-focus-color: white !important;
/* urlbar Firefox 92+ */ /* urlbar Firefox 92+ */
--toolbar-field-background-color: olive !important; --toolbar-field-background-color: #dc8add !important;
--toolbar-field-focus-background-color: grey !important; --toolbar-field-focus-background-color: #dc8add !important;
--toolbar-field-color: red !important; --toolbar-field-icon-fill-attention: #dc8add !important;
--toolbar-field-color: white !important;
--toolbar-field-focus-color: white !important; --toolbar-field-focus-color: white !important;
/* sidebar - note the sidebar-box rule for the header-area */ /* sidebar - note the sidebar-box rule for the header-area */
--lwt-sidebar-background-color: purple !important; --lwt-sidebar-background-color: black !important;
--lwt-sidebar-text-color: yellow !important; --lwt-sidebar-text-color: black !important;
/* findbar */
--focus-outline-color: #dc8add !important;
--input-border-color: #dc8add !important;
/* buttons and checkboxes */
/*
--button-bgcolor: black !important;
--button-color: white !important;
--button-hover-bgcolor: #dc8add !important;
--button-active-bgcolor: #dc8add !important;
*/
--button-primary-bgcolor: #dc8add !important;
--button-primary-hover-bgcolor: #dc8add !important;
--button-primary-active-bgcolor: #dc8add !important;
--button-primary-color: white !important;
--in-content-primary-button-background: #dc8add !important;
--in-content-primary-button-background-hover: #dc8add !important;
--in-content-primary-button-background-active: #dc8add !important;
/*
--buttons-destructive-bgcolor: #e22850;
--buttons-destructive-hover-bgcolor: #c50042;
--buttons-destructive-active-bgcolor: #810220;
--buttons-destructive-color: #fbfbfe;
*/
--checkbox-unchecked-bgcolor: black !important;
--checkbox-unchecked-hover-bgcolor: black !important;
--checkbox-unchecked-active-bgcolor: black !important;
--checkbox-checked-border-color: transparent !important;
--checkbox-checked-bgcolor: #dc8add !important;
--checkbox-checked-color: white !important;
--checkbox-checked-hover-bgcolor: rgba(220,138,221,0.9) !important;
--checkbox-checked-active-bgcolor: rgba(220,138,221,0.9) !important;
--uc-checkbox-checked-bgcolor: #dc8add !important;
/* icon glow */
--uc-icon-glow-primary: #dc8add;
--uc-icon-glow-secondary: white;
--uc-icon-glow-hover-primary: #dc8add;
--uc-icon-glow-hover-secondary: white;
} }
/* line between nav-bar and tabs toolbar, /* line between nav-bar and tabs toolbar,
also fallback color for border around selected tab */ also fallback color for border around selected tab */
#navigator-toolbox{ --lwt-tabs-border-color: cyan !important; } #navigator-toolbox {
--lwt-tabs-border-color: none !important;
}
/* Line above tabs */ /* Line above tabs */
#tabbrowser-tabs{ --lwt-tab-line-color: white !important; } #tabbrowser-tabs {
--lwt-tab-line-color: none !important;
}
/* the header-area of sidebar needs this to work */ /* the header-area of sidebar needs this to work */
#sidebar-box{ --sidebar-background-color: purple !important; } #sidebar-box {
--sidebar-background-color: black !important;
}
/* (context_menus_more_proton.css) */
/* OPTIONAL Set custom context menu colors below */
menupopup:not(.in-menulist) {
--panel-background: black !important;
--panel-color: white !important;
--panel-separator-color: #dc8add !important;
--panel-border-color: #dc8add !important;
}
menupopup > menuseparator {
border-color: var(--panel-separator-color,ThreeDShadow) !important;
}
menupopup {
--panel-item-hover-bgcolor: var(--button-hover-bgcolor) !important;
}
menupopup > menuitem,
menupopup > menu {
appearance: none !important;
background-color: transparent !important;
}
#context-navigation > menuitem[_moz-menuactive]:not([disabled]) .menu-iconic-icon,
menupopup > menuitem[_moz-menuactive],
menupopup > menu[_moz-menuactive] {
background-color: var(--panel-border-color) !important;
color: var(--panel-color,inherit) !important;
}
menupopup > menuitem[disabled][_moz-menuactive],
menupopup > menu[disabled][_moz-menuactive] {
background-color: var(--menuitem-disabled-hover-background-color) !important;
}
/* (dark_context_menus.css) */
panel richlistbox,
panel tree,
panel button,
panel menulist,
panel textbox,
panel input,
menupopup,
menu,
menuitem {
-moz-appearance: none !important;
}
panel menulist {
border: 1px solid transparent;
}
panel richlistbox,
panel tree,
panel button,
panel menulist,
panel textbox,
panel input,
panel #searchbar,
menupopup:not(#BMB_bookmarksPopup),
#main-menubar > menu > menupopup,
#context-navigation {
color: var(--uc-menu-color) !important;
background-color: var(--uc-menu-bkgnd) !important;
border-color: var(--uc-menu-disabled) !important;
}
panel input {
background-color: rgba(0,0,0,0.1) !important;
}
panel #searchbar {
background-color: rgba(0,0,0,0.1) !important;
padding: 0 !important;
}
panel #searchbar input {
background-color: transparent !important;
}
panel menulist:hover,
panel menulist[open] {
border-color: Highlight !important;
}
#editBMPanel_folderMenuList > menupopup > menuitem {
color: var(--uc-menu-color) !important;
}
panel treechildren::-moz-tree-row(selected),
panel button:hover,
menu:hover,
menu[_moz-menuactive],
menuitem:hover,
menuitem[_moz-menuactive] {
background-color: var(--uc-menu-dimmed) !important; color: var(--lwt-text-color) !important;
}
menu[open] {
background-color: transparent !important; color: inherit !important;
}
menu[disabled="true"],
menuitem[disabled="true"] {
color: var(--uc-menu-disabled) !important;
}
menu[disabled="true"]:hover,
menuitem[disabled="true"]:hover {
color: var(--lwt-text-color) !important;
}

154
src/userChrome/colors.css Normal file
View file

@ -0,0 +1,154 @@
/* Various items color */
arrowscrollbox,
findbar,
toolbar[type=menubar],
tooltip,
#TabsToolbar,
#navigator-toolbox,
#tabbrowser-arrowscrollbox {
background-color: var(--arrowpanel-background) !important;
color: var(--arrowpanel-color) !important;
}
/* Tab throbber color */
.tab-throbber[busy]::before {
fill: var(--lwt-text-color) !important;
}
/* Inactive Tab throbber color */
.tabbrowser-tab:not(:hover, [selected]) .tab-throbber[busy]::before {
fill: var(--lwt-accent-color) !important;
}
/* Inactive tab color on hover */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected]) {
background-color: var(--lwt-accent-color-inactive) !important;
}
/* Inactive tab text and close button (x) color */
.tab-text:not([selected]),
.tab-icon-image:not([selected]),
.tab-close-button:not([selected]) {
color: var(--lwt-accent-color) !important;
}
/* Inactive tab text and close button (x) color on hover */
.tabbrowser-tab:not([selected]):hover .tab-text,
.tabbrowser-tab:not([selected]):hover .tab-icon-image,
.tabbrowser-tab:not([selected]):hover .tab-close-button {
color: var(--lwt-text-color) !important;
}
/* Tab text and close button (x) color */
.tab-text,
.tab-icon-image,
.tab-close-button {
color: var(--lwt-text-color) !important;
}
/* Tab close button (x) color on hover */
.tab-close-button:hover,
.tab-close-button:not([selected]):hover {
background-color: var(--lwt-accent-color-inactive) !important;
}
/* Container tab line color */
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
background-color: var(--tab-bgcolor) !important;
}
/* Back button (←) color */
#back-button > .toolbarbutton-icon {
border: none !important;
background-color: var(--arrowpanel-dimmed) !important;
background-image: none !important;
}
/* Back button (←) color on hover */
#back-button:not([disabled]):hover > .toolbarbutton-icon {
background-color: var(--lwt-accent-color) !important;
color: var(--lwt-text-color) !important;
}
/* Forward button (→) color */
#forward-button > .toolbarbutton-icon {
border: none !important;
background-color: unset !important;
background-image: none !important;
}
/* Forward button (→) color on hover */
#forward-button:not([disabled]):hover > .toolbarbutton-icon {
background-color: var(--lwt-accent-color) !important;
color: var(--lwt-text-color) !important;
}
/* Urlbar color */
*::selection {
background-color: var(--urlbar-popup-url-color) !important;
color: var(--lwt-accent-color) !important;
}
#nav-bar {
background-color: var(--arrowpanel-dimmed) !important;
background-image: linear-gradient(#0e0e0e,#0e0e0e) !important;
}
#urlbar:not([focused]) #urlbar-input-container {
filter: saturate(3);
}
/* Bookmark button (★) post-animation color */
#star-button,
#star-button[starred] {
color: var(--lwt-text-color) !important;
}
/* "Saved to Library!" color */
#confirmation-hint {
--arrowpanel-border-color: var(--lwt-accent-color) !important;
--arrowpanel-color: var(--lwt-text-color) !important;
--arrowpanel-background: var(--lwt-accent-color) !important;
}
/* Navbar buttons color */
#navigator-toolbox :-moz-any(.toolbarbutton-1, toolbarbutton.bookmark-item:not(.subviewbutton)):hover:not([disabled]),
#navigator-toolbox :-moz-any(.toolbarbutton-1, toolbarbutton.bookmark-item:not(.subviewbutton)):-moz-any(:hover:active, [checked], [open]):not([disabled]) {
color: var(--lwt-text-color) !important;
}
/* Main menu button (≡) color on hover */
.subviewbutton:hover {
background-color: var(--arrowpanel-color) !important;
color: var(--lwt-text-color) !important;
}
/* Findbar color */
.browserContainer > findbar {
border: none !important;
background-color: var(--toolbar-bgcolor) !important;
color: var(--toolbar-color) !important;
box-shadow: none !important;
}
input.findbar-textbox {
border: 1px solid var(--toolbar-color) !important;
background-color: var(--toolbar-bgcolor) !important;
color: var(--toolbar-color) !important;
box-shadow: 0 0 3px var(--toolbar-color) !important;
}
.findbar-find-previous,
.findbar-find-next {
border: none !important;
background-color: transparent !important;
color: var(--toolbar-color) !important;
}
/* Status panel color */
#statuspanel #statuspanel-inner {
border: none !important;
height: 23x !important;
background-color: transparent !important;
}
#statuspanel #statuspanel-label {
border: none !important;
background-color: var(--arrowpanel-background) !important;
color: var(--arrowpanel-color) !important;
}

74
src/userChrome/custom_rules.css Normal file
View file

@ -0,0 +1,74 @@
/* custom rules */
/* Apply this customization only on smaller screens */
@media (max-width: 700px) {
/* Remove Tab Manager button
(overridden by tab_counter.css) */
#alltabs-button {
display: none !important;
}
/* Remove tab overflow indicators */
spacer[part=overflow-start-indicator],
spacer[part=overflow-end-indicator] {
display: none !important;
}
/* Remove spacers on left and right of main tab view */
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
margin-inline-start: 0px !important;
}
.titlebar-spacer[type="post-tabs"] {
display: none !important;
}
/* Remove items from urlbar */
#tracking-protection-icon-container,
#identity-permission-box,
#userContext-indicator,
#page-action-buttons {
display: none !important;
}
/* Urlbar font resizing */
#urlbar-input {
font-size: 10pt !important;
}
#urlbar[focused] #urlbar-input {
font-size: calc(var(--urlbar-height) - 9px) !important;
}
/* Hide Inactive tab close button (x)
to prevent accidentally closing tabs when selecting them */
.tab-close-button:not([selected]),
.tabbrowser-tab:not([selected]):hover .tab-close-button {
visibility: hidden !important;
}
/* Disable tab loading burst
(because it's annoying) */
.tab-loading-burst {
display: none !important;
}
/* Tabs Toolbar and Container tab line color
(hides container tab line above tab by making it the same color as the Tabs Toolbar) */
#TabsToolbar,
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
background-color: var(--tab-bgcolor) !important;
}
/* Menubar color
(hides the line at the top of the screen when Menubar is hidden) */
toolbar[type=menubar] {
background-color: black !important;
color: var(--toolbar-color) !important;
}
/* Navbar bottom border color */
#navigator-toolbox {
border-bottom-color: black !important;
}
}

15
src/userChrome/findbar.css
View file

@ -6,7 +6,8 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
height: 150px !important; /*height: 150px !important;*/
height: 40px !important;
} }
.findbar-textbox { .findbar-textbox {
@ -19,4 +20,16 @@
* them with the finger. */ * them with the finger. */
padding: 10px 0px; padding: 10px 0px;
} }
/* Save space */
.findbar-highlight,
.findbar-case-sensitive,
.findbar-match-diacritics,
.findbar-entire-word,
/*.found-matches,*/
.findbar-find-status,
.find-status-icon {
display: none;
}
} }

10
src/userChrome/hide_newtab_+_new-tab_buttons.css Normal file
View file

@ -0,0 +1,10 @@
/* Apply this customization only on smaller screens */
@media (max-width: 700px) {
/* Hide Newtab and New-tab buttons */
#new-tab-button,
#tabs-newtab-button {
display: none !important;
}
}

4
src/userChrome/hide_tabs_scrollbuttons.css
View file

@ -57,7 +57,9 @@ spacer[part="overflow-end-indicator"]{
margin-inline-end: calc(0px - var(--tab-shadow-max-size,0px)) !important; margin-inline-end: calc(0px - var(--tab-shadow-max-size,0px)) !important;
background-image: var(--uc-scrollbutton-down-background); background-image: var(--uc-scrollbutton-down-background);
} }
.scrollbox-clip{ margin-inline: var(--uc-scrollbox-margin,0px); } .scrollbox-clip {
margin-inline: var(--uc-scrollbox-margin,0px);
}
/* Need to reset some things for other scrollboxes */ /* Need to reset some things for other scrollboxes */
.menupopup-arrowscrollbox { .menupopup-arrowscrollbox {

62
src/userChrome/iconized_main_menu.css
View file

@ -8,28 +8,58 @@ See the above repository for updates as well as full license text. */
-moz-context-properties: fill; -moz-context-properties: fill;
margin-inline: 0 8px !important; margin-inline: 0 8px !important;
} }
#appMenu-new-tab-button2{ list-style-image: url("chrome://browser/skin/new-tab.svg") } #appMenu-new-tab-button2 {
#appMenu-new-window-button2{ list-style-image: url("chrome://browser/skin/window.svg") } list-style-image: url("chrome://browser/skin/new-tab.svg");
#appMenu-new-private-window-button2{ list-style-image: url("chrome://browser/skin/privateBrowsing.svg") } }
#appMenu-bookmarks-button{ list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg") } #appMenu-new-window-button2 {
#appMenu-history-button{ list-style-image: url("chrome://browser/skin/history.svg") } list-style-image: url("chrome://browser/skin/window.svg");
#appMenu-downloads-button{ list-style-image: url("chrome://browser/skin/downloads/downloads.svg") } }
#appMenu-passwords-button{ list-style-image: url("chrome://browser/skin/login.svg") } #appMenu-new-private-window-button2 {
#appMenu-extensions-themes-button{ list-style-image: url("chrome://mozapps/skin/extensions/extension.svg") } list-style-image: url("chrome://browser/skin/privateBrowsing.svg");
#appMenu-print-button2{ list-style-image: url("chrome://global/skin/icons/print.svg") } }
#appMenu-save-file-button2{ list-style-image: url("chrome://browser/skin/save.svg") } #appMenu-bookmarks-button {
#appMenu-find-button2{ list-style-image: url("chrome://global/skin/icons/search-glass.svg") } list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg");
#appMenu-settings-button{ list-style-image: url("chrome://global/skin/icons/settings.svg") } }
#appMenu-more-button2{ list-style-image: url("chrome://global/skin/icons/developer.svg") } #appMenu-history-button {
#appMenu-help-button2{ list-style-image: url("chrome://global/skin/icons/info.svg") } list-style-image: url("chrome://browser/skin/history.svg");
#appMenu-quit-button2{ list-style-image: url("chrome://devtools/skin/images/search-clear.svg") } }
#appMenu-downloads-button {
list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
}
#appMenu-passwords-button {
list-style-image: url("chrome://browser/skin/login.svg");
}
#appMenu-extensions-themes-button {
list-style-image: url("chrome://mozapps/skin/extensions/extension.svg");
}
#appMenu-print-button2 {
list-style-image: url("chrome://global/skin/icons/print.svg");
}
#appMenu-save-file-button2 {
list-style-image: url("chrome://browser/skin/save.svg");
}
#appMenu-find-button2 {
list-style-image: url("chrome://global/skin/icons/search-glass.svg");
}
#appMenu-settings-button {
list-style-image: url("chrome://global/skin/icons/settings.svg");
}
#appMenu-more-button2 {
list-style-image: url("chrome://global/skin/icons/developer.svg");
}
#appMenu-help-button2 {
list-style-image: url("chrome://global/skin/icons/info.svg");
}
#appMenu-quit-button2 {
list-style-image: url("chrome://devtools/skin/images/search-clear.svg");
}
/* Use account-button icon for signed in sync item */ /* Use account-button icon for signed in sync item */
#appMenu-fxa-status2[fxastatus] > toolbarbutton::before { #appMenu-fxa-status2[fxastatus] > toolbarbutton::before {
display: flex; display: flex;
content: ""; content: "";
width: 16px; width: 16px;
height: 16px; height: 16px;
background-image: var(--avatar-image-url) background-image: var(--avatar-image-url);
} }
/* Add somewhat hacky separator to zoom controls so it looks consistent */ /* Add somewhat hacky separator to zoom controls so it looks consistent */
#appMenu-protonMainView > .panel-subview-body::after { #appMenu-protonMainView > .panel-subview-body::after {

14
src/userChrome/new-tab-button.css Normal file
View file

@ -0,0 +1,14 @@
/* Apply this customization only on smaller screens */
@media (max-width: 700px) {
/* Hide non-overflow Newtab button */
#tabs-newtab-button {
display: none !important;
}
/* Display overflow New-tab button by default */
#new-tab-button {
display: initial !important;
}
}

42
src/userChrome/numbered_tabs.css
View file

@ -1,7 +1,43 @@
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/numbered_tabs.css made available under Mozilla Public License v. 2.0 /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/numbered_tabs.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */ See the above repository for updates as well as full license text. */
/* Show a number before tab text*/ /* Apply this customization only on smaller screens */
@media (max-width: 700px) {
.tabbrowser-tab:first-child{ counter-reset: nth-tab 0 } /* Change to -1 for 0-indexing */ /* Show a number before tab text */
.tab-text::before{ content: counter(nth-tab) " "; counter-increment: nth-tab } /* Actually, let's show the tab number after tab content, right-align it,
and fix its position directly on the tab close button */
#tabbrowser-tabs {
counter-reset: nth-tab 0; /* Change to -1 for 0-indexing */
}
.tabbrowser-tab:not([pinned]) .tab-content::after {
content: counter(nth-tab) " ";
counter-increment: nth-tab;
position: absolute !important;
position: fixed;
right: 24px;
top: 12px;
width: 0 !important;
}
/* Shorten tab content width so that tab number is more visible */
.tabbrowser-tab[selected]:not(:hover,[pinned]) > .tab-stack > .tab-content {
width: calc(100vw - 150px) !important;
}
/* Hide tab number when hovering so that tab close button is clickable */
.tabbrowser-tab:not([pinned]):hover .tab-content::after {
visibility: hidden !important;
}
/* Adjust tab close button opacity, border, and shape */
.tab-close-button {
position: absolute !important;
margin-right: -8px !important;
opacity: 0.5 !important;
border: 2px solid white !important;
height: 36px !important;
width: 36px !important;
}
}

17
src/userChrome/popups.css
View file

@ -6,8 +6,10 @@
* the notifications (like the one for installing addons) displayed * the notifications (like the one for installing addons) displayed
* on-screen. */ * on-screen. */
#notification-popup { #notification-popup {
margin-left: -200px !important; /*margin-left: -200px !important;*/
margin-top: -500px !important; margin-top: -500px !important;
height: calc(100vh - 250px) !important;
max-width: 100vw !important;
} }
#downloadsPanel-mainView { #downloadsPanel-mainView {
@ -42,8 +44,8 @@
max-width: 100vw !important; max-width: 100vw !important;
} }
/* fix the protections popup gettting /* fix the protections popup getting
* too wide, making controls unaccessible */ * too wide, making controls naccessible */
#protections-popup-mainView { #protections-popup-mainView {
min-width: 100vw !important; min-width: 100vw !important;
max-width: 100vw !important; max-width: 100vw !important;
@ -57,4 +59,13 @@
#widget-overflow-mainView { #widget-overflow-mainView {
height: calc(100vh - 80px) !important; height: calc(100vh - 80px) !important;
} }
/* Fix widget overflow to fit ublock0_raymondhill_net-browser-action */
#widget-overflow {
padding-bottom: 25px !important;
}
#widget-overflow-mainView {
height: 357px !important;
}
} }

78
src/userChrome/round_ui_items.css
View file

@ -3,7 +3,10 @@ See the above repository for updates as well as full license text. */
/* Make bunch of things in the main UI round */ /* Make bunch of things in the main UI round */
:root{ --toolbarbutton-border-radius: 24px !important } :root {
--toolbarbutton-border-radius: 12px !important;
--tab-border-radius: 14px !important;
}
#urlbar-input-container > box:hover, #urlbar-input-container > box:hover,
#urlbar-input-container > box[open], #urlbar-input-container > box[open],
#main-menubar > menu, #main-menubar > menu,
@ -19,29 +22,74 @@ See the above repository for updates as well as full license text. */
.subviewbutton-back, .subviewbutton-back,
.toolbaritem-combined-buttons > toolbarbutton, .toolbaritem-combined-buttons > toolbarbutton,
#PopupSearchAutoComplete, #PopupSearchAutoComplete,
menupopup{ border-radius: 18px } menupopup {
border-radius: 10px;
}
button, button,
.tab-background{ border-radius: 30px !important; } .tab-background {
border-radius: 14px !important;
}
.panel-arrowcontent{ margin-inline-end: 0 !important; } .panel-arrowcontent {
.panel-arrow{ margin-inline: 17px !important; } margin-inline-end: 0 !important;
}
.panel-arrow {
margin-inline: 17px !important;
}
menupopup{ -moz-appearance: none !important; overflow: -moz-hidden-unscrollable !important; } menupopup {
-moz-appearance: none !important;
overflow: -moz-hidden-unscrollable !important;
}
.tabbrowser-tab[selected]::after, .tabbrowser-tab[selected]::after,
.tabbrowser-tab[beforeselected-visible]::after{ border-color: transparent !important; } .tabbrowser-tab[beforeselected-visible]::after {
border-color: transparent !important;
}
#nav-bar{ box-shadow: none !important; margin-top: 3px } #nav-bar {
.tab-line{ display: none } box-shadow: none !important;
margin-top: 3px;
}
.tab-line {
display: none;
}
.tab-background[selected] { .tab-background[selected] {
border-top-width: 2px !important; border-top-width: 3px !important;
border-top-color: var(--lwt-tab-line-color) !important; border-bottom-width: 3px !important;
border-left-width: 3px !important;
border-right-width: 3px !important;
border-radius: 14px !important;
}
.tabbrowser-tab[selected] {
z-index: auto !important;
} }
.tabbrowser-tab[selected]{ z-index: auto !important; }
.urlbar-icon, /*.urlbar-icon,
toolbar toolbarbutton:not(#back-button):not(.bookmark-item):not(.titlebar-button) > .toolbarbutton-icon{ border-radius: 0px !important; clip-path: circle() } toolbar toolbarbutton:not(#back-button):not(.bookmark-item):not(.titlebar-button) > .toolbarbutton-icon {
border-radius: 12px !important;
}*/
menugroup:hover > menuitem{ clip-path: circle() } menugroup:hover > menuitem {
border-radius: 16px !important;
}
/* Urlbar and searchbar shape */
#urlbar,
#searchbar,
#urlbar-input,
#urlbar-input-container {
border-radius: 12px !important;
}
#urlbar-background {
border: none !important;
border-radius: 12px !important;
}
/* Findbar shape */
input.findbar-textbox {
border-radius: 9px !important;
font-size: 14px !important;
}

21
src/userChrome/single_tab_mode.css Normal file
View file

@ -0,0 +1,21 @@
/* Apply this customization only on smaller screens */
@media (max-width: 700px) {
/* Hide unpinned inactive tabs */
.tabbrowser-tab:not([pinned]):not([selected]) {
visibility: hidden !important;
min-width: 0 !important;
}
/* Expand unpinned active tab */
.tabbrowser-tab:not([pinned])[selected] {
min-width: 100vw !important;
}
/* Hide Newtab and New-tab buttons */
#new-tab-button,
#tabs-newtab-button {
display: none !important;
}
}

20
src/userChrome/single_tab_mode_with_space_for_1_item.css Normal file
View file

@ -0,0 +1,20 @@
/* Apply this customization only on smaller screens */
@media (max-width: 700px) {
/* Hide unpinned inactive tabs */
.tabbrowser-tab:not([pinned]):not([selected]) {
visibility: hidden !important;
min-width: 0 !important;
}
/* Expand first unpinned tab */
#tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
max-width: 100vw !important;
}
/* Expand unpinned active tab */
.tabbrowser-tab:not([pinned])[selected] {
min-width: calc(100vw - 40px) !important;
}
}

20
src/userChrome/single_tab_mode_with_space_for_2_items.css Normal file
View file

@ -0,0 +1,20 @@
/* Apply this customization only on smaller screens */
@media (max-width: 700px) {
/* Hide unpinned inactive tabs */
.tabbrowser-tab:not([pinned]):not([selected]) {
visibility: hidden !important;
min-width: 0 !important;
}
/* Expand first unpinned tab */
#tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
max-width: 100vw !important;
}
/* Expand unpinned active tab */
.tabbrowser-tab:not([pinned])[selected] {
min-width: calc(100vw - 80px) !important;
}
}

20
src/userChrome/single_tab_mode_with_space_for_3_items.css Normal file
View file

@ -0,0 +1,20 @@
/* Apply this customization only on smaller screens */
@media (max-width: 700px) {
/* Hide unpinned inactive tabs */
.tabbrowser-tab:not([pinned]):not([selected]) {
visibility: hidden !important;
min-width: 0 !important;
}
/* Expand first unpinned tab */
#tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
max-width: 100vw !important;
}
/* Expand unpinned active tab */
.tabbrowser-tab:not([pinned])[selected] {
min-width: calc(100vw - 120px) !important;
}
}

57
src/userChrome/tab_counter.css Normal file
View file

@ -0,0 +1,57 @@
/* Source from reddit users /u/BatDogOnBatMobile, /u/moko1960, and /u/It_Was_The_Other_Guy
https://teddit.net/r/FirefoxCSS/comments/s4wsww/
https://teddit.net/r/FirefoxCSS/comments/yb8tr9/ */
/* Apply this customization only on smaller screens */
@media (max-width: 700px) {
/* Show Tab Manager button even when tabs aren't overflowing -
can instead use browser.tabs.tabmanager.enabled;true as well
or skip this part if you want to retain the default behaviour */
#alltabs-button {
display: -moz-box !important;
}
/* Tab Manager button (v) tab counter */
#TabsToolbar-customization-target {
counter-reset: tabCount;
}
.tabbrowser-tab:not([pinned]) {
counter-increment: tabCount;
}
#alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-icon {
visibility: collapse !important;
}
#alltabs-button > .toolbarbutton-badge-stack {
position: relative !important;
}
#alltabs-button > .toolbarbutton-badge-stack::before {
content: counter(tabCount);
border-bottom: 1px solid var(--toolbarbutton-icon-fill);
color: var(--toolbarbutton-icon-fill);
opacity: var(--toolbarbutton-icon-fill-opacity);
position: absolute;
bottom: var(--toolbarbutton-inner-padding);
left: 50%;
transform: translateX(-50%);
padding: 0 3px;
}
/* Tab Manager menu tab counter */
#allTabsMenu-allTabsViewTabs {
counter-reset: nn_tabs 0 !important;
}
.all-tabs-button::before {
display: -moz-inline-box !important;
-moz-padding-end: 8px !important;
content: counter(nn_tabs) !important;
/*font-weight: bold !important; */
font-size: 12px !important;
margin-top: -2px !important;
margin-right: -2px !important;
}
.all-tabs-item {
counter-increment: nn_tabs !important;
}
}

45
src/userChrome/tabmenu.css
View file

@ -6,7 +6,7 @@
* the tab bar for the private-browsing-indicator (that mask icon). This * the tab bar for the private-browsing-indicator (that mask icon). This
* gives the tab bar a consistent width in both the regular and the private * gives the tab bar a consistent width in both the regular and the private
* browsing mode, so the increased width hack below looks good in both. */ * browsing mode, so the increased width hack below looks good in both. */
#titlebar { /*#titlebar {
padding-right: 30px; padding-right: 30px;
} }
hbox.private-browsing-indicator { hbox.private-browsing-indicator {
@ -14,24 +14,25 @@
right: 0px; right: 0px;
bottom: 50px; bottom: 50px;
display: block; display: block;
} }*/
/* Increase tab width, to have more space for displaying the title of the /* Increase tab width, to have more space for displaying the title of the
* website and to make the "all tabs" button show up. */ * website and to make the "all tabs" button show up. */
#tabbrowser-tabs { /*#tabbrowser-tabs {
--tab-min-width: calc(100vw - 116px) !important; --tab-min-width: calc(100vw - 116px) !important;
} }*/
/* Rotate the arrow on the "all tabs" button to point upwards, since the /* Rotate the arrow on the "all tabs" button to point upwards, since the
* tabs and searchbar were moved to the bottom. */ * tabs and searchbar were moved to the bottom. */
#alltabs-button { /*#alltabs-button {
transform: rotate(180deg) !important; transform: rotate(180deg) !important;
} }*/
/* All tabs menu: hide scroll buttons */ /* All tabs menu: hide scroll buttons */
#scrollbutton-up, #scrollbutton-down { /*#scrollbutton-up,
#scrollbutton-down {
display: none !important; display: none !important;
} }*/
/* All tabs menu: hide the search and the separator below it. */ /* All tabs menu: hide the search and the separator below it. */
#allTabsMenu-searchTabs, #allTabsMenu-searchTabs,
@ -45,27 +46,32 @@
/* Further up than appmenu, because the "all tabs" button that spawns /* Further up than appmenu, because the "all tabs" button that spawns
* this menu is above the hamburger button that spawns the regular * this menu is above the hamburger button that spawns the regular
* menu. */ * menu. */
margin-top: -360px !important; /*margin-top: -360px !important;*/
height: 320px; margin-bottom: 15px !important;
max-height: 320px; padding-left: 10px !important;
padding-right: 10px !important;
/*height: 320px;*/
/*max-height: 320px;*/
height: 333px;
max-height: 333px;
} }
#allTabsMenu-allTabsView vbox.panel-subview-body { /*#allTabsMenu-allTabsView vbox.panel-subview-body {
/* Use the whole height */ /* Use the whole height */
height: 300px !important; /*height: 300px !important;
max-height: 300px !important; /*max-height: 300px !important;
/* When messing around with tabs, it gets into a state where it does /* When messing around with tabs, it gets into a state where it does
* not use the whole height anymore, it becomes a tiny window. Removing * not use the whole height anymore, it becomes a tiny window. Removing
* this attribute fixes it. */ * this attribute fixes it. */
-moz-box-flex: initial !important; /*-moz-box-flex: initial !important;
} }*/
#allTabsMenu-allTabsView vbox.panel-subview-body:first-child { /*#allTabsMenu-allTabsView vbox.panel-subview-body:first-child {
/* the allTabsMenu has a vbox.panel-subview-body inside another one. /* the allTabsMenu has a vbox.panel-subview-body inside another one.
* With -moz-box-flex: initial, it will show a scroll bar in each, but * With -moz-box-flex: initial, it will show a scroll bar in each, but
* we only want one scrollbar. */ * we only want one scrollbar. */
overflow-y: hidden !important; /*overflow-y: hidden !important;
} }*/
#allTabsMenu-multiView box.panel-viewstack { #allTabsMenu-multiView box.panel-viewstack {
/* Use the whole height */ /* Use the whole height */
@ -75,6 +81,7 @@
#allTabsMenu-allTabsViewTabs { #allTabsMenu-allTabsViewTabs {
/* Make sure tabs with long titles don't exceed the all tabs menu */ /* Make sure tabs with long titles don't exceed the all tabs menu */
width: 0;
max-width: calc(100vw - 20px); max-width: calc(100vw - 20px);
} }
} }

9
src/userChrome/tabs_fill_available_width.css
View file

@ -1,5 +1,12 @@
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_fill_available_width.css made available under Mozilla Public License v. 2.0 /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_fill_available_width.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */ See the above repository for updates as well as full license text. */
/* Apply this customization only on smaller screens */
@media (max-width: 700px) {
/* Why 100vw? Tab closing requires width animation to end and "none" can't be animated */ /* Why 100vw? Tab closing requires width animation to end and "none" can't be animated */
.tabbrowser-tab[fadein]:not([style^="max-width"]){ max-width: 100vw !important } .tabbrowser-tab[fadein]:not([style^="max-width"]) {
max-width: 100vw !important;
}
}

4
src/userChrome/tabs_larger_min-width.css Normal file
View file

@ -0,0 +1,4 @@
/* Tab min-width resizing */
#tabbrowser-tabs .tabbrowser-tab[fadein]:not([pinned]) {
min-width: 90px !important;
}

61
src/userChrome/userChrome-desktop.css Normal file
View file

@ -0,0 +1,61 @@
/* Source files available here:
https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip
https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/
https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313
*/
/*
@import "color_variable_template.css";
@import "colors.css";
*/
@import "appMenu.css";
@import "browser.css";
@import "editBookmarkPanel.css";
@import "findbar.css";
@import "popups.before-ff-108.css";
@import "popups.css";
@import "root.css";
@import "tabmenu.css";
@import "urlbar.css";
@import "alt-browser.css";
@import "custom_rules.css";
@import "hide_tabs_scrollbuttons.css";
@import "tab_close_button_always_on_hover.css";
@import "iconized_main_menu.css";
/*
@import "round_ui_items.css";
@import "single_tab_mode.css";
@import "single_tab_mode_with_space_for_1_item.css";
@import "single_tab_mode_with_space_for_2_items.css";
@import "single_tab_mode_with_space_for_3_items.css";
@import "hide_newtab_+_new-tab_buttons.css";
@import "numbered_tabs.css";
@import "tab_counter.css";
*/
@import "new-tab-button.css";
@import "tabs_larger_min-width.css";
@import "tabs_fill_available_width.css";

61
src/userChrome/userChrome-hybrid.css Normal file
View file

@ -0,0 +1,61 @@
/* Source files available here:
https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip
https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/
https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313
*/
/*
@import "color_variable_template.css";
@import "colors.css";
*/
@import "appMenu.css";
@import "browser.css";
@import "editBookmarkPanel.css";
@import "findbar.css";
@import "popups.before-ff-108.css";
@import "popups.css";
@import "root.css";
@import "tabmenu.css";
@import "urlbar.css";
@import "alt-browser.css";
@import "custom_rules.css";
@import "hide_tabs_scrollbuttons.css";
@import "tab_close_button_always_on_hover.css";
@import "iconized_main_menu.css";
@import "round_ui_items.css";
/*
@import "single_tab_mode.css";
@import "single_tab_mode_with_space_for_1_item.css";
@import "single_tab_mode_with_space_for_2_items.css";
@import "single_tab_mode_with_space_for_3_items.css";
*/
@import "hide_newtab_+_new-tab_buttons.css";
/*
@import "numbered_tabs.css";
*/
@import "tab_counter.css";
/*
@import "new-tab-button.css";
*/
@import "tabs_larger_min-width.css";
@import "tabs_fill_available_width.css";

61
src/userChrome/userChrome-mobile.css Normal file
View file

@ -0,0 +1,61 @@
/* Source files available here:
https://gitlab.com/postmarketOS/mobile-config-firefox/-/archive/master/mobile-config-firefox-master.zip
https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/
https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313
*/
/*
@import "color_variable_template.css";
@import "colors.css";
*/
@import "appMenu.css";
@import "browser.css";
@import "editBookmarkPanel.css";
@import "findbar.css";
@import "popups.before-ff-108.css";
@import "popups.css";
@import "root.css";
@import "tabmenu.css";
@import "urlbar.css";
@import "alt-browser.css";
@import "custom_rules.css";
@import "hide_tabs_scrollbuttons.css";
@import "tab_close_button_always_on_hover.css";
@import "iconized_main_menu.css";
@import "round_ui_items.css";
/*
@import "single_tab_mode.css";
@import "single_tab_mode_with_space_for_1_item.css";
*/
@import "single_tab_mode_with_space_for_2_items.css";
/*
@import "single_tab_mode_with_space_for_3_items.css";
@import "hide_newtab_+_new-tab_buttons.css";
*/
@import "numbered_tabs.css";
@import "tab_counter.css";
/*
@import "new-tab-button.css";
@import "tabs_larger_min-width.css";
@import "tabs_fill_available_width.css";
*/