Apropos Test, mir ist gerade aufgefallen das unter Windows, wenn die Titelleiste nicht angezeigt wird, die die Button zum Minimieren, Maximieren, Verkleinern und Schleißen nicht angezeigt werden.
Und damit? (Testfarben auch geändert, oben hoffentlich abschaltbar):
CSS
/***** Responsive Oneliner Test B *****/
/* uncomment to turn test colors OFF */
/*
:root {
--ug-bg_color: none;
}
*/
/* Tabs bar max width */
#TabsToolbar {
--ug-max_width: 60vw;
}
:root:not([customizing]) #navigator-toolbox {
display: flex !important;
position: relative !important;
flex-direction: row !important;
flex-wrap: wrap !important;
--tabs-navbar-shadow-size: 0px !important;
--toolbarbutton-outer-padding: 0px !important;
}
#PersonalToolbar {
width: 100vw !important;
}
:root:not([customizing]) #nav-bar {
flex-grow: 1 !important;
flex-basis: 0px !important;
--toolbar-start-end-padding: 2px !important;
}
#urlbar-container {
flex-shrink: 1 !important;
min-width: 200px !important;
/*max-width: 520px !important;*/
}
/* Only for url container max-width set */
/*
#nav-bar-customization-target {
justify-content: center !important;
}
*/
/* Url popup width */
#urlbar[breakout][breakout-extend] {
width: 400px !important;
/*right: 0 !important;
left: auto !important;*/
}
/* Only for url container max-width set */
/*
#nav-bar-customization-target {
justify-content: center !important;
}
*/
/* url container left */
/*
#urlbar-container {
order: -1 !important;
}
*/
#TabsToolbar {
background-color: var(--toolbar-bgcolor) !important;
--toolbarbutton-inner-padding: 8px !important;
--ug-button_width:
calc(2 * var(--toolbarbutton-inner-padding) + 16px + 2 * var(--toolbarbutton-outer-padding));
--ug_contain: initial;
padding-inline: 12px 2px !important;
}
:root[uidensity="compact"] #TabsToolbar {
--toolbarbutton-inner-padding: 6px !important;
}
@media screen and (max-width: 1300px) {
#TabsToolbar {
--ug-max_width: 40vw;
}
}
/** fix tab width jump when tab content changes **/
:root:not([customizing]) .tabbrowser-tab:not([pinned]) {
width: 205px;
}
/** control tab overflow, currently needs new tab button in tabs bar on the right **/
.scrollbox-clip[orient="horizontal"] {
contain: var(--ug_contain, initial) !important;
}
#tabbrowser-tabs:not([overflow], [hasadjacentnewtabbutton]) {
max-width: var(--ug-max_width) !important;
}
#tabbrowser-tabs[hasadjacentnewtabbutton] {
max-width: calc(var(--ug-max_width) - 1 * var(--ug-button_width)) !important;
}
/** fix tab bar width jump when hitting overflow **/
#tabbrowser-tabs[overflow] {
max-width: calc(var(--ug-max_width) - 1 * var(--ug-button_width)) !important;
}
#tabbrowser-tabs[overflow][hasadjacentnewtabbutton] {
max-width: calc(var(--ug-max_width) - 3 * var(--ug-button_width)) !important;
}
@supports -moz-bool-pref("browser.tabs.tabmanager.enabled") {
#tabbrowser-tabs[overflow] {
max-width: calc(var(--ug-max_width) - 0 * var(--ug-button_width)) !important;
}
#tabbrowser-tabs[overflow][hasadjacentnewtabbutton] {
max-width: calc(var(--ug-max_width) - 2 * var(--ug-button_width)) !important;
}
}
#tabs-newtab-button {
padding-left: 2px !important;
}
.titlebar-spacer {
display: none !important;
}
/** window control buttons right / position for Mac **/
@media (-moz-platform: macos) {
:root[tabsintitlebar]:not([sizemode="fullscreen"]) #TabsToolbar > .titlebar-buttonbox-container {
position: absolute !important;
outline: 2px solid var(--ug-bg_color, orange) !important;
outline-offset: -2px !important; top: 0 !important;
right: 0 !important;
height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin)) !important;
z-index: 3 !important;
padding-inline: 2px 16px !important;
}
#TabsToolbar .titlebar-buttonbox {
margin-inline: 0 !important;
}
:root[tabsintitlebar]:not([sizemode="fullscreen"]) #nav-bar {
padding-right: calc(72px + 0px) !important;
}
}
/** window control buttons right / position for Windows ?? **/
@media (-moz-platform: windows) {
:root[tabsintitlebar]:not([sizemode="fullscreen"]) #TabsToolbar > .titlebar-buttonbox-container {
position: absolute !important;
outline: 2px solid var(--ug-bg_color, orange) !important;
outline-offset: -2px !important;
top: 0 !important;
right: 0 !important;
z-index: 3 !important;
}
:root[tabsintitlebar]:not([sizemode="fullscreen"]) #nav-bar {
padding-right: calc(138px + 0px) !important;
}
}
/* window control buttons off Test */
/*
.titlebar-buttonbox-container {
display: none !important;
}
:root[tabsintitlebar]:not([sizemode="fullscreen"]) #nav-bar {
padding-right: 12px !important;
}
*/
/* test colors */
#PersonalToolbar {
outline: 2px solid var(--ug-bg_color, grey) !important;
outline-offset: -2px !important;
}
#nav-bar {
outline: 2px solid var(--ug-bg_color, powderblue) !important;
outline-offset: -2px !important;
}
#TabsToolbar {
outline: 2px solid var(--ug-bg_color, orange) !important;
outline-offset: -2px !important;
}
Alles anzeigen