Utilisateur:Signimu/minitel.css

/* Minitel CSS style for MediaWiki
 * by LRQ3000
 * v2.3.0
 * Released under MIT License
 */

/* THEME:
The main theme is based on lime, all the other colors are derived from it:
* split complementary: Rose #ff0080, Vermilion #ff4000
* complementary: Red
* monochromatic: Malachite #2ee62e
* analogous: Cyan/Aqua, Chartreuse #80ff00
* triadic: Flush Orange #ff8000, Magenta/Fuchsia
* tetradic: Red, Flush Orange #ff00ff, Blue (replaced by #00c9fe for usability)
* use Color Contrast Analyzer to check usability.
*/

/* OVERALL COLOR AND BACKGROUND THEME */
body, #mw-page-base, #mw-head-base, #mw-head-base, #mw-panel, #mw-mf-viewport, #mw-mf-page-center, #bodyContent, #content {
    background-color: black;
    background-image: none;
    color: lime;
    /* display: none; this could be enabled and then reversed by the javascript to avoid the first glimpse before the script loads, but this would have an usability issue in case the user does not have javascript */
}
.mw-body {
    background-color: black;
    color: lime;
    border: none;
}

/* HIDE CLASS */
/* this is used by the JS script to hide all elements during animation */
.hide { display:none; visibility: hidden; }
script { display: none; visibility: hidden; } /* hide javascript code, else it gets printed just like any other text */

/* BANNER SETUP */
#accueil_2017_bloc-titre h2, #accueil_2017_bloc-titre p{display:none; visibility:hidden;}
div#accueil_2017_bloc-titre, div#accueil_2017_bloc-titre pre {
    all: initial;
    * {
        all: unset;
    };
    /* Style of the Minitel style animated banner (via JS) */
    font-size: 1.0em; /* Do not set this bigger than 1em, else smaller screens will have overlapping issues with the two columns of the banner (because there will be a wrong detection of the size of the content, because it will be based on the defined size of columns which is too small) */
    font-family: courier, monospace; /* ensure correct figlet display with fixed-size font - firefox for android mobile does not support courier */
    white-space: pre; /* important for figlet, will avoid breaking the lines hideously in the middle of the banner if div width too small (ie, for small screens) */
    color: lime;
    /* Increase size of div to increase the parent column */
    /*width: 30em;*/
    /* height: 10em; */
    /* margin: 0 0 0 -25px; /* The figlet is a bit too big to stay inside the column, we trick the display by using a negative margin */
    margin: 0; /* for Safari <= 5 */
    vertical-align: top;
    overflow: visible;
    display: block;
    line-height: 1; /* necessary for compatibility with old IE < 10 and some mobile browser such as Firefox, else there will be too big gaps between lines of the banner */
    /* Not sure this should be here or in div.colonnes below */
    break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
}
pre {
    /* The banner is included in <pre> blocks to ensure correct display in old browsers */
    color: lime;
    background-color: black;
    border: 0;
    line-height: 1; /* necessary for compatibility with old IE < 10 and some mobile browser such as Firefox, else there will be too big gaps between lines of the banner */
}
#accueil_2017_bloc-liens {
    /*adjust margin to align with the minitel title*/
    /* margin-top:-10em; */
}
#accueil_2017_bandeau>div.colonnes {
    /* Add a visible vertical line to separate the banner from the links */
    column-rule-style: solid;
    column-rule-width: 1px;
    column-fill: balance; /* auto would be better but fails on Firefox, so keep balance (default) */
}
div#accueil_2017_en-tete{background-image:none; background-color:black; border:0;}
div#accueil_2017_bandeau{background-image:none; background-color:black; border:0;}

/* MOBILE BANNER */
div#mw-mf-page-center div.header-container {
    background-color: black;
}

