squibview.css

/*
 * SquibView CSS
 * (c) M Chatterjee 2025-
 * https://github.com/deftio/squibview
 */

/*
  Core SquibView Styles
  Utilizes CSS Custom Properties for easy theming.
*/

/* Define global CSS variables within the .squibview scope for theming */
.squibview {
    /* Color Palette */
    --squibview-primary-color: #2a57d3;
    --squibview-primary-text-color: white;
    --squibview-secondary-color: #e0e0e0;
    --squibview-secondary-text-color: #255ff1;
    --squibview-border-color: #ccc;
    --squibview-background-color: white; /* Overall background, if needed */
    --squibview-input-background-color: white;
    --squibview-output-background-color: white;
    --squibview-table-header-bg: #f0f0f0;
    --squibview-code-block-bg: #f7f7f7;
    --squibview-caret-color: red;

    /* Line Numbers */
    --squibview-gutter-bg: var(--squibview-background-color);
    --squibview-gutter-fg: #666;
    --squibview-gutter-border: var(--squibview-border-color);
    --squibview-gutter-width: 50px;
    --squibview-gutter-padding: 8px;
    --squibview-gutter-font-family: var(--squibview-font-family-monospace);
    --squibview-gutter-font-size: var(--squibview-font-size-input);

    /* Typography */
    --squibview-font-family-monospace: monospace;
    --squibview-font-size-base: 1rem; /* Base for relative units */
    --squibview-font-size-input: 1em; /* Relative to .squibview-input's parent or base */
    --squibview-font-size-title: 1.5em; /* Relative to .squibview-title's parent or base */
    --squibview-button-font-size: 1rem;


    /* Spacing & Sizing */
    --squibview-padding-base: 1em;
    --squibview-padding-controls: 0.2em 0;
    --squibview-button-padding: 0.4em 0.7em;
    --squibview-button-margin-right: 0.5em;
    --squibview-table-cell-padding: 0.5em;
    --squibview-code-block-padding: 0.5em;

    /* Borders & Radius */
    --squibview-border-width: 2px;
    --squibview-border-style: solid;
    --squibview-border-radius-main: 8px;
    --squibview-border-radius-button: 4px;
    --squibview-button-active-border-width: 1px;


    /* SquibView main container layout */
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--squibview-background-color);
}

/* Control bar for view switching and other actions */
.squibview-controls {
    padding: var(--squibview-padding-controls);
    text-align: left;
}

.squibview-controls button {
    border-radius: var(--squibview-border-radius-button);
    background-color: var(--squibview-primary-color);
    border: none; /* Default button state has no border */
    color: var(--squibview-primary-text-color);
    padding: var(--squibview-button-padding);
    cursor: pointer;
    font-size: var(--squibview-button-font-size);
    margin-right: var(--squibview-button-margin-right);
}

/* Active state for control buttons */
.squibview-controls button.active {
    background-color: var(--squibview-secondary-color);
    border: var(--squibview-button-active-border-width) var(--squibview-border-style) var(--squibview-primary-color);
    color: var(--squibview-secondary-text-color);
}

/* Editor area containing input and output panels */
.squibview-editor {
    display: flex;
    flex: 1; /* Allows editor to fill available vertical space */
    min-height: 0; /* Important for Firefox flexbox behavior to allow shrinking */
}

/* Input (source) and Output (rendered) panels common styling */
.squibview-input,
.squibview-output {
    height: 100%;
    box-sizing: border-box; /* Includes padding and border in the element's total width and height */
    border: var(--squibview-border-width) var(--squibview-border-style) var(--squibview-border-color);
}

/* Styling for the Markdown/source input textarea */
.squibview-input {
    padding: var(--squibview-padding-base);
    font-family: var(--squibview-font-family-monospace);
    font-size: var(--squibview-font-size-input);
    background-color: var(--squibview-input-background-color);
    resize: none; /* Typically, resizing is handled by SquibView's layout */
}

/* Styling for the rendered HTML output panel */
.squibview-output {
    padding: var(--squibview-padding-base);
    overflow: auto; /* Allows scrolling for content that exceeds panel dimensions */
    background-color: var(--squibview-output-background-color);
}

/* Proper paragraph spacing in rendered output */
.squibview-output p {
    margin-top: 0;
    margin-bottom: 1em; /* Standard paragraph spacing */
}

/* Remove extra margin from first and last paragraphs */
.squibview-output p:first-child {
    margin-top: 0;
}

.squibview-output p:last-child {
    margin-bottom: 0;
}

/* Proper spacing for headings */
.squibview-output h1,
.squibview-output h2,
.squibview-output h3,
.squibview-output h4,
.squibview-output h5,
.squibview-output h6 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.2;
}

