pinakes/crates/pinakes-ui/assets/styles/_themes.scss

@use 'variables' as *;
@use 'mixins' as *;

// Light theme

.theme-light {
  // Background
  --bg-0: #{$light-bg-0};
  --bg-1: #{$light-bg-1};
  --bg-2: #{$light-bg-2};
  --bg-3: #{$light-bg-3};

  // Border
  --border-subtle: #{$light-border-subtle};
  --border: #{$light-border};
  --border-strong: #{$light-border-strong};

  // Text
  --text-0: #{$light-text-0};
  --text-1: #{$light-text-1};
  --text-2: #{$light-text-2};

  // Accent
  --accent: #{$light-accent};
  --accent-dim: #{$light-accent-dim};
  --accent-text: #{$light-accent-text};

  // Shadows
  --shadow-sm: #{$light-shadow-sm};
  --shadow: #{$light-shadow};
  --shadow-lg: #{$light-shadow-lg};

  // Scrollbar
  ::-webkit-scrollbar-thumb {
    background: $overlay-inverse-strong;

    &:hover {
      background: $overlay-inverse-medium;
    }
  }

  ::-webkit-scrollbar-track {
    background: $overlay-inverse-light;
  }

  // Graph
  .graph-nodes .graph-node text {
    fill: $light-text-0;
  }

  .graph-edges line {
    stroke: $overlay-inverse-strong;
  }

  // PDF
  .pdf-container {
    background: $light-bg-3;
  }
}

// Skeleton

.skeleton-pulse {
  @include skeleton-pulse;
  border-radius: 4px;
}

.skeleton-card {
  @include flex(column, flex-start, stretch, $space-4);
  padding: $space-4;
}

.skeleton-thumb {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
}

.skeleton-text {
  height: 14px;
  width: 80%;

  &-short {
    width: 50%;
  }
}

.skeleton-row {
  display: flex;
  gap: $space-6;
  padding: 10px $space-8;
  align-items: center;
}

.skeleton-cell {
  height: 14px;
  flex: 1;
  border-radius: 4px;

  &-icon {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 4px;
  }

  &-wide {
    flex: 3;
  }
}

.loading-overlay {
  position: absolute;
  inset: 0;
  @include flex(column, center, center, $space-5);
  background: $media-overlay-light;
  z-index: 100;
  border-radius: $radius-lg;
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid $border;
  border-top-color: $accent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.loading-message {
  color: $text-1;
  font-size: 0.9rem;
}

// Login

.login-container {
  @include flex-center;
  height: 100vh;
  background: $bg-0;
}

.login-card {
  background: $bg-2;
  border: 1px solid $border;
  border-radius: $radius-md;
  padding: $space-12;
  width: 360px;
  box-shadow: $shadow-lg;
}

.login-title {
  font-size: 20px;
  font-weight: $font-weight-bold;
  color: $text-0;
  text-align: center;
  margin-bottom: $space-1;
}

.login-subtitle {
  font-size: $font-size-lg;
  color: $text-2;
  text-align: center;
  margin-bottom: 20px;
}

.login-error {
  background: $error-light;
  border: 1px solid $error-border;
  border-radius: $radius-sm;
  padding: $space-4 $space-6;
  margin-bottom: $space-6;
  font-size: $font-size-md;
  color: $error;
}

.login-form {
  input[type='text'],
  input[type='password'] {
    width: 100%;
  }
}

.login-btn {
  width: 100%;
  padding: $space-4 $space-8;
  font-size: $font-size-lg;
  margin-top: $space-1;
}

// Pagination

.pagination {
  @include flex(row, center, center, $space-1);
  margin-top: $space-8;
  padding: $space-4 0;
}

.page-btn {
  min-width: 28px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.page-ellipsis {
  color: $text-2;
  padding: 0 $space-2;
  font-size: $font-size-md;
  user-select: none;
}

// Help overlay

.help-overlay {
  position: fixed;
  inset: 0;
  background: $media-overlay-medium;
  @include flex-center;
  z-index: 200;
  animation: fade-in 0.1s ease-out;
}

.help-dialog {
  background: $bg-2;
  border: 1px solid $border;
  border-radius: $radius-md;
  padding: $space-8;
  min-width: 300px;
  max-width: 400px;
  box-shadow: $shadow-lg;

  h3 {
    font-size: $font-size-3xl;
    font-weight: $font-weight-semibold;
    margin-bottom: $space-8;
  }
}

.help-shortcuts {
  @include flex(column, flex-start, stretch, $space-4);
  margin-bottom: $space-8;
}

.shortcut-row {
  @include flex(row, flex-start, center, $space-6);

  kbd {
    display: inline-block;
    padding: $space-1 $space-4;
    background: $bg-0;
    border: 1px solid $border;
    border-radius: $radius-sm;
    font-family: $font-family-mono;
    font-size: $font-size-base;
    color: $text-0;
    min-width: 32px;
    text-align: center;
  }

  span {
    font-size: $font-size-lg;
    color: $text-1;
  }
}

.help-close {
  display: block;
  width: 100%;
  padding: 6px $space-6;
  background: $bg-3;
  border: 1px solid $border;
  border-radius: $radius-sm;
  color: $text-0;
  font-size: $font-size-md;
  cursor: pointer;
  text-align: center;

  &:hover {
    background: $overlay-strong;
  }
}