userChrome.css

/* browser toolbox prompt hack - set devtools.debugger.prompt-connection to false */


/*? shimmer variables */
:root {
  /*? urlbar border radius */
  --shimmer-urlbar-rounding: 16px;
  --shimmer-urlbar-inner-rounding: calc(var(--shimmer-urlbar-rounding) * .75);

  /*? max tab width */
  --shimmer-tab-max-width: 165px;
  /*? min tab width */
  --shimmer-tab-min-width: 135px;

  /* --shimmer-tab-height: 32px; */
  /* --shimmer-titlebar-height: calc(var(--shimmer-tab-height) + 6px); */
  --shimmer-tab-border-radius: 16px;
  --shimmer-browser-border-radius: 20px;
  --shimmer-top-bottom-browser-margin: 8px;

  /* could be hardcoded in some places... */
  --shimmer-btn-anim: background 0.075s linear, opacity 0.075s linear;

  /*? gap between window control buttons */
  --shimmer-winctr-gap: 5px;
  /*? margin around winctr buttons */
  --shimmer-winctr-margin: 12px;
}

/*? overwritten variables */
:root {
  --arrowpanel-menuitem-margin-inline: 5px !important;
  --arrowpanel-header-min-height: calc(calc(var(--arrowpanel-header-back-icon-full-width) + (var(--panel-separator-margin-horizontal) * 2)) * 0.5) !important;
  --arrowpanel-menuitem-padding: 4px 8px !important;
  --arrowpanel-border-radius: 12px !important;
  --arrowpanel-menuitem-border-radius: calc(var(--arrowpanel-border-radius) / 1.65) !important;
  /* --var-tab-min-height: 10px !important; */
  /* --tab-border-radius: var(--shimmer-tab-border-radius) !important; */
  /*? disable opacity change when tabbed out */
  --inactive-titlebar-opacity: 1 !important;
  --splitter-width: 8px !important;
}

/*? customize context menu */
/* #context-back, */
/* #context-bookmarklink, */
/* #context-bookmarkpage, */
/* #context-forward, */
/* #context-inspect, */
#context-inspect-a11y,
/* #context-navigation, */
/* #context-openlink, */
/* #context-openlinkintab, */
/* #context-openlinkinusercontext-menu, */
/* #context-openlinkprivate, */
#context-pocket,
/* #context-reload, */
#context-savelink,
#context-savelinktopocket,
/* #context-savepage, */
/* #context-searchselect, */
/* #context-selectall, */
/* #context-sendlinktodevice, */
/* #context-sendpagetodevice, */
/* #context-sep-navigation, */
/* #context-sep-open, */
/* #context-sep-selectall, */
#context-sep-sendlinktodevice,
#context-sep-sendpagetodevice,
/* #context-sep-viewbgimage, */
#context-sep-viewsource,
/* #context-stop, */
/* #context-viewbgimage, */
/* #context-viewinfo, */
#context-viewpartialsource-selection,
#context-viewsource,
/* #inspect-separator, */
#screenshots_mozilla_org_create-screenshot {
  display: none !important;
}

/*? slim scrollbars everywhear!!!! */
* {
  scrollbar-width: thin !important;
}

/*! ====== titlebar ====== */

.toolbarbutton-animatable-box>image {
  /*? change reload button animation length */
  animation-duration: 0.7s !important;
  animation-timing-function: ease-in-out !important;
}

/*? change bookmark star button to yellow_ when starred */
#star-button[starred="true"] {
  fill: #f7e617 !important;
  stroke: #000 !important;
  stroke-width: 2px !important;
  filter: drop-shadow(0px 0px 0.5px #000) !important;
}

/*? taller navbar */
@media not (-moz-bool-pref: "shimmer.shorter-navbar") {
  #navigator-toolbox, #nav-bar {
    min-height: 50px !important;
  }
}
#TabsToolbar {
  height: 100% !important;
}


