MediaWiki:Common.css: Difference between revisions

Revision as of 13:10, 17 June 2022

/* CSS placed here will be applied to all skins */
.hero-img{
max-width: 80%;
}
.hero-img p a img{
 width: 125%;
 height: auto;
}
.banner-cont p{
 font-size: 22px;
 font-weight: 400;
 color: #212529;
 line-height: 1.5;
}
.ch-1 .row{
 display:flex;
 justify-content: space-around;
 padding:20px 25px 35px 25px;
 }
.ch-1 .row .column{
 max-width: 28%;
 }
.ch-2 .row{
 display:flex;
 justify-content: space-around;
 padding:20px 25px 35px 25px;
 }
.ch-2 .row .column{
 max-width: 28%;
 }
.cha-cont{
 width: 93%;
 background: #f4f4f4;
 padding: 15px;
 margin:unset;
 line-height: 1.5;
 box-shadow: 10px 10px 24px 4px rgba(0,0,0,0.20);
 -webkit-box-shadow: 10px 10px 24px 4px rgba(0,0,0,0.20);
 -moz-box-shadow: 10px 10px 24px 4px rgba(0,0,0,0.20);
}
.ch-1{
  padding: 0px 15px;
}
.ch-title{
  font-size: 32px;
  font-weight: bold;
  padding:15px;
  margin: 30px 0px;
}
.fakeimg{
 width: 100%;
}
.fakeimg img{
 width: 100%;
}
.ch-2{
  padding: 0px 15px;
}
.cha-cont h2 {
    min-height: 71px;
}
.btn{
 text-align: center;
 margin: 50px 0px;
}
.btn-grp{
 display: flex;
 justify-content: flex-start;
 margin-left: 6px;
}
.btn a{
 padding: 15px 20px;
 background: #98A44C;
 color: #fff !important;
 font-size: 14px;
 font-weight: 700;
 text-decoration: none;
 margin-left: 20px;
 background-image: unset !important;
}
.btn a:hover{
 border: 2px solid #98A44C;
 color:#98A44C !important;
 background: #fff;
 margin-left: 20px;
}
.btn-1 a{
 padding-right: 20px !important;
}
.btn-grp-2{
 display: flex;
 justify-content: center;
 margin-left: -40px;
}
.card-2{
 width: 400px;
 height: auto;
}
.ch-btn{
 margin: 30px 0px !important;
}
.cha-title-2{
 color: #3366bb;
}
.card-2 .cha-cont h2{
 font-weight: 700;
}
.cards-2{
 left: 40px;
 position: relative;
}
.footer {
 display: flex;
 background-color: #98A44C;
 justify-content: space-between;
 padding:50px 25px;
}

.fakeimg img{
 border-radius: 10px 10px 0px 0px;
}

.cha-cont{
 border-radius: 0px 0px 10px 10px;
}

/*=================================================  Chapter Page Css  =========================================*/

.left-side{
 background-color: #F6F6F6;
 background-size: cover;
 background-repeat: no-repeat;
 padding: 50px 30px;
}
.left-side ul li{
 margin-bottom: 10px;
}
/*.right-side{
 background-color: #F6F6F6;
 background-size: cover;
 background-repeat: no-repeat;
 padding: 50px 30px;
}*/
.right-side ul li{
 margin-bottom: 10px;
}
.chapter-titel{
 text-align: center;
 font-weight : bold;
 border: none;
}
.name{
 border-bottom: 1px solid #000;
}
.cha-title{
 font-size: 18px;
 backgroud: unset;
 font-family: sans-serif !important;
 color: #595825;
 font-weight: 600;
}
.mw-headline{
 font-family: sans-serif !important;
}
.cha-cont pre{
 background: unset !important;
 border: none !important;
 white-space: normal !important;
 padding: unset !important;
 overflow-x: unset !important;
}

