Commit 06274928 authored by Gradl, Tobias's avatar Gradl, Tobias
Browse files

1245: Implement DARIAH-DE Styleguide

Task-Url: https://pm.winseda.de/issues/1245
parent 87d3a2a7
/*!
* Application customization based on DARIAH-DE Bootstrap styleguide
*/
/*!
* Table views
*/
.data-table-count {
margin-right: 12px; }
.data-table-filter input {
display: inline-block; }
.dataTable.table-hovering > tbody > tr {
position: relative; }
.dataTable.table-hovering > tbody > tr:hover > td {
background-color: #727299; }
.dataTable.table-hovering > tbody > tr:hover > td a {
color: #fff; }
.dataTable.table-hovering > tbody > tr:hover::after {
display: inline-block;
position: absolute;
right: 0.75rem;
top: 50%;
margin-top: -12px;
font-family: "Font Awesome 5 Free";
font-weight: 400;
content: "\f044";
color: #fff; }
.dataTable > tbody > tr.selected {
background-color: #494e7d;
color: #fff; }
.dataTable > tbody > tr.selected :hover {
background-color: #5c629d; }
.dataTable > tbody > tr.selected a, .dataTable > tbody > tr.selected .btn-inline, .dataTable > tbody > tr.selected .btn-link {
color: #fff; }
.dataTable > tbody > tr.selected a:hover, .dataTable > tbody > tr.selected a:focus, .dataTable > tbody > tr.selected .btn-inline:hover, .dataTable > tbody > tr.selected .btn-inline:focus, .dataTable > tbody > tr.selected .btn-link:hover, .dataTable > tbody > tr.selected .btn-link:focus {
color: #adb5bd; }
.dataTable > tbody > tr > td {
/* Fill to cell size: https://stackoverflow.com/a/15801081 */
overflow: hidden;
padding: 6px; }
.dataTable > tbody > tr > td a {
border-bottom: none;
display: block;
margin: -10em;
padding: 10em; }
.dataTable > tbody > tr > td.td-no-wrap {
white-space: nowrap; }
.dataTable > tbody > tr > td.td-center {
text-align: center; }
.dataTable > tbody > tr > td.td-image {
width: 90px; }
.dataTable > tbody > tr > td.td-image img {
margin: 0 auto;
border: 1px solid #dee2e6; }
.dataTable > tbody > tr > td.td-image .list-thumb-nopreview {
position: relative;
width: 100%;
height: 75px;
min-width: 100px;
background: url(../../img/page_icon_faded.png) top center no-repeat; }
.dataTable > tbody > tr > td.td-image .list-thumb-nopreview span {
position: absolute;
bottom: 2px;
right: 2px;
left: 2px;
background: rgba(73, 78, 125, 0.7);
border: 1px solid #494e7d;
border-radius: 0.2rem;
padding: 4px;
color: white;
margin: 0;
font-size: 0.875rem;
font-family: MuseoSansRounded, Arial, Helvetica, sans-serif; }
.dataTable > tbody > tr > td.td-image .list-thumb-nopreview a {
color: #fff; }
/*!
* Side navigation
*/
.sidebar-container {
position: sticky;
overflow: hidden;
top: 0;
z-index: 1020; }
.sidebar {
float: right;
margin-top: 10px;
overflow-y: auto;
max-width: 550px;
visibility: hidden; }
.sidebar .sidebar-block {
background-color: #fff;
border: 1px solid #dee2e6;
margin-bottom: 12px;
padding: 0 12px;
/*margin: -35px -20px 0 auto;*/
border-radius: 0.25rem;
/*padding-top: 10px;
padding-bottom: 10px;
margin-right: -20px;*/ }
.sidebar .sidebar-block label {
font-weight: 400;
display: flex; }
.sidebar .sidebar-block label input[type='checkbox'] {
margin-right: 6px; }
.sidebar .sidebar-block a {
border: none;
/*color: $body-color;*/
font-size: 90%; }
.sidebar .sidebar-block h2 {
margin: 12px 0; }
.sidebar .sidebar-block h3 {
margin-top: 12px;
margin-bottom: 6px;
margin-left: 0.5rem; }
.sidebar .sidebar-block ul {
padding-left: 1rem;
margin-left: 0; }
.sidebar .sidebar-block ul li {
display: inline-block; }
.sidebar .sidebar-block ul li::before {
display: inline-block;
width: 0;
height: 0;
margin-right: 3px;
margin-left: 8px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
content: " ";
border-left: 5px solid #333333; }
.sidebar .sidebar-block ul li.has-error a {
color: #652122;
font-weight: 700; }
.sidebar .sidebar-block ul li.has-error a:hover, .sidebar .sidebar-block ul li.has-error a:focus {
color: #2b0e0f; }
.modal .modal-dialog .modal-content .modal-header .modal-title {
margin: 0; }
.modal .modal-dialog .modal-content .modal-body {
/*.col-form-label {
text-align: right;
}*/ }
.modal .modal-dialog .modal-content .modal-body .form-check {
padding-top: calc(0.875rem - 2px);
padding-bottom: calc(0.875rem + 1px); }
/*!
* Typeahead
*/
.twitter-typeahead {
width: 100%; }
.twitter-typeahead .tt-hint {
color: #707070; }
.twitter-typeahead .tt-menu {
width: 100%;
background-color: #727299;
color: #fff;
border: 1px solid #ced4da;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px; }
.twitter-typeahead .tt-menu .tt-suggestion,
.twitter-typeahead .tt-menu .tt-empty-message {
padding: 12px 12px;
margin: 0; }
.twitter-typeahead .tt-menu .tt-suggestion:hover {
background-color: #494e7d;
cursor: pointer; }
/*!
* Bootstrap Colorpicker
* http://mjolnic.github.io/bootstrap-colorpicker/
*
* Originally written by (c) 2012 Stefan Petre
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0.txt
*
*/
.colorpicker-saturation {
float: left;
width: 100px;
height: 100px;
cursor: crosshair;
background-image: url("../../img/bootstrap-colorpicker/saturation.png");
}
.colorpicker-saturation i {
position: absolute;
top: 0;
left: 0;
display: block;
width: 5px;
height: 5px;
margin: -4px 0 0 -4px;
border: 1px solid #000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.colorpicker-saturation i b {
display: block;
width: 5px;
height: 5px;
border: 1px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.colorpicker-hue,
.colorpicker-alpha {
float: left;
width: 15px;
height: 100px;
margin-bottom: 4px;
margin-left: 4px;
cursor: row-resize;
}
.colorpicker-hue i,
.colorpicker-alpha i {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 1px;
margin-top: -1px;
background: #000;
border-top: 1px solid #fff;
}
.colorpicker-hue {
background-image: url("../../img/bootstrap-colorpicker/hue.png");
}
.colorpicker-alpha {
display: none;
background-image: url("../../img/bootstrap-colorpicker/alpha.png");
}
.colorpicker {
top: 0;
left: 0;
z-index: 2500;
min-width: 130px;
padding: 4px;
margin-top: 1px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
*zoom: 1;
}
.colorpicker:before,
.colorpicker:after {
display: table;
line-height: 0;
content: "";
}
.colorpicker:after {
clear: both;
}
.colorpicker:before {
position: absolute;
top: -7px;
left: 6px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.colorpicker:after {
position: absolute;
top: -6px;
left: 7px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
content: '';
}
.colorpicker div {
position: relative;
}
.colorpicker.colorpicker-with-alpha {
min-width: 140px;
}
.colorpicker.colorpicker-with-alpha .colorpicker-alpha {
display: block;
}
.colorpicker-color {
height: 10px;
margin-top: 5px;
clear: both;
background-image: url("../../img/bootstrap-colorpicker/alpha.png");
background-position: 0 100%;
}
.colorpicker-color div {
height: 10px;
}
.colorpicker-element .input-group-addon i,
.colorpicker-element .add-on i {
display: inline-block;
width: 16px;
height: 16px;
vertical-align: text-top;
cursor: pointer;
}
.colorpicker.colorpicker-inline {
position: relative;
z-index: auto;
display: inline-block;
float: none;
}
.colorpicker.colorpicker-horizontal {
width: 110px;
height: auto;
min-width: 110px;
}
.colorpicker.colorpicker-horizontal .colorpicker-saturation {
margin-bottom: 4px;
}
.colorpicker.colorpicker-horizontal .colorpicker-color {
width: 100px;
}
.colorpicker.colorpicker-horizontal .colorpicker-hue,
.colorpicker.colorpicker-horizontal .colorpicker-alpha {
float: left;
width: 100px;
height: 15px;
margin-bottom: 4px;
margin-left: 0;
cursor: col-resize;
}
.colorpicker.colorpicker-horizontal .colorpicker-hue i,
.colorpicker.colorpicker-horizontal .colorpicker-alpha i {
position: absolute;
top: 0;
left: 0;
display: block;
width: 1px;
height: 15px;
margin-top: 0;
background: #ffffff;
border: none;
}
.colorpicker.colorpicker-horizontal .colorpicker-hue {
background-image: url("../../img/bootstrap-colorpicker/hue-horizontal.png");
}
.colorpicker.colorpicker-horizontal .colorpicker-alpha {
background-image: url("../../img/bootstrap-colorpicker/alpha-horizontal.png");
}
.colorpicker.colorpicker-hidden {
display: none;
}
.colorpicker.colorpicker-visible {
display: block;
}
.colorpicker-inline.colorpicker-visible {
display: inline-block;
}
\ No newline at end of file
/*!
* Bootstrap Theme customizations: This file is intended to contain minor customizations of original bootstrap
* themes, for which the customization at http://getbootstrap.com/customize does not provide the options.
*/
@font-face {
font-family: 'MuseoSansRounded700';
src: url('../../fonts/museosansrounded_700_macroman/MuseoSansRounded-700-webfont.eot');
src: url('../../fonts/museosansrounded_700_macroman/MuseoSansRounded-700-webfont.eot?iefix') format('eot'),
url('../../fonts/museosansrounded_700_macroman/MuseoSansRounded-700-webfont.woff') format('woff'),
url('../../fonts/museosansrounded_700_macroman/MuseoSansRounded-700-webfont.ttf') format('truetype'),
url('../../fonts/museosansrounded_700_macroman/MuseoSansRounded-700-webfont.svg#webfontAhOK7zbK') format('svg');
font-weight: normal;
font-style: normal;
/** MWW-specific */
/*font-family: "Open Sans", sans-serif;
font-weight: normal;
font-style: normal;*/
}
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../../fonts/glyphicons-halflings/glyphicons-halflings-regular.eot');
src: url('../../fonts/glyphicons-halflings/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../../fonts/glyphicons-halflings/glyphicons-halflings-regular.woff2') format('woff2'), url('../../fonts/glyphicons-halflings/glyphicons-halflings-regular.woff') format('woff'), url('../../fonts/glyphicons-halflings/glyphicons-halflings-regular.ttf') format('truetype'), url('../../fonts/glyphicons-halflings/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
body {
background: transparent url("../../img/bg-paper-pattern.jpg") 50% 0 repeat;
}
/*!
* Grid System
*/
@media ( max-width : 767px) {
.xs-hidden { display: none; }
.xs-visible { display: block; }
}
@media ( min-width : 768px) {
.sm-hidden { display: none; }
.sm-visible { display: block; }
}
@media ( min-width : 992px) {
.md-hidden { display: none; }
.md-visible { display: block; }
}
@media ( min-width : 1200px) {
.lg-hidden { display: none; }
.lg-visible { display: block; }
}
/*!
* Navbar and Navs
*/
/*.navbar {
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}*/
.navbar-brand {
font-family: "MuseoSansRounded700";
font-size: 20px;
}
.nav.navbar-nav {
font-size: 12px;
}
.navbar {
margin-bottom: 0;
}
/*!
* Special for Generic Search
*/
.nav .nav > a {
font-size: 12px;
padding-bottom: 2px;
padding-left: 60px;
padding-top: 2px;
}
.nav .nav .nav > a {
font-size: 11.5px;
padding-bottom: 2px;
padding-left: 80px;
padding-top: 2px;
}
.sidebar .list-group-item:first-child,
.sidebar .list-group-item:last-child {
border-radius: 0;
}
.sidebar .list-group-item {
border: none;
border-left: 3px solid #fff;
/*padding: 3px 15px 3px 37px;*/
}
.sidebar .list-group-item.active {
background-image: none;
}
.sidebar a.list-group-item.active:hover,
.sidebar a.list-group-item.active:focus {
background-image: none;
background-color: #003564;
}
.sidebar a.list-group-item.childActive,
.sidebar a.list-group-item.childActive:hover,
.sidebar a.list-group-item.childActive:focus,
.sidebar a.list-group-item.active,
.sidebar a.list-group-item.active:hover,
.sidebar a.list-group-item.active:focus,
.sidebar div.childActive a.list-group-item,
.sidebar div.childActive a.list-group-item:hover,
.sidebar div.childActive a.list-group-item:focus {
border-color: #003564;
}
/*!
* Jumbotron
*/
.jumbotron {
background-color: #002547; /*<- This color is defined as @brand-primary in BS variables */
/*background-image: linear-gradient(180deg, #00549F 0%, #003564 100%);*/
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
margin-bottom: 0;
position:relative;
z-index: 999; /* Just below the navbar-static-top */
padding-top: 30px;
padding-bottom: 12px;
}
.jumbotron a {
color: #DDD;
}
/*!
* Breadcrumb
*/
.breadcrumb {
font-size: 12px;
}
/*!
* Footer
*/
.footer {
padding-top: 0.7em;
}
.footer ul li {
display: inline;
margin-left: 10px;
}
/* Tweak for bootbox dialogs, which are (as all modals) modified according to the bootstrap-modal.css
* some of the modifications have to be reverted however
*/
.modal.bootbox {
background: none;
border: none;
box-shadow: none;
width: 600px;
}
.label a {
color: inherit;
}
/*
* Submenus
*/
.dropdown-submenu {
position:relative;
}
.dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-6px;
margin-left:-1px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display:block;
}
.dropdown-submenu>a:after {
display:block;
content:" ";
float:right;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px 0 5px 5px;
border-left-color:#cccccc;
margin-top:5px;
margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
border-left-color:#ffffff;
}
.dropdown-submenu.pull-left {
float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left:-100%;
margin-left:10px;
-webkit-border-radius:6px 0 6px