examples/demo.css
/* https://github.com/theleagueof/league-spartan */
@font-face {
font-family: 'League Spartan';
src: url('https://cdn.jsdelivr.net/npm/fontsource-league-spartan@3/files/league-spartan-latin-600-normal.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/npm/fontsource-league-spartan@3/files/league-spartan-latin-600-normal.woff') format('woff');
font-weight: bold;
font-style: normal;
}
body {
padding: 20px;
margin: 0 auto 200px;
max-width: 1000px;
background: #f8f8fa;
}
footer {
margin-top: 40px;
}
h1 {
font-family: 'League Spartan';
color: #445;
}
body > .container,
body > .container-fluid {
}
.center-align {
display: flex;
justify-content: left;
text-align:center;
}
.header {
text-align: center;
}
.panel {
margin-left: 20px;
margin-right: 20px;
}
.mouse {
cursor: pointer !important;
}
.nomargin {
margin: 0 !important;
}
.form-control[type="range"] {
padding: 0px 0px;
}
.dropzone {
padding: 30px;
margin: 0 20% 30px;
border: 4px dashed #ccc;
border-radius: 8px;
text-align: center;
color: #444;
}
.dropzone input {
max-width: 100%;
}
.import-image-zone {
margin: 10px auto 30px auto;
max-width: 250px;
min-width: 230px;
}
.import-image-zone input {
max-width: 100%;
}
.hover {
border: 4px dashed #888888;
background: #F0F0F0;
}
.step {
margin-bottom: 20px;
}
.step .img-thumbnail {
margin-bottom: 20px;
}
.det {
padding: 10px 16px;
text-decoration: italic;
}
.tools {
margin: 10px 0;
}
.load {
padding: 30px;
background: #eee;
border-radius: 8px;
text-align: center;
font-size: 2em;
color: #444;
}
#addStep {
max-width: 500px;
margin: 20px auto;
}
#add-step-btn{
width: 100%
}
.selectize-input {
width: 100%;
}
#addStep .labels {
text-align: right;
padding: 6px;
margin: 2px;
font-weight: bold;
}
@media (max-width:768px) {
#addStep .labels {
text-align: left;
}
}
#addStep .add {
text-align: center;
margin: 10px;
}
#save-seq {
display: block;
margin: 0px 10px 0px 0px;
width: 250px;
}
.info {
padding: 8px;
text-align: center;
}
#gif {
display: block;
margin: 0px 0px 0px 10px;
width: 250px;
}
@media(max-width: 768px) {
#dropzone {
margin: 0 0% 30px;
}
}
#dwnld {
max-width: 500px;
margin: 20px auto;
}
#gif_element {
display: block;
margin: 0 auto;
width: 100%;
height: auto;
}
#move-up {
position: fixed;
bottom: 30px;
right: 20px;
z-index: 550;
display: none;
background:transparent;
border:none;
}
#move-up i {
font-size:50px;
opacity:0.7;
color:#BABABA;
}
@media (max-width: 768px), (max-height 700px) {
#move-up {
display: none !important; /* !important is used to override the jQuery style */
}
}
.btn-circle{
min-width: 80px;
min-height: 80px;
text-align: center;
display: flex !important;
flex-direction: column;
padding: 6px 0;
font-size: 12px;
line-height: 1.42;
border-radius: 10px;
margin-left: 5px;
margin-right: 5px;
}
.radio{
cursor:pointer;
overflow: hidden;
height: 80px;
width: 80px;
margin-left: 5px;
margin-right: 5px;
}
.radio-group {
margin-bottom: 20px;
overflow: auto;
}
.no-border {
border: 0px;
}
.savesequencemsg{
display: none;
text-align: center;
}
.notification {
background-color: #808b96;
padding:4px;
color:white;
border-radius:3px;
font-size:2rem;
position:fixed;
bottom:2px;
left:50%;
min-width:14rem;
text-align:center;
display:none;
transform: translate(-50%, -50%);
}
#resetButton {
margin-top: 20px;
}
.i-over {
position: absolute;
left: 15px;
top: 15px;
z-index: 2;
color: white;
}
.i-small {
left: 25px;
}
@media all and (max-width: 767px) {
.center-align {
justify-content: space-between;
}
}
a.name-header{
text-decoration: none;
color: #445;
}
.step-column{
display:flex;
align-content: center;
justify-content: center;
}
.trash-container button.btn-xs {
position: relative;
bottom: 7px;
}
.toggleIcon {
transition: transform 0.2s;
}
.rotated {
transform: rotate(180deg);
}
#gif{
margin-left:0px;
margin-top:5px;
width:100%;
}
.save-button{
margin-top:20px;
margin-bottom:0px;
align:center;
width:100%;
}
.toggle {
cursor: default;
}
.general-tooltip:hover{
text-decoration: none;
}
.general-tooltip:focus{
outline: none;
}
.general-tooltip:focus-within{
outline: none;
}
.general-tooltip{
position: relative;
bottom: 7px;
font-size: 16px;
color: #444;
}
#version-number-text {
text-align: center;
padding-top: 100px;
color: gray;
}
#version-number-top-right {
position: fixed;
right: 2%;
top: 5%;
color: gray;
}
/* Non float rightward alignment*/
.right {
margin-left: auto;
display: block;
}
#update-prompt-modal,.notify-box {
visibility: hidden;
min-width: 250px;
margin-left: -125px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 8px;
padding: 16px;
position: fixed;
z-index: 1000;
left: 10%;
top: 30px;
}
#update-prompt-modal {
width: 30vw;
margin: 0.2rem;
}
.notify-box {
width:34vw;
padding:18px;
border-radius:8px;
margin-left:0.8rem;
text-align:left;
color:#333;
background:#c3c3c3;
}
/* Bootstrap class for display none remove it after updating to version v4 */
.d-none {
display:none;
}
/* Bootstrap class for display block remove it after updating to version v4 */
.d-block {
display:block;
}
#update-prompt-modal.show,.notify-box {
visibility: visible;
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}
@-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}