/*? make extensions buttons reach the entire height of navbar */
#nav-bar-customization-target toolbarbutton {
  height: 100% !important;
}

#urlbar {
  margin: 0 !important;
}

/*? move the window control buttons to the same row as urlbar */
#main-window[titlepreface="​"] #navigator-toolbox {
  display: grid !important;
}
#PersonalToolbar:not([collapsed="true"]) {
  padding-bottom: calc(var(--shimmer-top-bottom-browser-margin) / 2) !important;
}
#main-window[titlepreface="​"] #PersonalToolbar {
  grid-area: 2 / 1 / 3 / 3 !important;
}
@media not (-moz-bool-pref: "shimmer.reverse-winctr-buttons-side") {
  #main-window[titlepreface="​"] #navigator-toolbox {
    grid-template-columns: 1fr auto !important;
  }
  #main-window[titlepreface="​"] #nav-bar {
    grid-area: 1 / 1 / 2 / 2 !important;
  }

  @media (-moz-bool-pref: "shimmer.nightly") {
    #main-window[titlepreface="​"] #TabsToolbar {
      grid-area: 1 / 2 / 2 / 3 !important;
    }
  }
  @media not (-moz-bool-pref: "shimmer.nightly") {
    #main-window[titlepreface="​"] #titlebar {
      grid-area: 1 / 2 / 2 / 3 !important;
    }
  }
}
@media (-moz-bool-pref: "shimmer.reverse-winctr-buttons-side") {
  #main-window[titlepreface="​"] #navigator-toolbox {
    grid-template-columns: auto 1fr !important;
  }

  #main-window[titlepreface="​"] #nav-bar {
    grid-area: 1 / 2 / 2 / 3 !important;
  }

  @media (-moz-bool-pref: "shimmer.nightly") {
    #main-window[titlepreface="​"] #TabsToolbar {
      grid-area: 1 / 1 / 2 / 2 !important;
    }
  }
  @media not (-moz-bool-pref: "shimmer.nightly") {
    #main-window[titlepreface="​"] #titlebar {
      grid-area: 1 / 1 / 2 / 2 !important;
    }
  }

  #TabsToolbar {
    flex-direction: row-reverse !important;
  }
}

/*TODO possible fix for macos icons not centered (#3) */
.titlebar-buttonbox-container {
  justify-content: space-evenly !important;
  align-items: center !important;
}
.titlebar-buttonbox {
  height: 100% !important;
  align-items: center !important;
}
.titlebar-button {
  height: 100% !important;
}

/*? make the window grabbable at the top, but not the window control buttons */
#main-window[titlepreface="​"] #nav-bar {
  border-top: 1px solid rgba(0, 0, 0, 0) !important;
}
#main-window[titlepreface=""] .toolbar-items {
  margin-top: 1px !important;
}

/*? hide native tabs */
#main-window[titlepreface="​"] #TabsToolbar > .toolbar-items {
  display: none !important;
}

/*? make navigation buttons white_ when sidebar open */
#main-window[titlepreface="​"] #navigator-toolbox {
  background: var(--toolbar-bgcolor) !important;
}

/*! === urlbar === */

/*? rounded url bar and box */
#urlbar-background {
  background: var(--toolbar-field-background-color) !important;
  /* background: color-mix(in srgb, var(--toolbar-bgcolor) 90%, rgba(0, 0, 0, 255)) !important; */
  border-radius: var(--shimmer-urlbar-rounding) !important;
  transition: all 0.1s linear !important;
}

/*? rounded buttons inside urlbar (firefox logo on about pages, padlock, trans, etc.) */
#identity-box > box, #tracking-protection-icon-container, #page-action-buttons > *, #urlbar-revert-button-container, #urlbar-searchmode-switcher {
  border-radius: var(--shimmer-urlbar-rounding) !important;
}

/*? needed for popup transition to work */
#urlbar {
  margin-top: 0 !important;
  transition: margin-top 0.45s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
}

