Difference between revisions of "MediaWiki:Common.css"

From Prison Architect Wiki
Jump to navigation Jump to search
m (test)
m
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
/* CSS placed here will be applied to all skins */
 +
 +
.eu4box {
 +
border: 2px solid #154164;
 +
border-radius: 6px;
 +
background: #2B82C9;
 +
color: white !important;
 +
padding: 5px;
 +
margin-bottom: 3px;
 +
margin-left: 3px;
 +
}
 +
 +
.eu4box .heading {
 +
background: #154164;
 +
border-radius: 6px;
 +
padding: 0px 6px 0px;
 +
color: white !important;
 +
}
 +
 +
.eu4box a { color: lightblue !important; }
 +
.eu4box * { list-style-image: none; }
 +
.eu4box .heading .mw-headline { color: white; }
 +
 +
/* EU4Box master styles */
 +
.eu4box .subheading {
 +
color: #FFCD51;
 +
font-weight: bold;
 +
}
 +
 +
/* EU4box-inline overrides */
 +
.eu4box-inline {
 +
background: #FDFDFD;
 +
color: #0E0E0E !important;
 +
border: 2px solid #bfd9ee;
 +
border-radius: 4px;
 +
}
 +
.eu4box-inline .heading {
 +
background: #7fb4de;
 +
border-radius: 3px;
 +
}
 +
 +
.eu4box-inline hr {
 +
background: #CCC !important;
 +
margin: 5px 0px 5px;
 +
}
 +
 +
.eu4box-inline .heading .mw-headline { color: white; }
 +
.eu4box-inline .heading .mw-headline img { margin-right: 5px; }
 +
