Welcome to IOPWiki, Commander.
With the release of the new game, we encourage contributions to topics related to Girls' Frontline 2. Learn how to contribute, read the maintenance guide, and join our Discord server to discuss major changes.
If you or someone you know can help deciphering the game files, contact our administrator.

MediaWiki:Vector.css: Difference between revisions

Welcome to IOP Wiki. This website is maintained by the Girls' Frontline community and is free to edit by anyone.
Jump to navigation Jump to search
Implemented overall link styling for Vector (legacy) skin
No edit summary
 
(14 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* Also see MediaWiki:Gadget-DesignTokens.css */
:root {
--iopw-ref-resources-background: url("/images/1/1b/background.jpg");
--iopw-ref-resources-background-gradient: url("/images/7/7b/Bannerbg.png");
--iopw-ref-resources-logo-medium: url("/images/c/c9/Logo.png");
--iopw-ref-resources-logo-big: url("/images/a/a6/Header.png");
--iopw-sys-wiki-background: var(--iopw-ref-resources-background);
--iopw-sys-wiki-logo: var(--iopw-ref-resources-logo-medium);
--iopw-sys-wiki-header-background-img: var(--iopw-ref-resources-logo-big), var(--iopw-ref-resources-background-gradient);
--iopw-ref-transparency-90: 90%;
--iopw-ref-palette-gray-10: #0C0C0C;
--iopw-sys-palette-surface: color-mix(in srgb, var(--iopw-ref-palette-gray-10) var(--iopw-ref-transparency-90), transparent);
}
body {
body {
background-image: url("/images/1/1b/background.jpg");
background-image: var(--iopw-sys-wiki-background);
background-repeat: no-repeat;
background-repeat: no-repeat;
background-attachment: fixed;
background-attachment: fixed;
background-position: right top;
background-position: right top;
background-size: cover;
background-size: cover;
font-family: Arial, Sans-Serif;
font-family: var(--iopw-sys-typeface-base), var(--iopw-sys-typeface-base-alt), var(--iopw-sys-typeface-base-fallback);
}
}


/* logo */
/* Logo */
#mw-panel #p-logo .mw-wiki-logo {
#mw-panel #p-logo {
background-image: url("/images/c/c9/Logo.png");
padding: 0.3rem 0.3rem 1rem 0.3rem;
    background-color: transparent;
width: 100%;
height: auto;
& .mw-wiki-logo {
background-image: var(--iopw-sys-wiki-logo);
    background-color: transparent;
    background-size: contain;
    width: 100%;
height: auto;
aspect-ratio: 1;
}
}
}


/* link colors */
/* link colors */
div#mw-panel div.portal div.body ul li a {color: #FFCC00;text-shadow: 0 0 0.2em black, 0 0 0.2em black;}
div#mw-panel div.portal div.body ul li a:visited {color: #EEAA00;text-shadow: 0 0 0.2em black, 0 0 0.2em black;}
div#mw-panel div.portal h3 {color: #FFFFFF;text-shadow: 0 0 0.2em black, 0 0 0.2em black;}
#mw-panel.collapsible-nav .portal.collapsed h3 a {color: rgb(250,250,250);}
#mw-panel.collapsible-nav .portal h3 a {color: rgb(250,250,250);text-decoration: none;}
a,
a,
#mw-navigation a,
.vector-menu-dropdown .vector-menu-content,
#mw-content a,
.vector-menu-dropdown .mw-list-item a,
#footer a,
.vector-menu-dropdown .vector-menu-heading,
#mw-panel.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a,
.vector-menu-tabs-legacy li a,
.mw-body a.external,
.mw-body a.external,
.mw-body a.extiw
.mw-body a.extiw
Line 31: Line 53:
color: var(--iopw-sys-palette-primary);
color: var(--iopw-sys-palette-primary);
&.new {
&.mw-usertoollinks-contribs-no-edits,
&.new,
&.new:visited,
&.new:hover {
color: var(--iopw-sys-palette-font-negative);
color: var(--iopw-sys-palette-font-negative);
}
}
Line 37: Line 62:
&:hover {
&:hover {
color: var(--iopw-sys-palette-primary-lighter);
color: var(--iopw-sys-palette-primary-lighter);
}
&:visited {
color: var(--iopw-sys-palette-primary-darker);
}
}
Line 52: Line 73:
}
}


/* header */
a:visited {
color: var(--iopw-sys-palette-primary-darker);
}
 
