Homec4science
Diffusion Desuto Platform (viewer-only) Browse

desuto-platform/desuto-retrieval/Desuto-retrievalinterface/css/user-sober.css
d6b9841b9a91viewer-only

Last Change
Raw File

user-sober.css
View Options

/*
Document : user
Created on : Mar 7, 2013, 3:38:01 PM
Author : sro
Description:
Purpose of the stylesheet follows.
*/
/* Used Colors
blue : #597DA4 (89, 125, 164)
red : red
*/
/* Wrapping container */
#container{
/*min-height: 100%;*/
/*height: 100%;*/
min-height: 100%;
position: relative;
}
/* Middle container */
#content{
margin: 0 0 0 200px;
position: relative;
text-align: top;
/*padding-bottom: 50px;*/
/*z-index: -1;*/
}
/* Left container */
#left{
left:0;
}
/* Right container */
#right{
right:0;
display: none;
}
/* Expert mode */
#expertmode-overlay{
position: absolute;
background-color: rgba(0,0,0,0.9);
padding:1.5em;
width:420px;
left:50%;
top:40%;
margin-left: -250px;
margin-top:-100px;
z-index: 999;
border-radius: 20px;
text-align: center;
display: none;
}
#expertmode{
position: relative;
top:50%;
left:50%;
margin-left: -210px;
width:400px;
border-radius: 3px;
background-color: #597DA4;
padding:10px;
color:white;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: x-large;
text-align: center;
}
#expertmode span{
display:block;
background-color: #fafafa;
color:#597DA4;
border-radius: 3px;
}
.expert-option{
width:300px;
margin-top: 0.25em;
font-size: small;
}
/* Speech */
.mic{
width:32px;
float:left;
cursor:pointer;
}
/* Left & Right boxes */
.query-box{
width:200px;
background-color: #eee;
overflow-x: hidden;
overflow-y:auto;
position: fixed;
top: 0;
bottom:0px;
border: 0 solid #ccc;
-moz-box-shadow:0px 0px 10px 0px #777;
-webkit-box-shadow:0px 0px 10px 0px #777;
box-shadow:0px 0px 10px 0px #777;
background-image: url('../img/plus.png');
background-repeat: no-repeat;
background-position:-9000px -9000px;
z-index: 8;
text-align: center;
}
/* Illuminate on hover */
.box-hover{
background-position: center;
background-color: #ddd;
}
/* Query box title */
.box-title{
text-align: center;
color:#fff;
margin:0.5em;
margin-bottom: 0px;
background-color: #597da4;
border-radius: 5px;
padding:0.1em;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
}
/* Tabs */
#tabs {
background: transparent;
border: none;
font-size: 0.7em;
/*font-weight: normal;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;*/
}
#tabs *{
border-radius: 3px 3px 0 0;
}
#tabs ul{
background-color: transparent;
}
#tabs .ui-widget-header {
background: transparent;
border: none;
border-bottom: 1px solid #c0c0c0;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
#tabs .ui-tabs-nav .ui-state-default a {
color: #666;
}
#tabs .ui-tabs-nav .ui-state-active a {
color: #d00;
}
/* Footer title */
.footer-title{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:x-large;
color:#1a1a1a;
}
/* ParaDISE Logo */
.logo-paradise, .logo-khresmoi{
position:relative;
margin:0;
margin-bottom: 0px;
height: 70px;
}
.logo-paradise img{
position: relative;
top:10px;
left:10px;
width: 120px;
z-index: 1;
transform:rotate(-17deg);
-ms-transform:rotate(-17deg); /* IE 9 */
-moz-transform:rotate(-17deg); /* Firefox */
-webkit-transform:rotate(-17deg); /* Safari and Chrome */
-o-transform:rotate(-17deg); /* Opera */
}
.logo-khresmoi img{
position: relative;
top:5px;
left:5px;
z-index: 1;
width: 180px;
}
/* Search config */
#search-config{
padding:1em;
margin-left:1em;
}
#search-config .ui-button{
padding: .25em 0.5em;
}
#search-config .ui-state-active{
background-color: #597da4;
border: 1px solid #0b54a4;
}
#search-config .ui-state-active .ui-icon-background{
border-color: #0b54a4;
}
/* USERTEST */
/*#select-feature{
display: none !important;
}*/
/* Arrow in the footer */
#updown{
cursor:pointer;
background-color: #d00;
padding: 0.15em 0;
border-radius: 5px 5px 0px 0px;
}
/* Refresh buttons */
.refresh {
cursor: pointer;
position:absolute;
right:10px;
}
.refresh img{
width:40px;
}
#refresh-diagnostic{
top:45px;
}
#refresh-radiology{
top:105px;
}
#refresh-imageclef{
top:165px;
}
/* Global image container settings */
.image-container, #results{
list-style-type: none;
padding: 0;
}
.image-container li{
text-indent: 0;
position:relative;
}
.image-container li a{
cursor: move;
}
.image-container li .overlay{
height:0;
bottom: 0;
color: #EEEEEE;
font-size: 0.09em;
left: 0;
line-height: 0.8em;
overflow: hidden;
position: absolute;
right: 0;
background: none repeat scroll 0 0 rgba(50, 50, 50, 0.64);
pointer-events: none;
}
.image-container li:hover .overlay{
height: 100%;
}
.image-container li .trash{
width:32px;
height: 32px;
position: absolute;
top:50%;
left:50%;
margin-left: -16px;
margin-top:-16px;
background-image: url('../img/trash-can-32.png');
visibility: hidden;
cursor: pointer;
}
.image-container li:hover .trash{
visibility: visible;
}
.overlayVisible{
height:100% !important;
}
.trashVisible{
visibility: visible !important;
}
/* All query & example images */
.thumbnail{
max-width: 120px;
max-height: 120px;
}
/* Result images */
.big{
border:4px solid transparent;
max-width: 100%;
}
/* Bottom images */
#query-images{
float: right;
position: relative;
left: -50%;
}
#query-images ul{
position: relative;
left: 50%;
}
#query-images li{
display:block;
float:left;
margin: 0 2em;
}
#query-images li a{
cursor: move;
}
#examples-loader{
position: absolute;
left:50%;
top:50%;
margin-left: -32px;
margin-top: 16px;
display: none;
}
/* Left & Right images */
#relevant-images, #irrelevant-images{
margin: 0;
text-align:center;
min-height: calc(100% - 103px);
}
#relevant-images li, #irrelevant-images li{
display: block;
padding:0.5em 0;
}
/* Results */
#results{
padding-top:0px;
padding-bottom: 0px;
margin: 0em;
clear: left;
}
#results li{
float:left;
width: 16.5%;
margin: 0em;
display:block;
padding: 10px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
z-index: 9;
}
#results li a{
cursor: move;
}
.gleason-grade{
position: absolute;
top: 18px;
left: 18px;
width: 40px;
height: 20px;
font-size: 14px;
text-align: center;
border-radius: 10px;
opacity: 0.8;
color:white;
}
.gleason-grade-B{
background-color: green;
}
.gleason-grade-3{
background-color: blue;
}
.gleason-grade-3-4{
background-color: red;
}
.gleason-grade-4{
background-color: darkred;
}
.gleason-grade-4-5{
background-color: #333;
}
.gleason-grade-5{
background-color: black;
}
.unselectable {
pointer-events: none;
}
#results-loader{
position: absolute;
width: 100%;
text-align: center;
clear:both;
top:50%;
margin-top: -128px;
margin-left: 100px;
display: none;
}
#info-message{
text-align: center;
font-size: xx-large;
margin-top: 1em;
}
#load-more{
width:100%;
/*position: absolute;*/
font-size:2em;
top: -1.5em;
display:none;
text-align: center;
cursor:pointer;
}
#load-more a{
background-color: rgba(0,0,0,0.7);
border-radius: 7px;
padding:0 0.25em;
color:white;
text-decoration: none;
}
#load-more a:hover{
background-color: rgba(0,0,0,0.8);
}
/* Dropzone */
.dz-filename, .dz-size{
visibility: hidden;
}
.dz-image-preview:hover .dz-filename{
visibility: visible;
}
.dropzone .dz-preview,
.dropzone-previews .dz-preview{
margin: 6px;
}
.dropzone {
min-height: 150px;
padding: 0px;
}
#dropzone{
background-color: #b00;
height:150px;
width: 75%;
margin: 0 auto;
margin-top: 0.5em;
}
/* Basic tags & classes */
h1{
text-align: center;
font-size:4em;
margin: 0;
margin-top: -0.4em;
padding-top: 0.2em;
}
html { height: 100%; }
body { height: 100%; overflow-x: hidden;}
/* DROPZONEJS */
/* Preview Element */
.dz-filename{
display: none;
}
/* TextAreas */
.query-box textarea {
padding: 9px;
border: solid 1px #E5E5E5;
border-radius: 5px;
outline: 0;
color:#777;
font: Helvetica, "Lucida Grande", Verdana, Tahoma, sans-serif;
font-weight: bold;
font-size: 14px;
width: 160px;
min-height: 10px;
background: #FFFFFF url('bg_form.png') left top repeat-x;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.3) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.3) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.3) 0px 0px 8px;
}
.typing-text{
color:#777;
text-align: center;
margin-top: 3px;
margin-bottom: -10px;
font-size: x-small;
}
/* Fancybox customization */
.fancybox-title{
padding:0.25em 0.5em;
background-color: rgba(0,0,0,0.7);
text-align: justify;
border-radius: 5px;
}
c4science · Help