MediaWiki:Common.css: Difference between revisions

Help

Revision as of 15:40, 3 October 2024

@import url("https://fonts.googleapis.com/css?family=Noto+Sans|BioRhyme|Rubik|Graduate|Architects+Daughter");

/***** CSS placed here will be applied to all skins on the entire site. *****/
/*Main Site Font*/
body, .category-gallery-item .snippet .text, wikia-button, .wikia-single-button a, .wikia-menu-button, input, .button, button, select, tabbernav {font-family:Rubik;line-height: 27px;}
a.new {
    color:#b70000;
 }
  
.toc, #toc { 
	background-color: #f2e5bb; 
}

div.thumbinner{ 
	background-color: #f2e5bb; 
}
li.gallerybox div.thumb{
	background-color:transparent;
	border:0;
}
li.gallerybox div.thumb img:hover {
 transform: scale(1.1);
}

 .cosmos-header::before{ 
  background:linear-gradient(180deg, rgba(255,255,255,0) 48%, rgba(206,190,138,1) 68%);
  border-radius: 30px 30px 0px 0px;
}

body{
	background-image: url("https://wiki.quelmar.com/wiki/images/backgroundimage.png");
}

#mw-content {
 background-color:#cebe8a
 }

body > #mw-content-container {
  padding-top:2%
}

span.keeptogether {
  white-space: nowrap ;
} 

#mw-page-base{
	background-image: url("https://wiki.quelmar.com/wiki/images/backgroundimage.png");
}

.mw-page-container{
    background-color: #cebe8a00;
    border-left: 1px solid #cebe8a00;
    border-right: 1px solid #cebe8a00;
}

.cosmos-header__local-navigation {
 display:block ruby;
}

widgetbot {
  display:contents;
}

#content{
	background-color: #cebe8a;
}

#content h1{
	font-family:"Rubik", Light;
	display: contents;
}
#content h2,
#content h3 {
	font-family: "BioRhyme", regular;
}

mw-headline h3{
		font-family: "BioRhyme";
}

.infobox {
    background: #cebe8a;
    border: 1px solid #cebe8a;
    float: right;
    margin: 0 0 1em 1em;
    padding: 1em;
    width: 425px;
    box-sizing:border-box;
}
.infobox-title {
    font-size: 2em;
    text-align: center;
    background:#492320;
    color: white;
}
.infobox-image {
    text-align: center;
}
.infobox th {
    text-align: right;
    vertical-align: top;
    width: 120px;
}
.infobox td {
    vertical-align: top;
}

.wikitable{
	border: 0;
}

/*header rows in wikitable*/
table.wikitable th{
 background-color: #c0b180;
 padding:5px;
 border-left: 0 solid #cebe8a;
 border-right: 0 solid #cebe8a;
 border-top: 1px solid #A99D76;
 border-bottom: 1px solid #A99D76;
}
/*Item Rows in wiki Table*/
table.wikitable td{
 background-color: #CABA87;
 border-left: 0 solid #cebe8a;
 border-right: 0 solid #cebe8a;
 border-top: 1px solid #A99D76;
 border-bottom: 1px solid #A99D76;
}
 .wikitable:not([style*='background-color']) > * > tr > td {
  background-color:#eedda8;
 }
 
 body .wikitable > tr > th,
 body .wikitable > tr > td,
 body .wikitable > * > tr > th,
 body .wikitable > * > tr > td {
  background-color:#af9e68;
 }

blockquote{
	display:table;
	background-image: url("https://wiki.quelmar.com/wiki/images/backgroundimage.png");
	filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2));
	width:fit-content(20em);
	border:none;
}

blockquote p{
	font-family:"Architects Daughter", regular;
}

blockquote a{
	font-family:"Architects Daughter", regular;
}

.tabs-tabbox > .tabs-container{
	border:0px;
}
.invertfilter{
	filter:invert(80%);
}
.sepiafilter{
	filter:sepia();
}

#audio { width: 30px; height: 30px;}

 .wds-dropdown {
  position:relative;
  display:flex;
  height:100%;
  background: #cebe8a;
  border-radius: 15px 15px 0px 0px;
 }
 #p-Support_Quelmar {
	background:linear-gradient(180deg, rgba(249,170,241,1) 63%, rgba(206,190,138,0) 85%);
 	
 }
 
/*** THE BELOW RETHEMES THE WIKI FOR CR TAGGED PAGES TO DIFFERENTIATE THE ERAS ***/
.cat-CR {
 	background-image: url("https://wiki.quelmar.com/wiki/images/backgroundimagecr.jpg");
 }
