Skip to content
GitLab
Commit fd74aead authored by Gradl, Tobias's avatar Gradl, Tobias
Browse files

1265: Implement theming mechanism 

Task-Url: https://pm.winseda.de/issues/1265
parent 5d17c043
Expand all Hide whitespace changes
Inline Side-by-side
css/application-colreg.css 0 → 100755
View file @ fd74aead
/*!
* 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: #494e7d;
color: #213365;
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: #494e7d;
padding: 16px 0; }
.version-panel#editor-version-panel .version-panel-header .close-sidebar {
color: #fff;
/*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: #fff; }
.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: #652122; }
.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: #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/placeholder-logo.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; }
/*!
* 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; }
.editor .editor-buttonbar {
padding: 12px 0;
background-color: #fff;
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 #727299;
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: #727299;
color: white; }
.editor-table tr.list {
cursor: pointer; }
.editor-table tr.list.has-error {
background-color: #d4c1c1;
color: #351112; }
.editor-table tr.list.has-error:hover {
background-color: #b59494; }
.editor-table tr.list:hover {
background-color: #dadae4; }
.editor-table tr.list.row-open {
font-weight: 700; }
.editor-table tr.row-open {
background-color: #f7f7f9; }
.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: #652122;
font-weight: 700; }
.sidebar .sidebar-block ul li.has-error a:hover, .sidebar .sidebar-block ul li.has-error a:focus {
color: #2b0e0f; }
css/bootstrap/application-dme.css → css/application-dme.css
View file @ fd74aead
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
width: 100%; width: 100%;
height: 75px; height: 75px;
min-width: 100px; min-width: 100px;
background: url(../../img/page_icon_faded.png) top center no-repeat; } background: url(../img/placeholder-logo.png) top center no-repeat; }
.dataTable > tbody > tr > td.td-image .list-thumb-nopreview span { .dataTable > tbody > tr > td.td-image .list-thumb-nopreview span {
position: absolute; position: absolute;
bottom: 2px; bottom: 2px;
...@@ -90,7 +90,8 @@ ...@@ -90,7 +90,8 @@
margin-top: 10px; margin-top: 10px;
overflow-y: auto; overflow-y: auto;
max-width: 550px; max-width: 550px;
visibility: hidden; } visibility: hidden;
width: 90%; }
.sidebar .sidebar-block { .sidebar .sidebar-block {
background-color: #fff; background-color: #fff;
border: 1px solid #dee2e6; border: 1px solid #dee2e6;
...@@ -117,25 +118,10 @@ ...@@ -117,25 +118,10 @@
margin-bottom: 6px; margin-bottom: 6px;
margin-left: 0.5rem; } margin-left: 0.5rem; }
.sidebar .sidebar-block ul { .sidebar .sidebar-block ul {
padding-left: 1rem; padding-left: 12px;
margin-left: 0; } margin-left: 0; }
.sidebar .sidebar-block ul li { .sidebar .sidebar-block ul li {
display: inline-block; } padding-bottom: 6px; }
.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 { .modal .modal-dialog .modal-content .modal-header .modal-title {
margin: 0; } margin: 0; }
...@@ -218,7 +204,7 @@ ...@@ -218,7 +204,7 @@
.lm_header .lm_tab .lm_close_tab { .lm_header .lm_tab .lm_close_tab {
width: 11px; width: 11px;
height: 11px; height: 11px;
background-image: url("../../img/fa-icons/solid/times.svg"); background-image: url("../img/fa-icons/solid/times.svg");
background-position: center center; background-position: center center;
background-repeat: no-repeat; background-repeat: no-repeat;
top: 4px !important; top: 4px !important;
...@@ -269,17 +255,17 @@ ...@@ -269,17 +255,17 @@
.lm_controls > li:hover { .lm_controls > li:hover {
opacity: 1; } opacity: 1; }
.lm_controls .lm_popout { .lm_controls .lm_popout {
background-image: url("../../img/fa-icons/solid/external-link-alt.svg"); } background-image: url("../img/fa-icons/solid/external-link-alt.svg"); }
.lm_controls .lm_maximise { .lm_controls .lm_maximise {
background-image: url("../../img/fa-icons/regular/window-maximize.svg"); } background-image: url("../img/fa-icons/regular/window-maximize.svg"); }
.lm_controls .lm_close { .lm_controls .lm_close {
background-image: url("../../img/fa-icons/solid/times.svg"); } background-image: url("../img/fa-icons/solid/times.svg"); }
.lm_controls .lm_dock { .lm_controls .lm_dock {
background-image: url("../../img/fa-icons/solid/thumbtack.svg"); background-image: url("../img/fa-icons/solid/thumbtack.svg");
transform: rotate(-45deg); transform: rotate(-45deg);
transition: transform 300ms; } transition: transform 300ms; }
.lm_controls .lm_tabdropdown { .lm_controls .lm_tabdropdown {
background-image: url("../../img/fa-icons/solid/caret-down.svg"); } background-image: url("../img/fa-icons/solid/caret-down.svg"); }
.lm_stack.lm_docked .lm_controls .lm_dock { .lm_stack.lm_docked .lm_controls .lm_dock {
transform: rotate(0deg); } transform: rotate(0deg); }
...@@ -291,7 +277,7 @@ ...@@ -291,7 +277,7 @@
.lm_maximised .lm_header { .lm_maximised .lm_header {
background-color: #213365; } background-color: #213365; }
.lm_maximised .lm_controls .lm_maximise { .lm_maximised .lm_controls .lm_maximise {
background-image: url("../../img/fa-icons/regular/window-minimize.svg"); } background-image: url("../img/fa-icons/regular/window-minimize.svg"); }
.lm_transition_indicator { .lm_transition_indicator {
background-color: #494e7d; background-color: #494e7d;
...@@ -303,7 +289,7 @@ ...@@ -303,7 +289,7 @@
background: #494e7d; background: #494e7d;
opacity: 0.7; } opacity: 0.7; }
.lm_popin .lm_icon { .lm_popin .lm_icon {
background-image: url("../../img/fa-icons/regular/window-restore.svg"); background-image: url("../img/fa-icons/regular/window-restore.svg");
background-position: center center; background-position: center center;
background-repeat: no-repeat; background-repeat: no-repeat;
opacity: 0.7; } opacity: 0.7; }
......
css/application-gs.css 0 → 100755
View file @ fd74aead
/*!
* 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/placeholder-logo.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;