REFAKTOR

assets/css/liczby.css

@@ -26,18 +26,17 @@ a:hover {
     flex-direction: column;
     justify-content: space-between;
     position: fixed;
-    top: 4rem;
+    top: 0rem;
     width: 100vw;
-    height: calc(100vh - 4rem);
+    height: 100vh;
     text-align: center;
 
     background: linear-gradient(180deg,
         transparent 0%,
-        transparent 10%,
         var(--colorSurface0) 20%,
         var(--colorSurface1) 30%,
-        var(--colorSurface0) 70%,
-        var(--colorSurface0) 100%
+        var(--colorSurface0) 90%,
+        transparent 100%
     );
 }
 
@@ -62,7 +61,7 @@ a:hover {
     padding: 1rem;
     border-width: .5rem;
     font-size: 56pt;
-    margin-bottom: 4rem;
+    margin-bottom: 10rem;
 
     animation: ZacznijTracic 5s ease-in-out infinite;
 }
@@ -118,7 +117,7 @@ input[type="number"] {
 
 .ukryj, .dialog-ukryj .okno {
     animation: Ukryj 0.35s ease-in-out forwards;
-    display: none;
+    display: none !important;
 }
 
 .dialog-pokaz {
@@ -127,13 +126,13 @@ input[type="number"] {
 
 .dialog-ukryj {
     animation: UkryjDialog 0.35s ease-in-out forwards;
-    display: none;
+    display: none !important;
     width: 0 !important;
     height: 0 !important;
 }
 
 .ukryte, .ukryte * {
-    display: none;
+    display: none !important;
     width: 0 !important;
     height: 0 !important;
 }
@@ -210,3 +209,65 @@ input[type="number"] {
     margin-top: .3rem;
     margin-left: .3rem;
 }
+
+
+
+/* Gra */
+#gra {
+    overflow-y: auto;
+    display: flex;
+    max-height: calc(100vh - 4rem);
+}
+
+#gra aside {
+    border-radius: .3rem;
+    background: var(--colorBase);
+    position: fixed;
+    right: 1rem;
+    margin: 1rem;
+    padding: 1rem;
+    width: 18rem;
+}
+
+#gra aside div {
+    font-size: 1.25rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+#gra h2 {
+    text-align: center;
+}
+
+#gra table {
+    margin: auto;
+}
+
+#gra button {
+    width: 3rem;
+    height: 5rem;
+}
+
+#gra button:hover {
+    scale: 1.1;
+    box-shadow: 0px 7px 10px var(--colorSubtext0);
+}
+
+.bledna {
+    background: var(--colorRed);
+    color: var(--colorSurface2);
+}
+
+.poprawna {
+    background: var(--colorGreen);
+    color: var(--colorSurface2);
+}
+
+.bledna:hover {
+    scale: 1 !important;
+    box-shadow: 0px 0px 0px #000 !important;
+    background: var(--colorRed) !important;
+    color: var(--colorSurface2) !important;
+    cursor: not-allowed;
+}