MediaWiki:Common.css
MediaWiki interface page
More actions
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)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
.page-Main_Page .firstHeading { display:none; }
/* Change color of category links at the bottom of articles */
.catlinks a {
color: #E59F2D !important; /* Orange example */
}
/* Change color on hover */
.catlinks a:hover {
color: #0066ff !important; /* Blue on hover */
}
#home-header {
padding: 0.5rem 0;
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #fff, #e8f2f8) repeat scroll 0 0;
border-bottom:1px solid #aaa;
}
#home-header .title {
border:none;
margin-top:0
}
#home-left {
float:left;
width:100%;
clear:both;
}
#home-center {
float:center;
width:60%;
word-wrap: break-word;
clear:both;
}
#home-right {
float:right;
width:33%;
}
#home-cat {
display:flex;
flex-flow:row wrap;
justify-content: space-evenly;
align-items:stretch;
}
.home-block {
border-radius:0.3rem;
box-shadow:0 0 0.3rem #999;
margin:0.8rem 0;
padding: 0.1rem 1rem 1rem;
}
#home-cat .home-block {
width:30%;
padding:0;
overflow:hidden;
text-align:center;
display:flex;
flex-direction:column;
}
#home-cat .home-block .head {
background-size: cover;
height: 64px;
}
#home-cat .home-block .head .cattitle {
display: block;
position: relative;
float:center;
width: 100%;
height: 100%;
}
#home-cat .home-block .head .cattitle span {
display: block;
position:absolute;
top:25px;
left:20px;
font-size:30px;
}
#home-cat .home-block .content {
padding:0 1rem;
flex:1;
justify-content: flex-end
}
#home-cat .home-block table {
font-size:8pt;
width:100%;
border-spacing:0px 5px;
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
}
.responsive-image {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto; /* Center the image */
}
/* Container to hold the custom boxes */
.custom-box-container {
display: flex;
flex-wrap: wrap; /* Allows boxes to wrap to the next line if necessary */
justify-content: center; /* Centers the boxes horizontally */
gap: 20px; /* Space between the boxes */
margin: 20px auto; /* Center the container itself */
max-width: 1000px; /* Adjust as needed */
}
/* Custom box styles */
.custom-box {
background-color: #444444;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: -10px 0px; /* Adjusted padding to reduce height */
text-align: center;
max-width: 300px; /* Maximum width of the box */
flex: 1 1 calc(33.333% - 40px); /* Adjust width as needed */
transition: transform 0.2s; /* Optional: Add a transition effect */
}
/* Boony boony boon boon */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700;800&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
min-height: 100vh;
background: #232427;
}
body .container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
max-width: 1200px;
margin: 40px 0;
}
body .container .card {
position: relative;
min-width: 300px;
height: 320px;
box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2),
inset -5px -5px 15px rgba(255, 255, 255, 0.1),
5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(255, 255, 255, 0.1);
border-radius: 15px;
margin: 30px;
transition: 0.5s;
}
body .container .card .box .content a {
background: #2196f3;
}
body .container .card .box {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
background: #2a2b2f;
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
transition: 0.5s;
}
body .container .card .box:hover {
/*transform: translateY(-50px);*/
}
body .container .card .box:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: rgba(255, 255, 255, 0.03);
}
body .container .card .box .content {
padding: 20px;
text-align: center;
}
body .container .card .box .content h2 {
position: absolute;
top: -10px;
right: 30px;
font-size: 8rem;
color: rgba(255, 255, 255, 0.1);
}
body .container .card .box .content h3 {
font-size: 1.8rem;
color: #fff;
z-index: 1;
transition: 0.5s;
margin-bottom: 15px;
}
body .container .card .box .content p {
font-size: 1rem;
font-weight: 300;
color: rgba(255, 255, 255, 0.9);
z-index: 1;
transition: 0.5s;
}
body .container .card .box .content a {
position: relative;
display: inline-block;
padding: 8px 20px;
background: black;
border-radius: 5px;
text-decoration: none;
color: white;
margin-top: 20px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
transition: 0.5s;
}
body .container .card .box .content a:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
background: #fff;
color: #000;
}
/* Horizontal lines only in tables */
table.wikitable {
border: 2px solid #999999;
border-collapse: collapse;
}
/* Horizontal lines, no verticals */
table.wikitable th,
table.wikitable td {
border-top: 1px solid #999;
border-bottom: 1px solid #999;
border-left: none;
border-right: none;
padding: 0.4em;
}
/* Zebra striping */
table.wikitable tr:nth-child(even) td {
background-color: #333538;
}
/* Container grid */
.doc-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); /* smaller min size */
gap: 0.75rem; /* tighter spacing */
margin: 1em 0;
}
/* Individual cards */
.doc-card {
background: #555555;
border: 1px solid #ddd;
border-radius: 8px; /* slightly smaller corners */
padding: 0.6em; /* less padding inside */
text-align: center;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
transition: transform 0.15s, box-shadow 0.15s;
}
.doc-card:hover {
transform: translateY(-2px);
box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}
/* Icon styling */
.doc-icon img {
width: 68px; /* smaller icons */
height: auto;
margin-bottom: 0.4em;
}
/* Title link */
.doc-title {
font-weight: bold;
margin-bottom: 0.25em;
font-size: 0.95em; /* slightly smaller */
line-height: 1.2em;
}
/* Description text */
.doc-desc {
font-size: 0.8em; /* smaller description */
color: #ddd;
}