틀:알림 상자/CSS: 두 판 사이의 차이

리버티게임(개발), 모두가 만들어가는 자유로운 게임
둘러보기로 이동 검색으로 이동
(Hsl0님이 비 기본값 "CSS" 콘텐츠 모델을 사용해 틀:알림 상자/CSS 문서를 만들었습니다)
 
편집 요약 없음
 
(같은 사용자의 중간 판 하나는 보이지 않습니다)
1번째 줄: 1번째 줄:
 
.ambox {
    width: clamp(80%, 40em, calc(100% - 10px));
   
    margin: 3px auto;
    padding: 5px;
    gap: 5px;
   
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "ambox-title      ambox-title  ambox-title"
        "ambox-image-left ambox-detail ambox-image-right";
   
    text-align: center;
   
    background-color: #f5f5f5;
    box-shadow: 0 0 4px 0px #c8ccd1;
}
.ambox-title {
    width: calc(100% - 10px);
   
    padding: 5px;
   
    grid-area: ambox-title;
   
    background-color: #404040;
    color: white;
    font-weight: bold;
}
.ambox-detail {
    width: 100%;
    grid-area: ambox-detail;
}
.ambox-image {
    min-width: 60px;
    place-self: center;
}
.ambox-image-left {grid-area: ambox-image-left;}
.ambox-image-right {grid-area: ambox-image-right}

2024년 10월 6일 (일) 15:12 기준 최신판

.ambox {
    width: clamp(80%, 40em, calc(100% - 10px));
    
    margin: 3px auto;
    padding: 5px;
    gap: 5px;
    
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "ambox-title      ambox-title  ambox-title"
        "ambox-image-left ambox-detail ambox-image-right";
    
    text-align: center;
    
    background-color: #f5f5f5;
    box-shadow: 0 0 4px 0px #c8ccd1;
}
.ambox-title {
    width: calc(100% - 10px);
    
    padding: 5px;
    
    grid-area: ambox-title;
    
    background-color: #404040;
    color: white;
    font-weight: bold;
}
.ambox-detail {
    width: 100%;
    grid-area: ambox-detail;
}
.ambox-image {
    min-width: 60px;
    place-self: center;
}
.ambox-image-left {grid-area: ambox-image-left;}
.ambox-image-right {grid-area: ambox-image-right}