Update sidebery-styles.json

modified coloured tabs on hover

Sidebery/sidebery-styles.json

@@ -1 +1 @@
-{"sidebarCSS":"/* === Define Custom Variables for Tab Styling === */\n#root.root {\ntransition: all 300ms ease-in-out !important;}\n\n#root.root {\n  --tabs-indent: 18px;\n  --tabs-inner-gap: 6px;\n  --tabs-pinned-height: 42px;\n  --tabs-pinned-width: 42px;\n  --general-margin: 8px;\n  --tabs-height: 32px;\n  --history-item-padding-left: 6px;\n  --history-item-margin: 5px;\n  --history-item-border-radius: 8px;\n  --tabs-close-btn-margin: 3px;\n  --nav-btn-margin: 0px 6px;\n  --nav-btn-width: 32px;\n  --nav-btn-height: 32px;\n  --tabs-activated-shadow: inset 0 0 0 1px light-dark(rgba(0,0,0,0.8),rgba(255,255,255,0.3));\n  --ntb-btn-height: 28px;\n  --tabs-lvl-opacity: 0.4;\n  \n  transition: none; /* Disable transitions initially */\n  min-width: 48px !important; /* Set minimum width */\n}\n\n/* === Main Box Styling === */\n#root.root .main-box {\n  transition: opacity 200ms ease-in-out;\n  padding:0;\n}\n\n/* === Tab colors ==== */\n.scrollable .Tab .color-layer {\nwidth: 32px !important;\n}\n\n.scrollable .Tab[data-active=\"true\"] .color-layer {\nborder-radius: 4px 0px 0px 4px !important;\n\n} \n.scrollable .Tab[data-colorized=\"true\"] .t-box {\npadding:0 6px !important;\n}\n\n.scrollable .t-box {\npadding:0 3px;}\n\n\n#root.root:not(:hover) .main-box {\n  opacity: 1; /* Reduced opacity when not hovered */\n}\n\n#root.root #search_bar {\norder:2;\npadding-left:0px;\npadding-right:6px;\n}\n\n\n.Tab .exp-icon {\nopacity:1 !important;}\n\n/* === Tab Panels Styling === */\n.left-vertical-box #nav_bar{\nbackground-color:transparent !important;\npadding:12px 6px;\n}\n\n\n\n#root.root .top-horizontal-box {\n  display: flex;\n  order: 3 !important;\n  margin: 0 auto !important;\n}\n\n.top-horizontal-box #nav_bar {\n  background-color: transparent !important; /* Transparent background for nav bar */\n}\n\n#root.root:not(:hover) .top-horizontal-box {\n  opacity: 1; /* Reduced opacity when not hovered */\n}\n\n/* === Media Query for Autohide === */\n@media (max-width: 50px) {\n  #root.root {\n    --tabs-pinned-height: 12px; /* Reduced height for pinned tabs */\n    --tabs-pinned-width: 12px; /* Reduced width for pinned tabs */\n    --tabs-indent: 0; /* No indentation for tabs */\n    --tabs-lvl-opacity: 0; /* No opacity for tabs */\n  }\n.PinnedTabsBar .color-layer {\ndisplay:none !important;\n} \n.PinnedTabsBar .Tab {opacity:0.7 !important;}\n.PinnedTabsBar .Tab[data-pin=\"true\"] {opacity:1 !mportant; bordear: 1px solid black !important;}\n\n.left-vertical-box {display:none !important;}\n\n#root.root #search_bar {\ndisplay:none;\n}\n  #root.root .new-tab-btns {\n    display: none; /* Hide new tab buttons */\n  }\n\n  #root.root .top-horizontal-box .nav-item:not([data-class=\"panel\"]),\n  #root.root .nav-item[data-active=\"false\"] {\n    display: none; /* Hide specific nav items */\n  }\n\n  #root.root .Tab[data-pin=\"true\"] {\n    max-width: 32px !important;\n    max-height: 32px !important; /* Set max width and height for pinned tabs */\n  }\n}\n\n\n\n/* === Reposition Active Audio Indicator === */\n#root.root:not(:hover) .Tab .audio {\n  margin-left: -11px;\n  margin-top: -7px;\n}\n\n#root.root:not(:hover) .Tab .audio-icon {\n  height: 12px !important; /* Set height for audio icon when not hovered */\n}\n\n/* === Fix Padding Top and Bottom === */\n#root.root .PinnedTabsBar,\n#root.root .ScrollBox .scrollable,\n#root.root .top-horizontal-box {\n  padding-top: 8px !important; /* Set padding top for specific elements */\n}\n\n#root.root .top-horizontal-box {\n  padding-bottom: 8px !important; /* Set padding bottom for top horizontal box */\n}\n\n/* === Pinned Tabs Styling === */\n#root.root .PinnedTabsBar,\n#root.root .PinnedTabsBar .Tab {\n  background-color: light-dark(rgba(220, 220, 220, 0.6), rgba(0, 0, 0, 0.17));\n  margin-top: 0px !important; /* Set background color and margin for pinned tabs */\n}\n\n/* === Tab Panel Box === */\n#root.root .top-horizontal-box .main-items {\n  justify-content: center;\n  align-items: center;\n}\n\n\n/* === Random Styling === */\n#root.root .Tab .child-count {\n  opacity: 1 !important; /* Set opacity for child count */\n}\n\n#root.root .top-horizontal-box {\n  padding-top: 15px;\n  margin-bottom: -2px !important; /* Adjust padding and margin for top horizontal box */\n}\n\n#root.root .new-tab-btns {\n  padding-top: 6px;\npadding-bottom: 6px;\n  margin-bottom: -8px !important; /* Adjust padding and margin for new tab buttons */\n}\n\n\n/* === Convert Space element in navigation panel to line break === */\n\n#root.root .top-horizontal-box .nav-item[data-class=\"space\"] {\n  display: block !important;\n  min-width: 100% !important;\n  height: 2px !important; /* Set specific styling for space nav item */\n}","ver":"5.1.1"}
+{"sidebarCSS":"/* === Define Custom Variables for Tab Styling === */\n#root.root {\ntransition: all 300ms ease-in-out !important;}\n\n#root.root {\n  --tabs-indent: 18px;\n  --tabs-inner-gap: 6px;\n  --tabs-pinned-height: 42px;\n  --tabs-pinned-width: 42px;\n  --general-margin: 8px;\n  --tabs-height: 32px;\n  --history-item-padding-left: 6px;\n  --history-item-margin: 5px;\n  --history-item-border-radius: 8px;\n  --tabs-close-btn-margin: 3px;\n  --nav-btn-margin: 0px 6px;\n  --nav-btn-width: 32px;\n  --nav-btn-height: 32px;\n  --tabs-activated-shadow: inset 0 0 0 1px light-dark(rgba(0,0,0,0.8),rgba(255,255,255,0.3));\n  --ntb-btn-height: 28px;\n  --tabs-lvl-opacity: 0.4;\n  \n  transition: none; /* Disable transitions initially */\n  min-width: 48px !important; /* Set minimum width */\n}\n\n/* === Main Box Styling === */\n#root.root .main-box {\n  transition: opacity 200ms ease-in-out;\n  padding:0;\n}\n\n/* === Tab colors ==== */\n.scrollable .Tab .color-layer {\nwidth: 32px !important;\n}\n.scrollable .Tab[data-active=\"true\"] .color-layer {\nborder-radius: 4px 0px 0px 4px !important;\n} \n.scrollable .Tab:hover .color-layer {\nborder-radius: 4px 0px 0px 4px !important;\n}\n.scrollable .Tab[data-colorized=\"true\"] .t-box {\npadding:0 6px !important;\n}\n.scrollable .t-box {\npadding:0 3px;}\n\n\n#root.root:not(:hover) .main-box {\n  opacity: 1; /* Reduced opacity when not hovered */\n}\n\n#root.root #search_bar {\norder:2;\npadding-left:0px;\npadding-right:6px;\n}\n\n\n.Tab .exp-icon {\nopacity:1 !important;}\n\n/* === Tab Panels Styling === */\n.left-vertical-box #nav_bar{\nbackground-color:transparent !important;\npadding:12px 6px;\n}\n\n\n\n#root.root .top-horizontal-box {\n  display: flex;\n  order: 3 !important;\n  margin: 0 auto !important;\n}\n\n.top-horizontal-box #nav_bar {\n  background-color: transparent !important; /* Transparent background for nav bar */\n}\n\n#root.root:not(:hover) .top-horizontal-box {\n  opacity: 1; /* Reduced opacity when not hovered */\n}\n\n/* === Media Query for Autohide === */\n@media (max-width: 50px) {\n  #root.root {\n    --tabs-pinned-height: 12px; /* Reduced height for pinned tabs */\n    --tabs-pinned-width: 12px; /* Reduced width for pinned tabs */\n    --tabs-indent: 0; /* No indentation for tabs */\n    --tabs-lvl-opacity: 0; /* No opacity for tabs */\n  }\n.PinnedTabsBar .color-layer {\ndisplay:none !important;\n} \n.PinnedTabsBar .Tab {opacity:0.7 !important;}\n.PinnedTabsBar .Tab[data-pin=\"true\"] {opacity:1 !mportant; }\n\n.scrollable .Tab[data-colorized=\"true\"] .color-layer {\nopacity:0.1;\ntransition:opacity 200ms linear !important;\n}\n\n\n.left-vertical-box {display:none !important;}\n\n#root.root #search_bar {\ndisplay:none;\n}\n  #root.root .new-tab-btns {\n    display: none; /* Hide new tab buttons */\n  }\n\n  #root.root .top-horizontal-box .nav-item:not([data-class=\"panel\"]),\n  #root.root .nav-item[data-active=\"false\"] {\n    display: none; /* Hide specific nav items */\n  }\n\n  #root.root .Tab[data-pin=\"true\"] {\n    max-width: 32px !important;\n    max-height: 32px !important; /* Set max width and height for pinned tabs */\n  }\n}\n\n\n\n/* === Reposition Active Audio Indicator === */\n#root.root:not(:hover) .Tab .audio {\n  margin-left: -11px;\n  margin-top: -7px;\n}\n\n#root.root:not(:hover) .Tab .audio-icon {\n  height: 12px !important; /* Set height for audio icon when not hovered */\n}\n\n/* === Fix Padding Top and Bottom === */\n#root.root .PinnedTabsBar,\n#root.root .ScrollBox .scrollable,\n#root.root .top-horizontal-box {\n  padding-top: 8px !important; /* Set padding top for specific elements */\n}\n\n#root.root .top-horizontal-box {\n  padding-bottom: 8px !important; /* Set padding bottom for top horizontal box */\n}\n\n/* === Pinned Tabs Styling === */\n#root.root .PinnedTabsBar,\n#root.root .PinnedTabsBar .Tab {\n  background-color: light-dark(rgba(220, 220, 220, 0.6), rgba(0, 0, 0, 0.17));\n  margin-top: 0px !important; /* Set background color and margin for pinned tabs */\n}\n\n/* === Tab Panel Box === */\n#root.root .top-horizontal-box .main-items {\n  justify-content: center;\n  align-items: center;\n}\n\n\n/* === Random Styling === */\n#root.root .Tab .child-count {\n  opacity: 1 !important; /* Set opacity for child count */\n}\n\n#root.root .top-horizontal-box {\n  padding-top: 15px;\n  margin-bottom: -2px !important; /* Adjust padding and margin for top horizontal box */\n}\n\n#root.root .new-tab-btns {\n  padding-top: 6px;\npadding-bottom: 6px;\n  margin-bottom: -8px !important; /* Adjust padding and margin for new tab buttons */\n}\n\n\n/* === Convert Space element in navigation panel to line break === */\n\n#root.root .top-horizontal-box .nav-item[data-class=\"space\"] {\n  display: block !important;\n  min-width: 100% !important;\n  height: 2px !important; /* Set specific styling for space nav item */\n}","ver":"5.1.1"}