mirror of https://github.com/movim/movim
				
				
			
			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
						
					
					
				
			
		
		
		
			
			
			
		
		
	
	
							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; | |
| }
 |