Skip to content

GitLab

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

1264: Implement initial draft of MWW style 

Task-Url: https://pm.winseda.de/issues/1264
parent dcad8b9f
Hide whitespace changes
Inline Side-by-side
Showing with 944 additions and 0 deletions
css/bootstrap/application-colreg.css 0 → 100755
View file @ dd13f979
/*!
* Application customization based on DARIAH-DE Bootstrap styleguide
*/
#graph-container {
min-height: 300px;
border: 1px solid #dee2e6;
border-radius: 0.25rem; }
.version-panel {
overflow-y: scroll; }
.version-panel#dashboard-version-panel {
min-height: 365px;
border: 1px solid #dee2e6;
border-radius: 0.25rem; }
.version-panel#dashboard-version-panel .card {
margin-bottom: 0;
border-radius: 0;
border: none;
border-bottom: 1px solid #dee2e6; }
.version-panel#editor-version-panel {
position: fixed;
top: 0px;
bottom: 0px;
width: 0px;
right: -1px;
background-color: #035151;
color: #035151;
border-left: 1px solid #dee2e6;
-webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }
.version-panel#editor-version-panel .version-panel-header {
display: flex;
background-color: #035151;
padding: 16px 0; }
.version-panel#editor-version-panel .version-panel-header .close-sidebar {
color: #F9F9F9;
/*position: absolute;
top: $grid-gutter-width;
right: $grid-gutter-width;*/
cursor: pointer; }
.version-panel#editor-version-panel .version-panel-header h1 {
margin: 0 auto 0 0;
color: #F9F9F9; }
.version-panel#editor-version-panel .sidebar-wrapper {
padding: 0 16px 16px 16px; }
.version-panel .card {
margin-bottom: 6px; }
.version-panel .card .card-heading {
display: flex;
flex-direction: row;
margin-bottom: 12px;
margin-left: -45px; }
.version-panel .card .card-heading .card-icon {
padding: 0 12px;
vertical-align: middle;
width: 45px; }
.version-panel .card .card-heading .card-icon a {
border-bottom: none; }
.version-panel .card .card-heading .card-icon a:hover, .version-panel .card .card-heading .card-icon a:focus {
text-decoration: none; }
.version-panel .card .card-heading .card-title {
margin: 0 auto 0 0; }
.version-panel .card.version-deleted .card-text {
color: #dc3545; }
.version-panel .card.version-draft .card-text {
color: #ffc107; }
.version-panel .card.version-published .card-text {
color: #17a2b8; }
.version-panel .card .card-body {
padding-left: 48px; }
/*!
* 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: #A08246; }
.dataTable.table-hovering > tbody > tr:hover > td a {
color: #F9F9F9; }
.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: #F9F9F9; }
.dataTable > tbody > tr.selected {
background-color: #035151;
color: #F9F9F9; }
.dataTable > tbody > tr.selected :hover {
background-color: #058282; }
.dataTable > tbody > tr.selected a, .dataTable > tbody > tr.selected .btn-inline, .dataTable > tbody > tr.selected .btn-link {
color: #F9F9F9; }
.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(3, 81, 81, 0.7);
border: 1px solid #035151;
border-radius: 0.2rem;
padding: 4px;
color: white;
margin: 0;
font-size: 0.875rem;
font-family: "Open Sans", sans-serif; }
.dataTable > tbody > tr > td.td-image .list-thumb-nopreview a {
color: #F9F9F9; }
/*!
* 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: #F9F9F9;
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; }
/*!
* Typeahead
*/
.twitter-typeahead {
width: 100%; }
.twitter-typeahead .tt-hint {
color: #707070; }
.twitter-typeahead .tt-menu {
width: 100%;
background-color: #A08246;
color: #F9F9F9;
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: #035151;
cursor: pointer; }
.editor .editor-buttonbar {
padding: 12px 0;
background-color: #F9F9F9;
border-bottom: 1px solid #dee2e6;
text-align: right; }
.editor .editor-section {
border: 1px solid #dee2e6;
-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);
padding: 24px 12px;
margin-bottom: 24px; }
.editor .editor-section .editor-section-heading h2,
.editor .editor-section > h2 {
margin-top: 0;
text-align: center;
border-bottom: 1px solid #dee2e6;
padding-bottom: 12px; }
.editor .editor-section .col-form-label {
hyphens: auto;
hyphenate-limit-chars: auto 3;
hyphenate-limit-lines: 4;
-webkit-hyphens: auto;
-webkit-hyphenate-limit-chars: auto 3;
-webkit-hyphenate-limit-lines: 4;
-ms-hyphens: auto;
-ms-hyphenate-limit-chars: auto 3;
-ms-hyphenate-limit-lines: 4; }
@media (min-width: 876px) {
.editor .editor-section .col-form-label {
text-align: right; } }
.editor .editor-section .col-form-label.col-content-label {
text-align: left;
font-size: 1rem;
font-weight: 400; }
.editor .editor-section .col-form-label.linked-control-label a {
color: #707070;
border: none; }
.editor .editor-section .col-form-label.linked-control-label a:hover, .editor .editor-section .col-form-label.linked-control-label a:focus {
color: #4a4a4a; }
.editor .attribute-name-helper {
display: none;
position: absolute;
height: 0;
width: 0; }
.editor .collection-image-container,
.editor .agent-image-container {
float: left;
margin: 5px;
border: 1px solid #DDD;
padding: 5px;
position: relative;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 5px;
border-radius: 5px; }
.editor #collection-image-placeholder {
margin: 10px; }
.editor #btn-remove-collection-image {
padding-top: 10px; }
.editor #collection-image-hint {
font-style: italic;
font-weight: normal; }
.editor .container-error:first-of-type(label) {
color: #ffc107; }
.editor .alert {
margin-top: 0.5rem;
margin-bottom: 0.5rem; }
.editor .editor-hint {
display: none; }
.editor-table-container {
overflow-x: auto; }
.editor-table {
display: none;
margin-bottom: 0.5rem;
width: 100%; }
.editor-table.has-data {
display: block; }
.editor-table.has-data + .btn {
padding-top: 0; }
.editor-table tr td, .editor-table tr th {
border: 1px solid #A08246;
padding: 12px;
text-align: left; }
.editor-table tr td.nowrap, .editor-table tr th.nowrap {
white-space: nowrap; }
.editor-table tr td.explode, .editor-table tr th.explode {
width: 100%; }
.editor-table tr th {
/*padding-top: 8px;
padding-bottom: 8px;*/
background-color: #A08246;
color: white; }
.editor-table tr.list {
cursor: pointer; }
.editor-table tr.list.has-error {
background-color: #f1c2c7;
color: #721c24; }
.editor-table tr.list.has-error:hover {
background-color: #e3848e; }
.editor-table tr.list:hover {
background-color: #e0d3b8; }
.editor-table tr.list.row-open {
font-weight: 700; }
.editor-table tr.row-open {
background-color: #f0e9dc; }
.editor-table tr .btn-link {
padding-top: 0;
padding-bottom: 0; }
.editor-list {
list-style: none;
padding-left: 0;
margin-bottom: 0; }
.editor-list li + .editor-list-buttons .btn {
padding-top: 0; }
.editor-list li .editor-list-item,
.editor-list li .editor-list-buttons {
/*margin-left: -15px;
margin-right: -15px;
clear: both;*/ }
.editor-list li .editor-list-input {
/*padding-right: 2px;*/
width: 100%; }
.editor-list li .editor-list-item-buttons {
white-space: nowrap;
/*float: left !important;*/ }
.sidebar .sidebar-block ul {
padding-left: 1rem; }
.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: #dc3545;
font-weight: 700; }
.sidebar .sidebar-block ul li.has-error a:hover, .sidebar .sidebar-block ul li.has-error a:focus {
color: #a71d2a; }
css/bootstrap/application-dme.css 0 → 100755
View file @ dd13f979
@charset "UTF-8";
/*!
* 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: #A08246; }
.dataTable.table-hovering > tbody > tr:hover > td a {
color: #F9F9F9; }
.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: #F9F9F9; }
.dataTable > tbody > tr.selected {
background-color: #035151;
color: #F9F9F9; }
.dataTable > tbody > tr.selected :hover {
background-color: #058282; }
.dataTable > tbody > tr.selected a, .dataTable > tbody > tr.selected .btn-inline, .dataTable > tbody > tr.selected .btn-link {
color: #F9F9F9; }
.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(3, 81, 81, 0.7);
border: 1px solid #035151;
border-radius: 0.2rem;
padding: 4px;
color: white;
margin: 0;
font-size: 0.875rem;
font-family: "Open Sans", sans-serif; }
.dataTable > tbody > tr > td.td-image .list-thumb-nopreview a {
color: #F9F9F9; }
/*!
* 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: #F9F9F9;
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: #A08246;
color: #F9F9F9;
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: #035151;
cursor: pointer; }
/* Based on goldenlayout-light-theme.less
* @see: https://raw.githubusercontent.com/golden-layout/golden-layout/master/src/less/goldenlayout-light-theme.less
*
* TGR: Updated layout and colors to DARIAH style
*/
.lm_goldenlayout {
background: none; }
.lm_content {
background: #f8f9fa;
border: 1px solid #A08246; }
.lm_dragProxy .lm_content {
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); }
.lm_dropTargetIndicator {
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
outline: 1px dashed #035151; }
.lm_dropTargetIndicator .lm_inner {
background: #035151;
opacity: 0.1; }
.lm_splitter {
background: #035151;
opacity: 0.001;
transition: opacity 200ms ease; }
.lm_splitter:hover, .lm_splitter.lm_dragging {
background: #035151 !important;
opacity: 1; }
.lm_header {
height: 24px; }
.lm_header .lm_tab {
font-family: "Open Sans", sans-serif;
font-size: 1rem;
color: #707070;
text-transform: uppercase;
font-weight: normal;
height: 21px !important;
background: #dee2e6;
margin-right: 2px;
padding-bottom: 4px;
border: 1px solid #A08246;
border-bottom: none; }
.lm_header .lm_tab .lm_title {
padding-top: 1px; }
.lm_header .lm_tab .lm_close_tab {
width: 11px;
height: 11px;
background-image: url("../../img/fa-icons/solid/times.svg");
background-position: center center;
background-repeat: no-repeat;
top: 4px !important;
right: 6px !important;
opacity: 0.4 !important; }
.lm_header .lm_tab .lm_close_tab:hover {
opacity: 1; }
.lm_header .lm_tab .resultCounter {
position: absolute;
right: -7px;
top: -5px;
z-index: 4;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); }
.lm_header .lm_tab.lm_active {
border-bottom: none;
padding-bottom: 5px;
height: 22px !important; }
.lm_header .lm_tab.lm_active .lm_close_tab {
opacity: 1; }
.lm_dragProxy.lm_right .lm_header .lm_tab.lm_active,
.lm_stack.lm_right .lm_header .lm_tab.lm_active {
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); }
.lm_dragProxy.lm_bottom .lm_header .lm_tab.lm_active,
.lm_stack.lm_bottom .lm_header .lm_tab.lm_active {
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); }
.lm_selected .lm_header {
background-color: #035151; }
.lm_tab:hover, .lm_tab.lm_active {
background: #f8f9fa;
color: #035151; }
.lm_header .lm_controls .lm_tabdropdown:before {