MediaWiki:Common.css: Difference between revisions

From OpenJuris

Undo revision 99 by Nilotpal Datta (talk)
Tag: Undo
third attempt at semantic and clean code
Tag: Reverted
Line 1: Line 1:
/* Medik sidebar width override Bootstrap-correct */
/* =====================================================
  Medik: sidebar + navigation
  ===================================================== */
 
/* Sidebar width override (Bootstrap-correct) */
@media (min-width: 768px) {
@media (min-width: 768px) {
   .skin-medik #mw-navigation {
   .skin-medik #mw-navigation {
Line 14: Line 18:
}
}


 
/* Sidebar link + heading color */
.skin-medik #mw-navigation a,
.skin-medik #mw-navigation a,
.skin-medik #mw-navigation a:visited {
.skin-medik #mw-navigation a:visited,
.skin-medik #mw-navigation h3 {
   color: #202122;
   color: #202122;
}
}


.skin-medik #mw-navigation h3 {
.skin-medik #mw-navigation h3 {
  color: #202122;
   font-weight: 600;
   font-weight: 600;
}
}
Line 30: Line 34:
}
}


/* Restore spacing after hiding Navigation label (Medik) */
/* Restore spacing after hiding Navigation label */
.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 hover (Medik) */
/* Sidebar links: gradient text on hover */
.skin-medik #mw-navigation .nav-link {
.skin-medik #mw-navigation .nav-link {
   color: #202122;               /* normal text */
   color: #202122;
   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: #8E2DE2; /* fallback for browsers without text-clip */
   color: #8e2de2; /* fallback for browsers without text-clip */
  background: -webkit-linear-gradient(to right, #4A00E0, #8E2DE2);
   background: 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;
}
}


/* =====================================================
  Medik: content links
  ===================================================== */


/* Existing links */
/* Existing links */
.skin-medik .mw-parser-output a:not(.new) {
.skin-medik .mw-parser-output a:not(.new) {
   color: #8E2DE2;
   color: #8e2de2;
}
}


Line 71: Line 70:
   color: #b33a3a;
   color: #b33a3a;
}
}


/* =====================================================
/* =====================================================
   Medik content layout – wider, centered, readable
   Medik: content layout + typography
  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 87: Line 84:
}
}


/* Medik: article text readability */
/* Article text readability */
.skin-medik .mw-body-content {
.skin-medik .mw-body-content {
   font-size: 1.75rem;
   font-size: 1.75rem;
Line 98: Line 95:
}
}


/* Headings: give them breathing room */
/* Headings: 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 106: Line 103:
}
}


/* Medik: widen and center the main Bootstrap container */
/* 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:57, 17 December 2025

/* =====================================================
   Medik: sidebar + navigation
   ===================================================== */

/* 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%;
  }
}

/* Sidebar link + heading color */
.skin-medik #mw-navigation a,
.skin-medik #mw-navigation a:visited,
.skin-medik #mw-navigation h3 {
  color: #202122;
}

.skin-medik #mw-navigation h3 {
  font-weight: 600;
}

/* Hide Bootstrap "Navigation" label in Medik */
.skin-medik #p-navigation-label {
  display: none !important;
}

/* Restore spacing after hiding Navigation label */
.skin-medik #mw-navigation nav.nav {
  margin-top: 1.25rem; /* tweak as needed */
}

/* Sidebar links: gradient text on hover */
.skin-medik #mw-navigation .nav-link {
  color: #202122;
  transition: background 0.2s ease, color 0.2s ease;
}

.skin-medik #mw-navigation .nav-link:hover {
  color: #8e2de2; /* fallback for browsers without text-clip */
  background: linear-gradient(to right, #4a00e0, #8e2de2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* =====================================================
   Medik: content links
   ===================================================== */

/* 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 + typography
   ===================================================== */

/* 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;
}

/* 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: 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;
}

/* Widen and center the main Bootstrap container */
.skin-medik #mw-main-container > .row {
  margin-left: 0;
  margin-right: 0;
}