From 65e95824737b033ad16046626fe7dbdb7ae43756 Mon Sep 17 00:00:00 2001 From: gebele Date: Wed, 8 Oct 2014 10:56:41 +0200 Subject: dropped compass gem, switch to scss;clean-up files/code --- views/layout.haml | 2 +- views/style.scss | 228 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 229 insertions(+), 1 deletion(-) create mode 100644 views/style.scss (limited to 'views') diff --git a/views/layout.haml b/views/layout.haml index 6659547..05f4a70 100644 --- a/views/layout.haml +++ b/views/layout.haml @@ -4,7 +4,7 @@ %meta{'http-equiv' => 'Content-Type', :content => 'text/html; charset=UTF-8'} %title Lazar Toxicity Predictions %link{:rel=>'icon', :type=>'image/x-icon', :href=>'/images/favicon.ico'} - %link{ :href=>"/stylesheets/screen.css", :media=>"screen, projection", :rel=>"stylesheet", :type=>"text/css"} + %link{:rel=>'stylesheet', :href=>"#{'/style.css'}", :type => "text/css"} %link{ :href=>"/stylesheets/jquery-ui.css", :rel=>"stylesheet"} %link{ :href=>"/jsme/jsa.css", :rel=>"stylesheet"} %script{:src=>"/javascripts/jquery-1.8.3.min.js", :type=>"text/javascript"} 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; } -- cgit v1.2.3