css/library.css - master - hamster75/Life

css/library.css
735 строк15 KB
Dmitry Smirnov
my collection wip
28 май 2026, 17:16
28 май 2026, 17:164f321fd
/* ── Library overlay ── */
#lib-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 1001;
}

#lib-overlay.visible { display: block; }

#lib-modal {
  position: absolute;
  background: var(--bg-panel);
  border: 1px solid var(--border-hi);
  border-radius: 8px;
  min-width: 480px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

#lib-tab-bar {
  display: flex;
  border-bottom: 1px solid var(--border-panel);
  flex-shrink: 0;
  padding: 4px 12px;
  cursor: grab;
}
#lib-tab-bar:active { cursor: grabbing; }

.lib-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  font-family: monospace;
  font-size: var(--fs-base);
  padding: 9px 14px;
  cursor: pointer;
  margin-bottom: -1px;
}

.lib-tab-btn:hover { color: var(--text-mid); }
.lib-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

#lib-close {
  position: absolute;
  top: 5px;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: var(--fs-3xl);
  line-height: 1;
  padding: 2px 7px;
  border-radius: 3px;
  cursor: pointer;
  font-family: monospace;
  z-index: 1;
}

#lib-close:hover { color: var(--text); background: var(--border); }

/* lib-view: top-level tab panels (library vs export) */
.lib-view {
  display: none;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.lib-view.active { display: flex; }

/* lib-screen: sub-screens within the library view (grid / detail) */
.lib-screen {
  position: absolute;
  inset: 0;
  display: flex;
  overflow: hidden;
  flex-direction: row;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.lib-screen.active {
  opacity: 1;
  pointer-events: auto;
}

/* ── Screen 1: grid ── */
#lib-sidebar {
  width: 175px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#lib-search-wrap {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border-panel);
}

#lib-search {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-mid);
  font-family: monospace;
  font-size: var(--fs-base);
  padding: 5px 8px;
  outline: none;
}

#lib-search:focus { border-color: var(--border-focus); }
#lib-search::placeholder { color: var(--text-faint); }

#lib-groups {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}

.lib-group-btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  color: var(--text-dim);
  font-family: monospace;
  font-size: var(--fs-base);
  padding: 7px 12px;
  cursor: pointer;
  text-align: left;
}

.lib-group-btn:hover { color: var(--text-mid); background: var(--bg-card); }
.lib-group-btn.active { color: var(--accent); border-left-color: var(--accent); background: var(--bg-card); }

#lib-grid {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--lib-card-min), 1fr));
  gap: 10px;
  align-content: start;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.lib-card {
  background: var(--bg-card);
  border: 1px solid var(--border-panel);
  border-radius: 6px;
  padding: 10px 8px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transition: border-color 0.15s;
}

.lib-card:hover { border-color: var(--border-focus); }
.lib-card.in-palette { border-color: #1a5535; }

.lib-card canvas { image-rendering: pixelated; }

.lib-card-name {
  font-size: var(--fs-sm);
  color: var(--text-mid);
  text-align: center;
  line-height: 1.3;
}

.lib-card-meta {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.lib-group-desc {
  grid-column: 1 / -1;
  font-size: var(--fs-base);
  color: var(--text-soft);
  line-height: 1.6;
  padding: 10px 14px;
  background: var(--bg-card);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  margin-bottom: 4px;
}

.lib-empty {
  color: var(--text-faint);
  font-size: var(--fs-md);
  text-align: center;
  padding: 40px 20px;
  grid-column: 1 / -1;
}

/* ── Screen 2: detail ── */
#lib-screen-detail { flex-direction: column; }

#lib-detail-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-panel);
  flex-shrink: 0;
}

#lib-back {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-dim);
  font-family: monospace;
  font-size: var(--fs-base);
  padding: 4px 10px;
  cursor: pointer;
}

#lib-back:hover { color: var(--text-mid); border-color: var(--border-focus); }

#lib-detail-title {
  font-size: var(--fs-lg);
  color: var(--text-soft);
}

#lib-detail-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  gap: 28px;
  padding: 20px 24px;
}

#lib-detail-left {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 270px;
}

#lib-anim-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#lib-anim-canvas {
  image-rendering: pixelated;
  border-radius: 4px;
  background: var(--bg-deep);
}

