Template:Sandbox5/styles.css
From Archon Arcana - The KeyForge Wiki
/* * * mediawiki commons CSS * */ /* for card gallery */ .checkbox-custom { position: relative; } :checked+.checkbox-label .checkbtox-checkbox:before{ position: absolute; left: 30px; top: 14px; z-index: 100; content: url("https://upload.wikimedia.org/wikipedia/commons/1/1e/Eo_circle_grey_white_checkmark.svg"); background-color:#e0e0e0; outline:1px solid #505050; height:18px; width:18px; } :checked+.checkbox-label img { filter: drop-shadow(3px 3px 0px #303030); } .checkbox-house { display: none; } .checkbox-custom img { width: 35px; height: 35px; margin-right: 5px; filter: drop-shadow(3px 3px 0px #303030); cursor:pointer; } /* * * card gallery menu * * */ /* sets up the menu */ .cg-menu { width: 100%; max-width: 750px; display: inline-block; font-family:lato,arial; } .cg-advanced-menu { font-family:lato,arial; } /* makes the top row wrap */ .cg-menu .top-row { display: flex; flex-wrap: wrap; } /* code for the house row at all screen sizes */ .house-row .house-entries { display: flex; flex-wrap: wrap; justify-content: center; } .house-row .house { border-bottom: 3px solid #ffffff; overflow: hidden; transition:all .3s ease-in-out; } .house .houseIcon { width: 35px; width: auto; opacity: 1; padding: 8px 10px 7px 5px; transition: all 0.3s ease-in-out; /* filter: drop-shadow(3px 3px 0px #303030); */ } /* sets up the hover & click effect for the house icons */ .house-row .house:hover .houseIcon { filter: drop-shadow(6px 4px 2px #000000) brightness(120%); opacity:1; } .house-row .house:hover { /*background-color: #c0c0c0;*/ /* border-bottom: 3px solid #909090; */ cursor: pointer; overflow: hidden; } /* sets up the set and type rows */ .set-row, .type-row, .rarity-row, .card-name-row, .card-number-row, .card-text-row, .flavor-text-row, .power-row, .armor-row, .trait-row, .aember-row { display: flex; margin-bottom: 10px; } /* adds a horizontal line at the bottom */ .horizontal-line { border-bottom: 3px solid #c0c0c0; width: 100%; margin-bottom: 20px; display:block; } /* makes a custom checkbox for the type row */ /* hides the original ugly checkbox */ .type input[type="checkbox"], .set input[type="checkbox"], .top-row input[type="checkbox"] { opacity: 0; } /* adjusts the text for the checkbox */ .type label, .set label, .top-row label { position: relative; display: inline-block; padding-left: 22px; } /* sets up a fake checkmark and the outer box */ .type label::before, .type label::after, .set label::before, .set label::after, .top-row label::before, .top-row label::after { position: absolute; content: ""; display: inline-block; transition: all 0.5s ease-in-out; } .type label::before, .set label::before, .top-row label::before { height: 14px; width: 14px; left: 0px; top: 3px; background-color: #c0c0c0; border: 1px solid #303030; } .type label::after, .set label::after, .top-row label::after { height: 5px; width: 8px; border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; transform: rotate(-55deg); left: 3px; top: 6px; } .type input[type="checkbox"] + label::after, .set input[type="checkbox"] + label::after, .top-row input[type="checkbox"] + label::after { content: none; } .type input[type="checkbox"]:checked + label::after, .set input[type="checkbox"]:checked + label::after, .top-row input[type="checkbox"]:checked + label::after { content: ""; } .type input[type="checkbox"]:focus + label::before, .set input[type="checkbox"]:focus + label::before, .top-row input[type="checkbox"]:focus + label::before { outline: #517dbd auto 1px; background-color: #808080; } /* adjusts the dropdown for the rarity section */ .rarity-row .rarity-entries select, .trait-row .trait-entries select, .trait-row .keyword-entries select, .trait-row .artist-entries select { width: 200px; font-size: 1em; padding: 1px 5px 1px 5px; } /* custom text input boxes */ .card-name-row input[type="text"]:focus, .card-number-row input[type="text"]:focus, .card-text-row input[type="text"]:focus, .flavor-text-row input[type="text"]:focus { background-color: #d0d0d0; outline: #517dbd auto 0px; } /* aligns the enhancement icons */ .enhance-image { width:20px; height:20px; margin-left:4px; margin-right:2px; } /* displays the number of results */ .cg-results { margin-top: 10px; margin-bottom: 10px; background-color: #e0e0e0; padding: 10px 10px 10px 20px; border-radius: 10px; font-weight: 600; } /* mobile screens */ @media screen and (max-width: 950px) { /* adds the top row of houses */ .cg-menu .house-row { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; max-width: 300px; margin-left: auto; margin-right: auto; margin-bottom: 10px; } .house-row .menu { display: none; } .top-row { justify-content:space-around; } .set-row, .type-row { display:block; } /* .set-row { margin-right:5px; } */ .set-row .menu, .type-row .menu { width: 100%; box-sizing: border-box; font-weight: 600; text-align: center; padding: 4px 5px 5px 5px; margin-top:0px; border-bottom:1px solid #c0c0c0; } .rarity-row .menu { width: 80px; box-sizing: border-box; font-weight: 600; text-align: right; padding: 2px 5px 5px 5px; } .set-row .set-entries, .rarity-row .rarity-entries { flex: 1; display: block; min-width: 160px; } .type-row .type-entries { flex: 1; display: block; min-width: 120px; } .set-row .set-entries, .type-row .type-entries, .isnew-entries { padding-top:7px; } .set-row .set, .type-row .type, .type, .set { margin-bottom: 3px; } .cg-advanced-menu, .cg-menu { max-width:450px; justify-content:center; } .rarity-row .rarity-entries, .armor-row .armor-entries, .armor-row .enhance-entries, .power-row .power-entries, .aember-row .aember-entries, .trait-row .trait-entries, .trait-row .keyword-entries, .trait-row .artist-entries, .armor-row .order-entries { padding-left: 9px; padding-top:5px; max-width:248px; background-color:white; } .armor-row .armor-entries, .armor-row .enhance-entries, .power-row .power-entries, .aember-row .aember-entries { margin-top:3px; } .aember-row, .power-row, .armor-row, .trait-row { justify-content:center; } .aember-row, .power-row, .armor-row { margin-bottom:3px; } /*centers the advanced search for mobile */ .advanced-search { display: block; margin-left: auto; margin-right: auto; background-color: #c9e4f7; width: 200px; margin-left: auto; text-align: center; padding: 10px 10px 6px 20px; border-top-left-radius: 20px; border-top-right-radius: 20px; transition:all .2s ease-in-out; } .advanced-search:hover { background-color:#a6d2f2; } /* sets up the advanced menu */ .card-name-row .menu, .card-number-row .menu, .card-text-row .menu, .flavor-text-row .menu { width: 110px; box-sizing: border-box; font-weight: 600; text-align: right; padding: 4px 5px 5px 5px; } .power-row .menu, .armor-row .menu, .aember-row .menu { width: 80px; box-sizing: border-box; font-weight: 600; text-align: right; padding: 8px 5px 5px 5px; } .trait-row .menu { width: 90px; box-sizing: border-box; font-weight: 600; text-align: right; padding: 8px 5px 5px 5px; } .trait-row .menu { padding: 4px 5px 5px 5px; } .card-name-row .card-name-entries, .card-number-row .card-number-entries, .card-text-row .card-text-entries, .flavor-text-row .flavor-text-entries { flex: 1; display: block; padding-top:2px; } .card-name-row input, .card-number-row input, .card-text-row input, .flavor-text-row input { width: 90%; max-width: 300px; border: 1px solid #b0b0b0; background-color: #eaeaea; border-radius: 10px; padding: 5px 5px 5px 10px; transition: all 0.3s ease-in-out; } .power-row .power-entries, .armor-row .armor-entries, .aember-row .aember-entries, .armor-row .enhance-entries { padding:5px 5px 5px 5px; flex:1; width:100%; } .power-row .power-entries select, .armor-row .armor-entries select, .aember-row .aember-entries select, .armor-row .enhance-entries select { font-size: 1em; padding: 1px 5px 1px 5px; width:80px; margin-left:5px; margin-right:5px; outline:1px solid #303030; } .armor-row .enhance-entries select:nth-of-type(odd) { margin-right:11px; width:85px; } .armor-row .enhance-entries select:nth-of-type(even) { width:82px; } .armor-row .enhance-entries select:first-of-type { margin-bottom:0px; } .trait-row .trait-entries select, .rarity-row .rarity-entries select, .trait-row .keyword-entries select, .trait-row .artist-entries select, .armor-row .order-entries select { width:242px; outline:1px solid #303030; } } @media screen and (max-width:390px) { .power-row .power-entries select, .armor-row .armor-entries select, .aember-row .aember-entries select, .armor-row .enhance-entries select { font-size: 1em; padding: 1px 5px 1px 5px; width:50px; margin-left:5px; margin-right:5px; } .trait-row .trait-entries select, .rarity-row .rarity-entries select, .trait-row .keyword-entries select, .trait-row .artist-entries select, .armor-row .order-entries select { width:182px; } .rarity-row .rarity-entries, .armor-row .armor-entries, .armor-row .enhance-entries, .power-row .power-entries, .aember-row .aember-entries, .trait-row .trait-entries, .trait-row .artist-entries, .trait-row .keyword-entries, .armor-row .order-entries { padding-left: 9px; padding-top:5px; max-width:190px; background-color:white; } .armor-row .enhance-entries select:nth-of-type(odd) { margin-right:10px; width:50px; } .armor-row .enhance-entries select:nth-of-type(even) { width:50px; } } @media screen and (min-width: 951px) { .cg-menu { position: relative; } .cg-menu .house-row { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; max-width: 800px; margin-bottom: 10px; } .cg-menu .house-row .menu { width: 96px; font-weight: 600; padding: 15px 10px 0px 5px; text-align: right; box-sizing: border-box; } .set-row, .type-row, .rarity-row { display: flex; margin-bottom: 20px; } .cg-menu .set-row .menu, .type-row .menu, .rarity-row .menu { width: 60px; font-weight: 600; padding: 0px 2px 5px 5px; margin-top:0px; text-align: right; box-sizing: border-box; } .rarity-row .menu { padding: 0px 10px 5px 5px; } .set-row .set, .type-row .type, .set, .type { margin-bottom: 5px; } .set-row .set:nth-child(1), .type-row .type:nth-child(1), .rarity-row .rarity:nth-child(1) { margin-top:2px; } .advanced-search { display:none; } .cg-advanced-menu { display:block !important; } .first-row, .second-row-wrap { display: flex; } .second-row { display:block; } .card-name-row, .card-number-row { margin-bottom:10px; } .card-name-row .menu { width: 96px; box-sizing: border-box; font-weight: 600; text-align: right; padding: 3px 5px 5px 5px; } .card-number-row .menu { width: 110px; box-sizing: border-box; font-weight: 600; text-align: right; padding: 3px 5px 5px 5px; } .card-text-row .menu, .flavor-text-row .menu { width: 110px; box-sizing: border-box; font-weight: 600; text-align: right; padding: 7px 5px 5px 5px; } .power-row .menu, .trait-row .menu, .armor-row .menu, .aember-row .menu { width: 110px; box-sizing: border-box; font-weight: 600; text-align: right; padding: 7px 5px 5px 5px; } .trait-row .menu { padding:5px 5px 5px 5px; } .card-text-row .card-text-entries, .trait-row .trait-entries, .flavor-text-row .flavor-text-entries, .card-number-row .card-number-entries, .trait-row .keyword-entries, .trait-row .artist-entries { width: 250px; padding:0px 5px 0px 5px; } .card-name-row .card-name-entries { width: 650px; padding:0px 5px 0px 5px; } .card-text-row .card-text-entries, .flavor-text-row .flavor-text-entries, .trait-row .trait-entries, .trait-row .keyword-entries, .trait-row .artist-entries, .armor-row .order-entries { padding:5px 5px 4px 5px; } .card-name-row input, .card-number-row input, .card-text-row input, .flavor-text-row input { width: 90%; border: 1px solid #b0b0b0; background-color: #eaeaea; border-radius: 10px; padding: 5px 5px 5px 10px; transition: all 0.3s ease-in-out; } .trait-row .trait-entries select, .trait-row .keyword-entries select, .trait-row .artist-entries select, .armor-row .order-entries select { width:242px; padding: 1px 5px 1px 5px; } .power-row .power-entries, .armor-row .armor-entries, .armor-row .enhance-entries, .aember-row .aember-entries { padding:7px 5px 5px 5px; flex:1; width:100%; } .power-row .power-entries select, .armor-row .armor-entries select, .aember-row .aember-entries select, .armor-row .enhance-entries select { font-size: 1em; padding: 1px 5px 1px 5px; width:80px; margin-left:5px; margin-right:5px; } .armor-row .enhance-entries select:nth-of-type(odd) { margin-right:10px; } .armor-row .enhance-entries select:first-of-type { margin-bottom:5px; } /* sets up the set and type rows */ .card-text-row, .card-name-row .card-number-row, .flavor-text-row, .power-row, .armor-row, .trait-row, .aember-row { display: flex; margin-bottom: 4px; } } /* * * card gallery: image gallery * * */ /* card gallery results number */ .card-gallery-results { margin-top: 10px; margin-bottom: 10px; background-color: #e0e0e0; padding: 10px 10px 10px 20px; border-radius: 10px; font-weight: 600; } @media screen and (max-width: 560px) { .card-gallery-images { width: 100%; overflow: hidden; display: flex; /* I hate internet explorer */ flex-wrap: wrap; display: grid; /* every other browser gets a pretty grid */ grid-template-columns: repeat(2, 1fr); } .card-gallery-images .gallery-image { min-width: 100px; max-width: 250px; overflow: hidden; height: auto; margin-right: 5px; margin-left: 5px; margin-top: 3px; margin-bottom: 3px; } .card-gallery-images .gallery-image img { width: 100%; height: auto; } } @media screen and (min-width: 561px) and (max-width: 900px) { .card-gallery-images { width: 100%; overflow: hidden; display: flex; flex-wrap: wrap; display: grid; grid-template-columns: repeat(3, 1fr); } .card-gallery-images .gallery-image { min-width: 150px; max-width: 230px; overflow: hidden; height: auto; margin-right: 3%; margin-left: 3%; margin-top: 3%; margin-bottom: 3%; transition:all .2s ease-in-out; } .card-gallery-images .gallery-image img { width: 100%; height: auto; transition: all 0.2s ease-in-out; } .card-gallery-images .gallery-image:hover img { cursor: pointer; } .card-gallery-images .gallery-image:hover { transform:scale(1.05); } } @media screen and (min-width: 901px) and (max-width: 1200px) { .card-gallery-images { width: 100%; overflow: hidden; display: flex; flex-wrap: wrap; display: grid; grid-template-columns: repeat(4, 1fr); } .card-gallery-images .gallery-image { min-width: 150px; max-width: 230px; overflow: hidden; height: auto; margin-right: 3%; margin-left: 3%; margin-top: 4%; margin-bottom: 3%; transition:all .2s ease-in-out; } .card-gallery-images .gallery-image img { width: 100%; height: auto; transition: all 0.2s ease-in-out; } .card-gallery-images .gallery-image:hover img { cursor: pointer; } .card-gallery-images .gallery-image:hover { transform:scale(1.05); } } @media screen and (min-width: 1201px) and (max-width: 1500px) { .card-gallery-images { width: 100%; overflow: hidden; display: flex; flex-wrap: wrap; display: grid; grid-template-columns: repeat(5, 1fr); } .deck-gallery-images { width: 100%; overflow: hidden; display: flex; flex-wrap: wrap; display: grid; grid-template-columns: repeat(5, 1fr); } .card-gallery-images .gallery-image { min-width: 150px; max-width: 230px; overflow: hidden; height: auto; margin-right: 3%; margin-left: 3%; margin-top: 4%; margin-bottom: 3%; transition:all .2s ease-in-out; } .card-gallery-images .gallery-image img { width: 100%; height: auto; transition: all 0.2s ease-in-out; } .card-gallery-images .gallery-image:hover img { cursor: pointer; } .card-gallery-images .gallery-image:hover { transform:scale(1.05); } } @media screen and (min-width: 1501px) and (max-width: 1700px) { .card-gallery-images { width: 100%; overflow: hidden; display: flex; flex-wrap: wrap; display: grid; grid-template-columns: repeat(6, 1fr); } .card-gallery-images .gallery-image { max-width: 230px; overflow: hidden; height: auto; margin-right: 3%; margin-left: 3%; margin-top: 4%; margin-bottom: 3%; transition:all .2s ease-in-out; } .card-gallery-images .gallery-image img { width: 100%; height: auto; transition: all 0.2s ease-in-out; } .card-gallery-images .gallery-image:hover img { cursor: pointer; } .card-gallery-images .gallery-image:hover { transform:scale(1.05); } } @media screen and (min-width: 1701px) { .card-gallery-images { width: 100%; max-width: 1750px; overflow: hidden; display: flex; flex-wrap: wrap; display: grid; grid-template-columns: repeat(7, 1fr); } .card-gallery-images .gallery-image { max-width: 230px; overflow: hidden; height: auto; margin-right: 3%; margin-left: 3%; margin-top: 4%; margin-bottom: 3%; transition:all .2s ease-in-out; } .card-gallery-images .gallery-image img { width: 100%; height: auto; transition: all 0.2s ease-in-out; } .card-gallery-images .gallery-image:hover img { cursor: pointer; } .card-gallery-images .gallery-image:hover { transform:scale(1.05); } }