Template:Set Info/styles.css
From Archon Arcana - The KeyForge Wiki
.fixed-th-table-wrapper td, .fixed-th-table-wrapper th, .scrolled-td-table-wrapper td, .scrolled-td-table-wrapper th { background: #ffffff; } .fixed-th-table-wrapper { position: absolute; } .fixed-th-table-wrapper th { position: relative; z-index: 1; } .scrolled-td-table-wrapper td { position: relative; } .scrolled-td-table-wrapper { overflow-x: auto; } .container table { border-spacing: 0; } .container { position: relative; overflow: hidden; width:100%; } .container td { min-width:50px; border-bottom:1px solid #c0c0c0; text-align:center; padding-left:10px; padding-right:10px; } .container tr { height:50px; } .container th:first-child { min-width:150px; background-color:#cedbf2; color:black; font-weight:600; padding:5px 5px 5px 5px; box-sizing:border-box; font-size:1em; text-align:center; border-right:0px; border-bottom:1px solid #8a9dbf; } .container td:nth-child(odd) { background-color:#efefef; } .container td:last-of-type { border-right:0px solid #303030; } .container tr:first-of-type { font-weight:bold; border-bottom:2px solid #000000; } .container td.top-row { background-color:#505050; border-bottom:2px solid #303030; border-right:0px; border-left:0px; color:white; } .container th.top-row { border-right:0px; border-left:0px; background-color:#505050; border-bottom:2px solid #303030; color:white; } .set-icon { width:20px; height:20px; background-color:#b0b0b0; padding:5px; border-radius:50%; filter:drop-shadow(2px 2px 0px #000000); } .house-logo { width:25px; height:auto; filter:drop-shadow(2px 2px 0px #000000); margin-right:3px; } td.house-row { min-width:200px; } td.release-date { min-width:100px; } td.card-number { min-width:80px; } td.card-number-2 { min-width:110px; } .set-image { width:250px; height:250px; overflow:hidden; border-radius:20px; border-top:1px solid #303030; border-left:1px solid #303030; filter:drop-shadow(3px 3px 0px #303030); box-sizing:border-box; position:relative; } .set-image .set { width:250px; height:auto; object-fit:cover; } .set-image .set-name { position:absolute; bottom:0px; left:0px; width:100%; background-color:#eaeaea; color:white; text-align:center; padding:6px 5px 6px 5px; box-sizing:border-box; border-top:1px solid #303030; } .set-image .house-logo { filter:drop-shadow(2px 2px 0px #303030); margin-left:2.5px; margin-right:2.5px; } .anomaly-cards { position:relative; height:200px; width:300px; overflow:hidden; margin-left:auto; margin-right:auto; margin-bottom:10px; } .anomaly-cards .card-1 { width:120px; height:168px; position:absolute; top:15px; left:15px; transform:rotate(-10deg); filter:drop-shadow(0px 0px 2px #000000); } .anomaly-cards .card-2 { width:120px; height:168px; position:absolute; top:5px; left:90px; transform:rotate(0deg); filter:drop-shadow(0px 0px 2px #000000); z-index:1; } .anomaly-cards .card-3 { width:120px; height:168px; position:absolute; top:15px; left:160px; transform:rotate(10deg); z-index:1; filter:drop-shadow(0px 0px 2px #000000); } .container a:link, .container a:visited { color:black; } .container a:hover { color:#505050; text-decoration:underline; } @media screen and (min-width:500px) { .set-image { float:right; margin-left:20px; margin-bottom:15px; } /* .set-image:nth-of-type(even) { float:left; margin-right:20px; margin-left:0px; } */ .anomaly-cards { float:none; margin-left:auto; margin-right:auto; margin-bottom:10px; } } @media screen and (min-width:800px) { .anomaly-cards { float:left; margin-left:0px; margin-bottom:15px; margin-right:20px; } } @media screen and (max-width:499px) { .set-image { float:none; margin-left:auto; margin-right:auto; margin-bottom:10px; margin-top:10px; } .anomaly-cards { float:none; margin-left:auto; margin-right:auto; margin-bottom:10px; } } @media screen and (max-width:450px) { .anomaly-cards { position:relative; height:200px; width:300px; overflow:hidden; margin-left:auto; margin-right:auto; margin-bottom:10px; } .anomaly-cards .card-1 { width:120px; height:168px; position:absolute; top:15px; left:15px; transform:rotate(-10deg); filter:drop-shadow(0px 0px 2px #000000); } .anomaly-cards .card-2 { width:120px; height:168px; position:absolute; top:5px; left:90px; transform:rotate(0deg); filter:drop-shadow(0px 0px 2px #000000); z-index:1; } .anomaly-cards .card-3 { width:120px; height:168px; position:absolute; top:15px; left:160px; transform:rotate(10deg); z-index:1; filter:drop-shadow(0px 0px 2px #000000); } }