Subtitle-Blocker/content.css at main · vancur2021/Subtitle-Blocker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
/* 遮挡层容器 */
.subtitle-blocker-host {
  position: absolute;
  z-index: 2147483647; /* Max z-index to ensure it's on top */
  pointer-events: none; /* Let clicks pass through by default, specific elements will re-enable */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  overflow: hidden;
}

/* 实际的模糊遮挡条 */
.subtitle-blocker-blur-layer {
  width: 100%;
  height: 15%; /* Default height */
  background-color: rgba(0, 0, 0, 0.1); /* Slight tint */
  backdrop-filter: blur(15px); /* The core blur effect */
  -webkit-backdrop-filter: blur(15px);
  pointer-events: auto; /* Enable interaction for this layer */
  position: relative;
  transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}

/* 鼠标悬停时降低干扰，方便操作进度条 */
.subtitle-blocker-blur-layer:hover {
  opacity: 0.4;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* 顶部调整大小的手柄 */
.sb-resize-handle {
  width: 100%;
  height: 10px;
  position: absolute;
  top: -5px;
  left: 0;
  cursor: ns-resize;
  z-index: 10;
  /* debug color: background: red; */
}

/* 拖拽移动的手柄 (位于遮挡条中间) */
.sb-drag-handle {
  width: 40px;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  margin: 4px auto;
  cursor: grab;
  transition: background-color 0.2s;
}

.sb-drag-handle:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

.sb-drag-handle:active {
  cursor: grabbing;
}

/* 隐藏状态 */
.sb-hidden {
  display: none !important;
}