src/css/opalbox.css
/*!
* Base CSS styles for the OpalBox. This style is extended with themes. Some
* colors like border of the box comes from Light theme.
*/
.opbox {
border: 1px solid #e1e1e1;
border-radius: 7px;
}
.opbox .opbox-header {
padding: 10px 15px;
border-radius: 6px 6px 0 0;
}
.opbox .opbox-code-wrap {
min-height: 120px;
}
.opbox .opbox-code {
border: none;
padding: 10px 15px;
resize: none;
width: 100%;
font-size: 1em;
box-sizing: border-box;
height: 120px;
}
.opbox .opbox-output {
border-top: 1px solid #e1e1e1;
border-radius: 0 0 6px 6px;
}
.opbox .opbox-output .opbox-execute {
width: 70px;
float: left;
padding: 10px;
text-align: center;
position: relative;
}
.opbox .opbox-output .opbox-execute .opbox-run {
border: none;
width: 70px;
font-size: 13px;
text-align: center;
padding: 5px 0;
border-radius: 5px;
cursor: pointer;
}
.opbox .opbox-output .opbox-execute .opbox-loader {
display: none;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #FFFFFF;
opacity: 0.6;
position: absolute;
top: 15px;
left: 50%;
margin-left: -8px;
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
animation: sk-bounce 2.0s infinite ease-in-out;
}
.opbox .opbox-output .opbox-execute .delayed {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
@-webkit-keyframes sk-bounce {
0%, 100% {
-webkit-transform: scale(0);
}
50% {
-webkit-transform: scale(1);
}
}
@keyframes sk-bounce {
0%, 100% {
transform: scale(0);
-webkit-transform: scale(0);
}
50% {
transform: scale(1);
-webkit-transform: scale(1);
}
}
.opbox .opbox-output .opbox-result {
padding: 7px 15px;
margin-left: 80px;
min-height: 28px;
}
.opbox .opbox-output .opbox-result p {
margin: 5px 0;
}
.opbox .opbox-output .opbox-result p.opbox-error {
color: red;
}