MediaWiki:Medik.css: Difference between revisions

Latest revision as of 03:24, 9 April 2025

/* All CSS here will be loaded for users of the Medik skin */

/* css from Aaron */
@font-face {
  font-family: georgia;
  src: url(images/fonts/georgia.ttf);
}

body {
  height: 100%;
  --cc-white: #edeff7;
  --cc-blue: #003069;
}

.bg-ws {
  background-color: var(--cc-blue);
}

#p-banner {
  font-family: georgia;
  font-weight: 100;
}

#mw-navigation {
  background-color: var(--cc-blue);
}

#mw-main-container .row {
  background-color: var(--cc-white);
}

h2, h1, h3 {
    font-family: Arial, Helvetica, sans-serif;
}

/*[show*='vid'] img, [show*='none'] img {
  display: none;
}

[show*='img'] .videoBox, [show*='none'] .videoBox {
  display: none;
}*/

/* the following affects project tutorial pages: */

.sxs img {
  image-orientation: from-image;
  float: left;
  margin-right: 2em;
  width: min(calc(95vmin - 6em), 40vmax);
  height: auto;
}

.sxs {
  counter-reset: section;
}

.sxs h3::before {
  counter-increment: section;
  content: "Step " counter(section) ": ";
}

.sxs div {
  overflow: auto;
  margin-bottom: 1em;
  padding: 2em;
  padding-top: 0;
  border: 1px #ccc solid;
  box-shadow: 2px 2px 3px rgba(0,0,0,.25);
}

.sxs div h3{
  margin-top: .5em;
  border-bottom: .5px solid #ccc;
}

.sxs div:nth-child(odd) img {
  float: right;
  margin-left: 2em;
  margin-right: 0;
}

.sxs div:nth-child(odd) {
  border-radius: .5em;
}

.sxs div:nth-child(even) {
  background-color: #eee;
  border-radius: .5em;
}

.overview {
  background-color: rgba(0,70,200,.2);
  border-radius: 1em; 
  padding-left: 1em; 
  padding-right: 1em; 
  padding-top: .01em;
  padding-bottom: .75em;
}
/* end of css from Aaron */

/* top navigation */
#mw-navbar {
  align-items: start; /* this correctly aligns search bar and profile dropdown menu */
}

aside {
  display: none;
}

/* left sidebar navigation */
#mw-navigation {
  background-color: var(--medik); /* this value gets set in LocalSettings.php */
  padding: 0
}

/* extra text: "navigation" that shows up above sidebar and should be hidden */
#p-navigation-label {
  visibility: hidden;
}

/* text in sidebar */
#mw-navigation a:not(.disabled), #mw-navigation a:not(.disabled):hover {
  color: white;
  text-align: center;
}

/* the following only for desktop mode */
@media screen and (min-width: 768px) {
  /* align logo and title in top navigation */
  #p-banner {
    display: flex;
    align-items: center;
  }
  
  /* logo in top navigation */
  #p-banner .mw-wiki-logo {
    width: 3.5em;
    height: 3.5em;
  }

  /* site title in top navigation */
  .mw-desktop-sitename {
    font-size: 2em;
    padding-left: .75em;
  }

  #mw-navigation {
    max-width: 7em; /* default is for left navigation to be quite wide; make it narrower */
  }

  #site-navigation {
    width: 100%; /* let content of side navigation fill full width */
  }

  #mw-navigation a {
    padding: 0;
  }

  /* style icons that come before each page title in sidebar */
  #site-navigation li a::before {
    text-align: center;
    display: block;
    content: '';
    background-size: 2em;
    height: 2em;
    width: 2em;
    margin: auto;
    margin-top: 1em;
    filter: invert(1); /* change icons from black to white */
  }
}

#site-navigation li a:hover {
  filter: invert(.25); /* change icons and text from white to slightly gray on hover */
}

#site-navigation li {
  text-align: center;
}

#n-HOME a::before {
  background-image: url("images/icons/home.svg");
}

#n-SPACES a::before {
  background-image: url("images/icons/door.svg");
}

#n-TOOLS a::before {
  background-image: url("images/icons/tools.svg");
}

#n-PROJECT-TUTORIALS a::before {
  background-image: url("images/icons/gallery.svg");
}

#n-SUBMIT-PROJECT a::before {
  background-image: url("images/icons/howTo.svg");
}

/* Homepage */

.homeInfoBox {
  background-color: #eee; 
  padding: 10px 20px; 
  width: 16vw; 
  min-width: 350px;
  height: 5vw;
  min-height: 130px; 
  border-radius: 1em;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.125) inset, -5px -5px 5px 0px rgba(255,255,255,0.5) inset;
}



/* filter buttons on both Tools and Project Tutorials pages */
button.filter-btn {
    border-radius: .5em;
    margin: .2em;
    background-color: white;
    height: 2.2em;
}

button.filter-btn:hover, button.filter-btn.selected-filter {
    background-color: var(--medik);
    color: white;
}

/* set icons of filter buttons on both Tools and Project Tutorials pages to white when hovered or selected */
button.filter-btn:hover img, button.filter-btn.selected-filter img {
    filter: brightness(0) invert(1);
}

#category-filter {
  margin-bottom: 2em; /* add space after filter buttons and before results on Tools and Project Tutorials pages */
}

/* currently affects skill badges on both Spaces page and Individual Project pages */
img.skill-badge-img, .skill-badge-img img {
  width: 55px;
}

.skill-badge-img:hover, .skill-badge-img:hover img {
  width: 50px;
}

@media (max-width: 768px) {
    .pc-map { display: none !important; }
}

@media (min-width: 769px) {
    .mobile-map { display: none !important; }
}