summaryrefslogtreecommitdiff
path: root/views/style.scss
diff options
context:
space:
mode:
Diffstat (limited to 'views/style.scss')
-rw-r--r--views/style.scss228
1 files changed, 228 insertions, 0 deletions
diff --git a/views/style.scss b/views/style.scss
new file mode 100644
index 0000000..9f03d6a
--- /dev/null
+++ b/views/style.scss
@@ -0,0 +1,228 @@
+$ist-color: rgba(200, 194, 200, 0.4);
+$black: #2b2b2b;
+$orange: #f76700;
+
+body {
+ background-image: url("/images/gray_jean.png");
+ overflow: scroll;
+ font-family: sans-serif; }
+ body a {
+ &:hover {
+ color: $orange; }
+ text-decoration: none;
+ font-weight: bold;
+ color: $black; }
+ body img {
+ border: 0; }
+ body h1 {
+ color: $black; }
+ body h2 {
+ padding-top: 12px;
+ font-size: x-large;
+ color: $orange; }
+
+.logo {
+ top: 0;
+ position: fixed;
+ background-color: #efefef;
+ width: 100%;
+ z-index: 40; }
+ .logo img {
+ float: left;
+ display: inline;
+ margin-right: 1em;
+ padding: 1em; }
+ .logo h1 {
+ width: 80%; }
+ .logo img.ote {
+ width: 100px;
+ height: 50px;
+ display: inline;
+ float: right; }
+
+.content {
+ background-image: url("/images/gray_jean.png");
+ margin-top: 6em; }
+ .content h1 {
+ text-shadow: white 1px 1px 0;
+ font-size: x-large;
+ display: inline; }
+ .content .arrow {
+ margin: 8px 0px 5px 20px; }
+ .content .back {
+ display: inline; }
+ .content fieldset#top {
+ box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset);
+ border: 0;
+ padding: 10px;
+ background-color: $ist-color; }
+ .content fieldset#top a#linkInsert {
+ display: block;
+ width: 100%;
+ height: 2em; }
+ .content fieldset#top #appletContainer {
+ padding: 10px; }
+ .content fieldset#middle {
+ border: 0;
+ padding: 10px;
+ box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset);
+ background-color: $ist-color; }
+ .content fieldset#middle a#linkModels {
+ display: block;
+ width: 100%;
+ height: 2em; }
+ .content fieldset#middle #models {
+ padding-left: 1em; }
+ .content fieldset#middle #model a {
+ display: inline;
+ font-weight: normal; }
+ .content fieldset#bottom {
+ border: 0;
+ box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset);
+ background-color: $ist-color;
+ padding: 10px;
+ margin-bottom: 5em; }
+ .content fieldset#bottom input#predict {
+ margin-left: 1em; }
+ .content .predictions {
+ background-color: $ist-color;
+ box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset);
+ padding: 10px;
+ text-align: justify; }
+ .content .overview {
+ background-image: url("/images/gray_jean.png");
+ box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset);
+ padding: 12px;
+ margin-top: 1em;
+ margin-bottom: 1em;
+ text-align: left; }
+ .content .overview a:hover {
+ color: $orange; }
+ .content .overview caption {
+ text-align: left; }
+ .content .overview #overview tr td {
+ background-color: white;
+ border: 1px solid #dad9c7;
+ padding-left: 1em;
+ padding-top: 0.5em; }
+ .content .overview #overview tr td #compound {
+ width: 200px; }
+ .content .overview #overview tr td b.c {
+ color: #d42200; }
+ .content .overview #overview tr td b.n {
+ color: #5c8533; }
+ .content .overview #overview tr td .confidence {
+ display: inline; }
+ .content .error {
+ background-color: $ist-color;
+ box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset);
+ padding: 15px; }
+ .content .error .message {
+ margin: 2em;
+ padding: 1em;
+ border: 2px solid $orange;
+ background-color: white;
+ color: $black; }
+ .content #closebutton {
+ color: $orange;
+ margin-left: 98%; }
+
+.details {
+ width: 98%;
+ box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset);
+ background-color: $ist-color; }
+ .details a:hover {
+ color: $orange; }
+ .details img {
+ display: inline;
+ float: left;
+ margin: 0.5em; }
+
+.significant_fragments {
+ width: 98%;
+ margin-bottom: 2em;
+ box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset);
+ background-color: $ist-color; }
+ .significant_fragments img {
+ display: inline;
+ float: left;
+ margin: 0.5em; }
+ .significant_fragments table#sf1 {
+ text-align: left; }
+ .significant_fragments table#sf1 td {
+ padding: 0.2em; }
+
+.descriptors {
+ width: 98%;
+ margin-bottom: 2em;
+ box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset);
+ background-color: $ist-color; }
+ .descriptors img {
+ display: inline;
+ float: left;
+ margin: 0.5em; }
+ .descriptors table#sf2 {
+ text-align: left; }
+ .descriptors table#sf2 td {
+ padding: 0.2em; }
+
+.results {
+ box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset);
+ background-image: url("/images/gray_jean.png");
+ overflow-x: auto;
+ overflow-y: hidden;
+ margin-top: 2em;
+ margin-bottom: 2em; }
+ .results a:hover {
+ color: $orange; }
+ .results .tablesorter {
+ width: 100%;
+ text-align: left; }
+ .results .tablesorter thead {
+ background-color: $ist-color; }
+ .results .tablesorter thead tr th.header {
+ background-image: url("/images/bg.gif");
+ background-repeat: no-repeat;
+ background-position: center left;
+ cursor: pointer;
+ padding-left: 20px;
+ border: 1px solid #dad9c7;
+ margin-left: -1px; }
+ .results .tablesorter thead tr th.headerSortDown {
+ background-image: url("/images/desc.gif");
+ background-color: $ist-color; }
+ .results .tablesorter thead tr th.headerSortUp {
+ background-image: url("/images/asc.gif");
+ background-color: $ist-color; }
+ .results .tablesorter tbody tr td {
+ box-shadow: (1px 1px 1px rgba(white, 1) inset, -1px -1px 5px rgba($black, 0.3) inset);
+ padding-left: 1em; }
+ .results .tablesorter tbody .compound {
+ width: 200px;
+ padding: 0.2em; }
+ .results .tablesorter tbody .n {
+ color: #5c8533; }
+ .results .tablesorter tbody .c {
+ color: #d42200; }
+
+input#predict {
+ border: 0px;
+ background-color: $ist-color;
+ margin: 0;
+ padding: 0; }
+
+.tooltip {
+ background-color: white;
+ border: 2px solid $orange;
+ font-size: 0.5em;
+ padding: 1em;
+ display: none;
+ z-index: 50; }
+
+.footer {
+ margin: 20px 0 20px 0; }
+ .footer a {
+ text-decoration: none;
+ color: black; }
+ .footer a:hover {
+ color: $orange; }