MediaWiki:Hydradark.css

/*** This stylesheet contains the color scheme for the hydradark (dark) theme. Most custom css should go into MediaWiki:Common.css ***/ @font-face { font-family: 'Aero Matics Bold'; src: local('Aero Matics Bold'), local('Aero-Matics-Bold'), url('/media/hydra/fonts/Aero Matics Bold.ttf') format('truetype'); }
 * root {

--body-background-color: #333; --body-background-image: url("https://static.wikia.nocookie.net/stellartactics_gamepedia_en/images/1/1f/Background.jpg/revision/latest"); --body-background-attachment: fixed; --body-background-size: cover; --body-background-position: center center; --body-background-repeat: no-repeat; --body-color: #fff;

--content-background: rgba(0,0,0, 0.9); --content-border: 0; --content-border-radius: 2px;

--link-color: #007BFF; --link-redlink-color: #B33D20;

--logo-width: 160px; --logo-height: 187px; --logo-center: 0; --logo-left:0.25em; --logo-vertical-space: 0.5em; --logo-content-space:-90px;

--sidebar-header-background: #ffa100; --sidebar-header-color: #000; --sidebar-link-background: rgba(0,0,0, 0.8); --sidebar-link-color: #fff; --sidebar-link-box-shadow:1px 1px 0 rgba(0,0,0,0.9);;

--navigation-tab-active-background: #ffa100; --navigation-tab-active-color: #000; --vectormenu-color: #fff; --navigation-tab-background: rgba(0,0,0, 0.8); --navigation-tab-box-shadow:1px 1px 0 rgba(0,0,0,0.9); --navigation-arrow-invert: 1;

--searchsuggestions-background: rgba(0,0,0, 0.8); --searchsuggestions-border-color: #303030; --searchsuggestions-hover-background: #ffa100; --searchsuggestions-hover-color: #fff; --searchsuggestions-match-color: #007BFF;

--fpbox-background: rgba(255,255,255, 0.1); --fpbox-border: 1px solid rgba(255,255,255, 0.2);

--fpheading-background: #ffa100; --fpheading-border: 1px solid rgba(255,255,255,0.2); --fpheading-color: #000; --fpheading-font: 'Aero Matics Bold';

--fplink-background: rgba(255, 161, 0, 0.1); --fplink-border:0; --fplink-fullwidth-background: rgba(255, 161, 0, 0.2);

--editor-border: 1px solid rgba(255,255,255,0.2); --editor-subtoolbar-background: rgba(255,255,255,0.1); --editor-toolbar-background: rgba(255,255,255,0.1); --editor-toolbar-selected-background: rgba(255,255,255,0.1); --editor-button-background: #ffa100; --editor-button-border-color: rgba(255,255,255,0.2);

--msupload-background: #ffa100; --msupload-filelist: rgba(0,0,0, 0.3);

--preferences-border: 1px solid rgba(255,255,255, 0.2); --preferences-tab-background: rgba(255,255,255, 0.15); --preferences-tab-active-background: #ffa100; --preferences-tab-active-color: #000;

--infobox-border: 1px solid #ffa100; --infobox-details-background: rgba(255, 161, 0, 0.3);; --infobox-details-color: #fff; --infobox-header-background: #ffa100; --infobox-header-color: #000; --infobox-label-background: rgba(255,255,255, 0.1); --infobox-label-color: #fff;

--navbox-alt-background: rgba(255, 161, 0, 0.1); --navbox-background: rgba(255,255,255, 0.1); --navbox-border: 1px solid rgba(255,255,255, 0.2); --navbox-color: #fff; --navbox-secondary-background: rgba(255, 161, 0, 0.2);

--wikitable-alt-background: rgba(255,255,255, 0.15); --wikitable-background: rgba(255,255,255, 0.1); --wikitable-border: 1px solid rgba(255,255,255, 0.3); --wikitable-border-collapse: collapse; --wikitable-border-spacing: 0; --wikitable-header-background: #ffa100; --wikitable-header-color: #000;

--code-background: rgba(255,255,255, 0.1); --code-color: #fff;

--doc-background: rgba(255,255,255, 0.1); --doc-border: 1px solid rgba(255,255,255, 0.2);

--catlinks-background: rgba(255,255,255, 0.1); --catlinks-border: 1px solid rgba(255,255,255, 0.2);

--thumbnail-background: rgba(255,255,255, 0.1); --thumbnail-border: 1px solid rgba(255,255,255, 0.2);

--toc-background: rgba(255,255,255, 0.1); --toc-border: 1px solid rgba(255,255,255, 0.2);

--ambox-background: rgba(120,120,120,0.3); --ambox-blue: #1e90ff; --ambox-gray: #bbbbaa; --ambox-green: #228b22; --ambox-orange: #f28500; --ambox-purple: #9932cc; --ambox-red: #b22222; --ambox-yellow: #f4c430; }

/*********************** /* Flex text link list * /***********************/ .flextextlinks ul { display: flex; flex-flow: row wrap; text-align: center; margin: 0 -20px 10px -20px; padding: 0; }

.flextextlinks ul li { list-style: none; flex: 1 0 15em; margin: 0; padding: 4px 20px; }

/*********************** /* Flex icon link list * /***********************/ .flexiconlinks { display: flex; flex-flow: row wrap; justify-content: space-around; align-items: flex-start; text-align: center; margin: -10px -10px 0 -10px; padding: 0; }

.flexiconlinks.horizontal { margin: 0 -20px 10px -20px; }

.flexiconlinks .iconlink { display: flex; flex-flow: column nowrap; align-items: center; border: none; background: transparent; margin: 0; padding: 10px; flex: 0 0 8rem; min-width: 128px; }

.flexiconlinks.horizontal .iconlink { padding: 4px 20px; }

.flexiconlinks.iconsize24 .iconlink { flex: 0 0 1.5rem; min-width: 24px; }

.flexiconlinks.linksize24 .iconlink { flex: 0 0 1.5rem; min-width: 24px; }

.flexiconlinks.iconsize64 .iconlink { flex: 0 0 4rem; min-width: 64px; }

.flexiconlinks.linksize64 .iconlink { flex: 0 0 4rem; min-width: 64px; }

.flexiconlinks.iconsize96 .iconlink { flex: 0 0 6rem; min-width: 96px; }

.flexiconlinks.linksize96 .iconlink { flex: 0 0 6rem; min-width: 96px; }

.flexiconlinks.iconsize128 .iconlink { flex: 0 0 8rem; min-width: 128px; }

.flexiconlinks.linksize128 .iconlink { flex: 0 0 8rem; min-width: 128px; }

.flexiconlinks.iconsize192 .iconlink { flex: 0 0 12rem; min-width: 192px; }

.flexiconlinks.linksize192 .iconlink { flex: 0 0 12rem; min-width: 192px; }

.flexiconlinks.iconsize256 .iconlink { flex: 0 0 16rem; min-width: 256px; }

.flexiconlinks.linksize256 .iconlink { flex: 0 0 16rem; min-width: 256px; }

.flexiconlinks.horizontal .iconlink { flex-flow: row nowrap; align-items: flex-start; flex: 0 0 15rem; }

.flexiconlinks .iconlink .icon { display: flex; flex-flow: column nowrap; justify-content: stretch; min-width: 128px; width: 128px; height: 128px; }

.flexiconlinks.horizontal .iconlink .icon { min-width: 24px; width: 24px; height: 24px; }

.flexiconlinks.linksize24 .iconlink .icon { min-width: 24px; width: 24px; height: 24px; }

.flexiconlinks.linksize64 .iconlink .icon { min-width: 64px; width: 64px; height: 64px; }

.flexiconlinks.linksize96 .iconlink .icon { min-width: 96px; width: 96px; height: 96px; }

.flexiconlinks.linksize128 .iconlink .icon { min-width: 128px; width: 128px; height: 128px; }

.flexiconlinks.linksize192 .iconlink .icon { min-width: 192px; width: 192px; height: 192px; }

.flexiconlinks.linksize256 .iconlink .icon { min-width: 256px; width: 256px; height: 256px; }

.flexiconlinks.iconsize64 .iconlink .icon { min-width: 64px; width: 64px; height: 64px; }

.flexiconlinks.iconsize96 .iconlink .icon { min-width: 96px; width: 96px; height: 96px; }

.flexiconlinks.iconsize128 .iconlink .icon { min-width: 128px; width: 128px; height: 128px; }

.flexiconlinks.iconsize192 .iconlink .icon { min-width: 192px; width: 192px; height: 192px; }

.flexiconlinks.iconsize256 .iconlink .icon { min-width: 256px; width: 256px; height: 256px; }

.flexiconlinks .iconlink .icon a { display: flex; flex-flow: column nowrap; justify-content: flex-end; align-items: center; flex: 0 0 100%; }

.flexiconlinks .iconlink .text { color: var(--body-color); width: 100%; text-align: center; }

.flexiconlinks.horizontal .iconlink .text { width: auto; text-align: left; }

.flexiconlinks .iconlink .text a { display: block; width: auto; }

.flexiconlinks.horizontal .iconlink .text a { padding-left: 0.5rem !important; }

/******************************* /* Responsive flex page layout * /*******************************/ .rfpelements { display: flex; flex-flow: row wrap; margin: -5px; }

.rfpshelf, .rfpstack { display: flex; flex-flow: column nowrap; margin: 0; padding: 0; flex: 0 0 100%; max-width: 100%; box-sizing: border-box; }

.rfpblock { margin: 5px; padding: 3px 6px; flex: 0 0 calc( 100% - 10px ); max-width: calc( 100% - 10px ); text-align: center; box-sizing: border-box; }

.rfpblock img { max-width: 100%; height: auto; }

.rfpstack .rfpstack, .rfpstack .rfpshelf, .rfpshelf .rfpshelf, .rfpshelf .rfpstack { flex: 1 0 auto; max-width: 100%; }

.rfpstack .rfpblock, .rfpshelf .rfpblock { flex: 1 0 auto; max-width: calc( 100% - 10px ); }

.rfpstack .rfpnoresize { flex: 0 0 auto; }

@media (min-width: 820px) { .rfp100-50-67size, .rfp100-50-50size, .rfp100-50-33size { flex: 0 0 50%; max-width: 50%; }

.rfpblock.rfp100-50-67size, .rfpblock.rfp100-50-50size, .rfpblock.rfp100-50-33size { flex: 0 0 calc( 50% - 10px ); max-width: calc( 50% - 10px ); } }

@media (min-width: 1440px) { .rfp100-100-67size, .rfp100-50-67size { flex: 0 0 66.666667%; max-width: 66.666667%; }

.rfpblock.rfp100-100-67size, .rfpblock.rfp100-50-67size { flex: 0 0 calc( 66.666667% - 10px ); max-width: calc( 66.666667% - 10px ); }

.rfp100-100-50size, .rfp100-50-50size { flex: 0 0 50%; max-width: 50%; }

.rfpblock.rfp100-100-50size, .rfpblock.rfp100-50-50size { flex: 0 0 calc( 50% - 10px ); max-width: calc( 50% - 10px ); }

.rfp100-100-33size, .rfp100-50-33size { flex: 0 0 33.333333%; max-width: 33.333333%; }

.rfpblock.rfp100-100-33size, .rfpblock.rfp100-50-33size { flex: 0 0 calc( 33.333333% - 10px ); max-width: calc( 33.333333% - 10px ); }

.rfpshelf { flex-flow: row wrap; }

.rfpshelf > .rfpstack { flex: 0 0 50%; max-width: 50%; }

.rfpshelf > .rfpblock { flex: 0 0 calc( 50% - 10px ); max-width: calc( 50% - 10px ); }

.rfpshelf > .rfpstack.rfpkeepwide { flex: 0 0 100%; max-width: 100%; }

.rfpshelf > .rfpblock.rfpkeepwide { flex: 0 0 calc( 100% - 10px ); max-width: calc( 100% - 10px ); } }

/**************************** /* Responsive flex specials * /****************************/ .rfpaboutinfo { border-top: var(--fpbox-border); columns: auto 18rem; padding: 10px 0; }

.rfpaboutitem { padding-left: 6rem; text-align: left; }

.rfpaboutlabel { display: inline-block; text-align: right; width: 5.5rem; margin: 0 0 0 -6rem; padding: 0 0.5rem 0 0; }

.rfpplatforms { text-align: center; padding: 10px 0 0 0; }

.rfpplatformsheading { border-bottom: var(--fpheading-border); background: var(--fpheading-background); font-family: var(--fpheading-font), sans-serif; font-weight: bold; color: var(--fpheading-color); margin: 0 0 10px 0; padding: 3px; }

.rfpplatformdates { display: flex; flex-flow: row wrap; align-items: flex-start; justify-content: center; text-align: center; }

.rfpplatformdate { flex: 1 0 18rem; text-align: center; padding: 0 0 10px 0; }

.rfpplatformdate img { padding: 0 5px; }

.rfpplatformdarkinvert { filter: invert(100%); }

.rfptwitter { display: flex; flex-flow: column nowrap; }

.rfptwitter .body, .rfptwitter .body .twitter-timeline-wrapper { border: none; display: flex; flex-flow: column nowrap; flex: 0 0 410px; }

.rfptwitter .body .twitter-timeline-wrapper iframe { border: none; width: auto !important; height: auto !important; flex: 0 0 400px; }

@media (min-width: 820px) { .rfptwitter .body, .rfptwitter .body .twitter-timeline-wrapper, .rfptwitter .body .twitter-timeline-wrapper iframe { flex: 1 0 auto; } }

.rfpblock div.slideboxlightshow, .rfpblock div.slideboxlightshow a { max-width: 100%; height: auto; }

/****************************** /* Responsive flex appearance * /******************************/ .rfpbox, .rfpdesktopbox { border: var(--fpbox-border); background: var(--fpbox-background); color: var(--body-color); margin: 5px; padding: 3px 6px; }

.rfpblock .heading { border-bottom: var(--fpheading-border); background: var(--fpheading-background); font-family: var(--fpheading-font), sans-serif; color: var(--fpheading-color); font-weight: bold; font-size: 132%; margin: 0 0 10px 0; padding: 5px; }

/****************************************** /* Responsive flex documentation examples * /******************************************/ .rfpdoclabel { border: var(--fpbox-border); padding: 3px 6px; text-align: center; }

.rfpdocexample { display: flex; flex-flow: row wrap; text-align: center; margin: 0 0 10px 0; }

.rfpdocnarrow { border: var(--fpbox-border); padding: 3px 0 0 0; width: 16.666667%; box-sizing: border-box; }

.rfpdocmedium { border: var(--fpbox-border); padding: 3px 0 0 0; width: 33.333333%; box-sizing: border-box; }

.rfpdocwide { border: var(--fpbox-border); padding: 3px 0 0 0; width: 50%; box-sizing: border-box; }

.rfpdocelements { display: flex; flex-flow: row wrap; }

.rfpdocshelf, .rfpdocstack { display: flex; flex-flow: column nowrap; margin: 0; padding: 0; flex: 0 0 100%; max-width: 100%; box-sizing: border-box; }

.rfpdocblock { margin: 5px; padding: 3px 6px; flex: 0 0 calc( 100% - 10px ); max-width: calc( 100% - 10px ); text-align: center; box-sizing: border-box; }

.rfpdocstack .rfpdocstack, .rfpsdoctack .rfpdocshelf, .rfpdocshelf .rfpdocshelf, .rfpdocshelf .rfpdocstack { flex: 1 0 auto; max-width: 100%; }

.rfpdocstack .rfpdocblock, .rfpdocshelf .rfpdocblock { flex: 1 0 auto; max-width: calc( 100% - 10px ); }

.rfpdocstack .rfpdocnoresize { flex: 0 0 auto; }

.rfpdocmedium .rfpdoc100-50-67size, .rfpdocmedium .rfpdoc100-50-50size, .rfpdocmedium .rfpdoc100-50-33size { flex: 0 0 50%; max-width: 50%; }

.rfpdocmedium .rfpdocblock.rfpdoc100-50-67size, .rfpdocmedium .rfpdocblock.rfpdoc100-50-50size, .rfpdocmedium .rfpdocblock.rfpdoc100-50-33size { flex: 0 0 calc( 50% - 10px ); max-width: calc( 50% - 10px ); }

.rfpdocwide .rfpdoc100-100-67size, .rfpdocwide .rfpdoc100-50-67size { flex: 0 0 66.666667%; max-width: 66.666667%; }

.rfpdocwide .rfpdocblock.rfpdoc100-100-67size, .rfpdocwide .rfpdocblock.rfpdoc100-50-67size { flex: 0 0 calc( 66.666667% - 10px ); max-width: calc( 66.666667% - 10px ); }

.rfpdocwide .rfpdoc100-100-50size, .rfpdocwide .rfpdoc100-50-50size { flex: 0 0 50%; max-width: 50%; }

.rfpdocwide .rfpdocblock.rfpdoc100-100-50size, .rfpdocwide .rfpdocblock.rfpdoc100-50-50size { flex: 0 0 calc( 50% - 10px ); max-width: calc( 50% - 10px ); }

.rfpdocwide .rfpdoc100-100-33size, .rfpdocwide .rfpdoc100-50-33size { flex: 0 0 33.333333%; max-width: 33.333333%; }

.rfpdocwide .rfpdocblock.rfpdoc100-100-33size, .rfpdocwide .rfpdocblock.rfpdoc100-50-33size { flex: 0 0 calc( 33.333333% - 10px ); max-width: calc( 33.333333% - 10px ); }

.rfpdocwide .rfpdocshelf { flex-flow: row wrap; }

.rfpdocwide .rfpdocshelf > .rfpdocstack { flex: 0 0 50%; max-width: 50%; }

.rfpdocwide .rfpdocshelf > .rfpdocblock { flex: 0 0 calc( 50% - 10px ); max-width: calc( 50% - 10px ); }

.rfpdocwide .rfpdocshelf > .rfpdocstack.rfpdockeepwide { flex: 0 0 100%; max-width: 100%; }

.rfpdocwide .rfpdocshelf > .rfpdocblock.rfpdockeepwide { flex: 0 0 calc( 100% - 10px ); max-width: calc( 100% - 10px ); }