MediaWiki:Common.css

/* CSS placed here will be applied to all skins */ /*****************************************************/ /* This governs the sections on the Community portal */ /*****************************************************/ .cpbox { display: flex; flex-direction: row-reverse; flex-wrap: wrap; }

.cpbox #admins { box-sizing: border-box; width: calc(33% - 10px); margin: 5px; flex-grow: 1; min-width: 300px; }

.cpbox #help { box-sizing: border-box; width: calc(67% - 10px); margin: 5px; flex-grow: 1; }

a.new {color:#DAA520 !important;}

/* ==================================================

Utility Classes

================================================== */

.d-none {display: none !important;} .v-hidden {visibility: hidden; !important;}

.f-left {float: left;} .f-right {float: right;} .centered {text-align: center;}

.inline-flex, {display: inline-flex;} .column-container, .flex-box {display: flex;} .column-container .column {flex-grow: 1; flex-basis: 100%;}

/* ==================================================

Content Badges

================================================== */ .badge { /*  padding: 20px 15px 15px; */ border: 1px solid rgba(249,89,42,0.4); border-radius: 4px; background-color: #fcdfd6; background-image: linear-gradient(180deg, rgba(255,255,255,0), white 65%, rgba(255,255,255,0.8) 95%, rgba(255,255,255,0));

box-shadow: 0 2px 6px -2px rgba(0,0,0,0.4), inset 0 1px 1px 1px rgba(255,255,255,0.8);

text-align: center; } .badge h3 { /*margin: 15px 0px;*/ font-size: 18px; font-weight: normal; } .badge p { font-family: "Varela Round"; color: #4a4a4a; font-size: 15px; line-height: 20px; } .badge.strategy h3 { color: #f1592a; } .badge.spicehall { border-color: rgba(0,137,184,0.4); background-color: #cef1fa; } .badge.strategy h3 { color: #00ace6; }

.badge.spicehall h3 { color: #00c27a; }

/* ==================================================

ST2 compact table

================================================== */

div.floatingbox { width: 400px; float: right; margin:0px 20px 0px 20px; }

table.tablecompact { text-align:center; }

div.floatingbox table.tablecompact td { padding: 0em !important; margin: 0px; text-align:center !important; }

.inlineicon { display: inline-block; float: left; }

.inlineicontalent { display: inline-block; float: left; }

.inlineicontalent p { margin: 0px !important; }

.talentbadge { position:absolute; left: -10px; }

table:not(.skill-table) .talentbadge {left: 6px;}

/* ==================================================

Talent Icon Template

================================================== */

.talent-icon { width: 100px; display: inline-block; vertical-align: top; position: relative; }

.talent-badge { width: 29px; height: 29px; position: absolute; top: 0px; left: 0px; }

.crew .talent-badge {background: url(https://static.wikia.nocookie.net/startraders_gamepedia_en/images/8/85/Talent_badge_crewcombat.png/revision/latest);} .ship .talent-badge {background: url(https://static.wikia.nocookie.net/startraders_gamepedia_en/images/8/83/Talent_badge_shipcombat.png/revision/latest);}

.rangefinder { height: 18px; margin-top: 3px; background: url(media/f/f9/Ui_combat_rangefinder_empty.png); padding: 0px 3px; text-align: left; }

.talent-icon.crew .rangefinder {background: url(media/2/2e/Ui_combat_rangefinder.png);} .talent-icon.crew .rangefinder .position {margin-right: 6px;}

.talent-icon.ship .rangefinder { box-sizing: border-box; padding: 2px 0px 0px 6px; display: flex; }

.talent-icon.base .rangefinder { color: #17ADD3; text-transform: uppercase; text-align: center; font: normal 15px/20px Laconic_Light; }

.talent-icon.crew .rangefinder > div > div { width: 12px; height: 12px; display: inline-block; margin-right: -2px; background: url(media/e/e3/Ui_combat_rangefinder_gray.png); }

.talent-icon.crew .rangefinder > div { width: 40px; display: inline-flex; }

.talent-icon.ship .rangefinder > div { background: url(https://static.wikia.nocookie.net/startraders_gamepedia_en/images/e/e3/Ui_combat_rangefinder_gray.png/revision/latest) no-repeat center; width: 17px; height: 17px; display: inline-block; }

.talent-icon.crew .position .active {background: url(https://static.wikia.nocookie.net/startraders_gamepedia_en/images/f/f2/Ui_combat_rangefinder_blue.png/revision/latest);} .talent-icon.crew.self .position .active {background: url(https://static.wikia.nocookie.net/startraders_gamepedia_en/images/a/ab/Ui_combat_rangefinder_green.png/revision/latest);} .talent-icon.crew.enemy .target .active {background: url(https://static.wikia.nocookie.net/startraders_gamepedia_en/images/4/4e/Ui_combat_rangefinder_red.png/revision/latest);} .talent-icon.crew.ally .target .active {background: url(https://static.wikia.nocookie.net/startraders_gamepedia_en/images/a/ab/Ui_combat_rangefinder_green.png/revision/latest);}

.talent-icon.self div.target {display: none;}

.talent-icon.ship div.active {background: url(https://static.wikia.nocookie.net/startraders_gamepedia_en/images/3/3c/Ui_combat_rangefinder_ship_blue.png/revision/latest);} .talent-icon.ship.enemy div.active {background: url(https://static.wikia.nocookie.net/startraders_gamepedia_en/images/1/11/Ui_combat_rangefinder_ship_red.png/revision/latest);}

/* ==================================================

Incredible Hacks Here

================================================== */

.mw-collapsed .mw-collapsible-content {display: none;} textarea {tab-size: 4;}

/* ==================================================

Ship Flashcard

================================================== */

.ship-flashcard { display: flex; flex-wrap: wrap-reverse; justify-content: space-evenly; }

.gui-box { padding: 9px; margin: 9px; background: #00000085; border: 1px solid #ffffff21; position: relative; border-radius: 0px 9px; }

.gui-box::before, .gui-box::after { content: ""; position: absolute; }

.gui-box::before { border-top: 6px solid #00a257; border-right: 10px solid #ff000000; top: -1px; left: -1px; }

.gui-box::after { border-bottom: 6px solid #00a257; border-left: 10px solid #ff000000; bottom: -1px; right: -1px; }

.component-category { width: 765px; height: 215px; padding: 9px 0px 0px 9px; margin: 9px 0px; }

.component-category:first-child { height: 110px; }

.component-category span::before { font: normal 20px Laconic_Light; color: var(--gui-font-color); text-shadow: 0px 0px 12px var(--gui-text-shadow-color); position: absolute; transform: rotate(90deg); }

.component-category:nth-child(1) span::before { content: "- Large -"; top: 45px; right: -38px; }

.component-category:nth-child(2) span::before { content: "- Medium -"; top: 90px; right: -48px; }

.component-category:nth-child(3) span::before { content: "- Small -"; top: 95px; right: -37px; }

.component-category > div { display: inline-block; margin: 0px 3px 6px 0px; }

.ship-info-container { width: 855px; margin-bottom: 25px; }

.ship-card span { display: block; font: normal 30px Laconic_Light; border-bottom: 2px solid #20677d; border-radius: 10px; margin: 9px auto 15px auto; background: linear-gradient(to bottom, #00000000 0%,#1bd5ff40 100%); width: 60%; color: var(--gui-font-color); text-shadow: 0px 0px 6px var(--gui-text-shadow-color); }

.ship-card { text-align: center; margin-bottom: 18px; }

.ship-info-container .gui-box { width: 32%; min-width: 268px; display: inline-block; vertical-align: top; padding: 0; margin: 0px 3px; }

div#content .ship-info-container .gui-box table { color: var(--gui-font-color); text-shadow: 0px 0px 3px var(--gui-text-shadow-color); font: normal 120% Laconic_Light; width: 100%; text-align: center; }

.ship-info-container td:first-child { text-align: right; width: 50%; background: #070f18; padding-right: 12px; }

.ship-info-container tr {box-shadow: 0px 1px 0px #252126;} .ship-info-container td {padding: 4px 0px;} .ship-info-container tr:last-child {box-shadow: none;}

/* ==================================================

Tooltip Template

================================================== */

[data-tooltip] {position: relative;}

[data-tooltip] img {pointer-events: none;}

[data-tooltip]:hover::before { content: attr(data-tooltip); position: absolute; top: -36px; left: 18px; white-space: nowrap; padding: 3px 6px; border: 1px solid #345a68; background: #0a3b4b; font: normal 120% Laconic_Light; box-shadow: 0px 0px 12px inset black; }

[data-tooltip]:hover::after { content: ""; border: 1px solid #345a68; position: absolute; width: 9px; height: 9px; border-width: 0px 1px 1px 0px; transform: rotate(45deg); background: #082630; top: -15px; left: 30px; }

/* ==================================================

Spoiler Templates

================================================== */

/* spoiler box */

.spoiler-box > p { font: normal 115% Laconic_Regular; margin-bottom: 3px; display: inline-block; color: #e0e0e0; }

@keyframes fadeIn {0% {opacity: 0;} 100% {opacity: 1;}}

.spoiler-box .toggle { margin-left: 15px; display: inline-block; color: #77aee5; cursor: pointer; }

.spoiler-box .toggle:hover {color: #bbdcff;} .spoiler-box .toggle::before {content: "[ "attr(data-collapse)" ]";} .spoiler-box.collapsed .toggle::before {content: "[ "attr(data-expand)" ]";} .spoiler-box.collapsed .content {display: none; opacity: 0;}

.spoiler-box .content { animation-name: fadeIn; animation-duration: 0.5s; }

.remote-spoiler-toggle { font: normal 110% Laconic_Regular; display: inline-block; color: #77aee5; cursor: pointer; margin: 0px 6px; }

.remote-spoiler-toggle:hover {color: #bbdcff;} .remote-spoiler-toggle.active {color: #77e58a;} .remote-spoiler-toggle.active:hover {color: #bbffd0;}

/* ==================================================

Caption Box Template

================================================== */

.caption-box span { font: normal 110% Laconic_Regular; }

.caption-box p { margin: 6px 20px 9px 9px; border: 1px solid var(--shadow-border); padding: 6px 9px; background: var(--box-background); display: inline-block; }