CodeChatEditor.css

/* Copyright (C) 2023 Bryan A. Jones.

   This file is part of the CodeChat Editor.

   The CodeChat Editor is free software: you can redistribute it and/or modify
   it under the terms of the GNU General Public License as published by the Free
   Software Foundation, either version 3 of the License, or (at your option) any
   later version.

   The CodeChat Editor is distributed in the hope that it will be useful, but
   WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
   FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more
   details.

   You should have received a copy of the GNU General Public License along with
   the CodeChat Editor. If not, see
   [http://www.gnu.org/licenses/](http://www.gnu.org/licenses/).

   # `CodeChatEditor.css` -- Styles for the CodeChat Editor

   This style sheet is used by the HTML generated by
   [CodeChatEditor.mts](../../src/CodeChatEditor.mts).

   TODO: do a much better job of grouping common styles. Rename styles based on
   whether they style a code or doc block.

   ## Import a theme
   Eventually, this will be a user-configurable setting.
 */
@import url('themes/light.css');

/* ## Styles for the entire page layout

   This is used only to store a reused variable value. See the
   [CSS docs](https://drafts.csswg.org/css-variables/). */
:root {
    --top-height: 6.7rem;
    --body-padding: 0.2rem;
}

/* See [box sizing](https://css-tricks.com/box-sizing/) for the following
   technique to use `border-box` sizing. */
html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    /* For box model simplicity, switch the padding and margin. */
    padding: var(--body-padding);
    margin: 0px;
}

/* Provide space at the top of the screen for the filename and TinyMCE menu bar. */
#CodeChat-top {
    height: var(--top-height);
}

/* The rest of the screen is the editor area. Omit this for printing, so the
   text flows across multiple pages. */
@media not print {
    #CodeChat-body {
        height: calc(100vh - var(--top-height) - 2 * var(--body-padding));
        overflow: auto;
    }
}
/* ## Misc styling

 Make the filename compact. */
#CodeChat-filename p {
    margin: 0px;
    white-space: nowrap;
}

/* ## Doc block styling */
.CodeChat-doc {
    /* Use
       [flexbox layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)
       to style doc blocks. The goal of this layout is:

       \<max line number spaces> \<padding to match the ACE editor> \<doc block
       indent> \<doc block contents>

       where:

       - `<div class="CodeChat-ACE-gutter-padding">` contains \<max line number
         spaces>
       - `<div class="CodeChat-ACE-padding">` contains \<padding to match the
         ACE editor>
       - `<div class="CodeChat-doc-indent">` contains \<doc block indent>
       - `<div class="CodeChat-TinyMCE">` contains the \<doc block contents> */
    display: flex;
    padding: 0px 2px 0px 6px;
}

/* Preserve whitespace in the indent of a doc block. */
.CodeChat-doc-indent {
    /* Make this \<doc block indent> not expand or shrink, but take exactly the
       width required by the text (spaces) it contains. */
    flex: 0 0 auto;
    white-space: pre;
    tab-size: 4;
}

/* Reset what CodeMirror messes up for doc blocks. */
.CodeChat-doc-contents {
    font-family: auto;
    line-height: initial;
    white-space: normal;
    flex-grow: 1;
}

/* Remove the editor's border when it's selected, since this hides the cursor
   when the cursor is at the beginning of a line and isn't necessary (the entire
   screen is an editor, not just that region.) Note that the `focus-visible`
   attribute is only visible briefly, but this eliminated that visual flicker. */
.CodeChat-doc-contents.mce-edit-focus,
.CodeChat-doc-contents:focus-visible {
    outline-width: 0px;
}

/* ## Combined code/doc block styling

   <span id="remove-space">Remove space between a code block followed by a doc
   block. Doc block elements typically have top margin and/or padding that
   produce this undesired space; remove it on the first element in the doc
   block, the first element of the first element in the doc block, etc.</span> */
.CodeChat-doc-contents > *:first-child,
.CodeChat-doc-contents > *:first-child > *:first-child,
.CodeChat-doc-contents > *:first-child > *:first-child > *:first-child,
.CodeChat-doc-contents
    > *:first-child
    > *:first-child
    > *:first-child
    > *:first-child,
.CodeChat-doc-contents
    > *:first-child
    > *:first-child
    > *:first-child
    > *:first-child
    > *:first-child {
    margin-top: 0px;
    padding-top: 0px;
}

/* [Remove space](remove-space) between a doc block followed by a code block. */
.CodeChat-doc-contents > *:last-child,
.CodeChat-doc-contents > *:last-child > *:last-child,
.CodeChat-doc-contents > *:last-child > *:last-child > *:last-child,
.CodeChat-doc-contents
    > *:last-child
    > *:last-child
    > *:last-child
    > *:last-child,
.CodeChat-doc-contents
    > *:last-child
    > *:last-child
    > *:last-child
    > *:last-child
    > *:last-child {
    margin-bottom: 0px;
    padding-bottom: 0px;
}

/* Provide nicer defaults for tables. */
.CodeChat-doc-contents table, .CodeChat-doc-contents th, .CodeChat-doc-contents td {
    border-collapse: collapse;
    padding-left: 4px;
    padding-right: 4px;
    border: 1px solid;
}