Template:Infobox buttons/styles.css

.infobox-extlink-list { position: absolute; margin-top: -57px; padding: 15px 0; width: 100%; visibility: hidden; opacity: 0; z-index: -1; background: white; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.0625), 0 10px 10px rgba(0, 0, 0, 0.055); transition: opacity 0.2s ease, box-shadow 0.2s ease; text-align: left; overflow: hidden; /* Clip background icon */ }

.infobox-button:hover .infobox-extlink-list { opacity: 1; z-index: 10; visibility: visible; }

.infobox-button>span { display: block; background: #36c; padding: 10px 20px; color: white; }

.infobox-extlink-title { display: block; padding: 0 20px; margin: 5px 0; font-size: 1rem; }

.infobox-extlink-list ul { margin: 0 0 10px 0; padding: 0 10px; display: flex; flex-wrap: wrap; list-style: none; }

.infobox-extlink a { display: block; /* Override external link and file icons */ padding: 5px 10px !important; background-image: none !important; transition: background 0.2s ease, color 0.2s ease; }

.infobox-extlink a:hover { background-color: #eaecf0 !important; }

.infobox-extlink a:active { background-color: #eaf3ff !important; }

.infobox-extlink-title:before { display: block; position: absolute; width: 120px; height: 120px; margin-top: 5px; right: 20px; opacity: .1; z-index: -1; background-repeat: no-repeat; background-position: top right; background-size: contain; }

.infobox-extlink-title-rsi:before { content: ""; /* TemplateStyles does not like internal link for some reason */ background-image: url(https://scwdev.czen.me/images/4/40/RSItm.svg); }

.infobox-extlink-title-community:before { content: ""; /* TemplateStyles does not like internal link for some reason */ background-image: url(https://scwdev.czen.me/images/3/3f/MadeByTheCommunity.svg); }

/* Dark mode */ @media (prefers-color-scheme: dark) { .infobox-button>span { filter: saturate(0.8); }

.infobox-extlink-list { background: #33363d; }

.infobox-extlink-title:before { filter: invert(1); }

.infobox-extlink a:hover { background-color: #2b2f36 !important; } }