MediaWiki:Common.css: Difference between revisions

Latest revision as of 10:29, 8 August 2022

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

/* Fix for unexpected Blockquote behaviour vis https://github.com/ProfessionalWiki/chameleon/issues/222 */

blockquote:not([class]) {
    margin: 1em 40px;
    border-left: 4px solid #eaecf0;
    padding: 8px 32px;
}

/* Setup for Ken Burns effect on MLK image on Main Page - https://www.kirupa.com/html5/ken_burns_effect_css.htm */
.thumbcaption { /* Sets this on all thumb DIVS on all mediawiki pages, but I don't think this is too much of a problem */
    overflow: hidden;
    z-index: 10;
    position: relative;
    background-color: #fff;
}
#Mlkihaveadreamcolorizedpubdom1 {
  overflow: hidden;
}
#Mlkihaveadreamcolorizedpubdom1 img {
  animation: kenburns 60s infinite;
}
@keyframes kenburns {
  0% {
    transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
    animation-timing-function: ease-in-out;
  }
  50% {
    transform: scale3d(1.5, 1.5, 1.5) translate3d(40px, 30px, 0px);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
    animation-timing-function: ease-in-out;
  }
}

@@ Line 1: / Line 1: @@
 /* CSS placed here will be applied to all skins */
-/* From - https://webapps.stackexchange.com/questions/3851/how-can-i-float-the-table-of-contents-to-the-right-with-mediawiki */
+/* Fix for unexpected Blockquote behaviour vis https://github.com/ProfessionalWiki/chameleon/issues/222 */
-/* #toc {float:right;margin:0 0 1em 1em;position:fixed;top:150px;right:10px;}; */
-@font-face {
+blockquote:not([class]) {
-    font-family: 'Poppl-Laudatio';
+     margin: 1em 40px;
-    src: url('Poppl-Laudatio-RegularA.woff2') format('woff2'),
+     border-left: 4px solid #eaecf0;
-        url('Poppl-Laudatio-RegularA.woff') format('woff'),
+     padding: 8px 32px;
-        url('Poppl-Laudatio-RegularA.ttf') format('truetype'),
-        url('Poppl-Laudatio-RegularA.svg#Poppl-Laudatio-RegularA') format('svg');
-     font-weight: normal;
-     font-style: normal;
-     font-display: swap;
 }
-@font-face {
+/* Setup for Ken Burns effect on MLK image on Main Page - https://www.kirupa.com/html5/ken_burns_effect_css.htm */
-    font-family: 'GeoSlab703 MdCn BT';
+.thumbcaption { /* Sets this on all thumb DIVS on all mediawiki pages, but I don't think this is too much of a problem */
-    src: url('GeometricSlab703BT-MediumCond.woff2') format('woff2'),
+    overflow: hidden;
-        url('GeometricSlab703BT-MediumCond.woff') format('woff'),
+     z-index: 10;
-        url('GeometricSlab703BT-MediumCond.ttf') format('truetype'),
+     position: relative;
-        url('GeometricSlab703BT-MediumCond.svg#GeometricSlab703BT-MediumCond') format('svg');
+     background-color: #fff;
-     font-weight: 500;
-     font-style: normal;
-     font-display: swap;
 }
+#Mlkihaveadreamcolorizedpubdom1 {
-# Customise default Chameleon skin
+  overflow: hidden;
+}
-.p-navbar {
+#Mlkihaveadreamcolorizedpubdom1 img {
-     background-color: #f8934a;
+  animation: kenburns 60s infinite;
+}
+@keyframes kenburns {
+% {
+    transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
+    animation-timing-function: ease-in-out;
+  }
+% {
+    transform: scale3d(1.5, 1.5, 1.5) translate3d(40px, 30px, 0px);
+    animation-timing-function: ease-in-out;
+  }
+% {
+     transform: scale3d(1, 1, 1) translate3d(0px, 0px, 0px);
+    animation-timing-function: ease-in-out;
+  }
 }