Difference between revisions of "MediaWiki:Common.css"
Jump to navigation
Jump to search
(3 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 22: | Line 20: | ||
} | } | ||
− | .verse { | + | .verse { |
− | color:#0645BF; | + | color:#0645BF; |
− | cursor:pointer | + | 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 */