MediaWiki:Common.css: Difference between revisions
From OpenJuris
third attempt at semantic and clean code Tag: Reverted |
Undo revision 101 by Nilotpal Datta (talk) Tag: Undo |
||
| Line 1: | Line 1: | ||
/* | /* Medik sidebar width override — Bootstrap-correct */ | ||
@media (min-width: 768px) { | @media (min-width: 768px) { | ||
.skin-medik #mw-navigation { | .skin-medik #mw-navigation { | ||
| Line 18: | Line 14: | ||
} | } | ||
.skin-medik #mw-navigation a, | .skin-medik #mw-navigation a, | ||
.skin-medik #mw-navigation a:visited | .skin-medik #mw-navigation a:visited { | ||
color: #202122; | color: #202122; | ||
} | } | ||
.skin-medik #mw-navigation h3 { | .skin-medik #mw-navigation h3 { | ||
color: #202122; | |||
font-weight: 600; | font-weight: 600; | ||
} | } | ||
| Line 34: | Line 30: | ||
} | } | ||
/* Restore spacing after hiding Navigation label */ | /* Restore spacing after hiding Navigation label (Medik) */ | ||
.skin-medik #mw-navigation nav.nav { | .skin-medik #mw-navigation nav.nav { | ||
margin-top: 1.25rem; /* tweak as needed */ | margin-top: 1.25rem; /* tweak as needed */ | ||
} | } | ||
/* Sidebar links: gradient | /* Sidebar links: gradient hover (Medik) */ | ||
.skin-medik #mw-navigation .nav-link { | .skin-medik #mw-navigation .nav-link { | ||
color: #202122; | color: #202122; /* normal text */ | ||
transition: background 0.2s ease, color 0.2s ease; | transition: background 0.2s ease, color 0.2s ease; | ||
} | } | ||
/* Sidebar links: gradient text on hover (Medik) */ | |||
.skin-medik #mw-navigation .nav-link { | |||
color: #202122; /* normal body text */ | |||
transition: color 0.2s ease; | |||
} | |||
/* Hover: gradient text */ | |||
.skin-medik #mw-navigation .nav-link:hover { | .skin-medik #mw-navigation .nav-link:hover { | ||
color: # | color: #8E2DE2; /* fallback for browsers without text-clip */ | ||
background: linear-gradient(to right, # | background: -webkit-linear-gradient(to right, #4A00E0, #8E2DE2); | ||
background: linear-gradient(to right, #4A00E0, #8E2DE2); | |||
-webkit-background-clip: text; | -webkit-background-clip: text; | ||
-webkit-text-fill-color: transparent; | -webkit-text-fill-color: transparent; | ||
} | } | ||
/* Existing links */ | /* Existing links */ | ||
.skin-medik .mw-parser-output a:not(.new) { | .skin-medik .mw-parser-output a:not(.new) { | ||
color: # | color: #8E2DE2; | ||
} | } | ||
| Line 70: | Line 71: | ||
color: #b33a3a; | color: #b33a3a; | ||
} | } | ||
/* ===================================================== | /* ===================================================== | ||
Medik | Medik content layout – wider, centered, readable | ||
WordPress-style editorial feel | |||
===================================================== */ | ===================================================== */ | ||
/* Main content container */ | /* Main content container */ | ||
.skin-medik .mw-content-container { | .skin-medik .mw-content-container { | ||
max-width: 1400px; /* wider than default, not full-width */ | max-width: 1400px; /* wider than default, not full-width */ | ||
margin-left: auto; | margin-left: auto; | ||
margin-right: auto; | margin-right: auto; | ||
| Line 84: | Line 87: | ||
} | } | ||
/* | /* Medik: article text readability */ | ||
.skin-medik .mw-body-content { | .skin-medik .mw-body-content { | ||
font-size: 1.75rem; | font-size: 1.75rem; | ||
| Line 95: | Line 98: | ||
} | } | ||
/* Headings: breathing room */ | /* Headings: give them breathing room */ | ||
.skin-medik .mw-parser-output h1, | .skin-medik .mw-parser-output h1, | ||
.skin-medik .mw-parser-output h2, | .skin-medik .mw-parser-output h2, | ||
| Line 103: | Line 106: | ||
} | } | ||
/* | /* Medik: widen and center the main Bootstrap container */ | ||
.skin-medik #mw-main-container > .row { | .skin-medik #mw-main-container > .row { | ||
margin-left: 0; | margin-left: 0; | ||
margin-right: 0; | margin-right: 0; | ||
} | } | ||
Revision as of 22:58, 17 December 2025
/* Medik sidebar width override — Bootstrap-correct */
@media (min-width: 768px) {
.skin-medik #mw-navigation {
flex: 0 0 16%;
max-width: 16%;
}
}
@media (min-width: 1200px) {
.skin-medik #mw-navigation {
flex: 0 0 12%;
max-width: 12%;
}
}
.skin-medik #mw-navigation a,
.skin-medik #mw-navigation a:visited {
color: #202122;
}
.skin-medik #mw-navigation h3 {
color: #202122;
font-weight: 600;
}
/* Hide Bootstrap "Navigation" label in Medik */
.skin-medik #p-navigation-label {
display: none !important;
}
/* Restore spacing after hiding Navigation label (Medik) */
.skin-medik #mw-navigation nav.nav {
margin-top: 1.25rem; /* tweak as needed */
}
/* Sidebar links: gradient hover (Medik) */
.skin-medik #mw-navigation .nav-link {
color: #202122; /* normal text */
transition: background 0.2s ease, color 0.2s ease;
}
/* Sidebar links: gradient text on hover (Medik) */
.skin-medik #mw-navigation .nav-link {
color: #202122; /* normal body text */
transition: color 0.2s ease;
}
/* Hover: gradient text */
.skin-medik #mw-navigation .nav-link:hover {
color: #8E2DE2; /* fallback for browsers without text-clip */
background: -webkit-linear-gradient(to right, #4A00E0, #8E2DE2);
background: linear-gradient(to right, #4A00E0, #8E2DE2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Existing links */
.skin-medik .mw-parser-output a:not(.new) {
color: #8E2DE2;
}
/* Visited links (darker) */
.skin-medik .mw-parser-output a:not(.new):visited {
color: #5a1fa6;
}
/* Non-existent pages (red links) */
.skin-medik .mw-parser-output a.new {
color: #b33a3a;
}
/* =====================================================
Medik content layout – wider, centered, readable
WordPress-style editorial feel
===================================================== */
/* Main content container */
.skin-medik .mw-content-container {
max-width: 1400px; /* wider than default, not full-width */
margin-left: auto;
margin-right: auto;
padding-left: 2rem;
padding-right: 2rem;
}
/* Medik: article text readability */
.skin-medik .mw-body-content {
font-size: 1.75rem;
line-height: 1.7;
}
/* Paragraph spacing */
.skin-medik .mw-parser-output p {
margin-bottom: 1.1em;
}
/* Headings: give them breathing room */
.skin-medik .mw-parser-output h1,
.skin-medik .mw-parser-output h2,
.skin-medik .mw-parser-output h3 {
margin-top: 1.6em;
margin-bottom: 0.6em;
}
/* Medik: widen and center the main Bootstrap container */
.skin-medik #mw-main-container > .row {
margin-left: 0;
margin-right: 0;
}