MediaWiki:Common.css: Difference between revisions

Jump to navigation Jump to search

MediaWiki:Common.css (view source)

Revision as of 09:18, 31 October 2024

859 bytes added ,  21 days ago
no edit summary
(Created page with "→‎Basic page reset: * { margin: 0; padding: 0; box-sizing: border-box; z-index: 1; →‎Set z-index higher to keep the content above the background: } html, body { height: 100%; font-family: Arial, sans-serif; position: relative; →‎Add relative positioning to body for z-index control: } →‎Style for the content: h1 { position: relative; →‎Ensure this is above the background: color: black; text-align: center; paddin...")
 
No edit summary
Line 1: Line 1:
/* Basic page reset */
/* Drone                      */
* {
/* a wikipedia skin by Chochem */
    margin: 0;
/* version 0.21                */
    padding: 0;
/* 2.1: Increased width        */
    box-sizing: border-box;
    z-index: 1; /* Set z-index higher to keep the content above the background */
}


html, body {
    height: 100%;
    font-family: Arial, sans-serif;
    position: relative; /* Add relative positioning to body for z-index control */
}


/* Style for the content */
/* STRUCTURE */
h1 {
    position: relative; /* Ensure this is above the background */
    color: black;
    text-align: center;
    padding: 20px;
    font-size: 3rem;
    background-color: rgba(255, 255, 255, 0.7); /* Translucent background to make text easier to read */
    border-radius: 20px;
}


p {
body {
    position: relative; /* Ensure this is above the background */
  background: none;
    padding: 5px;
  font-family: Droid Sans,Sans-Serif;
}
  font-size: 14px;
  line-height: 1.4;
  }


/* Container for the animated background */
#globalWrapper {
.background-container {
  position: relative;
    position: relative;
  width: 1024px;  
    width: 100%;
  margin: 0 auto;
    height: 100vh; /* Full screen height */
  }
    overflow: hidden;
    background-color: white; /* You can change the background color if needed */
    z-index: -1; /* Set z-index to a lower value to push it behind content */
    display: flex;
    justify-content: center; /* Align horizontal */
    align-content: center; /* Align vertical */
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
}


/* Rotated and animated background */
.background-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 400%;
    height: 400%;
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.2%22%20viewBox%3D%220%200%20810%20500%22%3E%3Cpath%20d%3D%22M%200%2C0%20h%2030%20v%20500%20h%20-30%20z%20M%2060%2C0%20h%2090%20v%20500%20h%20-90%20z%20M%20180%2C0%20h%2090%20v%20500%20h%20-90%20z%22%20style%3D%22fill%3A%23900%22/%3E%3Cpath%20d%3D%22M%20300%2C0%20h%2030%20v%20500%20h%20-30%20z%20M%20360%2C0%20h%2030%20v%20500%20h%20-30%20z%20M%20720%2C0%20h%2030%20v%20500%20h%20-30%20z%20M%20780%2C0%20h%2030%20v%20500%20h%20-30%20z%22%20style%3D%22fill%3A%23396%22/%3E%3Cpath%20d%3D%22M%20420%2C0%20h%2090%20v%20500%20h%20-90%20z%20M%20540%2C0%20h%2030%20v%20500%20h%20-30%20z%20M%20600%2C0%20h%2090%20v%20500%20h%20-90%20z%22%20style%3D%22fill%3A%23069%22/%3E%3C/svg%3E');
    background-size: 50%; /* Adjust the size of the logo as needed */
    background-repeat: repeat; /* Seamlessly repeat the background */
    background-position: 0 0;
    transform: translateX(-30%) rotate(45deg); /* Rotate the entire background by 45 degrees and move to fit */
    animation: scrollBackground 30s linear infinite; /* Infinite scroll animation */
    opacity: 1; /* Change to a value between 0 and 1 if you want the logo less prominent */
}


/* Keyframes for smooth scrolling effect */
#column-content {
@keyframes scrollBackground {
  position: relative;
    0% {
  padding-top: 100px;
        background-position: 100% 0;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAIAAADITs03AAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9gKAgokHU157GEAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAFElEQVQY02M4Y2zMxMDAMIoHBwYAeLMB+Y7y0c8AAAAASUVORK5CYII%3D) repeat-x;
    }
  float: right;
    100% {
  text-align: justify;
        background-position: 0 0; /* Move the background horizontally */
/* width: 584px; */
    }
  width: 859px;
}
  }


