Masticationpedia

Difference between revisions of "MediaWiki:Common.css"

MediaWiki:Common.css (view source)

Revision as of 16:31, 9 December 2024

8,623 bytes added ,  10 months ago
no edit summary
 
(135 intermediate revisions by 3 users not shown)
Line 1: Line 1:
/* Gli stili CSS inseriti qui si applicano a tutti i temi */
/* Gli stili CSS inseriti qui si applicano a tutti i temi */
/* ============================= Personalizzazione font e colore ============================= */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
.mw-parser-output {
color: #585858;
font-family: "Roboto", sans-serif;;
}
.mw-headline {
color: #454545;
}


/* To make images responsive */
/* To make images responsive */
Line 1,832: Line 1,843:
border: 1px solid grey !important;
border: 1px solid grey !important;
border-radius: 6px !important;
border-radius: 6px !important;
padding: 12px !important;
}
}


Line 1,856: Line 1,866:


/* ========================== Integrazione pagine Wix 2024 ========================== */
/* ========================== Integrazione pagine Wix 2024 ========================== */
/* ============= Home ============= */
/* ============= Generale ============= */
a, a:hover { text-decoration: none; }
body {
color: #333;
}
 
#mw-mf-main-menu-button {
display: none;
}
 
.pre-content {
display: none;
}


.homepage-slider {
@media screen and (min-width: 1000px) {
position: relative;
.content {
height: 400px;
width: auto;
background-color: silver;
}
}
}
.homepage-logo-container {
@media screen and (min-width: 720px) {
    position: absolute;
.content {
    top: 50px;
width: auto;
    transform: translate(-50px, 0);
}
    z-index: 100;
}
}
.homepage-logo {
 
border-radius: 100%;
.mobile-only {
display: none;
}
}


