MediaWiki:Common.css: Difference between revisions

From He is Coming Official Wiki
Define div.borderline-wrapper-challenge so that a text block can be shaped around a float container aligned to the left side, and when the text reaches beyond the lower edge of the float, trailing phrases don't become isolated from the rest of their sentence.
No edit summary
 
(33 intermediate revisions by one other user not shown)
Line 5: Line 5:
   margin-top: 0.3em;
   margin-top: 0.3em;
   margin-bottom: 0.3em;
   margin-bottom: 0.3em;
}
.borderline-wrapper-challenge {
  overflow: auto;
  margin-top: 0.3em;
  margin-bottom: 0.3em;
}
.borderline-wrapper-challenge > p {
text-align: right;
}
}


Line 82: Line 72:
   padding: 0;
   padding: 0;
}
}
.infobox-corner-bottomright {
.infobox-corner-bottomright {
   margin-bottom: -4px !important;
   margin-bottom: -4px !important;
Line 94: Line 85:
}
}


.challenge_name {border-spacing: 0px;}
.challenge p {
.challenge_name .w {border-bottom: 4px solid #cf831e;}
  text-align: right;
.challenge_name .a {border-right: 4px solid #cf831e;}
}
.challenge_name .s {background: black; color: white; padding: 4px; padding-left: 12px; padding-right: 12px;}
 
.challenge_name .d {border-left: 4px solid #cf831e;}
.challenge .brown-bordered {
.challenge_name .x {border-top: 4px solid #cf831e;}
  width: auto;
}
 
.left-but {
  float: left;
  clear: left;
  margin: 0em auto;
  margin-right: 32px !important;
  margin-bottom: 16px;
}
 
.right-but {
  float: right;
  clear: right;
  margin: 0em auto;
  margin-left: 32px !important;
  margin-bottom: 16px;
}
 
.challenge .left-but {
  background: #241319;
}
 
@media (max-width: 640px) {
  .center-when-shrunk {
  float: none;
  clear: none;
  margin-left: auto !important;
  margin-right: auto !important;
  }
 
  .challenge .infobox-neutral {
    float: none !important;
    clear: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
 
  .infobox-upgrade {
    float: none !important;
    clear: none !important;
    margin: auto !important;
  }
 
  .challenge .brown-bordered {
    width:100%;
  }
}
 
.mw-body {
image-rendering: pixelated;
}

Latest revision as of 04:51, 22 October 2025

/* CSS placed here will be applied to all skins */
/* Wrapper och border */
.borderline-wrapper {
  overflow: auto;
  margin-top: 0.3em;
  margin-bottom: 0.3em;
}

.borderline {
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@media (max-width: 900px) {
  .borderline-wrapper {
    margin-right: 0 !important;
  }
}

.infobox-neutral {
  border: 4px solid #fff;
  border-collapse: collapse;
  background: #241319;
  width: 324px;
  margin: 2em auto;
  box-sizing: border-box;
}

.infobox-neutral td, .infobox-neutral th {
  border: none;
  background: #241319;
  padding: 0;
}

/* Top left corner */
.infobox-corner-topleft {
  margin-top: -10px !important;
  margin-left: -4px !important;
  position: relative;
  z-index: 2;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  padding: 0;
}

/* Bottom left corner (JUSTERA värden nedan för finjustering) */
.infobox-corner-bottomleft {
  margin-bottom: -4px !important;
  margin-left: -4px !important;
  position: relative;
  z-index: 2;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  padding: 0;
}

.infobox-corner-topright {
  margin-top: -10px !important;
  margin-right: -4px !important;
  position: relative;
  z-index: 2;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  padding: 0;
}

.infobox-corner-bottomright {
  margin-bottom: -4px !important;
  margin-right: -4px !important;
  position: relative;
  z-index: 2;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  padding: 0;
}

.challenge p {
  text-align: right;
}

.challenge .brown-bordered {
  width: auto;
}

.left-but {
  float: left;
  clear: left;
  margin: 0em auto;
  margin-right: 32px !important;
  margin-bottom: 16px;
}

.right-but {
  float: right;
  clear: right;
  margin: 0em auto;
  margin-left: 32px !important;
  margin-bottom: 16px;
}

.challenge .left-but {
  background: #241319;
}

@media (max-width: 640px) {
  .center-when-shrunk {
  	float: none;
  	clear: none;
  	margin-left: auto !important;
  	margin-right: auto !important;
  }
  
  .challenge .infobox-neutral {
    float: none !important;
    clear: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  .infobox-upgrade {
    float: none !important;
    clear: none !important;
    margin: auto !important;
  }

  .challenge .brown-bordered {
    width:100%;
  }
}

.mw-body {
	image-rendering: pixelated;
}