.cat-CR #content{
	background-color: #b9b9b9;
}
.cat-CR #mw-content{
	background-color: #b9b9b9;
}
.cat-CR .cosmos-header::before{ 
	background: linear-gradient(to bottom,transparent,#b9b9b9);
}
.cat-CR .wds-dropdown{
	background-color: #b9b9b9;	
}
.cat-CR .toc, .cat-CR #toc{
	background-color: #ffffff;
}
.cat-CR .infobox{
	background: #ffffff;
}
.cat-CR .infobox-title{
	background: #000000;
}
.cat-CR #catlinks{
	background: #ffffff
}
.cat-CR #cosmos-banner {
	filter: drop-shadow(0px 10px 4px rgba(0, 0, 0, 0.7))
}
.cat-CR table.wikitable th {
	background:#a4cce3
}
.cat-CR table.wikitable tr {
	background:#a4cce3
}
.cat-CR div.thumbinner{
	background-color:#ffffff;
}


/*** THE BELOW RETHEMES THE WIKI FOR ASTRAL TAGGED PAGES TO DIFFERENTIATE THE COOL SPACE STUFF ***/
.cat-Astral {
 	background-color: #e1d7f9;
 	background-image: none;
 }
.cat-Astral #content{
	background-color: #d4c5fa;
}
.cat-Astral #mw-content{
	background-color: #d4c5fa;
}
.cat-Astral .cosmos-header::before{ 
	background: linear-gradient(to bottom,transparent,#d4c5fa);
}
.cat-Astral .wds-dropdown{
	background-color: #d4c5fa;	
}
.cat-Astral .toc, .cat-Astral #toc{
	background-color: #e1d7f9;
}
.cat-Astral .infobox{
	background: #d4c5fa;
	border: 1px solid #452049;
}
.cat-Astral .infobox-title{
	background: #452049;
}
.cat-Astral #catlinks{
	background: #d4c5fa
}
.cat-Astral #cosmos-banner {
	filter: drop-shadow(0px 10px 4px rgba(0, 0, 0, 0.7))
}
.cat-Astral table.wikitable th {
	background:#e1d7f9
}
.cat-Astral table.wikitable tr {
	background:#e1d7f9
}
.cat-Astral div.thumbinner{
	background-color:#e1d7f9;
}

.torn_container{
    border-style: solid; 
    border-width: 40px 40px 40px; 
       -moz-border-image: url('https://wiki.quelmar.com/wiki/images/d/df/Torn-edge-top-300x23.png') 80 80 80 repeat; 
    -webkit-border-image: url('https://wiki.quelmar.com/wiki/images/d/df/Torn-edge-top-300x23.png') 80 80 80 repeat; 
         -o-border-image: url('https://wiki.quelmar.com/wiki/images/d/df/Torn-edge-top-300x23.png') 80 80 80 repeat; 
            border-image: url('https://wiki.quelmar.com/wiki/images/d/df/Torn-edge-top-300x23.png') 80 80 80 repeat;
}


/* WikiForum CSS */
table.mw-wikiforum-frame {
 clear:both;
 width:100%;
 background:#fbeecd;
 border:1px dotted #ccc;
 margin-bottom:1.2em
}

tr.mw-wikiforum-title {
 background:#aea071;
 height:3em
}

td.mw-wikiforum-thread-main {
 padding:10px;
 border:1px solid #cef2e0;
 background:#fbeecd;
}

th.mw-wikiforum-thread-top {
 font-weight:bold;
 padding:5px 10px;
 border:1px solid #cef2e0;
 background:#cebe8a;
 text-align:left;
 box-shadow: 0px 6px black;
}

#mw-wikiforum-searchbox:before{
  content:"Wiki Forum Search";
  font-style:italic
}
#mw-wikiforum-searchbox-border {
 border:5px solid #deadd4;
 width:220px;
 text-align:right;
 background:#eccee6;
}
td.mw-wikiforum-leftside {
 text-align:left;
 font-size: 15px;
}

  #catlinks {
    background:#af9e68;
  }


/**** New Front Page Boxes ****/
.campaign-box {
    width: 230px;
    height: 125px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.7;
    overflow: hidden;
    transition: opacity 0.3s ease;
    border-radius:10px;
}
.campaign-box:hover {
    opacity: 1.03;
}
.campaign-box:hover .campaign-image img {
    transform: scale(1.05); /* Enlarge the image by 5% */
    transition: transform 0.3s ease; /* Smooth transition */
}
.campaign-image {
	display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.campaign-box-link {
    display: block;
    width: 230px;
    height: 125px;
    text-decoration: none; /* Removes any underlines from the link */
}
.campaign-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease; /* Smooth transition for scaling */
}
.campaign-text {
    color: white;
    font-weight: bold;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5); /* Adds a semi-transparent black background for readability */
    padding: 2px 5px;
    border-radius: 3px;
    position: relative; /* Ensures text is on top */
    z-index: 1;
}
.campaign-text a {
    color: white;
    font-weight: bold;
    text-align: center;
    position: relative; /* Ensures text is on top */
    z-index: 1;
}
.campaign-box pre {
    display: contents;
    height: 100%;
    width: 100%;
    margin: 0; /* Remove any default margins */
}
.campaign-year {
    position: absolute;
    font-size:8px;
    bottom: 10px; 
    right: 10px;
    color: white;
    padding: 5px;
    text-shadow: 1px 1px black;
}
.campaign-box-active {
/*	border: 4px solid #00ff14;*/
/*	    box-sizing: border-box;*/
}

