Difference between revisions of "MediaWiki:Common.css"

Revision as of 23:04, 19 December 2021

/* CSS placed here will be applied to all skins */

@media only screen and (min-width: 400px) {
#bodyContent {
  margin: 0 auto;
  width: 70%;
}
}
 
#p-logo {
  visibility: hidden;
}

#footer-poweredbyico {
  display: none;
}

.boxed-message {
  text-align: center; 
  padding: 0 2em;
  border: 1px solid silver; 
  margin: 1.5em 0;
}

:target {
    background-color: deepskyblue;
    transition: all 1s linear;
    scroll-margin-top: 150px;
}

.meta {
    position: relative;
    font-style:italic;
    color: #505050;
}

.meta.ref:hover {
    color: salmon;
    cursor: pointer;
    text-decoration: underline;
}

.meta-def {
    position: relative;    
    left: -0.1em;
    font-weight: bold;
    font-style: italic;
    font-size: 0.7em;
    vertical-align: sub;
}

.meta-def a {
	color: black;
}

.meta-progress {
    --gauge-fill: 0;
    display: inline-block;
    position: absolute;
    width: 0;
    height: 100%;
    background-color: cornflowerblue;
    opacity: 0%;
    border: thin dashed darkblue;
    transition: opacity 0.5s ease-out 0s, width 0.5s steps(1) 0s;
}

.meta-progress.active {
    width: var(--gauge-fill);
    opacity: 35%;
    transition: width 0.05s linear 0s;
}


/*Colour themes and settings**********************************************/
/*To set a custom theme in your own CSS files, copy the commented out section below to your own CSS file and add your own colors (remove the () and add the color, eg. #fff, and add a custom name to the end of "popupTheme", like "popupThemeCustom1" or "popupThemePurple"*/

/* .popupThemeCustom { 
    background-color: (replace this with the color) !important;
    color: (replace this with the color) !important;
}

.popupThemeCustom i {
    color: (replace this with the color) !important;
}

.popupThemeCustom i:hover {
    background-color: (replace this with the color) !important;
}

.pop-cont.pop-top.popupThemeCustom::after {
    border-color: (replace this with the color) transparent transparent transparent !important;
}

.pop-cont.pop-bottom.popupThemeCustom::before {
    border-color: transparent transparent (replace this with the color) transparent !important;
}

.pop-cont.pop-left.popupThemeCustom::after {
    border-color: transparent transparent transparent (replace this with the color) !important;
}

.pop-cont.pop-right.popupThemeCustom::before {
    border-color: transparent (replace this with the color) transparent transparent !important;
} */

/*CUSTOM THEME*************************************************************/
.popupThemeCustom { /*Change these settings to set up a custom theme*/
    background-color: #fffe00 !important;
    color: #333 !important;
}

.popupThemeCustom i {
    color: #333 !important;
}

.popupThemeCustom i:hover {
    background-color: #ead700 !important;
}

.pop-cont.pop-top.popupThemeCustom::after {
    border-color: #fffe00 transparent transparent transparent !important;
}

.pop-cont.pop-bottom.popupThemeCustom::before {
    border-color: transparent transparent #fffe00 transparent !important;
}

.pop-cont.pop-left.popupThemeCustom::after {
    border-color: transparent transparent transparent #fffe00!important;
}

.pop-cont.pop-right.popupThemeCustom::before {
    border-color: transparent #fffe00 transparent transparent !important;
}

/*Default theme**************/
.popupTheme {
    background-color: #333;
    background-size: 100% 100%;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 0;
    position: relative;
    box-shadow: 5px 5px 3px #888;
    z-index: 1;
    float: left;
    margin: 5px;
    cursor: pointer;
}

.popupTheme i, .popupThemeRed i, .popupThemeBlue i, .popupThemeGreen i, .popupThemeCustom i {
    width: 20px;
    height: 20px;
    font-size: 18px;
    color: #fff;
    display: block;
    background-color: transparent;
    padding: 10px;
    background-size: 100% 100%;
    cursor: pointer;
}

