Template

Card2/styles.css

From Dogcraft Wiki

(Created page with "div.card2 { 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); width: 120px; height: 120px; transition: box-shadow 0.2s ease-in-out; } div.card2:hover, div.card2:focus{ box-shadow: 0 2px 3px rgba(85, 85, 85, 0.25), 0 0 10px rgba(85, 85, 85, 0.25); } div.card2 > a:nth-child(1) { padding: 10px 25px 0...")
 
No edit summary
 
(24 intermediate revisions by the same user not shown)
Line 1: Line 1:
div.card2 {
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;  
     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);
box-shadow: 0 2px 3px rgba(85, 85, 85, 0.1), 0 0 0 1px rgba(85, 85, 85, 0.1);
    width: 120px;
    height: 120px;
     transition: box-shadow 0.2s ease-in-out;
     transition: box-shadow 0.2s ease-in-out;
}
}


div.card2:hover,
div.wiki-card:not(.card-cover) > a:nth-child(1) {
div.card2:focus{
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);
     box-shadow: 0 2px 3px rgba(85, 85, 85, 0.25), 0 0 10px rgba(85, 85, 85, 0.25);
}
}


div.card2 > a:nth-child(1) {
div.wiki-card > a:nth-child(1) {
    padding: 10px 25px 0;
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.card2 > a:nth-child(2) {
div.wiki-card.card-cover.card-img-only > a:nth-child(1) > img {
  padding: 10px 0;
border-radius: 5px;
  line-height: 20px;
  width: 100%;
  text-align: center;
}
}


div.card2 > a:nth-child(2):hover,
/* image mode: cover */
div.card2 > a:nth-child(2):focus {
 
  text-decoration: none;
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.card2 > a:nth-child(1),
div.wiki-card.card-cover:hover > a:nth-child(1) > img,
div.card2 > a:nth-child(1) > img {
div.wiki-card.card-cover:focus > a:nth-child(1) > img{
    width: 70px;
filter: saturate(100%) brightness(100%);
    height: 70px;
}
 
/* 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;
}
}

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;
}
Background Dragon Slayer - Retriever by Ironboundred