better-think-editor/dist/think-editor.css

:root {
    --spacing: 1em;
    --quarter-spacing: calc(0.25 * var(--spacing));
    --half-spacing: calc(0.5 * var(--spacing));
    --double-spacing: calc(2 * var(--spacing));

    --radius: 0.2em;

    --editor-size: 50%;

    --background: hsl(70,100%,95%);
    --default-background: white;
    --color: black;
    --button-bg: #ddd;
}

@media (prefers-color-scheme: dark) {
  body {
    --background: hsl(70,100%,8%);
    --default-background: black;
    --color: white;
    --button-bg: #333;
  }
}

* {
    box-sizing: border-box;
}

body {
    color-scheme: light dark;
    font-family: sans-serif;
    
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
    margin: 0;
    padding: var(--half-spacing);

    background: var(--background);
    color: var(--color);
    
    & > header {
        padding: var(--spacing);
        & h1 {
            margin: 0;
        }
    }

}


header {
  & #think-controls {
    display: flex;
    gap: var(--spacing);
    margin: 0;
  }
}

#editor-size-input + output {
  width: 5em;
}

.file-path {
  font-family: monospace;
}


button {
    border: thin solid currentColor;
    --button-background: var(--button-bg);
    --highlight: white;
    --highlight-amount: 0%;
    --darken: black;
    --darken-amount: 0%;
    background-color: 
      color-mix(in oklab, 
        color-mix(in oklab,
          var(--button-background), 
          var(--darken) var(--darken-amount)
        ),
        var(--highlight) var(--highlight-amount)
      );

    &:focus {
      --highlight-amount: 40%;
    }

    &:hover {
      --highlight-amount: 60%;
    }
    
    &:active {
      --highlight-amount: 0%;
      --darken-amount: 10%;
    }
}

button[value="cancel"] {
  --button-background: color-mix(in oklab, var(--button-bg), var(--background) 50%);
}

input:not([type="hidden"]) ~ button {
    border-radius: 0 var(--radius) var(--radius) 0;
    border-left: none;
    border-left: none;
}

input {
    border: thin solid currentColor;
}


.field {
    display: flex;
    gap: var(--quarter-spacing);
}

.think-editor {
    display: grid;
    gap: var(--spacing);
    height: 100%;
    overflow: hidden;
    --col-1-width: auto;
    grid-template: 
        "nav editor preview" min-content 
        "log editor preview" 1fr
        / var(--col-1-width) var(--editor-size) var(--preview-size)
    ;

    
    & > * {
        border: thin solid currentColor;
        padding: var(--quarter-spacing);
    }
    
    &:has(#main-nav[open], #log[open]) {
        --col-1-width: 20em;
    }
    
    & > #main-nav {
        grid-area: nav;
    }
    & > #log {
        grid-area: log;
        width: 100%;
        overflow: auto;
    }

    & .dragging {
      background: red;
    }

    & summary {
      background: color-mix(in oklab, var(--background), var(--color) 10%);
    }
    
    & > #main-nav > nav {
        display: flex;
        flex-direction: column;
        gap: var(--spacing);

        & #file-tree {
            margin: 0;
            overflow: auto;
            flex-grow: 1;

            & > li {
                margin-top: var(--half-spacing);

                & > a {
                    text-decoration: none;
                }
            }

            & .dir {
                font-weight: bold;
            }

            & .dir + .file {
                margin-top: var(--spacing);
            }
        }

        & form {
            display: grid;
            grid-template-columns: 1fr 6em;
            align-content: start;
            align-items: start;
        }

        & #jj-buttons {
          display: flex;
          justify-content: end;
          gap: var(--spacing);
          margin: 0;

          & #start-commit-button {
            width: 10em;
          }
        }

        & #make-log {
            & > pre {
                max-width: 20em;
                overflow: auto;
            }
        }
    }

    & #editor {
        overflow-x: hidden;
        flex-grow: 1;
        flex-basis: var(--editor-size);
        max-height: 85vh;
        grid-area: editor;
        
        & #editor-controls {
            position: sticky;
            top: 0;
            display: flex;
            gap: var(--spacing);
            justify-content: space-between;
            border-bottom: thin solid currentColor;

            & > details {
                text-align: right;

                & > summary {
                    user-select: none;
                }

                & button {
                    margin: var(--half-spacing) 0;
                }
            }
            background: var(--background);
            z-index: 1;
        }

        & code-editor {
            background: var(--default-background);
            display: block;
        }
    }

    & #preview {
        display: flex;
        flex-direction: column;
        grid-area: preview;

        background: white;

        &[open] {
          flex-grow: 1;
          flex-shrink: 1;
          flex-basis: calc(100% - var(--editor-size));
        }

        & > summary {
          text-align: right;
        }
        
        & > iframe {
            width: 100%;
            height: calc(100% - 3em);
            border: none;
        }
        
        &[closed] > iframe {
            display: none;
        }
    }
}

#file-form {
    overflow: auto;
    max-width: 100%;
}

dialog h2:first-child {
  margin-top: 0;
}

#jj-status {
  max-height: 10em;
  width: 100%;
  overflow: auto;
}

dialog textarea {
  width: 100%;
  height: 6em;
  resize-x: none;
}

dialog p:last-child {
  display: flex;
  justify-content: end;
  gap: var(--spacing);
}

@media (max-width: 100ch) {
    html {
        font-size: min(3vw, 16px);
    }
    body {
      grid-template-columns: calc(100svw - var(--spacing));
    }
    
    #editor-size {
      display: none;
    }

    .think-editor {
        overflow: visible;
        grid-template:
          "nav"
          "log"
          "editor"
          "preview"
        ;

        padding-left: var(--double-spacing);

        & > * ~ * {
            border-top: medium solid #888;
            margin-top: var(--spacing);
        }

        & nav {
            flex-direction: row;
            flex-wrap: wrap;

            & form {
                flex-grow: 1;
            }

            & #file-tree {
                max-height: 30svh;
            }
        }

        & #editor {
            overflow: auto;
            max-height: revert;
            & #code-editor {
                max-width: none;
            }
        }

        & #preview {
            height: 100vh;
        }
    }
}