MediaWiki:Common.css: Difference between revisions
From Tibia Idle wiki
No edit summary Tag: Reverted |
No edit summary Tag: Reverted |
||
Line 90: | Line 90: | ||
/* Nowoczesna kafelkowa | |||
.mainpage-tiles { | |||
/* Nowoczesna kafelkowa tabela na stronę główną wiki */ | |||
table.mainpage-tiles { | |||
border-collapse: separate !important; | |||
border-spacing: 20px 18px !important; | |||
margin: 30px auto 0 auto; | |||
background: transparent !important; | |||
} | } | ||
.mainpage-tile { | .mainpage-tile { | ||
background: #fff; | background: #fff; | ||
border-radius: 18px; | border-radius: 18px; | ||
box-shadow: 0 8px 24px rgba(50,50,93,.08), 0 1.5px 6px rgba(49,130,206,.09); | box-shadow: 0 8px 24px rgba(50,50,93,.08), 0 1.5px 6px rgba(49,130,206,.09); | ||
padding: | padding: 18px 10px 10px 10px; | ||
min-width: 220px; | |||
max-width: 320px; | |||
text-align: center; | text-align: center; | ||
font-size: 1.07em; | |||
border: 1px solid #f0f1f7; | |||
transition: box-shadow 0.2s, transform 0.12s; | transition: box-shadow 0.2s, transform 0.12s; | ||
vertical-align: top; | |||
} | } | ||
.mainpage-tile:hover { | .mainpage-tile:hover { | ||
box-shadow: 0 8px 32px rgba(49,130,206,. | box-shadow: 0 8px 32px rgba(49,130,206,.13), 0 2px 8px rgba(49,130,206,.11); | ||
transform: translateY(-3px) scale(1. | transform: translateY(-3px) scale(1.015); | ||
border: 1.5px solid #b3d5fa; | border: 1.5px solid #b3d5fa; | ||
} | } | ||
Line 122: | Line 124: | ||
margin-bottom: 12px; | margin-bottom: 12px; | ||
margin-top: 4px; | margin-top: 4px; | ||
max-width: | max-width: 96px; | ||
height: auto; | height: auto; | ||
} | } | ||
.mainpage-tile-desc { | .mainpage-tile-desc { | ||
font-size: . | display: block; | ||
font-size: .96em; | |||
color: #595e66; | color: #595e66; | ||
margin-top: 3px; | |||
} | } | ||
@media (max-width: | @media (max-width: 800px) { | ||
.mainpage-tiles { | table.mainpage-tiles { | ||
border-spacing: 8px 10px !important; | |||
} | } | ||
.mainpage-tile { | .mainpage-tile { | ||
min-width: | min-width: 125px; | ||
padding: | padding: 12px 3px 7px 3px; | ||
} | } | ||
.mainpage-tile img { | .mainpage-tile img { | ||
max-width: | max-width: 70px; | ||
} | } | ||
} | } |
Revision as of 14:12, 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 tabela na stronę główną wiki */ table.mainpage-tiles { border-collapse: separate !important; border-spacing: 20px 18px !important; margin: 30px auto 0 auto; background: transparent !important; } .mainpage-tile { 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: 18px 10px 10px 10px; min-width: 220px; max-width: 320px; text-align: center; font-size: 1.07em; border: 1px solid #f0f1f7; transition: box-shadow 0.2s, transform 0.12s; vertical-align: top; } .mainpage-tile:hover { box-shadow: 0 8px 32px rgba(49,130,206,.13), 0 2px 8px rgba(49,130,206,.11); transform: translateY(-3px) scale(1.015); border: 1.5px solid #b3d5fa; } .mainpage-tile img { margin-bottom: 12px; margin-top: 4px; max-width: 96px; height: auto; } .mainpage-tile-desc { display: block; font-size: .96em; color: #595e66; margin-top: 3px; } @media (max-width: 800px) { table.mainpage-tiles { border-spacing: 8px 10px !important; } .mainpage-tile { min-width: 125px; padding: 12px 3px 7px 3px; } .mainpage-tile img { max-width: 70px; } }