|
|
| Line 6: |
Line 6: |
| body { | | body { |
| font-family: "Inter", sans-serif; | | font-family: "Inter", sans-serif; |
| background-attachment: fixed;
| |
| } | | } |
|
| |
|
| Line 25: |
Line 24: |
| --navbox-tertiary-header-color: #222; | | --navbox-tertiary-header-color: #222; |
| --navbox-section-color: #222; | | --navbox-section-color: #222; |
| }
| |
|
| |
| /* Card container */
| |
| .card-container {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| justify-content: center;
| |
| gap: 5px;
| |
| padding: 5px;
| |
| }
| |
|
| |
| /* Individual card */
| |
| .card {
| |
| align-items: center;
| |
| border: 1px solid #ccc;
| |
| border-radius: 8px;
| |
| box-shadow: 0 2px 5px rgba(0,0,0,0.1);
| |
| display: flex;
| |
| flex-direction: column;
| |
| width: 160px;
| |
| max-width: 100%;
| |
| text-align: center;
| |
| background-color: #fff;
| |
| overflow: hidden;
| |
| margin: 5px;
| |
| }
| |
|
| |
| /* Card title */
| |
| .card-title {
| |
| font-size: 1.2em;
| |
| font-weight: bold;
| |
| padding: 5px;
| |
| background-color: #f4f4f4;
| |
| }
| |
|
| |
| /* Card image container */
| |
| .card-image {
| |
| flex: 1; /* Take remaining space */
| |
| display: flex;
| |
| justify-content: center;
| |
| align-items: center;
| |
| padding: 5px; /* Add padding to keep distance from edges */
| |
| }
| |
|
| |
| /* Card image */
| |
| .card-image img {
| |
| width: 64px;
| |
| height: 64px;
| |
| display: block;
| |
| }
| |
|
| |
| /* Rarity categories */
| |
| .rarity-common {
| |
| background-color: #58bd7d;
| |
| color: #000;
| |
| }
| |
|
| |
| .rarity-uncommon {
| |
| background-color: #3b71fe;
| |
| color: #fff;
| |
| }
| |
|
| |
| .rarity-rare {
| |
| background-color: #9f73e6;
| |
| color: #fff;
| |
| }
| |
|
| |
| .rarity-legendary {
| |
| background-color: #e85929;
| |
| color: #fff;
| |
| }
| |
|
| |
| .rarity-mythic {
| |
| background-color: #e85929;
| |
| color: #fff;
| |
| }
| |
|
| |
| /* Rarity section */
| |
| .card-rarity {
| |
| padding: 5px;
| |
| font-size: 1em;
| |
| font-weight: bold;
| |
| color: #fff;
| |
| width: 100%;
| |
| text-align: center;
| |
| text-transform: capitalize; /* Capitalize the first letter */
| |
| }
| |
|
| |
| .table-container {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| justify-content: center; /* Center the tables */
| |
| gap: 10px; /* Add space between the table items */
| |
| }
| |
| .table-item {
| |
| display: flex;
| |
| flex-direction: column;
| |
| align-items: center;
| |
| margin: 10px;
| |
| text-align: center; /* Center align the contents of each table item */
| |
| flex: 1 1 200px; /* Ensure the table items are responsive */
| |
| box-sizing: border-box; /* Ensure padding and border are included in the width */
| |
| }
| |
| .table-icon {
| |
| margin-bottom: 10px; /* Space between icon and table */
| |
| }
| |
| @media (max-width: 800px) {
| |
| .table-item {
| |
| flex: 1 1 100%;
| |
| margin-right: 0;
| |
| }
| |
| }
| |
|
| |
| .infobox, .infobox-foundin {
| |
| background-color: #85a4e0;
| |
| border: 2.25px solid #2f76ff;
| |
| width: 300px;
| |
| max-width: 100%;
| |
| padding: 7.5px;
| |
| font-family: Arial, sans-serif;
| |
| border-radius: 15px;
| |
| border-top: 7.5px solid #2f76ff;
| |
| border-bottom: 7.5px solid #2f76ff;
| |
| float: right;
| |
| box-sizing: border-box;
| |
| margin-top: 10px;
| |
| }
| |
|
| |
| .infobox-title {
| |
| background-color: #2f76ff;
| |
| color: #333;
| |
| font-size: 13.5px;
| |
| font-weight: bold;
| |
| text-align: center;
| |
| padding: 3.75px;
| |
| border-radius: 7.5px;
| |
| }
| |
|
| |
| .infobox-image {
| |
| text-align: center;
| |
| padding: 7.5px 0;
| |
| }
| |
|
| |
| .infobox-content {
| |
| background-color: #85a4e0;
| |
| padding: 3.75px;
| |
| padding-bottom: 0px;
| |
| border-radius: 7.5px;
| |
| }
| |
|
| |
| .infobox-header {
| |
| background-color: #a1b7e0;
| |
| text-align: center;
| |
| font-weight: bold;
| |
| margin: 3.75px 0;
| |
| padding: 3.75px;
| |
| border-radius: 3.75px;
| |
| border: 0.75px solid #2f76ff;
| |
| }
| |
|
| |
| .infobox-row {
| |
| display: flex;
| |
| align-items: flex-start;
| |
| margin-bottom: 3px;
| |
| }
| |
|
| |
| .infobox-category {
| |
| background-color: #a1b7e0;
| |
| border: 0.75px solid #2f76ff;
| |
| border-radius: 7.5px;
| |
| width: 100px;
| |
| font-size: 13px;
| |
| padding: 3.75px;
| |
| box-sizing: border-box;
| |
| white-space: nowrap;
| |
| overflow: hidden;
| |
| text-align: left;
| |
| flex-shrink: 0;
| |
| border-top: 0;
| |
| border-left: 0;
| |
| border-right: 0;
| |
| }
| |
|
| |
| .infobox-value {
| |
| flex-grow: 1;
| |
| padding: 3.75px;
| |
| box-sizing: border-box;
| |
| word-break: break-word;
| |
| overflow: hidden;
| |
| text-overflow: ellipsis;
| |
| font-size: 12px;
| |
| }
| |
|
| |
| .infobox-icon-text {
| |
| display: flex;
| |
| align-items: center;
| |
| padding: 3.75px 0;
| |
| font-size: 12px;
| |
| }
| |
|
| |
| .infobox-icon-text .icon {
| |
| width: 18px;
| |
| height: 18px;
| |
| margin-right: 3.75px;
| |
| } | | } |