MediaWiki:Timeless.css: Difference between revisions

Latest revision as of 07:24, 30 December 2024

:root {
    --primary-color: #154169; /* Navy blue */
    --secondary-color: #0929ca; /* another blue */
    --tertiary-color: #652c3f; /* red */
    --lighter-color: #37a; /* Pale blue */
    --infobox-header-color: #72777d; /* gray */
    --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;
    --visited: #6a60b0;
    --link: #36c;
}

body.page-Main_Page #mw-page-header-links{
display:none;
height:1px;
}


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

.infobox td{
   color:var(--primary-color);
   font-family: var(--bodytext-family);
   font-size:1.1em;
   }

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

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


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


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


#page-tools > div.sidebar-inner {
a:link {color: var(--link);}
a:visited {color: var(--visited);}
a:hover {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(----primary-color);
  }

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

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

.color-middle{
background: var(--primary-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(--primary-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 -- this isnt working    */
#n-watchlist, #n-preferences, #n-contributions, #n-The_Joe_Frank_Wiki:The_Heroes_Lounge {
    display: none;
}

@media screen and (max-width: 850px) {
    #site-navigation h2 {
 filter: invert(1) brightness(3);
}}


@media screen and (max-width: 850px) {
    #site-tools h2 {
filter: invert(1) brightness(3);
    }
}

@media screen and (max-width: 850px) {
    #user-tools h2 {
filter: invert(1) brightness(3);
    }
}

#mw-indicator-mw-helplink {
margin: -1em 0 0 0 ;
}

#mw-mf-display-toggle {
a:link  {
color:#c1dcff;}}

p {
    margin: .5em 0;
}

@media only screen and (max-width: 800px) {
    .mw-body-content .mw-halign-right {
        float: none !important; /* Remove the float on small screens */
        display: block;
        width: 100%; /* Make image full width */
        margin: 0 auto; /* Center the image */
        max-width: 100%; /* Ensure the image does not exceed screen width */
        height: auto; /* Maintain the aspect ratio */
    }
}

body {
color:#180909;
}