css/mobile.css - master - hamster75/Life

css/mobile.css
470 строк12 KB
Dmitry Smirnov
mobile for haslife
27 май 2026, 18:40
27 май 2026, 18:40aea9a9a
/* ── Mobile layout ── */
@media (max-width: 600px) {
  #app {
    grid-template-rows: 1fr calc(56px + max(env(safe-area-inset-bottom, 0px), 12px));
    grid-template-areas: "canvas" "footer";
  }

  #algo-description { display: none; }

  #floating-palette {
    resize: none;
  }

  /* Long-press deletes on mobile — hide the ×-button */
  .palette-remove { display: none; }

  #lib-modal,
  #academy-modal {
    min-width: unset;
    min-height: unset;
    border-radius: 0;
  }

  :root { --soup-tile-min: 100px; }

  #soup-modal {
    min-width: unset;
    min-height: unset;
  }

  /* Library detail: column layout for narrow portrait */
  #lib-detail-body {
    flex-direction: column;
    padding: 12px 16px;
    gap: 12px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  #lib-detail-left {
    width: 100%;
    flex-shrink: 0;
    justify-content: center;
  }
  #lib-anim-wrap {
    align-items: center;
  }
  #lib-anim-canvas {
    max-width: 160px;
    max-height: 160px;
  }
  #lib-detail-info {
    overflow-y: visible;
    min-height: 0;
  }
  #lib-detail-name-ru {
    font-size: var(--fs-xl);
  }
  #lib-detail-actions {
    padding: 10px 16px;
  }

  /* Portrait: switch back to flex-column, undo base position:absolute */
  #soup-content {
    display: flex;
    flex-direction: column;
    position: static;
  }

  #soup-grid {
    position: static;
    flex: 1;
    min-height: 120px;
    right: unset;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: calc(var(--soup-tile-min) + 40px);
  }

  #soup-panel {
    position: static;
    width: 100%;
    height: auto;
    max-height: 50vh;
    border-left: none;
    border-top: 1px solid var(--border-panel);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
  }

  #soup-controls {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
  }

  .soup-canvas {
    display: block;
    width: 100%;
  }

  .soup-intro {
    display: none;
  }

  #soup-buttons {
    padding: 6px 14px 10px;
    margin-top: 0;
  }

  #control-bar {
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 6px 10px max(env(safe-area-inset-bottom, 0px), 12px);
    align-items: center;
  }

  #playback-controls {
    gap: 4px;
  }

  #playback-controls button {
    padding: 5px 8px;
    font-size: 11px;
  }

  #speed-control { display: none; }

  #algo-control { display: none; }
  #step-control { display: none !important; }
  #btn-stop { display: none; }
  #btn-mobile-speed { display: inline-flex; align-items: center; padding: 0; width: 36px; min-width: 36px; }

  .stg-mobile-only { display: block; }

  #perf-counter { display: none; }

  /* Mode label is already shown in the top-right mobile status panel */
  #status-mode { display: none; }

  #status-bar { display: none; }
}

/* ── Mobile status panel ─────────────────────────────────────── */

#mobile-status {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  pointer-events: none;
}

#ms-preview {
  display: none;
  image-rendering: pixelated;
}

#ms-mode {
  font-size: var(--fs-sm);
  font-family: monospace;
  transition: color 0.15s;
}

#ms-mode.ms-draw    { color: #60c060; }
#ms-mode.ms-neutral { color: var(--text-soft); }
#ms-mode.ms-eraser  { color: #e07050; }

#ms-hint {
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

/* Eraser button */
#btn-eraser { display: block; }
#btn-eraser.active { color: #e06040; border-color: #e06040; }

/* Mobile speed button — sizing base */
#btn-mobile-speed {
  width: 40px;
  min-width: 40px;
  padding: 0;
  justify-content: center;
}
/* Hidden on desktop only; mobile media queries set display: inline-flex */
@media (min-width: 601px) and (min-height: 601px) {
  #btn-mobile-speed { display: none; }
}

