Template:Plain box/styles.css

/* Plain box container for desktop */
@media all and (min-width: 720px) {
  .plain_box {
    width: 47.5%;
    margin-top: 2.5%;
    margin-bottom: 2.5%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 15px;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: -4px 4px 8px 0px rgba(0, 0, 0, 0.2);
    background-color: #f6f5f3;
  }
}

/* Plain box container for mobile */
@media all and (max-width: 720px) {
  .plain_box {
    width: 100%;
    margin-top: 2.5%;
    margin-bottom: 2.5%;
    border-radius: 15px;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: -4px 4px 8px 0px rgba(0, 0, 0, 0.2);
    background-color: #f6f5f3;
  }
}

html.skin-theme-clientpref-night .plain_box {
  box-shadow: -4px 4px 8px 0px rgba(225, 225, 225, 0.1);
  background-color: #3d3d3f;
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .plain_box {
    box-shadow: -4px 4px 8px 0px rgba(225, 225, 225, 0.1);
    background-color: #3d3d3f;
  }
}

/* Plain box title */
.plain_box_title {
  height: 70px;
  background: #3d3d3f;
  padding: 10px 15px;
  color: #f6f5f3;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}

html.skin-theme-clientpref-night .plain_box_title {
  background: #161a24;
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .plain_box_title {
    background: #161a24;
  }
}

/* Plain box content */
.plain_box_content {
  height: 450px;
  background: #f6f5f3;
  padding: 10px 15px;
  border-top: 4px solid #999999;
}

html.skin-theme-clientpref-night .plain_box_content {
  background: #3d3d3f;
  border-top: 4px solid #999999;
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .plain_box_content {
    background: #3d3d3f;
    border-top: 4px solid #999999;
  }
}

/* Plain box category */
.plain_box_category {
  height: 50px;
  background: #f6f5f3;
  padding: 10px 15px;
  border-top: 3px solid #3d3d3f;
}

html.skin-theme-clientpref-night .plain_box_category {
  background: #161a24;
  border-top: 3px solid #f6f5f3;
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .plain_box_category {
    background: #161a24;
    border-top: 3px solid #f6f5f3;
  }
}

/* Text & Images */
.plain_box_h2 {
  color: white;
  font-size: 150%;
  text-align: left;
  font-weight: bold;
  line-height: 25px;
}

.plain_box_h2 a {
  color: white;
  text-decoration: none;
}

.plain_box_p {
  color: black;
  font-size: 100%;
  text-align: left;
  border-top: 4px solid #999999;
  padding-top: 5%;
}

html.skin-theme-clientpref-night .plain_box_p {
  color: white;
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .plain_box_p {
    color: white;
  }
}

.plain_box_p a {
  color: black;
  text-decoration: none;
}

html.skin-theme-clientpref-night .plain_box_p a {
  color: white;
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .plain_box_p a {
    color: white;
  }
}

.plain_box_c {
  color: black;
  font-size: 75%;
  text-align: center;
  margin: 2.5%;
}

html.skin-theme-clientpref-night .plain_box_c {
  color: white;
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .plain_box_c {
    color: white;
  }
}

.plain_box_c a {
  color: black;
  text-decoration: none;
}

html.skin-theme-clientpref-night .plain_box_c a {
  color: white;
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .plain_box_c a {
    color: white;
  }
}

.plain_box_category_p {
  color: #3d3d3f;
  font-size: 75%;
  text-align: left;
}

html.skin-theme-clientpref-night .plain_box_category_p {
  color: white;
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .plain_box_category_p {
    color: white;
  }
}

.plain_box_category_p a {
  color: #3d3d3f;
  text-decoration: none;
}

html.skin-theme-clientpref-night .plain_box_category_p a {
  color: white;
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .plain_box_category_p a {
    color: white;
  }
}

a.new {
  color: #3d3d3f;
  text-decoration: none;
}

html.skin-theme-clientpref-night a.new {
  color: white;
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os a.new {
    color: white;
  }
} /* Missing closing brace added here */

@media all and (min-width: 720px) {
  img {
    max-width: 45%;
    height: auto;
  }
}

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

/* Container for images */
@media all and (min-width: 720px) {
  .container {
    margin-bottom: 25px;
    margin: auto;
  }
}

.container {
  margin-bottom: 25px;
  margin: auto;
  padding: 0px;
  background-size: cover; /* Optional: Ensure the image covers the element */
  background-repeat: no-repeat; /* Optional: Prevent the image from repeating */
  height: 40%; /* Optional: Ensure the element has height */
  border-radius: 5px;
  box-shadow: inset 0 4px 8px 0 rgba(0, 0, 0, 0.2), inset 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  background-position: center;
}

@media (min-width: 1250px) {
  .container {
    height: 60%;
  }
  .plain_box_content {
  	padding-bottom: 10%;
  }
}


@media (min-width: 800px) and (max-width: 1249px) {
  .container {
    height: 50%;
  }
}

/* For screens between 800px and 721px */
@media (max-width: 799px) and (min-width: 721px) {
  .container {
    height: 40%;
  }
}

/* For screens between 721px and 400px */
@media (max-width: 720px) and (min-width: 401px) {
  .container {
    height: 50%;
  }
}

/* For screens 400px and below */
@media (max-width: 400px) {
  .container {
    height: 40%;
  }
}

a {
  text-decoration: none !important;
}

.mw-file-element {
  border-radius: 5px;
}

.The.First.RUDC.Election.container {
    background-image: url(https://static.miraheze.org/rothwellwiki/5/5f/RUDC_1894.svg);
    background-size: contain;
}

.The.Rothwell.Times.container {
    background-image: url(https://static.miraheze.org/rothwellwiki/4/47/RT_header.svg);
    background-size: contain;
}

/* Invert Images */
html.skin-theme-clientpref-night .The.Rothwell.Times.container {
    filter: invert(1);
box-shadow: inset 0 4px 8px 0 rgba(255, 255, 255, 0.2), inset 0 6px 20px 0 rgba(255, 255, 255, 0.19);
}

@media (prefers-color-scheme: dark) {
.The.Rothwell.Times.container {
        filter: invert(1);
box-shadow: inset 0 4px 8px 0 rgba(255, 255, 255, 0.8), inset 0 6px 20px 0 rgba(255, 255, 255, 0.81);
    }
}

html.skin-theme-clientpref-day .The.Rothwell.Times.container {
    filter: none;
  box-shadow: inset 0 4px 8px 0 rgba(0, 0, 0, 0.2), inset 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

@media (prefers-color-scheme: light) {
.The.Rothwell.Times.container {
        filter:none;
  box-shadow: inset 0 4px 8px 0 rgba(0, 0, 0, 0.2), inset 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
}

/*Grey background Images */

html.skin-theme-clientpref-night .The.First.RUDC.Election.container {
    background-color: #999999;
}

@media (prefers-color-scheme: dark) {
.The.First.RUDC.Election.container {
        background-color: #999999;
        }
}

html.skin-theme-clientpref-day .The.First.RUDC.Election.container {
    background-color: initial;
}

@media (prefers-color-scheme: light) {
    .The.First.RUDC.Election.container {
        background-color: initial;
    }
}