@bagelink/vue 1.14.13 → 1.15.0

package/src/styles/app-layout.css

@@ -0,0 +1,231 @@
+/* App-level layout patterns — extracted from theme.css (June 2026)
+ * These are application-specific rules, not design tokens or reusable utilities.
+ */
+
+.popup {
+    border-radius: 15px;
+    background: var(--bgl-popup-bg);
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
+    padding: 2rem;
+    min-width: 300px;
+    text-align: center;
+}
+
+.tabs {
+    column-gap: 1rem;
+    margin-top: 20px;
+    margin-bottom: -2rem;
+    border-top: 1px solid var(--bgl-border-color);
+    width: calc(100% + 4rem);
+    margin-inline-start: -2rem;
+    padding-inline-start: 2rem;
+    overflow: auto;
+    display: flex;
+}
+
+.tab,
+.router-tab {
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 2.5;
+    cursor: pointer;
+    transition: var(--bgl-transition);
+    border-bottom: 2px solid transparent;
+    padding: 0 5px;
+    white-space: nowrap;
+    text-decoration: none;
+    color: inherit;
+}
+
+.tab.active,
+.router-tab.router-link-active {
+    color: var(--bgl-primary);
+    border-bottom: 2px solid var(--bgl-primary);
+}
+
+.tab:hover,
+.router-tab:hover {
+    color: var(--bgl-primary);
+}
+
+.tab:active,
+.router-tab:active {
+    filter: brightness(70%);
+}
+
+.entity-container {
+    display: grid;
+    height: 100%;
+    grid-template-columns: minmax(300px, 1fr) 3fr;
+    grid-gap: 1rem;
+    column-gap: 1rem;
+    grid-template-rows: 1fr;
+    grid-template-areas: 'list-view detail-view';
+    transition: grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
+    transition:
+        grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99),
+        -ms-grid-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
+    transition: all 0.5s cubic-bezier(0.79, 0.01, 0.34, 0.99);
+}
+
+.detail-main {
+    overflow-y: auto;
+}
+
+.content-row p {
+    margin: 0 0 10px 0;
+}
+
+.id {
+    color: var(--bgl-gray);
+    font-size: 9px;
+}
+
+.field {
+    --field-count: 1;
+    --width: calc(100% / var(--field-count));
+    grid-auto-columns: minmax(var(--width), var(--width));
+    font-size: 10px;
+    text-align: start;
+}
+
+.detail-view-inner {
+    display: grid;
+    height: 100%;
+    overflow: hidden;
+    grid-template-rows: max-content 1fr;
+    gap: 1rem;
+}
+
+.detail-view-inner-wrap {
+    height: 100%;
+    overflow: hidden;
+    transition: var(--bgl-transition);
+}
+
+.table-list-wrap {
+    overflow: auto;
+}
+
+.copy-url {
+    background-color: var(--bgl-gray-light);
+    border-radius: var(--bgl-btn-border-radius);
+    padding: 0.5rem 1rem;
+    align-items: center;
+    justify-content: flex-start;
+    margin-bottom: 1rem;
+    display: flex;
+    justify-content: space-between;
+}
+
+.copy-url a {
+    margin: 0;
+    font-size: 12px;
+    opacity: 0.8;
+    color: var(--bgl-text-color);
+    word-break: break-all;
+}
+
+.list-view {
+    grid-area: list-view;
+    grid-template-areas: 'list-header''list-content';
+    grid-template-columns: 1fr;
+    overflow-y: auto;
+    grid-template-rows: max-content 1fr;
+    transition: var(--bgl-transition-ease);
+}
+
+.shekel {
+    line-height: 0;
+}
+
+.view-wrapper {
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+}
+
+.extraOptions {
+    max-height: 30px;
+    overflow: hidden;
+    transition: all 0.2s 30s ease;
+}
+
+.extraOptions:hover {
+    max-height: 200vh;
+    transition: 0.2s all 0.2s ease;
+}
+
+@media screen and (max-width: 1000px) {
+    .entity-container {
+        grid-template-columns: minmax(22vw, 1fr) 2fr;
+    }
+}
+
+@media screen and (max-width: 910px) {
+    .tab {
+        font-size: 12px;
+    }
+
+    .entity-container {
+        grid-template-columns: 1fr;
+        gap: 0;
+    }
+
+    .detail-view-inner {
+        border-radius: var(--bgl-card-border-radius);
+        background: var(--bgl-box-bg);
+    }
+
+    .detail-view-inner-wrap {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        background: var(--bgl-bg);
+    }
+
+    .detail-view-inner-wrap.bgl_card {
+        background: var(--bgl-box-bg);
+    }
+
+    .bgl_card {
+        padding: 1rem 1rem;
+    }
+
+    .tabs {
+        column-gap: 10px;
+        margin-top: 10px;
+        margin-bottom: -15px;
+        box-sizing: border-box;
+        margin-inline-start: -1rem;
+        padding-inline-start: 1rem;
+        max-width: calc(100vw - 2rem);
+    }
+
+    .popup {
+        border-radius: 15px;
+        background: var(--bgl-popup-bg);
+        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
+        padding: 2rem;
+        min-width: 0;
+        max-width: 90%;
+        max-height: 90vh;
+        overflow-x: auto;
+        text-align: center;
+    }
+
+    .detail-main {
+        overflow-y: unset;
+    }
+
+    .detail-section {
+        height: fit-content;
+    }
+
+    .field {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        align-items: center;
+    }
+}

