Abrir menú principal
CEBES Perquín

Cambios

MediaWiki:Common.css (ver código)

Revisión del 14:45 1 feb 2022

4529 bytes añadidos ,  14:45 1 feb 2022
sin resumen de edición
/* Los estilos CSS colocados aquí se aplicarán a todas las apariencias */
/* Oculta título y categorías en la Portada */
 
body.page-Portada h1.firstHeading, body.page-Portada #catlinks-sidebar { display:none; }
 
/* Oculta artículos destacados de la versión móvil en la versión de escritorio */
/* Common.css no se tiene en cuenta en la versión móvil (Mobile.css) */
}
/* Oculta fecha de última modificacion en pie de páginas */
/*.lastmod, #lastmod {
display:none;
}
/* ocultar la tabla de contenidos */.toc, #toc { display: none; }
/* Responsive two column layout */
color:#6C3483;
border-bottom:3px solid #A569BD;
}
 
.column-style-5{
display:table-cell;
vertical-align:middle;
padding:10px;
font-weight:bold;
color:#105B7E;
border-bottom:3px solid #4B9CC1;
}
}
 
/*Botones*/
.boton-blue{
text-decoration: none;
.boton-blue:hover{
color: #1883ba;
background-color: #ffffff;
}
 
.boton-green{
text-decoration: none;
padding: 10px;
font-weight: 600;
font-size: 20px;
color: #ffffff;
border-radius: 6px;
background-color: #117A65;
}
 
.boton-green:hover{
color: #117A65;
background-color: #ffffff;
}
 
.boton-grey{
text-decoration: none;
padding: 10px;
font-weight: 600;
font-size: 20px;
color: #ffffff;
border-radius: 6px;
background-color: #797D7F;
}
 
.boton-grey:hover{
color: #797D7F;
background-color: #ffffff;
}
/* Efecto Poemas */
.wrap{
width: 1100px;
margin: 50px auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.tarjetacontainer{position: relative; width:100%; height: 100%; perspective: 1000px; transform-wrapstyle: preserve-3d;  } .card{ marginposition: absolute; width: 100%; height: 100%;display: flex; place-items: center; border-left: rgba(255, 255, 255, 0.342) 1px solid; border-top: rgba(255, 255, 255, 0.342) 1px solid; border-radius: 20px; backdrop-filter: blur(30px); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 20px; color: 10pxwhite; backface-visibility: hidden; font-webkitfamily: Arial, Helvetica, sans-serif; transform: rotateY(0deg); transform-perspectivestyle: 800preserve-3d; perspective transition: 8002.5s cubic-bezier(0.4, 0.2, 0.2, 1); } .front{ background: rgba(255, 255, 255, 0.109); transform: rotateY(0deg); padding: 10px; 
} .tarjetaback{ width background: 300pxrgba(255, 255, 255, 0.109); height transform: 350pxrotateY(180deg); background padding: #F2972010px; position } .container: relative;hover > .front{ -webkit- transform-style: preserverotateY(-3d180deg); } .container:hover > .back{ transform-style: preserve-3drotateY(0deg); -webkit-transition: } .7s ease;btn{ transition border: .7s ease1px solid white; -webkit-box-shadow background: 0px 10px 15px -5px rgba(0255,0255,0255,0.6521); box padding: 10px 20px; border-shadowradius: 0px 10px 15px 20px; text-5px rgba(0,0,0,decoration: none; color: white; transition: all 0.65)5s; } .btn:hover{ padding: 10px 40px; background: white; color:black }
.pm-frame {
border-radius: .2em;
margin: 1em 0 2em 0;
box-shadow: 0 0 .3em #999;
transition: all 0.25s;
}
.adelante, .atraspm-frame:after { width: 100%; height: 100%; position: absolute; topdisplay: 0block; leftcontent: 0""; -webkit-backface-visibility: hidden; backface-visibilityclear: hiddenboth;
}
.adelantepm-frame-header { border-radius: .2em; color: #fff; padding: .4em .8em .5em; font-weight: bold;}.pm-frame-header:before { display: inline-block; /* Add some content in order to get normal line height, then make it transparent */ content: "x"; color: transparent; width: 100%40px; opacity: .7; background-size: 27px; background-repeat: no-repeat; background-position: left center;}.pm-content-rtl .tb-frame-header:before { background-position: right center;}.pm-frame-body { padding: 1em;
}
#flip-container{
-webkit-perspective: 1000px;
perspective: 1000px;
padding: 50px;
position: relative;
margin: 10px auto;
width: 500px;
}
.carta {
position: relative;
width: 500px;
height: 50px;
transition: 0.6s;
transform-style: preserve-3d;
transform-origin: 100% 25px;
margin: 5px;
}
.carta:hover, .carta.flip{
transform: rotateX(180deg);
}
.cara, .atras{
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
text-align: center;
}
.cara{
transform: rotateX(0deg);
z-index: 2;
background-color: #e93e29;
color: #FFF;
font: 1em/1.8em Arial;
display: flex;
align-items: center;
justify-content: center;
}
.atras{
-webkit- transform: rotateYrotateX(180deg); transform /*background: rotateYrepeating-linear-gradient(180deg -45deg, #ececec, #ececec 10px, #dedede 10px, #dedede 20px );*/}
padding: 15px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
text-align.titulo_boton { float:left; padding: center5px; background-color: #fffe6e6e6; width:400px; font-family: "open sans"helvetica; font-size:16px; font-weight:bold;}.boton_mostrar { float:right; backgroundfont-size:12px; line-height:20px; color: #F29720DE7217;
}
/* Standard Navigationsleisten, aka box hiding thingy from .de.tarjeta-wrap Documentation at [[Wikipedia:hover NavFrame]]. */div.tarjetaNavFrame { box-webkitshadow: 0 0 .3em #999; border-transformradius: .2em; margin: rotateY(180deg)1em 0 2em 0; transformpadding: rotateY(180deg)1px;
}
div.card1NavFrame:after { background-imagecontent: url(http://1.1m.yt/J9Kw7kl.jpg)""; background-sizeclear: coverboth;
}
 div.NavFrame + div.card2NavFrame { backgroundborder-top-image: url(httpstyle://1.1m.yt/dlxMf3R.jpg)none; backgroundborder-top-sizestyle: coverhidden;
}
div.card3NavPic { background-imagecolor: url(http#fff; margin:0; padding: 2px; /* @noflip */3.1m.yt/EUB_xE.jpg); background-sizefloat: coverleft;
}
/*
div.NavFrame {
line-height: 1.6em;
font-weight: bold;
background-color: #fff;
position: relative;
border-radius: 3px;
}*/
/*
div.NavHead {
line-height: 1.6em;
font-weight: bold;
color: #fff;
position: relative;
border-radius: 3px;
background-color: #2471A3;
}*/
div.NavHead{
border-radius: .2em;
color: #fff;
padding: .4em .8em .5em;
font-weight: bold;
position: relative;
}
.NavHead:before {
display: inline-block;
/* Add some content in order to get normal line height, then make it transparent */
content: "x";
color: transparent;
width: 40px;
opacity: .7;
/* [[File:Wikidata-logo white.svg]] */
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Wikidata-logo_white.svg/27px-Wikidata-logo_white.svg.png);
background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/54/Wikidata-logo_white.svg);
background-size: 27px;
background-repeat: no-repeat;
background-position: left center;
}
.mw-content-rtl .NavHead:before {
background-position: right center;
}
.maincontainer{
position: absolute;
width: 250px;
height: 320px;
background: none;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
div.NavFrame p,
div.NavFrame div.NavContent,
div.NavFrame div.NavContent p {
font-size: 100%;
}
/* THE CARD HOLDS THE FRONT AND BACK FACES */div.thecardNavContent{ position: relative; top: 0; left: 0; width: 100%; height: auto; border-radius: 10px; transform-style: preserve-3d; transitionpadding: all 0.8s ease1em;
}
/* THE PSUEDO CLASS CONTROLS THE FLIP ON MOUSEOVER AND MOUSEOUT */div.thecardNavEnd { margin: 0; padding:hover{0; line-height: 1px; transform clear: rotateY(180deg)both;
}
 /* THE FRONT FACE OF THE CARD, WHICH SHOWS BY DEFAULT */ a.thefrontNavToggle { position: absolute; top vertical-align: 0middle; left: 0; width: 100%; /* @noflip */ height right: auto3px; border font-radiusweight: 10pxbold; backface font-visibilitysize: hidden100%; overflow: hidden; background color: #ffc728fff; color: #000;
}
/* THE BACK FACE OF THE CARD, WHICH SHOWS ON MOUSEOVER */.thebackclient-js .NavFrame.collapsed > .NavContent { position: absolute; top: 0; left: 0; width: 100%; height: auto; border-radius: 10px; backface-visibility: hidden; overflow: hidden; background: #fafafa; color: #333; text-align: center; transform display: rotateY(180deg)none;
}
/*This block (starts here) is merely styling for the flip card, and is NOT an essential part of the flip code Plantilla de Videos*/.thefront h1MainPageSisterProjects__wrapper, .theback h1MainPageSisterProjects__wrapper * { box-sizing: border-box;}.MainPageSisterProjects__wrapper { margin: 10px auto; padding: 0 10px; border: 0px solid #AAA; background: transparent; max-width: 1000px;}.MainPageSisterProjects__heading { font-familysize: 'zilla slab', sans-serif1.2em; /*padding: 30px.6em;*/ font-weight: bold; font text-align: center;}.MainPageSisterProjects__group { flex-wrap: wrap; display: flex; justify-content: space-between; border-bottom: 1px solid #AAA;}.MainPageSisterProjects__group:last-child { border:none;}.MainPageSisterProjects__group::after { content: ""; flex: 1 0 30%;}.MainPageSisterProjects__cell { width: 300px; display: inline-block; display: flex; flex: 1 0 30%;}.MainPageSisterProjects__cell-image { padding: 7px; width: 54px; min-width: 54px; /* ensure content width (these are tablecells) */ vertical-sizealign: 24pxmiddle; display: table-cell; text-align: center; box-sizing: content-box; /* table cells + padding + borderbox is weird */}.MainPageSisterProjects__cell-content { min-width: 150px; min-height: 40px; padding: 7px; vertical-align: top; display: table-cell;
}
@media screen and (max-width:550px) { .thefront p, MainPageSisterProjects__wrapper { padding: 0; } .theback pMainPageSisterProjects__group::after { font-family display: 'zilla slab', sansnone; } .MainPageSisterProjects__cell-serif;image { padding: 30px5px; font-weight width: normal36px; font min-sizewidth: 12px36px;/* ensure content width (these are tablecells) */ text } .MainPageSisterProjects__cell-aligncontent { padding: center5px; }
}
Obtenido de «https://biblioteca.cebesperquin.org/index.php/Especial:MobileDiff/2897...3952»