Merge branch 'ent-9662-Restyling-fuentes-colores-botones' of brutus.artica.es:artica/pandorafms into ent-9662-Restyling-fuentes-colores-botones

pandora_console/general/login_page.php

@@ -275,11 +275,26 @@ switch ($login_screen) {
             echo '</div>';
 
             echo '<div class="login_button" id="remove_button">';
-                echo '<input type="button" id="input_saml" value="Login as admin" onclick="show_normal_menu()">';
+                html_print_submit_button(
+                    __('Login as admin'),
+                    'input_saml',
+                    false,
+                    [
+                        'fixed_id' => 'submit-login_button',
+                        'class'    => 'next_login',
+                        'onclick'  => 'show_normal_menu()',
+                        'id'       => 'input_saml',
+                    ]
+                );
             echo '</div>';
 
             echo '<div class="login_button login_button_saml">';
-                html_print_submit_button(__('Login with SAML'), 'login_button_saml', false, '');
+                html_print_submit_button(
+                    __('Login with SAML'),
+                    'login_button_saml',
+                    false,
+                    ['class' => 'next_login secondary']
+                );
             echo '</div>';
         } else {
             echo '<div class="login_nick">';

pandora_console/include/ajax/events.php

@@ -2488,7 +2488,7 @@ if ($drawConsoleSound === true) {
                     'label'      => __('Start'),
                     'type'       => 'button',
                     'name'       => 'start-search',
-                    'attributes' => [ 'icon' => 'wand' ],
+                    'attributes' => [ 'class' => 'play' ],
                     'return'     => true,
                 ],
                 'div',
@@ -2501,7 +2501,7 @@ if ($drawConsoleSound === true) {
                     'type'       => 'button',
                     'name'       => 'no-alerts',
                     'label'      => __('No alerts'),
-                    'attributes' => [ 'icon' => 'fail' ],
+                    'attributes' => ['class' => 'secondary alerts'],
                     'return'     => true,
                 ],
                 'div',

pandora_console/include/javascript/pandora_events.js

@@ -1028,6 +1028,7 @@ function openSoundEventModal(settings) {
                   .addClass("alerts");
                 // Change value button.
                 $("#button-no-alerts").val(settings.noAlert);
+                $("#button-no-alerts > span").text(settings.noAlert);
 
                 // Background button.
                 $(".container-button-alert").removeClass("fired");
@@ -1074,6 +1075,7 @@ function action_events_sound(mode, settings) {
       .addClass("stop");
     // Change value button.
     $("#button-start-search").val(settings.stop);
+    $("#button-start-search > span").text(settings.stop);
     // Add Progress bar.
     listen_event_sound(settings);
   } else {
@@ -1089,6 +1091,7 @@ function action_events_sound(mode, settings) {
       .addClass("play");
     // Change value button.
     $("#button-start-search").val(settings.start);
+    $("#button-start-search > span").text(settings.start);
     // Remove progress bar.
     $("#progressbar_time").empty();
     // Remove audio.
@@ -1104,6 +1107,7 @@ function action_events_sound(mode, settings) {
       .addClass("alerts");
     // Change value button.
     $("#button-no-alerts").val(settings.noAlert);
+    $("#button-no-alerts > span").text(settings.noAlert);
 
     // Background button.
     $(".container-button-alert").removeClass("fired");
@@ -1158,6 +1162,7 @@ function check_event_sound(settings) {
           .addClass("silence-alerts");
         // Change value button.
         $("#button-no-alerts").val(settings.silenceAlarm);
+        $("#button-no-alerts > span").text(settings.silenceAlarm);
 
         // Background button.
         $(".container-button-alert").addClass("fired");

pandora_console/include/styles/sound_events.css

@@ -1,6 +1,9 @@
 /*
  * Css Modal Sound events.
  */
+div.container-button-play > button#button-start-search {
+  transition: none !important;
+}
 #modal-sound {
   display: flex;
   flex-direction: column;
@@ -8,10 +11,6 @@
   padding: 0px 20px !important;
 }
 
-#tabs-sound-modal {
-  margin-top: 20px;
-}
-
 .actions-sound-modal {
   margin-bottom: 20px;
 }
@@ -46,7 +45,6 @@
 }
 
 #tabs-sound-modal ul.wizard li label {
-  color: #95a3bf;
   font-size: 13px;
   line-height: 16px;
   text-align: left;
@@ -88,7 +86,7 @@
 
 #tabs-sound-modal ul.wizard li.test-sounds input[type="button"] {
   border: 1px solid #dddddd;
-  border-radius: 4px;
+  border-radius: 8px;
   width: 131px;
   height: 38px;
   color: #95a3bf;
@@ -97,12 +95,6 @@
   padding-right: 40px;
 }
 
-#tabs-sound-modal button.upd,
-#button-melody_sound {
-  background-image: url(../../images/sound_wave.png);
-  background-position: 90px 8px;
-}
-
 #tabs-sound-modal ul.wizard .select2 {
   max-width: 100% !important;
 }
