API tools faq
paste
Guest User

Untitled

a guest
Aug 19th, 2022
340
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.42 KB | None | 0 0
raw download clone embed print report
  1. :root {
  2.     /* delay before expanding tabs, set to '0' for no delay */
  3.     --delay: 0.2s;
  4.     --transition-time: 0.2s;
  5.     --positionX1: 48px; /* '48px' for left, '0px' for right sidebar */
  6.     --positionX2: absolute; /* 'absolute' for left, 'none' for right sidebar */
  7. }
  8.  
  9. /* macOS specific styles */
  10. @media (-moz-platform: macos) {
  11.     #TabsToolbar:not([customizing="true"]) {
  12.         visibility: collapse !important;
  13.     }
  14.  
  15.     :root:not([customizing="true"]) #nav-bar {
  16.         padding-left: 80px;
  17.     }
  18.  
  19.     :root:not([customizing="true"]) #TabsToolbar .titlebar-buttonbox-container {
  20.         visibility: visible !important;
  21.         position: absolute;
  22.         top: 12px;
  23.         left: 0px;
  24.         display: block;
  25.     }
  26. }
  27.  
  28. /* Linux/GTK specific styles */
  29. @media (-moz-gtk-csd-available) {
  30.     #TabsToolbar:not([customizing="true"]) {
  31.         visibility: collapse !important;
  32.     }
  33.  
  34.     #toolbar-menubar {
  35.         padding-top: 0px !important;
  36.     }
  37.  
  38.     :root:not([customizing="true"]) #toolbar-menubar[inactive]+#TabsToolbar .titlebar-buttonbox-container {
  39.         visibility: visible !important;
  40.         position: absolute;
  41.         top: var(--uc-win-ctrl-vertical-offset);
  42.         display: block;
  43.         z-index: 101;
  44.     }
  45.  
  46.     /* enable rounded top corners */
  47.     :root[tabsintitlebar][sizemode="normal"]:not([gtktiledwindow="true"]):not([customizing="true"]) #nav-bar {
  48.         border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
  49.         border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
  50.     }
  51.  
  52.     /* window control padding values (these don't change the size of the actual buttons, only the padding for the navbar) */
  53.     :root[tabsintitlebar]:not([customizing="true"]) {
  54.         /* default button/padding size based on adw-gtk3 theme */
  55.         --uc-win-ctrl-btn-width: 38px;
  56.         --uc-win-ctrl-padding: 12px;
  57.         /* vertical offset from the top of the window, calculation: (1/2 * (NAVBAR_HEIGHT - BUTTON_HEIGHT)) */
  58.         --uc-win-ctrl-vertical-offset: 8px;
  59.         /* extra window drag space */
  60.         --uc-win-ctrl-drag-space: 20px;
  61.     }
  62.  
  63.     :root[tabsintitlebar][lwtheme]:not([customizing="true"]) {
  64.         /* seperate values for when using a theme, based on the Firefox defaults */
  65.         --uc-win-ctrl-btn-width: 30px;
  66.         --uc-win-ctrl-padding: 12px;
  67.         /* vertical offset from the top of the window, calculation: (1/2 * (NAVBAR_HEIGHT - BUTTON_HEIGHT)) */
  68.         --uc-win-ctrl-vertical-offset: 5px;
  69.         /* extra window drag space */
  70.         --uc-win-ctrl-drag-space: 20px;
  71.     }
  72.  
  73.     /* setting the padding value for all button combinations */
  74.     @media (-moz-gtk-csd-minimize-button),
  75.     (-moz-gtk-csd-maximize-button),
  76.     (-moz-gtk-csd-close-button) {
  77.         #nav-bar {
  78.             --uc-navbar-padding: calc(var(--uc-win-ctrl-btn-width) * 1);
  79.         }
  80.     }
  81.  
  82.     @media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button),
  83.     (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-close-button),
  84.     (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) {
  85.         #nav-bar {
  86.             --uc-navbar-padding: calc(var(--uc-win-ctrl-btn-width) * 2);
  87.         }
  88.     }
  89.  
  90.     @media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) {
  91.         #nav-bar {
  92.             --uc-navbar-padding: calc(var(--uc-win-ctrl-btn-width) * 3);
  93.         }
  94.     }
  95.  
  96.     /* only applies padding/positioning if there is 1 or more buttons */
  97.     @media (-moz-gtk-csd-minimize-button),
  98.     (-moz-gtk-csd-maximize-button),
  99.     (-moz-gtk-csd-close-button) {
  100.         /* window controls on the right */
  101.         @media not (-moz-gtk-csd-reversed-placement) {
  102.             #nav-bar {
  103.                 padding-inline: 0 calc(var(--uc-navbar-padding, 0) + var(--uc-win-ctrl-padding) + var(--uc-win-ctrl-drag-space)) !important;
  104.             }
  105.  
  106.             .titlebar-buttonbox-container {
  107.                 right: 0;
  108.             }
  109.         }
  110.  
  111.         /* window controls on the left */
  112.         @media (-moz-gtk-csd-reversed-placement) {
  113.             #nav-bar {
  114.                 padding-inline: calc(var(--uc-navbar-padding, 0) + var(--uc-win-ctrl-padding) + var(--uc-win-ctrl-drag-space)) 0 !important;
  115.             }
  116.  
  117.             .titlebar-buttonbox-container {
  118.                 left: 0;
  119.             }
  120.         }
  121.     }
  122. }
  123.  
  124. /* Windows specific styles */
  125. @media (-moz-platform: windows-win10) {
  126.     /* Hide main tabs toolbar */
  127.     :root[tabsintitlebar]{
  128.         --uc-window-control-width: 137px; /* Space at the right of nav-bar for window controls */
  129.         /* --uc-window-drag-space-width: 24px; */  /* To add extra window drag space in nav-bar */
  130.     }
  131.  
  132.     #nav-bar{
  133.         border-inline: var(--uc-window-drag-space-width,80px) solid var(--toolbar-bgcolor) ;
  134.         border-inline-style: solid !important;
  135.         border-right-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-width,0px));
  136.  
  137.         padding-top: 0px !important;
  138.         margin-left: -80px; /* Removes the space left when hiding .titlebar-buttonbox-container */
  139.     }
  140.  
  141.     :root {
  142.         --uc-toolbar-height: 32px;
  143.         --chrome-content-separator-color: none !important;
  144.     }
  145.  
  146.     :root:not([uidensity="compact"]) {
  147.         --uc-toolbar-height: 38px;
  148.     }
  149.  
  150.     #TabsToolbar {
  151.         visibility: collapse !important;
  152.     }
  153.  
  154.     /* Hide the Windows controls on the left side. */
  155.     #TabsToolbar .titlebar-buttonbox-container {
  156.         visibility: hidden !important;
  157.     }
  158.     /* Line up the Windows controls with the rest of the icons in the toolbar. */
  159.     .titlebar-buttonbox-container {
  160.         margin-top: 3px;
  161.     }
  162.  
  163.  
  164.     :root:not([inFullscreen]) #nav-bar {
  165.         margin-top: calc(0px - var(--uc-toolbar-height));
  166.         z-index: 2;
  167.     }
  168.  
  169.     #toolbar-menubar {
  170.         min-height: unset !important;
  171.         height: var(--uc-toolbar-height) !important;
  172.         position: relative;
  173.     }
  174.  
  175.     .titlebar-buttonbox {
  176.         z-index:3 !important;
  177.         padding-right:3px;
  178.     }
  179.  
  180.     .titlebar-buttonbox * {
  181.         border-radius: 5px;
  182.         width:35px;
  183.         height:38px;
  184.     }
  185.  
  186.     #main-menubar {
  187.         -moz-box-flex: 1;
  188.         background-color: var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor);
  189.         background-clip: padding-box;
  190.         border-right: 30px solid transparent;
  191.         border-image: linear-gradient(to left, transparent, var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor) 30px) 20 / 30px;
  192.     }
  193.  
  194.     #toolbar-menubar:not([inactive]) {
  195.         z-index: 2;
  196.     }
  197.  
  198.     #toolbar-menubar[inactive] > #menubar-items {
  199.         opacity: 0;
  200.         pointer-events: none;
  201.         margin-left: var(--uc-window-drag-space-width,0px);
  202.     }
  203.  
  204.     :root[inFullscreen] #nav-bar {
  205.         border-inline: none !important;
  206.     }
  207. }
  208.  
  209.  
  210. /* General styles */
  211. #browser {
  212.     position: relative;
  213. }
  214.  
  215. #nav-bar, #urlbar {
  216.     z-index: 100;
  217. }
  218.  
  219. #sidebar-box:not([lwt-sidebar]){
  220.     appearance: unset !important;
  221. }
  222.  
  223. #sidebar-box[sidebarcommand*="tabcenter"] {
  224.     z-index: 1;
  225. }
  226.  
  227. #sidebar-box[sidebarcommand*="tabcenter"] #sidebar-header {
  228.     visibility: collapse;
  229.     display: none;
  230. }
  231.  
  232. [sidebarcommand*="tabcenter"] #sidebar {
  233.     min-width: 48px !important;
  234.     max-width: 48px !important;
  235. }
  236.  
  237. #sidebar-box[sidebarcommand*="tabcenter"]:not([hidden]) {
  238.     display: block;
  239.     position: var(--positionX2);
  240.     box-sizing: content-box;
  241.     min-width: 48px;
  242.     max-width: 48px;
  243.     overflow: hidden;
  244.     border-right: 1px solid var(--sidebar-border-color);
  245.     z-index: 1;
  246.     top: 0;
  247.     bottom: 0;
  248. }
  249.  
  250. #sidebar-box[sidebarcommand*="tabcenter"]:hover #sidebar,
  251. #sidebar-box[sidebarcommand*="tabcenter"]:hover {
  252.     min-width: 10vw !important;
  253.     width: 30vw !important;
  254.     max-width: 200px !important;
  255.     z-index: 10 !important;
  256.     transition: all var(--transition-time) ease var(--delay);
  257. }
  258.  
  259. /* used for delay function */
  260. #sidebar-box[sidebarcommand*="tabcenter"]:not(:hover) #sidebar,
  261. #sidebar-box[sidebarcommand*="tabcenter"]:not(:hover) {
  262.     transition: all var(--transition-time) ease 0s;
  263. }
  264.  
  265. @media (width >= 1200px) {
  266.     #sidebar-box[sidebarcommand*="tabcenter"]:hover #sidebar,
  267.     #sidebar-box[sidebarcommand*="tabcenter"]:hover {
  268.         max-width: 250px !important;
  269.     }
  270. }
  271.  
  272. [sidebarcommand*="tabcenter"] ~ #sidebar-splitter {
  273.     display: none;
  274. }
  275.  
  276. [sidebarcommand*="tabcenter"] #sidebar {
  277.     max-height: 100%;
  278.     height: 100%;
  279. }
  280.  
  281. #sidebar-box[sidebarcommand*="tabcenter"]:not([hidden]) ~ #appcontent {
  282.     margin-left: var(--positionX1);
  283. }
  284.  
  285. #main-window[inFullscreen][inDOMFullscreen] #appcontent {
  286.     margin-left: 0;
  287. }
  288.  
  289. #main-window[inFullscreen] #sidebar {
  290.     height: 100vh;
  291. }
  292.  
  293. [sidebarcommand*="tabcenter"] #sidebar-header {
  294.     background: #0C0C0D;
  295.     border-bottom: none !important;
  296. }
  297.  
  298. [sidebarcommand*="tabcenter"] ~ #sidebar-splitter {
  299.     border-right-color: #0C0C0D !important;
  300.     border-left-color: #0C0C0D !important;
  301. }
  302.  
  303. [sidebarcommand*="tabcenter"] #sidebar-switcher-target,
  304. [sidebarcommand*="tabcenter"] #sidebar-close {
  305.     filter: invert(100%);
  306. }
  307.  
  308. @media (max-width: 630px) {
  309.     #urlbar-container {
  310.         min-width: 100% !important;
  311.     }
  312.  
  313.     #menubar-items {
  314.         display: none !important;
  315.     }
  316. }
  317.  
  318. /* Tabliss CSS */
  319.  
  320. #identity-box.extensionPage #identity-icon-label {
  321.     display: none !important;
  322.     background: none !important;
  323. }
  324. #identity-icon-box {
  325.     background: none !important;
  326. }
  327.  
  328.  
Advertisement
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!