.homepage-slide-1, .homepage-slide-2, .homepage-slide-3 {
.custom-h0 {
position: absolute;
height: 400px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 300%;
font-size: 300%;
animation-duration: 15s;
color: #116089;
animation-iteration-count: infinite;
}
background-position: center;
.custom-h1 {
background-size: cover;
font-size: 200%;
color: #116089;
}
}
.homepage-slide-1 {
.custom-h2 {
background-image: url(https://wiki.masticationpedia.org/images/a/a2/The_Past.jpg);
font-size: 150%;
    animation-name: slide-1-animation;
color: #116089;
}
}
.homepage-slide-2 {
.custom-subtitle {
background-image: url(https://wiki.masticationpedia.org/images/9/9c/The_Present.jpg);
font-size: 125%;
    animation-name: slide-2-animation;
color: grey;
}
}
.homepage-slide-3 {
 
background-image: url(https://wiki.masticationpedia.org/images/a/ad/The_Future.jpg);
.left {
    animation-name: slide-3-animation;
text-align: left;
}
}
@keyframes slide-1-animation {
.center {
0% { opacity: 0; }
text-align: center;
3% { opacity: 1; }
30% { opacity: 1; }
33% { opacity: 0; }
100% { opacity: 0; }
}
}
@keyframes slide-2-animation {
.right {
0% { opacity: 0; }
text-align: right;
33% { opacity: 0; }
36% { opacity: 1; }
64% { opacity: 1; }
67% { opacity: 0; }
100% { opacity: 0; }
}
}
@keyframes slide-3-animation {
 
0% { opacity: 0; }
.rounded-logo {
67% { opacity: 0; }
width: 200px;
70% { opacity: 1; }
height: 200px;
97% { opacity: 1; }
border-radius: 100%;
100% { opacity: 0; }
}
}


.colour-button a {
.colour-button a, .colour-button a.external, .colour-button-small a, .colour-button-small a.external {
padding: 1rem 2rem;
display: inline-block;
margin: 2rem 0;
border-radius: 3rem;
border-radius: 3rem;
background-image: linear-gradient(126deg, #5f5bcd 24%, #ff5700 100%);
background-image: linear-gradient(126deg, #5f5bcd 24%, #ff5700 100%);
background-size: auto;
transition: .5s;
transition: .5s;
color: white;
color: white;
text-decoration: none;
text-decoration: none;
}
}
.colour-button a:hover {
.colour-button a:hover, .colour-button-small a:hover {
background-image: linear-gradient(307deg, #5f5bcd 24%, #ff5700 100%);
background-image: linear-gradient(160deg, #5f5bcd 24%, #ff5700 100%);
color: white;
color: white;
text-decoration: none;
text-decoration: none;
}
}


.homepage-side-by-side {
.colour-button a, .colour-button a.external {
padding: 1rem 2rem;
}
 
.colour-button-small a, .colour-button-small a.external {
padding: 0.5rem 1rem;
}
 
.side-by-side {
display: flex;
display: flex;
gap: 2rem;
gap: 2rem;
Line 1,944: Line 1,956:
align-items: center;
align-items: center;
}
}
.homepage-side-by-side > div {
.side-by-side > div {
width: 100%;
width: 100%;
}
}


.homepage-separator {
.separator {
border: 1px solid silver;
border: 1px solid silver;
width: 50%;
width: 50%;
Line 1,954: Line 1,966:
}
}


.homepage-what-is-it, .homepage-how-to-follow-it, .homepage-why-to-enroll {
.cover {
padding: 2rem;
position: relative;
background-color: rgba(196,196,196, .25);
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%;
}
}
.homepage-how-to-follow-it {
 
text-align: right;
.full-width {
margin: 0 calc(-1*((99vw - 993px)/2));
}
}


.homepage-title {
@media screen and (max-width: 1000px) {
font-size: 150%;
.full-width {
color: #116089;
    margin: 0 calc(-1*((99vw - 763px) / 2));
text-align: right;
}
}
}


.informative-video {
@media screen and (max-width: 800px) {
display: flex;
.full-width {
justify-content: flex-end;
    margin: 0 calc(-1*((99vw - 654px) / 2));
}
}
}


.informative-video p {
.content-page-logo-container {
width: 15rem;
margin-bottom: 2rem;
padding: 1rem 2rem;
}
border-radius: 3rem;
 
background-color: #116089;
/* ============= Home ============= */
text-align: center;
.homepage-slider {
color: white;
position: relative;
transition: .5s;
height: 550px;
background-color: white;
}
}
.informative-video:hover {
.homepage-logo-container {
letter-spacing: .2rem;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translate(-50%);
    z-index: 100;
}
}


.einstein-quote {
.homepage-slide-1, .homepage-slide-2, .homepage-slide-3 {
padding: 3rem 6rem;
position: absolute;
background-image: url(https://wiki.masticationpedia.org/images/4/49/Panorama_citt%C3%A0.jpg);
height: 550px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: white;
text-align: center;
}
 
/* ============= Scientific community ============= */
.scientific-community-cover {
height: 400px;
width: 100%;
width: 100%;
display: flex;
display: flex;
align-items: center;
align-items: center;
justify-content: center;
justify-content: center;
color: #045184;
color: white;
font-size: 300%;
text-shadow: 2px 2px 40px rgba(0,0,0,0.9);
background-image: url('https://wiki.masticationpedia.org/images/0/0d/Scientific_community.jpg');
font-size: 500%;
background-size: cover;
animation-duration: 15s;
animation-iteration-count: infinite;
background-color: #dadada;
background-blend-mode: overlay;
background-position: center;
background-position: center;
background-size: cover;
}
.homepage-slide-1 > *, .homepage-slide-2 > *, .homepage-slide-3 > * {
transform: translate(0, 2rem);
}
}
 
.homepage-slide-1 {
/* ============= Scientific project ============= */
background-image: url(https://wiki.masticationpedia.org/images/a/a2/The_Past.jpg);
.scientific-project-main-title {
    animation-name: slide-1-animation;
padding: 3rem 0;
text-align: center;
font-size: 200%;
color: #2B6CA3;
}
}
 
.homepage-slide-2 {
.scientific-project-text-box {
background-image: url(https://wiki.masticationpedia.org/images/9/9c/The_Present.jpg);
padding: 2rem;
    animation-name: slide-2-animation;
background-color: rgba(196,196,196, .25);
}
}
 
.homepage-slide-3 {
/* ============= Social project ============= */
background-image: url(https://wiki.masticationpedia.org/images/a/ad/The_Future.jpg);
.social-project-main-title {
    animation-name: slide-3-animation;
padding: 3rem 0;
text-align: center;
font-size: 200%;
color: #2B6CA3;
}
}
 
@keyframes slide-1-animation {
.social-project-subtitle {
0% { opacity: 0; }
padding: 2rem 0;
2% { opacity: 1; }
text-align: center;
31% { opacity: 1; }
font-size: 150%;
35% { opacity: 0; }
color: grey;
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, .1);
}
.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: 380px;
    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;
}
 
/* ============= Scientific community ============= */
.scientific-community-cover {
color: #045184;
background-image: url('https://wiki.masticationpedia.org/images/0/0d/Scientific_community.jpg');
}
 
/* ============= Template:Person card ============= */
 
.scientific-community-container {
display: flex;
flex-wrap: wrap;
gap: 2rem;
justify-content: center;
align-items: flex-start;
}
 
.person-container {
display: inline-block;
width: 20%;
margin: 0;
text-align: center;
}
 
.person-image {
width: 100%;
height: auto;
border-radius: 100%;
}
 
.person-country {
color: #045184;
}
 
/* ============= Scientific project ============= */
.scientific-project-text-box {
padding: 2rem;
background-color: rgba(196,196,196, .1);
}
 
/* ============= Social project ============= */
 
/* ============= Our story ============= */
 
/* ============= Book index ============= */
.book-index-cover {
background-image: url('https://wiki.masticationpedia.org/images/f/f7/The_sacred_wood_of_books.jpg');
color: white;
text-shadow: 3px 3px 40px rgba(0 0 0 / 0.9);
}
 
.book-index-columns {
display: flex;
gap: 3rem;
}
.book-index-columns div {
width: 100%;
}
.book-index-columns p, .book-index-columns li {
color: gray;
}
 
/* ============= Our Network ============= */
.network-cover {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/19/Background-3228704_1920.jpg');
background-color: rgba(0 0 0 / 0.3);
    background-blend-mode: overlay;
}
 
/* ============= Frisardi Masticationpedia ============= */
.frisardi-nettuno-cover {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/26/Costa_di_Nettuno_Levante.JPG');
}
.frisardi-nettuno-main-title, .frisardi-nettuno-subtitle {
font-size: 300%;
color: white;
text-shadow: 2px 2px 10px rgba(0,0,0,0.2);
}
.frisardi-nettuno-person, .fontana-como-person {
text-align: center;
padding: 2rem;
}
 
#iframe-Google\ Docs {
    height: 1600px;
}
 
#iframe-Google\ Maps {
margin: 0 calc(-1*((99vw - 993px)/2));
width: 99vw;
}
 
/* ============= Fontana Masticationpedia ============= */
.fontana-como-cover {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Como_-_Comune_di_Como_-_2023-09-08_23-29-16_001.jpg/2560px-Como_-_Comune_di_Como_-_2023-09-08_23-29-16_001.jpg');
}
.fontana-como-main-title, .fontana-como-subtitle {
font-size: 300%;
color: white;
text-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}
 
/* ============= Donate ============= */
.donate-cover {
background-image: url('https://wiki.masticationpedia.org/images/b/b2/Donation_background.jpg');
}
 
/* ============= Template:Person ============= */
.person-box {
background-color: silver;
padding: 30px;
text-align: center;
background-image: url(https://wiki.masticationpedia.org/images/0/0d/Scientific_community_darker.jpg);
background-position: center;
background-size:cover;
}
.person-name {
font-size: 300%;
color: white;
text-shadow: 3px 3px 20px rgba(0 0 0 / 0.5);
}
.person-bio {
color: white;
font-size: 150%;
text-shadow: 3px 3px 10px rgba(0 0 0 / 0.5);
}
.person-portrait {
margin: 2rem 0;
}
 
/* ============= Template:Person details ============= */
.person-details-header, .person-cv-header {
margin-top: 2rem;
margin-bottom: 5px;
padding: 10px 0;
    border-radius: 8px 8px 0 0;
text-align: center;
color: white;
background-color: #116089;
}
 
.person-cv-header {
border-radius: 8px;
}
 
.smart-template {
  display: flex;
  box-sizing: border-box;
  margin: 0 auto;
}
 
.smart-template p {
    margin-top: 0;
    margin-bottom: 0;
}
 
.smart-template-left {
  box-sizing: border-box;
  width: 30%;
  margin-bottom: 5px;
  padding: 5px;
  background-color: #e6e7e8;
  text-align: right;
  font-weight: bold;
}
.smart-template:last-child .smart-template-left:nth-last-child(2) {
  border-radius: 0 0 0 8px;
}
 
.smart-template-right {
  box-sizing: border-box;
  width: 70%;
  margin-bottom: 5px;
  padding: 5px;
  background-color: #f2f2f2;
}
.smart-template:last-child .smart-template-right:last-child {
  border-radius: 0 0 8px 0;
}
 
.smart-template-bottom {
  justify-content: center;
  gap: 10px;
  margin-bottom: 5px;
  padding: 5px;
  background-color: #e6e7e8;
  border-radius: 0 0 8px 8px;
}
 
.person-contributions {
  background-color: #e6e7e8;
  border-radius: 8px;
  margin: 2rem 0 5px 0;
  padding: 5px;
  text-align: center;
}
 
/* ============= Template:Main menu ============= */
#main-menu-open, #main-menu-close { display: none; }
 
.main-menu-container {
  display: flex;
  justify-content: center;
  background-color: #f1f1f1;
}
 
.main-menu-container a {
  text-decoration: none;
}
 
.padded {
  padding: 0.5rem 1.5rem;
}
 
.padded:hover {
  background-color: #e0e0e0;
}
 
.main-menu-dropdown-trigger {
  position: relative;
}
 
.main-menu-dropdown-content {
  display: none;
  position: absolute;
  z-index: 101;
  min-width: 180px;
  background-color: #f1f1f1;
  transition: .5s;
}
 
.main-menu-dropdown-trigger:hover .main-menu-dropdown-content {
  display: block;
}
 
.custom-page-title {
margin-top: 50px!important;
margin-bottom: 50px!important;
text-align: center;
font-size: 250%;
text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
}
 
.firstHeading {
margin-top: 2em !important;
margin-left: 3em !important;
}
 
/* ============= Template:Tooltip ============= */
.tooltip-trigger, .tooltip-trigger-2 {
  color: #ba0606;
  position: relative;
}
 
.tooltip-trigger:hover .tooltip-content, .tooltip-trigger-2:hover .tooltip-content-2 {
  display: inline-block;
  position: absolute;
  top: 18px;
  transform: translate(-20em); /* centra il popup sotto la "i" */
  min-width: 40em;
  padding: 10px 15px;
  color: #585858;
  background-color: white;
  border: 1px solid silver;
  border-radius: 10px;
  font-size: 90%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  z-index: 100;
}
 
.tooltip-content, .tooltip-content-2 {
  display: none;
}
 
.tooltip-trigger:hover {
  cursor: help;
}
 
@media screen and (max-width: 1200px) {
.mw-parser-output {
position: relative;
}
.tooltip-trigger, .tooltip-trigger-2 {
position: static;
}
.tooltip-trigger:hover .tooltip-content, .tooltip-trigger-2:hover .tooltip-content-2 {
box-sizing: border-box;
left: 0;
top: auto;
transform: translate(0, 2em);
width: 100%;
}
}
 
/* ============= configurazione visibilità capitoli nel Book index ============= */
.crisis-of-paradigm-for-all {
display: block;
}
.crisis-of-paradigm-for-members {
display: none;
}
.extraordinary-science-for-all {
display: block;
}
.extraordinary-science-for-affiliates {
display: none;
}
 
/* ============= Template:Login or request Member account ============= */
.responsive-buttons {
display: flex;
justify-content: center;
gap: 2rem;
margin: 2rem auto;
}
}
Retrieved from "https://www.masticationpedia.org/index.php/Special:MobileDiff/17122...20249"