remake

Author: ArrayIterator

README.md

@@ -87,7 +87,7 @@ Maximum record size is 1000 records, if more than 1000 records, the UI will not
 - [x] ToolBar (Chrome Like)
 - [x] Dark Mode & Light Mode (Auto Detect)
 - [x] Resizeable
-- [x] Responsiveness
+- [ ] Responsiveness (Partial)
 - [x] Action Size
   - [x] Maximize
   - [x] Minimize (restore)

assets/scss/components/_benchmarks.scss

@@ -56,6 +56,7 @@ waterfall-search {
             border-color: var(--waterfall-input-focus-border-color);
         }
     }
+
     waterfall-aggregators {
         & {
             padding: 0 calc(var(--waterfall-font-size) * .6) 0 0;
@@ -67,6 +68,7 @@ waterfall-search {
             // make mouse scroll horizontal
             scrollbar-width: none;
         }
+
         record-aggregator {
             & {
                 cursor: default;
@@ -78,11 +80,13 @@ waterfall-search {
                 border-radius: calc(var(--waterfall-font-size) * .2);
                 border: 1px solid var(--waterfall-aggregator-border-color);
             }
+
             &[data-status="active"] {
                 border: 1px solid var(--waterfall-aggregator-active-border-color);
                 background-color: var(--waterfall-aggregator-active-color);
                 color: var(--waterfall-aggregator-active-text-color);
             }
+
             &:not([data-status="active"]):hover {
                 color: var(--waterfall-color-hover);
             }
@@ -97,9 +101,11 @@ waterfall {
                 flex: 0 0 auto;
             }
         }
+
         waterfall-search {
             align-items: flex-start;
         }
+
         waterfall-tab-header {
             border-bottom: 1px solid var(--waterfall-header-border-color);
             font-size: calc(var(--waterfall-font-size) * .9);
@@ -162,6 +168,7 @@ waterfall {
                 }
             }
         }
+
         waterfall-tab-header {
             background-color: var(--waterfall-header-bg-color);
         }
@@ -205,15 +212,19 @@ waterfall {
         [data-severity="0"] record-bar {
             background-color: var(--waterfall-bg-color-success);
         }
+
         [data-severity="6"] record-bar {
             background-color: var(--waterfall-bg-color-info);
         }
+
         [data-severity="5"] record-bar {
             background-color: var(--waterfall-bg-color-notice);
         }
+
         [data-severity="3"] record-bar {
             background-color: var(--waterfall-bg-color-warning);
         }
+
         [data-severity="1"] record-bar {
             background-color: var(--waterfall-bg-color-error);
         }
@@ -225,20 +236,24 @@ waterfall {
                     align-items: flex-start;
                     flex: 0 0 100%;
                 }
+
                 waterfall-aggregators {
                     padding: calc(var(--waterfall-font-size) * .3) 0;
                     margin-left: 0;
                 }
+
                 label {
                     width: 100%;
                     margin-bottom: calc(var(--waterfall-font-size) * .3);
                 }
+
                 input[type="search"] {
                     width: 100%;
                 }
             }
         }
     }
+
     waterfall-record-empty {
         @include flex-column-center;
         flex: 0 0 100%;

assets/scss/components/_json.scss

@@ -14,12 +14,15 @@ waterfall[data-tab-mode="json"] {
         overflow: clip;
         margin: 0;
     }
+
     waterfall-content waterfall-tab-content {
         //overflow: hidden;
     }
+
     [data-command-action="minify"] {
         color: var(--waterfall-header-tab-active-color);
     }
+
     @media screen and (max-width: 640px) {
         waterfall-filters waterfall-actions > waterfall-info {
             flex: 0 0 100%;

assets/scss/components/_main.scss

@@ -51,8 +51,12 @@ waterfall {
 
     &[data-resize] {
         cursor: ns-resize;
-        transition: unset;
+        transition: none;
         user-select: none;
+
+        &[data-resize="resize-x"] {
+            cursor: ew-resize;
+        }
     }
 
     pre,

assets/scss/components/_preference.scss

@@ -16,12 +16,14 @@ waterfall-preference {
     height: 0;
     background-color: var(--waterfall-bg-color-base);
     transition: opacity ease .1s, visibility ease .1s;
+
     &[data-status="active"] {
         visibility: visible;
         opacity: 1;
         height: calc(100% - var(--waterfall-header-height));
     }
 }
+
 // -----------------------------------------------------------------
 // END PREFERENCE
 // -----------------------------------------------------------------

assets/scss/components/_root.scss

@@ -46,12 +46,13 @@
     --waterfall-aggregator-active-color: #cfe1f9;
     --waterfall-aggregator-active-text-color: #001e46;
 }
+
 :root:has(waterfall[data-color-mode="dark"]) {
     //--waterfall-bg-color-base: #2b2b2b;
     --waterfall-bg-color-base: #282828;
     --waterfall-header-bg-color: #3c3c3c;
     --waterfall-action-hover-color: #4d4d4d;
-    --waterfall-action-filter-hover-color: rgba(255, 255,255, .1);
+    --waterfall-action-filter-hover-color: rgba(255, 255, 255, .1);
     --waterfall-header-text-color: #e5e5e5;
     --waterfall-action-hover-text-color: #f1f1f1;
     --waterfall-header-border-color: #5e5e5e;
@@ -70,6 +71,7 @@
     --waterfall-aggregator-border-color: #7f7f7f;
     --waterfall-aggregator-active-text-color: #bee5fb;
 }
+
 // -----------------------------------------------------------------
 // END ROOT
 // -----------------------------------------------------------------