Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /*
- #titlebar {
- order: 1 !important;
- }
- */
- /* ERSETZEN ENDE */
- /*** Curved tabs beta #2B ***/
- /*** General adjustments ***/
- :root {
- /* Tabs bar height adjust */
- /*--tab-block-margin: 4px !important;*/
- --tab-block-margin: 2px !important;
- --tab-min-height: 36px !important;
- /* Edges without Svg / Radius */
- --ug-radius: 20px;
- /* Edges (borders, outlines) colors */
- /* Edges not selected */
- --ug-color-border: hsla(0, 0%, 33%, 0.5); /* unselected Kante Tab 83 */
- --ug-stroke: var(--ug-color-border); /* unselected Kante Svg */
- --ug-kante_hova: hsla(0, 0%, 43%, 0.65); /* unselected alle Kanten hover 93 */
- /* Edges selected , multiselected */
- --ug-color-border_select: hsla(0, 0%, 43%, 0.75); /* selected Kante Tab */
- --ug-stroke_select: var(--ug-color-border_select); /* selected Kante Svg */
- --ug-kante_hova_select: hsla(0, 0%, 49%, 0.8); /* multiselected alle Kanten hover 100 */
- /* Tabs backgrounds: */
- --ug-color1: hsla(0, 0%, 83%, 0.25); /* basis, unselected */
- --ug-color2: hsla(35, 80%, 60%, 0.25); /* selected */
- --ug-color2-multi: hsla(35, 80%, 50%, 0.25); /* multiselected */
- --ug-color_multi_hova: hsla(35, 70%, 40%, 0.35); /* multiselected hover */
- --ug-color_hova: hsla(0, 0%, 50%, 0.25); /* unselected hover */
- /* Tab bar border bottom color */
- --ug-color3: hsla(0, 0%, 43%, 1);
- /*--tabs-navbar-shadow-size: 0 !important;*/
- }
- /*
- #TabsToolbar {
- -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
- }
- */
- /** Distance between tabs **/
- .tabbrowser-tab:not([pinned]) {
- /*padding-inline: 2px !important;*/
- overflow: visible !important;
- }
- /*** General adjustments end ***/
- /* Tab bar border bottom */
- #TabsToolbar {
- border-image: linear-gradient(to top,
- var(--ug-color-border) 1px, transparent 1px) 1 / 0 0 1px 0 !important;
- }
- /* buttons adjust size, position */
- /* Buttons smaller by 2px */
- #TabsToolbar {
- --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 2px) !important;
- }
- /* Move buttons up/down, optional, OFF */
- /*
- #TabsToolbar toolbarbutton {
- margin-top: -1px !important;
- }
- #tabbrowser-tabs {
- --ug_margin_plus: 1px -1px;
- }
- :is(#scrollbutton-up, #scrollbutton-down) {
- margin-block: var(--ug_margin_plus) !important;
- }
- */
- /* adjust tab content */
- .tab-content {
- margin-top: 3px !important;
- }
- .tabbrowser-tab:not([pinned]) .tab-content {
- padding-inline: 12px 10px !important;
- }
- .tab-label, .tab-close-button {
- text-shadow: none !important;
- }
- .tabbrowser-tab:not([pinned]) .tab-close-button {
- border-radius: 50% !important;
- display: flex !important;
- }
- .tab-close-button:hover {
- /*outline: none !important;*/
- outline: 1px solid var(--button-active-bgcolor) !important;
- outline-offset: -1px !important;
- background-color: var(--button-hover-bgcolor) !important;
- }
- /* New Tab (+) button, not overflow (+) button */
- /* Position, closer to last tab */
- .tabbrowser-tab:not([pinned]) + #tabbrowser-arrowscrollbox-periphery {
- /*margin-inline: -11px !important;*/
- margin-left: 8px !important;
- z-index: 2 !important;
- }
- #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button {
- margin-block: 1px -1px !important;
- padding-inline: 0px !important;
- }
- /* Button rund, icon position adjusted */
- #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
- border-radius: 50% !important;
- --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 3px) !important;
- padding-block: 6px 8px !important;
- }
- /* New Tab (+) button hover outline */
- #tabbrowser-arrowscrollbox-periphery:hover #tabs-newtab-button .toolbarbutton-icon {
- outline: 1px solid var(--ug-color-border) !important;
- outline-offset: -1px !important;
- /*box-shadow: inset 0 0px 2px 1px var(--ug-color-border) !important;*/
- }
- /*** Tabs base ***/
- /* tabs connected bottom */
- .tab-background {
- margin-block: calc(2 * var(--tab-block-margin)) 0 !important;
- }
- /* Space for corner left/right - first/last tab, overflow bug fix ? */
- /* Test #3 */
- /*
- .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
- padding-left: calc(var(--ug-corner-size) / 2) !important;
- }
- .tabbrowser-tab:not([pinned]):last-of-type {
- padding-right: calc(var(--ug-corner-size) / 2) !important;
- }
- */
- .tabbrowser-tab[first-visible-unpinned-tab] {
- margin-inline-start: 0px !important;
- }
- /*** Tabs Radien, borders, corners, tab shapes order , inline borders only where no custom corners ***/
- /* basis */
- .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;
- }
- /* 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;
- }
- .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before {
- background-image: none !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;
- }
- /*** COLORS ***/
- /** In about:config set svg.context-properties.content.enabled to true **/
- /* Basis */
- .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;
- }
- /* 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-stroke_select) !important;*/
- stroke: var(--ug-kante_hova) !important;
- border-color: var(--ug-kante_hova) !important;
- }
- /*** tabs corners ***/
- /* base */
- #TabsToolbar {
- --ug-corner-size: var(--tab-min-height);
- /*--ug-corner-image: url(icons/tab_corner_ug.svg) !important;*/
- --ug-corner-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 32 32'%3E%3Cpath d='M0 33 L3 32.5 A16 16 0 0 0 15.5 16 L 16 16 L 16 33 Z' fill='context-fill'/%3E%3Cpath d='M3 32.5 A16 16 0 0 0 15.5 16' fill='rgba(155,122,0,0)' stroke='context-stroke' stroke-width='1px'/%3E%3Cpath d='M0 16 L16 16 A15.5 15.5 0 0 1 32 0 L 32 0 L 32 16 Z' fill='rgba(155,122,0,0)'/%3E%3Cpath d='M15.5 16 A18.5 18 0 0 1 35.5 -0.5' fill='transparent' stroke='context-stroke' stroke-width='1px' /%3E%3C/svg%3E%0A");
- }
- .tabbrowser-tab .tab-background::before,
- .tabbrowser-tab .tab-background::after {
- content: "";
- position: absolute;
- -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
- 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;
- }
- /* left */
- .tabbrowser-tab .tab-background::before {
- left: calc(0px - var(--ug-corner-size) / 2);
- background-image: var(--ug-corner-image) !important;
- }
- /* right */
- .tabbrowser-tab[visuallyselected] .tab-background::after {
- right: calc(0px - var(--ug-corner-size) / 2);
- background-image: var(--ug-corner-image) !important;
- transform: scaleX(-1) !important;
- }
- .tabbrowser-tab:last-of-type .tab-background::after {
- right: calc(0px - var(--ug-corner-size) / 2);
- background-image: var(--ug-corner-image) !important;
- transform: scaleX(-1) !important;
- }
- .tabbrowser-tab[pinned] .tab-background::before,
- .tabbrowser-tab[pinned] .tab-background::after {
- display: none !important;
- }
- /* margins test */
- .tabbrowser-tab .tab-background {
- border-radius: var(--ug-radius) var(--ug-radius) var(--ug-radius) 0 !important;
- }
- /* basis TEST */
- .tabbrowser-tab:not([pinned]) {
- padding-left: 20px !important;
- }
- /* Tab selected TEST */
- .tabbrowser-tab[visuallyselected]:not([pinned]) {
- padding-inline: 20px !important;
- }
- /* Tab after selected tab completely round, no corners TEST */
- .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]) {
- margin-inline: -36px -18px !important;
- }
- /*
- .tabbrowser-tab:not([visuallyselected]) + .tabbrowser-tab:is([visuallyselected]) {
- margin-left: -18px !important;
- }
- */
- /*
- .tabbrowser-tab:not([visuallyselected], [pinned]) + .tabbrowser-tab:not([visuallyselected]) {
- margin-right: -18px !important;
- }
- */
- .tabbrowser-tab:not([visuallyselected], [pinned]) {
- margin-right: -18px !important;
- }
- /* Last tab dual corners, unless it comes after selected tab TEST */
- .tabbrowser-tab:not([pinned]):last-of-type {
- padding-inline: 20px !important;
- }
- .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]):last-of-type {
- padding-inline: 2px 20px !important;
- margin-left: -18px !important;
- }
- #tabbrowser-tabs:not([overflow]) .tabbrowser-tab:is([visuallyselected]):not([pinned]):last-of-type {
- padding-right: 0px !important;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement