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;
}
}