MediaWiki:Common.css/src/template/infobox/npc infobox.scss
< MediaWiki:Common.css | src
Jump to navigation
Jump to search
This page is one of the SCSS pages which are the basis for MediaWiki:Common.css. After you edit this page, you will need to recompile them for your changes to take effect. See Terraria Wiki:CSS to learn more.
Ancestors: / src / template / infobox / npc_infobox.scss
Siblings: drop_infobox.scss infobox_wrapper.scss item_infobox.scss npc_infobox.scss portable_infobox.scss
Children: (none)
/********* [[Template:Npc infobox]] *********/
.npc.infobox {
width: 21em;
.section {
overflow: hidden;
&.drops .drops.items {
margin-top: 4px;
margin-bottom: 0;
}
&.projectile {
text-align: center;
img {
max-width: calc(100% - var(--padding)*2);
height: auto;
}
.image {
margin: 0.25em 0.5em 0.5em;
}
.name {
font-size: 10.5px;
margin-top: 0.25em;
margin-right: 0.5em;
margin-left: 0.5em;
margin-bottom: 0.25em;
}
ul {
margin-right: 0.5em;
margin-left: 0.5em;
&.infobox-inline li {
display: inline-block;
vertical-align: middle;
}
}
}
}
.statistics table th {
width: 6em;
}
.immunities {
> div {
margin: -1px;
}
.i {
margin: 1px;
}
}
// drops list section
.drops {
td:first-child {
text-align: left;
}
td:last-child {
text-align: right;
}
th:first-child {
text-align: left;
border-right: 0;
}
&.money table th {
width: 1px;
}
&.items li {
border-color: var(--theme-box-border-color);
border-style: solid;
border-width: 0;
border-top-width: 1px;
padding: 3px 0;
margin-bottom: auto;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-between;
align-items: center;
position: relative;
&:first-child {
background: var(--modetabs-background);
color: var(--modetabs-text-color);
padding: 2px 6px;
border: 1px solid;
border-color: var(--theme-box-border-color-inner);
}
> div {
display: block;
&:first-child {
text-align: left;
}
&:last-child {
text-align: right;
}
}
&.notebox {
display: block;
text-align: center;
padding: 0;
> div {
text-align: center;
border-width: 1px;
border-style: dashed;
border-color: rgba(var(--theme-border-color--rgb), 0.8);
border-radius: 3px;
margin: 3px auto;
padding: 2px 0;
}
}
&.note-before,
&.note-after {
display: block;
> div {
text-align: center;
}
}
&.note-before {
padding-bottom: 0;
margin-bottom: -3px;
+ li {
border-top: 0;
}
}
&.note-after {
margin-top: -2px;
border-top: 0;
padding-top: 0;
}
.i > span:first-of-type > div.note {
/* note2 of {{item}}s in drops list */
font-size: 11px;
line-height: 12px;
}
&.caption {
line-height: 1.1;
text-align: center;
color: var(--modetabs-text-color);
background: var(--modetabs-background);
display: block;
border: 1px solid;
border-color: var(--theme-box-border-color-inner);
&.trsbg {
/* "Treasure Bag contents" caption */
border-bottom-width: 2px;
margin-bottom: 2px;
padding-bottom: 5px;
+ li {
border-top-width: 1px;
border-top-style: solid;
}
}
+ li.group {
border-top-width: 0;
}
&.group_end {
padding-bottom: 5px;
}
}
&.group_end {
border-bottom-width: 2px;
position: relative;
margin-bottom: 2px;
}
&.group {
border-color: rgba(var(--theme-border-color--rgb), 0.35);
}
&.groupstart,
&.groupend + li {
border-top-width: 2px;
}
&.groupend {
display: none;
}
&.loot {
border-color: rgba(var(--theme-border-color--rgb), 0.35);
margin-left: 1.5em;
&:before {
content: "";
display: block;
width: 5px;
height: 5px;
border-radius: 100px;
background: var(--theme-text-color);
position: absolute;
left: -1em;
top: 50%;
transform: translateY(-50%);
}
&.caption:before {
display: none;
}
}
&.lootstart,
&.lootend {
display: none;
}
}
}
table.drops.money {
span.money {
display: block;
}
span.sep {
display: block;
text-indent: -9999px;
height: 1px;
overflow: hidden;
}
}
}
ul.table-npcdrops {
/* npc drops list in tableview */
text-align: left;
margin: auto;
}
.table-npcdrops {
> li {
list-style: none;
margin-bottom: 2px;
&:last-child {
margin-bottom: auto;
}
> div {
display: inline-block;
&:last-child {
margin-left: 0.25em;
&:before {
content: " (";
}
&:after {
content: ")";
}
}
}
}
}
.npc.infotable {
display: grid;
grid-template-columns: [tab-left table-left] auto [tab-right note-left] auto [note-right table-right];
grid-template-rows: [tab-start note-start] auto [tab-end note-end table-start] auto [table-end];
width: fit-content;
max-width: 100%;
th {
background: var(--modetabs-background);
color: var(--modetabs-text-color);
}
> .statnote {
grid-column: note-left / note-right;
grid-row: note-start / note-end;
text-align: right;
font-size: 10px;
line-height: 14px;
padding-right: 9px;
color: var(--theme-text-color-note);
}
&.note-no > .statnote {
display: none;
}
&.note-bottom {
grid-template-columns: [tab-left table-left note-left] auto [tab-right note-right table-right];
grid-template-rows: [tab-start] auto [tab-end table-start] auto [table-end note-start] auto [note-end];
> .statnote {
text-align: left;
}
}
@media screen and (max-width: 640px) {
& {
grid-template-columns: [tab-left table-left note-left] auto [tab-right note-right table-right];
grid-template-rows: [tab-start] auto [tab-end table-start] auto [table-end note-start] auto [note-end];
> .statnote {
text-align: left;
}
}
}
>.table {
grid-column: table-left / table-right;
grid-row: table-start / table-end;
z-index: 10;
margin: 0;
border: 1px solid var(--theme-box-border-color);
border-radius: 0 8px 8px 8px;
padding: 6px;
width: 100%;
overflow: hidden;
> table {
margin: 0;
&.terraria {
margin-top: 0 !important;
}
}
}
.modetabs {
grid-column: tab-left / tab-right;
grid-row: tab-start / tab-end;
z-index: 20;
.tab {
margin: 0 5px -1px 0;
padding: 4px 1em;
}
}
td.infobox-block span.npcstat {
&,
.s {
display: block;
}
+ br,
.sep {
display: none;
}
}
}
.npcstat {
.ssep {
display: inline;
padding-left: 0.5em;
padding-right: 0.5em;
.npc.infobox &,
.npc.infotable & {
display: none;
}
}
span.prefix,
span.postfix {
display: inline;
color: var(--theme-text-color-note);
font-weight: normal;
font-size: 0.85em;
}
&.prefix .s,
&.postfix .s {
display: block;
}
}