MediaWiki:Common.css
Przejdź do nawigacji
Przejdź do wyszukiwania
Uwaga: aby zobaczyć zmiany po zapisaniu, może zajść potrzeba wyczyszczenia pamięci podręcznej przeglądarki.
- Firefox / Safari: Przytrzymaj Shift podczas klikania Odśwież bieżącą stronę, lub naciśnij klawisze Ctrl+F5 lub Ctrl+R (⌘-R na komputerze Mac)
- Google Chrome: Naciśnij Ctrl-Shift-R (⌘-Shift-R na komputerze Mac)
- Internet Explorer / Edge: Przytrzymaj Ctrl, jednocześnie klikając Odśwież, lub naciśnij klawisze Ctrl+F5
- Opera: Naciśnij klawisze Ctrl+F5.
/* Umieszczony tutaj kod CSS zostanie zastosowany we wszystkich skórkach */
body {
background-color: #1e1e1e !important;
}
body #p-logo a {
background-image: url(https://wiki.endore.pl/images/f/fe/Wikilogofinal.gif) !important;
border-radius: 50%;
}
ul {
list-style-type: disc;
list-style-image: none;
}
.logo-wrapper {
position: relative;
width: 350px;
height: 350px;
margin: 0 auto;
}
/* === UKŁAD PODSTAWOWY: duże ekrany === */
.portal-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
margin-top: 25px;
}
/* Uporządkowanie elementów */
.logo-left-wrapper { order: 1; }
.logo-wrapper { order: 2; } /* CENTER */
.logo-right-wrapper { order: 3; }
/* === UKŁAD 2: ŚREDNIE EKRANY === */
/* center na górę, left + right pod spodem */
@media (max-width: 1200px) {
.portal-grid {
grid-template-columns: 1fr 1fr; /* 2 kolumny */
}
.logo-wrapper {
grid-column: span 2; /* center na pełną szerokość */
order: 1;
}
.logo-left-wrapper {
order: 2;
}
.logo-right-wrapper {
order: 3;
}
}
/* === UKŁAD 3: MAŁE EKRANY — left i right znikają === */
@media (max-width: 768px) {
.logo-left-wrapper,
.logo-right-wrapper {
display: none;
}
.portal-grid {
grid-template-columns: 1fr; /* tylko center */
}
}
/* Obracający się obrazek, np. w logo lub dowolnym miejscu */
.rotating-logo {
width: 350px;
height: 350px;
margin: 0 auto;
background-image: url("https://wiki.endore.pl/images/2/23/Main_page_header_circular_inscription.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0;
pointer-events: none;
filter: invert(1) brightness(0.76);
animation-name: fadeAfterEnter, spin;
animation-duration: 1.5s, 60s;
animation-timing-function: ease, linear;
animation-delay: 6.5s, 0s; /* fade-in po enter-logo, spin od razu */
animation-fill-mode: forwards, none;
animation-iteration-count: 1, infinite;
}
/* Definicja animacji */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Statyczny górny obraz */
.upper-logo {
position: absolute;
top: 35%;
left: 50%;
width: 200px;
height: 28px;
background-image: url("https://wiki.endore.pl/images/1/15/The_Fellowship_of_the_Ring_silhouette.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
transform: translate(-50%, -50%);
pointer-events: none;
filter: invert(1) brightness(0.46);
}
/* Statyczny dolny obraz */
.bottom-logo {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 48px;
background-image: url("https://wiki.endore.pl/images/c/c5/Endore_wordmark_-_no_underline.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
transform: translate(-50%, -50%);
pointer-events: none;
filter: invert(1) brightness(0.96);
}
/* Logo tekst */
.logo-text {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
color: #F5DEB3;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* lekki cień dla kontrastu */
pointer-events: none;
font-family: "Lora", "Lora-fallback", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
white-space: nowrap;
}
.mapa-block {
border-radius: 12px;
box-shadow: 0 0 15px rgba(0,0,0,1);
padding: 15px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(20, 20, 20, 0.8);
}
.mapa-block img {
/* Efekt glow */
box-shadow: 0 0 15px rgba(255, 215, 0, 0.7), 0 0 30px rgba(255, 215, 0, 0.4);
/* Alternatywnie drop-shadow: */
/* filter: drop-shadow(0 0 10px gold); */
transition: transform 0.3s, box-shadow 0.3s;
}
/* Efekt na hover */
.mapa-block img:hover {
/* transform: scale(1.05); */
box-shadow: 0 0 25px rgba(255, 215, 0, 0.9), 0 0 40px rgba(255, 215, 0, 0.6);
}
.logo-left-wrapper {
position: relative;
width: 350px;
height: 350px;
margin: 0 auto;
}
.logo-right-wrapper {
position: relative;
width: 350px;
height: 350px;
margin: 0 auto;
}
.logo-left {
width: 170px;
height: 170px;
margin: 20px auto 0 auto;
background-image: url("https://wiki.endore.pl/images/f/ff/Gondor1.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.logo-right {
width: 170px;
height: 170px;
margin: 20px auto 0 auto;
background-image: url("https://wiki.endore.pl/images/8/81/Umbar1.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.logo-left, .logo-right {
border-radius: 50%;
z-index: 2;
}
/* miękka aura */
.logo-left::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
width: 170px;
height: 170px;
margin: 20px auto 0 auto;
box-shadow:
0 0 15px rgba(180, 200, 255, 0.8),
0 0 35px rgba(150, 180, 255, 0.6),
0 0 60px rgba(120, 160, 255, 0.4);
}
.logo-right::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
width: 170px;
height: 170px;
margin: 20px auto 0 auto;
box-shadow:
0 0 15px rgba(255, 200, 120, 0.75),
0 0 35px rgba(255, 170, 70, 0.6),
0 0 60px rgba(220, 160, 90, 0.45);
}
.bottom-logo-left {
position: absolute;
top: 70%;
left: 50%;
width: 250px;
height: 75px;
background-image: url("https://wiki.endore.pl/images/5/5f/Gondor_wordmark.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
transform: translate(-50%, -50%);
filter: invert(1) brightness(0.96);
}
.bottom-logo-right {
position: absolute;
top: 70%;
left: 50%;
width: 250px;
height: 75px;
background-image: url("https://wiki.endore.pl/images/6/6b/Umbar_wordmark.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
transform: translate(-50%, -50%);
filter: invert(1) brightness(0.96);
}
.enter-logo {
position: absolute;
top: 50%;
left: 50%;
width: 450px;
height: 158px;
background-image: url("https://wiki.endore.pl/images/d/dc/Takeside_wordmark.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
transform: translate(-50%, -50%);
filter: invert(1) brightness(0.96);
}
.logo-left, .logo-right {
opacity: 0;
animation: fadein 5s ease forwards;
}
.bottom-logo-left, .bottom-logo-right {
opacity: 0;
animation: fadein 5s ease forwards;
animation-delay: 1.5s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
.enter-logo {
opacity: 0;
animation: enterFade 5s ease forwards;
animation-delay: 1.5s; /* start razem z bottom-logo */
}
@keyframes enterFade {
0% { opacity: 0; }
40% { opacity: 1; } /* koniec fade-in */
80% { opacity: 1; } /* koniec widoczności */
100% { opacity: 0; } /* fade-out */
}
/* fade-in reszty elementów po enter-logo */
.upper-logo,
.bottom-logo,
.logo-text {
opacity: 0;
animation: fadeAfterEnter 1.5s ease forwards;
animation-delay: 6.5s; /* start po zakończeniu enter-logo */
}
@keyframes fadeAfterEnter {
from { opacity: 0; }
to { opacity: 1; }
}
.inprogress, .inprogress a {
color: #ff7b7b !important;
text-shadow: 0 0 6px rgba(255, 50, 50, 0.7);
font-weight: bold;
animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
0% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.75;
transform: scale(1.03);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* sidebar */
#t-whatlinkshere, #t-recentchangeslinked, #t-print, #t-permalink, #t-specialpages, #t-info { display:none; }
/* SNOWFLAKES */
.snowflakes {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 0;
pointer-events: none;
z-index: 9999;
}
.snowflake {
color: #fff;
font-size: 1.4em;
font-family: Arial, sans-serif;
text-shadow: 0 0 1px #000;
position: fixed;
top: -10%;
user-select: none;
cursor: default;
animation-name: snowflakes-fall, snowflakes-shake;
animation-duration: 8s, 3s;
animation-timing-function: linear, ease-in-out;
animation-iteration-count: infinite, infinite;
}
/* Fall animation */
@keyframes snowflakes-fall {
0% { top: -10%; }
100% { top: 100%; }
}
/* Horizontal waving */
@keyframes snowflakes-shake {
0% { transform: translateX(0px); }
50% { transform: translateX(80px); }
100% { transform: translateX(0px); }
}
/* Randomization per flake */
.snowflake:nth-of-type(1) { left: 10%; animation-delay: 1s, 1s; }
.snowflake:nth-of-type(2) { left: 20%; animation-delay: 6s, 0.5s; }
.snowflake:nth-of-type(3) { left: 30%; animation-delay: 4s, 2s; }
.snowflake:nth-of-type(4) { left: 40%; animation-delay: 2s, 2s; }
.snowflake:nth-of-type(5) { left: 50%; animation-delay: 8s, 3s; }
.snowflake:nth-of-type(6) { left: 60%; animation-delay: 6s, 2s; }
.snowflake:nth-of-type(7) { left: 70%; animation-delay: 2.5s, 1s; }
.snowflake:nth-of-type(8) { left: 80%; animation-delay: 1s, 0s; }
.snowflake:nth-of-type(9) { left: 90%; animation-delay: 3s, 1.5s; }
.snowflake:nth-of-type(10) { left: 5%; animation-delay: 0s, 0s; }
.snowbox1, .snowbox2, .snowbox3, .snowbox4, .snowbox5, .snowbox6, .snowbox7, .snowbox8, .snowbox9 {
position: relative;
}
.snowbox1::before {
content: "";
position: absolute;
top: -20px;
left: 0;
width: 295px;
height: 54px;
background-image: url(https://wiki.endore.pl/images/6/66/Snowcap1.png);
background-repeat: no-repeat;
background-position: left top;
background-size: contain;
pointer-events: none;
}
.snowbox2::before {
content: "";
position: absolute;
top: -20px;
left: 0;
width: 140px;
height: 37px;
background-image: url(https://wiki.endore.pl/images/e/e7/Snowcap3.png);
background-repeat: no-repeat;
background-position: left top;
background-size: contain;
pointer-events: none;
}
.snowbox3::before {
content: "";
position: absolute;
top: -20px;
right: 0;
width: 143px;
height: 39px;
background-image: url(https://wiki.endore.pl/images/e/eb/Snowcap7.png);
background-repeat: no-repeat;
background-position: right top;
background-size: contain;
pointer-events: none;
}
.snowbox4::before {
content: "";
position: absolute;
top: -20px;
left: 0;
width: 220px;
height: 58px;
background-image: url(https://wiki.endore.pl/images/7/70/Snowcap5.png);
background-repeat: no-repeat;
background-position: left top;
background-size: contain;
pointer-events: none;
}
.snowbox5::before {
content: "";
position: absolute;
top: -8px;
right: -8px;
width: 48px;
height: 41px;
background-image: url(https://wiki.endore.pl/images/d/db/Snowcap6.png);
background-repeat: no-repeat;
background-position: right top;
background-size: contain;
pointer-events: none;
}
.snowbox6::before {
content: "";
position: absolute;
top: -27px;
left: 0;
width: 106px;
height: 43px;
background-image: url(https://wiki.endore.pl/images/1/1b/Snowcap8.png);
background-repeat: no-repeat;
background-position: left top;
background-size: contain;
pointer-events: none;
}
.snowbox7::before {
content: "";
position: absolute;
top: -20px;
right: 0;
width: 57px;
height: 36px;
background-image: url(https://wiki.endore.pl/images/6/6e/Snowcap2.png);
background-repeat: no-repeat;
background-position: right top;
background-size: contain;
pointer-events: none;
}
.snowbox8::before {
content: "";
position: absolute;
top: -20px;
left: 0;
width: 74px;
height: 33px;
background-image: url(https://wiki.endore.pl/images/b/bf/Snowcap4.png);
background-repeat: no-repeat;
background-position: left top;
background-size: contain;
pointer-events: none;
}
.lightrope-wrapper {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto;
white-space: nowrap;
top: -30px;
}
.lightrope {
position: relative;
top: 0;
left: 0;
padding: 0;
margin: 0 auto;
text-align: center;
overflow: hidden;
pointer-events: none;
height: 77px;
}
.lightrope li {
list-style: none;
display: inline-block;
width: 12px;
height: 28px;
margin: 20px;
border-radius: 50%;
position: relative;
background: rgba(0,247,165,1);
box-shadow: 0px 4px 24px 3px rgba(0,247,165,1);
transform-origin: top center;
animation: flash-1 2s infinite both, sway 3s ease-in-out infinite;;
}
/* 2n+1 */
.lightrope li:nth-child(2n+1) {
background: rgba(0,255,255,1);
box-shadow: 0px 4px 24px 3px rgba(0,255,255,0.5);
animation: flash-2 0.4s infinite both, sway 2.7s ease-in-out infinite;;
}
/* 4n+2 */
.lightrope li:nth-child(4n+2) {
background: rgba(247,0,148,1);
box-shadow: 0px 4px 24px 3px rgba(247,0,148,1);
animation: flash-3 1.1s infinite both, sway 3.3s ease-in-out infinite;;
}
/* Dodatkowe nieregularności */
.lightrope li:nth-child(odd) { animation-duration: 1.8s; }
.lightrope li:nth-child(3n+1) { animation-duration: 1.4s; }
/* Trzonek */
.lightrope li:before {
content: "";
position: absolute;
top: -4px;
left: 1px;
width: 10px;
height: 10px;
background: #222;
border-radius: 3px;
}
/* Wiszący kabel */
.lightrope li:after {
content: "";
position: absolute;
top: -14px;
left: 9px;
width: 52px;
height: 20px;
border-bottom: 2px solid #222;
border-radius: 50%;
}
.lightrope li:last-child:after {
content: none;
}
/* Animacje */
@keyframes flash-1 {
0%, 100% { background: rgba(0,247,165,1); box-shadow: 0px 4px 24px 3px rgba(0,247,165,1); }
50% { background: rgba(0,247,165,0.4); box-shadow: 0px 4px 24px 3px rgba(0,247,165,0.2); }
}
@keyframes flash-2 {
0%, 100% { background: rgba(0,255,255,1); box-shadow: 0px 4px 24px 3px rgba(0,255,255,1); }
50% { background: rgba(0,255,255,0.4); box-shadow: 0px 4px 24px 3px rgba(0,255,255,0.2); }
}
@keyframes flash-3 {
0%, 100% { background: rgba(247,0,148,1); box-shadow: 0px 4px 24px 3px rgba(247,0,148,1); }
50% { background: rgba(247,0,148,0.4); box-shadow: 0px 4px 24px 3px rgba(247,0,148,0.2); }
}
@keyframes sway {
0% { transform: rotate(-4deg); }
50% { transform: rotate(4deg); }
100% { transform: rotate(-4deg); }
}
/* =====================================================
TOGGLE TEKSTU – MediaWiki, CSS-only
===================================================== */
/* Kotwice na górze - scroll-margin-top: 0 zapewnia scroll dokładnie do góry */
.top-anchor {
display: block;
scroll-margin-top: 0;
position: relative;
top: -100vh; /* Przesuwa wizualnie w górę viewportu */
height: 1px;
}
/* 1. Domyślnie: wszystko ukryte */
.toggle {
display: none;
}
/* 2. Pokaż dokładnie ten element, który jest :target */
#t1:target ~ .t1,
#t2:target ~ .t2 {
display: block;
}
/* 3. Fallback:
jeśli NIE MA #hash w URL → pokaż pierwszy toggle */
body:not(:target) .toggle:first-of-type {
display: block;
}
@layer fantasy-btn, fantasy-presets;
@layer fantasy-presets {
.fantasy-bone-n-coper {
cursor: pointer;
--text-color: #aa9b79;
--text-shadow: calc(1.5px * var(--scale) / 4.5)
calc(-1.5px * var(--scale) / 4.5)
calc(1.5px * var(--scale) / 4.5)
#fffcf2,
calc(-1.5px * var(--scale) / 4.5)
calc(1.5px * var(--scale) / 4.5)
calc(1.5px * var(--scale) / 4.5)
#160500;
--border-bg: linear-gradient(
to bottom,
#bdab8c,
#aa9b79 49%,
#735b41 51%,
#766652
);
--inlay-hover-opacity: 0.75;
--border-hover-opacity: 0.75;
--border-focus-bg: repeating-conic-gradient(
#bdab8c 0deg 30deg,
#766652 30deg 60deg
);
--inlay-bg: radial-gradient(
at center 150%,
#fffcf2, transparent 35%
) 50% 0% / 150% 25% no-repeat,
radial-gradient(
at center -25%,
#501608, transparent 35%
) 50% 100% / 150% 25% no-repeat,
linear-gradient(
to bottom,
#2c201b,
#895648 24%,
#422419 26% 49%,
#291208 49% 74%,
#160500 76%,
#1a0801
);
}
}
@layer fantasy-btn {
[class*="fantasy-btn"] {
isolation: isolate;
position: relative;
box-sizing: border-box;
background: transparent;
outline: none;
border: none;
--s: (var(--scale) / 4.5);
font-size: calc(60px * var(--s));
font-family: serif;
min-width: calc(280px * var(--s));
min-height: calc(200px * var(--s));
padding-inline: calc(95px * var(--s));
padding-block: calc(51px * var(--s));
}
.fantasy-btn-xs { --scale: 0.5; }
.fantasy-btn-sm { --scale: 0.75; }
.fantasy-btn, .fantasy-btn-md { --scale: 1; }
.fantasy-btn-lg { --scale: 1.25; }
.fantasy-btn-xl { --scale: 1.5; }
.fantasy-btn-2xl { --scale: 2; }
.fantasy-btn-3xl { --scale: 3; }
[class*="fantasy-btn"] {
--_text-base-color: var(--text-color);
--_text-hover-color: var(--text-hover-color, var(--_text-base-color));
--_text-focus-color: var(--text-focus-color, var(--_text-hover-color));
--_text-active-color: var(--text-active-color, var(--_text-focus-color));
--_text-state-color: var(--_text-base-color);
color: var(--_text-state-color);
--_text-base-shadow: var(--text-shadow);
--_text-hover-shadow: var(--text-hover-shadow, var(--_text-base-shadow));
--_text-focus-shadow: var(--text-focus-shadow, var(--_text-hover-shadow));
--_text-active-shadow: var(--text-active-shadow, var(--_text-focus-shadow));
--_text-state-shadow: var(--_text-base-shadow);
text-shadow: var(--_text-state-shadow);
--_outline-base-color: var(--outline-color, currentColor);
--_outline-hover-color: var(--outline-hover-color, var(--_outline-base-color));
--_outline-focus-color: var(--outline-focus-color, var(--_outline-hover-color));
--_outline-active-color: var(--outline-active-color, var(--_outline-focus-color));
--_outline-state-color: var(--_outline-base-color);
--_outline-base-size: var(--outline-size, 0px);
--_outline-hover-size: var(--outline-hover-size, calc(5px * var(--s)));
--_outline-focus-size: var(--outline-focus-size, var(--_outline-hover-size));
--_outline-active-size: var(--outline-active-size, var(--_outline-focus-size));
--_outline-state-size: var(--_outline-base-size);
--_outline-base-offset: var(--outline-offset, 0px);
--_outline-hover-offset: var(--outline-hover-offset, calc(15px * var(--s)));
--_outline-focus-offset: var(--outline-focus-offset,
var(--_outline-hover-offset)
);
--_outline-active-offset: var(--outline-active-offset,
var(--_outline-focus-offset)
);
--_outline-state-offset: var(--_outline-base-offset);
--_outline-base-style: var(--outline-style, none);
--_outline-hover-style: var(--outline-hover-style, var(--_outline-base-style));
--_outline-focus-style: var(--outline-focus-style, solid);
--_outline-active-style: var(--outline-active-style, var(--_outline-focus-style));
--_outline-state-style: var(--_outline-base-style);
outline: var(--_outline-state-size) var(--_outline-state-style) var(--_outline-state-color);
outline-offset: var(--_outline-state-offset);
}
.fantasy-btn-xl,
.fantasy-btn-2xl,
.fantasy-btn-3xl {
--_outline-hover-offset: var(--outline-hover-offset,
calc(-68px * var(--s))
);
}
[class*="fantasy-btn"]:hover {
--_text-state-color: var(--_text-hover-color);
--_text-state-shadow: var(--_text-hover-shadow);
--_outline-state-size: var(--_outline-hover-size);
--_outline-state-style: var(--_outline-hover-style);
--_outline-state-color: var(--_outline-hover-color);
--_outline-state-offset: var(--_outline-hover-offset);
}
[class*="fantasy-btn"]:focus {
--_text-state-color: var(--_text-focus-color);
--_text-state-shadow: var(--_text-focus-shadow);
--_outline-state-size: var(--_outline-focus-size);
--_outline-state-style: var(--_outline-focus-style);
--_outline-state-color: var(--_outline-focus-color);
--_outline-state-offset: var(--_outline-focus-offset);
}
[class*="fantasy-btn"]:active {
--_text-state-color: var(--_text-active-color);
--_text-state-shadow: var(--_text-active-shadow);
--_outline-state-size: var(--_outline-active-size);
--_outline-state-style: var(--_outline-active-style);
--_outline-state-color: var(--_outline-active-color);
--_outline-state-offset: var(--_outline-active-offset);
}
[class*="fantasy-btn"]::after {
--_border-base-opacity: var(--border-opacity, 1);
--_border-hover-opacity: var(--border-hover-opacity,
var(--_border-base-opacity)
);
--_border-focus-opacity: var(--border-focus-opacity,
var(--_border-hover-opacity)
);
--_border-active-opacity: var(--border-active-opacity,
var(--_border-focus-opacity)
);
--_border-state-opacity: var(--_border-base-opacity);
--_border-base-bg: var(--border-bg, currentColor);
--_border-hover-bg: var(--border-hover-bg, var(--_border-base-bg));
--_border-focus-bg: var(--border-focus-bg, var(--_border-hover-bg));
--_border-active-bg: var(--border-active-bg, var(--_border-focus-bg));
--_border-state-bg: var(--_border-base-bg);
}
[class*="fantasy-btn"]:hover::after {
--_border-state-opacity: var(--_border-hover-opacity);
--_border-state-bg: var(--_border-hover-bg);
}
[class*="fantasy-btn"]:focus::after {
--_border-state-opacity: var(--_border-focus-opacity);
--_border-state-bg: var(--_border-focus-bg);
}
[class*="fantasy-btn"]:active::after {
--_border-state-opacity: var(--_border-active-opacity);
--_border-state-bg: var(--_border-active-bg);
}
[class*="fantasy-btn"]::before {
--_inlay-base-opacity: var(--inlay-opacity, 1);
--_inlay-hover-opacity: var(--inlay-hover-opacity,
var(--_inlay-base-opacity)
);
--_inlay-focus-opacity: var(--inlay-focus-opacity,
var(--_inlay-hover-opacity)
);
--_inlay-active-opacity: var(--inlay-active-opacity,
var(--_inlay-focus-opacity)
);
--_inlay-state-opacity: var(--_inlay-base-opacity);
--_inlay-base-bg: var(--inlay-bg, #8888);
--_inlay-hover-bg: var(--inlay-hover-bg, var(--_inlay-base-bg));
--_inlay-focus-bg: var(--inlay-focus-bg, var(--_inlay-hover-bg));
--_inlay-active-bg: var(--inlay-active-bg, var(--_inlay-focus-bg));
--_inlay-state-bg: var(--_inlay-base-bg);
}
[class*="fantasy-btn"]:hover::before {
--_inlay-state-opacity: var(--_inlay-hover-opacity);
--_inlay-state-bg: var(--_inlay-hover-bg);
}
[class*="fantasy-btn"]:focus::before {
--_inlay-state-opacity: var(--_inlay-focus-opacity);
--_inlay-state-bg: var(--_inlay-focus-bg);
}
[class*="fantasy-btn"]:active::before {
--_inlay-state-opacity: var(--_inlay-active-opacity);
--_inlay-state-bg: var(--_inlay-active-bg);
}
[class*="fantasy-btn"]::before,
[class*="fantasy-btn"]::after {
content: "";
position: absolute;
inset: 0px;
box-sizing: border-box;
pointer-events: none;
z-index: -1;
}
[class*="fantasy-btn"]::before {
background: var(--_inlay-state-bg);
opacity: var(--_inlay-state-opacity);
clip-path: polygon(
calc(50px * var(--s)) calc(82px * var(--s)),
calc(114px * var(--s)) calc(18px * var(--s)),
calc(100% - 114px * var(--s)) calc(18px * var(--s)),
calc(100% - 50px * var(--s)) calc(82px * var(--s)),
calc(100% - 50px * var(--s)) calc(100% - 82px * var(--s)),
calc(100% - 114px * var(--s)) calc(100% - 18px * var(--s)),
calc(114px * var(--s)) calc(100% - 18px * var(--s)),
calc(50px * var(--s)) calc(100% - 82px * var(--s))
);
}
[class*="fantasy-btn"]::after {
background: var(--_border-state-bg);
opacity: var(--_border-state-opacity);
clip-path: polygon(
/* home */
calc(37px * var(--s)) calc(44px * var(--s)),
/* jump union point */
calc(52px * var(--s)) calc(29px * var(--s)),
calc(61px * var(--s)) calc(18px * var(--s)),
calc(82.5px * var(--s)) calc(39.5px * var(--s)),
calc(61px * var(--s)) calc(61px * var(--s)),
0px 0px,
calc(77px * var(--s)) 0px,
calc(90px * var(--s)) calc(13px * var(--s)),
calc(103px * var(--s)) 0px,
calc(100% - 103px * var(--s)) 0px,
calc(100% - 90px * var(--s)) calc(13px * var(--s)),
calc(100% - 77px * var(--s)) 0px,
100% 0px,
calc(100% - 61px * var(--s)) calc(61px * var(--s)),
calc(100% - 82.5px * var(--s)) calc(39.5px * var(--s)),
calc(100% - 61px * var(--s)) calc(18px * var(--s)),
/*... -x union point, jump ...*/
calc(100% - 52px * var(--s)) calc(29px * var(--s)),
calc(100% - 37px * var(--s)) calc(44px * var(--s)),
calc(100% - 24.5px * var(--s)) calc(56.5px * var(--s)),
calc(100% - 32.5px * var(--s)) calc(64.5px * var(--s)),
calc(100% - 32.5px * var(--s)) calc(100% - 64.5px * var(--s)),
calc(100% - 24.5px * var(--s)) calc(100% - 56.5px * var(--s)),
calc(100% - 37px * var(--s)) calc(100% - 44px * var(--s)),
calc(100% - 52px * var(--s)) calc(100% - 29px * var(--s)),
calc(100% - 61px * var(--s)) calc(100% - 18px * var(--s)),
calc(100% - 82.5px * var(--s)) calc(100% - 39.5px * var(--s)),
calc(100% - 61px * var(--s)) calc(100% - 61px * var(--s)),
100% 100%,
calc(100% - 77px * var(--s)) 100%,
calc(100% - 90px * var(--s)) calc(100% - 13px * var(--s)),
calc(100% - 103px * var(--s)) 100%,
calc(103px * var(--s)) 100%,
calc(90px * var(--s)) calc(100% - 13px * var(--s)),
calc(77px * var(--s)) 100%,
0px 100%,
calc(61px * var(--s)) calc(100% - 61px * var(--s)),
calc(82.5px * var(--s)) calc(100% - 39.5px * var(--s)),
calc(61px * var(--s)) calc(100% - 18px * var(--s)),
calc(52px * var(--s)) calc(100% - 29px * var(--s)),
calc(37px * var(--s)) calc(100% - 44px * var(--s)),
calc(24.5px * var(--s)) calc(100% - 56.5px * var(--s)),
calc(32.5px * var(--s)) calc(100% - 64.5px * var(--s)),
calc(32.5px * var(--s)) calc(64.5px * var(--s)),
calc(24.5px * var(--s)) calc(56.5px * var(--s)),
/* first point in the path, time to CCW inner path */
calc(37px * var(--s)) calc(44px * var(--s)),
/* w = ~8 */
calc(45px * var(--s)) calc(52px * var(--s)),
calc(41px * var(--s)) calc(56px * var(--s)),
calc(50px * var(--s)) calc(66px * var(--s)),
calc(40.5px * var(--s)) calc(75.5px * var(--s)),
calc(40.5px * var(--s)) calc(100% - 75.5px * var(--s)),
calc(50px * var(--s)) calc(100% - 66px * var(--s)),
calc(41px * var(--s)) calc(100% - 56px * var(--s)),
calc(45px * var(--s)) calc(100% - 52px * var(--s)),
calc(37px * var(--s)) calc(100% - 44px * var(--s)),
calc(52px * var(--s)) calc(100% - 29px * var(--s)),
calc(59.5px * var(--s)) calc(100% - 36.5px * var(--s)),
calc(61px * var(--s)) calc(100% - 35px * var(--s)),
calc(65.5px * var(--s)) calc(100% - 39.5px * var(--s)),
calc(61px * var(--s)) calc(100% - 44px * var(--s)),
calc(25px * var(--s)) calc(100% - 8px * var(--s)),
calc(72.5px * var(--s)) calc(100% - 8px * var(--s)),
calc(90px * var(--s)) calc(100% - 25.5px * var(--s)),
calc(107.5px * var(--s)) calc(100% - 8px * var(--s)),
calc(100% - 107.5px * var(--s)) calc(100% - 8px * var(--s)),
calc(100% - 90px * var(--s)) calc(100% - 25.5px * var(--s)),
calc(100% - 72.5px * var(--s)) calc(100% - 8px * var(--s)),
calc(100% - 25px * var(--s)) calc(100% - 8px * var(--s)),
calc(100% - 61px * var(--s)) calc(100% - 44px * var(--s)),
calc(100% - 65.5px * var(--s)) calc(100% - 39.5px * var(--s)),
calc(100% - 61px * var(--s)) calc(100% - 35px * var(--s)),
calc(100% - 59.5px * var(--s)) calc(100% - 36.5px * var(--s)),
calc(100% - 52px * var(--s)) calc(100% - 29px * var(--s)),
calc(100% - 37px * var(--s)) calc(100% - 44px * var(--s)),
calc(100% - 45px * var(--s)) calc(100% - 52px * var(--s)),
calc(100% - 41px * var(--s)) calc(100% - 56px * var(--s)),
calc(100% - 50px * var(--s)) calc(100% - 66px * var(--s)),
calc(100% - 40.5px * var(--s)) calc(100% - 75.5px * var(--s)),
calc(100% - 40.5px * var(--s)) calc(75.5px * var(--s)),
calc(100% - 50px * var(--s)) calc(66px * var(--s)),
calc(100% - 41px * var(--s)) calc(56px * var(--s)),
calc(100% - 45px * var(--s)) calc(52px * var(--s)),
calc(100% - 37px * var(--s)) calc(44px * var(--s)),
calc(100% - 52px * var(--s)) calc(29px * var(--s)),
calc(100% - 59.5px * var(--s)) calc(36.5px * var(--s)),
calc(100% - 61px * var(--s)) calc(35px * var(--s)),
calc(100% - 65.5px * var(--s)) calc(39.5px * var(--s)),
calc(100% - 61px * var(--s)) calc(44px * var(--s)),
calc(100% - 25px * var(--s)) calc(8px * var(--s)),
calc(100% - 72.5px * var(--s)) calc(8px * var(--s)),
calc(100% - 90px * var(--s)) calc(25.5px * var(--s)),
calc(100% - 107.5px * var(--s)) calc(8px * var(--s)),
calc(107.5px * var(--s)) calc(8px * var(--s)),
calc(90px * var(--s)) calc(25.5px * var(--s)),
calc(72.5px * var(--s)) calc(8px * var(--s)),
calc(25px * var(--s)) calc(8px * var(--s)),
calc(61px * var(--s)) calc(44px * var(--s)),
calc(65.5px * var(--s)) calc(39.5px * var(--s)),
calc(61px * var(--s)) calc(35px * var(--s)),
calc(59.5px * var(--s)) calc(36.5px * var(--s)),
/* union point */
calc(52px * var(--s)) calc(29px * var(--s)),
/* jump home */
calc(37px * var(--s)) calc(44px * var(--s))
);
}
}