You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

131 lines
2.2 KiB

#draw {
display: flex;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 2;
display: none;
backdrop-filter: blur(1rem);
}
#draw:before {
content: '';
display: block;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
opacity: 0.75;
background-color: #111;
}
#draw.open {
display: flex;
}
#draw .canvas {
position: relative;
height: 100%;
width: 100%;
margin: auto;
z-index: 0;
}
#draw ul.list.controls li {
justify-content: space-between;
}
#draw #draw-background {
position: absolute;
z-index: -1;
}
#draw #screen-canvas {
position: absolute;
top: 0;
left: 0;
}
#draw #draw-canvas {
cursor: crosshair;
}
/* Controls */
#draw .draw-top-nav {
transition: transform 0.2s;
pointer-events: none;
padding-top: 1rem;
}
#draw .draw-top-nav span {
pointer-events: auto;
}
#draw .draw-top-nav span.control {
margin-right: 1.5rem;
box-shadow: var(--elevation-1);
}
#draw .draw-actions,
#draw .draw-control {
position: absolute;
bottom: 1rem;
right: 1rem;
transition: transform 0.2s;
}
#draw .draw-actions {
left: -1rem;
right: initial;
}
#draw .draw-top-nav.drawing {
transform: translateY(-130%);
}
#draw .draw-control.drawing {
transform: translateX(100%);
}
#draw .draw-actions.drawing {
transform: translateX(-100%);
}
#draw .draw-control span.icon.bubble i,
#draw .draw-actions span.icon.bubble i {
line-height: 5rem;
height: 5rem;
}
#draw .draw-actions li span.primary,
#draw .draw-control li span.primary {
height: 5rem;
flex: 0 0 5rem;
margin: 0.5rem 1rem;
transition: box-shadow .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1);
box-shadow: var(--elevation-1);
}
#draw .draw-actions li span.primary:hover,
#draw .draw-control li span.primary:hover {
box-shadow: var(--elevation-2);
}
#draw .draw-actions li.selected span.primary,
#draw .draw-control li.selected span.primary {
box-shadow: var(--elevation-4);
transform: scale(1.3);
z-index: 1;
}
#draw [data-width=small] i {
font-size: 2rem;
}
#draw [data-width=medium] i {
font-size: 2.5rem;
}