package/src/styles/appearance.css

@@ -162,26 +162,26 @@
 }
 
 .border-bottom {
-    border-bottom: 1px solid var(--border-color)
+    border-bottom: 1px solid var(--bgl-border-color)
 }
 
 .border-top {
-    border-top: 1px solid var(--border-color)
+    border-top: 1px solid var(--bgl-border-color)
 }
 
 .border-start {
-    border-inline-start: 1px solid var(--border-color)
+    border-inline-start: 1px solid var(--bgl-border-color)
 }
 
 .border-end {
-    border-inline-end: 1px solid var(--border-color)
+    border-inline-end: 1px solid var(--bgl-border-color)
 }
 
 .border-input input,
 .border-input textarea,
 .border-input select,
 .border-input button {
-    border: 1px solid var(--border-color) !important;
+    border: 1px solid var(--bgl-border-color) !important;
 }
 
 .border-input-none input,
@@ -192,19 +192,19 @@
 }
 
 .border-inner-bottom>* {
-    border-bottom: 1px solid var(--border-color)
+    border-bottom: 1px solid var(--bgl-border-color)
 }
 
 .border-inner-top>* {
-    border-top: 1px solid var(--border-color)
+    border-top: 1px solid var(--bgl-border-color)
 }
 
 .border-inner-start>* {
-    border-inline-start: 1px solid var(--border-color)
+    border-inline-start: 1px solid var(--bgl-border-color)
 }
 
 .border-inner-end>* {
-    border-inline-end: 1px solid var(--border-color)
+    border-inline-end: 1px solid var(--bgl-border-color)
 }
 
 .border-bottom-none {
@@ -485,19 +485,19 @@
     }
 
     .m_border-bottom {
-        border-bottom: 1px solid var(--border-color)
+        border-bottom: 1px solid var(--bgl-border-color)
     }
 
     .m_border-top {
-        border-top: 1px solid var(--border-color)
+        border-top: 1px solid var(--bgl-border-color)
     }
 
     .m_border-start {
-        border-inline-start: 1px solid var(--border-color)
+        border-inline-start: 1px solid var(--bgl-border-color)
     }
 
     .m_border-end {
-        border-inline-end: 1px solid var(--border-color)
+        border-inline-end: 1px solid var(--bgl-border-color)
     }
 
     .m_border-none {
@@ -509,19 +509,19 @@
     }
 
     .m_border-inner-bottom>* {
-        border-bottom: 1px solid var(--border-color)
+        border-bottom: 1px solid var(--bgl-border-color)
     }
 
     .m_border-inner-top>* {
-        border-top: 1px solid var(--border-color)
+        border-top: 1px solid var(--bgl-border-color)
     }
 
     .m_border-inner-start>* {
-        border-inline-start: 1px solid var(--border-color)
+        border-inline-start: 1px solid var(--bgl-border-color)
     }
 
     .m_border-inner-end>* {
-        border-inline-end: 1px solid var(--border-color)
+        border-inline-end: 1px solid var(--bgl-border-color)
     }
 
     .m_border-inner-none>* {
@@ -586,9 +586,7 @@
         box-shadow: 0 0 30px 0 var(--bgl-shadow) !important;
     }
 