#lib-anim-controls {
  display: flex;
  gap: 6px;
}

#lib-anim-controls button {
  font-size: var(--fs-base);
  padding: 4px 11px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-mid);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

#lib-anim-controls button:hover:not(:disabled) {
  background: var(--bg-raised);
  color: var(--text-hi);
}

#lib-anim-controls button:disabled {
  opacity: 0.3;
  cursor: default;
}

#lib-detail-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  min-width: 0;
}

#lib-detail-name-ru {
  font-size: var(--fs-3xl);
  color: var(--accent);
  line-height: 1.2;
}

#lib-detail-name-en {
  font-size: var(--fs-md);
  color: var(--text-faint);
  margin-top: -6px;
}

#lib-detail-badges { display: flex; flex-wrap: wrap; gap: 4px; }

.lib-badge {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 7px;
  font-size: var(--fs-sm);
  color: var(--text-soft);
}

.lib-badge-year {
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-card));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  color: var(--accent);
}

.lib-badge-who {
  background: color-mix(in srgb, #a060d0 12%, var(--bg-card));
  border-color: color-mix(in srgb, #a060d0 35%, var(--border));
  color: #b080e0;
}

[data-theme="light"] .lib-badge-who {
  color: #7040b0;
  background: color-mix(in srgb, #a060d0 10%, var(--bg-card));
  border-color: color-mix(in srgb, #a060d0 30%, var(--border));
}

#lib-detail-desc {
  font-size: var(--fs-md);
  color: var(--text-soft);
  line-height: 1.65;
}

#lib-detail-history {
  margin-top: 14px;
  border-top: 1px solid var(--border-panel);
  padding-top: 12px;
}

.lib-history-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.lib-history-text {
  font-size: var(--fs-md);
  color: var(--text-soft);
  line-height: 1.7;
  margin: 0;
}

#lib-detail-actions {
  display: flex;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--border-panel);
  flex-shrink: 0;
}

#lib-detail-actions button {
  padding: 8px 22px;
  border-radius: 4px;
  font-family: monospace;
  font-size: var(--fs-md);
  cursor: pointer;
}

#lib-btn-add {
  background: #0a2e1e;
  border: 1px solid #1a6040;
  color: #40c080;
}

#lib-btn-add:hover:not(:disabled) { background: #0f3e28; }
#lib-btn-add.already-in { background: #061a10; color: #2a7050; cursor: default; }

#lib-btn-use {
  background: var(--bg-btn);
  border: 1px solid var(--border-hi);
  color: var(--text-soft);
}

#lib-btn-use:hover { background: #0f3060; color: var(--accent); }

/* ── Export tab (inside library modal) ── */
#lib-view-export {
  flex-direction: column;
  overflow: hidden;
}

#lib-view-export #exp-preview-col {
  width: 220px;
}

#lib-view-export #exp-form {
  max-height: none;
}

#exp-body {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-panel);
}

#exp-preview-col {
  width: 180px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-right: 1px solid var(--border-panel);
  gap: 8px;
}

#exp-canvas { image-rendering: pixelated; }

#exp-cell-count {
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

#exp-form {
  flex: 1;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 16px;
  align-content: start;
  overflow-y: auto;
  max-height: 280px;
}

.exp-row-full {
  grid-column: 1 / -1;
}

.exp-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.exp-row label {
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

.exp-row input,
.exp-row select,
.exp-row textarea {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-mid);
  font-family: monospace;
  font-size: var(--fs-base);
  padding: 4px 7px;
  outline: none;
}

.exp-row input:focus,
.exp-row select:focus,
.exp-row textarea:focus { border-color: var(--border-focus); }

.exp-row textarea { resize: vertical; }

.exp-hint {
  color: var(--text-faint);
  font-size: var(--fs-xs);
}

.exp-divider {
  border: none;
  border-top: 1px solid var(--border-panel);
  margin: 2px 0;
}

#exp-outputs {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.exp-output-block {
  border-bottom: 1px solid var(--border-panel);
}

.exp-output-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: var(--bg-card);
}

