169 lines
		
	
	
		
			2.9 KiB
		
	
	
	
		
			CSS
		
	
	
	
			
		
		
	
	
			169 lines
		
	
	
		
			2.9 KiB
		
	
	
	
		
			CSS
		
	
	
	
| html, body {
 | |
|     width: 100%;
 | |
|     height:100%;
 | |
| }
 | |
| 
 | |
| /* Center the loader */
 | |
| #loader {
 | |
|     position: absolute;
 | |
|     left: 50%;
 | |
|     top: 50%;
 | |
|     z-index: 1;
 | |
|     width: 120px;
 | |
|     height: 120px;
 | |
|     margin: -76px 0 0 -76px;
 | |
|     border: 16px solid #f3f3f3;
 | |
|     border-radius: 50%;
 | |
|     border-top: 16px solid #3498db;
 | |
|     -webkit-animation: spin 2s linear infinite;
 | |
|     animation: spin 2s linear infinite;
 | |
| }
 | |
| 
 | |
| @-webkit-keyframes spin {
 | |
|     0% { -webkit-transform: rotate(0deg); }
 | |
|     100% { -webkit-transform: rotate(360deg); }
 | |
| }
 | |
| 
 | |
| @keyframes spin {
 | |
|     0% { transform: rotate(0deg); }
 | |
|     100% { transform: rotate(360deg); }
 | |
| }
 | |
| 
 | |
| /* Add animation to "page content" */
 | |
| .animate-bottom {
 | |
|     position: relative;
 | |
|     -webkit-animation-name: animatebottom;
 | |
|     -webkit-animation-duration: 1s;
 | |
|     animation-name: animatebottom;
 | |
|     animation-duration: 1s
 | |
| }
 | |
| 
 | |
| @-webkit-keyframes animatebottom {
 | |
|     from { bottom:-100px; opacity:0 }
 | |
|     to { bottom:0px; opacity:1 }
 | |
| }
 | |
| 
 | |
| @keyframes animatebottom {
 | |
|     from{ bottom:-100px; opacity:0 }
 | |
|     to{ bottom:0; opacity:1 }
 | |
| }
 | |
| 
 | |
| #main {
 | |
|     min-height: 75vh;
 | |
| }
 | |
| 
 | |
| #log {
 | |
|     align-content: center;
 | |
|     display: flex;
 | |
|     text-align: center;
 | |
|     align-items: center;
 | |
|     flex-flow: column;
 | |
| }
 | |
| 
 | |
| #log iframe {
 | |
|     width: inherit;
 | |
|     min-height: 100vh;
 | |
|     height: max-content;
 | |
|     border:none;
 | |
| }
 | |
| 
 | |
| #body {
 | |
|     display: none;
 | |
|     min-height: 75vh;
 | |
| }
 | |
| 
 | |
| .fullscreen {
 | |
|     cursor: pointer;
 | |
|     max-width: 100%;
 | |
|     max-height: 100%;
 | |
| }
 | |
| 
 | |
| #myModalImg {
 | |
|     max-width: 95vw;
 | |
|     max-height: 90vh;
 | |
|     margin: auto;
 | |
|     display: block;
 | |
| }
 | |
| 
 | |
| .bd-placeholder-img {
 | |
|     font-size: 1.125rem;
 | |
|     text-anchor: middle;
 | |
|     -webkit-user-select: none;
 | |
|     -moz-user-select: none;
 | |
|     user-select: none;
 | |
| }
 | |
| 
 | |
| @media (min-width: 768px) {
 | |
|     .bd-placeholder-img-lg {
 | |
|         font-size: 3.5rem;
 | |
|     }
 | |
| }
 | |
| 
 | |
| .b-example-divider {
 | |
|     height: 3rem;
 | |
|     background-color: rgba(0, 0, 0, .1);
 | |
|     border: solid rgba(0, 0, 0, .15);
 | |
|     border-width: 1px 0;
 | |
|     box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
 | |
| }
 | |
| 
 | |
| .b-example-vr {
 | |
|     flex-shrink: 0;
 | |
|     width: 1.5rem;
 | |
|     height: 100vh;
 | |
| }
 | |
| 
 | |
| .bi {
 | |
|     vertical-align: -.125em;
 | |
|     fill: currentColor;
 | |
| }
 | |
| 
 | |
| .nav-scroller {
 | |
|     position: relative;
 | |
|     z-index: 2;
 | |
|     height: 2.75rem;
 | |
|     overflow-y: hidden;
 | |
| }
 | |
| 
 | |
| .nav-scroller .nav {
 | |
|     display: flex;
 | |
|     flex-wrap: nowrap;
 | |
|     padding-bottom: 1rem;
 | |
|     margin-top: -1px;
 | |
|     overflow-x: auto;
 | |
|     text-align: center;
 | |
|     white-space: nowrap;
 | |
|     -webkit-overflow-scrolling: touch;
 | |
| }
 | |
| 
 | |
| .iframe-container {
 | |
|     position: relative;
 | |
|     overflow: hidden;
 | |
|     width: 100%;
 | |
|     padding-top: 56.25%;
 | |
|     /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
 | |
| }
 | |
| 
 | |
| .responsive-iframe {
 | |
|     position: absolute;
 | |
|     top: 0;
 | |
|     left: 0;
 | |
|     bottom: 0;
 | |
|     right: 0;
 | |
|     width: 100%;
 | |
|     height: 100%;
 | |
| }
 | |
| 
 | |
| #btn-back-to-top {
 | |
|     position: fixed;
 | |
|     bottom: 20px;
 | |
|     right: 20px;
 | |
|     display: none;
 | |
| }
 | |
| 
 | |
| @media (min-width: 992px) {
 | |
|     .hidden_span {
 | |
|         display: none;
 | |
|     }
 | |
| }
 |