|
|
| Línea 1: |
Línea 1: |
| /********* Infobox templates *********/ | | /** |
| | | * Common TemplateStyles used by [[Template:Extension]], [[Template:Skin]], |
| /* Common styles for these infobox templates:
| | * [[Template:Tool]], etc. |
| * [[Template:Drop infobox]]
| |
| * [[Template:Item infobox]]
| |
| * [[Template:Npc infobox]] | |
| * (other infobox templates are portable infoboxes instead and do not use the common ".infobox" class)
| |
| */ | | */ |
| | | table.infobox { |
| .infobox { | | box-sizing: border-box; |
| border: 1px solid var(--theme-box-border-color); | | border: 2px solid #a2a9b1; |
| border-radius: 8px; | | width: 15%; |
| --padding: 6px; | | border-collapse: collapse; |
| padding: var(--padding); | | border-spacing: 0; |
| font-size: 12px; | | /* background-color: white; */ |
| background-color: var(--theme-box-background); | | clear: right; /* these are overriden by .infobox-rtl on the templates of interest */ |
| line-height: 1.5; | |
| float: right; | | float: right; |
| margin: 0.5em 0 0.5em 1em; | | margin: 0 0 0.5em 0.5em; |
| box-sizing: border-box;
| | } |
|
| |
|
| * {
| | table.infobox-rtl { |
| background: none;
| | clear: left; |
| } | | float: left; |
| | margin: 0 0.5em 0.5em 0; |
| | } |
|
| |
|
| &.float {
| | table.infobox th { |
| &-right {
| | text-align: left; |
| float: right;
| | padding: 0.2em 0.5em; |
| margin: 0.5em 0 0.5em 1em;
| | vertical-align: top; |
| }
| | } |
|
| |
|
| &-left {
| | table.infobox-rtl th { |
| float: left;
| | text-align: right; |
| margin: 0.5em 1em 0.5em 0;
| | } |
| }
| |
|
| |
|
| &-none {
| | @media (max-width: 719px) { |
| float: none;
| | body.mediawiki table.infobox { |
| margin: 0.5em 1em 0.5em 0;
| | float: none; |
| }
| | clear: both; |
| }
| |
| | |
| blockquote.quotation { | |
| /* this seems unnecessary... where are blockquote.quotation elements used *inside* infoboxes? */
| |
| padding: 0 0.25em;
| |
| margin: 0.5em auto;
| |
| | |
| &:before {
| |
| /* this seems unnecessary... where are blockquote.quotation elements used *inside* infoboxes? */
| |
| font-size: 3.5em;
| |
| left: 0;
| |
| } | |
| | |
| div {
| |
| /* this seems unnecessary... where are blockquote.quotation elements used *inside* infoboxes? */
| |
| padding: 0;
| |
| margin-left: 2em;
| |
| border-left: 0;
| |
| } | |
| }
| |
| | |
| table {
| |
| background: none;
| |
| width: 100%; | | width: 100%; |
| border-spacing: 0; | | margin: 0 0 .5em 0; |
| | |
| th,
| |
| td {
| |
| padding: 2px;
| |
| vertical-align: middle;
| |
| }
| |
| | |
| th {
| |
| white-space: nowrap;
| |
| text-align: right;
| |
| width: 5em;
| |
| }
| |
| } | | } |
| | } |
|
| |
|
| > .title,
| | table.infobox td { |
| .section > .title { | | border: none; |
| background: var(--modetabs-background);
| | padding: 0.2em 0.5em; |
| color: var(--modetabs-text-color);
| | vertical-align: top; |
| border: 1px solid;
| |
| border-color: var(--theme-box-border-color-inner);
| |
| border-radius: var(--theme-box-border-radius-inner);
| |
| font-weight: bold;
| |
| text-align: center;
| |
| padding: 2px 0;
| |
| }
| |
| | |
| > .title {
| |
| font-size: 15px;
| |
| padding: 6px 3px;
| |
| line-height: 1.2;
| |
| | |
| > .ename,
| |
| > .namesub {
| |
| display: block;
| |
| font-size: 12px;
| |
| font-style: italic;
| |
| }
| |
| | |
| > .namesub {
| |
| color: var(--theme-text-color-note);
| |
| | |
| &:before {
| |
| content: "(";
| |
| font-style: normal;
| |
| margin-right: 1px;
| |
| }
| |
| | |
| &:after {
| |
| content: ")";
| |
| font-style: normal;
| |
| margin-left: 1px;
| |
| }
| |
| | |
| &.namenote {
| |
| font-size: 10px;
| |
| }
| |
| }
| |
| } | |
| | |
| .content-section {
| |
| padding: 6px 3px;
| |
| }
| |
| | |
| .variant {
| |
| color: var(--modetabs-text-color);
| |
| font-weight: bold;
| |
| text-align: center;
| |
| font-size: 12px;
| |
| padding: 4px 0;
| |
| line-height: 1.2;
| |
| margin-bottom: 2px;
| |
| }
| |
| | |
| .images {
| |
| position: relative;
| |
| padding: 6px 0;
| |
| min-height: 40px;
| |
| text-align: center;
| |
| display: flex;
| |
| flex-direction: column;
| |
| justify-content: center;
| |
| align-items: center;
| |
| gap: 5px;
| |
| | |
| img {
| |
| max-width: 100%;
| |
| height: auto;
| |
| }
| |
| }
| |
| | |
| ul {
| |
| list-style: none;
| |
| margin: auto;
| |
| text-align: center;
| |
| }
| |
| | |
| .section {
| |
| margin-bottom: 4px;
| |
| | |
| &:last-child {
| |
| margin-bottom: 0;
| |
| }
| |
| | |
| > .title {
| |
| &:first-child {
| |
| + * {
| |
| margin-top: 4px;
| |
| }
| |
| | |
| + :empty {
| |
| /* hide empty section contents */
| |
| display: none;
| |
| }
| |
| }
| |
| | |
| &:last-child {
| |
| /* hide titles of empty sections */
| |
| display: none;
| |
| }
| |
| }
| |
| | |
| .stat th .gameText {
| |
| /* revert the "white-space:pre-wrap" in {{gameText}} in captions, e.g. in the sound section */
| |
| white-space: unset;
| |
| }
| |
| | |
| &.buff,
| |
| &.debuff {
| |
| table {
| |
| border-bottom: 1px solid var(--theme-box-border-color);
| |
| margin-bottom: 0.25em;
| |
| }
| |
| | |
| &:after {
| |
| content: "";
| |
| display: block;
| |
| height: 4px;
| |
| margin-top: -7px;
| |
| background: var(--theme-page-background-color);
| |
| }
| |
| }
| |
| | |
| &.ids {
| |
| border-top: 1px solid var(--theme-box-border-color);
| |
| text-align: center;
| |
| font-size: 10.5px;
| |
| background: var(--modetabs-background);
| |
| color: var(--modetabs-text-color);
| |
| | |
| li {
| |
| padding: 2px 0;
| |
| border-bottom: 2px solid var(--theme-page-background-color);
| |
| margin: 0;
| |
| font-weight: bold;
| |
| | |
| &:last-child {
| |
| border-bottom: 0;
| |
| }
| |
| }
| |
| }
| |
| }
| |
| | |
| tr.buff {
| |
| th,
| |
| td {
| |
| background: var(--modetabs-background);
| |
| border: 1px solid var(--modetabs-border-color);
| |
| }
| |
| | |
| th {
| |
| border-left: 0;
| |
| }
| |
| | |
| td {
| |
| border-right: 0;
| |
| padding-left: 3px;
| |
| | |
| b {
| |
| font-weight: bold;
| |
| white-space: nowrap;
| |
| }
| |
| }
| |
| } | |
| | |
| .imageother {
| |
| text-align: center;
| |
| padding: 6px 0;
| |
| border-top: 1px solid var(--theme-box-border-color);
| |
| | |
| .imageothercaption {
| |
| margin: 0.15em 0 0;
| |
| }
| |
| }
| |
| } | | } |
|
| |
|
| .infobox, | | table.infobox .infobox-header { |
| .portable-infobox { | | /* background-color: #a2a9b1; |
| .tags { | | color: #FFF; */ |
| /* tag list */
| | text-align: left; |
| --tags-border-color: rgba(var(--theme-text-color--rgb), 0.4);
| |
| --tags-border-color-linked: rgba(var(--theme-link-color--rgb), 0.4);
| |
| margin-top: -1px;
| |
| margin-bottom: -1px;
| |
| | |
| .tag {
| |
| border: 1px solid var(--tags-border-color-linked);
| |
| display: inline-block;
| |
| padding: 0 4px;
| |
| border-radius: 3px;
| |
| margin: 3px 6px 3px auto;
| |
| | |
| @supports selector(:has(p)) {
| |
| & {
| |
| border-color: var(--tags-border-color);
| |
| | |
| &:has(> a) {
| |
| border-color: var(--tags-border-color-linked);
| |
| }
| |
| }
| |
| }
| |
| | |
| a {
| |
| white-space: nowrap;
| |
| }
| |
| }
| |
| }
| |
| } | | } |
|
| |
|
| .modetabs { | | table.infobox .infobox-header a { |
| display: flex;
| | color: #FFF; |
| padding: 0 4px;
| |
| | |
| .tab {
| |
| margin: 0 2px -1px;
| |
| border-radius: 3px 3px 0 0;
| |
| background: transparent;
| |
| padding: 4px 0 3px;
| |
| text-align: center;
| |
| font-weight: bold;
| |
| cursor: pointer;
| |
| border: 1px solid transparent;
| |
| border-bottom: none;
| |
| | |
| &.current {
| |
| background: var(--theme-box-background);
| |
| border-color: var(--theme-box-border-color);
| |
| }
| |
| | |
| &:hover {
| |
| text-decoration: underline;
| |
| }
| |
| }
| |
| | |
| .infobox & { | |
| border-bottom: 1px solid var(--theme-box-border-color);
| |
| margin: 6px -6px;
| |
| | |
| .tab {
| |
| flex: 1 1 33.33333333%;
| |
| }
| |
| }
| |
| } | | } |
|
| |
|
| /* -------------------------------------------------------- */
| | table.infobox .infobox-header td, |
| /* classic/expert/master mode tabber */
| | table.infobox .infobox-header th { |
| /* -------------------------------------------------------- */
| | padding: 0.5em 0.5em; |
| .infobox, | |
| .portable-infobox, | |
| .infotable { | |
| --modetabs-background: var(--theme-modetabs-classic-background); | |
| --modetabs-border-color: var(--theme-modetabs-classic-border-color);
| |
| --modetabs-text-color: var(--theme-modetabs-classic-text-color);
| |
| } | | } |
|
| |
|
| .modesbox { | | table.infobox .infobox-header img { |
| &.c-normal {
| | padding: 0 0.2em 0 0.5em; |
| .m-expert,
| |
| .m-master,
| |
| .m-expert-master {
| |
| display: none !important;
| |
| }
| |
| | |
| }
| |
| | |
| &.c-expert {
| |
| --modetabs-background: var(--theme-modetabs-expert-background);
| |
| --modetabs-border-color: var(--theme-modetabs-expert-border-color);
| |
| --modetabs-text-color: var(--theme-modetabs-expert-text-color);
| |
| | |
| .m-normal,
| |
| .m-master,
| |
| .m-normal-master {
| |
| display: none !important;
| |
| }
| |
| | |
| }
| |
| | |
| &.c-master {
| |
| --modetabs-background: var(--theme-modetabs-master-background);
| |
| --modetabs-border-color: var(--theme-modetabs-master-border-color);
| |
| --modetabs-text-color: var(--theme-modetabs-master-text-color);
| |
| | |
| .m-normal,
| |
| .m-expert,
| |
| .m-normal-expert {
| |
| display: none !important;
| |
| }
| |
| | |
| }
| |
| | |
| &.expertonly,
| |
| .expertonly { | |
| .m-normal {
| |
| display: none !important;
| |
| }
| |
| }
| |
| | |
| &.masteronly,
| |
| .masteronly {
| |
| .m-normal,
| |
| .m-expert {
| |
| display: none !important;
| |
| }
| |
| }
| |
| } | | } |
|
| |
| /* @import template/infobox/portable_infobox.css */
| |
| /* @import template/infobox/item_infobox.css */
| |
| /* @import template/infobox/npc_infobox.css */
| |
| /* @import template/infobox/drop_infobox.css */
| |
| /* @import template/infobox/infobox_wrapper.css */
| |
/**
* Common TemplateStyles used by Template:Extension, Template:Skin,
* Template:Tool, etc.
*/
table.infobox {
box-sizing: border-box;
border: 2px solid #a2a9b1;
width: 15%;
border-collapse: collapse;
border-spacing: 0;
/* background-color: white; */
clear: right; /* these are overriden by .infobox-rtl on the templates of interest */
float: right;
margin: 0 0 0.5em 0.5em;
}
table.infobox-rtl {
clear: left;
float: left;
margin: 0 0.5em 0.5em 0;
}
table.infobox th {
text-align: left;
padding: 0.2em 0.5em;
vertical-align: top;
}
table.infobox-rtl th {
text-align: right;
}
@media (max-width: 719px) {
body.mediawiki table.infobox {
float: none;
clear: both;
width: 100%;
margin: 0 0 .5em 0;
}
}
table.infobox td {
border: none;
padding: 0.2em 0.5em;
vertical-align: top;
}
table.infobox .infobox-header {
/* background-color: #a2a9b1;
color: #FFF; */
text-align: left;
}
table.infobox .infobox-header a {
color: #FFF;
}
table.infobox .infobox-header td,
table.infobox .infobox-header th {
padding: 0.5em 0.5em;
}
table.infobox .infobox-header img {
padding: 0 0.2em 0 0.5em;
}