.mw-parser-output a.extiw:visited, .mw-parser-output a.external:visited {
color: #977097;
}
 
#editform {
& #mw-editform-cancel a.oo-ui-buttonElement-button,
& #mw-editform-cancel a.oo-ui-buttonElement-button:visited {
color: var(--iopw-sys-palette-font-negative);
}
}
 
/** User Menu */
.oo-ui-icon-bell,
.oo-ui-icon-tray {
background-color: var(--iopw-sys-palette-gray-90);
}
 
/** Navigation */
div#mw-panel div.portal h3 {
color: var(--iopw-sys-palette-gray-99);
text-shadow: 0 0 0.2rem black, 0 0 0.2rem black;
}
#mw-navigation #mw-panel.collapsible-nav h3 a {
color: var(--iopw-sys-palette-gray-99);
text-decoration: none;
}
.vector-menu-dropdown .vector-menu-content {
background-color: var(--iopw-sys-palette-surface);
}
 
/** Tabber */
.tabber__tab[aria-selected="true"], .tabber__tab[aria-selected="true"]:visited {
color: var(--iopw-sys-palette-gray-99);
background-color: var(--iopw-sys-palette-primary);
}
.tabber__tab {
background-color: var(--iopw-sys-palette-gray-50);
opacity: 0.45;
box-shadow: none;
--tabber-color: var(--iopw-sys-palette-primary);
&[aria-selected="true"] {
box-shadow: none;
opacity: 1;
}
}
 
@media (hover: hover) {
.tabber__tab:hover {
text-decoration: underline;
opacity: 1;
}
.tabber__tab[aria-selected="true"]:hover {
text-decoration: none;
}
}


/* Header */
div#mw-page-base {
div#mw-page-base {
     background: none;
     background: none;
     height: 200px;
     height: 12.5rem;
     background-image: url("/images/a/a6/Header.png"), url("/images/7/7b/Bannerbg.png");
     background-image: var(--iopw-sys-wiki-header-background-img);
     background-position: center,top;
     background-position: center,top;
     background-repeat: no-repeat,repeat-x;
     background-repeat: no-repeat,repeat-x;
     background-size: auto 200px;
     background-size: contain;
}
}


.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading {
background: none;
background-color: color-mix(in srgb, var(--iopw-sys-palette-surface) var(--iopw-sys-transparency-25), transparent);
}
.vector-menu-tabs-legacy li {
background: none;
font-weight: var(--iopw-sys-font-weight-bold);
}
.vector-menu-tabs-legacy .selected {
background: var(--iopw-sys-palette-surface);
}
#mw-navigation #mw-head .vector-menu-tabs-legacy li.selected a {
color: var(--iopw-sys-palette-on-surface);
}


div#mw-panel {
background: var(--iopw-sys-palette-surface);
}




div#mw-panel { background: rgba(12,12,12,0.90);}
/* Navigation Tab */
 
 
 
/* Navigation Tab*/
div.vectorTabs li.selected a, div.vectorTabs li.selected a:visited {color: #FFFFFF;text-shadow: 0 0 0.2em black, 0 0 0.2em black;}
div.vectorTabs li.new a, div.vectorTabs li.new a:visited {color: #FF0000;text-shadow: 0 0 0.2em black, 0 0 0.2em black;}
div.vectorTabs li a {color: #FFCC00;text-shadow: 0 0 0.2em black, 0 0 0.2em black;}
div.vectorTabs li a {color: #EEAA00;text-shadow: 0 0 0.2em black, 0 0 0.2em black;}
 
div.vectorTabs ul li,
#p-variants,  
#p-variants,  
#p-cactions {  
#p-cactions {  
     background-image: none;  
     background-image: none;  
     background-color: rgba(0,0,0,0.3); }  
     background-color: rgba(0,0,0,0.3); }  
div.vectorMenu li a, div.vectorMenu h3 span {color: #EEAA00;text-shadow: 0 0 0.2em black, 0 0 0.2em black;}


#p-cactions:hover {  
#p-cactions:hover {  
     background-image: none;  
     background-image: none;  
     background-color: rgba(0,0,0,0.5); }  
     background-color: rgba(0,0,0,0.5); }  
div.vectorTabs li:hover {
    background-image: none;
    background-color: rgba(0,0,0,0.5); }
div.vectorTabs li.selected {
    background-image: none;
    background-color: rgba(12,12,12,0.90);
}
div.vectorMenu div.menu {
    background-color: rgba(255,255,255,0.3);
    border:none;
left:0px;
}
div.vectorMenu div.menu a:hover {
    background-color: rgba(255,255,255,0.6);
}
#p-variants-label,
div.vectorTabs,
div.vectorTabs span,
div.vectorTabs ul,
div#mw-head div.vectorMenu h3 {
    background-image: none;
    padding-left:0px;
}




