move css files
This commit is contained in:
Ross
@@ -0,0 +1,919 @@
|
||||
body {
|
||||
color: gray;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
a,
|
||||
a:link {
|
||||
color: #3282b8;
|
||||
}
|
||||
|
||||
.warn {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.answer-list {
|
||||
font-size: 20px;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
/* Chrome/Safari */
|
||||
-moz-user-select: none;
|
||||
/* Firefox */
|
||||
-ms-user-select: none;
|
||||
/* IE10+ */
|
||||
}
|
||||
|
||||
.answer-list .answer:hover {
|
||||
z-index: 99999;
|
||||
position: relative;
|
||||
background: black;
|
||||
}
|
||||
|
||||
.answer-list .correct {
|
||||
/* color: green; */
|
||||
color: lightblue;
|
||||
}
|
||||
|
||||
.answer-list .correct::after {
|
||||
content: " [Score = 2]";
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.answer-list.rapid .correct::after {
|
||||
content: " [Score = 2]";
|
||||
}
|
||||
|
||||
.answer-list .half-correct {
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
.answer-list .half-correct::after {
|
||||
content: " [Score = 1]";
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.answer-list.rapid .half-correct::after {
|
||||
content: " [Score = 1]";
|
||||
}
|
||||
|
||||
.answer-list .incorrect {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.answer-list .incorrect::after {
|
||||
content: " [Score = 0]";
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.answer-list .not-marked {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.key {
|
||||
font-size: 20;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.answered {
|
||||
/* color: green; */
|
||||
color: lightblue;
|
||||
}
|
||||
|
||||
.unanswered {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
#question-list {
|
||||
list-style: none;
|
||||
float: right;
|
||||
padding: 1px;
|
||||
border: 1px solid gray;
|
||||
/*max-height: 80%;*/
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.flagged {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.not-flagged {}
|
||||
|
||||
button {
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
padding: 0.35em 1.2em;
|
||||
border: 0.1em solid #52057b;
|
||||
margin: 0 0.3em 0.3em 0;
|
||||
border-radius: 0.12em;
|
||||
box-sizing: border-box;
|
||||
text-decoration: none;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 300;
|
||||
color: #a600ff;
|
||||
text-align: center;
|
||||
transition: all 0.2s;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
color: white;
|
||||
background-color: #52057b;
|
||||
}
|
||||
|
||||
button a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.main-nav-header {
|
||||
/* max-width: 50%; */
|
||||
float: right;
|
||||
}
|
||||
|
||||
.main-nav-header span {
|
||||
float: right;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.top-bar-link {}
|
||||
|
||||
.marking-list pre {
|
||||
display: inline;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.mark-offcanvas {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.save {
|
||||
display: inline-block;
|
||||
padding: 0.35em 1.2em;
|
||||
border: 0.1em solid #ffffff;
|
||||
margin: 0 0.3em 0.3em 0;
|
||||
border-radius: 0.12em;
|
||||
box-sizing: border-box;
|
||||
text-decoration: none;
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 300;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
transition: all 0.2s;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.save:hover {
|
||||
color: #000000;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
#stats-plot {
|
||||
width: 50%;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#dicom-image {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.dicom-viewer {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.rapid-dicom-viewer {
|
||||
width: 400px;
|
||||
height: 600px;
|
||||
position: fixed;
|
||||
top: 30px;
|
||||
right: 0px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.marking-dicom {
|
||||
position: fixed;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
width: 45%;
|
||||
height: 90%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cornerstone-canvas {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.marking {}
|
||||
|
||||
#question-mark-list {
|
||||
padding: 20px
|
||||
}
|
||||
|
||||
#full-question-list {
|
||||
counter-reset: question-list;
|
||||
/* Set a counter named 'section', and its initial value is 0. */
|
||||
}
|
||||
|
||||
#full-question-list li {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
#full-question-list li::before {
|
||||
counter-increment: question-list;
|
||||
content: counter(question-list) " ";
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
|
||||
#full-question-list img {
|
||||
float: left;
|
||||
padding-right: 20px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
#question-mark-list a {
|
||||
color: darkgray;
|
||||
}
|
||||
|
||||
#question-mark-list .unmarked a {
|
||||
color: purple;
|
||||
}
|
||||
|
||||
#question-mark-list li {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
#start-marking-button {
|
||||
float: right;
|
||||
position: sticky;
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
#save-annotations {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#save-annotations.save-rapid-annotations {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.drop-target {
|
||||
width: 100%;
|
||||
width: 100vw;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
font-size: larger;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
left: 0%;
|
||||
right: 50%;
|
||||
margin-left: -50vw;
|
||||
margin-right: -50vw;
|
||||
}
|
||||
|
||||
#drop-container {
|
||||
border: 1px dashed white;
|
||||
}
|
||||
|
||||
.series-drop {
|
||||
position: sticky;
|
||||
height: 600px;
|
||||
bottom: -500px;
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#feedback-drop-target {
|
||||
float: right;
|
||||
height: 100%;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.drop-target-active {
|
||||
background-color: #427aa1;
|
||||
}
|
||||
|
||||
#drop-filenames span {
|
||||
font-size: xx-small;
|
||||
color: gray;
|
||||
padding-right: 1em;
|
||||
|
||||
}
|
||||
|
||||
.image-formset {
|
||||
border: 1px solid white;
|
||||
}
|
||||
|
||||
select,
|
||||
input {
|
||||
background-color: #05668d;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
table.table {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#view-filter-options {
|
||||
/* float: right; */
|
||||
}
|
||||
|
||||
.rapid-img {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.feedback-img {
|
||||
border: 1px solid #05668d;
|
||||
}
|
||||
|
||||
.uploading {
|
||||
margin-top: -20px;
|
||||
height: 75%;
|
||||
/* float: right; */
|
||||
position: absolute;
|
||||
display: inline;
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
/* img.uploading:hover {
|
||||
height: 95%;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%)
|
||||
} */
|
||||
|
||||
.image-ident-warning {
|
||||
border: 2px solid red;
|
||||
}
|
||||
|
||||
|
||||
.image-ident-loading {
|
||||
background: rgba(142, 68, 173, 1);
|
||||
box-shadow: 0 0 0 0 rgba(142, 68, 173, 1);
|
||||
animation: pulse-purple 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-purple {
|
||||
0% {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 0 0 0 rgba(142, 68, 173, 0.7);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 0 0 10px rgba(142, 68, 173, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 0 0 0 rgba(142, 68, 173, 0);
|
||||
}
|
||||
}
|
||||
|
||||
#annotation-json-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cid-score-table {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.user-answer-score-0 {
|
||||
color: red !important;
|
||||
}
|
||||
|
||||
.user-answer-score-1 {
|
||||
color: yellow !important;
|
||||
}
|
||||
|
||||
.user-answer-score-2 {
|
||||
/* color: green; */
|
||||
color: lightblue !important;
|
||||
}
|
||||
|
||||
.rapid-ans.user-answer-score-2 {
|
||||
color: lightblue;
|
||||
}
|
||||
|
||||
.rapid-ans.user-answer-score-1 {
|
||||
/* color: green; */
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
.physics-ans .user-answer-score-1 {
|
||||
color: lightblue;
|
||||
}
|
||||
|
||||
td.user-answer-score-0::after {
|
||||
content: "✗";
|
||||
}
|
||||
|
||||
td.user-answer-score-1::after {
|
||||
content: "✓";
|
||||
}
|
||||
|
||||
td.user-answer-score-2::after {
|
||||
content: "✓✓";
|
||||
}
|
||||
|
||||
td.user-answer-score-1.rapid-ans::after {
|
||||
content: "✓";
|
||||
}
|
||||
|
||||
td.user-answer-score-2.rapid-ans::after {
|
||||
content: "✓✓";
|
||||
}
|
||||
|
||||
.score-row {
|
||||
font-weight: bolder;
|
||||
background-color: darkslateblue;
|
||||
}
|
||||
|
||||
.user-answer-score pre {
|
||||
display: inline;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.correct-answer {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.user-answer-li {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.submitted-user-answer:hover::after {
|
||||
content: " Submitted answer";
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
.question-stem-text {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.parent-help:hover .help-text {
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
.parent-help .help-text {
|
||||
opacity: 0%;
|
||||
}
|
||||
|
||||
.google-link {
|
||||
padding-left: 10px;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.abcde {
|
||||
list-style-type: lower-alpha;
|
||||
}
|
||||
|
||||
.abcde li {
|
||||
padding: 0px;
|
||||
clear: right;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
#full-question-list-physics li {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
#full-question-list-physics {
|
||||
width: 800px;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.answer-1 {
|
||||
/* color: green; */
|
||||
color: lightblue;
|
||||
}
|
||||
|
||||
.answer-0 {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.selector {
|
||||
border-color: #05668d;
|
||||
}
|
||||
|
||||
.selector input {
|
||||
color: gray;
|
||||
background-color: white;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.selector .selector-available h2,
|
||||
.selector .selector-chosen h2 {
|
||||
margin-bottom: 0px;
|
||||
border: none;
|
||||
/* border-color: #05668d; */
|
||||
background-color: #ebf2fa;
|
||||
color: #343a40;
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
.selector .selector-available select,
|
||||
.selector .selector-chosen select {
|
||||
border-color: #05668d;
|
||||
}
|
||||
|
||||
#id_laterality {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
#id_laterality li {
|
||||
display: inline-block;
|
||||
border-radius: 4px;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
background: rgb(28, 184, 65);
|
||||
padding-right: 10px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.add-popup {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.multi-image-block,
|
||||
.series-block {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.sortable-placeholder {
|
||||
border: 4px solid purple;
|
||||
|
||||
}
|
||||
|
||||
.temp-thumb {
|
||||
float: right;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.long-answer pre {
|
||||
white-space: pre-wrap;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.long-answer .answer-heading {
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.proposed-answer {
|
||||
color: darkblue
|
||||
}
|
||||
|
||||
.notes .complete {
|
||||
color: darkslategray;
|
||||
}
|
||||
|
||||
table.longs .user-answer-score-4,
|
||||
table.longs .user-answer-score-4\.0,
|
||||
table.longs .user-answer-score-4\.5 {
|
||||
color: red;
|
||||
}
|
||||
|
||||
table.longs .user-answer-score-5\.0,
|
||||
table.longs .user-answer-score-5\.5 {
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
table.longs .user-answer-score-6\.0,
|
||||
table.longs .user-answer-score-6\.5 {
|
||||
color: yellowgreen;
|
||||
}
|
||||
|
||||
table.longs .user-answer-score-7\.0,
|
||||
table.longs .user-answer-score-7\.5,
|
||||
table.longs .user-answer-score-8\.0,
|
||||
table.longs .user-answer-score-8,
|
||||
table.longs .user-answer-score-8\.5 {
|
||||
color: green;
|
||||
}
|
||||
|
||||
table.longs .user-answer-score- {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
textarea,
|
||||
input {
|
||||
border-radius: 2px;
|
||||
background-color: #343a40;
|
||||
color: lightgray;
|
||||
}
|
||||
|
||||
.exam-list li,
|
||||
#full-question-list li {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flex-col-2 {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.flex-col-3 {
|
||||
flex: 3;
|
||||
}
|
||||
|
||||
.flex-col-4 {
|
||||
flex: 4;
|
||||
}
|
||||
|
||||
.score-answer-list {
|
||||
width: 55%;
|
||||
}
|
||||
|
||||
.score-answer-list pre {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.question-display-block {
|
||||
position: fixed;
|
||||
right: 0px;
|
||||
top: 30px;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.view-question-link {
|
||||
float: right;
|
||||
color: blue;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.view-question-link-longs {
|
||||
color: blue;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: smaller;
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
.date:hover {
|
||||
opacity: 100%;
|
||||
}
|
||||
|
||||
.floating-header {
|
||||
position: sticky;
|
||||
top: 1px;
|
||||
background-color: black;
|
||||
border: dashed 1px gray;
|
||||
padding-left: 1em;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.sba-answer-list {
|
||||
list-style-type: lower-alpha;
|
||||
}
|
||||
|
||||
.sba-answer-list li:hover {
|
||||
color: purple;
|
||||
}
|
||||
|
||||
#menu-list button {
|
||||
padding-left: 2px;
|
||||
padding-right: 2px;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
margin: 1px;
|
||||
}
|
||||
|
||||
.sba-finish-list {
|
||||
/* display: flex; */
|
||||
}
|
||||
|
||||
/* .sba-finish-list li {
|
||||
display: inline-block;
|
||||
border: 1px solid purple;
|
||||
min-width: 10px;
|
||||
}
|
||||
*/
|
||||
|
||||
.sba-finish-list a button.unanswered {
|
||||
color: red;
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.no-select {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.sba-answer-list .correct {
|
||||
background-color: green;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.id {
|
||||
opacity: 50%;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.sticky-alert {
|
||||
position: sticky;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.marking-block {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.marking-block details {
|
||||
padding-right: 20px;
|
||||
flex: 1
|
||||
}
|
||||
|
||||
.image-link {
|
||||
color: purple;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.inner-display-block {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hide-show {
|
||||
float: right;
|
||||
transform: rotate(90deg) translateX(10px);
|
||||
color: blueviolet;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.clear-both {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.check-review {
|
||||
color: purple;
|
||||
}
|
||||
|
||||
.current-mark {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.select2-dropdown {
|
||||
background-color: #05668d;
|
||||
color: white;
|
||||
border-color: #05668d;
|
||||
}
|
||||
|
||||
.select2-selection .select2-selection--multiple,
|
||||
.select2 .select2-selection--single,
|
||||
.select2-selection {
|
||||
background-color: #05668d;
|
||||
color: white;
|
||||
/* border: 1px solid #aaa; */
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.select2-search__field {
|
||||
background-color: #05668d;
|
||||
color: darkblue;
|
||||
border: 1px solid black;
|
||||
|
||||
}
|
||||
|
||||
.select2-container--default.select2-container--focus .select2-selection--multiple,
|
||||
.select2-container--default.select2-container--default .select2-selection--multiple,
|
||||
.select2-selection .select2-selection__rendered .select2-selection__choice {
|
||||
background-color: #5897fb;
|
||||
}
|
||||
|
||||
.select2-selection__rendered {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.temp-thumb-large {
|
||||
width: 1000px;
|
||||
height: 1000px;
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.image-duplicate {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
|
||||
.finding-form {
|
||||
border: 1px dashed darkblue;
|
||||
|
||||
}
|
||||
|
||||
.finding-box {
|
||||
display: flex;
|
||||
border: 1px dashed gray;
|
||||
}
|
||||
|
||||
.view-finding-button {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.view-finding-details {
|
||||
flex: 4;
|
||||
}
|
||||
|
||||
.delete-finding-link,
|
||||
.edit-finding-link {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
summary h2,
|
||||
summary h3,
|
||||
summary h4,
|
||||
summary h5 {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.mark-buttons {
|
||||
position: sticky;
|
||||
bottom: 0px;
|
||||
background-color: black;
|
||||
opacity: 80%;
|
||||
}
|
||||
|
||||
.small-url-button {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
button a, button a:link, button a:visited, button a:hover {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
details.filter {
|
||||
border: 1px solid gray;
|
||||
padding: 10px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
/* Generic default styling for forms */
|
||||
|
||||
/* Highlight form errors */
|
||||
tr:has(.errorlist){
|
||||
border: 1px dashed red;
|
||||
}
|
||||
|
||||
.errorlist + input {
|
||||
background-color: red;
|
||||
color: darkblue;
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
border: 1px dashed red;
|
||||
|
||||
}
|
||||
|
||||
/* Form styling */
|
||||
|
||||
.control-group {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.help-block {
|
||||
float: right;
|
||||
opacity: 25%;
|
||||
}
|
||||
|
||||
.control-group:hover .help-block{
|
||||
opacity: 100%;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.inline-form {
|
||||
display: inline-grid;
|
||||
}
|
||||
|
||||
form .submit-button {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
@@ -0,0 +1,148 @@
|
||||
.canvas-panel {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
#dicom-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#image-thumbs {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
overflow-y: auto;
|
||||
max-height: 100%;
|
||||
max-width: 30%;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.thumb {
|
||||
position: relative;
|
||||
border: 1px dotted blue;
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.thumb-active {
|
||||
border: 5px dotted blue;
|
||||
}
|
||||
|
||||
.thumb span {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
color: lightblue;
|
||||
}
|
||||
|
||||
.cornerstone-element {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.dicom-button {
|
||||
font-size: 40px;
|
||||
z-index: 99;
|
||||
opacity: 20%;
|
||||
color: gray;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.dicom-button:hover {
|
||||
opacity: 100%;
|
||||
}
|
||||
|
||||
.dicom-button-highlight {
|
||||
opacity: 50%;
|
||||
color: lightblue;
|
||||
}
|
||||
|
||||
#dicom-toggle-mode-button {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#dicom-settings-button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#dicom-fullscreen-button {
|
||||
position: absolute;
|
||||
transform: translate(50%, -20%);
|
||||
right: 50%;
|
||||
}
|
||||
|
||||
#dicom-collapse-button {
|
||||
position: absolute;
|
||||
transform: translate(0, -50%);
|
||||
top: 50%;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#dicom-info-button {
|
||||
position: absolute;
|
||||
transform: translate(0, -75%);
|
||||
right: 0;
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
#dicom-settings-panel {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
padding-bottom: 20px;
|
||||
background-color: rgba(0, 0, 0, 0.8); /* Black w/ opacity */
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
#dicom-log-panel {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
padding-bottom: 20px;
|
||||
background-color: rgba(0, 0, 0, 0.8); /* Black w/ opacity */
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
#dicom-window-panel {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
transform: translate(0, -100%);
|
||||
opacity: 0.0;
|
||||
}
|
||||
#dicom-window-panel:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#dicom-summary-panel {
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
color: red;
|
||||
top: -100%;
|
||||
overflow: scroll;
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,565 @@
|
||||
/* SELECTOR (FILTER INTERFACE) */
|
||||
|
||||
.selector {
|
||||
width: 800px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.selector select {
|
||||
width: 380px;
|
||||
height: 17.2em;
|
||||
}
|
||||
|
||||
.selector-available, .selector-chosen {
|
||||
float: left;
|
||||
width: 380px;
|
||||
text-align: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.selector-chosen select {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.selector-available h2, .selector-chosen h2 {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.selector-chosen h2 {
|
||||
background: #79aec8;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.selector .selector-available h2 {
|
||||
background: #f8f8f8;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.selector .selector-filter {
|
||||
background: white;
|
||||
border: 1px solid #ccc;
|
||||
border-width: 0 1px;
|
||||
padding: 8px;
|
||||
color: #999;
|
||||
font-size: 10px;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.selector .selector-filter label,
|
||||
.inline-group .aligned .selector .selector-filter label {
|
||||
float: left;
|
||||
margin: 7px 0 0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.selector .selector-available input {
|
||||
width: 320px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.selector ul.selector-chooser {
|
||||
float: left;
|
||||
width: 22px;
|
||||
background-color: #eee;
|
||||
border-radius: 10px;
|
||||
margin: 10em 5px 0 5px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.selector-chooser li {
|
||||
margin: 0;
|
||||
padding: 3px;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.selector select {
|
||||
padding: 0 10px;
|
||||
margin: 0 0 10px;
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
|
||||
.selector-add, .selector-remove {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: block;
|
||||
text-indent: -3000px;
|
||||
overflow: hidden;
|
||||
cursor: default;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.active.selector-add, .active.selector-remove {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.active.selector-add:hover, .active.selector-remove:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.selector-add {
|
||||
background: url(../img/selector-icons.svg) 0 -96px no-repeat;
|
||||
}
|
||||
|
||||
.active.selector-add:focus, .active.selector-add:hover {
|
||||
background-position: 0 -112px;
|
||||
}
|
||||
|
||||
.selector-remove {
|
||||
background: url(../img/selector-icons.svg) 0 -64px no-repeat;
|
||||
}
|
||||
|
||||
.active.selector-remove:focus, .active.selector-remove:hover {
|
||||
background-position: 0 -80px;
|
||||
}
|
||||
|
||||
a.selector-chooseall, a.selector-clearall {
|
||||
display: inline-block;
|
||||
height: 16px;
|
||||
text-align: left;
|
||||
margin: 1px auto 3px;
|
||||
overflow: hidden;
|
||||
font-weight: bold;
|
||||
line-height: 16px;
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
a.active.selector-chooseall:focus, a.active.selector-clearall:focus,
|
||||
a.active.selector-chooseall:hover, a.active.selector-clearall:hover {
|
||||
color: #447e9b;
|
||||
}
|
||||
|
||||
a.active.selector-chooseall, a.active.selector-clearall {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
a.active.selector-chooseall:hover, a.active.selector-clearall:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a.selector-chooseall {
|
||||
padding: 0 18px 0 0;
|
||||
background: url(../img/selector-icons.svg) right -160px no-repeat;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
a.active.selector-chooseall:focus, a.active.selector-chooseall:hover {
|
||||
background-position: 100% -176px;
|
||||
}
|
||||
|
||||
a.selector-clearall {
|
||||
padding: 0 0 0 18px;
|
||||
background: url(../img/selector-icons.svg) 0 -128px no-repeat;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
a.active.selector-clearall:focus, a.active.selector-clearall:hover {
|
||||
background-position: 0 -144px;
|
||||
}
|
||||
|
||||
/* STACKED SELECTORS */
|
||||
|
||||
.stacked {
|
||||
float: left;
|
||||
width: 490px;
|
||||
}
|
||||
|
||||
.stacked select {
|
||||
width: 480px;
|
||||
height: 10.1em;
|
||||
}
|
||||
|
||||
.stacked .selector-available, .stacked .selector-chosen {
|
||||
width: 480px;
|
||||
}
|
||||
|
||||
.stacked .selector-available {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.stacked .selector-available input {
|
||||
width: 422px;
|
||||
}
|
||||
|
||||
.stacked ul.selector-chooser {
|
||||
height: 22px;
|
||||
width: 50px;
|
||||
margin: 0 0 10px 40%;
|
||||
background-color: #eee;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.stacked .selector-chooser li {
|
||||
float: left;
|
||||
padding: 3px 3px 3px 5px;
|
||||
}
|
||||
|
||||
.stacked .selector-chooseall, .stacked .selector-clearall {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.stacked .selector-add {
|
||||
background: url(../img/selector-icons.svg) 0 -32px no-repeat;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.stacked .active.selector-add {
|
||||
background-position: 0 -48px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.stacked .selector-remove {
|
||||
background: url(../img/selector-icons.svg) 0 0 no-repeat;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.stacked .active.selector-remove {
|
||||
background-position: 0 -16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.selector .help-icon {
|
||||
background: url(../img/icon-unknown.svg) 0 0 no-repeat;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: -2px 0 0 2px;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
}
|
||||
|
||||
.selector .selector-chosen .help-icon {
|
||||
background: url(../img/icon-unknown-alt.svg) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
.selector .search-label-icon {
|
||||
background: url(../img/search.svg) 0 0 no-repeat;
|
||||
display: inline-block;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
/* DATE AND TIME */
|
||||
|
||||
p.datetime {
|
||||
line-height: 20px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #666;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.datetime span {
|
||||
white-space: nowrap;
|
||||
font-weight: normal;
|
||||
font-size: 11px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.datetime input, .form-row .datetime input.vDateField, .form-row .datetime input.vTimeField {
|
||||
min-width: 0;
|
||||
margin-left: 5px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
table p.datetime {
|
||||
font-size: 11px;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.datetimeshortcuts .clock-icon, .datetimeshortcuts .date-icon {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.datetimeshortcuts .clock-icon {
|
||||
background: url(../img/icon-clock.svg) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
.datetimeshortcuts a:focus .clock-icon,
|
||||
.datetimeshortcuts a:hover .clock-icon {
|
||||
background-position: 0 -16px;
|
||||
}
|
||||
|
||||
.datetimeshortcuts .date-icon {
|
||||
background: url(../img/icon-calendar.svg) 0 0 no-repeat;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.datetimeshortcuts a:focus .date-icon,
|
||||
.datetimeshortcuts a:hover .date-icon {
|
||||
background-position: 0 -16px;
|
||||
}
|
||||
|
||||
.timezonewarning {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* URL */
|
||||
|
||||
p.url {
|
||||
line-height: 20px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #666;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.url a {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* FILE UPLOADS */
|
||||
|
||||
p.file-upload {
|
||||
line-height: 20px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #666;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.aligned p.file-upload {
|
||||
margin-left: 170px;
|
||||
}
|
||||
|
||||
.file-upload a {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.file-upload .deletelink {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
span.clearable-file-input label {
|
||||
color: #333;
|
||||
font-size: 11px;
|
||||
display: inline;
|
||||
float: none;
|
||||
}
|
||||
|
||||
/* CALENDARS & CLOCKS */
|
||||
|
||||
.calendarbox, .clockbox {
|
||||
margin: 5px auto;
|
||||
font-size: 12px;
|
||||
width: 19em;
|
||||
text-align: center;
|
||||
background: white;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.clockbox {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.calendar {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.calendar table {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-collapse: collapse;
|
||||
background: white;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.calendar caption, .calendarbox h2 {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
border-top: none;
|
||||
background: #f5dd5d;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.calendar th {
|
||||
padding: 8px 5px;
|
||||
background: #f8f8f8;
|
||||
border-bottom: 1px solid #ddd;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.calendar td {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
border-top: 1px solid #eee;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.calendar td.selected a {
|
||||
background: #79aec8;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.calendar td.nonday {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.calendar td.today a {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.calendar td a, .timelist a {
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
padding: 6px;
|
||||
text-decoration: none;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.calendar td a:focus, .timelist a:focus,
|
||||
.calendar td a:hover, .timelist a:hover {
|
||||
background: #79aec8;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.calendar td a:active, .timelist a:active {
|
||||
background: #417690;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.calendarnav {
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
color: #ccc;
|
||||
margin: 0;
|
||||
padding: 1px 3px;
|
||||
}
|
||||
|
||||
.calendarnav a:link, #calendarnav a:visited,
|
||||
#calendarnav a:focus, #calendarnav a:hover {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.calendar-shortcuts {
|
||||
background: white;
|
||||
font-size: 11px;
|
||||
line-height: 11px;
|
||||
border-top: 1px solid #eee;
|
||||
padding: 8px 0;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.calendarbox .calendarnav-previous, .calendarbox .calendarnav-next {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
text-indent: -9999px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.calendarnav-previous {
|
||||
left: 10px;
|
||||
background: url(../img/calendar-icons.svg) 0 0 no-repeat;
|
||||
}
|
||||
|
||||
.calendarbox .calendarnav-previous:focus,
|
||||
.calendarbox .calendarnav-previous:hover {
|
||||
background-position: 0 -15px;
|
||||
}
|
||||
|
||||
.calendarnav-next {
|
||||
right: 10px;
|
||||
background: url(../img/calendar-icons.svg) 0 -30px no-repeat;
|
||||
}
|
||||
|
||||
.calendarbox .calendarnav-next:focus,
|
||||
.calendarbox .calendarnav-next:hover {
|
||||
background-position: 0 -45px;
|
||||
}
|
||||
|
||||
.calendar-cancel {
|
||||
margin: 0;
|
||||
padding: 4px 0;
|
||||
font-size: 12px;
|
||||
background: #eee;
|
||||
border-top: 1px solid #ddd;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.calendar-cancel:focus, .calendar-cancel:hover {
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
.calendar-cancel a {
|
||||
color: black;
|
||||
display: block;
|
||||
}
|
||||
|
||||
ul.timelist, .timelist li {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.timelist a {
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
/* EDIT INLINE */
|
||||
|
||||
.inline-deletelink {
|
||||
float: right;
|
||||
text-indent: -9999px;
|
||||
background: url(../img/inline-delete.svg) 0 0 no-repeat;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 0px none;
|
||||
}
|
||||
|
||||
.inline-deletelink:focus, .inline-deletelink:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* RELATED WIDGET WRAPPER */
|
||||
.related-widget-wrapper {
|
||||
float: left; /* display properly in form rows with multiple fields */
|
||||
overflow: hidden; /* clear floated contents */
|
||||
}
|
||||
|
||||
.related-widget-wrapper-link {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.related-widget-wrapper-link:link {
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.related-widget-wrapper-link:link:focus,
|
||||
.related-widget-wrapper-link:link:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
select + .related-widget-wrapper-link,
|
||||
.related-widget-wrapper-link + .related-widget-wrapper-link {
|
||||
margin-left: 7px;
|
||||
}
|
||||
Reference in New Issue
Block a user