Template:Election/styles.css

/* Infobox styling */

.portable-infobox {
    width: 100%;
    margin: auto;
      box-shadow: -4px 4px 8px 0px rgba(0, 0, 0, 0.2);
    margin-bottom: 25px;
        border-radius:15px;
;
}
@media all and ( min-width: 720px ) {
  .portable-infobox { 
  width: 33%; 
  float: right; 
      box-shadow: -4px 4px 8px 0px rgba(0, 0, 0, 0.2);
    margin-bottom: 25px; 
    margin-left:5%;
    margin-right:0;
  	    border-radius:15px;

  }
}

.portable-infobox .pi-title {
   font-size: 21px;
   width: 100%;
   padding:25%;
   box-sizing: border-box;
   text-align: center;
   font-weight: bold;
   background-color: #3d3d3f;
   color: #f6f5f3;
   margin-right: 0px;
    margin-left:0px;
       border-bottom:4px solid #999999;
       border-radius:15px 15px 0 0;
}

.portable-infobox.pi-background {
   background-color: #f6f5f3;
}

.portable-infobox .pi-secondary-background {
   background-color: #3d3d3f;
width: 100%;
   padding:25%;
   box-sizing: border-box;
}

.portable-infobox .pi-border-color {
   border-color: #999999;
   border-width:1px;
}

.portable-infobox .pi-item-spacing {
   padding: 10px 20px;
}

.portable-infobox .pi-data-label {
   flex-basis: 165px;
}

.portable-infobox .pi-header {
	color:white;
	font-weight: bold;
}

.portable-infobox .pi-horizontal-group-item {
    border: none;
}

.pi-horizontal-group {
    display: table;
    table-layout: fixed; /* Ensures that columns respect the specified widths */
}

.pi-horizontal-group td {
    padding: 10px; /* Adjust padding as needed */
}

.pi-horizontal-group td[data-source="previous_election"] {
    width: 30%; /* 1/4 of the table width */
    text-align:left;
}

.pi-horizontal-group td[data-source="election_date"] {
    width: 40%; /* 2/4 of the table width */
    text-align:center;
}

.pi-horizontal-group td[data-source="next_election"] {
    width: 30%; /* 1/4 of the table width */
    text-align:right;
}
.pi-image-thumbnail {
width: 100%;
height: auto;
max-width:100%;
}
/* Election infobox dark mode*/
html.skin-theme-clientpref-night .pi-background {
  background: #3d3d3f;
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .pi-background {
    background: #3d3d3f;
  }
}

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

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

html.skin-theme-clientpref-night .pi-title {
  background: #161a24; 
  border-bottom: 4px solid #999999;
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .pi-title {
    background: #161a24; 
    border-bottom: 4px solid #999999;
  }
}

html.skin-theme-clientpref-night .portable-infobox { 
  box-shadow: -4px 4px 8px 0px rgba(225, 225, 225, 0.1);
}

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

html.skin-theme-clientpref-night .portable-infobox .pi-border-color {
  border-color: #999999;
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .portable-infobox .pi-border-color {
    border-color: #999999;
  }
}

html.skin-theme-clientpref-night .pi-data-label.pi-secondary-font {
  color: white;
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .pi-data-label.pi-secondary-font {
    color: white;
  }
}

html.skin-theme-clientpref-night .pi-data-value.pi-font {
  color: white;
}

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

html.skin-theme-clientpref-night .pi-data-value.pi-font a {
  color: white;
  text-decoration-line: underline;
}

@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .pi-data-value.pi-font a {
    color: white;
    text-decoration-line: underline;
  }
}

/* Flexbox to align items within .pi-smart-data-value */
.pi-smart-data-value {
    text-align: left;
}

/* Specific styles for the span containing the party name */
.party-name-conservative {
    display: block;
    text-align: center;
    padding-top:10px;
}

.party-name-liberal {
    display: block;
    text-align: center;
    padding-top:10px;
}

.party-name-labour {
    display: block;
    text-align: center;
    padding-top:10px;
}

.party-name-independent {
    display: block;
    text-align: center;
    padding-top:10px;
}

.party-name-independent-labour {
    display: block;
    text-align: center;
    padding-top:10px;
}

/* Party-specific classes */
.pi-smart-data-value.party-conservative {
box-shadow: inset 0px 40px 0px -30px rgba(0, 135, 220, 1);
}

.pi-smart-data-value.party-liberal {
box-shadow: inset 0px 40px 0px -30px rgba(255,215,0,1);
}

.pi-smart-data-value.party-labour {
    box-shadow: inset 0px 40px 0px -30px rgba(228,0,59,1);

}

.pi-smart-data-value.party-independent {
    box-shadow: inset 0px 40px 0px -30px rgba(0,0,0,1);
}

.pi-smart-data-value.party-independent-labour {
box-shadow: inset 0px 40px 0px -30px rgba(178,34,34,1);

}
/*Grey svg*/
html.skin-theme-clientpref-night .pi-image-thumbnail {
    background-color: #d3d3d3;
}

@media (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .pi-image-thumbnail {
        background-color: #d3d3d3;
    }
}