info - cleaner rewrite about arcticfox-theme HOT 2 CLOSED

/* # arcticfox (rev 1) - userChrome.css
   - under MPL 2.0

  dragon's (very hacky) arc browser-like theme for firefox
  ft. sidebery, and userchrome-toggle

  !!! for the theme to work:
  - the browser side bar needs to always be visible
    and with sidebery (maybe Tree Style Tab idk) opened
  - the order of the toolbar widgets should be:
    > url-bar sidebar-toggle back forward reload spacer extensions overflow hamburger-menu
    - you can change the order of some of those, but the url bar must be the first item
  - preferencially have userchrome-toggle addon or something else to toggle keeping the
    sidebar opened
  - disable the bookmarks toolbar (even in new tabs)
  - preferentially use flat color themes instead of ones with gradients or backgrounds
    like ones from Firefox Color or generated by Adaptive Tab Bar Colour

  when navigating this file you can use ctrl + f
  (or whatever the 'find' shortuc is on your editor)
  to jump to spefic parts:

  ##      section
  //      comments
  **      thing you may want to change
  WINDOWS go here if you're on Windows

  !!! extra warnings and drawbacks
  - the bookmarks toolbar doesn't work
  - the 'customise toolbar...' page will not let you rearrange
    things in the toolbar, do it with the theme disabled
    (can still put things in the overflow menu tho)
  - there will be visual glitches in certain areas
  - pages and addons that expect ui elements to be in certain places may nor work
  - some browser color themes may not work well or need some tweak
  - some menus you open (or if change the addon in the sidebar) may toggle off the
    window preface and not keep the sidebar open
  - using addons that use the sidebar (for example firefox side view) can be awekward
  - might not work well depending on your window controls

*/

:root { /* ## main settings */
  /* ** width of the sidebar when opened */
  --sdbr-max-wdt: 360px;

  /* ** width of the window control buttons (min max close)
        that the toolbar should take into account
     // change to 0 if using server side decorations
  */
  --wbtn-wdt: 3.75rem;
  
  /* ** duration of animationes (mainly sidebar open/close) */
  --anim-dur: .35s;
  
  /* ** border radius of theme */
  --brdr-rad: 8px;
  /* ** spacing around the page and some ui items */
  --page-pad: .8rem;
  
  /* ** color of the border around the page and sidebar overlay */
  --brdr-col: #fafafa30;
  /* ** color of the shadow around the sidebar overlay */
  --shdw-col: #00000020;

  /* ** uncomment the second of each if you 
        don't want a border around the page
  */
  --page-brd-col: var(--brdr-col);
  /* --page-brd-col: transparent; */

  --page-shd-col: var(--shdw-col);
  /* --page-shd-col: transparent; */
  
  /* ** highlight in some areas when in private window */
  --prvt-poi: #6e00bc80;
}

/* ** WINDOWS - makes the window buttons less huge 
   // uncomment <win: from here> if you're on Windows.
*/
/*
.titlebar-buttonbox {
  margin-right: calc(var(--page-pad) * 1.5);
  margin-top: calc(var(--page-pad) * 0.5);
  border-radius: calc(var(--brdr-rad) / 2);
  max-width: 7.5rem;
  justify-content: center;
  overflow: clip;
  height: 2.5rem !important; 
}
.titlebar-buttonbox .titlebar-button {
  padding: .5rem !important;
}
:root {
  --wbtn-wdt: 6.5rem;
}
*/
/* <win: to here> */

/* ## clean up
   // settings to clean up the ui a bit
   // feel free to comment or uncomment each
*/

/* ** hide reader mode button when editing url bar */
#urlbar[breakout-extend="true"] #reader-mode-button {
  display: none;
}

/* hide pip mode button when editing url bar */
#urlbar[breakout-extend="true"] #picture-in-picture-button {
  display: none;
}

/* ** hide "Shield" icon */
#urlbar:not(:hover) #tracking-protection-icon-container {
	width: 0;
	overflow: clip;
}