#left-navigation,
#left-navigation,
#right-navigation {
#right-navigation {
     margin-top: 159px;
     margin-top: 10rem;
}
}




div#footer ul li {color: white;text-shadow: 0 0 0.2em black, 0 0 0.2em black;}
div#footer ul li {
color: white;
text-shadow: 0 0 0.2em black, 0 0 0.2em black;
}




Line 133: Line 190:


#p-personal {
#p-personal {
background-color: rgba(12,12,12,0.90);
background-color: var(--iopw-sys-palette-surface);
     padding-top: 5px;
     padding-top: 5px;
     padding-bottom: 5px;
     padding-bottom: 5px;
Line 189: Line 246:
/* Content body*/
/* Content body*/
.mw-body {
.mw-body {
     background-color: rgba(12,12,12,0.90);
     background-color: var(--iopw-sys-palette-surface);
     border:none;
     border:none;
     color: rgba(250,250,250,1);
     color: var(--iopw-sys-palette-on-surface);
     text-shadow: 0 0 0.2em black, 0 0 0.2em black;
     text-shadow: 0 0 0.2em black, 0 0 0.2em black;
}
}
Line 197: Line 254:
/* Header color*/
/* Header color*/
h1, h2, h3, h4, h5, h6 {
h1, h2, h3, h4, h5, h6 {
     color: white;
     color: var(--iopw-sys-palette-on-surface);
}
}


Line 204: Line 261:
#toc, .toc, .mw-warning, .toccolours {
#toc, .toc, .mw-warning, .toccolours {
     border: 1px solid #aaa;
     border: 1px solid #aaa;
     background-color: rgba(0,0,0,0.6);
     background-color: var(--iopw-sys-palette-surface);
}
}


Line 217: Line 274:


/* system */
/* system */
#footer-info li {
color:white;
}


@media screen {
  figure[typeof~='mw:File/Thumb'],
  figure[typeof~='mw:File/Frame'] {
    background-color:#000;
  }
  figure[typeof~='mw:File/Thumb'] > figcaption,
  figure[typeof~='mw:File/Frame'] > figcaption {
    background-color:#000;
  }
}


table.wikitable, pre, code, tt, kbd, samp, .mw-code, table.mw_metadata, .mw-datatable, .mw-datatable td, .mw-datatable th  {
table.wikitable, pre, code, tt, kbd, samp, .mw-code, table.mw_metadata, .mw-datatable, .mw-datatable td, .mw-datatable th  {
Line 223: Line 293:
     text-shadow: none;
     text-shadow: none;
}  
}  
 
