panel.styl

$bg-color = Menu
$text-color = MenuText
$bg-color-highlighted = Highlight
$text-color-highlighted = HighlightText
$text-color-inactive = GrayText

html, body
  min-height 100vh

body
  background-color $bg-color
  color $text-color
  font menu
  display flex

@media (prefers-color-scheme: dark)
  // Firefox 90,91,94,95 on Linux/GTK have a regression for addons/sidebars where
  // dark theme colors have been forcebly replaced by light theme colors.
  // Use a workaround for these versions (invert foreground/background colors)
  body.linux90
    background-color $text-color
    color $bg-color

    .loaded > span
      color $bg-color

    .audible > .soundicon
      background-color $bg-color

    #drag-line
      border-top dashed 1px $bg-color

#tabs
  margin 0
  padding 0

.tab
  display flex
  width 100%
  padding 1px 6px
  list-style none

.favicon
  width 16px
  height 16px
  display inline-block
  flex none
  margin-right 8px
  opacity 0.7
  will-change transform
  > img
    width 16px
    height 16px

  position relative

.no-favicon
  position relative
  &:before
    content ''
    display block
    position absolute
    left 50%
    top 50%
    transform translateX(-50%) translateY(-50%)
    width 4px
    height 4px
    background-color $text-color
  > img
    display none

span
  white-space nowrap
  text-overflow ellipsis
  overflow hidden
  align-self center
  color $text-color-inactive
  flex 1

.audible > .soundicon
  content ' '
  display block
  flex none
  //align-self center
  width 1.4em
  height 1.4em
  background-color $text-color
  mask url(tab-audio-playing.svg)

.audible.muted > .soundicon
  mask url(tab-audio-muted.svg)

.loaded
  > .favicon
    opacity 1
  > span
    color $text-color

.highlighted
  background-color $bg-color-highlighted
  > span
    color $text-color-highlighted
  > .soundicon
    background-color $text-color-highlighted

.highlighted
  .no-favicon:before
    background-color $text-color-highlighted

#drag-line
  position absolute
  top 0
  left 0
  display none
  border-top dashed 1px $text-color
  width 100%

#empty-space
  flex-grow 1