MediaWiki:Timeless.css

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)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

:root {
    --primary-color: #154169; /* Navy blue */
    --secondary-color: #2a4b8d; /* Pale blue */
    --tertiary-color: #64a1dc; /* red */
   /* --infobox-header-color: #7fa9d0; /* Pale blue */
    --infobox-header-color: #6e7888; /* rust */
    --background-color: #f0f4f8; /* Example background color */
    --bodytext-family: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif;
}


.infobox th {
   color:#FFFFFF;
   font-size:1.04em;
   font-family: 'Courier New';
   }

.infobox td{
   color:var(--primary-color);
   font-family: var(--bodytext-family);
font-weight:bold;
   }

.infobox td{
a:link {color: var(--secondary-color);}
a:visited {color: var(--secondary-color);}
}

a.external.text{
   font-weight:normal;
   }


#mw-header-container {
    background: var(--primary-color);}

/*  ///////// commented out
#mw-content-container {
   var(--secondary-color);}
*/

a:link {color: var(--primary-color);}
a:visited {color: var(--primary-color);}
a:hover {color: var(--primary-color);}
a:active {color: var(--primary-color); text-decoration: underline;}

#p-logo-text {
     min-width: 16em;
     padding-top:5px;
  }

#p-logo-text a {
    font-family:  'Courier New','Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif;
     color:#FFFFFF;
    font-variant: normal; /* Ensures no small-caps */
    font-weight: Bold; /* Ensures weight is bold */
    font-style: normal; /* Ensures no italics */
    letter-spacing: -0.02em;
    word-spacing: -0.3em;

}

#p-logo-text a.long {
    font-size: 1.6em;}

.tools-inline li.selected {
border-bottom-color:var(--secondary-color);
  }

.color-left{
background: var(--secondary-color);
}

.color-right{
background:var(--secondary-color);
}

.color-middle{
background: #var(--secondary-color);
}

/* Top bar font modernization */
#mw-header *,
#mw-site-navigation *,
 #mw-related-navigation * {
    font-family: 'Courier New', 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif;
 font-weight: Bold;
}

/* ////// username */
#mw-header{
   #user-tools {
      padding-top: 5px;
       color:white;
      }
    }

/* ////////// Avoid cutting off letters with descenders: g,j,p,q,y */
#personal h2 span {
    height: 1.5em;
    position:relative;
    bottom:0.1em
   }


/* Triangle position patch */
#personal h2::after {
   position: relative;
   bottom: 0.5em;
}
    .mw-wiki-logo.timeless-logo img {
        width: 230px;
        height: auto;
        margin: 0 0 0
/*        margin: 0.75em 0 0.5em */
    }

/* Change body font to Courier New for the Timeless skin 
body {
  font-family: var(--bodytext-family);
  font-weight:bold;
  font-size:1em;
}
*/

body.page-Main_Page {
     #firstHeading {
       border-bottom: 0px;
       height:1px;
     }
    }

body.page-Main_Page .mw-body h1.firstHeading {
    margin: 0.25em 0 0.5em;
    border-bottom: none;
    display: block;
}

#firstHeading {
font-family: 'Courier New', 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif;
    border-bottom: solid 3px var(--secondary-color);
   }

.mw-body .mw-heading, .mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6, .mw-body dt {
   font-family:'Courier New', 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif;
  font-size: 1.4em;
  font-weight: Bold;
  }

#mw-content-container {
    border-bottom: solid 4px var(--secondary-color);
}

    #p-logo-text a.long {
        font-size: 1.4em;
        padding: 0 0.15em 0 0;
        line-height: 0.8;
        letter-spacing: -0.02em;
        word-spacing: -0.3em;
        margin-top: 9px
      }
.th {
     background: var(--tertiary-color);
}

#mw-site-navigation {
        flex: 0 0 16em;
      }

   #user-tools #personal h2::after {
    display: none;
}

/* //// usertools / username */

@media screen and (min-width: 861px) {
    #personal {
        padding-left: 0em;
}    }

@media screen and (max-width: 850px) {
    .color-right, .color-middle, .color-left {
        background: var(--primary-color);
    }
}
#personal .dropdown label, #personal .dropdown h3 {
    color: var(--primary-color)
}


/* //////////////////////// new  */

/* Ensure the logo container has full width and is centered */
#p-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
}

/* Adjust the logo image for proper spacing */
#p-logo img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Optional: Ensure the navigation bar sits immediately below the logo */
#site-navigation {
    margin-top: 0;
    padding-top: 0px; /* Adjust as needed */
    border-top: 1px solid #ccc; /* Optional: Add a visual separation */
}

#mw-footer-container{
    background: var(--primary-color);

#footer-places-privacy {
    display:none;}
}

/* Hide specific sidebar links by default */
#n-watchlist, #n-preferences, #n-contributions, #n-The_Joe_Frank_Wiki:The_Heroes_Lounge{
    display: none;
}

/* Show the links only for logged-in users */
.logged-in #n-The_Joe_Frank_Wiki:The_Heroes_Lounge {
    display: block;
}