API tools faq
paste
Advertisement
kerlser

curved

kerlser
Nov 9th, 2023
554
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 10.41 KB | None | 0 0
raw download clone embed print report
  1.  
  2.  
  3. /*
  4. #titlebar {
  5.     order: 1 !important;
  6. }
  7. */
  8. /*  ERSETZEN ENDE  */
  9.  
  10.  
  11. /*** Curved tabs beta #2B ***/
  12.  
  13.  
  14. /*** General adjustments ***/
  15.  
  16. :root {
  17.  
  18. /* Tabs bar height adjust */
  19.     /*--tab-block-margin: 4px !important;*/
  20.     --tab-block-margin: 2px !important;
  21.     --tab-min-height: 36px !important;
  22.  
  23. /* Edges without Svg /  Radius */
  24.     --ug-radius: 20px;
  25.  
  26. /* Edges (borders, outlines) colors */
  27.  
  28. /* Edges not selected */
  29.     --ug-color-border: hsla(0, 0%, 33%, 0.5);                                    /* unselected Kante Tab 83 */
  30.     --ug-stroke: var(--ug-color-border);                                             /* unselected Kante Svg */
  31.     --ug-kante_hova: hsla(0, 0%, 43%, 0.65);                        /* unselected alle Kanten hover 93 */
  32.  
  33. /* Edges selected , multiselected */
  34.     --ug-color-border_select: hsla(0, 0%, 43%, 0.75);                            /* selected Kante Tab */
  35.     --ug-stroke_select:  var(--ug-color-border_select);                           /* selected Kante Svg */
  36.     --ug-kante_hova_select: hsla(0, 0%, 49%, 0.8);           /* multiselected alle Kanten hover 100 */
  37.  
  38.  
  39. /* Tabs backgrounds:  */
  40.  
  41.     --ug-color1: hsla(0, 0%, 83%, 0.25);                                /* basis, unselected */
  42.     --ug-color2: hsla(35, 80%, 60%, 0.25);                                          /* selected */
  43.     --ug-color2-multi: hsla(35, 80%, 50%, 0.25);                          /* multiselected */
  44.     --ug-color_multi_hova: hsla(35, 70%, 40%, 0.35);        /* multiselected hover */
  45.     --ug-color_hova: hsla(0, 0%, 50%, 0.25);                         /* unselected hover */
  46.  
  47. /* Tab bar border bottom color */
  48.     --ug-color3: hsla(0, 0%, 43%, 1);
  49.  
  50.     /*--tabs-navbar-shadow-size: 0 !important;*/
  51. }
  52.  
  53. /*
  54.  #TabsToolbar {
  55.     -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
  56. }
  57. */
  58.  
  59. /** Distance between tabs **/
  60. .tabbrowser-tab:not([pinned]) {
  61.     padding-inline: 2px !important;
  62.     overflow: visible !important;
  63. }
  64.  
  65. /*** General adjustments end ***/
  66.  
  67.  
  68. /* Tab bar border bottom */
  69.  
  70. #TabsToolbar {
  71.     border-image: linear-gradient(to top,
  72.         var(--ug-color-border) 1px, transparent 1px) 1 / 0 0 1px 0 !important;
  73. }
  74.  
  75. /* buttons adjust size, position */
  76.  
  77. /* Buttons smaller by 2px */
  78. #TabsToolbar {
  79.     --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 2px) !important;
  80. }
  81.  
  82. /* Move buttons up/down, optional, OFF */
  83. /*
  84. #TabsToolbar toolbarbutton {
  85.     margin-top: -1px !important;
  86. }
  87. #tabbrowser-tabs {
  88.     --ug_margin_plus: 1px -1px;
  89. }
  90. :is(#scrollbutton-up, #scrollbutton-down) {
  91.     margin-block:  var(--ug_margin_plus) !important;
  92. }
  93. */
  94.  
  95. /* adjust tab content */
  96. .tab-content {
  97.     margin-top: 3px !important;
  98. }
  99. .tabbrowser-tab:not([pinned]) .tab-content {
  100.     padding-inline: 12px 10px !important;
  101. }
  102.  
  103. .tab-label, .tab-close-button {
  104.     text-shadow: none  !important;
  105. }
  106.  
  107. .tabbrowser-tab:not([pinned]) .tab-close-button {
  108.     border-radius: 50% !important;
  109.     display: flex !important;
  110. }
  111. .tab-close-button:hover {
  112.     /*outline: none !important;*/
  113.     outline: 1px solid var(--button-active-bgcolor) !important;
  114.     outline-offset: -1px !important;
  115.     background-color: var(--button-hover-bgcolor) !important;
  116. }
  117.  
  118. /* New Tab (+) button, not overflow (+) button */
  119.  
  120. /* Position, closer to last tab */
  121. .tabbrowser-tab:not([pinned]) + #tabbrowser-arrowscrollbox-periphery {
  122.     margin-inline: -11px !important;
  123.     z-index: 2 !important;
  124. }
  125. #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button {
  126.     margin-block: 1px -1px !important;
  127.     padding-inline: 0px !important;
  128. }
  129.  
  130. /* Button rund, icon position adjusted */
  131. #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
  132.     border-radius: 50% !important;
  133.     --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 3px) !important;
  134.     padding-block: 6px 8px !important;
  135. }
  136.  
  137. /* New Tab (+) button hover outline */
  138. #tabbrowser-arrowscrollbox-periphery:hover #tabs-newtab-button .toolbarbutton-icon {
  139.     outline: 1px solid var(--ug-color-border) !important;
  140.     outline-offset: -1px !important;
  141.     /*box-shadow: inset 0 0px 2px 1px var(--ug-color-border) !important;*/
  142. }
  143.  
  144.  
  145.                                                            /*** Tabs base ***/
  146.  
  147. /* tabs connected bottom */
  148.  
  149. .tab-background {
  150.     margin-block: calc(2 * var(--tab-block-margin)) 0 !important;
  151. }
  152.  
  153. /* Space for corner left/right - first/last tab, overflow bug fix ? */
  154. /* Test #3 */
  155.  
  156. .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
  157.     padding-left: calc(var(--ug-corner-size) / 2) !important;
  158. }
  159. .tabbrowser-tab:not([pinned]):last-of-type {
  160.     padding-right: calc(var(--ug-corner-size) / 2) !important;
  161. }
  162. .tabbrowser-tab[first-visible-unpinned-tab] {
  163.     margin-inline-start: 0px !important;
  164. }
  165.  
  166.  
  167. /*** Tabs Radien, borders, corners, tab shapes order , inline borders only where no custom corners ***/
  168.  
  169. /*   basis   */
  170. .tabbrowser-tab .tab-background {
  171.     border-radius: var(--ug-radius) var(--ug-radius) var(--ug-radius)  0 !important;
  172.     border: 1px solid !important;
  173.     border-bottom: none !important;
  174. }
  175.  
  176. .tabbrowser-tab:not([pinned]) .tab-background {
  177.     border-left: none !important;
  178. }
  179.  
  180. /* selected , pinned tabs */
  181. .tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background {
  182.     border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
  183. }
  184. /* Tab selected no inline border */
  185. .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-background {
  186.     border-inline: none !important;
  187. }
  188.  
  189. /* Tab after selected tab completely round, no corners */
  190. .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]) .tab-background {
  191.     border-radius: var(--ug-radius) !important;
  192.     border-left: 1px solid var(--ug-color-border) !important;
  193. }
  194. .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]) .tab-background::before {
  195.     background-image: none !important;
  196. }
  197.  
  198. /* Last tab dual corners, unless it comes after selected tab */
  199.  
  200. .tabbrowser-tab:not([pinned]):last-of-type .tab-background {
  201.     border-radius: var(--ug-radius) var(--ug-radius) 0 0 !important;
  202.     border-inline: none !important;
  203. }
  204. .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:not([visuallyselected]):last-of-type .tab-background {
  205.     border-radius: var(--ug-radius) var(--ug-radius) 0 var(--ug-radius) !important;
  206.     border-right: none !important;
  207. }
  208.  
  209.                                                           /***  COLORS  ***/
  210.  
  211. /**  In about:config set svg.context-properties.content.enabled to true  **/
  212.  
  213.  
  214. /* Basis */
  215.  
  216. .tabbrowser-tab .tab-background {
  217.     outline: none !important;
  218.     box-shadow: none !important;
  219.     background-color: var(--ug-color1) !important;
  220.     border-color: var(--ug-color-border) !important;
  221.     stroke: var(--ug-stroke) !important;
  222.     fill: var(--ug-color1) !important;
  223. }
  224.  
  225. /* Colors, outlines: selected / multiselected / hover */
  226.  
  227. /* tabs selected base */
  228. .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
  229.     background-image: none !important;
  230.     background-color: var(--ug-color2) !important;
  231.     stroke: var(--ug-stroke_select) !important;
  232.     border-color: var(--ug-color-border_select) !important;
  233.     fill: var(--ug-color2) !important;
  234. }
  235.  
  236. /* tabs multiselected */
  237. .tabbrowser-tab:not([visuallyselected])[multiselected] .tab-background {
  238.     background-color: var(--ug-color2-multi) !important;
  239.     fill: var(--ug-color2-multi) !important;
  240. }
  241.  
  242. /* tabs multiselected hover */
  243. .tabbrowser-tab:not([visuallyselected]):hover .tab-background {
  244.     background-color: var(--ug-color_multi_hova) !important;
  245.     fill: var(--ug-color_multi_hova) !important;
  246.     stroke: var(--ug-kante_hova_select) !important;
  247.     border-color: var(--ug-kante_hova_select) !important;
  248. }
  249.  
  250. /* tabs unselected hover */
  251. .tabbrowser-tab:not([visuallyselected], [multiselected]):hover .tab-background {
  252.     background-color: var(--ug-color_hova) !important;
  253.     fill: var(--ug-color_hova) !important;
  254.     /*stroke: var(--ug-stroke_select) !important;*/
  255.     stroke: var(--ug-kante_hova) !important;
  256.     border-color: var(--ug-kante_hova) !important;
  257. }
  258.  
  259.                                                       /***  tabs corners  ***/
  260. /*  base  */
  261.  
  262. #TabsToolbar {
  263.     --ug-corner-size: var(--tab-min-height);
  264.     /*--ug-corner-image: url(icons/tab_corner_ug.svg) !important;*/
  265.     --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");
  266. }
  267.  
  268. .tabbrowser-tab .tab-background::before,
  269. .tabbrowser-tab .tab-background::after {
  270.     content: "";
  271.     position: absolute;
  272.     -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
  273.     width: var(--ug-corner-size) !important;
  274.     height: var(--ug-corner-size) !important;
  275.     background-size: var(--ug-corner-size) !important;
  276.     background-repeat: no-repeat !important;
  277.     background-position: bottom center !important;
  278.     mask-image: linear-gradient(215deg, transparent, black 18px) !important;
  279. }
  280.  
  281. /*  left  */
  282. .tabbrowser-tab .tab-background::before {
  283.     left: calc(0px - var(--ug-corner-size) / 2);
  284.     /*background-image: url(icons/tab_corner_ug.svg) !important;*/
  285.     background-image: var(--ug-corner-image) !important;
  286. }
  287.  
  288. /*  right  */
  289. .tabbrowser-tab[visuallyselected] .tab-background::after {
  290.     right: calc(0px - var(--ug-corner-size) / 2);
  291.     /*background-image: url(icons/tab_corner_ug.svg) !important;*/
  292.     background-image: var(--ug-corner-image) !important;
  293.     transform: scaleX(-1) !important;
  294. }
  295.  
  296. .tabbrowser-tab:last-of-type .tab-background::after {
  297.     right: calc(0px - var(--ug-corner-size) / 2);
  298.     /*background-image: url(icons/tab_corner_ug.svg) !important;*/
  299.     background-image: var(--ug-corner-image) !important;
  300.     transform: scaleX(-1) !important;
  301. }
  302.  
  303. .tabbrowser-tab[pinned] .tab-background::before,
  304. .tabbrowser-tab[pinned] .tab-background::after {
  305.     display: none !important;
  306. }
  307.  
  308.  
  309.  
  310.  
  311.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!