@yuneta/gobj-ui 1.0.1 → 2.2.0

package/src/c_yui_shell.css

@@ -0,0 +1,571 @@
+/***********************************************************************
+ *      c_yui_shell.css — Layers + zones + nav layouts
+ *
+ *      Depends on Bulma being loaded (uses .tabs, .menu, .level, is-*, etc.)
+ ***********************************************************************/
+
+/*============================================================
+ *      Root + layers
+ *============================================================*/
+.yui-shell {
+    position: fixed;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+}
+.yui-layer {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+}
+.yui-layer > * {
+    pointer-events: auto;
+}
+
+.yui-layer-base         { z-index: 1;   }
+.yui-layer-overlay      { z-index: 15;  }
+.yui-layer-popup        { z-index: 20;  }
+.yui-layer-modal        { z-index: 99;  }
+.yui-layer-notification { z-index: 120; }
+.yui-layer-loading      { z-index: 150; }
+
+.yui-layer-notification,
+.yui-layer-loading {
+    pointer-events: none;
+}
+.yui-layer-loading.is-active,
+.yui-layer-modal.is-active { pointer-events: auto; }
+
+/*============================================================
+ *      Base grid (zones)
+ *
+ *      grid-template-areas:
+ *          top     top     top
+ *          left    topsub  right
+ *          left    center  right
+ *          botsub  botsub  botsub
+ *          bottom  bottom  bottom
+ *
+ *      `top-sub` sits at the TOP OF THE CONTENT column (above
+ *      `center`), not as a full-width band — so on desktop the
+ *      secondary nav (tabs) does not span over the `left` primary
+ *      menu, which keeps its full height beside the content.  On
+ *      mobile `left`/`right` are hidden, their `auto` columns
+ *      collapse to 0, and `top-sub`/`center` take the full width.
+ *============================================================*/
+.yui-base-grid {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
+    grid-template-areas:
+        "top    top    top"
+        "left   topsub right"
+        "left   center right"
+        "botsub botsub botsub"
+        "bottom bottom bottom";
+    width: 100%;
+    height: 100%;
+}
+
+.yui-zone {
+    min-width: 0;
+    min-height: 0;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+}
+.yui-zone-top,
+.yui-zone-bottom,
+.yui-zone-top-sub,
+.yui-zone-bottom-sub {
+    overflow: hidden;
+}
+.yui-zone-left,
+.yui-zone-right {
+    border-inline: 1px solid var(--bulma-border-weak, #dbdbdb);
+}
+.yui-zone-top,
+.yui-zone-top-sub {
+    border-bottom: 1px solid var(--bulma-border-weak, #dbdbdb);
+}
+.yui-zone-bottom,
+.yui-zone-bottom-sub {
+    border-top: 1px solid var(--bulma-border-weak, #dbdbdb);
+}
+
+/*  The center zone is a stage: its routed gobj $container fills it.
+ *  flex-shrink MUST be 0: with shrink:1 + min-height:0 a view whose
+ *  content is taller than the zone gets shrunk below its content,
+ *  the content overflows the (short) box with no scrollbar, and the
+ *  view background only covers that short box (white/blank below).
+ *  shrink:0 → short content: flex-grow fills the zone (bg covers
+ *  all); tall content: the box keeps its content height and the
+ *  zone (overflow:auto) scrolls. Correct at every screen size. */
+.yui-zone-center > * {
+    flex: 1 0 auto;
+    min-height: 0;
+}
+
+/*============================================================
+ *      Show-on visibility helpers
+ *
+ *      Bulma has is-hidden-mobile/-tablet/-desktop/-widescreen/-fullhd
+ *      but does NOT have "tablet-only" or "desktop-only" hiders per
+ *      single breakpoint slice.  Define ours.
+ *============================================================*/
+@media (max-width: 768px) {
+    .yui-hidden-mobile { display: none !important; }
+}
+@media (min-width: 769px) and (max-width: 1023px) {
+    .yui-hidden-tablet-only { display: none !important; }
+}
+@media (min-width: 1024px) and (max-width: 1215px) {
+    .yui-hidden-desktop-only { display: none !important; }
+}
+@media (min-width: 1216px) and (max-width: 1407px) {
+    .yui-hidden-widescreen-only { display: none !important; }
+}
+@media (min-width: 1408px) {
+    .yui-hidden-fullhd { display: none !important; }
+}
+
+/*============================================================
+ *      Nav layouts
+ *============================================================*/
+
+/*--- vertical (Bulma .menu) ---*/
+.yui-nav-vertical {
+    width: 100%;
+}
+.yui-nav-vertical .menu-list a { display: flex; align-items: center; gap: 0.5rem; }
+.yui-nav-vertical .yui-nav-label { white-space: nowrap; }
+
+/*--- icon-bar (bottom/top icon bar) ---*/
+.yui-nav-iconbar {
+    display: flex;
+    justify-content: space-around;
+    align-items: stretch;
+    margin: 0;
+    padding: 0.25rem 0;
+    width: 100%;
+    background: var(--bulma-scheme-main, #fff);
+}
+.yui-nav-iconbar .level-item { flex: 1 1 0; justify-content: center; }
+.yui-nav-iconbar .yui-nav-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 0.25rem 0.5rem;
+    gap: 0.125rem;
+    min-width: 0;
+    line-height: 1.1;
+    text-align: center;
+    color: var(--bulma-text, inherit);
+    text-decoration: none;
+    border-radius: 0.375rem;
+}
+.yui-nav-iconbar .yui-nav-item.is-active,
+.yui-nav-iconbar li.is-active > .yui-nav-item {
+    color: var(--bulma-link, #485fc7);
+    background-color: var(--bulma-link-light, rgba(72,95,199,0.1));
+}
+
+/*--- tabs (Bulma .tabs) ---*/
+.yui-nav-tabs .tabs ul { flex-wrap: wrap; }
+
+/*--- closable tab: trailing ✕ affordance (item.closable) ---*/
+.yui-nav-close {
+    opacity: 0.55;
+    cursor: pointer;
+    border-radius: 3px;
+}
+.yui-nav-close:hover {
+    opacity: 1;
+    background: var(--bulma-danger, #f14668);
+    color: #fff;
+}
+
+/*--- per-item state class (item.class) — generic disconnected tint ---*/
+.yui-nav-tabs .tabs li.yui-nav-disconnected a { color: var(--bulma-danger, #f14668); }
+
+/*--- stacked item (icon above label) ---*/
+.yui-nav-stacked {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.125rem;
+}
+
+/*--- drawer ---*/
+.yui-drawer {
+    position: fixed;
+    inset: 0;
+    z-index: 18;
+    display: none;
+}
+.yui-drawer.is-active { display: block; }
+.yui-drawer-backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(0,0,0,0.4);
+}
+.yui-drawer-panel {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 18rem;
+    max-width: 85vw;
+    background: var(--bulma-scheme-main, #fff);
+    box-shadow: 2px 0 8px rgba(0,0,0,0.2);
+    overflow: auto;
+}
+
+/*--- accordion ---*/
+.yui-nav-accordion .yui-accordion-head {
+    cursor: pointer;
+    user-select: none;
+}
+.yui-nav-accordion .yui-accordion-head::after {
+    content: "▾";
+    float: right;
+    transition: transform 0.15s ease;
+    transform: rotate(-90deg);
+}
+.yui-nav-accordion .yui-accordion-head.is-open::after {
+    transform: none;
+}
+
+/*--- section header / divider (decorative items inside vertical/submenu) ---*/
+.yui-nav .menu-list .yui-nav-section-header {
+    list-style: none;
+    margin: 0.75rem 0 0.125rem;
+    padding: 0.125rem 0.5rem;
+}
+.yui-nav .menu-list .yui-nav-section-header:first-child {
+    margin-top: 0.125rem;
+}
+.yui-nav .menu-list .yui-nav-section-header-label {
+    display: inline-block;
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    font-weight: 600;
+    color: var(--bulma-text-weak, #6b7280);
+}
+.yui-nav .menu-list .yui-nav-section-divider {
+    list-style: none;
+    height: 1px;
+    margin: 0.5rem 0.5rem;
+    background-color: var(--bulma-border-weak, #dbdbdb);
+}
+
+/*============================================================
+ *      Active item highlight (Bulma already styles .is-active
+ *      on .menu-list a and on .tabs li; we just ensure a
+ *      consistent look when we toggle it ourselves).
+ *============================================================*/
+.yui-nav .menu-list a.is-active {
+    background-color: var(--bulma-link, #485fc7);
+    color: var(--bulma-link-invert, #fff);
+}
+
+/*============================================================
+ *      Toolbar
+ *============================================================*/
+.yui-toolbar {
+    min-height: 2.5rem;
+}
+/*  Fixed app toolbar: ALWAYS a single row.  Bulma's .navbar stacks
+ *  .navbar-end below .navbar-brand on touch (<1024px) because the end
+ *  group is not wrapped in a burger .navbar-menu.  For a fixed shell
+ *  toolbar that is wrong — override Bulma's responsive navbar so the
+ *  start and end groups stay on one line at every breakpoint. */
+.yui-toolbar.navbar {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+}
+.yui-toolbar .yui-toolbar-start {
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+    align-items: center;
+    flex-wrap: nowrap;
+}
+.yui-toolbar .yui-toolbar-end {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    flex-wrap: nowrap;
+    margin-left: auto;
+}
+/*  Phones: keep the toolbar compact — drop the brand wordmark and the
+ *  item text labels, keep the small logo + icons (icon-only toolbar). */
+@media screen and (max-width: 768px) {
+    .yui-toolbar-brand-wordmark,
+    .yui-toolbar-item-label {
+        display: none;
+    }
+}
+.yui-toolbar-item {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    /*  Generous touch target: comfortable for a thumb (>= ~44px). */
+    padding: 0.5rem 0.85rem;
+    min-width: 2.75rem;
+    min-height: 2.75rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.4rem;
+    color: var(--bulma-text, inherit);
+}
+.yui-toolbar-item .icon {
+    /*  yi-* glyphs are 1em (mask) — scale them up so they are easy
+     *  to hit/read in the toolbar. */
+    font-size: 1.35rem;
+}
+.yui-toolbar-item:hover {
+    background-color: var(--bulma-scheme-main-bis, rgba(0,0,0,0.04));
+}
+
+/*============================================================
+ *      Toolbar — type:"brand"
+ *      Logo image + wordmark text. Renders as <button> when
+ *      `action` is set, otherwise as a passive <div>.
+ *============================================================*/
+.yui-toolbar-brand {
+    gap: 0.5rem;
+    text-decoration: none;
+    color: inherit;
+}
+.yui-toolbar-brand-logo {
+    height: 1.75rem;
+    width: auto;
+    flex: 0 0 auto;
+    display: block;
+}
+.yui-toolbar-brand-wordmark {
+    font-weight: 600;
+    font-size: 1.05rem;
+    letter-spacing: 0.01em;
+    white-space: nowrap;
+}
+
+/*============================================================
+ *      Toolbar — type:"avatar"
+ *      Circular badge populated by the host-registered provider
+ *      via yui_shell_set_avatar_provider().
+ *============================================================*/
+.yui-toolbar-avatar .yui-avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 9999px;
+    background-color: var(--bulma-link, #485fc7);
+    color: var(--bulma-link-invert, #ffffff);
+    font-size: 0.85rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    line-height: 1;
+}
+
+/*============================================================
+ *      Toolbar — type:"connection"
+ *      Backend-connection status dot.  State toggled by the
+ *      host via yui_shell_set_connection_state(shell, bool).
+ *============================================================*/
+.yui-toolbar-conn .yui-conn-dot {
+    display: inline-block;
+    width: 0.7rem;
+    height: 0.7rem;
+    border-radius: 9999px;
+    background-color: #9aa5b1;
+    box-shadow: 0 0 0 2px rgba(154, 165, 177, 0.25);
+    transition: background-color 0.15s ease, box-shadow 0.15s ease;
+}
+.yui-toolbar-conn.is-connected .yui-conn-dot {
+    background-color: #1FAE6F;
+    box-shadow: 0 0 0 2px rgba(31, 174, 111, 0.30);
+}
+.yui-toolbar-conn.is-disconnected .yui-conn-dot {
+    background-color: #D64545;
+    box-shadow: 0 0 0 2px rgba(214, 69, 69, 0.30);
+}
+
+/*============================================================
+ *      Toolbar — action.type:"dropdown"
+ *      Panel anchored to the trigger; mounted on the popup
+ *      layer so it sits above the base grid but below modals.
+ *============================================================*/
+.yui-toolbar-dropdown-panel {
+    background-color: var(--bulma-scheme-main, #ffffff);
+    color: var(--bulma-text, inherit);
+    border: 1px solid var(--bulma-border, rgba(0, 0, 0, 0.1));
+    border-radius: 0.375rem;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
+    min-width: 12rem;
+    padding: 0.25rem 0;
+    margin-top: 0.25rem;
+}
+.yui-toolbar-dropdown-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    border: none;
+    background: transparent;
+    padding: 0.5rem 0.875rem;
+    cursor: pointer;
+    text-align: left;
+    color: inherit;
+    font: inherit;
+}
+.yui-toolbar-dropdown-item:hover {
+    background-color: var(--bulma-scheme-main-bis, rgba(0, 0, 0, 0.06));
+}
+.yui-toolbar-dropdown-item:focus-visible {
+    outline: 2px solid var(--bulma-link, #485fc7);
+    outline-offset: -2px;
+}
+.yui-toolbar-dropdown-divider {
+    height: 1px;
+    margin: 0.25rem 0;
+    background-color: var(--bulma-border, rgba(0, 0, 0, 0.1));
+}
+
+/*============================================================
+ *      Keyboard focus (accessibility)
+ *      Use :focus-visible so we don't show an outline on click.
+ *============================================================*/
+.yui-nav a:focus-visible,
+.yui-nav button:focus-visible,
+.yui-toolbar-item:focus-visible,
+.yui-accordion-head:focus-visible {
+    outline: 2px solid var(--bulma-link, #485fc7);
+    outline-offset: 2px;
+    border-radius: 0.25rem;
+}
+
+/*============================================================
+ *      Shell placeholder (shown when navigation fails silently)
+ *============================================================*/
+.yui-shell-placeholder {
+    max-width: 60rem;
+}
+
+/*============================================================
+ *      Accordion head styling — needed because it is now a
+ *      <button>, which has default button styles to override.
+ *============================================================*/
+.yui-nav-accordion .yui-accordion-head {
+    display: block;
+    width: 100%;
+    text-align: inherit;
+    background: transparent;
+    border: none;
+    padding: 0.5em 0.75em;
+    margin: 0;
+    font: inherit;
+    color: inherit;
+}
+
+/*============================================================
+ *      Adaptive dialog (yui_shell_show_modal, opts.dialog:true)
+ *
+ *      The standardized "single window / popup" chrome:
+ *        - Desktop  : a centered card, close X at the top-right.
+ *        - Mobile   : a full-screen sheet, back arrow at the top-left.
+ *      One dismiss control shows per breakpoint; both call close().
+ *      768px is the shell-wide mobile breakpoint (matches the dock).
+ *============================================================*/
+/*  Lighter backdrop than Bulma's default (0.86): a popup should dim the
+ *  page, not black it out. */
+.yui-dialog .modal-background {
+    background-color: rgba(10, 10, 10, 0.4);
+}
+.yui-dialog .yui-dialog-content {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 640px;
+    max-height: 90vh;
+    background: var(--bulma-scheme-main, #fff);
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
+}
+.yui-dialog-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex: 0 0 auto;
+    padding: 0.5rem 0.6rem;
+    border-bottom: 1px solid var(--bulma-border-weak, #dbdbdb);
+}
+.yui-dialog-title {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 600;
+}
+.yui-dialog-back,
+.yui-dialog-x {
+    flex: 0 0 auto;
+    width: 2rem;
+    height: 2rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 0;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--bulma-text, currentColor);
+    cursor: pointer;
+}
+.yui-dialog-back:hover,
+.yui-dialog-x:hover {
+    background: var(--bulma-background, rgba(0, 0, 0, 0.06));
+}
+.yui-dialog-body {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+    padding: 1rem;
+}
+
+/*  Desktop: X (right) shown, back arrow hidden. */
+.yui-dialog-back {
+    display: none;
+}
+
+/*  Mobile: full-screen sheet, back arrow (left) shown, X hidden. */
+@media (max-width: 768px) {
+    .yui-dialog .modal-content {
+        margin: 0;
+        width: 100%;
+        max-height: 100%;
+        height: 100%;
+    }
+    .yui-dialog .yui-dialog-content {
+        max-width: 100%;
+        max-height: 100%;
+        height: 100%;
+        border-radius: 0;
+        box-shadow: none;
+    }
+    .yui-dialog-back {
+        display: inline-flex;
+    }
+    .yui-dialog-x {
+        display: none;
+    }
+}