#column-one {
  position: relative !important;
  padding-top: 100px;
  float: left;
  width: 150px;
  font-size: 12px;
  }


/* Media query for screens narrower than 1000px */
 
@media (max-width: 1000px) {
/* FOOTER */
    .background-container::before {
#footer {
        content: '';
  margin: 50px 0;
    position: absolute;
  float: right;
    top: 0;
  clear: both;
    left: 0;
  width: 695px;
    width: 500%;
  }
    height: 500%;
 
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.2%22%20viewBox%3D%220%200%20810%20500%22%3E%3Cpath%20d%3D%22M%200%2C0%20h%2030%20v%20500%20h%20-30%20z%20M%2060%2C0%20h%2090%20v%20500%20h%20-90%20z%20M%20180%2C0%20h%2090%20v%20500%20h%20-90%20z%22%20style%3D%22fill%3A%23900%22/%3E%3Cpath%20d%3D%22M%20300%2C0%20h%2030%20v%20500%20h%20-30%20z%20M%20360%2C0%20h%2030%20v%20500%20h%20-30%20z%20M%20720%2C0%20h%2030%20v%20500%20h%20-30%20z%20M%20780%2C0%20h%2030%20v%20500%20h%20-30%20z%22%20style%3D%22fill%3A%23396%22/%3E%3Cpath%20d%3D%22M%20420%2C0%20h%2090%20v%20500%20h%20-90%20z%20M%20540%2C0%20h%2030%20v%20500%20h%20-30%20z%20M%20600%2C0%20h%2090%20v%20500%20h%20-90%20z%22%20style%3D%22fill%3A%23069%22/%3E%3C/svg%3E');
#footer > *:not(#f-list),
    background-size: 50%; /* Adjust the size of the logo as needed */
#globalWrapper #footer #f-list #copyright
    background-repeat: repeat; /* Seamlessly repeat the background */
  {display: none !important;}
    background-position: 0 0;
 
    transform: translateX(-80%) translateY(-40%) rotate(45deg); /* Rotate the entire background by 45 degrees and move to fit */
#f-list {
    animation: scrollBackground 30s linear infinite; /* Infinite scroll animation */
  position: relative;
    }
  padding: 0;
}
  list-style: none;
  }
#f-list li:not(#lastmod) {
  display: inline;
  margin-right: 2em;
  }
 
 
/* COLUMN-ONE */
 
/* collapsing menus */
.portlet .pBody {display: none !important;}
.portlet:hover .pBody {display: block !important;}
#p-cactions.portlet .pBody {display: block !important;}
 
/* reduce languages */
#p-lang li:not(.interwiki-da):not(.interwiki-de):not(.interwiki-es):not(.interwiki-fr):not(.interwiki-it) {display: none !important;}
 
/* logo substitution */
#p-logo {
  position: absolute;
  top: 0; left: 0;
  }
 
