* { box-sizing: border-box; }
body { margin:0px; background-color:#EEE; color:#999; }
button::-moz-focus-inner { border-style:none; }
button { border:none; height:2.2rem; line-height:0; vertical-align:middle; color:inherit; background-color:inherit; cursor:pointer; border-radius:6px; }
button:hover{ color:#000; background-color:#ccc; }
button[id^=tab] { font-size:1.1rem; border:1px solid #AAA; border-bottom:none; border-radius:6px 6px 0 0; box-shadow:1px 0px 3px 1px #BBB; }
span#htmlCode { float:left!important;padding-top:5px;margin-right:-11px;margin-left:3px;color:#66F;font-size:1.6rem; }
button#tabHtml { width:3.5rem; margin:2px 0 0 15px;}
button#tabCss { width:3.2rem; margin:2px 0 0 2px;}
button#tabJs { width:2.8rem; margin:2px 0 0 2px;}
button#Stack { margin:0 0 2px 3px; padding:5px 5px; }
button#Tema { padding:8px 9px; }
button#Run { color:#fff; background-color:#5B5; font-size:2.3rem; padding:0px 14px; }
button#Run:hover { background-color:#fff; color:#394; }
select[multiple] {
padding-top: 2px;
margin: 6px 0 0 6px;
height: 1.4rem;
vertical-align: top;
}
select[multiple]:focus, select[multiple]:active {
min-height: 10rem;
height: auto;
}
select[multiple] option { font-size: 0.9rem; }
#Contenedor { z-index: -1; }
#dragbar{
position:absolute;
cursor: col-resize;
z-index:3;
width:0;
}
#shield {
display:none;
top:0;
left:0;
width:100%;
position:absolute;
height:100%;
z-index:4;
}
#framesize {
float:right!important;
padding:8px 13px;
font-family:monospace;
color:#F66;
}
body.darktheme #framesize { color:#ccc;}
#Contenedor {
background-color:#f1f1f1;
width:100%;
overflow:auto;
bottom:0;
height:auto;
position:absolute;
top:2.4rem;
}
#ContenedorTxta, #ContenedorIfr {
float:left;
height:100%;
width:50%;
}
#divTxta, #divIframe {
height:100%;
width:100%;
padding-bottom:6px;
padding-top:1px;
}
#divTxta {
padding-left:0px;
padding-right:5px;
}
#divIframe {
padding-left:0px;
padding-right:6px;
}
#wrapHtml, #wrapCss, #wrapJs, #wrapIframe {
width:100%;
height:100%;
background-color: #fff;
position:relative;
box-shadow:1px 2px 4px rgba(0,0,0,0.20), 0 1px 2px rgba(0,0,0,0.25);
}
#txtaHtml {
visibility:hidden;
}
#iframeResult {
height:100%;
width:100%;
border:none;
}
#ContenedorTxta.horizontal,#ContenedorIfr.horizontal{
height:50%;
float:none;
width:100%;
}
#divTxta.horizontal{
height:100%;
padding-left:0;
padding-right:6px;
}
#divIframe.horizontal{
height:100%;
padding-right:6px;
padding-bottom:6px;
padding-left:0px;
}
#Contenedor.horizontal{
min-height:200px;
margin-left:0;
}
.dino {
display:none;
}
body.darktheme {
background-color:rgb(40, 44, 52);
background-color:#666;
color:#ddd;
}
body.darktheme #Contenedor {
background-color:#666;
}
.CodeMirror.cm-s-default {
color:black;
line-height:normal;
padding: 4px;
height:100%;
width:100%;
}
.CodeMirror {
font-family: monospace;
height: 300px;
}
.CodeMirror-lines {
padding: 4px 0;
}
.CodeMirror pre {
padding: 0 4px;
}
.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
background-color: white;
}
.CodeMirror-gutters {
border-right: 1px solid #ccc;
background-color: #f7f7f7;
white-space: nowrap;
}
body.darktheme .CodeMirror-gutters { background-color: #7f7f7f; }
.CodeMirror-linenumbers {}
.CodeMirror-linenumber {
font-size:93%;
padding-right:3px;
min-width: 15px;
text-align: right;
color: #999;
white-space: nowrap;
}
body.darktheme .CodeMirror-linenumber { color: #eee; }
.CodeMirror-guttermarker { color: black; }
.CodeMirror-guttermarker-subtle { color: #999; }
.CodeMirror-cursor {
border-left: 2px solid black;
}
body.darktheme .CodeMirror-cursor {
border-left: 2px solid white;
}
.CodeMirror div.CodeMirror-secondarycursor {
border-left: 1px solid silver;
}
.cm-fat-cursor .CodeMirror-cursor {
width: auto;
border: 0 !important;
background: #7e7;
}
.cm-fat-cursor div.CodeMirror-cursors {
z-index: 1;
}
.cm-animate-fat-cursor {
width: auto;
border: 0;
animation: blink 1.06s steps(1) infinite;
background-color: #7e7;
}
.CodeMirror-overwrite .CodeMirror-cursor {}
.cm-tab { display: inline-block; text-decoration: inherit; }
.CodeMirror-rulers {
position: absolute;
left: 0; right: 0; top: -50px; bottom: -20px;
overflow: hidden;
}
.CodeMirror-ruler {
border-left: 1px solid #ccc;
top: 0; bottom: 0;
position: absolute;
}
.cm-s-default .cm-header {color: blue;}
.cm-s-default .cm-quote {color: #090;}
.cm-negative {color: #d44;}
.cm-positive {color: #292;}
.cm-header, .cm-strong {font-weight: bold;}
.cm-em {font-style: italic;}
.cm-link {text-decoration: underline;}
.cm-strikethrough {text-decoration: line-through;}
.cm-s-default .cm-keyword {color: #64c; font-weight:bold; }
.cm-s-default .cm-atom {color: #A50; font-weight:bold; }
.cm-s-default .cm-number {color: #164; }
.cm-s-default .cm-m-javascript.cm-number {color: magenta;}
.cm-s-default .cm-m-sql.cm-number {color: red;}
.cm-s-default .cm-def {color: #308; }
.cm-s-default .cm-variable {color: black;}
.cm-s-default .cm-m-css.cm-variable {color:mediumblue;}
.cm-s-default .cm-punctuation {}
.cm-s-default .cm-property {color:purple;}
.cm-s-default .cm-m-javascript.cm-property {color: #050;}
.cm-s-default .cm-operator {}
.cm-s-default .cm-variable-2 {color: #40d; ;}
.cm-s-default .cm-variable-3 {color: #085;}
.cm-s-default .cm-comment {color: #876;}
.cm-s-default .cm-string {color: #A11;}
.cm-s-default .cm-m-javascript.cm-string {color: brown;}
.cm-s-default .cm-m-sql.cm-string {color: brown;}
.cm-s-default .cm-string-2 {color: #f50;}
.cm-s-default .cm-meta {color: #888;}
.cm-s-default .cm-qualifier {color: brown;}
.cm-s-default .cm-builtin {color: #c09;}
.cm-s-default .cm-tag {color: #00C; font-weight:bold;}
.cm-s-default .cm-bracket {color: #67F;}
.cm-s-default .cm-attribute {color: #060;}
.cm-s-default .cm-hr {color: #999;}
.cm-s-default .cm-link {color: #00c;}
body.darktheme .cm-s-default .cm-keyword {color: #88c9FF;}
body.darktheme .cm-s-default .cm-m-javascript.cm-keyword {color:#EAE;font-weight:normal;}
body.darktheme .cm-s-default .cm-atom {color: #Ca8;font-weight:normal;}
body.darktheme .cm-s-default .cm-number {color: #88c999;}
body.darktheme .cm-s-default .cm-m-javascript.cm-number {color: #80b6ff;}
body.darktheme .cm-s-default .cm-m-sql.cm-number {color: #88c999;}
body.darktheme .cm-s-default .cm-def {color: white;}
body.darktheme .cm-s-default .cm-variable {color:#00A;}
body.darktheme .cm-s-default .cm-m-javascript.cm-variable {color:white;}
body.darktheme .cm-s-default .cm-m-python.cm-variable {color:white;}
body.darktheme .cm-s-default .cm-m-css.cm-variable {color:#88c999;}
body.darktheme .cm-s-default .cm-punctuation {}
body.darktheme .cm-s-default .cm-property {color:#c5a5c5;}
body.darktheme .cm-s-default .cm-m-javascript.cm-property {color:#CDF;}
body.darktheme .cm-s-default .cm-operator { color:yellow; }
body.darktheme .cm-s-default .cm-variable-2 {color:white;}
body.darktheme .cm-s-default .cm-variable-3 {color: #085;}
body.darktheme .cm-s-default .cm-comment {color: #999;}
body.darktheme .cm-s-default .cm-string {color: #88c999;}
body.darktheme .cm-s-default .cm-m-javascript.cm-string {color: #88c999;}
body.darktheme .cm-s-default .cm-m-sql.cm-string {color: #ff9999;}
body.darktheme .cm-s-default .cm-string-2 {color: #fA0;}
body.darktheme .cm-s-default .cm-meta {color: #999;}
body.darktheme .cm-s-default .cm-qualifier {color: #ff9999;}
body.darktheme .cm-s-default .cm-builtin {color: #ff9999;}
body.darktheme .cm-s-default .cm-tag {color: #ff9999;}
body.darktheme .cm-s-default .cm-bracket {color: #ffCBBB;}
body.darktheme .cm-s-default .cm-attribute {color: #c5a5c5;}
body.darktheme .cm-s-default .cm-hr {color: #999;}
body.darktheme .cm-s-default .cm-link {color: #00c;}
body.darktheme .cm-s-default .cm-error {color: #f00; background:rgba(255,255,150,0.7);}
.cm-m-clike.cm-string {color: brown;}
.cm-s-default .cm-error {color: #f00; background:rgba(255,255,0,0.6);}
.cm-invalidchar {color: #f00; background:rgba(255,255,0,0.6);}
.CodeMirror-composing { border-bottom: 2px solid; }
div.CodeMirror span.CodeMirror-matchingbracket {
color: #090; background-color:rgba(100, 250, 0, 0.8); font-weight:bold;}
.darktheme div.CodeMirror span.CodeMirror-matchingbracket {
color: #0f0; background-color:rgba(155, 250, 155, .4); font-weight:bold;}
div.CodeMirror span.CodeMirror-nonmatchingbracket {
color: #f22; background:yellow; font-weight:bold;}
.darktheme div.CodeMirror span.CodeMirror-nonmatchingbracket {
color: #f55; background:yellow;font-weight:bold;}
.CodeMirror-matchingtag { background: rgba(255, 150, 0, .4) }
.darktheme .CodeMirror-matchingtag { background: rgba(255, 200, 100, .25); }
.CodeMirror-activeline-background {background: #e8f2ff;}
.darktheme .CodeMirror-activeline-background { background: #3C4048;}
.CodeMirror {
position: relative;
overflow: hidden;
background: white;
}
body.darktheme .CodeMirror {
background-color:rgb(40, 44, 52);
color:rgb(255, 255, 255);
}
.CodeMirror-scroll {
overflow: scroll !important;
margin-bottom: -50px; margin-right: -50px;
padding-bottom: 50px;
height: 100%;
outline: none;
position: relative;
}
.CodeMirror-sizer {
position: relative;
border-right: 30px solid transparent;
}
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
position: absolute;
z-index: 6;
display: none;
}
.CodeMirror-vscrollbar {
right: 0; top: 0;
overflow-x: hidden;
overflow-y: scroll;
}
.CodeMirror-hscrollbar {
bottom: 0; left: 0;
overflow-y: hidden;
overflow-x: scroll;
}
.CodeMirror-scrollbar-filler {
right: 0; bottom: 0;
}
.CodeMirror-gutter-filler {
left: 0; bottom: 0;
}
.CodeMirror-gutters {
position: absolute; left: 0; top: 0;
min-height: 100%;
z-index: 3;
}
.CodeMirror-gutter {
white-space: normal;
height: 100%;
display: inline-block;
vertical-align: top;
margin-bottom: -50px;
}
.CodeMirror-gutter-wrapper {
position: absolute;
z-index: 4;
background: none !important;
border: none !important;
}
.CodeMirror-gutter-background {
position: absolute;
top: 0; bottom: 0;
z-index: 4;
}
.CodeMirror-gutter-elt {
position: absolute;
cursor: default;
z-index: 4;
}
.CodeMirror-gutter-wrapper ::selection { background-color: transparent }
.CodeMirror-lines {
cursor: text;
min-height: 1px;
}
.CodeMirror pre {
border-radius: 0;
border-width: 0;
background: transparent;
font-family: inherit;
font-size: inherit;
margin: 0;
white-space: pre;
word-wrap: normal;
line-height: inherit;
color: inherit;
z-index: 2;
position: relative;
overflow: visible;
-webkit-tap-highlight-color: transparent;
-webkit-font-variant-ligatures: contextual;
font-variant-ligatures: contextual;
}
.CodeMirror-wrap pre {
word-wrap: break-word;
white-space: pre-wrap;
word-break: normal;
}
.CodeMirror-linebackground {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
z-index: 0;
}
.CodeMirror-linewidget {
position: relative;
z-index: 2;
overflow: auto;
}
.CodeMirror-code {
outline: none;
}
.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-gutter,
.CodeMirror-gutters,
.CodeMirror-linenumber {
box-sizing: content-box;
}
.CodeMirror-measure {
position: absolute;
width: 100%;
height: 0;
overflow: hidden;
visibility: hidden;
}
.CodeMirror-cursor {
position: absolute;
pointer-events: none;
}
.CodeMirror-measure pre { position: static; }
div.CodeMirror-cursors {
visibility: hidden;
position: relative;
z-index: 3;
}
div.CodeMirror-dragcursors {
visibility: visible;
}
.CodeMirror-focused div.CodeMirror-cursors {
visibility: visible;
}
.CodeMirror-selected { background: #d9d9d9; }
body.darktheme .CodeMirror-selected { background: #777777;}
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
body.darktheme .CodeMirror-focused .CodeMirror-selected { background: #0063e6;}
.CodeMirror-crosshair { cursor: crosshair; }
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
.cm-searching {
background: #ffa;
background: rgba(255, 255, 0, .4);
}
@media only screen and (max-device-width: 480px) {
.CodeMirror {
font-family: monospace;
font-size:14px;
}
}
.cm-force-border { padding-right: .1px; }
@media print {
.CodeMirror div.CodeMirror-cursors {
visibility: hidden;
}
}
.cm-tab-wrap-hack:after { content: ''; }
span.CodeMirror-selectedtext { background: none; }
.CodeMirror-foldmarker {
color: #f00; background-color:#6ee;
padding:0 10px;
text-shadow: #fb9 1px 1px 2px, #fb9 -1px -1px 2px, #fb9 1px -1px 2px, #fb9 -1px 1px 2px;
cursor: pointer;
}
body.darktheme .CodeMirror-foldmarker{ color: #f00; background-color:#ddf; }
.CodeMirror-foldgutter {
width: 1em;
margin-left:-0.2rem;
}
.CodeMirror-foldgutter-open, .CodeMirror-foldgutter-folded {
color: #555;
cursor: pointer;
}
body.darktheme .CodeMirror-foldgutter-open, body.darktheme .CodeMirror-foldgutter-folded  { color: white;}
.CodeMirror-foldgutter-open:after {
content: "\25BE";
padding-left:3px;
}
.CodeMirror-foldgutter-folded:after {
content: "\25B8";
padding-left:3px;
color:#f30;
}
body.darktheme .CodeMirror-foldgutter-folded:after {  color:#fC5; }
.CodeMirror-hints {
position: absolute;
z-index: 10;
overflow: hidden;
list-style: none;
margin: 0;
padding: 2px;
box-shadow: 2px 3px 5px rgba(0,0,0,.2);
border-radius: 3px;
border: 1px solid silver;
background: #FFC;
font-size: 90%;
font-family: monospace;
max-height: 24em;
overflow-y: auto;
}
.CodeMirror-hint {
margin: 0;
padding: 0 4px;
border-radius: 2px;
white-space: pre;
color: black;
cursor: pointer;
}
li.CodeMirror-hint-active {
background: #08f;
color: white;
}
.CodeMirror-dialog {
position: absolute;
left: 0; right: 0;
background: inherit;
z-index: 15;
padding: .1em .8em;
overflow: hidden;
color: inherit;
}
.CodeMirror-dialog-top {
border-bottom: 1px solid #eee;
top: 0;
}
.CodeMirror-dialog-bottom {
border-top: 1px solid #eee;
bottom: 0;
}
.CodeMirror-dialog input {
border: none;
outline: none;
background: transparent;
width: 20em;
color: inherit;
font-family: monospace;
}
.CodeMirror-dialog button {
font-size: 70%;
}
* {font-size:1.1rem;}