mirror of
https://github.com/black7375/Firefox-UI-Fix.git
synced 2025-12-06 02:30:54 -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") {
|
||||
:root {
|
||||
--tab-max-width: 180px;
|
||||
@supports not -moz-bool-pref("userChrome.tab.one_liner.responsive") {
|
||||
: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 =======================================================*/
|
||||
@supports -moz-bool-pref("userChrome.tab.one_liner") {
|
||||
:root {
|
||||
--uc-navbar-size: 40vw;
|
||||
--uc-tabbar-size: calc(100vw - var(--uc-navbar-size));
|
||||
}
|
||||
@supports not -moz-bool-pref("userChrome.tab.one_liner.responsive") {
|
||||
:root {
|
||||
--uc-navbar-size: 40vw;
|
||||
--uc-tabbar-size: calc(100vw - var(--uc-navbar-size));
|
||||
}
|
||||
|
||||
#navigator-toolbox {
|
||||
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;
|
||||
#navigator-toolbox {
|
||||
background-color: var(--toolbar-bgcolor) !important;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
@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") {
|
||||
#TabsToolbar {
|
||||
margin-inline-end: var(--uc-navbar-size) !important;
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.one_liner.responsive") {
|
||||
@media screen and (min-width: 1100px) {
|
||||
:root {
|
||||
--uc-navbar-size: 40vw;
|
||||
--uc-tabbar-size: calc(100vw - var(--uc-navbar-size));
|
||||
}
|
||||
|
||||
#nav-bar {
|
||||
margin-inline-start: var(--uc-tabbar-size) !important;
|
||||
}
|
||||
#navigator-toolbox {
|
||||
background-color: var(--toolbar-bgcolor) !important;
|
||||
}
|
||||
|
||||
.titlebar-spacer[type="post-tabs"] {
|
||||
display: none !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 {
|
||||
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 ==================================================*/
|
||||
@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") {
|
||||
/*= 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") {
|
||||
@supports not -moz-bool-pref("userChrome.tab.one_liner.responsive") {
|
||||
@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 !important;
|
||||
--uc-titlebar-padding: 0px;
|
||||
}
|
||||
|
||||
.titlebar-buttonbox-container {
|
||||
left: 0;
|
||||
right: unset !important;
|
||||
@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;
|
||||
}
|
||||
}
|
||||
#navigator-toolbox {
|
||||
padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important;
|
||||
}
|
||||
|
||||
:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container {
|
||||
height: 32px;
|
||||
}
|
||||
/* where window controls are on left */
|
||||
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
|
||||
:root {
|
||||
--uc-titlebar-padding: 0px !important;
|
||||
}
|
||||
|
||||
#toolbar-menubar[inactive] > .titlebar-buttonbox-container {
|
||||
opacity: 0;
|
||||
}
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
/* 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;
|
||||
}
|
||||
: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 {
|
||||
@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;
|
||||
}
|
||||
}
|
||||
/* At Activated Menubar */
|
||||
:root:not([chromehidden~="menubar"], [sizemode="fullscreen"])
|
||||
#toolbar-menubar:not([autohide="true"])
|
||||
+ #TabsToolbar
|
||||
> .titlebar-buttonbox-container {
|
||||
display: block !important;
|
||||
/*= 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:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container {
|
||||
visibility: hidden;
|
||||
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
|
||||
--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"]) {
|
||||
--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);
|
||||
}
|
||||
:root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) {
|
||||
--uc-window-drag-space-pre: 0px;
|
||||
/* Remove pre space */
|
||||
}
|
||||
|
||||
:root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) {
|
||||
--uc-window-drag-space-pre: 0px;
|
||||
/* Remove pre space */
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.one_liner") {
|
||||
@supports not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") {
|
||||
: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") {
|
||||
@supports not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") {
|
||||
/* 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"]) {
|
||||
/* 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-drag-space-post: 0px;
|
||||
}
|
||||
}
|
||||
@supports -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") {
|
||||
:root:is([tabsintitlebar], [sizemode="fullscreen"]) {
|
||||
/* Don't need pre spacer */
|
||||
/* 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"] */
|
||||
}
|
||||
}
|
||||
}
|
||||
#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:is([tabsintitlebar], [sizemode="fullscreen"]) {
|
||||
--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);
|
||||
}
|
||||
|
||||
: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:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) {
|
||||
--uc-window-drag-space-pre: 0px;
|
||||
/* Remove pre space */
|
||||
}
|
||||
|
||||
:root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child,
|
||||
:root[sizemode="fullscreen"] #window-controls {
|
||||
right: unset;
|
||||
@supports -moz-bool-pref("userChrome.tab.one_liner") {
|
||||
@supports not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") {
|
||||
: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 not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") {
|
||||
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-background::before {
|
||||
opacity: var(--tab-separator-opacity);
|
||||
transform: translateX(-1.5px) translateY(calc(-50% + 1px));
|
||||
@supports not -moz-bool-pref("userChrome.tab.one_liner.responsive") {
|
||||
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-background::before {
|
||||
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;
|
||||
}
|
||||
}
|
||||
@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) {
|
||||
#nav-bar:not([customizing]) {
|
||||
transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
@include NotOption("userChrome.tab.one_liner") {
|
||||
@include OneLinerBeforeResponsive {
|
||||
#nav-bar:not([customizing]) {
|
||||
margin-bottom: var(--uc-navbar-hide-height);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
// OneLinerBeforeResponsive
|
||||
@include NotOption("userChrome.tab.one_liner") {
|
||||
@include Option("userChrome.autohide.navbar") {
|
||||
@include NotOption("userChrome.autohide.bookmarkbar") {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
@use "utils/theme" as *;
|
||||
@use "utils/accent_color" as *;
|
||||
@use "utils/native_menu" as *;
|
||||
@use "utils/one_liner" as *;
|
||||
@use "utils/proton_elements" as Proton;
|
||||
@use "sass:selector";
|
||||
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@
|
|||
@include Option("userChrome.tab.photon_like_padding") {
|
||||
--tab-max-width: 225px;
|
||||
}
|
||||
@include Option("userChrome.tab.one_liner") {
|
||||
@include OneLiner {
|
||||
--tab-max-width: 180px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,13 +24,15 @@
|
|||
}
|
||||
|
||||
/*= Tab Bar - Oneliner =======================================================*/
|
||||
@include Option("userChrome.tab.one_liner") {
|
||||
@include OneLiner {
|
||||
@import "one_liner";
|
||||
}
|
||||
|
||||
/*= Tab Bar - Shared Layout ==================================================*/
|
||||
@include Option("userChrome.tab.on_bottom", "userChrome.tab.one_liner") {
|
||||
@import "layout";
|
||||
@include OneLinerContent {
|
||||
@import "layout";
|
||||
}
|
||||
}
|
||||
|
||||
/*= Tab Bar - Show only current tab ==========================================*/
|
||||
|
|
|
|||
|
|
@ -59,9 +59,11 @@
|
|||
}
|
||||
@include Option("userChrome.tab.one_liner") {
|
||||
@include NotOption("userChrome.tab.one_liner.tabbar_first") {
|
||||
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-background::before {
|
||||
opacity: var(--tab-separator-opacity);
|
||||
transform: translateX(-1.5px) translateY(calc(-50% + 1px));
|
||||
@include OneLinerContent {
|
||||
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-background::before {
|
||||
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.one_liner", 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.always_show_tab_icon", true);
|
||||
// user_pref("userChrome.tab.close_button_at_pinned", true);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue