Let's go gambling!

2025-09-22 13:16:18 +02:00
parent 1cc8b0576e
commit 553a4e28e2
10 changed files with 351 additions and 23 deletions
--- a/assets/css/liczby.css
+++ b/assets/css/liczby.css
@@ -0,0 +1,166 @@
+@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;
+}
+