/* ============================================================================
responsive.css - mobiele weergave van tournamentorganizer.live
Wordt na site.css ingeladen, zodat de regels hier de basisstijl overschrijven.
Wat dit bestand doet:
1. De pagina vult op een gsm de volledige schermbreedte (geen verspilde
zijmarges, geen horizontaal scrollen van de hele pagina).
2. De vaste menubalk + breadcrumbbalk overlappen de inhoud niet meer.
3. Brede tabellen blijven bruikbaar: minder belangrijke kolommen worden
verborgen, de rest kan binnen de tabel horizontaal scrollen.
Kolommen verbergen - zet de klasse op zowel | als de bijhorende | :
.hide-mobile verborgen onder 768px (bestaande klasse, blijft werken)
.hide-sm verborgen onder 576px (enkel op een smalle telefoon)
.hide-md verborgen onder 768px (zelfde als .hide-mobile)
.hide-lg verborgen onder 992px (ook op tablet)
.only-mobile enkel zichtbaar onder 768px
Breakpoints zijn die van Bootstrap 5.
========================================================================== */
/* ---------------------------------------------------------------------------
1. KOLOMMEN VERBERGEN
--------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
.hide-sm,
th.hide-sm,
td.hide-sm {
display: none !important;
}
}
@media (max-width: 767.98px) {
.hide-md,
th.hide-md,
td.hide-md,
.hide-mobile,
th.hide-mobile,
td.hide-mobile {
display: none !important;
}
}
@media (max-width: 991.98px) {
.hide-lg,
th.hide-lg,
td.hide-lg {
display: none !important;
}
}
/* Enkel op gsm tonen (bv. een samengevoegde kolom die twee kolommen vervangt). */
.only-mobile {
display: none !important;
}
@media (max-width: 767.98px) {
th.only-mobile,
td.only-mobile {
display: table-cell !important;
}
div.only-mobile,
span.only-mobile,
p.only-mobile {
display: block !important;
}
}
/* ---------------------------------------------------------------------------
2. VOLLEDIGE SCHERMBREEDTE BENUTTEN
--------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
html,
body {
max-width: 100%;
overflow-x: hidden;
}
/* Containers krijgen smallere zijmarges: meer plaats voor de inhoud. */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg {
max-width: 100% !important;
padding-left: 8px !important;
padding-right: 8px !important;
}
/* Rijen mogen niet buiten het scherm steken door hun negatieve marges. */
.row {
margin-left: -8px;
margin-right: -8px;
}
.row > * {
padding-left: 8px;
padding-right: 8px;
}
/* Eigen tabelmarges uit site.css platleggen. */
.eigentabel {
margin-left: 0 !important;
margin-right: 0 !important;
margin-top: 12px !important;
}
/* Geen enkel blok mag breder zijn dan het scherm. */
img,
iframe,
video,
embed {
max-width: 100%;
height: auto;
}
/* Vlaggetjes hebben een vaste kleine maat en mogen niet meeschalen. */
img[width="20"],
img[width="24"],
img[width="26"],
img[width="30"],
img[width="40"] {
max-width: none;
height: auto;
}
}
/* Het Rectusoft-logo in de navbalk (enkel height="35" opgegeven, geen width)
werd door de regel hierboven op elk scherm teruggeschaald naar zijn volle
bronformaat (486x117px). Deze regel staat los van de media query en wint
dankzij hogere specificiteit ook op mobiel van de algemene "img"-regel. */
.navbar-brand img {
max-width: none;
width: auto;
height: 35px;
}
@media (max-width: 767.98px) {
/* Lange woorden (teamnamen, e-mailadressen) breken af i.p.v. te overlopen. */
h1, h2, h3, h4, h5, h6, p, td, th, li, a {
overflow-wrap: break-word;
word-break: break-word;
}
}
/* ---------------------------------------------------------------------------
3. VASTE MENUBALK EN BREADCRUMBS
Hoofdmenu staat fixed-top. De breadcrumbbalk (.second) staat daaronder.
Op gsm moet de inhoud daar netjes onder beginnen, zonder witte gaten.
--------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
/* Uitgeklapt menu mag niet buiten beeld vallen. */
.navbar.fixed-top .navbar-collapse {
max-height: calc(100vh - 56px);
overflow-y: auto;
}
/* Breadcrumbbalk compact en horizontaal scrollbaar: zo valt ze nooit over
twee regels en schuift de inhoud er nooit achter.
margin-top:0 / padding-top:55px komen uit site.css: de achtergrond van
.second tekent al vanaf y=0 door (onder de hoofdnavbalk), zodat er nooit
een kier ontstaat als de hoofdnavbalk een paar pixels hoger/lager is dan
verwacht. min-height houdt daar rekening mee (55px voor de navbalk + de
eigen inhoud van deze balk). */
.navbar.fixed-top.second,
.second {
height: auto;
min-height: 91px;
padding-left: 8px !important;
padding-right: 8px !important;
}
.second .breadcrumb {
flex-wrap: nowrap;
overflow-x: auto;
white-space: nowrap;
margin-bottom: 0;
padding: 6px 0;
font-size: 0.8rem;
-webkit-overflow-scrolling: touch;
}
.second .breadcrumb::-webkit-scrollbar {
display: none;
}
/* Inhoud begint onder menubalk + breadcrumbs. */
.page-content-spacing {
margin-top: 86px;
}
.third h3 {
height: auto;
font-size: 1.1rem;
padding: 6px 0;
}
}
/* ---------------------------------------------------------------------------
4. TABELLEN
--------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
/* Wat na het verbergen van kolommen nog te breed is, scrollt binnen de
tabel - niet over de hele pagina. */
.table-responsive,
div.dataTables_wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table.table,
table.dataTable {
width: 100% !important;
font-size: 0.8rem;
margin-bottom: 0.75rem;
}
/* Compactere cellen: er passen meer kolommen zonder scrollen. */
table.table > :not(caption) > * > *,
table.dataTable > thead > tr > th,
table.dataTable > tbody > tr > td {
padding: 5px 5px;
vertical-align: middle;
}
/* Vaste kolombreedtes uit de HTML zijn voor desktop bedoeld en
veroorzaken op gsm onnodige overflow. */
table.table th[style*="width"],
table.dataTable th[style*="width"] {
width: auto !important;
}
/* Uitzondering op de regel hierboven: de Score-kolommen (Games-pagina)
moeten juist WEL smal blijven op gsm - DataTables zet zelf een
berekende breedte als inline style op de | , waardoor die anders
in de "width: auto"-reset hierboven terechtkomt. Deze selector is
specifieker (extra .score-col klasse) en wint daardoor alsnog. */
table.dataTable th.score-col[style*="width"] {
width: 28px !important;
max-width: 28px !important;
}
/* Kolomkoppen niet laten afbreken over drie regels. */
table.table thead th,
table.dataTable thead th {
white-space: nowrap;
font-size: 0.75rem;
}
/* DataTables-bediening onder elkaar in plaats van geknepen naast elkaar. */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
float: none !important;
text-align: left !important;
width: 100%;
margin-bottom: 6px;
}
.dataTables_wrapper .dataTables_filter input {
width: 100%;
margin-left: 0;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
padding: 4px 8px;
font-size: 0.8rem;
}
div.dataTables_wrapper {
margin-bottom: 1.5rem;
}
}
/* ---------------------------------------------------------------------------
5. TEGELS EN KAARTEN
--------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
.card-box {
padding: 12px 12px 12px;
margin: 6px 0;
/* Marge is hier 6px+6px i.p.v. de 20px+20px van site.css, dus de calc()
die de tegel op de gelijkgetrokken kolomhoogte laat passen moet hier
mee overeenkomen. */
height: calc(100% - 12px);
}
.card-box h1 {
font-size: 1.6rem;
margin-bottom: 0;
}
.card-box h3 {
font-size: 20px;
white-space: normal;
}
.card-box h6 {
font-size: 0.8rem;
margin-bottom: 2px;
}
/* Het grote achtergrondicoon neemt te veel plaats in op een klein scherm. */
.card-box .icon {
font-size: 40px;
}
.card-box:hover .icon i {
/* Zelfde grootte als niet-hover (zie hierboven) en geen transition:
op gsm bestaat "hover" niet echt, een tik zou anders het icoon
kort laten "animeren" en soms vast laten staan. */
font-size: 40px;
transition: none;
}
.card {
margin-bottom: 16px;
}
.card .card-block {
padding: 14px;
}
.jumbotron {
height: 140px;
border-radius: 10px;
}
.info-card-img {
height: 80px;
}
}
/* ---------------------------------------------------------------------------
6. MYTEAMS / TEAM DETAIL - blokken per team
Deze klassen werden in de pagina's al gebruikt maar nergens gedefinieerd.
--------------------------------------------------------------------------- */
.team-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
padding: 16px;
margin-bottom: 24px;
}
.stat-card {
min-height: 92px;
}
/* Sectietitel boven een tabel (Playerdetails / Groupdetails / Gamesdetails). */
.mobile-section-title {
margin-top: 16px;
margin-bottom: 6px;
font-size: 1.05rem;
font-weight: 600;
}
@media (max-width: 767.98px) {
.team-card {
padding: 10px;
margin-bottom: 16px;
border-radius: 10px;
}
.team-header {
flex-wrap: wrap;
gap: 6px;
}
.team-header h2 {
font-size: 1.25rem;
}
.mobile-section-title {
margin-top: 12px;
font-size: 0.95rem;
}
.heart-symbol {
font-size: 1.5rem;
}
}
/* ---------------------------------------------------------------------------
7. FORMULIEREN, KNOPPEN, MODALS EN OVERIGE
--------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
/* iOS zoomt automatisch in bij velden kleiner dan 16px. */
input,
select,
textarea,
.form-control,
.form-select {
font-size: 16px;
}
/* Knoppenrijen wikkelen in plaats van te knijpen. */
.btn-toolbar,
.d-flex.justify-content-between,
.d-flex.justify-content-end {
flex-wrap: wrap;
gap: 8px;
}
.modal-dialog {
margin: 8px;
max-width: calc(100% - 16px);
}
.modal-body {
max-height: 70vh;
overflow-y: auto;
}
#cookieConsentdiv {
left: 0;
right: 0;
width: auto;
max-width: 100%;
transform: none;
padding: 14px 16px;
border-radius: 16px 16px 0 0;
}
/* Terug-naar-boven knop kleiner en uit de weg van de duim. */
#scrollTopBtn {
width: 38px;
height: 38px;
font-size: 15px;
bottom: 12px;
right: 12px;
}
footer.footer {
font-size: 0.8rem;
text-align: center;
}
}
|