replpad.css

/*
 * File: %replpad.css
 * Summary: "Aggregated Stylesheet for REPL and Widgets Used"
 * Project: "JavaScript REPLpad for Ren-C branch of Rebol 3"
 * Homepage: https://github.com/hostilefork/replpad-js/
 *
 ******************************************************************************
 *
 * Copyright (c) 2018-2019 hostilefork.com
 *
 * See README.md and CREDITS.md for more information
 *
 * Licensed under the Lesser GPL, Version 3.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * https://www.gnu.org/licenses/lgpl-3.0.html
 *
 ******************************************************************************
 *
 * CSS Style Guide (which this file should follow, someday)
 * https://google.github.io/styleguide/htmlcssguide.html
 *
 * In the evolutionary spirit with which this is being developed, this just
 * kind of merges in segments from all the CSS files of components being used.
 * Better practices will be used down the line once the basic functionality
 * being demosnstrated works.
 */

html, body {
    margin: 0;

    /* https://stackoverflow.com/a/44645580/211160 */
    padding: 0; /* avoid padding that throws off #replpad 100vh calculation */

    /*
     * When rebolsource.net was being designed, HostileFork and earl debated
     * for several hours about the exact not-quite-white and not-quite-black
     * settings to use for the Rebol color scheme.  This was the result,
     * carried forward here--though no one will probably notice.
     */
    color: #333;
    background-color: #fdfdfd;
}
* {
    box-sizing: border-box; /* including because answer above included it */
}


/*
 * PRELOAD ANIMATION
 */

img.center { /* https://stackoverflow.com/a/7055404 */
    display: block;
    margin: 0 auto;
}


/*
 * REPLPAD (MAIN CONSOLE/TUTORIAL WIDGET)
 *
 * It's important that the replpad take up the full vertical space, because
 * it needs to be able to get clicks in big empty space regions in order to
 * focus the cursor...since the input span can be small and hard to click.
 *
 * https://stackoverflow.com/a/7049918  ; sizing to 100%
 * https://stackoverflow.com/a/9183467  ; get clicks on replpad, not children
 * https://stackoverflow.com/q/31982407  ; selections aren't clicks
 */

/* Weird but essential UI trick: the `replpad` div is split in two parts.  The
 * outer container is flipped vertically, and then we flip the inner part
 * vertically to undo the transformation.  This maniacal trick is needed to
 * pull off a cross-browser behavior that makes the scroll bar appear "sticky"
 * wherever the user put it...including to track the latest output if it was
 * "stuck to the bottom":
 *
 * https://stackoverflow.com/a/34345634/
 *
 * A side effect is that this reverses the mouse wheel direction, which has to
 * be undone with JavaScript code in %gui.js - if you have an easier way to do
 * this, then be my guest...but other approaches were not working:
 *
 * https://stackoverflow.com/q/54626982/
 *
 * (Note: It's a sad commentary on the state of browser design that such a
 * convoluted workaround is needed to get such common sense UI behavior.)
 */
#replpad, #replcontainer {
    transform: scale(1,-1);
}

#replcontainer {
    height: 100%;
    overflow: auto;

    /* Part of flip-and-flip-again trick for scroll bar, mentioned above.
     * https://stackoverflow.com/a/34345634/
     */
    display: flex;
    flex-direction: column;

    /* There's not really much point in ever hiding the vertical scroll bar;
     * it will show up in pretty much any session, and that causes a jarring
     * moment where it appears.  It's smoother to just have it.
     *
     * !!! What should the story with horizontal scrolling be?  What about
     * wide divs that are inlined in the content that don't word wrap, or
     * images--if those could be displayed inline?
     */
    /* https://stackoverflow.com/q/13777013/ */
    overflow-y: scroll !important;  /* always show */
    overflow-x: auto;  /* show if necessary (but most spans will word wrap) */
}

#replpad {
    padding: 5px;  /* put a little space around the edge and from splitter */
    padding-bottom: 3em;  /* leave some space at the bottom of the screen */
    flex-grow: 1;  /* allows the replpad to take up the remaining screen space */
}

.escaped {
    cursor: 'none';
    background-color: #D8D8D8;
}

/* Currently everything that's not a .note in the ReplPad is a line.  This is
 * likely to become more fine-grained, but for now input is underneath line
 * and must undo any settings from it that it doesn't like.
 */
