Template
Card2/styles.css
From Dogcraft Wiki
No edit summary |
No edit summary |
||
Line 5: | Line 5: | ||
background: #ffffff; | background: #ffffff; | ||
border-radius:5px; | border-radius:5px; | ||
box-shadow: 0 2px 3px rgba(85, 85, 85, 0.1), 0 0 0 1px rgba(85, 85, 85, 0.1); | |||
transition: box-shadow 0.2s ease-in-out; | transition: box-shadow 0.2s ease-in-out; | ||
} | } | ||
Line 17: | Line 15: | ||
div.wiki-card > a:nth-child(1) { | div.wiki-card > a:nth-child(1) { | ||
height: 5em; /*this is important because of image height hack (see template doc)*/ | |||
} | } | ||
Line 28: | Line 26: | ||
div.wiki-card > a:nth-child(2) { | div.wiki-card > a:nth-child(2) { | ||
box-sizing:border-box; | |||
padding: 10px 5px; | |||
width: 100%; | |||
line-height: 20px; | |||
font-size: 16px; /*this is important because of image height hack (see template doc)*/ | |||
text-align: center; | |||
overflow-x: hidden; | |||
text-overflow: ellipsis; | |||
white-space: nowrap; | |||
} | } | ||
Line 41: | Line 44: | ||
div.wiki-card > a:nth-child(2):hover, | div.wiki-card > a:nth-child(2):hover, | ||
div.wiki-card > a:nth-child(2):focus { | div.wiki-card > a:nth-child(2):focus { | ||
text-decoration: none; | |||
} | |||
div.wiki-card.card-overflow > a:nth-child(2) { | |||
text-overflow: ellipsis; | |||
white-space: normal; | |||
} | } |
Revision as of 22:03, 28 June 2023
div.wiki-card {
display: flex;
flex-direction: column;
font-weight: 600;
background: #ffffff;
border-radius:5px;
box-shadow: 0 2px 3px rgba(85, 85, 85, 0.1), 0 0 0 1px rgba(85, 85, 85, 0.1);
transition: box-shadow 0.2s ease-in-out;
}
div.wiki-card:hover,
div.wiki-card:focus{
box-shadow: 0 2px 3px rgba(85, 85, 85, 0.25), 0 0 10px rgba(85, 85, 85, 0.25);
}
div.wiki-card > a:nth-child(1) {
height: 5em; /*this is important because of image height hack (see template doc)*/
}
div.wiki-card > a:nth-child(1) > img {
height: 100%;
object-fit: cover;
border-radius: 5px 5px 0 0;
filter: saturate(75%) brightness(87%);
}
div.wiki-card > a:nth-child(2) {
box-sizing:border-box;
padding: 10px 5px;
width: 100%;
line-height: 20px;
font-size: 16px; /*this is important because of image height hack (see template doc)*/
text-align: center;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
div.wiki-card:hover > a:nth-child(1) > img,
div.wiki-card:focus > a:nth-child(1) > img{
filter: saturate(100%) brightness(100%);
}
div.wiki-card > a:nth-child(2):hover,
div.wiki-card > a:nth-child(2):focus {
text-decoration: none;
}
div.wiki-card.card-overflow > a:nth-child(2) {
text-overflow: ellipsis;
white-space: normal;
}
This page was last modified on 28 June 2023, at 22:03. (16 months ago)