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
More styling
More styling (navigation and panels)
Line 58: Line 58:
padding-right: 0.8125rem;
padding-right: 0.8125rem;
}
}
}
/** User Menu */
.oo-ui-icon-bell,
.oo-ui-icon-tray {
background-color: var(--iopw-sys-palette-gray-90);
}
}


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


:root {
:root {
--iopw-sys-transparency-90: 0.9;
--iopw-sys-transparency-90: 90%;
--iopw-sys-palette-gray-10: #0C0C0C;
--iopw-sys-palette-panel: color-mix(in srgb, var(--iopw-sys-palette-gray-10) var(--iopw-sys-transparency-90), transparent);
--iopw-sys-palette-panel: color-mix(in srgb, var(--iopw-sys-palette-gray-10) var(--iopw-sys-transparency-90), transparent);
}
}

Revision as of 02:24, 21 July 2024

body {
	background-image: url("/images/1/1b/background.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: right top;
	background-size: cover;
	font-family: Arial, Sans-Serif;
}

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

/* link colors */
a,
#mw-navigation a,
#mw-navigation #mw-head a,
#mw-navigation #mw-panel a,
#mw-navigation #mw-footer a,
#mw-content a,
#footer a,
.mw-body a.external,
.mw-body a.extiw
{
	color: var(--iopw-sys-palette-primary);
	
	&.new,
	&.new:visited,
	&.new:hover {
		color: var(--iopw-sys-palette-font-negative);
	}
	
	&:hover {
		color: var(--iopw-sys-palette-primary-lighter);
	}
	
	&:visited {
		color: var(--iopw-sys-palette-primary-darker);
	}
	
	&.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;
	}
}

/** 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.2em black, 0 0 0.2em black;
}
#mw-navigation #mw-panel.collapsible-nav h3 a {
	color: var(--iopw-sys-palette-gray-99);
	text-decoration: none;
}

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

.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-panel) 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-panel);
}
#mw-navigation #mw-head .vector-menu-tabs-legacy li.selected a {
color: var(--iopw-sys-palette-on-surface);
}

:root {
	--iopw-sys-transparency-90: 90%;
	--iopw-sys-palette-gray-10: #0C0C0C;
	--iopw-sys-palette-panel: color-mix(in srgb, var(--iopw-sys-palette-gray-10) var(--iopw-sys-transparency-90), transparent);
}

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


/* 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: 159px;
}


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


/*personal*/

#p-personal {
	background-color: rgba(12,12,12,0.90);
    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: rgba(12,12,12,0.90);
    border:none;
    color: rgba(250,250,250,1);
    text-shadow: 0 0 0.2em black, 0 0 0.2em black;
}

/* Header color*/
h1, h2, h3, h4, h5, h6 {
    color: white;
}


/* Table of Contents */
#toc, .toc, .mw-warning, .toccolours {
    border: 1px solid #aaa;
    background-color: rgba(0,0,0,0.6);
}










/* system */


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.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);}