Template:Top 16/styles.css
From Archon Arcana - The KeyForge Wiki
/* Color coding for rankings */ .rank1 { background-color: #f7cdd9; } .rank2 { background-color: #f7e3cd; } .rankt4 { background-color: #d3edce; } .rankt8 { background-color: #daf2f7; } .rankt16 { background-color: #edebeb; } /* Color coding for sets */ .vtdecksCotA { background-color: #ffb8c7; color: #9c2828; } .vtdecksCotAmobile { background-color: #ffffff; color: #000000; } .vtdecksAoA { background-color: #c9e7ff; color: #2c608a; } .vtdecksWC { background-color: #e7ceed; color: #721c8c; } .vtdecksMM { background-color: #bac2d1; color: #29354a; } .vtdecksDT { background-color: #3D0DF1; color: #29354a; } .vtdecksWoE { background-color: #F1890D; color: #29354a; } /* hover image display effect */ div.hover_container { width: 100%; } div.hover_container .text { display: table; width: 100%; } div.hover_container .image { display: none; width: 100%; } div.hover_container:hover { } .vtimagewrap { text-align: center; display: block; position: absolute; padding: 5px; left: 70px; z-index:3; } /* set up the header row */ .vtdecksheader { font-weight: bold; background-color: #edebeb; font-size: 1.1em; display: flex; padding-top: 7px; padding-bottom: 7px; } .vtdecksmenu2 { flex: 1; padding-left: 6px; } .vtdecksmenu4 { width: 90px; text-align: center; } .vtdeckswrap { display: flex; width: 100%; } /* set up the table entries */ .vtdecksdeck { padding-left: 6px; padding-top: 5px; padding-bottom: 5px; border-top: 1px solid #b3b3b3; background-color: #ffffff; flex: 1; } .vtdeckshouses { border-top: 1px solid #b3b3b3; background-color: #ffffff; width: 90px; text-align: center; padding-top: 5px; padding-bottom: 5px; } .vtdecksdeck2 { padding-left: 6px; padding-top: 5px; padding-bottom: 5px; border-top: 1px solid #b3b3b3; background-color: #efefef; flex: 1; } .vtdeckshouses2 { border-top: 1px solid #b3b3b3; background-color: #efefef; width: 90px; text-align: center; padding-top: 5px; padding-bottom: 5px; } .vtdecksmobile { display:flex; } /* large settings */ @media screen and (min-width: 711px) { .top16decks { display:table; } /* set up the table */ .vtdeckstable { border: 1px solid #9e9e9e; border-spacing: 0px; background-color: white; margin-top: 10px; margin-bottom: 10px; width: 500px; display: table; } .vtdecksmenu1 { width: 40px; padding-right: 5px; text-align: center; } .vtdecksmenu3 { width: 60px; text-align: center; } .vtdecksrank { text-align: right; padding-right: 5px; padding-top: 5px; padding-bottom: 5px; border-top: 1px solid #b3b3b3; width: 40px; } .vtdecksset { text-align: center; padding-top: 5px; padding-bottom: 5px; border-top: 1px solid #b3b3b3; width: 60px; } /* enables image overlay */ div.hover_container:hover { display: table; } div.hover_container:hover .text { display: none; } div.hover_container:hover .image { display: table; } .vtdecksmobilehouses { display:none; } .vtdecksmobileset { display:none; } .vtdecksmobilerank { display:none; } .vtdecksmobilesetborder { display:none; } } /* small screens */ @media screen and (max-width: 710px) { .top16decks { display:table; width:100%; } /* set up the table */ .vtdeckstable { border: 1px solid #9e9e9e; border-spacing: 0px; background-color: white; margin-top: 10px; margin-bottom: 10px; width: 100%; display: table; max-width:480px; } .vtdecksmenu1 { width: 30px; padding-right: 5px; text-align: center; } .vtdecksmenu3 { display:none; } .vtdecksrank { text-align: right; padding-right: 5px; padding-top: 5px; padding-bottom: 0px; border-top: 1px solid #b3b3b3; width: 30px; } .vtdecksdeck { padding-bottom:0px; } .vtdecksset { display:none; } .vtdeckshouses { display:none; } .vtdecksmenu4 { width: 92px; text-align: left; } .vtdecksmobilehouses { padding-top:0px; padding-bottom:5px; padding-left:5px; padding-right:5px; box-sizing:border-box; } .vtdecksmobileset { padding-top:4px; padding-bottom:5px; padding-left:6px; padding-right:5px; flex:1; font-size:.85em; box-sizing:border-box; } .vtdecksmobilerank { width:35px; padding-top:0px; padding-bottom:5px; box-sizing:border-box; } .vtdecksmobilesetborder { width:20px; } }