Skip to content

Commit 837d9f1

Browse files
lovasoalovasoa
committed
Improve style of the demonstration
Create a separate stylesheet file, and play with some CSS3 properties in order to make the demonstration look nicer.
1 parent 9900268 commit 837d9f1

File tree

2 files changed

+74
-33
lines changed

2 files changed

+74
-33
lines changed

‎GUI/demo.css‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
html {
2+
background:#222;
3+
margin:auto;
4+
width:80%;
5+
}
6+
7+
body{
8+
background: linear-gradient(#aaa 0, #ddd 10px, #fff 55px);
9+
border: 1px solid black;
10+
padding: 10px 20px;
11+
box-shadow: 5px 0px 30px #000;
12+
border-radius: 8px;
13+
}
14+
15+
h1 {
16+
text-align: center;
17+
color: #222;
18+
margin: 0 0 30px;
19+
}
20+
21+
button {
22+
background: linear-gradient(#eee, #ddd);
23+
border: 1px solid #222;
24+
border-radius: 3px;
25+
padding: 7px;
26+
transition: .3s;
27+
}
28+
29+
button:active {
30+
background: linear-gradient(#ddd, #eee);
31+
}
32+
33+
button:hover, button:focus {
34+
box-shadow: 0 0 2px #222;
35+
}
36+
37+
#execute {
38+
margin-top: 5px;;
39+
width: 10%;
40+
min-width:100px;
41+
}
42+
43+
.CodeMirror {
44+
border: 1px solid #222;
45+
height: auto;
46+
}
47+
.CodeMirror-scroll {
48+
overflow-y: hidden;
49+
overflow-x: auto;
50+
}
51+
52+
.error {
53+
color:red;
54+
transition:.5s;
55+
overflow:hidden;
56+
}
57+
58+
table {
59+
width:auto;
60+
margin:auto;
61+
border:1px solid black;
62+
border-collapse:collapse;
63+
margin-bottom:10px;
64+
}
65+
66+
th, td {
67+
border:1px solid #777;
68+
}
69+

‎GUI/index.html‎

Lines changed: 5 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,11 @@
11
<!doctype html>
22
<html>
33
<head>
4-
<meta charset="utf8">
5-
<title>
6-
sql.js
7-
</title>
8-
<style>
9-
.CodeMirror {
10-
border: 1px solid #eee;
11-
height: auto;
12-
}
13-
.CodeMirror-scroll {
14-
overflow-y: hidden;
15-
overflow-x: auto;
16-
}
17-
18-
.error {
19-
color:red;
20-
transition:.5s;
21-
overflow:hidden;
22-
}
23-
24-
table {
25-
width:auto;
26-
margin:auto;
27-
border:1px solid black;
28-
border-collapse:collapse;
29-
margin-bottom:10px;
30-
}
31-
th, td {
32-
border:1px solid #777;
33-
}
34-
</style>
35-
<link rel="stylesheet" href="codemirror/lib/codemirror.css">
36-
<script src="codemirror/lib/codemirror.js"></script>
4+
<meta charset="utf8">
5+
<title>sql.js demo: Online SQL interpreter</title>
6+
<link rel="stylesheet" href="codemirror/lib/codemirror.css">
7+
<link rel="stylesheet" href="demo.css">
8+
<script src="codemirror/lib/codemirror.js"></script>
379

3810
</head>
3911
<body>

0 commit comments

Comments
 (0)