Template
Card2/styles.css
From Dogcraft Wiki
No edit summary Tag: Reverted |
No edit summary |
||
(16 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
div.wiki-card { | div.wiki-card { | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
max-width: 100%; | |||
font-weight: 600; | font-weight: 600; | ||
background: #ffffff; | background: #ffffff; | ||
Line 7: | Line 8: | ||
box-shadow: 0 2px 3px rgba(85, 85, 85, 0.1), 0 0 0 1px rgba(85, 85, 85, 0.1); | 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; | ||
} | |||
div.wiki-card:not(.card-cover) > a:nth-child(1) { | |||
padding: 10px 20.83% 0; | |||
} | |||
div.wiki-card:not(.card-cover) > a:nth-child(1) > img { | |||
height: calc(5em - 10px); | |||
width: auto; | |||
} | } | ||
div.wiki-card:hover, | div.wiki-card:hover, | ||
div.wiki-card:focus{ | div.wiki-card:focus { | ||
box-shadow: 0 2px 3px rgba(85, 85, 85, 0.25), 0 0 10px rgba(85, 85, 85, 0.25); | 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) { | div.wiki-card > a:nth-child(1) { | ||
display: flex; | display: flex; | ||
justify-content: center; | justify-content: center; | ||
Line 28: | Line 37: | ||
font-size: 16px; /*this is important because of image height hack (see template doc)*/ | font-size: 16px; /*this is important because of image height hack (see template doc)*/ | ||
text-align: center; | text-align: center; | ||
overflow | overflow: hidden; | ||
text-overflow: ellipsis; | text-overflow: ellipsis; | ||
white-space: nowrap; | white-space: nowrap; | ||
height: 100%; | |||
} | } | ||
Line 38: | Line 48: | ||
} | } | ||
/* image mode: cover | /* image only mode (automaticly detected) */ | ||
div.wiki-card.card-img-only:not(.card-cover) > a:nth-child(1) { | |||
padding-bottom: 10px; | |||
} | |||
div.wiki-card | div.wiki-card.card-cover.card-img-only > a:nth-child(1) > img { | ||
border-radius: 5px; | |||
} | } | ||
/* image mode: cover */ | |||
div.wiki-card.card-cover > a:nth-child(1) > img { | div.wiki-card.card-cover > a:nth-child(1) > img { | ||
height: 5em; /*this is important because of image height hack (see template doc)*/ | |||
object-fit: cover; | object-fit: cover; | ||
border-radius: 5px 5px 0 0; | border-radius: 5px 5px 0 0; | ||
Line 61: | Line 76: | ||
word-wrap: break-word; | word-wrap: break-word; | ||
white-space: normal; | white-space: normal; | ||
display:flex; | |||
justify-content:center; | |||
align-items:center; | |||
} | } |
Latest revision as of 01:39, 29 June 2023
div.wiki-card {
display: flex;
flex-direction: column;
max-width: 100%;
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:not(.card-cover) > a:nth-child(1) {
padding: 10px 20.83% 0;
}
div.wiki-card:not(.card-cover) > a:nth-child(1) > img {
height: calc(5em - 10px);
width: auto;
}
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) {
display: flex;
justify-content: center;
align-items: center;
}
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: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 100%;
}
div.wiki-card > a:nth-child(2):hover,
div.wiki-card > a:nth-child(2):focus {
text-decoration: none;
}
/* image only mode (automaticly detected) */
div.wiki-card.card-img-only:not(.card-cover) > a:nth-child(1) {
padding-bottom: 10px;
}
div.wiki-card.card-cover.card-img-only > a:nth-child(1) > img {
border-radius: 5px;
}
/* image mode: cover */
div.wiki-card.card-cover > a:nth-child(1) > img {
height: 5em; /*this is important because of image height hack (see template doc)*/
object-fit: cover;
border-radius: 5px 5px 0 0;
filter: saturate(75%) brightness(87%);
}
div.wiki-card.card-cover:hover > a:nth-child(1) > img,
div.wiki-card.card-cover:focus > a:nth-child(1) > img{
filter: saturate(100%) brightness(100%);
}
/* overflow: true */
div.wiki-card.card-overflow > a:nth-child(2) {
word-wrap: break-word;
white-space: normal;
display:flex;
justify-content:center;
align-items:center;
}