MediaWiki:Gadget-cosmostweaks.css: Difference between revisions
No edit summary |
No edit summary Tag: Reverted |
||
| 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 */ | ||
.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(--theme-table-content-4),-4px 4px var(--theme-table-content-4),-4px -4px var(--theme-table-content-4),4px -4px var(--theme-table-content-4); | |||
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(--theme-dark-accent),-1px 1px 0 var(--theme-dark-accent),1px -1px 0 var(--theme-dark-accent),-1px -1px 0 var(--theme-dark-accent),0px 1px 0 var(--theme-dark-accent),0px -1px 0 var(--theme-dark-accent),-1px 0px 0 var(--theme-dark-accent),1px 0px 0 var(--theme-dark-accent),1px 1px 0 var(--theme-dark-accent),-1px 1px 0 var(--theme-dark-accent),1px -1px 0 var(--theme-dark-accent),-1px -1px 0 var(--theme-dark-accent),0px 1px 0 var(--theme-dark-accent),0px -1px 0 var(--theme-dark-accent),-1px 0px 0 var(--theme-dark-accent),1px 0px 0 var(--theme-dark-accent),1px 1px 0 var(--theme-dark-accent),-1px 1px 0 var(--theme-dark-accent),1px -1px 0 var(--theme-dark-accent),-1px -1px 0 var(--theme-dark-accent),1px 1px 0 var(--theme-dark-accent),-1px 1px 0 var(--theme-dark-accent),1px -1px 0 var(--theme-dark-accent),-1px -1px 0 var(--theme-dark-accent); | |||
padding: 4px 7px 8px; | |||
font-size: 13px; | |||
border: solid white 1px; | |||
line-height: 1.1; | |||
box-shadow:2px 2px var(--theme-table-outline),-2px 2px var(--theme-table-outline),-2px -2px var(--theme-table-outline),2px -2px var(--theme-table-outline); | |||
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%; | ||