/***** New Iconic Character Gallery*****/
.iconiccharacter {
    width: 8vw;
    height: 8vw;
    position: relative;
    display: inline-grid;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.95;
    margin:-1.5vw 0px -1.5vw -1.5vw;
    overflow: hidden;
    transition: opacity 0.3s ease;
    border-radius:10px;
}
.iconiccharacter:hover {
    opacity: 1.03;
}
.iconiccharacter:hover .character-icon img {
    transition: transform 0.3s ease; /* Smooth transition */
}
.character-icon {
	display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.iconiccharacter-link {
    display: block;
    width: 230px;
    height: 125px;
    text-decoration: none; /* Removes any underlines from the link */
}
.character-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease; /* Smooth transition for scaling */
}
.iconiccharacter-name {
    color: white;
    font-weight: bold;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5); /* Adds a semi-transparent black background for readability */
    margin: 40px 0px 10px 10px;
    border-radius: 3px;
    position: relative; /* Ensures text is on top */
    opacity: 0;
    z-index: 1;
}
.iconiccharacter:hover .iconiccharacter-name {
    opacity: 1; /* Show the name on hover */
}
.iconiccharacter-name a {
    color: white;
    font-weight: bold;
    text-align: center;
    position: relative; /* Ensures text is on top */
    z-index: 1;
}
.iconiccharacter pre {
    display: contents;
    height: 100%;
    width: 100%;
    margin: 0; /* Remove any default margins */
}
.iconiccharacter-year {
    position: absolute;
    font-size:8px;
    bottom: 10px; 
    right: 50%;
    color: white;
    padding: 5px;
    text-shadow: 1px 1px black;
    z-index:99;
}

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

.watermarked::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 35%;  /* Adjust as needed */
    height: 35%; /* Adjust as needed */
    background: url('https://wiki.quelmar.com/wiki/images/b/b8/Aiwatermark.png') no-repeat;
    background-size: contain;
    opacity: 0.5; /* Adjust as needed */
    pointer-events: none; /* Ensure it doesn't interfere with interactions */
}

.hueshift{
	filter: hue-rotate(250deg);
}

  .god-display-container {
    padding: 0px;
    width: 70%;
    margin: 4px auto;
    overflow:hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Adds a slight shadow */
    border-radius: 25px; /* Rounded corners */
    border: 3px solid #000; /* Black border */
    position:relative;
    display: flex;
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center children horizontally */
  }

  .god-display-header {
    font-family: 'Graduate', static;
    color: #000;
    font-size: 2em; /* Larger font size */
    margin: 0; /* Removes default margin */
  }
  
  .god-display-header a  {
    font-family: 'Graduate';
  }
    .god-display-header a.new  {
    font-family: 'Graduate';
  }

  .god-subtitle {
    font-family: 'Courier New', monospace;
    color: #000;
    font-size: 1em; /* Subtitle size */
    margin: 5px 0; /* Margin above and below subtitle */
  }
  
    .god-subtitle a  {
    font-family: 'Courier New';
  }
    .god-subtitle a.new  {
    font-family: 'Courier New';
  }
  
  .god-image {
    position: absolute;
    top: -100%;
    left: -5%;
    width: 110%;
    height: 100%;
    /* This will ensure the image covers the entire container */
    opacity: 0.2; /* Set the desired opacity for the image */
    z-index: -1; /* Places the image behind the text content */
  }
  
  .god-image img {
    width: 100%; /* Stretch the image to cover the full container width */
    height:80%;
}

  .five-menu-item {
    width: 20%;
    text-align: center;
    background-color: #333;
    color: #fff;
    font-weight: bold;
    font-size: .8em;
    margin-right: 2px;
    transition: background-color 0.3s; /* Smooth background color transition */
  }
  .five-menu-item:hover {
    background-color: #b0e0e6; /* Muted light blue for hover */
  }
.five-menu-item-img img {
	min-width:calc(12px + 4vw);
	min-height:calc(12px + 4vw);
}

  .five-menu-item a:not(.new)  {
	color:white !important;
  }
  .five-menu-item a.new  {
	color:white !important;
  }