.eu4box-inline .subheading, span[style="color: #FFCD51"] { color: #273442 !important; }
 +
.eu4box-inline a { color: darkblue !important; }
 +
.eu4box .mw-collapsible-toggle { float:none; }
 +
.eu4box h2 { margin-top: 0 !important; }
 +
.eu4box h3 { margin-top: 0 !important; }
 +
 +
 +
 
/* Navbox styling */
 
/* Navbox styling */
  
Line 7: Line 63:
 
   margin: auto;
 
   margin: auto;
 
   clear: both;
 
   clear: both;
   font-size: 80%;
+
   font-size: 88%;
 
   text-align: center;
 
   text-align: center;
 
   padding: 1px;
 
   padding: 1px;
Line 59: Line 115:
 
.navbox-odd {
 
.navbox-odd {
 
   background: transparent;              /* Odd row striping */
 
   background: transparent;              /* Odd row striping */
 +
}
 +
 +
 +
/* Prison Architect specific stylings */
 +
.fullRes img {
 +
height: auto;
 +
max-width: 100%;
 +
margin: 0 auto;
 +
display: block;
 +
}
 +
.PAlink a { color: #004DB0; }
 +
.PAlink a:visited { color: #002b6a; }
 +
.iconM {
 +
border: 2px outset #ACACAC;
 +
border-radius: 5px;
 +
margin-right: 6px;
 +
float: left;
 +
overflow: hidden;
 +
}
 +
.iconS {
 +
border: 1px outset #ACACAC;
 +
border-radius: 4px;
 +
line-height: 12px;
 +
overflow: hidden;
 +
float: left;
 +
margin: 0 6px 2px 0;
 +
}
 +
.screw {
 +
position: absolute;
 +
border-radius: 50%;
 +
border: 1px inset #7D7D7D;
 +
background: #C4C4C4;
 +
background: linear-gradient(30deg, rgb(200, 200, 200) 42%,rgb(79, 79, 79) 50%,rgb(200, 200, 200) 58%);
 +
}
 +
.grad1 { background: linear-gradient(176deg, rgb(200, 200, 200) 42%,rgb(79, 79, 79) 50%,rgb(200, 200, 200) 58%); }
 +
.grad2 { background: linear-gradient(5deg, rgb(200, 200, 200) 42%,rgb(79, 79, 79) 50%,rgb(200, 200, 200) 58%); }
 +
.grad3 { background: linear-gradient(150deg, rgb(200, 200, 200) 42%,rgb(79, 79, 79) 50%,rgb(200, 200, 200) 58%); }
 +
 +
.topleft {
 +
top: 10px;
 +
left: 10px;
 +
}
 +
.topright {
 +
top: 10px;
 +
right: 10px;
 +
}
 +
.bottomleft {
 +
bottom: 10px;
 +
left: 10px;
 +
}
 +
.bottomright {
 +
bottom: 10px;
 +
right: 10px;
 +
}
 +
.PAgrid { background: #2B82C9 url(/images/e/ee/Blueprint.jpg) repeat left center; }
 +
.PAgrid2 { background: #2B82C9 url(/images/9/91/Greyprint.jpg) repeat left center; }
 +
.PAbrick { background: #2B82C9 url(/images/f/f3/Grey-brick.jpg) repeat left center; }
 +
 +
 +
/* RWD test */
 +
/* hide options */
 +
@media only screen and (max-width: 600px) {
 +
  .hides {display: none;}
 +
}
 +
 +
@media only screen and (max-width: 1200px) {
 +
  .hidem {display: none;}
 +
}
 +
 +
@media only screen and (min-width: 1201px) {
 +
  .hidel {display: none;}
 +
}
 +
 +
/* Grid layout test */
 +
* {
 +
/*  box-sizing: border-box; */
 +
}
 +
 +
/* grid container (large screen) */
 +
.grid-container {
 +
  display: grid;
 +
  grid-template-areas:
 +
    'header header header header header header'
 +
    'left middle middle middle middle right'
 +
    'left middle2 middle2 middle2 middle2 right'
 +
    'left middle3 middle3 middle3 middle3 right'
 +
    'left footer footer footer footer footer';
 +
}
 +
 +
/* grid container (medium screen) */
 +
@media only screen and (max-width: 1200px) {
 +
  .grid-container  {
 +
    grid-template-areas:
 +
    'header header header header header header'
 +
    'left middle middle middle middle middle '
 +
    'left middle2 middle2 middle2 middle2 middle2 '
 +
    'left middle3 middle3 middle3 middle3 middle3 '
 +
    'left footer footer footer footer footer';
 +
  }
 +
}
 +
 +
/* grid container (small screen) */
 +
@media only screen and (max-width: 600px) {
 +
  .grid-container  {
 +
    grid-template-areas:
 +
      'header header header header header header'
 +
      'middle middle middle middle middle middle'
 +
      'middle2 middle2 middle2 middle2 middle2 middle2'
 +
      'left left left left left left'
 +
      'middle3 middle3 middle3 middle3 middle3 middle3'
 +
      'footer footer footer footer footer footer';
 +
  }
 +
}
 +
 +
/* grid area location classes */
 +
.header {
 +
  grid-area: header;
 +
}
 +
.footer {
 +
  grid-area: footer;
 +
}
 +
.left {
 +
  grid-area: left;
 +
}
 +
.right {
 +
  grid-area: right;
 +
}
 +
.middle {
 +
  grid-area: middle;
 +
}
 +
.middle2 {
 +
  grid-area: middle2;
 +
}
 +
.middle3 {
 +
  grid-area: middle3;
 
}
 
}

Latest revision as of 08:52, 29 May 2020

/* CSS placed here will be applied to all skins */

.eu4box {
	border: 2px solid #154164;
	border-radius: 6px;
	background: #2B82C9;
	color: white !important;
	padding: 5px;
	margin-bottom: 3px;
	margin-left: 3px;
}

.eu4box .heading {
	background: #154164;
	border-radius: 6px;
	padding: 0px 6px 0px;
	color: white !important;
}

.eu4box a { color: lightblue !important; }
.eu4box * { list-style-image: none; }
.eu4box .heading .mw-headline { color: white; }

/* EU4Box master styles */
.eu4box .subheading {
	color: #FFCD51;
	font-weight: bold;
}

/* EU4box-inline overrides */
.eu4box-inline {
	background: #FDFDFD;
	color: #0E0E0E !important;
	border: 2px solid #bfd9ee;
	border-radius: 4px;
}
.eu4box-inline .heading {
	background: #7fb4de;
	border-radius: 3px;
}

.eu4box-inline hr {
	background: #CCC !important;
	margin: 5px 0px 5px;
}

.eu4box-inline .heading .mw-headline { color: white; }
.eu4box-inline .heading .mw-headline img { margin-right: 5px; }
.eu4box-inline .subheading, span[style="color: #FFCD51"] { color: #273442 !important; }
.eu4box-inline a { color: darkblue !important; }
.eu4box .mw-collapsible-toggle { float:none; }
.eu4box h2 { margin-top: 0 !important; }
.eu4box h3 { margin-top: 0 !important; }



/* Navbox styling */

table.navbox {                          /* Navbox container style */
  border: 1px solid #CCC;
  background: #FEFEFF;
  width: 100%;
  margin: auto;
  clear: both;
  font-size: 88%;
  text-align: center;
  padding: 1px;
}
table.navbox + table.navbox {           /* Single pixel border between adjacent navboxes */
  margin-top: -1px;                     /* (doesn't work for IE6, but that's okay)       */
}
.navbox-title,
.navbox-abovebelow,
table.navbox th {
  text-align: center;                   /* Title and above/below styles */
  padding-left: 1em;
  padding-right: 1em;
}
table.navbox th a {
  color: #444;                          /* Should make the header links look better */
}

.navbox-group {                         /* Group style */
  white-space: nowrap;
  text-align: right;
  font-weight: bold;
  padding-left: 1em;
  padding-right: 1em;
}
.navbox, .navbox-subgroup {
  background: #FEFEFF;                  /* Background color */
}
.navbox-list {
  border-color: #FEFEFF;                /* Must match background color */
}
.navbox-title,
table.navbox th {
  background: #EEE;                  /* Level 1 color */
}
.navbox-abovebelow,
.navbox-group,
.navbox-subgroup .navbox-title {
  background: #CCC;                  /* Level 2 color */
}
.navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow {

  background: #DDD;                  /* Level 3 color */
}
.navbox tr {
   background-color:#FEFEFF;            /* Standard cell background */
}
.navbox-even {
  background: #EEE;                  /* Even row striping */
}
.navbox-odd {
  background: transparent;              /* Odd row striping */
}


/* Prison Architect specific stylings */
.fullRes img {
	height: auto;
	max-width: 100%;
	margin: 0 auto;
	display: block;
}
.PAlink a { color: #004DB0; }
.PAlink a:visited { color: #002b6a; }
.iconM {
	border: 2px outset #ACACAC;
	border-radius: 5px;
	margin-right: 6px;
	float: left;
	overflow: hidden;
}
.iconS {
	border: 1px outset #ACACAC;
	border-radius: 4px;
	line-height: 12px;
	overflow: hidden;
	float: left;
	margin: 0 6px 2px 0;
}
.screw {
	position: absolute;
	border-radius: 50%;
	border: 1px inset #7D7D7D;
	background: #C4C4C4;
	background: linear-gradient(30deg, rgb(200, 200, 200) 42%,rgb(79, 79, 79) 50%,rgb(200, 200, 200) 58%);
}
.grad1 { background: linear-gradient(176deg, rgb(200, 200, 200) 42%,rgb(79, 79, 79) 50%,rgb(200, 200, 200) 58%); }
.grad2 { background: linear-gradient(5deg, rgb(200, 200, 200) 42%,rgb(79, 79, 79) 50%,rgb(200, 200, 200) 58%); }
.grad3 { background: linear-gradient(150deg, rgb(200, 200, 200) 42%,rgb(79, 79, 79) 50%,rgb(200, 200, 200) 58%); }

.topleft {
	top: 10px;
	left: 10px;
}
.topright {
	top: 10px;
	right: 10px;
}
.bottomleft {
	bottom: 10px;
	left: 10px;
}
.bottomright {
	bottom: 10px;
	right: 10px;
}
.PAgrid { background: #2B82C9 url(/images/e/ee/Blueprint.jpg) repeat left center; }
.PAgrid2 { background: #2B82C9 url(/images/9/91/Greyprint.jpg) repeat left center; }
.PAbrick { background: #2B82C9 url(/images/f/f3/Grey-brick.jpg) repeat left center; }


/* RWD test */
/* hide options */
@media only screen and (max-width: 600px) {
  .hides {display: none;}
}

@media only screen and (max-width: 1200px) {
  .hidem {display: none;}
}

@media only screen and (min-width: 1201px) {
  .hidel {display: none;}
}

/* Grid layout test */
* {
/*  box-sizing: border-box; */
}

/* grid container (large screen) */
.grid-container {
  display: grid;
  grid-template-areas: 
    'header header header header header header' 
    'left middle middle middle middle right' 
    'left middle2 middle2 middle2 middle2 right' 
    'left middle3 middle3 middle3 middle3 right' 
    'left footer footer footer footer footer';
} 

/* grid container (medium screen) */
@media only screen and (max-width: 1200px) {
  .grid-container  {
    grid-template-areas: 
    'header header header header header header' 
    'left middle middle middle middle middle ' 
    'left middle2 middle2 middle2 middle2 middle2 ' 
    'left middle3 middle3 middle3 middle3 middle3 ' 
    'left footer footer footer footer footer';
  }
}

/* grid container (small screen) */
@media only screen and (max-width: 600px) {
  .grid-container  {
    grid-template-areas: 
      'header header header header header header' 
      'middle middle middle middle middle middle' 
      'middle2 middle2 middle2 middle2 middle2 middle2' 
      'left left left left left left' 
      'middle3 middle3 middle3 middle3 middle3 middle3' 
      'footer footer footer footer footer footer';
  }
}

/* grid area location classes */
.header {
  grid-area: header;
}
.footer {
  grid-area: footer;
}
.left {
  grid-area: left;
}
.right {
  grid-area: right;
}
.middle {
  grid-area: middle;
}
.middle2 {
  grid-area: middle2;
}
.middle3 {
  grid-area: middle3;
}