MediaWiki:Common.css
From zunagi
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* CSS placed here will be applied to all skins */
/* ==========================================================
GLOBAL PAGE LAYOUT
========================================================== */
/* ==========================================================
1. ALL USERS — ALL PAGES
========================================================== */
/*
* Hide the left navigation sidebar.
*/
#mw-navigation {
display: none !important;
}
.zunagi-back-link {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 11px;
background-color: #f3f8f1;
border: 1px solid #cfe0c8;
border-radius: 8px;
color: #3f6f2a !important;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none !important;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
transform 0.2s ease;
}
.zunagi-back-link:hover {
background-color: #e7f2e2;
border-color: #a9c89d;
color: #315822 !important;
text-decoration: none !important;
transform: translateX(-2px);
}
.zunagi-back-link-top {
display: inline-block;
font-size: 0.9em;
margin: 0;
}
.zunagi-back-link-top a {
text-decoration: none;
}
.zunagi-back-link-top a:hover {
text-decoration: underline;
}
/*
* Expand the main Medik column into the space previously
* occupied by the sidebar.
*/
#mw-navigation + div {
flex: 0 0 100% !important;
max-width: 100% !important;
width: 100% !important;
}
/*
* Constrain normal page content so it does not stretch
* across very wide desktop screens.
*
* The green site header remains full width.
*/
#content {
width: 100% !important;
max-width: 1500px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 24px !important;
padding-right: 24px !important;
box-sizing: border-box;
}
/* ==========================================================
2. ANONYMOUS USERS — ALL PAGES
========================================================== */
/*
* Hide the Page / Discussion / Author Dashboard /
* Actions / Tools sidebar entirely for logged-out users.
*
* This was previously two separate rules (hiding the inner
* flex wrapper, then zeroing aside's own padding/margin) -
* that left a ~18px gap behind because <aside> itself still
* had display:inline-block, which keeps an element
* participating in surrounding line-box layout even at
* height:0. Hiding <aside> itself entirely removes it from
* layout, closing that gap.
*/
body:has(a[href*="Special:UserLogin"]) aside {
display: none !important;
}
/* ==========================================================
3. ALL USERS — MAIN PAGE ONLY
========================================================== */
/*
* Hide the normal header search on the Main Page.
*/
body.page-Main_Page #p-search,
body.page-Main_Page .search,
body.page-Main_Page .mw-search,
body.page-Main_Page .search-box {
display: none !important;
}
/* ==========================================================
HIDE HAMBURGER MENU ICON — SMALL VIEWPORTS / STANDALONE
(its target, #mw-navigation, is already hidden site-wide,
so the icon has nothing left to toggle)
========================================================== */
@media (max-width: 600px), (display-mode: standalone) {
.mw-hamb {
display: none !important;
}
}
/* ==========================================================
LEFT PADDING FOR LOGO — SMALL VIEWPORTS / STANDALONE
========================================================== */
@media (max-width: 600px), (display-mode: standalone) {
#p-logo {
margin-left: 12px !important;
}
}
/* ==========================================================
4. RESPONSIVE GLOBAL CONTENT WIDTH
========================================================== */
/* Tablet */
@media (max-width: 900px) {
#content {
padding-left: 18px !important;
padding-right: 18px !important;
}
}
/* Mobile */
@media (max-width: 600px) {
#content {
padding-left: 12px !important;
padding-right: 12px !important;
}
}
/*
* Hide the standard MediaWiki page title on selected pages.
*/
body:has(.zunagi-hide-heading) .firstHeading {
display: none !important;
}
/* ==========================================================
MAIN PAGE
========================================================== */
/*
* Main Page deliberately overrides the normal centred
* content container above.
*/
.page-Main_Page .firstHeading {
display: none;
}
.page-Main_Page #content {
width: 100% !important;
max-width: none !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
max-height: none !important;
display: block;
}
.page-Main_Page #mw-main-container .py-md-3 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.page-Main_Page .zunagi-home {
margin-top: 22vh;
text-align: center;
overflow: visible !important;
}
/* ==========================================================
MAIN PAGE LOGO
========================================================== */
.page-Main_Page .zunagi-home figure {
display: block;
width: fit-content;
margin: 0 auto;
padding: 0;
border: 0;
background: none;
line-height: 0;
}
.page-Main_Page .zunagi-home figure img {
display: block;
margin: 0 auto;
max-width: 190px;
height: auto;
}
.page-Main_Page .zunagi-home figure figcaption {
display: none;
}
/*
* Remove empty paragraphs generated around the logo.
*/
.page-Main_Page .zunagi-home > p:empty {
display: none;
margin: 0;
padding: 0;
}
/* ==========================================================
MAIN PAGE SEARCH
========================================================== */
.page-Main_Page .zunagi-search {
width: 100%;
max-width: 460px;
margin: 22px auto 25px;
text-align: center;
overflow: visible !important;
}
.page-Main_Page .zunagi-search-wrapper {
position: relative;
width: min(380px, calc(100vw - 40px));
max-width: 380px;
margin: 0 auto;
overflow: visible !important;
}
.page-Main_Page .zunagi-search-suggestions {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 9999;
width: 100%;
max-height: none;
overflow: visible;
box-sizing: border-box;
text-align: left;
background: #ffffff;
border: 1px solid #a2a9b1;
box-shadow:
0 5px 14px rgba(0, 0, 0, 0.16);
}
.page-Main_Page .zunagi-search-suggestions.is-open {
display: block;
}
.page-Main_Page .zunagi-search-suggestion {
display: block;
padding: 10px 12px;
color: #202122;
background: #ffffff;
border-bottom: 1px solid #eaecf0;
text-decoration: none;
}
.page-Main_Page .zunagi-search-suggestion:last-child {
border-bottom: 0;
}
.page-Main_Page .zunagi-search-suggestion:hover,
.page-Main_Page .zunagi-search-suggestion:focus,
.page-Main_Page .zunagi-search-suggestion.is-selected {
background: #eef5c8;
text-decoration: none;
}
.page-Main_Page .zunagi-search-suggestion-title {
display: block;
font-weight: 600;
}
.page-Main_Page .zunagi-search-suggestion-description {
display: block;
margin-top: 3px;
overflow: hidden;
color: #54595d;
font-size: 13px;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
/*
* Allow autocomplete to extend beyond MediaWiki containers.
*/
.page-Main_Page #bodyContent,
.page-Main_Page #mw-content-text,
.page-Main_Page .mw-parser-output,
.page-Main_Page .zunagi-home {
overflow: visible !important;
}
/* ==========================================================
MOBILE MAIN PAGE
========================================================== */
@media screen and (max-width: 600px) {
.page-Main_Page #content {
min-height: calc(100vh - 60px);
}
.page-Main_Page .zunagi-home {
margin-top: 80px;
}
.page-Main_Page .zunagi-home figure img {
max-width: 170px;
height: auto;
}
.page-Main_Page .zunagi-search {
width: 100%;
max-width: 100%;
margin: 18px auto 25px;
padding: 0 20px;
box-sizing: border-box;
}
.page-Main_Page .zunagi-search-wrapper {
width: 100%;
max-width: 360px;
margin: 0 auto;
box-sizing: border-box;
}
.page-Main_Page #zunagi-search-form {
width: 100%;
}
.page-Main_Page #zunagi-search-form input[type="search"],
.page-Main_Page #zunagi-search-form input[name="search"] {
display: block;
width: 100% !important;
max-width: 100% !important;
min-width: 0;
box-sizing: border-box;
font-size: 16px;
}
.page-Main_Page .zunagi-search-suggestions {
width: 100%;
max-width: 100%;
}
}
@media all and (display-mode: standalone) {
/*
* 1. Hide the search box and login/user-tools button -
* both live inside this shared wrapper, so hiding
* it once covers both without leaving an empty gap
* behind.
*/
#mw-navbar-right {
display: none !important;
}
/*
* 2. Disable all links in the green header bar
* (logo/home link, and anything inside the
* profile dropdown) - visually unchanged,
* just non-clickable.
*/
#mw-navbar a {
pointer-events: none;
cursor: default;
}
/*
* 3. mobile.css reserves margin-bottom: 4em on #mw-navbar
* to make room for #p-search, which lives inside
* #mw-navbar-right and is hidden above. With it gone,
* that reserved 64px is dead space above the content
* wrapper - collapse it.
*/
#mw-navbar {
margin-bottom: 0 !important;
}
}
/* ==========================================================
HIDE TOP NAVBAR SEARCH — BEACH VOLLEYBALL HUB, CALENDAR & CHILD PAGES
(mobile + standalone only; desktop and other pages unaffected)
========================================================== */
@media (max-width: 600px), (display-mode: standalone) {
:is(
body.page-Beach_Volleyball,
body:has(.zunagi-calendar),
body:has(.zunagi-event-page)
) #p-search {
display: none !important;
}
:is(
body.page-Beach_Volleyball,
body:has(.zunagi-calendar),
body:has(.zunagi-event-page)
) #mw-navbar {
margin-bottom: 0 !important;
}
}
/* ==========================================================
FOOTER
========================================================== */
/*
* Sticky footer support for Medik.
*/
html,
body {
min-height: 100%;
}
#mw-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
#mw-main-container {
flex: 1 0 auto;
}
#footer {
flex-shrink: 0;
}
/*
* Hide footer site-wide.
*/
#footer {
display: none !important;
}
/* ==========================================================
ZUNAGI LOCATION
========================================================== */
.zunagi-location {
margin: 14px 0 22px;
}
.zunagi-location-address {
margin: 14px 0;
font-size: 16px;
line-height: 1.6;
}
.zunagi-location-link {
margin-top: 4px;
font-size: 16px;
line-height: 1.5;
}
.zunagi-location-link a {
font-weight: 500;
text-decoration: none;
}
.zunagi-location-link a:hover,
.zunagi-location-link a:focus {
text-decoration: underline;
}
/* ==========================================================
ZUNAGI BEACH VOLLEYBALL CALENDAR
========================================================== */
/* ==========================================================
2. PAST EVENTS
========================================================== */
.zunagi-calendar tbody tr.zunagi-past-event > td {
background-color: #f7f4ee !important;
}
/* ==========================================================
3. MAJOR AND YOUTH EVENT BADGE
========================================================== */
.zunagi-major-badge {
display: inline-block;
margin-left: 8px;
padding: 2px 6px;
border: 1px solid #d6a323;
border-radius: 4px;
background-color: #fff3cd;
color: #7a5a00;
font-size: 10px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.5px;
vertical-align: 1px;
white-space: nowrap;
}
.zunagi-junior-badge {
display: inline-block;
margin-left: 8px;
padding: 2px 6px;
border: 1px solid #6fbf5a;
border-radius: 4px;
background-color: #e3f5db;
color: #2c6b1f;
font-size: 10px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.5px;
vertical-align: 1px;
white-space: nowrap;
}
.zunagi-youth-badge {
display: inline-block;
margin-left: 8px;
padding: 2px 6px;
border: 1px solid #4aa8d8;
border-radius: 4px;
background-color: #d6f0fb;
color: #05587e;
font-size: 10px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.5px;
vertical-align: 1px;
white-space: nowrap;
}
.zunagi-event-title .zunagi-major-badge,
.zunagi-event-title .zunagi-youth-badge {
vertical-align: middle;
}
/* ==========================================================
4. FILTER BAR
========================================================== */
.zunagi-calendar-filters {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 12px;
width: 100%;
margin: 0 0 18px 0;
}
.zunagi-filter {
display: flex;
flex-direction: column;
gap: 4px;
}
/* Filter headings */
.zunagi-filter label,
.zunagi-checkbox-heading {
margin: 0;
font-size: 14px;
font-weight: 600;
line-height: 1.3;
}
/* Dropdowns and search */
.zunagi-filter select,
.zunagi-filter input[type="search"] {
height: 36px;
min-width: 140px;
padding: 6px 10px;
border: 1px solid #a2a9b1;
border-radius: 4px;
background: #ffffff;
box-sizing: border-box;
font-size: 14px;
}
.zunagi-search-filter input[type="search"] {
min-width: 190px;
}
/* ==========================================================
5. CHECKBOX FILTERS
========================================================== */
.zunagi-checkbox-filter {
display: flex;
flex-direction: column;
gap: 4px;
}
.zunagi-checkbox-label {
display: flex;
align-items: center;
gap: 7px;
height: 36px;
min-width: 90px;
padding: 0 10px;
border: 1px solid #a2a9b1;
border-radius: 4px;
background: #ffffff;
box-sizing: border-box;
cursor: pointer;
font-size: 14px;
font-weight: 400;
}
.zunagi-checkbox-label input[type="checkbox"] {
width: 16px;
height: 16px;
margin: 0;
cursor: pointer;
}
/* ==========================================================
6. RESET BUTTON
========================================================== */
.zunagi-reset-filter {
justify-content: flex-end;
}
.zunagi-reset-filter::before {
content: "";
display: block;
height: 18px;
}
.zunagi-reset-button {
height: 36px;
padding: 6px 14px;
border: 1px solid #a2a9b1;
border-radius: 4px;
background: #f8f9fa;
box-sizing: border-box;
cursor: pointer;
white-space: nowrap;
font-size: 14px;
}
.zunagi-reset-button:hover {
background: #eaecf0;
}
.zunagi-reset-button:active {
background: #dadde3;
}
/* ==========================================================
7. CALENDAR WRAPPER
========================================================== */
/*
* Horizontal scrolling is handled here.
*
* Sticky/floating header behaviour is handled by the
* custom JavaScript fixed-header implementation.
*/
.zunagi-calendar-table {
width: fit-content;
max-width: 100%;
position: relative;
overflow-x: auto;
}
/* ==========================================================
8. MAIN TABLE
========================================================== */
.zunagi-calendar {
width: auto !important;
margin: 0 !important;
border-collapse: collapse !important;
table-layout: auto;
}
.zunagi-calendar th,
.zunagi-calendar td {
box-sizing: border-box;
white-space: nowrap;
}
/* ==========================================================
9. TABLE HEADER
========================================================== */
.zunagi-calendar thead {
background-color: #eaecf0;
}
.zunagi-calendar thead th {
background-color: #eaecf0 !important;
font-weight: 700;
vertical-align: middle;
opacity: 1;
box-sizing: border-box;
border-bottom: 2px solid #a2a9b1;
}
/* ==========================================================
9b. FIXED HEADER — JS DRIVEN CLONE
========================================================== */
.zunagi-fixed-header-outer {
display: none;
position: fixed;
overflow: hidden;
z-index: 1000;
background-color: #eaecf0;
border-bottom: 2px solid #a2a9b1;
box-sizing: border-box;
}
.zunagi-fixed-header-inner {
overflow: hidden;
}
.zunagi-fixed-header-inner th {
background-color: #eaecf0 !important;
font-weight: 700;
box-sizing: border-box;
white-space: nowrap;
padding: 0 8px;
border-right: 1px solid #a2a9b1;
}
.zunagi-fixed-header-inner th:last-child {
border-right: none;
}
.zunagi-fixed-header-inner th > div {
width: 100%;
}
.zunagi-fixed-header-sort-arrow {
display: inline-block;
margin-right: 4px;
width: 0;
height: 0;
vertical-align: middle;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
}
.zunagi-fixed-header-sort-arrow[data-direction="ascending"] {
border-bottom: 5px solid #54595d;
}
.zunagi-fixed-header-sort-arrow[data-direction="descending"] {
border-top: 5px solid #54595d;
}
.zunagi-fixed-header-inner .dt-column-title {
text-align: inherit !important;
}
/* ==========================================================
10. REGION ICONS
========================================================== */
.state-icon {
display: inline-block;
width: 14px;
height: 14px;
margin-right: 6px;
border-radius: 2px;
vertical-align: -2px;
}
/* Shared sizing/positioning for every organisation icon —
only the background-image differs per class below. */
.state-icon.va,
.state-icon.nsw,
.state-icon.qld,
.state-icon.act,
.state-icon.sa,
.state-icon.vic,
.state-icon.wa,
.state-icon.tas,
.state-icon.nbva,
.state-icon.bbva {
background-color: transparent;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 24px;
height: 24px;
vertical-align: -6px;
}
.state-icon.va { background-image: url("/wiki/Special:FilePath/Va.png"); } /* Volleyball Australia */
.state-icon.nsw { background-image: url("/wiki/Special:FilePath/Vnsw.png"); } /* Volleyball NSW */
.state-icon.qld { background-image: url("/wiki/Special:FilePath/Vq.png"); } /* Volleyball Queensland */
.state-icon.act { background-image: url("/wiki/Special:FilePath/Vact.png"); } /* Volleyball ACT */
.state-icon.sa { background-image: url("/wiki/Special:FilePath/Vsa.png"); } /* Volleyball SA */
.state-icon.vic { background-image: url("/wiki/Special:FilePath/Vv.png"); } /* Volleyball Victoria */
.state-icon.wa { background-image: url("/wiki/Special:FilePath/Vwa.png"); } /* Volleyball WA */
.state-icon.tas { background-image: url("/wiki/Special:FilePath/Vtas.png"); } /* Volleyball Tasmania */
.state-icon.nbva { background-image: url("/wiki/Special:FilePath/Nbva.png"); } /* Northern Beaches VA */
.state-icon.bbva { background-image: url("/wiki/Special:FilePath/Bbva.png"); } /* Brighton Beach VA */
/* ==========================================================
11. DATE COLUMN
========================================================== */
.zunagi-calendar th.zunagi-date-column,
.zunagi-calendar td.zunagi-date-column {
width: 95px !important;
min-width: 110px !important;
max-width: 110px !important;
text-align: center !important;
white-space: nowrap;
}
/* ==========================================================
12. EVENT COLUMN
========================================================== */
.zunagi-calendar th.zunagi-event-column,
.zunagi-calendar td.zunagi-event-column {
text-align: left !important;
white-space: nowrap !important;
min-width: 300px !important;
}
/* ==========================================================
13. REGION COLUMN
========================================================== */
.zunagi-calendar th.zunagi-region-column,
.zunagi-calendar td.zunagi-region-column {
text-align: center !important;
white-space: nowrap;
min-width: 110px !important;
}
/* ==========================================================
14. ORG COLUMN
(only ever visible briefly, before DataTables hides it —
targeted by position since it carries no CSS class of its
own once JS takes over)
========================================================== */
.zunagi-calendar th:nth-child(3),
.zunagi-calendar td:nth-child(3) {
text-align: center !important;
}
/* ==========================================================
15. CATEGORY COLUMN
========================================================== */
.zunagi-calendar th.zunagi-category-column,
.zunagi-calendar td.zunagi-category-column {
text-align: center !important;
white-space: nowrap;
min-width: 110px !important;
}
/* ==========================================================
16. LEVEL COLUMN
========================================================== */
.zunagi-calendar th.zunagi-level-column,
.zunagi-calendar td.zunagi-level-column {
text-align: center !important;
white-space: nowrap;
min-width: 110px !important;
}
/* ==========================================================
17. VENUE COLUMN
========================================================== */
.zunagi-calendar th.zunagi-venue-column,
.zunagi-calendar td.zunagi-venue-column {
text-align: left !important;
white-space: nowrap;
min-width: 200px !important;
}
/* ==========================================================
18. TABLE BODY
========================================================== */
.zunagi-calendar tbody td {
vertical-align: middle;
}
/* ==========================================================
19. LINKS
========================================================== */
.zunagi-calendar td a {
text-decoration: none;
}
.zunagi-calendar td a:hover {
text-decoration: underline;
}
/* ==========================================================
20. DATATABLES CLEANUP
========================================================== */
.dt-container {
width: 100%;
}
.dt-container .dt-layout-row:empty {
display: none;
}
/* ==========================================================
21. TABLET / MOBILE
========================================================== */
@media (max-width: 900px) {
.zunagi-calendar-filters {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 10px;
align-items: end;
}
.zunagi-filter {
width: 100%;
}
.zunagi-filter select,
.zunagi-filter input[type="search"] {
width: 100%;
min-width: 0;
}
.zunagi-search-filter input[type="search"] {
width: 100%;
min-width: 0;
}
.zunagi-checkbox-label {
width: 100%;
min-width: 0;
}
.zunagi-reset-button {
width: 100%;
}
.zunagi-major-badge,
.zunagi-youth-badge,
.zunagi-junior-badge {
margin-left: 6px;
padding: 2px 5px;
font-size: 9px;
}
}
/* ==========================================================
NBVA POINTS TABLE — MOBILE-ONLY DIVISION TABS
========================================================== */
.zunagi-nbva-points-tabs {
display: none;
}
@media (max-width: 900px) {
.zunagi-nbva-points-tabs {
display: flex;
gap: 8px;
margin: 1em 0 0;
}
.zunagi-nbva-points-tab {
flex: 1;
padding: 8px 6px;
border: 1px solid #c8ccd1;
border-radius: 8px;
background-color: #f8f9fa;
color: #54595d;
font-size: 0.85em;
font-weight: 700;
text-align: center;
cursor: pointer;
}
.zunagi-nbva-points-tab.active {
background-color: #e3f2ef;
border-color: #4d9b8a;
color: #0a5c4f;
}
}
/* ==========================================================
22. SMALL PHONES
========================================================== */
@media (max-width: 600px) {
.zunagi-calendar-filters {
grid-template-columns: 1fr;
}
.zunagi-reset-filter::before {
display: none;
}
}
/* ==========================================================
ZUNAGI BEACH VOLLEYBALL EVENT PAGE
========================================================== */
/* ==========================================================
1. PAGE
========================================================== */
.zunagi-event-page {
width: 100%;
max-width: 800px;
margin-top: 12px;
}
/* ==========================================================
COLLAPSIBLE FILTERS ON MOBILE
========================================================== */
.zunagi-filters-toggle {
display: none;
}
@media (max-width: 600px) {
.zunagi-filters-toggle {
display: block;
width: 100%;
margin: 0 0 12px 0;
padding: 10px 14px;
border: 1px solid #a2a9b1;
border-radius: 4px;
background: #f8f9fa;
box-sizing: border-box;
font-size: 14px;
font-weight: 600;
text-align: center;
cursor: pointer;
}
.zunagi-filters-toggle:hover {
background: #eaecf0;
}
.zunagi-calendar-filters {
display: none !important;
}
.zunagi-calendar-filters.is-open {
display: grid !important;
}
}
/* ==========================================================
2. EVENT RECORD TABLE
========================================================== */
.zunagi-event-record {
width: 100%;
margin: 12px 0 0 0 !important;
border: 0 !important;
border-top: 1px solid #c8ccd1 !important;
border-bottom: 1px solid #c8ccd1 !important;
border-collapse: collapse;
background: #ffffff;
}
/* ==========================================================
3. TABLE CELLS
========================================================== */
.zunagi-event-record th,
.zunagi-event-record td {
padding: 14px 12px;
border: 0 !important;
border-bottom: 1px solid #eaecf0 !important;
vertical-align: middle;
line-height: 1.45;
}
.zunagi-event-record tr:last-child th,
.zunagi-event-record tr:last-child td {
border-bottom: 0 !important;
}
/* ==========================================================
4. LABEL COLUMN
========================================================== */
.zunagi-event-record th {
width: 165px;
min-width: 165px;
padding-left: 14px;
padding-right: 18px;
background-color: #f8f9fa;
text-align: left;
font-weight: 600;
white-space: nowrap;
}
/* ==========================================================
5. VALUE COLUMN
========================================================== */
.zunagi-event-record td {
background-color: #ffffff;
text-align: left;
}
/* ==========================================================
6. ROW HOVER
========================================================== */
.zunagi-event-record tr:hover td {
background-color: #f8f9fa;
}
.zunagi-event-record tr:hover th {
background-color: #f1f3f5;
}
/* ==========================================================
7. LINKS
========================================================== */
.zunagi-event-record a {
text-decoration: none;
}
.zunagi-event-record a:hover {
text-decoration: underline;
}
/*
* Registration and Results links.
*/
.zunagi-event-record tr:nth-last-child(-n+3) td a {
font-weight: 600;
}
/*
* Registration and Results links.
*/
.zunagi-event-record tr:nth-last-child(-n+3) td a {
font-weight: 600;
}
/*
* "organiser" link in the Registration row's "Double check with the
* organiser" fallback text should stay regular weight — the bold rule
* above is meant only for the primary Register/Registered Teams/View
* Results links.
*/
.zunagi-registration-organiser-link a {
font-weight: normal !important;
}
/* ==========================================================
8. DATE AND VENUE ICONS
========================================================== */
.zunagi-date-icon,
.zunagi-venue-icon {
display: inline-block;
width: 15px;
height: 15px;
margin-right: 6px;
vertical-align: -2px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.zunagi-date-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2354595d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}
.zunagi-venue-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2354595d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
/* ==========================================================
9. BACK LINK
========================================================== */
.zunagi-event-back {
margin-top: 20px;
font-size: 14px;
}
.zunagi-event-back a {
text-decoration: none;
}
.zunagi-event-back a:hover {
text-decoration: underline;
}
/* ==========================================================
10. MOBILE EVENT PAGE
========================================================== */
@media (max-width: 600px) {
.zunagi-event-page {
width: 100%;
margin-top: 8px;
}
.zunagi-event-record {
margin-top: 14px !important;
}
.zunagi-event-record th {
width: 135px;
min-width: 135px;
padding: 12px 10px;
}
.zunagi-event-record td {
padding: 12px 10px;
}
.zunagi-event-back {
margin-top: 18px;
}
}
/* ==========================================================
11. CALENDAR DISCLAIMER
========================================================== */
.zunagi-calendar-disclaimer {
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid #eaecf0;
color: #54595d;
font-size: 13px;
line-height: 1.5;
}
/* ==========================================================
12. ZUNAGI BACK / HUB NAVIGATION
========================================================== */
.zunagi-back-nav {
margin: 4px 0 12px 0;
font-size: 14px;
}
.zunagi-back-nav a {
color: #007bff;
text-decoration: none;
font-weight: 500;
}
.zunagi-back-nav a:hover {
text-decoration: underline;
}
/* ==========================================================
ZUNAGI BEACH VOLLEYBALL HUB TILES
========================================================== */
/* ----------------------------------------------------------
TILE CONTAINER
---------------------------------------------------------- */
.zunagi-hub-tiles {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 24px;
width: 100%;
margin: 28px 0;
box-sizing: border-box;
}
/* ----------------------------------------------------------
BASE TILE
---------------------------------------------------------- */
.zunagi-hub-tile {
position: relative;
width: calc(33.333% - 16px) !important;
flex: 0 0 calc(33.333% - 16px) !important;
display: flex;
flex-direction: column;
min-width: 0;
padding: 28px;
box-sizing: border-box;
border: 1px solid #c7d7b6;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
cursor: pointer;
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
border-color 0.2s ease,
background-color 0.2s ease;
}
/* ----------------------------------------------------------
TILE COLOURS
---------------------------------------------------------- */
.zunagi-hub-tile-calendar {
background-color: #f2f9fc;
}
.zunagi-hub-tile-rankings {
background-color: #fffaf0;
}
.zunagi-hub-tile-points {
background-color: #f0f9ec;
}
/* ----------------------------------------------------------
HOVER
---------------------------------------------------------- */
.zunagi-hub-tile:hover {
transform: translateY(-4px);
border-color: #8cc63f;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}
.zunagi-hub-tile-calendar:hover {
background-color: #eaf6fb;
}
.zunagi-hub-tile-rankings:hover {
background-color: #fff6e3;
}
.zunagi-hub-tile-points:hover {
background-color: #e6f4dd;
}
/* ----------------------------------------------------------
FEATURE IMAGE
---------------------------------------------------------- */
.zunagi-hub-image {
margin: -28px -28px 24px -28px;
overflow: hidden;
}
/* MediaWiki image link */
.zunagi-hub-image a {
display: block;
width: 100%;
margin: 0;
padding: 0;
}
/* Image */
.zunagi-hub-image img {
display: block;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0;
transition: transform 0.25s ease;
}
/* Slight image zoom */
.zunagi-hub-tile:hover .zunagi-hub-image img {
transform: scale(1.015);
}
/* ----------------------------------------------------------
TILE HEADING
---------------------------------------------------------- */
/*
* MediaWiki wraps H2 headings in:
* <div class="mw-heading mw-heading2">
*
* Remove the skin's divider from that wrapper.
*/
.zunagi-hub-tile .mw-heading,
.zunagi-hub-tile .mw-heading2 {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-bottom: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
/*
* Apply our single divider to the H2 itself.
*/
.zunagi-hub-tile h2 {
display: block !important;
width: 100% !important;
margin: 0 0 16px 0 !important;
padding: 0 0 10px 0 !important;
border: 0 !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.25) !important;
background: transparent !important;
box-shadow: none !important;
font-size: 1.45rem !important;
font-weight: 600 !important;
line-height: 1.3 !important;
}
/*
* Remove any additional theme decoration.
*/
.zunagi-hub-tile h2::before,
.zunagi-hub-tile h2::after,
.zunagi-hub-tile .mw-heading::before,
.zunagi-hub-tile .mw-heading::after {
content: none !important;
display: none !important;
}
/* ----------------------------------------------------------
DESCRIPTION
---------------------------------------------------------- */
.zunagi-hub-tile p {
margin: 0 0 24px 0;
line-height: 1.6;
color: #555555;
}
/* ----------------------------------------------------------
CALL TO ACTION
---------------------------------------------------------- */
.zunagi-hub-link {
margin-top: auto;
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.03em;
}
.zunagi-hub-link a {
color: #0066cc;
text-decoration: none;
}
.zunagi-hub-link a:hover {
text-decoration: none;
}
/* ----------------------------------------------------------
MAKE THE ENTIRE TILE CLICKABLE
---------------------------------------------------------- */
.zunagi-hub-link a::after {
content: "";
position: absolute;
inset: 0;
z-index: 5;
}
/* ----------------------------------------------------------
MOBILE
---------------------------------------------------------- */
@media (max-width: 700px) {
.zunagi-hub-tiles {
flex-direction: column !important;
gap: 18px;
margin: 22px 0;
}
.zunagi-hub-tile {
width: 100% !important;
flex: 0 0 100% !important;
padding: 22px;
border: 1.5px solid #aac889;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10);
}
.zunagi-hub-image {
margin: -22px -22px 20px -22px;
}
.zunagi-hub-tile h2 {
font-size: 1.3rem !important;
}
}