MediaWiki:Common.css: Difference between revisions

Revision as of 14:44, 3 April 2024

/* CSS placed here will be applied to all skins */
body.page-Main_Page.action-view h1.firstHeading, body.page-Main_Page.action-submit h1.firstHeading { display: none; }
body.page-Test_Main.action-view h1.firstHeading, body.page-Test_Main.action-submit h1.firstHeading { display: none; }

#p-logo { height: 250px; width: 160px; }

#p-logo a { height: 250px; width: 160px; }
div#mw-panel { padding-top: 2em; }

img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 760px) { /* Adjust as needed */
  table, tbody, tr, td {
    display: block;
    width: 100%;
  }
}

.card-container {
  position: relative;
  width: 300px; /* Adjust to match your desired container width */
  height: 450px; /* Adjust to match your desired container height */
}

.card-container img {
  position: absolute;
  top: 0;
  left: 0;
}

.card-frame {
  z-index: 1; /* Ensures the frame is at the bottom */
  width: 95%; /* Adjust to fit the container or as needed */
  height: 95%; /* Adjust to fit the container or as needed */
  padding-left: 5%;
  padding-top: 5%;
}

.card-main-art {
  z-index: 2; /* Above the frame */
  width: 78%; /* Adjust based on your needs */
  padding-left: 13.5%;
  height: auto;
  transform: translateY(-4%);
}


.card-banner {
  z-index: 3; /* Ensures the banner is at the top */
  width: 90%; /* Adjust based on your needs */
  height: auto; /* Maintain aspect ratio */
  padding-top: 57%;
  padding-left: 7.4%;
}

.card-cost {
    z-index: 3; /* Ensures the banner is at the top */
    height: auto; /* Maintain aspect ratio */
  }
  
.card-text-box {
position: absolute;
padding: 10px;
border-radius: 5px;
z-index: 4;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
/* Add more common styles here */
}

.card-cost-text {
top: 2.65%; /* Position from the top */
left: 6.5%; /* Position from the left */
color: white;
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
font-size: 1.5em;
}

.card-name-text {
top: 42%; /* Adjust these values based on your layout */
left: 12%;
width: 75%;
color: white;
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);

}

.card-description-text {
left: 14%; /* Centering the box horizontally, adjust as necessary */
top: 56%;
width: 70%;
}