Difference between revisions of "MediaWiki:Common.css"
Jump to navigation
Jump to search
| (5 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
| − | + | body { font-size: 18px; } | |
#siteSub { display:block; font-weight:normal; font-size:normal;} | #siteSub { display:block; font-weight:normal; font-size:normal;} | ||
body.page-Main_Page.action-view #siteSub, body.page-Main_Page.action-submit #siteSub { display: none; } | body.page-Main_Page.action-view #siteSub, body.page-Main_Page.action-submit #siteSub { display: none; } | ||
| − | |||
| − | |||
.infobox { | .infobox { | ||
border: 1px solid #a2a9b1; | border: 1px solid #a2a9b1; | ||
| Line 21: | Line 19: | ||
text-align: left; | text-align: left; | ||
} | } | ||
| + | |||
| + | .verse { | ||
| + | color:#0645BF; | ||
| + | cursor:pointer | ||
| + | } | ||
| + | .hover { | ||
| + | visibility:hidden; | ||
| + | box-shadow: 0 0 10px rgba(0,0,0,0.5); | ||
| + | background-color:#eee; | ||
| + | width:250px; | ||
| + | height:250px; | ||
| + | position:absolute; | ||
| + | font-weight:normal; | ||
| + | font-size:16px; | ||
| + | } | ||
| + | |||
| + | .hvr-header { | ||
| + | background-color:#aaa; | ||
| + | cursor: move; | ||
| + | padding:5px 10px | ||
| + | } | ||
| + | |||
| + | .hvr-header .close { | ||
| + | display:inline-block; | ||
| + | cursor:pointer; | ||
| + | float:right; | ||
| + | font-weight:900; | ||
| + | font-size:18px; | ||
| + | line-height:15px | ||
| + | } | ||
| + | |||
| + | .hvr-content { | ||
| + | padding:20px; | ||
| + | height:160px; | ||
| + | overflow-y:scroll; | ||
| + | } | ||
| + | |||
| + | .hvr-content img { | ||
| + | position: relative; | ||
| + | top: 33%; | ||
| + | left: 33%; | ||
| + | } | ||
| + | |||
| + | /* keyframes*/ | ||
| + | @-webkit-keyframes mwe-popups-fade-in-up{ | ||
| + | 0%{opacity:0;-webkit-transform:translate(0,20px);-moz-transform:translate(0,20px);-ms-transform:translate(0,20px);transform:translate(0,20px)} | ||
| + | 100%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)} | ||
| + | } | ||
| + | @-moz-keyframes mwe-popups-fade-in-up{ | ||
| + | 0%{opacity:0;-webkit-transform:translate(0,20px);-moz-transform:translate(0,20px);-ms-transform:translate(0,20px);transform:translate(0,20px)} | ||
| + | 100%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)} | ||
| + | } | ||
| + | @keyframes mwe-popups-fade-in-up{ | ||
| + | 0%{opacity:0;-webkit-transform:translate(0,20px);-moz-transform:translate(0,20px);-ms-transform:translate(0,20px);transform:translate(0,20px)} | ||
| + | 100%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)} | ||
| + | } | ||
| + | @-webkit-keyframes mwe-popups-fade-in-down{ | ||
| + | 0%{opacity:0;-webkit-transform:translate(0,-20px);-moz-transform:translate(0,-20px);-ms-transform:translate(0,-20px);transform:translate(0,-20px)} | ||
| + | 100%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)} | ||
| + | } | ||
| + | @-moz-keyframes mwe-popups-fade-in-down{ | ||
| + | 0%{opacity:0;-webkit-transform:translate(0,-20px);-moz-transform:translate(0,-20px);-ms-transform:translate(0,-20px);transform:translate(0,-20px)} | ||
| + | 100%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)} | ||
| + | } | ||
| + | @keyframes mwe-popups-fade-in-down{ | ||
| + | 0%{opacity:0;-webkit-transform:translate(0,-20px);-moz-transform:translate(0,-20px);-ms-transform:translate(0,-20px);transform:translate(0,-20px)} | ||
| + | 100%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)} | ||
| + | } | ||
| + | @-webkit-keyframes mwe-popups-fade-out-down{ | ||
| + | 0%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)} | ||
| + | 100%{opacity:0;-webkit-transform:translate(0,20px);-moz-transform:translate(0,20px);-ms-transform:translate(0,20px);transform:translate(0,20px)} | ||
| + | } | ||
| + | @-moz-keyframes mwe-popups-fade-out-down{ | ||
| + | 0%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)} | ||
| + | 100%{opacity:0;-webkit-transform:translate(0,20px);-moz-transform:translate(0,20px);-ms-transform:translate(0,20px);transform:translate(0,20px)} | ||
| + | } | ||
| + | @keyframes mwe-popups-fade-out-down{ | ||
| + | 0%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)} | ||
| + | 100%{opacity:0;-webkit-transform:translate(0,20px);-moz-transform:translate(0,20px);-ms-transform:translate(0,20px);transform:translate(0,20px)} | ||
| + | } | ||
| + | @-webkit-keyframes mwe-popups-fade-out-up{ | ||
| + | 0%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)} | ||
| + | 100%{opacity:0;-webkit-transform:translate(0,-20px);-moz-transform:translate(0,-20px);-ms-transform:translate(0,-20px);transform:translate(0,-20px)} | ||
| + | } | ||
| + | @-moz-keyframes mwe-popups-fade-out-up{ | ||
| + | 0%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)} | ||
| + | 100%{opacity:0;-webkit-transform:translate(0,-20px);-moz-transform:translate(0,-20px);-ms-transform:translate(0,-20px);transform:translate(0,-20px)} | ||
| + | } | ||
| + | @keyframes mwe-popups-fade-out-up{ | ||
| + | 0%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)} | ||
| + | 100%{opacity:0;-webkit-transform:translate(0,-20px);-moz-transform:translate(0,-20px);-ms-transform:translate(0,-20px);transform:translate(0,-20px)} | ||
| + | } | ||
| + | .mwe-popups-fade-in-up{ | ||
| + | -webkit-animation:mwe-popups-fade-in-up 0.2s ease forwards; | ||
| + | -moz-animation:mwe-popups-fade-in-up 0.2s ease forwards; | ||
| + | animation:mwe-popups-fade-in-up 0.2s ease forwards | ||
| + | } | ||
| + | .mwe-popups-fade-in-down{ | ||
| + | -webkit-animation:mwe-popups-fade-in-down 0.2s ease forwards; | ||
| + | -moz-animation:mwe-popups-fade-in-down 0.2s ease forwards; | ||
| + | animation:mwe-popups-fade-in-down 0.2s ease forwards | ||
| + | } | ||
| + | .mwe-popups-fade-out-down{ | ||
| + | -webkit-animation:mwe-popups-fade-out-down 0.2s ease forwards; | ||
| + | -moz-animation:mwe-popups-fade-out-down 0.2s ease forwards; | ||
| + | animation:mwe-popups-fade-out-down 0.2s ease forwards | ||
| + | } | ||
| + | .mwe-popups-fade-out-up{ | ||
| + | -webkit-animation:mwe-popups-fade-out-up 0.2s ease forwards; | ||
| + | -moz-animation:mwe-popups-fade-out-up 0.2s ease forwards; | ||
| + | animation:mwe-popups-fade-out-up 0.2s ease forwards | ||
| + | } | ||
| + | /* end keyframes */ | ||
Latest revision as of 00:38, 29 May 2023
/* CSS placed here will be applied to all skins */
body { font-size: 18px; }
#siteSub { display:block; font-weight:normal; font-size:normal;}
body.page-Main_Page.action-view #siteSub, body.page-Main_Page.action-submit #siteSub { display: none; }
.infobox {
border: 1px solid #a2a9b1;
border-spacing: 3px;
background-color: #f8f9fa;
color: black;
margin: 0.5em 0 0.5em 1em;
padding: 0.2em;
float: right;
clear: right;
font-size: 88%;
line-height: 1.5em;
}
.infobox td, .infobox th {
vertical-align: top;
text-align: left;
}
.verse {
color:#0645BF;
cursor:pointer
}
.hover {
visibility:hidden;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
background-color:#eee;
width:250px;
height:250px;
position:absolute;
font-weight:normal;
font-size:16px;
}
.hvr-header {
background-color:#aaa;
cursor: move;
padding:5px 10px
}
.hvr-header .close {
display:inline-block;
cursor:pointer;
float:right;
font-weight:900;
font-size:18px;
line-height:15px
}
.hvr-content {
padding:20px;
height:160px;
overflow-y:scroll;
}
.hvr-content img {
position: relative;
top: 33%;
left: 33%;
}
/* keyframes*/
@-webkit-keyframes mwe-popups-fade-in-up{
0%{opacity:0;-webkit-transform:translate(0,20px);-moz-transform:translate(0,20px);-ms-transform:translate(0,20px);transform:translate(0,20px)}
100%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
}
@-moz-keyframes mwe-popups-fade-in-up{
0%{opacity:0;-webkit-transform:translate(0,20px);-moz-transform:translate(0,20px);-ms-transform:translate(0,20px);transform:translate(0,20px)}
100%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
}
@keyframes mwe-popups-fade-in-up{
0%{opacity:0;-webkit-transform:translate(0,20px);-moz-transform:translate(0,20px);-ms-transform:translate(0,20px);transform:translate(0,20px)}
100%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
}
@-webkit-keyframes mwe-popups-fade-in-down{
0%{opacity:0;-webkit-transform:translate(0,-20px);-moz-transform:translate(0,-20px);-ms-transform:translate(0,-20px);transform:translate(0,-20px)}
100%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
}
@-moz-keyframes mwe-popups-fade-in-down{
0%{opacity:0;-webkit-transform:translate(0,-20px);-moz-transform:translate(0,-20px);-ms-transform:translate(0,-20px);transform:translate(0,-20px)}
100%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
}
@keyframes mwe-popups-fade-in-down{
0%{opacity:0;-webkit-transform:translate(0,-20px);-moz-transform:translate(0,-20px);-ms-transform:translate(0,-20px);transform:translate(0,-20px)}
100%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
}
@-webkit-keyframes mwe-popups-fade-out-down{
0%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
100%{opacity:0;-webkit-transform:translate(0,20px);-moz-transform:translate(0,20px);-ms-transform:translate(0,20px);transform:translate(0,20px)}
}
@-moz-keyframes mwe-popups-fade-out-down{
0%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
100%{opacity:0;-webkit-transform:translate(0,20px);-moz-transform:translate(0,20px);-ms-transform:translate(0,20px);transform:translate(0,20px)}
}
@keyframes mwe-popups-fade-out-down{
0%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
100%{opacity:0;-webkit-transform:translate(0,20px);-moz-transform:translate(0,20px);-ms-transform:translate(0,20px);transform:translate(0,20px)}
}
@-webkit-keyframes mwe-popups-fade-out-up{
0%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
100%{opacity:0;-webkit-transform:translate(0,-20px);-moz-transform:translate(0,-20px);-ms-transform:translate(0,-20px);transform:translate(0,-20px)}
}
@-moz-keyframes mwe-popups-fade-out-up{
0%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
100%{opacity:0;-webkit-transform:translate(0,-20px);-moz-transform:translate(0,-20px);-ms-transform:translate(0,-20px);transform:translate(0,-20px)}
}
@keyframes mwe-popups-fade-out-up{
0%{opacity:1;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
100%{opacity:0;-webkit-transform:translate(0,-20px);-moz-transform:translate(0,-20px);-ms-transform:translate(0,-20px);transform:translate(0,-20px)}
}
.mwe-popups-fade-in-up{
-webkit-animation:mwe-popups-fade-in-up 0.2s ease forwards;
-moz-animation:mwe-popups-fade-in-up 0.2s ease forwards;
animation:mwe-popups-fade-in-up 0.2s ease forwards
}
.mwe-popups-fade-in-down{
-webkit-animation:mwe-popups-fade-in-down 0.2s ease forwards;
-moz-animation:mwe-popups-fade-in-down 0.2s ease forwards;
animation:mwe-popups-fade-in-down 0.2s ease forwards
}
.mwe-popups-fade-out-down{
-webkit-animation:mwe-popups-fade-out-down 0.2s ease forwards;
-moz-animation:mwe-popups-fade-out-down 0.2s ease forwards;
animation:mwe-popups-fade-out-down 0.2s ease forwards
}
.mwe-popups-fade-out-up{
-webkit-animation:mwe-popups-fade-out-up 0.2s ease forwards;
-moz-animation:mwe-popups-fade-out-up 0.2s ease forwards;
animation:mwe-popups-fade-out-up 0.2s ease forwards
}
/* end keyframes */
