MediaWiki:Gadget-cosmostweaks.css: Difference between revisions
ugly but well fix later |
Tag: Rollback |
||
| (21 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap'); | @import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap'); | ||
/*CS added thisvvv */ | /*CS added thisvvv */ | ||
.portable-infobox { | |||
border:2px solid var(--button-color); | |||
margin-right:3px; | |||
border-radius:5px; | |||
} | |||
.portable-infobox .pi-navigation { | |||
text-shadow:1px 1px 0 var(--content-background-color),-1px 1px 0 var(--content-background-color),1px -1px 0 var(--content-background-color),-1px -1px 0 var(--content-background-color),0px 1px 0 var(--content-background-color),0px -1px 0 var(--content-background-color),-1px 0px 0 var(--content-background-color),1px 0px 0 var(--content-background-color),1px 1px 0 var(--content-background-color),-1px 1px 0 var(--content-background-color),1px -1px 0 var(--content-background-color),-1px -1px 0 var(--content-background-color),0px 1px 0 var(--content-background-color),0px -1px 0 var(--content-background-color),-1px 0px 0 var(--content-background-color),1px 0px 0 var(--content-background-color),1px 1px 0 var(--content-background-color),-1px 1px 0 var(--content-background-color),1px -1px 0 var(--content-background-color),-1px -1px 0 var(--content-background-color),1px 1px 0 var(--content-background-color),-1px 1px 0 var(--content-background-color),1px -1px 0 var(--content-background-color),-1px -1px 0 var(--content-background-color); | |||
} | |||
.portable-infobox .pi-item-spacing { | |||
border-radius:2px; | |||
} | |||
.pi-section-navigation .pi-section-tab.pi-section-active, .pi-section-navigation .pi-section-tab.current, .pi-media-collection .pi-tab-link.current { | |||
color: var(--banner-text-color); | |||
border-radius:2px; | |||
border-bottom: 1px solid var(--button-text-color); | |||
} | |||
.pi-image { | |||
border-bottom: 2px solid var(--button-color); | |||
} | |||
.charboxes { | |||
width: 138px; | |||
height: 138px; | |||
border: solid black; | |||
border-width: 2px 3px 4px; | |||
border-radius: 20px; | |||
overflow: hidden; | |||
padding: 0; | |||
display: flex; | |||
flex-direction:column; | |||
align-items:center; | |||
justify-content: center; | |||
box-shadow:4px 4px var(--button-color),-4px 4px var(--button-color),-4px -4px var(--button-color),4px -4px var(--button-color); | |||
margin:0 5px; | |||
} | |||
.charboxeslink { | |||
position: absolute; | |||
bottom: -45px; | |||
background: rgb(164, 137, 115); | |||
background: rgba(164, 137, 115, 0.8); | |||
display: flex; | |||
align-items: flex-end; | |||
justify-content: center; | |||
font-family: Cookie Run Bold, rubik, helvetica, arial, sans-serif; | |||
width: 140px; | |||
height: fit-content; | |||
color: white; | |||
text-shadow: 1px 1px 0 var(--footer-color),-1px 1px 0 var(--footer-color),1px -1px 0 var(--footer-color),-1px -1px 0 var(--footer-color),0px 1px 0 var(--footer-color),0px -1px 0 var(--footer-color),-1px 0px 0 var(--footer-color),1px 0px 0 var(--footer-color),1px 1px 0 var(--footer-color),-1px 1px 0 var(--footer-color),1px -1px 0 var(--footer-color),-1px -1px 0 var(--footer-color),0px 1px 0 var(--footer-color),0px -1px 0 var(--footer-color),-1px 0px 0 var(--footer-color),1px 0px 0 var(--footer-color),1px 1px 0 var(--footer-color),-1px 1px 0 var(--footer-color),1px -1px 0 var(--footer-color),-1px -1px 0 var(--footer-color),1px 1px 0 var(--footer-color),-1px 1px 0 var(--footer-color),1px -1px 0 var(--footer-color),-1px -1px 0 var(--footer-color); | |||
padding: 4px 7px 8px; | |||
font-size: 13px; | |||
border: solid white 1px; | |||
line-height: 1.1; | |||
box-shadow:2px 2px var(--button-text-color),-2px 2px var(--button-text-color),-2px -2px var(--button-text-color),2px -2px var(--button-text-color); | |||
margin: auto; | |||
overflow-wrap: break-word; | |||
hyphens: auto; | |||
-o-hyphens: auto; | |||
-ms-hyphens: auto; | |||
-webkit-hyphens: auto; | |||
text-align: center; | |||
transition: bottom .2s cubic-bezier(.45,.05,.55,.95); | |||
-webkit-transition: bottom .2s cubic-bezier(.45,.05,.55,.95); | |||
-moz-transition: bottom .2s cubic-bezier(.45,.05,.55,.95); | |||
-ms-transition: bottom .2s cubic-bezier(.45,.05,.55,.95); | |||
-o-transition: bottom .2s cubic-bezier(.45,.05,.55,.95); | |||
border-bottom:0; | |||
} | |||
.charboxes:hover .charboxeslink { | |||
bottom:2px; | |||
} | |||
.fluidimg100 img, .fluidimg img { | .fluidimg100 img, .fluidimg img { | ||
max-width:100%; | max-width:100%; | ||
height:auto; | height:auto; | ||
} | |||
.CosmosRail .module h3 { | |||
border-bottom: 3px solid var(--pi-border-color); | |||
} | |||
.read-more-container-heading { | |||
color: var(--text-color); | |||
border-bottom: 0; | |||
padding-bottom: 0.5em; | |||
font-size: 0.8em; | |||
font-weight: normal; | |||
letter-spacing: 1px; | |||
text-transform: uppercase; | |||
} | |||
.cdx-card { | |||
/* background-color: var(--background-color-base, #fff); */ | |||
display: flex; | |||
align-items: flex-start; | |||
position: relative; | |||
border-radius: 2px; | |||
padding: 12px; | |||
background: var(--transparent-white); | |||
} | |||
.cdx-card__text__title { | |||
color: var(--text-color); | |||
} | |||
#catlinks { | |||
padding: 10px; | |||
padding-top: 1em; | |||
border: 1px solid color-mix(in srgb, var(--link-color) 30%, transparent); | |||
margin-top: 1em; | |||
margin-bottom: 1em; | |||
clear: both; | |||
color: #000; | |||
line-height: 1.8em; | |||
} | |||
.client-js .read-more-container { | |||
padding: 0 0 0; | |||
box-sizing: border-box; | |||
} | |||
.portable-infobox .pi-horizontal-group-item:nth-child(even) { | |||
background-color: color-mix(in srgb, var(--banner-text-color) 20%, transparent); | |||
} | } | ||
/* Navtab things */ | /* Navtab things */ | ||
.navtab a, .navtab .new { | .navtab a, .navtab .new { | ||
font-weight: bold; | font-weight: bold; | ||
color: var(-- | color: var(--banner-color); | ||
border: 1px solid var(-- | border: 1px solid var(--footer-color); | ||
border-radius: 12px 12px 0 0; | border-radius: 12px 12px 0 0; | ||
text-align: center; | text-align: center; | ||
| Line 28: | Line 142: | ||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
background-color: var(-- | background-color: var(--banner-color); | ||
-webkit-transition: background-color .1s linear,border-right-color .1s linear,border-top-color .1s linear,border-left-color .1s linear,border-bottom-color .1s linear,text-shadow .1s linear; | -webkit-transition: background-color .1s linear,border-right-color .1s linear,border-top-color .1s linear,border-left-color .1s linear,border-bottom-color .1s linear,text-shadow .1s linear; | ||
-moz-transition: background-color .1s linear,border-right-color .1s linear,border-top-color .1s linear,border-left-color .1s linear,border-bottom-color .1s linear,text-shadow .1s linear; | -moz-transition: background-color .1s linear,border-right-color .1s linear,border-top-color .1s linear,border-left-color .1s linear,border-bottom-color .1s linear,text-shadow .1s linear; | ||
| Line 44: | Line 158: | ||
.navtab a:hover { | .navtab a:hover { | ||
color: var(--banner-color); | color: color-mix(in srgb, var(--banner-color-hover), #fff 25%); | ||
text-decoration: none !important; | text-decoration: none !important; | ||
-webkit-text-decoration: none !important; | -webkit-text-decoration: none !important; | ||
background-color: var(--banner-color); | background-color: color-mix(in srgb, var(--banner-color-hover), var(--banner-text-color) 25%); | ||
-webkit-transition: background-color .1s linear,border-color .1s linear,color .15s linear,text-shadow .1s linear; | -webkit-transition: background-color .1s linear,border-color .1s linear,color .15s linear,text-shadow .1s linear; | ||
-moz-transition: background-color .1s linear,border-color .1s linear,color .15s linear,text-shadow .1s linear; | -moz-transition: background-color .1s linear,border-color .1s linear,color .15s linear,text-shadow .1s linear; | ||
| Line 53: | Line 167: | ||
-o-transition: background-color .1s linear,border-color .1s linear,color .15s linear,text-shadow .1s linear; | -o-transition: background-color .1s linear,border-color .1s linear,color .15s linear,text-shadow .1s linear; | ||
transition: background-color .1s linear,border-color .1s linear,color .15s linear,text-shadow .1s linear; | transition: background-color .1s linear,border-color .1s linear,color .15s linear,text-shadow .1s linear; | ||
border-color: var(--banner-color); | border-color: color-mix(in srgb, var(--banner-color-hover), var(--banner-text-color) 45%); | ||
} | } | ||
| Line 64: | Line 178: | ||
padding: 8px; | padding: 8px; | ||
line-height: 1.3; | line-height: 1.3; | ||
font-size: 18px; | font-size: 18px; | ||
color: white; | color: white; | ||
| Line 78: | Line 191: | ||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
border: 1px solid var(--footer-color); | border: 1px solid var(--footer-color); | ||
border-bottom-width: 0; | border-bottom-width: 0; | ||
background-color: #624d43; | background-color: #624d43; | ||
background-image: url(https:// | background-image: url(https://nbittrpgwiki.pynappo.xyz/images/4/47/Placeholder.png); | ||
background-position: left; | background-position: left; | ||
background-size: 2400px 502px; | background-size: 2400px 502px; | ||
box-shadow: 3px 0px var(-- | box-shadow: 3px 0px var(--button-color),-3px 0px var(--button-color),-3px -3px var(--button-color),3px -3px var(--button-color); | ||
margin: 0 3px; | margin: 0 3px; | ||
} | } | ||
| Line 102: | Line 214: | ||
--navbox-text-color: var(--text-color); | --navbox-text-color: var(--text-color); | ||
--navbox-title-color: color-mix(in lch, var(--banner-color), var(--content-background-color) 10%); | --navbox-title-color: color-mix(in lch, var(--banner-color), var(--content-background-color) 10%); | ||
--navbox-header-color: color-mix(in | --navbox-header-color: color-mix(in hwb, var(--banner-color), 65% transparent); | ||
--navbox-alt-color: color-mix(in lch, var(--banner-color), var(--content-background-color) 90%); | --navbox-alt-color: color-mix(in lch, var(--banner-color), var(--content-background-color) 90%); | ||
--navbox-border-color: var(--banner-color); | --navbox-border-color: var(--banner-color); | ||
| Line 472: | Line 584: | ||
/* -------------------------- general ------------------------- */ | /* -------------------------- general ------------------------- */ | ||
/* ----------[CS added this part]------*/ | /* ----------[CS added this part]------*/ | ||
p { | .mw-body p { | ||
line-height: 1.6; | line-height: 1.6; | ||
margin: 0.5em 0 1em 0; | |||
} | } | ||
.imagedropshadow { | .imagedropshadow { | ||