Commit 1a25ef40 authored by Gradl, Tobias's avatar Gradl, Tobias
Browse files

1265: Implement theming mechanism

Task-Url: https://pm.winseda.de/issues/1265
parent 6b1c78ed
@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: #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; }
/* 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 #727299; }
.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 #213365; }
.lm_dropTargetIndicator .lm_inner {
background: #494e7d;
opacity: 0.1; }
.lm_splitter {
background: #213365;
opacity: 0.001;
transition: opacity 200ms ease; }
.lm_splitter:hover, .lm_splitter.lm_dragging {
background: #213365 !important;
opacity: 1; }
.lm_header {
height: 24px; }
.lm_header .lm_tab {
font-family: Roboto, Arial, Helvetica, 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 #727299;
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: #213365; }
.lm_tab:hover, .lm_tab.lm_active {
background: #f8f9fa;
color: #213365; }
.lm_header .lm_controls .lm_tabdropdown:before {
color: #494e7d; }
.lm_controls > li {
position: relative;
background-position: center center;
background-repeat: no-repeat;
opacity: 0.4;
transition: opacity 300ms ease;
width: 13px !important;
height: 13px !important;
margin-left: 3px;
top: 6px; }
.lm_controls > li:hover {
opacity: 1; }
.lm_controls .lm_popout {
background-image: url("../../img/fa-icons/solid/external-link-alt.svg"); }
.lm_controls .lm_maximise {
background-image: url("../../img/fa-icons/regular/window-maximize.svg"); }
.lm_controls .lm_close {
background-image: url("../../img/fa-icons/solid/times.svg"); }
.lm_controls .lm_dock {
background-image: url("../../img/fa-icons/solid/thumbtack.svg");
transform: rotate(-45deg);
transition: transform 300ms; }
.lm_controls .lm_tabdropdown {
background-image: url("../../img/fa-icons/solid/caret-down.svg"); }
.lm_stack.lm_docked .lm_controls .lm_dock {
transform: rotate(0deg); }
.lm_stack.lm_docked > .lm_items {
border-color: #213365;
border-image: linear-gradient(to right, #213365 1%, #213365 100%);
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); }
.lm_maximised .lm_header {
background-color: #213365; }
.lm_maximised .lm_controls .lm_maximise {
background-image: url("../../img/fa-icons/regular/window-minimize.svg"); }
.lm_transition_indicator {
background-color: #494e7d;
border: 1px dashed #213365; }
.lm_popin {
cursor: pointer; }
.lm_popin .lm_bg {
background: #494e7d;
opacity: 0.7; }
.lm_popin .lm_icon {
background-image: url("../../img/fa-icons/regular/window-restore.svg");
background-position: center center;
background-repeat: no-repeat;
opacity: 0.7; }
.lm_popin:hover .lm_icon {
opacity: 1; }
/*!
* General editor styling
*/
#editor-messages-container {
text-align: center;
vertical-align: middle;
min-width: 200px;
line-height: calc(3 * 0.875rem + 2px); }
#editor-messages-container .editor-message-info {
color: #213365; }
#editor-messages-container .editor-message-success {
color: #446521; }
#editor-messages-container .editor-message-warning {
color: #a07800; }
#editor-messages-container .editor-message-danger {
color: #652122; }
div.content-pane {
overflow: auto; }
div.content-pane.content-pane-no-overflow {
overflow: hidden; }
div.content-pane .editor-content-container {
min-height: 0;
padding: 1rem; }
div.content-pane .editor-content-container + .editor-content-container {
padding-top: 0.5rem; }
/*!
* Log Area
*/
.log {
padding-left: 0;
list-style-type: none;
white-space: nowrap;
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 0.875rem;
color: #333333;
padding: 5px 10px; }
.log li .log-type {
font-weight: 700; }
.log li.log-INFO .log-type {
color: #17a2b8; }
.log li.log-SUCCESS .log-type {
color: #446521; }
.log li.log-WARNING .log-type {
color: #ba8b00; }
.log li.log-ERROR .log-type {
color: #652122; }
#model-natures-controls {
position: absolute;
right: 0.5rem;
top: 0.5rem; }
/*!
* Editor context menu
* @see: https://github.com/avxto/nuContextMenu/blob/master/src/nu-context-menu.css
*/
.editor-context-menu {
background-clip: padding-box;
background-color: #fff;
border: 1px solid #dee2e6;
border-radius: 0.25rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
box-sizing: border-box;
display: block;
height: 0;
opacity: 0;
overflow: hidden;
position: absolute;
width: 0;
z-index: 9999; }
.editor-context-menu.active {
opacity: 1;
height: auto;
width: auto; }
.editor-context-menu ul {
font-size: 0.875rem;
list-style: none;
margin: 2px 0 0;
padding: 4px 0;
text-align: left; }
.editor-context-menu ul li.menu-item {
clear: both;
color: #333333;
cursor: pointer;
padding: 2px 20px;
white-space: nowrap; }
.editor-context-menu ul li.menu-item i.fas, .editor-context-menu ul li.menu-item i.far {
width: 25px; }
.editor-context-menu ul li.menu-item:hover {
background: #494e7d;
color: #fff; }
.editor-context-menu ul li.menu-item + li.menu-heading {
border-top: 1px solid #dee2e6;
padding-top: 4px;
margin-top: 4px; }
.editor-context-menu ul li.menu-heading {
font-size: 0.875rem;
list-style: none;
padding: 0 12px;
text-transform: uppercase;
color: #707070; }
.editor-context-menu ul hr {
background: #dee2e6;
border: 0;
color: #dee2e6;
height: 1px;
margin: 4px 0; }
.codearea,
.sample-codearea,
.sample-textarea {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
color: #333333;
font-size: 0.875rem;
border: 1px solid #ced4da;
padding: 12px; }
.sample-codearea.sample-codearea,
.sample-textarea.sample-codearea {
overflow: auto; }
.sample-codearea.sample-codearea p,
.sample-textarea.sample-codearea p {
padding: 0; }
.sample-codearea.sample-textarea,
.sample-textarea.sample-textarea {
resize: none; }
.sample-codearea ul,
.sample-textarea ul {
padding-left: 15px;
list-style-type: none; }
.sample-codearea ul li,
.sample-textarea ul li {
position: relative;
margin-top: 0.2rem; }
.sample-codearea ul li:before,
.sample-textarea ul li:before {
content: " ";
display: inline-block;
position: absolute;
left: -1.25rem;
top: 0.25rem;
width: 0;
height: 0;
margin-right: 3px;
margin-left: 8px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #333333; }
.sample-codearea ul li .btn-inline,
.sample-textarea ul li .btn-inline {
padding: 0 0.5rem; }
.sample-codearea ul li .sample-output-value-expanded .fa-plus-square,
.sample-textarea ul li .sample-output-value-expanded .fa-plus-square {
display: none; }
.sample-codearea ul li .sample-output-value-expanded .fa-minus-square,
.sample-textarea ul li .sample-output-value-expanded .fa-minus-square {
display: inline; }
.sample-codearea ul li .sample-output-value-collapsed .fa-plus-square,
.sample-textarea ul li .sample-output-value-collapsed .fa-plus-square {
display: inline; }
.sample-codearea ul li .sample-output-value-collapsed .fa-minus-square,
.sample-textarea ul li .sample-output-value-collapsed .fa-minus-square {
display: none; }
.sample-codearea ul .sample-output-key,
.sample-textarea ul .sample-output-key {
font-style: italic;
font-weight: bold; }
.sample-input-optionbar {
padding: 6px; }
.sample-input-optionbar .btn-inline {
margin-top: -2px;
padding: 0 12px; }
/*!
* File upload
*/
.fileupload-buttonbar {
overflow: hidden; }
.fileupload-buttonbar .fileinput-button {
float: left;
margin-right: 4px;
overflow: hidden;
position: relative; }
.fileupload-buttonbar .fileinput-button input {
cursor: pointer;
direction: ltr;
font-size: 23px;
margin: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
transform: translate(-300px, 0px) scale(4); }
.fileupload-progress {
padding-top: 14px; }
.fileupload-progress .progress {
height: 1.5rem;
font-size: 0.9rem; }
.fileupload-files {
overflow: auto; }
.fileupload-files > table > tr {
border: none; }
.fileupload-files > table > tr > td {
padding: 0; }
/*!
* Activity history
*/
#activity-history .card {
/*width: 160px; */
float: left;
overflow-x: auto;
margin-bottom: 0.25rem;
margin-right: 0.25rem; }
#activity-history .card .card-body {
padding: 10px 15px; }
.modal {
/*!
* Grammar Editor
*/
/*!
* SVG Viewer
*/ }
.modal .available-input-container {
border: 1px solid #ccc;
height: 245px;
overflow: scroll;
padding: 6px; }
.modal .available-input-container ul {
font-size: 90%;
list-style: none;
padding-left: 15px; }
.modal .transformation-result-container {
height: 200px;
display: flex;
flex-direction: column; }
.modal .transformation-result-container .transformation-result {
flex-grow: 1; }
.modal .transformation-result-container .transformation-result ul {
padding-left: 15px; }
.modal .accordion-validate-grammar .panel-body ul {
list-style: none;
font-size: 90%;
max-height: 150px;
overflow: auto; }
.modal .inner-svg-container,
.modal .outer-svg-container {
overflow: hidden;
position: relative;
width: 100%;
height: 100%; }
.modal .outer-svg-container {
border: 1px solid #CCC;
/* Android ≤ 1.6, iOS 1-3.2, Safari 3-4 */
-webkit-border-radius: 5px;
/* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */
border-radius: 5px; }
.modal .inner-svg-container svg {
overflow: hidden;
display: inline;
width: inherit;
min-width: inherit;
max-width: inherit;
height: inherit;
min-height: inherit;
max-height: inherit; }
.modal .svg-button-container {
position: absolute;
top: 0;
right: 0;
background-color: #DDD;
border: 1px solid #BBB;
/* Android ≤ 1.6, iOS 1-3.2, Safari 3-4 */
-webkit-border-radius: 5px;
/* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */
border-radius: 5px; }
.modal .svg-button-container button {
display: block; }
/*!
* Bootstrap DARIAH-DE customization *
* Bootstrap is licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* The DARIAH-DE customization is as well: https://github.com/tgradl/dariah-styled-bootstrap/blob/dariah-v4-dev/LICENSE
* Based on DARIAH-DE Styleguide Template: https://github.com/DARIAH-DE/StyleGuideTemplate/