galerija-bot/www/stil.css

187 lines
2.6 KiB
CSS

@font-face {
font-family: CenturyGothic;
src: url("../font/CenturyGothic.ttf") format("truetype");
}
body {
padding: 0;
margin: 0;
font-family: CenturyGothic;
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: center;
}
h1, h2 {
display: inline;
font-weight: normal;
}
h1 {
font-size: 2.5rem;
margin-right: .4rem;
}
h2 {
font-size: .8rem;
word-spacing: 1px;
}
.zaslon {
position: relative;
width: 100%;
margin: 2rem 0;
height: auto;
}
#videofeed {
width: 100%;
height: auto;
box-sizing: border-box;
border: 5px solid black;
border-top-left-radius: 50% 12%;
border-top-right-radius: 50% 12%;
border-bottom-left-radius: 50% 12%;
border-bottom-right-radius: 50% 12%;
min-height: 482.5px;
}
#predvajaj {
display: block;
font-size: 10rem;
font-weight: bold;
opacity: .7;
position: absolute;
left: calc(50% - 7rem);
top: calc(50% - 7rem);
width: 14rem;
height: 14rem;
border-radius: 100%;
cursor: pointer;
border: none;
background-color: white;
}
.cakam #predvajaj {
display: none;
}
.cakam:after {
display: block;
position: absolute;
content: 'Nalaganje...';
width: 100%;
height: 100%;
display: flex;
top: 0;
bottom: 0;
left: 0;
right: 0;
align-items: center;
justify-content: center;
}
.gumbi {
position: absolute;
bottom: 0;
width: 100%;
display: none;
}
.gumbi button {
position: absolute;
display: flex;
width: 4rem;
height: 4rem;
border-radius: 100%;
font-size: 6rem;
font-weight: bold;
justify-content: center;
align-items: center;
background-color: rgba(255, 255, 255, 0.5);
border: none;
cursor: pointer;
background-size: contain;
background-repeat: no-repeat;
}
button[disabled] {
opacity: .4;
}
#levo {
left: 5rem;
bottom: 2rem;
}
#desno {
right: 5rem;
bottom: 2rem;
}
#ravno {
left: calc(50% - 2.5rem);
bottom: 1rem;
width: 5rem;
height: 5rem;
}
#levo:before,
#desno:before,
#ravno:before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-size: contain;
background-repeat: no-repeat;
width: 80%;
height: 80%;
left: 10%;
}
#ravno:before {
background-image: url(slike/gor.svg);
width: 65%;
height: 65%;
top: 17.5%;
left: 17.5%;
}
#desno:before,
#levo:before {
top: 20%;
background-image: url(slike/desno.svg);
}
#levo:before {
transform: scaleX(-1);
}
.predvajam .gumbi {
display: block;
}
#glavno {
max-width: 640px;
margin-left: auto;
margin-right: auto;
padding: 1rem;
}
.info {
font-size: .9rem;
}
.info p {
margin: 0;
}