body {
font:1.5em helvetica-neue, helvetica, arial, san-serif;
padding:10px;
}
h1 {
margin-top:0;
}
#main {
width: 300px;
margin:auto;
background: #ececec;
padding: 20px;
border: 1px solid #ccc;
}
#image-list {
list-style:none;
margin:0;
padding:0;
}
#image-list li {
background: #fff;
border: 1px solid #ccc;
text-align:center;
padding:20px;
margin-bottom:19px;
}
#image-list li img {
width: 258px;
vertical-align: middle;
border:1px solid #474747;
}
output{
width: 100%;
min-height: 150px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
gap: 15px;
position: relative;
border-radius: 5px;
}
output .image{
height: 150px;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
overflow: hidden;
position: relative;
}
output .image img{
height: 100%;
width: 100%;
}
output .image span {
position: absolute;
top: -4px;
right: 4px;
cursor: pointer;
font-size: 22px;
color: white;
}
output .image span:hover {
opacity: 0.8;
}
output .span--hidden{
visibility: hidden;
}
.p {
font-size:2em;
}
div.scrollmenu {
background-color: #333;
overflow: auto;
white-space: nowrap;
}
div.scrollmenu div {
display: inline-block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
}
/* Container */
.container{
margin: 0 auto;
border: 0px solid black;
width: 25vw;
height: 250px;
border-radius: 3px;
background-color: ghostwhite;
text-align: center;
}
/* Preview */
.preview{
width: 100px;
height: 100px;
border: 1px solid black;
margin: 0 auto;
background: white;
}
.preview img{
display: none;
}
/* Button */
.button{
border: 0px;
background-color: deepskyblue;
color: white;
padding: 5px 15px;
margin-left: 10px;
}
#snackbar {
visibility: hidden;
min-width: 250px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 1;
left: 30px;
top: 30px;
font-size: 17px;
}
#snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@-webkit-keyframes fadein {
from {top: 0; opacity: 0;}
to {top: 30px; opacity: 1;}
}
@keyframes fadein {
from {top: 0; opacity: 0;}
to {top: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
from {top: 30px; opacity: 1;}
to {top: 0; opacity: 0;}
}
@keyframes fadeout {
from {top: 30px; opacity: 1;}
to {top: 0; opacity: 0;}
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: black;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: blue;
}
input:focus + .slider {
box-shadow: 0 0 1px dimGray;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
.slider.round:before {
border-radius: 50%;
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.cls_panel {font-color:black;}
.cls_postureMaximized{
min-width: 250px;min-height: auto;left:10px;
}
.cls_postureMinimized{
top:75px;max-width:250px;
}
#music_canvas {
backgound-color:green;
}
/* more resonsive than w3-xxlarge */
.cls_center{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.xcls_h2{
font-size:32px;
font-size:2em;
}
.xcls_h3{
font-size:3em;
}
.b1{display:none;}
.b2{display:none;}
.b3{display:none;}
.b4{display:none;}
.b5{display:none;}
.b6{display:none;}
.b7{display:none;}
.b8{display:none;}
.b9{display:none;}
.b10{display:none;}
.s1{display:none;}
.s2{display:none;}
.s3{display:none;}
.s4{display:none;}
.s5{display:none;}
.s6{display:none;}
.s7{display:none;}
.s8{display:none;}
.s9{display:none;}
.s2_b1{display:none;}
.s2_b2{display:none;}
.s2_b3{display:none;}
.s2_b4{display:none;}
.s2_b5{display:none;}
.b1{display:none;}
.b2{display:none;}
.b3{display:none;}
.b4{display:none;}
.b5{display:none;}
.sInhale{display:none;}
.exhale{display:none;}
.lastBreath{display:none;}
.lastSet{display:none;}
.breath_blog{display:block;}
.setCounter_blog{display:block;}
.cls_xxxLarge {font-size:2em;}
/*
tooltip
*/
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
/*!
* https://www.w3schools.com/howto/howto_js_rangeslider.asp
*/
.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
/*!
dropinyoga choices
*/
.value {
display:none;
}
.cls_h2{
xfont-size:3vw;
}
.b1{display:none;}
.b2{display:none;}
.b3{display:none;}
.b4{display:none;}
.b5{display:none;}
.b6{display:none;}
.b7{display:none;}
.b8{display:none;}
.b9{display:none;}
.b10{display:none;}
.s1{display:none;}
.s2{display:none;}
.s3{display:none;}
.s4{display:none;}
.s5{display:none;}
.s6{display:none;}
.s7{display:none;}
.s8{display:none;}
.s9{display:none;}
.s2_b1{display:none;}
.s2_b2{display:none;}
.s2_b3{display:none;}
.s2_b4{display:none;}
.s2_b5{display:none;}
.b1{display:none;}
.b2{display:none;}
.b3{display:none;}
.b4{display:none;}
.b5{display:none;}
.sInhale{display:none;}
.exhale{display:none;}
.lastBreath{display:none;}
.lastSet{display:none;}
.breath_blog{display:block;}
.setCounter_blog{display:block;}
/*
tooltip
*/
.tooltip {
xpposition: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
xpposition: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
xpposition: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
} scheduleTab
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}