/* Mobile speed popup (vertical slider) */
#mobile-speed-popup {
  display: none;
  position: fixed;
  z-index: 900;
  background: var(--bg-panel);
  border: 1px solid var(--border-hi);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  padding: 14px 16px;
  align-items: center;
  justify-content: center;
}
#mobile-speed-popup.visible { display: flex; }

#mobile-speed-vslider {
  writing-mode: vertical-lr;
  direction: rtl;
  height: 130px;
  width: 36px;
  cursor: pointer;
  accent-color: var(--accent);
}

/* Generation counter in mobile status — visible only while running */
#ms-gen {
  display: none;
  font-size: var(--fs-sm);
  color: var(--text-mid);
}
#mobile-status.sim-running #ms-gen { display: inline; }

/* Hide ms-hint and ms-mode while simulation is running */
#mobile-status.sim-running #ms-hint,
#mobile-status.sim-running #ms-mode { display: none; }

/* Step popup (long-press on HL chip) */
#mobile-step-popup {
  display: none;
  position: fixed;
  z-index: 900;
  background: var(--bg-panel);
  border: 1px solid var(--border-hi);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  padding: 14px 16px;
  align-items: center;
  justify-content: center;
}
#mobile-step-popup.visible { display: flex; }

#mobile-step-vslider {
  writing-mode: vertical-lr;
  direction: rtl;
  height: 130px;
  width: 36px;
  cursor: pointer;
  accent-color: var(--accent);
}

/* Algorithm chip — always visible in mobile status panel */
#btn-algo-chip {
  pointer-events: auto;
  display: inline-block;
  background: var(--bg-btn);
  border: 1px solid var(--border-hi);
  border-radius: 4px;
  color: var(--btn-color);
  font-family: monospace;
  font-size: var(--fs-sm);
  padding: 2px 7px;
  cursor: pointer;
  line-height: 1.4;
  margin-top: 2px;
}
#btn-algo-chip:active { opacity: 0.7; }
#btn-algo-chip.chip-hl {
  color: var(--accent);
  border-color: var(--accent);
}

/* Settings mobile-only section — hidden on desktop only */
@media (min-width: 601px) and (min-height: 601px) {
  .stg-mobile-only { display: none; }
}

