Template:Infobox buttons/styles.css

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

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

.infobox-extlink-button-icon { margin-right: 8px; }

/* Popup card */ .infobox-extlink-list { position: absolute; z-index: -1; overflow: hidden; width: 100%; padding: 5px 0; margin-top: -57px; background: var( --color-surface-1 ); border-radius: var( --border-radius--medium ); box-shadow: var( --box-shadow-dialog ); opacity: 0; text-align: left; transition: opacity 0.2s ease, box-shadow 0.2s ease; visibility: hidden; }

.infobox-extlink-list p { margin-bottom: 0; }

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

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

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

.infobox-extlink a.external { display: block; /* Override external link and file icons */ padding: 5px 10px; background-image: none; border-radius: 4px; 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 { position: absolute; z-index: -1; right: 20px; display: block; width: 120px; height: 120px; margin-top: 5px; background-position: top right; background-repeat: no-repeat; background-size: contain; opacity: 0.1; }

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

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

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