Akordeon prawie działa
This commit is contained in:
Dark Steveneq
@@ -1,58 +1,5 @@
|
||||
@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');
|
||||
|
||||
|
||||
body {
|
||||
padding: 0%;
|
||||
margin: 0%;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0%;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
@import url('baza.css');
|
||||
|
||||
/* Tło */
|
||||
@keyframes GradientScroll {
|
||||
@@ -60,7 +7,7 @@ h1, h2, h3, h4, h5, h6 {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
background-position: 400% 200%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
@@ -68,12 +15,6 @@ h1, h2, h3, h4, h5, h6 {
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: "Ubuntu", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14pt;
|
||||
|
||||
color: var(--colorSubtext1);
|
||||
background-color: var(--colorMantle);
|
||||
background: linear-gradient(-45deg,
|
||||
var(--colorMauve) 0%,
|
||||
@@ -82,8 +23,8 @@ html {
|
||||
var(--colorBlue) 75%,
|
||||
var(--colorBlue) 100%
|
||||
);
|
||||
background-size: 400vw 200vh;
|
||||
animation: GradientScroll 5s ease infinite;
|
||||
background-size: 1000vw 1000vh;
|
||||
animation: GradientScroll 40s ease infinite;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
@@ -180,111 +121,15 @@ footer div div ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Akordeon */
|
||||
.akordeon {
|
||||
width: 100%;
|
||||
/* Dodatkowe */
|
||||
.flex-row {
|
||||
flex-grow: 1;
|
||||
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;
|
||||
flex-direction: row;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
Reference in New Issue
Block a user