/* ── Landscape / compact-height (phones rotated) ─────────────── */
/*
   On a phone in landscape the viewport is ~360-414px tall but > 600px wide,
   so max-width:600px queries don't fire. We use max-height:500px to catch
   all compact-height situations regardless of orientation.
*/
@media (max-height: 600px) and (min-width: 601px) {
  /* academy / library: modal-drag.js handles fullscreen via isMobile(),
     but CSS min-height/min-width must be cleared so the JS-set height wins */
  #academy-modal,
  #lib-modal {
    min-width: unset;
    min-height: unset;
    border-radius: 0;
  }

  /* Make all overlay containers edge-to-edge so modals can use full height */
  #soup-overlay,
  #finds-overlay,
  #logic-overlay,
  #gates-overlay {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
  }

  /* learn-overlay uses display:block + absolute-positioned child */
  #learn-overlay { padding: 0; }

  /* All CSS-positioned modals: fill the viewport */
  #soup-modal,
  #finds-modal,
  #logic-modal,
  #gates-modal {
    width: 100vw    !important;
    max-width: 100vw !important;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    min-width: unset;
    min-height: unset;
    border-radius: 0;
    margin: 0;
  }

  /* learn-modal: absolute + translate → reset to top-left fill */
  #learn-modal {
    left: 0;
    top: 0;
    transform: none;
    width: 100vw    !important;
    max-width: 100vw !important;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    border-radius: 0;
  }

  /* Library detail landscape: compact left panel */
  #lib-detail-body { padding: 8px 12px; gap: 12px; }
  #lib-detail-left { width: 160px; }
  #lib-anim-canvas { max-width: 140px; max-height: 140px; }
  #lib-detail-actions { padding: 8px 12px; }

  /* Soup landscape: narrow 160px panel (base is 240px), explicit row height for tiles */
  #soup-panel { width: 230px; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
  #soup-controls { overflow-y: auto; min-height: 0; }
  #soup-grid {
    right: 230px;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: calc(var(--soup-tile-min) + 30px);
  }
  .soup-intro { display: none; }

  /* Quest list: single column so items fit in narrow height */
  .quest-list { grid-template-columns: 1fr 1fr; gap: 10px; }
  .quest-journal-body { padding: 10px 16px 16px; }

  .palette-remove { display: none; }

  /* Bottom panel: hide algo description, compact single row */
  #algo-description { display: none !important; }
  #app {
    grid-template-rows: 1fr calc(38px + max(env(safe-area-inset-bottom, 0px), 12px));
    grid-template-areas: "canvas" "footer";
  }

  #control-bar {
    flex-wrap: nowrap;
    gap: 4px;
    padding: 0 6px max(env(safe-area-inset-bottom, 0px), 12px);
    min-height: 38px;
    height: unset;
    align-items: center;
  }
  #playback-controls button { padding: 4px 7px; font-size: 10px; }
  #speed-control { display: none; }
  #algo-control { display: none; }
  #step-control { display: none !important; }
  #btn-stop { display: none; }
  #btn-mobile-speed { display: inline-flex; align-items: center; padding: 0; width: 32px; min-width: 32px; }
  #perf-counter { display: none; }
  #status-mode { display: none; }
  #status-bar { display: none; }

  .stg-mobile-only { display: block; }

  /* Settings: fullscreen 2-column grid in landscape */
  #settings-overlay { align-items: stretch; padding: 0; }
  #settings-modal {
    width: 100vw;
    max-width: 100vw;
    border-radius: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
  }
  #settings-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
    padding: 12px 16px;
  }
  /* Hide section titles — labels serve as headings in compact layout */
  #settings-body .stg-section-title { display: none; }
  /* Column order: scale|library, palette|soup, algo (full), footer (full) */
  .stg-row-scale   { order: 1; }
  .stg-row-library { order: 2; }
  .stg-row-palette { order: 3; }
  .stg-row-soup    { order: 4; }
  .stg-mobile-only { order: 5; grid-column: 1 / -1; }
  #settings-footer { order: 6; grid-column: 1 / -1; padding-top: 8px; }

  /* Same hint swaps as portrait: hide H-справка, show double-tap hint */
  #canvas-hint-toggle { display: none; }
  #canvas-hint-mobile { display: inline; }
  #mobile-status { display: flex; }
  #btn-eraser { display: block; color: var(--text-dim); }

  /* ── Logic UI: 2-column landscape layout ── */
  #logic-modal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "header  header"
      "canvas  progress"
      "canvas  text"
      "simbar  nav";
  }
  #logic-header      { grid-area: header; }
  #logic-canvas-wrap { grid-area: canvas; align-self: start; border-bottom: none; border-right: 1px solid var(--border-panel); }
  #logic-progress    { grid-area: progress; }
  #logic-sim-bar     { grid-area: simbar; border-bottom: none; border-right: 1px solid var(--border-panel); }
  #logic-text        { grid-area: text; overflow-y: auto; }
  #logic-nav         { grid-area: nav; }
  #logic-zoom-hint   { display: none; }

  /* ── Gates UI: 2-column landscape layout ── */
  #gates-modal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas:
      "header  header"
      "canvas  progress"
      "canvas  text"
      "inputs  nav"
      "simbar  nav";
  }
  #gates-header      { grid-area: header; }
  #gates-canvas-wrap { grid-area: canvas; align-self: start; border-bottom: none; border-right: 1px solid var(--border-panel); }
  #gates-progress    { grid-area: progress; }
  #gates-input-bar   { grid-area: inputs; border-right: 1px solid var(--border-panel); }
  #gates-sim-bar     { grid-area: simbar; border-bottom: none; border-right: 1px solid var(--border-panel); }
  #gates-text        { grid-area: text; overflow-y: auto; }
  #gates-nav         { grid-area: nav; }
  #gates-zoom-hint   { display: none; }
}

@media (max-width: 600px) {
  #canvas-hint-toggle { display: none; }
  #mobile-status { display: flex; }

  #btn-eraser {
    display: block;
    color: var(--text-dim);
  }
  #btn-eraser.active {
    color: #e06040;
    border-color: #e06040;
  }
}