Welcome to Square Enix Wiki! Be sure to check out our To-Do List to see what work we need done!

Difference between revisions of "MediaWiki:Common.css"

From Square Enix Wiki, the Fan-wiki for all things Square Enix
Jump to navigationJump to search
(Image file protection)
 
(51 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* CSS placed here will be applied to all skins */


.center
.center {  
{  
margin-left: auto;   
margin-left: auto;   
margin-right: auto;  
margin-right: auto;  
}
}


.right
.right {
{
float:right;
  float:right;
}
}


/*Copied from http://www.barelyfitz.com/projects/tabber/example.css used under mit license
body, body.skin--responsive {
see http://www.barelyfitz.com/projects/tabber/
background: #FFFFFF url("https://seiwanetwork.org/images/bg.png");
*/
font-family: "Open Sans", sans-serif;
/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */
}


/*--------------------------------------------------
@media (prefers-color-scheme: dark){
  REQUIRED to hide the non-active tab content.
body, body.skin--responsive {
  But do not hide them in the print stylesheet!
background: #1c1c1c url("https://seiwanetwork.org/images/bg-dark.png");
  --------------------------------------------------*/
color: #DEDEDE;
.tabberlive .tabbertabhide {
}
display:none;
a {
color: #47b5e7;
}
}
}


/*--------------------------------------------------
/**********************************************
  .tabber = before the tabber interface is set up
**
  .tabberlive = after the tabber interface is set up
** ARTICLES
  --------------------------------------------------*/
**
.tabber {
**********************************************/
h1#firstHeading {
display: inline-block;
clear: both;
border-bottom: none;
margin: .5em 0;
font-size: 2rem;
line-height: 1.15;
padding-top: 1rem;
margin-bottom: 1.2rem;
font-weight: 700;
font-family: "Open Sans", sans-serif;
}
}
.tabberlive {
 
margin-top:1em;
h1#firstHeading::after {
margin-top: 0.1em;
content: '';
background: #CC0000;
width: 100%;
height: 0.1em;
display: block;
}
}


/*--------------------------------------------------
h1, h2, h3, h4, h5, h6{
  ul.tabbernav = the tab navigation list
color:#181818;
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav
{
margin:0;
padding: 3px 0;
border-bottom: 1px solid #CCC;
font: bold 12px Verdana, sans-serif;
}
}


ul.tabbernav li
@media (prefers-color-scheme: dark){
{
h1, h2, h3, h4, h5, h6{
list-style: none;
color:#DEDEDE;
margin: 0;
}
display: inline;
}
}


ul.tabbernav li a
/**********************************************
{
**
padding: 3px 0.5em;
** TABLE OF CONTENTS
margin-left: 3px;
**
border: 1px solid #ccc;
**********************************************/
border-bottom: none;
@media (prefers-color-scheme: dark){
background: #f2f7ff;
.toc, .toccolours {
text-decoration: none;
background: #373737;
color: #DEDEDE;
border-color: #505050;
}
}
}


ul.tabbernav li a:link { color: #448; }
@media (prefers-color-scheme: dark){
ul.tabbernav li a:visited { color: #667; }
.tocnumber {
color: #DEDEDE;
}
}


ul.tabbernav li a:hover
/**********************************************
{
**
color: #000;
** TABLES
background: #fff9f2;
**
border-color: #CCC;
**********************************************/
@media (prefers-color-scheme: dark){
table, .wikitable {
background: #181818;
color: #DEDEDE;
border-color: #505050;
}
.wikitable > tr > th, .wikitable > * > tr > th {
background-color: #373737;
}
.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {
border-color: #505050;
}
}
}


ul.tabbernav li.tabberactive a
/**********************************************
{
**
background-color: #fff;
** FOOTER
border-bottom: 1px solid #fff;
**
**********************************************/
@media (prefers-color-scheme: dark){
#catlinks {
background: #181818;
border-color: #505050;
}
}
}


ul.tabbernav li.tabberactive a:hover
/**********************************************
{
**
color: #000;
** FILES
background: white;
**
border-bottom: 1px solid white;
**********************************************/
@media (prefers-color-scheme: dark){
#filetoc, .mw_metadata td{
background: #181818;
}
.mw_metadata th{
background: #373737;
}
.mw_metadata td, .mw_metadata th{
border-color: #505050;
}
}
}


/*--------------------------------------------------
/**********************************************
  .tabbertab = the tab content
**
  Add style only after the tabber interface is set up (.tabberlive)
** RECENT CHANGES
  --------------------------------------------------*/
**
.tabberlive .tabbertab {
**********************************************/
padding:5px;
@media (prefers-color-scheme: dark){
border:1px solid #CCC;
table.mw-enhanced-rc{
border-top:0;
background-color: transparent;
 
}
/* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend{
 
background: #373737;
/* height:200px; */
}
.mw-rcfilters-highlighted, .mw-rcfilters-ui-tagItemWidget-highlight:before {
color:#000000;
filter: invert(1) hue-rotate(180deg);
}
}


/* If you set a fix height set overflow to auto and you will get a
/**********************************************
    scrollbar when necessary */
**
 
