MediaWiki:Mbhh.css: Difference between revisions
From Beyond These Stars Official Wiki
Added some color styling and some border images, page background. |
added resource infobox styling |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* All CSS here will be loaded for users of the MBHH skin */ | /* All CSS here will be loaded for users of the MBHH skin */ | ||
body { | body { | ||
background-image: url(/Beyond_These_Stars/skins/MBHH/resources/images/shade-right.png?9ba42), | background-image: url(/Beyond_These_Stars/skins/MBHH/resources/images/shade-right.png?9ba42), | ||
url(/Beyond_These_Stars/skins/MBHH/resources/images/shade-left.png?30070), | url(/Beyond_These_Stars/skins/MBHH/resources/images/shade-left.png?30070), | ||
url(/Beyond_These_Stars/skins/MBHH/resources/images/shade-bottom.png?ff4a7), | url(/Beyond_These_Stars/skins/MBHH/resources/images/shade-bottom.png?ff4a7), | ||
url(/Beyond_These_Stars/skins/MBHH/resources/images/game_bgs/BeyondTheseStars_bg.jpg?b363); | url(/Beyond_These_Stars/skins/MBHH/resources/images/game_bgs/BeyondTheseStars_bg.jpg?b363); | ||
} | } | ||
| Line 14: | Line 14: | ||
div#mw-content { | div#mw-content { | ||
background-color: #090C0C; | |||
background-image: url('/images/mbhh_bts/3/33/Player_Guide_BG_Recolored.png'); | |||
background-size: 100% auto; | |||
background-repeat: no-repeat; | |||
} | } | ||
| Line 23: | Line 23: | ||
a, a:visited { | a, a:visited { | ||
color: #0EB4C3; | |||
} | } | ||
a:hover, a:visited:hover { | a:hover, a:visited:hover { | ||
color: #7EDFF0; | |||
} | } | ||
a.new { | a.new { | ||
color: #DA664F; | |||
} | } | ||
| Line 35: | Line 35: | ||
.mw-body .mw-parser-output h2::after { | .mw-body .mw-parser-output h2::after { | ||
border-bottom: solid 1px #4F8E88; | |||
} | } | ||
| Line 41: | Line 41: | ||
.toc { | .toc { | ||
display: inline-block; | |||
min-width: 50%; | |||
margin: 3em 0 3em; | |||
background-color: transparent; | |||
border: 1px solid #4F8E88; | |||
border-image-source: url('/images/mbhh_bts/b/bf/UI_tooltip_border_ornament.png'); | |||
border-image-width: 32px; | |||
border-image-slice: 101 101 fill; | |||
border-image-repeat: repeat round; | |||
padding: 24px 48px; | |||
} | } | ||
.mw-body .toctitle { | .mw-body .toctitle { | ||
border-bottom: solid 1px #CAECF2; | |||
} | } | ||
.mw-body .toctitle h2 { | .mw-body .toctitle h2 { | ||
color: #CAECF2; | |||
} | } | ||
| Line 62: | Line 62: | ||
.mw-body figure { | .mw-body figure { | ||
display: inline-block; | |||
float: right; | |||
border: 1px solid #4B9797; | |||
background-color: transparent; | |||
border-image-source: url('/images/mbhh_bts/4/42/UI_dark_teal_panel.png'); | |||
border-image-width: 6px; | |||
border-image-slice: 12 fill; | |||
padding: 4px 4px 0; | |||
} | } | ||
.mw-body figure figcaption { | .mw-body figure figcaption { | ||
float: none; | |||
width: 100%; | |||
border: none; | |||
background-color: transparent; | |||
} | } | ||
.mw-body figure > a:first-child > :first-child:not(.mw-broken-media) { | .mw-body figure > a:first-child > :first-child:not(.mw-broken-media) { | ||
border: 1px solid #4B9797; | |||
} | } | ||
| Line 84: | Line 84: | ||
.bts-player-guide { | .bts-player-guide { | ||
border: 1px solid #4F8E88; | |||
border-radius: 12px; | |||
background-color: #112325; | |||
border-image-source: url('/images/mbhh_bts/5/5a/Player_Guide_BG_2.png'); | |||
border-image-width: 16px; | |||
border-image-slice: 29 fill; | |||
border-image-repeat; round; | |||
padding: 8px 24px; | |||
margin-right: 26%; | |||
} | } | ||
| Line 99: | Line 99: | ||
/* Overrides for mini inner tables inside wikitables */ | /* Overrides for mini inner tables inside wikitables */ | ||
.bts-resource-list tr, .bts-resource-list td, .bts-resource-list th { | .bts-resource-list tr, .bts-resource-list td, .bts-resource-list th { | ||
border: 0 !important; | |||
background: transparent !important; | |||
padding: 0 0; | |||
} | } | ||
.bts-resource-list td:first-of-type { | .bts-resource-list td:first-of-type { | ||
text-align: end; | |||
} | } | ||
| Line 111: | Line 111: | ||
.bts-infobox-building { | .bts-infobox-building { | ||
float: right; | |||
clear: right; | |||
max-width: 360px; | |||
margin: 80px 0 48px 24px; | |||
border: 1px solid #3E7F77; | |||
border-radius: 8px; | |||
background-color: #1C4F48; | |||
padding: 24px 2px; | |||
} | } | ||
.bts-infobox-building > div:not(:first-child) { | |||
margin-top: 1.5em; | |||
} | |||
.bts-infobox-building-header { | .bts-infobox-building-header { | ||
position: relative; | |||
} | } | ||
.bts-infobox-building-header-icon { | .bts-infobox-building-header-icon { | ||
position: absolute; | |||
bottom: 24px; right: -12px; | |||
width: 160px; | |||
} | } | ||
.bts-infobox-building-title { | |||
margin-bottom: 2px; | |||
padding-bottom: 0; | |||
font-size: 2em; | |||
line-height: 1.25em; | |||
padding: 0 24px; | |||
.bts-infobox-building | } | ||
.bts-infobox-building-subtitle { | |||
margin-top: 2px; | |||
padding: 0 24px; | |||
font-size: 1.25em; | |||
line-height: 1.25em; | |||
} | |||
.bts-infobox-building-subheader { | |||
background-color: #2E726D; | |||
font-weight: bold; | |||
padding: 4px 24px; | |||
} | } | ||
.bts-infobox-building-description { | .bts-infobox-building-description { | ||
margin-left: 1em; | |||
margin-right: 17%; | |||
font-size: 90%; | |||
font-style: italic; | |||
padding: 0 24px; | |||
} | |||
.bts-infobox-building-techtree { | |||
padding: 0 24px; | |||
} | } | ||
.bts-infobox-building-construction { | .bts-infobox-building-construction { | ||
padding: 0 24px; | |||
} | |||
.bts-infobox-building-tasks { | |||
padding: 0 24px; | |||
} | |||
.bts-infobox-building-tasks-table th { | |||
text-align: left; | |||
} | |||
.bts-infobox-resource { | |||
float: right; | |||
clear: right; | |||
width: 320px; | |||
margin: 80px 0 48px 24px; | |||
background-color: #224F52; | |||
padding: 24px 0; | |||
} | |||
.bts-infobox-resource > div:not(:first-child) { | |||
margin-top: 1em; | |||
} | |||
.bts-infobox-resource > div { | |||
padding: 0 24px; | |||
} | |||
.bts-infobox-resource-header { | |||
position: relative; | |||
} | } | ||
.bts-infobox-resource-header-icon { | |||
position: absolute; | |||
top: -64px; right: 8px; | |||
} | |||
.bts-infobox-resource-header-title { | |||
font-size: 2em; | |||
line-height: 1.25em; | |||
margin-right: 100px; | |||
} | |||
.bts-infobox-resource-header-subtitle { | |||
font-size: 1.25em; | |||
line-height: 1.25em; | |||
} | |||
div.bts-infobox-resource-subheader { | |||
background-color: #112325; | |||
font-weight: bold; | |||
padding-top: 4px; | |||
padding-bottom: 6px; | |||
} | |||
.bts-infobox-resource table { | |||
border-collapse: collapse; | |||
} | |||
.bts-infobox-resource table th { | |||
text-align: left; | |||
} | |||
.bts-infobox-resource table tr:not(:last-child) td { | |||
padding-bottom: 18px; | |||
border-bottom: 1px solid #2E726D; | |||
} | |||
.bts-infobox-resource table th:not(:last-child), | |||
.bts-infobox-resource table td:not(:last-child) { | |||
padding-right: 18px; | |||
} | |||
Latest revision as of 20:01, 10 October 2026
/* All CSS here will be loaded for users of the MBHH skin */
body {
background-image: url(/Beyond_These_Stars/skins/MBHH/resources/images/shade-right.png?9ba42),
url(/Beyond_These_Stars/skins/MBHH/resources/images/shade-left.png?30070),
url(/Beyond_These_Stars/skins/MBHH/resources/images/shade-bottom.png?ff4a7),
url(/Beyond_These_Stars/skins/MBHH/resources/images/game_bgs/BeyondTheseStars_bg.jpg?b363);
}
.mw-wiki-logo {
background-size:120% !important;
}
div#mw-content {
background-color: #090C0C;
background-image: url('/images/mbhh_bts/3/33/Player_Guide_BG_Recolored.png');
background-size: 100% auto;
background-repeat: no-repeat;
}
a, a:visited {
color: #0EB4C3;
}
a:hover, a:visited:hover {
color: #7EDFF0;
}
a.new {
color: #DA664F;
}
.mw-body .mw-parser-output h2::after {
border-bottom: solid 1px #4F8E88;
}
.toc {
display: inline-block;
min-width: 50%;
margin: 3em 0 3em;
background-color: transparent;
border: 1px solid #4F8E88;
border-image-source: url('/images/mbhh_bts/b/bf/UI_tooltip_border_ornament.png');
border-image-width: 32px;
border-image-slice: 101 101 fill;
border-image-repeat: repeat round;
padding: 24px 48px;
}
.mw-body .toctitle {
border-bottom: solid 1px #CAECF2;
}
.mw-body .toctitle h2 {
color: #CAECF2;
}
.mw-body figure {
display: inline-block;
float: right;
border: 1px solid #4B9797;
background-color: transparent;
border-image-source: url('/images/mbhh_bts/4/42/UI_dark_teal_panel.png');
border-image-width: 6px;
border-image-slice: 12 fill;
padding: 4px 4px 0;
}
.mw-body figure figcaption {
float: none;
width: 100%;
border: none;
background-color: transparent;
}
.mw-body figure > a:first-child > :first-child:not(.mw-broken-media) {
border: 1px solid #4B9797;
}
.bts-player-guide {
border: 1px solid #4F8E88;
border-radius: 12px;
background-color: #112325;
border-image-source: url('/images/mbhh_bts/5/5a/Player_Guide_BG_2.png');
border-image-width: 16px;
border-image-slice: 29 fill;
border-image-repeat; round;
padding: 8px 24px;
margin-right: 26%;
}
/* Overrides for mini inner tables inside wikitables */
.bts-resource-list tr, .bts-resource-list td, .bts-resource-list th {
border: 0 !important;
background: transparent !important;
padding: 0 0;
}
.bts-resource-list td:first-of-type {
text-align: end;
}
.bts-infobox-building {
float: right;
clear: right;
max-width: 360px;
margin: 80px 0 48px 24px;
border: 1px solid #3E7F77;
border-radius: 8px;
background-color: #1C4F48;
padding: 24px 2px;
}
.bts-infobox-building > div:not(:first-child) {
margin-top: 1.5em;
}
.bts-infobox-building-header {
position: relative;
}
.bts-infobox-building-header-icon {
position: absolute;
bottom: 24px; right: -12px;
width: 160px;
}
.bts-infobox-building-title {
margin-bottom: 2px;
padding-bottom: 0;
font-size: 2em;
line-height: 1.25em;
padding: 0 24px;
}
.bts-infobox-building-subtitle {
margin-top: 2px;
padding: 0 24px;
font-size: 1.25em;
line-height: 1.25em;
}
.bts-infobox-building-subheader {
background-color: #2E726D;
font-weight: bold;
padding: 4px 24px;
}
.bts-infobox-building-description {
margin-left: 1em;
margin-right: 17%;
font-size: 90%;
font-style: italic;
padding: 0 24px;
}
.bts-infobox-building-techtree {
padding: 0 24px;
}
.bts-infobox-building-construction {
padding: 0 24px;
}
.bts-infobox-building-tasks {
padding: 0 24px;
}
.bts-infobox-building-tasks-table th {
text-align: left;
}
.bts-infobox-resource {
float: right;
clear: right;
width: 320px;
margin: 80px 0 48px 24px;
background-color: #224F52;
padding: 24px 0;
}
.bts-infobox-resource > div:not(:first-child) {
margin-top: 1em;
}
.bts-infobox-resource > div {
padding: 0 24px;
}
.bts-infobox-resource-header {
position: relative;
}
.bts-infobox-resource-header-icon {
position: absolute;
top: -64px; right: 8px;
}
.bts-infobox-resource-header-title {
font-size: 2em;
line-height: 1.25em;
margin-right: 100px;
}
.bts-infobox-resource-header-subtitle {
font-size: 1.25em;
line-height: 1.25em;
}
div.bts-infobox-resource-subheader {
background-color: #112325;
font-weight: bold;
padding-top: 4px;
padding-bottom: 6px;
}
.bts-infobox-resource table {
border-collapse: collapse;
}
.bts-infobox-resource table th {
text-align: left;
}
.bts-infobox-resource table tr:not(:last-child) td {
padding-bottom: 18px;
border-bottom: 1px solid #2E726D;
}
.bts-infobox-resource table th:not(:last-child),
.bts-infobox-resource table td:not(:last-child) {
padding-right: 18px;
}


