틀:게임카드/css: 두 판 사이의 차이
< 틀:게임카드
>BANIP (반응형디자인) |
잔글편집 요약 없음 |
||
| (사용자 2명의 중간 판 19개는 보이지 않습니다) | |||
| 1번째 줄: | 1번째 줄: | ||
<onlyinclude> {{#css: | <onlyinclude> {{#css: | ||
#mw-content-text:has(.gamecards) { | |||
container-type: inline-size; | container-type: inline-size; | ||
} | } | ||
@container (width > 540px){ | @container (width > 540px){ | ||
.gamecards{ | .gamecards{ | ||
column-count: 2; | |||
} | } | ||
} | } | ||
| 19번째 줄: | 17번째 줄: | ||
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); | box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); | ||
break-inside: avoid; | break-inside: avoid; | ||
} | } | ||
.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: 4px; | |||
} | } | ||
| 52번째 줄: | 58번째 줄: | ||
font-size: 1.2em; | font-size: 1.2em; | ||
font-weight: bold; | font-weight: bold; | ||
} | } | ||
| 61번째 줄: | 66번째 줄: | ||
.gamecard .summary { | .gamecard .summary { | ||
font-size: 0.8em; | font-size: 0.8em; | ||
color: #999; | color: #999; | ||
margin-bottom: 8px; | margin-bottom: 8px; | ||
| 68번째 줄: | 72번째 줄: | ||
.gamecard .content>.description { | .gamecard .content>.description { | ||
font-size: 0.8em; | font-size: 0.8em; | ||
margin-left: 8px; | |||
} | |||
.gamecard.설명감춤 .content>.description { | |||
display:none; | |||
} | } | ||
| 76번째 줄: | 85번째 줄: | ||
.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; | |||
} | } | ||
| 96번째 줄: | 111번째 줄: | ||
color: #fff; | color: #fff; | ||
padding: 2px 6px; | padding: 2px 6px; | ||
font-size: 0. | font-size: 0.6rem; | ||
transform: translateY(100%); | transform: translateY(100%); | ||
} | } | ||
| 123번째 줄: | 138번째 줄: | ||
} | } | ||
.gamecard .author .separator{ | .gamecard .detail .created{ | ||
font-size: 0.5em; | |||
color: #999; | |||
} | |||
.gamecard .detail .author .separator{ | |||
margin:0 2px; | margin:0 2px; | ||
color: #999; | color: #999; | ||
} | } | ||
}}</onlyinclude> | }}</onlyinclude> | ||