/* ** hide Site information buttons */
#urlbar:not(:hover) #identity-box {
	width: 0;
	overflow: clip;
}

/* ** hide the "Search with" indicator on the urlbar */
#urlbar-search-mode-indicator { display: none; }

/* ** hide the "Always open in container" button */
#urlbar #pageAction-urlbar-_testpilot-containers {
	display: none;
}

/* ** hide Container name */
#userContext-label, #userContext-icons, #userContext-indicator {
	display: none;
}

/* ** hide identity box */
#identity-box {
  width: 0px;
  overflow: hidden;
}

/* ** hide 'open in side view' button*/
#pageAction-urlbar-side-view_mozilla_org {
  display: none;
}

/* ## layout set up */

* {
  box-sizing: border-box !important;
}


:root { /* // theme layout defs and vars (pls don't change) */
  --brws-bg-col: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
  --brws-tb-col: var(--toolbar-color);
  
  --hedr-hgt: 6.75rem;
  --ovrl-max-wdt: 7px;
  --grad: linear-gradient(90deg, var(--brdr-col) 0%, var(--brdr-col) 10%, var(--shdw-col) 11%, transparent);

  --sdbr-wdt: 0px;
  --ovrl-wdt: 0px;

  --sdbr-pad: calc(var(--page-pad) * 0.75);
  --sdbr-real-max-wdt: calc(var(--sdbr-max-wdt) + var(--ovrl-wdt));
  --sdbr-real-wdt: calc(var(--sdbr-wdt) + var(--ovrl-wdt));

  --sdbr-item-wdt: calc(var(--sdbr-real-max-wdt) - var(--sdbr-pad));

  --bdrr: var(--ovrl-wdt) solid;
  --bdri: var(--grad) 1;
  --bdio: 0 var(--ovrl-wdt);
  --bdis: 0 100%;
}

/* // main setup, rearange the header and browser sidebar general settings
      for the saidebar layout
*/
:is(#navigator-toolbox, #sidebar-box) {
  position: absolute;
  left: 0px;
  min-width: var(--page-pad) !important;
  width: var(--sdbr-real-wdt) !important;
  z-index: 1;
  overflow: clip;
  
  transition:
    width var(--anim-dur) ease-out,
    opacity calc(var(--anim-dur) * 0.75) cubic-bezier(0.39, 0.575, 0.565, 1),
    border calc(var(--anim-dur) * 1.25);
  
  opacity: 0%; /* // changes somewhere else */
  
  /* // the small border and shadow that appears with the overlay */
  border-right: var(--bdrr) !important;
  border-image: var(--bdri) !important;
  border-image-outset: var(--bdio) !important;
  border-image-slice: var(--bdis) !important;
  
  padding-left: var(--sdbr-pad);
  
  & > * {
    width: var(--sdbr-item-wdt) !important;
  }
}

/* // settings specific to the navigator toolbox */
#navigator-toolbox {
  height: var(--hedr-hgt) !important;
  z-index: 2;
  border-radius: 0 !important;
  padding-top: var(--sdbr-pad);
  
  /* // prevent it from auto hiding when in F11 mode */
  &[inFullscreen="true"] {
    margin-top: 0px !important;
    transition:
      width var(--anim-dur) ease-out,
      opacity var(--anim-dur) cubic-bezier(0.39, 0.575, 0.565, 1),
      border calc(var(--anim-dur) * 1.25) !important;
    
    & > * {
      transition: opacity var(--anim-dur) !important;
    }
  }
}

.browserContainer::after {
  content: "";
  pointer-events: none;
  position: absolute;
  -moz-window-dragging: drag;
  z-index: 1;
  background-color: transparent;
  height: var(--page-pad);
  width: 100vw;
}

