Template:Infobox buttons/styles.css

/* Infobox button */ .infobox-button { position: relative; }

.infobox-button>span { display: block; border-radius: 0 0 12px 12px; background: var(--color-primary); padding: 10px 20px; color: white; }

/* Popup card */ .infobox-extlink-list { position: absolute; margin-top: -57px; padding: 5px 0; width: 100%; visibility: hidden; opacity: 0; z-index: -1; background: var(--background-color-dp-04); border-radius: 12px; 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; }

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

.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.external { display: block; /* Override external link and file icons */ padding: 5px 10px; border-radius: 4px; background-image: none; transition: background 0.2s ease, color 0.2s ease; }

.infobox-extlink a:hover { background-color: var(--background-color-quiet--hover); }

.infobox-extlink a:active { background-color: var(--background-color-quiet--active); }

.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://starcitizen.tools/images/4/40/RSItm.svg); }

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

/* Dark mode */ html.skin-citizen-dark .infobox-extlink-title:before { filter: invert(1); }