uc-ctrl-tab.css

/* This Source Code Form is subject to the terms of the Creative Commons
 * Attribution-NonCommercial-ShareAlike International License, v. 4.0.
 * If a copy of the CC BY-NC-SA 4.0 was not distributed with this
 * file, You can obtain one at http://creativecommons.org/licenses/by-nc-sa/4.0/
 * or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA. */

/* this stylesheet only controls the appearance of the ctrl+tab popup */

#ctrlTab-panel {
  appearance: none !important;
  border-style: none !important;
  font-weight: normal !important;
  box-shadow: none !important;
  background: none !important;
  --panel-background: var(--ctrlTab-overlay-color) !important;
  border-radius: 15px !important;
  overflow: hidden !important;
}

#ctrlTab-previews {
  align-items: center;
  justify-content: space-between;
  display: flex !important;
  border-radius: 0% !important;
}

.ctrlTab-preview {
  background: none !important;
  flex: 0 !important;

  &:not([hidden]) {
    display: flex !important;
  }

  &:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner {
    margin: -10px -10px 0 !important;
  }
}

.ctrlTab-preview-inner img:-moz-broken {
  visibility: hidden !important;
}

.ctrlTab-canvas {
  box-shadow: none !important;
  border: none !important;
  fill: currentColor !important;
  fill-opacity: 0.8 !important;
  -moz-context-properties: fill, fill-opacity !important;
  border-radius: 3px !important;

  /* fix an issue where multiple canvases are rendered in one box */
  > canvas:not(:last-child) {
    display: none !important;
  }
}

#ctrlTab-showAll-container {
  margin-top: 8px !important;
}

#ctrlTab-showAll {
  background-color: var(--ctrlTab-panel-bgcolor) !important;
  border: 1px solid var(--blurred-dialog-border-color) !important;

  .button-box {
    padding: 2px 4px !important;
  }
}

.ctrlTab-preview-inner {
  color: var(--ui-text-80) !important;
  margin: 0 !important;
  padding: 0 !important;
  padding: 10px !important;
  border: 1px solid var(--blurred-dialog-border-color) !important;
  border-radius: 9px !important;
  box-shadow: 0 0 4px -1px rgba(0, 0, 0, 0.2), 0 0 25px -2px rgba(0, 0, 0, 0.2) !important;
  background-color: var(--ctrlTab-panel-bgcolor) !important;
}

#ctrlTab-showAll:focus,
#ctrlTab-showAll:focus-within,
.ctrlTab-preview:focus > .ctrlTab-preview-inner {
  background-color: var(--ctrlTab-panel-focused-bgcolor) !important;
  border-color: transparent !important;
  outline: 4px solid var(--ctrlTab-panel-focused-bgcolor) !important;
  outline-offset: -2px !important;
  text-shadow: 0 0 1px hsla(0, 0%, 0%, 1), 0 0 2px hsla(0, 0%, 0%, 0.75), 0 0 4px hsla(0, 0%, 0%, 0.5) !important;
}

.ctrlTab-preview:focus > .ctrlTab-preview-inner > .ctrlTab-canvas {
  box-shadow: 0 0 4px hsla(0, 0%, 0%, 0.25), 0 0 6px hsla(0, 0%, 0%, 0.125), 0 0 8px hsla(0, 0%, 0%, 0.125) !important;
}

.ctrlTab-favicon-container {
  align-items: start !important;
  justify-items: start !important;
  box-shadow: none !important;
  margin-inline-start: 7px !important;
  margin-top: 7px !important;
  padding-bottom: 13px !important;
  height: 45px !important;
  position: absolute !important;
}

.ctrlTab-favicon {
  margin: 0 !important;

  &[src] {
    background: hsla(0, 0%, 49%, 0.3) !important;
    width: 32px !important;
    height: 32px !important;
    padding: 3px !important;
    box-shadow: none !important;
    border-radius: 3px !important;
    -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
    fill: currentColor !important;
  }
}

.ctrlTab-label {
  color: inherit !important;
  margin-bottom: -1.5px !important;
}