- Statistiche

- Menu e Sottomenu
- Lista ultimi Movimenti

src/css/app.scss

@@ -336,13 +336,12 @@ h3 {
 
 .my-card {
   width: 100%;
-  max-width: 700px !important;
   min-width: 350px;
   padding: 1rem 1rem;
 
-  @media (max-width: 700px) {
+  @media (max-width: 1024px) {
     /* Versione Mobile */
-    max-width: 400px !important;
+    max-width: 1024px !important;
     min-width: 250px;
   }
 
@@ -962,11 +961,10 @@ h3 {
   width: 100%;
   margin-left: auto;
   margin-right: auto;
-  max-width: 700px;
   min-width: 800px;
 
-  @media (max-width: 500px) {
-    max-width: 350px;
+  @media (max-width: 1024px) {
+    max-width: 1024px;
     min-width: 300px;
   }
 
@@ -1837,12 +1835,12 @@ h3 {
 
 .fulldiv {
   min-height: 100% !important;
-  max-width: 700px !important;
-  min-width: 700px !important;
+  max-width: 1024px !important;
+  min-width: 1024px !important;
 
-  @media (max-width: 700px) {
+  @media (max-width: 1024px) {
     /* Versione Mobile */
-    max-width: 400px !important;
+    max-width: 1024px !important;
     min-width: 300px !important;
   }
 }
@@ -2106,4 +2104,170 @@ h3 {
   /* Distanza dal lato */
   z-index: 1000;
   /* Opzionale: assicura che il bottone sia sopra altri elementi */
+}
+
+.text-blueviolet {
+  color: blueviolet;
+}
+
+$verde: #008000;
+$blu: blue;
+$rosso: #ff0000;
+$trasparenza: 0.15;
+$coloreprincipale: lightblue;
+
+.sfondo_gradiente_blu {
+  background: linear-gradient(180deg, rgba(0, 70, 255, 0.25), rgba(0, 70, 275, 0.55), rgba(0, 70, 255, 0.75)) !important;
+}
+
+.sfondo_gradiente_fuchsia {
+  background: linear-gradient(180deg, rgba(255, 0, 150, 0.25), rgba(255, 0, 150, 0.55), rgba(255, 0, 150, 0.75)) !important;
+}
+
+.sfondo_gradiente_verde {
+  background: linear-gradient(180deg, rgba(12, 181, 12, 0.852)rgba(4, 185, 4, 0.55), rgba(12, 181, 12, 0.852)) !important;
+}
+
+.sfondo_trasparente {
+  background: rgba(0, 0, 0, 0.05) !important;
+}
+
+.sfondo_gradiente_arancione {
+  background: linear-gradient(180deg, rgba(255, 165, 0, 0.25), rgba(255, 165, 0, 0.55), rgba(255, 165, 0, 0.75)) !important;
+}
+
+.sfondo_gradiente_giallo {
+  background: linear-gradient(180deg, rgba(255, 255, 0, 0.25), rgba(255, 255, 0, 0.55), rgba(255, 255, 0, 0.75)) !important;
+}
+
+.sfondo_gradiente_rosso {
+  background: linear-gradient(180deg, rgba(red($rosso), green($rosso), blue($rosso), $trasparenza), $coloreprincipale, rgba(red($rosso), green($rosso), blue($rosso), $trasparenza)) !important;
+}
+
+.card-carousel-container {
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.card-carousel {
+  display: flex;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  padding: 1rem 0;
+}
+
+.card-carousel::-webkit-scrollbar {
+  display: none;
+}
+
+.my-card-elem {
+  flex: 0 0 auto;
+  margin-right: 1rem;
+  scroll-snap-align: start;
+  overflow: hidden;
+  transition: transform 0.3s ease;
+}
+
+.my-card-elem:hover {
+  transform: scale(1.05);
+}
+
+.img-container {
+  /*height: 150px; */
+  overflow: hidden;
+}
+
+.img-container .q-img {
+  height: 100%;
+  object-fit: cover;
+}
+
+.swipe-indicator {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: opacity 0.3s ease;
+}
+
+.swipe-indicator.left {
+  left: 10px;
+}
+
+.swipe-indicator.right {
+  right: 10px;
+}
+
+.scroll-indicator {
+  display: flex;
+  justify-content: center;
+  margin-top: 1rem;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #ccc;
+  margin: 0 4px;
+  transition: background-color 0.3s ease;
+}
+
+.dot.active {
+  background-color: #000;
+}
+
+.image-circle {
+  border-radius: 50%;
+  /* Rende l'immagine rotonda */
+  object-fit: cover;
+  /* Mantiene le proporzioni dell'immagine */
+  overflow: hidden;
+  /* Nasconde eventuali parti in eccesso */
+}
+
+.image-ombra {
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+}
+
+.image-round-bordered {
+  border-radius: 22px;
+
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+  object-fit: cover;
+
+  border: 2px solid #6b6e68a1;
+}
+
+/* Per aggiungere un effetto di transizione al passaggio del mouse */
+.image-round-bordered:hover {
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7);
+  /* Ombra più marcata al passaggio del mouse */
+  transform: scale(1.05);
+  /* Effetto di zoom al passaggio del mouse */
+  transition: all 0.3s ease;
+  /* Transizione fluida */
+}
+
+.titolo_card:hover {
+  color: blue;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.mylabfooter img {
+  border-radius: 50%;
+  object-fit: cover;
+
 }