114 lines
2.1 KiB
CSS
114 lines
2.1 KiB
CSS
body {
|
|
height: 100vh;
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.c-hand {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.w-max-content {
|
|
width: max-content;
|
|
}
|
|
|
|
#clipper-bar .btn {
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 80%;
|
|
}
|
|
|
|
#map {
|
|
height: 100%;
|
|
}
|
|
|
|
#clipX {
|
|
background-image: url('/a/scaenae/assets/icons/section_x.png');
|
|
}
|
|
|
|
#clipY {
|
|
background-image: url('/a/scaenae/assets/icons/section_y.png');
|
|
}
|
|
|
|
#clipZ {
|
|
background-image: url('/a/scaenae/assets/icons/section_z.png');
|
|
}
|
|
|
|
/* Tooltips from https://codepen.io/pure-css/pen/bddggP */
|
|
span:after {
|
|
text-align: left;
|
|
white-space: normal;
|
|
}
|
|
|
|
span:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.app-tooltip {
|
|
cursor: help;
|
|
position: relative;
|
|
}
|
|
|
|
/*== common styles for both parts of app-tooltip tip ==*/
|
|
.app-tooltip::before,
|
|
.app-tooltip::after {
|
|
left: 50%;
|
|
opacity: 0;
|
|
position: absolute;
|
|
z-index: -100;
|
|
}
|
|
|
|
.app-tooltip:hover::before,
|
|
.app-tooltip:focus::before,
|
|
.app-tooltip:hover::after,
|
|
.app-tooltip:focus::after {
|
|
opacity: 1;
|
|
transform: scale(1) translateY(0);
|
|
z-index: 100;
|
|
}
|
|
|
|
/*== pointer tip ==*/
|
|
.app-tooltip::before {
|
|
border-style: solid;
|
|
border-width: 1em 0.75em 0 0.75em;
|
|
border-color: #3E474F transparent transparent transparent;
|
|
bottom: 100%;
|
|
content: "";
|
|
margin-left: -0.5em;
|
|
transition: all .65s cubic-bezier(.84,-0.18,.31,1.26), opacity .65s .5s;
|
|
transform: scale(.6) translateY(-90%);
|
|
}
|
|
|
|
.app-tooltip:hover::before,
|
|
.app-tooltip:focus::before {
|
|
transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
|
|
}
|
|
|
|
/*== speech bubble ==*/
|
|
.app-tooltip::after {
|
|
background: #3E474F;
|
|
border-radius: .25em;
|
|
bottom: 180%;
|
|
color: #EDEFF0;
|
|
content: attr(data-tip);
|
|
margin-left: -4.75em;
|
|
padding: 1em;
|
|
transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
|
|
transform: scale(.6) translateY(50%);
|
|
width: 17.5em;
|
|
}
|
|
|
|
.app-tooltip:hover::after,
|
|
.app-tooltip:focus::after {
|
|
transition: all .65s cubic-bezier(.84,-0.18,.31,1.26);
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.app-tooltip::after {
|
|
font-size: .75em;
|
|
margin-left: -5em;
|
|
width: 10em;
|
|
}
|
|
} |