mirror of
https://codeberg.org/claui/mobile-config-firefox.git
synced 2025-11-03 20:15:56 +00:00
Merge 21750e2 from MrOtherGuy/firefox-csshacks
This commit is contained in:
Claudia Pellegrino
commit
b98bae8c5e
8 changed files with 260 additions and 0 deletions
48
src/userChrome/color_variable_template.css
Normal file
48
src/userChrome/color_variable_template.css
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
/* 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: 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;
|
||||
}
|
||||
/* line between nav-bar and tabs toolbar,
|
||||
also fallback color for border around selected tab */
|
||||
#navigator-toolbox{ --lwt-tabs-border-color: cyan !important; }
|
||||
/* Line above tabs */
|
||||
#tabbrowser-tabs{ --lwt-tab-line-color: white !important; }
|
||||
/* the header-area of sidebar needs this to work */
|
||||
#sidebar-box{ --sidebar-background-color: purple !important; }
|
||||
65
src/userChrome/hide_tabs_scrollbuttons.css
Normal file
65
src/userChrome/hide_tabs_scrollbuttons.css
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
/* 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;
|
||||
}
|
||||
45
src/userChrome/iconized_main_menu.css
Normal file
45
src/userChrome/iconized_main_menu.css
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
/* 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;
|
||||
}
|
||||
7
src/userChrome/numbered_tabs.css
Normal file
7
src/userChrome/numbered_tabs.css
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
/* 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*/
|
||||
|
||||
.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 }
|
||||
47
src/userChrome/round_ui_items.css
Normal file
47
src/userChrome/round_ui_items.css
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
/* 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: 24px !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: 18px }
|
||||
|
||||
button,
|
||||
.tab-background{ border-radius: 30px !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: 2px !important;
|
||||
border-top-color: var(--lwt-tab-line-color) !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() }
|
||||
|
||||
menugroup:hover > menuitem{ clip-path: circle() }
|
||||
32
src/userChrome/tab_animated_active_border.css
Normal file
32
src/userChrome/tab_animated_active_border.css
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tab_animated_active_border.css made available under Mozilla Public License v. 2.0
|
||||
See the above repository for updates as well as full license text. */
|
||||
|
||||
/* Creates a colorful animated border around active tab */
|
||||
|
||||
@keyframes filter{from{ filter: hue-rotate(0deg) } to { filter: hue-rotate(360deg) }}
|
||||
|
||||
.tabbrowser-tab[selected] > .tab-stack::before{
|
||||
grid-area: 1/1;
|
||||
content: "";
|
||||
display: inherit;
|
||||
margin-block: var(--tab-block-margin);
|
||||
border-radius: var(--tab-border-radius);
|
||||
z-index: 0;
|
||||
background-image: conic-gradient(
|
||||
hsl(0 100% 70%),
|
||||
hsl(60 100% 45%) 70deg,
|
||||
hsl(120 100% 55%) 105deg,
|
||||
hsl(160 100% 60%) 160deg,
|
||||
hsl(200 100% 60%) 200deg,
|
||||
hsl(240 100% 65%) 255deg,
|
||||
hsl(300 100% 60%) 290deg,
|
||||
hsl(360 100% 70%) 360deg);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
animation: filter steps(30) 2s infinite;
|
||||
}
|
||||
.tab-background[selected]{
|
||||
border: 1px solid transparent !important;
|
||||
outline: none !important;
|
||||
background-clip: padding-box !important;
|
||||
}
|
||||
11
src/userChrome/tab_close_button_always_on_hover.css
Normal file
11
src/userChrome/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;
|
||||
}
|
||||
5
src/userChrome/tabs_fill_available_width.css
Normal file
5
src/userChrome/tabs_fill_available_width.css
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
/* 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 }
|
||||
Loading…
Add table
Add a link
Reference in a new issue