Commit 22dd94b6 authored by Gradl, Tobias's avatar Gradl, Tobias
Browse files

Merge branch 'styleguide' into 'master'

Styleguide

See merge request !3
parents 87d3a2a7 cfc5a7e4
/*!
* 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;
width: 90%; }
.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: 12px;
margin-left: 0; }
.sidebar .sidebar-block ul li {
padding-bottom: 6px; }
.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; }
.nav-tabs .nav-link {
font-size: 110%; }
.tab-pane {
border-right: 1px solid #dee2e6;
border-bottom: 1px solid #dee2e6;
border-left: 1px solid #dee2e6;
padding: 12px; }
.wordcloud {
text-align: center; }
#search-loading-indicator {
position: absolute;
right: 0; }
#search-results-container #search-results .tab-pane .search-result-tab-heading {
font-style: italic; }
#search-results-container #search-results .tab-pane .search-results-item {
margin: 12px 12px 24px 12px; }
#search-results-container #search-results .tab-pane .search-results-item .search-results-image {
position: relative;
padding: 5px;
border: 1px solid #dee2e6;
margin-top: 6px;
margin-right: 24px;
-webkit-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
-webkit-border-radius: 0.25rem;
border-radius: 0.25rem;
/* useful if you don't want a bg color from leaking outside the border: */
-webkit-background-clip: padding-box;
background-clip: padding-box;
background: url("../../img/page_icon_faded.png") center 20px no-repeat;
height: 145px;
width: 145px; }
#search-results-container #search-results .tab-pane .search-results-item .search-results-image .search-result-image-tmb {
height: 135px;
width: 135px; }
#search-results-container #search-results .tab-pane .search-results-item .search-results-image .search-result-image-tmb,
#search-results-container #search-results .tab-pane .search-results-item .search-results-image .item-image {
background-repeat: no-repeat;
background-position: center center;
background-size: cover; }
#search-results-container #search-results .tab-pane .search-results-item .search-results-image .no-preview-overlay {
position: absolute;
top: 60px;
bottom: 25px;
left: 0px;
right: 0px;
border-top: 2px solid #494e7d;
border-bottom: 2px solid #494e7d;
background-color: #213365;
opacity: 0.8;
text-align: center;
vertical-align: middle;
padding: 8px 5px;
color: white;
font-style: italic;
z-index: 100; }
#search-results-container #search-results .tab-pane .search-results-item .search-results-resource-item .search-result-score {
float: right;
font-size: 90%; }
#search-results-container #search-results .tab-pane .search-results-item .search-results-resource-item .search-result-datasource {
margin-bottom: 0; }
#search-results-container #search-results .tab-pane .search-results-item .search-results-resource-item .search-result-title {
margin-bottom: 8px; }
#search-results-container #search-results .tab-pane .search-results-item .search-results-resource-item ul.search-result-links {
list-style: none;
padding: 0;
margin-bottom: 8px; }
#search-results-container #search-results .tab-pane .search-results-item .search-results-resource-item ul.search-result-links li {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word; }
#search-results-container #search-results .tab-pane .search-results-item .search-results-resource-item .search-result-objects > span {
display: inline-block;
padding: 0 0.25rem 0.25rem 0.25rem;
cursor: pointer; }
#search-results-container #search-results .tab-pane .search-results-item .search-results-resource-item .search-result-objects > span i.fa {
margin-right: 5px; }
#search-results-container #search-results .tab-pane .search-results-item .search-results-resource-item .search-result-panel {
border: 1px solid #dee2e6;
margin-top: 6px;
margin-bottom: 12px;
padding-left: 12px;
padding-right: 12px;
overflow-wrap: break-word;
word-wrap: break-word; }
#search-results-container #search-results .tab-pane .search-results-item .search-results-resource-item .search-result-panel .btn {
padding-left: 0; }
#search-results-container #search-results .tab-pane .search-results-item .search-results-resource-item .search-result-panel .collapse ul {
padding-left: 1.25rem;
border-bottom: 0; }
#search-results-container #search-results .tab-pane .result-collection {
margin-bottom: 24px; }
#search-available-collections {
margin-bottom: 0; }
#search-available-collections li {
display: block; }
#search-available-collections li::before {
display: none; }
.slider {
width: 95%; }
.slider > .dragger {
background: #7a80b2;
background: -webkit-linear-gradient(top, #9b9fc4, #494e7d);
background: -moz-linear-gradient(top, #9b9fc4, #494e7d);
background: linear-gradient(top, #9b9fc4, #494e7d);
-webkit-box-shadow: inset 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
box-shadow: inset 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid #213365;
width: 16px;
height: 16px; }
.slider > .dragger:hover {
background: -webkit-linear-gradient(top, #dbdcea, #7a80b2); }
.slider > .track,
.slider > .highlight-track {
background: #ccc;
background: -webkit-linear-gradient(top, #bbb, #ddd);
background: -moz-linear-gradient(top, #bbb, #ddd);
background: linear-gradient(top, #bbb, #ddd);
-webkit-box-shadow: inset 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
box-shadow: inset 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
-webkit-border-radius: 0.25rem;
-moz-border-radius: 0.25rem;
border-radius: 0.25rem;
border: 1px solid #aaa;
height: 6px; }
.slider > .highlight-track {
background: #7a80b2;
background: -webkit-linear-gradient(top, #9b9fc4, #494e7d);
background: -moz-linear-gradient(top, #9b9fc4, #494e7d);
background: linear-gradient(top, #9b9fc4, #494e7d);
border-color: #213365; }
table.table.state-table {
border-collapse: separate;
border-spacing: 0 1px;
width: 100%;
/* Specifics for inner (data) lists */ }
table.table.state-table.state-table-navigatable tbody tr.state-row-default.active, table.table.state-table.state-table-navigatable tbody tr.state-row-default:hover, table.table.state-table.state-table-navigatable tbody tr.state-row-default.group, table.table.state-table.state-table-selectable tbody tr.state-row-default.active, table.table.state-table.state-table-selectable tbody tr.state-row-default:hover, table.table.state-table.state-table-selectable tbody tr.state-row-default.group {
background-color: #d6d6d6; }
table.table.state-table.state-table-navigatable tbody tr.state-row-ok.active, table.table.state-table.state-table-navigatable tbody tr.state-row-ok:hover, table.table.state-table.state-table-navigatable tbody tr.state-row-ok.group, table.table.state-table.state-table-selectable tbody tr.state-row-ok.active, table.table.state-table.state-table-selectable tbody tr.state-row-ok:hover, table.table.state-table.state-table-selectable tbody tr.state-row-ok.group {
background-color: #aad57d; }
table.table.state-table.state-table-navigatable tbody tr.state-row-info.active, table.table.state-table.state-table-navigatable tbody tr.state-row-info:hover, table.table.state-table.state-table-navigatable tbody tr.state-row-info.group, table.table.state-table.state-table-selectable tbody tr.state-row-info.active, table.table.state-table.state-table-selectable tbody tr.state-row-info:hover, table.table.state-table.state-table-selectable tbody tr.state-row-info.group {
background-color: #a7e9f4; }
table.table.state-table.state-table-navigatable tbody tr.state-row-warning.active, table.table.state-table.state-table-navigatable tbody tr.state-row-warning:hover, table.table.state-table.state-table-navigatable tbody tr.state-row-warning.group, table.table.state-table.state-table-selectable tbody tr.state-row-warning.active, table.table.state-table.state-table-selectable tbody tr.state-row-warning:hover, table.table.state-table.state-table-selectable tbody tr.state-row-warning.group {
background-color: #fff4d3; }
table.table.state-table.state-table-navigatable tbody tr.state-row-danger.active, table.table.state-table.state-table-navigatable tbody tr.state-row-danger:hover, table.table.state-table.state-table-navigatable tbody tr.state-row-danger.group, table.table.state-table.state-table-navigatable tbody tr.state-row-error.active, table.table.state-table.state-table-navigatable tbody tr.state-row-error:hover, table.table.state-table.state-table-navigatable tbody tr.state-row-error.group, table.table.state-table.state-table-selectable tbody tr.state-row-danger.active, table.table.state-table.state-table-selectable tbody tr.state-row-danger:hover, table.table.state-table.state-table-selectable tbody tr.state-row-danger.group, table.table.state-table.state-table-selectable tbody tr.state-row-error.active, table.table.state-table.state-table-selectable tbody tr.state-row-error:hover, table.table.state-table.state-table-selectable tbody tr.state-row-error.group {
background-color: #d57d7f; }
table.table.state-table.state-table-navigatable tbody tr:hover, table.table.state-table.state-table-selectable tbody tr:hover {
cursor: pointer; }
table.table.state-table.state-table-navigatable tbody tr.active td:last-child:before, table.table.state-table.state-table-navigatable tbody tr:hover td:last-child:before {
content: "\f0c1";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
position: absolute;
right: 1rem;
color: #707070; }
table.table.state-table tbody tr.state-row-default th, table.table.state-table tbody tr.state-row-default td {
border-color: #707070; }
table.table.state-table tbody tr.state-row-ok th, table.table.state-table tbody tr.state-row-ok td {
border-color: #446521; }
table.table.state-table tbody tr.state-row-info th, table.table.state-table tbody tr.state-row-info td {
border-color: #17a2b8; }
table.table.state-table tbody tr.state-row-warning th, table.table.state-table tbody tr.state-row-warning td {
border-color: #ffc107; }
table.table.state-table tbody tr.state-row-danger th, table.table.state-table tbody tr.state-row-danger td, table.table.state-table tbody tr.state-row-error th, table.table.state-table tbody tr.state-row-error td {
border-color: #652122; }
table.table.state-table tbody tr th, table.table.state-table tbody tr td {
position: relative;
border-top: 1px solid;
border-bottom: 1px solid;
font-weight: normal;
vertical-align: middle; }
table.table.state-table tbody tr th a, table.table.state-table tbody tr td a {
border-bottom: none; }
table.table.state-table tbody tr th .btn, table.table.state-table tbody tr td .btn {
padding: 6px; }
table.table.state-table tbody tr th {
border-left: 6px solid;
text-align: center;
width: 8em;
padding: 5px; }
table.table.state-table tbody tr th.state-default i {
color: #707070; }
table.table.state-table tbody tr th.state-ok i {
color: #446521; }
table.table.state-table tbody tr th.state-info i {
color: #17a2b8; }
table.table.state-table tbody tr th.state-warning i {
color: #ffc107; }
table.table.state-table tbody tr th.state-danger i, table.table.state-table tbody tr th .state-error i {
color: #652122; }
table.table.state-table tbody tr td:last-child {
border-right-style: solid;
border-right-width: 1px; }
table.table.state-table tbody tr td.dataTables_empty {
border: 1px solid #707070;
padding: 10px;
text-align: center; }
table.table.state-table tbody tr.group th h2.group-heading, table.table.state-table tbody tr.group td h2.group-heading {
margin: 0 12px 0 12px; }
table.table.state-table ul.inner-state-list {
width: 100%;
position: relative;
list-style-type: none;
margin: 0;
padding: 0; }
table.table.state-table ul.inner-state-list li {
padding: 4px 5px;
/*border-bottom: 1px solid #EEE;*/ }
table.table.state-table ul.inner-state-list li .state-heading {
font-weight: bold; }
table.table.state-table ul.inner-state-list li .state-block-heading {
font-weight: bold;
font-size: 125%;
font-style: italic; }
.status-container li {
display: block !important; }
/*!
* 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
*
* Bootstrap Colorpicker - Bootstrap Colorpicker is a modular color picker plugin for Bootstrap 4.
* @package bootstrap-colorpicker
* @version v3.0.3
* @license MIT
* @link https://farbelous.github.io/bootstrap-colorpicker/
* @link https://github.com/farbelous/bootstrap-colorpicker.git
*/
.colorpicker {
position: relative;
display: none;
font-size: inherit;
color: inherit;
text-align: left;
list-style: none;
background-color: #ffffff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.2);
padding: .75rem .75rem;
width: 148px;
border-radius: 4px;
-webkit-box-sizing: content-box;
box-sizing: content-box; }
.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.colorpicker-disabled,
.colorpicker.colorpicker-disabled * {
cursor: default !important; }
.colorpicker-hue,
.colorpicker-alpha {
float: left;
width: 15px;
height: 100px;
margin-bottom: 4px;
margin-left: 4px;
cursor: row-resize;
}
.colorpicker div {
position: relative; }
.colorpicker-hue i,
.colorpicker-alpha i {
.colorpicker-popup {
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;
top: 100%;
left: 0;
z-index: 2500;
min-width: 130px;
padding: 4px;
float: left;
margin-top: 1px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
*zoom: 1;
}
z-index: 1060; }
.colorpicker-popup.colorpicker-bs-popover-content {
position: relative;
top: auto;
left: auto;
float: none;
margin: 0;
z-index: initial;
border: none;
padding: 0.25rem 0;
border-radius: 0;
background: none;
-webkit-box-shadow: none;
box-shadow: none; }
.colorpicker:before,
.colorpicker:after {
display: table;
line-height: 0;
content: "";
}
display: table;
clear: both;
line-height: 0; }
.colorpicker:after {
.colorpicker-clear {
clear: both;
}
display: block; }
.colorpicker:before {
position: absolute;
top: -7px;
left: 6px;
content: '';
display: inline-block;
border-left: 7px solid transparent;
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: '';
}
position: absolute;
top: -7px;
left: auto;
right: 6px; }
.colorpicker:after {
position: absolute;
top: -6px;
left: 7px;
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
content: '';
}
.colorpicker div {
position: relative;
}
position: absolute;
top: -6px;
left: auto;
right: 7px; }
.colorpicker.colorpicker-with-alpha {
min-width: 140px;
}
width: 170px; }
.colorpicker.colorpicker-with-alpha .colorpicker-alpha {
display: block; }
.colorpicker-saturation {
position: relative;
width: 126px;
height: 126px;
/* FF3.6+ */
/* Chrome,Safari4+ */
/* Chrome10+,Safari5.1+ */
/* Opera 11.10+ */
/* IE10+ */
background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black)), -webkit-gradient(linear, left top, right top, from(white), to(rgba(255, 255, 255, 0)));
background: linear-gradient(to bottom, transparent 0%, black 100%), linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);