Improve layout area toggle css

Author: OpenHypervideo

src/player/modules/ViewVideo/style.css

@@ -620,7 +620,7 @@
 
 .playerContainer .controls .layoutAreasSchematic .schematicCenter {
     flex: 1 1 auto;
-    background: var(--video-background-color);
+    background: transparent;
     min-height: 50px;
     border-radius: 2px;
     display: flex;
@@ -629,7 +629,7 @@
 }
 
 .playerContainer .controls .layoutAreasSchematic .schematicCenter .icon-play-1::before {
-    font-size: 16px !important;
+    font-size: 18px !important;
     margin: 0;
     width: auto;
     line-height: normal;
@@ -639,19 +639,21 @@
 
 .playerContainer .controls .layoutAreasSchematic .schematicArea {
     background: var(--semi-transparent-fg-color);
+    border: 1px dashed var(--primary-fg-color);
     border-radius: 2px;
     cursor: pointer;
-    opacity: 0.4;
+    opacity: 0.7;
     transition: opacity 150ms, background-color 150ms;
 }
 
 .playerContainer .controls .layoutAreasSchematic .schematicArea:hover {
-    opacity: 0.7;
+    opacity: 0.85;
 }
 
 .playerContainer .controls .layoutAreasSchematic .schematicArea.active {
     background: var(--secondary-fg-color);
     opacity: 1;
+    border-color: transparent;
 }
 
 .playerContainer .controls .layoutAreasSchematic .schematicAreaTop,