tab-stash/styles/index.less

//
// Define a bunch of CSS variables.
//
// Note that, with the exception of certain overrides for compact metrics, these
// files generally do not apply style to the DOM; that's left to the rest of
// this file.
//
@import "themes/index.less"; // Colors and icons
@import "metrics/index.less"; // Measurements (width, height, etc.)

//
// GENERIC STYLING
//

// The "base" styling, which applies to anything/everything on the page as a
// whole.
@import "base";

// Generic styling for modals like dialogs and menus
@import "modal";

// Misc. generic styling for prototypical elements
.hidden {
  display: none !important;
}

.clickme,
.confirm-dialog-default {
  box-shadow: 0 0 4px 0px var(--userlink-fg);
  background-color: var(--userlink-fg);
  color: var(--page-bg);
  &:not(:disabled):hover {
    background-color: var(--userlink-hover-fg);
  }
  &:not(:disabled):active {
    background-color: var(--userlink-active-fg);
  }
  &:focus-within {
    box-shadow: var(--focus-shadow);
  } /* XXX dup of :focus */
}

.status-text {
  color: var(--page-fg);
  font-style: italic;
  opacity: 0.5;

  a {
    color: var(--page-fg);
    text-decoration: dotted underline;

    &:hover {
      color: var(--userlink-fg);
      text-decoration: solid underline;
    }
  }
}

// Ephemeral input boxes (shouldn't look like such until you click on them)
.editable {
  border: none;
  background: transparent;
  border-radius: var(--ctrl-border-radius);

  .forest-item:hover & {
    box-shadow: var(--ephemeral-hover-shadow-metrics)
      var(--ephemeral-hover-shadow-clr);
  }
  &:focus,
  &:focus-within {
    background-color: var(--ctrl-bg);
    box-shadow: var(--focus-shadow);
  }
}

//
// SPECIFIC STYLING
//

// The overall page structure common to all top-level pages.
@import "page";

// Toolbar buttons, aka "actions"
@import "action";

// The "forest" view (i.e. grouped hierarchies)
@import "forest";

// Import/Export Dialogs
.export-dialog output h3 {
  margin-top: 12pt;
  font-size: 12pt;
}

// Progress Dialogs
.modal-backdrop.progress {
  cursor: wait;
}
.dialog.progress {
  &.cancellable {
    cursor: progress;
  }
  &:not(.cancellable) {
    cursor: wait;
  }
  // Define a fixed width for progress dialogs so they're not constantly
  // resizing as statuses are changing.
  width: 50rem;

  display: flex;
  flex-direction: column;

  .progress-item {
    display: grid;
    grid-template-columns: 1fr 2fr;

    & > progress {
      grid-row: 1;
      grid-column: 1;

      min-width: 32px;

      // Otherwise the progress bar will be a weird size
      height: auto;
      width: auto;
    }

    & > label {
      grid-row: 1;
      grid-column: 2;

      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: inherit;
    }

    & > ul {
      grid-row: 2;
      grid-column: 1 / 3;

      margin: 0;
      padding-left: var(--text-list-indent-w);
      display: flex;
      flex-direction: column;

      & > li {
        display: block;
        margin: 0;
        padding: 0;
        list-style: none;
      }
    }
  }
}

// Tabs (stashed or unstashed) within the stash list
.stash-list {
  .forest-item {
    & > a.forest-title,
    & > a.forest-title:visited {
      color: var(--page-fg);
      text-decoration: none;
    }

    &.open > a.forest-title {
      color: var(--userlink-fg);
    }

    & > .forest-badge.icon-stashed {
      opacity: 50%;
    }

    &.no-match {
      // When we are searching, dim items which wouldn't show up in a search,
      // except that their parent folder matches the search.
      & > .forest-title,
      & > .forest-title:visited,
      &.open > .forest-title {
        .status-text();
        text-decoration: line-through;
      }
      & > .forest-icon {
        opacity: 60%;
      }
    }

    &.loading > .forest-icon {
      border-radius: 50%;
      padding: calc(var(--icon-p) / 2);
      border: calc(var(--icon-p) / 2) dotted var(--page-fg);
      border-top-color: var(--disabled-fg);
      border-bottom-color: var(--disabled-fg);
      animation-name: tab-loading-spinner;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
      animation-direction: normal;

      & > img {
        border-radius: 50%;
      }
    }

    &.active {
      font-weight: bold;
      background: linear-gradient(
        to right,
        var(--userlink-fg) var(--active-marker-bw),
        transparent var(--active-marker-bw)
      );

      &.selected {
        background: linear-gradient(
          to right,
          var(--userlink-fg) var(--active-marker-bw),
          var(--selected-bg) var(--active-marker-bw)
        );

        &:hover {
          background: linear-gradient(
            to right,
            var(--userlink-fg) var(--active-marker-bw),
            var(--selected-hover-bg) var(--active-marker-bw)
          );
        }
      }

      &:hover {
        background: linear-gradient(
          to right,
          var(--userlink-fg) var(--active-marker-bw),
          var(--item-hover-bg) var(--active-marker-bw)
        );
      }
    }

    &.discarded {
      & .forest-title,
      .forest-icon {
        opacity: 0.75;
        filter: saturate(0.7);
      }
    }

    // For folders with open tabs, we want to change their text color slightly
    // to indicate this
    &.has-open-tabs > .forest-title {
      color: var(--userlink-fg);
    }

    // Colorize tabs that are open inside containers
    &[data-container-color] {
      box-shadow: var(--container-indicator-shadow-style)
        var(--container-indicator-color);
    }
    &[data-container-color="blue"] {
      --container-indicator-color: var(--container-color-blue);
    }
    &[data-container-color="turquoise"] {
      --container-indicator-color: var(--container-color-turquoise);
    }
    &[data-container-color="green"] {
      --container-indicator-color: var(--container-color-green);
    }
    &[data-container-color="yellow"] {
      --container-indicator-color: var(--container-color-yellow);
    }
    &[data-container-color="orange"] {
      --container-indicator-color: var(--container-color-orange);
    }
    &[data-container-color="red"] {
      --container-indicator-color: var(--container-color-red);
    }
    &[data-container-color="pink"] {
      --container-indicator-color: var(--container-color-pink);
    }
    &[data-container-color="purple"] {
      --container-indicator-color: var(--container-color-purple);
    }
    &[data-container-color="toolbar"] {
      --container-indicator-color: var(--container-color-toolbar);
    }
  }
}

@keyframes tab-loading-spinner {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(1turn);
  }
}

// A Tab Stash-themed progress/loading spinner.
@import "spinner";

//
// Mods for specific pages/views.  All of these assume the sidebar-view styling
// is in effect (which, for historical reasons, is the default view).
//

html[data-view="tab"] {
  @import "view-tab";
}

html.page-whats-new {
  @import "mods-whats-new";
}
html.page-flat {
  @import "mods-flat";
}
html.page-options {
  @import "mods-options";
}