@tencentcloud/roomkit-electron-vue3 2.4.2 → 2.6.0

package/src/TUIRoom/components/Whiteboard/resources/editor/shape-cursor.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60.1 (88133) - https://sketch.com -->
+    <title>shape-cursor</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M20,21.5 C20.2454599,21.5 20.4496084,21.6768752 20.4919443,21.9101244 L20.5,22 L20.5,27 C20.5,27.2761424 20.2761424,27.5 20,27.5 C19.7545401,27.5 19.5503916,27.3231248 19.5080557,27.0898756 L19.5,27 L19.5,22 C19.5,21.7238576 19.7238576,21.5 20,21.5 Z M27,19.5 C27.2761424,19.5 27.5,19.7238576 27.5,20 C27.5,20.2454599 27.3231248,20.4496084 27.0898756,20.4919443 L27,20.5 L22,20.5 C21.7238576,20.5 21.5,20.2761424 21.5,20 C21.5,19.7545401 21.6768752,19.5503916 21.9101244,19.5080557 L22,19.5 L27,19.5 Z M18,19.5 C18.2761424,19.5 18.5,19.7238576 18.5,20 C18.5,20.2454599 18.3231248,20.4496084 18.0898756,20.4919443 L18,20.5 L13,20.5 C12.7238576,20.5 12.5,20.2761424 12.5,20 C12.5,19.7545401 12.6768752,19.5503916 12.9101244,19.5080557 L13,19.5 L18,19.5 Z M20,12.5 C20.2454599,12.5 20.4496084,12.6768752 20.4919443,12.9101244 L20.5,13 L20.5,18 C20.5,18.2761424 20.2761424,18.5 20,18.5 C19.7545401,18.5 19.5503916,18.3231248 19.5080557,18.0898756 L19.5,18 L19.5,13 C19.5,12.7238576 19.7238576,12.5 20,12.5 Z" id="path-1"></path>
+        <filter x="-64.6%" y="-59.5%" width="229.3%" height="246.1%" filterUnits="objectBoundingBox" id="filter-2">
+            <feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
+            <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.16 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Whiteboard-Guidelines" transform="translate(-344.000000, -751.000000)">
+            <g id="shape-cursor" transform="translate(344.000000, 751.000000)">
+                <rect fill="#FFFFFF" opacity="0.01" x="0" y="0" width="40" height="40" rx="2"></rect>
+                <g fill-rule="nonzero">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                    <path stroke="#FFFFFF" stroke-width="1" d="M20,21 C20.4854103,21 20.898085,21.3479993 20.9899479,21.8654877 L21,22 L21,27 C21,27.5522847 20.5522847,28 20,28 C19.5145897,28 19.101915,27.6520007 19.0100521,27.1345123 L19,27 L19,22 C19,21.4477153 19.4477153,21 20,21 Z M27,19 C27.5522847,19 28,19.4477153 28,20 C28,20.4854103 27.6520007,20.898085 27.1345123,20.9899479 L27,21 L22,21 C21.4477153,21 21,20.5522847 21,20 C21,19.5145897 21.3479993,19.101915 21.8654877,19.0100521 L22,19 L27,19 Z M18,19 C18.5522847,19 19,19.4477153 19,20 C19,20.4854103 18.6520007,20.898085 18.1345123,20.9899479 L18,21 L13,21 C12.4477153,21 12,20.5522847 12,20 C12,19.5145897 12.3479993,19.101915 12.8654877,19.0100521 L13,19 L18,19 Z M20,12 C20.4854103,12 20.898085,12.3479993 20.9899479,12.8654877 L21,13 L21,18 C21,18.5522847 20.5522847,19 20,19 C19.5145897,19 19.101915,18.6520007 19.0100521,18.1345123 L19,18 L19,13 C19,12.4477153 19.4477153,12 20,12 Z" fill="#212324" fill-rule="evenodd"></path>
+                </g>
+                <rect fill="#FFFFFF" x="18.5" y="17" width="3" height="6"></rect>
+                <rect fill="#FFFFFF" x="17" y="18.5" width="6" height="3"></rect>
+                <path d="M20,21.5 C20.2454599,21.5 20.4496084,21.6768752 20.4919443,21.9101244 L20.5,22 L20.5,27 C20.5,27.2761424 20.2761424,27.5 20,27.5 C19.7545401,27.5 19.5503916,27.3231248 19.5080557,27.0898756 L19.5,27 L19.5,22 C19.5,21.7238576 19.7238576,21.5 20,21.5 Z M27,19.5 C27.2761424,19.5 27.5,19.7238576 27.5,20 C27.5,20.2454599 27.3231248,20.4496084 27.0898756,20.4919443 L27,20.5 L22,20.5 C21.7238576,20.5 21.5,20.2761424 21.5,20 C21.5,19.7545401 21.6768752,19.5503916 21.9101244,19.5080557 L22,19.5 L27,19.5 Z M18,19.5 C18.2761424,19.5 18.5,19.7238576 18.5,20 C18.5,20.2454599 18.3231248,20.4496084 18.0898756,20.4919443 L18,20.5 L13,20.5 C12.7238576,20.5 12.5,20.2761424 12.5,20 C12.5,19.7545401 12.6768752,19.5503916 12.9101244,19.5080557 L13,19.5 L18,19.5 Z M20,12.5 C20.2454599,12.5 20.4496084,12.6768752 20.4919443,12.9101244 L20.5,13 L20.5,18 C20.5,18.2761424 20.2761424,18.5 20,18.5 C19.7545401,18.5 19.5503916,18.3231248 19.5080557,18.0898756 L19.5,18 L19.5,13 C19.5,12.7238576 19.7238576,12.5 20,12.5 Z" fill="#212324" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/Whiteboard/resources/editor/text-cursor.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="47px" height="40px" viewBox="0 0 47 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60.1 (88133) - https://sketch.com -->
+    <title>text-cursor</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M16,26.5 C15.7238576,26.5 15.5,26.2761424 15.5,26 C15.5,25.7545401 15.6768752,25.5503916 15.9101244,25.5080557 L16,25.5 L19.5,25.5 L19.5,14.5 L16,14.5 C15.7238576,14.5 15.5,14.2761424 15.5,14 C15.5,13.7545401 15.6768752,13.5503916 15.9101244,13.5080557 L16,13.5 L24,13.5 C24.2761424,13.5 24.5,13.7238576 24.5,14 C24.5,14.2454599 24.3231248,14.4496084 24.0898756,14.4919443 L24,14.5 L20.5,14.5 L20.5,25.5 L24,25.5 C24.2761424,25.5 24.5,25.7238576 24.5,26 C24.5,26.2454599 24.3231248,26.4496084 24.0898756,26.4919443 L24,26.5 L16,26.5 Z" id="path-1"></path>
+        <filter x="-284.0%" y="-81.5%" width="668.1%" height="293.9%" filterUnits="objectBoundingBox" id="filter-2">
+            <feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
+            <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.16 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Whiteboard-Guidelines" transform="translate(-388.000000, -672.000000)">
+            <g id="text-cursor" transform="translate(392.000000, 672.000000)">
+                <rect  fill="#FFFFFF" opacity="0.01" x="0" y="0" width="40" height="40" rx="2"></rect>
+                <g  fill-rule="nonzero">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                    <path stroke="#FFFFFF" stroke-width="1" d="M19,25 L19,15 L16,15 C15.4477153,15 15,14.5522847 15,14 C15,13.5145897 15.3479993,13.101915 15.8654877,13.0100521 L16,13 L24,13 C24.5522847,13 25,13.4477153 25,14 C25,14.4854103 24.6520007,14.898085 24.1345123,14.9899479 L24,15 L21,15 L21,25 L24,25 C24.5522847,25 25,25.4477153 25,26 C25,26.4854103 24.6520007,26.898085 24.1345123,26.9899479 L24,27 L16,27 C15.4477153,27 15,26.5522847 15,26 C15,25.5145897 15.3479993,25.101915 15.8654877,25.0100521 L16,25 L19,25 Z" fill="#212324" fill-rule="evenodd"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/TUIRoom/components/common/ArrowStroke.vue

