Add css files from https://forums.puri.sm/t/mobile-friendly-firefox-customizations-for-librem-5/20313
This commit is contained in:
parent
187e40b24c
commit
8a13ef15cb
GPG key ID:
E2221D5FE4656B6A
28 changed files with 1512 additions and 0 deletions
43
chrome/alt-browser.css
Normal file
43
chrome/alt-browser.css
Normal 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
65
chrome/appMenu.css
Normal file
65
chrome/appMenu.css
Normal file
|
|
@ -0,0 +1,65 @@
|
||||||
|
/* Copyright 2022 Oliver Smith
|
||||||
|
* SPDX-License-Identifier: MPL-2.0 */
|
||||||
|
|
||||||
|
@media (max-width: 700px) {
|
||||||
|
/* Spawn the menu above the navigation bar (now that we've moved it to the
|
||||||
|
* bottom). Without this, it still spawns above, but only with a small
|
||||||
|
* height. This is due to the position="bottomcenter topright" attribute in
|
||||||
|
* the HTML, which we can't override via CSS. */
|
||||||
|
#appMenu-popup {
|
||||||
|
/*margin-top: -390px !important;*/
|
||||||
|
margin-bottom: 62px !important;
|
||||||
|
padding-left: 10px !important;
|
||||||
|
padding-right: 10px !important;
|
||||||
|
/*height: 310px;*/
|
||||||
|
/*max-height: 310px;*/
|
||||||
|
height: 330px;
|
||||||
|
max-height: 330px;
|
||||||
|
}
|
||||||
|
#appMenu-protonMainView vbox.panel-subview-body {
|
||||||
|
/*height: 300px !important;*/
|
||||||
|
/*max-height: 300px !important;*/
|
||||||
|
height: 318px !important;
|
||||||
|
max-height: 318px !important;
|
||||||
|
}
|
||||||
|
#appMenu-multiView box.panel-viewstack:first-child {
|
||||||
|
/* Use the whole space in the menu, instead of slowly increasing the
|
||||||
|
* height via animation. This animation is broken anyway due to the
|
||||||
|
* above menu size hack */
|
||||||
|
height: calc(100vh - 100px) !important;
|
||||||
|
max-height: calc(100vh - 100px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Menu content
|
||||||
|
* - configure it to have most important functions for mobile
|
||||||
|
* on one page, without scrolling. (Scrolling was only possible with the
|
||||||
|
* scrollbar on the right anyway, which is awkward when expecting to be
|
||||||
|
* able to scroll with fingers.)
|
||||||
|
* - submenus are hidden, because attempting to scroll inside them with the
|
||||||
|
* finger causes firefox to segfault. This is likely due to the menu
|
||||||
|
* positioning hack above, looks like FF can't determine the height
|
||||||
|
* properly. Help with fixing this is appreciated, the bookmarks and
|
||||||
|
* history submenus would be useful. However even without the submenus,
|
||||||
|
* the history and saved bookmarks can at least be accessed conveniently
|
||||||
|
* through the navigation search.
|
||||||
|
* - fullscreen is hidden: not available in FF for android either, the
|
||||||
|
* screen is almost used completely already, causes problems with UIs
|
||||||
|
* that don't expect apps to go fullscreen (i.e. in Phosh, as soon as
|
||||||
|
* the on screen keyboard is triggered, the top and bottom bars of Phosh
|
||||||
|
* are over the FF in fullscreen) */
|
||||||
|
#appMenu-fxa-status2, /* FF login */
|
||||||
|
#appMenu-fxa-separator, /* FF login */
|
||||||
|
/*#appMenu-new-window-button2,*/
|
||||||
|
#appMenu-protonMainView toolbarseparator, /* all separators */
|
||||||
|
/*#appMenu-save-file-button2, /* Save file can be done from Print too */
|
||||||
|
#appMenu-fullscreen-button2,
|
||||||
|
#appMenu-passwords-button, /* accessible from settings */
|
||||||
|
/*#appMenu-extensions-themes-button, /* accessible from settings */
|
||||||
|
#appMenu-bookmarks-button, /* submenu */
|
||||||
|
/*#appMenu-history-button, /* submenu */
|
||||||
|
/*#appMenu-more-button2, /* submenu */
|
||||||
|
/*#appMenu-help-button2, /* submenu */
|
||||||
|
.subviewbutton[shortcut]::after { /* menu shortcuts ("Ctrl+T" etc.) */
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
28
chrome/browser.css
Normal file
28
chrome/browser.css
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
/* 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
257
chrome/color_variable_template.css
Normal file
257
chrome/color_variable_template.css
Normal file
|
|
@ -0,0 +1,257 @@
|
||||||
|
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/color_variable_template.css made available under Mozilla Public License v. 2.0
|
||||||
|
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 */
|
||||||
|
:root {
|
||||||
|
/* Popup panels */
|
||||||
|
--arrowpanel-background: black !important;
|
||||||
|
--arrowpanel-border-color: #dc8add !important;
|
||||||
|
--arrowpanel-color: #dc8add !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 */
|
||||||
|
--lwt-accent-color: #dc8add !important;
|
||||||
|
--lwt-accent-color-inactive: #e8b1e8 !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 */
|
||||||
|
--tab-selected-bgcolor: #dc8add !important;
|
||||||
|
|
||||||
|
/* tabs with any other theme */
|
||||||
|
--lwt-text-color: white !important;
|
||||||
|
--lwt-selected-tab-background-color: #dc8add !important;
|
||||||
|
|
||||||
|
/* toolbar area */
|
||||||
|
/*
|
||||||
|
--toolbarbutton-icon-fill: #dc8add !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 */
|
||||||
|
--toolbar-field-border-color: #dc8add !important;
|
||||||
|
--toolbar-field-focus-border-color: #dc8add !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 */
|
||||||
|
--lwt-toolbar-field-background-color: #dc8add !important;
|
||||||
|
--lwt-toolbar-field-focus: white !important;
|
||||||
|
--lwt-toolbar-field-color: white !important;
|
||||||
|
--lwt-toolbar-field-focus-color: white !important;
|
||||||
|
|
||||||
|
/* urlbar Firefox 92+ */
|
||||||
|
--toolbar-field-background-color: #dc8add !important;
|
||||||
|
--toolbar-field-focus-background-color: #dc8add !important;
|
||||||
|
--toolbar-field-icon-fill-attention: #dc8add !important;
|
||||||
|
--toolbar-field-color: white !important;
|
||||||
|
--toolbar-field-focus-color: white !important;
|
||||||
|
|
||||||
|
/* sidebar - note the sidebar-box rule for the header-area */
|
||||||
|
--lwt-sidebar-background-color: black !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,
|
||||||
|
also fallback color for border around selected tab */
|
||||||
|
#navigator-toolbox {
|
||||||
|
--lwt-tabs-border-color: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Line above tabs */
|
||||||
|
#tabbrowser-tabs {
|
||||||
|
--lwt-tab-line-color: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* the header-area of sidebar needs this to work */
|
||||||
|
#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
chrome/colors.css
Normal file
154
chrome/colors.css
Normal 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
chrome/custom_rules.css
Normal file
74
chrome/custom_rules.css
Normal 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
53
chrome/editBookmarkPanel.css
Normal file
53
chrome/editBookmarkPanel.css
Normal file
|
|
@ -0,0 +1,53 @@
|
||||||
|
/* Copyright 2022 Oliver Smith
|
||||||
|
* SPDX-License-Identifier: MPL-2.0 */
|
||||||
|
|
||||||
|
@media (max-width: 700px) {
|
||||||
|
/* The only way I (ollieparanoid) found to make this not glitchy, was to
|
||||||
|
* reduce the bookmark panel to the minimum amount of useful controls and
|
||||||
|
* hardcode width and height. Patches to improve this welcome, but make
|
||||||
|
* sure that you don't introduce new UI glitches by doing extensive
|
||||||
|
* testing. */
|
||||||
|
|
||||||
|
#editBookmarkPanel {
|
||||||
|
margin-top: -390px !important;
|
||||||
|
height: 200px;
|
||||||
|
max-height: 200px;
|
||||||
|
max-width: calc(100vw - 100px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#editBookmarkPanel box.panel-header,
|
||||||
|
#editBookmarkHeaderSeparator {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#editBookmarkPanelContent {
|
||||||
|
max-width: 250px !important;
|
||||||
|
width: 250px !important;
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide the screenshot and the line below it. The page is right there when
|
||||||
|
* you bring up the menu, no need for a screenshot. Also it has a glitch
|
||||||
|
* when taking the screenshot in mobile portrait view, half the screenshot
|
||||||
|
* is just black. Let's rather use the space to edit the bookmark
|
||||||
|
* information. */
|
||||||
|
#editBookmarkPanelInfoArea,
|
||||||
|
#editBookmarkSeparator {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#editBMPanel_folderRow,
|
||||||
|
.editBMPanel_folderRow,
|
||||||
|
#editBMPanel_tagsRow,
|
||||||
|
.editBMPanel_tagsRow {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#editBookmarkPanelBottomButtons {
|
||||||
|
width: 250px !important;
|
||||||
|
min-width: 250px !important;
|
||||||
|
padding: 0px !important;
|
||||||
|
justify-content: flex-start !important;
|
||||||
|
margin: 0px 0px 20px 0px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
35
chrome/findbar.css
Normal file
35
chrome/findbar.css
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
/* Copyright 2022 Oliver Smith
|
||||||
|
* SPDX-License-Identifier: MPL-2.0 */
|
||||||
|
|
||||||
|
@media (max-width: 700px) {
|
||||||
|
.findbar-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
/*height: 150px !important;*/
|
||||||
|
height: 40px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.findbar-textbox {
|
||||||
|
/* Overwrite fixed size, so the X on the right shows up */
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.findbar-container checkbox {
|
||||||
|
/* Add space around the buttons, looks nicer and makes it easier to hit
|
||||||
|
* them with the finger. */
|
||||||
|
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
chrome/hide_newtab_+_new-tab_buttons.css
Normal file
10
chrome/hide_newtab_+_new-tab_buttons.css
Normal 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
67
chrome/hide_tabs_scrollbuttons.css
Normal file
67
chrome/hide_tabs_scrollbuttons.css
Normal file
|
|
@ -0,0 +1,67 @@
|
||||||
|
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/hide_tabs_scrollbuttons.css made available under Mozilla Public License v. 2.0
|
||||||
|
See the above repository for updates as well as full license text. */
|
||||||
|
|
||||||
|
/* This should hide tabs scrollbuttons in a manner that preserves the ability to move tab strip when reordering tabs */
|
||||||
|
|
||||||
|
#tabbrowser-arrowscrollbox {
|
||||||
|
--uc-compat-scrollbutton-margin: 1px; /* compatibility for non_floating_sharp_tabs.css */
|
||||||
|
--uc-scrollbutton-up-background: linear-gradient(-90deg,transparent,var(--lwt-accent-color) 35%);
|
||||||
|
--uc-scrollbutton-down-background: linear-gradient(90deg,transparent,var(--lwt-accent-color) 35%);
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabbrowser-tabs:not([movingtab]) {
|
||||||
|
--uc-scroll-visibility: hidden;
|
||||||
|
}
|
||||||
|
#tabbrowser-tabs[overflow] {
|
||||||
|
--uc-scrollbox-base-margin: -31px;
|
||||||
|
--uc-scrollbox-margin: calc(var(--uc-scrollbox-base-margin) + var(--tab-shadow-max-size));
|
||||||
|
}
|
||||||
|
:root[uidensity="compact"] #tabbrowser-tabs[overflow] {
|
||||||
|
--uc-scrollbox-base-margin: -25px;
|
||||||
|
}
|
||||||
|
#tabbrowser-arrowscrollbox:not([scrolledtostart="true"]) {
|
||||||
|
--uc-scrollbox-overflow-start-margin: -1px;
|
||||||
|
}
|
||||||
|
#scrollbutton-up ~ spacer {
|
||||||
|
visibility: visible !important;
|
||||||
|
}
|
||||||
|
spacer[part="overflow-start-indicator"] {
|
||||||
|
-moz-box-ordinal-group: 0; /* Fx < 112 compatibility */
|
||||||
|
order: -1;
|
||||||
|
margin-inline-start: var(--uc-scrollbox-overflow-start-margin,-0.5px) !important;
|
||||||
|
}
|
||||||
|
spacer[part="overflow-end-indicator"] {
|
||||||
|
-moz-box-ordinal-group: 2; /* Fx < 112 compatibility */
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#scrollbutton-down[disabled="true"] > .toolbarbutton-icon,
|
||||||
|
#scrollbutton-up[disabled="true"] > .toolbarbutton-icon {
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
#scrollbutton-up,
|
||||||
|
#scrollbutton-down {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
visibility: var(--uc-scroll-visibility,visible);
|
||||||
|
background-clip: border-box !important;
|
||||||
|
background-origin: initial !important;
|
||||||
|
background-repeat: no-repeat !important;
|
||||||
|
opacity: 1 !important;
|
||||||
|
}
|
||||||
|
#scrollbutton-up {
|
||||||
|
margin-inline-start: calc(0px - var(--tab-shadow-max-size,0px)) !important;
|
||||||
|
background-image: var(--uc-scrollbutton-up-background);
|
||||||
|
}
|
||||||
|
#scrollbutton-down {
|
||||||
|
margin-inline-end: calc(0px - var(--tab-shadow-max-size,0px)) !important;
|
||||||
|
background-image: var(--uc-scrollbutton-down-background);
|
||||||
|
}
|
||||||
|
.scrollbox-clip {
|
||||||
|
margin-inline: var(--uc-scrollbox-margin,0px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Need to reset some things for other scrollboxes */
|
||||||
|
.menupopup-arrowscrollbox {
|
||||||
|
--tab-shadow-max-size: 0;
|
||||||
|
}
|
||||||
75
chrome/iconized_main_menu.css
Normal file
75
chrome/iconized_main_menu.css
Normal file
|
|
@ -0,0 +1,75 @@
|
||||||
|
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/iconized_main_menu.css made available under Mozilla Public License v. 2.0
|
||||||
|
See the above repository for updates as well as full license text. */
|
||||||
|
|
||||||
|
/* Adds icons to main menu items which were removed in Proton */
|
||||||
|
#appMenu-fxa-status2[fxastatus] > toolbarbutton::before,
|
||||||
|
#appMenu-protonMainView > .panel-subview-body > toolbarbutton > image {
|
||||||
|
fill: currentColor;
|
||||||
|
-moz-context-properties: fill;
|
||||||
|
margin-inline: 0 8px !important;
|
||||||
|
}
|
||||||
|
#appMenu-new-tab-button2 {
|
||||||
|
list-style-image: url("chrome://browser/skin/new-tab.svg");
|
||||||
|
}
|
||||||
|
#appMenu-new-window-button2 {
|
||||||
|
list-style-image: url("chrome://browser/skin/window.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-history-button {
|
||||||
|
list-style-image: url("chrome://browser/skin/history.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 */
|
||||||
|
#appMenu-fxa-status2[fxastatus] > toolbarbutton::before {
|
||||||
|
display: flex;
|
||||||
|
content: "";
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
background-image: var(--avatar-image-url);
|
||||||
|
}
|
||||||
|
/* Add somewhat hacky separator to zoom controls so it looks consistent */
|
||||||
|
#appMenu-protonMainView > .panel-subview-body::after {
|
||||||
|
content: "";
|
||||||
|
display: flex;
|
||||||
|
border-bottom: 1px solid var(--panel-separator-color);
|
||||||
|
margin: var(--panel-separator-margin);
|
||||||
|
}
|
||||||
|
|
||||||
|
#appMenu-find-button2 ~ * {
|
||||||
|
-moz-box-ordinal-group: 2; /* Fx < 112 compatibility */
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
14
chrome/new-tab-button.css
Normal file
14
chrome/new-tab-button.css
Normal 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
43
chrome/numbered_tabs.css
Normal file
43
chrome/numbered_tabs.css
Normal file
|
|
@ -0,0 +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
|
||||||
|
See the above repository for updates as well as full license text. */
|
||||||
|
|
||||||
|
/* Apply this customization only on smaller screens */
|
||||||
|
@media (max-width: 700px) {
|
||||||
|
|
||||||
|
/* Show a number before tab text */
|
||||||
|
/* 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
15
chrome/popups.before-ff-108.css
Normal file
15
chrome/popups.before-ff-108.css
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
/* Copyright 2022 Oliver Smith
|
||||||
|
* SPDX-License-Identifier: MPL-2.0 */
|
||||||
|
|
||||||
|
@media (max-width: 700px) {
|
||||||
|
/* Hack to prevent popups from flickering around. It looks like e.g. the
|
||||||
|
* editBookmarkPanel has two heights otherwise, and draws one frame with a
|
||||||
|
* short height and one frame with the proper one. */
|
||||||
|
#mainPopupSet {
|
||||||
|
position: fixed !important;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
right: 0px;
|
||||||
|
bottom: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
71
chrome/popups.css
Normal file
71
chrome/popups.css
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
/* Copyright 2022 Oliver Smith
|
||||||
|
* SPDX-License-Identifier: MPL-2.0 */
|
||||||
|
|
||||||
|
@media (max-width: 700px) {
|
||||||
|
/* Now that the navbar is at the bottom, we need to set an offset to have
|
||||||
|
* the notifications (like the one for installing addons) displayed
|
||||||
|
* on-screen. */
|
||||||
|
#notification-popup {
|
||||||
|
/*margin-left: -200px !important;*/
|
||||||
|
margin-top: -500px !important;
|
||||||
|
height: calc(100vh - 250px) !important;
|
||||||
|
max-width: 100vw !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#downloadsPanel-mainView {
|
||||||
|
max-width: calc(100vw - 10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Menu that appears when long-pressing the back-button */
|
||||||
|
#backForwardMenu {
|
||||||
|
margin-top: -250px;
|
||||||
|
height: 200px;
|
||||||
|
min-height: 200px;
|
||||||
|
max-width: 100vw !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide some context menu items */
|
||||||
|
#context-inspect,
|
||||||
|
#context-inspect-a11y,
|
||||||
|
#context-savelinktopocket,
|
||||||
|
#context-searchselect,
|
||||||
|
#context-sendlinktodevice,
|
||||||
|
#context-viewpartialsource-selection,
|
||||||
|
#inspect-separator {
|
||||||
|
display: none !important
|
||||||
|
}
|
||||||
|
|
||||||
|
/* fix flickering of the protections, permissions,
|
||||||
|
* widget overflow and identity popups */
|
||||||
|
#protections-popup,
|
||||||
|
#permission-popup,
|
||||||
|
#widget-overflow,
|
||||||
|
#identity-popup {
|
||||||
|
max-width: 100vw !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* fix the protections popup getting
|
||||||
|
* too wide, making controls naccessible */
|
||||||
|
#protections-popup-mainView {
|
||||||
|
min-width: 100vw !important;
|
||||||
|
max-width: 100vw !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* fix flicker on extension menus.
|
||||||
|
* The compromise is that the overflow menu always use
|
||||||
|
* all available height.
|
||||||
|
* The -80px is here to prevent covering the main bars */
|
||||||
|
#widget-overflow,
|
||||||
|
#widget-overflow-mainView {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
7
chrome/root.css
Normal file
7
chrome/root.css
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
/* Copyright 2022 Oliver Smith
|
||||||
|
* SPDX-License-Identifier: MPL-2.0 */
|
||||||
|
|
||||||
|
/* Reduce minimum window width */
|
||||||
|
:root {
|
||||||
|
min-width: 300px !important;
|
||||||
|
}
|
||||||
95
chrome/round_ui_items.css
Normal file
95
chrome/round_ui_items.css
Normal file
|
|
@ -0,0 +1,95 @@
|
||||||
|
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/round_ui_items.css made available under Mozilla Public License v. 2.0
|
||||||
|
See the above repository for updates as well as full license text. */
|
||||||
|
|
||||||
|
/* Make bunch of things in the main UI round */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--toolbarbutton-border-radius: 12px !important;
|
||||||
|
--tab-border-radius: 14px !important;
|
||||||
|
}
|
||||||
|
#urlbar-input-container > box:hover,
|
||||||
|
#urlbar-input-container > box[open],
|
||||||
|
#main-menubar > menu,
|
||||||
|
.titlebar-button:hover,
|
||||||
|
#scrollbutton-up,
|
||||||
|
#scrollbutton-down,
|
||||||
|
.tab-close-button,
|
||||||
|
.close-icon > image,
|
||||||
|
#page-action-buttons > :hover,
|
||||||
|
.panel-arrowcontent,
|
||||||
|
.urlbarView-row-inner,
|
||||||
|
.search-one-offs button,
|
||||||
|
.subviewbutton-back,
|
||||||
|
.toolbaritem-combined-buttons > toolbarbutton,
|
||||||
|
#PopupSearchAutoComplete,
|
||||||
|
menupopup {
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
.tab-background {
|
||||||
|
border-radius: 14px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-arrowcontent {
|
||||||
|
margin-inline-end: 0 !important;
|
||||||
|
}
|
||||||
|
.panel-arrow {
|
||||||
|
margin-inline: 17px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
menupopup {
|
||||||
|
-moz-appearance: none !important;
|
||||||
|
overflow: -moz-hidden-unscrollable !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbrowser-tab[selected]::after,
|
||||||
|
.tabbrowser-tab[beforeselected-visible]::after {
|
||||||
|
border-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-bar {
|
||||||
|
box-shadow: none !important;
|
||||||
|
margin-top: 3px;
|
||||||
|
}
|
||||||
|
.tab-line {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-background[selected] {
|
||||||
|
border-top-width: 3px !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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*.urlbar-icon,
|
||||||
|
toolbar toolbarbutton:not(#back-button):not(.bookmark-item):not(.titlebar-button) > .toolbarbutton-icon {
|
||||||
|
border-radius: 12px !important;
|
||||||
|
}*/
|
||||||
|
|
||||||
|
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
chrome/single_tab_mode.css
Normal file
21
chrome/single_tab_mode.css
Normal 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
chrome/single_tab_mode_with_space_for_1_item.css
Normal file
20
chrome/single_tab_mode_with_space_for_1_item.css
Normal 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
chrome/single_tab_mode_with_space_for_2_items.css
Normal file
20
chrome/single_tab_mode_with_space_for_2_items.css
Normal 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
chrome/single_tab_mode_with_space_for_3_items.css
Normal file
20
chrome/single_tab_mode_with_space_for_3_items.css
Normal 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
11
chrome/tab_close_button_always_on_hover.css
Normal file
11
chrome/tab_close_button_always_on_hover.css
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tab_close_button_always_on_hover.css made available under Mozilla Public License v. 2.0
|
||||||
|
See the above repository for updates as well as full license text. */
|
||||||
|
|
||||||
|
/* Always show tab close button on hover and never otherwise */
|
||||||
|
.tabbrowser-tab .tab-close-button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.tabbrowser-tab:not([pinned]):hover .tab-close-button {
|
||||||
|
display: flex !important;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
57
chrome/tab_counter.css
Normal file
57
chrome/tab_counter.css
Normal 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
87
chrome/tabmenu.css
Normal file
87
chrome/tabmenu.css
Normal file
|
|
@ -0,0 +1,87 @@
|
||||||
|
/* Copyright 2022 Peter Mack, Oliver Smith
|
||||||
|
* SPDX-License-Identifier: MPL-2.0 */
|
||||||
|
|
||||||
|
@media (max-width: 700px) {
|
||||||
|
/* Even when not in private browsing mode, reserve space to the right of
|
||||||
|
* 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
|
||||||
|
* browsing mode, so the increased width hack below looks good in both. */
|
||||||
|
/*#titlebar {
|
||||||
|
padding-right: 30px;
|
||||||
|
}
|
||||||
|
hbox.private-browsing-indicator {
|
||||||
|
position: fixed !important;
|
||||||
|
right: 0px;
|
||||||
|
bottom: 50px;
|
||||||
|
display: block;
|
||||||
|
}*/
|
||||||
|
|
||||||
|
/* Increase tab width, to have more space for displaying the title of the
|
||||||
|
* website and to make the "all tabs" button show up. */
|
||||||
|
/*#tabbrowser-tabs {
|
||||||
|
--tab-min-width: calc(100vw - 116px) !important;
|
||||||
|
}*/
|
||||||
|
|
||||||
|
/* Rotate the arrow on the "all tabs" button to point upwards, since the
|
||||||
|
* tabs and searchbar were moved to the bottom. */
|
||||||
|
/*#alltabs-button {
|
||||||
|
transform: rotate(180deg) !important;
|
||||||
|
}*/
|
||||||
|
|
||||||
|
/* All tabs menu: hide scroll buttons */
|
||||||
|
/*#scrollbutton-up,
|
||||||
|
#scrollbutton-down {
|
||||||
|
display: none !important;
|
||||||
|
}*/
|
||||||
|
|
||||||
|
/* All tabs menu: hide the search and the separator below it. */
|
||||||
|
#allTabsMenu-searchTabs,
|
||||||
|
#allTabsMenu-tabsSeparator {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Similar hack to what's in appMenu.css to properly spawn the "all tabs"
|
||||||
|
* popup above the navigation menu */
|
||||||
|
#customizationui-widget-panel {
|
||||||
|
/* Further up than appmenu, because the "all tabs" button that spawns
|
||||||
|
* this menu is above the hamburger button that spawns the regular
|
||||||
|
* menu. */
|
||||||
|
/*margin-top: -360px !important;*/
|
||||||
|
margin-bottom: 15px !important;
|
||||||
|
padding-left: 10px !important;
|
||||||
|
padding-right: 10px !important;
|
||||||
|
/*height: 320px;*/
|
||||||
|
/*max-height: 320px;*/
|
||||||
|
height: 333px;
|
||||||
|
max-height: 333px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*#allTabsMenu-allTabsView vbox.panel-subview-body {
|
||||||
|
/* Use the whole height */
|
||||||
|
/*height: 300px !important;
|
||||||
|
/*max-height: 300px !important;
|
||||||
|
/* 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
|
||||||
|
* this attribute fixes it. */
|
||||||
|
/*-moz-box-flex: initial !important;
|
||||||
|
}*/
|
||||||
|
|
||||||
|
/*#allTabsMenu-allTabsView vbox.panel-subview-body:first-child {
|
||||||
|
/* 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
|
||||||
|
* we only want one scrollbar. */
|
||||||
|
/*overflow-y: hidden !important;
|
||||||
|
}*/
|
||||||
|
|
||||||
|
#allTabsMenu-multiView box.panel-viewstack {
|
||||||
|
/* Use the whole height */
|
||||||
|
height: calc(100vh - 100px) !important;
|
||||||
|
max-height: calc(100vh - 100px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#allTabsMenu-allTabsViewTabs {
|
||||||
|
/* Make sure tabs with long titles don't exceed the all tabs menu */
|
||||||
|
width: 0;
|
||||||
|
max-width: calc(100vw - 20px);
|
||||||
|
}
|
||||||
|
}
|
||||||
12
chrome/tabs_fill_available_width.css
Normal file
12
chrome/tabs_fill_available_width.css
Normal file
|
|
@ -0,0 +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
|
||||||
|
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 */
|
||||||
|
.tabbrowser-tab[fadein]:not([style^="max-width"]) {
|
||||||
|
max-width: 100vw !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
4
chrome/tabs_larger_min-width.css
Normal file
4
chrome/tabs_larger_min-width.css
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
/* Tab min-width resizing */
|
||||||
|
#tabbrowser-tabs .tabbrowser-tab[fadein]:not([pinned]) {
|
||||||
|
min-width: 90px !important;
|
||||||
|
}
|
||||||
93
chrome/urlbar.css
Normal file
93
chrome/urlbar.css
Normal file
|
|
@ -0,0 +1,93 @@
|
||||||
|
/* Copyright 2022 Oliver Smith
|
||||||
|
* SPDX-License-Identifier: MPL-2.0 */
|
||||||
|
|
||||||
|
/* Reduce minimum window width */
|
||||||
|
#urlbar-container {
|
||||||
|
min-width: 150px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 700px) {
|
||||||
|
/* Remove various buttons left and right of the URL bar:
|
||||||
|
- forward-button: also reachable via longpress of back button
|
||||||
|
- home-button: not important enough
|
||||||
|
- customizableui-special-spring: empty space
|
||||||
|
- library-button: also reachable via PanelUI-menu-button
|
||||||
|
- sidebar-button: not useful on mobile (we try to gain horizontal space)
|
||||||
|
- fxa-toolbar-menu-button: firefox cloud stuff, also reachable via
|
||||||
|
#PanelUI-menu-button
|
||||||
|
*/
|
||||||
|
/* #back-button */
|
||||||
|
#forward-button,
|
||||||
|
/* #reload-button */
|
||||||
|
#home-button,
|
||||||
|
#customizableui-special-spring1,
|
||||||
|
/* (urlbar) */
|
||||||
|
#customizableui-special-spring2,
|
||||||
|
#library-button,
|
||||||
|
#sidebar-button,
|
||||||
|
#fxa-toolbar-menu-button
|
||||||
|
/* #PanelUI-menu-button */ {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#urlbar {
|
||||||
|
padding: 0px 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Smaller font: show more of the URL */
|
||||||
|
#urlbar-input {
|
||||||
|
font-size: 9pt !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Focused urlbar: hide all icons around it, so we have more space to edit the URL */
|
||||||
|
#urlbar[focused] #remote-control-box,
|
||||||
|
#urlbar[focused] #identity-box,
|
||||||
|
#urlbar[focused] #tracking-protection-icon-container,
|
||||||
|
/* #urlbar-input */
|
||||||
|
#urlbar[focused] #reader-mode-button,
|
||||||
|
#urlbar[focused] #page-action-buttons {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Label of "identity icons", e.g. firefox specific pages look weird
|
||||||
|
* when ellipsed, e.g. "F..x" instead of "Firefox". So just hide this
|
||||||
|
* label. The icon itself is still visible. */
|
||||||
|
#identity-icon-label {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Move urlbar results to cover the whole displayed website, instead of
|
||||||
|
* being below the urlbar. */
|
||||||
|
.urlbarView {
|
||||||
|
position: fixed !important;
|
||||||
|
inset: 0px 0px 84px 0px;
|
||||||
|
width: 100% !important;
|
||||||
|
|
||||||
|
background: var(--arrowpanel-background);
|
||||||
|
|
||||||
|
margin: 0px !important;
|
||||||
|
margin-inline: 0px !important;
|
||||||
|
border-inline: 0px !important;
|
||||||
|
|
||||||
|
overflow-y: auto !important;
|
||||||
|
overflow-x: none !important;
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Bookmarks toolbar. Firefox shows it for some reason when opening a
|
||||||
|
* private browsing window, even if it is not enabled in the normal
|
||||||
|
* window view. Hide it for mobile, it eats precious space and can't be
|
||||||
|
* organized properly on mobile anyway. Using the searchbar to filter
|
||||||
|
* through bookmarks is much more efficient. */
|
||||||
|
#PersonalToolbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Even though amazon is removed as search engine in policies.json, it gets
|
||||||
|
* installed when FF starts for the first time. Hide the button in "This time,
|
||||||
|
* search with" inside the urlbar. Match localizations like Amazon.de with this
|
||||||
|
* regex. */
|
||||||
|
button[id^='urlbar-engine-one-off-item-Amazon'] {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
61
chrome/userChrome.css
Normal file
61
chrome/userChrome.css
Normal 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";
|
||||||
|
*/
|
||||||
Loading…
Reference in a new issue