presentationmaker.js/public/style.css

107 lines
1.5 KiB
CSS

@font-face {
font-family:'Roboto';
font-style:bold;
font-weight:600;
src:url(roboto.woff2) format('woff2');
font-display:swap
}
html,
body {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #000000;
font-size: min(1vw, 1.778vh);
overflow:clip;
font-family: Roboto, sans-serif;
}
#ar {
width: 100em;
height: 56.25em;
}
#render {
font-size: 1em;
a {
color: #BBBBff;
img {
vertical-align: bottom;
}
}
.ui {
position: fixed;
z-index: 999999;
color: #ffffff;
top: 20px;
left: 20px;
text-shadow: #000000 2px 0 0;
opacity: 0;
transition: opacity 1s ease-in-out;
font-size:2em;
&.visible {
opacity: 0.75;
}
a {
color: inherit;
text-decoration: none;
font-size: 1.0em;
}
a.disabled {
color: transparent;
cursor: default;
}
select {
margin: 0 5px;
outline: none;
}
}
}
#fullscreen {
font-weight: bold;
}
#fs {
margin-left:10px;
}
.page {
position: absolute;
transform-origin: top left 0px;
transition: opacity .5s ease-in-out;
}
.page.inactive {
opacity: 0.5;
transition: opacity .5s ease-in-out;
}
[data-action] {
height: 2em;
vertical-align: middle;
cursor: pointer;
}
#viewport {
transition: all 1s ease-in-out;
transform-style: preserve-3d;
transform-origin: top left 0px;
}
#render {
overflow: clip;
height:100vh;
perspective: 1000px;
}
.option {
width:100%;
height:100%;
}