틀:메시지/styles.css: 두 판 사이의 차이

식물 vs 좀비 위키
← 이전 편집다음 편집 →
편집 취소imported>Ljyee
imported>Ljyee
편집 요약 없음
imported>Ljyee
편집 요약 없음
11번째 줄: 11번째 줄:


   position: relative;
   position: relative;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
   width: 90%;
   width: 90%;
   max-width: 750px;
   max-width: 750px;
   margin: 24px auto;
   margin: 24px auto;


  box-sizing: border-box;
   filter: drop-shadow(10px 12px 7px rgba(0, 0, 0, 0.23));
   filter: drop-shadow(10px 12px 7px rgba(0, 0, 0, 0.23));
}
.pvz-message-box {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  background: transparent;
}
.pvz-message-box td {
  padding: 0;
  border: 0;
  vertical-align: middle;
}
}
/* 메시지 전체 끝 */
/* 메시지 전체 끝 */


/* 메시지 태그 영역 시작 */
.pvz-message-tag {
.pvz-message-tag {
   position: relative;
   position: relative;
   display: flex;
   width: 150px;
  align-items: center;
  justify-content: center;
 
  min-width: 0;
   padding: 14px 12px 14px 48px;
   padding: 14px 12px 14px 48px;


37번째 줄: 44번째 줄:
   overflow: hidden;
   overflow: hidden;
}
}
/* 메시지 태그 영역 끝 */


/* 메시지 태그 구멍 시작 */
.pvz-message-hole {
.pvz-message-hole {
   position: absolute;
   position: absolute;
54번째 줄: 59번째 줄:
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
}
/* 메시지 태그 구멍 끝 */


/* 메시지 이미지 시작 */
.pvz-message-image {
.pvz-message-image {
   position: relative;
   position: relative;
   z-index: 1;
   z-index: 1;
 
   text-align: center;
   display: grid;
  place-items: center;
 
  width: 100%;
  min-width: 0;
}
}


.pvz-message-image a,
.pvz-message-image a,
.pvz-message-image .mw-file-description {
.pvz-message-image .mw-file-description {
   display: grid;
   display: inline-block;
  place-items: center;
   max-width: 100%;
   max-width: 100%;
}
}
79번째 줄: 76번째 줄:
   max-width: 100% !important;
   max-width: 100% !important;
   height: auto !important;
   height: auto !important;
  margin: 0 auto;


   filter: drop-shadow(2px 4px 2px rgba(0, 0, 0, 0.28));
   filter: drop-shadow(2px 4px 2px rgba(0, 0, 0, 0.28));
}
}
/* 메시지 이미지 끝 */


/* 메시지 본문 카드 시작 */
.pvz-message-card {
.pvz-message-card {
  position: relative;
  z-index: 1;
  min-width: 0;
  margin-left: -1px;
   padding: 14px 12px 12px 14px;
   padding: 14px 12px 12px 14px;


96번째 줄: 87번째 줄:
   border: 3px solid var(--message-color);
   border: 3px solid var(--message-color);
}
}
/* 메시지 본문 카드 끝 */


/* 메시지 내용칸 시작 */
.pvz-message-content {
.pvz-message-content {
   min-width: 0;
   min-width: 0;
108번째 줄: 97번째 줄:
   text-align: left;
   text-align: left;
}
}
/* 메시지 내용칸 끝 */


/* 메시지 제목 시작 */
.pvz-message-heading {
.pvz-message-heading {
   margin: 0 0 2px;
   margin: 0 0 2px;
127번째 줄: 114번째 줄:
   line-height: inherit !important;
   line-height: inherit !important;
}
}
/* 메시지 제목 끝 */


/* 메시지 본문 시작 */
.pvz-message-text {
.pvz-message-text {
   min-width: 0;
   min-width: 0;
149번째 줄: 134번째 줄:
   margin-bottom: 0;
   margin-bottom: 0;
}
}
/* 메시지 본문 끝 */


/* 다크모드 대응 시작 */
/* 다크모드 대응 시작 */
176번째 줄: 160번째 줄:
/* 다크모드 대응 끝 */
/* 다크모드 대응 끝 */


/* 태블릿 대응 시작 */
/* 반응형 대응 시작 */
@media (max-width: 760px) {
@media (max-width: 760px) {
  .pvz-message {
    grid-template-columns: 36% minmax(0, 1fr);
  }
   .pvz-message-tag {
   .pvz-message-tag {
    width: 36%;
     padding: 18px 16px 18px 50px;
     padding: 18px 16px 18px 50px;
   }
   }
200번째 줄: 181번째 줄:
   }
   }
}
}
/* 태블릿 대응 끝 */


/* 모바일 대응 시작 */
@media (max-width: 520px) {
@media (max-width: 520px) {
   .pvz-message {
   .pvz-message {
    grid-template-columns: 112px minmax(0, 1fr);
     width: 90%;
 
     max-width: 750px;
     width: 100%;
     margin: 18px auto;
     max-width: none;
     margin: 18px 0;


     filter: drop-shadow(5px 7px 4px rgba(0, 0, 0, 0.2));
     filter: drop-shadow(5px 7px 4px rgba(0, 0, 0, 0.2));
215번째 줄: 192번째 줄:


   .pvz-message-tag {
   .pvz-message-tag {
    width: 112px;
     padding: 14px 8px 14px 34px;
     padding: 14px 8px 14px 34px;
     clip-path: polygon(25% 0, 100% 0, 100% 100%, 25% 100%, 0 50%);
     clip-path: polygon(25% 0, 100% 0, 100% 100%, 25% 100%, 0 50%);
   }
   }
231번째 줄: 210번째 줄:


   .pvz-message-content {
   .pvz-message-content {
    margin: 0;
     padding: 4px 0 0 5px;
     padding: 4px 0 0 5px;
     font-size: 14px;
     font-size: 14px;
     line-height: 1.55;
     line-height: 1.55;
240번째 줄: 217번째 줄:
   .pvz-message-heading {
   .pvz-message-heading {
     width: 100%;
     width: 100%;
     margin: 0 0 1px;
     margin-bottom: 1px;
 
     font-size: 18px;
     font-size: 18px;
   }
   }
249번째 줄: 225번째 줄:
   }
   }
}
}
/* 모바일 대응 끝 */
/* 반응형 대응 끝 */
원본 주소 "https://pvzkrwiki.com/wiki/틀:메시지/styles.css"