MediaWiki:Common.css: Difference between revisions
From Tibia Idle wiki
No edit summary Tag: Reverted |
No edit summary Tag: Reverted |
||
Line 78: | Line 78: | ||
min-width: 100px; | min-width: 100px; | ||
white-space: nowrap; | white-space: nowrap; | ||
} | |||
} | |||
/* Nowoczesna kafelkowa nawigacja na stronę główną wiki */ | |||
.mainpage-tiles { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 24px; | |||
justify-content: center; | |||
max-width: 680px; | |||
margin: 32px auto 0 auto; | |||
} | |||
.mainpage-tile { | |||
flex: 1 1 260px; | |||
max-width: 320px; | |||
min-width: 180px; | |||
background: #fff; | |||
border-radius: 18px; | |||
box-shadow: 0 8px 24px rgba(50,50,93,.08), 0 1.5px 6px rgba(49,130,206,.09); | |||
padding: 24px 12px 16px 12px; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
text-align: center; | |||
transition: box-shadow 0.2s, transform 0.12s; | |||
border: 1px solid #eff1f7; | |||
} | |||
.mainpage-tile:hover { | |||
box-shadow: 0 8px 32px rgba(49,130,206,.15), 0 2px 8px rgba(49,130,206,.12); | |||
transform: translateY(-3px) scale(1.02); | |||
border: 1.5px solid #b3d5fa; | |||
} | |||
.mainpage-tile img { | |||
margin-bottom: 12px; | |||
margin-top: 4px; | |||
max-width: 120px; | |||
height: auto; | |||
} | |||
.mainpage-tile-title { | |||
font-size: 1.17em; | |||
font-weight: 700; | |||
color: #23272e; | |||
margin-bottom: 2px; | |||
} | |||
.mainpage-tile-desc { | |||
font-size: .99em; | |||
color: #595e66; | |||
} | |||
@media (max-width: 650px) { | |||
.mainpage-tiles { | |||
gap: 12px; | |||
} | |||
.mainpage-tile { | |||
min-width: 135px; | |||
padding: 14px 4px 10px 4px; | |||
} | |||
.mainpage-tile img { | |||
max-width: 80px; | |||
} | } | ||
} | } |
Revision as of 14:09, 26 June 2025
/* RESPONSYWNA, NOWOCZESNA, JASNA TABELA WIKI */ /* Każdą tabelę opakowujemy w przewijalny kontener */ .wikitable { background: #fff !important; color: #23272e !important; border-radius: 12px !important; border: none !important; box-shadow: 0 4px 24px rgba(0,0,0,0.07); margin: 32px auto !important; min-width: 600px; /* tabele nie "złamie" na maleńkiej szerokości */ width: 100% !important; /* usuwamy overflow:hidden! */ } /* Dodajemy przewijalność poziomą tylko na małym ekranie */ @media (max-width: 800px) { .wikitable { min-width: 500px; width: 100vw !important; /* umożliwia przewijanie w bok */ display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* Styl komórek */ .wikitable th, .wikitable td { padding: 12px 16px !important; border: none !important; vertical-align: middle !important; white-space: nowrap; /* nie łamie tekstu w nagłówkach */ } /* Styl nagłówków */ .wikitable th { background: #f7fafc !important; color: #3182ce !important; font-weight: 700 !important; letter-spacing: 0.02em; border-bottom: 2px solid #3182ce !important; } /* Co drugi wiersz lekko szary */ .wikitable tr:nth-child(even) { background: #f5f6fa !important; } .wikitable tr:nth-child(odd) { background: #fff !important; } /* Efekt hover */ .wikitable tr:hover { background: #e3eafc !important; } /* Linki bez podkreślenia */ .wikitable a, .wikitable a:visited { color: #000000 !important; text-decoration: none !important; transition: color 0.2s; } .wikitable a:hover { color: #001adb !important; text-decoration: none !important; } /* Zaokrąglenie rogów tylko na rogach tabeli */ .wikitable th:first-child { border-top-left-radius: 12px !important; } .wikitable th:last-child { border-top-right-radius: 12px !important; } .wikitable tr:last-child td:first-child { border-bottom-left-radius: 12px !important; } .wikitable tr:last-child td:last-child { border-bottom-right-radius: 12px !important; } /* Na mobile — pozwól przewijanie w bok, nie przycinaj! */ @media (max-width: 800px) { .wikitable th, .wikitable td { min-width: 100px; white-space: nowrap; } } /* Nowoczesna kafelkowa nawigacja na stronę główną wiki */ .mainpage-tiles { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; max-width: 680px; margin: 32px auto 0 auto; } .mainpage-tile { flex: 1 1 260px; max-width: 320px; min-width: 180px; background: #fff; border-radius: 18px; box-shadow: 0 8px 24px rgba(50,50,93,.08), 0 1.5px 6px rgba(49,130,206,.09); padding: 24px 12px 16px 12px; display: flex; flex-direction: column; align-items: center; text-align: center; transition: box-shadow 0.2s, transform 0.12s; border: 1px solid #eff1f7; } .mainpage-tile:hover { box-shadow: 0 8px 32px rgba(49,130,206,.15), 0 2px 8px rgba(49,130,206,.12); transform: translateY(-3px) scale(1.02); border: 1.5px solid #b3d5fa; } .mainpage-tile img { margin-bottom: 12px; margin-top: 4px; max-width: 120px; height: auto; } .mainpage-tile-title { font-size: 1.17em; font-weight: 700; color: #23272e; margin-bottom: 2px; } .mainpage-tile-desc { font-size: .99em; color: #595e66; } @media (max-width: 650px) { .mainpage-tiles { gap: 12px; } .mainpage-tile { min-width: 135px; padding: 14px 4px 10px 4px; } .mainpage-tile img { max-width: 80px; } }