틀:게임카드/css: 두 판 사이의 차이
< 틀:게임카드
(일부 마진 재지정) |
태그: 일괄 되돌리기 |
||
(사용자 3명의 중간 판 18개는 보이지 않습니다) | |||
1번째 줄: | 1번째 줄: | ||
/* 하위문서의 디자인을 담당하는 부분을 분리해둔 문서입니다. */ | |||
#mw-content-text:has(.gamecards) { | |||
container-type: inline-size; | container-type: inline-size; | ||
} | } | ||
6번째 줄: | 6번째 줄: | ||
@container (width > 540px){ | @container (width > 540px){ | ||
.gamecards{ | .gamecards{ | ||
column-count: 2; | |||
} | } | ||
} | } | ||
21번째 줄: | 20번째 줄: | ||
.gamecard .theme { | .gamecard .theme { | ||
height: 8px; | height: 8px; | ||
} | |||
.gamecard .image-wrapper img{ | |||
width: 100%; | |||
max-height: 5em; | |||
object-fit: cover; | |||
} | } | ||
.gamecard .content { | .gamecard .content { | ||
padding: 8px | padding: 8px 12px; | ||
} | } | ||
.gamecard .content .genres{ | .gamecard .content .genres{ | ||
margin-bottom:8px; | margin-bottom:8px; | ||
margin-left: | margin-left: 4px; | ||
} | } | ||
66번째 줄: | 71번째 줄: | ||
font-size: 0.8em; | font-size: 0.8em; | ||
margin-left: 8px; | margin-left: 8px; | ||
} | |||
.gamecard.설명감춤 .content>.description { | |||
display:none; | |||
} | } | ||
74번째 줄: | 83번째 줄: | ||
.gamecard .icon-wrapper .icon { | .gamecard .icon-wrapper .icon { | ||
color: #777; | |||
transition: opacity 0.2s ease-in-out; | transition: opacity 0.2s ease-in-out; | ||
opacity: 0.5; | opacity: 0.5; | ||
font-size: 1.7em; | |||
} | |||
.gamecard .icon-wrapper .icon a{ | |||
color: inherit; | |||
text-decoration: none; | |||
} | } | ||
94번째 줄: | 109번째 줄: | ||
color: #fff; | color: #fff; | ||
padding: 2px 6px; | padding: 2px 6px; | ||
font-size: 0. | font-size: 0.6rem; | ||
transform: translateY(100%); | transform: translateY(100%); | ||
} | } | ||
119번째 줄: | 134번째 줄: | ||
align-items: center; | align-items: center; | ||
justify-content: space-between; | justify-content: space-between; | ||
line-break: anywhere; /* 이게 없으면 IP 유저 사용자 이름이 게임카드 레이아웃의 폭을 상위 엘리먼트 너머로 넓힐 가능성 있음 */ | |||
} | } | ||
129번째 줄: | 145번째 줄: | ||
color: #999; | color: #999; | ||
} | } | ||
/*<onlyinclude>{{#css:틀:게임카드/css}}</onlyinclude>*/ | |||
}}</onlyinclude> | |||
* |
2024년 9월 29일 (일) 00:44 기준 최신판
/* 하위문서의 디자인을 담당하는 부분을 분리해둔 문서입니다. */
#mw-content-text:has(.gamecards) {
container-type: inline-size;
}
@container (width > 540px){
.gamecards{
column-count: 2;
}
}
.gamecard {
border-color: hsl(320, 95%, 80%);
background: #fff;
margin: 8px 0;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
break-inside: avoid;
}
.gamecard .theme {
height: 8px;
}
.gamecard .image-wrapper img{
width: 100%;
max-height: 5em;
object-fit: cover;
}
.gamecard .content {
padding: 8px 12px;
}
.gamecard .content .genres{
margin-bottom:8px;
margin-left: 4px;
}
.gamecard .content .genres .genre{
background: hsl(132,68%,50%);
font-size: 0.8em;
padding: 2px 6px;
border-radius: 1em;
white-space: nowrap;
}
.gamecard .content .genres .genre:not(:last-child){
margin-right: 4px;
}
.gamecard .content .genres .genre a{
color: #fff;
}
.gamecard .title {
font-size: 1.2em;
font-weight: bold;
}
.gamecard .title a {
color: #6480b6;
}
.gamecard .summary {
font-size: 0.8em;
color: #999;
margin-bottom: 8px;
}
.gamecard .content>.description {
font-size: 0.8em;
margin-left: 8px;
}
.gamecard.설명감춤 .content>.description {
display:none;
}
.gamecard .icon-wrapper {
position: relative;
user-select: none;
}
.gamecard .icon-wrapper .icon {
color: #777;
transition: opacity 0.2s ease-in-out;
opacity: 0.5;
font-size: 1.7em;
}
.gamecard .icon-wrapper .icon a{
color: inherit;
text-decoration: none;
}
.gamecard .icon-wrapper:hover .icon {
opacity: 1;
}
.gamecard .icon-wrapper .description {
visibility: hidden;
position: absolute;
bottom: 0;
right: 0;
text-wrap: nowrap;
transition: opacity 0.2s ease-in-out;
opacity: 0;
background: #000;
color: #fff;
padding: 2px 6px;
font-size: 0.6rem;
transform: translateY(100%);
}
.gamecard .icon-wrapper:hover .description {
visibility: visible;
opacity: 0.6;
}
.gamecard .badges {
float: right;
display: flex;
}
.gamecard .badges>* {
margin-left: 4px;
}
.gamecard .detail {
font-size: 0.8em;
margin-top: 8px;
display: flex;
align-items: center;
justify-content: space-between;
line-break: anywhere; /* 이게 없으면 IP 유저 사용자 이름이 게임카드 레이아웃의 폭을 상위 엘리먼트 너머로 넓힐 가능성 있음 */
}
.gamecard .detail .created{
font-size: 0.5em;
color: #999;
}
.gamecard .detail .author .separator{
margin:0 2px;
color: #999;
}
/*<onlyinclude>{{#css:틀:게임카드/css}}</onlyinclude>*/