@@ -211,7 +203,7 @@
 
 .actions-sound-modal .buttons-sound-modal input[type="button"] {
   border: 1px solid #dddddd;
-  border-radius: 4px;
+  border-radius: 8px;
   width: 107px;
   height: 50px;
   font-size: 18px;
@@ -223,7 +215,7 @@
 .actions-sound-modal .buttons-sound-modal input[type="button"].play {
   background: url(../../images/play-white.png), transparent;
   background-repeat: no-repeat;
-  background-position: 70px 17px;
+  background-position: 82px 14px;
   color: #ffffff;
   padding-left: 20px;
   border: 0;
@@ -231,42 +223,62 @@
 
 .actions-sound-modal .buttons-sound-modal button.stop,
 .actions-sound-modal .buttons-sound-modal input[type="button"].stop {
-  background: url(../../images/stop.png), transparent;
+  background: url(../../images/stop.png), var(--primary-color);
   background-repeat: no-repeat;
-  background-position: 70px 17px;
+  background-position: 82px 14px;
   color: #ffffff;
   padding-left: 20px;
   border: 0;
 }
 
+button#button-start-search:hover {
+  background-position: 82px 14px !important;
+}
+
 .actions-sound-modal .buttons-sound-modal button.alerts,
 .actions-sound-modal .buttons-sound-modal input[type="button"].alerts {
   width: 154px;
-  color: #95a3bf;
+  color: var(--primary-color);
   background: url(../../images/alarm-off.png), transparent;
   background-repeat: no-repeat;
-  background-position: 108px 9px;
+  background-position: 108px 4px;
   padding-left: 20px;
 }
 
+button#button-no-alerts.alerts:hover {
+  background-position: 108px 4px !important;
+}
+
 .actions-sound-modal .buttons-sound-modal button.silence-alerts,
 .actions-sound-modal .buttons-sound-modal input[type="button"].silence-alerts {
   width: 184px;
   color: #ffffff;
   background: url(../../images/silence-alerts.png), transparent;
   background-repeat: no-repeat;
-  background-position: 138px 9px;
+  background-position: 138px 4px;
   padding-left: 20px;
 }
 
+button#button-no-alerts.silence-alerts:hover {
+  background-position: 138px 4px !important;
+}
+
 .actions-sound-modal .container-button-play {
-  background: radial-gradient(118.26% 33.15%, #82b92e 0%, #1d4e4a 100%);
+  background-color: var(--primary-color);
-  border-radius: 4px;
+  border-radius: 8px;
 }
 
 .actions-sound-modal .container-button-alert.fired {
   background: #ee2132;
-  border-radius: 4px;
+  border-radius: 8px;
+}
+
+.actions-sound-modal .container-button-alert.fired > button {
+  font-weight: bold;
+}
+
+.actions-sound-modal .container-button-alert.fired > button:hover {
+  color: #ffffff !important;
 }
 
 .actions-sound-modal .progressbar {
@@ -350,10 +362,15 @@
     opacity: 1;
   }
 }
-.blink-image {
+
+.blink-image#button-melody_sound {
+  background: var(--primary-color);
+}
+.blink-image > div.sound,
+div.fired > button.silence-alerts {
   -moz-animation: blink normal 2s infinite ease-in-out; /* Firefox */
   -webkit-animation: blink normal 2s infinite ease-in-out; /* Webkit */
   -ms-animation: blink normal 2s infinite ease-in-out; /* IE */
   animation: blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
-  filter: hue-rotate(120deg);
+  /* filter: hue-rotate(120deg); */
 }