/* LOGO */
/* Desktop */
.mw-wiki-logo{
    /* Main logo */
    background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Wikipedia-logo-v2-fr-minitel-2.svg/135px-Wikipedia-logo-v2-fr-minitel-2.svg.png);
    background-color: black;
}
/* Mobile */
.branding-box h1, .footer-content h2 img{display: none;}
.branding-box, .footer-content h2{background-image: url(https://upload.wikimedia.org/wikipedia/commons/3/34/Wp-logo-mobile-figlet.png); background-repeat: no-repeat; background-position: center;}
.footer-content h2{background-position: left; height: 20px;}

/* LINKS AND TEXT COLORS */
h2 {color: lime; border-color: lime; border-bottom: 1px solid;}
#mw-content-text .accueil_2017_cadre h2 {border-color: lime;}
div#catlinks {background-color: lime; border-color: lime;}
div#mw-navigation div.portal h3{color: lightgrey;}
div#mw-head #p-personal ul li{color: lightgrey;}
div.vectorTabs li span {
    color: lime;
    background-color: black;
    background-image: none;
}
div.vectorTabs li.selected a,div.vectorTabs li.selected a:visited{color:#ff0080}
div.vectorTabs li.new a,div.vectorTabs li.new a:visited{color:#ff0080}
div.vectorTabs li a{color:lime}
a:active{color:#ff0080}
a:visited{color:magenta}
.mw-parser-output a{color:#ff0080}
.mw-parser-output a:visited{color:magenta}
.mw-parser-output a.external{color:#ff4000}
.mw-parser-output a.external:visited{color:#ff8000}
.mw-parser-output a.extiw{color:#ff4000}
.mw-parser-output a.extiw:visited{color:#ff8000}
a.external{color:#ff4000}
a.external:visited{color:#ff8000}
div#mw-panel div.portal div.body ul li a{color:cyan}
div#mw-panel div.portal div.body ul li a:visited{color:#00c9fe}
div#mw-head #p-personal ul li a{color:cyan}
div#mw-head #p-personal ul li a:visited{color:#00c9fe}
.hlist a, .hlist-separated a{color:#ff0080}
.hlist-separated, .hlist{color:#ff0080} /* does not work */
a.internal, ul#footer-places li a, ul#footer-info li a{color:#ff0080}
a.internal:visited, ul#footer-places li a:visited, ul#footer-info li a:visited{color:magenta}
ul#footer-places li a.extiw{color:#ff4000}
ul#footer-places li a.extiw:visited{color:#ff8000}
#footer ul li{color: lightgreen;}
footer.minerva-footer a {color: #ff0080;}
footer.minerva-footer a:visited {color: magenta;}
.wb-langlinks-link > a:link,.wb-langlinks-link > a:visited { color: lightgrey !important; }
.wb-langlinks-link > a:hover { color: grey !important; }
/*a.stub{color:red}a.new,#p-personal a.new{color:red}a.new:visited,#p-personal a.new:visited{color:red}*/

/* HORIZONTAL LINES AND BORDERS FIX */
div.mw-body-content{border: 0}
.firstHeading{border: 0}
div#siteSub{display:none; visibility:hidden} /* no idea why this shows up, only way is to hide it explicitly... */
div.view-border-box {background-color: black;}
div#mw-head div.vectorMenu h3, div.vectorTabs, div.vectorTabs ul, div.vectorTabs span{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAuCAMAAADeMYNYAAAABlBMVEUA/wD/qAC3RXxPAAAAC0lEQVR4AWOgIQAAAFwAAXPCaU0AAAAASUVORK5CYII=);} /* mwhead vertical separator */
div#mw-panel div.portal div.body {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIwAAAABCAMAAAA7MLYKAAAABlBMVEUA////qABpQHq+AAAAC0lEQVR4AWMYTAAAAI0AARD71n0AAAAASUVORK5CYII=);} /* left menu separator */
footer.minerva-footer, footer.minerva-footer .view-border-box{border-color:lime;} /* mobile footer */
h1, h2, h3, h4, h5, h6{border-color: lime;}
div.footer-content h2{border-color: lime;}
/* Hide printed footer */
.printfooter { display: none; }

/* Blinking animation to liven up a bit the title */
/* from https://en.wikipedia.org/wiki/Blink_element */
blink, .blink {
  -webkit-animation: blink 2s step-end infinite;
  -moz-animation: blink 2s step-end infinite;
  -o-animation: blink 2s step-end infinite;
  animation: blink 2s step-end infinite;
}

@-webkit-keyframes blink {
  67% { opacity: 0 }
}

@-moz-keyframes blink {
  67% { opacity: 0 }
}

@-o-keyframes blink {
  67% { opacity: 0 }
}

@keyframes blink {
  67% { opacity: 0 }
}

/* Desktop icons images replacement */
#pt-userpage,#pt-anonuserpage{
    background-position:left top;
    background-repeat:no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAOCAMAAAAsYw3eAAAAM1BMVEUAAADY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NgA7+/Y2NgfRM3BAAAAD3RSTlMAECAwQFBgcICfr7/P3+8Gi+IRAAAAVklEQVQI1z2MMRKAIBDEcoKo4DH5/2stYEyVFLsARLuvYFFSnWXFUDUBOFwUgLKjApCqznVxqtoAYkTtY5zxBDxmA+rrvRdjqi9Mf6D/3uHI7VkA6gI+2B0FuCTLmqMAAAAASUVORK5CYII=);
}
#pt-notifications-alert .mw-echo-notifications-badge:before{
    background-image:url("data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <path d="M17.5 14V9c0-3-2.3-5-5.5-5S6.5 6 6.5 9v5c0 2 0 3-2 3v1h15v-1c-2 0-2-1-2-3zM12 20H9c0 1 1.6 2 3 2s3-1 3-2h-3z" id="path2" style="fill:#f0f0f0" /> </svg>");
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAXVBMVEUAAAD////////v7+/w8PDz8/Px8fHy8vLv7+/w8PDw8PDv7+/w8PDx8fHv7+/v7+/v7+/v7+/w8PDw8PDx8fHw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PA6bVHWAAAAHnRSTlMAAwUQERYlJjFCRHN1f4CBgoOVnp/IytDR0uHi6/VXdYweAAAAYElEQVR42r3N2QqAIBCFYbUs26xsNZf3f0wpomGkO8H/cj44Q3JWjtq5cyjie23801XhO9X+7aAIWv/VIOgBOgQSQGaHGWBCoAAUgZgwAEaw+AN8SWy/V7Yf4Ku1C09YDkaVEnDY1VW1AAAAAElFTkSuQmCC);
}
#pt-notifications-notice .mw-echo-notifications-badge:before{
    background-image:url("data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <path d="M3 13.35l1.8-7.2c.2-.996.81-1.8 1.8-1.8h10.8c.99 0 1.6.867 1.8 1.8l1.8 7.2v4.5c0 .99-.81 1.8-1.8 1.8H4.8c-.99 0-1.8-.81-1.8-1.8v-4.5zm6.96 1.8h4.08c-.49.557-1.212.9-2.04.9a2.68 2.68 0 0 1-2.04-.9h4.08c.414-.472.66-1.098.66-1.8h4.14l-1.44-7.2H6.6l-1.44 7.2H9.3c0 .702.246 1.328.66 1.8z" id="path2" style="fill:#f0f0f0" /> </svg>");
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAgVBMVEUAAAD////////j4+Pr6+vt7e3v7+/w8PDw8PDw8PDw8PDx8fHu7u7x8fHx8fHw8PDw8PDw8PDw8PDw8PDw8PDv7+/w8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDw8PDK9UJpAAAAKnRSTlMAAQgJDQ4gISIjMjY9SUpTVIaHiImUlZiZnZ6qubq7yMnQ0t3o7O37/P443wA0AAAAiUlEQVR4Ab3P2Q6CMBSE4cFFUcEdXFDEBQvz/g9og82E9gH4rk7yX0wOBrO6FnJZQsY1ez4jhZRZLBlThSM3kC0PuivOIHM+4EzMN4JEtZm6c80beu5MNbFDz14j1X9b6xoxLO1jCazEHiWNC+ycYJ3Z8ULztho/BBRaBloXXgw8XVjkhSePMYwfwLgZbrNBMU8AAAAASUVORK5CYII=);
}

/* Mobile menu images replacement */
.mw-ui-icon-minerva-mainmenu:before,.mw-ui-icon-mainmenu:before {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAACVBMVEUAAAAA/wD/qACRQSxAAAAAAXRSTlMAQObYZgAAABZJREFUeAFjGGDAiAlwS5AJRl1FfwAAiCkAcy7DuzoAAAAASUVORK5CYII=);}
.mw-ui-icon-minerva-notifications:before,.mw-ui-icon-notifications:before {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wCoAADkTHArAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gMMAwYk8jEoTwAAAWFJREFUSMftVM8qxFEU/ubOuDmu0y8LahbCcqykZmWHrZSFwhNYKMXCgleYUJQ8gTfwAFKUKBYeQZFi0uQ347s2PzUNZu6PWQinbrfuPef7zn/gR0jJZIQ6K9RtoS5b77rbip8A+7pzbr2TEFvTSkHZMwZgseF5JOvNivUu28o+8+kPc10Obp/gfBP7CwBzFVO+TpUS6511jA6TdJwIdaLeW6EOCnVHqFWh3gm1kIrAMdpKwA96me9sojcu1IpjdNnvhzqCwJU9+cSzK+udDWiAdaF6x2ghtMhTAHIANuPMUxzg0x6AF4IzQQQ11AoAYGGPQyKumPItgBsAw6EROAAg+JiibPcA9Etz8F35bQQlkwFQBBAbmEoKnAcAfY7RQKsBm056ei3lMhwVaizU3VaKp0I9ClliHzi3IdTnxihydQqTBIsAkPWmJtRUBATf7iUAq+8ICAqAszbUtYp/+VvyCszSghlLI+TFAAAAAElFTkSuQmCC);}
.mw-ui-icon-minerva-magnifying-glass:before,.mw-ui-icon-magnifying-glass:before {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAA2FBMVEUAAAAEgAAJ/AAI3AAd/hUI7gAQ/wYJ/AAS/gkO/wQJ/gAJ/gAJ/AAM/wIJ/AAO/wQM/wIJ/gAJ/gAM/wIJ/gAM/wIM/wIM/wIM/wIK/wAM/wIK/wAK/wAM/wIK/wAM/wIM/wIK/wAJ/gAK/wAJ/gAK/wAM/wIM/wIK/wAK/wAJ/gAK/wAK/wAK/wAM/wIK/wAK/wAM/wIK/wAM/wIM/wIM/wIM/wIK/wAK/wAK/wAK/wAK/wAK/wAK/wAK/wAK/wAK/wAK/wAK/wAK/wAK/wAK/wAK/wD/qADXBJL7AAAARnRSTlMAAQMEBQcODxAREhUYGRskJTEyMzQ8PkRIS0xQV2lqbHJzdIaIiouRkp6foKOkpaqur7Gytbi8xcbHyMnL1tff6fP09vf+/V7yvQAAAMlJREFUKM+dktUSgzAURKm7uyt1dzfK+f9PKu0AofLUfdrsmXuT2Ykk/SlbujldDkqhzzyx46W77HrLCwqcep35FTYeSx5XOGeext1SWdjE/j3noO4rUDRBGjLmYcnB9DJHsTaHakxLE7oC+CElptsCOCFr+AFzAaIQM3yZm9cEda5Ow4fuYlfgYr1Qhqqeb1GiArjWsMr7HJH6BWbWrjwLdKnQeGu9eNAilH5k/EG0J6SySa1zxzfRZR9B6yd5ztR+E3kY/ud7PADIzCCFBTvNwgAAAABJRU5ErkJggg==);}

.copyleft { /* unused, was initially planned to show a copyleft logo along with the 2000 date */
    /* Rotate a copyright html character into a copyleft */
    display:inline-block;
    transform: rotate(180deg);
}

textarea {
  color:lime;
  background-color:black;
}
.btn {
  background-color:white;
  color:black;
}

/* April's Fools fish image */
@keyframes swimEffect {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0px);
  }
}

#aprilfish {
    /* div containing the fish, define its position on viewport and its size */
    position:fixed; /* place the image absolutely relatively to viewport */
    bottom: 0;
    right: 0;
    background-color: transparent; /* transparent image */
    width:20%; /* resize with viewport (this will also resize the image since we have set its size at auto */
    height:20%;
    opacity:0.5; /* make it transparent */
    z-index:100;
    animation-name: swimEffect;
    animation-duration: 2.2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
#aprilfish img {
    /* autoresize the image according to the parent aprilfish div */
    display: block;
    width: auto; /* auto resize image with parent size */
    height: auto;
    max-width: 100%; /* maximum size relative to the parent */
    max-height: 100%;
}
#aprilfish:hover {
    /* highlight aprilfish when mouse hover over it */
    opacity:1.0;
}

/* Keep pixelated style for images */
img, canvas {
    image-rendering: optimizeSpeed;
    image-rendering: -moz-pixelated;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -o-pixelated;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
    /* Deprecated: attempt at downsampling and upsampling using only CSS and no JS (would work if all images had a tight div parent, but not necessarily the case here)
    transform: scale(0.5);
    width: 435;
    height: 600;
    */
}