MediaWiki:Common.css: Difference between revisions

From Sanatan Hindu Dharma
No edit summary
No edit summary
Line 103: Line 103:
   display: none !important;
   display: none !important;
}
}
 
<style>
/* Remove default wiki spacing */
/* ----------------------------- */
.mw-parser-output, .mw-body, .container {
/* 1️⃣ Remove default wiki spacing safely */
  margin:0 !important;
/* ----------------------------- */
  padding:0 !important;
html, body {
  width:100% !important;
  max-width:100% !important;
}
 
/* Remove all default wiki content spacing */
.mw-parser-output,
.mw-body-content,
.mw-body,
.container,
.content {
   margin: 0 !important;
   margin: 0 !important;
   padding: 0 !important;
   padding: 0 !important;
   width: 100% !important;
   overflow-x: hidden !important;
  max-width: 100% !important;
  background: none !important;
  border: none !important;
}
 
 
.fullwidth-section {
  margin: 0 !important;
  padding: 60px 20px;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  transform: translateX(-50%);
   box-sizing: border-box;
   box-sizing: border-box;
}
}


/* Hero section with Background Banner */
/* Target only wiki inner wrappers without breaking layout */
 
.mw-body,
<style>
.mw-body-content,
/* ----------------------------- */
.mw-parser-output,
/* 1️⃣ Remove default MediaWiki spacing */
#content,
/* ----------------------------- */
#bodyContent,
html, body, .mw-body, .mw-body-content, .mw-parser-output, .content, .container {
#mw-content-text {
   margin: 0 !important;
   margin: 0 !important;
   padding: 0 !important;
   padding: 0 !important;
   border: none !important;
   border: none !important;
  width: 100% !important;
  max-width: 100% !important;
   background: none !important;
   background: none !important;
   box-sizing: border-box;
   box-sizing: border-box;
   overflow-x: hidden !important;
   width: 100% !important;
  max-width: none !important;
}
}


/* ----------------------------- */
/* ----------------------------- */
/* 2️⃣ Optional: Generic fullwidth container */
/* 2️⃣ Hero Section */
/* ----------------------------- */
.fullwidth-section {
  margin: 0 !important;
  padding: 60px 20px;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  overflow-x: hidden !important;
}
 
/* ----------------------------- */
/* 3️⃣ Hero Section Styling */
/* ----------------------------- */
/* ----------------------------- */
.hero-section {
.hero-section {
   position: relative;
   position: relative;
   width: 100%;
   width: 100vw; /* true viewport width */
   min-height: 100vh;
  left: 50%;
  right: 50%;
   transform: translateX(-50%); /* ensures perfect centering */


   display: flex;
   display: flex;
Line 180: Line 145:
   align-items: center;
   align-items: center;


  min-height: 100vh;
   background-image: url('https://palegoldenrod-hawk-418440.hostingersite.com/wp-content/uploads/2025/10/19376570_w66m_ob1h_190906-scaled.jpg');
   background-image: url('https://palegoldenrod-hawk-418440.hostingersite.com/wp-content/uploads/2025/10/19376570_w66m_ob1h_190906-scaled.jpg');
   background-size: cover;
   background-size: cover;
Line 186: Line 152:


   text-align: center;
   text-align: center;
   color: #fff;
   color: white;
   padding: 100px 20px;
   padding: 100px 20px;
   box-sizing: border-box;
   box-sizing: border-box;
Line 192: Line 158:
}
}


/* Overlay for better text readability */
/* Overlay for readability */
.hero-section::before {
.hero-section::before {
   content: "";
   content: "";
Line 201: Line 167:
}
}


/* Hero content text styling */
/* ----------------------------- */
/* 3️⃣ Text content */
/* ----------------------------- */
.hero-content {
.hero-content {
   position: relative;
   position: relative;
Line 213: Line 181:
   font-size: 3rem;
   font-size: 3rem;
   font-weight: 800;
   font-weight: 800;
   color: #ffffff;
   color: #fff;
   margin-bottom: 15px;
   margin-bottom: 15px;
}
}
Line 225: Line 193:


/* ----------------------------- */
/* ----------------------------- */
/* 4️⃣ Responsive Adjustments */
/* 4️⃣ Responsive Design */
/* ----------------------------- */
/* ----------------------------- */
/* Tablets */
@media (max-width: 1024px) {
@media (max-width: 1024px) {
   .hero-section {
   .hero-section {
     background-attachment: scroll; /* smoother scrolling on tablets */
     background-attachment: scroll;
     padding: 80px 15px;
     padding: 80px 15px;
   }
   }
Line 238: Line 204:
}
}


/* Mobile */
@media (max-width: 768px) {
@media (max-width: 768px) {
   .hero-section {
   .hero-section {
Line 244: Line 209:
     padding: 70px 15px;
     padding: 70px 15px;
   }
   }
   .hero-content h1 { font-size: 2rem; line-height: 1.3; }
   .hero-content h1 { font-size: 2rem; }
   .hero-content p { font-size: 1rem; }
   .hero-content p { font-size: 1rem; }
}
}


