Template:Notice/styles.css

/* [[Category:在模板命名空间下的CSS页面]] */
.notice {
  display: flex;
  width: 80%;
  flex-flow: row nowrap;
  border-width: 1px;
  border-style: solid;
  border-radius: 8px;
  margin: 0.25em auto;
}

.notice-icon {
  flex: 0 0 auto;
  margin: 1em;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain; 
}

.notice-text {
  flex: 1 1 auto;
  margin: 1.2em 1em 1em 0;
}

.notice-title {
  font-weight: 600;
}

.notice-list {
  font-weight: 400;
  margin: 0.25em 0 0.25em 1.2em;
}

.notice-detail {
  font-weight: 400;
}

/* info */
.notice-info {
  border-color: #91caff;
  background: #e6f4ff;
}
.notice-info .notice-icon {
  -webkit-mask-image: url(/images/c/c9/Lucide-info.svg);
  mask-image: url(/images/c/c9/Lucide-info.svg);
  background-color: #1677ff;
}

/* caution */
.notice-caution {
  border-color: #ffe58f;
  background: #fffbe6;
}
.notice-caution .notice-icon {
  -webkit-mask-image: url(/images/f/f7/Lucide-circle-alert.svg);
  mask-image: url(/images/f/f7/Lucide-circle-alert.svg);
  background-color: #faad14;
}

/* warning */
.notice-warning {
  border-color: #ffccc7;
  background: #fff2f0;
}
.notice-warning .notice-icon {
  -webkit-mask-image: url(/images/7/7e/Lucide-triangle-alert.svg);
  mask-image: url(/images/7/7e/Lucide-triangle-alert.svg);
  background-color: #ff4d4f;
}

/* policy */
.notice-policy {
  border-color: #b7eb8f;
  background: #f6ffed;
}
.notice-policy .notice-icon {
  -webkit-mask-image: url(/images/d/d9/Lucide-circle-check.svg);
  mask-image: url(/images/d/d9/Lucide-circle-check.svg);
  background-color: #52c41a;
}

/* essay */
.notice-essay {
  border-color: #ffe58f;
  background: #fffbe6;
}
.notice-essay .notice-icon {
  -webkit-mask-image: url(/images/d/d9/Lucide-circle-check.svg);
  mask-image: url(/images/d/d9/Lucide-circle-check.svg);
  background-color: #faad14;
}

/* help */
.notice-help {
  border-color: #91caff;
  background: #e6f4ff;
}
.notice-help .notice-icon {
  -webkit-mask-image: url(/images/f/fb/Lucide-circle-question-mark.svg);
  mask-image: url(/images/f/fb/Lucide-circle-question-mark.svg);
  background-color: #1677ff;
}

/* 窄屏 */
body:not(.main-sm) .notice {
  width: 100%;
}