User:Pax/layout.css: Difference between revisions

Revision as of 15:01, 16 January 2021

/* DO NOT LINK TO OR COPY. */

h3 {
 font-family: Josefin Sans;
 font-weight: 900;
 color: #FFFFFF;
}

body {margin: 0;}

#main {padding: 1em; margin: 0; background-color:#140E0A; width:100%; border-width:0px; vertical-align: top;}

#block {color: #312925; background-color: white; padding: 2em; margin-bottom: 0.5em; margin-top: 0.5em; font-family: Josefin Sans; font-size: 12pt;}

#blocksound {color: #312925; background-color: #140E0A; padding:2em; margin-bottom: 0.5em; font-family: Josefin Sans; font-size: 12pt;}

#blockintro {color: #FFFFFF; background-color: #140E0A; padding:2em; margin-bottom: 0.5em; font-family: Josefin Sans; font-size: 12pt; vertical-align: top;}
#blockintro a:link { color: #FFFFFF; }
#blockintro a:visited { color: #FFFFFF; }
#blockintro a:hover { color: #E3E1DD; text-decoration: none;}
#blockintro a:active { color: #FFFFFF; text-decoration: none;}

#intro {color: #FFFFFF; background-color: #140E0A; font-size: 0pt; vertical-align: top; margin: 0;}

#urhan {color: #FFFFFF; background-color: #140E0A; padding: 1em; margin-bottom: 0; font-family: Josefin Sans; font-size: 12pt;}

#title-bar, #title-bar-outro {background-color: #140E0A; color: #E3E1DD; text-align: center; font-weight:bold; padding:.5em 0 .5em 0; font-family: Josefin Sans; font-size: 12pt; vertical-align: top; margin: 0}

#outro {padding: 2em; color: white; background-color: #140E0A; border-radius:0 0 2em 2em; font-size: 12pt;}

.float img {
  float: right;
  overflow: visible;
  position: absolute;
  right: 160px;
  bottom: 180px;
  opacity: .4;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.float :hover img {
	opacity: 1;
}

#character-table
{
    background-color: {{{page color}}};
    border: 0px solid {{{page border}}};
    -border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
}

#character-table .character-table
{
{{ #switch: {{{page gradient|}}}|no=|
    background: -webkit-gradient(linear, 48% top, 52% bottom, from(rgba(128, 128, 128, .3)), to(rgba(0, 0, 0, .3)));
    background: -moz-linear-gradient(-80deg, rgba(128, 128, 128, .3), rgba(0, 0, 0, .3));
}}
    width: 100%;
    padding: 5px;
    margin: 0px;
}

.character-cell
{
    border: 0px solid {{{cell border}}};
    -border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: {{{cell color}}};
    margin-bottom: 0.5em; 
    width: 100%;
}

img { max-width: 100%; height: auto; width: auto\9; /* ie8 */}

.urhanpic {border: 0px solid black;}
/* Opacity #1 */
.urhanpic img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.urhanpic :hover img {
	opacity: .4;
}

/* Circle */
.contactpic2 {
	position: relative;
}
.contactpic2 ::before {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: block;
	content: '';
	width: 0;
	height: 0;
	background: rgba(255,255,255,.2);
	border-radius: 100%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
}
.contactpic2 :hover::before {
	-webkit-animation: circle .75s;
	animation: circle .75s;
}
@-webkit-keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}
@keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}

/* Portrait */

.portraitcontainer {
  position: relative; display:inline-block;}
}

.portrait1 {
  display: block;
  width: 100%;
  height: auto;
}

.portraitoverlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #140E0A;
}

.portraitcontainer:hover .portraitoverlay {
  opacity: .8;
}

.portraittext {
  color: white;
  font-size: 20px;
  font-family: Josefin Sans;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.character-cell-table
{
{{ #switch: {{{cell gradient|}}}|no=|
    background: -webkit-gradient(linear, 48% top, 52% bottom, from(rgba(255, 255, 255, .3)), to(rgba(160, 160, 160, .3)));
    background: -moz-linear-gradient(-80deg, rgba(255, 255, 255, .3), rgba(160, 160, 160, .3));
}}
    -border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    color: {{{cell text}}};
    width: 100%;
}
.character-cell-table table td, .character-cell-table table th
{
    color: {{{cell text}}};
}

.character-cell a, .character-cell a:visited, #content .character-cell a.external, #content .character-cell a.external:visited { color: {{{link color}}}; }
.character-cell a:hover, #content .character-cell a.external:hover { color: {{{link hover color}}}; }
.character-cell a.new, .character-cell a.new:visited { color: red; }

.character-header
{
    background: {{{header color}}};
    border-top-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -webkit-border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-border-top-right-radius: 4px;
    border: 1px solid {{{header border}}};
    color: {{{header text}}};
    font-weight: bold;
    text-align: center;
}

.character-glass 
{
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .5)), color-stop(50%, rgba(255, 255, 255, .2)), color-stop(50%, rgba(0, 0, 0, .2)), to(rgba(255, 255, 255, .1)));
    background: -moz-linear-gradient(top, rgba(255, 255, 255, .5), rgba(255, 255, 255, .2) 50%, rgba(0, 0, 0, .2) 50%, rgba(255, 255, 255, .1));
    display: block;
    text-outline: 1px 1px #000;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, .7);
    width: 100%;
}

.character-2columns
{
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
}

.character-3columns
{
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}

.character-italic { font-style: italic; }
#character-table table.gallery, #character-table table.gallery td { background-color: transparent; border: 0px; }
#character-table h2
{
    color: {{{page color}}};
    font-family: Josefin Sans, sans;
    font-size: 125%;
    font-style: italic;
    font-weight: bold;
    padding-right: 2em;
    text-align: right;
}

.character-quote
{
    color: {{{header color}}};
    font-family: Josefin Sans, sans;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    text-outline: 1px 1px #000;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, .7);
    width: 50%;
}

.character-shadowtext
{
    font-family: Josefin Sans, sans;
    text-outline: 1px 1px #000;
    text-shadow: 0 -1px 1px rgba( 0, 0, 0, .7 );
}

.character-rounded img
{
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
}

.infobox td
{
    vertical-align: top;
}

.hiddenStructure { display: none; }