User:Barometz/common.css
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* For testing */
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');
.float-right {
float: right;
margin: 0 0 .5em 1em;i
}
.infobox {
--infobox-border-radius: 10px;
--infobox-border-size: 3px;
width: 23em;
background: white;
border-radius: calc(var(--infobox-border-size) + var(--infobox-border-radius));
}
.inner-infobox {
margin: 5px;
padding: 15px;
border: var(--infobox-border-size) solid #000;
border-bottom: calc(var(--infobox-border-size) * 2) solid #000;
border-radius: var(--infobox-border-radius);
}
.infobox-image {
display: flex;
place-content: center;
max-width: 100%;
aspect-ratio: 1;
}
.infobox-stats {
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
}
.stat-attack img, .stat-health img, .stat-timer img {
pointer-events: none;
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.title {
text-align: center;
font-family: 'Luckiest Guy', sans-serif;
font-variant: small-caps;
font-size: 2.25em;
font-weight: 900;
line-height: 1;
letter-spacing: 0.025em;
color: #E5643B;
}
.stat-stroke {
position: relative;
}
.stroke {
position: absolute;
left: 0;
right: 0;
margin-inline: auto;
-webkit-text-stroke: 7px #000;
}
.no-stroke {
position: absolute;
left: 0;
right: 0;
margin-inline: auto;
color: white;
}
.ability-row > th > div, .misc-row > th > div {
text-align: left;
margin-right: 3px;
}
.ability-row > th > div {
max-width: 42px;
}
.ability-row > td > div, .misc-row > td > div {
padding: 3px 0;
}
.ability-row > td > div {
line-height: 1.75;
}
.stat-attack, .stat-health, .stat-timer {
display: grid;
align-items: center;
text-align: center;
}
.stat-attack > *, .stat-health > *, .stat-timer > * {
grid-row: 1;
grid-column: 1;
font-family: 'Luckiest Guy', sans-serif;
font-size: 2em;
font-weight: 900;
line-height: 0;
letter-spacing: 0.05em;
}
.ability-msg {
text-align: center;
font-style: italic;
}
.packs-list {
display: inline-flex;
gap: 2px;
flex-wrap: wrap;
}
.packs-list span {
aspect-ratio: 1;
}
.divider-tier, .divider-ability, .divider-misc, .divider-noimage {
display: flex;
flex-direction: row;
padding: 5px 0;
}
.divider-tier::before, .divider-tier::after,
.divider-ability::before, .divider-ability::after,
.divider-misc::before, .divider-misc::after,
.divider-noimage::before, .divider-noimage::after {
content: "";
flex: 1 1;
border-width: 2px;
border-style: solid;
border-left: 0;
border-right: 0;
border-top: 0;
margin: auto;
}
.divider-tier::before, .divider-ability::before, .divider-misc::before {
border-image: linear-gradient(-90deg, #000 50%, transparent) 1;
margin-right: 5px;
}
.divider-tier::after, .divider-ability::after, .divider-misc::after {
border-image: linear-gradient(90deg, #000 50%, transparent) 1;
margin-left: 5px;
}
.divider-noimage::before {
border-image: linear-gradient(-90deg, #000 50%, transparent) 1;
margin: 10px 0;
}
.divider-noimage::after {
border-image: linear-gradient(90deg, #000 50%, transparent) 1;
}
.divider-ability {
font-family: 'Luckiest Guy', sans-serif;
font-size: 1.75em;
font-weight: 900;
font-variant: small-caps;
letter-spacing: 0.025em;
}