css/layout.css - master - hamster75/Life

css/layout.css
201 строка4 KB
Dmitry Smirnov
advanced edit
27 май 2026, 23:44
27 май 2026, 23:442ef514f
/* ── Global scrollbar ────────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
*::-webkit-scrollbar         { width: 5px; height: 5px; }
*::-webkit-scrollbar-track   { background: transparent; }
*::-webkit-scrollbar-thumb   { background: var(--border); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: var(--border-hi); }

html {
  height: 100%;
  height: 100dvh; /* dvh so body's 100% resolves to dynamic viewport */
}

body {
  height: 100%;
  background: var(--bg-page);
  color: var(--text);
  font-family: monospace;
  overflow: hidden;
}

#app {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto calc(56px + env(safe-area-inset-bottom, 0px));
  grid-template-areas:
    "canvas"
    "algodesc"
    "footer";
  height: 100vh;
  height: 100dvh;
}

/* ── Гамбургер-меню ── */
#btn-hamburger {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 300;
  background: var(--bg-chrome);
  border: 1px solid var(--border-chrome);
  border-radius: 5px;
  color: var(--text-mid);
  font-size: var(--fs-icon);
  line-height: 1;
  width: 34px;
  height: 34px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
#btn-hamburger:hover { color: var(--accent); background: var(--border-chrome); }

#nav-panel {
  position: fixed;
  top: 10px;
  left: 50px;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0;
  max-width: 0;
  overflow: hidden;
  transition: max-width 0.2s ease, border-color 0.2s ease,
              background 0.15s ease, padding 0.2s ease;
  white-space: nowrap;
}
#nav-panel.open {
  max-width: 400px;
  padding: 4px 6px;
  background: var(--bg-chrome);
  border-color: var(--border-chrome);
}

#nav-panel button {
  background: none;
  border: none;
  color: var(--text-mid);
  font-size: var(--fs-xl);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}
#nav-panel button:hover { color: var(--accent); background: var(--border-hi); }

#btn-theme {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: var(--fs-xl);
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
}
#btn-theme:hover { color: var(--accent); }

/* ── Canvas ── */
#canvas-area {
  grid-area: canvas;
  position: relative;
  overflow: hidden;
}

#life-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}

#life-canvas.panning {
  cursor: grabbing;
}

#life-canvas.erase-cursor {
  cursor: cell;
}

/* ── Нижняя панель управления ── */
#control-bar {
  grid-area: footer;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 16px env(safe-area-inset-bottom, 0px);
  background: var(--bg-chrome);
  border-top: 1px solid var(--border-chrome);
}

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

#playback-controls button {
  padding: 5px 12px;
  font-size: var(--fs-base);
  font-family: monospace;
  background: var(--border-chrome);
  color: var(--text);
  border: 1px solid var(--border-hi);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.1s;
}

#playback-controls button:hover:not(:disabled) {
  background: var(--border-hi);
}

#playback-controls button:disabled {
  opacity: 0.35;
  cursor: default;
}

#btn-play  { color: #90ee90; }
#btn-pause { color: #ffd700; }
#btn-stop  { color: #ff8080; }
#btn-reset { color: var(--accent); }
#btn-clear { color: #c0a0ff; }

#speed-control {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-base);
  color: var(--text-dim);
}

#speed-slider {
  width: 90px;
  accent-color: var(--accent);
}

#speed-label {
  min-width: 18px;
  text-align: right;
  color: var(--text);
}

#status-bar {
  margin-left: auto;
  display: flex;
  gap: 16px;
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

#status-mode { color: var(--accent); }
#status-coord { min-width: 9ch; color: var(--text-dim); }