/*? make the background of extended urlbar move down and BROKEN drop a blur behing */
#urlbar[breakout-extend] {
  position: fixed !important;
  margin-top: 12vh !important;
  /* margin-left: 8vw !important; */
  z-index: 9999 !important;
  transition: margin-top 0.45s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
  /* backdrop-filter: blur(8px) !important; */
  background: rgba(0, 0, 0, 0) !important;
  /* border-radius: 20px; */
  left: 10% !important;
  width: calc(100vw - 20%) !important;
}

#urlbar[breakout-extend] #urlbar-background {
  background: var(--toolbar-field-focus-background-color) !important;
  transition: all 0.1s linear !important;
}

/*? urlbox backdrop */
#urlbar[breakout-extend]::before{
  content: '' !important;
  width: 100vw !important;
  height: 100vh !important;
  position: fixed !important;
  pointer-events: none !important;
  overflow: hidden !important;
  top: 0 !important;
  left: 0 !important;
  background: color-mix(in srgb, var(--toolbar-field-focus-background-color) 65%, rgba(0, 0, 0, 0)) !important;
}


@media (min-width: 800px) {
  /*? urlbar bigger text */
  #urlbar[breakout-extend] #urlbar-input {
    font-size: 1.5rem !important;
  }

  /*? taller urlbar for bigger text when extended */
  #urlbar[breakout-extend] .urlbar-input-container {
    height: 48px !important;
  }
}

/*? centered text when urlbar not in use */
#urlbar:not(:is([breakout-extend])) #urlbar-input {
  text-align: center !important;
}

/*? center the text further */
#urlbar-input {
  margin-right: 40px !important /* width of identity box */;
}

/*? hide search one offs */
@media not (-moz-bool-pref: "shimmer.show-search-one-offs") {
  .search-one-offs {
    display: none !important;
  }
}

/*? fix for floating urlbar */
@media (-moz-bool-pref: "shimmer.nightly") { 
  #urlbar:not([breakout-extend]) {
    top: auto !important;
  }
}

/*? hide 1px line below urlbar */
.urlbarView-body-inner {
  border-top: none !important;
}

/*? hide border below top bar */
#navigator-toolbox {
  border: 0px !important;
}

/*? make rounded borders have nice color */
#browser {
  background: var(--toolbar-bgcolor) !important;
}

#toolbar-menubar {
  display: none !important;
}
.titlebar-spacer {
  display: none !important;
}

/*! === findbar === */

findbar {
  border: 0 !important;
  /*? relative for margins */
  position: relative !important;
  border-radius: 16px !important;
  bottom: 60px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 530px !important;
  height: 3rem !important;
  display: flex !important;
  align-items: center !important;
  /*? fix for relative positioning */
  margin-top: -40px !important;
  border: 0 !important;
  transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
  overflow-x: visible !important;
  filter: drop-shadow(0px 0px 1px color-mix(in srgb, var(--lwt-text-color) 60%, rgba(0, 0, 0, 0)));
}

findbar[hidden]{
  margin-bottom: 0 !important;
  opacity: 0 !important;
  background: rgba(0, 0, 0, 0) !important;
  transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
}

findbar:not([hidden]) {
  opacity: 1 !important;
  background: var(--lwt-accent-color) !important;
}

.findbar-container, .findbar-container > hbox {
  height: 100% !important;
}

.findbar-container {
  margin-left: 7px !important;
}

/*? change text to icons for smaller findbar */
.findbar-container checkbox::after {
  height: 16px;
  font-size: 14px;
  background-size: cover;
  display: flex;
  align-items: center;
  -moz-context-properties: fill;
  fill: currentColor;
  color: inherit;
}
.findbar-highlight::after {
  content: '';
  background: url(./assets/icons/hl.svg) no-repeat;
  width: 18px;
  background-position-y: -1px;
}
.findbar-match-diacritics::after {
  content: 'ąâ';
  font-weight: 600;
}
.findbar-entire-word::after {
  content: '';
  background: url(./assets/icons/word.svg) no-repeat;
  width: 20px;
  background-position-y: -2px;
}
.findbar-case-sensitive::after {
  content: 'Aa';
  font-weight: 600;
}

