틀:게임카드/css: 두 판 사이의 차이

리버티게임, 모두가 만들어가는 자유로운 게임
(css파서가 @container를 지원안하나보네요)
태그: 되돌려진 기여
잔글 (Senouis의 편집을 BANIP의 마지막 판으로 되돌림)
태그: 일괄 되돌리기
(사용자 2명의 중간 판 21개는 보이지 않습니다)
1번째 줄: 1번째 줄:
<onlyinclude> {{#css:
<onlyinclude> {{#css:
/* @container 폭이 350픽셀 이상일 경우 float-right 및 가로폭 50%로 조정*/
* > :has(.gamecards){
@media (min-width:350px) {
container-type: inline-size;
.gamecard {
}
float: right;
 
width: 50%;
@container (width > 540px){
}
.gamecards{
}
columns: 2 auto;
column-gap: 12px;
/* 게임카드 컨테이너 스타일 */
.gamecard {
border-color: hsl(320, 95%, 80%);
background: #fff;
margin: 8px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
}
}
}
.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 {
.gamecard .theme {
padding: 8px 12px;
height: 8px;
}
}


/* 헤더 컬러를 제외한 나머지부분 여백 추가 */
.gamecard .content .genres{
.gamecard .content {
margin-bottom:8px;
padding: 8px 16px;
margin-left: 4px;
}
}  


/* 장르 단추들 하단 마진 추가 */
.gamecard .content .genres .genre{
.gamecard .content .genres{
background: hsl(132,68%,50%);
margin-bottom:8px;
font-size: 0.8em;
}
padding: 2px 6px;
border-radius: 1em;
.gamecard .content .genres .genre{
white-space: nowrap;
background: hsl(132,68%,50%);
}  
font-size: 0.8em;
padding: 2px 6px;
border-radius: 1em;
}  


.gamecard .content .genres .genre a{
.gamecard .content .genres .genre:not(:last-child){
color: #fff;
margin-right: 4px;
}
}


.gamecard .title {
.gamecard .content .genres .genre a{
font-size: 1.2em;
color: #fff;
font-weight: bold;
}
margin-left: 8px;
}


.gamecard .title a {
.gamecard .title {
color: #6480b6;
font-size: 1.2em;
}
font-weight: bold;
}


.gamecard .summary {
.gamecard .title a {
font-size: 0.8em;
color: #6480b6;
margin-left: 8px;
}
color: #999;
margin-bottom: 8px;
}


.gamecard .content>.description {
.gamecard .summary {
font-size: 0.8em;
font-size: 0.8em;
}
color: #999;
margin-bottom: 8px;
}


.gamecard .icon-wrapper {
.gamecard .content>.description {
position: relative;
font-size: 0.8em;
user-select: none;
margin-left: 8px;
}
}


.gamecard .icon-wrapper .icon {
.gamecard.설명감춤 .content>.description {
color: #999;
display:none;
transition: opacity 0.2s ease-in-out;
}
opacity: 0.5;
}


.gamecard .icon-wrapper:hover .icon {
.gamecard .icon-wrapper {
opacity: 1;
position: relative;
}
user-select: none;
}


.gamecard .icon-wrapper .description {
.gamecard .icon-wrapper .icon {
visibility: hidden;
    color: #777;
position: absolute;
transition: opacity 0.2s ease-in-out;
bottom: 0;
opacity: 0.5;
right: 0;
    font-size: 1.7em;
text-wrap: nowrap;
}
transition: opacity 0.2s ease-in-out;
opacity: 0;
background: #000;
color: #fff;
padding: 2px 6px;
font-size: 0.8em;
transform: translateY(100%);
}


.gamecard .icon-wrapper:hover .description {
.gamecard .icon-wrapper .icon a{
visibility: visible;
    color: inherit;
opacity: 0.6;
    text-decoration: none;
}


}
.gamecard .icon-wrapper:hover .icon {
opacity: 1;
}


.gamecard .badges {
.gamecard .icon-wrapper .description {
float: right;
visibility: hidden;
display: flex;
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 .badges>* {
.gamecard .icon-wrapper:hover .description {
margin-left: 4px;
visibility: visible;
}
opacity: 0.6;


.gamecard .detail {
}
font-size: 0.8em;
margin-top: 8px;
display: flex;
align-items: center;
justify-content: space-between;
}


/* nth1부터 좌측 마진 왼쪽 구분자 */
.gamecard .badges {
.gamecard .author a:nth-child(n+1) {
float: right;
margin-left: 4px;
display: flex;
}
}


.gamecard .author a:nth-child(n+2):before {
.gamecard .badges>* {
content: "•";
margin-left: 4px;
margin-right: 4px;
}
}


.gamecard .detail .created,
.gamecard .detail {
.gamecard .detail .metapage {
font-size: 0.8em;
float: right;
margin-top: 8px;
display: flex;
align-items: center;
justify-content: space-between;
}


}
.gamecard .detail .created{
font-size: 0.5em;
    color: #999;
}
.gamecard .detail .author .separator{
margin:0 2px;
color: #999;
}


}}</onlyinclude>
}}</onlyinclude>

2024년 8월 12일 (월) 20:13 판

하위문서의 디자인을 담당하는 부분을 분리해둔 문서입니다.

도보시오

원본 주소 "https://libertyga.me/index.php?title=틀:게임카드/css&oldid=256236"