.line {
    /* To make the REPL usable on more screen sizes, we expect the console to
     * be word-wrap-capable.
     */
    word-break: break-word;

    /*
     * We don't use <pre> or <textarea> to give flexibility in fonts, colors,
     * and other rendering in the console.  But we still want whitespace to be
     * preserved.  If we go through and convert it all to non-breaking space
     * (`&nbsp;`) naively, the non-breaking nature prevents word-wrap at the
     * word boundaries.
     *
     * https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
     */
    white-space: pre-wrap;  /* break-spaces not available in Chrome ATM */

    /* We'd like the wrapped portions to be able to be distinguished in some
     * way, so we use a so-called "hanging indent" where every wrapped part
     * except the start of the line is indented.
     *
     * Mozilla has some experiments with a `hanging` option on `text-indent`,
     * but Chrome does not support it:
     *
     * https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent
     *
     * We hack it up by first padding all lines, and then giving a special
     * margin assignment to the first letter:
     *
     * https://stackoverflow.com/a/8090502
     */
    /* padding-left: 20px; */  /* !!! Not working :-( */

    font-family: 'Inconsolata', monospace;
    font-weight: 600;  /* semibold */
    color: #404040;  /* lighten a little to weaken the boldness */
}
.line:first-letter {
    /*
     * See above: https://stackoverflow.com/a/8090502
     */
    /* margin-left: -20px; */  /* !!! Not working :-( */
}


.input {
    /*
     * None of these properties seem to work from CSS, so squiggly underlines
     * get put on the contentEditable input, unless you assign explicitly with
     * code, e.g. `span.spellcheck = false;`.  See %gui.js
     */
    /* autocomplete: "off"; */
    /* autocorrect: "off"; */
    /* autocapitalize: "off"; */
    /* spellcheck: "false"; */

    font-weight: normal;
    color: #000000;

    /* The preferred choice for input spans is `display: inline`.  If it were
     * `display: block` then a long prompt or text to the left would make the
     * input unable to use the space underneath that prompt:
     *
     *     YOUR LONG PROMPT HERE>> the input you type when it's long will wrap
     *                             like this with `display: block`
     *
     * A second choice is `display: inline-block`, which looks good at first
     *
     *     YOUR LONG PROMPT HERE>> so far so good for `display: inline-block`
     *
     * But it will jump to the next line if it gets too long for one line:
     *
     *     YOUR LONG PROMPT HERE>>
     *     so far so good for `display: inline-block` but wait, now it's not
     *
     * With `display: inline` we get the desired wrapping...
     *
     * ...HOWEVER...there have been many unfortunate quirks encountered.  One
     * issue is that in Chromium browsers, empty inline elements will not show
     * a cursor.  But since there is an `:empty` CSS selector, those can be
     * set to `inline-block` without it making a difference.
     *
     * But a problem that could not be overcome was that input is mucked up
     * when typing words on android inline contentEditable elements, when using
     * the default "Gboard".  Many people have looked at this with no easy fix:
     *
     * https://github.com/hostilefork/replpad-js/issues/98
     *
     * !!! For now we say `display: inline-block` just to not have conditional
     * Android behavior, to see if that's going to be good enough.
     */
    display: inline-block;

    /* SEE GITHUB ISSUE FOR WHY THIS IS NEEDED AND THE OTHER FAILED ATTEMPTS!
     *
     * https://github.com/hostilefork/replpad-js/issues/37
     *
     * But to try and solve giving people enough of a clickable area to paste
     * at the head of the input we use a *positive* padding on the left with
     * a *negative* margin to compensate.  This makes the clickable area of the
     * input overlap its left neighbor--if any--a little bit without actually
     * disrupting the fixed-font layout.  (Use the browser's CSS inspector
     * to see the effect of adding or removing this.)
     *
     * See also: https://stackoverflow.com/a/8090502
     */
    padding-left: 10px;
    margin-left: -10px;
    /*
     * Note: The RIGHT hand side is handled by the ::after effect, injecting
     * invisible content.  This subverts the "can't have a minimum size"
     * problem without sacrificing space on the right margin (it doesn't seem
     * to parallel the behavior on the left when there's no neighbor).
     */
}

/* Our workaround for "Empty inline elements have no insertion caret"
 * https://stackoverflow.com/q/25897883/
 *
 * (Currently no effect, since we defer to the Android behavior for needing
 * input to be `inline-block` to see how well that goes)
 */
.input:not(.multiline):empty {
    display: inline-block;  /* .input has `display: inline` when not empty */
}

.input:focus {
    /* https://stackoverflow.com/a/2260788 */
    outline: 0px solid transparent;  /* avoid border on contenteditable div */
}

.input:focus::after {  /* ^-- SEE ABOVE remarks on padding-left/margin-left */
    content: "     ";  /* see also https://stackoverflow.com/a/41503905 */

    /* When an input element is focused, there shouldn't be anything under it.
     * So adding padding underneath gives a bigger area for clicking to get
     * the right context menu with Paste, etc. on it.
     */
    padding-bottom: 40px;
}


