MediaWiki:Common.css: Difference between revisions
m i hate it here |
No edit summary |
||
(19 intermediate revisions by the same user not shown) | |||
Line 571: | Line 571: | ||
grid-template-areas:"a b" "c b" "c d" "e e"; | grid-template-areas:"a b" "c b" "c d" "e e"; | ||
grid-template-rows: auto 1f; | grid-template-rows: auto 1f; | ||
grid-template-columns: | grid-template-columns: 60% 40%; | ||
} | } | ||
} | } | ||
Line 1,918: | Line 1,918: | ||
} | } | ||
.qud-image-link span { | .qud-image-link span { | ||
text-decoration: | text-decoration: none; | ||
text-decoration-style: solid; | text-decoration-style: solid; | ||
} | |||
.qud-image-link .qud-text::before { | |||
bottom:-2px; | |||
position:absolute; | |||
width:100%; | |||
height:2px; | |||
content:""; | |||
z-index:1; | |||
background-image:inherit; | |||
} | |||
.qud-image-link a { | |||
text-decoration:underline; | |||
text-decoration-thickness:2px; | |||
color:var(--qud-color-y-dark) | |||
} | |||
.qud-image-link .qud-text { | |||
position:relative; | |||
-webkit-text-fill-color: transparent; | |||
} | } | ||
.qud-image { | .qud-image { | ||
Line 2,559: | Line 2,577: | ||
--qud-bg-color-dark: rgba(6, 28, 23, 0.8); | --qud-bg-color-dark: rgba(6, 28, 23, 0.8); | ||
--qud-bg-color-darker: rgba(6, 28, 23, 0.9); | --qud-bg-color-darker: rgba(6, 28, 23, 0.9); | ||
--qud-border-bg-color-ultralight: rgba(77,110,122,0.2); | |||
--qud-border-bg-color-semilight: rgba(77,110,122,0.3); | |||
--qud-border-bg-color-semidark: rgba(77,110,122,0.7); | |||
--qud-border-bg-color-dark: rgba(77,110,122,0.8); | |||
--qud-border-bg-color-darker: rgba(77,110,122,0.9); | |||
--qud-border-bg-color: rgba(77,110,122,1); | |||
--qud-viridian-bg-color-ultralight: rgba(8,51,50,0.2); | |||
--qud-viridian-bg-color-semilight: rgba(8,51,50,0.3); | |||
--qud-viridian-bg-color-semidark: rgba(8,51,50,0.7); | |||
--qud-viridian-bg-color-dark: rgba(8,51,50,0.8); | |||
--qud-viridian-bg-color-darker: rgba(8,51,50,0.9); | |||
--qud-viridian-bg-color: rgba(8,51,50,1); | |||
--body-background-color: #11191C; | |||
} | } | ||
/* | /* | ||
Line 3,803: | Line 3,837: | ||
border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIcAAAAwCAYAAAA7KGnHAAAABHNCSVQICAgIfAhkiAAAAgpJREFUeJztnEFOwzAQRSdBwBHYsOgFkJAq0U3FWbrrPdkVqXfoOWARVqmmI487qQAl4/c3uH5xSjUje37tptvu9sPpeJDVeiMiIrptX8PaYr2IyGq9kdPxILYNa5v1JaizCdYu6+eWrbD5sPOyooHIZWaVbjiuUaU3gOVg3fPL66ATYrxI/7Xy+mG5WHFZGaHNJj1YT0OwnKzb7vaDBrZtB5X6a2Ngy2XFZaU02Oub2weC/R4LuxV9jX0Ny8l6u87YhNDLiZc4sJysH7NFTyc6ITTzEgeWk4Wt7OHzQ1AOPd09XkwGWjrmYSuL8sjG1ZtNJm28oTyKTArhjTeUT9cmhS56nqO7f/jf/xz9mYbvL4nEPGxlUS5FSonz1+dWNptwK3m0eXsvOlLb1+uMYcZoQ6XvsMY2VrZxYWVRVVhZ5CpiRMK7siiPwjUHVrY9hWsOz87om7Cs5FOo5vAuLN0E5dK1uFOQNqpI3ClIG1Uk7hSkjSp0Eoy9lfYUPgnG3kp7mmxl9SD2VvILK4uqwsqiorCyyFXoJNj4u5XaiaDSqSF9nW3D5s9KMbV9YSvr9c/lw8LiTMQvFW6ysrV6BLYs5sXWxj380wRYe+zmR03aLIMti0XiPvnhLbV+2DKY5V7cJz+8xWYjbHlMBCsLq7BSTG0fVrZBJoKVhTksuhxhZWEuw8o2yiJx/wExyTVDJC06EwAAAABJRU5ErkJggg=="); | border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIcAAAAwCAYAAAA7KGnHAAAABHNCSVQICAgIfAhkiAAAAgpJREFUeJztnEFOwzAQRSdBwBHYsOgFkJAq0U3FWbrrPdkVqXfoOWARVqmmI487qQAl4/c3uH5xSjUje37tptvu9sPpeJDVeiMiIrptX8PaYr2IyGq9kdPxILYNa5v1JaizCdYu6+eWrbD5sPOyooHIZWaVbjiuUaU3gOVg3fPL66ATYrxI/7Xy+mG5WHFZGaHNJj1YT0OwnKzb7vaDBrZtB5X6a2Ngy2XFZaU02Oub2weC/R4LuxV9jX0Ny8l6u87YhNDLiZc4sJysH7NFTyc6ITTzEgeWk4Wt7OHzQ1AOPd09XkwGWjrmYSuL8sjG1ZtNJm28oTyKTArhjTeUT9cmhS56nqO7f/jf/xz9mYbvL4nEPGxlUS5FSonz1+dWNptwK3m0eXsvOlLb1+uMYcZoQ6XvsMY2VrZxYWVRVVhZ5CpiRMK7siiPwjUHVrY9hWsOz87om7Cs5FOo5vAuLN0E5dK1uFOQNqpI3ClIG1Uk7hSkjSp0Eoy9lfYUPgnG3kp7mmxl9SD2VvILK4uqwsqiorCyyFXoJNj4u5XaiaDSqSF9nW3D5s9KMbV9YSvr9c/lw8LiTMQvFW6ysrV6BLYs5sXWxj380wRYe+zmR03aLIMti0XiPvnhLbV+2DKY5V7cJz+8xWYjbHlMBCsLq7BSTG0fVrZBJoKVhTksuhxhZWEuw8o2yiJx/wExyTVDJC06EwAAAABJRU5ErkJggg=="); | ||
border-style: solid; | border-style: solid; | ||
margin: | margin:60px 12px 24px 12px; | ||
display:block; | display:block; | ||
font-family:var(--qud-font-terminal1); | font-family:var(--qud-font-terminal1); | ||
position:relative; | position:relative; | ||
} | } | ||
Line 3,824: | Line 3,855: | ||
} | } | ||
.qud-look-modern-box hr { | .qud-look-modern-box hr { | ||
margin:0 0 1em 0; | |||
border-image-slice: 16 0 0 0; | border-image-slice: 16 0 0 0; | ||
border-image-width: 16px 0px 0px 0px; | border-image-width: 16px 0px 0px 0px; | ||
Line 3,832: | Line 3,863: | ||
border-style: solid; | border-style: solid; | ||
height:16px; | height:16px; | ||
line-height:1; | |||
background-color:transparent !important; | background-color:transparent !important; | ||
} | } | ||
.qud-look-modern-box hr::after { | .qud-look-modern-box hr::after { | ||
content:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALAAAAAQCAYAAAC2q/WwAAAABHNCSVQICAgIfAhkiAAAAKdJREFUaIHt2jsKhTAUhOEocTG6AsHWZdsK7kqrC9cnHmMMo//XWeUYhiGEZEVVjg4Q5VMP8FZ1086+h75LNMm75akHAELQwIGsTUsz34sGhjQCHMl/s9Ky8RBgSCPAgaxNSzPfiwBDGgGGNAIMaeZ74N895tH5jbtOOGfLwZlcbfHLRWJ4Yg1F7MuadU84QkCat1b2ldb46hFi77+/sh9PZCXjOSWUTXU/NUQoJn+5AAAAAElFTkSuQmCC"); | content:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALAAAAAQCAYAAAC2q/WwAAAABHNCSVQICAgIfAhkiAAAAKdJREFUaIHt2jsKhTAUhOEocTG6AsHWZdsK7kqrC9cnHmMMo//XWeUYhiGEZEVVjg4Q5VMP8FZ1086+h75LNMm75akHAELQwIGsTUsz34sGhjQCHMl/s9Ky8RBgSCPAgaxNSzPfiwBDGgGGNAIMaeZ74N895tH5jbtOOGfLwZlcbfHLRWJ4Yg1F7MuadU84QkCat1b2ldb46hFi77+/sh9PZCXjOSWUTXU/NUQoJn+5AAAAAElFTkSuQmCC"); | ||
top:- | top:-0px; | ||
position:relative; | position:relative; | ||
width:100%; | width:100%; | ||
Line 3,843: | Line 3,875: | ||
.qud-look-modern-text { | .qud-look-modern-text { | ||
margin:0 0 1em 0; | |||
padding: 0px 24px; | padding: 0px 24px; | ||
overflow-x:hidden; | overflow-x:hidden; | ||
Line 3,848: | Line 3,881: | ||
.qud-look-modern-status { | .qud-look-modern-status { | ||
border-top: 1px solid var(--qud-border-bg-color); | border-top: 1px solid var(--qud-border-bg-color); | ||
margin: | margin:1.6em 0px 1em 0px; | ||
} | } | ||
.qud-look-modern-status span{ | .qud-look-modern-status>span{ | ||
position: absolute; | position: absolute; | ||
color: #fff; | color: #fff; | ||
Line 3,861: | Line 3,894: | ||
background-color:#042928; | background-color:#042928; | ||
} | } | ||
.qud-look-modern-text p { | |||
margin:0; | |||
} | |||
.qud-choice { | .qud-choice { | ||
text-align: center; | text-align: center; | ||
Line 3,870: | Line 3,905: | ||
border-collapse: separate; | border-collapse: separate; | ||
} | } | ||
/* Code Mirror */ | |||
#mw-panel.collapsible-nav .portal.collapsed h3 { | |||
color: var(--qud-color-b-dark);; | |||
} | |||
#mw-panel.collapsible-nav .portal.collapsed h3 a { | |||
color: var(--qud-color-b-dark); | |||
} | |||
.CodeMirror { | |||
color: var(--qud-color-y-dark); | |||
} | |||
.cm-s-default .cm-header { | |||
color: var(--qud-color-b-dark) | |||
} | |||
.cm-mw-link-pagename, .cm-mw-link-bracket, .cm-mw-extlink, .cm-mw-free-extlink,.cm-mw-extlink-protocol, .cm-mw-free-extlink-protocol, .cm-mw-extlink-bracket { | |||
color: var(--qud-color-c) | |||
} | |||
.cm-s-default .cm-quote { | |||
color: var(--qud-color-g); | |||
} | |||
.cm-mw-template-bracket, .cm-mw-template-name, .cm-mw-template-delimiter, .cm-mw-template-argument-name { | |||
color: var(--qud-color-m-dark); | |||
} | |||
.cm-mw-template { | |||
color: var(--qud-color-y-dark); | |||
} | |||
.cm-mw-table-bracket, .cm-mw-table-definition,.cm-mw-table-delimiter { | |||
color: var(--qud-color-b); | |||
} | |||
.cm-negative, .cm-mw-parserfunction-name, .cm-mw-parserfunction-bracket, .cm-mw-parserfunction-delimiter { | |||
color: var(--qud-color-r); | |||
} | |||
.cm-positive { | |||
color: var(--qud-color-g); | |||
} | |||
.cm-s-default .cm-keyword { | |||
color: var(--qud-color-m-dark) | |||
} | |||
.cm-s-default .cm-atom { | |||
color: var(--qud-color-b-dark); | |||
} | |||
.cm-s-default .cm-number { | |||
color: var(--qud-color-g-dark); | |||
} | |||
.cm-s-default .cm-def { | |||
color: var(--qud-color-b-dark); | |||
} | |||
.cm-s-default .cm-variable, | |||
.cm-s-default .cm-punctuation, | |||
.cm-s-default .cm-property, | |||
.cm-s-default .cm-operator {} | |||
.cm-s-default .cm-variable-2 { | |||
color: var(--qud-color-b); | |||
} | |||
.cm-mw-section-header { | |||
color: var(--qud-color-w) | |||
} | |||
.cm-s-default .cm-string { | |||
color: var(--qud-color-r-dark); | |||
} | |||
.cm-s-default .cm-builtin { | |||
color: var(--qud-color-b-dark); | |||
} | |||
.cm-s-default .cm-attribute { | |||
color: var(--qud-color-b-dark); | |||
} | |||
.cm-s-default .cm-link { | |||
color: var(--qud-color-b-dark); | |||
} | |||
.CodeMirror-matchingtag { | |||
background: rgba(255, 150, 0, .3) | |||
} | |||
.CodeMirror-activeline-background { | |||
background: #e8f2ff | |||
} | |||
.CodeMirror { | |||
background: rgba(0, 0, 0, .4) | |||
} | |||
.CodeMirror-selected { | |||
background: rgba(176, 215, 212, .91) | |||
} | |||
.CodeMirror-focused .CodeMirror-selected { | |||
background: rgba(176, 215, 212, .91) | |||
} | |||
.CodeMirror-line::selection, | |||
.CodeMirror-line > span::selection, | |||
.CodeMirror-line > span > span::selection { | |||
background: rgba(176, 215, 212, .91); | |||
color: var(--qud-color-k-dark) | |||
} | |||
.CodeMirror-line::-moz-selection, | |||
.CodeMirror-line > span::-moz-selection, | |||
.CodeMirror-line > span > span::-moz-selection { | |||
background: rgba(176, 215, 212, .91); | |||
} | |||
.cm-searching { | |||
background-color: #ffa; | |||
background-color: rgba(255, 255, 0, .4) | |||
} | |||
/*Slideshow/Carousel for main page*/ | |||
.carousel{ | |||
max-height: 360px; | |||
height:360px; | |||
position:relative; | |||
pointer-events: none; | |||
} | |||
.carousel>div{ | |||
animation: carousel 28s infinite; | |||
opacity:0 | |||
} | |||
.carousel img { | |||
top:50%; | |||
left:50%; | |||
transform:translate(-50%, -50%); | |||
max-width:100%; | |||
height:auto; | |||
position:absolute; | |||
} | |||
@keyframes carousel{ | |||
10%{opacity:1;} | |||
20%{opacity:0;} | |||
} | |||
.carousel>div:nth-child(7){animation-delay:0s;} | |||
.carousel>div:nth-child(6){animation-delay:4s;} | |||
.carousel>div:nth-child(5){animation-delay:8s;} | |||
.carousel>div:nth-child(4){animation-delay:12s;} | |||
.carousel>div:nth-child(3){animation-delay:16s;} | |||
.carousel>div:nth-child(2){animation-delay:20s;} | |||
.carousel>div:nth-child(1){animation-delay:24s;} | |||
/*QUD SHADERS*/ | |||
.qud-text { | |||
display:inline-block; | |||
background-image:linear-gradient(to right,var(--qud-color-y-dark), var(--qud-color-y-dark)); | |||
background-size:1ch; | |||
background-clip:text; | |||
color:transparent; | |||
} | |||
.qud-text.r, .qud-text.red, .qud-text.scarlet, .qud-text.fiery, .qud-text.lava {background-image: linear-gradient(to right, var(--qud-color-r) 0%, var(--qud-color-r) 100%);} | |||
.qud-text.r-dark, .qud-text.dark-red, .qud-text.crimson, .qud-text.cider, .qud-text.rusty {background-image: linear-gradient(to right, var(--qud-color-r-dark) 0%, var(--qud-color-r-dark) 100%);} | |||
.qud-text.o, .qud-text.orange {background-image: linear-gradient(to right, var(--qud-color-o) 0%, var(--qud-color-o) 100%);} | |||
.qud-text.o-dark, .qud-text.dark-orange {background-image: linear-gradient(to right, var(--qud-color-o-dark) 0%, var(--qud-color-o-dark) 100%);} | |||
.qud-text.w, .qud-text.gold, .qud-text.yellow, .qud-text.important, .qud-text.keybind, .qud-text.electrical, .qud-text.hotkey, .qud-text.internals {background-image: linear-gradient(to right, var(--qud-color-w) 0%, var(--qud-color-w) 100%);} | |||
.qud-text.w-dark, .qud-text.brown, .qud-text.dark-keybind, .qud-text.emote {background-image: linear-gradient(to right, var(--qud-color-w-dark) 0%, var(--qud-color-w-dark) 100%);} | |||
.qud-text.g, .qud-text.green {background-image: linear-gradient(to right, var(--qud-color-g) 0%, var(--qud-color-g) 100%);} | |||
.qud-text.g-dark, .qud-text.dark-green, .qud-text.slimy {background-image: linear-gradient(to right, var(--qud-color-g-dark) 0%, var(--qud-color-g-dark) 100%);} | |||
.qud-text.c, .qud-text.cyan, .qud-text.freezing, .qud-text.rules {background-image: linear-gradient(to right, var(--qud-color-c) 0%, var(--qud-color-c) 100%);} | |||
.qud-text.c-dark, .qud-text.dark-cyan, .qud-text.teal {background-image: linear-gradient(to right, var(--qud-color-c-dark) 0%, var(--qud-color-c-dark) 100%);} | |||
.qud-text.b, .qud-text.blue, .qud-text.azure {background-image: linear-gradient(to right, var(--qud-color-b) 0%, var(--qud-color-b) 100%);} | |||
.qud-text.b-dark, .qud-text.dark-blue {background-image: linear-gradient(to right, var(--qud-color-b-dark) 0%, var(--qud-color-b-dark) 100%);} | |||
.qud-text.m, .qud-text.magenta {background-image: linear-gradient(to right, var(--qud-color-m) 0%, var(--qud-color-m) 100%);} | |||
.qud-text.m-dark, .qud-text.dark-magenta, .qud-text.purple {background-image: linear-gradient(to right, var(--qud-color-m-dark) 0%, var(--qud-color-m-dark) 100%);} | |||
.qud-text.y, .qud-text.white, .qud-text.playernotes, .qud-text.silvery {background-image: linear-gradient(to right, var(--qud-color-y) 0%, var(--qud-color-y) 100%);} | |||
.qud-text.y-dark, .qud-text.gray {background-image: linear-gradient(to right, var(--qud-color-y-dark) 0%, var(--qud-color-y-dark) 100%);} | |||
.qud-text.k, .qud-text.black, .qud-text.dark-gray, .qud-text.putrid {background-image: linear-gradient(to right, var(--qud-color-k) 0%, var(--qud-color-k) 100%);} | |||
.qud-text.k-dark {background-image: linear-gradient(to right, var(--qud-color-k-dark) 0%, var(--qud-color-k-dark) 100%);} |