Adapt design from metrics-web.

src/main/webapp/css/style.css

+
+/* Please keep this file [✓] UTF-8 encoded */
+
+
+/* undo FOUC-fixing inline-stylesheets */
+body {
+    background-image:none !important;
+}
+body #wrapper {
+    display:initial !important;
+}
+
+
+
+/* Page header - override bootstrap defaults */
+.page-header {
+    padding: 0 2.5em 2.5em 2.5em;
+    margin: 0;
+    border-bottom: 0;
+    color:#fff;
+    position:relative;
+    
+    /* gradient background */
+    background: #8d56A8; /* Old browsers */
+    background: -moz-linear-gradient(top,  #8d56A8 0%, #6d3688 100%); /* FF3.6-15 */
+    background: -webkit-linear-gradient(top,  #8d56A8 0%, #6d3688 100%); /* Chrome10-25,Safari5.1-6 */
+    background: linear-gradient(to bottom,  #8d56A8 0%, #6d3688 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8d56a8', endColorstr='#6d3688',GradientType=0 ); /* IE6-9 */
+    
+}
+.page-header img {
+    vertical-align:text-bottom;
+    max-width:40%;
+    height:auto;
+}
+.page-header img#collector-wordmark {
+    position:relative;
+    top:-3px;
+}
+.page-header div {
+    text-align:right;
+    position:absolute;
+    right:2.5em;
+    bottom:1.9em;
+    max-width:300px;
+}
+.page-header div p {
+    line-height:21px;
+}
+@media (max-width: 1199.99999px) {
+    .page-header div {
+        max-width:270px;
+    }
+    .page-header div p {
+        font-size:14px;
+        line-height:18px;
+    }
+}
+@media (max-width: 767.99999px) {
+    .page-header {
+        display:none;
+    }
+    .navbar-header .navbar-brand.visible-xs {
+        display:block !important;
+    }
+    .navbar.hidden-xs {
+        display:none;
+    }
+}
+@media (max-height:800px) {
+    /* make page header smaller on e.g. 10 inch notebooks etc. */
+    .page-header {
+        padding: 0em 2.0em 2.0em 2.0em;
+    }
+    .page-header img#collector-logo {
+        height:75px;
+        width:auto !important;
+    }
+    
+    .page-header div {
+        bottom: 0.9em;
+        max-width: 400px;
+    }
+    .page-header div p {
+        font-size: 14px;
+        line-height: 16px;
+    }
+    .navbar-secondary .navbar-nav>li>a {
+        margin-bottom: 0px !important;
+    }
+}
+@media (max-height:800px) and (max-width: 1199.99999px) {
+    .page-header div {
+        max-width:330px;
+    }
+    .page-header div p {
+        font-size:12px;
+        line-height:14px;
+    }
+}
+
+
+
+
+/* general font and color */
+body {
+    background-color: #fff;
+    color: black;
+    font-family: 'Source Sans Pro', sans-serif;
+    font-size: 16px;
+    line-height: 24px;
+}
+@media (max-width: 991.99999px) {
+    body {
+        font-size: 14px;
+        line-height: 21px;
+    }
+}
+
+
+/* primary button color */
+.btn-primary {
+    background-color: #8d56A8;
+    border-color: #7d4698;
+}
+.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
+    background-color: #7d4698;
+    border-color: #6d3688;
+}
+
+
+/* format secondary navigation */
+@media (min-width: 768px) {
+    .navbar-secondary {
+        margin-bottom: 0;
+        border: 0;
+        background-color: #8d56A8;
+        border-radius:0;
+    }
+    .navbar-secondary .navbar-nav {
+        margin-right:0;
+    }
+    .navbar-secondary .navbar-nav>li>a {
+        font-size:14px;
+        color:white;
+        padding: 5px 10px;
+        margin: 10px 5px;
+    }
+    .navbar-secondary .navbar-nav>li.active>a, 
+    .navbar-secondary .navbar-nav>li.active>a:hover, 
+    .navbar-secondary .navbar-nav>li>a:hover {
+        background-color: rgba(0,0,0,0.2) !important;
+        color:white;
+    }
+}
+.navbar-secondary .section-header {
+    padding:3px 14px;
+    text-transform:uppercase;
+    font-size:12px;
+    background-color: #aaa;
+    color:white;
+    margin-top:20px;
+}
+.navbar-secondary .section-header:first-of-type {
+    margin-top:0px;
+}
+
+
+/* images */
+img {
+    max-width:100%;
+    height:auto;
+}
+
+
+/* breadcrumb navigation */
+.breadcrumb {
+    padding: 0;
+    margin-bottom: 10px;
+    margin-top:0;
+    background-color: transparent;
+    border-radius: 0;
+    font-size:14px;
+}
+.breadcrumb > li + li:before {
+    content: '\00BB';
+    color:#888;
+}
+
+
+/* headlines */
+h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+    color: #7d4698;
+    font-weight:bold;
+}
+h1, .h1 { font-size: 36px; }
+h2, .h2 { font-size: 26px; }
+h3, .h3 { font-size: 18px; }
+h4, .h4 { font-size: 12px; }
+h5, .h5 { font-size:  8px; }
+h6, .h6 { font-size:  6px; }
+
+
+
+/* link color */
+a, a:hover, a:active, a:focus, a:visited {
+    color:#68b030;
+}
+
+
+/* main menu hover color */
+.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
+    background-color: #e8e8e8;
+}
+
+
+/* format blockquotes */
+blockquote {
+  background: #fafafa;
+  color: #333;
+  margin: 1.8em 12px .8em 0;
+  padding: 0.5em 12px 1em 12px;
+  border-left: 12px solid #cdcdcd;
+  font-style:italic;
+}
+blockquote:before {
+  content: '\201C';
+  color: #cdcdcd;
+  font-size: 5em;
+  line-height: 0.2em;
+  display:block;
+  position:relative;
+  top:6px;
+}
+
+
+
+/* logo size */
+.navbar-header {
+    background-image: url(../images/collector-logo.png);
+    background-position:left center;
+    background-repeat:no-repeat;
+    background-size:contain;
+}
+.navbar-brand {
+    padding-left:50px;
+}
+.navbar-brand img {
+    height:20px;
+    width:auto;
+}
+
+
+/* back to top button */
+body .topButton {
+    background-color: #68b030;
+    position:fixed;
+    z-index:1;
+    bottom:1em;
+    right:1em;
+}
+.topButton a, .topButton a:hover {
+    display:block;
+    padding:.7em 1em 1em 1em;
+    color:white;
+    font-weight:bold;
+    text-decoration:none;
+}
+
+
+/* add a no-padding-for-columns class */
+.no-gutter > [class*='col-'] {
+    padding-right:0;
+    padding-left:0;
+}
+
+
+
+/* page footer */
+#footer {
+    margin-top:2em;
+    padding-top:2em;
+    padding-bottom:2em;
+    background-color: #f5f5f5;
+    color:#999;
+    border-top:1px solid #ccc;
+    
+}
+#footer .pull-right a {
+    margin-left:2em;
+}
+#footer .pull-right a:first-of-type {
+    margin-left:0;
+}
+#footer .no-gutter {
+    margin-bottom:1em;
+}
+
+
+
+/* mobile navbar colors */
+.navbar-default .navbar-toggle .icon-bar {
+    background-color:#fff;
+}
+.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
+    background-color: #9d66b8;
+}
+@media (max-width: 767.99999px) {
+    .navbar-header {
+        background-color: #7d4698;
+    }
+}
+
+
+/* align mobile submenu */
+@media (max-width: 767.99999px) {
+    .navbar-nav .dropdown-menu {
+        margin-left:1em;
+    }
+}
+
+
+/* format callouts */
+.bs-callout {
+    padding: 20px 20px 15px 20px;
+    margin: 20px 0;
+    border: 1px solid #eee;
+    border-left-width: 5px;
+    border-radius: 3px;
+    border-left-color: #7d4698;
+}
+.bs-callout h1, .bs-callout h2, .bs-callout h3, .bs-callout h4, .bs-callout h5, .bs-callout h6, 
+.bs-callout .h1, .bs-callout .h2, .bs-callout .h3, .bs-callout .h4, .bs-callout .h5, .bs-callout .h6 {
+    margin-top:0;
+}
+.bs-callout-default {
+    border-left-color: #777;
+}
+.bs-callout-default h2, .bs-callout-default h3, .bs-callout-default h4 {
+    color: #777;
+}
+.bs-callout-primary {
+    border-left-color: #428bca;
+}
+.bs-callout-primary h2, .bs-callout-primary h3, .bs-callout-primary h4 {
+    color: #428bca;
+}
+.bs-callout-success {
+    border-left-color: #5cb85c;
+}
+.bs-callout-success h2, .bs-callout-success h3, .bs-callout-success h4 {
+    color: #5cb85c;
+}
+.bs-callout-danger {
+    border-left-color: #d9534f;
+}
+.bs-callout-danger h2, .bs-callout-danger h3, .bs-callout-danger h4 {
+    color: #d9534f;
+}
+.bs-callout-warning {
+    border-left-color: #f0ad4e;
+}
+.bs-callout-warning h2, .bs-callout-warning h3, .bs-callout-warning h4 {
+    color: #f0ad4e;
+}
+.bs-callout-info {
+    border-left-color: #5bc0de;
+}
+.bs-callout-info h2, .bs-callout-info h3, .bs-callout-info h4 {
+    color: #5bc0de;
+}
+
+
+/* home dashboard page */
+.dashboard {
+    padding:3em 5em 0 5em;
+}
+.dashboard .col-sm-4 {
+    margin-bottom:2em;
+    text-align:center;
+}
+.dashboard a, .dashboard a:hover, .dashboard a:focus, .dashboard a:active {
+    text-decoration:none;
+    display:block;
+    border:1px solid #ccc;
+    border-radius:5px;
+    padding:2em 2em 1em 2em;
+    color:#999;
+}
+.dashboard h2, .dashboard p {
+    color:#999;
+}
+.dashboard a[href], .dashboard a[href]:hover, .dashboard a[href]:focus, .dashboard a[href]:active, .dashboard a[href] h2 {
+    color:#68b030;
+}
+.dashboard a[href]:hover {
+    background-color: #F8f8f8;
+}
+/* fixed box height by screen size: */
+@media (min-width: 1200px) { .dashboard a, .dashboard a:hover, .dashboard a:focus, .dashboard a:active { min-height:260px; } }
+@media (min-width: 992px) and (max-width: 1199.99999px) { .dashboard a, .dashboard a:hover, .dashboard a:focus, .dashboard a:active { min-height:290px; } }
+@media (min-width: 768px) and (max-width: 991.99999px) { .dashboard a, .dashboard a:hover, .dashboard a:focus, .dashboard a:active { min-height:280px; } }
+.dashboard a[href] p {
+    color:black;
+}
+@media (max-width: 767.99999px) {
+    .dashboard {
+        padding:1em;
+    }
+    .dashboard .row {
+        margin-right:-13px; /* 15px minus border */
+    }
+    .dashboard .col-sm-4 {
+        margin-bottom:1em;
+    }
+    .dashboard a, .dashboard a:hover, .dashboard a:focus, .dashboard a:active {
+        text-align:left;
+        padding:1em 1em 0 1em;
+    }
+    .dashboard p {
+        padding-left:2.1em;
+    }
+    .dashboard .fa-4x, .dashboard h2 {
+        font-size:20px;
+        margin:0;
+        display:inline-block;
+    }
+}
+
+
+
+/* table of contents side box */
+div.list-group {
+    margin-top:3em;
+}
+div.list-group a.list-group-item {
+    color:#68b030 !important;
+}
+
+
+
+/* external links */
+a[target="_blank"]:before {
+    content: " \f08e";
+    font-family: 'FontAwesome';
+    font-size:14px;
+    position:relative;
+    top:1px;
+    margin-right:3px;
+}
+
+
+
+/* news page */
+.news .links {
+    position:relative;
+    top:-10px;
+}
+.news .links a {
+    margin-right:1em;
+}
+.news h3 .label {
+    font-size: 12px;
+    position: relative;
+    top: -2px;
+    margin-left: 5px;
+}
+
+
+/* faq */
+.faq h2 {
+    font-size:24px;
+}
+.faq p {
+    margin-bottom:2em;
+}
+
+
+
+/* research download tables */
+td, th {
+    padding-left:0 !important;
+}
+td a {
+    padding-right:1em;
+}
+th.title { width:34%; }
+th.author { width:34%; }
+th.date { width:16%; }
+th.download { width:16%; }
+
+
+/* tools table */
+th.title-tools { width:15%; }
+th.description { width:70%; }
+th.link { width:15%; }
+
+
+
+/* horizontal line divider */
+hr {
+    margin-top:50px;
+    border-top: 1px solid #cdcdcd;
+}
+
+
+/* community and featured badge */
+.community, .featured {
+    position:relative;
+    overflow:hidden;
+}
+.community:before, .featured:before {
+    content: "Community";
+    width:150px;
+    display:block;
+    position:absolute;
+    right:-2.7em;
+    top:1.8em;
+    background-color: #5cb85c;
+    font-size: 90%;
+    padding: .2em 2.6em .3em;
+    font-weight: 700;
+    line-height: 1;
+    color: #fff;
+    text-align: center;
+    vertical-align: baseline;
+    -moz-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    -o-transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    transform: rotate(45deg);
+}
+.featured:before {
+    content: "Featured";
+    background-color: #7d4698;
+}
+@media (max-width: 991.99999px) {
+    .community:before, .featured:before {
+        width:130px;
+    }
+}
+
+
+@media only screen and (max-width: 767.99999px) {
+    
+    /* Force table to not be like tables anymore */
+	.responsive-table table, 
+	.responsive-table thead, 
+	.responsive-table tbody, 
+	.responsive-table th, 
+	.responsive-table td, 
+	.responsive-table tr { 
+		display: block; 
+	}
+ 
+	/* Hide table headers (but not display: none;, for accessibility) */
+	.responsive-table thead tr { 
+		position: absolute;
+		top: -9999px;
+		left: -9999px;
+	}
+ 
+	.responsive-table tr { 
+	    border: 1px solid #ccc; 
+        margin-bottom:1em;
+    }
+ 
+	.responsive-table td { 
+		/* Behave  like a "row" */
+		border: none;
+		border-bottom: 1px solid #eee; 
+		position: relative;
+		padding-left: 50% !important; 
+		white-space: normal;
+		text-align:left;
+	}
+ 
+	.responsive-table td:before { 
+		/* Now like a table header */
+		position: absolute;
+		/* Top/left values mimic padding */
+		top: 6px;
+		left: 6px;
+		width: 45%; 
+		padding-right: 10px; 
+		white-space: nowrap;
+		text-align:left;
+		font-weight: bold;
+	}
+ 
+	/*
+	Label the data
+	*/
+	.responsive-table td:before { content: attr(data-title); }
+}
+
+
+
+/* tools and sources */
+.tools {
+    margin-top:2em;
+}
+.tools a:hover, .tools a:active, .tools a:focus {
+    text-decoration:none;
+}
+.tools a:before {
+    content:'';
+    display:none;
+}
+.tools p {
+    color:black;
+    line-height:21px;
+}
+.tools [class*='col-'] {
+    text-align:center;
+    margin-bottom:2em;
+}
+.tools .logo {
+    width:150px;
+    height:150px;
+    margin:0 auto;
+    background-size:contain;
+    background-position:center center;
+    background-repeat:no-repeat;
+}
+.tools-xs .logo {
+    width:100px;
+    height:100px;
+}
+.tools-xs p {
+    font-size:14px;
+    line-height:18px;
+}
+
+@media (max-width: 399.99999px) {
+    .tools [class*='col-'] {
+        width:100%;
+        float:none;
+    }
+}
+
+
+
+/* tooltips */
+.tor-tooltip {
+    position:relative;
+    color:#68b030;
+    border-bottom: 1px dotted #68b030;
+}
+.tor-tooltip-content {
+    position:absolute;
+    z-index:1;
+    color:white;
+    background-color: rgba(0,0,0,0.8);
+    padding:10px 14px;
+    width:300px;
+    left:-9999px;
+    top:30px;
+    opacity:0;
+    transition: opacity .5s ease-in-out;
+    -moz-transition: opacity .5s ease-in-out;
+    -webkit-transition: opacity .5s ease-in-out;
+    border-radius:3px;
+    line-height:20px;
+}
+.tor-tooltip-content:after {
+	bottom: 100%;
+	left: 50%;
+	border: solid transparent;
+	content: " ";
+	height: 0;
+	width: 0;
+	position: absolute;
+	pointer-events: none;
+	border-bottom-color: rgba(0,0,0,0.8);
+	border-width: 6px;
+	margin-left: -6px;
+}
+.tor-tooltip:hover .tor-tooltip-content, .tor-tooltip:focus .tor-tooltip-content {
+    opacity:1;
+    left:-130px;
+}
+/* reposition on mobile devices: */
+@media (max-width: 767.99999px) {
+    .tor-tooltip {
+        position:static;
+    }
+    .tor-tooltip-content {
+        margin:0 auto;
+        width:90%;
+        max-width:500px;
+    }
+
+    .tor-tooltip:hover .tor-tooltip-content, .tor-tooltip:focus .tor-tooltip-content {
+        left:1em;
+        right:1em;
+        top:inherit;
+        margin-top:30px;
+    }    
+    .tor-tooltip-content:after {
+        display:none;
+    }
+}
+
+
+/* data page */
+
+/* tabs */
+ul.nav-tabs {
+    margin-top:2em;
+    margin-bottom:1em;
+}
+ul.nav-tabs>li {
+    margin-top:10px;
+}
+.nav-tabs>li:not(.active)>a {
+    border-color: #eee #eee #ddd;
+}
+
+
+
+/* graphs */
+img.graph {
+    width:100%;
+}
+
+
+
+/* forms and fields */
+form {
+    margin-top:4em;
+}
+form label {
+    width:100%;
+    max-width:100px;
+}
+form input, form select {
+    width:100%;
+    max-width:200px;
+}
+form input[type=checkbox], form input[type=radio] {
+    width:20px;
+}
+label.checkbox-label, label.radio-label {
+    max-width: initial;
+    width: auto;
+    font-weight: normal;
+    margin-right: 20px;
+}
+
+
+
+
+/* Show submenu on "hover", desktop: */
+@media (min-width: 768px) {
+    .dropdown:hover .dropdown-menu {
+        display: block;
+        margin-top: 0;
+    }
+}
+
+/* hide submenus and carets on mobile version, but keep the language submenu: */
+@media (max-width: 767.99999px) {
+    .navbar-nav :not(.dropdown-language) .dropdown-menu {
+        display:none;
+    }
+    .navbar-nav :not(.dropdown-language) .dropdown-toggle .caret {
+        display:none;
+    }
+}
+
+
+/* Anchor-Links for Headlines */
+.anchor {
+    opacity:0;
+    text-decoration:none;
+}
+*:hover > .anchor {
+    opacity:1;
+    color:#78c040;
+}
+*:hover > .anchor:hover {
+    text-decoration:none;
+    color:#68b030;
+}
+
+
+
+/* No JavaScript fallbacks */
+
+
+/* same for mobile - also for browsers with script enabled, so no ".noscript" here */
+#navbar-toggle-checkbox {
+    display: none;
+}
+body.noscript #navbar-toggle-checkbox:checked ~ .collapse {
+    display: block;
+}
+
+
+/* open LANGUAGE submenu in non-js mobile menu */
+
+@media (max-width: 767.99999px) {
+    body.noscript .navbar-nav .dropdown-language .dropdown-menu {
+        position: static;
+        float: none;
+        width: auto;
+        margin-top: 0;
+        background-color: transparent;
+        border: 0;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+        display: block !important;
+    }
+}
+
+
+
+/* CollecTor-specific Styles */
+
+.filelist hr { margin:10px 0; }
+.filelist table { width:100%; }
+.filelist td { padding:5px 10px; } 
+.filelist table tr th:first-of-type { width:60%; }
+.filelist table tr td { text-align:left; }
+
+.btn-primary:visited { color:white; }
+
+.navbar {
+    min-height:25px;
+}
+.navbar-header {
+    background-image: url(../images/collector-logo.png);
+    background-position: 9px 9px;
+    background-repeat: no-repeat;
+    background-size: 35px;
+}
+.page-header {
+    padding: 0 2.5em 2.0em 2.5em;
+}
+a .fa.fa-chevron-right {
+    font-size:70%;
+}
+th.thDescriptors {
+    width:140px;
+}
+
+tr.tableHeadline td {
+    color:#333;
+    padding-top:2em !important;
+}
+.breadcrumb {
+    margin-top:1em;
+}
+