/* First heading doesn't need top margin */
.squibview-output h1:first-child,
.squibview-output h2:first-child,
.squibview-output h3:first-child,
.squibview-output h4:first-child,
.squibview-output h5:first-child,
.squibview-output h6:first-child {
    margin-top: 0;
}


/* Fix for list bullets appearing in margin/gutter (Issue #1 v1.0.20)
   Problem: Default browser list styling places bullets outside the content box.
   Solution: Explicitly set padding for lists to ensure bullets remain within
   the content area while maintaining proper alignment and readability. */
.squibview-output ul,
.squibview-output ol {
    padding-left: 2em;      /* Space for bullets + indent */
    margin-left: 0;         /* Reset browser default margin */
    margin-top: 0.5em;      /* Consistent vertical spacing */
    margin-bottom: 0.5em;
}

/* Nested lists need only their natural indent, not additional margin */
.squibview-output li > ul,
.squibview-output li > ol {
    margin-top: 0.25em;     /* Tighter spacing for nested lists */
    margin-bottom: 0.25em;
}

/* Ensure consistent spacing for list items */
.squibview-output li {
    padding-left: 0.25em;   /* Small gap after bullet for readability */
}

/* Utility class to hide elements */
.squibview-hidden {
    display: none !important; /* !important is used here to ensure override */
}

/* Fix double borders in split view */
.squibview-editor[data-view="split"] .squibview-input,
.squibview-editor[data-view="split"] .squibview-source-panel .squibview-input {
    border-right: none;
}

/* Styling for tables within the rendered output */
.squibview-output table {
    border-collapse: collapse; /* Clean table borders */
    width: 100%;
    margin-bottom: var(--squibview-padding-base); /* Space below tables */
}

.squibview-output th,
.squibview-output td {
    border: 1px var(--squibview-border-style) var(--squibview-border-color); /* Cell borders */
    padding: var(--squibview-table-cell-padding);
    text-align: left;
}

.squibview-output th {
    background: var(--squibview-table-header-bg); /* Header background color */
}

/* Styling for preformatted code blocks within the rendered output */
.squibview-output pre code {
    display: block;
    padding: var(--squibview-code-block-padding);
    background: var(--squibview-code-block-bg);
    border-radius: var(--squibview-border-radius-button); /* Consistent with button radius */
}

/* Styling for contenteditable elements (e.g., rendered output if editable) */
[contenteditable] {
    outline: 0px solid transparent; /* Removes default focus outline */
    caret-color: var(--squibview-caret-color); /* Custom caret color */
}

/* Styling for the optional title section */
.squibview-title {
    padding: 0 0; /* Minimal vertical padding by default */
    font-size: var(--squibview-font-size-title);
    text-align: left;
    /* color: can be set by a variable if needed e.g. var(--squibview-title-text-color) */
}

/* 
  Mermaid Diagram Specific Styles
  Scoped to within SquibView's output to avoid global conflicts.
*/

/* Suppress default Mermaid error messages/icons within SquibView output */
.squibview-output .mermaid .error-icon,
.squibview-output .mermaid text.error-text {
    display: none;
}

/* 
  GeoJSON/TopoJSON Map Container Styles
  Scoped to within SquibView's output to avoid global conflicts.
*/
.squibview-output .geojson-container,
.squibview-output .topojson-container {
    border: 1px solid var(--squibview-border-color);
    border-radius: 4px;
    margin: 1em 0;
    min-height: 300px;
    width: 100%;
    position: relative;
    background-color: var(--squibview-background-color);
}

/* Styling for containers before rendering (showing loading state) */
.squibview-output .geojson-container:not([data-initialized]),
.squibview-output .topojson-container:not([data-initialized]) {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-style: italic;
}

.squibview-output .geojson-container:not([data-initialized])::before,
.squibview-output .topojson-container:not([data-initialized])::before {
    content: "Loading map...";
}

/* Error state styling */
.squibview-output .geojson-container[data-initialized="error"],
.squibview-output .topojson-container[data-initialized="error"] {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff5f5;
    border-color: #fc8181;
}

/* 
  STL 3D Model Container Styles
  Scoped to within SquibView's output to avoid global conflicts.
*/
.squibview-output .stl-container {
    border: 1px solid var(--squibview-border-color);
    border-radius: 4px;
    margin: 1em 0;
    min-height: 300px;
    width: 100%;
    position: relative;
    background-color: var(--squibview-background-color);
    overflow: hidden; /* Prevent 3D canvas overflow */
}

/* Styling for STL containers before rendering */
.squibview-output .stl-container:not([data-initialized]) {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-style: italic;
}