-    .m_shadow-light {
-        box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1) !important;
-    }
+    /* .m_shadow-light already defined above (line 478) */
 
     .m_shadow-txt {
         filter: drop-shadow(0 0 10px var(--bgl-black-tint));
@@ -647,7 +645,7 @@
     .m_border-input textarea,
     .m_border-input select,
     .m_border-input button {
-        border: 1px solid var(--border-color) !important;
+        border: 1px solid var(--bgl-border-color) !important;
     }
 
     .m_border-input-none input,
@@ -657,4 +655,164 @@
         border: none !important;
     }
 
+}
+
+/* ========================================================================
+   Utility gap fills (June 2026)
+   ======================================================================== */
+
+/* Letter Spacing / Tracking */
+.tracking-tighter {
+    letter-spacing: -0.05em !important;
+}
+
+.tracking-tight {
+    letter-spacing: -0.025em !important;
+}
+
+.tracking-normal {
+    letter-spacing: 0 !important;
+}
+
+.tracking-wide {
+    letter-spacing: 0.025em !important;
+}
+
+.tracking-wider {
+    letter-spacing: 0.05em !important;
+}
+
+.tracking-widest {
+    letter-spacing: 0.1em !important;
+}
+
+/* Filter */
+.blur-none {
+    filter: blur(0) !important;
+}
+
+.blur-sm {
+    filter: blur(4px) !important;
+}
+
+.blur {
+    filter: blur(8px) !important;
+}
+
+.blur-md {
+    filter: blur(12px) !important;
+}
+
+.blur-lg {
+    filter: blur(16px) !important;
+}
+
+.blur-xl {
+    filter: blur(24px) !important;
+}
+
+.brightness-50 {
+    filter: brightness(50%) !important;
+}
+
+.brightness-75 {
+    filter: brightness(75%) !important;
+}
+
+.brightness-90 {
+    filter: brightness(90%) !important;
+}
+
+.brightness-110 {
+    filter: brightness(110%) !important;
+}
+
+.brightness-125 {
+    filter: brightness(125%) !important;
+}
+
+.brightness-150 {
+    filter: brightness(150%) !important;
+}
+
+.grayscale {
+    filter: grayscale(100%) !important;
+}
+
+.grayscale-0 {
+    filter: grayscale(0) !important;
+}
+
+.invert {
+    filter: invert(100%) !important;
+}
+
+.invert-0 {
+    filter: invert(0) !important;
+}
+
+.saturate-0 {
+    filter: saturate(0) !important;
+}
+
+.saturate-50 {
+    filter: saturate(50%) !important;
+}
+
+.saturate-150 {
+    filter: saturate(150%) !important;
+}
+
+.saturate-200 {
+    filter: saturate(200%) !important;
+}
+
+/* Backdrop Filter */
+.backdrop-blur-none {
+    backdrop-filter: blur(0) !important;
+}
+
+.backdrop-blur-sm {
+    backdrop-filter: blur(4px) !important;
+}
+
+.backdrop-blur {
+    backdrop-filter: blur(8px) !important;
+}
+
+.backdrop-blur-md {
+    backdrop-filter: blur(12px) !important;
+}
+
+.backdrop-blur-lg {
+    backdrop-filter: blur(16px) !important;
+}
+
+.backdrop-blur-xl {
+    backdrop-filter: blur(24px) !important;
+}
+
+/* Gradients */
+.bg-gradient-to-t {
+    background-image: linear-gradient(to top, var(--bgl-gradient-from, transparent), var(--bgl-gradient-to, transparent)) !important;
+}
+
+.bg-gradient-to-b {
+    background-image: linear-gradient(to bottom, var(--bgl-gradient-from, transparent), var(--bgl-gradient-to, transparent)) !important;
+}
+
+.bg-gradient-to-r {
+    background-image: linear-gradient(to right, var(--bgl-gradient-from, transparent), var(--bgl-gradient-to, transparent)) !important;
+}
+
+.bg-gradient-to-l {
+    background-image: linear-gradient(to left, var(--bgl-gradient-from, transparent), var(--bgl-gradient-to, transparent)) !important;
+}
+
+.bg-gradient-to-tr {
+    background-image: linear-gradient(to top right, var(--bgl-gradient-from, transparent), var(--bgl-gradient-to, transparent)) !important;
+}
+
+.bg-gradient-to-bl {
+    background-image: linear-gradient(to bottom left, var(--bgl-gradient-from, transparent), var(--bgl-gradient-to, transparent)) !important;
 }