mirror of
https://github.com/black7375/Firefox-UI-Fix.git
synced 2025-12-15 07:10:24 -08:00
Add: One Liner - responsive
This commit is contained in:
alstjr7375
parent
5c6640bf20
commit
0d543b62f1
8 changed files with 456 additions and 187 deletions
|
|
@ -3247,8 +3247,17 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@supports -moz-bool-pref("userChrome.tab.one_liner") {
|
@supports -moz-bool-pref("userChrome.tab.one_liner") {
|
||||||
:root {
|
@supports not -moz-bool-pref("userChrome.tab.one_liner.responsive") {
|
||||||
--tab-max-width: 180px;
|
:root {
|
||||||
|
--tab-max-width: 180px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@supports -moz-bool-pref("userChrome.tab.one_liner.responsive") {
|
||||||
|
@media screen and (min-width: 1100px) {
|
||||||
|
:root {
|
||||||
|
--tab-max-width: 180px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -3987,225 +3996,455 @@
|
||||||
}
|
}
|
||||||
/*= Tab Bar - Oneliner =======================================================*/
|
/*= Tab Bar - Oneliner =======================================================*/
|
||||||
@supports -moz-bool-pref("userChrome.tab.one_liner") {
|
@supports -moz-bool-pref("userChrome.tab.one_liner") {
|
||||||
:root {
|
@supports not -moz-bool-pref("userChrome.tab.one_liner.responsive") {
|
||||||
--uc-navbar-size: 40vw;
|
:root {
|
||||||
--uc-tabbar-size: calc(100vw - var(--uc-navbar-size));
|
--uc-navbar-size: 40vw;
|
||||||
}
|
--uc-tabbar-size: calc(100vw - var(--uc-navbar-size));
|
||||||
|
}
|
||||||
|
|
||||||
#navigator-toolbox {
|
#navigator-toolbox {
|
||||||
background-color: var(--toolbar-bgcolor) !important;
|
background-color: var(--toolbar-bgcolor) !important;
|
||||||
}
|
|
||||||
|
|
||||||
#nav-bar {
|
|
||||||
margin-top: var(--uc-tabbar-hide-height) !important;
|
|
||||||
height: var(--uc-tabbar-height) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#nav-bar > * {
|
|
||||||
transform: translateY(calc((var(--uc-tabbar-height) + var(--uc-navbar-hide-height)) / 2));
|
|
||||||
}
|
|
||||||
|
|
||||||
#urlbar-container {
|
|
||||||
min-width: 0px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
toolbarspring.chromeclass-toolbar-additional {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
@supports not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") {
|
|
||||||
#TabsToolbar {
|
|
||||||
margin-inline-start: var(--uc-navbar-size) !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#nav-bar {
|
#nav-bar {
|
||||||
margin-inline-end: var(--uc-tabbar-size) !important;
|
margin-top: var(--uc-tabbar-hide-height) !important;
|
||||||
|
height: var(--uc-tabbar-height) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.titlebar-spacer[type="pre-tabs"] {
|
#nav-bar > * {
|
||||||
|
transform: translateY(calc((var(--uc-tabbar-height) + var(--uc-navbar-hide-height)) / 2));
|
||||||
|
}
|
||||||
|
|
||||||
|
#urlbar-container {
|
||||||
|
min-width: 0px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
toolbarspring.chromeclass-toolbar-additional {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@supports not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") {
|
||||||
|
#TabsToolbar {
|
||||||
|
margin-inline-start: var(--uc-navbar-size) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-bar {
|
||||||
|
margin-inline-end: var(--uc-tabbar-size) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.titlebar-spacer[type="pre-tabs"] {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@supports -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") {
|
||||||
|
#TabsToolbar {
|
||||||
|
margin-inline-end: var(--uc-navbar-size) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-bar {
|
||||||
|
margin-inline-start: var(--uc-tabbar-size) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.titlebar-spacer[type="post-tabs"] {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@supports -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") {
|
@supports -moz-bool-pref("userChrome.tab.one_liner.responsive") {
|
||||||
#TabsToolbar {
|
@media screen and (min-width: 1100px) {
|
||||||
margin-inline-end: var(--uc-navbar-size) !important;
|
:root {
|
||||||
}
|
--uc-navbar-size: 40vw;
|
||||||
|
--uc-tabbar-size: calc(100vw - var(--uc-navbar-size));
|
||||||
|
}
|
||||||
|
|
||||||
#nav-bar {
|
#navigator-toolbox {
|
||||||
margin-inline-start: var(--uc-tabbar-size) !important;
|
background-color: var(--toolbar-bgcolor) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.titlebar-spacer[type="post-tabs"] {
|
#nav-bar {
|
||||||
display: none !important;
|
margin-top: var(--uc-tabbar-hide-height) !important;
|
||||||
|
height: var(--uc-tabbar-height) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-bar > * {
|
||||||
|
transform: translateY(calc((var(--uc-tabbar-height) + var(--uc-navbar-hide-height)) / 2));
|
||||||
|
}
|
||||||
|
|
||||||
|
#urlbar-container {
|
||||||
|
min-width: 0px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
toolbarspring.chromeclass-toolbar-additional {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") {
|
||||||
|
#TabsToolbar {
|
||||||
|
margin-inline-start: var(--uc-navbar-size) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-bar {
|
||||||
|
margin-inline-end: var(--uc-tabbar-size) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.titlebar-spacer[type="pre-tabs"] {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@supports -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") {
|
||||||
|
#TabsToolbar {
|
||||||
|
margin-inline-end: var(--uc-navbar-size) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-bar {
|
||||||
|
margin-inline-start: var(--uc-tabbar-size) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.titlebar-spacer[type="post-tabs"] {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/*= Tab Bar - Shared Layout ==================================================*/
|
/*= Tab Bar - Shared Layout ==================================================*/
|
||||||
@supports -moz-bool-pref("userChrome.tab.on_bottom") or -moz-bool-pref("userChrome.tab.one_liner") {
|
@supports -moz-bool-pref("userChrome.tab.on_bottom") or -moz-bool-pref("userChrome.tab.one_liner") {
|
||||||
@supports -moz-bool-pref("userChrome.tab.on_bottom") or -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") {
|
@supports not -moz-bool-pref("userChrome.tab.one_liner.responsive") {
|
||||||
/*= Windows Control - Move to toolbar ========================================*/
|
@supports -moz-bool-pref("userChrome.tab.on_bottom") or -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") {
|
||||||
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0
|
/*= Windows Control - Move to toolbar ========================================*/
|
||||||
See the above repository for updates as well as full license text. */
|
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0
|
||||||
:root {
|
See the above repository for updates as well as full license text. */
|
||||||
--uc-titlebar-padding: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (-moz-os-version: windows-win7),
|
|
||||||
(-moz-platform: windows-win7),
|
|
||||||
(-moz-os-version: windows-win8),
|
|
||||||
(-moz-platform: windows-win8),
|
|
||||||
(-moz-os-version: windows-win10),
|
|
||||||
(-moz-platform: windows-win10) {
|
|
||||||
:root[sizemode="maximized"][tabsintitlebar] {
|
|
||||||
--uc-titlebar-padding: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
|
|
||||||
#TabsToolbar > .titlebar-buttonbox-container {
|
|
||||||
position: fixed;
|
|
||||||
display: block;
|
|
||||||
top: var(--uc-titlebar-padding);
|
|
||||||
right: 0;
|
|
||||||
height: 40px;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* where window controls are on left */
|
|
||||||
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
|
|
||||||
:root {
|
:root {
|
||||||
--uc-titlebar-padding: 0px !important;
|
--uc-titlebar-padding: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.titlebar-buttonbox-container {
|
@media (-moz-os-version: windows-win7),
|
||||||
left: 0;
|
(-moz-platform: windows-win7),
|
||||||
right: unset !important;
|
(-moz-os-version: windows-win8),
|
||||||
|
(-moz-platform: windows-win8),
|
||||||
|
(-moz-os-version: windows-win10),
|
||||||
|
(-moz-platform: windows-win10) {
|
||||||
|
:root[sizemode="maximized"][tabsintitlebar] {
|
||||||
|
--uc-titlebar-padding: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
|
||||||
|
#TabsToolbar > .titlebar-buttonbox-container {
|
||||||
|
position: fixed;
|
||||||
|
display: block;
|
||||||
|
top: var(--uc-titlebar-padding);
|
||||||
|
right: 0;
|
||||||
|
height: 40px;
|
||||||
|
z-index: 1;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
#navigator-toolbox {
|
|
||||||
padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container {
|
/* where window controls are on left */
|
||||||
height: 32px;
|
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
|
||||||
}
|
:root {
|
||||||
|
--uc-titlebar-padding: 0px !important;
|
||||||
|
}
|
||||||
|
|
||||||
#toolbar-menubar[inactive] > .titlebar-buttonbox-container {
|
.titlebar-buttonbox-container {
|
||||||
opacity: 0;
|
left: 0;
|
||||||
}
|
right: unset !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#navigator-toolbox {
|
||||||
|
padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container {
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toolbar-menubar[inactive] > .titlebar-buttonbox-container {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.titlebar-buttonbox-container > .titlebar-buttonbox {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
|
|
||||||
.titlebar-buttonbox-container > .titlebar-buttonbox {
|
.titlebar-buttonbox-container > .titlebar-buttonbox {
|
||||||
margin-block: 10px;
|
height: 100%;
|
||||||
|
}
|
||||||
|
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
|
||||||
|
.titlebar-buttonbox-container > .titlebar-buttonbox {
|
||||||
|
margin-block: 10px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
/* At Full Screen */
|
/* At Full Screen */
|
||||||
:root[sizemode="fullscreen"] #window-controls {
|
:root[sizemode="fullscreen"] #window-controls {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
display: flex;
|
display: flex;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root[uidensity="compact"][sizemode="fullscreen"] #window-controls {
|
:root[uidensity="compact"][sizemode="fullscreen"] #window-controls {
|
||||||
height: 32px;
|
height: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@supports -moz-bool-pref("browser.fullscreen.autohide") {
|
@supports -moz-bool-pref("browser.fullscreen.autohide") {
|
||||||
:root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container {
|
:root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* At Activated Menubar */
|
||||||
|
:root:not([chromehidden~="menubar"], [sizemode="fullscreen"])
|
||||||
|
#toolbar-menubar:not([autohide="true"])
|
||||||
|
+ #TabsToolbar
|
||||||
|
> .titlebar-buttonbox-container {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/* At Activated Menubar */
|
/*= Navbar - Padding for window controls =====================================*/
|
||||||
:root:not([chromehidden~="menubar"], [sizemode="fullscreen"])
|
/* Customized https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/window_control_placeholder_support.css */
|
||||||
#toolbar-menubar:not([autohide="true"])
|
:root {
|
||||||
+ #TabsToolbar
|
--uc-window-control-width: 0px;
|
||||||
> .titlebar-buttonbox-container {
|
/* Same as .titlebar-buttonbox-container - Space reserved for window controls */
|
||||||
display: block !important;
|
--uc-window-drag-space-pre: 0px;
|
||||||
|
/* Same as .titlebar-spacer[type="pre-tabs"] - Extra space reserved on both sides of the nav-bar to be able to drag the window */
|
||||||
|
--uc-window-drag-space-post: 0px;
|
||||||
|
/* Same as .titlebar-spacer[type="post-tabs"] */
|
||||||
}
|
}
|
||||||
|
|
||||||
:root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container {
|
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
|
||||||
visibility: hidden;
|
--uc-window-control-width: 84px;
|
||||||
|
/* 84px is default value of linux */
|
||||||
|
--uc-window-drag-space-pre: var(--uc-title-pre-spacer, 40px);
|
||||||
|
--uc-window-drag-space-post: var(--uc-title-post-spacer, 40px);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
/*= Navbar - Padding for window controls =====================================*/
|
|
||||||
/* Customized https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/window_control_placeholder_support.css */
|
|
||||||
:root {
|
|
||||||
--uc-window-control-width: 0px;
|
|
||||||
/* Same as .titlebar-buttonbox-container - Space reserved for window controls */
|
|
||||||
--uc-window-drag-space-pre: 0px;
|
|
||||||
/* Same as .titlebar-spacer[type="pre-tabs"] - Extra space reserved on both sides of the nav-bar to be able to drag the window */
|
|
||||||
--uc-window-drag-space-post: 0px;
|
|
||||||
/* Same as .titlebar-spacer[type="post-tabs"] */
|
|
||||||
}
|
|
||||||
|
|
||||||
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
|
:root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) {
|
||||||
--uc-window-control-width: 84px;
|
--uc-window-drag-space-pre: 0px;
|
||||||
/* 84px is default value of linux */
|
/* Remove pre space */
|
||||||
--uc-window-drag-space-pre: var(--uc-title-pre-spacer, 40px);
|
}
|
||||||
--uc-window-drag-space-post: var(--uc-title-post-spacer, 40px);
|
|
||||||
}
|
|
||||||
|
|
||||||
:root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) {
|
@supports -moz-bool-pref("userChrome.tab.one_liner") {
|
||||||
--uc-window-drag-space-pre: 0px;
|
@supports not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") {
|
||||||
/* Remove pre space */
|
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
|
||||||
}
|
/* Don't need window control */
|
||||||
|
--uc-window-control-width: 0px;
|
||||||
|
--uc-window-drag-space-post: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@supports -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") {
|
||||||
|
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
|
||||||
|
/* Don't need pre spacer */
|
||||||
|
--uc-window-drag-space-pre: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#nav-bar {
|
||||||
|
border-inline-start-width: var(--uc-window-drag-space-pre);
|
||||||
|
border-inline-end-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post));
|
||||||
|
border-inline-style: solid !important;
|
||||||
|
border-inline-color: var(--toolbar-bgcolor);
|
||||||
|
}
|
||||||
|
|
||||||
@supports -moz-bool-pref("userChrome.tab.one_liner") {
|
/* Windows */
|
||||||
@supports not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") {
|
@media (-moz-os-version: windows-win7),
|
||||||
|
(-moz-platform: windows-win7),
|
||||||
|
(-moz-os-version: windows-win8),
|
||||||
|
(-moz-platform: windows-win8) {
|
||||||
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
|
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
|
||||||
/* Don't need window control */
|
--uc-window-control-width: 105px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) {
|
||||||
|
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
|
||||||
|
--uc-window-control-width: 138px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* Use this pref to check Mac OS where window controls are on left */
|
||||||
|
/* This pref defaults to true on Mac and doesn't actually do anything on other platforms. So if your system has window controls on LEFT side you can set the pref to true */
|
||||||
|
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
|
||||||
|
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
|
||||||
|
--uc-window-control-width: 72px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar {
|
||||||
|
border-inline-start-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post));
|
||||||
|
border-inline-end-width: var(--uc-window-drag-space-pre);
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child,
|
||||||
|
:root[sizemode="fullscreen"] #window-controls {
|
||||||
|
right: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@supports -moz-bool-pref("userChrome.tab.one_liner.responsive") {
|
||||||
|
@media screen and (min-width: 1100px) {
|
||||||
|
@supports -moz-bool-pref("userChrome.tab.on_bottom") or -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") {
|
||||||
|
/*= Windows Control - Move to toolbar ========================================*/
|
||||||
|
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0
|
||||||
|
See the above repository for updates as well as full license text. */
|
||||||
|
:root {
|
||||||
|
--uc-titlebar-padding: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (-moz-os-version: windows-win7),
|
||||||
|
(-moz-platform: windows-win7),
|
||||||
|
(-moz-os-version: windows-win8),
|
||||||
|
(-moz-platform: windows-win8),
|
||||||
|
(-moz-os-version: windows-win10),
|
||||||
|
(-moz-platform: windows-win10) {
|
||||||
|
:root[sizemode="maximized"][tabsintitlebar] {
|
||||||
|
--uc-titlebar-padding: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
|
||||||
|
#TabsToolbar > .titlebar-buttonbox-container {
|
||||||
|
position: fixed;
|
||||||
|
display: block;
|
||||||
|
top: var(--uc-titlebar-padding);
|
||||||
|
right: 0;
|
||||||
|
height: 40px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* where window controls are on left */
|
||||||
|
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
|
||||||
|
:root {
|
||||||
|
--uc-titlebar-padding: 0px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.titlebar-buttonbox-container {
|
||||||
|
left: 0;
|
||||||
|
right: unset !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#navigator-toolbox {
|
||||||
|
padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container {
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toolbar-menubar[inactive] > .titlebar-buttonbox-container {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.titlebar-buttonbox-container > .titlebar-buttonbox {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
|
||||||
|
.titlebar-buttonbox-container > .titlebar-buttonbox {
|
||||||
|
margin-block: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* At Full Screen */
|
||||||
|
:root[sizemode="fullscreen"] #window-controls {
|
||||||
|
position: fixed;
|
||||||
|
display: flex;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[uidensity="compact"][sizemode="fullscreen"] #window-controls {
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports -moz-bool-pref("browser.fullscreen.autohide") {
|
||||||
|
:root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* At Activated Menubar */
|
||||||
|
:root:not([chromehidden~="menubar"], [sizemode="fullscreen"])
|
||||||
|
#toolbar-menubar:not([autohide="true"])
|
||||||
|
+ #TabsToolbar
|
||||||
|
> .titlebar-buttonbox-container {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/*= Navbar - Padding for window controls =====================================*/
|
||||||
|
/* Customized https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/window_control_placeholder_support.css */
|
||||||
|
:root {
|
||||||
--uc-window-control-width: 0px;
|
--uc-window-control-width: 0px;
|
||||||
--uc-window-drag-space-post: 0px;
|
/* Same as .titlebar-buttonbox-container - Space reserved for window controls */
|
||||||
}
|
|
||||||
}
|
|
||||||
@supports -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") {
|
|
||||||
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
|
|
||||||
/* Don't need pre spacer */
|
|
||||||
--uc-window-drag-space-pre: 0px;
|
--uc-window-drag-space-pre: 0px;
|
||||||
|
/* Same as .titlebar-spacer[type="pre-tabs"] - Extra space reserved on both sides of the nav-bar to be able to drag the window */
|
||||||
|
--uc-window-drag-space-post: 0px;
|
||||||
|
/* Same as .titlebar-spacer[type="post-tabs"] */
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
#nav-bar {
|
|
||||||
border-inline-start-width: var(--uc-window-drag-space-pre);
|
|
||||||
border-inline-end-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post));
|
|
||||||
border-inline-style: solid !important;
|
|
||||||
border-inline-color: var(--toolbar-bgcolor);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Windows */
|
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
|
||||||
@media (-moz-os-version: windows-win7),
|
--uc-window-control-width: 84px;
|
||||||
(-moz-platform: windows-win7),
|
/* 84px is default value of linux */
|
||||||
(-moz-os-version: windows-win8),
|
--uc-window-drag-space-pre: var(--uc-title-pre-spacer, 40px);
|
||||||
(-moz-platform: windows-win8) {
|
--uc-window-drag-space-post: var(--uc-title-post-spacer, 40px);
|
||||||
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
|
}
|
||||||
--uc-window-control-width: 105px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) {
|
|
||||||
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
|
|
||||||
--uc-window-control-width: 138px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* Use this pref to check Mac OS where window controls are on left */
|
|
||||||
/* This pref defaults to true on Mac and doesn't actually do anything on other platforms. So if your system has window controls on LEFT side you can set the pref to true */
|
|
||||||
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
|
|
||||||
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
|
|
||||||
--uc-window-control-width: 72px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar {
|
:root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) {
|
||||||
border-inline-start-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post));
|
--uc-window-drag-space-pre: 0px;
|
||||||
border-inline-end-width: var(--uc-window-drag-space-pre);
|
/* Remove pre space */
|
||||||
}
|
}
|
||||||
|
|
||||||
:root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child,
|
@supports -moz-bool-pref("userChrome.tab.one_liner") {
|
||||||
:root[sizemode="fullscreen"] #window-controls {
|
@supports not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") {
|
||||||
right: unset;
|
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
|
||||||
|
/* Don't need window control */
|
||||||
|
--uc-window-control-width: 0px;
|
||||||
|
--uc-window-drag-space-post: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@supports -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") {
|
||||||
|
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
|
||||||
|
/* Don't need pre spacer */
|
||||||
|
--uc-window-drag-space-pre: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#nav-bar {
|
||||||
|
border-inline-start-width: var(--uc-window-drag-space-pre);
|
||||||
|
border-inline-end-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post));
|
||||||
|
border-inline-style: solid !important;
|
||||||
|
border-inline-color: var(--toolbar-bgcolor);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Windows */
|
||||||
|
@media (-moz-os-version: windows-win7),
|
||||||
|
(-moz-platform: windows-win7),
|
||||||
|
(-moz-os-version: windows-win8),
|
||||||
|
(-moz-platform: windows-win8) {
|
||||||
|
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
|
||||||
|
--uc-window-control-width: 105px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) {
|
||||||
|
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
|
||||||
|
--uc-window-control-width: 138px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* Use this pref to check Mac OS where window controls are on left */
|
||||||
|
/* This pref defaults to true on Mac and doesn't actually do anything on other platforms. So if your system has window controls on LEFT side you can set the pref to true */
|
||||||
|
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
|
||||||
|
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
|
||||||
|
--uc-window-control-width: 72px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar {
|
||||||
|
border-inline-start-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post));
|
||||||
|
border-inline-end-width: var(--uc-window-drag-space-pre);
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child,
|
||||||
|
:root[sizemode="fullscreen"] #window-controls {
|
||||||
|
right: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -4691,9 +4930,19 @@
|
||||||
|
|
||||||
@supports -moz-bool-pref("userChrome.tab.one_liner") {
|
@supports -moz-bool-pref("userChrome.tab.one_liner") {
|
||||||
@supports not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") {
|
@supports not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") {
|
||||||
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-background::before {
|
@supports not -moz-bool-pref("userChrome.tab.one_liner.responsive") {
|
||||||
opacity: var(--tab-separator-opacity);
|
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-background::before {
|
||||||
transform: translateX(-1.5px) translateY(calc(-50% + 1px));
|
opacity: var(--tab-separator-opacity);
|
||||||
|
transform: translateX(-1.5px) translateY(calc(-50% + 1px));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@supports -moz-bool-pref("userChrome.tab.one_liner.responsive") {
|
||||||
|
@media screen and (min-width: 1100px) {
|
||||||
|
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-background::before {
|
||||||
|
opacity: var(--tab-separator-opacity);
|
||||||
|
transform: translateX(-1.5px) translateY(calc(-50% + 1px));
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -5964,6 +6213,19 @@
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@supports -moz-bool-pref("userChrome.tab.one_liner") {
|
||||||
|
@supports -moz-bool-pref("userChrome.tab.one_liner.responsive") {
|
||||||
|
@media screen and (max-width: 1100px) {
|
||||||
|
#nav-bar:not([customizing]) {
|
||||||
|
margin-bottom: var(--uc-navbar-hide-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
#navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
#nav-bar:not([customizing]) {
|
#nav-bar:not([customizing]) {
|
||||||
transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
|
transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include NotOption("userChrome.tab.one_liner") {
|
@include OneLinerBeforeResponsive {
|
||||||
#nav-bar:not([customizing]) {
|
#nav-bar:not([customizing]) {
|
||||||
margin-bottom: var(--uc-navbar-hide-height);
|
margin-bottom: var(--uc-navbar-hide-height);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// OneLinerBeforeResponsive
|
||||||
@include NotOption("userChrome.tab.one_liner") {
|
@include NotOption("userChrome.tab.one_liner") {
|
||||||
@include Option("userChrome.autohide.navbar") {
|
@include Option("userChrome.autohide.navbar") {
|
||||||
@include NotOption("userChrome.autohide.bookmarkbar") {
|
@include NotOption("userChrome.autohide.bookmarkbar") {
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@
|
||||||
@use "utils/theme" as *;
|
@use "utils/theme" as *;
|
||||||
@use "utils/accent_color" as *;
|
@use "utils/accent_color" as *;
|
||||||
@use "utils/native_menu" as *;
|
@use "utils/native_menu" as *;
|
||||||
|
@use "utils/one_liner" as *;
|
||||||
@use "utils/proton_elements" as Proton;
|
@use "utils/proton_elements" as Proton;
|
||||||
@use "sass:selector";
|
@use "sass:selector";
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -66,7 +66,7 @@
|
||||||
@include Option("userChrome.tab.photon_like_padding") {
|
@include Option("userChrome.tab.photon_like_padding") {
|
||||||
--tab-max-width: 225px;
|
--tab-max-width: 225px;
|
||||||
}
|
}
|
||||||
@include Option("userChrome.tab.one_liner") {
|
@include OneLiner {
|
||||||
--tab-max-width: 180px;
|
--tab-max-width: 180px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -24,13 +24,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/*= Tab Bar - Oneliner =======================================================*/
|
/*= Tab Bar - Oneliner =======================================================*/
|
||||||
@include Option("userChrome.tab.one_liner") {
|
@include OneLiner {
|
||||||
@import "one_liner";
|
@import "one_liner";
|
||||||
}
|
}
|
||||||
|
|
||||||
/*= Tab Bar - Shared Layout ==================================================*/
|
/*= Tab Bar - Shared Layout ==================================================*/
|
||||||
@include Option("userChrome.tab.on_bottom", "userChrome.tab.one_liner") {
|
@include Option("userChrome.tab.on_bottom", "userChrome.tab.one_liner") {
|
||||||
@import "layout";
|
@include OneLinerContent {
|
||||||
|
@import "layout";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*= Tab Bar - Show only current tab ==========================================*/
|
/*= Tab Bar - Show only current tab ==========================================*/
|
||||||
|
|
|
||||||
|
|
@ -59,9 +59,11 @@
|
||||||
}
|
}
|
||||||
@include Option("userChrome.tab.one_liner") {
|
@include Option("userChrome.tab.one_liner") {
|
||||||
@include NotOption("userChrome.tab.one_liner.tabbar_first") {
|
@include NotOption("userChrome.tab.one_liner.tabbar_first") {
|
||||||
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-background::before {
|
@include OneLinerContent {
|
||||||
opacity: var(--tab-separator-opacity);
|
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-background::before {
|
||||||
transform: translateX(-1.5px) translateY(calc(-50% + 1px));
|
opacity: var(--tab-separator-opacity);
|
||||||
|
transform: translateX(-1.5px) translateY(calc(-50% + 1px));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
1
user.js
1
user.js
|
|
@ -112,6 +112,7 @@ user_pref("userChrome.rounding.square_tab", false);
|
||||||
// user_pref("userChrome.tab.on_bottom.menubar_on_top", true); // Need on_bottom
|
// user_pref("userChrome.tab.on_bottom.menubar_on_top", true); // Need on_bottom
|
||||||
// user_pref("userChrome.tab.one_liner", true);
|
// user_pref("userChrome.tab.one_liner", true);
|
||||||
// user_pref("userChrome.tab.one_liner.tabbar_first", true);
|
// user_pref("userChrome.tab.one_liner.tabbar_first", true);
|
||||||
|
// user_pref("userChrome.tab.one_liner.responsive", true);
|
||||||
// user_pref("userChrome.tab.as_titlebar", true);
|
// user_pref("userChrome.tab.as_titlebar", true);
|
||||||
// user_pref("userChrome.tab.always_show_tab_icon", true);
|
// user_pref("userChrome.tab.always_show_tab_icon", true);
|
||||||
// user_pref("userChrome.tab.close_button_at_pinned", true);
|
// user_pref("userChrome.tab.close_button_at_pinned", true);
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue