https://mewsie.world/CoraTOWiki/index.php?action=history&feed=atom&title=MediaWiki%3AChaosMonsterCard.css 2026-06-20T22:32:50Z Revision history for this page on the wiki MediaWiki 1.43.6 https://mewsie.world/CoraTOWiki/index.php?title=MediaWiki:ChaosMonsterCard.css&diff=6622&oldid=prev 2025-12-30T10:17:17Z

<p>Created page with &quot;<span class="autocomment">Monster Information Cards: </span> .monster-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; margin-bottom: 2rem; } .monster-info-card { background: var(--bg-1); border-radius: 12px; padding: 1.5rem; box-shadow: 0 4px 20px var(--shadow-soft); border: 1px solid var(--border); transition: all 0.3s ease; position: relative; overflow: hidden; } .monster-info-card::before { content: &#039;&#039;; position: abs...&quot;</p> <p><b>New page</b></p><div>/* Monster Information Cards */<br /> .monster-info-grid {<br /> display: grid;<br /> grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));<br /> gap: 2rem;<br /> margin-bottom: 2rem;<br /> }<br /> <br /> .monster-info-card {<br /> background: var(--bg-1);<br /> border-radius: 12px;<br /> padding: 1.5rem;<br /> box-shadow: 0 4px 20px var(--shadow-soft);<br /> border: 1px solid var(--border);<br /> transition: all 0.3s ease;<br /> position: relative;<br /> overflow: hidden;<br /> }<br /> <br /> .monster-info-card::before {<br /> content: &#039;&#039;;<br /> position: absolute;<br /> top: 0;<br /> left: 0;<br /> right: 0;<br /> height: 4px;<br /> background: linear-gradient(135deg, var(--heading-gradient-start), var(--heading-gradient-end));<br /> }<br /> <br /> .monster-info-card:hover {<br /> transform: translateY(-4px);<br /> box-shadow: 0 8px 30px var(--shadow-medium);<br /> }<br /> <br /> .monster-card-header {<br /> display: flex;<br /> justify-content: space-between;<br /> align-items: center;<br /> margin-bottom: 1rem;<br /> }<br /> <br /> .monster-card-header h4 {<br /> margin: 0;<br /> font-size: 1.3rem;<br /> font-weight: 700;<br /> color: var(--heading);<br /> }<br /> <br /> .monster-level-badge {<br /> background: var(--primary);<br /> color: var(--text-strong);<br /> padding: 0.25rem 0.75rem;<br /> border-radius: 15px;<br /> font-weight: 600;<br /> font-size: 0.9rem;<br /> }<br /> <br /> .monster-stats-details {<br /> display: flex;<br /> flex-direction: column;<br /> gap: 1rem;<br /> }<br /> <br /> .monster-stat-info {<br /> display: flex;<br /> justify-content: space-between;<br /> align-items: center;<br /> padding: 0.5rem 0;<br /> border-bottom: 1px solid var(--border);<br /> }<br /> <br /> .monster-stat-info:last-child {<br /> border-bottom: none;<br /> }<br /> <br /> .monster-stat-label {<br /> font-weight: 600;<br /> color: var(--text-muted);<br /> font-size: 0.9rem;<br /> }<br /> <br /> .monster-stat-value {<br /> font-weight: 700;<br /> color: var(--heading);<br /> text-align: right;<br /> }<br /> <br /> .monster-rewards-section {<br /> background: var(--bg-1);<br /> border-radius: 8px;<br /> padding: 1rem;<br /> margin-top: 1rem;<br /> }<br /> <br /> .monster-reward-item {<br /> display: flex;<br /> justify-content: space-between;<br /> align-items: center;<br /> padding: 0.25rem 0;<br /> }<br /> <br /> .monster-reward-label {<br /> font-weight: 600;<br /> color: var(--text-muted);<br /> font-size: 0.9rem;<br /> }<br /> <br /> .monster-reward-value {<br /> font-weight: 700;<br /> color: var(--positive);<br /> text-align: right;<br /> }<br /> <br /> <br /> <br /> /*---------------------------------------------------------------------------*/<br /> /* ========================================<br /> RESPONSIVE DESIGN<br /> ======================================== */<br /> <br /> /* Desktop médio: 992px - 1199px */<br /> @media (max-width: 1199px) {<br /> .monster-info-grid {<br /> grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));<br /> gap: 1.8rem;<br /> margin-bottom: 1.8rem;<br /> }<br /> <br /> .monster-info-card {<br /> padding: 1.3rem;<br /> border-radius: 10px;<br /> }<br /> <br /> .monster-card-header {<br /> margin-bottom: 0.9rem;<br /> }<br /> <br /> .monster-card-header h4 {<br /> font-size: 1.2rem;<br /> }<br /> <br /> .monster-level-badge {<br /> padding: 0.2rem 0.7rem;<br /> border-radius: 12px;<br /> font-size: 0.85rem;<br /> }<br /> <br /> .monster-stats-details {<br /> gap: 0.9rem;<br /> }<br /> <br /> .monster-stat-info {<br /> padding: 0.45rem 0;<br /> }<br /> <br /> .monster-stat-label {<br /> font-size: 0.85rem;<br /> }<br /> <br /> .monster-rewards-section {<br /> padding: 0.9rem;<br /> border-radius: 7px;<br /> margin-top: 0.9rem;<br /> }<br /> <br /> .monster-reward-label {<br /> font-size: 0.85rem;<br /> }<br /> }<br /> <br /> /* Desktop pequeno: 768px - 991px */<br /> @media (max-width: 991px) {<br /> .monster-info-grid {<br /> grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));<br /> gap: 1.5rem;<br /> margin-bottom: 1.5rem;<br /> }<br /> <br /> .monster-info-card {<br /> padding: 1.2rem;<br /> border-radius: 8px;<br /> }<br /> <br /> .monster-info-card:hover {<br /> transform: translateY(-2px);<br /> }<br /> <br /> .monster-card-header {<br /> margin-bottom: 0.8rem;<br /> }<br /> <br /> .monster-card-header h4 {<br /> font-size: 1.1rem;<br /> }<br /> <br /> .monster-level-badge {<br /> padding: 0.2rem 0.6rem;<br /> border-radius: 10px;<br /> font-size: 0.8rem;<br /> }<br /> <br /> .monster-stats-details {<br /> gap: 0.8rem;<br /> }<br /> <br /> .monster-stat-info {<br /> padding: 0.4rem 0;<br /> }<br /> <br /> .monster-stat-label {<br /> font-size: 0.8rem;<br /> }<br /> <br /> .monster-rewards-section {<br /> padding: 0.8rem;<br /> border-radius: 6px;<br /> margin-top: 0.8rem;<br /> }<br /> <br /> .monster-reward-label {<br /> font-size: 0.8rem;<br /> }<br /> }<br /> <br /> /* Tablet: 576px - 767px */<br /> @media (max-width: 767px) {<br /> .monster-info-grid {<br /> grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));<br /> gap: 1.2rem;<br /> margin-bottom: 1.2rem;<br /> }<br /> <br /> .monster-info-card {<br /> padding: 1rem;<br /> border-radius: 6px;<br /> }<br /> <br /> .monster-info-card:hover {<br /> transform: translateY(-1px);<br /> }<br /> <br /> .monster-card-header {<br /> margin-bottom: 0.7rem;<br /> flex-direction: column;<br /> align-items: flex-start;<br /> gap: 0.5rem;<br /> }<br /> <br /> .monster-card-header h4 {<br /> font-size: 1rem;<br /> }<br /> <br /> .monster-level-badge {<br /> padding: 0.15rem 0.5rem;<br /> border-radius: 8px;<br /> font-size: 0.75rem;<br /> align-self: flex-end;<br /> }<br /> <br /> .monster-stats-details {<br /> gap: 0.7rem;<br /> }<br /> <br /> .monster-stat-info {<br /> padding: 0.35rem 0;<br /> }<br /> <br /> .monster-stat-label {<br /> font-size: 0.75rem;<br /> }<br /> <br /> .monster-stat-value {<br /> font-size: 0.9rem;<br /> }<br /> <br /> .monster-rewards-section {<br /> padding: 0.7rem;<br /> border-radius: 5px;<br /> margin-top: 0.7rem;<br /> }<br /> <br /> .monster-reward-label {<br /> font-size: 0.75rem;<br /> }<br /> <br /> .monster-reward-value {<br /> font-size: 0.9rem;<br /> }<br /> }<br /> <br /> /* Mobile: até 575px */<br /> @media (max-width: 575px) {<br /> .monster-info-grid {<br /> grid-template-columns: 1fr;<br /> gap: 1rem;<br /> margin-bottom: 1rem;<br /> }<br /> <br /> .monster-info-card {<br /> padding: 0.8rem;<br /> border-radius: 4px;<br /> }<br /> <br /> .monster-info-card:hover {<br /> transform: none;<br /> }<br /> <br /> .monster-card-header {<br /> margin-bottom: 0.6rem;<br /> flex-direction: column;<br /> align-items: flex-start;<br /> gap: 0.4rem;<br /> }<br /> <br /> .monster-card-header h4 {<br /> font-size: 0.9rem;<br /> }<br /> <br /> .monster-level-badge {<br /> padding: 0.1rem 0.4rem;<br /> border-radius: 6px;<br /> font-size: 0.7rem;<br /> align-self: flex-end;<br /> }<br /> <br /> .monster-stats-details {<br /> gap: 0.6rem;<br /> }<br /> <br /> .monster-stat-info {<br /> padding: 0.3rem 0;<br /> flex-direction: column;<br /> align-items: flex-start;<br /> gap: 0.2rem;<br /> }<br /> <br /> .monster-stat-label {<br /> font-size: 0.7rem;<br /> }<br /> <br /> .monster-stat-value {<br /> font-size: 0.85rem;<br /> text-align: left;<br /> }<br /> <br /> .monster-rewards-section {<br /> padding: 0.6rem;<br /> border-radius: 4px;<br /> margin-top: 0.6rem;<br /> }<br /> <br /> .monster-reward-item {<br /> flex-direction: column;<br /> align-items: flex-start;<br /> gap: 0.2rem;<br /> padding: 0.2rem 0;<br /> }<br /> <br /> .monster-reward-label {<br /> font-size: 0.7rem;<br /> }<br /> <br /> .monster-reward-value {<br /> font-size: 0.85rem;<br /> text-align: left;<br /> }<br /> }</div>

Noorisei