Update con testo scrolling

MP.SPEC/Components/Fermate/ProdStopMan.razor

@@ -1,12 +1,12 @@
-<div class="col-4 col-sm-4 col-md-4 col-lg-2 flex-fill2">
-    <div class="p-2 h-100 w-100">
+<div class="col-6 col-sm-4 col-md-3">
+    <div class="p-2 px-1 h-100 w-100">
         <div class="@objCss text-center card w-100 h-100" @onclick="() => ReportSelected()">
             <div class="card-body text-light">
-                <i class="@objIcon" style="font-size: 8vw"></i>
+                <i class="@objIcon" style="font-size: 5vw"></i>
             </div>
             <div class="card-footer text-center h-100 bg-dark text-light opacity-75 p-1">
                 @* <span class="d-inline-block text-center text-nowrap text-truncate mw-100 scroll-left" style="font-size: 1.3rem;">@objTxt</span> *@
-                <div class="d-inline-block @textCss(objTxt)" style="font-size: 1.3rem;">
+                <div class="d-inline-block @textCss(objTxt) fs-6">
                     <span>@objTxt</span>
                 </div>
             </div>

MP.SPEC/Components/Fermate/ProdStopMan.razor.css

@@ -0,0 +1,117 @@
+/* gestione scroll testo A: 100% */
+.scroll-left-a {
+    height: 1.5em;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    white-space: nowrap;
+}
+
+    .scroll-left-a span {
+        /*display: inline-block;*/
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        line-height: 1.5em;
+        /* Starting position */
+        -moz-transform: translateX(-50%);
+        -webkit-transform: translateX(-50%);
+        transform: translateX(-50%);
+        /* Apply animation to this element */
+        -moz-animation: scroll-left-a 8s ease infinite;
+        -webkit-animation: scroll-left-a 8s ease infinite;
+        animation: scroll-left-a 8s ease infinite;
+    }
+/* Move it (define the animation) */
+@keyframes scroll-left-a {
+    0% {
+        transform: translateX(-50%);
+    }
+
+    30% {
+        transform: translateX(-50%);
+    }
+
+    80% {
+        transform: translateX(-80%);
+    }
+}
+/* gestione scroll testo B: 120% */
+.scroll-left-b {
+    height: 1.5em;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    white-space: nowrap;
+}
+
+    .scroll-left-b span {
+        /*display: inline-block;*/
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        line-height: 1.5em;
+        /* Starting position */
+        -moz-transform: translateX(-50%);
+        -webkit-transform: translateX(-50%);
+        transform: translateX(-50%);
+        /* Apply animation to this element */
+        -moz-animation: scroll-left-b 8s ease infinite;
+        -webkit-animation: scroll-left-b 8s ease infinite;
+        animation: scroll-left-b 8s ease infinite;
+    }
+/* Move it (define the animation) */
+@keyframes scroll-left-b {
+    0% {
+        transform: translateX(-50%);
+    }
+
+    30% {
+        transform: translateX(-50%);
+    }
+
+    80% {
+        transform: translateX(-120%);
+    }
+}
+/* gestione scroll testo C: 150% */
+.scroll-left-c {
+    height: 1.5em;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    white-space: nowrap;
+}
+
+    .scroll-left-c span {
+        /*display: inline-block;*/
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        line-height: 1.5em;
+        /* Starting position */
+        -moz-transform: translateX(-50%);
+        -webkit-transform: translateX(-50%);
+        transform: translateX(-50%);
+        /* Apply animation to this element */
+        -moz-animation: scroll-left-c 8s ease infinite;
+        -webkit-animation: scroll-left-c 8s ease infinite;
+        animation: scroll-left-c 8s ease infinite;
+    }
+/* Move it (define the animation) */
+@keyframes scroll-left-c {
+    0% {
+        transform: translateX(-50%);
+    }
+
+    30% {
+        transform: translateX(-50%);
+    }
+
+    80% {
+        transform: translateX(-150%);
+    }
+}

MP.SPEC/Components/Fermate/ProdStopMan.razor.less

@@ -0,0 +1,121 @@
+
+
+/* gestione scroll testo A: 100% */
+.scroll-left-a {
+    height: 1.5em;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    white-space: nowrap;
+}
+
+.scroll-left-a span {
+    /*display: inline-block;*/
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    line-height: 1.5em;
+    /* Starting position */
+    -moz-transform: translateX(-50%);
+    -webkit-transform: translateX(-50%);
+    transform: translateX(-50%);
+    /* Apply animation to this element */
+    -moz-animation: scroll-left-a 8s ease infinite;
+    -webkit-animation: scroll-left-a 8s ease infinite;
+    animation: scroll-left-a 8s ease infinite;
+}
+/* Move it (define the animation) */
+@keyframes scroll-left-a {
+    0% {
+        transform: translateX(-50%);
+    }
+
+    30% {
+        transform: translateX(-50%);
+    }
+
+    80% {
+        transform: translateX(-80%);
+    }
+}
+
+/* gestione scroll testo B: 120% */
+.scroll-left-b {
+    height: 1.5em;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    white-space: nowrap;
+}
+
+.scroll-left-b span {
+    /*display: inline-block;*/
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    line-height: 1.5em;
+    /* Starting position */
+    -moz-transform: translateX(-50%);
+    -webkit-transform: translateX(-50%);
+    transform: translateX(-50%);
+    /* Apply animation to this element */
+    -moz-animation: scroll-left-b 8s ease infinite;
+    -webkit-animation: scroll-left-b 8s ease infinite;
+    animation: scroll-left-b 8s ease infinite;
+}
+/* Move it (define the animation) */
+@keyframes scroll-left-b {
+    0% {
+        transform: translateX(-50%);
+    }
+
+    30% {
+        transform: translateX(-50%);
+    }
+
+    80% {
+        transform: translateX(-120%);
+    }
+}
+
+/* gestione scroll testo C: 150% */
+.scroll-left-c {
+    height: 1.5em;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    white-space: nowrap;
+}
+
+.scroll-left-c span {
+    /*display: inline-block;*/
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    line-height: 1.5em;
+    /* Starting position */
+    -moz-transform: translateX(-50%);
+    -webkit-transform: translateX(-50%);
+    transform: translateX(-50%);
+    /* Apply animation to this element */
+    -moz-animation: scroll-left-c 8s ease infinite;
+    -webkit-animation: scroll-left-c 8s ease infinite;
+    animation: scroll-left-c 8s ease infinite;
+}
+/* Move it (define the animation) */
+@keyframes scroll-left-c {
+    0% {
+        transform: translateX(-50%);
+    }
+
+    30% {
+        transform: translateX(-50%);
+    }
+
+    80% {
+        transform: translateX(-150%);
+    }
+}

MP.SPEC/Pages/RepStop.razor

@@ -23,10 +23,10 @@
         else
         {
             <div class="row">
-                <div class="col-6">
+                <div class="col-5">
                     <ListMacc ListMSE="@SearchMacchine" EC_Selected="CheckSelection"></ListMacc>
                 </div>
-                <div class="col-6">
+                <div class="col-7">
                     @if (showFermate)
                     {
                         <ListFerm ListaFermate="SearchFermate"></ListFerm>

MP.SPEC/compilerconfig.json

@@ -10,5 +10,9 @@
   {
     "outputFile": "Shared/MainLayout.razor.css",
     "inputFile": "Shared/MainLayout.razor.less"
+  },
+  {
+    "outputFile": "Components/Fermate/ProdStopMan.razor.css",
+    "inputFile": "Components/Fermate/ProdStopMan.razor.less"
   }
 ]