Template:LinkTile/styles.css: Difference between revisions
Template page
More actions
Created page with "→Template:Small-portal-tile/styles.css: .small-portal-tile { background: var(--color-surface-2); border: 3px solid var(--accent-color-base); border-radius: var(--border-radius-medium); overflow: hidden; transition: all 0.15s ease; text-align: center; height: 100%; →makes grid rows even: } .small-portal-tile:hover { transform: translateY(-3px); box-shadow: var(--box-shadow-small); } .small-portal-tile a { display: block..." |
No edit summary |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* Template: | /* Template:Portal_Tile/styles.css */ | ||
.small-portal-tile { | .small-portal-tile { | ||
position: relative; /* needed for tile-link overlay */ | |||
background: var(--color-surface-2); | background: var(--color-surface-2); | ||
border: 3px solid var(--accent-color-base); | border: 3px solid var(--accent-color-base); | ||
| Line 10: | Line 9: | ||
transition: all 0.15s ease; | transition: all 0.15s ease; | ||
text-align: center; | text-align: center; | ||
height: 100%; | height: 100%; | ||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: center; | |||
padding: var(--space-sm) var(--space-xs); | |||
} | } | ||
| Line 16: | Line 20: | ||
transform: translateY(-3px); | transform: translateY(-3px); | ||
box-shadow: var(--box-shadow-small); | box-shadow: var(--box-shadow-small); | ||
} | |||
.tile-icon { | |||
font-size: 3em; | |||
line-height: 1; | |||
margin-bottom: var(--space-xs); | |||
} | |||
.tile-icon img { | |||
width: 70px; | |||
height: 70px; | |||
object-fit: contain; | |||
} | |||
.tile-title { | |||
font-weight: bold; | |||
color: inherit; | |||
} | |||
/* invisible overlay making the whole card clickable */ | |||
.tile-link { | |||
position: absolute; | |||
inset: 0; | |||
display: block; | |||
z-index: 1; | |||
} | } | ||
.small-portal-tile a { | .small-portal-tile a { | ||
text-decoration: none; | text-decoration: none; | ||
color: inherit; | color: inherit; | ||
height: | } | ||
.small-portal-tile p { | |||
position: absolute; | |||
inset: 0; | |||
margin: 0; | |||
font-size: 0; | |||
line-height: 0; | |||
} | } | ||
Latest revision as of 23:35, 11 March 2026
/* Template:Portal_Tile/styles.css */
.small-portal-tile {
position: relative; /* needed for tile-link overlay */
background: var(--color-surface-2);
border: 3px solid var(--accent-color-base);
border-radius: var(--border-radius-medium);
overflow: hidden;
transition: all 0.15s ease;
text-align: center;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-sm) var(--space-xs);
}
.small-portal-tile:hover {
transform: translateY(-3px);
box-shadow: var(--box-shadow-small);
}
.tile-icon {
font-size: 3em;
line-height: 1;
margin-bottom: var(--space-xs);
}
.tile-icon img {
width: 70px;
height: 70px;
object-fit: contain;
}
.tile-title {
font-weight: bold;
color: inherit;
}
/* invisible overlay making the whole card clickable */
.tile-link {
position: absolute;
inset: 0;
display: block;
z-index: 1;
}
.small-portal-tile a {
text-decoration: none;
color: inherit;
}
.small-portal-tile p {
position: absolute;
inset: 0;
margin: 0;
font-size: 0;
line-height: 0;
}