/*? hide all text for findbar checkboxes */
.findbar-container checkbox > .checkbox-label-box {
  display: none !important;
}

.findbar-textbox {
  border-radius: 11px !important;
  font-family: monospace !important;
  padding: 5px 8px !important;
  width: 16em !important;
}

.findbar-closebutton:hover {
  opacity: 1 !important;
  background: var(--toolbarbutton-hover-background) !important;
}
.findbar-closebutton {
  opacity: 1 !important;
  background: var(--lwt-accent-color) !important;
  /* wasn't square for some reason */
  width: auto !important;
}

/*? move matched amount below main findbar */
.found-matches {
  position: absolute !important;
  padding: 20px 13px 3px 10px !important;
  top: 14px !important;
  background: var(--lwt-accent-color) !important;
  /* border: solid var(--arrowpanel-border-color) 1px !important; */
  left: -12px !important;
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
  z-index: 9 !important;
}
.findbar-find-status {
  display: none !important;
}
.found-matches::before {
  z-index: 8 !important;
}
.found-matches::after {
  position: absolute;
  display: block;
  content: '';
  width: 16px;
  height: 22px;
  background: var(--lwt-accent-color);
  right: -6px;
  top: 12px;
  transform: rotate(45deg);
}
.findbar-textbox { 
  z-index: 10 !important;
}


/*? compact private browsing indicator */
#private-browsing-indicator-with-label > label, .private-browsing-indicator-label {
  display: none !important;
}
.private-browsing-indicator-icon {
  width: 24px !important;
  height: 24px !important;
}

#PanelUI-menu-button {
  display: flex !important;
}

@media (max-width: 620px) {
  #PanelUI-menu-button {
    display: none !important;
  }

  #unified-extensions-button {
    margin-right: 12px !important;
  }
}

/*? make the go button bigger in urlbar */
.urlbar-go-button {
  height: 100% !important;
  width: auto !important;
  padding: 1.5% !important;
  border-radius: var(--shimmer-urlbar-inner-rounding) !important;
}


/*? rounded results */
.urlbarView-row {
  border-radius: var(--shimmer-urlbar-inner-rounding) !important;
}
/*? for some reason the results get clipped so adding some padding */
.urlbarView {
  padding: 0 5px !important;
}

.urlbarView-row:hover {
  background: var(--urlbar-box-hover-bgcolor) !important;
}

/*? small separator between results and search bar */
/* .urlbarView-body-outer {
  border-top: 1px rgba(0, 0, 0, 0.15) solid !important;
} */
.urlbarView-body-outer::before {
  content: '';
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  height: 1px;
  background: #aaa;
  opacity: 0.2;
  display: block;
  mix-blend-mode: difference;
}
.urlbarView-body-inner {
  border: 0 !important;
}

/*? increase padding in urlbar */
#urlbar-results {
  padding-bottom: 8px !important;
}

/*? seamless transition */
/* #sidebar-box {
  box-shadow: -10px -100px 0px 100px var(--toolbar-bgcolor),
  0 0px 20px 15px var(--lwt-accent-color);
} */
/*? hide the hiding box shadow */
/* #navigator-toolbox {
  z-index: 2 !important;
} */

/*? add margin to left of browser when sidebar hidden */
#sidebar-box[hidden="true"] ~ #tabbrowser-tabpanels {
  padding-left: 3px !important;
}

#tabbrowser-tabpanels, #sidebar-box {
  background: rgba(0, 0, 0, 0) !important;
}

/*! === floating statuspanel === */

/*? move statuspanel */
#statuspanel {
  bottom: 11px !important;
  left: 11px !important;
}
#statuspanel[mirror] {
  left: auto !important;
  right: 18px !important;
}

