198 lines
3.8 KiB
CSS
198 lines
3.8 KiB
CSS
@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, p {
|
|
margin: 0%;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
ol, ul {
|
|
margin: 0%;
|
|
padding: 0%;
|
|
padding-left: .5rem;
|
|
}
|
|
|
|
overflow-x-auto {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
@media (width: 600px) {
|
|
h1 {
|
|
font-size: initial;
|
|
}
|
|
h2 {
|
|
font-size: initial;
|
|
}
|
|
h3 {
|
|
font-size: initial;
|
|
}
|
|
h4 {
|
|
font-size: initial;
|
|
}
|
|
}
|
|
|
|
/* 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,
|
|
input[type="submit"]: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,
|
|
input[type="submit"]: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;
|
|
} |