.popupTheme i:hover {
    background-color: #4d4d4d;
}

/*Blue theme*****************/
.popupThemeBlue {
    background-color: #02baf2;
}

.popupThemeBlue i:hover {
    background-color: #130e5a;
}

/*Red theme******************/
.popupThemeRed {
    background-color: #d80808;
}

.popupThemeRed i:hover {
    background-color: #8b0000;
}

/*Green theme****************/
.popupThemeGreen {
    background-color: #22bfa1;
}

.popupThemeGreen i:hover {
     background-color: #38938c;
}

/*Popup arrow theme and settings********************************************/
.pop-cont.pop-top::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -7px;
    border-width: 7px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
    z-index: 100;
}

.pop-cont.pop-bottom::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 50%;
    margin-left: -7px;
    border-width: 7px;
    border-style: solid;
    border-color: transparent transparent #333 transparent;
    z-index: 100;
}

.pop-cont.pop-left::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -7px;
    border-width: 7px;
    border-style: solid;
    border-color: transparent transparent transparent #333;
    z-index: 100;
}

.pop-cont.pop-right::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -14px;
    margin-top: -7px;
    border-width: 7px;
    border-style: solid;
    border-color: transparent #333 transparent transparent;
    z-index: 100;
}

/*Blue theme**************************************************************/
.pop-cont.pop-top.popupThemeBlue::after {
    border-color: #02baf2 transparent transparent transparent;
}

.pop-cont.pop-bottom.popupThemeBlue::before {
    border-color: transparent transparent #02baf2 transparent !important;
}

.pop-cont.pop-left.popupThemeBlue::after {
    border-color: transparent transparent transparent #02baf2!important;
}

.pop-cont.pop-right.popupThemeBlue::before {
    border-color: transparent #02baf2 transparent transparent !important;
}
/*Red theme***************************************************************/
.pop-cont.pop-top.popupThemeRed::after {
    border-color: #d80808 transparent transparent transparent;
}

.pop-cont.pop-bottom.popupThemeRed::before {
    border-color: transparent transparent #d80808 transparent !important;
}

.pop-cont.pop-left.popupThemeRed::after {
    border-color: transparent transparent transparent #d80808!important;
}

.pop-cont.pop-right.popupThemeRed::before {
    border-color: transparent #d80808 transparent transparent !important;
}
/*Green theme*************************************************************/
.pop-cont.pop-top.popupThemeGreen::after {
    border-color: #22bfa1 transparent transparent transparent;
}

.pop-cont.pop-bottom.popupThemeGreen::before {
    border-color: transparent transparent #22bfa1 transparent !important;
}

.pop-cont.pop-left.popupThemeGreen::after {
    border-color: transparent transparent transparent #22bfa1!important;
}

.pop-cont.pop-right.popupThemeGreen::before {
    border-color: transparent #22bfa1 transparent transparent !important;
}

/*Popup menu container********************************************************/
.pop-cont {
    margin: auto;
    position: relative;
    display: block;
    cursor: pointer;
    border-radius: 6px;
    box-shadow: 5px 5px 3px #888;
}

.pop-cont, .pop-item, .popupTheme {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

/*Individual menu item*/
.pop-item {
    height: 100%;
    display: block;
    width: 20px;
    height: 20px;
    text-align: center;
    padding: 10px;
    text-decoration: none;
    float: left;
}

.item-side {
    float: none !important;
}

.pop-item i {
    margin: -10px 0 0 -10px;
}

/*Position of the popup*******************************************************/
.pop-top {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
}

.pop-bottom {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -5px;
}

.pop-left {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    margin-top: -7px;
}

.pop-right {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    margin-top: -7px;
}

/*Animation classes and rules*************************************************/
.animate-standard {
    animation: animateStandard 0.3s 1 ease;
    -webkit-animation: animateStandard 0.3s 1 ease;
}

@-webkit-keyframes animateStandard {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes animateStandard {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0px);
        opacity: 1;
    }
}
/************************************************/
.animate-grow {
    animation: animateGrow 0.4s 1 ease;
    -webkit-animation: animateGrow 0.4s 1 ease;
}

