/*
crate_anon/crateweb/specimen_archives/static/archives.css
===============================================================================
Copyright (C) 2015, University of Cambridge, Department of Psychiatry.
Created by Rudolf Cardinal (rnc1001@cam.ac.uk).
This file is part of CRATE.
CRATE is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
CRATE is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with CRATE. If not, see <https://www.gnu.org/licenses/>.
===============================================================================
CSS for demonstration CRATE archives.
*/
/*
===============================================================================
Basic HTML elements
===============================================================================
*/
body {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
/* Content goes right to the edges: */
margin: 0;
padding: 0;
}
code {
font-size: 0.8em;
font-family: Consolas, Monaco, 'Lucida Console', 'Liberation Mono',
'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace;
background-color: #eeeeee;
padding: 1px 5px 1px 5px;
}
div {
border: none;
margin: 0;
padding: 0;
}
h1 {
font-size: 1.2em;
margin: 0 0 6px 0;
}
h2 {
font-size: 1.0em;
margin: 6px 0 6px 0;
}
iframe {
border: none;
background-color: #ffffee;
margin: 0;
padding: 0;
}
sup, sub {
font-size: 0.7em; /* 1 em is the size of the parent font */
vertical-align: baseline;
position: relative;
top: -0.5em;
}
sub {
top: 0.5em;
}
table {
vertical-align: top;
border-collapse: collapse;
border: 1px solid black;
padding: 0;
margin: 2px 0 2px 0;
}
tr, th, td {
vertical-align: top;
text-align: left;
margin: 0;
padding: 2px;
border: 1px solid black;
line-height: 1.1em;
}
th {
font-weight: bold;
background-color: #eeeeee;
}
/* Stripy tables. */
tr:nth-child(odd) {
background-color: #ffffff;
}
tr:nth-child(even) {
background-color: #ffffdd;
}
/*
===============================================================================
Colours and other simple styling
===============================================================================
*/
.navigation {
background-color: lightblue;
}
.template_description {
font-weight: bold;
background-color: lightsalmon;
}
.title_bar {
background-color: lightgreen;
padding: 6px;
}
.warning {
font-weight: bold;
background-color: red;
}
/*
===============================================================================
Layout
===============================================================================
- https://stackoverflow.com/questions/2062258/floating-elements-within-a-div-floats-outside-of-div-why
- https://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm
*/
* {
/*
Without this, silly wrapping occurs.
See https://www.w3schools.com/howto/howto_css_two_columns.asp;
https://www.w3schools.com/css/css3_box-sizing.asp.
*/
box-sizing: border-box;
}
.pad {
padding: 6px;
}
/* Row to contain columns or float objects */
.row {
overflow: auto;
padding: 0;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.float_left {
float: left;
}
.float_right {
float: right;
}
.mainpage_row {
overflow: hidden;
/* ... scrolling within the columns, not the whole page */
}
.mainpage_col_left {
float: left;
margin: 0;
padding: 0;
width: 15%;
background-color: #ccccff;
overflow: auto;
}
.mainpage_col_right {
float: left;
margin: 0;
padding: 0;
width: 85%;
overflow: auto;
/*
Show spinner when nothing else is there:
https://stackoverflow.com/questions/8626638/how-to-display-loading-message-when-an-iframe-is-loading
https://codepen.io/ryanallen/pen/OPpbbR
https://blog.codepen.io/legal/licensing/
*/
background:
url(data:image/svg+xml;base64,PCEtLSBodHRwczovL2NvZGVwZW4uaW8vcnlhbmFsbGVuL3Blbi9PUHBiYlIgLS0+IDxzdmcgdmVyc2lvbj0iMS4xIiBjbGFzcz0ic3ZnLWxvYWRlciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA4MCA4MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgPiA8cGF0aCBmaWxsPSIjMzM5OUZGIiBkPSJNMTAsNDBjMCwwLDAtMC40LDAtMS4xYzAtMC4zLDAtMC44LDAtMS4zYzAtMC4zLDAtMC41LDAtMC44YzAtMC4zLDAuMS0wLjYsMC4xLTAuOWMwLjEtMC42LDAuMS0xLjQsMC4yLTIuMSBjMC4yLTAuOCwwLjMtMS42LDAuNS0yLjVjMC4yLTAuOSwwLjYtMS44LDAuOC0yLjhjMC4zLTEsMC44LTEuOSwxLjItM2MwLjUtMSwxLjEtMiwxLjctMy4xYzAuNy0xLDEuNC0yLjEsMi4yLTMuMSBjMS42LTIuMSwzLjctMy45LDYtNS42YzIuMy0xLjcsNS0zLDcuOS00LjFjMC43LTAuMiwxLjUtMC40LDIuMi0wLjdjMC43LTAuMywxLjUtMC4zLDIuMy0wLjVjMC44LTAuMiwxLjUtMC4zLDIuMy0wLjRsMS4yLTAuMSBsMC42LTAuMWwwLjMsMGwwLjEsMGwwLjEsMGwwLDBjMC4xLDAtMC4xLDAsMC4xLDBjMS41LDAsMi45LTAuMSw0LjUsMC4yYzAuOCwwLjEsMS42LDAuMSwyLjQsMC4zYzAuOCwwLjIsMS41LDAuMywyLjMsMC41IGMzLDAuOCw1LjksMiw4LjUsMy42YzIuNiwxLjYsNC45LDMuNCw2LjgsNS40YzEsMSwxLjgsMi4xLDIuNywzLjFjMC44LDEuMSwxLjUsMi4xLDIuMSwzLjJjMC42LDEuMSwxLjIsMi4xLDEuNiwzLjEgYzAuNCwxLDAuOSwyLDEuMiwzYzAuMywxLDAuNiwxLjksMC44LDIuN2MwLjIsMC45LDAuMywxLjYsMC41LDIuNGMwLjEsMC40LDAuMSwwLjcsMC4yLDFjMCwwLjMsMC4xLDAuNiwwLjEsMC45IGMwLjEsMC42LDAuMSwxLDAuMSwxLjRDNzQsMzkuNiw3NCw0MCw3NCw0MGMwLjIsMi4yLTEuNSw0LjEtMy43LDQuM3MtNC4xLTEuNS00LjMtMy43YzAtMC4xLDAtMC4yLDAtMC4zbDAtMC40YzAsMCwwLTAuMywwLTAuOSBjMC0wLjMsMC0wLjcsMC0xLjFjMC0wLjIsMC0wLjUsMC0wLjdjMC0wLjItMC4xLTAuNS0wLjEtMC44Yy0wLjEtMC42LTAuMS0xLjItMC4yLTEuOWMtMC4xLTAuNy0wLjMtMS40LTAuNC0yLjIgYy0wLjItMC44LTAuNS0xLjYtMC43LTIuNGMtMC4zLTAuOC0wLjctMS43LTEuMS0yLjZjLTAuNS0wLjktMC45LTEuOC0xLjUtMi43Yy0wLjYtMC45LTEuMi0xLjgtMS45LTIuN2MtMS40LTEuOC0zLjItMy40LTUuMi00LjkgYy0yLTEuNS00LjQtMi43LTYuOS0zLjZjLTAuNi0wLjItMS4zLTAuNC0xLjktMC42Yy0wLjctMC4yLTEuMy0wLjMtMS45LTAuNGMtMS4yLTAuMy0yLjgtMC40LTQuMi0wLjVsLTIsMGMtMC43LDAtMS40LDAuMS0yLjEsMC4xIGMtMC43LDAuMS0xLjQsMC4xLTIsMC4zYy0wLjcsMC4xLTEuMywwLjMtMiwwLjRjLTIuNiwwLjctNS4yLDEuNy03LjUsMy4xYy0yLjIsMS40LTQuMywyLjktNiw0LjdjLTAuOSwwLjgtMS42LDEuOC0yLjQsMi43IGMtMC43LDAuOS0xLjMsMS45LTEuOSwyLjhjLTAuNSwxLTEsMS45LTEuNCwyLjhjLTAuNCwwLjktMC44LDEuOC0xLDIuNmMtMC4zLDAuOS0wLjUsMS42LTAuNywyLjRjLTAuMiwwLjctMC4zLDEuNC0wLjQsMi4xIGMtMC4xLDAuMy0wLjEsMC42LTAuMiwwLjljMCwwLjMtMC4xLDAuNi0wLjEsMC44YzAsMC41LTAuMSwwLjktMC4xLDEuM0MxMCwzOS42LDEwLDQwLDEwLDQweiIgPiA8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVUeXBlPSJ4bWwiIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiBmcm9tPSIwIDQwIDQwIiB0bz0iMzYwIDQwIDQwIiBkdXI9IjAuOHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPiA8L3BhdGg+IDxwYXRoIGZpbGw9IiMzMzk5RkYiIGQ9Ik02Miw0MC4xYzAsMCwwLDAuMi0wLjEsMC43YzAsMC4yLDAsMC41LTAuMSwwLjhjMCwwLjIsMCwwLjMsMCwwLjVjMCwwLjItMC4xLDAuNC0wLjEsMC43IGMtMC4xLDAuNS0wLjIsMS0wLjMsMS42Yy0wLjIsMC41LTAuMywxLjEtMC41LDEuOGMtMC4yLDAuNi0wLjUsMS4zLTAuNywxLjljLTAuMywwLjctMC43LDEuMy0xLDIuMWMtMC40LDAuNy0wLjksMS40LTEuNCwyLjEgYy0wLjUsMC43LTEuMSwxLjQtMS43LDJjLTEuMiwxLjMtMi43LDIuNS00LjQsMy42Yy0xLjcsMS0zLjYsMS44LTUuNSwyLjRjLTIsMC41LTQsMC43LTYuMiwwLjdjLTEuOS0wLjEtNC4xLTAuNC02LTEuMSBjLTEuOS0wLjctMy43LTEuNS01LjItMi42Yy0xLjUtMS4xLTIuOS0yLjMtNC0zLjdjLTAuNi0wLjYtMS0xLjQtMS41LTJjLTAuNC0wLjctMC44LTEuNC0xLjItMmMtMC4zLTAuNy0wLjYtMS4zLTAuOC0yIGMtMC4yLTAuNi0wLjQtMS4yLTAuNi0xLjhjLTAuMS0wLjYtMC4zLTEuMS0wLjQtMS42Yy0wLjEtMC41LTAuMS0xLTAuMi0xLjRjLTAuMS0wLjktMC4xLTEuNS0wLjEtMmMwLTAuNSwwLTAuNywwLTAuNyBzMCwwLjIsMC4xLDAuN2MwLjEsMC41LDAsMS4xLDAuMiwyYzAuMSwwLjQsMC4yLDAuOSwwLjMsMS40YzAuMSwwLjUsMC4zLDEsMC41LDEuNmMwLjIsMC42LDAuNCwxLjEsMC43LDEuOCBjMC4zLDAuNiwwLjYsMS4yLDAuOSwxLjljMC40LDAuNiwwLjgsMS4zLDEuMiwxLjljMC41LDAuNiwxLDEuMywxLjYsMS44YzEuMSwxLjIsMi41LDIuMyw0LDMuMmMxLjUsMC45LDMuMiwxLjYsNSwyLjEgYzEuOCwwLjUsMy42LDAuNiw1LjYsMC42YzEuOC0wLjEsMy43LTAuNCw1LjQtMWMxLjctMC42LDMuMy0xLjQsNC43LTIuNGMxLjQtMSwyLjYtMi4xLDMuNi0zLjNjMC41LTAuNiwwLjktMS4yLDEuMy0xLjggYzAuNC0wLjYsMC43LTEuMiwxLTEuOGMwLjMtMC42LDAuNi0xLjIsMC44LTEuOGMwLjItMC42LDAuNC0xLjEsMC41LTEuN2MwLjEtMC41LDAuMi0xLDAuMy0xLjVjMC4xLTAuNCwwLjEtMC44LDAuMS0xLjIgYzAtMC4yLDAtMC40LDAuMS0wLjVjMC0wLjIsMC0wLjQsMC0wLjVjMC0wLjMsMC0wLjYsMC0wLjhjMC0wLjUsMC0wLjcsMC0wLjdjMC0xLjEsMC45LTIsMi0yczIsMC45LDIsMkM2Miw0MCw2Miw0MC4xLDYyLDQwLjF6IiA+IDxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZVR5cGU9InhtbCIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIGZyb209IjAgNDAgNDAiIHRvPSItMzYwIDQwIDQwIiBkdXI9IjAuNnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPiA8L3BhdGg+IDwvc3ZnPg==)
center center no-repeat;
/* ... which is overwritten by the background of the iframe */
}
.obscure_spinner {
background-color: #ffffee;
padding: 6px;
}
.contains_embedded_attachments {
display: block;
overflow: hidden;
width: 100%; /* avoids extra scroll bar with .embedded_attachment */
margin: 0;
padding: 0;
}
.embedded_attachment {
height: 99vh; /* very hard to avoid an extra scroll bar otherwise! */
width: 100%;
resize: both;
overflow: scroll;
color: red; /* for failure messages */
}
/*
===============================================================================
Tree view
===============================================================================
See https://www.w3schools.com/howto/howto_js_treeview.asp
*/
/* Remove default bullets */
.tree, .tree ul {
list-style-type: none;
}
/* Remove margins and padding from the parent ul */
.tree {
margin: 0;
padding: 0;
}
/* Reduce the indent; see https://stackoverflow.com/questions/11445453/css-set-li-indent */
.tree ul, .tree li {
padding-left: 10px;
}
.tree li {
/* All our li elements are clickable. */
cursor: pointer;
}
/* Style the headings */
.tree li span {
font-weight: bold;
}
/* Style the caret/arrow */
.caret {
cursor: pointer;
user-select: none; /* Prevent text selection */
}
/* Create the caret/arrow with a unicode, and style it */
.caret::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
}
/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
transform: rotate(90deg);
}
/* Hide the nested list */
.nested {
display: none;
}
/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
display: block;
}
.tree_chosen {
color: red;
}