抖音web版适配 by qingct

/* ==UserStyle==
@name			抖音web版适配
@namespace		QingCT
@author			QingCT
@version		1.0.0
@homepageURL	https://gist.github.com/QingCT/0376e230e2381bf3890d2dd2c5e92b9b/
==/UserStyle== */

/**
Changelog:
v1.0.0: feat: 抖音 web 版适配
**/

@-moz-document domain("douyin.com") {

/*移动端取消高亮 */
* {
  -webkit-tap-highlight-color: transparent;
}
/* 点赞分享 */
@keyframes videoInteraction {
  from {
    padding-bottom: 10vh;
  }
  to {
    padding-bottom: 13vh;
  }
}
.xgplayer .xgplayer-video-interaction-wrap {
  opacity: 0.5;
  transform: scale(0.9);
  transform-origin: center top;
  text-shadow: 0 0 1px rgb(0 0 0), 0 0 2px rgb(0 0 0);
  animation: videoInteraction 10s linear infinite alternate;
  position: relative;
  z-index: 1;
}


/* 隐藏上/下一个视频 */
.xgplayer .xgplayer-playswitch {
  display: none !important;
}

/* 全屏按钮变大，方便点击 */
.xgplayer .xgplayer-fullscreen .xg-get-fullscreen {
  width: 20vh;
  height: 20vh;
  transform: translateY(-20%);
}

/* 作者\文案等缩小，加阴影方便查看 */
@keyframes videoInfo {
  from {
    padding-bottom: 0;
  }
  to {
    padding-bottom: 3vh;
  }
}
.xgplayer .xgplayer-video-info-wrap {
  opacity: 1;
  --fc: rgba(0, 0, 0, 0.1);
  /*     text-shadow: 0 0 1px rgba(0, 0, 0,0.7), 0 0 4px rgba(0, 0, 0,0.5); */
  text-shadow: -1px -1px 0 var(--fc), -1px 1px 0 var(--fc), 1px -1px 0 var(--fc), 1px 1px 0 var(--fc), -1px 0 0 var(--fc), 1px 0 0 var(--fc), 0 -1px 0 var(--fc), 0 1px 0 var(--fc), 0 0 4px rgba(0, 0, 0, 0.5);
  animation: videoInfo 10s linear infinite alternate;
}
/* 加点距离 */
.xgplayer .xgplayer-video-info-wrap .video-info-detail {
  padding-bottom: 8vmin;
}

/* 右侧边栏放大到下半屏，方便滑动上/下一个 */
.feedContainer .xgplayer .xg-right-bar {
  top: 60% !important;
  left: 0;
  align-items: flex-end;
  z-index: 10 !important;
  bottom: 0 !important;
}
/* 两边加多区域，方便滑动，中间留着播放按钮 */
.feedContainer .xgplayer .xg-right-bar::before,
.feedContainer .xgplayer .xg-right-bar::after {
  display: block;
  content: "";
  width: 30vw;
  height: 30vh;
  flex: none;
  position: absolute;
  top: -30vh;
}
.feedContainer .xgplayer .xg-right-bar::before {
  left: 0;
}
.feedContainer .xgplayer .xg-right-bar::before {
  right: 0;
}
/* 播放按钮层级提高 */
.xgplayer .xgplayer-start {
  z-index: 11;
}

/* 视频和封面优化，上下显示更多内容 */
@media screen and (orientation: portrait) {
  .xgplayer-fullscreen-parent .imgBackground {
    display: block;
  }
  .xgplayer-fullscreen-parent .xgplayer.xgplayer-is-fullscreen video,
  .xgplayer-fullscreen-parent .imgBackground > img {
    object-fit: contain;
    margin-left: -7.4vw;
    width: calc(100% + 14.8vw);
    /* 补空，使刘海对称 */
    height: calc(100% - 8vw);
  }
}

/* 评论优化 */
@media screen and (orientation: portrait) {
  .xgplayer-fullscreen-parent .playerContainer + div {
    width: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
    transition: none;
  }
  .xgplayer-fullscreen-parent .playerContainer + div > div:nth-child(1) {
    width: 100%;
    left: 0;
    transition: none;
    height: 60%;
    margin-top: 40vh;
    overflow: initial;
  }
  .xgplayer-fullscreen-parent .playerContainer + div > div:nth-child(2) {
    width: 100%;
    left: 100% !important;
  }
  /* 关闭按钮拓展 */
  .xgplayer-fullscreen-parent .playerContainer + div > div:nth-child(1) > div:nth-child(1) svg {
    position: absolute;
    left: 0;
    top: -40vh;
    width: 100%;
    height: calc(40vh + 54px);
    padding-top: 40vh;
    padding-left: calc(100% - 36px);
    z-index: 2;
  }

  /* 展开按钮点击区域加宽 */
  .xgplayer-fullscreen-parent .playerContainer + div > div:nth-child(1) button {
    width: 100%;
    text-align: left;
    margin-top: 0;
    height: 48px;
  }
}

/* 纯净模式，即隐藏点赞、文案、小进度条等 */
.douyin-pure .feedContainer .player-fullscreen-show-interaction .xgplayer .xg-right-bar .xgplayer-video-interaction-wrap,
.douyin-pure .feedContainer .player-fullscreen-show-interaction .xgplayer div.xgplayer-video-info-wrap {
  display: none !important;
}


/* 进度条位置上移，方便手机操作 */
@media screen and (orientation: portrait) {
  /* 底部小进度条缩小 */
  .xgplayer .xgplayer-video-info-wrap .mini-progress-outer {
    height: 2px;
  }
  /*   按钮边距减小，小屏才能放到一排 */
  .feedContainer .player-fullscreen-show-interaction .xgplayer.xgplayer-is-fullscreen .xg-right-grid {
    margin-right: 8px;
  }
  .xgplayer .xgplayer-autoplay-setting {
    margin-right: 5px;
  }
  /* 时长文字清晰一点 */
  .xgplayer .xgplayer-time .time-duration {
    opacity: .7;
    color: #fff;
  }
  /* 进度条位置上移， */
  .xgplayer .xg-inner-controls {
    height: calc(40px + 36px);
  }
  .xgplayer.xgplayer-pc .xgplayer-controls {
    background-image: linear-gradient( 180deg, transparent, rgba(0, 0, 0, .6), rgba(0, 0, 0, .6));
    height: calc(40px + 36px + 36px);
    ;
  }
  .xgplayer.xgplayer-pc .xgplayer-progress.active .xgplayer-progress-outer {
    margin-bottom: 0;
  }
  .xgplayer .xgplayer-progress {
    height: calc(20px + 36px);
    align-items: flex-start;
  }
  .xgplayer .xg-left-grid,
  .xgplayer .xg-right-grid {
    height: 40px;
  }
  .xgplayer .bottom-controls .xg-center-grid {
    bottom: 0;
  }
  .xgplayer .progress-list {
    height: calc(8px + 36px);
  }
  .xgplayer .xgplayer-progress-inner {
    height: 8px;
  }
}

}