ani-auto 1.4.3 → 2.0.0

package/web/src/assets/styles/base.css

@@ -0,0 +1,961 @@
+@font-face {
+  font-family: 'Departure Mono';
+  font-style: normal;
+  font-display: swap;
+  src: url('https://cdn.jsdelivr.net/npm/@proj-airi/font-departure-mono@0.10.2/dist/files/DepartureMono-Regular.woff2') format('woff2');
+}
+
+:root {
+  --bg-primary: #000000;
+  --bg-surface: #0A0A0A;
+  --bg-card: #111111;
+  --bg-hover: #1A1A1A;
+
+  --red-primary: #CC0000;
+  --red-hover: #8B0000;
+  --red-bright: #FF1A1A;
+  --red-subtle: #1A0505;
+
+  --ink-100: #1A1A1A;
+  --ink-300: #333333;
+  --ink-500: #666666;
+  --ink-700: #999999;
+
+  --text-primary: #E0E0E0;
+  --text-bright: #FFFFFF;
+  --text-dim: #666666;
+
+  --status-done: #00CC66;
+  --status-fail: #CC0000;
+  --status-pending: #666666;
+  --status-downloading: #FF1A1A;
+
+  --radius: 4px;
+  --font-mono: 'Courier New', 'Consolas', monospace;
+  --font-logo: 'Departure Mono', 'Courier New', monospace;
+  --font-sans: -apple-system, 'Inter', 'Segoe UI', sans-serif;
+}
+
+*, *::before, *::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: 14px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+a { color: var(--red-primary); text-decoration: none; }
+a:hover { color: var(--red-bright); }
+
+::selection { background: var(--red-primary); color: #fff; }
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: var(--bg-primary); }
+::-webkit-scrollbar-thumb { background: var(--ink-300); }
+
+#app {
+  display: flex;
+  min-height: 100vh;
+  width: 100%;
+}
+
+/* ── Resizable Sidebar ── */
+
+.sidebar-resizable {
+  background: var(--bg-surface);
+  border-right: 1px solid var(--ink-100);
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 10;
+  user-select: none;
+  overflow: hidden;
+}
+
+.sidebar-resizable.collapsed {
+  align-items: center;
+}
+
+/* Logo */
+.sidebar-logo {
+  padding: 20px 16px;
+  flex-shrink: 0;
+  cursor: default;
+}
+
+.sidebar-resizable.collapsed .sidebar-logo {
+  padding: 20px 0;
+  text-align: center;
+}
+
+.slim-logo-text {
+  font-family: var(--font-logo);
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--red-primary);
+  letter-spacing: 0;
+  line-height: 1;
+}
+
+.sidebar-logo-brand {
+  font-family: var(--font-logo);
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--red-primary);
+  letter-spacing: 0.5px;
+  display: block;
+  line-height: 1.2;
+}
+
+.sidebar-logo-tagline {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--ink-500);
+  letter-spacing: 1px;
+  display: block;
+  margin-top: 2px;
+}
+
+/* Nav */
+.sidebar-nav {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 0 8px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  gap: 2px;
+}
+
+.sidebar-resizable.collapsed .sidebar-nav {
+  align-items: center;
+  padding: 0;
+}
+
+.sidebar-nav-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 8px;
+  min-height: 36px;
+  border-radius: 8px;
+  color: var(--ink-500);
+  text-decoration: none;
+  transition: background 0.1s, color 0.1s;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.sidebar-nav-item:hover {
+  background: var(--bg-hover);
+}
+
+.sidebar-nav-item.active {
+  background: var(--red-subtle);
+  color: var(--red-primary);
+}
+
+.sidebar-resizable.collapsed .sidebar-nav-item {
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  justify-content: center;
+}
+
+/* Nav icon */
+.sidebar-nav-icon {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  position: relative;
+}
+
+/* Nav label */
+.sidebar-nav-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-dim);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+}
+
+.sidebar-nav-item.active .sidebar-nav-label {
+  color: var(--red-primary);
+}
+
+.sidebar-nav-item:hover .sidebar-nav-label {
+  color: var(--text-primary);
+}
+
+/* Nav count badge */
+.sidebar-nav-count {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--ink-500);
+  background: var(--ink-100);
+  padding: 1px 6px;
+  border-radius: 10px;
+  flex-shrink: 0;
+}
+
+.sidebar-nav-item.active .sidebar-nav-count {
+  background: var(--red-subtle);
+  color: var(--red-primary);
+}
+
+/* Slim badge (dot) — for collapsed state */
+.slim-badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--red-primary);
+}
+
+/* Tooltip — for collapsed state */
+.slim-tooltip {
+  position: absolute;
+  left: calc(100% + 8px);
+  top: 50%;
+  transform: translateY(-50%);
+  background: var(--bg-surface);
+  color: var(--text-primary);
+  font-size: 13px;
+  font-weight: 600;
+  padding: 6px 10px;
+  border-radius: 6px;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.1s;
+  z-index: 30;
+  border: 1px solid var(--ink-100);
+}
+
+.sidebar-nav-item:hover .slim-tooltip {
+  opacity: 1;
+}
+
+/* Footer */
+.sidebar-footer {
+  border-top: 1px solid var(--ink-100);
+  padding: 8px 8px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.sidebar-resizable.collapsed .sidebar-footer {
+  align-items: center;
+  padding: 8px 0;
+}
+
+/* User section in footer */
+.sidebar-user {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 8px 0;
+  margin-top: 4px;
+}
+
+.sidebar-resizable.collapsed .sidebar-user {
+  padding: 4px 0 0;
+  gap: 0;
+  justify-content: center;
+}
+
+.sidebar-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--ink-300);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-primary);
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.sidebar-user-info {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+  flex: 1;
+}
+
+.sidebar-user-name {
+  font-size: 12px;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sidebar-user-version {
+  font-size: 10px;
+  color: var(--ink-500);
+  font-family: var(--font-mono);
+}
+
+/* Resize handle */
+.sidebar-resize-area {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 5px;
+  cursor: col-resize;
+  z-index: 5;
+  transition: background 0.15s;
+}
+
+.sidebar-resize-area:hover,
+.sidebar-resize-area:active {
+  background: var(--red-primary);
+  opacity: 0.4;
+}
+
+/* ── Layout ── */
+
+.main-column {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  width: 100%;
+  margin-left: 200px;
+}
+
+.top-bar {
+  height: 48px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 32px;
+  border-bottom: 1px solid var(--ink-100);
+}
+
+.top-bar-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.top-bar-label {
+  font-size: 13px;
+  color: var(--text-dim);
+  letter-spacing: 0.5px;
+}
+
+.top-bar-right {
+  display: flex;
+  align-items: center;
+}
+
+.top-bar-time {
+  font-size: 11px;
+  font-family: var(--font-mono);
+  color: var(--ink-500);
+  padding: 2px 8px;
+  border: 1px solid var(--ink-300);
+  border-radius: 4px;
+}
+
+.update-pill {
+  font-size: 11px;
+  font-family: var(--font-mono);
+  color: var(--red-primary);
+  padding: 2px 8px;
+  border: 1px solid var(--red-primary);
+  border-radius: 4px;
+  cursor: pointer;
+  margin-right: 8px;
+  transition: background 0.1s, color 0.1s;
+}
+
+.update-pill:hover {
+  background: var(--red-subtle);
+  color: var(--red-bright);
+}
+
+.main {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px 32px;
+}
+
+/* ── Page Header ── */
+
+.page-header-actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+  flex-wrap: wrap;
+  margin-bottom: 28px;
+}
+
+.page-header h2 {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--text-bright);
+  letter-spacing: 0.5px;
+}
+
+.page-header .subtitle {
+  color: var(--ink-500);
+  font-size: 13px;
+  margin-top: 4px;
+}
+
+/* ── Stats ── */
+
+.stat-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.stat-inner {
+  text-align: center;
+  padding: 8px 0;
+}
+
+.stat-value {
+  font-family: var(--font-mono);
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-bright);
+}
+
+.stat-label {
+  font-size: 11px;
+  color: var(--ink-500);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin-top: 4px;
+}
+
+/* ── Anime Grid ── */
+
+.anime-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 12px;
+}
+
+.anime-card {
+  background: var(--bg-card);
+  border: 1px solid var(--ink-100);
+  border-radius: var(--radius);
+  padding: 12px;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+  display: flex;
+  gap: 12px;
+}
+
+.anime-card:hover {
+  border-color: var(--ink-300);
+  background: var(--bg-hover);
+}
+
+.anime-card .anime-poster {
+  width: 50px;
+  min-width: 50px;
+  height: 75px;
+  object-fit: cover;
+  border-radius: var(--radius);
+  background: var(--bg-hover);
+}
+
+.anime-card .anime-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.anime-card .anime-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-bright);
+  margin-bottom: 4px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.anime-card .anime-meta {
+  font-size: 10px;
+  color: var(--ink-500);
+  margin-bottom: 6px;
+}
+
+.anime-card .anime-progress {
+  height: 3px;
+  background: var(--ink-100);
+  border-radius: var(--radius);
+  overflow: hidden;
+  margin-bottom: 6px;
+}
+
+.anime-card .anime-progress .bar {
+  height: 100%;
+  background: var(--red-primary);
+  border-radius: var(--radius);
+  transition: width 0.3s;
+}
+
+.anime-card .anime-stats {
+  display: flex;
+  gap: 10px;
+  font-size: 10px;
+  font-family: var(--font-mono);
+}
+
+.anime-card .anime-stats .done { color: var(--status-done); }
+.anime-card .anime-stats .failed { color: var(--status-fail); }
+.anime-card .anime-stats .pending { color: var(--status-pending); }
+
+/* ── List Group ── */
+
+.list-group {
+  border: 1px solid var(--ink-100);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+
+.anime-card-row {
+  background: var(--bg-card);
+  padding: 12px 16px;
+  cursor: pointer;
+  transition: background 0.15s;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  border-bottom: 1px solid var(--ink-100);
+}
+
+.anime-card-row:last-child {
+  border-bottom: none;
+}
+
+.anime-card-row:hover {
+  background: var(--bg-hover);
+}
+
+.anime-card-row .anime-poster {
+  width: 40px;
+  min-width: 40px;
+  height: 56px;
+  object-fit: cover;
+  border-radius: var(--radius);
+  background: var(--bg-hover);
+}
+
+.anime-card-row .anime-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.anime-card-row .anime-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-bright);
+  margin-bottom: 2px;
+}
+
+.anime-card-row .anime-meta {
+  font-size: 11px;
+  color: var(--ink-500);
+}
+
+/* ── Forms ── */
+
+.form-group {
+  margin-bottom: 18px;
+}
+
+.form-group label {
+  display: block;
+  font-size: 12px;
+  color: var(--ink-700);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 6px;
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.form-section {
+  margin-bottom: 32px;
+}
+
+.form-section h3 {
+  font-size: 14px;
+  color: var(--text-bright);
+  margin-bottom: 16px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--ink-100);
+}
+
+.checkbox-group {
+  display: flex;
+  gap: 16px;
+  margin-top: 6px;
+  flex-wrap: wrap;
+}
+
+.checkbox-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.form-field-row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.form-hint {
+  font-size: 11px;
+  color: var(--ink-500);
+  margin-top: 6px;
+  line-height: 1.5;
+}
+
+.version-display {
+  font-family: var(--font-mono);
+  font-size: 14px;
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+.update-result {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 16px;
+  padding-top: 12px;
+  border-top: 1px solid var(--ink-100);
+}
+
+.update-result-text {
+  font-size: 13px;
+  color: var(--red-primary);
+  font-weight: 600;
+}
+
+.update-result-ok {
+  color: var(--status-done);
+}
+
+/* ── Toolbars ── */
+
+.anilist-toolbar,
+.anime-list-toolbar {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+/* ── Settings ── */
+
+.settings-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 24px;
+  padding-top: 16px;
+  border-top: 1px solid var(--ink-100);
+  align-items: center;
+}
+
+.saved-msg {
+  color: var(--status-done);
+  font-size: 13px;
+}
+
+/* ── Anime Detail ── */
+
+.anime-detail-layout {
+  display: flex;
+  gap: 20px;
+  align-items: start;
+}
+
+.anime-detail-poster {
+  width: 120px;
+  min-width: 120px;
+  border-radius: var(--radius);
+  background: var(--bg-hover);
+}
+
+/* ── Empty Content ── */
+
+.empty-content {
+  text-align: center;
+  padding: 30px 20px;
+  color: var(--ink-500);
+}
+
+.empty-content h3 {
+  font-size: 16px;
+  color: var(--ink-700);
+  margin-bottom: 8px;
+}
+
+/* ── Onboarding ── */
+
+.onboarding {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background: var(--bg-primary);
+  margin-left: 0;
+  width: 100%;
+}
+
+.onboarding-box {
+  text-align: center;
+  max-width: 440px;
+  padding: 40px;
+}
+
+.onboarding-box .logo {
+  font-family: var(--font-logo);
+  font-size: 36px;
+  font-weight: 700;
+  color: var(--red-primary);
+  letter-spacing: 6px;
+  margin-bottom: 8px;
+}
+
+.onboarding-box .logo-sub {
+  font-size: 11px;
+  color: var(--ink-500);
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  margin-bottom: 32px;
+}
+
+.onboarding-box h2 {
+  color: var(--text-bright);
+  font-size: 18px;
+  margin-bottom: 8px;
+}
+
+.onboarding-box p {
+  color: var(--ink-700);
+  font-size: 13px;
+  margin-bottom: 28px;
+  line-height: 1.7;
+}
+
+.onboarding-box .btn-group {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+}
+
+/* ── Mobile Hamburger ── */
+
+.hamburger {
+  display: none;
+  background: none;
+  border: none;
+  color: var(--ink-500);
+  cursor: pointer;
+  padding: 4px;
+  margin-right: 8px;
+  line-height: 0;
+}
+
+.hamburger:hover {
+  color: var(--text-primary);
+}
+
+/* ── Sidebar Overlay ── */
+
+.sidebar-overlay {
+  display: none;
+}
+
+/* ── Mobile Breakpoint ── */
+
+@media (max-width: 767px) {
+  .hamburger {
+    display: block;
+  }
+
+  .sidebar-resizable {
+    width: 260px !important;
+    transform: translateX(-100%);
+    transition: transform 0.2s ease;
+    z-index: 20;
+    padding: 0 12px;
+  }
+  .sidebar-resizable.mobile-open {
+    transform: translateX(0);
+  }
+
+  .sidebar-resizable.collapsed {
+    width: 260px !important;
+    align-items: stretch;
+  }
+
+  .sidebar-resizable.collapsed .sidebar-logo {
+    padding: 20px 16px;
+    text-align: left;
+  }
+
+  .sidebar-resizable.collapsed .sidebar-nav {
+    align-items: stretch;
+    padding: 0 8px;
+  }
+
+  .sidebar-resizable.collapsed .sidebar-nav-item {
+    width: 100%;
+    height: auto;
+    padding: 6px 8px;
+    justify-content: flex-start;
+  }
+
+  .sidebar-resizable.collapsed .sidebar-nav-item .slim-tooltip {
+    display: inline;
+  }
+
+  .sidebar-resizable.collapsed .sidebar-footer {
+    display: flex;
+    align-items: stretch;
+    padding: 8px 12px;
+  }
+
+  .sidebar-resizable.collapsed .sidebar-footer .sidebar-nav-item {
+    width: 100%;
+  }
+
+  .sidebar-resizable.collapsed .sidebar-user {
+    padding: 8px 8px 0;
+    gap: 8px;
+    justify-content: flex-start;
+  }
+
+  .sidebar-resizable .slim-tooltip {
+    position: static;
+    transform: none;
+    opacity: 1;
+    background: none;
+    border: none;
+    padding: 0;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text-dim);
+    pointer-events: auto;
+  }
+
+  .sidebar-resizable .sidebar-nav {
+    align-items: stretch;
+    padding: 0 8px;
+  }
+
+  .sidebar-resizable .sidebar-footer {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 8px 12px;
+  }
+
+  .sidebar-resizable .sidebar-footer .sidebar-nav-item {
+    width: 100%;
+  }
+
+  .sidebar-resizable .sidebar-user {
+    margin-left: 4px;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .sidebar-resizable .sidebar-user-info {
+    display: flex;
+  }
+
+  .sidebar-resizable .sidebar-logo {
+    padding: 20px 16px;
+  }
+
+  .sidebar-resizable .sidebar-resize-area {
+    display: none;
+  }
+
+  .sidebar-overlay {
+    display: block;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 15;
+  }
+
+  .main-column {
+    margin-left: 0 !important;
+    width: 100% !important;
+  }
+
+  .top-bar {
+    margin-left: 0 !important;
+    width: 100% !important;
+  }
+
+  .top-bar-label {
+    font-size: 14px;
+    max-width: 60vw;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .form-row {
+    grid-template-columns: 1fr;
+  }
+}