Gotolei

sidebery

Aug 1st, 2021
1,248
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  
  2. #root[data-style="auto"],
  3. #root[data-style="dark"] {
  4.   --notice-fg: #fff !important;
  5.   --progress-fg: #fff !important;
  6.   --tabs-loading-fg: #fff !important;
  7.   --tabs-selected-bg: highlight !important;
  8.   --tabs-update-badge-bg: #4df; !important;
  9.   --nav-btn-opacity: 1 !important;
  10.   --nav-btn-opacity-hover: 1 !important;
  11.   --nav-btn-fg-focus: #f00 !important;
  12.   --jav-btn-update-badge-bg: #f0f !important;
  13. }
  14.  
  15.  
  16. /**** BASE TAB STYLING ****/
  17.  
  18. .Tab {
  19.   background: rgba(255,255,255,0.1);
  20.   border-bottom: 1px solid transparent;
  21.   background-clip: content-box;
  22.   --tabs-activated-shadow: inset 2px 0 highlight;
  23. }
  24. .Tab[data-active],
  25. .Tab[data-selected],
  26. .Tab[data-selected]:hover,
  27. .Tab[data-selected]:active {
  28.   border-bottom: 1px solid transparent;
  29. }
  30.  
  31. .Tab:hover:not([data-active]) {
  32.   box-shadow: inset 2px 0 rgba(255,255,255,0.25);
  33. }
  34. .PinnedTab {
  35.   background: rgba(255,255,255,0.075);
  36.   --tabs-activated-shadow: inset 0 2px highlight;
  37.   border-right: 1px solid transparent;
  38.   background-clip: content-box;
  39. }
  40. .PinnedTab .audio-badge {
  41.   pointer-events: none;
  42. }
  43.  
  44. /**** PANEL BUTTONS ****/
  45. .NavigationBar .panel-btn > svg {
  46.   opacity: .5;
  47. }
  48. .NavigationBar .panel-btn:hover:not([data-active]) > svg {
  49.   opacity: .75;
  50. }
  51. .NavigationBar .panel-btn[data-active] > svg {
  52.   opacity: 1;
  53. }
  54.  
  55.  
  56. /**** OPACITY RE-WORK ****/
  57.  
  58. .Tab:hover .fav {
  59.   opacity: 1;
  60. }
  61. .PinnedTab:hover .fav {
  62.   opacity: 1;
  63. }
  64. .Tab[data-discarded] > .lvl-wrapper > .fav,
  65. .Tab[data-discarded] > .lvl-wrapper > .t-box {
  66.   opacity: 1;
  67. }
  68. .Tab[data-discarded] {
  69.   opacity: 0.5;
  70. }
  71.  
  72. /**** FOLDING FAVICON BEHAVIOR ****/
  73.  
  74. .Tab[data-parent] .fav:hover > img,
  75. .Tab[data-parent][data-folded] .fav > img {
  76.   opacity: 1;
  77. }
  78. .Tab[data-parent] .fav,
  79. .Tab[data-parent][data-folded] .fav .exp {
  80.   transition: margin-left var(--d-norm);
  81. }
  82. .Tab[data-parent][data-folded] .fav {
  83.   margin-left: 16px;
  84. }
  85. .Tab[data-parent][data-folded] .fav .exp {
  86.   margin-left: -16px;
  87. }
  88. .Tab .fav > .child-count {
  89.   font-weight: bold;
  90.   width: auto;
  91.   padding: 0 3px;
  92.   border-radius: 100px;
  93.   bottom: -3px;
  94.   right: 0;
  95.   left: -22px;
  96. }
  97.  
  98. /**** CLOSE BUTTON ****/
  99.  
  100. .Tab .close {
  101.   top: -1px;
  102. }
  103. .Tab .close > svg {
  104.   fill: #fffa;
  105. }
  106. .Tab .close:hover > svg {
  107.   fill: #fff;
  108. }
  109.  
  110. /**** CORNER INDICATOR ****/
  111.  
  112. .Tab .fav:after {
  113.   left: -6px;
  114.   bottom: -4px;
  115.   border-width: 3px;
  116. }
  117.  
  118. /**** AUDIO MORE VISIBLE ****/
  119. .Tab:not([data-active]) .lvl-wrapper .audio svg {
  120. /*
  121.   background: var(--tabs-update-badge-bg);
  122.   box-shadow: 0 0 0 2px var(--tabs-update-badge-bg), inset 0 0 0 20px var(--tabs-update-badge-bg);
  123.   border-radius: 99px;
  124.   fill: black;
  125. */
  126.   fill: var(--tabs-update-badge-bg);
  127. }
  128.  
  129. /**** MATCH WIDTH TO TREE LEVEL ****/
  130.  
  131. /*.Tab:not([data-active]) {
  132.   box-shadow: -1px 0 rgba(0,0,0,.5);
  133. }*/
  134. .Tab[data-lvl="1"] {
  135.   padding-left: 0;
  136.   margin-left: var(--tabs-indent);
  137.   width: calc(100% - var(--tabs-indent));
  138. }
  139. .Tab[data-lvl="2"] {
  140.   padding-left: 0;
  141.   margin-left: calc(var(--tabs-indent) * 2);
  142.   width: calc(100% - var(--tabs-indent) * 2);
  143. }
  144. .Tab[data-lvl="3"] {
  145.   padding-left: 0;
  146.   margin-left: calc(var(--tabs-indent) * 3);
  147.   width: calc(100% - var(--tabs-indent) * 3);
  148. }
  149. .Tab[data-lvl="4"] {
  150.   padding-left: 0;
  151.   margin-left: calc(var(--tabs-indent) * 4);
  152.   width: calc(100% - var(--tabs-indent) * 4);
  153. }
  154. .Tab[data-lvl="5"] {
  155.   padding-left: 0;
  156.   margin-left: calc(var(--tabs-indent) * 5);
  157.   width: calc(100% - var(--tabs-indent) * 5);
  158. }
  159. .Tab[data-lvl="6"] {
  160.   padding-left: 0;
  161.   margin-left: calc(var(--tabs-indent) * 6);
  162.   width: calc(100% - var(--tabs-indent) * 6);
  163. }
  164. .Tab[data-lvl="7"] {
  165.   padding-left: 0;
  166.   margin-left: calc(var(--tabs-indent) * 7);
  167.   width: calc(100% - var(--tabs-indent) * 7);
  168. }
  169. .Tab[data-lvl="8"] {
  170.   padding-left: 0;
  171.   margin-left: calc(var(--tabs-indent) * 8);
  172.   width: calc(100% - var(--tabs-indent) * 8);
  173. }
  174. .Tab[data-lvl="9"] {
  175.   padding-left: 0;
  176.   margin-left: calc(var(--tabs-indent) * 9);
  177.   width: calc(100% - var(--tabs-indent) * 9);
  178. }
  179. .Tab[data-lvl="10"] {
  180.   padding-left: 0;
  181.   margin-left: calc(var(--tabs-indent) * 10);
  182.   width: calc(100% - var(--tabs-indent) * 10);
  183. }
RAW Paste Data