Template:Main Page/styles.css: Difference between revisions
Template page
More actions
Created Template:Main Page/styles.css |
mNo edit summary |
||
| (3 intermediate revisions by the same user not shown) | |||
| Line 60: | Line 60: | ||
padding: 12px; | padding: 12px; | ||
border-radius: 10px; | border-radius: 10px; | ||
overflow: hidden; | |||
} | } | ||
| Line 268: | Line 269: | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
gap: 8px; | gap: 8px; | ||
flex: 0 7 0; | |||
} | |||
.mp-highlight-image img, | |||
.mp-highlight-image { | |||
object-fit: cover; | |||
width: 100%; | |||
height: 100%; | |||
max-height: 300px; | |||
border-radius: 10px; | |||
} | |||
.mp-highlight-image img { | |||
transition: transform 250ms ease-out; | |||
} | |||
.mp-section:hover .mp-highlight-image img { | |||
transform: scale(1.05); | |||
} | |||
.mp-highlight-top { | |||
display: flex; | |||
align-items: center; | |||
width: calc(100% - 24px); | |||
padding: 12px; | |||
position: absolute; | |||
top: 0; | |||
border-radius: 10px; | |||
} | |||
.mp-highlight-title h3 { | |||
font-size: 1.2em; | |||
color: var(--color-inverted-fixed); | |||
} | |||
.mp-highlight-tag { | |||
margin-left: auto; | |||
padding: 2px 8px; | |||
text-shadow: none; | |||
font-size: 0.9em; | |||
font-weight: 550; | |||
border-radius: 20px; | |||
} | |||
.mp-highlight-tag-update { | |||
background-color: var(--color-accent); | |||
color: var(--color-accent-text); | |||
} | } | ||
.mp-highlight { | .mp-highlight { | ||
background-size: cover; | |||
background-position: center; | |||
background-repeat: no-repeat; | |||
flex: 1 1 0; | flex: 1 1 0; | ||
min-width: 300px; | min-width: 300px; | ||
| Line 277: | Line 328: | ||
position: relative; | position: relative; | ||
padding: 0; | padding: 0; | ||
text-shadow: 1px 1px 8px #333, | |||
-1px -1px 8px #333; | |||
} | } | ||
.mp-highlight | .mp-highlight > a { | ||
position: absolute; | position: absolute; | ||
inset: 0; | inset: 0; | ||
z-index: 10; | |||
text-indent: -9999px; | |||
} | } | ||
/* Highlight END */ | /* Highlight END */ | ||