Lekcja 2

assets/css/main.css

@@ -4,6 +4,7 @@
 body {
     padding: 0%;
     margin: 0%;
+    user-select: none;    
 }
 
 a, a:visited {
@@ -13,6 +14,7 @@ a, a:visited {
 }
 
 a:hover, a:focus {
+    outline: none;
     text-underline-offset: 4px;
     text-decoration: underline 2px var(--colorLavender);
     color: var(--colorLavender);
@@ -125,6 +127,7 @@ main {
     padding: 1rem;
     max-width: 1680px;
     width: 90vw;
+    user-select: text;
 }
 
 /* Stopka */
@@ -143,6 +146,15 @@ footer {
 
     margin: .5rem;
     padding: 1rem;
+    padding-bottom: 1.75rem;
+}
+
+footer img {
+    height: 100%;
+}
+
+footer strong {
+    margin-top: .25rem;
 }
 
 footer div {
@@ -150,8 +162,11 @@ footer div {
     flex-direction: column;
 }
 
-footer div div {
+footer div div, .flex-row {
     flex-grow: 1;
+    display: inline-flex;
+    flex-direction: row;
+    gap: 1rem;
 }
 
 footer div div ul {
@@ -164,3 +179,112 @@ footer div div ul {
     gap: .3rem;
     list-style: none;
 }
+
+/* Akordeon */
+.akordeon {
+    width: 100%;
+    display: inline-flex;
+    flex-direction: column;
+}
+
+.akordeon.closed {
+    border-radius: 1rem;
+    background-color: var(--colorSurface0);
+    border: .22rem solid var(--colorSurface2);
+}
+
+.akordeon-header {
+    padding: .35rem;
+}
+
+input, button, .akordeon-header {
+    border-radius: .4rem;
+    border: .2rem solid var(--colorSurface2);
+    background-color: var(--colorSurface1);
+    background: linear-gradient(180deg,
+        var(--colorSurface2) 0%,
+        var(--colorSurface2) 65%,
+        var(--colorSurface1) 100%
+    );
+    color: var(--colorSubtext1);
+
+    font-weight: bold;
+    font-size: 13pt;
+
+    margin: .25rem;
+}
+
+input:focus,
+button:focus,
+.akordeon-header:focus {
+    outline: none;
+    border-color: var(--colorOverlay0);
+}
+
+button {
+    padding-top: .35rem;
+    padding-bottom: .35rem;
+    padding-left: .5rem;
+    padding-right: .5rem;
+}
+
+button:hover, .akordeon-header:hover {
+    cursor: pointer;
+    color: var(--colorText);
+    background-color: var(--colorOverlay0);
+    background: linear-gradient(180deg,
+        var(--colorOverlay0) 0%,
+        var(--colorOverlay0) 65%,
+        var(--colorSurface2) 100%
+    );
+}
+
+button:active {
+    background-color: var(--colorSurface1);
+    background: linear-gradient(180deg,
+        var(--colorSurface1) 0%,
+        var(--colorSurface1) 65%,
+        var(--colorSurface0) 100%
+    );
+    color: var(--colorSubtext1);
+    border-color: var(--colorSurface2);
+    text-shadow: none;
+}
+
+pre {
+    border-radius: .4rem;
+    border: .2rem solid var(--colorSurface2);
+    background-color: var(--colorBase);
+    padding: .5rem;
+    margin: .5rem;
+    overflow: scroll;
+}
+
+.fixed25rem {
+    min-height: 25rem;
+    max-height: 25rem;
+}
+
+input[type="range"] {
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: var(--colorSurface0);
+    height: 1rem;
+    width: 100%;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 1rem;
+    height: 1rem;
+    background: var(--colorMauve);
+    cursor: pointer;
+}
+
+input[type="range"]::-moz-range-thumb {
+    width: 1rem;
+    height: 1rem;
+    background: var(--colorMauve);
+    cursor: pointer;
+}