167 lines
2.6 KiB
CSS
167 lines
2.6 KiB
CSS
@import url(baza.css);
|
|
|
|
html {
|
|
background: var(--colorCrust);
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
header {
|
|
padding: 1rem 1.5rem;
|
|
border-bottom: solid 3px var(--colorBase);
|
|
}
|
|
|
|
a {
|
|
color: var(--colorText) !important;
|
|
text-decoration-color: transparent !important;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration-color: var(--colorText) !important;
|
|
}
|
|
|
|
|
|
/* Tytułowe */
|
|
#tytul {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
position: fixed;
|
|
top: 4rem;
|
|
width: 100vw;
|
|
height: calc(100vh - 4rem);
|
|
text-align: center;
|
|
|
|
background: linear-gradient(180deg,
|
|
transparent 0%,
|
|
transparent 10%,
|
|
var(--colorSurface0) 20%,
|
|
var(--colorSurface1) 30%,
|
|
var(--colorSurface0) 70%,
|
|
var(--colorSurface0) 100%
|
|
);
|
|
}
|
|
|
|
#tytul div h1 {
|
|
font-size: 96pt !important;
|
|
margin-top: 13rem;
|
|
}
|
|
|
|
#tytul div button {
|
|
position: relative;
|
|
color: var(--colorText);
|
|
text-shadow: 1px 1px 2px var(--colorBase), 0 0 1px var(--colorBase), 0 0 0.2px var(--colorBase);
|
|
box-shadow: 4px 10px 10px var(--colorBase);
|
|
background-color: var(--colorPeach);
|
|
background: linear-gradient(180deg,
|
|
var(--colorPeach) 0%,
|
|
var(--colorYellow) 35%,
|
|
var(--colorPeach) 65%,
|
|
var(--colorPeach) 100%
|
|
);
|
|
border-color: var(--colorText);
|
|
padding: 1rem;
|
|
border-width: .5rem;
|
|
font-size: 56pt;
|
|
margin-bottom: 4rem;
|
|
|
|
animation: ZacznijTracic 5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes ZacznijTracic {
|
|
0% {
|
|
top: 0;
|
|
}
|
|
40% {
|
|
top: -2rem;
|
|
scale: 1.01;
|
|
}
|
|
60% {
|
|
top: -2rem;
|
|
scale: 1.01;
|
|
}
|
|
100% {
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* Animacje */
|
|
.wsun {
|
|
animation: Wsun 0.6s ease-in;
|
|
}
|
|
|
|
@keyframes Wsun {
|
|
0% {
|
|
bottom: -40%;
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
bottom: 0;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.wysun {
|
|
animation: Wysun 1.5s ease-in;
|
|
}
|
|
|
|
@keyframes Wysun {
|
|
0% {
|
|
bottom: 0;
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
bottom: -40%;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.dwsun {
|
|
animation: DWsun 0.6s ease-in;
|
|
}
|
|
|
|
@keyframes DWsun {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.dwysun {
|
|
animation: DWysun 0.6s ease-in;
|
|
}
|
|
|
|
@keyframes DWysun {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* Dialog */
|
|
.dialog {
|
|
position: fixed;
|
|
top: 3rem;
|
|
left: 0;
|
|
z-index: 100002;
|
|
background-color: rgba(30, 30, 46, 0.9);
|
|
width: 100vw;
|
|
height: calc(100vh - 3rem);
|
|
}
|
|
|
|
.okno {
|
|
padding: .5rem;
|
|
background: var(--colorMantle);
|
|
margin: auto;
|
|
width: 40rem;
|
|
height: 20rem;
|
|
}
|
|
|