.squibview-output .stl-container:not([data-initialized])::before {
    content: "Loading 3D model...";
}

/* Error state styling for STL */
.squibview-output .stl-container[data-initialized="error"] {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff5f5;
    border-color: #fc8181;
}

/* Ensure Three.js canvas fits container properly */
.squibview-output .stl-container canvas {
    width: 100% !important;
    height: 100% !important;
    border-radius: 3px; /* Slightly less than container to avoid border overlap */
}

/*
  Diff View Styles
  For displaying source diffs between revisions
*/

/* Diff container */
.squibview-diff {
    font-family: var(--squibview-font-family-monospace);
    font-size: 0.9em;
    line-height: 1.4;
    border: 1px solid var(--squibview-border-color);
    border-radius: var(--squibview-border-radius-button);
    background-color: var(--squibview-background-color);
    overflow: auto;
    max-height: 600px;
    margin: 1em 0;
}

/* Diff header with metadata */
.squibview-diff .diff-header {
    background-color: var(--squibview-table-header-bg);
    padding: 0.5em 1em;
    border-bottom: 1px solid var(--squibview-border-color);
    font-size: 0.9em;
    color: #666;
}

.squibview-diff .diff-stats {
    display: flex;
    gap: 1em;
    margin-top: 0.25em;
    font-size: 0.8em;
}

.squibview-diff .diff-stats .stat {
    display: flex;
    align-items: center;
    gap: 0.25em;
}

.squibview-diff .diff-stats .stat.additions {
    color: #28a745;
}

.squibview-diff .diff-stats .stat.deletions {
    color: #dc3545;
}

.squibview-diff .diff-stats .stat.modifications {
    color: #ffc107;
}

/* Diff content area */
.squibview-diff .diff-content {
    padding: 0;
}