.exp-output-header span {
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

.exp-copy-btn {
  background: var(--bg-btn);
  border: 1px solid var(--border-hi);
  border-radius: 3px;
  color: var(--btn-color);
  font-family: monospace;
  font-size: var(--fs-sm);
  padding: 2px 8px;
  cursor: pointer;
}

.exp-copy-btn:hover { background: var(--border); color: var(--accent); }

#exp-code-pre,
#exp-rle-pre {
  margin: 0;
  padding: 8px 12px;
  font-size: var(--fs-sm);
  color: #7eb8f7;
  overflow-x: auto;
  line-height: 1.5;
  white-space: pre;
  background: var(--bg-deep);
}

/* ── Таб-бар: не переполняться на узких экранах ── */
#lib-tab-bar { overflow-x: auto; }
.lib-tab-btn { flex-shrink: 0; white-space: nowrap; }

/* ── Вкладка «Мои формации» ── */
#lib-view-mine {
  flex-direction: column;
  overflow: hidden;
}

#lib-mine-save-row {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-panel);
  flex-shrink: 0;
  align-items: center;
}

#lib-mine-name {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-mid);
  font-family: monospace;
  font-size: var(--fs-base);
  padding: 6px 10px;
  outline: none;
  min-height: 36px;
}

#lib-mine-name:focus { border-color: var(--border-focus); }
#lib-mine-name::placeholder { color: var(--text-faint); }

#lib-mine-btn-save {
  background: #0a2e1e;
  border: 1px solid #1a6040;
  color: #40c080;
  font-family: monospace;
  font-size: var(--fs-base);
  padding: 6px 16px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  min-height: 36px;
}

#lib-mine-btn-save:hover { background: #0f3e28; }

#lib-mine-toolbar {
  display: flex;
  gap: 6px;
  padding: 6px 16px 8px;
  border-bottom: 1px solid var(--border-panel);
  flex-shrink: 0;
  align-items: center;
}

.lib-mine-toolbar-btn,
#lib-mine-toolbar > button {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-soft);
  font-family: monospace;
  font-size: var(--fs-sm);
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.5;
}

.lib-mine-toolbar-btn:hover,
#lib-mine-toolbar > button:hover { color: var(--text-mid); border-color: var(--border-focus); }

#lib-mine-btn-clear-all { margin-left: auto; }
#lib-mine-btn-clear-all:hover { color: #e05050; border-color: #803030; }
#lib-mine-btn-clear-all.confirm {
  color: #e05050;
  border-color: #e05050;
  background: color-mix(in srgb, #e05050 12%, var(--bg-card));
}

#lib-mine-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  align-content: start;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.lib-mine-card {
  background: var(--bg-card);
  border: 1px solid var(--border-panel);
  border-radius: 6px;
  padding: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transition: border-color 0.15s;
  position: relative;
}

.lib-mine-card:hover { border-color: var(--border-focus); }
.lib-mine-card canvas { image-rendering: pixelated; }

.lib-mine-actions {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.12s;
}

.lib-mine-card:hover .lib-mine-actions { opacity: 1; }

.lib-mine-btn-action {
  background: var(--bg-raised);
  border: 1px solid var(--border-hi);
  border-radius: 3px;
  color: var(--text-soft);
  font-size: var(--fs-xs);
  padding: 1px 5px;
  cursor: pointer;
  line-height: 1.4;
}

.lib-mine-btn-rename:hover { color: var(--accent); border-color: var(--accent); }
.lib-mine-btn-del:hover    { color: #e05050; border-color: #803030; }

.lib-mine-card-name {
  font-size: var(--fs-sm);
  color: var(--text-mid);
  text-align: center;
  line-height: 1.3;
  overflow-wrap: anywhere;
  width: 100%;
  overflow: hidden;
  min-height: 2.8em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.lib-mine-rename-input {
  width: 100%;
  background: var(--bg-deep);
  border: 1px solid var(--border-focus);
  border-radius: 3px;
  color: var(--text-mid);
  font-family: monospace;
  font-size: var(--fs-sm);
  padding: 2px 4px;
  outline: none;
  text-align: center;
  box-sizing: border-box;
}

.lib-mine-card-date {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  text-align: center;
}

.lib-mine-empty {
  grid-column: 1 / -1;
  color: var(--text-faint);
  font-size: var(--fs-md);
  text-align: center;
  padding: 40px 20px;
}

/* мобила: кнопки действий видны всегда (нет hover) */
@media (max-width: 600px) {
  .lib-mine-actions { opacity: 1; }
  #lib-mine-btn-save { padding: 6px 10px; }
}