130 lines
2.2 KiB
CSS
130 lines
2.2 KiB
CSS
/* Thebelab Buttons */
|
|
.thebelab-button {
|
|
z-index: 999;
|
|
display: inline-block;
|
|
padding: 0.35em 1.2em;
|
|
margin: 0px 1px;
|
|
border-radius: 0.12em;
|
|
box-sizing: border-box;
|
|
text-decoration: none;
|
|
font-family: "Roboto", sans-serif;
|
|
font-weight: 300;
|
|
text-align: center;
|
|
transition: all 0.2s;
|
|
background-color: #dddddd;
|
|
border: 0.05em solid white;
|
|
color: #000000;
|
|
}
|
|
|
|
.thebelab-button:hover {
|
|
border: 0.05em solid black;
|
|
background-color: #fcfcfc;
|
|
}
|
|
|
|
.thebe-launch-button {
|
|
height: 2.2em;
|
|
font-size: 0.8em;
|
|
border: 1px black solid;
|
|
}
|
|
|
|
/* Thebelab Cell */
|
|
.thebelab-cell pre {
|
|
background: none;
|
|
}
|
|
|
|
.thebelab-cell .thebelab-input {
|
|
padding-left: 1em;
|
|
margin-bottom: 0.5em;
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
.thebelab-cell .jp-OutputArea {
|
|
margin-top: 0.5em;
|
|
margin-left: 1em;
|
|
}
|
|
|
|
button.thebelab-button.thebelab-run-button {
|
|
margin-left: 1.5em;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
/* Loading button */
|
|
button.thebe-launch-button div.spinner {
|
|
float: left;
|
|
margin-right: 1em;
|
|
}
|
|
|
|
/* Remove the spinner when thebelab is ready */
|
|
.thebe-launch-button.thebe-status-ready .spinner {
|
|
display: none;
|
|
}
|
|
|
|
.thebe-launch-button span.status {
|
|
font-family: monospace;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.thebe-launch-button.thebe-status-ready span.status {
|
|
color: green;
|
|
}
|
|
|
|
.spinner {
|
|
height: 2em;
|
|
text-align: center;
|
|
font-size: 0.7em;
|
|
}
|
|
|
|
.spinner > div {
|
|
background-color: #f37726;
|
|
height: 100%;
|
|
width: 6px;
|
|
display: inline-block;
|
|
|
|
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
|
|
animation: sk-stretchdelay 1.2s infinite ease-in-out;
|
|
}
|
|
|
|
.spinner .rect2 {
|
|
-webkit-animation-delay: -1.1s;
|
|
animation-delay: -1.1s;
|
|
}
|
|
|
|
.spinner .rect3 {
|
|
-webkit-animation-delay: -1s;
|
|
animation-delay: -1s;
|
|
}
|
|
|
|
.spinner .rect4 {
|
|
-webkit-animation-delay: -0.9s;
|
|
animation-delay: -0.9s;
|
|
}
|
|
|
|
.spinner .rect5 {
|
|
-webkit-animation-delay: -0.8s;
|
|
animation-delay: -0.8s;
|
|
}
|
|
|
|
@-webkit-keyframes sk-stretchdelay {
|
|
0%,
|
|
40%,
|
|
100% {
|
|
-webkit-transform: scaleY(0.4);
|
|
}
|
|
20% {
|
|
-webkit-transform: scaleY(1);
|
|
}
|
|
}
|
|
|
|
@keyframes sk-stretchdelay {
|
|
0%,
|
|
40%,
|
|
100% {
|
|
transform: scaleY(0.4);
|
|
-webkit-transform: scaleY(0.4);
|
|
}
|
|
20% {
|
|
transform: scaleY(1);
|
|
-webkit-transform: scaleY(1);
|
|
}
|
|
}
|