Skip to content

Commit 9490c34

Browse files
GlobalHiveGlobalHive
committed
docs(css-theme): improve visibility handling in themes
* Update CSS for default and light themes * Use visibility and pointer-events for better control * Refactor tooltip and backdrop styles for consistency
1 parent da83076 commit 9490c34

1 file changed

Lines changed: 140 additions & 80 deletions

File tree

‎docs/guide/css-theme.md‎

Lines changed: 140 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,26 @@ To customize the look and feel of the tour, you can create your own styles and r
66
The default theme is defined in the `'@globalhive/vuejs-tour/dist/style.css'` file.
77

88
```css
9-
[data-hidden] {
10-
display: none;
9+
[data-hidden=true] {
10+
visibility: hidden;
11+
pointer-events: none;
1112
}
1213

13-
#vjt-backdrop {
14+
[data-hidden=false] {
15+
visibility: visible;
16+
}
17+
18+
.vjt-modal-overlay {
19+
position: fixed;
20+
top: 0;
21+
left: 0;
22+
width: 100%;
23+
height: 100%;
24+
pointer-events: none;
25+
z-index: 9999;
26+
}
27+
28+
[id$=-backdrop] {
1429
position: fixed;
1530
top: 0;
1631
left: 0;
@@ -19,8 +34,11 @@ The default theme is defined in the `'@globalhive/vuejs-tour/dist/style.css'` fi
1934
background-color: rgba(0, 0, 0, 0.5);
2035
z-index: 9998;
2136
}
37+
[id$=-backdrop]:not([data-hidden=true]) {
38+
pointer-events: auto;
39+
}
2240

23-
#vjt-tooltip {
41+
[id$=-tooltip] {
2442
background-color: #333;
2543
color: #fff;
2644
padding: 0.5rem;
@@ -29,35 +47,36 @@ The default theme is defined in the `'@globalhive/vuejs-tour/dist/style.css'` fi
2947
z-index: 9999;
3048
max-width: 300px;
3149
position: absolute;
50+
pointer-events: auto;
3251
}
3352

34-
#vjt-tooltip[data-arrow^=t] #vjt-arrow {
53+
[id$=-tooltip][data-arrow^=t] [id$=-arrow] {
3554
bottom: -4px;
3655
right: 50%;
3756
}
3857

39-
#vjt-tooltip[data-arrow^=b] #vjt-arrow {
58+
[id$=-tooltip][data-arrow^=b] [id$=-arrow] {
4059
top: -4px;
4160
right: 50%;
4261
}
4362

44-
#vjt-tooltip[data-arrow^=l] #vjt-arrow {
63+
[id$=-tooltip][data-arrow^=l] [id$=-arrow] {
4564
right: -4px;
4665
top: 50%;
4766
}
4867

49-
#vjt-tooltip[data-arrow^=r] #vjt-arrow {
68+
[id$=-tooltip][data-arrow^=r] [id$=-arrow] {
5069
left: -4px;
5170
top: 50%;
5271
}
5372

54-
#vjt-arrow {
73+
[id$=-arrow] {
5574
width: 8px;
5675
height: 8px;
5776
position: absolute;
5877
z-index: -1;
5978
}
60-
#vjt-arrow::before {
79+
[id$=-arrow]::before {
6180
content: "";
6281
width: 8px;
6382
height: 8px;
@@ -66,12 +85,11 @@ The default theme is defined in the `'@globalhive/vuejs-tour/dist/style.css'` fi
6685
position: absolute;
6786
}
6887

69-
.vjt-highlight {
88+
[class*=vjt-highlight-] {
7089
outline: 2px solid #0ea5e9;
7190
outline-offset: 4px;
7291
border-radius: 1px;
7392
position: relative;
74-
z-index: 9999;
7593
}
7694

7795
.vjt-actions {
@@ -97,103 +115,145 @@ The default theme is defined in the `'@globalhive/vuejs-tour/dist/style.css'` fi
97115
background-color: #000;
98116
color: #fff;
99117
}
118+
119+
.vjt-sr-only {
120+
position: absolute;
121+
width: 1px;
122+
height: 1px;
123+
padding: 0;
124+
margin: -1px;
125+
overflow: hidden;
126+
clip: rect(0, 0, 0, 0);
127+
white-space: nowrap;
128+
border-width: 0;
129+
}
100130
```
101131

102132
## Light Theme
103133