.btn-grp-2{
 display: flex;
 justify-content: center;
 margin-left: -40px;
}
.ch-owner{
  font-size: 28px !important;
  font-weight: 700 !important;
  margin-top: -30px !important;
  margin-bottom: 30px !important;
}
.title-bg{
  background: #CCCE84;
  padding: 15px;
  font-weight: 600;
  color: #000;
  font-size: 28px;
  margin:unset;
  text-align:center;
}
.cont-bg{
  background: #FBFCE3;
  padding: 15px;
  font-weight: 400;
  color: #212529;
  font-size: 16px;
  margin:unset;
  line-height: 1.5;
}
.fakeimg-use img {
    border-radius: 10px !important;
}
.cha .ch-1{
 margin-top: 5%;
}
.cha .ch-1 .row{
 display:flex;
 justify-content: space-between !important;
 padding:35px 25px;

}
.cha .ch-1 .row .column{
 max-width: 28%;
}
.fakeimg-name{
 text-align: center;
 margin-top: 5%;
 font-weight: 700;
 font-size: 20px;
 text-transform: uppercase;
}
/*====================================================== New Media Quarey ================================*/

@media only screen and (max-width : 767px){
.mw-headline{
 font-size: 20px;
 line-height: 30px;
}
.hero-img{
 max-width: 100% !important;
}
.hero-img img{
 width: 100% !important;
 height: auto important;
}
.banner-cont p{
 font-size:14px !important;
}
.ch-1 .row{
 display:contents !important;
}
.ch-1 .row .column{
 max-width: 100% !important;
 margin-bottom: 20%;
}
.ch-2 .row{
 display:contents !important;
}
.ch-2 .row .column{
 max-width: 100% !important;
 margin-bottom: 20%;
}
.cards-2{
 left: 1px !important;
 position: relative;
}
.card-2{
 width: 95% !important;
}
.cha-cont {
    width: 100% !important;
}
/*========================================== Chapter Page Media =================================*/

.cha .ch-1{
 padding: unset !important;
}
.cha .ch-1 .row{
 display: contents !important;
}
.cha .ch-1 .row .column {
    max-width: 100% !important;
}
}

@media only screen and (min-width : 768px) and (max-width : 1370px){
.mw-headline{
 font-size: 20px;
 line-height: 30px;
}
.hero-img{
 max-width: 100% !important;
}
.hero-img img{
 width: 100% !important;
 height: auto important;
}
.banner-cont p{
 font-size:14px !important;
}
.ch-1 .row{
 display: flex;
 justify-content: space-around;
 padding: unset !important;
}
.ch-1 .row .column{
 margin-bottom: 8% !important;
}
.ch-2 .row{
 display: flex;
 justify-content: space-around;
 padding: unset !important;
}
.ch-2 .row .column{
 margin-bottom: 8% !important;
}
.cards-2{
 left: 1px !important;
 position: relative;
}
.btn-grp {
 display: contents !important;
 justify-content: flex-start;
 margin-left: 6px;
}
.btn {
 text-align: center;
 margin: 50px 0px;
 max-width: 100% !important;
}
.btn a{
 padding: 15px 15px !important;
 margin-left: unset !important;
}
.cha-cont{
 width: 100% !important;
}
.cards-2{
 left: 30px !important;
 position: relative;
}

/*========================================== Chapter Page Media =================================*/

.cha .ch-1 .card-2 {
    width: 100%;
    height: auto;
}
.cha .ch-1 .cha-cont {
    width: 90% !important;
}
}
@media only screen and (min-width : 768px) and (max-width : 1080px){
.home .ch-1 .cha-cont{
 width: 85% !important;
}
.home .ch-2 .cha-cont{
 width: 85% !important;
}

.cha-cont{
 width: 40% !important;
}
.card-2 .cha-cont h2{
 height: 150px;
}
}
@media only screen and (min-width : 1081px) and (max-width : 1365px){
.home .ch-1 .cha-cont{
 width: 90% !important;
}
.home .ch-2 .cha-cont{
 width: 90% !important;
}
.cha-cont{
 width: 50% !important;
}
.card-2 .cha-cont h2{
 height: 150px;
}
.cha .ch-1 .card-2{
 width: 260px !important;
}
}
@media only screen and (min-width : 1366px) and (max-width : 1440px){
.btn-grp {
 display: contents !important;
}
.cards-2{
 left: 30px !important;
 position: relative;
}
.home .ch-1 .cha-cont{
 width: 90% !important;
}
.home .ch-2 .cha-cont{
 width: 90% !important;
}
.cha-cont{
 width: 70% !important;
}
.cha .ch-1 .row .column {
   max-width: 30% !important;
}
.cha .ch-1 .card-2{
 width: 320px !important;
}
}