table.plainlinks{
  color:white;
}
table.wikitable a {color: #0645ad;}
table.wikitable a {color: #0645ad;}
table.wikitable a:visited {color: #0b0080;}
table.wikitable a:visited {color: #0b0080;}

Latest revision as of 14:53, 17 August 2024

/* Also see MediaWiki:Gadget-DesignTokens.css */

:root {
	--iopw-ref-resources-background: url("/images/1/1b/background.jpg");
	--iopw-ref-resources-background-gradient: url("/images/7/7b/Bannerbg.png");
	--iopw-ref-resources-logo-medium: url("/images/c/c9/Logo.png");
	--iopw-ref-resources-logo-big: url("/images/a/a6/Header.png");
	
	--iopw-sys-wiki-background: var(--iopw-ref-resources-background);
	--iopw-sys-wiki-logo: var(--iopw-ref-resources-logo-medium);
	--iopw-sys-wiki-header-background-img: var(--iopw-ref-resources-logo-big), var(--iopw-ref-resources-background-gradient);
	
	--iopw-ref-transparency-90: 90%;
	--iopw-ref-palette-gray-10: #0C0C0C;
	--iopw-sys-palette-surface: color-mix(in srgb, var(--iopw-ref-palette-gray-10) var(--iopw-ref-transparency-90), transparent);
}

body {
	background-image: var(--iopw-sys-wiki-background);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: right top;
	background-size: cover;
	font-family: var(--iopw-sys-typeface-base), var(--iopw-sys-typeface-base-alt), var(--iopw-sys-typeface-base-fallback);
}

/* Logo */
#mw-panel #p-logo {
	padding: 0.3rem 0.3rem 1rem 0.3rem;
	width: 100%;
	height: auto;
	
	& .mw-wiki-logo {
		background-image: var(--iopw-sys-wiki-logo);
	    background-color: transparent;
	    background-size: contain;
	    width: 100%;
		height: auto;
		aspect-ratio: 1;
	}
}

/* link colors */
a,
.vector-menu-dropdown .vector-menu-content,
.vector-menu-dropdown .mw-list-item a,
.vector-menu-dropdown .vector-menu-heading,
#mw-panel.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a,
.vector-menu-tabs-legacy li a,
.mw-body a.external,
.mw-body a.extiw
{
	color: var(--iopw-sys-palette-primary);
	
	&.mw-usertoollinks-contribs-no-edits,
	&.new,
	&.new:visited,
	&.new:hover {
		color: var(--iopw-sys-palette-font-negative);
	}
	
	&:hover {
		color: var(--iopw-sys-palette-primary-lighter);
	}
	
	&.extiw,
	&.external {
		background-position: center right;
		background-repeat: no-repeat;
		background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22%3E %3Cpath fill=%22%23fff%22 stroke=%22%2336c%22 d=%22M1.5 4.518h5.982V10.5H1.5z%22/%3E %3Cpath fill=%22%2336c%22 d=%22M5.765 1H11v5.39L9.427 7.937l-1.31-1.31L5.393 9.35l-2.69-2.688 2.81-2.808L4.2 2.544z%22/%3E %3Cpath fill=%22%23fff%22 d=%22M9.995 2.004l.022 4.885L8.2 5.07 5.32 7.95 4.09 6.723l2.882-2.88-1.85-1.852z%22/%3E %3C/svg%3E");
		padding-right: 0.8125rem;
	}
}

a:visited {
	color: var(--iopw-sys-palette-primary-darker);
}

.mw-parser-output a.extiw:visited, .mw-parser-output a.external:visited {
	color: #977097;
}

#editform {
	& #mw-editform-cancel a.oo-ui-buttonElement-button,
	& #mw-editform-cancel a.oo-ui-buttonElement-button:visited {
		color: var(--iopw-sys-palette-font-negative);
	}
}

/** User Menu */
.oo-ui-icon-bell,
.oo-ui-icon-tray {
	background-color: var(--iopw-sys-palette-gray-90);
}

/** Navigation */
div#mw-panel div.portal h3 {
	color: var(--iopw-sys-palette-gray-99);
	text-shadow: 0 0 0.2rem black, 0 0 0.2rem black;
}
#mw-navigation #mw-panel.collapsible-nav h3 a {
	color: var(--iopw-sys-palette-gray-99);
	text-decoration: none;
}
.vector-menu-dropdown .vector-menu-content {
	background-color: var(--iopw-sys-palette-surface);
}

/** Tabber */
.tabber__tab[aria-selected="true"], .tabber__tab[aria-selected="true"]:visited {
	color: var(--iopw-sys-palette-gray-99);
	background-color: var(--iopw-sys-palette-primary);
}
.tabber__tab {
	background-color: var(--iopw-sys-palette-gray-50);
	opacity: 0.45;
	box-shadow: none;
	--tabber-color: var(--iopw-sys-palette-primary);
	
	&[aria-selected="true"] {
		box-shadow: none;
		opacity: 1;
	}
}

@media (hover: hover) {
	.tabber__tab:hover {
		text-decoration: underline;
		opacity: 1;
	}
	.tabber__tab[aria-selected="true"]:hover {
		text-decoration: none;
	}
}

/* Header */
div#mw-page-base {
    background: none;
    height: 12.5rem;
    background-image: var(--iopw-sys-wiki-header-background-img);
    background-position: center,top;
    background-repeat: no-repeat,repeat-x;
    background-size: contain;
}

.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading {
	background: none;
	background-color: color-mix(in srgb, var(--iopw-sys-palette-surface) var(--iopw-sys-transparency-25), transparent);
}
.vector-menu-tabs-legacy li {
 	background: none;
 	font-weight: var(--iopw-sys-font-weight-bold);
}
.vector-menu-tabs-legacy .selected {
 	background: var(--iopw-sys-palette-surface);
}
#mw-navigation #mw-head .vector-menu-tabs-legacy li.selected a {
color: var(--iopw-sys-palette-on-surface);
}

