defluffer/styles.css at main · itayzit/defluffer · 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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
.defluff-summary {
  border-radius: 6px;
}

/* Brief blue "marking" glow as the defluffed text fades in, then settles. */
.defluff-flash {
  animation: defluff-flash 0.9s ease-out;
}

@keyframes defluff-flash {
  0% {
    background: rgba(10, 102, 194, 0.16);
    box-shadow: 0 0 0 2px rgba(10, 102, 194, 0.55), 0 6px 22px rgba(10, 102, 194, 0.3);
  }
  100% {
    background: transparent;
    box-shadow: 0 0 0 0 rgba(10, 102, 194, 0);
  }
}

.defluff-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #0a66c2;
  background: rgba(10, 102, 194, 0.08);
  border: none;
  border-radius: 12px;
  cursor: pointer;
}

.defluff-badge:hover {
  background: rgba(10, 102, 194, 0.16);
}

/* Honest-failure toast: shown once when LinkedIn's DOM drifts and we go blind. */
.defluff-toast {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 340px;
  padding: 12px 14px;
  font-family: -apple-system, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: #1d2226;
  background: #fff;
  border: 1px solid #e0dfdc;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.defluff-toast::before {
  content: "cannot defluff";
  flex: none;
  align-self: flex-start;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #c93a38;
  background: rgba(226, 75, 74, 0.12);
  border-radius: 12px;
}
.defluff-toast-close {
  border: none;
  background: transparent;
  font-size: 16px;
  color: #808080;
  cursor: pointer;
  padding: 0 2px;
}

/* Haiku easter egg: invisible until the mouse wanders over the summary —
   found, never advertised. Stays visible while poetry is active. */
.defluff-haiku {
  display: inline-block;
  margin: 4px 0 0 8px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 500;
  color: #949494;
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.defluff-summary:hover .defluff-haiku,
.defluff-haiku:focus-visible {
  opacity: 0.75;
}
.defluff-haiku:hover {
  opacity: 1;
  background: rgba(128, 128, 128, 0.12);
}
.defluff-haiku--on {
  opacity: 0.85;
}

/* Already-short posts: a quiet green nod. Clicking it talks back (easter egg),
   so it keeps the standard clickable affordance. */
.defluff-badge--clean {
  color: #1f8a45;
  background: rgba(31, 138, 69, 0.1);
}
.defluff-badge--clean:hover {
  background: rgba(31, 138, 69, 0.2);
}

/* Final retort: pill background gone — the bit is over, nothing more to click. */
.defluff-badge--spent,
.defluff-badge--spent:hover {
  background: transparent;
  cursor: default;
}

/* Heat tiers — the pill warms with the % of text the summary cut. Mid-tone
   hues + translucent tints so they read on LinkedIn's light AND dark themes. */
.defluff-badge--warm {
  color: #b26a05;
  background: rgba(239, 159, 39, 0.14);
}
.defluff-badge--warm:hover {
  background: rgba(239, 159, 39, 0.26);
}
.defluff-badge--hot {
  color: #c93a38;
  background: rgba(226, 75, 74, 0.12);
}
.defluff-badge--hot:hover {
  background: rgba(226, 75, 74, 0.24);
}