@@ -1,11 +1,13 @@
 <template>
   <div :class="arrowStrokeClass">
     <div :class="['stroke-content', { 'has-stroke': hasStroke }]">
-      <div class="arrow-content" @click="handleClickArrow">
-      </div>
+      <div class="arrow-content" @click="handleClickArrow"></div>
     </div>
-    <svg-icon :class="['arrow', { 'has-stroke': hasStroke }]" @click="handleClickArrow">
-      <arrow-stroke-left-icon :class="arrowDirection"></arrow-stroke-left-icon>
+    <svg-icon
+      :class="['arrow', { 'has-stroke': hasStroke }]"
+      @click="handleClickArrow"
+    >
+      <arrow-stroke-left-icon :class="arrowDirection" />
     </svg-icon>
   </div>
 </template>
@@ -18,110 +20,120 @@ import ArrowStrokeLeftIcon from './icons/ArrowStrokeLeftIcon.vue';
 interface Props {
   strokePosition: string;
   arrowDirection: string;
-  hasStroke: boolean,
+  hasStroke: boolean;
 }
 
 const props = defineProps<Props>();
 
 const emits = defineEmits(['click-arrow']);
 
-const arrowStrokeClass = computed(() => `arrow-stroke-container-${props.strokePosition}`);
+const arrowStrokeClass = computed(
+  () => `arrow-stroke-container-${props.strokePosition}`
+);
 
 function handleClickArrow() {
   emits('click-arrow');
 }