#sidebar-box {
  top: var(--hedr-hgt);
  height: calc(100vh - var(--hedr-hgt)) !important;
  background: var(--brws-bg-col) !important;
  padding-bottom: var(--sdbr-pad);
}
#sidebar-splitter { display: none }
#sidebar-header {
  padding: .25rem !important;
  border: none !important;
}
/* // hide the sidebar header (only when sidebery opened)
   ** feel free to disable this by commenting the `display: none` inside
   ** or change the sidebarcommand to some other addon (get from browser dev mode)
*/
#sidebar-box[sidebarcommand*="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]
 #sidebar-header {
  display: none;
}
#sidebar-close { display: none }
#sidebar { background: var(--brws-bg-col) }

#browser > #appcontent { transition: margin var(--anim-dur) }
#appcontent .browserStack { background: var(--brws-bg-col) }
#appcontent browser {
  margin: var(--page-pad);
  border-radius: var(--brdr-rad);
  transition: margin var(--anim-dur);
  
  border: 1px solid var(--page-brd-col);
  outline: 1px solid var(--page-shd-col);
  /* box-shadow: 0px 0px 7px var(--shdw-col); */
}
#main-window[inDOMFullscreen="true"] #appcontent browser {
  margin: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

#main-window:has(
  #sidebar-box:hover,
  #navigator-toolbox:hover,
  #navigator-toolbox:focus-within,
  #navigator-toolbox *:active,
  toolbarbutton[open="true"],
  #toolbar-menubar:not([inactive*="true"]),
  #sidebar-box[hidden="true"]
) {
  --sdbr-wdt: var(--sdbr-max-wdt);
  --ovrl-wdt: var(--ovrl-max-wdt);
  
  & :is(#navigator-toolbox, #sidebar-box) {
    opacity: 100%;
    
    animation-name: oflw-vis;
    animation-duration: .01s;
    animation-delay: var(--anim-dur);
    animation-fill-mode: forwards;
    
    & > * { opacity: 100% }
  }
}

#main-window:has(
  toolbarbutton[open="true"],
  #navigator-toolbox:focus-within
) {
  * :is(#navigator-toolbox) { overflow: visible } 
}

#main-window[titlepreface*="|| "] {
  --sdbr-wdt: var(--sdbr-max-wdt);
  --ovrl-wdt: var(--ovrl-max-wdt);
  --bdri: linear-gradient(transparent, transparent);
  
  & :is(#navigator-toolbox, #sidebar-box) {
    opacity: 100%;
    overflow: visible;
    
    /* & > * { opacity: 100%; } */
  }

  & .browserContainer::after {
    margin-left: calc(var(--sdbr-real-wdt) * -1);
  }
  
  & #browser > #appcontent {
    margin-left: var(--sdbr-real-wdt);
  }
  & #appcontent browser {
    margin-left: 2px;
  }
  & #statuspanel { margin-left: 2px }
}

/* // hide sidebar button when sidebar is open,
      as closing the browser sidebar messes up the theme
*/
#main-window:has(#sidebar-box:not([hidden="true"])) #sidebar-button {
  display: none;
}

/* // keep navigator toolbox opened if browser sidebar is closed */
#main-window:has(#sidebar-box[hidden=true]) {
  & #navigator-toolbox {
    height: calc(var(--hedr-hgt) + var(--page-pad)) !important;
    border: none !important;
    box-shadow: 0px 0px 7px var(--shdw-col);
    border-radius: 0 0 var(--brdr-rad) 0 !important;
    border: 1px solid var(--brdr-col) !important;
  }
  & #browser > #appcontent {
    margin-left: 0;
    z-index: 1;
  }
  & #appcontent browser {
    margin-left: var(--page-pad);
  }
}

@keyframes oflw-vis {
  from {overflow: clip;}
  to {overflow: visible;}
}

@keyframes opct-hid {
  from {opacity: 100%;}
  to {opacity: 0%;}
}

/* ## navigator toolbox arrangement */

:root {
  /* // titlebar height */
  --ttlb-hgt: calc(var(--hedr-hgt) / 2);
}

