MediaWiki:Common.css

From In Stars and Time Wiki
Jump to navigation Jump to search

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* CSS placed here will be applied to all skins */

/* Fix scaling of sidebar image */
#p-logo a{
  background-size:100%;
}


/* Make the main page readable on light mode */
.theme-fandomdesktop-light .mainbox {
	color: black;
	background-color: #F5F5F5;
}

.theme-fandomdesktop-dark .mainbox {
	color: white;
	background-color: #232323;
}

.theme-fandomdesktop-dark .bigmainbox {
	color: white;
	background-color: #2b2b2b;
}

/* Flex containers for mainpage */
.mainpage-leftcolumn {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  flex-direction: column;
}

.mainpage-rightcolumn {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  flex-direction: row;
}

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

@media only screen and (min-width: 1024px) {
  .mainpage {
  	display: flex;
  }
	
  /* Adjust the width of the right column to 300 pixels */
  .mainpage-rightcolumn {
    flex: 0 0 300px;
  }

  /* Allow the left column to fill the remaining space */
  .mainpage-leftcolumn {
    flex: 1;
  }
}

/* Style for bigmainbox and mainbox items */
.bigmainbox, .mainbox {
  flex: 1 1 45%; /* Adjust the width as needed */
  margin-top: 1em;
  padding: 1em;
  text-align: center;
  border: 3px;
  /*border-image: linear-gradient(to bottom, #f5f5f5, #808080) 1;*/
}

/* Additional styling for mainbox in mainpage-rightcolumn */
/*.mainbox.right {
  border-image: linear-gradient(to bottom, #808080, #333333) 1;
}*/

/* Clear both to prevent layout issues */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/*Ignore warning - it works. Auto-wrap tables. */
table {
	text-wrap:wrap;
}

/* Stat table stylings for consistency */

.stathead {
    border-width: 1px; 
    border-style: solid; 
    height:36px; 
    padding: 0px 5px 0px;
    min-width: 50px;
}

.statcell {
    padding: 0px 5px 0px;
    min-width: 50px;
    text-align: right; 
    height: 36px;
}

.stattable {
	margin-top: 16px;
	display:inline-block;
    border-style:double; 
    border-width:5px;
	vertical-align:top; 
	background:none; 
	overflow:auto; 
	text-align:center;
    border-color: black;
}