Difference between revisions of "MediaWiki:Common.css"

From Conceptual Reconstructionism Project
Tag: Manual revert
 
(24 intermediate revisions by the same user not shown)
Line 12: Line 12:
}
}


#footer-poweredbyico {
#footer-poweredbyico, .mw-redirectedfrom {
   display: none;
   display: none;
}
}
Line 31: Line 31:
.meta {
.meta {
     position: relative;
     position: relative;
    display: inline-block;
     font-style:italic;
     font-style:italic;
     color: #505050;
     color: #505050;
Line 72: Line 73:
}
}


 
.meta-menu {
/*Colour themes and settings**********************************************/
  display: none;
/*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"*/
  position: absolute;
 
  background-color: #f1f1f1;
/* .popupThemeCustom {  
  min-width: 160px;
    background-color: (replace this with the color) !important;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    color: (replace this with the color) !important;
  z-index: 1;
}
 
.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 {
.meta-menu > div {
    border-color: transparent transparent transparent #fffe00!important;
  padding: 0.2em 1em;
}
}


.pop-cont.pop-right.popupThemeCustom::before {
.meta-menu div {
    border-color: transparent #fffe00 transparent transparent !important;
  color: black;
  font-style: normal;
  text-decoration: none;
}
}


/*Default theme**************/
.meta-menu > div:hover {
.popupTheme {
     background-color: #ddd;
    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;
     cursor: pointer;
}
}


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


.popupTheme i:hover {
.meta-menu {
     background-color: #4d4d4d;
     font-size: 0.8em;
}
}


/*Blue theme*****************/
.context-menu-anchor {
.popupThemeBlue {
     display: inline-block;
    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 {
.context-menu-anchor:hover {
    border-color: transparent #22bfa1 transparent transparent !important;
}
 
/*Popup menu container********************************************************/
.pop-cont {
    margin: auto;
    position: relative;
    display: block;
     cursor: pointer;
     cursor: pointer;
    border-radius: 6px;
    box-shadow: 5px 5px 3px #888;
}
}


.pop-cont, .pop-item, .popupTheme {
.broken-ref-link {
     -webkit-box-sizing: content-box;
     background-color: red;
    -moz-box-sizing: content-box;
     color: white !important;
    box-sizing: content-box;
     font-weight: bold;
}
 
/*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 {
Music reconstruction
    display: none !important;
**********************/
}
 
.clear {
    clear: both;
}


/* The Alert Box (background) */
.audio-player {
.alert {
     position: sticky;
    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;
     top: 0;
    width: 100%; /* Full width */
     background-color: rgba(255, 255, 255, 0.8);
    height: 100%; /* Full height */
     z-index: 2;
    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 */
.audio-player figure {
.alert-content {
     display: none;
     position: relative;
     align-items: center;
     background-color: #fefefe;
     margin: 0.2em 0;
     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 */
.audio-player figure.active {
@-webkit-keyframes animatetop {
     display: flex;
     from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}
}


@keyframes animatetop {
.audio-player figcaption {
     from {top:-300px; opacity:0}
     font-size: 0.65em;
     to {top:0; opacity:1}
     margin: 1em;
}
}


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


.alert-header.success {
.audio-player .track-menu div {
     background-color: #00cc1b;
     display: inline-block;
    font-size: 0.6em;
    height: 2em;
    width: 2em;
    border-radius: 50%;
    border: 2px solid black;
    margin: 0 0.2em;
    transition: background-color 0.7s ease-out 0s;
    cursor: pointer;
}
}


.alert-header.danger {
.audio-player .track-menu div.selected {
    background-color: #ff0000;
     font-size: 0.7em;
}
 
.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;
     font-weight: bold;
    box-shadow: 5px 5px 10px #666;
     color: white;
}
     background-color: black;
 
.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;
}
}

Latest revision as of 17:58, 16 January 2022

/* 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, .mw-redirectedfrom {
  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;
    display: inline-block;
    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;
}

.meta-menu {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.meta-menu > div {
  padding: 0.2em 1em;
}

.meta-menu div {
  color: black;
  font-style: normal;
  text-decoration: none;
}

.meta-menu > div:hover {
    background-color: #ddd;
    cursor: pointer;
}

.meta:hover .meta-menu,
.context-menu-anchor:hover .meta-menu {
    display: block;
}

.meta-menu {
    font-size: 0.8em;
}

.context-menu-anchor {
    display: inline-block;
}

.context-menu-anchor:hover {
    cursor: pointer;
}

.broken-ref-link {
    background-color: red;
    color: white !important;
    font-weight: bold;
}

/**********************
 Music reconstruction
**********************/

.audio-player {
    position: sticky;
    top: 0;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 2;
}

.audio-player figure {
    display: none;
    align-items: center;
    margin: 0.2em 0;
}

.audio-player figure.active {
    display: flex;
}

.audio-player figcaption {
    font-size: 0.65em;
    margin: 1em;
}

.audio-player .track-menu {
    text-align: center;
}

.audio-player .track-menu div {
    display: inline-block;
    font-size: 0.6em;
    height: 2em;
    width: 2em;
    border-radius: 50%;
    border: 2px solid black;
    margin: 0 0.2em;
    transition: background-color 0.7s ease-out 0s;
    cursor: pointer;
}

.audio-player .track-menu div.selected {
    font-size: 0.7em;
    font-weight: bold;
    color: white;
    background-color: black;
}