/* Individual diff lines */
.squibview-diff .diff-line {
    display: flex;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    min-height: 1.4em;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Line numbers */
.squibview-diff .diff-line-number {
    display: inline-block;
    width: 3.5em;
    padding: 0.1em 0.5em;
    text-align: right;
    background-color: var(--squibview-table-header-bg);
    border-right: 1px solid var(--squibview-border-color);
    color: #666;
    user-select: none;
    flex-shrink: 0;
}

/* Line content */
.squibview-diff .diff-content-text {
    padding: 0.1em 0.5em;
    flex: 1;
    min-width: 0; /* Allow content to shrink */
}

/* Diff line types */
.squibview-diff .diff-line.diff-added {
    background-color: #e6ffed;
}

.squibview-diff .diff-line.diff-added .diff-line-number {
    background-color: #c3e6cd;
    color: #28a745;
}

.squibview-diff .diff-line.diff-added .diff-content-text {
    border-left: 3px solid #28a745;
}

.squibview-diff .diff-line.diff-removed {
    background-color: #ffeef0;
}

.squibview-diff .diff-line.diff-removed .diff-line-number {
    background-color: #f8c6cc;
    color: #dc3545;
}

.squibview-diff .diff-line.diff-removed .diff-content-text {
    border-left: 3px solid #dc3545;
}

.squibview-diff .diff-line.diff-unchanged {
    background-color: transparent;
}

.squibview-diff .diff-line.diff-unchanged .diff-line-number {
    background-color: var(--squibview-table-header-bg);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .squibview-diff {
        font-size: 0.8em;
        max-height: 400px;
    }
    
    .squibview-diff .diff-line-number {
        width: 2.5em;
        padding: 0.1em 0.25em;
    }
    
    .squibview-diff .diff-stats {
        flex-direction: column;
        gap: 0.25em;
    }
}

/*
  Line Numbers Styles
  For displaying line numbers in source view
*/

/* Source panel wrapper when line numbers are enabled */
.squibview-source-panel {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
}

/* Line gutter styling */
.squibview-line-gutter {
    flex-shrink: 0;
    width: var(--squibview-gutter-width);
    background: var(--squibview-gutter-bg);
    color: var(--squibview-gutter-fg);
    border-right: 1px solid var(--squibview-gutter-border);
    overflow: hidden;
    user-select: none;
    font-family: var(--squibview-gutter-font-family);
    font-size: var(--squibview-gutter-font-size);
    line-height: var(--squibview-line-height, 1.5);
    padding: var(--squibview-padding-base) 0;
}

/* Individual line number styling */
.squibview-gutter-line {
    text-align: right;
    padding: 0 var(--squibview-gutter-padding);
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}

/* Adjust input when line numbers are shown */
.squibview-source-panel .squibview-input {
    flex: 1;
    border-left: none;
    margin: 0;
    border-radius: 0;
}

/* Mirror for line measurement (hidden) */
.squibview-line-mirror {
    position: absolute;
    top: -9999px;
    left: -9999px;
    visibility: hidden;
    pointer-events: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Ensure consistent line height between gutter and textarea */
.squibview-line-gutter,
.squibview-input {
    line-height: var(--squibview-line-height, 1.5);
}

/* Dark mode support (when parent has dark theme) */
.squibview.dark .squibview-diff,
.squibview[data-theme="dark"] .squibview-diff {
    background-color: #2d3748;
    border-color: #4a5568;
    color: #e2e8f0;
}

.squibview.dark .squibview-diff .diff-header,
.squibview[data-theme="dark"] .squibview-diff .diff-header {
    background-color: #4a5568;
    border-color: #718096;
    color: #cbd5e0;
}

.squibview.dark .squibview-diff .diff-line-number,
.squibview[data-theme="dark"] .squibview-diff .diff-line-number {
    background-color: #4a5568;
    border-color: #718096;
    color: #a0aec0;
}

.squibview.dark .squibview-diff .diff-line.diff-added,
.squibview[data-theme="dark"] .squibview-diff .diff-line.diff-added {
    background-color: #22543d;
}

.squibview.dark .squibview-diff .diff-line.diff-added .diff-line-number,
.squibview[data-theme="dark"] .squibview-diff .diff-line.diff-added .diff-line-number {
    background-color: #2f855a;
    color: #68d391;
}

.squibview.dark .squibview-diff .diff-line.diff-removed,
.squibview[data-theme="dark"] .squibview-diff .diff-line.diff-removed {
    background-color: #742a2a;
}

.squibview.dark .squibview-diff .diff-line.diff-removed .diff-line-number,
.squibview[data-theme="dark"] .squibview-diff .diff-line.diff-removed .diff-line-number {
    background-color: #e53e3e;
    color: #feb2b2;
}

/*
  Inline Diff Styles
  For displaying diffs inline with additions and deletions marked within the text
*/

.squibview-diff-inline {
    font-family: var(--squibview-font-family-monospace);
    font-size: 0.9em;
    line-height: 1.6;
    border: 1px solid var(--squibview-border-color);
    border-radius: var(--squibview-border-radius-button);
    background-color: var(--squibview-background-color);
    margin: 1em 0;
    max-height: 600px;
    overflow: auto;
}

.squibview-diff-inline .diff-inline-header {
    background-color: var(--squibview-table-header-bg);
    padding: 0.75em 1em;
    border-bottom: 1px solid var(--squibview-border-color);
    font-size: 0.9em;
    color: #666;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5em;
}

.squibview-diff-inline .diff-inline-stats {
    font-size: 0.85em;
    font-weight: 500;
}

.squibview-diff-inline .diff-inline-content {
    padding: 1em;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Inline diff highlighting */
.squibview-diff-inline .diff-inline-added {
    background-color: #cfe2ff;
    color: #004085;
    padding: 0.1em 0.2em;
    border-radius: 3px;
    font-weight: 500;
}

.squibview-diff-inline .diff-inline-removed {
    background-color: #f8d7da;
    color: #721c24;
    padding: 0.1em 0.2em;
    border-radius: 3px;
    text-decoration: line-through;
    font-weight: 500;
}

/* Responsive adjustments for inline diff */
@media (max-width: 768px) {
    .squibview-diff-inline {
        font-size: 0.8em;
        max-height: 400px;
    }
    
    .squibview-diff-inline .diff-inline-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .squibview-diff-inline .diff-inline-content {
        padding: 0.75em;
    }
}

/* Dark mode support for inline diff */
.squibview.dark .squibview-diff-inline,
.squibview[data-theme="dark"] .squibview-diff-inline {
    background-color: #2d3748;
    border-color: #4a5568;
    color: #e2e8f0;
}

.squibview.dark .squibview-diff-inline .diff-inline-header,
.squibview[data-theme="dark"] .squibview-diff-inline .diff-inline-header {
    background-color: #4a5568;
    border-color: #718096;
    color: #cbd5e0;
}

.squibview.dark .squibview-diff-inline .diff-inline-added,
.squibview[data-theme="dark"] .squibview-diff-inline .diff-inline-added {
    background-color: #2b6cb0;
    color: #bee3f8;
}

.squibview.dark .squibview-diff-inline .diff-inline-removed,
.squibview[data-theme="dark"] .squibview-diff-inline .diff-inline-removed {
    background-color: #c53030;
    color: #fed7d7;
}

/* Dark mode for line numbers */
.squibview.dark .squibview-line-gutter,
.squibview[data-theme="dark"] .squibview-line-gutter {
    background-color: #2d3748;
    color: #a0aec0;
    border-right-color: #4a5568;
}