div#mw-panel {
	background: var(--iopw-sys-palette-surface);
}


/* Navigation Tab */
#p-variants, 
#p-cactions { 
    background-image: none; 
    background-color: rgba(0,0,0,0.3); } 

#p-cactions:hover { 
    background-image: none; 
    background-color: rgba(0,0,0,0.5); } 


#left-navigation,
#right-navigation {
    margin-top: 10rem;
}


div#footer ul li {
	color: white;
	text-shadow: 0 0 0.2em black, 0 0 0.2em black;
}


/*personal*/

#p-personal {
	background-color: var(--iopw-sys-palette-surface);
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 10px;
}
#p-personal ul {padding-left: 0em;}

/* control panel/preferences */
.mw-echo-state .mw-echo-content .mw-echo-title, .mw-echo-state .mw-echo-content .mw-echo-notification-footer, .mw-echo-date-section {color:rgb(250,250,250);}
#contentSub, #contentSub2 {color:rgb(250,250,250);}



/*              Content               */

/* system         */
/*Editing box*/
.mw-highlight{
text-shadow:none;
}
/*Editing options*/
.editOptions {
    background-color: rgba(0,0,0,0.4);
    border: none;
    border-top: none;
}
#pagehistory li.selected {
    background-color: rgba(0,0,0,0.4);
    border:none;
}
ul#filetoc {
    background-color: rgba(0,0,0,0.4);
    border:none;
}




.errorbox, .warningbox, .successbox, .comment-toolbar {text-shadow: none;}
.comment-user, .comment-user a{color:rgb(240,240,240);}

.catlinks {
    border: none;
    background-color: rgba(0,0,0,0.4);
}


.mw-search-profile-tabs{text-shadow:none;}
.diff-context{text-shadow:none;}

.wikiEditor-ui .wikiEditor-ui-view {text-shadow:none;color:black;}



/* Content body*/
.mw-body {
    background-color: var(--iopw-sys-palette-surface);
    border:none;
    color: var(--iopw-sys-palette-on-surface);
    text-shadow: 0 0 0.2em black, 0 0 0.2em black;
}

/* Header color*/
h1, h2, h3, h4, h5, h6 {
    color: var(--iopw-sys-palette-on-surface);
}


/* Table of Contents */
#toc, .toc, .mw-warning, .toccolours {
    border: 1px solid #aaa;
    background-color: var(--iopw-sys-palette-surface);
}










/* system */
#footer-info li {
	color:white;
}

@media screen {
  figure[typeof~='mw:File/Thumb'],
  figure[typeof~='mw:File/Frame'] {
    background-color:#000;
  }
  figure[typeof~='mw:File/Thumb'] > figcaption,
  figure[typeof~='mw:File/Frame'] > figcaption {
    background-color:#000;
  }
}

table.wikitable, pre, code, tt, kbd, samp, .mw-code, table.mw_metadata, .mw-datatable, .mw-datatable td, .mw-datatable th  {
    color: black;
    text-shadow: none;
} 
table.plainlinks{
  color:white;
}
table.wikitable a {color: #0645ad;}
table.wikitable a:visited {color: #0b0080;}


/*edit history boxes*/
#pagehistory li {border: none;}


/*               tabs                 */

ul.tabbernav {border-bottom:none;margin-top: 0.4em;}

/* tab body*/
.tabber .tabbertab {
    padding: 5px;
    border: none;
    /*border-top: 0;*/
    background-color: rgba(100,100,100,0.7);
}

/* active tab */
ul.tabbernav li.tabberactive a, ul.tabbernav li.tabberactive a:link {
    background-color: rgba(100,100,100,0.7);
    border: none;
    color: white;
    font-weight: bold;
}

ul.tabbernav li.tabberactive a:hover {
    background-color: rgba(100,100,100,0.7);
    border: none;
    color: white;
    font-weight: bold;
}


/* inactive tab */
ul.tabbernav li a:link {
    color: white;
    font-weight: normal;
    font-size: 110%;
    background-color:rgba(100,100,100,0.3);
    border:none;
    padding-top: 0.5em;
}
ul.tabbernav li a:hover {background-color: rgba(127,127,127,0.4);}