surya/myprojplanet_vite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Versione 1.0.28

Browse Source 
- Bottone "Condividi" permette di creare un post Telegram con l'annuncio selezionato.
- migliorata grafica dell'annuncio.
This commit is contained in:
Surya Paolo
2024-02-27 22:08:16 +01:00
parent f91de26a9a
commit 9b4406c3ae
30 changed files with 673 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files

394
src/css/app.scss
View File

@@ -1,5 +1,5 @@
body {
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #333333;
@@ -324,14 +324,24 @@ h3 {
}
}
.dialog_annunci{
max-width: 700px !important;
@media (max-width: 700px) {
/* Versione Mobile */
max-width: 100% !important;
}
}
.my-card {
width: 100%;
max-width: 400px;
min-width: 250px;
max-width: 700px !important;
min-width: 350px;
padding: 1rem 1rem;
@media (max-width: 500px) {
max-width: 400px;
@media (max-width: 700px) {
/* Versione Mobile */
max-width: 400px !important;
min-width: 250px;
}
@@ -349,13 +359,14 @@ h3 {
.myimgtitle {
max-width: 100%;
width: 100%;
@media (max-width: 718px) {
}
@media (max-width: 718px) {}
}
.myimgproduct{
.myimgproduct {
max-width: 100%;
height: 300px;
@media (max-width: 718px) {
height: 250px;
}
@@ -376,7 +387,8 @@ h3 {
}
.my-card-selected {
transition: box-shadow 0.3s; /* Add a transition for a smooth effect */
transition: box-shadow 0.3s;
/* Add a transition for a smooth effect */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
color: blue;
background-color: lightblue;
@@ -388,7 +400,8 @@ h3 {
}
.my-card-prod {
transition: box-shadow 0.3s; /* Add a transition for a smooth effect */
transition: box-shadow 0.3s;
/* Add a transition for a smooth effect */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
width: 100%;
max-width: 300px;
@@ -730,6 +743,7 @@ h3 {
font-size: 1rem;
padding: 6px;
}
.clBorderUser {
border-radius: 16px;
font-size: 1rem;
@@ -866,7 +880,8 @@ h3 {
border: solid 2px #49b502;
}
.bordo_stondato_pending, .bordo_quadrato_pending {
.bordo_stondato_pending,
.bordo_quadrato_pending {
margin: 4px;
padding-left: 14px;
padding-right: 14px;
@@ -946,7 +961,7 @@ h3 {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: 800px;
max-width: 700px;
min-width: 800px;
@media (max-width: 500px) {
@@ -1063,7 +1078,8 @@ h3 {
place-content: center;
}
.combowidth, .comboselector {
.combowidth,
.comboselector {
min-width: 190px;
@media (max-width: 450px) {
@@ -1435,6 +1451,7 @@ h3 {
.anim_toBottom {
animation: moveToBottom 2s ease-in-out;
}
.anim_toRight {
animation: moveToRight 2s ease-in-out;
}
@@ -1460,100 +1477,222 @@ h3 {
}
.film, .effect {
width: 100%;
height: 100%;
filter: blur(0.45px) drop-shadow(0px 0px 0px #fff1);
.film,
.effect {
width: 100%;
height: 100%;
filter: blur(0.45px) drop-shadow(0px 0px 0px #fff1);
}
.film:after, .effect:after {
content: '';
width: 120%;
height: 100%;
top: 0;
left: 0;
padding-left: 100px;
opacity: 0.5;
animation: film-scratch 0.45s steps(1) infinite;
background: repeating-linear-gradient(90deg, #0002 0 2px, transparent 4px 37vmin);
.film:after,
.effect:after {
content: '';
width: 120%;
height: 100%;
top: 0;
left: 0;
padding-left: 100px;
opacity: 0.5;
animation: film-scratch 0.45s steps(1) infinite;
background: repeating-linear-gradient(90deg, #0002 0 2px, transparent 4px 37vmin);
}
.effect:after {
left: 30%;
animation: effect-scratch 2s infinite;
left: 30%;
animation: effect-scratch 2s infinite;
}
.grain {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
}
.grain:after {
content: '';
width: 110%;
height: 110%;
top: -5%;
left: -5%;
opacity: .25;
background-image:
repeating-conic-gradient(var(--black) 0%, transparent .00003%, transparent .0005%, transparent .00095%),
repeating-conic-gradient(var(--black) 0%, transparent .00005%, transparent 0.00015%, transparent 0.0009%);
animation: grain 0.5s steps(1) infinite;
filter: drop-shadow(0px 0px 1px black);
content: '';
width: 110%;
height: 110%;
top: -5%;
left: -5%;
opacity: .25;
background-image:
repeating-conic-gradient(var(--black) 0%, transparent .00003%, transparent .0005%, transparent .00095%),
repeating-conic-gradient(var(--black) 0%, transparent .00005%, transparent 0.00015%, transparent 0.0009%);
animation: grain 0.5s steps(1) infinite;
filter: drop-shadow(0px 0px 1px black);
}
@keyframes grain {
0%, 100% { transform: translate(0, 0); }
10% { transform: translate(-1%, -1%); }
20% { transform: translate(1%, 1%); }
30% { transform: translate(-2%, -2%); }
40% { transform: translate(3%, 3%); }
50% { transform: translate(-3%, -3%); }
60% { transform: translate(4%, 4%); }
70% { transform: translate(-4%, -4%); }
80% { transform: translate(2%, 2%); }
90% { transform: translate(-3%, -3%); }
0%,
100% {
transform: translate(0, 0);
}
10% {
transform: translate(-1%, -1%);
}
20% {
transform: translate(1%, 1%);
}
30% {
transform: translate(-2%, -2%);
}
40% {
transform: translate(3%, 3%);
}
50% {
transform: translate(-3%, -3%);
}
60% {
transform: translate(4%, 4%);
}
70% {
transform: translate(-4%, -4%);
}
80% {
transform: translate(2%, 2%);
}
90% {
transform: translate(-3%, -3%);
}
}
@keyframes film-scratch {
0%, 100% { transform: translateX(0); opacity: 0.5; }
10% { transform: translateX(-1%); }
20% { transform: translateX(1%); }
30% { transform: translateX(-2%); opacity: 0.75; }
40% { transform: translateX(3%); }
50% { transform: translateX(-3%); opacity: 0.5; }
60% { transform: translateX(8%); }
70% { transform: translateX(-3%); }
80% { transform: translateX(10%); opacity: 0.25; }
90% { transform: translateX(-2%); }
0%,
100% {
transform: translateX(0);
opacity: 0.5;
}
10% {
transform: translateX(-1%);
}
20% {
transform: translateX(1%);
}
30% {
transform: translateX(-2%);
opacity: 0.75;
}
40% {
transform: translateX(3%);
}
50% {
transform: translateX(-3%);
opacity: 0.5;
}
60% {
transform: translateX(8%);
}
70% {
transform: translateX(-3%);
}
80% {
transform: translateX(10%);
opacity: 0.25;
}
90% {
transform: translateX(-2%);
}
}
@keyframes effect-scratch {
0% { transform: translateX(0); opacity: 0.75; }
10% { transform: translateX(-1%); }
20% { transform: translateX(1%); }
30% { transform: translateX(-2%); }
40% { transform: translateX(3%); }
50% { transform: translateX(-3%); opacity: 0.5; }
60% { transform: translateX(8%); }
70% { transform: translateX(-3%); }
80% { transform: translateX(10%); opacity: 0.25; }
90% { transform: translateX(20%); }
100% { transform: translateX(30%); }
0% {
transform: translateX(0);
opacity: 0.75;
}
10% {
transform: translateX(-1%);
}
20% {
transform: translateX(1%);
}
30% {
transform: translateX(-2%);
}
40% {
transform: translateX(3%);
}
50% {
transform: translateX(-3%);
opacity: 0.5;
}
60% {
transform: translateX(8%);
}
70% {
transform: translateX(-3%);
}
80% {
transform: translateX(10%);
opacity: 0.25;
}
90% {
transform: translateX(20%);
}
100% {
transform: translateX(30%);
}
}
/**** OLD FILM EFFECT END ****/
@keyframes zoomImg {
0% { transform: translate(-75%, 10%) scale(1.5); opacity: 0.6; }
20% { transform: translate(-15%, 10%) scale(1.5); opacity: 1; }
50% { transform: translate(-15%, 25%) scale(1.4); opacity: 1; }
80% { transform: translate(-65%, 25%) scale(1.4); opacity: 1; }
100% { transform: translate(-75%, 10%) scale(1.5); opacity: 0.6; }
0% {
transform: translate(-75%, 10%) scale(1.5);
opacity: 0.6;
}
20% {
transform: translate(-15%, 10%) scale(1.5);
opacity: 1;
}
50% {
transform: translate(-15%, 25%) scale(1.4);
opacity: 1;
}
80% {
transform: translate(-65%, 25%) scale(1.4);
opacity: 1;
}
100% {
transform: translate(-75%, 10%) scale(1.5);
opacity: 0.6;
}
}
.zoomImg {
animation: zoomImg 20s linear infinite;
animation: zoomImg 20s linear infinite;
}
.animate__animated.animate__slow3 {
@@ -1562,36 +1701,42 @@ h3 {
-webkit-animation-duration: calc(var(--animate-duration) * 3);
animation-duration: calc(var(--animate-duration) * 3);
}
.animate__animated.animate__slow4 {
-webkit-animation-duration: calc(1s * 4);
animation-duration: calc(1s * 4);
-webkit-animation-duration: calc(var(--animate-duration) * 4);
animation-duration: calc(var(--animate-duration) * 4);
}
.animate__animated.animate__slow5 {
-webkit-animation-duration: calc(1s * 5);
animation-duration: calc(1s * 5);
-webkit-animation-duration: calc(var(--animate-duration) * 5);
animation-duration: calc(var(--animate-duration) * 5);
}
.animate__animated.animate__slow10 {
-webkit-animation-duration: calc(1s * 10);
animation-duration: calc(1s * 10);
-webkit-animation-duration: calc(var(--animate-duration) * 10);
animation-duration: calc(var(--animate-duration) * 10);
}
.animate__animated.animate__slow20 {
-webkit-animation-duration: calc(1s * 20);
animation-duration: calc(1s * 20);
-webkit-animation-duration: calc(var(--animate-duration) * 20);
animation-duration: calc(var(--animate-duration) * 20);
}
.animate__animated.animate__slow30 {
-webkit-animation-duration: calc(1s * 30);
animation-duration: calc(1s * 30);
-webkit-animation-duration: calc(var(--animate-duration) * 30);
animation-duration: calc(var(--animate-duration) * 30);
}
.animate__animated.animate__slow50 {
-webkit-animation-duration: calc(1s * 50);
animation-duration: calc(1s * 50);
@@ -1602,15 +1747,19 @@ h3 {
.animate__animated.animate__ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.animate__animated.animate__linear {
transition-timing-function: linear;
}
.animate__animated.animate__ease-in {
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.animate__animated.animate__ease-out {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.animate__animated.animate__ease {
transition-timing-function: ease;
}
@@ -1641,13 +1790,14 @@ h3 {
height: auto;
}
.show_province_title{
.show_province_title {
font-size: 0.85rem;
font-style: italic;
text-align: right;
color:#A0A0A0;
color: #A0A0A0;
}
.show_province{
.show_province {
font-size: 0.85rem;
font-style: italic;
text-align: right;
@@ -1655,7 +1805,13 @@ h3 {
}
.buttons_bottom {
max-width: 400px;
max-width: 700px !important;
@media (max-width: 700px) {
/* Versione Mobile */
max-width: 400px;
}
margin-left: auto;
justify-content: space-around;
margin-right: auto;
@@ -1670,6 +1826,7 @@ h3 {
background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .7) 15%)
}
}
.body--dark {
.buttons_bottom {
background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(15%, rgba(0, 0, 0, .6)));
@@ -1679,55 +1836,96 @@ h3 {
.fulldiv {
min-height: 100% !important;
max-width: 700px !important;
min-width: 700px !important;
@media (max-width: 700px) {
/* Versione Mobile */
max-width: 400px !important;
min-width: 300px !important;
}
}
.numfav_text{
.padding-bott {
padding-bottom: 50px;
}
.visudialog {
@media (max-width: 600px) {
/* ... */
}
else {
width: 700px !important;
max-width: 80vw !important;
color: red;
}
}
.numfav_text {
text-align: center;
color: grey;
font-size: 0.8rem;
}
.butt_rounded{
.butt_rounded {
border-radius: 12px;
}
.body--light {
.butt_rounded{
.butt_rounded {
background-color: rgb(234, 241, 244);
}
}.body--dark {
.butt_rounded{
}
.body--dark {
.butt_rounded {
background-color: black;
}
}
.q-mx-xxs {
.q-mx-xxs-left {
margin-left: 2px;
}
.butt_green{
.q-mx-xxs {
margin-left: 2px;
margin-right: 2px;
}
.butt_green {
background-color: rgb(202, 232, 202) !important;
}
.ev_dayofweek{
.ev_dayofweek {
color: grey;
font-size: 0.85rem;
text-transform: uppercase;
text-align: center;
margin-bottom: -4px;
}
.ev_day{
.ev_day {
color: black;
font-size: 1.25rem;
font-weight: bold;
text-align: center;
}
.col-105{
height: auto;
width: 90%;
.col-105 {
height: auto;
width: 90%;
}
.col-15{
height: auto;
width: 10%;
.col-15 {
height: auto;
width: 10%;
}
.lineheight-normal {
line-height: normal !important;
}
.clDescrEstesa {
font-size: 1rem;
line-height: normal !important;
}