tab-stash/styles/base.less

body {
  font: caption;
  user-select: none;
  -moz-user-select: none;
  background-color: var(--page-bg);
  color: var(--page-fg);
  scrollbar-color: var(--button-bg) var(--group-bg);
  overscroll-behavior: contain;
}

html[data-view="popup"] {
  // NOTE: The weird widths here are so that everything looks right when Tab
  // Stash is moved to Firefox's popup menu (which for some reason STILL,
  // after who knows how many years, doesn't change width to accommodate
  // extension popups...)
  & > body {
    min-width: 200px;
    max-width: 600px;
    width: 376px;
    height: 600px;
  }

  &[data-os="mac"] > body {
    width: 378px;
  }

  &[data-os="win"] > body {
    width: 348px;
  }
}

html[data-browser="chrome"] > body {
  font: initial;
  font-family: system-ui, sans-serif;
  font-size: 9.5pt;
}
html[data-browser="chrome"][data-os="win"] > body {
  font-size: 9pt;
}

// Anything that has keyboard focus
:focus {
  box-shadow: var(--focus-shadow);
  outline: none;
}

// Basic formatting
em {
  font-style: italic;
}

// Links
a,
a:visited {
  color: var(--userlink-fg);
  text-decoration: underline;
}
a:hover,
a:focus-within {
  background-color: var(--userlink-hover-bg);
  color: var(--userlink-hover-fg);
}
a:active,
a:focus-within {
  box-shadow: none;
}
a:active {
  background-color: var(--userlink-active-bg);
  color: var(--userlink-active-fg);
}
summary:active,
summary:focus-within {
  box-shadow: none;
}

form {
  row-gap: var(--ctrl-mh);
  column-gap: var(--ctrl-mw);
}
button,
input,
select,
textarea {
  margin: 0;
  padding: var(--ctrl-ph) var(--ctrl-pw);
}
button,
input,
select {
  display: inline-block;

  font: inherit;
  color: var(--page-fg);

  vertical-align: middle;
  white-space: nowrap;
}
output {
  cursor: auto;
}
.input {
  cursor: text;
}
output,
.input {
  display: block;

  user-select: text;
  -moz-user-select: text;
  overflow-y: auto;
  overflow-wrap: anywhere;
}
input,
textarea,
.input,
output {
  background-color: var(--ctrl-bg);
  color: var(--page-fg);
  padding: var(--input-text-ph) var(--input-text-pw);
  border: var(--ctrl-border);
  border-radius: var(--input-text-border-radius);
}
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
select {
  padding: var(--ctrl-ph) var(--ctrl-pw);
  border: none;
  border-radius: var(--ctrl-border-radius);
  background-color: var(--button-bg);

  &:not(:disabled):hover {
    background-color: var(--button-hover-bg);
  }
  &:not(:disabled):active {
    background-color: var(--button-active-bg);
  }
}
select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: var(--icon-select-disclosure);
  background-position: right var(--ctrl-pw) top 50%;
  background-size: 12px;
  background-repeat: no-repeat;
  padding-right: calc(2 * var(--ctrl-pw) + 12px);
}
option {
  font: inherit;
  color: var(--ctrl-fg);
  background-color: var(--ctrl-bg);
}

label {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--ctrl-pw);
}

.disabled,
[disabled] {
  color: var(--disabled-fg);
}

.selected {
  background-color: var(--selected-bg);
  font-weight: bold;

  &:hover,
  &:focus-within {
    background-color: var(--selected-hover-bg);
  }
}

.dragging {
  opacity: 50%;
}

.dnd-list {
  & > .dnd-list-ghost {
    display: block;
    z-index: 1;

    height: var(--ghost-border-width);
    margin: calc(-1 * var(--ghost-border-width) / 2) 0;

    &:last-child {
      // We give the last child a little more space since it's otherwise very
      // hard to actually hit it as a drop target.
      height: calc(var(--item-h) * 2 / 3);
      margin: calc(-1 * var(--item-h) / 3) 0;
    }

    // Uncomment for debugging DnD ghost placement:
    // box-shadow: inset var(--ghost-border-width) var(--ghost-border-width)
    //   rgba(255, 0, 0, 40%);
    // border-radius: var(--ctrl-border-radius);

    &.dropping-here {
      background: linear-gradient(
          to bottom,
          transparent 0%,
          transparent calc(50% - var(--ghost-border-width) / 2),
          var(--userlink-fg) calc(50% - var(--ghost-border-width) / 2),
          var(--userlink-fg) calc(50% + var(--ghost-border-width) / 2),
          transparent calc(50% + var(--ghost-border-width) / 2),
          transparent 100%
        )
        center center;
    }
  }
}