414 lines
7.2 KiB
CSS
414 lines
7.2 KiB
CSS
/*
|
|
|
|
Online Python Tutor
|
|
Copyright (C) 2010 Philip J. Guo (philip@pgbovine.net)
|
|
https://github.com/pgbovine/OnlinePythonTutor/
|
|
|
|
This program 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.
|
|
|
|
This program 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 this program. If not, see <http://www.gnu.org/licenses/>.
|
|
|
|
*/
|
|
|
|
|
|
/*
|
|
Color scheme ideas:
|
|
|
|
Current scheme: pastel blue and yellow with a hint of red:
|
|
http://colorschemedesigner.com/#3N32mmmuew0w0
|
|
|
|
Primary Color:
|
|
3D58A2 41507A 142B69 6F89D1 899CD1
|
|
Secondary Color A:
|
|
EBF048 B1B456 989C17 F4F776 F5F798
|
|
Secondary Color B:
|
|
F15149 B55B56 9D1E18 F87D76 F89D99
|
|
|
|
|
|
Alternates:
|
|
|
|
pastel green, yellow, and purple:
|
|
http://colorschemedesigner.com/#2P32PbX--w0w0
|
|
|
|
Primary Color:
|
|
A0FFA0 8ABF8A 34A634 B8FFB8 CBFFCB
|
|
Secondary Color A:
|
|
FFEFA0 BFB68A A69234 FFF3B8 FFF6CB
|
|
Secondary Color B:
|
|
BFABFF 9B90BF 5237A6 CFC0FF DCD1FF
|
|
|
|
|
|
pastel blue and yellow:
|
|
http://colorschemedesigner.com/#0W21TjruJw0w0
|
|
|
|
Primary Color:
|
|
F5C260 B89B64 9F741F FAD388 FADEA6
|
|
Complementary Color:
|
|
4A67A4 49597B 18326A 7C97D1 93A7D1
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
#pyInput {
|
|
font-size: 10pt;
|
|
font-family: Andale mono, monospace;
|
|
/*font-weight: bold;*/
|
|
padding: 8px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
#pyInputPane {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
|
|
table.pyOutputPane {
|
|
padding: 15px;
|
|
}
|
|
|
|
#dataViz {
|
|
margin-left: 30px;
|
|
}
|
|
|
|
table.frameDataViz {
|
|
border-spacing: 0px;
|
|
font-size: 10pt;
|
|
margin-top: 5px;
|
|
margin-left: 15px;
|
|
background-color: #dddddd;
|
|
padding: 5px;
|
|
}
|
|
|
|
table.frameDataViz td.varname {
|
|
text-align: right;
|
|
padding: 5px;
|
|
padding-right: 8px;
|
|
border-right: 1px dashed #888888;
|
|
}
|
|
|
|
table.frameDataViz td.val {
|
|
padding-left: 8px;
|
|
padding-right: 5px;
|
|
|
|
padding-top: 8px;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
div.pyCodeOutputDiv {
|
|
max-width: 550px;
|
|
max-height: 620px;
|
|
overflow: auto;
|
|
margin-left: 30px;
|
|
/*margin-bottom: 4px;*/
|
|
}
|
|
|
|
table.pyCodeOutput {
|
|
font-family: Andale mono, monospace;
|
|
font-size:10pt;
|
|
line-height:1.1em;
|
|
border-spacing: 0px;
|
|
border-top: 1px solid #999999;
|
|
padding-top: 3px;
|
|
border-bottom: 1px solid #999999;p
|
|
margin-bottom: 20px;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
/* don't wrap lines within code output ... FORCE scrollbars to appear */
|
|
table.pyCodeOutput td {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
table.pyCodeOutput .lineNo {
|
|
background-color:#FFFFFF;
|
|
color:#AAAAAA;
|
|
margin:0;
|
|
/* padding:0.2em; */
|
|
padding-right:0.5em;
|
|
text-align:right;
|
|
width:3.1em;
|
|
}
|
|
|
|
tabl.#pyCodeOutput .cod {
|
|
/*font-weight: bold;*/
|
|
margin-left: 3px;
|
|
padding-left: 7px;
|
|
text-align: left; /* necessary or else doesn't work properly in IE */
|
|
}
|
|
|
|
div#editCodeLinkDiv {
|
|
text-align: center;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
#editCodeLinkOnError {
|
|
color: #142B69;
|
|
}
|
|
|
|
|
|
.errorOutput {
|
|
background-color: #F87D76;
|
|
font-size: 12pt;
|
|
padding: 2px;
|
|
line-height: 1.5em;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.warningOutput {
|
|
font-size: 9pt;
|
|
color: #666666;
|
|
}
|
|
|
|
button.bigBtn {
|
|
font-size: 14pt;
|
|
padding: 3px;
|
|
}
|
|
|
|
|
|
|
|
/* VCR control buttons for stepping through execution */
|
|
|
|
.vcrControls {
|
|
margin-top: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.vcrControls button {
|
|
margin-left: 5px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
#pyStdout {
|
|
border: 1px solid #999999;
|
|
font-size: 10pt;
|
|
padding: 4px;
|
|
font-family: Andale mono, monospace;
|
|
}
|
|
|
|
|
|
.vizFrame {
|
|
margin-bottom: 20px;
|
|
/* padding-left: 8px;
|
|
/* border-left: 2px solid #cccccc; */
|
|
}
|
|
|
|
|
|
/* Python data value rendering */
|
|
|
|
.nullObj {
|
|
color: #444444;
|
|
}
|
|
|
|
.numberObj {
|
|
}
|
|
|
|
.boolObj {
|
|
}
|
|
|
|
.stringObj {
|
|
}
|
|
|
|
.customObj {
|
|
font-style: italic;
|
|
font-size: 10pt;
|
|
}
|
|
|
|
table.listTbl {
|
|
border: 0px solid black;
|
|
background-color: #F5F798;
|
|
border-spacing: 0px;
|
|
}
|
|
|
|
table.listTbl td.listHeader {
|
|
padding-left: 5px;
|
|
padding-top: 3px;
|
|
font-size: 8pt;
|
|
color: #666666;
|
|
text-align: left;
|
|
border-left: 1px solid #555555;
|
|
}
|
|
|
|
table.listTbl td.listElt {
|
|
padding-top: 0px;
|
|
padding-bottom: 8px;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
border-bottom: 1px solid #555555; /* must match td.listHeader border */
|
|
border-left: 1px solid #555555; /* must match td.listHeader border */
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
table.tupleTbl {
|
|
border: 1px solid #555555;
|
|
background-color: #dddddd; /* must match .frameDataViz background-color */
|
|
border-spacing: 0px;
|
|
color: black;
|
|
}
|
|
|
|
table.tupleTbl td.tupleHeader {
|
|
padding-left: 5px;
|
|
padding-top: 3px;
|
|
padding-bottom: 0px;
|
|
font-size: 8pt;
|
|
color: #666666;
|
|
text-align: left;
|
|
border-left: 1px dotted #555555;
|
|
}
|
|
|
|
table.tupleTbl td.tupleElt {
|
|
border-left: 1px dotted #555555; /* must match td.tupleHeader border */
|
|
vertical-align: bottom;
|
|
padding: 5px;
|
|
}
|
|
|
|
table.setTbl {
|
|
border: 1px solid black;
|
|
background-color: #F4F776;
|
|
border-spacing: 0px;
|
|
text-align: center;
|
|
}
|
|
|
|
table.setTbl td.setElt {
|
|
padding: 8px;
|
|
}
|
|
|
|
table.dictTbl {
|
|
background-color: #899CD1;
|
|
border-collapse: collapse;
|
|
border-spacing: 2px;
|
|
/*margin: 12px;*/
|
|
}
|
|
|
|
table.dictTbl tr.dictEntry {
|
|
border: 1px #111111 solid;
|
|
}
|
|
|
|
table.dictTbl td.dictKey {
|
|
background-color: #41507A;
|
|
color: #ffffff;
|
|
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
padding-left: 10px;
|
|
padding-right: 6px;
|
|
|
|
text-align: right;
|
|
vertical-align: center;
|
|
}
|
|
|
|
table.dictTbl td.dictVal {
|
|
background-color: #899CD1; /* must match color of table.dictTbl */
|
|
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
padding-right: 10px;
|
|
padding-left: 6px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
|
|
table.classTbl {
|
|
background-color: #FFFFFF;
|
|
border-collapse: collapse;
|
|
border-spacing: 2px;
|
|
}
|
|
|
|
table.classTbl tr.classEntry {
|
|
border: 1px #777777 solid;
|
|
}
|
|
|
|
table.classTbl td.classKey {
|
|
background-color: #222222;
|
|
color: #dddddd;
|
|
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
padding-left: 10px;
|
|
padding-right: 6px;
|
|
|
|
text-align: right;
|
|
vertical-align: center;
|
|
}
|
|
|
|
table.classTbl td.classVal {
|
|
background-color: #FFFFFF; /* must match color of table.classTbl */
|
|
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
padding-right: 10px;
|
|
padding-left: 6px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
|
|
table.instTbl {
|
|
background-color: #FFFFDD;
|
|
border-collapse: collapse;
|
|
border-spacing: 2px;
|
|
}
|
|
|
|
table.instTbl tr.instEntry {
|
|
border: 1px #111111 solid;
|
|
}
|
|
|
|
table.instTbl td.instKey {
|
|
background-color: #41507A;
|
|
color: #ffffff;
|
|
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
padding-left: 10px;
|
|
padding-right: 6px;
|
|
|
|
text-align: right;
|
|
vertical-align: center;
|
|
}
|
|
|
|
table.instTbl td.instVal {
|
|
background-color: #FFFFDD; /* must match color of table.instTbl */
|
|
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
padding-right: 10px;
|
|
padding-left: 6px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
|
|
|
|
.typeLabel {
|
|
font-size: 8pt;
|
|
color: #222222;
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
td.dictKey .typeLabel {
|
|
color: #eeeeee;
|
|
}
|
|
|
|
.circRefLabel {
|
|
font-size: 10pt;
|
|
color: #222222;
|
|
}
|
|
|
|
#footer {
|
|
text-align: center;
|
|
color: #666666;
|
|
font-size: 9pt;
|
|
max-width: 700px;
|
|
border-top: 1px solid #bbbbbb;
|
|
padding-top: 5px;
|
|
margin-top: 10px;
|
|
}
|