arepl/media/pythonPreview.css

real-time python scratchpad

/* note that I've designed the CSS to match VSCode CSS */
#results,#error{
    white-space: pre-wrap; /*https://stackoverflow.com/questions/11423300/new-lines-in-text-within-a-div*/
    font-family: Consolas, "Courier New", monospace;
    font-size:14px;
    line-height:19px;
    letter-spacing:0px;
}

#print{
    white-space: pre-wrap; /*https://stackoverflow.com/questions/11423300/new-lines-in-text-within-a-div*/
}

#error{
    color: #f48771;
    margin-bottom: 8px;
}
.vscode-light #error{
    color: #e51400;
}

#footer{
    position:fixed;
    bottom:0px;
    height:20px;
    width:100%;
    border-top: 2px solid grey;
    padding-top:2px;
    background:var(--background-color);
}

/*--------------------------------------------------------------------------------- */
/* from http://caldwell.github.io/renderjson/ with modifications by yours truly     */
/*--------------------------------------------------------------------------------- */

.renderjson{
    font-family: Consolas, "Courier New", monospace;
}

.renderjson a              { text-decoration: none; color:#9cdcfe }
.renderjson .disclosure    { color: #9cdcfe;}
.renderjson .syntax        { color: #9cdcfe; }
.renderjson .keyword       { color: #569cd6; } /* example keyword: null */
.renderjson .object.syntax { color: #9cdcfe; }
.renderjson .array.syntax  { color: #9cdcfe; }
.renderjson .string        { color: #ce9178; }
.renderjson .number        { color: #b5cea8; }
.renderjson .boolean       { color: #569cd6; }
.renderjson .key           { color: #9cdcfe; }

.string.syntax+a{ /* for trimmed string... */
    color:#ce9178;
    white-space: nowrap;
}

/*--------------------------------------------------------------------------------- */
/*                        above, but for light mode                                 */
/*--------------------------------------------------------------------------------- */

.vscode-light .renderjson a              { text-decoration: none; color:#0451a5 }
.vscode-light .renderjson .disclosure    { color: #0451a5; }
.vscode-light .renderjson .syntax        { color: #0451a5; }
.vscode-light .renderjson .keyword       { color: #0000ff; } /* example keyword: null */
.vscode-light .renderjson .object.syntax { color: #0451a5; }
.vscode-light .renderjson .array.syntax  { color: #0451a5; }
.vscode-light .renderjson .string        { color: #a31515; }
.vscode-light .renderjson .number        { color: #09885a; }
.vscode-light .renderjson .boolean       { color: #0000ff; }
.vscode-light .renderjson .key           { color: #0451a5; }

.vscode-light .string.syntax+a{ /* for trimmed string... */
    color:#a31515;
}

/*--------------------------------------------------------------------------------- */
/*                        Twitter                                                   */
/*--------------------------------------------------------------------------------- */

#twitterButton {
    color: rgb(255, 255, 255);
    text-decoration: none solid rgb(255, 255, 255);
    background: rgb(27, 149, 224) none repeat scroll 0% 0% / auto padding-box border-box;
    border-radius: 3px 3px 3px 3px;
    font: normal normal 500 normal 11px / 18px "Helvetica Neue", Arial, sans-serif;
    padding: 3px 8px 3px 6px;
}
#twitterIcon {
    display: inline-block;
    height: 14px;
    position: relative;
    top: 2px;
    white-space: nowrap;
    width: 14px;
    background: rgba(0, 0, 0, 0) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h72v72H0z%22%2F%3E%3Cpath%20class%3D%22icon%22%20fill%3D%22%23fff%22%20d%3D%22M68.812%2015.14c-2.348%201.04-4.87%201.744-7.52%202.06%202.704-1.62%204.78-4.186%205.757-7.243-2.53%201.5-5.33%202.592-8.314%203.176C56.35%2010.59%2052.948%209%2049.182%209c-7.23%200-13.092%205.86-13.092%2013.093%200%201.026.118%202.02.338%202.98C25.543%2024.527%2015.9%2019.318%209.44%2011.396c-1.125%201.936-1.77%204.184-1.77%206.58%200%204.543%202.312%208.552%205.824%2010.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163%200%206.345%204.513%2011.638%2010.504%2012.84-1.1.298-2.256.457-3.45.457-.845%200-1.666-.078-2.464-.23%201.667%205.2%206.5%208.985%2012.23%209.09-4.482%203.51-10.13%205.605-16.26%205.605-1.055%200-2.096-.06-3.122-.184%205.794%203.717%2012.676%205.882%2020.067%205.882%2024.083%200%2037.25-19.95%2037.25-37.25%200-.565-.013-1.133-.038-1.693%202.558-1.847%204.778-4.15%206.532-6.774z%22%2F%3E%3C%2Fsvg%3E") no-repeat scroll 0px 0px / auto padding-box border-box;
    margin-right:2px;
}