-
 </script>
 
 <style lang="scss" scoped>
 .arrow-stroke-container-left {
   width: 8px;
   height: 100%;
+
   .stroke-content {
+    position: absolute;
     width: 100%;
     height: 100%;
-    position: absolute;
     background-color: transparent;
     transform: perspective(20px) rotateX(0deg) rotateY(-20deg) translateZ(0);
+
     .arrow-content {
-      width: 5px;
-      height: 60px;
       position: absolute;
       top: 50%;
-      left: 0px;
-      transform: translateY(-50%);
+      left: 0;
+      width: 5px;
+      height: 60px;
       cursor: pointer;
+      transform: translateY(-50%);
+
       &::before {
-        content: '';
-        width: 20px;
-        height: 100%;
-        box-sizing: border-box;
         position: absolute;
         top: 0;
         right: -15px;
+        box-sizing: border-box;
+        width: 20px;
+        height: 100%;
+        content: '';
+        background-color: rgba(15, 16, 20, 0.3);
+        border: 1px solid rgba(143, 154, 178, 0.1);
         border-top-left-radius: 10px;
         border-bottom-left-radius: 10px;
-        border: 1px solid rgba(143, 154, 178, 0.10);
-        background-color: rgba(15, 16, 20, 0.30);
       }
     }
+
     &.has-stroke {
       .arrow-content {
-        width: 5px;
-        height: 60px;
         position: absolute;
         top: 50%;
-        left: 0px;
-        transform: translateY(-50%);
+        left: 0;
+        width: 5px;
+        height: 60px;
+        cursor: pointer;
         border-top: 1px solid var(--stroke-color);
-        border-left: 1px solid var(--stroke-color);
         border-bottom: 1px solid var(--stroke-color);
+        border-left: 1px solid var(--stroke-color);
         border-top-left-radius: 4px;
         border-bottom-left-radius: 4px;
-        cursor: pointer;
+        transform: translateY(-50%);
+
         &::before {
-          content: '';
-          width: 20px;
-          height: 100%;
           position: absolute;
           top: 0;
           right: -15px;
-          border: 0px;
+          width: 20px;
+          height: 100%;
+          content: '';
           background-color: transparent;
+          border: 0;
         }
       }
+
       &::before {
-        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
         width: 2px;
         height: calc((100% - 60px) / 2);
-        position: absolute;
-        top: 0px;
-        right: 0px;
+        content: '';
         border-right: 1px solid var(--stroke-color);
         border-bottom: 1px solid var(--stroke-color);
         border-bottom-right-radius: 4px;
       }
+
       &::after {
-        content: '';
+        position: absolute;
+        right: 0;
+        bottom: 0;
         width: 2px;
         height: calc((100% - 60px) / 2);
-        position: absolute;
-        bottom: 0px;
-        right: 0px;
-        border-right: 1px solid var(--stroke-color);
+        content: '';
         border-top: 1px solid var(--stroke-color);
+        border-right: 1px solid var(--stroke-color);
         border-top-right-radius: 4px;
       }
     }
   }
+
   .arrow {
     position: absolute;
     top: 50%;
     left: 6px;
-    transform: translateY(-50%);
+    color: #d5e0f2;
     cursor: pointer;
-    color: #D5E0F2;
     transition: color 0s;
+    transform: translateY(-50%);
+
     svg {
       transition: color 0s;
     }
@@ -131,109 +143,121 @@ function handleClickArrow() {
 .arrow-stroke-container-bottom {
   width: 100%;
   height: 8px;
+
   .stroke-content {
+    position: absolute;
     width: 100%;
     height: 100%;
-    position: absolute;
     background-color: transparent;
     transform: perspective(20px) rotateX(-20deg) rotateY(0deg) translateZ(0);
+
     .arrow-content {
-      width: 60px;
-      height: 5px;
       position: absolute;
+      bottom: 0;
       left: 50%;
-      bottom: 0px;
-      transform: translateX(-50%);
+      width: 60px;
+      height: 5px;
       cursor: pointer;
+      transform: translateX(-50%);
+
       &::before {
-        content: '';
-        width: 100%;
-        height: 20px;
         position: absolute;
-        box-sizing: border-box;
         bottom: 0;
-        border-bottom-left-radius: 10px;
+        box-sizing: border-box;
+        width: 100%;
+        height: 20px;
+        content: '';
+        background-color: rgba(15, 16, 20, 0.3);
+        border: 1px solid rgba(143, 154, 178, 0.1);
         border-bottom-right-radius: 10px;
-        border: 1px solid rgba(143, 154, 178, 0.10);
-        background-color: rgba(15, 16, 20, 0.30);
+        border-bottom-left-radius: 10px;
       }
     }
+
     &.has-stroke {
       .arrow-content {
-        width: 60px;
-        height: 5px;
         position: absolute;
+        bottom: 0;
         left: 50%;
-        bottom: 0px;
-        transform: translateX(-50%);
-        border-left: 1px solid var(--stroke-color);
-        border-bottom: 1px solid var(--stroke-color);
+        width: 60px;
+        height: 5px;
+        cursor: pointer;
         border-right: 1px solid var(--stroke-color);
-        border-bottom-left-radius: 4px;
+        border-bottom: 1px solid var(--stroke-color);
+        border-left: 1px solid var(--stroke-color);
         border-bottom-right-radius: 4px;
-        cursor: pointer;
+        border-bottom-left-radius: 4px;
+        transform: translateX(-50%);
+
         .arrow {
-          color: #A4BBDB;
+          color: #a4bbdb;
         }
+
         &::before {
-          content: '';
-          width: 100%;
-          height: 20px;
           position: absolute;
           bottom: 0;
-          border: 0px;
+          width: 100%;
+          height: 20px;
+          content: '';
           background-color: transparent;
+          border: 0;
         }
       }
+
       &::before {
-        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
         width: calc((100% - 60px) / 2);
         height: 2px;
-        position: absolute;
-        top: 0px;
-        left: 0px;
+        content: '';
         border-top: 1px solid var(--stroke-color);
         border-right: 1px solid var(--stroke-color);
         border-top-right-radius: 4px;
       }
+
       &::after {
-        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
         width: calc((100% - 60px) / 2);
         height: 2px;
-        position: absolute;
-        top: 0px;
-        right: 0px;
-        border-left: 1px solid var(--stroke-color);
+        content: '';
         border-top: 1px solid var(--stroke-color);
+        border-left: 1px solid var(--stroke-color);
         border-top-left-radius: 4px;
       }
     }
   }
+
   .arrow {
-      position: absolute;
-      left: 50%;
-      bottom: 4px;
-      transform: translateX(-50%);
-      cursor: pointer;
-      color: #D5E0F2;
+    position: absolute;
+    bottom: 4px;
+    left: 50%;
+    color: #d5e0f2;
+    cursor: pointer;
+    transition: color 0s;
+    transform: translateX(-50%);
+
+    svg {
       transition: color 0s;
-      svg {
-        transition: color 0s;
-      }
     }
+  }
 }
 
 .up {
   transform: rotate(90deg);
 }
+
 .left {
   transform: rotate(0deg);
 }
+
 .down {
   transform: rotate(-90deg);
 }
+
 .right {
   transform: rotate(180deg);
 }
-
 </style>

package/src/TUIRoom/components/common/AudioIcon.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['audio-icon-container', `${size == 'small' && 'small' }`]">
+  <div :class="['audio-icon-container', `${size == 'small' && 'small'}`]">
     <div class="audio-level-container">
       <div class="audio-level" :style="audioLevelStyle"></div>
     </div>
@@ -17,11 +17,11 @@ import MicOnIcon from './icons/MicOnIcon.vue';
 import MicOffIcon from './icons/MicOffIcon.vue';
 
 interface Props {
-  userId?: string,
-  audioVolume?: number,
-  isMuted?: boolean,
-  size?: string,
-  isDisabled?: boolean,
+  userId?: string;
+  audioVolume?: number;
+  isMuted?: boolean;
+  size?: string;
+  isDisabled?: boolean;
 }
 
 const roomStore = useRoomStore();
@@ -47,7 +47,6 @@ const audioLevelStyle = computed(() => {
   }
   return `height: ${currentAudioVolume.value * 4}%`;
 });
-
 </script>
 
 <style lang="scss" scoped>
@@ -55,21 +54,23 @@ const audioLevelStyle = computed(() => {
   position: relative;
   width: 24px;
   height: 24px;
+
   &.small {
     transform: scale(0.8);
   }
+
   .audio-level-container {
     position: absolute;
     top: 2px;
     left: 7px;
+    display: flex;
+    flex-flow: column-reverse wrap;
+    justify-content: space-between;
     width: 10px;
     height: 14px;
-    display: flex;
-    flex-wrap: wrap;
-    border-radius: 4px;
     overflow: hidden;
-    flex-direction: column-reverse;
-    justify-content: space-between;
+    border-radius: 4px;
+
     .audio-level {
       width: 100%;
       background-color: var(--green-color);
@@ -83,5 +84,4 @@ const audioLevelStyle = computed(() => {
     left: 0;
   }
 }
-
 </style>

package/src/TUIRoom/components/common/AudioMediaControl.vue

@@ -8,7 +8,10 @@
 -->
 <template>
   <div>
-    <div v-click-outside="handleHideAudioSettingTab" class="audio-control-container">
+    <div
+      v-click-outside="handleHideAudioSettingTab"
+      class="audio-control-container"
+    >
       <icon-button
         :title="t('Mic')"
         :has-more="hasMore"
@@ -21,14 +24,14 @@
           :audio-volume="audioVolume"
           :is-muted="isMuted"
           :is-disabled="isDisabled"
-        ></audio-icon>
+        />
       </icon-button>
       <audio-setting-tab
         v-show="showAudioSettingTab"
         theme="white"
         class="audio-tab"
         :audio-volume="audioVolume"
-      ></audio-setting-tab>
+      />
     </div>
   </div>
 </template>
@@ -41,13 +44,16 @@ import AudioSettingTab from '../common/AudioSettingTab.vue';
 import AudioIcon from '../common/AudioIcon.vue';
 import { useI18n } from '../../locales';
 import vClickOutside from '../../directives/vClickOutside';
-import { isGetUserMediaSupported, isEnumerateDevicesSupported } from '../../utils/mediaAbility';
+import {
+  isGetUserMediaSupported,
+  isEnumerateDevicesSupported,
+} from '../../utils/mediaAbility';
 
 interface Props {
-  hasMore?: boolean,
-  isMuted: boolean,
-  isDisabled?: boolean,
-  audioVolume: number,
+  hasMore?: boolean;
+  isMuted: boolean;
+  isDisabled?: boolean;
+  audioVolume: number;
 }
 
 withDefaults(defineProps<Props>(), {
@@ -58,7 +64,8 @@ withDefaults(defineProps<Props>(), {
 const emits = defineEmits(['click']);
 
 const showAudioSettingTab: Ref<boolean> = ref(false);
-const isSupportAudioMedia = isGetUserMediaSupported && isEnumerateDevicesSupported;
+const isSupportAudioMedia =
+  isGetUserMediaSupported && isEnumerateDevicesSupported;
 const { t } = useI18n();
 
 async function handleClickIcon() {
@@ -83,38 +90,37 @@ function handleHideAudioSettingTab() {
     showAudioSettingTab.value = false;
   }
 }
-
 </script>
 
 <style lang="scss" scoped>
-
 $audioTabWidth: 305px;
 
 .audio-control-container {
   position: relative;
+
   .audio-tab {
     position: absolute;
     bottom: calc(100% + 12px);
     left: -5px;
     width: $audioTabWidth;
+    padding: 20px 20px 24px;
     background: var(--background-color-1);
-    padding: 20px 20px 24px 20px;
     border-radius: 8px;
     box-shadow:
-      0px 2px 4px -3px rgba(32, 77, 141, 0.03),
-      0px 6px 10px 1px rgba(32, 77, 141, 0.06),
-      0px 3px 14px 2px rgba(32, 77, 141, 0.05);
+      0 2px 4px -3px rgba(32, 77, 141, 0.03),
+      0 6px 10px 1px rgba(32, 77, 141, 0.06),
+      0 3px 14px 2px rgba(32, 77, 141, 0.05);
+
     &::before {
-      content: '';
       position: absolute;
-      left: 28px;
       bottom: -10px;
+      left: 28px;
+      content: '';
       border-top: 5px solid var(--background-color-1);
-      border-left: 5px solid transparent;
       border-right: 5px solid transparent;
       border-bottom: 5px solid transparent;
+      border-left: 5px solid transparent;
     }
   }
 }
-
 </style>