@zerwiz/ymir 0.1.34 → 0.1.35

package/apps/hlidskjalf/src/styles/mobile.css

@@ -0,0 +1,298 @@
+/* ============================================================
+   MOBILE — the whole hall on a phone.
+   Loaded last so it overrides every surface. Tuned for the APK / PWA.
+   ============================================================ */
+
+@media (max-width: 780px) {
+  /* --- Shell: one column; the rail becomes a top strip ---------- */
+  .shell {
+    --rail-w: 0px;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto var(--topbar-h) minmax(0, 1fr) var(--stream-h);
+    grid-template-areas:
+      'rail'
+      'topbar'
+      'stage'
+      'stream';
+  }
+  .rail {
+    flex-direction: row;
+    align-items: center;
+    gap: var(--ymir-space-2);
+    height: auto;
+    padding: 6px var(--ymir-space-3);
+    overflow-x: auto;
+    overflow-y: hidden;
+    border-right: none;
+    border-bottom: 1px solid var(--ymir-steel-1);
+  }
+  .rail .brand {
+    padding: 0 4px 0 0;
+  }
+  .rail .gate {
+    padding: 8px 10px;
+  }
+  .rail-foot {
+    flex-direction: row;
+    align-items: center;
+    gap: 6px;
+    margin-left: auto;
+  }
+  .wordmark,
+  .gate-label,
+  .gate-count,
+  .realm-opt span.label,
+  .rail-node span {
+    display: none;
+  }
+
+  /* --- Topbar: one row, swappable bits scroll ------------------- */
+  .topbar {
+    gap: var(--ymir-space-2);
+    padding: 0 var(--ymir-space-3);
+  }
+  .topbar .search {
+    display: none;
+  }
+  .ws-switch {
+    overflow-x: auto;
+    max-width: 44vw;
+  }
+  .trace-chip {
+    display: none;
+  }
+
+  /* --- Stage ---------------------------------------------------- */
+  .stage {
+    padding: var(--ymir-space-3);
+  }
+  .stage-head {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+  .stage-title {
+    font-size: 22px;
+  }
+  .stage-header-row {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .page-feed {
+    max-width: 100%;
+    min-width: 0;
+  }
+
+  /* --- Grids: one column; metrics: two -------------------------- */
+  .gate-grid,
+  .cols-2,
+  .cols-3,
+  .cols-4 {
+    grid-template-columns: 1fr !important;
+  }
+  .span-2 {
+    grid-column: auto !important;
+  }
+  .metric-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  /* --- Tables scroll, never clip -------------------------------- */
+  .panel-body.flush,
+  .panel-body {
+    overflow-x: auto;
+  }
+  .data-table {
+    min-width: 520px;
+  }
+
+  /* --- Chat stacks: thread first, sidebars below ---------------- */
+  .chat-layout {
+    grid-template-columns: 1fr !important;
+    height: auto;
+  }
+  .chat-side {
+    min-height: 0;
+  }
+  .chat-side-list {
+    max-height: 180px;
+  }
+  .chat-scroll {
+    min-height: 300px;
+  }
+
+  /* --- Login: single column, scrollable ------------------------- */
+  .login {
+    align-items: start;
+    min-height: 100dvh;
+    padding: var(--ymir-space-4);
+  }
+  .gate {
+    grid-template-columns: 1fr;
+    gap: var(--ymir-space-4);
+  }
+  .gate-lore {
+    order: 2;
+    padding: var(--ymir-space-2) 0;
+  }
+  .login-card {
+    max-width: 100%;
+    padding: var(--ymir-space-4);
+  }
+  /* 16px avoids mobile auto-zoom on focus */
+  .login-card input,
+  .field input,
+  .field select,
+  .chat-compose input {
+    font-size: 16px;
+  }
+
+  /* --- Stream --------------------------------------------------- */
+  .stream-body {
+    max-height: 26vh;
+  }
+  .stream-line {
+    grid-template-columns: 62px 80px 1fr !important;
+  }
+  .stream-line .kind {
+    display: none;
+  }
+}
+
+@media (max-width: 520px) {
+  .metric-grid {
+    grid-template-columns: 1fr;
+  }
+  .ws-switch {
+    max-width: 52vw;
+  }
+}
+
+/* --- Phone navigation: bottom tab bar + More sheet ---------------------- */
+.m-nav { display: none; }
+.m-sheet { display: none; }
+
+@media (max-width: 780px) {
+  /* The rail and the desktop stream give way to the tab bar on phones. */
+  .rail { display: none; }
+  .stream { display: none; }
+  .shell {
+    grid-template-columns: 1fr;
+    grid-template-rows: var(--topbar-h) minmax(0, 1fr);
+    grid-template-areas:
+      'topbar'
+      'stage';
+  }
+  .stage { padding-bottom: 84px; }
+
+  .m-nav {
+    display: flex;
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 50;
+    height: 58px;
+    padding-bottom: env(safe-area-inset-bottom);
+    background: color-mix(in srgb, var(--ymir-bg-1) 94%, transparent);
+    backdrop-filter: blur(10px);
+    border-top: 1px solid var(--ymir-steel-1);
+  }
+  .m-tab {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 2px;
+    background: none;
+    border: none;
+    color: var(--ymir-text-2);
+    font-size: 10px;
+    letter-spacing: 0.02em;
+    padding: 6px 0;
+  }
+  .m-tab.on { color: var(--realm-tint); }
+  .m-tab .m-glyph { font-size: 18px; }
+
+  .m-sheet {
+    display: flex;
+    position: fixed;
+    inset: 0;
+    z-index: 70;
+    align-items: flex-end;
+    background: rgba(0, 0, 0, 0.55);
+  }
+  .m-sheet-inner {
+    width: 100%;
+    background: var(--ymir-bg-1);
+    border-top: 1px solid var(--ymir-steel-1);
+    border-radius: 16px 16px 0 0;
+    padding: 10px var(--ymir-space-4) calc(var(--ymir-space-4) + env(safe-area-inset-bottom));
+    box-shadow: var(--ymir-shadow-raise);
+  }
+  .m-sheet-grip {
+    width: 40px;
+    height: 4px;
+    border-radius: 2px;
+    background: var(--ymir-steel-2);
+    margin: 0 auto 10px;
+  }
+  .m-sheet-head { font-weight: 600; margin-bottom: 10px; }
+  .m-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 8px;
+  }
+  .m-cell {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    padding: 12px 4px;
+    border: 1px solid var(--ymir-steel-1);
+    border-radius: 10px;
+    background: var(--ymir-bg-2);
+    color: var(--ymir-text-1);
+    font-size: 11px;
+  }
+  .m-cell.on { border-color: var(--realm-tint); color: var(--ymir-text-0); }
+  .m-cell .m-glyph { font-size: 20px; }
+
+  /* Chat composer clears the home indicator. */
+  .chat-compose { padding-bottom: calc(var(--ymir-space-3) + env(safe-area-inset-bottom)); }
+}
+
+@media (max-width: 780px) {
+  .m-sheet-grip {
+    cursor: grab;
+    touch-action: none;
+    width: 100%;
+    height: 16px;
+    margin: 0 0 10px;
+    background: none;
+  }
+  .m-sheet-grip::before {
+    content: '';
+    display: block;
+    width: 40px;
+    height: 4px;
+    border-radius: 2px;
+    background: var(--ymir-steel-2);
+    margin: 0 auto;
+  }
+}
+
+/* The login must always be able to scroll on a phone. */
+@media (max-width: 780px) {
+  .login {
+    display: block;
+    text-align: center;
+  }
+  .login .gate,
+  .login-card {
+    margin-left: auto;
+    margin-right: auto;
+    text-align: left;
+  }
+}

package/apps/hlidskjalf/src/styles/overlays.css

@@ -0,0 +1,205 @@
+/* ============================================================
+   HLIDSKJALF — Overlays: modal, toast, press feedback
+   ============================================================ */
+
+/* --- Press feedback on every interactive control -------------- */
+.btn,
+.icon-btn,
+.hall-btn,
+.gate,
+.task-mini,
+.realm-opt,
+.identity,
+.house-opt,
+.opt,
+.gh-btn,
+.swatch,
+.user-trigger,
+.stream-tab,
+.account-tenant {
+  transition: transform 90ms var(--ymir-ease), background var(--ymir-dur-fast) var(--ymir-ease),
+    border-color var(--ymir-dur-fast) var(--ymir-ease), color var(--ymir-dur-fast) var(--ymir-ease);
+}
+.btn:active,
+.icon-btn:active,
+.hall-btn:active,
+.task-mini:active,
+.realm-opt:active,
+.identity:active,
+.house-opt:active,
+.opt:active,
+.gh-btn:active,
+.swatch:active,
+.user-trigger:active,
+.stream-tab:active,
+.account-tenant:active {
+  transform: translateY(1px) scale(0.97);
+}
+.gate:active {
+  transform: scale(0.985);
+}
+
+@keyframes overlay-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes modal-reveal {
+  from {
+    opacity: 0;
+    transform: translateY(10px) scale(0.985);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: translateX(16px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+}
+
+/* --- Modal ---------------------------------------------------- */
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  display: grid;
+  place-items: center;
+  padding: var(--ymir-space-5);
+  background: rgba(14, 12, 9, 0.72);
+  backdrop-filter: blur(4px);
+  animation: overlay-fade 150ms var(--ymir-ease);
+}
+.modal {
+  width: min(580px, 100%);
+  max-height: 86vh;
+  overflow-y: auto;
+  background: var(--ymir-bg-1);
+  border: 1px solid var(--ymir-steel-1);
+  border-radius: var(--ymir-radius-panel);
+  box-shadow: var(--ymir-shadow-raise), var(--ymir-bevel);
+  animation: modal-reveal 180ms var(--ymir-ease);
+}
+.modal-head {
+  display: flex;
+  align-items: center;
+  gap: var(--ymir-space-3);
+  padding: var(--ymir-space-4) var(--ymir-space-5);
+  border-bottom: 1px solid var(--ymir-steel-1);
+  position: sticky;
+  top: 0;
+  background: var(--ymir-bg-1);
+  z-index: 1;
+}
+.modal-title {
+  font-size: 18px;
+  line-height: 1.2;
+}
+.modal-body {
+  padding: var(--ymir-space-4) var(--ymir-space-5) 0;
+  color: var(--ymir-text-1);
+  font-size: 14px;
+  line-height: 21px;
+}
+.modal-content {
+  margin: var(--ymir-space-4) var(--ymir-space-5) 0;
+  padding: var(--ymir-space-4);
+  background: var(--ymir-bg-0);
+  border: 1px solid var(--ymir-steel-1);
+  border-radius: var(--ymir-radius);
+  font-size: 12px;
+  line-height: 18px;
+  max-height: 44vh;
+  overflow: auto;
+  white-space: pre-wrap;
+  color: var(--ymir-text-1);
+}
+.modal-fields {
+  padding: var(--ymir-space-4) var(--ymir-space-5) 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ymir-space-3);
+}
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.field input,
+.field textarea {
+  background: var(--ymir-bg-0);
+  border: 1px solid var(--ymir-steel-1);
+  border-radius: var(--ymir-radius);
+  padding: 10px 12px;
+  color: var(--ymir-text-0);
+  outline: none;
+  font-size: 14px;
+  font-family: var(--ymir-font-body);
+  resize: vertical;
+}
+.field input:focus,
+.field textarea:focus {
+  border-color: var(--ymir-chisel);
+  box-shadow: var(--ymir-bevel);
+}
+.modal-foot {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--ymir-space-2);
+  padding: var(--ymir-space-5);
+}
+
+/* --- Toasts --------------------------------------------------- */
+.toast-host {
+  position: fixed;
+  right: var(--ymir-space-5);
+  bottom: var(--ymir-space-5);
+  z-index: 250;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ymir-space-2);
+  width: min(370px, calc(100vw - 40px));
+}
+.toast {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ymir-space-3);
+  padding: var(--ymir-space-3) var(--ymir-space-4);
+  border-radius: var(--ymir-radius);
+  background: var(--ymir-bg-1);
+  border: 1px solid var(--ymir-steel-1);
+  box-shadow: var(--ymir-shadow-raise);
+  animation: toast-in 220ms var(--ymir-ease);
+}
+.toast strong {
+  font-size: 13px;
+  color: var(--ymir-text-0);
+}
+.toast-body {
+  font-size: 12px;
+  color: var(--ymir-text-2);
+  line-height: 17px;
+}
+.toast-glyph {
+  font-family: var(--ymir-font-head);
+  font-size: 17px;
+  line-height: 1.2;
+}
+.toast-x {
+  color: var(--ymir-text-3);
+  font-size: 12px;
+  padding: 2px 4px;
+}
+.toast-x:hover {
+  color: var(--ymir-text-0);
+}