Diff -- /var/www/vhosts/3dshawn.com/site1/assets/styles/help_tips.css

O Operator
Diff

/var/www/vhosts/3dshawn.com/site1/assets/styles/help_tips.css

added on local at 2026-07-12 00:35:22

Added
+199
lines
Removed
-0
lines
Context
0
unchanged
Blobs
from
to baffe3c69284
Restore this content →
Unified diff
Naive LCS-based line diff. Additions in emerald, deletions in rose. Both sides decompressed live from BLOB_STORE.
1/* =========================================================================
2 * DriftSense -- help-tip system
3 *
4 * Usage in HTML:
5 *
6 * <span class="ds-help"
7 * data-help-title="Change-frequency ranking"
8 * data-help-body="Top 20 files by change count over the last 30
9 * days. Files that show up here are churny
10 * 'live-config' files. Pin them to a Named
11 * Release to freeze their current-latest content."
12 * data-help-link="/pin_hotspots.cgi"
13 * data-help-link-label="Try bulk pinning &rarr;">
14 * </span>
15 *
16 * The <span> renders as a small teal "?" chip. On hover / focus, a
17 * gorgeous dark popover fades in above the chip with title + body +
18 * optional link. Pure CSS + tiny JS in ds_help.js.
19 * ========================================================================= */
20
21.ds-help {
22 display: inline-flex;
23 align-items: center;
24 justify-content: center;
25 width: 16px;
26 height: 16px;
27 border-radius: 50%;
28 background: rgba(20, 184, 166, 0.14);
29 color: var(--accent-hi);
30 border: 1px solid rgba(20, 184, 166, 0.35);
31 font-family: var(--sans);
32 font-size: 10px;
33 font-weight: 800;
34 cursor: help;
35 user-select: none;
36 vertical-align: 2px;
37 margin-left: 6px;
38 transition: all .15s ease;
39 outline: none;
40}
41.ds-help::before {
42 content: '?';
43}
44.ds-help:hover,
45.ds-help:focus {
46 background: var(--accent);
47 color: #0a1220;
48 border-color: var(--accent);
49 transform: scale(1.1);
50 box-shadow: 0 0 12px rgba(20, 184, 166, 0.5);
51}
52
53/* The floating popover, positioned by ds_help.js */
54.ds-help-popover {
55 position: fixed;
56 z-index: 10000;
57 pointer-events: none;
58 opacity: 0;
59 transform: translate(-50%, -12px);
60 transition: opacity .18s ease, transform .18s ease;
61 max-width: 340px;
62 background: linear-gradient(180deg, var(--bg-3, #1a2740), var(--bg-2, #131e30));
63 border: 1px solid var(--accent, #14b8a6);
64 border-radius: 12px;
65 padding: 14px 16px;
66 color: var(--text, #e5edf5);
67 font-family: var(--sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
68 font-size: 13px;
69 line-height: 1.55;
70 box-shadow:
71 0 20px 45px rgba(0, 0, 0, 0.55),
72 0 0 0 1px rgba(20, 184, 166, 0.20),
73 0 0 40px rgba(20, 184, 166, 0.10);
74 backdrop-filter: blur(8px);
75 -webkit-backdrop-filter: blur(8px);
76}
77.ds-help-popover.on {
78 opacity: 1;
79 transform: translate(-50%, 0);
80 pointer-events: auto;
81}
82.ds-help-popover::before {
83 /* Little arrow pointing down at the ? chip */
84 content: '';
85 position: absolute;
86 left: 50%;
87 bottom: -7px;
88 transform: translateX(-50%) rotate(45deg);
89 width: 12px;
90 height: 12px;
91 background: var(--bg-2, #131e30);
92 border-right: 1px solid var(--accent, #14b8a6);
93 border-bottom: 1px solid var(--accent, #14b8a6);
94}
95.ds-help-popover .dsh-title {
96 display: block;
97 font-size: 11px;
98 font-weight: 800;
99 letter-spacing: 1.4px;
100 text-transform: uppercase;
101 color: var(--accent-hi, #2dd4bf);
102 margin-bottom: 6px;
103}
104.ds-help-popover .dsh-body {
105 color: var(--text, #e5edf5);
106 font-size: 13px;
107}
108.ds-help-popover .dsh-body strong {
109 color: #fff;
110 font-weight: 700;
111}
112.ds-help-popover .dsh-body code {
113 background: rgba(20, 184, 166, 0.12);
114 color: var(--accent-hi, #2dd4bf);
115 padding: 1px 6px;
116 border-radius: 4px;
117 border: 1px solid rgba(20, 184, 166, 0.20);
118 font-size: 11.5px;
119 font-family: var(--mono, 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace);
120}
121.ds-help-popover .dsh-link {
122 display: inline-flex;
123 align-items: center;
124 gap: 6px;
125 margin-top: 10px;
126 padding: 5px 12px;
127 background: rgba(20, 184, 166, 0.14);
128 color: var(--accent-hi, #2dd4bf);
129 border: 1px solid rgba(20, 184, 166, 0.40);
130 border-radius: 999px;
131 text-decoration: none;
132 font-weight: 600;
133 font-size: 11.5px;
134 transition: all .15s ease;
135}
136.ds-help-popover .dsh-link:hover {
137 background: var(--accent, #14b8a6);
138 color: #0a1220;
139 border-color: var(--accent, #14b8a6);
140}
141
142/* Below-flip variant: when the ? is near the top of the viewport, the
143 * popover flips below the chip. JS toggles the .below class + arrow. */
144.ds-help-popover.below {
145 transform: translate(-50%, 12px);
146}
147.ds-help-popover.below.on {
148 transform: translate(-50%, 0);
149}
150.ds-help-popover.below::before {
151 bottom: auto;
152 top: -7px;
153 border-right: none;
154 border-bottom: none;
155 border-left: 1px solid var(--accent, #14b8a6);
156 border-top: 1px solid var(--accent, #14b8a6);
157}
158
159/* Larger inline help block (for page-header-level guidance).
160 * Renders as an amber "info" bar rather than a hover chip.
161 */
162.ds-guide {
163 display: flex;
164 align-items: flex-start;
165 gap: 14px;
166 padding: 12px 16px 12px 14px;
167 background: linear-gradient(90deg, rgba(20, 184, 166, 0.08), transparent 65%);
168 border-left: 3px solid var(--accent, #14b8a6);
169 border-radius: 8px;
170 margin: 12px 0 18px;
171 color: var(--text-dim, #96a3b8);
172 font-size: 13px;
173 line-height: 1.6;
174}
175.ds-guide .dsg-icon {
176 flex: 0 0 auto;
177 width: 26px;
178 height: 26px;
179 border-radius: 7px;
180 background: rgba(20, 184, 166, 0.14);
181 border: 1px solid rgba(20, 184, 166, 0.35);
182 display: grid;
183 place-items: center;
184 color: var(--accent-hi, #2dd4bf);
185 font-weight: 800;
186 font-size: 13px;
187 margin-top: 1px;
188}
189.ds-guide .dsg-title {
190 color: #fff;
191 font-weight: 700;
192 margin-right: 6px;
193}
194.ds-guide a {
195 color: var(--accent-hi, #2dd4bf);
196 text-decoration: none;
197 font-weight: 600;
198}
199.ds-guide a:hover { text-decoration: underline; }