/*? round statuspanel */
#statuspanel, #statuspanel-label {
  border-radius: 10px !important;
}

/*? border and alternative statuspanel padding */
#statuspanel-label {
  padding: 3px 8px !important;
  border: solid 1px var(--button-background-color-active) !important;
}

/*? color the statuspanel */
#statuspanel-label {
  background: var(--lwt-accent-color) !important;
  color: var(--lwt-text-color) !important;
}

#statuspanel, #statuspanel[type="overLink"] {
  transition: opacity 75ms, visibility 75ms !important;
}

/*! === tabs === */

/*? tab on titlebar that's not pinned */
.tabbrowser-tab[fadein][orient="horizontal"]:not([pinned]) {
  /*? min tab width */
  min-width: var(--shimmer-tab-min-width) !important;
  /*? max tab width */
  max-width: var(--shimmer-tab-max-width) !important;
}

/*? make tab background round and small */
.tab-background {
  min-height: 0 !important;
  border: solid 1px color-mix(in srgb, var(--tab-selected-bgcolor) 90%, #000);
  box-shadow: 0 0 0 #fff !important;
  /* CHANGED check overwritten vars for tab rounding */
  border-radius: var(--shimmer-tab-border-radius) !important;
}

/*? show tab close buttons when hovering tab */
.tabbrowser-tab[orient="horizontal"]:not([pinned]):hover .tab-close-button {
  display: block !important;
}

/*? hide shadow on tabbrowser (overflow already indicated by arrow clickable) */
spacer[part="overflow-end-indicator"], spacer[part="overflow-start-indicator"] {
  display: none !important;
}

/*? change tab background color */
.tab-background {
  background: color-mix(in srgb, var(--tab-selected-bgcolor) 20%, rgba(0, 0, 0, 0));
} 

/*? hide firefox view separator */
#tabbrowser-tabs {
  border: 0 !important;
}

/*? tab height and x button pos */
#tabbrowser-tabs[orient="vertical"] .tab-background {min-height: 28px !important;}

#tabbrowser-tabs[orient="vertical"][expanded] {
	min-width: 400px !important;
}

@media not (-moz-bool-pref: "shimmer.taller-tabs") {
  #tabbrowser-tabs[orient="horizontal"], .tabbrowser-tab[orient="horizontal"] {
    min-height: 38px !important;
    height: 38px !important;
  }

  .tab-close-button {
    margin-inline-end: -7px !important;
  }
}
@media (-moz-bool-pref: "shimmer.taller-tabs") {
  #tabbrowser-tabs[orient="horizontal"], .tabbrowser-tab[orient="horizontal"] {
    min-height: 45px !important;
    height: 45px !important;
  }

  .tab-close-button {
    margin-inline-end: -3px !important;
  }
}

/*? make inner tab html occupy whole height (for some reason wouldn't happen to pinned tab) */
.tab-stack {
  height: 100% !important;
}

/*? don't change background behind tabs even when window inactive */
#navigator-toolbox, #navigator-toolox:-moz-window-inactive {
  background: var(--lwt-accent-color) !important;
}

/*? rounded tab close button */
.tab-close-button {
  border-radius: var(--shimmer-tab-border-radius) !important;
}

.tab-close-button, .tab-close-button:hover {
  transition: var(--shimmer-btn-anim) !important;
}

/*? reduce max tab width, breaks everything lol */
/* .tabbrowser-tab {
  max-width: 14em !important;
} */

/*? minimal tab width */
#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab:not([pinned])[selected] {
  min-width: 12em !important;
}

/*! === sidebar === */

/*? hide header, or give good color */
@media not (-moz-bool-pref: "shimmer.show-sidebar-header") {
  #sidebar-header {
    display: none !important;
  }
}
#sidebar-header {
  background: var(--lwt-accent-color) !important;
}

