Caves of Qud Wiki

MediaWiki:Common.css: Difference between revisions

← Older edit
m similar button color fix for Cargo Table page
No edit summary
 
(28 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: 800px auto
         grid-template-columns: 60% 40%;
}
}
}
}
Line 1,918: Line 1,918:
}
}
.qud-image-link span {
.qud-image-link span {
text-decoration: underline;
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,779: Line 3,813:
     font-size:100%;
     font-size:100%;
}
}
/* Spoiler text*/
.spoiler {
background-color: var(--body-color);
transition:all 0.2s;
}
.spoiler::selection {
color: transparent;
}
.spoiler-show, .spoiler:hover, .spoiler:hover::selection {
background-color:transparent;
color:var(--body-color);
transition:all 0.2s;
}
/*New Qud dialogue and choices*/
.qud-look-modern-box {
border-image-slice: 20 12 14 12 fill;
border-image-width: 20px 12px 14px 12px;
border-image-outset: 32px 8px 14px 8px;
border-image-repeat: round round;
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;
margin:60px 12px 24px 12px;
display:block;
font-family:var(--qud-font-terminal1);
position:relative;
}
.qud-look-modern-box::after {
content:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALcAAAA8CAYAAAAkGSuEAAAABHNCSVQICAgIfAhkiAAABAZJREFUeJzt2ktPE1EUB/Az2BbUyqM8lQgJxAdjIiuQSNg1gbiCpStX+jWoX0OjRtS4MUpcaULUDSqJCxcKIWw0SgIhRBLkVSJ1VTIMvfeeO6/bTv+/XZnbOzftv4dzZ+YEQehStp27cfP2+0vXRnI/Ntetf2trH0yvqRrUmF4AQFgSphdQLd7OTN81vYZqg8odkdHs+ORodnzS9DqqCcINsYW2JCJoS6KHyh0RtCXRQ7ghtizTC6hEKdvOOV/n5+dzomNcsjmcx4APldsjWZvhPOYeJzvGnR94EG6ILbQlHqRsO1esqmFdBXHOj7bEG1wK9MnZOriDXuoHIPtRoA0JFtqSAPkJJ4IdPFTuEHErNoQD4RbwekkvDLK1oB8XQ7glnNXW3TaUqsru9+icgzO3ey34LyCHnpuhVABVPTKnh/YyB3pzPlwKFCi2AqowyapsqTHccdzzoi0RQ+UWKIamHP/1I9g8qNwK7s2cqt9V9dDcMarzIdhq2FAqiB5oEm0wS20+VbjtCAKtB+EOQTGsOv06BA/h1iQKrt/Lc9zNKPAh3BqKbUHUN3jQjniDDSWDLMyyB6d0xuiMQ9h5ULmZRG2HcwMpu4spm9NN9sQg2hQ+hDsAqiskOoFEeIODtkTgVP/Vwv7+/uHrsewEERG9mXnFnkP0niDnKhocGKHZx/fwfTrgDqVA+nS96SWwWZaFYJeAtkSgvqGR/mysH74uVkwvVdcPzvmSyRTlI1lNZUHlFmhszJheAls6fcb0EsoSKrfAl+dTVtPAYOHv1uaRv0dVwXXmz2RaaTWUVVQ2VG6JtrazppegVFtbR5mmFtPLKEuo3BLNzW30e/kn5fN7x46F3XNz5+/u7sVmUgCVW+Lj1H2rq6tHOW4sO3HYRvihO09Heyd9n36BYAsg3AoLr19aDQ1NppdxTHOmlTg/vGqGtoSht/cyzc9/pd3dnZLH/W4ydd/X0dFJXed70I4ooHIzzD19aNl9/ZROm72xk0wk6eKFK/Tr3YyFYKuhcjPNPXtkDd+6U1hbW6GV1WXa2dk+NsbrJlP1vpqaGmpvO0ednV306ckDhJop0TJ0vWB6EZVicfEbERGlkrVEBaK9/C4dHByEft66upO0vb1FS0sLhO+Lz0raffiwQua+AhLVrftqh54bYst35R4azhIR0efZGenxItG4uIv6gatyw82BKk86Eu6Thi3q85nC/XKq5fPQFcTngqslEdnY2VQPgkAl/JZ/3V9Y3NsSrxUHn8tRgbQlfidQLSLuXxrwcHMQZF5wtQRiC+GG2EK4IbYQ7gA5N02cDZTueNCDcENsIdwRQIU2A+GG2MIdygDpXqPFPYBwoXJDbOF5bogtVG6ILYQbYus/MdvLHBKqRGEAAAAASUVORK5CYII=");
left:calc(50% - 91px);
top:-63px;
position:absolute;
}
.qud-look-modern-title {
text-align:center;
}
.qud-look-modern-box hr {
margin:0 0 1em 0;
border-image-slice: 16 0 0 0;
border-image-width: 16px 0px 0px 0px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: repeat round;
border-image-source: url("data:image/webp;base64,UklGRjYAAABXRUJQVlA4ICoAAACwAQCdASoMABAAAgA0JQBOgCHfv3dgAP78/y/uN4juOg9LvnDuzzsjAAA=");
border-style: solid;
height:16px;
line-height:1;
background-color:transparent !important;
}
.qud-look-modern-box hr::after {
content:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALAAAAAQCAYAAAC2q/WwAAAABHNCSVQICAgIfAhkiAAAAKdJREFUaIHt2jsKhTAUhOEocTG6AsHWZdsK7kqrC9cnHmMMo//XWeUYhiGEZEVVjg4Q5VMP8FZ1086+h75LNMm75akHAELQwIGsTUsz34sGhjQCHMl/s9Ky8RBgSCPAgaxNSzPfiwBDGgGGNAIMaeZ74N895tH5jbtOOGfLwZlcbfHLRWJ4Yg1F7MuadU84QkCat1b2ldb46hFi77+/sh9PZCXjOSWUTXU/NUQoJn+5AAAAAElFTkSuQmCC");
top:-0px;
position:relative;
width:100%;
left:calc(50% - 88px);
}
.qud-look-modern-text {
margin:0 0 1em 0;
padding: 0px 24px;
overflow-x:hidden;
}
.qud-look-modern-status {
border-top: 1px solid var(--qud-border-bg-color);
margin:1.6em 0px 1em 0px;
}
.qud-look-modern-status>span{
position: absolute;
color: #fff;
border-left: 1px solid var(--qud-border-bg-color);
border-right: 1px solid var(--qud-border-bg-color);
padding:0px 1rem;
line-height:1.2rem;
margin-left:2em;
margin-top:-0.6rem;
background-color:#042928;
}
.qud-look-modern-text p {
margin:0;
}
.qud-choice {
text-align: center;
font-family:var(--qud-font-terminal1);
width:calc(100% - 3em);
margin:0px 1.5em;
border-spacing:0px 0.3em;
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%);}
Retrieved from "https://wiki.cavesofqud.com/wiki/MediaWiki:Common.css"