Skip to content

Commit e7da8a7

Browse files
CodeHimBlogCodeHimBlog
authored
Demo Only file
1 parent 8c79684 commit e7da8a7

File tree

1 file changed

+285
-0
lines changed

1 file changed

+285
-0
lines changed

‎docs/demo.css

Lines changed: 285 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,285 @@
1+
/* Project: Popup Lightbox
2+
* Author: Asif Mughal
3+
* URL: www.codehim.com
4+
* License: MIT License
5+
* Copyright (c) 2019 - Asif Mughal
6+
*/
7+
/* FILE : demo.css */
8+
*{ margin: 0; padding: 0;}
9+
@font-face {
10+
src: local('Helvetica Neue'), local('HelveticaNeue'), url(http://themes.googleusercontent.com/licensed/font?kit=Lx1xfUTR4qFjwg0Z_pb900DGSpWewu0sZH-jqLz8Q00) format('truetype');
11+
}
12+
body{
13+
font-family: 'Helvetica Neue';
14+
font-style: normal;
15+
font-weight: 300;
16+
font-smoothing: antialiased;
17+
-webkit-font-smoothing: antialiased;
18+
-moz-osx-font-smoothing: grayscale;
19+
font-size: 15px;
20+
background: #eee;
21+
}
22+
.intro{
23+
background: #ddd;
24+
padding: 60px 30px;
25+
color: #333;
26+
margin-bottom: 15px;
27+
line-height: 1.5;
28+
text-align: center;
29+
}
30+
.intro h1 {
31+
font-size: 18pt;
32+
33+
}
34+
.intro p{
35+
font-size: 14px;
36+
}
37+
38+
.action{
39+
text-align: center;
40+
display: block;
41+
margin-top: 20px;
42+
}
43+
44+
a.btn {
45+
text-decoration: none;
46+
color: #666;
47+
border: 2px solid #666;
48+
padding: 10px 15px;
49+
display: inline-block;
50+
margin-left: 5px;
51+
}
52+
a.btn:hover{
53+
background: #666;
54+
color: #fff;
55+
transition: .3s;
56+
-webkit-transition: .3s;
57+
}
58+
.github:before,
59+
.down:before{
60+
font-family: FontAwesome;
61+
font-weight: normal;
62+
margin-right: 10px;
63+
}
64+
.github:before{content: "\f09b"}
65+
.down:before{content: "\f019"}
66+
.credit{
67+
background: #fff;
68+
padding: 12px;
69+
font-size: 9pt;
70+
text-align: center;
71+
color: #333;
72+
margin-top: 40px;
73+
74+
}
75+
.credit span:before{
76+
font-family: FontAwesome;
77+
color: #e41b17;
78+
content: "\f004";
79+
80+
81+
}
82+
.credit a{
83+
color: #333;
84+
text-decoration: none;
85+
}
86+
.credit a:hover{
87+
color: #e41b17;
88+
}
89+
.credit a:hover:after{
90+
font-family: FontAwesome;
91+
content: "\f08e";
92+
font-size: 9pt;
93+
position: absolute;
94+
margin: 3px;
95+
}
96+
main{
97+
background: #fff;
98+
margin: 20px;
99+
100+
}
101+
102+
article li{
103+
color: #444;
104+
font-size: 15px;
105+
margin-left: 33px;
106+
line-height: 1.5;
107+
padding: 5px;
108+
}
109+
article h1,
110+
article h2,
111+
article h3,
112+
article p{
113+
padding: 10px;
114+
color: #333;
115+
}
116+
article p{
117+
font-size: 15px;
118+
line-height: 1.5;
119+
}
120+
121+
@media only screen and (min-width: 720px){
122+
main{
123+
width: 720px;
124+
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);
125+
margin-left: auto;
126+
margin-right: auto;
127+
background: #f9f9f9;
128+
}
129+
130+
131+
}
132+
133+
.set-overlayer,
134+
.set-glass,
135+
.set-sticky {
136+
cursor: pointer;
137+
height: 45px;
138+
line-height: 45px;
139+
padding: 0 15px;
140+
color: #333;
141+
font-size: 16px;
142+
}
143+
.set-overlayer:after,
144+
.set-glass:after,
145+
.to-active:after,
146+
.set-sticky:after {
147+
font-family: FontAwesome;
148+
font-size: 18pt;
149+
position: relative;
150+
float: right;
151+
}
152+
.set-overlayer:after,
153+
.set-glass:after,
154+
.set-sticky:after {
155+
content: "\f204";
156+
transition: .6s;
157+
}
158+
159+
.to-active:after {
160+
content: "\f205";
161+
color: #008080;
162+
transition: .6s;
163+
}
164+
.set-overlayer,
165+
.set-glass,
166+
.set-sticky,
167+
.source,
168+
.theme-tray {
169+
margin: 10px;
170+
background: #f2f2f2;
171+
border-radius: 5px;
172+
border: 2px solid #f1f1f1;
173+
box-sizing: border-box;
174+
}
175+
176+
177+
/* Syntax Highlighter*/
178+
179+
pre.prettyprint {
180+
padding: 10px;
181+
margin: 10px;
182+
border: 0;
183+
background: #f2f2f2;
184+
overflow: auto;
185+
}
186+
187+
.source {
188+
white-space: pre;
189+
overflow: auto;
190+
max-height: 400px;
191+
}
192+
193+
.theme-tray {
194+
overflow: hidden;
195+
background: #fff;
196+
}
197+
198+
.theme-tray span {
199+
border: 1px solid #f2f2f2;
200+
width: 50px;
201+
height: 50px;
202+
display: inline-block;
203+
border-radius: 4px;
204+
cursor: pointer;
205+
}
206+
207+
.pl-color,
208+
.gr-color {
209+
text-align: center;
210+
}
211+
212+
.gr-color h4,
213+
.pl-color h4 {
214+
background: #f2f2f2;
215+
padding: 10px;
216+
margin-bottom: 6px;
217+
color: #333;
218+
}
219+
220+
.mesg{
221+
margin: 10px;
222+
background: #fff;
223+
color: #347C2C;
224+
padding: 15px;
225+
border-radius: 4px;
226+
animation: bounceIn 1s forwards;
227+
z-index: 98;
228+
display: none;
229+
position: relative;
230+
text-align: center;
231+
}
232+
233+
code{
234+
border:1px solid #ddd;
235+
padding: 2px;
236+
border-radius: 2px;
237+
}
238+
239+
.theme-picker{
240+
background: #fff;
241+
242+
243+
}
244+
245+
.theme-picker span{
246+
width: 25px;
247+
height: 25px;
248+
display: inline-block;
249+
border-radius: 50%;
250+
cursor: pointer;
251+
margin-left: 5px;
252+
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
253+
254+
255+
}
256+
.img-container {
257+
margin: 20px;
258+
text-align: center;
259+
}
260+
261+
.img-container img {
262+
width: 200px;
263+
height: auto;
264+
border: 1px solid #ccc;
265+
border-radius: 5px;
266+
cursor: pointer;
267+
-webkit-tap-highlight-color: transparent;
268+
transition: .3s;
269+
-webkit-transition: .3s;
270+
-moz-transition: .3s;
271+
272+
}
273+
.img-container img:hover{
274+
transform: scale(0.97);
275+
-webkit-transform: scale(0.97);
276+
-moz-transform: scale(0.97);
277+
-o-transform: scale(0.97);
278+
opacity: 0.75;
279+
-webkit-opacity: 0.75;
280+
-moz-opacity: 0.75;
281+
transition: .3s;
282+
-webkit-transition: .3s;
283+
-moz-transition: .3s;
284+
}
285+

0 commit comments

Comments
 (0)