immich-folio/app/admin/styles/help.css

/* The help section and the search bar. */
/* Split out of admin.css (#533). Loaded from admin.css in a fixed order —
   later sheets override earlier ones, so the order there is the cascade. */

/* ── Help section ──────────────────────────────────────────── */

.help-kbd {
  display: inline-block;
  min-width: 1.6rem;
  padding: 2px 6px;
  border: 1px solid var(--admin-border, rgba(255, 255, 255, 0.15));
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--admin-bg-elevated, rgba(255, 255, 255, 0.06));
  color: var(--admin-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: center;
}

.help-shortcuts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 4px 0 0;
}

.help-shortcuts-row {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 10px 4px;
  border-bottom: 1px solid var(--admin-border-subtle, rgba(255, 255, 255, 0.06));
}

.help-shortcuts-row:last-child {
  border-bottom: none;
}

.help-shortcuts-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
}

.help-shortcuts-label {
  margin: 0;
  color: var(--admin-text);
  font-size: 0.85rem;
}

.help-shortcuts-note {
  display: block;
  margin-top: 2px;
  color: var(--admin-text-secondary);
  font-size: 0.78rem;
}

@media (max-width: 600px) {
  .help-shortcuts-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ── Search Bar ────────────────────────────────────────────── */
.builder-search-container {
  padding: 0.75rem 1.5rem;
  background: var(--admin-bg-raised);
  border-bottom: 1px solid var(--admin-border);
  margin-bottom: 1rem;
}

.builder-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 480px;
}

.builder-search-icon {
  position: absolute;
  left: 10px;
  font-size: 0.85rem;
  color: var(--admin-text-muted);
  pointer-events: none;
}

.builder-search-input {
  width: 100%;
  padding: 0.5rem 2rem 0.5rem 2rem;
  background: var(--admin-bg-input);
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  color: var(--admin-text);
  font-size: 0.82rem;
  transition: all 0.15s;
}

/* The only field that already got this right (accent border plus shadow).
   It moves to the same ring as every other field, so focus looks the same
   throughout the admin panel. */
.builder-search-input:focus-visible {
  outline: var(--admin-focus-ring);
  outline-offset: 1px;
  border-color: var(--admin-accent);
  background: var(--admin-bg);
}

.builder-search-clear {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  color: var(--admin-text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 4px;
}

.builder-search-clear:hover {
  color: var(--admin-text);
}

/* Keyframes */
@keyframes pulse-green {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

@keyframes pulse-red {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

/* Color Field */
.color-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.color-field input[type='color'] {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  background: none;
  cursor: pointer;
}

.color-field input[type='text'] {
  flex: 1;
  padding: 0.6rem 0.75rem;
  background: var(--admin-bg-input);
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  color: var(--admin-text);
  font-size: 0.875rem;
  font-family: monospace;
}

/* Radio Group */
.radio-group {
  display: flex;
  gap: 1rem;
}

.radio-group label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--admin-text);
  cursor: pointer;
}