API tools faq
paste
Advertisement
GodieGun

ogx_left-sidebar.css

GodieGun
Jan 10th, 2025
53
0
20 hours
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 58.37 KB | None | 0 0
raw download clone embed print report
  1. /* Source file made available under Mozilla Public License v. 2.0 See the main repository for updates as well as full license text.
  2.    https://github.com/Godiesc/firefox-gx */
  3.  
  4. @media (-moz-bool-pref:"firefoxgx.left-sidebar") {
  5.  
  6.     /* _______________________ Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/vertical_bookmarks_toolbar.css ------------------- */
  7.  
  8.     /* Makes bookmarks toolbar appear vertically at the left side of the window */
  9.  
  10.     #navigator-toolbox{ position: relative }
  11.     #PersonalToolbar{
  12.         position: absolute;
  13.         display: flex;
  14.         flex-direction: column;
  15.         top: 100%;
  16.         inset-inline-start: 0;
  17.         width: var(--my-vertical-toolbar-width,0);
  18.         min-width: unset !important;
  19.         /* These create a empty area to the bottom of the toolbar, which is to mask a fact that we don't know exactly how high the toolbar should be */
  20.         height: 100vh;
  21.         max-height: 100vh !important;
  22.         padding-bottom: 120px !important;
  23.         padding-inline: 0px !important;                                                           /* Mi edit */
  24.     }
  25.     #PersonalToolbar .toolbarbutton-1 {
  26.         max-width: calc(var(--my-vertical-toolbar-width) - 1px) !important;                       /* Mi edit - Tamaño horizontal ionos default */
  27.         /*--toolbarbutton-inner-padding: 8px !important;                                          /* Mi edit */
  28.         margin: 0px !important;
  29.     }
  30.  
  31.     #PersonalToolbar toolbaritem{                                                               /* My new code Tamaño horizontal ionos extensiones y  marcadores */
  32.         max-width: calc(var(--my-vertical-toolbar-width) - 1px) !important;                      
  33.         margin: 0px !important;
  34.     }
  35.  
  36.     #OtherBookmarks{                                                                            /* My new code - boton OtherBookmarks */
  37.         margin-inline: 0px !important;  
  38.     }
  39.  
  40.     #PersonalToolbar #PlacesChevron{
  41.         display: none;
  42.     }
  43.     #PersonalToolbar > #personal-bookmarks{
  44.         overflow-y: auto;
  45.         scrollbar-width: none;
  46.         height: 100vh;
  47.     }
  48.  
  49.     #PlacesToolbar,
  50.     #PlacesToolbarDropIndicatorHolder{
  51.         flex-direction: column;
  52.     }
  53.  
  54.     #PersonalToolbar #PlacesToolbarItems{
  55.         display: flex !important;
  56.         flex-direction: column;
  57.         overflow-y: auto;
  58.         scrollbar-width: none;
  59.     }
  60.     #PersonalToolbar > toolbaritem{
  61.         justify-content: center;
  62.     }
  63.     #PersonalToolbar #PlacesToolbarItems > toolbarseparator{
  64.         height: 7px;
  65.         max-width: var(--my-vertical-toolbar-width) !important;                                             /* My code */
  66.         margin-inline: 14px !important;                                                                     /* My code */
  67.         background-color: var(--general-color) !important;                                                  /* My edit */
  68.         background-clip: padding-box;
  69.         border-block: 3px solid transparent !important;
  70.     }
  71.  
  72.     #PersonalToolbar #PlacesToolbarItems > .bookmark-item{
  73.         padding-block: 4px !important;
  74.         margin-inline: 0 !important;
  75.     }
  76.  
  77.     :root:not([chromehidden~="toolbar"],[inDOMFullscreen],[sizemode="fullscreen"]):has(#PersonalToolbar[collapsed="false"]) {
  78.         &>body>#browser,
  79.         &>body>#browser-bottombox,
  80.         &>body>#customization-container {
  81.             margin-inline-start: var(--my-vertical-toolbar-width, 0px);
  82.         }
  83.     }
  84.  
  85.     /* You should probably disable this if you have Firefox < 113 */
  86.     #PersonalToolbar #PlacesToolbarItems{
  87.         display: -webkit-box !important;
  88.         -webkit-box-orient: vertical !important;
  89.     }
  90.    
  91. /* ______________________________________________________ Keep left-sidebar in 'Fullscreen' ______________________________________________________ */
  92.    
  93.     /* Bookmarks-bar visible */
  94.    
  95.     :root[inFullscreen]:not([macOSNativeFullscreen]):not(:has(#PersonalToolbar[collapsed="true"])) toolbar:is(#PersonalToolbar):not([fullscreentoolbar="true"]) {
  96.         visibility: visible !important;
  97.     }
  98.    
  99.     /* Shows #navigator-toolbox when 'hover' on left-sidebar */
  100.    
  101.     :root[inFullscreen]:not([macOSNativeFullscreen]):has(#PersonalToolbar:hover) #navigator-toolbox {
  102.         margin-top: 0px !important;
  103.     }
  104.    
  105.     /* Keep left-sidebar visible when some contextual menu appears
  106.        - Keep navigator-toolbox visible when bookmarks-folder are 'open' */
  107.    
  108.      #main-window:has(
  109.         #appMenu-popup:is([panelopen="true"]),                      /* Hamburger menu open */
  110.         panel[type="arrow"]:is([panelopen="true"]),                 /* Arrowpanels open */
  111.         .bookmark-item[open],                                       /* BOokmarks-folder 'open' */
  112.         #customizationui-widget-panel[panelopen="true"],            /* Extensions panels 'open' */
  113.         #tabContextMenu[hasbeenopened]:hover,                       /* Some contextual menus ¯v*/
  114.         #new-tab-button-popup[hasbeenopened]:hover,
  115.         #toolbar-context-menu[hasbeenopened]:hover,
  116.         .tab-group-editor-panel[hasbeenopened]:hover) {
  117.             & #PersonalToolbar {
  118.                 width: var(--my-vertical-toolbar-width) !important;
  119.                 max-width: var(--my-vertical-toolbar-width) !important;
  120.                 opacity: 1 !important;
  121.                 border-image: linear-gradient(to bottom, transparent var(--space-before-gradient-line),
  122.                                             var(--general-color) var(--space-before-gradient-line),
  123.                                             var(--button-hover-bgcolor) 52%, transparent 94%) 1 !important;
  124.             }
  125.             & #navigator-toolbox {
  126.                 margin-top: 0px !important;
  127.             }
  128.     }
  129.    
  130.     /* ____________ Web content moved right when toolbars are in 'autohide' */
  131.  
  132.     @media (-moz-bool-pref:"browser.fullscreen.autohide") {
  133.        
  134.         /* Width of left-sidebar when #navigator-toolbox 'hidden' */
  135.  
  136.         :root[inFullscreen]:not([macOSNativeFullscreen]):has(#navigator-toolbox:not(:hover)) toolbar:is(#PersonalToolbar):not([fullscreentoolbar="true"]) {
  137.             width: 1px !important;
  138.             opacity: 0 !important;
  139.             border-image: linear-gradient(to bottom, transparent, transparent) !important;
  140.             background-image: none !important;
  141.             transition: width 0.2s ease, opacity 0.2s ease !important;
  142.             transition-delay: 100ms !important;
  143.         }
  144.  
  145.         /* Web content mover right when left-sidebar in visible */
  146.  
  147.         :root[inFullscreen]:not([macOSNativeFullscreen],[inDOMFullscreen]):has(#PersonalToolbar[collapsed="false"]):has(        
  148.         #navigator-toolbox[style=""],                                 /* tabs-bar and nav-bar hover */
  149.         #PersonalToolbar:hover,                                       /* Bookmarks-bar 'hover' */
  150.         .bookmark-item[open],                                         /* BOokmarks-folder 'open' */
  151.         #customizationui-widget-panel[panelopen="true"],              /* Some contextual menus open */
  152.         #appMenu-popup[panelopen="true"]                              /* Extensions panels 'open' */
  153.         ){
  154.             #browser,
  155.             #browser-bottombox,
  156.             #main-window > body::after, /* This selector is for compatibility with tabs_below_content.css */
  157.                 #customization-container{
  158.                     margin-inline-start: var(--my-vertical-toolbar-width,41px) !important;
  159.             }
  160.         }
  161.        
  162.         /* Allow show Left-sidebar when 'hover' on left of screen */
  163.  
  164.         :root[inFullscreen]:not([macOSNativeFullscreen],[inDOMFullscreen]) toolbar:is(#PersonalToolbar):not([fullscreentoolbar="true"]):not(:hover) {
  165.             z-index: 3 !important;
  166.         }
  167.     }
  168.    
  169.     /*____________ Web content moved right when toolbars are 'not in autohide' */
  170.    
  171.     @media not (-moz-bool-pref:"browser.fullscreen.autohide") {
  172.        
  173.         :root:not([chromehidden~="toolbar"],[inDOMFullscreen]):has(#PersonalToolbar[collapsed="false"]),
  174.         :root:not([chromehidden~="toolbar"],[inDOMFullscreen]):not(:has(#sidebar-main[hidden="true"],sidebar-main[hidden]))/**/{
  175.             #browser,
  176.             #browser-bottombox,
  177.             #main-window > body::after, /* This selector is for compatibility with tabs_below_content.css */
  178.                 #customization-container{
  179.                     margin-inline-start: var(--my-vertical-toolbar-width,0) !important;
  180.             }
  181.         }
  182.     }
  183.    
  184. /* _______________________ Warning when using this style without the bookmarks toolbar set to 'Always show' _______________________ */
  185.    
  186.     /* Message */
  187.    
  188.     /* animación */
  189.     @keyframes messageappeardisappear{
  190.         0%{ opacity: 1 }
  191.         80%{ opacity: 1 }
  192.         100%{ opacity: 0 }}
  193.    
  194.     :root:has(#PersonalToolbar[collapsed="true"]):not([chromehidden~="toolbar"],[inFullscreen]) {
  195.         #tabbrowser-tabbox:before {
  196.             display: flex;
  197.             position: absolute;
  198.             content: 'To show the "Left Sidebar" you need to set your Bookmarks toolbar to: "Always Show" - you can use this shortcut: "Ctrl + Shift + B"';
  199.             width: 100%;
  200.             opacity: 0;
  201.             padding-block: 2px;
  202.             top: 1px;
  203.             justify-content: center !important;
  204.             text-align: center !important;
  205.             background-color: var(--general-color);
  206.             color: var(--contrast-color);
  207.             z-index: 3;
  208.             animation: messageappeardisappear linear 9s !important;
  209.         }
  210.     }
  211.  
  212. /* ______________________________________________________ My code to adapt to the GX style ______________________________________________________ */
  213.  
  214. /* Position and style of the left-bookmarks-sidebar */
  215.  
  216.     :root:not([chromehidden~="toolbar"]) #PersonalToolbar {
  217.         --toolbar-bgcolor: transparent !important;
  218.         --toolbarbutton-hover-background: transparent !important;
  219.         --toolbarbutton-active-background: transparent !important;
  220.         --toolbarbutton-hover-personal: transparent !important;
  221.         --toolbarbutton-icon-fill: color-mix(in srgb, var(--general-color) 90%, transparent) !important;
  222.         --toolbarbutton-border-radius: 0px !important;
  223.        
  224.         --height-left-sidebar: calc(100vh + var(--space-before-gradient-line)) !important;
  225.  
  226.         --space-before-gradient-line: calc(var(--windowed-top-padding, 0px) + var(--menubar-height-personal,0px) + var(--tab-height-personal)) !important;
  227.        
  228.         --padding-top-left-sidebar: calc(var(--space-before-gradient-line) + var(--toolbar-height-personal) - var(--menubar-height-personal, 0px) - 10px) !important;
  229.         --padding-bottom-left-sidebar: calc(var(--space-before-gradient-line) + 10px) !important;
  230.    
  231.         height: var(--height-left-sidebar) !important;
  232.         max-height: var(--height-left-sidebar) !important;
  233.         background-color: var(--lwt-frame) !important;
  234.         background-image: inherit !important;
  235.         background-size: cover !important;
  236.  
  237.         /* Top-bottom margins */
  238.         padding-top: var(--padding-top-left-sidebar) !important;
  239.         padding-bottom: var(--padding-bottom-left-sidebar) !important;
  240.  
  241.         /* Gradient line */
  242.         margin-top: calc(0px - var(--space-before-gradient-line) - var(--toolbar-height-personal)) !important;
  243.         border-inline-end: 1px solid transparent !important;
  244.         border-image: linear-gradient(to bottom, transparent var(--space-before-gradient-line),
  245.                                             var(--general-color) var(--space-before-gradient-line),
  246.                                             var(--button-hover-bgcolor) 52%, transparent 94%) 1 !important;
  247.     }
  248.    
  249. /* Remove items label from sidebar */
  250.  
  251.     #personal-bookmarks .bookmark-item>.toolbarbutton-text, #PersonalToolbar #import-button label {
  252.         display: none !important;
  253.     }
  254.    
  255.     /* Also remove the space after the icon - it serves to center */
  256.     #PlacesToolbarItems > .bookmark-item > .toolbarbutton-icon[label]:not([label=""]),                      /* Marcadores */
  257.     #OtherBookmarks.bookmark-item[container] > .toolbarbutton-icon,                                         /* OtrosMarcadores */
  258.     #bookmarks-toolbar-placeholder > .toolbarbutton-icon{                                                   /* MArcadores en customization mode*/
  259.         margin-inline: 0px !important;
  260.     }
  261.    
  262. /* Firefox view icon */
  263.    
  264.     toolbar:is(#PersonalToolbar) #firefox-view-button[aria-pressed="true"] .toolbarbutton-icon {
  265.         border-radius: 4px !important;
  266.     }
  267.    
  268.     #firefox-view-button image {
  269.         list-style-image: url("../icons/firefoxview-close.svg") !important;
  270.     }
  271.  
  272.     #firefox-view-button[aria-pressed="false"]:active .toolbarbutton-icon{
  273.         list-style-image: url("../icons/firefoxview-close.svg") !important;
  274.         transition-duration: 0ms !important;
  275.     }
  276.    
  277.     #firefox-view-button[aria-pressed="true"]:not(:active) .toolbarbutton-icon{
  278.         list-style-image: url("../icons/firefoxview-open.svg") !important;
  279.         transition-duration: 0ms !important;
  280.     }
  281.    
  282. /* Smooth transition of bookmark items */
  283.    
  284.     #PersonalToolbar #PlacesToolbarItems>.bookmark-item .toolbarbutton-icon,            /* Marcadores - used in left-sidebar */
  285.     #PersonalToolbar #OtherBookmarks:not(bookmark-item) .toolbarbutton-icon {           /* Other bookmark folder - used in left-sidebar */
  286.         transition: all 0.2s ease !important;
  287.     }    
  288.    
  289. /* Zoom on :hover items */
  290.    
  291.     /* animación */
  292.     @keyframes scalezoom{
  293.         0%{ transform:scale(1.2) }
  294.         50%{ transform:scale(0.7) }
  295.         100%{ transform:scale(1.0) }}
  296.    
  297.    /* 'hover' Extensions */
  298.    
  299.     #PersonalToolbar .toolbarbutton-1:is(:hover):not(:active,[open]) .toolbarbutton-icon:not(.toolbarbutton-1>image),   /* Extensiones */
  300.     #PersonalToolbar .toolbarbutton-1:is(:hover):not(:active,[open]) .toolbarbutton-badge-stack image {                 /* account icon, download icon, etc */
  301.         transform: scale(1.2) !important;
  302.         transition-duration: 200ms !important;
  303.     }
  304.    
  305.     /* Click animation on Extensions */
  306.    
  307.     #PersonalToolbar .toolbarbutton-1:is(:active,[open]) .toolbarbutton-icon:not(.toolbarbutton-1:is(:active, [open])>.toolbarbutton-icon),
  308.     #PersonalToolbar .toolbarbutton-1:is(:active, [open]) .toolbarbutton-badge-stack image{
  309.         animation: scalezoom linear 250ms !important;
  310.     }
  311.    
  312.     /* 'hover' other icons */
  313.    
  314.     #PersonalToolbar {
  315.         & .toolbarbutton-1:is(:hover):not(:active,[open])>image,                                           /* íconos default */
  316.         & #PlacesToolbarItems>.bookmark-item:is(:hover,:active):not([open])>.toolbarbutton-icon,           /* Marcadores */
  317.         & #OtherBookmarks:not(bookmark-item):is(:hover,:active):not([open])>.toolbarbutton-icon{           /* Other bookmarks button */
  318.             transform: scale(1.2) !important;
  319.             transition-duration: 200ms !important;
  320.         }}
  321.    
  322.     /* Clic default icons */
  323.    
  324.     #PersonalToolbar {
  325.         & .toolbarbutton-1:is(:active):not([open])>image {                                                 /* íconos default */
  326.             transform: scale(0.8) !important;
  327.             transition-duration: 200ms !important;
  328.         }}
  329.    
  330.     #PersonalToolbar {
  331.         & .toolbarbutton-1:is([open]):not(:active)>image {                                                 /* íconos default */
  332.             transform: scale(1.0) !important;
  333.             transition-duration: 200ms !important;
  334.         }}
  335.    
  336.     /* Click animation on bookmarks */
  337.    
  338.     #PersonalToolbar {
  339.         & #PlacesToolbarItems>.bookmark-item:is([open]):not(:active)>.toolbarbutton-icon,                  /* Marcadores */
  340.         & #OtherBookmarks:not(bookmark-item):is([open]):not(:active)>.toolbarbutton-icon{                  /* Other bookmarks button */
  341.             animation: scalezoom ease-in-out 250ms !important;
  342.             transition:  200ms !important;
  343.         }}
  344.    
  345. /* Vertical Size of Sidebar Items */
  346.    
  347.     #PersonalToolbar .toolbarbutton-1,
  348.     #PersonalToolbar #PlacesToolbarItems>.bookmark-item{
  349.         margin-block: 10px !important;
  350.         /*background-color: blue !important;/**/
  351.     }
  352.    
  353. /* Default buttons click effect and extensions
  354.    
  355.     @keyframes scale-up-center{
  356.         0%{ background-color: color-mix(in srgb, transparent 82%, var(--lwt-tab-text));
  357.             border-radius: 50%;
  358.             width: 22px;
  359.             height: 22px;}
  360.        60%{ background-color: color-mix(in srgb, transparent 90%, var(--lwt-tab-text));
  361.             border-radius: 10%;
  362.             width: calc(var(--my-vertical-toolbar-width) + 0px);
  363.             height: 32px;}
  364.       100%{ background-color: transparent;
  365.             border-radius: 0%;
  366.             width: calc(var(--my-vertical-toolbar-width) + 20px);}}
  367.    
  368.     #PersonalToolbar .toolbarbutton-1:is([open])::after{
  369.         content: "";  display: -moz-box;  position: absolute !important;
  370.         align-self: center !important;
  371.         background-color: transparent;
  372.         border-radius: 0px;
  373.         animation: scale-up-center 700ms !important;
  374.     }*/
  375.    
  376. /* Fix bookmarks separator style */
  377.    
  378. #PersonalToolbar #PlacesToolbarItems toolbarseparator {
  379.     border-image: none !important;
  380. }
  381.    
  382. /* Separator using 'flexible space' */
  383.  
  384.     #PersonalToolbar toolbarpaletteitem[place="toolbar"][id^="wrapper-customizableui-special-spring"], #PersonalToolbar toolbarspring {
  385.         background: var(--general-color) !important;
  386.         width: calc(var(--my-vertical-toolbar-width) - 29px) !important;
  387.         min-width: 0px !important;
  388.         min-height: 1px !important;
  389.         max-height: 1px !important;
  390.         margin-inline: 14px !important;
  391.         margin-block: 6px !important;
  392.     }
  393.    
  394. /* ____________________________________________ items in "customize toolbar" mode ____________________________________________ */
  395.  
  396. /* 'Flexible space' separator in customize mode */
  397.  
  398.     #PersonalToolbar toolbarpaletteitem[place="toolbar"][id^="wrapper-customizableui-special-spring"] {
  399.         min-width: calc(var(--my-vertical-toolbar-width) - 20px) !important;
  400.         min-height: 4px !important;
  401.         max-height: 4px !important;
  402.         margin-inline-start: 10px !important;
  403.     }
  404.  
  405. /* Removes counter and flexible space bug, in customize mode */
  406.    
  407.     #PersonalToolbar toolbarpaletteitem[place="toolbar"] > toolbarspring,
  408.     #PersonalToolbar toolbarpaletteitem[place="toolbar"] toolbaritem toolbarbutton .toolbarbutton-badge{
  409.         display: none !important;
  410.     }
  411.  
  412. /* Align items in customize mode */
  413.  
  414.     #PersonalToolbar toolbarpaletteitem[place="toolbar"] {
  415.         justify-content: center !important;
  416.     }
  417.    
  418. /* _________________________________________________________ Extensions _________________________________________________________ */
  419.  
  420. /* Hide counter when it is "0" */
  421.  
  422. toolbaritem toolbarbutton[badge="0"]:not(:hover) .toolbarbutton-badge { opacity: 0 !important; }
  423.  
  424. /* Extension counter */
  425.  
  426. #PersonalToolbar .toolbarbutton-badge {
  427.     background-color: var(--button-hover-bgcolor) !important;
  428.     color: white !important;
  429.     margin-inline-end: -9px !important;
  430.     margin-block-end: -4px !important;
  431.     min-width: auto !important;
  432.     max-width: auto !important;
  433.     align-self: end !important;
  434. }
  435.    
  436. #PersonalToolbar toolbaritem>toolbarbutton>.toolbarbutton-badge-stack>.toolbarbutton-icon {
  437.     height: 17px !important;
  438.     width: 17px !important;
  439. }
  440.    
  441. /* Gx Theme Styles Extension */
  442. #PersonalToolbar #gxthemestyles_godie-BAP { list-style-image: url("../icons/logo_gx-theme-styles.svg") !important; }
  443.    
  444. /* ChatGPT Extension */
  445. #PersonalToolbar #_87f371f2-66bd-4535-a920-c696f2669122_-BAP,
  446. #PersonalToolbar #_63ec59d8-ba50-4d88-917e-fb65af892a39_-BAP { list-style-image: url("../icons/logo_chatgpt.svg") !important; }
  447.  
  448. /* Twitch Extension */
  449. #PersonalToolbar #_d3d2a327-1ae0-4fd6-b732-0844d0b7fd4c_-BAP { list-style-image: url("../icons/logo_twitch.svg") !important; }
  450.  
  451. /* Messenger Extension */
  452. #PersonalToolbar #xrst_vardakis_gmail_com-BAP { list-style-image:url("../icons/logo_messenger.svg") !important; }
  453.  
  454. /* Whatsapp Extension */
  455. #PersonalToolbar #_34a257f3-adfe-460d-b6ca-7dd18d18506b_-BAP,
  456. #PersonalToolbar #chatwappinsidebar_godie-BAP{ list-style-image: url("../icons/logo_whatsapp.svg") !important; }
  457.    
  458. /* Spotify Extension */
  459. #PersonalToolbar #sidebarspotyplay_godie-BAP,
  460. #PersonalToolbar #_1d0f1bc6-5e9c-4450-aef5-75cefb44660f_-BAP { list-style-image: url("../icons/logo_spotify.svg") !important; }
  461.  
  462. /* Telegram Extension */
  463. #PersonalToolbar #_14390478-b41b-4e29-8307-8a3c714f7783_-BAP{ list-style-image: url("../icons/logo_telegram.svg") !important; }
  464.  
  465. /* ublock Extension */
  466. #PersonalToolbar #ublock0_raymondhill_net-BAP{ list-style-image: url("../icons/logo_ublock.svg") !important; }
  467.  
  468. /* Tab-group Extension */
  469. #PersonalToolbar #panorama-tab-groups_example_com-BAP{ list-style-image: url("../icons/logo_grouptabs.svg") !important; }
  470.  
  471. /* Discord Extension */
  472. #PersonalToolbar #_a16c3799-d903-44e3-b044-a032197f5ef8_-BAP{ list-style-image: url("../icons/logo_discord.svg") !important; }
  473.  
  474. /* Twitter Extension */
  475. #PersonalToolbar #_3119ae66-3c2f-47e2-b1b1-1c76cb9c4ec1_-BAP{ list-style-image: url("../icons/logo_twitter.svg") !important; }
  476.    
  477. /* Simple Translate extension */
  478. #PersonalToolbar #simple-translate_sienori-BAP { list-style-image: url("../icons/translations.svg") !important; }
  479.    
  480. /* Bitwarden extension */
  481. #PersonalToolbar #_446900e4-71c2-419f-a6a7-df9c091e268b_-BAP { list-style-image: url(../icons/logo_bitwarden.svg) !important; }
  482.    
  483. /* Tree-tabs extension */
  484. #PersonalToolbar #treestyletab_piro_sakura_ne_jp-BAP,
  485. #PersonalToolbar #tabcenter-reborn_ariasuni-BAP{ list-style-image: url(../icons/logo_tree-tabs.svg) !important; }
  486.  
  487. /* _______________________________________________ Colored folders for bookmarks _______________________________________________ */
  488.  
  489. #PlacesToolbarItems > .bookmark-item:nth-of-type(9n+1) > .toolbarbutton-icon {
  490.     list-style-image: url("../icons/folder1.svg") !important;
  491. }
  492.  
  493. #PlacesToolbarItems > .bookmark-item:nth-of-type(9n+2) > .toolbarbutton-icon {
  494.     list-style-image: url("../icons/folder2.svg") !important;
  495. }
  496.  
  497. #PlacesToolbarItems > .bookmark-item:nth-of-type(9n+3) > .toolbarbutton-icon {
  498.     list-style-image: url("../icons/folder3.svg") !important;
  499. }
  500.  
  501. #PlacesToolbarItems > .bookmark-item:nth-of-type(9n+4) > .toolbarbutton-icon {
  502.     list-style-image: url("../icons/folder4.svg") !important;
  503. }
  504.  
  505. #PlacesToolbarItems > .bookmark-item:nth-of-type(9n+5) > .toolbarbutton-icon {
  506.     list-style-image: url("../icons/folder5.svg") !important;
  507. }
  508.  
  509. #PlacesToolbarItems > .bookmark-item:nth-of-type(9n+6) > .toolbarbutton-icon {
  510.     list-style-image: url("../icons/folder6.svg") !important;
  511. }
  512.  
  513. #PlacesToolbarItems > .bookmark-item:nth-of-type(9n+7) > .toolbarbutton-icon {
  514.     list-style-image: url("../icons/folder7.svg") !important;
  515. }
  516.  
  517. #PlacesToolbarItems > .bookmark-item:nth-of-type(9n+8) > .toolbarbutton-icon {
  518.     list-style-image: url("../icons/folder8.svg") !important;
  519. }
  520.  
  521. #PlacesToolbarItems > .bookmark-item:nth-of-type(9n+9) > .toolbarbutton-icon {
  522.     list-style-image: url("../icons/folder9.svg") !important;
  523. }
  524.  
  525. /* 'Other Bookmarks' folder */
  526.  
  527. #OtherBookmarks > .toolbarbutton-icon{
  528.     list-style-image: url("../icons/folder-otherbookmarks.svg") !important;
  529. }
  530.  
  531. /* 'tab center reborn' extension compatibility */
  532.  
  533. #sidebar {
  534.     border-inline-end: 1px solid var(--my-content-border-color) !important;
  535.     box-shadow: none !important;
  536.     border-image: none !important;
  537. }
  538.    
  539. /* New position of Open Bookmark Panels in left-sidebar */
  540.    
  541.     #PlacesToolbarItems > .bookmark-item >  menupopup, #OtherBookmarks #OtherBookmarksPopup {
  542.         margin-inline-start: calc(var(--padding-left-tab) - 2px) !important;
  543.         margin-top: -56px  !important;
  544.     }
  545.  
  546.     #PersonalToolbar>toolbarbutton>menupopup {
  547.         margin-right: calc(var(--padding-left-tab) - 9px) !important;
  548.         margin-top: -39px  !important;
  549.     }
  550. /* New position of Paneles when 'open' from left-sidebar
  551.     #customizationui-widget-panel {
  552.         margin-right: calc(var(--padding-left-tab) - 9px) !important;
  553.         margin-top: -39px  !important;
  554.     }
  555. */
  556.     /* Bug fix for MacOS: completely remove left sidebar in full screen
  557.     @media (-moz-platform: macos) {
  558.         :root:is([sizemode="fullscreen"]) #PersonalToolbar{
  559.             display: none !important;
  560.         }
  561.     }*/
  562.  
  563.     /* ______________ Hamburguer Menu button when 'left-sidebar' + 'Firefox Sidebar' are [hidden] with "Ctrl + Shift + B" */
  564.  
  565.     :root:not([chromehidden~="toolbar"]):has(#PersonalToolbar[collapsed="true"]):not(:has(#sidebar-main[hidden="true"],sidebar-main[hidden])) {
  566.         & :not(#PanelUI-button, #PanelUI-menu-button .toolbarbutton-badge-stack) {
  567.             --my-menu-button-height: calc(var(--tab-height-personal) - 1px) !important;
  568.             --my-vertical-toolbar-width: 0px !important;  /* Hide 'Firefox Sidebar' too */
  569.         }
  570.     }
  571.    
  572.     /* Remove unwanted 'left-sidebar' space when it is hidden */
  573.    
  574.     :root:not([chromehidden~="toolbar"]):has(#PersonalToolbar[collapsed="true"]) {
  575.         & #PersonalToolbar {
  576.             --my-vertical-toolbar-width: 0px !important;
  577.             --padding-left-tab: 0px !important;
  578.             height: 0px !important;
  579.         }
  580.     }
  581. }
  582.  
  583. /* __________________________________________________ Variables needed in various scenarios __________________________________________________ */
  584.  
  585. @media (-moz-bool-pref: "sidebar.revamp") or (-moz-bool-pref:"firefoxgx.left-sidebar") or (-moz-bool-pref:"firefoxgx.tree-tabs") {
  586.  
  587.     :root {
  588.         --my-content-border-color: var(--toolbarbutton-hover-personal);                         /* Border around web content */
  589.         --vertical-elements-width: calc(var(--my-vertical-toolbar-width) - 1px) !important;     /* With of sidebar elements */
  590.        
  591.         --my-margin-inline-outer-tab: 3px;                                                      /* Tab margin inline */
  592.         --my-margin-inline-inner-tab: calc(var(--my-margin-inline-outer-tab) + 1px);            /* Tab margin inline */
  593.     }
  594. }
  595.  
  596. @media ((-moz-bool-pref:"sidebar.revamp") and (not (-moz-bool-pref:"sidebar.verticalTabs"))) and (-moz-bool-pref:"sidebar.position_start")
  597.     and (not (-moz-bool-pref:"firefoxgx.left-sidebar")) {
  598.    
  599.         :root {
  600.             --space-before-gradient-line: calc(var(--windowed-top-padding, 0px) + var(--menubar-height-personal, 0px) + var(--tab-height-personal)) !important;
  601.             --padding-top-left-sidebar: calc(var(--space-before-gradient-line) + var(--toolbar-height-personal) - var(--menubar-height-personal, 0px) - var(--button-outer-padding-block-start, 10px)) !important;
  602.         }
  603. }
  604.  
  605. @media (-moz-bool-pref:"sidebar.verticalTabs") and (not ( -moz-bool-pref:"firefoxgx.oneline")) {
  606.    
  607.     :root {
  608.         /* Overwrite this variables to align background-image without the height of '--tab-height-personal' */        
  609.         --space-before-gradient-line: 0px !important;
  610.         --padding-top-left-sidebar: calc(var(--space-before-gradient-line) + var(--toolbar-height-personal) + 1px) !important;
  611.        
  612.         /* Other personal variables - Separator styles */
  613.         --my-separator-border-style: linear-gradient(to right, transparent 4px, var(--general-color) 4px,
  614.                                      var(--general-color) calc(100% - 4px), transparent calc(100% - 4px));
  615.         --my-separator-border-style1:linear-gradient(to right, transparent 6px, var(--my-content-border-color) 6px,
  616.                                      var(--my-content-border-color) calc(100% - 6px), transparent calc(100% - 6px)) 1;
  617.     }
  618. }
  619.  
  620. /* ____________________________________________________________ Sidebars on left ______________________________________________________ */
  621.  
  622. @media (-moz-bool-pref:"firefoxgx.left-sidebar") {
  623.  
  624.     /* Keep padding left of tabs when menubar is always visible */
  625.  
  626.     #toolbar-menubar[autohide="false"]+#TabsToolbar {
  627.         padding-inline-start: var(--padding-left-tab, var(--my-vertical-toolbar-width)) !important;
  628.     }
  629.  
  630.     /* Keep padding left of tabs when menubar is always visible */
  631.  
  632.     :root:has(#PersonalToolbar[collapsed="true"]) #toolbar-menubar[autohide="false"]+#TabsToolbar {
  633.         padding-inline-start: 0px !important;
  634.     }
  635. }
  636.  
  637. @media (-moz-bool-pref: "sidebar.revamp") and (-moz-bool-pref:"sidebar.position_start") {
  638.  
  639.     /* Keep padding left of tabs when menubar is always visible */
  640.  
  641.     :root:not([sizemode="fullscreen"]) #toolbar-menubar[autohide="false"]+#TabsToolbar {
  642.         padding-inline-start: var(--padding-left-tab, var(--my-vertical-toolbar-width)) !important;
  643.     }
  644. }
  645.  
  646. /* _______________________________________________________ Firefox New Sidebar _______________________________________________________
  647.    ___________________________________________________________________________________________________________________________________ */
  648.  
  649. @media (-moz-bool-pref:"sidebar.revamp") {
  650.    
  651.     /* _______________ Style of the Sidebar when isn't expanded _______________ */
  652.    
  653.     :root:has(sidebar-main:not([expanded])) {
  654.  
  655.         /* Width of the Sidebar elements when isn't expanded */
  656.  
  657.         /* External container */
  658.         & #sidebar-main {
  659.             width: var(--my-vertical-toolbar-width) !important;
  660.         }
  661.  
  662.         /* Internal container */
  663.         & .wrapper,
  664.         & sidebar-main  {
  665.             min-width: var(--vertical-elements-width) !important;
  666.         }
  667.  
  668.         /* Tools-and-extensions */
  669.         & .actions-list {
  670.             max-width: var(--vertical-elements-width) !important;
  671.         }
  672.     }
  673.    
  674.     .wrapper {
  675.         background-color: transparent !important;
  676.         min-width: var(--vertical-elements-width) !important;
  677.         margin-inline: 0px !important;
  678.         padding: 0px !important;
  679.     }
  680.    
  681.     .actions-list{
  682.         appearance: none !important;
  683.         min-width: var(--vertical-elements-width) !important;
  684.         padding-inline: 0px !important;
  685.     }
  686.  
  687.     /* _______________ Buttons size the same as the Sidebar to trick 'click on border' _______________ */
  688.    
  689.     /* Remove all padding */
  690.     .actions-list {
  691.         & > moz-button {
  692.                 --button-outer-padding-inline: 0px !important;
  693.                 /*--button-outer-padding-block: 0px !important;/**/
  694.                 --button-outer-padding-inline-start: 0px !important;
  695.                 --button-outer-padding-inline-end: 0px !important;
  696.                 /*--button-outer-padding-block-start: 0px !important;/**/
  697.                 --button-outer-padding-block-end: 0px !important;
  698.         }
  699.     }
  700.    
  701.     /* Size and Vertical space between icons */    
  702.     .button-background {
  703.         &[type~="icon"]:not(.labelled), &:not(.labelled):has(img) {
  704.             background-color: transparent !important;
  705.             min-width: var(--vertical-elements-width) !important;
  706.             padding-block: 18px !important;
  707.         }
  708.     }
  709.    
  710.     /* Zoom on hover */
  711.     .button-background img, .button-background:before { transition-duration: 200ms !important; }
  712.     .button-background[type="icon ghost"]:hover img, .button-background[type="icon ghost"]:hover:before {
  713.         transform: scale(1.2) !important;
  714.     }
  715.    
  716.     /* clic */
  717.     .button-background img, .button-background:before { transition-duration: 200ms !important; }
  718.     .button-background[type="icon ghost"]:active img, .button-background[type="icon ghost"]:active:before {
  719.         transform: scale(0.8) !important;
  720.     }
  721.    
  722.     /* Style icon [open] */
  723.    
  724.     /* This code evit glitch when clic */
  725.     .button-background[type="icon ghost"] img{
  726.         padding: 5px !important;
  727.         border-radius: 4px !important;
  728.     }
  729.    
  730.     .button-background[type="icon"] img{
  731.         fill: white !important;
  732.         background-color: var(--button-hover-bgcolor) !important;/**/
  733.         padding: 5px !important;
  734.         border-radius: 4px !important;
  735.     }
  736.    
  737.     /* Roundness of items when Sidebar is expanded */
  738.    
  739.     .button-background {
  740.         &[type~="icon"], &[type~="ghost"] {
  741.             border-radius: 0px !important;
  742.         }
  743.     }
  744.    
  745.     /* _______________ Styles of Sidebar content [open] _______________ */
  746.    
  747.     .sidebar-panel,
  748.     #sidebar {
  749.         border-radius: 0px !important;
  750.     }
  751.    
  752.     /* Borders of sidebar */
  753.     #sidebar {
  754.         border: none !important;
  755.     }
  756.    
  757.     /* Margins of sidebar */
  758.    
  759.     #sidebar-box {
  760.         padding-block-end: 0px !important;
  761.         padding-inline: 0px !important;
  762.     }
  763.    
  764.     /* Search-box outline color on focus */
  765.    
  766.     .search-container input:focus-visible {
  767.         outline: 1px solid var(--general-color) !important;
  768.         border-color: var(--general-color) !important;
  769.     }
  770. }
  771.  
  772. /* ___________________ Sidebar on left side ____________________ */
  773.    
  774. @media (-moz-bool-pref:"sidebar.revamp") and (-moz-bool-pref:"sidebar.position_start") {
  775.    
  776. }
  777.  
  778. /* ___________________ Sidebar on right side ___________________ */
  779.  
  780. @media (-moz-bool-pref:"sidebar.revamp") and (not (-moz-bool-pref:"sidebar.position_start")) {
  781.    
  782.     /* Color and background image of sidebar */
  783.    
  784.     #sidebar-main {
  785.         background-image: linear-gradient(var(--toolbar-bgcolor, transparent), var(--toolbar-bgcolor, transparent)),
  786.                                           var(--lwt-additional-images,none), var(--lwt-header-image, none) !important;
  787.         background-position: right calc(-88px) !important;
  788.         background-size: auto calc(100% + 88px) !important;
  789.         background-attachment: fixed !important;
  790.     }
  791. }
  792.  
  793. /* ___________________________ Style for 'Sidebar' or 'Vertical Tabs' in left side - without 'left-sidebar' ___________________________
  794.    ____________________________________________________________________________________________________________________________________ */
  795.  
  796. @media (((-moz-bool-pref:"sidebar.revamp") or (-moz-bool-pref:"sidebar.verticalTabs")) and (-moz-bool-pref:"sidebar.position_start")) and (not (-moz-bool-pref:"firefoxgx.left-sidebar")) {
  797.    
  798.     /* Remove unwanted margin in customization mode
  799.    
  800.     :root:not([chromehidden~="toolbar"],[sizemode="fullscreen"])[customizing] #nav-bar {
  801.         padding-inline-start: 0px !important;
  802.     }*/
  803.    
  804.     /* Bookmarks-bar further to the right */
  805.    
  806.     :root:not([chromehidden~="toolbar"],[customizing]) #PersonalToolbar {
  807.         padding-inline-start: calc(var(--padding-left-tab, 0) + 6px) !important;
  808.     }
  809.  
  810.     /* _____________ Color and background image of 'Sidebar' _____________ */
  811.    
  812.     #sidebar-main {
  813.         background-image: linear-gradient(var(--lwt-frame, transparent), var(--lwt-frame, transparent)),
  814.                                           var(--lwt-additional-images,none), var(--lwt-header-image, none) !important;
  815.         background-position: left top !important;
  816.         background-repeat: no-repeat !important;
  817.         background-size: auto 100% !important;
  818.         background-attachment: scroll, fixed, fixed !important;
  819.     }
  820.    
  821.     :root:has(sidebar-main:is([expanded])) {
  822.         & #sidebar-main{
  823.         background-image: linear-gradient(var(--lwt-frame, transparent), var(--lwt-frame, transparent)),
  824.                                           var(--lwt-additional-images,none), var(--lwt-header-image, none) !important;
  825.         background-position: left calc(-11px - var(--padding-top-left-sidebar,0px) - var(--bookmarksbar-height-personal, 0px)) !important;
  826.         background-size: auto calc(100% + 11px + var(--padding-top-left-sidebar) + var(--bookmarksbar-height-personal, 0px)) !important;
  827.         background-attachment: scroll, fixed, fixed !important;
  828.         background-color: transparent !important;
  829.         }
  830.     }
  831.    
  832.     /* Sidebar border and color in fullscreen  
  833.    
  834.     &:root:is([sizemode="fullscreen"]) {
  835.         & #sidebar-main,
  836.         &:has(sidebar-main:is([expanded])) #sidebar-main {
  837.             --lwt-frame: var(--toolbar-bgcolor) !important;
  838.         }
  839.     }*/
  840.    
  841.     /* transparency for Sidebar in themes with images */
  842.    
  843.     :root:is([lwtheme-image],[style*="--lwt-additional-images"]) {
  844.  
  845.         & #sidebar-main,
  846.         & #PersonalToolbar::before,
  847.         & #nav-bar::before{
  848.             --lwt-frame: transparent !important;
  849.         }
  850.     }
  851.    
  852.     /* Simulate continuous line before 'nav-bar and bookmarks-bar' when Sidebar is 'expanded' */
  853.    
  854.     :root:not([customizing]):has(sidebar-main:is([expanded])) {
  855.         & #nav-bar::before,
  856.         & :has(#PersonalToolbar[collapsed="false"]) #PersonalToolbar::before{
  857.             content:"";  position: absolute !important; left: 0 !important;
  858.             background-image: linear-gradient(var(--lwt-frame, transparent), var(--lwt-frame, transparent)),
  859.                 var(--lwt-additional-images,none), var(--lwt-header-image, none) !important;
  860.             background-position: left top !important;
  861.             background-repeat: no-repeat !important;
  862.             background-size: auto 100% !important;
  863.             background-attachment: scroll, fixed, fixed !important;
  864.             background-color: transparent !important;
  865.             border-inline-end: 1px solid var(--general-color) !important;
  866.         }
  867.         & #nav-bar::before{
  868.             width: var(--vertical-elements-width) !important;/**/
  869.             height: calc(var(--toolbar-height-personal) + 3px) !important;
  870.             transition-duration: 0ms !important;
  871.         }
  872.         & :has(#PersonalToolbar[collapsed="false"]) #PersonalToolbar::before{
  873.             width: var(--vertical-elements-width) !important;/**/
  874.             height: calc(var(--bookmarksbar-height-personal) + 2px) !important;
  875.         }
  876.     }
  877.  
  878.     /* Adapt 'Hamburguer Menu' button */
  879.  
  880.     :root:has(sidebar-main:is([expanded])):not([chromehidden~="toolbar"],[customizing]) {
  881.         & #PanelUI-menu-button:not([open]){
  882.             background-color: var(--lwt-frame) !important;
  883.         }
  884.         &:is([lwtheme-image],[style*="--lwt-additional-images"]) #PanelUI-menu-button:not([open]){
  885.             --lwt-frame: transparent !important;
  886.             background-image: linear-gradient(var(--lwt-frame, transparent), var(--lwt-frame, transparent)),
  887.                 var(--lwt-additional-images,none), var(--lwt-header-image, none) !important;
  888.             background-position: left top !important;
  889.             background-repeat: no-repeat !important;
  890.             background-size: auto 100% !important;
  891.             background-attachment: scroll, fixed, fixed !important;
  892.             background-color: transparent !important;
  893.         }
  894.     }
  895.    
  896.     /* Sidebar style when isn't expanded */
  897.    
  898.     :root:has(sidebar-main:not([expanded])) {
  899.         & #sidebar-main {          
  900.                 /* Bakground-color necessary for gradient line color */
  901.             background-color: var(--lwt-frame) !important;
  902.                 /* Top-bottom margins */
  903.             padding-top: var(--padding-top-left-sidebar) !important;
  904.                 /* Gradient line */
  905.             margin-top: calc( -1px - var(--bookmarksbar-height-personal, 0px) - var(--toolbar-height-personal) -
  906.                              var(--space-before-gradient-line)) !important;
  907.             border-inline-end: 1px solid red !important;
  908.             border-image: linear-gradient(to bottom, transparent var(--space-before-gradient-line),
  909.                                             var(--general-color) var(--space-before-gradient-line),
  910.                                             var(--button-hover-bgcolor) 52%, transparent 94%) 1 !important;
  911.         }
  912.     }
  913.    
  914.     :root:has(sidebar-main:is([expanded])) {
  915.         & #sidebar-main {
  916.             /* Bakground-color necessary for gradient line color */
  917.             background-color: var(--lwt-frame) !important;
  918.             border-inline-end: 1px solid transparent !important;
  919.             border-image: linear-gradient(to bottom,
  920.                                             var(--general-color),
  921.                                             var(--button-hover-bgcolor) 52%, transparent 94%) 1 !important;
  922.         }
  923.     }
  924.    
  925.     /* Separator and Expand Gradient line when Sidebar is 'expanded' */
  926.  
  927.     :root:has(sidebar-main:is([expanded])) {
  928.         & #sidebar-main::before {
  929.             position: absolute; content: '';
  930.             width: -moz-available !important;
  931.             /* Bakground-color necessary for gradient line color
  932.             background-color: var(--lwt-frame) !important;*/
  933.             border-block-start: 1px solid red !important;
  934.             /*border-inline-end: 1px solid red !important;/**/
  935.             border-image: linear-gradient(to right, transparent 6px, var(--my-content-border-color) 6px,
  936.                                      var(--my-content-border-color) calc(var(--my-vertical-toolbar-width) - 6px), transparent calc(var(--my-vertical-toolbar-width) - 6px),
  937.                 transparent var(--my-vertical-toolbar-width),
  938.                 var(--general-color) var(--my-vertical-toolbar-width),
  939.                 /* Final gradient */
  940.                 var(--general-color)) 1 !important;
  941.         }
  942.     }
  943. }
  944.  
  945. /* _______________________________________________________ Firefox Vertical Tabs _______________________________________________________
  946.    _____________________________________________________________________________________________________________________________________ */
  947.  
  948. @media (-moz-bool-pref:"sidebar.verticalTabs")  and (not ( -moz-bool-pref:"firefoxgx.oneline")) {
  949.    
  950.     /* Put navbar margin in customization mode
  951.    
  952.     :root:not([chromehidden~="toolbar"],[sizemode="fullscreen"])[customizing] #nav-bar {
  953.             padding-inline-start: var(--vertical-elements-width) !important;
  954.     }*/
  955.    
  956.     /* Darker sidebar when using vertical tabs */
  957.  
  958.     :root:not([chromehidden~="toolbar"],[sizemode="fullscreen"]):is([lwtheme-image],[style*="--lwt-additional-images"]) {
  959.         & #sidebar-main,
  960.         &:has(sidebar-main:is([expanded])) #PanelUI-menu-button:not([open]),    /* Hamburguer menu button - when sidebar is expanded */
  961.         & #PersonalToolbar::before,
  962.         & #nav-bar::before{
  963.             --lwt-frame: color-mix(in srgb, var(--toolbar-bgcolor), transparent) !important;
  964.         }
  965.     }
  966.    
  967.     /* New height of tab */
  968.     #tabbrowser-tabs[orient="vertical"] {
  969.         & .tabbrowser-tab {
  970.             padding-block-end: 1px !important; /* Space between tabs */
  971.         }
  972.     }
  973.    
  974.     /* overwrite code from ogx_tabs-bar.css */
  975.    
  976.     /* New selected tab shape */
  977.    
  978.     .tab-background {
  979.         border-block-end: 1px solid transparent !important;
  980.         border-radius: 0 !important;
  981.         clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
  982.     }
  983.  
  984.     .tab-stack::before {
  985.         border-radius: 0 !important;
  986.         clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);  
  987.     }
  988.    
  989.     /* ___________ Tab 'hover' background-color */
  990.    
  991.     #vertical-pinned-tabs-container {
  992.         & .tab-background {
  993.             .tabbrowser-tab:is(:hover) > .tab-stack > &:not([selected], [multiselected]) {
  994.                 background-color: color-mix(in srgb, var(--general-color) 25%, transparent) !important;
  995.             }
  996.         }
  997.     }
  998.    
  999.     .tabbrowser-tab:not([selected],[multiselected],[visuallyselected])> .tab-stack .tab-background,
  1000.     .tabbrowser-tab[multiselected]:not([selected]) .tab-background {
  1001.         clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
  1002.     }
  1003.    
  1004.     /* Padding to the tab-stack to keep righ-click on tab border */
  1005.     .tabbrowser-tab[visuallyselected] > .tab-stack::before{
  1006.         margin-inline: var(--my-margin-inline-inner-tab) !important;
  1007.         border-radius: 0px !important;
  1008.     }
  1009.    
  1010.     /* Remove unwanted background-color of pinned tabs */
  1011.    
  1012.     #vertical-pinned-tabs-container .tab-background:not([selected], [multiselected]) {
  1013.         background-color: transparent !important;
  1014.     }
  1015.    
  1016.     /* Tabs container width */
  1017.  
  1018.     #tabbrowser-tabs[orient="vertical"] {
  1019.         /* Used for pinned tabs */
  1020.         --tab-collapsed-width: var(--vertical-elements-width) !important;
  1021.         /* used for normal tabs */
  1022.         min-width: var(--vertical-elements-width) !important;
  1023.     }
  1024.  
  1025.     /* Width of tabs when sidebar isn't expanded */
  1026.    
  1027.     #tabbrowser-tabs[orient="vertical"] {
  1028.         .tab-background {
  1029.             --tab-collapsed-background-width: calc(var(--vertical-elements-width) - var(--my-margin-inline-inner-tab)*2) !important;
  1030.             margin-inline: var(--my-margin-inline-inner-tab) !important;
  1031.             min-width: calc(var(--vertical-elements-width) - var(--my-margin-inline-inner-tab)*2) !important;
  1032.         }
  1033.     }
  1034.    
  1035.     /* Center .tab-content */
  1036.  
  1037.     #tabbrowser-tabs[orient="vertical"] {
  1038.         & .tab-content {
  1039.             --tab-inline-padding: calc(var(--vertical-elements-width)/2 - 8px) !important;
  1040.         }
  1041.     }
  1042.    
  1043.     /* Center tabs when Sidebar is expanded */
  1044.    
  1045.     sidebar-main[expanded] > #vertical-tabs > #tabbrowser-tabs[orient="vertical"] .tabbrowser-tab {
  1046.         max-width: 100% !important;
  1047.     }
  1048.    
  1049.     /* Remove unwanted margin of pinned tabs when Sidebar is expanded */
  1050.    
  1051.     #tabbrowser-tabs[orient="vertical"] {
  1052.         & #vertical-pinned-tabs-container {
  1053.             padding-inline: 0px 0px !important;
  1054.         }
  1055.     }
  1056.    
  1057.     /* _____________ Various separators _____________ */
  1058.  
  1059.     /* Separator after pinned tabs */    
  1060.     #vertical-pinned-tabs-container-separator {
  1061.         display: none !important;
  1062.     }
  1063.    
  1064.     /* Margin top of the block of tabs */
  1065.    
  1066.     #vertical-tabs {
  1067.         padding-block-start: 8px !important;
  1068.     }
  1069.    
  1070.       /* Separator bottom when tabs scroll appears */
  1071.     #tabbrowser-tabs[orient="vertical"] {
  1072.         &[overflow]::after {
  1073.             content: "";
  1074.             border-bottom: var(--tabstrip-inner-border);
  1075.             margin-inline: 0px !important;
  1076.             border-image: var(--my-separator-border-style1) 1 !important;
  1077.         }
  1078.     }
  1079.    
  1080.     /* Tabs top separador when sidebar isn't expanded */
  1081.     :root:has(sidebar-main:not([expanded])) {
  1082.         & #sidebar-main::before{
  1083.             position: absolute; content: '';
  1084.             width: var(--my-vertical-toolbar-width);
  1085.             border-block-start: 1px solid red !important;
  1086.             border-image: var(--my-separator-border-style1) 1 !important;
  1087.         }
  1088.     }
  1089.    
  1090.     #vertical-pinned-tabs-container-separator {
  1091.         #tabbrowser-tabs:not([expanded]) #vertical-pinned-tabs-container:not(:empty) > &, #vertical-pinned-tabs-container:not(:empty) + & {
  1092.             margin-inline: 0px !important;
  1093.             display: flex !important;
  1094.             border-image: var(--my-separator-border-style1) 1 !important;
  1095.         }
  1096.     }
  1097.    
  1098.     /* _____________ New Tab button _____________ */
  1099.  
  1100.     /* Width when sidebar isn't expanded */    
  1101.     #tabbrowser-tabs:not([expanded]) {
  1102.         & #tabbrowser-arrowscrollbox[orient="vertical"] > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button,
  1103.         & #vertical-tabs-newtab-button{
  1104.             &:not([expanded]) {
  1105.                 width: var(--vertical-elements-width) !important;
  1106.             }
  1107.         }
  1108.     }
  1109.  
  1110.     /* style */    
  1111.     #tabs-newtab-button .toolbarbutton-icon,
  1112.     #vertical-tabs-newtab-button .toolbarbutton-icon{
  1113.         height: 20px !important;
  1114.         width: 20px !important;
  1115.         padding: 2px !important;
  1116.         border-radius: 2px !important;
  1117.     }
  1118.  
  1119.     /* Container */
  1120.     #tabbrowser-arrowscrollbox[orient="vertical"] > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button,
  1121.     #vertical-tabs-newtab-button {
  1122.         fill: var(--general-color) !important;
  1123.         border-radius: 0px !important;
  1124.         margin-inline: 0px !important;
  1125.     }
  1126.  
  1127.     /* on 'hover' */
  1128.     #tabbrowser-arrowscrollbox[orient="vertical"] > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button:hover,
  1129.     #vertical-tabs-newtab-button:hover {
  1130.         background-color: transparent !important;
  1131.     }
  1132.  
  1133.     #vertical-tabs-newtab-button:hover .toolbarbutton-icon{
  1134.         background: color-mix(in srgb, var(--general-color) 25%, transparent) !important;
  1135.         border-radius: 2px !important;
  1136.     }
  1137.    
  1138.     /* _____________ 'Newtab' button style when Sidebar is expanded _____________ */
  1139.    
  1140.     sidebar-main:is([expanded]) {
  1141.         & #tabs-newtab-button,
  1142.         & #vertical-tabs-newtab-button {
  1143.             padding-inline: calc(var(--vertical-elements-width) / 2 - 16px) !important;
  1144.  
  1145.             & .toolbarbutton-icon {
  1146.                 width: 26px !important;
  1147.                 height: 24px !important;
  1148.                 padding-inline-start: 8px !important;
  1149.                 padding-block: 4px !important;
  1150.                 border-radius: 3px 0px 0px 3px !important;
  1151.                 transition: none !important;
  1152.             }
  1153.  
  1154.             & .toolbarbutton-text {
  1155.                 align-content: center !important;
  1156.                 height: 24px !important;
  1157.                 padding-inline-start: 6px !important;
  1158.                 border-radius: 0px 3px 3px 0px !important;
  1159.             }
  1160.  
  1161.             &:hover .toolbarbutton-text  {
  1162.                 background: color-mix(in srgb, var(--general-color) 25%, transparent) !important;
  1163.             }
  1164.         }
  1165.     }
  1166.    
  1167.     /* ______________________________________ Tools and extensions ______________________________________ */
  1168.    
  1169.     /* Tools style */    
  1170.     .actions-list[orientation="vertical"] {
  1171.         padding-block: 2px 0px !important;
  1172.         margin-block: 0px 0px !important;
  1173.         overflow-y: hidden !important;
  1174.     }
  1175.  
  1176.     /* Tools on 'hover' */    
  1177.     .actions-list[orientation="vertical"]:hover{
  1178.         border-top: 1px solid var(--general-color) !important;
  1179.         border-image: var(--my-separator-border-style1) 1 !important;
  1180.         opacity: 1 !important;
  1181.         background-color: var(--lwt-frame) !important;
  1182.         transition: opacity 0.2s ease-in-out, background-color 0.4s ease;
  1183.     }
  1184.    
  1185.     /* Hide the tools except for the last one: 'configuration' . */
  1186.     .actions-list[orientation="vertical"]:not(:hover) moz-button[type="icon ghost"]:not(:last-child) {
  1187.         opacity: 0 !important;
  1188.         height: 0px !important;
  1189.     }
  1190.    
  1191.      /* Hide the 'configuration' button when there is an 'active' tool */
  1192.     .wrapper:has(.actions-list moz-button[type="icon"]) .actions-list:not(:hover) moz-button[type="icon ghost"]:is(:last-child) {
  1193.         opacity: 0 !important;
  1194.         height: 0px !important;
  1195.     }
  1196.    
  1197.     /* Smooth transition */
  1198.     moz-button[type="icon ghost"]{
  1199.         transition: opacity 0.3s ease-in-out !important;
  1200.     }
  1201.    
  1202.     /* 'Configuration' button in 1rst position when sidebar isn't hover */
  1203.     .actions-list[orientation="vertical"]:not(:hover) moz-button:last-child{
  1204.         background-color: transparent !important;
  1205.         transition: background-color 0ms ease !important;
  1206.         order: -1 !important;
  1207.     }
  1208.    
  1209.     /* shows the active tool */
  1210.     .wrapper:has(.actions-list[orientation="vertical"]:not(:hover)) moz-button[type="icon"] {
  1211.         order: -1 !important;
  1212.     }
  1213.    
  1214.     /* Keep active tool in latest position */
  1215.     .wrapper:has(.actions-list[orientation="vertical"]:is(:hover)) moz-button[type="icon"]{
  1216.         order: 1 !important;
  1217.     }
  1218.    
  1219.     /*__________________ 'Tools and extensions' when sidebar is expanded */
  1220.    
  1221.     .tools-and-extensions[orientation="horizontal"] {
  1222.         --first-last-button-width: 30px !important;
  1223.         grid-template-columns: var(--first-last-button-width) repeat(4, calc(var(--button-size-icon) + var(--space-xsmall))) calc(var(--first-last-button-width) + 11px) !important;
  1224.     }
  1225.    
  1226.     /* 'Configuration' button always in left bottom */
  1227.    
  1228.     .actions-list[orientation="horizontal"] moz-button:last-child:nth-child(-n+18){
  1229.         grid-row-start: 2 !important;
  1230.         grid-column-start:1 !important;
  1231.     }
  1232.  
  1233.     .actions-list[orientation="horizontal"] moz-button:last-child:nth-child(-n+12){
  1234.         grid-row-start: 2 !important;
  1235.         grid-column-start:1 !important;
  1236.     }
  1237.  
  1238.     .actions-list[orientation="horizontal"] moz-button:last-child:nth-child(-n+6){
  1239.         grid-row-start: 1 !important;
  1240.         grid-column-start: 1 !important;
  1241.     }
  1242.    
  1243.     /* _________________________________________________________________________________________________________ */
  1244.    
  1245.     /* Fix issue when 'tools and extension' and tab scrolling appears */
  1246.    
  1247.     spacer[part="overflow-start-indicator"]{
  1248.         display: none !important;
  1249.     }
  1250.    
  1251.     /* Overwrite: Buttons size the same as the Sidebar to click on border */
  1252.    
  1253.     .button-background {
  1254.       &[type~="icon"]:not(.labelled), &:not(.labelled):has(img) {
  1255.         padding-block: 0px !important;
  1256.         }
  1257.     }
  1258.      
  1259.     /* _____________ Tab Preview _____________ */
  1260.  
  1261.     #tab-preview-panel {
  1262.         margin-block-start: -6px !important;
  1263.         margin-inline-start: 0px !important;
  1264.     }
  1265. }
  1266.  
  1267. /* ____________________________ Added missing style when sidebar is on left and using 'left-sidebar' config ________________________
  1268.    _________________________________________________________________________________________________________________________________ */
  1269.  
  1270. @media (-moz-bool-pref:"sidebar.revamp")  and (-moz-bool-pref:"firefoxgx.left-sidebar") and (-moz-bool-pref:"sidebar.position_start") {
  1271.    
  1272.     /* Bug fix - unwanted toolbar bottom border */
  1273.     :root:not([chromehidden~="toolbar"],[sizemode="fullscreen"]) #navigator-toolbox {
  1274.         border-image: linear-gradient(to right,
  1275.             transparent var(--vertical-elements-width),
  1276.             var(--general-color) var(--vertical-elements-width) ,
  1277.             var(--toolbar-bgcolor) var(--vertical-elements-width)) 1 !important;
  1278.     }
  1279.  
  1280.     #sidebar-main {
  1281.         background-image: linear-gradient(var(--toolbar-bgcolor, transparent), var(--toolbar-bgcolor, transparent)),
  1282.             var(--lwt-additional-images,none), var(--lwt-header-image, none) !important;
  1283.         background-position: left top !important;
  1284.         background-repeat: repeat-x, var(--lwt-background-tiling), no-repeat !important;
  1285.         background-size: auto 100% !important;
  1286.         background-attachment: scroll, fixed, fixed !important;
  1287.     }
  1288. }
  1289.  
  1290. /* ______________________________ Borders around sidebars and web content - Sidebar on left - without left-sidebar ______________________________
  1291.    _______________________________________________________________________________________________________________________________________________ */
  1292.  
  1293. @media (-moz-bool-pref: "sidebar.revamp") {
  1294.    
  1295.     /* web content */
  1296.     #tabbrowser-tabbox {
  1297.         outline: none !important;
  1298.         box-shadow: none !important;
  1299.         border-radius: 0px !important;
  1300.     }
  1301.  
  1302.     /* sidebar content */
  1303.     #sidebar {
  1304.         border-top: 1px solid var(--my-content-border-color) !important;
  1305.         border-inline-end: 1px solid var(--my-content-border-color) !important;
  1306.         box-shadow: none !important;
  1307.     }
  1308.    
  1309.     /* Sidebar content + web content */
  1310.     #sidebar-box[checked="true"] ~ #tabbrowser-tabbox {
  1311.         border-top: 1px solid var(--my-content-border-color) !important;/**/
  1312.     }
  1313.  
  1314.     /* Web content border-top in full screen */
  1315.     :root:not([inDOMFullscreen])[sizemode="fullscreen"] #tabbrowser-tabbox {
  1316.         border-top: 1px solid var(--my-content-border-color) !important;
  1317.     }
  1318.  
  1319.     /* Border color in themes with images*/
  1320.  
  1321.     :root:is([lwtheme-image],[style*="--lwt-additional-images"]) {
  1322.         /* Border color around web content */
  1323.         & #tabbrowser-tabbox,
  1324.         /* Border color around Sidebar & Sidebar content [open] */
  1325.         #sidebar-box[checked="true"] {
  1326.             --my-content-border-color: color-mix(in srgb, var(--toolbar-bgcolor) 90%, var(--lwt-tab-text)) !important;
  1327.         }
  1328.     }
  1329. }
  1330.  
  1331. /* _____________ Sidebar on right side */
  1332.  
  1333. @media (-moz-bool-pref:"sidebar.revamp") and (not (-moz-bool-pref:"sidebar.position_start")) {
  1334.    
  1335.     :root {
  1336.         --my-content-border-color: var(--toolbarbutton-hover-personal) !important;
  1337.     }
  1338.    
  1339.     /* Border around web content */
  1340.     #tabbrowser-tabbox {
  1341.         border-block-start: 1px solid var(--my-content-border-color) !important;
  1342.     }
  1343.    
  1344.     /* Sidebar */
  1345.     #sidebar-main {
  1346.         border-inline-start: 1px solid var(--my-content-border-color) !important;
  1347.     }
  1348.    
  1349.     /* Sidebar content */
  1350.     #sidebar {
  1351.         direction: rtl !important;
  1352.     }
  1353. }
  1354.  
  1355. @media ((-moz-bool-pref:"sidebar.revamp") or (-moz-bool-pref:"sidebar.verticalTabs")) and (not (-moz-bool-pref:"firefoxgx.left-sidebar")) and (-moz-bool-pref:"sidebar.position_start") {
  1356.  
  1357.     /* Sidebar border and color in fullscreen  */
  1358.    
  1359.     &:root:is([sizemode="fullscreen"]) {
  1360.         & #sidebar-main {
  1361.             border-inline-end: 1px solid var(--my-content-border-color) !important;
  1362.         }
  1363.         &:has(sidebar-main:is([expanded])) #sidebar-main {
  1364.             border-inline-end: 1px solid var(--my-content-border-color) !important;
  1365.             /*box-shadow: inset -1px 1px 0 0 var(--my-content-border-color) !important;/**/
  1366.         }
  1367.     }
  1368. }
  1369.  
  1370. @media (-moz-bool-pref:"sidebar.verticalTabs") {
  1371.  
  1372.     /* Web content */    
  1373.     :root:not([inDOMFullscreen]) #tabbrowser-tabbox {
  1374.         border-top: 1px solid var(--my-content-border-color) !important;
  1375.     }
  1376. }
  1377.  
  1378. /* _____________ Added missing border when sidebar is on left and with 'left-sidebar' config */
  1379.  
  1380.  
  1381. @media (-moz-bool-pref:"sidebar.revamp")  and (-moz-bool-pref:"firefoxgx.left-sidebar") and (-moz-bool-pref:"sidebar.position_start") {
  1382.        
  1383.     #sidebar-main {
  1384.         border-inline-end: 1px solid var(--my-content-border-color) !important;
  1385.     }
  1386.    
  1387.     :root:not([inDOMFullscreen]) #tabbrowser-tabbox {
  1388.         border-block-start: 1px solid var(--my-content-border-color) !important;
  1389.     }
  1390. }
  1391.  
  1392. /* _____________ Border top Sidebar expanded - 'left-sidebar' + Sidebar (left or right) */
  1393.  
  1394. @media (-moz-bool-pref:"sidebar.revamp")  and (-moz-bool-pref:"firefoxgx.left-sidebar") {
  1395.    
  1396.     :root:has(sidebar-main:is([expanded])) {
  1397.         & #sidebar-main{
  1398.             box-shadow: inset 0 1px 0 0 var(--my-content-border-color) !important;
  1399.         }
  1400.     }
  1401. }
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!