API tools faq
paste
kerlser

user chrome

kerlser
May 18th, 2022 (edited)
452
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 19.70 KB | None | 0 0
raw download clone embed print report
  1.  
  2.  
  3.                                        /***  Proton Tabs Tweaks WORK / Cleaned Up  ***/
  4.  
  5.  
  6.                                                                                                  /****     border none Test     ****/
  7. /* Connected */
  8.  
  9. .tab-background {
  10.     border-radius: var(--user-tab-rounding) var(--user-tab-rounding) 0px 0px !important;
  11.     margin-block: 1px 0 !important;
  12.     border: none !important;
  13. }
  14.  
  15.                                                                                                      /*      Alt zu neu CHANGE   */
  16.  
  17. #scrollbutton-up, #scrollbutton-down {
  18.     border-top-width: 0px !important;
  19.     border-bottom-width: 0 !important;
  20. }
  21.  
  22.  
  23. /* Override Normal Density height to Compact Density height only for tabs */
  24.  
  25.                                                                                                                  /****      Tab Height     ****/
  26. #TabsToolbar, #tabbrowser-tabs {
  27.     --tab-min-height: 24px !important;
  28. }
  29.  
  30.                                                                                                            /****      Tab Plus button     ****/
  31.  
  32.     /* [Connected Tabs] Set a max height based on min-height plus margin-block: 1px 0 */
  33. #TabsToolbar, #TabsToolbar > hbox, #TabsToolbar-customization-target, #tabbrowser-arrowscrollbox  {
  34.     max-height: calc(var(--tab-min-height) + 1px) !important;
  35. }
  36.  
  37.     /* [Connected Tabs] Adjust padding around icons on buttons to avoid crushed images */
  38. #TabsToolbar-customization-target toolbarbutton > .toolbarbutton-icon,
  39. #TabsToolbar-customization-target .toolbarbutton-text,
  40. #TabsToolbar-customization-target .toolbarbutton-badge-stack,
  41. #scrollbutton-up,#scrollbutton-down {
  42.     width: 25px !important;
  43.     padding-top: 5px !important;
  44.     padding-bottom: 5px !important;
  45.     margin-left: -2px !important;
  46.     margin-right: -2px !important;
  47.     margin-bottom: -1px !important;
  48.     margin-top: -1px !important;
  49. }
  50.  
  51.  
  52. /* Inactive tabs: Separator line style */
  53.  
  54. .tabbrowser-tab:not([selected=true]):not([multiselected=true]):not([beforeselected-visible="true"]) .tab-background {
  55.     border-right: 1px solid var(--lwt-background-tab-separator-color, rgba(0, 0, 0, 0.25)) !important;
  56. }
  57.  
  58. /* Remove padding between tabs */
  59. .tabbrowser-tab {
  60.     padding-left: 0 !important;
  61.     padding-right: 0 !important;
  62. }
  63.  
  64.  
  65.  
  66.                                               /*****                 Own Code                 *****/
  67.  
  68.  
  69.  
  70.  
  71. /* FONTS */
  72.                                                                                         /****      Fonts size / color     ****/
  73.  
  74. /* Override font for selected tabs */
  75. .tabbrowser-tab[selected] .tab-content {
  76.     font-size: 12px !important;
  77.     color: rgba(0, 0, 0, 0.8) !important;
  78.     font-weight: Normal !important;
  79. }
  80.  
  81. /* Override font for unselected tabs */
  82. .tabbrowser-tab:not([selected]) {
  83.     font-size: 12px !important;
  84.     color: rgba(0, 0, 0, 0.9) !important;
  85.     font-weight: Normal !important;
  86. }
  87.  
  88. /* Bookmark folder fonts' */
  89. #PersonalToolbar {
  90.     font-size: 12px !important;
  91.     color: rgba(0, 0, 0, 0.7) !important;
  92.     font-weight: 500 !important;
  93. }
  94.  
  95. .browserContainer > findbar {
  96.     font-size: 13px !important;
  97.     color: rgba(0, 0, 0, 1.0) !important;
  98.     font-weight: 400 !important;
  99. }
  100.  
  101.  
  102.                                                          /*****  URL - bookmarks - Tabs - Find - COLORS  *****/  
  103.  
  104.  
  105.                                                                              /*   URL Leiste color, shadow top down  */
  106. #nav-bar {
  107.     background-color: #DCDCDC !important;
  108.     border-bottom: 1px solid !important;
  109.     border-color: rgba(0, 0, 0, 0.1) !important;
  110.     box-shadow: inset 0px 20px 32px -12px rgba(255, 255, 255, 0.5) !important;
  111. }
  112.  
  113. /*Textfeld*/
  114. #urlbar-background{
  115.     border-radius: 0 !important;
  116.     border: 1px solid !important;
  117.     border-color: rgba(0, 0, 0, 0.3) !important;
  118. }
  119.  
  120.  
  121.                                                                 /*   Bookmark Leiste hover color, Hoehe , COLOR   */
  122.  
  123.  
  124.            /**  Shadow nach oben für Navbar / Shadow hell nach unten Bookmarks **/
  125.  
  126. #PersonalToolbar {
  127.     background-color: #DCDCDC !important;
  128.     max-height: 28px !important;
  129.     border-bottom: 1px solid !important;
  130.     border-color: rgba(0, 0, 0, 0.1) !important;
  131.     filter: drop-shadow(0px -3px 12px rgba(0, 0, 0, 0.05)) !important;
  132.     box-shadow: inset 0px 16px 18px -10px rgba(255, 255, 255, 0.15) !important;
  133. }
  134.  
  135. /* bookmark hover color */
  136. .bookmark-item:hover {
  137.      background-color: rgba(0, 0, 0, 0.15) !important;
  138. }
  139.  
  140.                                                                                         /*      Tab Leiste border , COLOR     */
  141.  
  142.          /****     Shadow nach oben für boomarks / tab bar shadow box   ****/
  143.  
  144. #TabsToolbar {
  145.     background-color: #B2B2B2 !important;
  146.     border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
  147.     filter: drop-shadow(0px -6px 12px rgba(0, 0, 0, 0.05)) !important;
  148.     box-shadow: inset 0px -16px 18px -10px rgba(125, 125, 125, 0.4) !important;
  149. }
  150.  
  151.  
  152.                                                                                                 /***  Bookmark Inhalt lower  ***/
  153. /*  lower, hover bleibt, ohne scrollbutton  */
  154. .bookmark-item:not(#PlacesToolbar menuitem) {
  155.     padding-top: 5px !important;
  156.     padding-bottom: 3px !important;
  157. }
  158. /*  scrollbutton  */
  159. #PlacesChevron, #nav-bar-overflow-button {
  160.     padding-top: 5px !important;
  161.     padding-bottom: 3px !important;
  162. }
  163.  
  164.                                                                                                                    /***  navbar size  ***/    
  165.  
  166. /* navbar size , 1. Groesse gerade, 2. ungerade --> zentriert  */
  167.  
  168. /* Gesamt  */
  169. #urlbar-container {
  170.     min-height: 36px !important;
  171. }
  172.  
  173. /* Textfeld , gleiche Grösse  */
  174. #urlbar {    
  175.     min-height: 25px !important;
  176. }
  177. #urlbar-input-container {
  178.     max-height: 25px !important;
  179. }
  180.  
  181. #nav-bar {
  182.     height: var(--uc-toolbar-height) !important;
  183. }
  184.  
  185.                                                                                                      /***   Findbar height COLOR  ***/
  186.  
  187.  
  188.                                                             /*      Find Leiste color / border bottom    */
  189. .browserContainer > findbar {
  190.     background-color: #EEEEEE !important;
  191.     border-top: none !important;
  192.     border-bottom: 1px solid !important;
  193.     border-color: rgba(0, 0, 0, 0.5) !important;
  194. }
  195. .findbar-textbox {
  196.     border-radius: 0 !important;
  197.     border: 1px solid !important;
  198.     border-color: rgba(0, 0, 0, 0.3) !important;
  199. }
  200.                                                                                              /* Shadow Findbar */
  201. .browserContainer > findbar {
  202.     box-shadow: inset 0px -16px 18px -10px rgba(87, 80, 68, 0.15),
  203.     inset 0px 16px 18px -10px rgba(87, 80, 68, 0.15) !important;
  204. }
  205.                                                                           /*  Findbar buttons hover color  */
  206. .findbar-closebutton:hover {
  207.     background-color: rgba(0, 0, 0, 0.2) !important;
  208.     border-radius: 0 !important;
  209.     outline: none !important;
  210. }
  211. .findbar-find-next:hover {
  212.     background-color: rgba(0, 0, 0, 0.2) !important;
  213.     border-radius: 0 !important;
  214. }
  215. .findbar-find-previous:hover {
  216.     background-color: rgba(0, 0, 0, 0.2) !important;
  217.     border-radius: 0 !important;
  218. }
  219.                                                                                               /** Findbar buttons **/
  220. .findbar-find-previous, .findbar-find-next {
  221.     margin-top: -1px !important;
  222.     margin-bottom: -1px !important;  
  223.     padding-top: 0px !important;
  224.     padding-bottom: 0px !important;
  225.     color: inherit !important;
  226.     fill: currentColor !important;
  227. }
  228.  
  229. .findbar-find-previous {
  230.     padding-right: 4px !important;
  231.     padding-left: 4px !important;
  232.     margin-right: 1px !important;
  233. }
  234.  
  235. .findbar-find-next {
  236.     padding-right: 4px !important;
  237.     padding-left: 4px !important;
  238.     margin-left: 1px !important;
  239. }
  240.                                                                                                /**   findbar height   **/
  241. .browserContainer > findbar {
  242.     max-height: 30px !important;
  243.     padding-top: 0px !important;
  244.     padding-bottom: 0px !important;
  245. }
  246.  
  247. .findbar-container {
  248.     min-height: 26px !important;
  249.     margin-top: 0px !important;
  250.     margin-bottom: 0px !important;
  251. }
  252. .findbar-textbox {
  253.     max-height: 22px !important;
  254. }
  255.                                                                                             /* No result highlight color */
  256. .findbar-textbox[status="notfound"] {
  257.     background-color: rgba(87, 80, 68, 0.2) !important;
  258. }
  259. .findbar-find-status[status="notfound"] {
  260.     color: rgba(87, 80, 68, 0.9) !important;
  261.     opacity: 1.0 !important;
  262. }
  263.                                                                                                            /* hide extra text */
  264. .findbar-case-sensitive, .findbar-match-diacritics,
  265.  .findbar-entire-word {
  266.     display: none !important;
  267. }
  268.                                                                                                       /* find window on top */
  269. .browserContainer > findbar {
  270.     -moz-box-ordinal-group: 0 !important;
  271.     padding-left: 600px !important;
  272. }
  273.  
  274.  
  275.                                                          /********* Diverse *********/
  276.  
  277.                                                                                                      /* Navbar Icons heller */
  278. #reload-button, #stop-reload-button, #back-button, #forward-button {
  279.    fill: rgba(0, 0, 0, 0.7) !important;
  280. }
  281. /* fullscreen button */
  282. #fullscreen-button {
  283.     fill: rgba(0, 0, 0, 0.6) !important;
  284.     --toolbarbutton-active-background: rgba(87, 80, 68, 0.4) !important;
  285. }
  286.  
  287.                                                                                            /*  Hamburger separator color  */
  288. #appMenu-fxa-separator {
  289.     border-image: none !important;
  290.     background: rgba(87, 80, 68, 0.6) !important;
  291. }
  292.  
  293.                                                                             /* Vergroesserung der Urlbar deaktivieren */
  294.  
  295. #urlbar[breakout][breakout-extend] > #urlbar-input-container {
  296. height: var(--urlbar-height) !important;
  297.     padding-block: 0 !important;
  298.     padding-inline: 0 !important;
  299. }
  300.  
  301. #urlbar[breakout][breakout-extend] {
  302.     top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
  303.     left: 0 !important;
  304.     width: 100% !important;
  305. }
  306.  
  307. #urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background {
  308.     animation-name: none !important;
  309. }
  310.  
  311.                                                                                               /* dropdown background colors */
  312.  
  313. #urlbar[breakout][breakout-extend][open] > #urlbar-background {
  314.     background-color: #f6f6f6 !important;
  315. }
  316. /*default for panels - downloads , hamburger*/
  317. panelview {
  318.   --arrowpanel-background: #f6f6f6 !important;
  319. }
  320. /*bookmarks toolbar*/
  321. #PlacesToolbar menupopup[placespopup="true"] {
  322.   --arrowpanel-background: #f6f6f6 !important;
  323. }
  324.                                                                           /* top "blue bar" display */  
  325. .urlbarView-row:first-of-type {
  326.     display: none !important;
  327.   }
  328.                                                                                  /* white line bottom */
  329. #navigator-toolbox {
  330.   border-bottom: none !important;
  331. }
  332.                                                             /* URL bar separator transparent */
  333. #urlbar{
  334.   --autocomplete-popup-separator-color: rgba(87, 80, 68, 0.0) !important;
  335. }
  336.  
  337.  
  338.                                                                               /* hide URL bar icons */
  339. #tracking-protection-icon-box {
  340.     display: none !important;
  341. }
  342. #reader-mode-button {
  343.     display: none !important;
  344. }
  345. #identity-icon {
  346.     display: none !important;
  347. }
  348. #permissions-granted-icon {
  349.     display: none !important;
  350. }
  351. #blocked-permissions-container {
  352.     display: none !important;
  353. }
  354. #star-button-box {
  355.     opacity: 0.0 !important;
  356. }
  357.                                                                             /* disable mute buttons */
  358.  
  359. /* keep page icon, hide soundplaying */
  360. .tabbrowser-tab .tab-icon-stack[soundplaying] .tab-icon-image {
  361.     opacity: 1 !important;
  362. }
  363. .tabbrowser-tab .tab-icon-stack[soundplaying] .tab-icon-overlay {
  364.     display: none !important;
  365. }
  366.  
  367. /* tab disable 'playing' / Wiedergabe text */
  368. .tab-icon-sound-label {
  369.     display: none !important;
  370. }
  371.                                                                                            /*  Favicon Saturation  */
  372.  
  373. .tabbrowser-tab .tab-icon-image {
  374.     filter: grayscale(40%) !important;
  375. }
  376. #personal-bookmarks .bookmark-item:not([container=true]) .toolbarbutton-icon {
  377.    filter: grayscale(40%) !important;
  378. }
  379. #PlacesToolbarItems .bookmark-item .menu-iconic-icon {
  380.    filter: grayscale(40%) !important;
  381. }
  382. #PlacesToolbar #OtherBookmarks .menu-iconic-icon {
  383.    filter: grayscale(40%) !important;
  384. }
  385. /* icon saturation , only uBlock */
  386. #ublock0_raymondhill_net-browser-action {
  387.     filter: grayscale(40%) !important;
  388. }
  389. .urlbarView-favicon {
  390.     filter: grayscale(40%) !important;
  391. }
  392. .tab-drop-indicator {
  393.     filter: grayscale(85%) !important;
  394. }
  395. /* tab loading icon */
  396. .tab-throbber::before {
  397.     fill: rgba(87, 80, 68, 0.6, 1.0) !important;
  398.     opacity: 1 !important;
  399. }
  400.                                                                                                    /*** Menu Spacing ***/
  401.  
  402. /*** Tighten up drop-down/context/popup menu spacing ***/
  403. .menupopup:not(.in-menulist) > menuitem,
  404. menupopup:not(.in-menulist) > menu {
  405.   padding-block: 3px !important; /* reduce to 3px, 2px, 1px or 0px as needed */
  406.   min-height: unset !important; /* v92.0 - for padding below 4px */
  407. }
  408.  
  409. :root {
  410.   --arrowpanel-menuitem-padding: 4px 8px !important;
  411. }
  412.                                                                                                          /* Square Buttons */
  413. :root{
  414.   --arrowpanel-border-radius: 0 !important;
  415.   --tab-border-radius: 0 !important;
  416.   --toolbarbutton-border-radius: 0 !important;
  417.   --arrowpanel-menuitem-border-radius: 0 !important;
  418. }
  419.  
  420.                                                       /*****      Tabs color / hover color / shadow Tabs    *****/
  421.  
  422.                                                                                          /*     selected tab no shadow   */
  423. .tab-background[selected="true"] {
  424.     background-image: none !important;
  425.     box-shadow: none !important;
  426. }
  427.                                                                                       /**  Tabs shadow box , COLOR  **/
  428.  
  429. /* Override color for selected tabs */
  430. .tabbrowser-tab[selected] .tab-content {
  431.     background-color: #DCDCDC !important;
  432.     box-shadow: inset 0px -16px 18px -10px rgba(125, 125, 125, 0.15) !important;
  433. }
  434. /* Override color for unselected tabs */
  435. .tabbrowser-tab:not([selected]) {
  436.     background-color: #B2B2B2 !important;
  437.     box-shadow: inset 0px -16px 18px -10px rgba(125, 125, 125, 0.4) !important;
  438. }
  439.  
  440. /* Override hover color for unselected tabs */
  441. /*
  442. .tabbrowser-tab:not([selected]):hover .tab-content {
  443.     background-color: rgba(128, 128, 128, 0.025) !important;
  444.     box-shadow: inset 0px -16px 18px -10px rgba(125, 125, 125, 0.4) !important;
  445. }
  446. */
  447.                                                                               /* New Tab button color / hover COLOR */
  448. /* Override color for New Tab button */
  449. #tabs-newtab-button.toolbarbutton-1 .toolbarbutton-icon {
  450.     background-color: #B2B2B2 !important;
  451.     box-shadow: inset 0px -16px 18px -10px rgba(125, 125, 125, 0.4) !important;
  452.    fill: rgba(0, 0, 0, 0.6) !important;
  453. }
  454.  
  455. /* Override hover color for new tabs  button */
  456. #tabs-newtab-button.toolbarbutton-1:hover .toolbarbutton-icon {
  457.     background-color: rgba(0, 0, 0, 0.1) !important;
  458.     box-shadow: inset 0px -16px 18px -10px rgba(125, 125, 125, 0.4) !important;
  459. }
  460.  
  461.                                                                                              /* Tab remove only FF favicon */
  462.  
  463. .tabbrowser-tab .tab-icon-image[src="chrome://branding/content/icon32.png"] {
  464.   display: none !important;
  465. }
  466.  
  467.                                                                                                  /*** Safari tabs , Full Width ***/
  468.  
  469. .tabbrowser-tab[fadein]:not([style^="max-width"]) {
  470.     max-width: 100vw !important;
  471. }
  472. /* remove spacers, window buttons  */
  473. .titlebar-buttonbox-container {
  474.     display: none !important;
  475. }
  476. .titlebar-spacer[type="pre-tabs"]{
  477.     display: none !important;
  478. }
  479. .titlebar-spacer[type="post-tabs"]{
  480.     display: none !important;
  481. }
  482.  
  483.                                                                                                          /*** Tabs bar Bottom ***/
  484. #titlebar {
  485.   -moz-box-ordinal-group: 2 !important;
  486. }
  487.  
  488.                                                                                /*** Tab Content Center - Icons , Text  ***/
  489.  
  490. /*
  491. .tabbrowser-tab[selected]:not(:hover):not([pinned]) .tab-label-container,
  492. #tabbrowser-tabs:not([closebuttons="activetab"])
  493.  .tabbrowser-tab:not(:hover):not([pinned]) .tab-label-container {
  494.     margin-inline-end: 0px !important;
  495. }
  496. */
  497. /*
  498. .tabbrowser-tab:not([selected]):hover:not([pinned]) .tab-label-container,
  499. #tabbrowser-tabs:not([closebuttons="activetab"])
  500.  .tabbrowser-tab:hover:not([pinned]) .tab-label-container {
  501.    margin-inline-end: 0px !important;
  502. }
  503. */                                                                                                       /***  Center Content  ***/
  504.  
  505. .tab-content:not([pinned])::before {
  506.   display: -moz-box !important;
  507.   content: "" !important;
  508.   -moz-box-flex: 1 !important;
  509. }
  510.  
  511.                                                                                            /* Tab text higher wegen border */
  512. .tabbrowser-tab {
  513.     margin-top: -1px !important;
  514. }
  515.  
  516.                                                                                                    /*  Tab X close icon larger  */
  517. .tabbrowser-tab .close-icon {
  518.    /*height: 28px !important;*/
  519.    width: 24px !important;
  520.    margin: -4px -8px -4px -8px !important;
  521.    padding: 5px !important;
  522.    fill: rgba(0, 0, 0, 0.6) !important;
  523. }
  524.  
  525.                                                                                           /***    Tab X close buttons left    ***/
  526. .tab-close-button {
  527.     -moz-box-ordinal-group: 0 !important;
  528.     /*padding-left: 7px !important;*/
  529. }
  530. /* Text */
  531. .tab-label {
  532.     margin-right: 28px !important;
  533. }
  534. /* Icon, Iconhintergrund */
  535. .tab-icon-stack {
  536.     margin-left: 14px !important;
  537. }
  538.  
  539.                                     /* Tab close buttons hover only , close button highlighted, separate */
  540.  
  541.  
  542.                                                                                       /*  Tab X close buttons hover color  */
  543. .tabbrowser-tab[selected] .close-icon:hover {
  544.     background-color: rgba(0, 0, 0, 0.1) !important;
  545.     outline: none !important;
  546.     visibility: visible !important;
  547. }
  548. .tabbrowser-tab:not([selected]) .close-icon:hover {
  549.     background-color: rgba(0, 0, 0, 0.1) !important;
  550.     outline: none !important;
  551.     visibility: visible !important;
  552. }
  553.                                                                                            /*** Tab X show / hide Oneline ***/
  554. /* tab close buttons hover only */
  555.  
  556. .tabbrowser-tab[selected]:not(:hover):not([pinned]) .tab-close-button,
  557. .tabbrowser-tab:not([selected]):not(:hover):not([pinned]) .tab-close-button {
  558.     display: -moz-box !important;
  559.     visibility: hidden !important;
  560. }
  561.  
  562. .tabbrowser-tab[selected]:hover:not([pinned]) .tab-close-button,
  563. .tabbrowser-tab:not([selected]):hover:not([pinned]) .tab-close-button {
  564.     display: -moz-box !important;
  565.     visibility: visible !important;
  566. }
  567.  
  568.  
  569.                                                      
  570.  
  571.  
Add Comment
Please, Sign In to add comment
Public Pastes
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!