Update js/rus/rus.js

js/rus/rus.js

@@ -428,7 +428,7 @@ editor.Components.addType('video-player-settings', {
   model: {
     defaults: {
       // HTML-код блока настроек видеоплеера
-      content: '<div id="player"></div>',
+      content: '<div  class="ramka-7 id="player"></div>',
       // Скрипт для обработки блока (если нужно)
       script: function(props) {
         window.vid_list = props.vid_list;
@@ -540,15 +540,51 @@ editor.Blocks.add('video-player-settings-block', {
 
 // Создаем блок стилей плеера
 editor.CssComposer.addRules(`
-  #player {
-    width: 720px;
-    height: 480px;
-    border: 3px solid black;
-    margin: 0 auto;
+.ramka-7 {
+    width: 200px; 
+    height: 200px;
+    background-color: #FFF;
     position: relative;
-    top: 0;
-    display: block;
-  }
+    margin: 60px auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;  
+    font-size: 24px;
+    font-family: 'Roboto', sans-serif; 
+    box-shadow: inset 6px 6px 8px 0 rgba(0,0,0,0.4);
+}
+.ramka-7:after, 
+.ramka-7:before {
+    mix-blend-mode:multiply;
+    filter:none;
+    z-index: -1;
+    content:'';
+    width: calc(100% + 90px);
+    height: calc(100% + 90px);
+    position: absolute;
+    animation: anim-ramka-7 8s ease-in-out infinite;
+}
+@keyframes anim-ramka-7 {
+    0%, 100% {
+        clip-path: polygon(0 0, calc(100% - (33px)) calc(0% + (33px)), 100% 100%, calc(0% + (33px)) calc(100% - (33px)));
+    }
+    50% {
+        clip-path: polygon(calc(0% + (33px)) calc(0% + (33px)), 100% 0, calc(100% - (33px)) calc(100% - (33px)), 0 100%);
+    }
+}
+.ramka-7:after{
+    animation-delay: -5s;
+    background-color: #BFE2FF;
+    clip-path: polygon(0 0, calc(100% - (33px)) calc(0% + (33px)), 100% 100%, calc(0% + (33px)) calc(100% - (33px)));
+}
+.ramka-7:before {
+    background-color: #337AB7;
+    clip-path: polygon(calc(0% + (33px)) calc(0% + (33px)), 100% 0, calc(100% - (33px)) calc(100% - (33px)), 0 100%);
+}
+.ramka-7:hover:before, 
+.ramka-7:hover:after {
+    animation-play-state: paused;
+}
 `);