Akordeon prawie działa

2025-09-21 21:53:34 +02:00
parent cfbea5f2f4
commit af44dc6be9
6 changed files with 236 additions and 277 deletions
--- a/assets/css/baza.css
+++ b/assets/css/baza.css
@@ -0,0 +1,153 @@
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
+
+/* Paleta kolorów: https://catppuccin.com/palette/ */
+* {
+    --colorRosewater: #f5e0dc;
+    --colorFlamingo: #f2cdcd;
+    --colorPink: #f5c2e7;
+    --colorMauve: #cba6f7;
+    --colorRed: #f38ba8;
+    --colorMaroon: #eba0ac;
+    --colorPeach: #fab387;
+    --colorYellow: #f9e2af;
+    --colorGreen: #a6e3a1;
+    --colorTeal: #94e2d5;
+    --colorSky: #89dceb;
+    --colorSaphire: #74c7ec;
+    --colorBlue: #89b4fa;
+    --colorLavender: #b4befe;
+    --colorText: #cdd6f4;
+    --colorSubtext1: #bac2de;
+    --colorSubtext0: #a6adc8;
+    --colorOverlay2: #9399b2;
+    --colorOverlay1: #7f849c;
+    --colorOverlay0: #6c7086;
+    --colorSurface2: #585b70;
+    --colorSurface1: #45475a;
+    --colorSurface0: #313244;
+    --colorBase: #1e1e2e;
+    --colorMantle: #181825;
+    --colorCrust: #11111b;
+}
+
+/* Ważne */
+html {
+    font-family: "Ubuntu", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 14pt;
+    color: var(--colorSubtext1);
+}
+
+body {
+    padding: 0%;
+    margin: 0%;
+    user-select: none;    
+}
+
+h1, h2, h3, h4, h5, h6 {
+    margin: 0%;
+}
+
+/* Linki */
+a, a:visited {
+    font-size: large;
+    text-decoration: none;
+    color: var(--colorBlue);
+}
+
+a:hover, a:focus {
+    outline: none;
+    text-underline-offset: 4px;
+    text-decoration: underline 2px var(--colorLavender);
+    color: var(--colorLavender);
+}
+
+/* Przyciski i input */
+input, button {
+    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 {
+    outline: none;
+    border-color: var(--colorOverlay0);
+}
+
+button {
+    padding-top: .35rem;
+    padding-bottom: .35rem;
+    padding-left: .5rem;
+    padding-right: .5rem;
+}
+
+button: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;
+}
+
+/* kod */
+pre.kod {
+    border-radius: .4rem;
+    border: .2rem solid var(--colorSurface2);
+    background-color: var(--colorBase);
+    padding: .5rem;
+    margin: .5rem;
+    overflow: scroll;
+}
+
+/* Range */
+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;
+}