** INTERFACE
/* overflow:auto; */
**
**********************************************/
@media (prefers-color-scheme: dark){
pre, code, .mw-code {
background-color: #373737;
color: #C0C0C0;
border-color: #c0c0c0;
}
.ace-tm {
background-color: #000000;
color: #DEDEDE;
}
.ace-tm .ace_constant.ace_numeric, .ace-tm .ace_storage, .ace-tm .ace_keyword {
color: #34aaef;
}
.ace-tm .ace_gutter{
background: #212121;
}
.ace-tm .ace_cursor {
color: #DEDEDE;
}
}
}


/* If desired, hide the heading since a heading is provided by the tab */
/**********************************************
.tabberlive .tabbertab h2 {
**
display:none;
** EDITING WINDOW
}
**
.tabberlive .tabbertab h3 {
**********************************************/
display:none;
@media (prefers-color-scheme: dark){
.editOptions{
background: #000000;
color: #DEDEDE;
border-color: #505050;
}
}
}


/* Example of using an ID to set different styles for the tabs on the page */
#mw_metadata .exif-gpslatitude,
.tabberlive#tab1 {
#mw_metadata .exif-gpslongitude,
}
#mw_metadata .exif-artist {
.tabberlive#tab2 {
display: none;
}
.tabberlive#tab2 .tabbertab {
height:200px;
overflow:auto;
}
}

Latest revision as of 05:43, 23 January 2024

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

.center { 
	margin-left: auto;   
	margin-right: auto; 
}

.right {
	float:right;
}

body, body.skin--responsive {
	background: #FFFFFF url("https://seiwanetwork.org/images/bg.png");
	font-family: "Open Sans", sans-serif;
}

@media (prefers-color-scheme: dark){
	body, body.skin--responsive {
		background: #1c1c1c url("https://seiwanetwork.org/images/bg-dark.png");
		color: #DEDEDE;
	}
	
	a {
		color: #47b5e7;
	}
}

/**********************************************
**
**		ARTICLES
**
**********************************************/
h1#firstHeading {
	display: inline-block;
	clear: both;
	border-bottom: none;
	margin: .5em 0;
	font-size: 2rem;
	line-height: 1.15;
	padding-top: 1rem;
	margin-bottom: 1.2rem;
	font-weight: 700;
	font-family: "Open Sans", sans-serif;
}

h1#firstHeading::after {
	margin-top: 0.1em;
	content: '';
	background: #CC0000;
	width: 100%;
	height: 0.1em;
	display: block;
}

h1, h2, h3, h4, h5, h6{
	color:#181818;
}

@media (prefers-color-scheme: dark){
	h1, h2, h3, h4, h5, h6{
		color:#DEDEDE;
	}
}

/**********************************************
**
**		TABLE OF CONTENTS
**
**********************************************/
@media (prefers-color-scheme: dark){
	.toc, .toccolours {
		background: #373737;
		color: #DEDEDE;
		border-color: #505050;
	}
}

@media (prefers-color-scheme: dark){
	.tocnumber {
		color: #DEDEDE;
	}
}

/**********************************************
**
**		TABLES
**
**********************************************/
@media (prefers-color-scheme: dark){
	table, .wikitable {
		background: #181818;
		color: #DEDEDE;
		border-color: #505050;
	}
	
	.wikitable > tr > th, .wikitable > * > tr > th {
		background-color: #373737;
	}
	
	.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {
		border-color: #505050;
	}
}

/**********************************************
**
**		FOOTER
**
**********************************************/
@media (prefers-color-scheme: dark){
	#catlinks {
		background: #181818;
		border-color: #505050;
	}
}

/**********************************************
**
**		FILES
**
**********************************************/
@media (prefers-color-scheme: dark){
	#filetoc, .mw_metadata td{
		background: #181818;
	}
	
	.mw_metadata th{
		background: #373737;
	}
	
	.mw_metadata td, .mw_metadata th{
		border-color: #505050;
	}
}

/**********************************************
**
**		RECENT CHANGES
**
**********************************************/
@media (prefers-color-scheme: dark){
	table.mw-enhanced-rc{
		background-color: transparent;
	}
	
	.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend{
		background: #373737;
	}
	
	.mw-rcfilters-highlighted, .mw-rcfilters-ui-tagItemWidget-highlight:before {
		color:#000000;
		filter: invert(1) hue-rotate(180deg);
	}
}

/**********************************************
**
**		INTERFACE
**
**********************************************/
@media (prefers-color-scheme: dark){
	pre, code, .mw-code {
		background-color: #373737;
		color: #C0C0C0;
		border-color: #c0c0c0;
	}
	
	.ace-tm {
		background-color: #000000;
		color: #DEDEDE;
	}
	
	.ace-tm .ace_constant.ace_numeric, .ace-tm .ace_storage, .ace-tm .ace_keyword {
		color: #34aaef;
	}
	
	.ace-tm .ace_gutter{
		background: #212121;
	}
	
	.ace-tm .ace_cursor {
		color: #DEDEDE;
	}
}

/**********************************************
**
**		EDITING WINDOW
**
**********************************************/
@media (prefers-color-scheme: dark){
	.editOptions{
		background: #000000;
		color: #DEDEDE;
		border-color: #505050;
	}
}

#mw_metadata .exif-gpslatitude,
#mw_metadata .exif-gpslongitude,
#mw_metadata .exif-artist {
	display: none;
}