MediaWiki:Medik.css
From Makerpedia
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.
/* All CSS here will be loaded for users of the Medik skin */
/* css from Aaron */
body {
height: 100%;
}
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 */
}
/* 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");
}
/* cece added this, modified by sameer */
.carousel-heading {
text-align: center;
font-size: 20px;
margin-bottom: 5px;
margin-top: 23px;
color: #003366;
}
.carousel-container {
position: relative;
display: block;
width: 75%;
margin: 0 auto;
overflow: hidden;
background-color: #d3ddf0;
margin-bottom: 20px;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
}
.carousel-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 400px;
box-sizing: border-box;
text-align: center;
}
.carousel-title {
margin-top: 10px;
font-size: 18px;
color: #333;
}
.carousel-item img {
width: 400px; /* Make the image take the full width of the carousel item */
height: 300px; /* Control the height to fit within the container */
max-width: 400px;
max-height: 300px;
object-fit: cover; /* Ensures the image covers the space without distortion */
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
}
.carousel-prev, .carousel-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: #003366;
color: white;
border: none;
padding: 10px 15px;
font-size: 20px;
cursor: pointer;
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
z-index: 20;
}
.carousel-next {
right: 5px;
}
.carousel-prev {
left: 5px;
}
.carousel-prev:hover, .carousel-next:hover {
background-color: #002244;
}
/* 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; }
}
