Masticationpedia

Difference between revisions of "MediaWiki:Mobile.css"

MediaWiki:Mobile.css (view source)

Revision as of 13:25, 16 February 2024

4,487 bytes added ,  1 year ago
no edit summary
(Created page with "→‎All CSS here will be loaded for users of the mobile site: →‎Gli stili CSS inseriti qui si applicano agli utenti che usano il sito per dispositivi mobili: #p-tb{ display : none; } body.page-Pagina_principale.action-view h1.firstHeading, body.page-Pagina_principale.action-submit h1.firstHeading { display: none; } body.page-Pagina_principale li#ca-talk { display: none !important; } #myBtn { display: none; →‎Hidden by default: position: fixed; /* Fixed...")
 
Line 51: Line 51:
/* @noflip */
/* @noflip */
text-align: left;
text-align: left;
}
/* ========================== Integrazione pagine Wix 2024 ========================== */
/* ============= Generale ============= */
body {
color: #333;
}
.custom-h0 {
font-size: 300%;
color: #116089;
}
.custom-h1 {
font-size: 200%;
color: #116089;
}
.custom-h2 {
font-size: 150%;
color: #116089;
}
.custom-subtitle {
font-size: 125%;
color: grey;
}
.left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
.rounded-logo {
border-radius: 100%;
}
.colour-button a {
padding: 1rem 2rem;
margin: 2rem 0;
border-radius: 3rem;
background-image: linear-gradient(126deg, #5f5bcd 24%, #ff5700 100%);
transition: .5s;
color: white;
text-decoration: none;
}
.colour-button a:hover {
background-image: linear-gradient(160deg, #5f5bcd 24%, #ff5700 100%);
color: white;
text-decoration: none;
}
.side-by-side {
display: flex;
flex-direction: column;
gap: 2rem;
justify-content: center;
align-items: center;
}
.side-by-side > div {
width: 100%;
}
.separator {
border: 1px solid silver;
width: 50%;
margin: 3rem auto;
}
.cover {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 550px;
background-size: cover;
background-position: center;
text-align: center;
line-height: 400%;
}
/*.full-width {
margin: 0 calc(-1*((99vw - 993px)/2));
}*/
/* ============= Home ============= */
.homepage-slider {
position: relative;
height: 550px;
background-color: white;
}
.homepage-logo-container {
    position: absolute;
    top: -70px;
    left: 20px;
    z-index: 100;
}
.homepage-slide-1, .homepage-slide-2, .homepage-slide-3 {
position: absolute;
height: 550px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-shadow: 2px 2px 40px rgba(0,0,0,0.9);
font-size: 500%;
animation-duration: 15s;
animation-iteration-count: infinite;
background-color: #dadada;
background-blend-mode: overlay;
background-position: center;
background-size: cover;
}
.homepage-slide-1 {
background-image: url(https://wiki.masticationpedia.org/images/a/a2/The_Past.jpg);
    animation-name: slide-1-animation;
}
.homepage-slide-2 {
background-image: url(https://wiki.masticationpedia.org/images/9/9c/The_Present.jpg);
    animation-name: slide-2-animation;
}
.homepage-slide-3 {
background-image: url(https://wiki.masticationpedia.org/images/a/ad/The_Future.jpg);
    animation-name: slide-3-animation;
}
@keyframes slide-1-animation {
0% { opacity: 0; }
2% { opacity: 1; }
31% { opacity: 1; }
35% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes slide-2-animation {
0% { opacity: 0; }
31% { opacity: 0; }
35% { opacity: 1; }
66% { opacity: 1; }
69% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes slide-3-animation {
0% { opacity: 0; }
65% { opacity: 0; }
69% { opacity: 1; }
98% { opacity: 1; }
100% { opacity: 0; }
}
.homepage-what-is-it, .homepage-how-to-follow-it, .homepage-why-to-enroll {
padding: 2rem;
background-color: rgba(196,196,196, .4);
}
.homepage-what-is-it {
margin-top: -6.5rem;
z-index: 103;
}
.homepage-how-to-follow-it {
text-align: right;
}
.for-editors a {
display: inline-block;
padding: .5rem 1rem;
background-color: #02b8bf;
color: white;
text-align: right;
transition: .5s;
}
.for-editors a:hover {
background-color: #6bd0d4;
text-decoration: none;
}
.perspective {
display: flex;
flex-direction: column;
gap: 2rem;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    perspective-origin: 10% 60%;
}
.three-d-image-container {
width: 400px;
    background-color: cornflowerblue;
    transition: 1s;
    transform: rotateX(4deg) rotateY(-15deg) rotateZ(2deg);
    box-shadow: 10px 10px 30px rgba(0 0 0 / .2);
}
.three-d-image-container:hover {
  transform: rotateX(6deg) rotateY(-25deg) rotateZ(3deg);
  box-shadow: 10px 20px 30px rgba(0 0 0 / .3);
}
.informative-video {
width: 15rem;
margin: 1rem 0;
padding: 1rem 2rem;
border-radius: 3rem;
background-color: #116089;
text-align: center;
color: white;
transition: .5s;
}
.informative-video:hover {
letter-spacing: .2rem;
}
.einstein-quote {
padding: 3rem 15vw;
background-image: url('https://wiki.masticationpedia.org/images/5/50/Cityscape.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: white;
text-align: center;
}
.hidden-except-on-intersection {
opacity: 0;
transition: 2s;
}
.fade-in-on-intersection {
opacity: 1;
}
}
Retrieved from "https://www.masticationpedia.org/index.php/Special:MobileDiff/18011"