/*? remove ugly border below "tabs" text */
#sidebar-header {
  border-bottom: 0 !important;
}

#sidebar-box:not([hidden]), #sidebar-box:not([hidden]) ~ #tabbrowser-tabbox {
  margin-bottom: var(--shimmer-top-bottom-browser-margin) !important;
}

#sidebar-box:not([hidden]) {
  margin-left: 0 !important;
  margin-right: var(--splitter-width) !important;
}
@media (-moz-bool-pref: "shimmer.sidebar-right-side") {
  #sidebar-box:not([hidden]) {
    margin-right: 0 !important;
    margin-left: var(--splitter-width) !important;
  }
}

#sidebar-splitter {
  --sidebar-splitter: 8px !important;
  border: 0 !important;
}

@media not (-moz-bool-pref: "shimmer.show-sidebar-header-close-button") {
  #sidebar-close {
    display: none !important;
  }
}

#sidebar-close {
  /* ch */
  margin-right: 10px !important;
}

/*? rounded browser on left edge */
#sidebar-box:not([hidden]) ~ #tabbrowser-tabbox {
  border-radius: 0;
  border-top-left-radius: var(--shimmer-browser-border-radius) !important;
  border-bottom-left-radius: var(--shimmer-browser-border-radius) !important;
  overflow: hidden !important;
}

/*? rounded sidebar on right edge */
#sidebar-box {
  border-top-right-radius: var(--shimmer-browser-border-radius) !important;
  border-bottom-right-radius: var(--shimmer-browser-border-radius) !important;
  overflow: hidden !important;
}

@media (-moz-bool-pref: "shimmer.sidebar-right-side") {
  /*? rounded browser on right edge */
  #sidebar-box:not([hidden]) ~ #tabbrowser-tabbox {
    border-radius: 0 !important;
    border-top-right-radius: var(--shimmer-browser-border-radius) !important;
    border-bottom-right-radius: var(--shimmer-browser-border-radius) !important;
  }

  /*? rounded sidebar on left edge */
  #sidebar-box {
    border-radius: 0 !important;
    border-top-left-radius: var(--shimmer-browser-border-radius) !important;
    border-bottom-left-radius: var(--shimmer-browser-border-radius) !important;
  }
}

/*? animated sidebar-box hidden animation, breaks native tabs because the sidebery titlepreface reappears when #sidebar-box display prop isn't none */
/* #sidebar-box[hidden] {
  visibility: hidden !important;
  min-width: 0 !important;
  width: 0 !important;
  transition: width 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
  opacity: 0 !important;
}
#sidebar-box:not([hidden]) {
  opacity: 1 !important;
}

#sidebar-splitter:not([state="dragging"]) ~ #tabbrowser-tabbox, #sidebar-splitter:not([state="dragging"]) ~ #sidebar-box, #sidebar-splitter[hidden] ~ #sidebar-box {
  transition: width 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
}

#sidebar-splitter[hidden] {
  display: flex !important;
  width: 0px !important;
} */

/*! === menus === */
/*? consistent color for ctx menus */
.menupopup-arrowscrollbox, #searchmode-switcher-popup slot[part="content"] {
  background: var(--lwt-accent-color, var(--panel-background)) !important;
  border-radius: var(--arrowpanel-border-radius) !important;
  border: 0 !important;
  outline: solid 1px var(--lwt-tab-line-color) !important;
}

/*? round context menu items */
/* --panel-background */
menuitem, menu, .menu-iconic, #searchmode-switcher-popup tooblarbutton {
  border-radius: var(--arrowpanel-menuitem-border-radius) !important;
  /* margin-inline: var(--arrowpanel-menuitem-margin-inline) !important; */
  padding: var(--arrowpanel-menuitem-padding) !important;
}
/*? better hover color */
/* menuitem:hover, menu:hover, .menu-iconic:hover, #searchmode-switcher-popup:hover tooblarbutton {
  background: var(--panel-item-hover-bgcolor) !important;
} */
menu, menuitem {
  &:where([_moz-menuactive]) {
    &:not([disabled="true"]) {
      background: color-mix(in srgb, var(--lwt-accent-color, var(--panel-background)) 85%, var(--lwt-text-color, var(--panel-color))) !important;
    }
    background: color-mix(in srgb, var(--lwt-accent-color, var(--panel-background)) 92.5%, var(--lwt-text-color, var(--panel-color))) !important;
  }
}

