@yuneta/gobj-ui 2.6.0 → 3.0.0

package/src/c_yui_main.css

@@ -1,501 +0,0 @@
-/*********************************************************
- *      Colors
- *********************************************************/
-[data-theme=light],
-.theme-light {
-    /* CSS Variables */
-    /*background-color: #EEEEEE;*/
-    --my-text-color: black;
-    --modal-background-color: hsla(var(--bulma-scheme-h),var(--bulma-scheme-s),var(--bulma-scheme-invert-l),0.40);
-
-}
-
-[data-theme=dark],
-.theme-dark {
-    /* CSS Variables */
-    /*background-color: black;*/
-    --my-text-color: white;
-    --modal-background-color: hsla(var(--bulma-scheme-h),var(--bulma-scheme-s),var(--bulma-scheme-invert-l),0.90);
-}
-
-[data-theme=system],
-.theme-system {
-    /* CSS Variables */
-    /*background-color: var(--bulma-body-background-color);*/
-    --my-text-color: var(--bulma-body-color);
-    --modal-background-color: hsla(var(--bulma-scheme-h),var(--bulma-scheme-s),var(--bulma-scheme-invert-l),0.90);
-}
-
-
-/*********************************************************
- *      Body
- *********************************************************/
-/*
- *  Margins and size of html/body is defined in index.mako, same as below #root
- */
-#root {
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    height: 100%;
-}
-
-
-/*********************************************************
- *      Layers
- *********************************************************/
-:root {
-    --top-layer-size: 41px;
-    --top-layer-size-inside: 36px;   /* top-layer-size - 5 */
-                                            /* (1 for border, 4 for top/bottom center */
-    --top-border: 1px;
-
-    /*--bottom-layer-size: 35px;*/
-    --bottom-layer-size: 0px;
-    --bottom-layer-size-inside: 30px;
-    /*--bottom-border: 1px;*/
-    --bottom-border: 0px;
-    --bulma-body-min-width: 200px !important;
-}
-
-.top-layer {
-    position: fixed;
-    z-index: 2;
-
-    left: 0;
-    right: 0;
-
-    top: 0;
-    height: var(--top-layer-size);
-
-    border-bottom: var(--top-border) solid var(--bulma-border-weak);
-
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.bottom-layer {
-    position: fixed;
-    z-index: 2;
-
-    left: 0;
-    right: 0;
-
-    height: var(--bottom-layer-size);
-    bottom: 0;
-
-    border-top: var(--bottom-border) solid var(--bulma-border-weak);
-
-    display: none;
-    /*display: flex;*/
-    justify-content: space-between;
-    align-items: center;
-}
-
-.content-layer {
-    position: absolute;
-    z-index: 1;
-    top: calc(var(--top-layer-size) + var(--top-border));
-    bottom: calc(var(--bottom-layer-size) + var(--bottom-border));
-    left: 0;
-    right: 0;
-}
-
-.iframe-layer {
-    position: absolute;
-    z-index: 1;
-    top: calc(var(--top-layer-size) + var(--top-border));
-    bottom: calc(var(--bottom-layer-size) + var(--bottom-border));
-    left: 0;
-    right: 0;
-}
-
-.popup-layer {
-    position: absolute;
-    z-index: 20;
-    top: 0;
-    left: 0;
-}
-
-.modal-layer {
-    position: absolute;
-    z-index: 99;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0,0,0,0.3);
-    display: none;
-}
-
-/*********************************************************
- *      Bulma
- *********************************************************/
-.modal-background {
-    /* En firefox aclara el fondo, pero en chrome no cambia */
-    /*background-color: var(--modal-background-color) !important;*/
-}
-
-.is-large.modal-close {
-    --bulma-delete-dimensions: 3.5rem !important;
-}
-
-/* Custom class to adjust the modal width */
-.modal-card.modal-is-responsive {
-    width: 100%;
-    max-width: 100%;
-}
-
-@media screen and (min-width: 768px) {
-    .modal-card.modal-is-responsive {
-        width: 50rem;
-        max-width: 50rem;
-    }
-}
-
-/*
- *  Mobile (< 768px, dovetails with the desktop rule above): a
- *  `modal-is-responsive` card (the C_YUI_TREEDB edit/delete form
- *  popup, and any other consumer of this opt-in class) takes the
- *  WHOLE screen instead of a centred sheet — more room to edit on a
- *  phone.  Confirm dialogs do not carry `modal-is-responsive`, so
- *  they stay compact.  Edge-to-edge: full size, no margin, flat
- *  corners; the body keeps Bulma's own scroll.
- */
-@media screen and (max-width: 767px) {
-    .modal-card.modal-is-responsive {
-        width: 100%;
-        max-width: 100%;
-        height: 100%;
-        max-height: 100%;
-        margin: 0;
-        border-radius: 0;
-    }
-    .modal-card.modal-is-responsive .modal-card-head,
-    .modal-card.modal-is-responsive .modal-card-foot {
-        border-radius: 0;
-    }
-    .modal-card.modal-is-responsive .modal-card-body {
-        flex: 1 1 auto;
-        overflow-y: auto;
-    }
-}
-
-.grid.is-col-min-22 {
-    --bulma-grid-column-min: 28rem !important;
-}
-
-/*
- *  Generic helpers
- */
-
-.overscroll-contain {
-    overscroll-behavior: contain;
-}
-
-.without-border {
-    border: none !important;
-    box-shadow: none !important;
-    background: transparent !important;
-}
-
-.with-border {
-    border: 1px solid var(--bulma-border);
-}
-
-.wrap-text {
-    white-space: normal !important;;
-    word-wrap: break-word !important;;
-    overflow-wrap: break-word !important;;
-}
-
-.strong-shadow {
-    box-shadow:
-        0 1em 2em -0.125em hsla(var(--bulma-shadow-h), var(--bulma-shadow-s), var(--bulma-shadow-l), 0.3),
-        0 0 0 2px hsla(var(--bulma-shadow-h), var(--bulma-shadow-s), var(--bulma-shadow-l), 0.1) !important;
-}
-
-@media screen and (max-width: 768px) {
-    .column {
-        padding: 0 !important;
-        margin-bottom: 16px !important;
-    }
-}
-
-.full-width-button {
-    width: 100%;
-}
-
-/*********************************************************
- *      Toolbars
- *********************************************************/
-.yui-horizontal-toolbar-section {
-    display: flex;
-    height: auto;
-    flex-shrink: 0; /* Prevents resizing */
-    white-space: nowrap;
-    margin: 0 2px; /* Space between sections */
-    justify-content: space-between;
-    align-items: center;
-}
-
-a.flex-horizontal-section { /* To make flex any <a> */
-    display: flex;
-    flex-shrink: 0; /* Prevents resizing */
-    white-space: nowrap;
-    margin: 0 2px; /* Space between sections */
-    justify-content: space-between;
-    align-items: center;
-    padding-inline-end: 2rem;
-}
-
-/*********************************************************
- *      Tabulator
- *********************************************************/
-
-/* Visible column separator via pseudo-element on the right-side resize handle only.
-   .prev handles (left-side) are excluded so hidden columns (e.g. Select Row when
-   not in edit mode) don't leave a spurious line at the start of the table. */
-.tabulator .tabulator-col-resize-handle:not(.prev)::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 50%;
-    width: 1px;
-    background-color: var(--bulma-border);
-}
-
-.tabulator-row .tabulator-cell.tabulator-frozen {
-    background-color: var(--bulma-background) !important;
-}
-.tabulator .tabulator-header .tabulator-frozen {
-    background-color: var(--bulma-background) !important;
-}
-
-/*
- *  Tabulator light theme — alternating row backgrounds
- *  scheme-main-ter (#f5f5f5) gives visible contrast against white odd rows.
- *  !important needed to override the tabulator_bulma.css theme.
- */
-.tabulator .tabulator-row,
-.tabulator .tabulator-row.tabulator-row-odd {
-    background-color: var(--bulma-scheme-main, #fff) !important;
-}
-
-.tabulator .tabulator-row.tabulator-row-even {
-    background-color: var(--bulma-scheme-main-ter, #f5f5f5) !important;
-}
-
-.tabulator .tabulator-row.tabulator-selectable:hover {
-    background-color: var(--bulma-background, #ebebeb) !important;
-}
-
-/*
- *  Tabulator dark theme
- *  Activated by html[data-theme=dark] (set by the app's theme switcher)
- */
-[data-theme=dark] .tabulator {
-    background-color: var(--bulma-body-background-color);
-    border-color: var(--bulma-border);
-    color: var(--bulma-body-color);
-}
-
-[data-theme=dark] .tabulator .tabulator-header,
-[data-theme=dark] .tabulator .tabulator-header .tabulator-col {
-    background-color: var(--bulma-background);
-    border-color: var(--bulma-border);
-    color: var(--bulma-text);
-}
-
-[data-theme=dark] .tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
-    background-color: var(--bulma-background-bis, var(--bulma-background));
-}
-
-[data-theme=dark] .tabulator-row,
-[data-theme=dark] .tabulator-row.tabulator-row-odd {
-    background-color: var(--bulma-body-background-color) !important;
-    color: var(--bulma-body-color);
-    border-color: var(--bulma-border);
-}
-
-[data-theme=dark] .tabulator-row.tabulator-row-even {
-    background-color: var(--bulma-background) !important;
-    color: var(--bulma-body-color);
-    border-color: var(--bulma-border);
-}
-
-[data-theme=dark] .tabulator-row .tabulator-cell {
-    border-color: var(--bulma-border);
-    color: var(--bulma-body-color);
-}
-
-[data-theme=dark] .tabulator-row.tabulator-selectable:hover {
-    background-color: var(--bulma-background) !important;
-    color: var(--bulma-text) !important;
-}
-
-[data-theme=dark] .tabulator-row.tabulator-selected {
-    background-color: var(--bulma-link) !important;
-    color: var(--bulma-link-invert) !important;
-}
-
-[data-theme=dark] .tabulator-row.tabulator-selected .tabulator-cell {
-    color: var(--bulma-link-invert) !important;
-}
-
-[data-theme=dark] .tabulator .tabulator-footer {
-    background-color: var(--bulma-background);
-    border-color: var(--bulma-border);
-    color: var(--bulma-text);
-}
-
-[data-theme=dark] .tabulator .tabulator-footer .tabulator-page {
-    background-color: transparent;
-    color: var(--bulma-text);
-    border-color: var(--bulma-border);
-}
-
-[data-theme=dark] .tabulator .tabulator-footer .tabulator-page:not(.disabled):hover {
-    background-color: var(--bulma-background);
-    color: var(--bulma-text);
-}
-
-[data-theme=dark] .tabulator .tabulator-footer .tabulator-page.active {
-    background-color: var(--bulma-link);
-    color: var(--bulma-link-invert);
-}
-
-[data-theme=dark] .tabulator-row .tabulator-cell.tabulator-frozen {
-    background-color: var(--bulma-background) !important;
-}
-
-/* system theme: follow OS preference */
-@media (prefers-color-scheme: dark) {
-    [data-theme=system] .tabulator {
-        background-color: var(--bulma-body-background-color);
-        border-color: var(--bulma-border);
-        color: var(--bulma-body-color);
-    }
-    [data-theme=system] .tabulator .tabulator-header,
-    [data-theme=system] .tabulator .tabulator-header .tabulator-col {
-        background-color: var(--bulma-background);
-        border-color: var(--bulma-border);
-        color: var(--bulma-text);
-    }
-    [data-theme=system] .tabulator-row,
-    [data-theme=system] .tabulator-row.tabulator-row-odd {
-        background-color: var(--bulma-body-background-color) !important;
-        color: var(--bulma-body-color);
-        border-color: var(--bulma-border);
-    }
-    [data-theme=system] .tabulator-row.tabulator-row-even {
-        background-color: var(--bulma-background) !important;
-        color: var(--bulma-body-color);
-        border-color: var(--bulma-border);
-    }
-    [data-theme=system] .tabulator-row .tabulator-cell {
-        border-color: var(--bulma-border);
-        color: var(--bulma-body-color);
-    }
-    [data-theme=system] .tabulator-row.tabulator-selectable:hover {
-        background-color: var(--bulma-background) !important;
-    }
-    [data-theme=system] .tabulator-row.tabulator-selected {
-        background-color: var(--bulma-link) !important;
-        color: var(--bulma-link-invert) !important;
-    }
-    [data-theme=system] .tabulator .tabulator-footer {
-        background-color: var(--bulma-background);
-        border-color: var(--bulma-border);
-        color: var(--bulma-text);
-    }
-    [data-theme=system] .tabulator .tabulator-footer .tabulator-page {
-        background-color: transparent;
-        color: var(--bulma-text);
-        border-color: var(--bulma-border);
-    }
-    [data-theme=system] .tabulator .tabulator-footer .tabulator-page.active {
-        background-color: var(--bulma-link);
-        color: var(--bulma-link-invert);
-    }
-}
-
-/*============================================================
- *      Volatil modals (display_volatil_modal):
- *      get_yesnocancel / get_yesno / get_ok and the typed
- *      info/warning/error messages. Icon-centric layout: 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-volatil .modal-background {
-    background-color: color-mix(in srgb, var(--bulma-scheme-invert, #000) 45%, transparent);
-}
-.modal.yui-volatil .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-volatil .modal-card-body {
-    background: transparent;
-    padding: 0;
-}
-.modal.yui-volatil .modal-card-foot {
-    background: transparent;
-    border-top: none;
-    padding: 1rem 0 0;
-}
-.yui-volatil-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-volatil-base, var(--bulma-info, #3e8ed0)) 15%, transparent);
-    color: var(--yui-volatil-ink, var(--bulma-info, #3e8ed0));
-}
-.modal.yui-volatil.is-info,
-.modal.yui-volatil.is-question {
-    --yui-volatil-base: var(--bulma-info, #3e8ed0);
-    --yui-volatil-ink: var(--bulma-info-on-scheme, #3e8ed0);
-}
-.modal.yui-volatil.is-success {
-    --yui-volatil-base: var(--bulma-success, #48c78e);
-    --yui-volatil-ink: var(--bulma-success-on-scheme, #257953);
-}
-.modal.yui-volatil.is-warning {
-    --yui-volatil-base: var(--bulma-warning, #ffe08a);
-    --yui-volatil-ink: var(--bulma-warning-on-scheme, #946c00);
-}
-.modal.yui-volatil.is-error {
-    --yui-volatil-base: var(--bulma-danger, #f14668);
-    --yui-volatil-ink: var(--bulma-danger-on-scheme, #cc0f35);
-}
-.yui-volatil-title {
-    font-size: 1.15rem;
-    font-weight: 600;
-    text-transform: capitalize;
-    margin-bottom: 0.25rem;
-    color: var(--bulma-text-strong, inherit);
-}
-.yui-volatil-x {
-    position: absolute;
-    top: 0.75rem;
-    right: 0.75rem;
-}
-.yui-volatil-msg {
-    font-size: 1.05rem;
-    color: var(--bulma-text, inherit);
-}
-.modal.yui-volatil .modal-card-body .buttons {
-    margin-top: 1.25rem;
-    margin-bottom: 0;
-}