react-templates/playground/css/fiddle.css

137 lines
2.2 KiB
CSS

html {
height: 100%;
}
body {
/*padding: 20px;*/
font-family: "Helvetica", "Arial", "FreeSans", "Verdana", "Tahoma", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
/*background: #f6f6f6 url(../img/initializing.png) 50% 50% no-repeat;*/
/*overflow: hidden;*/
padding: 0;
margin: 0;
/*position: relative;*/
font-size: 14px;
/*height: 100%;*/
display: block;
}
#container {
height: 100%;
}
.playground-container {
position: absolute;
top: 48px;
bottom: 0;
left: 0;
right: 0;
background: #DFDFD5;
}
#header {
height: 48px;
/*background: #4679bd;*/
background: #222;
}
#header-title {
color: #00d8ff;
font-size: 24px;
line-height: 48px;
/*height: 50px;*/
padding-left: 10px;
vertical-align: middle;
display: inline-block;
}
.title-link, .title-link:hover, .title-link:visited {
text-decoration: none;
color: #00d8ff;
}
#buttons-bar {
padding-left: 40px;
display: inline-block;
}
#buttons-bar button, #buttons-bar div {
margin-right: 10px;
}
.toolbar-dropdown {
display: inline-block;
}
.button-icon {
margin-right: 5px;
}
.fiddle {
height: 100%;
}
.CodeMirror {
height: 100%;
/*border: 1px solid black;*/
}
.large-text-area {
width: 100%;
height: 100%;
/*height: 300px;*/
/*display: block;*/
/*margin: 10px;*/
}
.result-area {
width: 50%;
display: table-cell;
vertical-align: top;
padding: 5px;
}
.sample-view {
margin: 10px;
}
.sample-view button {
margin: 5px;
}
.sample-view input[type=checkbox] {
margin-right: 5px;
}
.playground {
display: table;
height: 100%;
width: 100%;
}
.fiddle-row {
display: table-row;
height: 50%;
}
.code-area {
/*background-color: rgb(181, 181, 181);*/
width: 50%;
height: 50%;
/*height: 166px;*/
display: table-cell;
/*float: left;*/
/*margin: 2px;*/
/*padding: 10px;*/
padding: 1px;
}
.error-panel {
/*padding: 4px; */
padding-left: 20px;
/* position: static; */
color: red;
background: #f7f7f7;
border-bottom: 1px solid #000;
}
/*position: relative; min-height: 100%;*/