:root {
  --primary-invert-amount: 0.98;
}

/*
 这几个是 Bilibili 自带的暗黑模式，不需要再次翻转：
 [lab-style*='dark']
 [data-match-theme='dark']
 .theme-dark
*/

/* 所有元素，颜色翻转（暗黑） */
html.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) {
  color-scheme: dark;
  filter: invert(var(--primary-invert-amount)) hue-rotate(0.5turn);
}

/* 图片、视频、带有背景图的原色，保持原有颜色（再次翻转） */
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) img,
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) svg,
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) [style*='background:url'],
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) [style*='background-image:url'],
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) [style*='background: url'],
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) [style*='background-image: url'],
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) video,
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) bwp-video {
  filter: invert(var(--primary-invert-amount)) hue-rotate(0.5turn);
}

/* 已经在有背景图片的情况下，图片不需要再次反转了 */
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) [style*='background:url'] img,
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) [style*='background-image:url'] img,
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) [style*='background: url'] img,
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark'])
  [style*='background-image: url']
  img,
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) [style*='background:url'] svg,
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) [style*='background-image:url'] svg,
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) [style*='background: url'] svg,
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark'])
  [style*='background-image: url']
  svg,
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark'])
  [style*='background-image:url']
  > [style*='background-image:url'],
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark'])
  [style*='background-image:url']
  > [style*='background-image: url'],
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark'])
  [style*='background-image: url']
  > [style*='background-image:url'],
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark'])
  [style*='background-image: url']
  > [style*='background-image: url'] {
  filter: unset;
}

/* 以 icon 开头和结尾的 svg，一般用于修饰文字的图表，不进行再次翻转（保持暗黑） */
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) svg[class$='icon'] {
  filter: unset;
}
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) svg[class^='icon'] {
  filter: unset;
}

/* Video Player Page: 反转播放器：保持原色 */
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) .bpx-player-video-area {
  filter: invert(var(--primary-invert-amount)) hue-rotate(0.5turn);
}

/* Video Player Page: 播放器中的图片、视频等，不需要再次反转 */
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) .bpx-player-video-area img,
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) .bpx-player-video-area svg,
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) .bpx-player-video-area [style*='background:url'],
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) .bpx-player-video-area [style*='background-image:url'],
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) .bpx-player-video-area [style*='background: url'],
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) .bpx-player-video-area [style*='background-image: url'],
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) .bpx-player-video-area video,
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) .bpx-player-video-area bwp-video,
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) .horizontal-ratio-item-inner .season-cover-views svg /* 番剧页面，视频卡片上统计信息的 icon */ {
  filter: unset;
}

/* Video Player Page: 播放器右键菜单需要暗黑 */
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) .bpx-player-context-area,
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) .bpx-player-dm-setting-wrap {
  filter: invert(var(--primary-invert-amount)) hue-rotate(0.5turn);
}

.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) .bili-video-card__stats, /* 首页：视频卡片上的播放量、弹幕数、时长，保留原色，不需要反转 */
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) .bili-live-card__stats, /* 首页：直播卡片上的播放量、弹幕数、时长，保留原色，不需要反转 */
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) .bili-dyn-card-video__cover-shadow /* 动态详情页面：视频卡片的 stat 信息不需要反转*/ {
  filter: invert(0.85) hue-rotate(0.5turn);
}

/* 视频页面在 fullscreen 下，需要先做颜色反转 */
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) :fullscreen {
  color-scheme: dark light;
  filter: invert(var(--primary-invert-amount)) hue-rotate(0.5turn);
}

/*
  https://github.com/flanker/bilibili-dark-mode/issues/2
  剧集播放页面、文章页面的评论文字，B站未设置颜色，导致无法反转。
  Adhoc 给这里先加上默认文字颜色。
*/
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark'])
  .bb-comment
  .comment-list
  .list-item
  .text,
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark'])
  .bb-comment
  .comment-list
  .list-item
  .user
  .text-con {
  color: #18191c;
}

/*
  https://github.com/flanker/bilibili-dark-mode/issues/7
  历史记录页面的搜索框没有适配夜间模式。
  个人主页公告编辑区域
*/
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) input,
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) textarea {
  background-color: transparent;
  color: #18191c;
}

/* 评论区留言中的图片，预览时已经是深色背景，所以需要先做一次颜色反转，同时保留图片颜色不变 */
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) .reply-view-image {
  filter: invert(var(--primary-invert-amount)) hue-rotate(0.5turn);
}
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) .reply-view-image img {
  filter: unset;
}

/* blackboard 页面，使用 iframe 嵌入的播放器，反转播放器：保持原色 */
.dark-bili-blackboard iframe {
  filter: invert(var(--primary-invert-amount)) hue-rotate(0.5turn);
}
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark'])
  :fullscreen
  .dark-bili-blackboard
  iframe {
  filter: unset;
}

/* 直播页面：b站部分元素已经是黑色，需要重置下 */
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark'])
  .live-room-app
  .web-player-ending-panel {
  background-color: #fff !important;
}
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark'])
  .live-room-app
  .live-player-mounter {
  background-color: #fff !important;
}
/* 直播页面：直播视频菜单栏 */
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark'])
  .live-room-app
  .web-player-controller-wrap {
  filter: invert(var(--primary-invert-amount)) hue-rotate(0.5turn);
}
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark'])
  .live-room-app
  .web-player-controller-wrap
  svg,
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark'])
  .live-room-app
  .web-player-controller-wrap
  img {
  filter: unset;
}

/* 评论区：B站评论区使用了 ShadowRoot，只能通过 css var 来控制了 */
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) bili-comments {
  filter: invert(var(--primary-invert-amount)) hue-rotate(0.5turn);
  --text1: #fff;
  --graph_bg_thick: #333;
  --graph_bg_thin: #010101;
  --bg1: #18191c;
  --bg3: #2f3238; /* 评论区背景色 */
  --brand_blue_thin: #333; /* 从收到的赞进入视频后自己消息的高亮 */
}
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) bili-user-profile {
  filter: invert(var(--primary-invert-amount)) hue-rotate(0.5turn);
  --text1: #fff;
  --bg1_float: #2f3238;
}
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) bili-photoswipe {
  filter: invert(var(--primary-invert-amount)) hue-rotate(0.5turn);
}

/* 评论区图片预览：图片预览组件，需要先做颜色反转，同时保留图片颜色不变 */
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) .pswp {
  filter: invert(var(--primary-invert-amount)) hue-rotate(0.5turn);
}
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) .pswp img {
  filter: unset;
}

/* 个人空间：处理.h-inner (https://github.com/flanker/bilibili-dark-mode/issues/28) */
.dark-bili:not([lab-style*='dark']):not(.theme-dark):not([data-match-theme='dark']) .h-inner {
  filter: unset;
}

/* 消息中心：背景图片 (https://github.com/flanker/bilibili-dark-mode/issues/37) */
html.dark-bili .message-bg {
  filter: brightness(80%) saturate(90%) contrast(110%) !important;
}