#tabbrowser-tabs,
#alltabs-button,
#new-tab-button,
#private-browsing-indicator-with-label
{
  display: none;
}

/* ** sbow coloured outlines in private window,
      feel free to comment this section to disable this,
      or individual parts
*/
#main-window[privatebrowsingmode="temporary"] {
  --brdr-col: var(--prvt-poi);
  & #urlbar-background {
    border: 2px solid var(--prvt-poi) !important;
  }
}

#titlebar {
  height: var(--ttlb-hgt);
  overflow: visible !important;
}

#toolbar-menubar {
  z-index: 1;
  width: fit-content;
  height: var(--ttlb-hgt);
  position: absolute;
  margin-top: calc(var(--sdbr-pad));
  margin-left: calc(var(--sdbr-pad));
  border-radius: var(--brdr-rad);
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--brws-bg-col) !important;
  color: var(--brws-tb-col) !important;
  border: 1px solid var(--brdr-col);
  box-shadow: 0px 0px 7px var(--shdw-col);
  
  * > menu {
    border-radius: var(--brdr-rad) !important;
    margin-left: .25rem;
    padding: .3rem !important;
    border: none !important;
  }
  * > menu:hover {
    color: var(--brws-bg-col) !important;
    background: var(--brws-tb-col) !important;
  }
  & .titlebar-buttonbox-container { 
    display: none;
  }
}
#toolbar-menubar[inactive*="true"] {
  border: none;
}
#toolbar-menubar:not([autohide*="true"]) {
  margin-left: var(--sdbr-real-wdt);
  margin-top: calc(var(--sdbr-pad) * 1.5);
}
#main-window:has(#toolbar-menubar:not([autohide*="true"])) {
  --wbtn-wdt: 0;
}

#nav-bar {
  margin-top: calc(var(--ttlb-hgt) * -1);
  height: var(--ttlb-hgt) !important;

  width: calc(var(--sdbr-item-wdt) - var(--wbtn-wdt)) !important;
  background: none !important;

  border: none !important;
  box-shadow: none !important;
}
#nav-bar.browser-toolbar {
  overflow: visible !important;
  height: var(--ttlb-hgt);
}

/* // put the url bar in the right position
      below the toolbar
*/
#urlbar-container {
  position: absolute;
  flex: 0px !important;

  margin: 0 !important;
  top: calc(var(--ttlb-hgt) - var(--page-pad) / 2);

  overflow: visible !important;
  box-sizing: border-box !important;
}

#urlbar {
  width: calc(var(--sdbr-item-wdt) - var(--sdbr-pad) * 1.5) !important;
  margin-left: calc(var(--sdbr-pad) * 0.5);
  height: calc(var(--ttlb-hgt) - var(--sdbr-pad)) !important;
  top: calc(var(--sdbr-pad) * 0) !important; 
}
#urlbar[breakout-extend="true"] {
  margin-left: calc(var(--sdbr-pad) / 2);
  width: calc(var(--sdbr-item-wdt) - var(--sdbr-pad) + 2px) !important;
  height: auto !important;
}

#urlbar-background {
  border-radius: calc(var(--brdr-rad) * 1.5) !important;
}

/* ## page content stuff */

#statuspanel { margin: var(--page-pad) }
#statuspanel-label {
  background: var(--brws-bg-col) !important;
  border: 1px solid var(--brdr-col) !important;
  color: var(--brws-tb-col) !important;
}

findbar {
  background: var(--brws-bg-col) !important;
  border: none !important;
  padding: var(--page-pad) !important;
  padding-top: 0 !important;
}
.findbar-textbox {
  border-radius: var(--brdr-rad) !important;
}

#appcontent .devtools-toolbox-side-iframe {
  margin: 0 !important;
  border-radius: 0;
  /* background: var(--brws-bg-col); */
  padding-top: var(--page-pad);
}
#appcontent .devtools-toolbox-bottom-iframe {
  margin: 0;
  border-radius: 0;
}