@-webkit-keyframes animateGrow {
  0% {
    transform: scale(0) translateY(40px);
    opacity: 0;
  }
  70% {
    transform: scale(1.5) translate(0px);
  }
  100% {
    transform: scale(1) translate(0px);
    opacity: 1;
  }
}

@keyframes animateGrow {
  0% {
    transform: scale(0) translateY(40px);
    opacity: 0;
  }
  70% {
    transform: scale(1.5) translate(0px);
  }
  100% {
    transform: scale(1) translate(0px);
    opacity: 1;
  }
}
/************************************************/
.animate-flip {
    animation: animateFlip 0.4s 1 ease;
    -webkit-animation: animateFlip 0.4s 1 ease;
}

@-webkit-keyframes animateFlip {
  from {
    transform: rotate3d(2, 2, 2, 180deg);
    opacity: 0;
  }
  to {
    transform: rotate3d(0, 0, 0, 0deg);
    opacity: 1;
  }
}

@keyframes animateFlip {
  from {
    transform: rotate3d(2, 2, 2, 180deg);
    opacity: 0;
  }
  to {
    transform: rotate3d(0, 0, 0, 0deg);
    opacity: 1;
  }
}
/***************************************************/
.animate-bounce {
    animation: animateBounce 0.4s 1 ease-out;
    -webkit-animation: animateBounce 0.4s 1 ease-out;
}

@-webkit-keyframes animateBounce {
  0% {
    transform: translateY(40px);
    opacity: 0;
  }
  30% {
    transform: translateY(-40px);
  }
  70% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes animateBounce {
  0% {
    transform: translateY(40px);
    opacity: 0;
  }
  30% {
    transform: translateY(-40px);
  }
  70% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

/*Styling for the different menu item's borders****************************/
.leftBorder {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.rightBorder {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.bottomBorder {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.topBorder {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

/*Keeps popup menus hidden until needed****************************************/
.hidden {
    display: none !important;
}

.clear {
    clear: both;
}

/* The Alert Box (background) */
.alert {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1001; /* Sit on top */
    padding-top: 250px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
}

/* Alert Content */
.alert-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    border-radius:6px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
    max-width:700px;
    min-width: 300px;
    /*width settings for different browsers. Note that these won't work at all for IE and versions of Edge before v79*/
    width: fit-content; /*works in chrome and opera*/
    width: -moz-fit-content;/*works for firefox */
    width: -webkit-fit-content;/*works for Edge v79 and up*/
    width: -ms-fit-content;
    width: -o-fit-content;
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

.alert-header,
.alert-header.info {
    padding: 2px 16px;
    background-color: #02baf2;
    color: #fff;
    border-radius:5px 5px 0px 0px;
    text-align: center;
}

.alert-header.success {
    background-color: #00cc1b;
}

.alert-header.danger {
    background-color: #ff0000;
}

.alert-header.warning {
    background-color: #f7931e;
}

.alert-body {
    padding: 2px 16px;
    text-align: left;
    font-size: 18px;
    font-weight: bold;
    color: #000;
    min-height: 40px;
}

.alert-footer,
.alert-footer.info {
    padding: 15px 16px;
    background-color: #02baf2;
    color: #fff;
    border-radius:0px 0px 5px 5px;
    text-align: center;
}

.alert-footer.success {
    background-color: #00cc1b;
}

.alert-footer.danger {
    background-color: #ff0000;
}

.alert-footer.warning{
    background-color: #f7931e;
}

.alert-close,
.alert-close.info {
    padding: 5px 15px;
    border-radius: 3px;
    border: 0;
    background-color: #fff;
    color: #02baf2;
    font-weight: bold;
    box-shadow: 5px 5px 10px #666;
}

.alert-close.success {
    color: #00cc1b;
}

.alert-close.danger {
    color: #ff0000;
}

.alert-close.warning {
    color: #f7931e;
}

.alert-close:hover {
    color: #000;
    text-decoration: none;
    cursor: pointer; 
}

.alert-close:focus {
    outline: none;
}