@titaui/pc 1.10.7 → 1.10.8-2.beta-1

package/lib/components/{float-fixed-video-modal → video-modal/components/video-box}/index.css

@@ -1,121 +1,141 @@
-.titaui-pc-float-fixed-video {
-  display: none;
-  position: fixed;
-  bottom: 20px;
-  right: 72px;
-  width: 360px;
-  height: 200px;
-  border-radius: 12px;
+.titaui-pc-video-box__box {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  border-bottom-right-radius: 24px;
+  border-bottom-left-radius: 24px;
   overflow: hidden;
-  z-index: 11;
-  box-shadow: 0px 2px 12px 0px rgba(127, 145, 180, 0.2);
   cursor: pointer;
 }
 
-.titaui-pc-float-fixed-video--show {
-  display: block;
-}
-
-.titaui-pc-float-fixed-video__video {
-  width: 360px;
-  height: 200px;
+.titaui-pc-video-box__box:hover .titaui-pc-video-box__mask1 {
+  opacity: 1;
+  transition: 0.5s;
 }
 
-.titaui-pc-float-fixed-video__mask1 {
-  opacity: 0;
+.titaui-pc-video-box__box:hover .titaui-pc-video-box__mask2 {
+  opacity: 1;
   transition: 0.5s;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 16px;
-  box-sizing: border-box;
-  position: absolute;
-  top: 0;
-  width: 360px;
-  height: 42px;
-  background: linear-gradient(180deg, #5a6068 0%, rgba(45, 60, 81, 0) 100%);
 }
 
-.titaui-pc-float-fixed-video__mask1--show {
+.titaui-pc-video-box__box:hover .titaui-pc-video-box__progress {
   opacity: 1;
   transition: 0.5s;
 }
 
-.titaui-pc-float-fixed-video__mask1-title {
-  font-size: 12px;
-  font-weight: normal;
-  color: #ffffff;
-  line-height: 18px;
+.titaui-pc-video-box__mouseMove {
+  width: 100%;
+  height: 30px;
+  position: absolute;
+  bottom: 40px;
+  z-index: 12;
 }
 
-.titaui-pc-float-fixed-video__mask1-close {
-  width: 14px;
-  height: 14px;
-  cursor: pointer;
+.titaui-pc-video-box__mouseMove:hover .titaui-pc-video-box__progress {
+  height: 4px;
 }
 
-.titaui-pc-float-fixed-video__mask2 {
+.titaui-pc-video-box__mouseMove--small {
+  height: 20px;
+  bottom: 30px;
+}
+
+.titaui-pc-video-box__progress {
   opacity: 0;
-  transition: 0.5;
+  transition: 0.5s;
+  position: absolute;
+  bottom: 14px;
+  width: 100%;
+  height: 2px;
+  background: #ffffff;
+  z-index: 2;
+}
+
+.titaui-pc-video-box__progress--small {
+  bottom: 12px;
+}
+
+.titaui-pc-video-box__progress-current {
   position: absolute;
+  left: 0;
   bottom: 0;
-  width: 360px;
-  height: 42px;
-  background: linear-gradient(180deg, rgba(20, 28, 40, 0) 0%, #5a6068 100%);
+  background: #77be16;
+  height: 100%;
+  z-index: 3;
 }
 
-.titaui-pc-float-fixed-video__mask2--show {
-  opacity: 1;
-  transition: 0.5s;
+.titaui-pc-video-box__progress-current-dot {
+  position: absolute;
+  right: 0;
+  bottom: -2px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #77be16;
 }
 
-.titaui-pc-float-fixed-video__controls {
-  opacity: 0;
-  transition: 0.5s;
+.titaui-pc-video-box__controls {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 10px 12px;
+  padding: 16px 32px 16px 32px;
   box-sizing: border-box;
   position: absolute;
   bottom: 0;
   z-index: 2;
 }
 
-.titaui-pc-float-fixed-video__controls--show {
-  opacity: 1;
-  transition: 0.5s;
+.titaui-pc-video-box__controls--small {
+  padding: 10px 12px;
 }
 
-.titaui-pc-float-fixed-video__controls-left {
-  display: flex;
+.titaui-pc-video-box__controls-left {
+  display: inline-flex;
   align-items: center;
+  justify-content: center;
 }
 
-.titaui-pc-float-fixed-video__controls-right {
+.titaui-pc-video-box__controls-button {
+  width: 24px;
+  height: 24px;
+  border-radius: 12px;
   display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.titaui-pc-float-fixed-video__controls-play {
+.titaui-pc-video-box__controls-button:hover {
+  background: rgba(20, 28, 40, 0.6);
+}
+
+.titaui-pc-video-box__controls-play {
   display: inline-flex;
   align-items: center;
+  cursor: pointer;
+}
+
+.titaui-pc-video-box__controls-play img {
   width: 16px;
   height: 16px;
-  cursor: pointer;
 }
 
-.titaui-pc-float-fixed-video__controls-time {
+.titaui-pc-video-box__controls-time {
   font-size: 12px;
   color: #ffffff;
   line-height: 18px;
 }
 
-.titaui-pc-float-fixed-video__controls-time:nth-of-type(1) {
+.titaui-pc-video-box__controls-time:nth-of-type(1) {
   margin-left: 6px;
 }
 
-.titaui-pc-float-fixed-video__controls-volume {
+.titaui-pc-video-box__controls-muted {
+  width: 16px;
+  height: 16px;
+}
+
+.titaui-pc-video-box__controls-volume {
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
@@ -127,20 +147,19 @@
   border-radius: 12px;
 }
 
-.titaui-pc-float-fixed-video__controls-volume-progress {
+.titaui-pc-video-box__controls-volume-progress {
   position: relative;
   width: 34px;
   height: 2px;
   background: rgba(255, 255, 255, 0.4);
   border-radius: 1px;
-  cursor: pointer;
 }
 
-.titaui-pc-float-fixed-video__controls-volume-progress--hidden {
+.titaui-pc-video-box__controls-volume-progress--hidden {
   display: none;
 }
 
-.titaui-pc-float-fixed-video__controls-volume-current {
+.titaui-pc-video-box__controls-volume-current {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -149,7 +168,7 @@
   border-radius: 1px;
 }
 
-.titaui-pc-float-fixed-video__controls-volume-current::after {
+.titaui-pc-video-box__controls-volume-current::after {
   content: '';
   position: absolute;
   right: 0;
@@ -160,84 +179,62 @@
   background: #ffffff;
 }
 
-.titaui-pc-float-fixed-video__controls-volume-current--hidden {
+.titaui-pc-video-box__controls-volume-current--hidden {
   display: none;
 }
 
-.titaui-pc-float-fixed-video__controls-full {
+.titaui-pc-video-box__controls-right {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  border-radius: 12px;
-  margin-left: 6px;
-  cursor: pointer;
-}
-
-.titaui-pc-float-fixed-video__controls-full:hover {
-  background: rgba(20, 28, 40, 0.6);
-}
-
-.titaui-pc-float-fixed-video__controls-full > img {
-  width: 16px;
-  height: 16px;
 }
 
-.titaui-pc-float-fixed-video__controls-button {
-  width: 24px;
-  height: 24px;
-  border-radius: 12px;
-  display: inline-flex;
+.titaui-pc-video-box__title {
+  width: 100%;
+  height: 100%;
+  display: flex;
   align-items: center;
-  justify-content: center;
-}
-
-.titaui-pc-float-fixed-video__controls-button:hover {
-  background: rgba(20, 28, 40, 0.6);
+  justify-content: space-between;
 }
 
-.titaui-pc-float-fixed-video__progress {
+.titaui-pc-video-box__mask1 {
   opacity: 0;
   transition: 0.5s;
   position: absolute;
-  bottom: 38px;
+  top: 0;
+  padding: 0 16px;
+  box-sizing: border-box;
   width: 100%;
-  height: 2px;
-  background: #ffffff;
-  z-index: 3;
-  cursor: pointer;
+  height: 62px;
+  background: linear-gradient(0deg, rgba(20, 28, 40, 0) 0%, #5a6068 100%);
 }
 
-.titaui-pc-float-fixed-video__progress--show {
-  opacity: 1;
-  transition: 0.5s;
+.titaui-pc-video-box__mask1--small {
+  height: 42px;
 }
 
-.titaui-pc-float-fixed-video__progress:hover {
-  height: 4px;
+.titaui-pc-video-box__mask1-title {
+  font-size: 12px;
+  font-weight: normal;
+  color: #ffffff;
+  line-height: 18px;
 }
 
-.titaui-pc-float-fixed-video__progress--show {
-  opacity: 1;
-  transition: 0.5s;
+.titaui-pc-video-box__mask1-close {
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
 }
 
-.titaui-pc-float-fixed-video__progress-current {
+.titaui-pc-video-box__mask2 {
+  opacity: 0;
+  transition: 0.5s;
   position: absolute;
-  left: 0;
   bottom: 0;
-  background: #77be16;
-  height: 100%;
-  z-index: 3;
+  width: 100%;
+  height: 62px;
+  background: linear-gradient(180deg, rgba(20, 28, 40, 0) 0%, #5a6068 100%);
 }
 
-.titaui-pc-float-fixed-video__progress-current-dot {
-  position: absolute;
-  right: 0;
-  bottom: -2px;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: #77be16;
+.titaui-pc-video-box__mask2--small {
+  height: 42px;
 }