CodeChat_client.css - Style sheet for the CodeChat Client

This is used only to store a reused variable value. See https://drafts.csswg.org/css-variables/.

:root {
    --status-height: 1rem;
    --body-padding: 8px;
}
 

See 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;

The default of transparent makes VS Code’s black show up and confuse everything. For now, make it white.

    background: white;
}
 

This div contains the splitter plus both split divs.

#splitter {

Auto-size the splitter to be the height of the screen except for the status bar and body padding. See calc.

    height: calc(100vh - var(--status-height) - 2 * var(--body-padding));
}
 

An iframe containing the HTML output by the renderer.

#output {
    width: 100%;
    height: 100%;
    border: none;
}
 

The title for the top of the following div.

#build_heading {
    margin-top: 0px;
    margin-bottom: 2px;
}
 

A div containing the build messages and errors.

#build_contents {
    overflow: auto;

Not setting the width and height prevents the scroll bars from appearing.

    height: 100%;
    width: 100%;
}
 

The build messages and error messages divs.

#build,
#errors {

Build output is console text.

    font-family: monospace;

Wrap long lines for convenience.

    white-space: pre-wrap;
}

#errors {
    color: red;
}
 

The status bar at the bottom of the screen.

#status_div {
    height: var(--status-height);
    border-top: 1px solid;
    padding-top: 2px;
}
 

Make the status right aligned to the right.

#status_right {
    float: right;
}
 

The build progress bar.

#build_progress {
    display: none;
}
 

Classes for the errors/warning text in the status bar.

.have_errors {
    background-color: red;
}

.have_warnings {
    background-color: sandybrown;
}
 

Class to use for the output iframe when a build is in progress.

.building {
    opacity: 0.5;
}