#p-logo a {
  background: #cc3333 no-repeat center url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAeCAYAAADaW7vzAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9gKAgsFBz1Gas8AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAADwklEQVRo3u2YXYhVVRTH/3vGr8map1ChJrIpQSKVBJGM6EHBogcfMqQ3CUnQfIgUhERHTe2DMgIfQundosYPSgWjMSvBEUvM0ZhxZDBwRpn81mnUXy/rwOJ09O4zzc3J9h8ud5//WWvf9bHPWutcKSEhISEhISEhISEh4R4CEIBvgevAm47P0DwQ/X/Zh52ZsUPFpn/izFgX/B8HkJBC/buckKraVFNlf3ok7ZXUJ2nrXdAfij4NyScn6gkZIrZu909ItVETYVCDC+Baxy9z/HLHr3D8w2WCD6x38qtvlzzHzQHmAx1AH3AQeK5g30bgC+AP4CrQAjxbIPcM8JP1h9PAUknnYg8U8CqwB+gF+oFOYBUwbLBPyTEzYK/jdgA3jd/p+F3GHY0IqOc+cnxTBdkMR/k7rgETnew4oNvu3bCEYAl82sk9AVwp2O9M/gm5Q0J2U4x1g52QLFiXgFqbNHqBw3YKeo2rAc6b7AcRAf3c9DY5bmWl05hz9m1gEtDkuM1O9kOXjClAPdCe/b6T+9Tpv2t7LjK92IRMB+YBDwBjgFMmd3qwEzLbGTEZeMrWWyyoAE+aExlmRQR0M7DBXa+IKQ+OO5aTPWl8h+PajGt13Ebjuh2XJakLCLlKEJWQAtu3mdzN2FjH1rYWSdcljZI0XVKt8Ycl1Ul6WdIM15OuStoXse/zkhpt3S5pfcmz0pG7Pi5pvKSHHPeofU8taMwPunWDff8aQvBybZJeiji0wyUtkTTXfKqXNKLsNBuVkBDCNWC/pJmSJku63261Shpp62mSspPQEkLoi9i6UdItM/hxSRslLS6RkNq8qVl8Crjzkk7EFITc9a1IWz6R9LqtD9lnpqTHqjX+vZU1dqDVJpGRwGibKA4A+01mSWTJ6bQS+JnjFpQoWe25t/qsZv/m+OPG/VzBv6zcdeb4L2NKFnDBuENZyQO+qdrI7PpGl/349+5eK3AO6DGZCZEBbbbrUbZHNv3MKNHU11rvWuO4TU52neOXAfcBw+wgbHByW/xUZP4usMMWk5BsejsC1FmDv1LVdxjgd2fMO47/2PEnS5xwzz0CnHWjZkOE/oWCEfMy0Ohk628zHueDPNFG5jx+iUzI1wW6B8smpOxfJ3vc2jftH9x690CSHULokvSK9aGxkpqBugpq2yStlNQt6U9JByTNCiF0uH0v2sDxvg0B/SZ7QtJ7Tq5N0os2qPRLOiXpNUlvRLqwUNJ3ptsjqUnSC5Ju/B/+Rc7w1b3mW81/3P6QEpKQEpKQkJCQkJBQGX8Bv7HSMT72oxgAAAAASUVORK5CYII%3D) !important;
  display:block;
  height:100px;
  width:150px;
  }
 
/* minor adjustments */  
#column-one ul {
  list-style: none;
  padding: 0;
  margin: 0;
  }
#column-one h5 {
  font-size: inherit;
  margin-bottom: 0.5em;
  }
#p-cactions li.selected a:before {content: "\00BB\  "}
#p-cactions li.new a {color: #cc3333}
#searchInput {display: block; clear: both;}
 
 
/* COLUMN-CONTENT */
.dablink {padding-left: 0 ; margin-left: 0;}
table.ambox-style, table.ambox {margin: 0; border: none ;}
#column-content h2 {border-bottom: 1px solid #333333;}
#toc.toc ul {list-style: none;}
#toctitle + ul {padding-left: 0;}
 
/* GLOBAL */
a {text-decoration: none; color: #3333CC;}
h1,h2,h3,h4,h5 {text-align: left;}
#bodyContent > ul,
#bodyContent > ol
  {margin-left: 0; padding-left: 1em;}
 
 
/* IMAGES */
 
.thumb {
  display: block;
  clear: none;
  width: auto;
  border: thin solid #AAAAAA;
  padding: 10px;
  font-size: 12px;
  }
.tright {float: right; margin: 10px 0 10px 10px}
.tleft {float: left ;margin: 10px 10px 10px 0;}
.tnone {float: none ;margin: 10px;}
.magnify {display: none;}
 
.metadata {top: 125px !important;}
 
 
/* TABLES */
 
/* wiki */
.wikitable,
.sortable {
  border-collapse: collapse !important;
  border: none !important;
  padding: 1em !important;
  background-color: white !important;
  font-size: 12px;
  }
 
.wikitable th,
.sortable th,
.sortable tr:first-child td {
  border: none !important;
  color: black !important;
  background: white !important;
  border-left: none;
  border-right: none;
  }
.wikitable tr:first-child,
.sortable tr:first-child {
  border-bottom: thick solid #DDDDDD !important;
  border-top: thick solid #DDDDDD !important;
  }
.sortable tr,
.wikitable tr {
  border-bottom: thin solid #DDDDDD !important;
  }
.wikitable td,
.sortable td {
  border: none !important;
  padding: 0.5em !important;
  background: white !important;
  }
.wikitable b {font-weight: normal !important;}
 
/* infobox */
table.infobox {margin-left: 15px !important;}
 
 
/* DELETIONS */
#contentSub,
#jump-to-nav
  {display: none;}
Retrieved from "https://anton2.wikibase.dev/wiki/Special:MobileDiff/25"

Navigation menu