/*? fading backgrounds on buttons */
menuitem, toolbarbutton > stack, toolbaritem, toolbarbutton, toolbarbutton > image, .urlbarView-row, menu,
menuitem:hover, toolbarbutton:hover > stack, toolbaritem:hover, toolbarbutton:hover, toolbarbutton:hover > image, .urlbarView-row:hover, menu:hover,
.findbar-closebutton, .findbar-closebutton:hover
{
  transition: var(--shimmer-btn-anim) !important;
}

/*?  */
#context-navigation menuitem {
  padding: 2px !important;
}

/*? smaller manage extensions button */
#unified-extensions-manage-extensions {
  padding: 5px 8px !important;
  margin-bottom: 5px !important;
}

/*? larger titles in panels like extensions */
.panel-header {
  font-size: 1.35rem !important;
}

/*? panelui smaller margin */
.panel-subview-body {
  margin-bottom: 5px !important;
}

.panel-subview-body {
  padding: 5px 0 0 0 !important;
}

treecol {
  transition: var(--shimmer-btn-anim) !important;
}

/*! === autoscroller === */

/* why no work */
/* #autoscroller slot[part="content"] {
  --panel-background: var(--lwt-accent-color) !important;

  background-color: var(--panel-background) !important;
  background-image: var(--autoscroll-background-image) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-radius: 12px !important;
} */

/*! === compact, macos-like winctr buttons === */
@media not (-moz-bool-pref: "shimmer.disable-compact-winctr-buttons") {
  .titlebar-buttonbox > toolbarbutton {
    background: rgba(0, 0, 0, 0) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  
    & > image {
      width: 14px !important;
      height: 14px !important;
      border-radius: 12px !important;
      transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
      list-style-image: none !important;
      box-sizing: content-box !important;
      padding: 0px !important;
      background: var(--toolbarbutton-hover-background) !important;
    }
  
    &:hover > image {
      transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
      padding: 5px 0 !important;
    }
  }
  .titlebar-close {
    /* background: hsl(355, 86%, 49%) url(chrome://browser/skin/window-controls/close.svg) no-repeat center !important; */
    &:hover > image {
      background: #fc5753 !important;
    }
    padding-right: calc(var(--shimmer-winctr-gap) + var(--shimmer-winctr-margin)) !important;
    padding-left: var(--shimmer-winctr-gap) !important;
  }
  .titlebar-min {
    &:hover > image {
      background: #fdbc40 !important;
    }
    padding-left: calc(var(--shimmer-winctr-gap) + var(--shimmer-winctr-margin)) !important;
    padding-right: var(--shimmer-winctr-gap) !important;
  }
  .titlebar-max, .titlebar-restore {
    &:hover > image {
      background: #33c748 !important;
    }
    padding: 0 var(--shimmer-winctr-gap) !important;
  }
  @media not (-moz-bool-pref: "shimmer.reverse-winctr-buttons-side") {
    #main-window[titlepreface="​"] #PanelUI-menu-button {
      padding-right: 0 !important;
    }
  }
  /* .titlebar-buttonbox-container {
    margin: 0 var(--shimmer-winctr-margin) 0 0 !important;
  } */
}


/* review:  todo, change, fix */
/*TODO some of the usual buttons that appear on the right-click context menu are hidden. right now you can change them at the top of `userChrome.css`. i will maybe later introduce `about:config` variables for easier customization */
/*TODO autoscroller styles */