MediaWiki:Darkvector.css: Difference between revisions

Revision as of 17:02, 7 November 2021

/* CSS placed here will affect users of the DarkVector skin */

.mwe-popups .mwe-popups-container {
  background-color: #2A2A2A;
}

.mwe-popups {
  background: #2a2a2a;
  box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0);
}

.mwe-popups .mwe-popups-extract[dir='ltr']:after {
 right:0;
 background-image:-webkit-linear-gradient(to right,rgba(255,255,255,0),#2a2a2a 50%);
 background-image:linear-gradient(to right,rgba(255,255,255,0),#2a2a2a 50%)
}

.mwe-popups .mwe-popups-settings-icon {
  display: none;
}

ul.tabbernav li.tabberactive a:hover {
  background: #333;
  border-bottom: 1px solid #333;
  border-top: 1px solid #666;
  border-left: 1px solid #666;
  border-right: 1px solid #666;
  }
  
ul.tabbernav li a {
  background: #2a2a2a;
  border-bottom: 1px solid #666;
  border-top: 1px solid #666;
  border-left: 1px solid #666;
  border-right: 1px solid #666;
  }
  
ul.tabbernav li.tabberactive a {
  background-color: #333;
  border-bottom: 1px solid #333;
  border-top: 1px solid #666;
  border-left: 1px solid #666;
  border-right: 1px solid #666;
  }
  
ul.tabbernav li a:hover {
  background: #333;
  border-bottom: 1px solid #666;
  border-top: 1px solid #666;
  border-left: 1px solid #666;
  border-right: 1px solid #666;
  }
  
ul.tabbernav {
  border-bottom: 1px solid #666;
  }
  
.tabber .tabbertab {
  border: 1px solid #666;
  border-top: 0;
  }

.thumbimage {
  background-color: #333;
}

   /* set max width and fix the background */
#skin-vector-maxwidth-wrapper {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 1900px;
}

    html,
    body {
        background-position: top left;
        background-repeat: repeat-x;
    	background-size: 100% 5em;
        background-color: #2a2a2a; 
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(50%,#33333),color-stop(100%,#2a2a2a));
        background-image: -webkit-linear-gradient(top,#333333 50%,#2a2a2a 100%);
        background-image: -moz-linear-gradient(top,#333333 50%,#2a2a2a 100%);
        background-image: linear-gradient(#333333 50%,#2a2a2a 100%);
    }
    
    /* set blue right border */
    .mw-body { border-right: 1px solid #250B2D; }
    
    /** fix the position of:
    			personal user menu
    			search bar
    			the pop-up indicator of language selector
    			search suggestions 
    **/
    #p-personal { right: 3pt; }
    #p-search { margin-right: 3pt; }
    .imeselector { position: fixed; }
    .suggestions { right: 3pt !important; }

.mw-advancedSearch-namespace-selection {
  background:#2a2a2a;
  }
  
.mw-advancedSearch-fieldContainer {
  background:#2a2a2a;
  }

.mw-advancedSearch-fieldContainer .oo-ui-labelElement > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
  background:#2a2a2a;
  color:#c1c1c1;
  }

#toc,
.toc {
    font-size: 0.9em;
    margin-top: 0.75em;
    padding: 0;
    border: none;
    box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
    clear: left;
}

#toc .toctitle,
.toc .toctitle {
    border: 1px solid #666;
    padding: 0.25em 1em;
    background:#2a2a2a;
}

#toc .toctoggle,
.toc .toctoggle {
    padding-left: 0.2em;
}

#toc .tocnumber,
.toc .tocnumber {
    display: none;
}

#toc > ul,
.toc > ul {
    border: 1px solid #666;
    border-top: none;
    line-height: 1.8em;
    padding: 0.75em 1.75em;
    margin: 0;
}

#toc ul ul,
.toc ul ul {
    border-left: 1px dotted #c7b67b;
    padding-left: 0.5em;
}

.toclimit-2 #toc .toclevel-2,
.toclimit-3 #toc .toclevel-3,
.toclimit-4 #toc .toclevel-4,
.toclimit-5 #toc .toclevel-5,
.toclimit-6 #toc .toclevel-6,
.toclimit-7 #toc .toclevel-7 {
    display: none;
}

.gallerytext p {
  color:#c1c1c1;
}

.zoom_img img{
-moz-transition:-moz-transform 0.1s ease-in; 
-webkit-transition:-webkit-transform 0.1s ease-in; 
-o-transition:-o-transform 0.1s ease-in;
transition:transform 0.1 ease-in;
}

.zoom_img img:hover{
-moz-transform:scale(2); 
-webkit-transform:scale(2);
-o-transform:scale(2);
transform:scale(2);
}

ul.mw-gallery-packed-hover li.gallerybox:hover div.gallerytextwrapper, ul.mw-gallery-packed-overlay li.gallerybox div.gallerytextwrapper, ul.mw-gallery-packed-hover li.gallerybox.mw-gallery-focused div.gallerytextwrapper {
  background: rgba(42,42,42,0.8);
}

.toc, .toccolours {
  border: 1px solid #666;
  background-color: #2a2a2a;
}

	.cm-mw-pagename { text-decoration: underline; }
	
	.cm-mw-matching { background-color: #ffd700; }
	
	.cm-mw-skipformatting { background-color: #adf; }
	.cm-mw-list { color: #08f; font-weight: bold; }
	.cm-mw-doubleUnderscore, .cm-mw-signature, .cm-mw-hr { color: #08f; font-weight: bold; background-color: #eee; }
	.cm-mw-indenting { color: #08f; font-weight: bold; }
	.cm-mw-mnemonic { color: #290; }
	.cm-mw-comment { color: #84a0a0; font-weight: normal; }
	.cm-mw-apostrophes-bold, .cm-mw-apostrophes-italic { color: #08f; }
	
	pre.CodeMirror-line.cm-mw-section-1,
	pre.CodeMirror-line-like.cm-mw-section-1 {
		font-size: 1.8em;
		line-height: 1.2em;
	}
	pre.CodeMirror-line.cm-mw-section-2,
	pre.CodeMirror-line-like.cm-mw-section-2 {
		font-size: 1.5em;
		line-height: 1.2em;
	}
	pre.CodeMirror-line.cm-mw-section-3,
	pre.CodeMirror-line-like.cm-mw-section-3 {
		font-weight: bold;
	}
	pre.CodeMirror-line.cm-mw-section-4,
	pre.CodeMirror-line-like.cm-mw-section-4 {
		font-weight: bold;
	}
	pre.CodeMirror-line.cm-mw-section-5,
	pre.CodeMirror-line-like.cm-mw-section-5 {
		font-weight: bold;
	}
	pre.CodeMirror-line.cm-mw-section-6,
	pre.CodeMirror-line-like.cm-mw-section-6 {
		font-weight: bold;
	}
	.cm-mw-section-header { color: #08f; font-weight: normal; }
	
	.cm-mw-template { color: #b19cd9; font-weight: normal; }
	.cm-mw-template-name { color: #b19cd9; font-weight: bold; }
	.cm-mw-template-name-mnemonic { font-weight: normal; }
	.cm-mw-template-argument-name { color: #b19cd9; font-weight: bold; }
	.cm-mw-template-delimiter { color: #b19cd9; font-weight: bold; }
	.cm-mw-template-bracket { color: #b19cd9; font-weight: bold; }
	
	.cm-mw-templatevariable { color: #f50; font-weight: normal; }
	.cm-mw-templatevariable-name { color: #f50; font-weight: bold; }
	.cm-mw-templatevariable-bracket { color: #f50; font-weight: normal; }
	.cm-mw-templatevariable-delimiter { color: #f50; font-weight: bold; }
	
	.cm-mw-parserfunction { font-weight: normal; }
	.cm-mw-parserfunction-name { color: #a11; font-weight: bold; }
	.cm-mw-parserfunction-bracket { color: #a11; font-weight: bold; }
	.cm-mw-parserfunction-delimiter { color: #a11; font-weight: bold; }
	
	pre.CodeMirror-line.cm-mw-exttag,
	pre.CodeMirror-line-like.cm-mw-exttag {
		background-color: rgba( 119, 0, 170, 0.02 );
	}
	.cm-mw-exttag { background-color: rgba( 119, 0, 170, 0.04 ); }
	.cm-mw-exttag-name { color: #290; font-weight: bold; }
	.cm-mw-exttag-bracket { color: #290; font-weight: normal; }
	.cm-mw-exttag-attribute { color: #290; font-weight: normal; }
	
	.cm-mw-htmltag-name { color: #290; font-weight: bold; }
	.cm-mw-htmltag-bracket { color: #290; font-weight: normal; }
	.cm-mw-htmltag-attribute { color: #290; font-weight: normal; }
	
	pre.CodeMirror-line.cm-mw-tag-pre,
	pre.CodeMirror-line-like.cm-mw-tag-pre,
	.cm-mw-tag-pre {
		background-color: rgba( 0, 0, 0, 0.04 );
	}
	pre.CodeMirror-line.cm-mw-tag-nowiki,
	pre.CodeMirror-line-like.cm-mw-tag-nowiki,
	.cm-mw-tag-nowiki {
		background-color: rgba( 0, 0, 0, 0.04 );
	}
	
	.cm-mw-link { color: #e69710; font-weight: normal; }
	.cm-mw-link-pagename { color: #e69710; font-weight: normal; }
	.cm-mw-link-tosection { color: #E5CC3B; font-weight: normal; }
	.cm-mw-link-bracket { color: #e69710; font-weight: normal; }
	/* .cm-mw-link-text { } */
	.cm-mw-link-delimiter { color: #e69710; font-weight: normal; }
	
	.cm-mw-extlink, .cm-mw-free-extlink { color: #E25600; font-weight: normal; }
	.cm-mw-extlink-protocol, .cm-mw-free-extlink-protocol { color: #E25600; font-weight: bold; }
	/* .cm-mw-extlink-text { } */
	.cm-mw-extlink-bracket { color: #E25600; font-weight: bold; }
	
	.cm-mw-table-bracket { color: #e0e; font-weight: bold; }
	.cm-mw-table-delimiter { color: #e0e; font-weight: bold; }
	.cm-mw-table-definition { color: #e0e; font-weight: normal; }
	.cm-mw-table-caption { font-weight: bold; }
	
	/* .cm-mw-template-ground {} */
	.cm-mw-template2-ground { background-color: rgba( 170, 17, 17, 0.04 ); }
	.cm-mw-template3-ground { background-color: rgba( 170, 17, 17, 0.08 ); }
	.cm-mw-template-ext-ground { background-color: rgba( 119, 0, 170, 0.04 ); }
	.cm-mw-template-ext2-ground { background-color: rgba( 119, 0, 170, 0.08 ); }
	.cm-mw-template-ext3-ground { background-color: rgba( 119, 0, 170, 0.12 ); }
	.cm-mw-template-link-ground { background-color: rgba( 34, 17, 153, 0.04 ); }
	.cm-mw-template-ext-link-ground { background-color: rgba( 77, 9, 162, 0.08 ); }
	.cm-mw-template-ext2-link-ground { background-color: rgba( 91, 6, 164, 0.12 ); }
	.cm-mw-template-ext3-link-ground { background-color: rgba( 98, 4, 166, 0.16 ); }
	.cm-mw-template2-ext-ground { background-color: rgba( 145, 9, 94, 0.08 ); }
	.cm-mw-template2-ext2-ground { background-color: rgba( 136, 6, 119, 0.12 ); }
	.cm-mw-template2-ext3-ground { background-color: rgba( 132, 4, 132, 0.16 ); }
	.cm-mw-template2-link-ground { background-color: rgba( 102, 17, 85, 0.08 ); }
	.cm-mw-template2-ext-link-ground { background-color: rgba( 108, 11, 113, 0.12 ); }
	.cm-mw-template2-ext2-link-ground { background-color: rgba( 111, 9, 128, 0.16 ); }
	.cm-mw-template2-ext3-link-ground { background-color: rgba( 112, 7, 136, 0.2 ); }
	.cm-mw-template3-ext-ground { background-color: rgba( 153, 11, 68, 0.12 ); }
	.cm-mw-template3-ext2-ground { background-color: rgba( 145, 9, 94, 0.16 ); }
	.cm-mw-template3-ext3-ground { background-color: rgba( 139, 7, 109, 0.2 ); }
	.cm-mw-template3-link-ground { background-color: rgba( 125, 17, 62, 0.12 ); }
	.cm-mw-template3-ext-link-ground { background-color: rgba( 123, 13, 89, 0.16 ); }
	.cm-mw-template3-ext2-link-ground { background-color: rgba( 122, 10, 105, 0.2 ); }
	.cm-mw-template3-ext3-link-ground { background-color: rgba( 122, 9, 116, 0.24 ); }
	.cm-mw-ext-ground { background-color: rgba( 119, 0, 170, 0.04 ); }
	.cm-mw-ext2-ground { background-color: rgba( 119, 0, 170, 0.08 ); }
	.cm-mw-ext3-ground { background-color: rgba( 119, 0, 170, 0.12 ); }
	.cm-mw-ext-link-ground { background-color: rgba( 34, 17, 153, 0.04 ); }
	.cm-mw-ext2-link-ground { background-color: rgba( 77, 9, 162, 0.08 ); }
	.cm-mw-ext3-link-ground { background-color: rgba( 91, 6, 164, 0.12 ); }
	.cm-mw-link-ground { background-color: rgba( 34, 17, 153, 0.04 ); }
	
	.cm-mw-matchingbracket {
		background-color: #eee;
		box-shadow: inset 0 0 1px 1px #999;
		font-weight: bold;
	}

.CodeMirror-gutter {
  background:#2a2a2a;
}

.CodeMirror-linenumber {
  background:#2a2a2a;
  color:#c1c1c1;
}

.CodeMirror-selected {
  background: #0078D7; !important;
}

.CodeMirror-focused .CodeMirror-selected {
  background: #0078D7; !important;
}


.mainpage-header {
    display: flex;
    margin: 0em 17em 2em;
}

.mainpage-header .header-intro {
    flex: 2;
}

.mainpage-header .header-intro h1 {
    font-size: 2.5em;
    font-weight: bold;
    border: none;
    margin: 0 0 0.15em;
}

.mainpage-header .header-intro p {
    font-size: 1.1em;
    line-height: 1.7em;
}

.mainpage-header .header-stats {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -1em;
}

.mainpage-header .header-stats ul {
    list-style: none;
}

.mainpage-body {
    display: flex;
    flex-flow: row wrap;
}

.mainpage-body h2 a {
    color: var(--mainpage-body-h2-links);
}

.mainpage-body .tile {
    padding-left: 1.75em;
    padding-right: 1.75em;
    max-width: 100%;
}

.mainpage-body .tile-row {
    margin-bottom: 0.9rem;
    margin-left: 15em;
    margin-right: 15em;
}

.mainpage-contents .tile-halves {
    flex: 1;
    margin-right: 0.9rem;
}

.mainpage-contents .tile-halves:last-child {
    margin-right: 0;
}

.mainpage-contents .tile-top {
    height: 4.5rem;
    position: relative;
}

.mainpage-contents .tile-top h2 a {
    display: block;
    text-align: center;
    text-decoration: none;
    line-height: 4.5rem;
    padding-left: 0.45rem;
}

.mainpage-contents h2 {
    margin: 0;
    padding: 0;
}

.tile {
    background: var(--tile-background-color);
    border: 1px solid var(--tile-border-color);
    box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
    padding: 1.5em 2em 1em;
    max-width: 40em;
}

.tile h2 {
    font-size: 1.4em;
    font-weight: bold;
    border: none;
    margin: 0 0 0.4em;
}

.tile .byline + h2 {
    margin-top: -0.5em;
}

.tile-row {
    display: flex;
    flex-flow: row wrap;
    margin-bottom: 1em;
}

.tile-halves {
    display: flex;
    flex-flow: row wrap;
    border: 1px solid var(--tile-border-color);
    background: var(--tile-background-color);
    box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
}

.tile-halves h2 {
    font-size: 1.4em;
    font-weight: bold;
    border: none;
    margin: 0 0 0.4em;
}

.tile-halves .byline + h2 {
    margin-top: -0.5em;
}

.tile-top {
    width: 100%;
    padding: 1.3rem 1.5rem 0.6rem;
}

.tile-top.tile-image {
    display: flex;
    align-items: center;
    padding: 0;
    height: 13vw;
    max-height: 12em;
    transition: 0.4s ease-out;
}

.tile-top.tile-image:hover img {
    transform: scale(1.1);
    transition: 0.5s ease-out;
}

.tile-top.tile-image a {
    width: 100%;
}

.tile-top.tile-image img {
    width: 100%;
    object-fit: cover;
    max-height: 200px;
    transition: 0.4s ease-out;
}

.tile-bottom {
    background: var(--tile-background-color);
    border-top: 1px solid var(--tile-border-color);
    width: 100%;
    padding: 1rem 1.5rem 0.6rem;
}

.tile-bottom.link-button {
    align-self: flex-end;
    padding: 0;
    background: #B41E2B;
    border-left: 1px solid #aaa;
    border-right: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
}

.tile-bottom.link-button a {
    display: block;
    text-align: center;
    padding: 0.75em 1.5em 0.8em;
    text-decoration: none;
}

.tile-bottom.read-more {
    background: var(--tile-link-button-color);
    transition: 0.3s ease-out;
}

.tile-bottom.read-more a {
    color: var(--byline-color);
    font-weight: bold;
    text-align: right;
}

.tile-bottom.read-more:hover {
    background: var(--tile-link-button-highlight-color);
}

.tile-bottom.read-more:hover .arrow {
    transform: translateX(50%);
}

.tile-bottom.read-more .arrow {
    filter: invert(36%) sepia(9%) saturate(463%) hue-rotate(175deg) brightness(94%) contrast(80%);
    margin-left: 0.4em;
    transition: 0.3s ease-out;
}

.popular-pages ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0.6em;
    margin: 1em 0 0.7em 0;
}

.mp-popular-page-light {
    display: flex;
    align-items: center;
    list-style: none;
    background-color: #B41E2B;
}

.mp-popular-page-light a {
    flex: 1;
    display: block;
    color: white;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    padding: 0.7em 1em;
}

.mp-popular-page-light:hover {
    filter: brightness(115%);
    transition: 0.2s;
}

.mainpage-left {
    flex: 2;
    display: flex;
    flex-flow: column wrap;
    margin-right: 0.9rem;
    margin-left: 15em;
}

.mainpage-left > * {
    margin: 0 0 0.9rem;
}

.mainpage-right {
    flex: 1;
    display: flex;
    flex-flow: column wrap;
    margin-right: 15em;
}

.mainpage-right > * {
    margin: 0 0 0.9rem;
}

.mainpage-discord {
    border: none;
    box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.3);
}

.mainpage-discord .tile-top {
    display: flex;
    align-items: center;
    background: #5865f2;
    padding: 1em 1.75em;
}

.mainpage-discord .tile-top a {
    flex: 1;
    position: relative;
    text-decoration: none;
}

.mainpage-discord .tile-top a:hover .arrow {
    transform: translateX(50%);
}

.mainpage-discord .tile-bottom {
    background: #525ee0;
    border: none;
    padding: 1em 1.75em;
}

.mainpage-discord .tile-bottom p {
    color: #ffffff;
    font-weight: bold;
    font-size: 0.9em;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0;
}

.mainpage-discord .partner-icon {
    margin-right: 0.75em;
}

.mainpage-discord .server-name {
    color: #ffffff;
    font-weight: bold;
    font-size: 1.25em;
    margin: 0.5em 0 -0.15em;
}

.mainpage-discord .server-tagline {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.5em;
}

.mainpage-discord .arrow {
    position: absolute;
    top: calc(50% - .5em);
    right: 0;
    height: 1em;
    width: 0.7em;
    background-size: 0.7em 1em;
    transition: 0.3s ease-out;
}

.tile-popular {
    width: 100%;
    padding: 1.3rem 1.5rem 0.6rem;
    background-color: #4c4c4c;
    border: 1px solid #aaa;
}