MediaWiki:Gadget-Card.css: Difference between revisions
MediaWiki interface page
More actions
ReisuDesign (talk | contribs) emptying page for styling in private Tag: Blanking |
No edit summary |
||
| (11 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
.card-container { | |||
display: inline-flex; | |||
flex-direction: column; | |||
align-items: center; | |||
position: relative; | |||
vertical-align: top; | |||
text-align: center; | |||
gap: 2px; | |||
margin: 2px; | |||
} | |||
.card-container.wds-dropdown::before, | |||
.card-container.wds-dropdown::after { | |||
display: none !important; | |||
} | |||
.card-wrapper { | |||
display: block; | |||
position: relative; | |||
} | |||
.card-body { | |||
display: block; | |||
width: min-content; | |||
border-radius: 45px; | |||
overflow: hidden; | |||
background: var(--background-color-3); | |||
text-align: center; | |||
} | |||
.card-body:hover { | |||
outline: 2px solid var(--background-color-5); | |||
} | |||
.card-image-container, | |||
.card-image-container figure { | |||
display: flex; | |||
width: 74px; | |||
height: 74px; | |||
border-bottom-right-radius: 14px; | |||
overflow: hidden; | |||
align-items: center; | |||
justify-content: center; | |||
} | |||
.mini-card .card-body { | |||
border-radius: 30px; | |||
background: none; | |||
background: var(--background-color-3); | |||
} | |||
.mini-card .card-image-container, | |||
.mini-card .card-image-container figure { | |||
width: 56px; | |||
height: 56px; | |||
border-bottom-right-radius: initial; | |||
background-size: cover !important; | |||
} | |||
.mini-card .card-image-container img { | |||
width: 56px; | |||
height: 56px; | |||
} | |||
.mini-card .card-caption { | |||
width: 56px; | |||
} | |||
.mini-card .card-image-container a.new { | |||
height: 48px; | |||
width: 48px; | |||
background-image: var(--unknown-img); | |||
} | |||
.mini-card .card-mobile-text { | |||
display: none; | |||
} | |||
/* Card text */ | |||
.card-text { | |||
display: block; | |||
font-size: 13px; | |||
line-height: 24px; | |||
height: 24px; | |||
background-color: var(--background-color-base); | |||
border-radius: 12px !important; | |||
min-width: 20px !important; | |||
padding: 0 2px; | |||
overflow-wrap: anywhere; | |||
position: absolute; | |||
right: 0; | |||
bottom: 0; | |||
text-align: center; | |||
} | |||
.card-text.multi-line { | |||
height: auto; | |||
} | |||
.card-text-small { | |||
font-size: 10px; | |||
line-height: 14px; | |||
} | |||
.card-text-smaller { | |||
font-size: 8px; | |||
line-height: 14px; | |||
} | |||
.card-font { | |||
color: var(--color-base); | |||
font-family: "PetitPlanet"; | |||
} | |||
/* Icon positions */ | |||
.card-icon { | |||
position: absolute; | |||
top: 1px; | |||
left: 1px; | |||
line-height: 0; | |||
z-index: 1; | |||
} | |||
.card-icon-right { | |||
position: absolute; | |||
top: 1px; | |||
right: 1px; | |||
line-height: 0; | |||
} | |||
.card-icon-bottom-left { | |||
position: absolute; | |||
bottom: 17px; | |||
left: 1px; | |||
line-height: 0; | |||
} | |||
.card-icon-bottom-right { | |||
position: absolute; | |||
bottom: 17px; | |||
right: 1px; | |||
line-height: 0; | |||
} | |||
/* Stars */ | |||
.card-stars { | |||
display: block; | |||
height: 16px; | |||
width: 100%; | |||
position: absolute; | |||
top: 62px; | |||
line-height: 0; | |||
} | |||
/* Caption */ | |||
.card-caption { | |||
width: 74px; | |||
line-height: 1; | |||
font-size: 12px; | |||
hyphens: auto; | |||
overflow-wrap: break-word; | |||
} | |||
.card-caption.auto-width { | |||
width: min-content; | |||
max-width: 100%; | |||
min-width: 100%; | |||
hyphens: none; | |||
overflow-wrap: normal; | |||
} | |||
/* Unknown fallback */ | |||
.card-image-container a.new { | |||
display: block; | |||
height: 74px; | |||
width: 74px; | |||
background-image: var(--unknown-img); | |||
background-size: cover; | |||
font-size: 0; | |||
} | |||
/* Card list */ | |||
.card-list-container { | |||
text-align: left; | |||
} | |||