mirror of
https://codeberg.org/claui/mobile-config-firefox.git
synced 2025-11-03 20:15:56 +00:00
Add @user0’s contributions as of 2023-05-21
This commit is contained in:
@user0
Claudia Pellegrino
parent
e40b13098d
commit
ad06da4868
26 changed files with 1180 additions and 180 deletions
43
src/userChrome/alt-browser.css
Normal file
43
src/userChrome/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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -7,13 +7,20 @@
|
|||
* 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;
|
||||
height: 310px;
|
||||
max-height: 310px;
|
||||
/*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: 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
|
||||
|
|
@ -42,16 +49,16 @@
|
|||
* are over the FF in fullscreen) */
|
||||
#appMenu-fxa-status2, /* FF login */
|
||||
#appMenu-fxa-separator, /* FF login */
|
||||
#appMenu-new-window-button2,
|
||||
/*#appMenu-new-window-button2,*/
|
||||
#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-passwords-button, /* accessible from settings */
|
||||
#appMenu-extensions-themes-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 */
|
||||
/*#appMenu-history-button, /* submenu */
|
||||
/*#appMenu-more-button2, /* submenu */
|
||||
/*#appMenu-help-button2, /* submenu */
|
||||
.subviewbutton[shortcut]::after { /* menu shortcuts ("Ctrl+T" etc.) */
|
||||
display: none !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,4 +15,14 @@
|
|||
#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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,47 +2,256 @@
|
|||
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: olive !important;
|
||||
--arrowpanel-border-color: green !important;
|
||||
--arrowpanel-color: cyan !important;
|
||||
--arrowpanel-dimmed: rgba(0,0,0,0.4) !important;
|
||||
/* window and toolbar background */
|
||||
--lwt-accent-color: red !important;
|
||||
--lwt-accent-color-inactive: green !important;
|
||||
--toolbar-bgcolor: rgba(0,0,0,0.4) !important;
|
||||
/* tabs with system theme - text is not controlled by variable */
|
||||
--tab-selected-bgcolor: powderblue !important;
|
||||
/* tabs with any other theme */
|
||||
--lwt-text-color: cyan !important;
|
||||
--lwt-selected-tab-background-color: cornflowerblue !important;
|
||||
/* toolbar area */
|
||||
--toolbarbutton-icon-fill: white !important;
|
||||
--lwt-toolbarbutton-hover-background: orange !important;
|
||||
--lwt-toolbarbutton-active-background: red !important;
|
||||
/* urlbar */
|
||||
--toolbar-field-border-color: green !important;
|
||||
--toolbar-field-focus-border-color: pink !important;
|
||||
--urlbar-popup-url-color: cyan !important;
|
||||
/* urlbar Firefox < 92 */
|
||||
--lwt-toolbar-field-background-color: olive !important;
|
||||
--lwt-toolbar-field-focus: grey !important;
|
||||
--lwt-toolbar-field-color: red !important;
|
||||
--lwt-toolbar-field-focus-color: white !important;
|
||||
/* urlbar Firefox 92+ */
|
||||
--toolbar-field-background-color: olive !important;
|
||||
--toolbar-field-focus-background-color: grey !important;
|
||||
--toolbar-field-color: red !important;
|
||||
--toolbar-field-focus-color: white !important;
|
||||
/* sidebar - note the sidebar-box rule for the header-area */
|
||||
--lwt-sidebar-background-color: purple !important;
|
||||
--lwt-sidebar-text-color: yellow !important;
|
||||
: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: cyan !important; }
|
||||
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: white !important; }
|
||||
#tabbrowser-tabs {
|
||||
--lwt-tab-line-color: none !important;
|
||||
}
|
||||
|
||||
/* 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
154
src/userChrome/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
src/userChrome/custom_rules.css
Normal file
74
src/userChrome/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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -6,7 +6,8 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
height: 150px !important;
|
||||
/*height: 150px !important;*/
|
||||
height: 40px !important;
|
||||
}
|
||||
|
||||
.findbar-textbox {
|
||||
|
|
@ -19,4 +20,16 @@
|
|||
* 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
src/userChrome/hide_newtab_+_new-tab_buttons.css
Normal file
10
src/userChrome/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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -3,63 +3,65 @@ 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-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: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));
|
||||
#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;
|
||||
:root[uidensity="compact"] #tabbrowser-tabs[overflow] {
|
||||
--uc-scrollbox-base-margin: -25px;
|
||||
}
|
||||
#tabbrowser-arrowscrollbox:not([scrolledtostart="true"]){
|
||||
--uc-scrollbox-overflow-start-margin: -1px;
|
||||
#tabbrowser-arrowscrollbox:not([scrolledtostart="true"]) {
|
||||
--uc-scrollbox-overflow-start-margin: -1px;
|
||||
}
|
||||
#scrollbutton-up ~ spacer{
|
||||
visibility: visible !important;
|
||||
#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-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;
|
||||
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[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-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-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);
|
||||
#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);
|
||||
}
|
||||
.scrollbox-clip{ margin-inline: var(--uc-scrollbox-margin,0px); }
|
||||
|
||||
/* Need to reset some things for other scrollboxes */
|
||||
.menupopup-arrowscrollbox{
|
||||
--tab-shadow-max-size: 0;
|
||||
.menupopup-arrowscrollbox {
|
||||
--tab-shadow-max-size: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,43 +3,73 @@ 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-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");
|
||||
}
|
||||
#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)
|
||||
#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-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;
|
||||
}
|
||||
#appMenu-find-button2 ~ * {
|
||||
-moz-box-ordinal-group: 2; /* Fx < 112 compatibility */
|
||||
order: 2;
|
||||
}
|
||||
|
|
|
|||
14
src/userChrome/new-tab-button.css
Normal file
14
src/userChrome/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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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
|
||||
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 */
|
||||
.tab-text::before{ content: counter(nth-tab) " "; counter-increment: nth-tab }
|
||||
/* 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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,8 +6,10 @@
|
|||
* the notifications (like the one for installing addons) displayed
|
||||
* on-screen. */
|
||||
#notification-popup {
|
||||
margin-left: -200px !important;
|
||||
/*margin-left: -200px !important;*/
|
||||
margin-top: -500px !important;
|
||||
height: calc(100vh - 250px) !important;
|
||||
max-width: 100vw !important;
|
||||
}
|
||||
|
||||
#downloadsPanel-mainView {
|
||||
|
|
@ -42,8 +44,8 @@
|
|||
max-width: 100vw !important;
|
||||
}
|
||||
|
||||
/* fix the protections popup gettting
|
||||
* too wide, making controls unaccessible */
|
||||
/* fix the protections popup getting
|
||||
* too wide, making controls naccessible */
|
||||
#protections-popup-mainView {
|
||||
min-width: 100vw !important;
|
||||
max-width: 100vw !important;
|
||||
|
|
@ -57,4 +59,13 @@
|
|||
#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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,10 +3,13 @@ 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: 24px !important }
|
||||
:root {
|
||||
--toolbarbutton-border-radius: 12px !important;
|
||||
--tab-border-radius: 14px !important;
|
||||
}
|
||||
#urlbar-input-container > box:hover,
|
||||
#urlbar-input-container > box[open],
|
||||
#main-menubar > menu,
|
||||
#main-menubar > menu,
|
||||
.titlebar-button:hover,
|
||||
#scrollbutton-up,
|
||||
#scrollbutton-down,
|
||||
|
|
@ -19,29 +22,74 @@ See the above repository for updates as well as full license text. */
|
|||
.subviewbutton-back,
|
||||
.toolbaritem-combined-buttons > toolbarbutton,
|
||||
#PopupSearchAutoComplete,
|
||||
menupopup{ border-radius: 18px }
|
||||
menupopup {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
button,
|
||||
.tab-background{ border-radius: 30px !important; }
|
||||
.tab-background {
|
||||
border-radius: 14px !important;
|
||||
}
|
||||
|
||||
.panel-arrowcontent{ margin-inline-end: 0 !important; }
|
||||
.panel-arrow{ margin-inline: 17px !important; }
|
||||
.panel-arrowcontent {
|
||||
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[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: 2px !important;
|
||||
border-top-color: var(--lwt-tab-line-color) !important;
|
||||
.tabbrowser-tab[beforeselected-visible]::after {
|
||||
border-color: transparent !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: 0px !important; clip-path: circle() }
|
||||
#nav-bar {
|
||||
box-shadow: none !important;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.tab-line {
|
||||
display: none;
|
||||
}
|
||||
|
||||
menugroup:hover > menuitem{ clip-path: circle() }
|
||||
.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
src/userChrome/single_tab_mode.css
Normal file
21
src/userChrome/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
src/userChrome/single_tab_mode_with_space_for_1_item.css
Normal file
20
src/userChrome/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
src/userChrome/single_tab_mode_with_space_for_2_items.css
Normal file
20
src/userChrome/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
src/userChrome/single_tab_mode_with_space_for_3_items.css
Normal file
20
src/userChrome/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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -2,10 +2,10 @@
|
|||
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 .tab-close-button {
|
||||
display: none;
|
||||
}
|
||||
.tabbrowser-tab:not([pinned]):hover .tab-close-button {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
}
|
||||
.tabbrowser-tab:not([pinned]):hover .tab-close-button{
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
}
|
||||
57
src/userChrome/tab_counter.css
Normal file
57
src/userChrome/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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
* 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 {
|
||||
/*#titlebar {
|
||||
padding-right: 30px;
|
||||
}
|
||||
hbox.private-browsing-indicator {
|
||||
|
|
@ -14,24 +14,25 @@
|
|||
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 {
|
||||
/*#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 {
|
||||
/*#alltabs-button {
|
||||
transform: rotate(180deg) !important;
|
||||
}
|
||||
}*/
|
||||
|
||||
/* All tabs menu: hide scroll buttons */
|
||||
#scrollbutton-up, #scrollbutton-down {
|
||||
/*#scrollbutton-up,
|
||||
#scrollbutton-down {
|
||||
display: none !important;
|
||||
}
|
||||
}*/
|
||||
|
||||
/* All tabs menu: hide the search and the separator below it. */
|
||||
#allTabsMenu-searchTabs,
|
||||
|
|
@ -45,27 +46,32 @@
|
|||
/* 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;
|
||||
height: 320px;
|
||||
max-height: 320px;
|
||||
/*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 {
|
||||
/*#allTabsMenu-allTabsView vbox.panel-subview-body {
|
||||
/* Use the whole height */
|
||||
height: 300px !important;
|
||||
max-height: 300px !important;
|
||||
/*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;
|
||||
}
|
||||
/*-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.
|
||||
* With -moz-box-flex: initial, it will show a scroll bar in each, but
|
||||
* we only want one scrollbar. */
|
||||
overflow-y: hidden !important;
|
||||
}
|
||||
/*overflow-y: hidden !important;
|
||||
}*/
|
||||
|
||||
#allTabsMenu-multiView box.panel-viewstack {
|
||||
/* Use the whole height */
|
||||
|
|
@ -75,6 +81,7 @@
|
|||
|
||||
#allTabsMenu-allTabsViewTabs {
|
||||
/* Make sure tabs with long titles don't exceed the all tabs menu */
|
||||
width: 0;
|
||||
max-width: calc(100vw - 20px);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
See the above repository for updates as well as full license text. */
|
||||
|
||||
/* 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 }
|
||||
/* 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
src/userChrome/tabs_larger_min-width.css
Normal file
4
src/userChrome/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;
|
||||
}
|
||||
61
src/userChrome/userChrome-desktop.css
Normal file
61
src/userChrome/userChrome-desktop.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";
|
||||
61
src/userChrome/userChrome-hybrid.css
Normal file
61
src/userChrome/userChrome-hybrid.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";
|
||||
61
src/userChrome/userChrome-mobile.css
Normal file
61
src/userChrome/userChrome-mobile.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…
Add table
Add a link
Reference in a new issue