@components-1812/json-visualizer/src/JSONVisualizer.css

A web component for visualizing JSON data in a collapsible tree view.

/*
    JSONVisualizer.css
    version: 0.0.2
*/
:host {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    
    --line-height: 1.25;
    --line-elements-gap: 5px;
    --line-white-space: normal;
    --font: Consolas, "Courier New", monospace, sans-serif;

    --line-number-padding: 5px;
    --line-number-color: #777;
    --line-number-background: transparent;
    --line-number-text-align: right;
    --line-number-width: fit-content;
    --line-number-min-width: 2ch;/* Set by JS according to JSON line count */

    --toggle-button-width: 15px;
    --toggle-button-color: #777;
    --toggle-button-hover-color: #fff;
    --toggle-button-padding: 0;

    --copy-button-width: 40px;
    --copy-button-height: 40px;
    --copy-button-color: #777;
    --copy-button-hover-color: #fff;
    --copy-button-padding: 10px;

    --indentation-guides-lines-color: #444;
    --indentation-guides-lines-width: 1px;
    
    --json-tab-size: 4ch;

    /* Theme Colors */
    --json-background: #222;
    --json-foreground: #eee;

    --json-key: #9cdcfe;           
    --json-string: #ce9178;        
    --json-number: #b5cea8;        
    --json-boolean: #569cd6;       
    --json-null: #dcdcaa;  

    --json-brace: #ffd700;         
    --json-bracket: #ffd700;       
    --json-comma: #d4d4d4;         
    --json-colon: #d4d4d4;   
}
/* JSON */
:host .JSONVisualizer {
    min-height: 100%;
    background-color: var(--json-background);
    color: var(--json-foreground);
    font-family: var(--font);
    line-height: var(--line-height);

    .json-line {
        display: flex;
        gap: var(--line-elements-gap);

        .json-line-number {
            min-width: var(--line-number-min-width);
            width: var(--line-number-width);
            flex-grow: 0;
            flex-shrink: 0;
            padding-inline: var(--line-number-padding);
            color: var(--line-number-color);
            background-color: var(--line-number-background);
            text-align: var(--line-number-text-align);
            user-select: none;
        }

        .json-line-toggle-button {
            display: block;
            flex-grow: 0;
            flex-shrink: 0;
            width: var(--toggle-button-width);
            margin: 0;
            padding: var(--toggle-button-padding);
            background: transparent;
            border: none;
            color: var(--toggle-button-color);

            .json-line-toggle-icon, .json-line-toggle-icon svg {
                display: block;
                width: 100%;
                height: 100%;
            }
            &.active .json-line-toggle-icon {
                rotate: -90deg;
            }
            &:hover {
                color: var(--toggle-button-hover-color);
            }
        }

        .json-line-content {
            flex-grow: 1;
            flex-shrink: 1;

            --total-tab-size: calc(var(--level, 0) * var(--json-tab-size, 20px));

            padding-left: var(--total-tab-size);
            white-space: var(--line-white-space);

            background-image: repeating-linear-gradient(
                to right,
                var(--indentation-guides-lines-color) 0,
                var(--indentation-guides-lines-color) var(--indentation-guides-lines-width),
                transparent var(--indentation-guides-lines-width),
                transparent var(--json-tab-size, 20px)
            );
            
            /* limitar la cantidad de líneas con tamaño y posición */
            background-size: round(down, var(--total-tab-size), 1px) 100%;
            background-repeat: no-repeat;
            background-position: 0 0;
        }

        &:not(:has(.json-line-toggle-button)) .json-line-content {
            margin-left: calc(var(--toggle-button-width) + var(--line-elements-gap));
        }
    }
    .json-block[folded] .json-block-content {
        display: none;
    }

    /* Theme */
    span[tags~="brace"]{
        color: var(--json-brace);
    }
    span[tags~="bracket"]{
        color: var(--json-bracket);
    }
    span[tags~="string"]{
        color: var(--json-string);
    }
    span[tags~="key"]{
        color: var(--json-key);
    }
    span[tags~="number"]{
        color: var(--json-number);
    }
    span[tags~="boolean"]{
        color: var(--json-boolean);
    }
    span[tags~="null"]{
        color: var(--json-null);
    }
    span[tags~="comma"]{
        color: var(--json-comma);
    }
    span[tags~="colon"]{
        color: var(--json-colon);
        padding-right: 1ch;
    } 
}
:host([line-numbers="none"]) .JSONVisualizer .json-line .json-line-number {

    display: none;
}
:host([toggle-lines="none"]) .JSONVisualizer .json-line {

    .json-line-toggle-button {
        display: none;
    }
    .json-line-content {

        margin-left: 0;
    }
}
:host([indentation-guides-lines="none"]) .JSONVisualizer .json-line .json-line-content {

    background-image: none;
}

/* Copy button */
:host .copy-button {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;

    position: absolute;
    top: 0;
    right: 0;

    background: transparent;
    border: none;

    padding: var(--copy-button-padding);
    width: var(--copy-button-width);
    height: var(--copy-button-height);
    color: var(--copy-button-color);

    .copy-icon, .copy-icon svg,
    .copy-done-icon, .copy-done-icon svg {
        display: block;
        width: 100%;
        height: 100%;
    }
    .copy-icon, .copy-done-icon {
        grid-row: 1;
        grid-column: 1;
    }
    &:not([copy-done]) .copy-done-icon {
        display: none;
    }
    &[copy-done] .copy-icon {
        display: none;
    }

    &:hover {
        color: var(--copy-button-hover-color);
    }
}
:host([copy-button="none"]) .copy-button  {
    display: none;
}