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

식물 vs 좀비 위키
다음 편집 →
편집 취소imported>Ljyee
imported>Ljyee
새 문서: →========================= Template:메시지/styles.css =========================: →메시지 박스 전체 시작: .messagebox { position: relative; width: min(90%, 750px); margin: 28px auto 20px; padding: 0; box-sizing: border-box; background: repeating-linear-gradient( 0deg, #fff2db 0, #fff2db 20px, #f4dfbd 20px, #f4dfbd 22px ); border: 1.5px solid #d4b996; border-radius: 6px; box-shadow: 0 3px 0 rgba(92...
 
imported>Ljyee
편집 요약 없음
3번째 줄: 3번째 줄:
========================= */
========================= */


/* 메시지 박스 전체 시작 */
/* 메시지 전체 시작 */
.messagebox {
.pvz-message {
  --message-color: #479745;
  --message-color-soft: #75b86f;
 
   position: relative;
   position: relative;
   width: min(90%, 750px);
  display: grid;
   margin: 28px auto 20px;
  grid-template-columns: 9px minmax(0, 1fr);
   padding: 0;
 
   width: min(94%, 760px);
   margin: 28px auto 22px;
 
  background: #f6e4c4;
   border: 1.5px solid #c89d64;
  border-radius: 12px;
 
  box-shadow:
    0 3px 0 #9a6332,
    0 7px 16px rgba(63, 37, 15, 0.18);
 
   box-sizing: border-box;
   box-sizing: border-box;
  overflow: hidden;
}
/* 메시지 전체 끝 */
/* 메시지 장식선 시작 */
.pvz-message-accent {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100%;


   background:
   background:
     repeating-linear-gradient(
     linear-gradient(
       0deg,
       180deg,
       #fff2db 0,
       var(--message-color-soft) 0%,
       #fff2db 20px,
       var(--message-color) 48%,
      #f4dfbd 20px,
       #2f6f2c 100%
       #f4dfbd 22px
     );
     );


   border: 1.5px solid #d4b996;
   border-right: 1px solid rgba(15, 71, 40, 0.45);
   border-radius: 6px;
}
 
.pvz-message-accent::before,
.pvz-message-accent::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 4px;
  height: 4px;
 
  background: #f4d38f;
  border: 1px solid #8b5a2b;
   border-radius: 50%;
 
  transform: translateX(-50%);
}


   box-shadow:
.pvz-message-accent::before {
     0 3px 0 rgba(92, 34, 7, 0.16),
  top: 12px;
     0 5px 12px rgba(64, 48, 47, 0.14);
}
 
.pvz-message-accent::after {
  bottom: 12px;
}
/* 메시지 장식선 끝 */
 
/* 메시지 본체 시작 */
.pvz-message-main {
   position: relative;
  min-width: 0;
 
  padding: 0 16px 15px;
 
  background:
     radial-gradient(
      circle at 18px 16px,
      rgba(126, 86, 42, 0.055) 0,
      rgba(126, 86, 42, 0.055) 1px,
      transparent 1.5px
    ),
     radial-gradient(
      circle at 72px 54px,
      rgba(126, 86, 42, 0.04) 0,
      rgba(126, 86, 42, 0.04) 1px,
      transparent 1.5px
    ),
    #f6e4c4;
 
  background-size: 88px 72px, 110px 96px, auto;
 
  box-sizing: border-box;
}
}
/* 메시지 박스 전체 끝 */
/* 메시지 본체 끝 */


/* 메시지 박스 제목 바 시작 */
/* 메시지 제목 시작 */
.messagebox-header {
.pvz-message-heading {
   position: relative;
   position: relative;
   z-index: 2;
   z-index: 2;
   display: flex;
 
   display: inline-flex;
   align-items: center;
   align-items: center;
   width: calc(100% + 12px);
 
   min-height: 44px;
   max-width: calc(100% - 24px);
   margin: -15px 0 0 -6px;
   min-height: 38px;
   padding: 8px 14px;
 
  box-sizing: border-box;
   margin: -10px 0 10px 4px;
   padding: 7px 18px 8px;


   background:
   background:
     repeating-linear-gradient(
     linear-gradient(
       -45deg,
       180deg,
       var(--messagebox-color, #479745),
       var(--message-color-soft) 0%,
      var(--messagebox-color, #479745) 10px,
       var(--message-color) 58%,
       var(--messagebox-color-light, #65ad60) 10px,
       #347d32 100%
       var(--messagebox-color-light, #65ad60) 20px
     );
     );


   border: 2px solid #5c2207;
   border: 1.5px solid #0f4728;
   border-radius: 5px;
   border-radius: 8px 8px 8px 3px;


   box-shadow:
   box-shadow:
     0 2px 0 rgba(47, 22, 7, 0.28),
     0 2px 0 #6b3e1e,
     0 3px 7px rgba(64, 48, 47, 0.15);
     0 4px 8px rgba(42, 27, 12, 0.18);
}


.messagebox-header-text {
  flex: 1 1 auto;
   color: #fff;
   color: #fff;
   font-size: 17px;
   font-size: 17px;
   font-weight: 900;
   line-height: 1.28;
   line-height: 1.3;
 
   text-align: left;
  box-sizing: border-box;
}
 
.pvz-message-heading::after {
  content: "";
   position: absolute;
  left: 13px;
  bottom: -8px;
 
  width: 0;
  height: 0;
 
  border-top: 8px solid #0f4728;
   border-right: 8px solid transparent;
}
}
/* 메시지 박스 제목 바 끝 */
/* 메시지 제목 끝 */


/* 메시지 박스 내용 시작 */
/* 메시지 내용 영역 시작 */
.messagebox-body {
.pvz-message-row {
   display: grid;
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   grid-template-columns: auto minmax(0, 1fr);
   align-items: center;
   align-items: center;
   min-height: 90px;
  gap: 14px;
   padding: 14px;
 
   min-height: 92px;
 
   padding: 4px 2px 0;
 
   box-sizing: border-box;
   box-sizing: border-box;
}
}
/* 메시지 내용 영역 끝 */
/* 메시지 이미지 시작 */
.pvz-message-image-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  background:
    radial-gradient(
      circle at 35% 28%,
      #fff7db 0,
      #fff7db 18%,
      #ead39e 19%,
      #ead39e 66%,
      #c79a56 67%,
      #c79a56 100%
    );
  border: 3px solid var(--message-color);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 3px #f8e9bd,
    0 3px 0 #8c562c,
    0 5px 10px rgba(60, 38, 17, 0.18);


.messagebox-image {
  width: 100px;
  padding: 4px 12px 4px 2px;
   box-sizing: border-box;
   box-sizing: border-box;
  filter: drop-shadow(2px 3px 1px rgba(64, 48, 47, 0.25));
}
}


.messagebox-image img {
.pvz-message-image-wrap::before {
  content: "";
  position: absolute;
  inset: 8px;
 
  border: 1px dashed rgba(15, 71, 40, 0.34);
  border-radius: 50%;
 
  pointer-events: none;
}
 
.pvz-message-image {
  position: relative;
  z-index: 1;
 
  display: grid;
  place-items: center;
 
  width: 86px;
  height: 86px;
}
 
.pvz-message-image a,
.pvz-message-image .mw-file-description {
  display: grid;
  place-items: center;
 
  width: 100%;
  height: 100%;
}
 
.pvz-message-image img {
   display: block;
   display: block;
   max-width: 100%;
 
   max-width: 100% !important;
  max-height: 100% !important;
 
  width: auto;
   height: auto;
   height: auto;
   margin: 0 auto;
 
   filter: drop-shadow(2px 3px 1px rgba(51, 34, 18, 0.24));
}
}
/* 메시지 이미지 끝 */


.messagebox-content {
/* 메시지 본문 시작 */
.pvz-message-content {
   min-width: 0;
   min-width: 0;
   padding: 8px 4px;
 
   color: #2f2416;
   padding: 10px 12px 10px 4px;
 
   color: #3c2a18;
   font-size: 15px;
   font-size: 15px;
   line-height: 1.6;
   line-height: 1.65;
   text-align: left;
   text-align: left;
   box-sizing: border-box;
   box-sizing: border-box;
}
}
/* 메시지 박스 내용 끝 */


/* 이미지가 없는 메시지 박스 시작 */
.pvz-message-content p:first-child {
.messagebox-body > .messagebox-content:only-child {
  margin-top: 0;
}
 
.pvz-message-content p:last-child {
  margin-bottom: 0;
}
/* 메시지 본문 끝 */
 
/* 이미지가 없는 메시지 시작 */
.pvz-message-row > .pvz-message-content:only-child {
   grid-column: 1 / -1;
   grid-column: 1 / -1;
   padding: 14px 8px;
   padding-left: 8px;
}
}
/* 이미지가 없는 메시지 박스 끝 */
/* 이미지가 없는 메시지 끝 */


/* 모바일 대응 시작 */
/* 모바일 대응 시작 */
@media (max-width: 600px) {
@media (max-width: 600px) {
   .messagebox {
   .pvz-message {
     width: calc(100% - 16px);
     width: calc(100% - 16px);
     margin-top: 24px;
     margin-top: 24px;
    border-radius: 10px;
   }
   }


   .messagebox-header {
   .pvz-message-main {
    width: calc(100% + 8px);
     padding: 0 11px 12px;
    margin-left: -4px;
     padding: 8px 10px;
   }
   }


   .messagebox-header-text {
   .pvz-message-heading {
    max-width: calc(100% - 12px);
    margin-left: 2px;
    padding: 7px 13px 8px;
 
     font-size: 15px;
     font-size: 15px;
    line-height: 1.35;
   }
   }


   .messagebox-body {
   .pvz-message-row {
     grid-template-columns: 74px minmax(0, 1fr);
     grid-template-columns: 80px minmax(0, 1fr);
     padding: 10px;
     gap: 9px;
 
    min-height: 78px;
   }
   }


   .messagebox-image {
   .pvz-message-image-wrap {
     width: 74px;
     width: 76px;
     padding-right: 8px;
    height: 76px;
 
     border-width: 2px;
   }
   }


   .messagebox-content {
   .pvz-message-image {
    width: 62px;
    height: 62px;
  }
 
  .pvz-message-content {
    padding: 8px 4px;
 
     font-size: 14px;
     font-size: 14px;
     line-height: 1.58;
     line-height: 1.6;
   }
   }
}
}


@media (max-width: 400px) {
@media (max-width: 400px) {
   .messagebox-body {
   .pvz-message-row {
     grid-template-columns: 1fr;
     grid-template-columns: 1fr;
   }
   }


   .messagebox-image {
   .pvz-message-image-wrap {
    width: 82px;
     margin: 2px auto 4px;
     margin: 0 auto 4px;
    padding: 0;
   }
   }


   .messagebox-content {
   .pvz-message-content {
     text-align: left;
     padding: 6px 4px 8px;
   }
   }
}
}
/* 모바일 대응 끝 */
/* 모바일 대응 끝 */
원본 주소 "https://pvzkrwiki.com/wiki/틀:메시지/styles.css"