104134
Here is an example of a light theme for the [New CSS File](#new-css-file) approach:
105135

106136
```css
107-
[data-hidden] {
108-
display: none;
137+
[data-hidden=true] {
138+
visibility: hidden;
139+
pointer-events: none;
109140
}
110141

111-
#vjt-backdrop {
112-
position: fixed;
113-
top: 0;
114-
left: 0;
115-
width: 100%;
116-
height: 100%;
117-
background-color: rgba(0, 0, 0, 0.5); /* [!code ++] */
118-
z-index: 9998;
142+
[data-hidden=false] {
143+
visibility: visible;
119144
}
120145

121-
#vjt-tooltip {
122-
background-color: rgb(241 245 249); /* [!code ++:2] */
123-
color: rgb(15 23 42);
124-
padding: 0.5rem;
125-
border-radius: 4px;
126-
font-size: 13px;
127-
z-index: 9999;
128-
max-width: 300px;
129-
position: absolute;
146+
.vjt-modal-overlay {
147+
position: fixed;
148+
top: 0;
149+
left: 0;
150+
width: 100%;
151+
height: 100%;
152+
pointer-events: none;
153+
z-index: 9999;
130154
}
131155

132-
#vjt-tooltip[data-arrow^=t] #vjt-arrow {
133-
bottom: -4px;
134-
right: 50%;
156+
[id$=-backdrop] {
157+
position: fixed;
158+
top: 0;
159+
left: 0;
160+
width: 100%;
161+
height: 100%;
162+
background-color: rgba(0, 0, 0, 0.5); /* [!code ++] */
163+
z-index: 9998;
164+
}
165+
[id$=-backdrop]:not([data-hidden=true]) {
166+
pointer-events: auto;
135167
}
136168

137-
#vjt-tooltip[data-arrow^=b] #vjt-arrow {
138-
top: -4px;
139-
right: 50%;
169+
[id$=-tooltip] {
170+
background-color: rgb(241 245 249); /* [!code ++:2] */
171+
color: rgb(15 23 42);
172+
padding: 0.5rem;
173+
border-radius: 4px;
174+
font-size: 13px;
175+
z-index: 9999;
176+
max-width: 300px;
177+
position: absolute;
178+
pointer-events: auto;
140179
}
141180

142-
#vjt-tooltip[data-arrow^=l] #vjt-arrow {
143-
right: -4px;
144-
top: 50%;
181+
[id$=-tooltip][data-arrow^=t] [id$=-arrow] {
182+
bottom: -4px;
183+
right: 50%;
145184
}
146185

147-
#vjt-tooltip[data-arrow^=r] #vjt-arrow {
148-
left: -4px;
149-
top: 50%;
186+
[id$=-tooltip][data-arrow^=b] [id$=-arrow] {
187+
top: -4px;
188+
right: 50%;
150189
}
151190

152-
#vjt-arrow {
153-
width: 8px;
154-
height: 8px;
155-
position: absolute;
156-
z-index: -1;
191+
[id$=-tooltip][data-arrow^=l] [id$=-arrow] {
192+
right: -4px;
193+
top: 50%;
157194
}
158-
#vjt-arrow::before {
159-
content: "";
160-
width: 8px;
161-
height: 8px;
162-
background-color: rgb(241 245 249); /* [!code ++] */
163-
transform: rotate(45deg);
164-
position: absolute;
195+
196+
[id$=-tooltip][data-arrow^=r] [id$=-arrow] {
197+
left: -4px;
198+
top: 50%;
165199
}
166200

167-
.vjt-highlight {
168-
outline: 2px solid #0ea5e9;
169-
outline-offset: 4px;
170-
border-radius: 1px;
171-
position: relative;
172-
z-index: 9999;
201+
[id$=-arrow] {
202+
width: 8px;
203+
height: 8px;
204+
position: absolute;
205+
z-index: -1;
206+
}
207+
[id$=-arrow]::before {
208+
content: "";
209+
width: 8px;
210+
height: 8px;
211+
background-color: rgb(241 245 249); /* [!code ++] */
212+
transform: rotate(45deg);
213+
position: absolute;
214+
}
215+
216+
[class*=vjt-highlight-] {
217+
outline: 2px solid #0ea5e9;
218+
outline-offset: 4px;
219+
border-radius: 1px;
220+
position: relative;
173221
}
174222

175223
.vjt-actions {
176-
display: flex;
177-
justify-content: space-between;
178-
align-items: center;
179-
margin-top: 0.5rem;
180-
gap: 0.5rem;
224+
display: flex;
225+
justify-content: space-between;
226+
align-items: center;
227+
margin-top: 0.5rem;
228+
gap: 0.5rem;
181229
}
182230
.vjt-actions button {
183-
width: 100%;
184-
padding: 0.25rem 1rem;
185-
border: 1px solid rgb(15 23 42); /* [!code ++] */
186-
border-radius: 4px;
187-
background-color: transparent;
188-
color: rgb(15 23 42); /* [!code ++] */
189-
font-size: 13px;
190-
font-weight: 500;
191-
transition: all 0.2s ease-in-out;
192-
cursor: pointer;
231+
width: 100%;
232+
padding: 0.25rem 1rem;
233+
border: 1px solid rgb(15 23 42); /* [!code ++] */
234+
border-radius: 4px;
235+
background-color: transparent;
236+
color: rgb(15 23 42); /* [!code ++] */
237+
font-size: 13px;
238+
font-weight: 500;
239+
transition: all 0.2s ease-in-out;
240+
cursor: pointer;
193241
}
194242
.vjt-actions button:hover {
195-
background-color: rgb(15 23 42); /* [!code ++:2] */
196-
color: rgb(241 245 249);
243+
background-color: rgb(15 23 42); /* [!code ++:2] */
244+
color: rgb(241 245 249);
245+
}
246+
247+
.vjt-sr-only {
248+
position: absolute;
249+
width: 1px;
250+
height: 1px;
251+
padding: 0;
252+
margin: -1px;
253+
overflow: hidden;
254+
clip: rect(0, 0, 0, 0);
255+
white-space: nowrap;
256+
border-width: 0;
197257
}
198258
```
199259

@@ -212,11 +272,11 @@ Change the theme by adding a style block to your component.
212272
</template>
213273
214274
<style> /* Light Theme */
215-
#vjt-tooltip { /* [!code ++:15] */
275+
[id$=-tooltip] { /* [!code ++:15] */
216276
background-color: rgb(241 245 249);
217277
color: rgb(15 23 42);
218278
}
219-
#vjt-arrow::before {
279+
[id$=-arrow]::before {
220280
background-color: rgb(241 245 249);
221281
}
222282
.vjt-actions button {

0 commit comments

Comments
 (0)