Plantilla:Infobox/common.css
De Inkipedia
/* Gobbler container */ .infobox-gobbler { display: none; margin: auto; } .infobox-gobbler.active { display: flex; gap: 4px; } .infobox-game-list { display: flex; flex-direction: column; gap: 4px; } .infobox-game { border: 2px solid; border-radius: 4px; cursor: pointer; display: none; padding: 2px; text-align: center; user-select: none; width: 1.5em; } .infobox-game.active, .infobox-game.inactive { display: block; } .infobox-game.inactive img { opacity: 0.4; } /* Main interface */ .infobox { border-radius: 4px; border-style: solid; border-width: 6px 1px; display: flex; flex-direction: column; margin: auto; padding: 4px; row-gap: 4px; width: 300px; } .infobox.inactive { display: none; } .infobox-title { border-radius: 4px; border-style: solid; border-width: 1px 4px; font-size: 1.35em; font-weight: bold; padding: 8px 0; text-align: center; } .infobox-image { align-self: center; } /* Data table */ .infobox-table { align-items: center; display: grid; gap: 4px; grid-template-columns: max-content auto; } .infobox-label { align-items: center; align-self: stretch; border-radius: 4px 0 0 4px; border-style: solid; border-width: 1px 0 1px 4px; display: flex; font-weight: bold; padding: 4px; } .infobox-label-game { font-style: italic; font-weight: bold; grid-area: span 1 / span 2; } /* Generic color */ .infobox, .infobox .infobox-title, .infobox .infobox-label, .infobox-game { background: rgba(0, 153, 255, 0.6); border-color: #0099ff; } .infobox, .infobox .infobox-title, .infobox-game.inactive { background: rgba(0, 153, 255, 0.2); } .infobox .infobox-label { background: linear-gradient(90deg, rgba(0, 153, 255, 0.6), rgba(0, 153, 255, 0)); } /* Splatoon color */ .infobox.S, .infobox.S .infobox-title, .infobox.S .infobox-label, .infobox-game.S { background: rgba(170, 220, 0, 0.6); border-color: #aadc00; } .infobox.S, .infobox.S .infobox-title, .infobox-game.inactive.S { background: rgba(170, 220, 0, 0.2); } .infobox.S .infobox-label { background: linear-gradient(90deg, rgba(170, 220, 0, 0.6), rgba(170, 220, 0, 0)); } /* Splatoon 2 color */ .infobox.S2, .infobox.S2 .infobox-title, .infobox.S2 .infobox-label, .infobox-game.S2 { background: rgba(240, 60, 120, 0.6); border-color: #f03c78; } .infobox.S2, .infobox.S2 .infobox-title, .infobox-game.inactive.S2 { background: rgba(240, 60, 120, 0.2); } .infobox.S2 .infobox-label { background: linear-gradient(90deg, rgba(240, 60, 120, 0.6), rgba(240, 60, 120, 0)); } /* Splatoon 3 color */ .infobox.S3, .infobox.S3 .infobox-title, .infobox.S3 .infobox-label, .infobox-game.S3 { background: rgba(235, 238, 61, 0.6); border-color: #ebee3d; } .infobox.S3, .infobox.S3 .infobox-title, .infobox-game.inactive.S3 { background: rgba(235, 238, 61, 0.2); } .infobox.S3 .infobox-label { background: linear-gradient(90deg, rgba(235, 238, 61, 0.6), rgba(235, 238, 61, 0)); } /* These colors are currently implemented through MediaWiki:Common.css .infobox { box-shadow: 0 0 16px #ffffff inset; } @media screen and (prefers-color-scheme: dark) { .infobox { box-shadow: 0 0 16px #111111 inset; } } */ /* Adjustments for smallest layout size */ @media screen and (max-width: 850px) { /* Present the game button list on the top and center it */ .infobox-gobbler.active { align-items: center; flex-direction: column; } /* Position the infobox/gobbler in the center and do not float it */ .infobox, .infobox-gobbler { float: none; } .infobox-game-list { flex-direction: row; } } /* Adjustments for all other layout sizes */ @media screen and (min-width: 851px) { .infobox-gobbler, .infobox { float: right; margin-left: 8px; } .infobox-gobbler .infobox { margin-left: 0; } }