@opendesign-plus-test/components 0.0.1-rc.49 → 0.0.1-rc.50

package/src/components/meeting/OMeetingForm.vue

@@ -704,6 +704,9 @@ defineExpose({
 
 <style lang="scss">
 .o-meeting-form {
+  --meeting-card-radius: var(--o-radius-xs);
+  --meeting-input-radius: var(--o-radius-xs);
+  --meeting-cell-radius: var(--o-radius-xs);
   .form-wrapper {
     & > .o-form-item {
       max-width: 592px;
@@ -733,7 +736,7 @@ defineExpose({
     }
 
     .o-textarea {
-      --_box-radius: var(--o-radius-xs);
+      --_box-radius: var(--meeting-input-radius);
     }
 
     input,
@@ -741,8 +744,17 @@ defineExpose({
       color: var(--o-input-color);
       @include text1;
 
+      @include respond('phone') {
+        @include text2;
+      }
+
       &::placeholder {
         color: var(--o-placeholder-color);
+        @include text1;
+
+        @include respond('phone') {
+          font-size: 14px !important;
+        }
       }
     }
 
@@ -854,11 +866,8 @@ defineExpose({
     align-items: center;
 
     .o-btn {
-      height: 40px !important;
-      font-size: 16px !important;
-      line-height: 24px !important;
-      border-radius: 20px !important;
       --btn-min-width: 90px;
+      --btn-radius: calc(var(--btn-height) / 2);
     }
   }
 
@@ -867,7 +876,7 @@ defineExpose({
     display: flex;
     align-items: center;
     border: 1px solid var(--o-color-control1);
-    border-radius: var(--o-radius-xs);
+    border-radius: var(--meeting-card-radius);
     padding: 0 15px;
     background-color: var(--o-color-fill2);
 
@@ -899,9 +908,6 @@ defineExpose({
         gap: 0;
       }
 
-      .el-select__placeholder {
-        @include text1;
-      }
 
       .el-select__caret,
       .el-input__prefix-icon {
@@ -955,7 +961,7 @@ defineExpose({
     .repeat-config {
       background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
       padding: var(--o-gap-5);
-      border-radius: var(--o-radius-xs);
+      border-radius: var(--meeting-card-radius);
       @include respond('<=pad_v') {
         padding: var(--o-gap-4);
       }

package/src/components/meeting/{OMyMeetingCalendar.vue → OMeetingMyCalendar.vue}

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {
-  DialogActionT,
+  DialogActionT, OButton,
   OCollapse,
   OCollapseItem,
   ODialog,
@@ -20,7 +20,7 @@ import {
 import { ElCalendar } from 'element-plus';
 import { computed, nextTick, onMounted, ref, onUnmounted, watch } from 'vue';
 import OMeetingDetail from './components/OMeetingDetail.vue';
-import { MeetingGroupType, MeetingItemT, PageParamsT } from './types.ts';
+import { CalendarDataType, MeetingGroupType, MeetingItemT, PageParamsT } from './types.ts';
 import dayjs from 'dayjs';
 import IconMeeting from '~icons/meeting/icon-meet.svg';
 import { INTERVAL_DAY, INTERVAL_MONTH, INTERVAL_WEEK } from './config.ts';
@@ -40,7 +40,7 @@ const list = ref<MeetingItemT[]>([]); // 列表数据
 const originList = ref<MeetingItemT[]>([]); // 原始数据
 const canLoadMore = computed(() => total.value === null || originList.value.length < total.value);
 const reloadAll = ref(false); // 是否需要清空数据
-const { t, locale, getPointStr, getWeekFromDate } = useMeetingConfig();
+const { t, locale, getPointStr, getConfig, getWeekFromDate } = useMeetingConfig();
 const isEn = computed(() => locale.value === Locales.EN);
 
 const props = withDefaults(defineProps<{
@@ -578,6 +578,9 @@ const cancelActions = computed<DialogActionT[]>(() => {
                 expired: dayjs(formatDate()).isAfter(dayjs(data.day)),
                 'all-deleted': calcIfAllDeleted(data.day),
               }"
+              :style="{
+                '--dot-bg': `${getConfig(CalendarDataType.MEETING, 'color')}`
+              }"
             >
               <div class="date-cell-text">
                 {{ Number(data.day.split('-')[2]) }}
@@ -634,9 +637,14 @@ const cancelActions = computed<DialogActionT[]>(() => {
                   >
                     <template #title>
                       <div class="item-header-left">
-                        <div class="meeting-icon">
+                        <div
+                          class="meeting-icon"
+                          :style="{
+                            backgroundColor: `${getConfig(CalendarDataType.MEETING, 'color')}`
+                          }"
+                        >
                           <OIcon>
-                            <IconMeeting />
+                            <component :is="getConfig(CalendarDataType.MEETING, 'icon')" />
                           </OIcon>
                         </div>
                         <div class="header-info">
@@ -667,6 +675,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
                       </div>
                       <div class="item-header-right" v-if="!row.is_delete">
                         <OLink
+                          :hover-underline="false"
                           v-if="!row.isExpired"
                           target="_blank"
                           :href="row.join_url"
@@ -680,7 +689,12 @@ const cancelActions = computed<DialogActionT[]>(() => {
                           </template>
                         </OLink>
                         <template v-else>
-                          <OLink target="_blank" v-if="row.etherpad" :href="row.etherpad">
+                          <OLink
+                            :hover-underline="false"
+                            target="_blank"
+                            v-if="row.etherpad"
+                            :href="row.etherpad"
+                          >
                             {{ t('meeting.meetingSummary') }}
                             <template #suffix>
                               <OIcon>
@@ -689,6 +703,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
                             </template>
                           </OLink>
                           <OLink
+                            :hover-underline="false"
                             target="_blank"
                             :href="`/${locale}/video/${row.group_name}/${row.mid}/${row.date}`"
                             v-if="row.hasObsData">
@@ -713,10 +728,12 @@ const cancelActions = computed<DialogActionT[]>(() => {
                         from="my"
                       />
                       <div class="meeting-btn" v-if="!row.isExpired && !row.is_delete">
-                        <OLink @click="handleItem(row, 'edit')">{{ t('meeting.editMeeting') }}
-                        </OLink>
-                        <OLink @click="handleItem(row, 'cancel')">{{ t('meeting.cancelMeeting') }}
-                        </OLink>
+                        <OButton color="normal" variant="text" @click="handleItem(row, 'edit')">
+                          {{ t('meeting.editMeeting') }}
+                        </OButton>
+                        <OButton color="normal" variant="text" @click="handleItem(row, 'cancel')">
+                          {{ t('meeting.cancelMeeting') }}
+                        </OButton>
                       </div>
                     </div>
                   </OCollapseItem>
@@ -745,7 +762,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
       >
         <template #header>
           {{
-            t('meeting.meetingHandleText', [handleDialogType === 'edit' ? t('meeting.edit') : t('meeting.cancel2')])
+            t('meeting.meetingHandleText', [handleDialogType === 'edit' ? t('meeting.edit') : t('meeting.cancel')])
           }}
         </template>
         <ORadioGroup v-model="handleType">
@@ -762,6 +779,9 @@ const cancelActions = computed<DialogActionT[]>(() => {
 
 <style lang="scss">
 .o-my-meeting-calendar {
+  --meeting-card-radius: var(--o-radius-xs);
+  --meeting-input-radius: var(--o-radius-xs);
+  --meeting-cell-radius: var(--o-radius-xs);
 
   .header {
     display: flex;
@@ -877,7 +897,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
       .el-calendar {
         min-height: 460px;
         height: calc(100% - 54px);
-        border-radius: var(--o-radius-xs);
+        border-radius: var(--meeting-card-radius);
         background-color: transparent;
 
         .el-calendar__header {
@@ -911,6 +931,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
 
         .el-calendar__body {
           .el-calendar-table {
+            display: table;
 
             th {
               text-align: center;
@@ -955,8 +976,9 @@ const cancelActions = computed<DialogActionT[]>(() => {
               .date-cell-text {
                 font-size: 14px;
                 line-height: 36px;
-                border-radius: var(--o-radius-xs);
+                border-radius: var(--meeting-cell-radius);
                 background-color: var(--o-color-control2-light);
+                border: 1px solid transparent;
               }
 
               .date-cell-text {
@@ -995,14 +1017,14 @@ const cancelActions = computed<DialogActionT[]>(() => {
 
               &.is-selected {
                 .date-cell-text {
-                  color: #fff;
-                  background-color: var(--o-color-primary1);
+                  background-color: var(--o-color-control3-light);
+                  border: 1px solid var(--o-color-primary1);
                 }
               }
 
               &.clickable {
                 &::after {
-                  background-color: var(--o-color-primary1);
+                  background-color: var(--dot-bg);
                 }
 
                 &.expired::after {
@@ -1207,31 +1229,20 @@ const cancelActions = computed<DialogActionT[]>(() => {
         display: flex;
         flex-direction: column;
 
-        .o-collapse-item {
-          &.last-item {
-            .o-collapse-item-header {
-              border-bottom: none;
-            }
-          }
-        }
-
         .o-collapse-item-expanded + .o-collapse-item-expanded {
           margin-top: var(--o-gap-4);
         }
 
         .height-placeholder {
-          height: 0;
-          transition: margin var(--o-easing-standard) var(--o-duration-s);
-        }
-
-        .o-collapse-item-expanded + .height-placeholder {
           height: var(--o-gap-4);
         }
 
+
         .o-collapse-item {
           padding: var(--o-gap-4) var(--o-gap-5);
+          padding-bottom: calc(var(--o-gap-5) - var(--o-gap-4));
           border-top: none;
-          border-radius: var(--o-radius-xs);
+          border-radius: var(--meeting-card-radius);
           transition: margin var(--o-easing-standard) var(--o-duration-s);
           --copy-display: none;
           --icon-size: 24px;
@@ -1239,30 +1250,42 @@ const cancelActions = computed<DialogActionT[]>(() => {
             padding: var(--o-gap-3) var(--o-gap-4);
           }
 
+          @include respond('phone') {
+            --icon-size: 20px;
+          }
+
           &:hover {
+            .title-text {
+              color: var(--o-color-primary1);
+            }
             @include respond('>pad_v') {
               --copy-display: inline-flex;
             }
           }
 
-          @include respond('phone') {
-            --icon-size: 20px;
+          &.last-item {
+            .o-collapse-item-header {
+              border-bottom: none;
+            }
           }
           &.o-collapse-item-expanded {
+            border-bottom: none;
+            background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent) !important;
+
             @include respond('<=pad_v') {
               --copy-display: inline-flex;
             }
-          }
 
-          &.o-collapse-item-expanded {
-            background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent) !important;
+            .o-collapse-item-header {
+              border-bottom: 1px solid var(--o-color-control4);
+            }
           }
         }
 
         .o-collapse-item-header {
-          border-bottom: 1px solid var(--o-color-control4);
+          border-bottom: none;
           padding-top: 0;
-          padding-bottom: var(--o-gap-2);
+          padding-bottom: var(--o-gap-4);
           display: flex;
           align-items: center;
           gap: var(--o-gap-4);
@@ -1334,7 +1357,11 @@ const cancelActions = computed<DialogActionT[]>(() => {
 
                   &.is-delete,
                   &.is-end {
-                    color: var(--o-color-info3);
+                    color: var(--o-color-info4);
+
+                    .title-text {
+                      color: var(--o-color-info4) !important;
+                    }
                   }
 
                   .tag-wrapper {
@@ -1380,10 +1407,12 @@ const cancelActions = computed<DialogActionT[]>(() => {
               padding-left: calc(var(--o-gap-3) + var(--icon-size));
               gap: var(--o-gap-4);
               width: 100%;
+              font-weight: 400;
 
               .o-link {
                 font-size: 14px;
                 line-height: 21px;
+                --link-color: var(--o-color-info2);
               }
               .o-icon {
                 font-size: 16px;
@@ -1399,6 +1428,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
               height: 18px;
               width: 18px;
               display: var(--copy-display);
+              color: var(--o-color-info1);
               @include respond('phone') {
                 bottom: var(--o-gap-2);
                 right: calc(20px + var(--o-gap-2))
@@ -1431,10 +1461,15 @@ const cancelActions = computed<DialogActionT[]>(() => {
               border-top: 1px solid var(--o-color-control4);
               margin-top: var(--o-gap-5);
               padding-top: var(--o-gap-4);
+              padding-bottom: var(--o-gap-4);
               display: flex;
               align-items: center;
               justify-content: flex-end;
               gap: var(--o-gap-5);
+
+              .o-link {
+                --link-color: inherit;
+              }
             }
           }
         }

package/src/components/meeting/OMeetingPlayback.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, watchEffect } from 'vue';
 import { speakerNum, transformSeconds, transformTime } from './utils';
-import { OOption, OSelect, OTab, OTabPane, type SelectValueT } from '@opensig/opendesign';
+import { OOption, OScroller, OSelect, OTab, OTabPane, type SelectValueT } from '@opensig/opendesign';
 import OMeetingPlaybackSubtitles from './components/OMeetingPlaybackSubtitles.vue';
 import OMeetingPlaybackVideo from './components/OMeetingPlaybackVideo.vue';
 import { useI18n } from '@/i18n';
@@ -203,7 +203,7 @@ onUnmounted(() => {
         <OTab v-model="tab">
           <OTabPane v-for="t in tabOptions" :key="t.value" :value="t.value" :label="t.label" />
         </OTab>
-        <div class="tab-content">
+        <OScroller :class="['tab-content', `tab-content-${tab}`]" show-type="hover">
           <div class="base-info" v-if="tab === tabOptions[0].value">
             <div class="info-item">
               <span>{{ t('meeting.item1') }}</span>
@@ -252,7 +252,7 @@ onUnmounted(() => {
               </div>
             </div>
           </div>
-        </div>
+        </OScroller>
       </div>
     </div>
     <div class="right-card card-wrapper" :style="{
@@ -271,15 +271,22 @@ onUnmounted(() => {
   display: flex;
   gap: var(--grid-column-gutter);
   align-items: flex-start;
+  --meeting-card-radius: var(--o-radius-xs);
+  --meeting-input-radius: var(--o-radius-xs);
+  --meeting-cell-radius: var(--o-radius-xs);
 
   @include respond('<=pad_v') {
     flex-wrap: wrap;
   }
 
   .card-wrapper {
-    border-radius: var(--o-radius-xs);
+    border-radius: var(--meeting-card-radius);
     background-color: var(--o-color-fill2);
     padding: var(--o-gap-5);
+
+    &.left-card {
+      padding-bottom: 0;
+    }
   }
 
   .left-card {
@@ -311,6 +318,7 @@ onUnmounted(() => {
       margin-top: var(--o-gap-5);
 
       .o-tab {
+        --tab-nav-justify: flex-start;
         .o-tab-navs {
           justify-content: flex-start;
         }
@@ -325,9 +333,23 @@ onUnmounted(() => {
 
       .tab-content {
         padding-top: var(--o-gap-4);
+        height: 280px;
+        padding-bottom: 0;
+        position: relative;
+
+        &::after {
+          height: 24px;
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          background: linear-gradient(180deg, rgba(var(--o-grey-1), 0), rgba(var(--o-grey-1), 1) 100%);
+        }
 
         .base-info {
-          @include tip1;
+          padding-bottom: var(--o-gap-5);
+          @include text1;
 
           .info-item {
             display: flex;
@@ -340,6 +362,7 @@ onUnmounted(() => {
             span:first-child {
               width: 6em;
               flex-shrink: 0;
+              color: var(--o-color-info3);
             }
 
             span:last-child {
@@ -355,6 +378,7 @@ onUnmounted(() => {
         .subject-list {
           counter-reset: itemIndex;
           position: relative;
+          padding-bottom: var(--o-gap-5);
 
           .mouse-current-time {
             position: absolute;
@@ -362,7 +386,7 @@ onUnmounted(() => {
             padding: var(--o-gap-1);
             box-shadow: var(--o-shadow-1);
             z-index: 10;
-            border-radius: var(--o-radius-xs);
+            border-radius: var(--meeting-cell-radius);
             transform: translateY(calc(0px - 100% - 4px));
             color: var(--o-color-info2);
             @include tip1;
@@ -402,7 +426,7 @@ onUnmounted(() => {
               right: 0;
               height: 4px;
               border-radius: 2px;
-              background-color: var(--o-color-fill1);
+              background-color: var(--o-color-fill3);
             }
 
             .subject-progress {
@@ -417,7 +441,7 @@ onUnmounted(() => {
                 position: absolute;
                 top: 0;
                 bottom: 0;
-                border-radius: var(--o-radius-xs);
+                border-radius: var(--meeting-cell-radius);
                 left: calc(var(--start) * 100%);
                 right: calc((1 - var(--end)) * 100%);
                 z-index: 9;

package/src/components/meeting/{OSigMeetingCalendar.vue → OMeetingSigCalendar.vue}

@@ -3,7 +3,7 @@ import { ref, onMounted, computed, nextTick, watch } from 'vue';
 import { ODivider, OPopover, OIcon, OTabPane, OTab, OScroller } from '@opensig/opendesign';
 import dayjs from 'dayjs';
 import IconTips from '~icons/components/icon-tips.svg';
-import OSigMeetingAside from './components/OSigMeetingAside.vue';
+import OMeetingSigAside from './components/OMeetingSigAside.vue';
 import { CalendarDataType, MeetingEventsItemT, MeetingItemT } from './types.ts';
 import { useScreen } from '@opendesign-plus/composables';
 import { useMeetingConfig } from './composables/useMeetingConfig';
@@ -281,7 +281,7 @@ onMounted(() => {
     <ODivider class="meeting-divider" v-if="!lePadV || (lePadV && dateList.length)" />
     <div class="meeting-card-content">
       <template v-if="!lePadV && monthIdx !== -1">
-        <OSigMeetingAside
+        <OMeetingSigAside
           :data="dateMapList.slice(monthIdx, monthIdx + 1)"
           :meetingDates="tabType !== CalendarDataType.EVENTS ? meetingDates :[] "
           :eventsDates="tabType !== CalendarDataType.MEETING ? eventsDates : []"
@@ -308,9 +308,12 @@ onMounted(() => {
 
 <style lang="scss">
 .o-sig-meeting-calendar {
+  --meeting-card-radius: var(--o-radius-xs);
+  --meeting-input-radius: var(--o-radius-xs);
+  --meeting-cell-radius: var(--o-radius-xs);
   width: 100%;
   background-color: var(--o-color-fill2);
-  border-radius: var(--o-radius-xs);
+  border-radius: var(--meeting-card-radius);
   margin-top: var(--o-gap-5);
   @include respond('phone') {
     .meeting-card-header {

package/src/components/meeting/components/OMeetingCalendarList.vue

@@ -165,8 +165,8 @@ const computedList = computed<any[]>(() => {
             <div class="meet-title" :title="item.topic || item.name">
               <OIcon
                 :style="{
-              backgroundColor: `${getConfig(item.type, 'color')}`
-            }"
+                  backgroundColor: `${getConfig(item.type, 'color')}`
+                }"
               >
                 <component :is="getConfig(item.type, 'icon')" />
               </OIcon>
@@ -389,7 +389,7 @@ const computedList = computed<any[]>(() => {
         flex-direction: column;
         background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
         padding: 16px 16px 16px calc(var(--icon-right) + var(--icon-size2) + var(--o-gap-5) - 12px);
-        border-radius: var(--o-radius-xs);
+        border-radius: var(--meeting-card-radius);
         @include tip1;
 
         @include respond('<=pad_v') {

package/src/components/meeting/components/OMeetingCalendarSelector.vue

@@ -173,7 +173,7 @@ const removeTag = (val: number) => {
       justify-content: center;
       background-color: var(--o-color-fill2);
       color: var(--o-color-info1);
-      border-radius: var(--o-radius-xs);
+      border-radius: var(--meeting-cell-radius);
 
       &:hover,
       &.is-checked {

package/src/components/meeting/components/OMeetingPlaybackSubtitles.vue

@@ -363,7 +363,7 @@ watch(
   height: 100%;
   min-height: calc(var(--layout-content-min-height) - 104px);
   background-color: var(--o-color-fill2);
-  border-radius: var(--o-radius-xs);
+  border-radius: var(--meeting-card-radius);
 
   .search-captions {
     display: flex;
@@ -371,8 +371,8 @@ watch(
     gap: var(--o-gap-4);
 
     .input-captions {
-      --input-radius: var(--o-radius-xs);
-      --_box-radius: var(--o-radius-xs);
+      --input-radius: var(--meeting-input-radius);
+      --_box-radius: var(--meeting-input-radius);
       flex-grow: 1;
 
       .o-icon {
@@ -443,6 +443,7 @@ watch(
   .o-tab {
     margin-top: var(--o-gap-5);
     height: calc(100% - 64px);
+    --tab-nav-justify: flex-start;
 
     .o-tab-navs {
       justify-content: flex-start;
@@ -456,7 +457,7 @@ watch(
       height: calc(100% - var(--o-line_height-text2) - var(--o-gap-4));
       .o-tab-pane {
         height: 100%;
-        padding-top: var(--o-gap-4);
+        padding-top: var(--o-gap-5);
 
         .o-scroller {
           height: 100%;
@@ -483,7 +484,7 @@ watch(
     .captions-item {
       padding: 4px 8px;
       cursor: pointer;
-      border-radius: var(--o-radius-xs);
+      border-radius: var(--meeting-cell-radius);
       @include hover {
         background-color: rgba(var(--o-blue-6), 0.1);
       }
@@ -500,7 +501,7 @@ watch(
           width: 18px;
           height: 18px;
           border-radius: 50%;
-          background-color: var(--o-color-primary2);
+          background-color: var(--o-color-primary1);
           color: var(--o-color-info1-inverse);
           display: flex;
           justify-content: center;
@@ -509,13 +510,13 @@ watch(
         }
 
         .speaker {
-          color: var(--o-color-info4);
+          color: var(--o-color-info3);
           margin-left: 4px;
           @include tip2;
         }
 
         .start-time {
-          color: var(--o-color-info4);
+          color: var(--o-color-info3);
           margin-left: 16px;
           @include tip2;
         }
@@ -534,7 +535,7 @@ watch(
       .text {
         color: var(--o-color-info2);
         margin-top: 8px;
-        @include tip1;
+        @include text1;
 
         .light-keyword {
           background-color: rgba(var(--o-blue-6), 0.2);

package/src/components/meeting/components/OMeetingPlaybackVideo.vue

@@ -264,7 +264,7 @@ defineExpose({
   min-height: calc(var(--layout-content-min-height) - 104px);
   background-color: var(--o-color-fill2);
   position: relative;
-  border-radius: var(--o-radius-xs);
+  border-radius: var(--meeting-card-radius);
   overflow: hidden;
 
   .video-placeholder {
@@ -443,7 +443,7 @@ defineExpose({
           width: calc(100% + 5em);
           max-height: 22em;
           padding: 8px 16px;
-          border-radius: var(--o-radius-xs);
+          border-radius: var(--meeting-cell-radius);
           margin-left: -2.5em;
           background-color: var(--o-color-info2);
           box-shadow: 0 3px 9px 0 rgba(var(--o-kleinblue-10), 0.08);
@@ -509,7 +509,7 @@ defineExpose({
         input {
           order: 1;
           margin-right: 12px;
-          border-radius: 4px;
+          border-radius: var(--meeting-input-radius);
           cursor: inherit;
           position: relative;
           top: -1px;
@@ -598,7 +598,7 @@ defineExpose({
     }
 
     .vjs-volume-control {
-      border-radius: var(--o-radius-xs);
+      border-radius: var(--meeting-cell-radius);
       background-color: var(--o-color-info2);
       box-shadow: 0 3px 9px 0 rgba(var(--o-kleinblue-10), 0.08);
       backdrop-filter: blur(13.59);
@@ -647,7 +647,7 @@ defineExpose({
       left: 0;
 
       div {
-        border-radius: 4px;
+        border-radius: var(--meeting-cell-radius);
       }
 
       .vjs-progress-holder {
@@ -692,7 +692,7 @@ defineExpose({
         width: fit-content !important;
         color: var(--o-color-info1-inverse) !important;
         background-color: rgba(0, 0, 0, 0.4) !important;
-        border-radius: var(--o-radius-xs);
+        border-radius: var(--meeting-cell-radius);
         display: block !important;
         padding: var(--o-gap-1) var(--o-gap-4);
         @include tip1;