MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| (14 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 3,887: | 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%);} | |||