Skip to content

Commit 9261f10

Browse files
afshinmafshinm
committed
add dark theme
1 parent 5f11d0a commit 9261f10

File tree

1 file changed

+243
-0
lines changed

1 file changed

+243
-0
lines changed

‎themes/introjs-dark.css

Lines changed: 243 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
1+
/*
2+
Dark theme for IntroJs
3+
By: Khashayar Pourdeilami (http://kpourdeilami.github.io)
4+
for: IntroJs (https://github.com/usablica/intro.js)
5+
*/
6+
.introjs-overlay {
7+
position: absolute;
8+
z-index: 999999;
9+
background:#fff;
10+
-webkit-transition: all 0.3s ease-out;
11+
-moz-transition: all 0.3s ease-out;
12+
-ms-transition: all 0.3s ease-out;
13+
-o-transition: all 0.3s ease-out;
14+
transition: all 0.3s ease-out;
15+
}
16+
17+
.introjs-fixParent {
18+
z-index: auto !important;
19+
opacity: 1.0 !important;
20+
}
21+
22+
.introjs-showElement,
23+
tr.introjs-showElement > td,
24+
tr.introjs-showElement > th {
25+
z-index: 9999999 !important;
26+
}
27+
28+
.introjs-relativePosition,
29+
tr.introjs-showElement > td,
30+
tr.introjs-showElement > th {
31+
position: relative;
32+
}
33+
34+
.introjs-helperLayer {
35+
position: absolute;
36+
z-index: 9999998;
37+
background:#656D78;
38+
-webkit-transition: all 0.3s ease-out;
39+
-moz-transition: all 0.3s ease-out;
40+
-ms-transition: all 0.3s ease-out;
41+
-o-transition: all 0.3s ease-out;
42+
transition: all 0.3s ease-out;
43+
}
44+
45+
.introjs-helperNumberLayer {
46+
position: absolute;
47+
48+
z-index: 9999999999 !important;
49+
padding: 10px;
50+
font-family: Arial, verdana, tahoma;
51+
font-size: 13px;
52+
top:-40px;
53+
font-weight: bold;
54+
color: white;
55+
text-align: center;
56+
background:#434A54;
57+
width: 20px;
58+
height:20px;
59+
line-height: 20px;
60+
}
61+
62+
.introjs-arrow {
63+
border: 5px solid #434A54;
64+
content:'';
65+
position: absolute;
66+
}
67+
.introjs-arrow.top {
68+
top: -10px;
69+
border-top-color:transparent;
70+
border-right-color:transparent;
71+
border-bottom-color:#434A54;
72+
border-left-color:transparent;
73+
}
74+
.introjs-arrow.top-right {
75+
top: -10px;
76+
right: 10px;
77+
border-top-color:transparent;
78+
border-right-color:transparent;
79+
border-bottom-color:#434A54;
80+
border-left-color:transparent;
81+
}
82+
.introjs-arrow.top-middle {
83+
top: -10px;
84+
left: 50%;
85+
margin-left: -5px;
86+
border-top-color:transparent;
87+
border-right-color:transparent;
88+
border-bottom-color:#434A54;
89+
border-left-color:transparent;
90+
}
91+
.introjs-arrow.right {
92+
right: -10px;
93+
top: 10px;
94+
border-top-color:transparent;
95+
border-right-color:transparent;
96+
border-bottom-color:transparent;
97+
border-left-color:#434A54;
98+
}
99+
.introjs-arrow.bottom {
100+
bottom: -10px;
101+
border-top-color:#434A54;
102+
border-right-color:transparent;
103+
border-bottom-color:transparent;
104+
border-left-color:transparent;
105+
}
106+
.introjs-arrow.left {
107+
left: -10px;
108+
top: 10px;
109+
border-top-color:transparent;
110+
border-right-color:#434A54;
111+
border-bottom-color:transparent;
112+
border-left-color:transparent;
113+
}
114+
115+
.introjs-tooltip {
116+
position: absolute;
117+
padding: 10px;
118+
background-color: #434A54;
119+
min-width: 200px;
120+
padding-top:30px;
121+
122+
max-width: 300px;
123+
color:#fff;
124+
-webkit-transition: opacity 0.1s ease-out;
125+
-moz-transition: opacity 0.1s ease-out;
126+
-ms-transition: opacity 0.1s ease-out;
127+
-o-transition: opacity 0.1s ease-out;
128+
transition: opacity 0.1s ease-out;
129+
}
130+
131+
.introjs-tooltipbuttons {
132+
text-align: right;
133+
position:relative;
134+
bottom:-44px;
135+
margin-left:-10px;
136+
margin-right:-10px;
137+
padding:5px;
138+
background:#656D78;
139+
}
140+
141+
/*
142+
Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/
143+
Changed by Afshin Mehrabani
144+
Further modified by: Khashayar P.
145+
*/
146+
.introjs-button {
147+
position: relative;
148+
overflow: visible;
149+
display: inline-block;
150+
padding: 0.3em 0.8em;
151+
border: 2px solid #fff;
152+
margin: 0;
153+
text-decoration: none;
154+
font: 11px/normal sans-serif;
155+
color: #fff !important;
156+
white-space: nowrap;
157+
cursor: pointer;
158+
outline: none;
159+
-webkit-background-clip: padding;
160+
-moz-background-clip: padding;
161+
-o-background-clip: padding-box;
162+
/*background-clip: padding-box;*/ /* commented out due to Opera 11.10 bug */
163+
/* IE hacks */
164+
zoom: 1;
165+
*display: inline;
166+
margin-top: 10px;
167+
}
168+
169+
.introjs-button:hover {
170+
text-decoration: none;
171+
color:#434A54 !important;
172+
background:#fff;
173+
}
174+
175+
.introjs-button:focus,
176+
.introjs-button:active {
177+
background:#fff !important;
178+
color:#434A54 !important;
179+
}
180+
181+
/* overrides extra padding on button elements in Firefox */
182+
.introjs-button::-moz-focus-inner {
183+
padding: 0;
184+
border: 0;
185+
}
186+
187+
.introjs-skipbutton {
188+
margin-right: 5px;
189+
color: #fff;
190+
}
191+
192+
.introjs-prevbutton {
193+
194+
border-right: none;
195+
}
196+
197+
198+
.introjs-disabled, .introjs-disabled:hover, .introjs-disabled:focus {
199+
color: #fff;
200+
box-shadow: none;
201+
cursor: default;
202+
background:transparent;
203+
border-color:transparent;
204+
}
205+
206+
.introjs-bullets {
207+
text-align: center;
208+
display:none;
209+
}
210+
.introjs-bullets ul {
211+
clear: both;
212+
margin: 15px auto 0;
213+
padding: 0;
214+
display: inline-block;
215+
}
216+
.introjs-bullets ul li {
217+
list-style: none;
218+
float: left;
219+
margin: 0 2px;
220+
}
221+
.introjs-bullets ul li a {
222+
display: block;
223+
width: 8px;
224+
height: 8px;
225+
background: rgba(255,255,255,0.1);
226+
border-radius: 10px;
227+
-moz-border-radius: 10px;
228+
-webkit-border-radius: 10px;
229+
text-decoration: none;
230+
}
231+
.introjs-bullets ul li a:hover {
232+
background: rgba(255,255,255,0.2);
233+
}
234+
.introjs-bullets ul li a.active {
235+
background: rgba(255,255,255,0.2);
236+
}
237+
.introjsFloatingElement {
238+
position: absolute;
239+
height: 0;
240+
width: 0;
241+
left: 50%;
242+
top: 50%;
243+
}

0 commit comments

Comments
 (0)