Skip to content

Instantly share code, notes, and snippets.

@richardimaoka

richardimaoka/mdview-with-css.html

Last active August 29, 2015 14:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save richardimaoka/8a085e72d40b725ee134 to your computer and use it in GitHub Desktop.
Save richardimaoka/8a085e72d40b725ee134 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
mdview-with-css.html
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" media="screen" href="mdview.css">
<title>My Trading Application</title>
</head>
<body>
<div id="title">
<h1><span id="title1">My<br></span><span id="title2">Trading<br></span><span id="title3">Application</span></h1>
</div>
<div class="panel">
<h2 class="panel-title">Market Data View</h2>
<table id="mdtable">
<tr>
<th></th>
<th colspan = 4>Best</th>
<th colspan = 4>Market 1</th>
<th colspan = 4>Market 2</th>
</tr>
<tr>
<th>Asset</th>
<th>Bid<br>Size</th>
<th>Bid</th>
<th>Ask</th>
<th>Ask<br>Size</th>
<th>Bid<br>Size</th>
<th>Bid</th>
<th>Ask</th>
<th>Ask<br>Size</th>
<th>Bid<br>Size</th>
<th>Bid</th>
<th>Ask</th>
<th>Ask<br>Size</th>
</tr>
<tr>
<td>Stock A</td>
<td>100</td>
<td>50</td>
<td>51</td>
<td>90</td>
<td>100</td>
<td>50</td>
<td>51</td>
<td>90</td>
<td>80</td>
<td>49</td>
<td>52</td>
<td>60</td>
</tr>
<tr>
<td>Stock B</td>
<td>1200</td>
<td>93.5</td>
<td>94.0</td>
<td>1300</td>
<td>1200</td>
<td>93.5</td>
<td>94.0</td>
<td>1300</td>
<td>500</td>
<td>93.5</td>
<td>94.2</td>
<td>600</td>
</tr>
<tr>
<td>Stock C</td>
<td>1000</td>
<td>1000</td>
<td>1000.5</td>
<td>1000</td>
<td>1000</td>
<td>1000</td>
<td>1000.5</td>
<td>1000</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Stock D</td>
<td>3650</td>
<td>200</td>
<td>204</td>
<td>2200</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>3650</td>
<td>200</td>
<td>204</td>
<td>2200</td>
</tr>
</table>
</div>
</body>
</html>
Raw
mdview.css
body {
margin:0px;
}
#title{
background: linear-gradient( to bottom, rgba(250,250,250,1), rgba(216,216,216,1) );
box-shadow: 0px 10px 5px #888888;
margin:0px 0px;
padding:0px 0px;
height: 80px;
font-family: 'Oswald', sans-serif;
}
#title1{
color: rgba(0,0,0,0.1)
}
#title2{
color: rgba(0,0,0,1);
position:relative;
bottom: 35px;
left: 30px;
}
#title3{
color: rgba(0,0,0,0.1);
position:relative;
bottom: 65px;
}
h1{
margin: 0px 10px;
}
.panel{
margin: 20px 10px;
padding: 0px 0px 5px;
background: linear-gradient( to bottom, rgba(250,250,250,1), rgba(216,216,216,1) );
--box-shadow: 15px 10px 5px #888888;
border-radius: 10px;
color: Blue;
}
h2.panel-title{
color:White;
background: linear-gradient(to right, Orange, Yellow);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
margin: 0px;
padding: 2px 10px;
}
table {
font-size:12px;
width: 95%;
margin: 10px 2.5%;
border-spacing: 1px 1px;
--box-shadow: 10px 10px 5px #888888;
--border-radius: 15px;
}
th {
color:White;
background: linear-gradient(to bottom, LightSkyBlue, RoyalBlue);
padding: 2px;
}
th:hover{
box-shadow: 0px 0px 10px 2px DarkGray inset;
}
tr:nth-child(even) {
color: Blue;
background: White;--linear-gradient(to bottom, Silver, White);
}
tr:nth-child(odd) {
color: Blue;
background: White;--linear-gradient(to bottom, Silver, White);
}
tr:hover{
box-shadow: 0px 0px 10px 2px DarkGray inset;
}
td {
padding: 2px 10px;
border: 10px Black;
}
button{
display: inline-block;
width: 120px;
margin: 5px 5px 0px;
padding: 2px 10px;
border: 0px solid;
border-radius: 10px;
color: White;
background: linear-gradient(to bottom, DarkGray 50%, Gray 50%);
--background: Gray;
--box-shadow: 0px 0px 10px White inset;
}
button:hover{
box-shadow: 0px 0px 10px 2px Black inset;
}
Raw
mdview.html
<!DOCTYPE html>
<html>
<body>
<h1>My Trading Application</h1>
<table id="mdtable">
<tr>
<th>Asset</th>
<th>Bid</th>
<th>Ask</th>
</tr>
<tr>
<td>Stock A</td>
<td>50</td>
<td>51</td>
</tr>
<tr>
<td>Stock B</td>
<td>93.5</td>
<td>94.0</td>
</tr>
<tr>
<td>Stock C</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Stock D</td>
<td>200</td>
<td>204</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment