MediaWiki:Common.css: Difference between revisions
From Tibia Idle wiki
No edit summary Tag: Manual revert |
No edit summary Tag: Reverted |
||
Line 66: | Line 66: | ||
background: #f7e6e6; | background: #f7e6e6; | ||
border-radius: 3px; | border-radius: 3px; | ||
} | |||
/* Kontener kart */ | |||
.responsive-cards { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 22px; | |||
justify-content: center; | |||
padding: 18px; | |||
box-sizing: border-box; | |||
} | |||
/* Pojedyncza karta */ | |||
.responsive-card { | |||
background: #fff; | |||
border-radius: 18px; | |||
box-shadow: 0 2px 18px rgba(45,45,75,0.12); | |||
width: 220px; | |||
max-width: 94vw; | |||
min-height: 195px; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
padding: 20px 16px 18px 16px; | |||
text-align: center; | |||
transition: transform 0.14s, box-shadow 0.14s; | |||
position: relative; | |||
cursor: pointer; | |||
overflow: hidden; | |||
} | |||
.responsive-card:hover { | |||
transform: translateY(-5px) scale(1.03); | |||
box-shadow: 0 8px 28px rgba(45,45,75,0.18); | |||
z-index: 2; | |||
} | |||
/* Obrazki w kartach */ | |||
.responsive-card img { | |||
margin-bottom: 16px; | |||
border-radius: 12px; | |||
background: #f8f8fc; | |||
box-shadow: 0 2px 10px rgba(45,45,75,0.08); | |||
max-width: 100%; | |||
height: auto; | |||
} | |||
/* Tytuł karty */ | |||
.responsive-card-title { | |||
font-size: 1.11rem; | |||
font-weight: 700; | |||
margin-bottom: 7px; | |||
letter-spacing: 0.01em; | |||
color: #2d213c; | |||
word-break: break-word; | |||
} | |||
/* Opis */ | |||
.responsive-card-desc { | |||
font-size: 0.98rem; | |||
color: #655a75; | |||
font-weight: 400; | |||
margin-top: 0; | |||
line-height: 1.4; | |||
} | |||
/* Specjalny kolor dla tytułu Game Monsters, jeśli w kodzie HTML */ | |||
.responsive-card-title[style] { | |||
color: inherit !important; | |||
} | |||
/* Responsywność */ | |||
@media (max-width: 900px) { | |||
.responsive-cards { | |||
gap: 16px; | |||
} | |||
.responsive-card { | |||
width: 48vw; | |||
min-width: 180px; | |||
padding: 16px 8px; | |||
} | |||
} | |||
@media (max-width: 600px) { | |||
.responsive-card { | |||
width: 95vw; | |||
max-width: 98vw; | |||
min-width: 0; | |||
padding: 12px 5px; | |||
} | |||
.responsive-cards { | |||
gap: 10px; | |||
padding: 8px; | |||
} | |||
} | } |
Revision as of 13:06, 26 June 2025
/* NOWOCZESNA, atrakcyjna tabela */ .wikitable, .wikitable th, .wikitable td { border: none !important; background: none; } .wikitable { border-radius: 18px !important; box-shadow: 0 8px 40px 0 rgba(30, 42, 73, 0.16), 0 1.5px 6px 0 rgba(30, 42, 73, 0.03); overflow: hidden; background: #f6f8fa; font-size: 16px; margin: 40px auto; width: 96%; } .wikitable th { font-weight: 700; letter-spacing: 0.04em; padding: 16px 18px; border-bottom: none; text-shadow: 0 2px 4px rgba(0,0,0,0.07); font-size: 17px; } .wikitable td { background: #fff; padding: 15px 18px; transition: background 0.18s, box-shadow 0.18s; font-size: 16px; } .wikitable tr { transition: background 0.18s; } .wikitable tr:nth-child(even) td { background: #f0f4f8; } .wikitable tr:hover td { background: #e3f0fd !important; box-shadow: 0 2px 10px rgba(50,130,250,0.07); } .wikitable img { width: 40px; height: 40px; padding: 3px; margin-right: 3px; } .wikitable a { color: #1976d2; font-weight: 600; text-decoration: none; transition: color 0.19s; border-bottom: 1.5px solid rgba(30, 80, 200, 0.07); padding-bottom: 2px; } .wikitable a:hover { color: #e53935; border-bottom: 1.5px solid #e53935; background: #f7e6e6; border-radius: 3px; } /* Kontener kart */ .responsive-cards { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; padding: 18px; box-sizing: border-box; } /* Pojedyncza karta */ .responsive-card { background: #fff; border-radius: 18px; box-shadow: 0 2px 18px rgba(45,45,75,0.12); width: 220px; max-width: 94vw; min-height: 195px; display: flex; flex-direction: column; align-items: center; padding: 20px 16px 18px 16px; text-align: center; transition: transform 0.14s, box-shadow 0.14s; position: relative; cursor: pointer; overflow: hidden; } .responsive-card:hover { transform: translateY(-5px) scale(1.03); box-shadow: 0 8px 28px rgba(45,45,75,0.18); z-index: 2; } /* Obrazki w kartach */ .responsive-card img { margin-bottom: 16px; border-radius: 12px; background: #f8f8fc; box-shadow: 0 2px 10px rgba(45,45,75,0.08); max-width: 100%; height: auto; } /* Tytuł karty */ .responsive-card-title { font-size: 1.11rem; font-weight: 700; margin-bottom: 7px; letter-spacing: 0.01em; color: #2d213c; word-break: break-word; } /* Opis */ .responsive-card-desc { font-size: 0.98rem; color: #655a75; font-weight: 400; margin-top: 0; line-height: 1.4; } /* Specjalny kolor dla tytułu Game Monsters, jeśli w kodzie HTML */ .responsive-card-title[style] { color: inherit !important; } /* Responsywność */ @media (max-width: 900px) { .responsive-cards { gap: 16px; } .responsive-card { width: 48vw; min-width: 180px; padding: 16px 8px; } } @media (max-width: 600px) { .responsive-card { width: 95vw; max-width: 98vw; min-width: 0; padding: 12px 5px; } .responsive-cards { gap: 10px; padding: 8px; } }