transcript.html

<!DOCTYPE html>
<html>
<head>
<title>Transcript Browser</title>

<style id="bodycss" type="text/css">

body {
  background: #E4E4E4;
  color: black;
  font-family: "Lora", Georgia, serif;
  margin: 0px;
  font-size: 1.0em;
}
body.DarkMode {
  background: #343434;
  color: white;
}

button {
  font-size: 1.0em;
  border: 1px solid #888;
  border-radius: 4px;
}

button:active {
  background: #7788FF;
}

.DarkMode button {
  background: #111;
  color: white;
}

.DarkMode button:active {
  background: #5566FF;
}

.DarkMode button:disabled {
  background: #555;
  color: #888;
}

#list {
  position: absolute;
  width: 100%;
  top: 0px;
  bottom: 0px;
  overflow-y: scroll;
  padding-top: 4px;
  padding-bottom: 8px;
}

.EntryBox {
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.Entry {
  position: relative;
  background: white;
  font-size: 0.9em;
  border-radius: 8px;
  padding: 8px 16px;
}
.DarkMode .Entry {
  background: black;
  color: white;
}

.Entry.Selected {
  background: #7788FF;
  color: white;
}
.DarkMode .Entry.Selected {
  background: #5566FF;
  color: black;
}
.InBackground .Entry.Selected {
  background: #AAAAAA;
}
.DarkMode.InBackground .Entry.Selected {
  background: #666666;
}

.Entry .Label {
  font-size: 0.9em;
  font-style: italic;
}

.Entry .Title {
  font-weight: bold;
}

.Entry button {
  position: absolute;
  right: 10px;
  top: 10px;
}

</style>

<script type="text/javascript">
window.$ = window.jQuery = require('./quixe/lib/jquery-1.12.4.min.js');
require('./transcript.js');
</script>

</head>

<body>
<div id="list">
</div>

</body>

</html>