Toggle menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Common.css: Difference between revisions

MediaWiki interface page
No edit summary
No edit summary
 
(55 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
.page-Main_Page .firstHeading { display:none; }
#content { background-color: #eeeeee; }
 
#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 */
}

Latest revision as of 12:04, 16 June 2024

.page-Main_Page .firstHeading { display:none; }

#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 */
}