213 lines
3.7 KiB
CSS
213 lines
3.7 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;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* Formsy */
|
|
fieldset {
|
|
border: none;
|
|
}
|
|
|
|
legend {
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
input[type="submit"] {
|
|
text-align: center;
|
|
font-size: 1.5rem;
|
|
padding: .3rem;
|
|
margin: auto;
|
|
display: block;
|
|
}
|
|
|
|
input[type="number"] {
|
|
width: 100%;
|
|
font-size: 22pt;
|
|
}
|
|
|
|
|
|
/* Animacje */
|
|
/* AI WYGENEROWAŁO TE KLASY I KEYFRAMEY */
|
|
.pokaz, .dialog-pokaz .okno {
|
|
animation: Pokaz 0.35s ease-in-out forwards;
|
|
}
|
|
|
|
.ukryj, .dialog-ukryj .okno {
|
|
animation: Ukryj 0.35s ease-in-out forwards;
|
|
display: none;
|
|
}
|
|
|
|
.dialog-pokaz {
|
|
animation: PokazDialog 0.35s ease-in-out forwards;
|
|
}
|
|
|
|
.dialog-ukryj {
|
|
animation: UkryjDialog 0.35s ease-in-out forwards;
|
|
display: none;
|
|
width: 0 !important;
|
|
height: 0 !important;
|
|
}
|
|
|
|
.ukryte, .ukryte * {
|
|
display: none;
|
|
width: 0 !important;
|
|
height: 0 !important;
|
|
}
|
|
|
|
@keyframes Pokaz {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(2rem);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes Ukryj {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
display: initial;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(2rem);
|
|
display: initial;
|
|
}
|
|
}
|
|
|
|
@keyframes PokazDialog {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes UkryjDialog {
|
|
0% {
|
|
opacity: 1;
|
|
display: initial;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
display: initial;
|
|
}
|
|
}
|
|
|
|
|
|
/* 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);
|
|
display: flex;
|
|
}
|
|
|
|
.okno {
|
|
padding: .5rem;
|
|
padding-bottom: 1rem;
|
|
border: .4rem solid var(--colorSurface1);
|
|
border-right-color: var(--colorSurface0);
|
|
border-bottom-color: var(--colorSurface0);
|
|
background: var(--colorMantle);
|
|
margin: auto;
|
|
width: 40rem;
|
|
}
|
|
|
|
.okno h2 {
|
|
margin-top: .3rem;
|
|
margin-left: .3rem;
|
|
}
|