littlejsengine/examples/style.css

LittleJS - Tiny and Fast HTML5 Game Engine

html, body
{
    height: 100%;
    display: flex;
    flex-direction: column;
}
#container1
{
    height: 100%;
    display: flex;
    gap: 4px;
}
#container2
{
    display: flex;
    flex-direction: column;
    gap: 4px;
}
#iframeContainer
{
    border: 2px solid;
    background: #000;
}
iframe
{
    width: 100%;
    height: 100%;
    border: none;
}
#selectExample
{
    flex-grow: 1;
    min-height: 100px;
}
#divTextareas
{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 300px;
}
.CodeMirror,
#textareaCode
{
    flex-grow: 1;
    resize: none;
    color: #fff;
    background: #000;
}
#textareaConsole,
#textareaError
{
    flex-grow: .3;
    resize: none;
    display: none;
    color:#f22;
    background: #111;
}
#textareaConsole
{
    color: #ff0;
}
#container3
{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
#titleInfo
{
    margin: 5px;
    text-align: center;
    font-size: 40px;
    font-weight: bold;
}
#exampleInfo
{
    margin: 0px;
    text-align: center;
    font-size: 20px;
}
#exampleLink
{
    margin: 0px;
    text-align: center;
    font-size: 15px;
    display: inline-block;
    align-self: center;
    font-style: italic;
}
select
{
    color:#fff;
    background-color: #111;
    width:100%;
}
hr
{
    border: 1px solid #555;
    margin:9px;
}
button
{
    color:#fff;
    background-color: #111;
    border: 1px solid #555;
    margin:0px 4px;
    padding: 2px 8px;
    cursor: pointer;
}
button:disabled
{
    color: #aaa;
    background-color: #666;
    border-color: #666;
}
input[type='checkbox']:disabled
{
    opacity: 0.5;
}
.error-line
{
    background-color: #f004 !important;
}
.nowrap
{
    white-space:nowrap;
}

/*  LittleJS CodeMirror Theme */
.cm-s-littlejs.CodeMirror { background: #080808; color: #aef; }
.cm-s-littlejs div.CodeMirror-selected { background: #068; }
.cm-s-littlejs .CodeMirror-gutters {background: #222; border-right: 0px;}
.cm-s-littlejs .CodeMirror-linenumber { color: #aaa; }
.cm-s-littlejs .CodeMirror-cursor { border-left: 2px solid #fff; }
.cm-s-littlejs .cm-keyword { color: #6e1; }
.cm-s-littlejs .cm-def { color: #fab; }
.cm-s-littlejs .cm-operator { color: #1be; }
.cm-s-littlejs .cm-property,
.cm-s-littlejs span.cm-variable,
.cm-s-littlejs span.cm-variable-2,
.cm-s-littlejs span.cm-variable-3 { color: #ddd; }
.cm-s-littlejs .cm-builtin,
.cm-s-littlejs .cm-number { color: #e15; }
.cm-s-littlejs .cm-comment { color:#888; font-style:italic; }
.cm-s-littlejs .cm-string,
.cm-s-littlejs .cm-string-2 { color:#fda; } 
.cm-s-littlejs .CodeMirror-matchingbracket { background-color: #381 !important; }