Template:CharacterCard/styles.css: Difference between revisions

From Toon Wiki
Jump to navigation Jump to search
Created page with ".charcard { float: right; width: 320px; max-width: 100%; border: 1px solid #e5e7eb; background: #fff; border-radius: 12px; overflow: hidden; margin: 0 0 1em 1em; box-shadow: 0 1px 2px rgba(0,0,0,.05); font-size: 0.95em; line-height: 1.4; } .charcard-header { font-weight: 600; font-size: 1.15em; padding: .6em .8em; background: #f7f7f8; border-bottom: 1px solid #e7e7e7; } .charcard-image { text-align: center; padding: .6em; } .charcard-img {..."
 
Add CharacterCard styles
 
Line 1: Line 1:
.charcard {
.charcard { float:right; width:320px; max-width:100%; border:1px solid #e5e7eb; background:#fff; border-radius:12px; overflow:hidden; margin:0 0 1em 1em; box-shadow:0 1px 2px rgba(0,0,0,.05); font-size:.95em; line-height:1.4; }
  float: right;
.charcard-header { font-weight:600; font-size:1.15em; padding:.6em .8em; background:#f7f7f8; border-bottom:1px solid #e7e7e7; }
  width: 320px;
.charcard-image { text-align:center; padding:.6em; }
  max-width: 100%;
.charcard-img { max-width:100%; height:auto; border-radius:8px; }
  border: 1px solid #e5e7eb;
.charcard-meta { padding:.4em .8em; }
  background: #fff;
.charcard-meta dt { font-weight:600; float:left; width:38%; clear:left; color:#374151; }
  border-radius: 12px;
.charcard-meta dd { margin-left:38%; margin-bottom:.25em; color:#111827; }
  overflow: hidden;
.charcard-desc { padding:.6em .8em; color:#111827; }
  margin: 0 0 1em 1em;
.charcard-attr { padding:.5em .8em; font-size:.9em; color:#6b7280; border-top:1px dashed #e5e7eb; }
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
@media (max-width:720px){ .charcard{ float:none; width:100%; margin:0 0 1em 0; } }
  font-size: 0.95em;
  line-height: 1.4;
}
.charcard-header {
  font-weight: 600;
  font-size: 1.15em;
  padding: .6em .8em;
  background: #f7f7f8;
  border-bottom: 1px solid #e7e7e7;
}
.charcard-image { text-align: center; padding: .6em; }
.charcard-img { max-width: 100%; height: auto; border-radius: 8px; }
.charcard-meta { padding: .4em .8em; }
.charcard-meta dt {
  font-weight: 600; float: left; width: 38%; clear: left; color: #374151;
}
.charcard-meta dd { margin-left: 38%; margin-bottom: .25em; color: #111827; }
.charcard-desc { padding: .6em .8em; color: #111827; }
.charcard-attr {
  padding: .5em .8em; font-size: .9em; color: #6b7280;
  border-top: 1px dashed #e5e7eb;
}
@media (max-width: 720px) {
  .charcard { float: none; width: 100%; margin: 0 0 1em 0; }
}

Latest revision as of 20:49, 26 October 2025

.charcard { float:right; width:320px; max-width:100%; border:1px solid #e5e7eb; background:#fff; border-radius:12px; overflow:hidden; margin:0 0 1em 1em; box-shadow:0 1px 2px rgba(0,0,0,.05); font-size:.95em; line-height:1.4; }
.charcard-header { font-weight:600; font-size:1.15em; padding:.6em .8em; background:#f7f7f8; border-bottom:1px solid #e7e7e7; }
.charcard-image { text-align:center; padding:.6em; }
.charcard-img { max-width:100%; height:auto; border-radius:8px; }
.charcard-meta { padding:.4em .8em; }
.charcard-meta dt { font-weight:600; float:left; width:38%; clear:left; color:#374151; }
.charcard-meta dd { margin-left:38%; margin-bottom:.25em; color:#111827; }
.charcard-desc { padding:.6em .8em; color:#111827; }
.charcard-attr { padding:.5em .8em; font-size:.9em; color:#6b7280; border-top:1px dashed #e5e7eb; }
@media (max-width:720px){ .charcard{ float:none; width:100%; margin:0 0 1em 0; } }