resources/live/live.css
body {
background-color: #BBBBBB;
padding: 0;
margin: 0;
background-image: url(./wallpaper.jpg);
background-size: 100%;
background-attachment: fixed;
background-position: center center;
font-family: Roboto, sans-serif;
}
#rung-bar {
width: 100%;
height: 64px;
background-color: rgb(63, 81, 181);
}
#rung-alerts {
margin: 40px;
width: 100%;
max-width: calc(100% - 500px);
}
.custom-scrollbar::-webkit-scrollbar, textarea::-webkit-scrollbar {
width: 8px;
-webkit-appearance: none;
}
.custom-scrollbar::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb {
background: rgba(200, 200, 200, 0.7);
min-height: 36px;
cursor: pointer;
color: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover, textarea::-webkit-scrollbar-thumb:hover {
background: rgba(34, 167, 250, 0.7);
}
.card {
cursor: pointer;
position: relative;
width: 145px;
height: 115px;
display: inline-block;
margin: 2px;
border: 1px solid silver;
padding: 0 10px;
background-color: #ECF0F1;
padding-top: 10px;
overflow-x: hidden;
overflow-y: auto;
text-align: center;
font-family: Roboto, sans-serif;
transform: rotate(0);
}
#logo {
margin-left: 24px;
height: 64px;
}
#sidebar-header {
background-color: #596ac6;
}
#sidebar {
width: 440px;
position: fixed;
top: 0;
right: 0;
bottom: 0;
}
#sidebar-header {
background-color: #596ac6;
color: #CCCCCC;
height: 64px;
padding-left: 30px;
}
#sidebar-fake-line-1 {
position: absolute;
top: 0;
}
#sidebar-group-name {
position: relative;
top: 10px;
font-size: 20px;
}
#sidebar-card-name {
position: relative;
overflow: hidden;
max-height: 20px;
top: 8px;
}
#sidebar-body {
background-color: #EEEEEE;
height: calc(100% - 124px);
text-align: center;
padding-top: 20px;
}
.fake-field {
width: 200px;
height: 50px;
display: inline-table;
}
.fake-indicator {
background-color: #BBBBBB;
height: 10px;
width: 50px;
}
.fake-value {
margin-top: 5px;
background-color: #BBBBBB;
height: 30px;
width: 100%;
}
#sidebar-comment-box {
position: absolute;
bottom: 0;
right: 0;
width: 440px;
background: #EEEEEE;
height: 50px;
}
#sidebar-comment-input {
width: 365px;
background-color: #BBBBBB;
height: 30px;
position: absolute;
bottom: 13px;
right: 60px;
}
#sidebar-send-button {
background-color: #CA2C68;
width: 40px;
height: 40px;
border-radius: 40px;
position: absolute;
bottom: 10px;
right: 10px;
}
#markdown-box {
height: 200px;
margin: 20px;
height: calc(100% - 150px);
overflow-y: scroll;
}
#markdown-robot {
width: 50px;
height: 50px;
border-radius: 50px;
background-color: #AE7C5B;
}
#markdown-content {
position: relative;
top: -50px;
left: 60px;
width: calc(100% - 70px);
background-color: #E0E0E0;
padding: 5px;
text-align: left;
}
#markdown-resources img {
width: 100%;
}
#rung-timeline {
position: absolute;
top: 13px;
height: 40px;
right: 500px;
color: white;
font-size: 22px;
display: flex;
}
#rung-timeline-count {
line-height: 40px;
padding: 0 20px;
}
.rung-timeline-button {
background-color: #0077C0;
width: 40px;
line-height: 40px;
text-align: center;
color: white;
cursor: pointer;
border: 0;
outline: 0;
}
.rung-timeline-button:hover {
background-color: #0057A0;
}
.rung-timeline-button:active {
background-color: #003780;
}
.rung-timeline-button:disabled, .rung-timeline-button:disabled:hover {
background-color: #EFEFEF;
color: gray;
}
#rung-loading {
position: absolute;
top: 13px;
width: 40px;
height: 40px;
right: 450px;
opacity: 1;
transition-property: opacity;
transition-duration: 0.5s;
}
.double-bounce-1, .double-bounce-2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: white;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
animation: sk-bounce 2.0s infinite ease-in-out;
}
.double-bounce-2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
@-webkit-keyframes sk-bounce {
0%, 100% { -webkit-transform: scale(0.0) }
50% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bounce {
0%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
#rung-error {
display: none;
position: fixed;
bottom: 0;
left: 0;
width: calc(100% - 460px);
background-color: #E74C3C;
color: white;
font-family: monospace, Courier New, Courier;
white-space: pre;
overflow: hidden;
padding: 10px;
font-size: 12px;
}