@yuneta/gobj-ui 2.6.0 → 4.0.0

package/src/c_yui_shell.css

@@ -4,6 +4,31 @@
  *      Depends on Bulma being loaded (uses .tabs, .menu, .level, is-*, etc.)
  ***********************************************************************/
 
+/*============================================================
+ *      Native control scheme
+ *
+ *      The browser draws the ornaments of native controls itself —
+ *      number-input spinners, the select chevron, scrollbars, the
+ *      date picker — and picks their colours from `color-scheme`,
+ *      NOT from the background/color we set. Nobody declared it, so
+ *      they rendered light in a dark app whatever the CSS said.
+ *      Bulma flips its palette on [data-theme]; this makes the
+ *      browser's own chrome follow the same switch.
+ *============================================================*/
+/*  No [data-theme] is the "system" theme: Bulma renders per
+ *  prefers-color-scheme, so `light dark` — "supports both, follow the
+ *  OS" — is what tracks it. Pinning `light` here would force light
+ *  controls inside a system-dark app: the very bug this fixes. */
+:root {
+    color-scheme: light dark;
+}
+:root[data-theme="light"] {
+    color-scheme: light;
+}
+:root[data-theme="dark"] {
+    color-scheme: dark;
+}
+
 /*============================================================
  *      Root + layers
  *============================================================*/
@@ -590,6 +615,14 @@
     white-space: nowrap;
     font-weight: 600;
 }
+/*  Separator between the data half and the translated kind half. CSS,
+ *  not a text node: createElement2 trims text nodes and eats the spaces. */
+.MODAL_TITLE_PREFIX + .MODAL_TITLE_KIND::before {
+    content: "·";
+    padding: 0 0.4em;
+    color: var(--bulma-text-weak);
+    font-weight: 400;
+}
 .yui-dialog-back,
 .yui-dialog-x {
     flex: 0 0 auto;
@@ -643,3 +676,90 @@
         display: none;
     }
 }
+
+/*  Moved from c_yui_main.css (2.6.1): mobile Bulma columns edge-to-edge.
+ *  Self-contained here so every consumer gets it without the
+ *  legacy stack's stylesheet. */
+
+@media screen and (max-width: 768px) {
+    .column {
+        padding: 0 !important;
+        margin-bottom: 16px !important;
+    }
+}
+
+
+/*============================================================
+ *      Shell confirm dialogs (yui_shell_confirm_*):
+ *      icon-centric layout ported from the legacy volatil
+ *      modals (2.5.0 redesign; c_yui_main.js removed in 3.0.0).
+ *      A narrow rounded card with a tinted round icon of the
+ *      type; everything maps to Bulma vars so one rule set
+ *      follows light and dark.
+ *============================================================*/
+.modal.yui-confirm .modal-background {
+    background-color: color-mix(in srgb, var(--bulma-scheme-invert, #000) 45%, transparent);
+}
+.modal.yui-confirm .modal-card {
+    position: relative;
+    width: min(26rem, calc(100vw - 2rem));
+    border-radius: 0.75rem;
+    background: var(--bulma-scheme-main, #fff);
+    box-shadow: 0 12px 40px color-mix(in srgb, var(--bulma-scheme-invert, #000) 30%, transparent);
+    padding: 1.5rem 1.5rem 1.25rem;
+}
+.modal.yui-confirm .modal-card-body {
+    background: transparent;
+    padding: 0;
+}
+.modal.yui-confirm .modal-card-foot {
+    background: transparent;
+    border-top: none;
+    padding: 1rem 0 0;
+    justify-content: center;
+}
+.yui-confirm-icon {
+    width: 3.25rem;
+    height: 3.25rem;
+    border-radius: 9999px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 0.75rem;
+    font-size: 1.5rem;
+    background: color-mix(in srgb, var(--yui-confirm-base, var(--bulma-info, #3e8ed0)) 15%, transparent);
+    color: var(--yui-confirm-ink, var(--bulma-info, #3e8ed0));
+}
+.modal.yui-confirm.is-info,
+.modal.yui-confirm.is-question {
+    --yui-confirm-base: var(--bulma-info, #3e8ed0);
+    --yui-confirm-ink: var(--bulma-info-on-scheme, #3e8ed0);
+}
+.modal.yui-confirm.is-success {
+    --yui-confirm-base: var(--bulma-success, #48c78e);
+    --yui-confirm-ink: var(--bulma-success-on-scheme, #257953);
+}
+.modal.yui-confirm.is-warning {
+    --yui-confirm-base: var(--bulma-warning, #ffe08a);
+    --yui-confirm-ink: var(--bulma-warning-on-scheme, #946c00);
+}
+.modal.yui-confirm.is-error {
+    --yui-confirm-base: var(--bulma-danger, #f14668);
+    --yui-confirm-ink: var(--bulma-danger-on-scheme, #cc0f35);
+}
+.yui-confirm-title {
+    font-size: 1.15rem;
+    font-weight: 600;
+    text-transform: capitalize;
+    margin-bottom: 0.25rem;
+    color: var(--bulma-text-strong, inherit);
+}
+.yui-confirm-x {
+    position: absolute;
+    top: 0.75rem;
+    right: 0.75rem;
+}
+.yui-confirm-msg {
+    font-size: 1.05rem;
+    color: var(--bulma-text, inherit);
+}