Hier nicht:
Komisch.
Ich integriere mal alle Werte und Farben ins CSS, damit die Testvoraussetzungen dann für alle gleich sind.
Erledigt.
CSS
/*** Curved tabs beta D2b sauber - dunkles Theme ***/
/* aus #130 https://www.camp-firefox.de/forum/thema/137164-tabform/?postID=1239391#post1239391 */
/* Source = https://www.camp-firefox.de/forum/thema/137164-tabform/?postID=1287083#post1287083 */
/* -------------------------------------------------------------------------------------------------------------- */
:root {
--uc-color-black-light: #2B2B2B !important; /* var(--uc-color-black-light) */
--uc-color-black-lighter: #404040 !important; /* var(--uc-color-black-lighter) */
--uc-color-grey-dark: #5C5C5C !important; /* var(--uc-color-grey-dark) */
--uc-color-grey-light: #A9A9A9 !important; /* var(--uc-color-grey-light) */
--uc-color-grey-lighter: #D4D4D4 !important; /* var(--uc-color-grey-lighter) */
--uc-color-white-dark: #E0E0E0 !important; /* var(--uc-color-white-dark) */
--uc-color-white-normal: #FFFFFF !important; /* var(--uc-color-white-normal) */
--uc-color-orange-normal: #FFAA00 !important; /* var(--uc-color-orange-normal) */
--uc-color-orange-hover: #FFCC66 !important; /* var(--uc-color-orange-hover) */
--uc-color-red-normal: #FF0000 !important; /* var(--uc-color-red-normal) */
--uc-color: rgba(225, 225, 225, 0.2); /* hellgrau basis, unselected */
--uc-color_hov: rgba(225, 225, 225, 0.3); /* mittelgrau unselected hover */
--uc-color-sel: rgba(255, 148, 0, 0.4); /* zart orange selected */
--uc-color-musel: rgba(255, 148, 0, 0.3); /* zart orange dunkel+ multiselected */
--uc-color_musel_hov: rgba(255, 148, 0, 0.5); /* zart orange dunkel+ multiselected hover */
--uc-color-orange-test: #db8b00 !important;
}
/* Border ---------------------------------------------------*/
:root {
--uc-border-width: 3px !important; /* var(--uc-border-width) */
--uc-border-radius: 8px !important; /* var(--uc-border-radius) */
--uc-border-style: outset !important; /* var(--uc-border-style) */
/*--uc-radius: 20px !important;*/
--uc-radius: 19px !important;
}
/* Ränder ---------------------------------------------------*/
:root {
--uc-margin-top: 3px !important; /* var(--uc-margin-top) */
--uc-margin-right: 10px !important; /* var(--uc-margin-right) */
--uc-margin-left: 1px !important; /* var(--uc-margin-left) */
--uc-margin-bottom: 5px !important; /* var(--uc-margin-bottom) */
}
/* Abstände -------------------------------------------------*/
:root {
--uc-padding-top: 3px !important; /* var(--uc-padding-top) */
--uc-padding-right: 20px !important; /* var(--uc-padding-right) */
--uc-padding-left: 20px !important; /* var(--uc-padding-left) */
--uc-padding-bottom: 3px !important; /* var(--uc-padding-bottom) */
--uc-block-margin: 2px !important; /* var(--uc-block-margin) */
--uc-min-height: 36px !important; /* var(--uc-min-height) */
}
/* -------------------------------------------------------------------------------------------------------------- */
/*** General adjustments ***/
/*** Allgemeine Anpassunge ***/
:root {
/* Tabs bar height adjust */
/* Tabbar Höhe einstellen */
/*--tabs-navbar-shadow-size: 0 !important;*/
/*--tab-block-margin: 4px !important;*/
--tab-block-margin: var(--uc-block-margin) !important; /* 2px */
--tab-min-height: var(--uc-min-height) !important; /* 36px */
/* Edges without corner Svg / Radius */
/* Kanten ohne Ecken (svg / Radien */
/*--ug-radius: 20px;*/
--ug-radius: var(--uc-radius) !important; /* 19px */
/* Edges (borders, outlines) colors */
/* Farben für Ränder (Umrandungen, Konturen) */
/* Edges not selected */
/* Ränder nicht ausgewählt */
/* --ug-color-border: hsla(0, 0%, 83%, 0.5); /* hellgrau unselected Kante Tab */
/* --ug-color-border: var(--uc-color-orange-test); */
--ug-color-border: var(--uc-color-grey-light);
--ug-stroke: var(--ug-color-border); /* unselected Kante Svg */
/* --ug-kante_hova: hsla(0, 0%, 93%, 0.65); /* mittelgrau unselected alle Kanten hover */
--ug-kante_hova: var(--ug-color-border);
/* Edges selected , multiselected */
/* Kanten ausgewählt, mehrfach ausgewählt */
/* --ug-color-border_select: hsla(0, 0%, 93%, 0.75); /* mittelgrau hell+ selected Kante Tab */
--ug-color-border_select: var(--uc-color-orange-normal);
--ug-stroke_select: var(--ug-color-border_select); /* selected Kante Svg */
/* --ug-kante_hova_select: hsla(0, 0%, 100%, 0.8); /* mittelgrau hell++ multiselected alle Kanten hover */
--ug-kante_hova_select: var(--uc-color-orange-normal);
/* Tabs background colors: */
/* --ug-color1: hsla(0, 0%, 83%, 0.25); /* hellgrau basis, unselected */
/* --ug-color2: hsla(35, 80%, 60%, 0.25); /* zart orange selected */
/* --ug-color2-multi: hsla(35, 80%, 40%, 0.25); /* zart orange dunkel+ multiselected */
/* --ug-color_multi_hova: hsla(35, 70%, 40%, 0.35); /* zart orange dunkel++ multiselected hover */
/* --ug-color_hova: hsla(0, 0%, 50%, 0.25); /* mittelgrau#2 unselected hover */
--ug-color1: var(--uc-color); /* hellgrau basis, unselected */
--ug-color2: var(--uc-color-sel); /* zart orange selected */
--ug-color2-multi: var(--uc-color-musel); /* zart orange dunkel+ multiselected */
--ug-color_hova: var(--uc-color_hov); /* mittelgrau unselected hover */
--ug-color_multi_hova: var(--uc-color_musel_hov); /* zart orange dunkel++ multiselected hover */
/* Tab bar unten, border bottom color */
/* --ug-color_bottom: hsla(0, 0%, 93%, 1); /* hellgrau nicht transparent, Kante unten */
--ug-color_bottom: var(--uc-color-orange-normal);
/* Symbole für about:xxx */
--ug-color_tab-icon: var(--uc-color-red-normal);
}
/*** General adjustments end ***/
/* -------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */
/*** Tabs base ***/
/* tabs connected bottom */
.tab-background {
margin-block: calc(2 * var(--tab-block-margin)) 0 !important;
}
/*** Tabs Radien, borders, corners, tab shapes order , inline borders only where no custom corners ***/
/* Basis alle Tabs */
.tabbrowser-tab .tab-background {
border-radius: var(--ug-radius) var(--ug-radius) var(--ug-radius) 0 !important;
border: 1px solid !important;
/*border-bottom: none !important;*/
}
.tabbrowser-tab:not([pinned]) .tab-background {
border-left: none !important;
}
/* Zusatzregeln, überschreiben Basis alle Tabs */
/* selected , pinned tabs */
.tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background {
border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
}
/* Tab selected no inline border */
.tabbrowser-tab[visuallyselected]:not([pinned]) .tab-background {
border-inline: none !important;
}
/* Tab after selected tab completely round, no corners */
.tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]) .tab-background {
border-radius: var(--ug-radius) !important;
border-left: 1px solid var(--ug-color-border) !important;
}
/* Last tab dual corners, unless it comes after selected tab */
.tabbrowser-tab:not([pinned]):last-of-type .tab-background {
border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
border-inline: none !important;
}
.tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]):last-of-type .tab-background {
border-radius: var(--ug-radius) var(--ug-radius) 0 var(--ug-radius) !important;
border-right: none !important;
}
/* Erster Tab nach ausgewähltem Tab komplett rund, keine Ecken !! multiselected */
.tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
border-color: var(--uc-color-orange-normal) !important;
}
/*** COLORS ***/
/** In about:config set svg.context-properties.content.enabled to true **/
/* Basis alle Tabs */
.tabbrowser-tab .tab-background {
outline: none !important;
box-shadow: none !important;
background-color: var(--ug-color1) !important;
border-color: var(--ug-color-border) !important;
stroke: var(--ug-stroke) !important;
fill: var(--ug-color1) !important;
border-bottom: none !important; /* Muss zusätzlich, da unten ja keine Kante sein soll ! */
}
/* Zusatzregeln, überschreiben Basis alle Tabs */
/* Colors, outlines: selected / multiselected / hover */
/* tabs selected base */
.tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
background-image: none !important;
background-color: var(--ug-color2) !important;
stroke: var(--ug-stroke_select) !important;
border-color: var(--ug-color-border_select) !important;
fill: var(--ug-color2) !important;
}
/* tabs multiselected */
.tabbrowser-tab:not([visuallyselected])[multiselected] .tab-background {
background-color: var(--ug-color2-multi) !important;
fill: var(--ug-color2-multi) !important;
}
/* tabs multiselected hover */
.tabbrowser-tab:not([visuallyselected]):hover .tab-background {
background-color: var(--ug-color_multi_hova) !important;
fill: var(--ug-color_multi_hova) !important;
stroke: var(--ug-kante_hova_select) !important;
border-color: var(--ug-kante_hova_select) !important;
}
/* tabs unselected hover */
.tabbrowser-tab:not([visuallyselected], [multiselected]):hover .tab-background {
background-color: var(--ug-color_hova) !important;
fill: var(--ug-color_hova) !important;
stroke: var(--ug-kante_hova) !important;
border-color: var(--ug-kante_hova) !important;
}
/* -------------------------------------------------------------------------------------------------------------- */
/* fill colors selected / unselected hover */
.tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::before,
.tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::after {
fill: var(--ug-color2) !important;
stroke: var(--uc-color-orange-normal) !important;
}
.tabbrowser-tab:not([visuallyselected]):is([multiselected]) .tab-background::before,
.tabbrowser-tab:not([visuallyselected]):is([multiselected]) .tab-background::after {
fill: var(--ug-color2-multi) !important;
}
.tabbrowser-tab:not([visuallyselected]):is([multiselected]):hover .tab-background::before,
.tabbrowser-tab:not([visuallyselected]):is([multiselected]):hover .tab-background::after {
fill: var(--ug-color_multi_hova) !important;
}
/* right corner bg, selected --> vor not selected */
.tabbrowser-tab:is([visuallyselected]) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before {
background-image: none !important;
}
/* -------------------------------------------------------------------------------------------------------------- */
/*** tabs corners ***/
/* base */
#TabsToolbar {
--ug-corner-size: var(--tab-min-height) !important; /* 36px */
--ug-corner-image: url("../icons/tab_corner.svg") !important;
}
.tabbrowser-tab .tab-background::before,
.tabbrowser-tab .tab-background::after {
-moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
content: "";
position: absolute;
width: var(--ug-corner-size) !important;
height: var(--ug-corner-size) !important;
background-size: var(--ug-corner-size) !important;
background-repeat: no-repeat !important;
background-position: bottom center !important;
mask-image: linear-gradient(215deg, transparent, black 18px) !important;
pointer-events: none !important;
}
/* left */
.tabbrowser-tab .tab-background::before {
left: calc(0px - var(--ug-corner-size) / 2); /* -18px */
background-image: var(--ug-corner-image) !important;
}
/* right */
.tabbrowser-tab:is([visuallyselected], :last-of-type) .tab-background::after {
right: calc(0px - var(--ug-corner-size) / 2); /* -18px */
background-image: var(--ug-corner-image) !important;
transform: scaleX(-1) !important;
}
/**** Margins etc. overflow fix ****/
/* Base values ; tab padding, margin */
#tabbrowser-tabs {
/* --ug-tab_Pad: calc(8px + var(--ug-corner-size) / 2); /* 26px */
--ug-tab_Pad: calc(-10px + var(--ug-corner-size) / 2); /* 8px */
/* --ug-tab_Marge: calc(0px - var(--ug-corner-size) - 12px); /* -48px */
--ug-tab_Marge: calc(0px - var(--ug-corner-size) / 2 + 6px); /* -12px */
}
/* Basis all Tabs */
.tabbrowser-tab:not([pinned]) {
overflow: visible !important;
padding-inline: var(--ug-tab_Pad) !important;
}
/* Tab before any tab */
.tabbrowser-tab:not([pinned], [visuallyselected]) + .tabbrowser-tab:not([pinned]) {
margin-inline: var(--ug-tab_Marge) 0px !important;
/* margin-inline: -48px 0px !important; */
}
/* Tab after selected */
.tabbrowser-tab:not([pinned]):is([visuallyselected]) + .tabbrowser-tab:not([pinned]) {
margin-inline: var(--ug-tab_Marge) 0px !important;
/* margin-inline: -48px 0px !important; */
}
/* Tab selected */
.tabbrowser-tab:not([pinned]):is([visuallyselected], :last-of-type) {
margin-inline: 0px !important;
}
/* Last tab after selected tab */
.tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]):last-of-type {
margin-inline: var(--ug-tab_Marge) 0px !important;
/* margin-inline: -48px 0px !important; */
}
/*** Tab left higher z index / Vorrang vor Tab rechts ***/
.tabbrowser-tab:not([pinned]) .tab-content {
z-index: 1 !important;
}
/*** Space for corner left/right - first/last tab, overflow bugs fix ***/
#tabbrowser-tabs .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
/* margin-inline-start: 0px !important; */
margin-inline-start: 10px !important;
}
#tabbrowser-tabs:not([pinned]) .tabbrowser-tab:last-of-type {
/* margin-inline-start: 0px !important; */
margin-inline-end: 10px !important;
}
#tabbrowser-tabs[overflow]:not([movingtab]) .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
margin-inline-start: -12px !important;
}
#tabbrowser-tabs[overflow]:not([movingtab]) .tabbrowser-tab:last-of-type {
margin-inline-end: -12px !important;
}
/*-----------------------------------------------*/
/**** Tabtext nicht verkürzt bei hover ****/
/*-----------------------------------------------*/
/* Ein längerer Tabtext wird am Ende ja ausgeblendet. */
/* Diese Verkürzung bei hover hätte ich gerne verhindert. */
.tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-close-button {
padding-inline-start: 6px !important;
width: 24px !important;
}
.tabbrowser-tab[visuallyselected=true]:not(:hover),
#tabbrowser-tabs:not([closebuttons=activetab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected=true]):not(:hover) {
--tab-label-mask-size: 1em !important;
}
/* Tabtext wird nicht ausgeblendet */
.tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
.tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) {
mask-image: none !important;
}
/*--------------------------------------------*/
/**** Tabbar nach unten verschieben ****/
/*--------------------------------------------*/
#navigator-toolbox {
position: relative !important;
padding-bottom: calc( var(--tab-min-height) + 8px ); /* 44px */
/* padding-bottom: 42px !important; */
}
#TabsToolbar {
position: absolute !important;
display: block !important;
}
/*--------------------------------------------------*/
/**** Trennlinie zwischen Inhalt und Tableiste ****/
/*--------------------------------------------------*/
#TabsToolbar {
bottom: 6px !important; /* Tableiste etwas angehoben */
width: 100vw !important; /* Tableistenbreite festgelegt */
background-image: linear-gradient(to top, var(--ug-color_bottom) 7px, transparent 1px) !important;
margin-bottom: -7px !important; /* Trennlinie nach unten verschoben */
padding-bottom: 7px !important; /* Tabs etwas angehoben */
}
/*---------------------------------------------*/
/**** Symbole für about:xxx anpassen ****/
/*---------------------------------------------*/
.tab-icon-image {
-moz-context-properties: fill !important;
/* fill: #FFAA00 !important; */
fill: #FF0000 !important;
}
/*-----------------------------------------------------------------------*/
/* Ausblenden des Meüs "Link in neuem Tab in Umgebung öffnen" im Popoup **/
/*-----------------------------------------------------------------------*/
#context_reopenInContainer {
display: none !important;
}
/*---------------------------------------------------*/
/************** Tab schließen X hover ***************/
/*---------------------------------------------------*/
.tabbrowser-tab:not([pinned]) .tab-close-button { /* Button rund */
border-radius: 50% !important;
display: flex !important;
}
.tab-content > .tab-close-button:hover {
/*outline: none !important;*/
outline: 1px solid rgba(255, 0, 0, 0.3) !important;
outline-offset: -1px !important;
background-color: rgba(255, 0, 0, 0.4) !important; /* Rot */
box-shadow: 0 0 1em rgba(255, 0, 0, 0.7) !important; /* Rot, glow */
}
/* Schließen Kreuz größer */
.tab-close-button {
transform: scale(1.4, 1.4) !important;
}
/*---------------------------------------------------*/
/************* New Tab Button (+) hover *************/
/*---------------------------------------------------*/
/* Abstand vom Tab */
#tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
margin-left: 6px !important;
border-radius: 50% !important;
}
/* New Tab (+) button hover outline */
#tabbrowser-arrowscrollbox-periphery:hover #tabs-newtab-button .toolbarbutton-icon {
outline: 1px solid var(--uc-color-orange-normal) !important;
outline-offset: -1px !important;
background-color: var(--ug-color1) !important;
}
/* New Tab (+) button hover color */
#tabbrowser-arrowscrollbox-periphery:hover #tabs-newtab-button:hover {
fill: var(--uc-color-orange-normal) !important;
}
/* Position, closer to last tab */
#tabbrowser-arrowscrollbox-periphery #tabs-newtab-button {
margin: 0 !important;
margin-top: 2px !important;
padding-inline: 0px !important;
}
.tabbrowser-tab:not([pinned]) + #tabbrowser-arrowscrollbox-periphery {
margin-left: -16px !important;
z-index: 2 !important;
}
/*-------------------------------------------------*/
/*************** Schrift in den Tabs ***************/
/*-------------------------------------------------*/
.tab-label {
overflow: hidden !important;
text-overflow: ellipsis !important;
/* text-overflow: " " !important; */
text-overflow: " …" !important;
white-space: nowrap !important;
max-width: 95% !important;
text-shadow: 1px 1px 1.5px var(--uc-color-black-light) !important; /* Schatten hinter Schrift */
}
.tab-label[selected] {
color: var(--uc-color-white-normal) !important; /* Aktiver Tab: Schriftfarbe (Orange) */
}
.tab-label:not([selected]) {
color: var(--uc-color-grey-lighter) !important; /* Aktiver Tab: Schriftfarbe (Hellgrau) */
}
/* Move tab content */
.tab-content {
margin-top: 1px !important;
}
/*************** Tests ***************/
#tabbrowser-tabs {
/* --tab-min-width: 76px !important; */
--tab-min-width: 75px !important;
--tab-loading-fill: lime !important;
--tab-overflow-pinned-tabs-width: 0px !important;
}
/* userChrome.css */
/* progress-bar page loading in the tab header */
.tabbrowser-tab:not([usercontextid]) > .tab-stack > .tab-background > .tab-context-line {
opacity: 0;
background-color: #FFCC00;
height: 2px;
margin-inline: 12px;
margin-top: 0px;
border-radius: 90px;
}
.tabbrowser-tab:is([busy], [progress]) > .tab-stack > .tab-background > .tab-context-line {
opacity: 1;
transform-origin: left center;
animation: 2s ease-in-out scale;
}
.tabbrowser-tab[bursting] > .tab-stack > .tab-background > .tab-context-line {
transition: opacity 2s ease-out;
}
@keyframes scale {
0% {transform: scaleX(0);}
100% {transform: scaleX(1);}
} Wenn es jetzt immer noch nicht passt, dann verstehe ich's nicht!
Habe es in einem neuen, sauberen Testprofil mir angeschaut, alles so, wie es sein soll,
ob mit oder ohne Menüleiste, egal.
AH, Titelleiste!!!
Ja, Scheibenkleister, ja die muss aktiviert sein.
Und selbst mit Menüleiste passt da ja optisch nichts zueinander.
en viel Glück,
