docs/src/styles.css
/* Dark mode colors. */
:root {
	--sl-color-accent-low: #460b05;
	--sl-color-accent: #c60e00;
	--sl-color-accent-high: #feb3a6;
	--sl-color-white: #ffffff;
	--sl-color-gray-1: #efeded;
	--sl-color-gray-2: #c3c1c1;
	--sl-color-gray-3: #8e8a8a;
	--sl-color-gray-4: #5b5756;
	--sl-color-gray-5: #3b3737;
	--sl-color-gray-6: #292625;
	--sl-color-black: #191817;
}
/* Light mode colors. */
:root[data-theme='light'] {
	--sl-color-accent-low: #ffc8be;
	--sl-color-accent: #c90e00;
	--sl-color-accent-high: #640300;
	--sl-color-white: #191817;
	--sl-color-gray-1: #292625;
	--sl-color-gray-2: #3b3737;
	--sl-color-gray-3: #5b5756;
	--sl-color-gray-4: #8e8a8a;
	--sl-color-gray-5: #c3c1c1;
	--sl-color-gray-6: #efeded;
	--sl-color-gray-7: #f7f6f6;
	--sl-color-black: #ffffff;
}

.galery{
	display:flex;
	width:100%;
	height:auto;
	gap:10px;
	flex-wrap:wrap;
}
.galery picture{
	width:49%;
	height:auto;
	position:relative;
	cursor:pointer;
	margin:0 !important;
}
.galery picture img{
	width:100%;
	height:100%;
	object-fit:cover;
}
.galery picture span{
	font-family: monospace;
	font-size:1.1rem;
	font-weight:bold;
	position:absolute;
	top:50%;
	left:50%;
	opacity:0;
	transform:translate(-50%,-50%);
}
.galery picture:hover img{
	opacity: .1;
}
.galery picture:hover span{
	opacity:1;
}
:root{--b_t: rgb(2 2 2);--b_d: rgba(10, 10, 10, .8);--b_bg: rgba(255, 255, 255, 1);--b_svg: rgb(10 10 10 / .9);--b_br: rgba(100, 100, 100, .25);--t_an: 5s;--b_h: 0;--b_w: 350px;--b_x: 30px}html.dark{--b_t: rgba(10, 10, 10, .7);--b_d: rgba(100, 100, 100, .65);--b_bg: rgba(255, 255, 255, 1);--b_br: rgba(0, 0, 0, .05)}.b_p,.b_c,.b_p *,.b_c *{box-sizing:border-box;margin:0;padding:0}.b_p{z-index:10;position:fixed;padding:10px;--height-parent: 0px;width:var(--b_w);height:0}.b_p:hover{height:var(--height-parent)}.b_c{cursor:pointer;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;display:flex;align-items:center;gap:15px;padding:16px 17px;width:var(--b_w);overflow:hidden;height:fit-content;border:1px ridge var(--b_br);border-radius:7px;background-color:var(--b_bg);position:fixed;z-index:100;opacity:0;transition:.15s all;box-shadow:0 3px 10px #0a0a0a12}.b_c.timeline:before{transition:.15s ease width;opacity:1;bottom:0;left:0;position:absolute;content:"";height:2px;background:var(--b_svg, #111);width:100%}.b_c.timeline.init_count:before{animation:timeline var(--t_an) ease forwards;animation-duration:var(--t_an)}.b_c.active:nth-last-child(n+4),.b_c.pending.timeline:before,.b_c:nth-last-child(2)>div,.b_c:nth-last-child(3)>div,.b_c:nth-last-child(2)>span,.b_c:nth-last-child(3)>span,.b_c:nth-last-child(2)>.b_close,.b_c:nth-last-child(3)>.b_close{opacity:0;transition:.2s ease-in}.b_close{background:none;cursor:pointer;border:none;position:absolute;right:5px;top:5px}.b_close svg{width:15px;height:15px;fill:var(--b_t);opacity:.8}.b_p:hover .b_c:nth-last-child(2)>div,.b_p:hover .b_c:nth-last-child(3)>div,.b_p:hover .b_c:nth-last-child(2)>span,.b_p:hover .b_c:nth-last-child(3)>span,.b_p:hover .b_c:nth-last-child(2) .b_close,.b_p:hover .b_c:nth-last-child(3) .b_close,.b_p.expand .b_c:nth-last-child(2)>div,.b_p.expand .b_c:nth-last-child(3)>div,.b_p.expand .b_c:nth-last-child(2)>span,.b_p.expand .b_c:nth-last-child(3)>span,.b_p.expand .b_c:nth-last-child(2) .b_close,.b_p.expand .b_c:nth-last-child(3) .b_close,.b_close:hover svg,.b_c.active{opacity:1}.b_c.ease-in{transition-timing-function:ease-in!important}.b_c.ease-in-out{transition-timing-function:ease-in-out!important}.b_c.bound{transition-timing-function:cubic-bezier(1,.08,0,.96)!important}.b_c.bound-2{transition-timing-function:cubic-bezier(.55,-.57,.55,1.58)!important}.b_i{position:relative;height:22px;min-width:22px}.b_i svg{color:var(--b_svg);fill:currentColor;object-fit:cover;width:100%;height:100%}.b_t-c{position:relative;flex:1;line-height:1.4;display:flex;flex-direction:column}.b_t,.b_t_p{font-size:.92rem;font-weight:600;color:var(--b_t)}.b_d{color:var(--b_d);font-size:.91rem;overflow:hidden;text-overflow:ellipsis}.b_c.bottom{bottom:-70px}.b_p.bottom{bottom:var(--b_x)}.b_c.top{top:-70px}.b_p.top{top:var(--b_x)}.b_c.left,.b_p.left{left:var(--b_x)}.b_c.right,.b_p.right{right:var(--b_x)}.b_c.center,.b_p.center{left:calc(50vw - calc(var(--b_w) / 2))}.b_c.active.bottom{bottom:var(--b_x);--top: 30px}.b_c.active.top{top:var(--b_x);--top: 30px}.b_p:hover .b_c.active,.b_p.expand .b_c.active{opacity:1;height:var(--b_h)!important;scale:1!important}.b_p:hover .b_c.top.active,.b_p.expand .b_c.top.active{top:var(--top)!important}.b_p:hover .b_c.bottom.active,.b_p.expand .b_c.bottom.active{bottom:var(--top)!important}@keyframes timeline{to{width:0%}0%{width:100%}}.b_c.pending .b_t-c .b_t,.b_c.pending .b_t-c .b_d,.b_c.pending .b_i>svg,.complete .b_t_p,.complete.promise svg{opacity:0}.b_c.pending .b_i>svg{scale:.8}.b_t_p{position:absolute;top:50%;transform:translateY(-50%)}.promise{height:100%;width:100%;display:block;position:absolute;top:50%;transform:translateY(-50%)}.b_t,.b_i svg{transition:.3s cubic-bezier(.25,.1,1,1.97) all}.complete .b_i{animation:animate-svg .3s backwards}@keyframes animate-svg{0%{opacity:0;scale:.8}70%{opacity:1;scale:1.1}to{scale:1}}.b_c.info{--b_svg: rgb(14 105 190);--b_t: rgb(20 114 202);--b_d: rgb(24 96 139 / .8);--b_bg: rgb(245 252 255);--b_br: rgba(8, 145, 199, .35)}.b_c.warning{--b_svg: rgb(197 82 10);--b_t: rgb(160 62 0);--b_d: rgba(139, 85, 24, .8);--b_bg: rgb(255 248 235);--b_br: rgba(199, 84, 8, .3)}.b_c.error{--b_svg: rgb(199, 8, 8);--b_t: rgb(181, 5, 5, .9);--b_d: rgba(139, 24, 24, .8);--b_bg: rgb(255 245 245);--b_br: rgba(199, 8, 8, .3)}.b_c.success{--b_svg: rgb(37 169 44);--b_t: rgb(33 117 26);--b_d: rgb(51 117 38 / .8);--b_bg: rgb(246, 255, 250);--b_br: rgb(53 137 0 / .35)}.dark .b_c.info,:root[data-theme=dark] .b_c.info{--b_svg: rgb(47 130 206);--b_t: rgb(64 143 217);--b_d: rgb(113 191 238 / 80%);--b_bg: rgb(36 38 39);--b_br: rgb(32 77 95 / 35%)}.dark .b_c.warning,:root[data-theme=dark] .b_c.warning{--b_svg: rgb(212 104 36);--b_t: rgb(185 100 46);--b_d: rgb(220 150 72 / 80%);--b_bg: rgb(41 40 36);--b_br: rgb(133 100 9 / 30%)}.dark .b_c.error,:root[data-theme=dark] .b_c.error{--b_svg: rgb(208 59 59);--b_t: rgb(222 72 72 / 90%);--b_d: rgb(225 94 94 / 80%);--b_bg: rgb(41 37 37);--b_br: rgb(143 47 47 / 30%)}.dark .b_c.success,:root[data-theme=dark] .b_c.success{--b_svg: rgb(57 206 65);--b_t: rgb(85 185 76);--b_d: rgb(137 235 118 / 80%);--b_bg: rgb(44 47 45);--b_br: rgb(53 137 0 / 18%)}.dark .b_c,:root[data-theme=dark] .b_c{--b_bg: rgb(48 44 44);--b_d: rgb(227 227 227);--b_t: rgb(255 255 255);--b_svg: rgb(255 255 255)}@media (max-width: 768px){.b_c,.b_p{left:calc(50vw - calc(var(--b_w) / 2))}}.b_c.colors.info,:root[data-theme=dark] .colors.info{--b_bg:#39a7d5;--b_d:#eef7ff;--b_svg:#fff;--b_t:#fff}.b_c.warning.colors,:root[data-theme=dark] .colors.warning{--b_bg:#ff9048;--b_d:rgba(255,247,239,.9);--b_t:#fff;--b_svg:#fff}.b_c.error.colors,:root[data-theme=dark] .colors.error{--b_bg:#c43030;--b_d:rgba(238,247,255,.8);--b_t:#fff;--b_svg:#fff}.b_c.success.colors,:root[data-theme=dark] .colors.success{--b_bg:#29ad41;--b_d:rgba(248,255,247,.96);--b_t:#fff;--b_svg:#fff}.b_c.gradient{border:none}.b_c.gradient.info{--b_t:#0a0a0a;--b_svg:#30a0cf;background:linear-gradient(60deg,#cde3fb,#fff 20%)}.b_c.warning.gradient{--b_t:#0a0a0a;--b_svg:#a25700;background:linear-gradient(60deg,#fbe1cd,#fff 20%)}.b_c.error.gradient{--b_t:#0a0a0a;--b_svg:#a20000;background:linear-gradient(60deg,#fbcdcd,#fff 20%)}.b_c.success.gradient{--b_t:#0a0a0a;--b_svg:#00a25b;background:linear-gradient(60deg,#cdfbcf,#fff 20%)}.dark .gradient{--b_t:#fff!important}.dark .gradient.success,:root[data-theme=dark] .success.gradient{--b_d:rgba(239,255,244,.82);--b_svg:#00a25b;background:linear-gradient(80deg,#254626,#252726 22%)}.dark .gradient.error,:root[data-theme=dark] .error.gradient{--b_d:hsla(0,100%,98%,.83);--b_svg:#cb3535;background:linear-gradient(80deg,#4a1f1f,#2b2424 22%)}.dark .gradient.warning,:root[data-theme=dark] .warning.gradient{--b_d:rgba(255,250,236,.8);--b_svg:#d9a30b;background:linear-gradient(80deg,#53451a,#2b2823 22%)}.dark .gradient.info,:root[data-theme=dark] .info.gradient{--b_d:rgba(237,248,255,.7);--b_svg:#30a0cf;background:linear-gradient(80deg,#2a4551,#212425 22%)}.b_c.light{border:none;box-shadow:0 3px 10px #0a0a0a1a}.b_c.light.info{--b_svg:#30a0cf}.b_c.light.info,.b_c.warning.light{--b_bg:#fff;--b_d:#787878;--b_t:#282828}.b_c.warning.light{--b_svg:#c86022}.b_c.error.light{--b_svg:#cd3535}.b_c.error.light,.b_c.success.light{--b_bg:#fff;--b_d:#787878;--b_t:#282828}.b_c.success.light{--b_svg:#4caf50}.dark .b_c.light,:root[data-theme=dark] .b_c.light{--b_bg:#302c2c;--b_d:#e3e3e3;--b_t:#fff}.b_c.chackra{border:none;box-shadow:0 3px 12px #0a0a0a08}.b_c.chackra.info{--b_bg:#c7f5ff;--b_d:rgba(6,47,58,.8);--b_svg:#30a0cf;--b_t:#062f3a}.b_c.warning.chackra{--b_bg:#ffe2ae;--b_d:rgba(72,37,3,.8);--b_t:#482503;--b_svg:#a25700}.b_c.error.chackra{--b_bg:#ffd4d4;--b_d:rgba(67,6,6,.8);--b_t:#430606;--b_svg:#a20000}.b_c.success.chackra{--b_bg:#c6ffe5;--b_d:rgba(3,69,39,.8);--b_t:#034527;--b_svg:#00a25b}.dark .success.chackra,:root[data-theme=dark] .success.chackra{--b_bg:#1f2924;--b_t:#46e47b;--b_d:rgba(70,228,123,.65)}.dark .error.chackra,:root[data-theme=dark] .error.chackra{--b_bg:#342020;--b_d:hsla(0,88%,70%,.8);--b_t:#f66d6d;--b_svg:#c33535}.dark .info.chackra,:root[data-theme=dark] .info.chackra{--b_bg:#1d2c30;--b_d:rgba(134,208,228,.7);--b_t:#86d0e4}.dark .warning.chackra,:root[data-theme=dark] .warning.chackra{--b_bg:#302418;--b_d:hsla(30,71%,73%,.7);--b_t:#ebba8a;--b_svg:#d57200}
