Template:House Card/styles.css
From Archon Arcana - The KeyForge Wiki
/* link coloring */ .appearsIn a:link, .appearsIn a:visited, .setChart a:link, .setChart a:visited { color: black; text-decoration: none; } .appearsIn a:hover, .setChart a:hover { color: black; text-decoration: underline; } .listOfCards a:link, .listOfCards a:visited, .listOfCards a:hover { text-decoration: none; color: white; } /* image sizing */ .houseEntry .imgCreature { width: 600px; height: auto; object-fit: cover; object-position: -150px -50px; } .houseEntry .houseLogo { position: absolute; top: 10px; left: 6px; width: 80px; height: auto; } .houseEntry .houseName { position: absolute; bottom: 0px; left: 0px; padding: 8px 30px 8px 30px; background-color: #202020; color: white; font-size: 2em; border-top-right-radius: 20px; filter: drop-shadow(0px 0px 10px #000000); float: left; } @media screen and (min-width: 801px) { .houseCard { display: flex; width: 100%; margin-bottom: 20px; margin-top: 10px; } .houseEntry { width: 300px; height: 380px; border: 1px solid #303030; border-radius: 20px; overflow: hidden; position: relative; box-shadow: 2px 2px 0px #303030; } .houseCard .text { flex: 1; display: flex; height: 100%; flex-direction: column; padding: 10px 10px 0px 20px; line-height: 1.5em; min-height: 385px; box-sizing: border-box; } .text .houseContents { flex: 1; height: 100%; } .houseCard .listOfCards { width: 95%; margin-left: 0%; margin-top: 15px; text-align: center; font-weight: bold; padding: 5px 5px 5px 5px; background-color: #303030; color: white; border-radius: 10px; transition: all 0.2s; } .houseCard .listOfCards:hover { box-shadow: 0px 0px 5px #000000; cursor: pointer; background-color: #000000; } .houseCard .appearsIn { display: flex; flex-direction: row; width: 100%; } .appearsIn div { flex: 1; margin-top: 20px; padding: 8px 5px 8px 5px; text-align: center; background-color: #d0d0d0; border-radius: 10px; box-sizing: border-box; margin-left: 0%; margin-right: 4%; } } /* mobile screens */ @media screen and (max-width: 800px) { .houseCard { width: 100%; display: table; margin-bottom: 20px; margin-top: 10px; } .houseEntry { width: 300px; height: 380px; margin-left: auto; margin-right: auto; border: 1px solid #303030; border-radius: 20px; overflow: hidden; position: relative; box-shadow: 2px 2px 0px #303030; } .houseCard .text { box-sizing: border-box; width: 100%; } .text .houseContents { padding: 10px 0px 0px 5px; line-height: 1.5em; margin-top: 20px; width: 100%; box-sizing: border-box; } .houseCard .listOfCards { width: 98%; margin-left: auto; margin-right: auto; margin-top: 15px; text-align: center; font-weight: bold; padding: 5px 5px 5px 5px; background-color: #303030; color: white; box-sizing: border-box; border-radius: 10px; transition: all 0.2s; } .houseCard .listOfCards:hover { box-shadow: 0px 0px 5px #000000; cursor: pointer; background-color: #000000; } .houseCard .appearsIn { display: flex; flex-direction: row; width: 100%; } .appearsIn div { flex: 1; margin-top: 10px; padding: 8px 5px 8px 5px; text-align: center; background-color: #d0d0d0; border-radius: 10px; box-sizing: border-box; margin-left: 1%; margin-right: 1%; } } /* super small mobile screens */ @media screen and (max-width: 359px) { .houseEntry { width: 250px; height: 380px; margin-left: auto; margin-right: auto; border: 1px solid #303030; border-radius: 20px; overflow: hidden; position: relative; box-shadow: 2px 2px 0px #303030; } } /* floats right on large screens */ @media screen and (min-width: 901px) { /* chart at top of page */ .setChart { width: 100%; max-width: 600px; margin-left: 15px; float:right; border-top: 1px solid #808080; border-left: 1px solid #808080; border-radius: 20px; background-color:#c0c0c0; overflow: hidden; box-shadow: 3px 3px 0px #303030; margin-top: 10px; margin-bottom: 15px; } .setChart .topRow { display: flex; width: 100%; flex-direction: row; box-sizing: border-box; border-bottom: 1px solid #909090; } .setChart .houseLogo { width: 30px; height: auto; filter: drop-shadow(3px 3px 0px #303030); } .setChart .topRow .setName { background-color: #b0b0b0; } .setChart .topRow .chartEntry { flex: 1; padding: 8px 5px 8px 5px; box-sizing: border-box; background-color: #b0b0b0; text-align: center; } .setChart .setName { width: 150px; text-align: right; box-sizing: border-box; font-weight: 600; padding: 8px 10px 8px 5px; } .setRow { display: flex; } .setRow .chartEntry { box-sizing: border-box; text-align: center; flex: 1; padding: 8px 5px 8px 5px; } .setRow:nth-child(odd) { background-color: #fafafa; } .setRow:nth-child(even) { background-color: #eaeaea; } .abbrevName { display: none; } } /* centers on medium sized screens */ @media screen and (min-width: 600px) and (max-width:900px) { /* chart at top of page */ .setChart { width: 100%; max-width: 700px; margin-left: auto; margin-right: auto; border-top: 1px solid #808080; border-left: 1px solid #808080; border-radius: 20px; background-color:#c0c0c0; overflow: hidden; box-shadow: 3px 3px 0px #303030; margin-top: 10px; margin-bottom: 15px; } .setChart .topRow { display: flex; width: 100%; flex-direction: row; box-sizing: border-box; border-bottom: 1px solid #909090; } .setChart .houseLogo { width: 30px; height: auto; filter: drop-shadow(3px 3px 0px #303030); } .setChart .topRow .setName { background-color: #b0b0b0; } .setChart .topRow .chartEntry { flex: 1; padding: 8px 5px 8px 5px; box-sizing: border-box; background-color: #b0b0b0; text-align: center; } .setChart .setName { width: 150px; text-align: right; box-sizing: border-box; font-weight: 600; padding: 8px 10px 8px 5px; } .setRow { display: flex; } .setRow .chartEntry { box-sizing: border-box; text-align: center; flex: 1; padding: 8px 5px 8px 5px; } .setRow:nth-child(odd) { background-color: #fafafa; } .setRow:nth-child(even) { background-color: #eaeaea; } .abbrevName { display: none; } } @media screen and (max-width: 599px) { /* chart at top of page */ .setChart { width: 100%; height:400px; margin-left: auto; margin-right: auto; border-top: 1px solid #808080; border-left: 1px solid #808080; border-radius: 20px; overflow: hidden; box-shadow: 3px 3px 0px #303030; margin-top: 10px; margin-bottom: 15px; display: flex; flex-direction: row; } .setChart .houseLogo { width: 25px; height: auto; filter:drop-shadow(2px 2px 0px #303030); } .fullName { display: none; } .setRow, .topRow { display: flex; flex: 1; flex-direction: column; } .topRow { background-color:#b0b0b0; } .setRow .setName, .topRow .setName { text-align: center; flex: 1; font-weight:600; border-bottom:1px dashed #c0c0c0; box-sizing: border-box; } .setChart .setName { padding:12px 0px 6px 0px; font-size:1.1em; } .setRow .chartEntry, .topRow .chartEntry { text-align: center; flex: 1; border-bottom:1px dashed #c0c0c0; box-sizing: border-box; padding:5px 0px 5px 0px; } .topRow .chartEntry, .topRow .setName { border-bottom:1px dashed #b0b0b0; } .setRow:nth-child(odd) { background-color: #fafafa; } .setRow:nth-child(even) { background-color: #eaeaea; } }