MediaWiki:Common.css
From Kanturas
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 */
/* Idhelin main navigation
Midnight blue, antique gold and salt-crystal turquoise
--------------------------------------------------------- */
.idhelin-nav {
--idhelin-night: #071426;
--idhelin-blue: #102b49;
--idhelin-gold: #c99a43;
--idhelin-pale-gold: #f0d99a;
--idhelin-crystal: #42d5d1;
--idhelin-crystal-dark: #168b9c;
margin: 1.25rem auto;
overflow: hidden;
background:
linear-gradient(
180deg,
rgba(19, 52, 83, 0.98) 0%,
rgba(7, 20, 38, 0.99) 100%
);
border: 1px solid var(--idhelin-gold);
border-top: 3px solid var(--idhelin-gold);
border-bottom: 3px solid var(--idhelin-gold);
border-radius: 4px;
box-shadow:
0 5px 18px rgba(0, 0, 0, 0.45),
inset 0 0 20px rgba(66, 213, 209, 0.06);
}
.idhelin-nav-inner {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
}
/* Navigation links */
.idhelin-nav a,
.idhelin-nav .selflink {
position: relative;
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0.2rem 1rem;
color: var(--idhelin-pale-gold) !important;
font-family: Georgia, "Times New Roman", serif;
font-size: 0.93rem;
font-weight: 600;
letter-spacing: 0.045em;
text-align: center;
text-decoration: none !important;
text-shadow: 0 1px 3px #000;
border-left: 1px solid rgba(201, 154, 67, 0.22);
transition:
color 0.2s ease,
background-color 0.2s ease,
box-shadow 0.2s ease;
}
.idhelin-nav a:first-child,
.idhelin-nav .selflink:first-child {
border-left: 0;
}
/* Crystal line beneath each link */
.idhelin-nav a::after,
.idhelin-nav .selflink::after {
content: "";
position: absolute;
right: 20%;
bottom: 5px;
left: 20%;
height: 2px;
background: linear-gradient(
90deg,
transparent,
var(--idhelin-crystal),
transparent
);
box-shadow: 0 0 7px var(--idhelin-crystal);
opacity: 0;
transform: scaleX(0.25);
transition:
opacity 0.2s ease,
transform 0.2s ease;
}
/* Hover and keyboard focus */
.idhelin-nav a:hover,
.idhelin-nav a:focus-visible {
color: #ffffff !important;
background:
linear-gradient(
180deg,
rgba(66, 213, 209, 0.14),
rgba(22, 139, 156, 0.08)
);
box-shadow: inset 0 0 18px rgba(66, 213, 209, 0.12);
outline: none;
}
.idhelin-nav a:hover::after,
.idhelin-nav a:focus-visible::after,
.idhelin-nav .selflink::after {
opacity: 1;
transform: scaleX(1);
}
/* Current page */
.idhelin-nav .selflink {
color: #ffffff !important;
background: rgba(66, 213, 209, 0.12);
}
/* Tablet: three equal columns */
@media screen and (max-width: 850px) {
.idhelin-nav-inner {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.idhelin-nav a,
.idhelin-nav .selflink {
padding: 0.35rem 0.5rem;
border-right: 1px solid rgba(201, 154, 67, 0.18);
border-bottom: 1px solid rgba(201, 154, 67, 0.18);
}
}
/* Mobile: two columns, with the ninth gate centered */
@media screen and (max-width: 520px) {
.idhelin-nav-inner {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.idhelin-nav a,
.idhelin-nav .selflink {
min-height: 44px;
font-size: 0.82rem;
letter-spacing: 0.025em;
}
.idhelin-nav a:last-child,
.idhelin-nav .selflink:last-child {
grid-column: 1 / -1;
}
}
/* Force the Idhelin menu into one horizontal row */
.mw-parser-output .idhelin-nav {
width: 100%;
box-sizing: border-box;
}
.mw-parser-output .idhelin-nav-inner {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
justify-content: center !important;
width: 100%;
margin: 0 !important;
padding: 0 !important;
overflow-x: auto;
overflow-y: hidden;
scrollbar-color: #c99a43 #071426;
}
.mw-parser-output .idhelin-nav-item {
display: flex !important;
flex: 1 0 105px !important;
align-items: stretch;
margin: 0 !important;
padding: 0 !important;
border-left: 1px solid rgba(201, 154, 67, 0.22);
}
.mw-parser-output .idhelin-nav-item:first-child {
border-left: 0;
}
.mw-parser-output .idhelin-nav-item > a,
.mw-parser-output .idhelin-nav-item > .selflink {
display: flex !important;
align-items: center;
justify-content: center;
width: 100%;
min-height: 48px;
padding: 0.2rem 0.75rem;
box-sizing: border-box;
color: #f0d99a !important;
font-family: Georgia, "Times New Roman", serif;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.035em;
line-height: 1.2;
text-align: center;
text-decoration: none !important;
white-space: nowrap;
border: 0 !important;
}
/* Crystal-blue hover effect */
.mw-parser-output .idhelin-nav-item > a:hover,
.mw-parser-output .idhelin-nav-item > a:focus-visible,
.mw-parser-output .idhelin-nav-item > .selflink {
color: #ffffff !important;
background: linear-gradient(
180deg,
rgba(66, 213, 209, 0.16),
rgba(22, 139, 156, 0.09)
);
box-shadow:
inset 0 -2px #42d5d1,
inset 0 0 16px rgba(66, 213, 209, 0.12);
}
/* Smaller screens retain one row and can scroll sideways */
@media screen and (max-width: 850px) {
.mw-parser-output .idhelin-nav-inner {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
justify-content: flex-start !important;
}
.mw-parser-output .idhelin-nav-item {
flex: 0 0 auto !important;
min-width: 110px;
}
.mw-parser-output .idhelin-nav-item > a,
.mw-parser-output .idhelin-nav-item > .selflink {
min-height: 44px;
padding: 0.25rem 0.7rem;
font-size: 0.82rem;
}
}
