Diferencia entre revisiones de «Plantilla:Infobox/common.css»
De Inkipedia
mSin resumen de edición |
mSin resumen de edición |
||
Línea 7: | Línea 7: | ||
float: right; | float: right; | ||
gap: 4px; | gap: 4px; | ||
} | } | ||
.infobox-game-list { | .infobox-game-list { |
Revisión del 19:55 5 sep 2022
/* Gobbler container */ .infobox-gobbler { display: none; } .infobox-gobbler.active { display: flex; float: right; gap: 4px; } .infobox-game-list { display: flex; flex-direction: column; gap: 4px; } .infobox-game { border: 2px solid; border-radius: 4px; display: none; padding: 2px; text-align: center; width: 1.5em; } .infobox-game.inactive img { opacity: 0.4; } /* Main interface */ .infobox { border-radius: 4px; border-style: solid; border-width: 4px 1px; display: inline-flex; flex-direction: column; float: right; 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.5em; 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 { border-radius: 4px 0 0 4px; border-style: solid; border-width: 1px 0 1px 4px; font-weight: bold; padding: 4px; } /* Base colors (apply to light mode) */ .infobox { box-shadow: 0 0 16px #ffffff inset; } .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)); } .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)); } .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)); } /* 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; } }