/* There's no way to disable the key shortcuts for making things bold or italic
 * in contentEditable, short of hooking key codes.  But since <b> and <i> are
 * what's used, you can just style those out.  Likely going to need a
 * process of canonization anyway.
 *
 * https://stackoverflow.com/a/34961662/211160
 */

.input b {
    font-weight: normal;
}
.input i {
    font-style: normal;
}

.input.multiline {
    display: block;
    height: auto;

    /* !!! It's a nice visual effect to have the input give you some space to
     * type in vs. fit the content too exactly vertically.  However, the
     * input would need to be transitioned to a tighter form when not being
     * the active input.  This could be done by having .input.current, or may
     * be something that could be handled with a CSS selector of some sort?
     */
    /* min-height: 100px; */

    padding-top: 4px;
    padding-bottom: 4px;
    border-radius: 4px;
    border: 1px solid transparent;  /* accounts for total size if unfocused */
    text-decoration: none;
}
.input.multiline:focus {
    /* https://stackoverflow.com/a/11426967 */
    border: 1px solid #eee;  /* light rounded box on multiline input */

    /* Temporary workaround so that typing demos in multiline isn't crushed
     * against the bottom of the screen; see remarks on the `height: auto;`
     */
    margin-bottom: 40px;
}
.multiline-arrow {  /* downward pointing arrow at the multiline box */
    color: #aaa;  /* not as light a gray as the rounded multiline border */
    font-size: 75%;  /* percentage of what it would be otherwise */
    vertical-align: bottom;
    padding-bottom: 2px;
    padding-left: 0px;

    /* Don't want this visual hint selected in the transcript by copy/paste
     * https://css-tricks.com/almanac/properties/u/user-select/
     */
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none; /* Firefox all */
    -ms-user-select: none;  /* IE 10+ */
    user-select: none;  /* "future" */

    font-weight: normal;
    font-family: sans-serif;  /* currently it's text, show proportional */
}


/*
 * TUTORIAL CONTENT ITEMS
 *
 * The concept of being on the web is to be a tutorial, and since the REPL is
 * web oriented we're going to try mixing tutorial stuff in with the console
 * itself.  How it will work exactly is not yet determined, but this is for
 * trying out some styled things in the middle
 */
.note {
    background: #fff3d4;
    border-color: #f6b73c;
    border-left-width: 5px;
    border-left-style: solid;

    padding-left: 20px;
    padding-right: 20px;
    padding-top: 2px;
    padding-bottom: 2px;

    margin-bottom: 5px;
    margin-top: 5px;

    font-family: 'Noto Sans', sans-serif;  /* Because it's a note-o :-) */
    font-weight: normal;
}


/*
 * CUSTOM SCROLLBAR
 *
 * The default scroll bar has fairly useless arrows on the top and bottom and
 * is quite wide.  So rather than "just to be cool", using a custom scrollbar
 * reduces the visual noise and saves space.  This uses a riff on "Style 11"
 * from here, changed to match the splitter more closely.
 *
 * https://scotch.io/tutorials/customize-the-browsers-scrollbar-with-css
 *
 * !!! This technique doesn't work on Firefox, but so long as the worst that
 * happens is "you just get the default OS scroll bar" that is fine.
 */

.cm-scroller::-webkit-scrollbar, #replcontainer::-webkit-scrollbar {
    width: 9px;
    background-color: #eee;
}

.cm-scroller::-webkit-scrollbar-track, #replcontainer::-webkit-scrollbar-track {
    /*border-radius: 10px;
    background: rgba(0,0,0,0.1);
    border: 1px solid #ccc;*/  /* colors too dark */

    /* let splitter provide right border */
    border-left: 1px solid #E8E8E8;  /* softer than gray, harder than white */
}

.cm-scroller::-webkit-scrollbar-thumb, #replcontainer::-webkit-scrollbar-thumb {
    border-radius: 9px;
    /*background: linear-gradient(left, #fff, #e4e4e4); */
    background: #ddd;
    color: #ddd;
    border: 1px solid #ddd;  /* match the lines of the watchlist */
}

.cm-scroller::-webkit-scrollbar-thumb:hover, #replcontainer::-webkit-scrollbar-thumb:hover {
    background: #fff;
}

.cm-scoller::-webkit-scrollbar-thumb:active, #replcontainer::-webkit-scrollbar-thumb:active {
    /*background: linear-gradient(left, #22ADD4, #1E98BA); */
}


/*
 * BRIDGE DEMO ADDITIONS
 * This makes card suits show up in dark black and red.
 */

.club, .spade {
    color: black;
}

.diamond, .heart {
    color: red;
}