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

리버티게임(개발), 모두가 만들어가는 자유로운 게임
둘러보기로 이동 검색으로 이동
시각위키텍스트
>BANIP
(새 문서: <onlyinclude>{{#css: .gamecard{ border-color: hsl(320,95%,80%); background: #fff; margin: 8px; box-shadow: 0 2px 2px rgba(0,0,0,0.3); } .gamecard .theme{ height: 8px; } .gamecard .content{ padding:8px 16px; } .gamecard .title{ font-size: 1.2em; font-weight: bold; margin-left: 8px; } .gamecard .title a{ color:#6480b6; } .gamecard .summary{ font-size: 0.8em...)
 
잔글편집 요약 없음
 
(사용자 2명의 중간 판 34개는 보이지 않습니다)
1번째 줄: 1번째 줄:
<onlyinclude>{{#css:
<onlyinclude> {{#css:
    .gamecard{
        border-color: hsl(320,95%,80%);
        background: #fff;
        margin: 8px;
box-shadow: 0 2px 2px rgba(0,0,0,0.3);
    }
    .gamecard .theme{
        height: 8px;
    }
    .gamecard .content{
        padding:8px 16px;
    }
    .gamecard .title{
        font-size: 1.2em;
        font-weight: bold;
        margin-left: 8px;
    }
    .gamecard .title a{
        color:#6480b6;
    }
    .gamecard .summary{
        font-size: 0.8em;
        margin-left: 8px;
        color: #999;
        margin-bottom: 8px;
    }


    .gamecard .content > .description{
#mw-content-text:has(.gamecards) {
        font-size: 0.8em;
container-type: inline-size;
    }
}


    .gamecard .icon-wrapper{
@container (width > 540px){
        position: relative;
.gamecards{
        user-select: none;
  column-count: 2;
    }
}
    .gamecard .icon-wrapper .icon{
}
        color:#999;
 
        transition: opacity 0.2s ease-in-out;
.gamecard {
        opacity: 0.5;
border-color: hsl(320, 95%, 80%);
    }
background: #fff;
   
margin: 8px 0;  
    .gamecard .icon-wrapper:hover .icon{  
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
        opacity: 1;
break-inside: avoid;
    }
 
    .gamecard .icon-wrapper .description{
}
        visibility: hidden;
 
        position: absolute;
.gamecard .theme {
        bottom: 0;
height: 8px;
        right: 0;
}
        text-wrap: nowrap;
 
        transition: opacity 0.2s ease-in-out;
.gamecard .image-wrapper img{
        opacity: 0;
    width: 100%;
        background: #000;
    max-height: 5em;
        color: #fff;
    object-fit: cover;
        padding: 2px 6px;
}
        font-size:0.8em;
 
        transform: translateY(100%);
.gamecard .content {
    }
padding: 8px 12px;
    .gamecard .icon-wrapper:hover .description{
}
        visibility: visible;
 
        opacity: 0.6;
.gamecard .content .genres{
       
margin-bottom:8px;
    }
margin-left: 4px;
    .gamecard .badges{
}
        float:right;
 
        display:flex;
.gamecard .content .genres .genre{
    }
background: hsl(132,68%,50%);
    .gamecard .badges > *{
font-size: 0.8em;
        margin-left: 4px;
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 .detail{
.gamecard .title {
        font-size: 0.8em;
font-size: 1.2em;
        margin-top: 8px;
font-weight: bold;
        display: flex;
}
        align-items: center;
        justify-content: space-between;
    }


/* nth1부터 좌측 마진 왼쪽 구분자 */
.gamecard .title a {
.gamecard .author a:nth-child(n+1){
color: #6480b6;
margin-left: 4px;
}
}
 
.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 .author a:nth-child(n+2):before{
.gamecard .badges>* {
content: "•";
margin-left: 4px;
margin-right: 4px;
}
}


    .gamecard .detail .created, .gamecard .detail .metapage{
.gamecard .detail {
        float:right;
font-size: 0.8em;
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년 9월 25일 (수) 02:16 기준 최신판

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

도보시오

원본 주소 "https://dev.libertygame.work/index.php?title=틀:게임카드/css&oldid=31400"