/* Small phones */
@media (max-width: 480px) {
@media (max-width: 480px) {
   .hero-section {
   .hero-section {

Revision as of 08:17, 9 October 2025

/* CSS placed here will be applied to all skins */

.flex-fill.container,.flex-fill.container{ max-width:100% !important}
.p-navbar .navbar-brand.p-logo {
    height: 3rem;
}

.p-navbar .navbar-brand img {
    height: 3.5rem;
}


.p-logo {
    height: 6rem;
}

.p-logo img  {
    height: 5.5rem;
    margin-top:.2rem;
}

.bodyContent{ border:1px solid rgba(0,0,0,0.1); padding:16px; border-radius:.25rem;}
.firstHeading,h2,h3,h4{font-weight: 700;}

.mw-parser-output a.extiw:visited, .mw-parser-output a.external:visited, a, a[href].new  {
    color: #1b599b;
    text-decoration: none;
    background-color: transparent
}



a:hover, a[href].new:hover {
    color: #10345a;
    text-decoration: underline
}


a:visited, a[href].new:visited {
    color: #1b599b;
}

.footercontainer{max-width:100%;}

.mw-body.content{max-width:1140px; margin:0 auto;}


.tableVideo{text-align : center; margin: 0 auto;}
.embedvideo-wrapper{ border:1px solid #ccc;}
.embedvideo-loader__footer{display : none !important}

.panchangimg img{max-width:800px; width:100%; height:auto; margin:10px auto; display:table;}

.panchangimg a[href].external{ position: fixed; bottom: 20px; right: 20px; background-color:#1B599B; color: #ffffff; padding: 10px 20px; border-radius: 5px; box-shadow: 0px 0px 4px #d1d1d1; font-weight: 600;z-index: 9;}

.p-navbar.collapsible .navbar-nav .dropdown-menu{height:auto; max-height:95vh; overflow: auto;}

/* Hide the entire page tools section (content navigation) for users not logged in */
body:not(.mw-editable) #p-contentnavigation {
    display: none !important;
}

span.mw-editsection {
    display: none !important;
}

@media (min-width: 1105px) {
.navbar-expand-cmln, .p-navbar.collapsible {flex-flow: row wrap;}
.navbar-expand-cmln .navbar-nav, .p-navbar.collapsible .navbar-nav {flex-wrap: wrap; justify-content: center;}
}



@media (max-width: 575.98px) {
.flex-fill.container .row:first-child {justify-content: center;}
.tableVideo {
    max-width: 300px;
    width: 100% !important;
    height: 169px !important
}

.embedvideo-wrapper, .embedvideo {
    max-width: 300px;
    width: 100% !important;
    height: 169px !important
}
.panchangimg a[href].external{ bottom: 20px; right: 20px; padding: 10px 15px; border-radius: 4px;;}
.panchangimg img{width:100%; height:auto;}
}
.page-title, .firstHeading, #firstHeading {
  display: none !important;
}
.mw-headline,
.page-header,
.page-title,
.firstHeading,
h1, h2, h3 {
  border: none !important;
  box-shadow: none !important;
}
/* Remove default footer */
.footercontainer {
  display: none !important;
}
<style>
/* ----------------------------- */
/* 1️⃣ Remove default wiki spacing safely */
/* ----------------------------- */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  box-sizing: border-box;
}

/* Target only wiki inner wrappers without breaking layout */
.mw-body,
.mw-body-content,
.mw-parser-output,
#content,
#bodyContent,
#mw-content-text {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
}

/* ----------------------------- */
/* 2️⃣ Hero Section */
/* ----------------------------- */
.hero-section {
  position: relative;
  width: 100vw; /* true viewport width */
  left: 50%;
  right: 50%;
  transform: translateX(-50%); /* ensures perfect centering */

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  min-height: 100vh;
  background-image: url('https://palegoldenrod-hawk-418440.hostingersite.com/wp-content/uploads/2025/10/19376570_w66m_ob1h_190906-scaled.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;

  text-align: center;
  color: white;
  padding: 100px 20px;
  box-sizing: border-box;
  overflow: hidden;
}

/* Overlay for readability */
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

/* ----------------------------- */
/* 3️⃣ Text content */
/* ----------------------------- */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  width: 90%;
  margin: 0 auto;
}

.hero-content h1 {
  font-size: 3rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 15px;
}

.hero-content p {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.6;
  color: #FFE687;
}

/* ----------------------------- */
/* 4️⃣ Responsive Design */
/* ----------------------------- */
@media (max-width: 1024px) {
  .hero-section {
    background-attachment: scroll;
    padding: 80px 15px;
  }
  .hero-content h1 { font-size: 2.4rem; }
  .hero-content p { font-size: 1.1rem; }
}

@media (max-width: 768px) {
  .hero-section {
    min-height: 70vh;
    padding: 70px 15px;
  }
  .hero-content h1 { font-size: 2rem; }
  .hero-content p { font-size: 1rem; }
}

@media (max-width: 480px) {
  .hero-section {
    padding: 60px 10px;
  }
  .hero-content h1 { font-size: 1.6rem; }
  .hero-content p { font-size: 0.95rem; }
}
</style>