graphdb-workbench 10.0.0-M2-1 → 10.5.1

package/dist/css/bootstrap-graphdb-theme.css

@@ -1,52 +1,27 @@
+@import "common.css";
+
 /*-------------------------------------------------------------
-	Fonts
+	Colors used in multiple places
 -------------------------------------------------------------*/
-@font-face {
-    font-family: 'RubikWeb';
-    src: url('fonts/rubik-regular.woff2') format('woff2'),
-    url('fonts/rubik-regular.woff') format('woff');
-    font-weight: 400;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'RubikWeb';
-    src: url('fonts/rubik-italic.woff2') format('woff2'),
-    url('fonts/rubik-italic.woff') format('woff');
-    font-weight: 400;
-    font-style: italic;
-}
-
-@font-face {
-    font-family: 'RubikWeb';
-    src: url('fonts/rubik-light.woff2') format('woff2'),
-    url('fonts/rubik-light.woff') format('woff');
-    font-weight: 300;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'RubikWeb';
-    src: url('fonts/rubik-lightitalic.woff2') format('woff2'),
-    url('fonts/rubik-lightitalic.woff') format('woff');
-    font-weight: 300;
-    font-style: italic;
-}
-
-@font-face {
-    font-family: 'RubikWeb';
-    src: url('fonts/rubik-medium.woff2') format('woff2'),
-    url('fonts/rubik-medium.woff') format('woff');
-    font-weight: 500;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'RubikWeb';
-    src: url('fonts/rubik-mediumitalic.woff2') format('woff2'),
-    url('fonts/rubik-mediumitalic.woff') format('woff');
-    font-weight: 500;
-    font-style: italic;
+:root {
+    --autocomplete-background: hsla(var(--tertiary-color-hsl), 0.3);
+    --autocomplete-background-selected: hsla(var(--tertiary-color-hsl), 0.5);
+    --autocomplete-match: var(--secondary-color);
+    /* width of menu 15 + margin left 1 + margin right 2 => 18rem */
+    --menu-width-expanded: 18rem;
+    /* width of menu 4.375 + margin left 1 + margin right 2 => 7.375 */
+    --menu-width-collapsed: 7.375rem;
+    /* menu width in general */
+    --menu-width: var(--menu-width-expanded);
+    /* max usable content width not considering the menu and margins */
+    --max-width-minus-menu: calc(100% - var(--menu-width));
+    /* Link decoration, see GDB-9013 before you touch these */
+    --link-decoration-thickness: clamp(1px, 6%, 10px);
+    --link-underline-offset: clamp(1px, 6%, 10px);
+}
+
+:root.menu-collapsed {
+    --menu-width: var(--menu-width-collapsed);
 }
 
 /*-------------------------------------------------------------
@@ -63,9 +38,7 @@
     font-style: normal;
 }
 
-[class^="icon-"], [class*=" icon-"], .icon-any {
-    /* use !important to prevent issues with browser extensions that change fonts */
-    font-family: 'icomoon', sans-serif !important;
+[class^="icon-"], [class*=" icon-"], .icon-any, .fa-d3 {
     speak: none;
     font-style: normal;
     font-weight: normal;
@@ -79,6 +52,16 @@
     -moz-osx-font-smoothing: grayscale;
 }
 
+[class^="icon-"], [class*=" icon-"], .icon-any, .fa-d3 {
+    /* use !important to prevent issues with browser extensions that change fonts */
+    font-family: 'icomoon', sans-serif !important;
+}
+
+.fa-d3 {
+    /* use !important to prevent issues with browser extensions that change fonts */
+    font-family: 'FontAwesome', sans-serif !important;
+}
+
 .icon-arrow-up-off:before {
     content: "\e948";
 }
@@ -388,11 +371,11 @@
     content: "\e92c";
 }
 
-.icon-user:before {
+.icon-user-alt:before {
     content: "\e92d";
 }
 
-.icon-export:before {
+.icon-export-alt:before {
     content: "\e92e";
 }
 
@@ -400,22 +383,65 @@
     content: "\e92f";
 }
 
-.icon-repo-virtual:before {
-    content: "\e957";
+.icon-hbars:before {
+    content: "\e953";
 }
 
-.icon-repo-ontop:before {
+.icon-phone:before {
+    content: "\e954";
+}
+
+.icon-tick:before {
+    content: "\e956";
+}
+
+.icon-repo-ontop-alt:before {
     content: "\e958";
 }
 
-.icon-repo-fedx:before {
+.icon-repo-fedx-alt:before {
     content: "\e959";
 }
 
-.icon-repo-graphdb:before {
+.icon-repo-graphdb-alt:before {
     content: "\e95a";
 }
 
+.icon-export:before {
+    content: "\e95b";
+}
+
+.icon-readonly:before {
+    content: "\e95c";
+}
+
+.icon-repo-fedx:before {
+    content: "\e95d";
+}
+
+.icon-repo-graphdb:before {
+    content: "\e95e";
+}
+
+.icon-repo-ontop:before {
+    content: "\e95f";
+}
+
+.icon-repo-unknown:before {
+    content: "\e960";
+}
+
+.icon-translation:before {
+    content: "\e961";
+}
+
+.icon-user:before {
+    content: "\e962";
+}
+
+.icon-follower:before {
+    content: "\e962";
+}
 /*
 [class^="icon-"]:before, [class*=" icon-"]:before {
 	display: inline-block;
@@ -428,6 +454,14 @@
     /*    vertical-align: -15%;*/
 }
 
+.icon-1-25x, .btn .icon-1-25x[class^="icon-"] {
+    font-size: 1.25em;
+}
+
+.icon-1-5x, .btn .icon-1-5x[class^="icon-"] {
+    font-size: 1.5em;
+}
+
 .icon-2x, .btn .icon-2x[class^="icon-"] {
     font-size: 2em;
 }
@@ -436,6 +470,10 @@
     font-size: 2.5em;
 }
 
+.icon-3x, .btn .icon-3x[class^="icon-"] {
+    font-size: 3em;
+}
+
 .icon-rotate-270:before {
     display: inline-block;
     -webkit-transform: rotate(270deg);
@@ -460,23 +498,35 @@
 }
 
 body {
-    font-family: RubikWeb, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-    font-weight: 300;
+    font-family: var(--main-font);
+    font-weight: var(--main-font-weight);
     margin-bottom: 0;
-    font-variant-ligatures: no-common-ligatures;
+}
+
+code, kbd, pre, samp {
+    font-family: var(--mono-font);
+}
+
+select {
+    font-weight: 400;
 }
 
 a {
-    color: #04355E;
+    color: var(--secondary-color);
 }
 
-a:focus, a:hover {
-    color: #0a477b;
+/* General links on hover and actual links that lead to an external site */
+a:hover, a:active, a[href^="http"], a[href^="http"]:hover, a[href^="http"]:active {
+    text-decoration-line: underline;
+    text-decoration-style: solid;
+    text-decoration-thickness: var(--link-decoration-thickness);
+    text-underline-offset: var(--link-underline-offset);
 }
 
-.font-weight-light {
-    font-weight: 300;
+a:focus, a:hover {
+    color: var(--secondary-color-light);
 }
+
 .font-weight-bold {
     font-weight: bolder;
 }
@@ -488,7 +538,7 @@ a:focus, a:hover {
 
 .main-container {
     margin-left: 15rem;
-    padding: 3rem 2rem 0 2rem;
+    padding: 0 2rem 3rem 2rem;
     /*max-width: 1600px; Removed because of the collapse of the menu*/
     /*-moz-transition: margin-left 0.2s ease-in;  !* FF4+ *!*/
     /*-o-transition: margin-left 0.2s ease-in;  !* Opera 10.5+ *!*/
@@ -498,7 +548,7 @@ a:focus, a:hover {
 }
 
 .text-muted {
-    color: rgba(0, 0, 0, 0.3) !important
+    color: rgba(0, 0, 0, 0.66) !important
 }
 
 .pos-r {
@@ -524,22 +574,13 @@ a:focus, a:hover {
     height: 26px !important;
 }
 
-.btn.imports-queries {
-    cursor: default;
+.dropdown-menu-center {
+    left: 50% !important;
+    right: auto !important;
+    text-align: center !important;
+    transform: translate(-50%, 0) !important;
 }
 
-.btn.imports-queries .btn {
-    padding: 0 !important;
-    border: 0 !important;
-    vertical-align: inherit;
-    color: #fff;
-}
-
-.btn.imports-queries .btn:hover {
-    color: rgba(255, 255, 255, 0.7);
-}
-
-
 /*-------------------------------------------------------------
 	Headings
 -------------------------------------------------------------*/
@@ -563,6 +604,7 @@ h1 .btn {
 .main-menu {
     width: 15rem;
     position: fixed;
+    top: 0;
     font-weight: 400;
     z-index: 1010;
     margin: 0;
@@ -589,7 +631,7 @@ main menu height*/
 }
 
 .main-menu li a {
-    color: #04355E;
+    color: var(--secondary-color);
     text-decoration: none;
 }
 
@@ -623,7 +665,7 @@ main menu height*/
     -o-transition: all 0.18s ease-out; /* Opera 10.5+ */
     -webkit-transition: all 0.18s ease-out; /* Saf3.2+, Chrome */
     transition: all 0.18s ease-out;
-    color: #04355E;
+    color: var(--secondary-color);
     cursor: pointer;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -633,7 +675,7 @@ main menu height*/
 .main-menu .menu-item-icon {
     font-size: 2.5rem;
     vertical-align: middle;
-    color: #ED4F2F;
+    color: var(--primary-color);
     transform: scale(0.9);
     display: inline-block;
     -moz-transition: all 0.18s ease-out; /* FF4+ */
@@ -643,22 +685,32 @@ main menu height*/
     pointer-events: none;
 }
 
+.main-menu .menu-item-icon.fa-flask {
+    /* Temporary: until we get our own icon */
+    font-size: 2rem;
+    padding: 4px 5px;
+}
+
 .main-menu .menu-element-root .menu-item {
     pointer-events: none;
 }
 
 .main-menu .menu-element-root.active,
 .main-menu .menu-element-root.active:hover {
-    background-color: #ED4F2F;
+    background-color: var(--primary-color);
     color: #fff;
 }
 
 .main-menu .active .menu-item-icon {
-    color: #04355E;
+    color: var(--icon-on-primary-color);
+}
+
+.main-menu :not(.brand) .menu-element-root {
+    font-size: 1.1rem;
 }
 
 .main-menu .brand {
-    background-color: #04355E;
+    background-color: var(--logo-background-color);
 }
 
 .main-menu .brand a {
@@ -707,7 +759,7 @@ main menu height*/
 }
 
 .main-menu .sub-menu li.active a {
-    background-color: #ED4F2F;
+    background-color: var(--primary-color);
     font-weight: 500;
     color: #fff;
 }
@@ -760,7 +812,7 @@ main menu height*/
 }
 
 .toggle-menu:hover {
-    background-color: #ED4F2F;
+    background-color: var(--primary-color);
 }
 
 .toggle-menu [class^="icon-"] {
@@ -776,13 +828,13 @@ main menu height*/
 }
 
 .small-logo {
-    width: 3.625rem;
-    height: auto;
+    width: 50px;
+    height: 50px;
 }
 
 .big-logo {
-    width: 11.25rem;
-    height: auto;
+    width: 180px;
+    height: 50px;
 }
 
 .container-fluid.main-container.expanded {
@@ -792,6 +844,7 @@ main menu height*/
 .main-menu.collapsed {
     width: 4.375rem;
     overflow: visible;
+    height: auto;
 }
 
 .main-menu.collapsed .menu-element.clicked .sub-menu {
@@ -828,7 +881,7 @@ main menu height*/
     text-overflow: ellipsis;
     overflow: hidden;
     padding: 0.5em 0.8rem 0.2em 0;
-    color: #04355E;
+    color: var(--secondary-color);
     margin-left: 0.8rem;
     margin-bottom: 0.5em;
 }
@@ -881,21 +934,21 @@ main menu height*/
 }
 
 .btn-primary {
-    background-color: #ED4F2F;
-    border-color: #ED4F2F;
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
 }
 
 .btn-primary.active, .btn-primary.focus, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active.focus,
 .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open > .btn-primary.dropdown-toggle.focus, .open > .btn-primary.dropdown-toggle:focus, .open > .btn-primary.dropdown-toggle:hover,
 .btn-primary.disabled:hover, .btn-primary:disabled:hover {
-    background-color: #d54a33;
-    border-color: #d54a33;
+    background-color: var(--primary-color-dark);
+    border-color: var(--primary-color-dark);
 }
 
 .btn-secondary {
     background-color: #EBEBEB;
     border-color: #EBEBEB;
-    color: #04355E;
+    color: var(--secondary-color);
 }
 
 .btn-secondary.focus,
@@ -907,55 +960,55 @@ main menu height*/
 }
 
 .btn-secondary.active, .btn-secondary.active.focus, .btn-secondary.active:focus, .btn-secondary.active:hover {
-    background-color: #ED4F2F;
-    border-color: #ED4F2F;
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
     color: #fff;
 }
 
 .btn-info {
-    background-color: #04355E;
-    border-color: #04355E;
+    background-color: var(--secondary-color);
+    border-color: var(--secondary-color);
 }
 
 .btn-info.active, .btn-info.focus, .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active.focus,
 .btn-info.active:focus, .btn-info.active:hover, .btn-info:active.focus, .btn-info:active:focus, .btn-info:active:hover, .open > .btn-info.dropdown-toggle.focus, .open > .btn-info.dropdown-toggle:focus, .open > .btn-info.dropdown-toggle:hover,
 .btn-info.disabled:hover, .btn-info:disabled:hover {
-    background-color: #063054;
-    border-color: #063054;
+    background-color: var(--secondary-color-light);
+    border-color: var(--secondary-color-light);
 }
 
 /* outline buttons */
 .btn-outline-primary {
-    color: #ED4F2F;
-    border-color: #ED4F2F;
+    color: var(--primary-color);
+    border-color: var(--primary-color);
 }
 
 .btn-outline-primary:hover,
 .btn-outline-primary.focus, .btn-outline-primary:focus, .btn-outline-primary.active, .btn-outline-primary:active, .open > .btn-outline-primary.dropdown-toggle,
 .btn-outline-primary.active.focus, .btn-outline-primary.active:focus, .btn-outline-primary.active:hover, .btn-outline-primary:active.focus, .btn-outline-primary:active:focus, .btn-outline-primary:active:hover, .open > .btn-outline-primary.dropdown-toggle.focus, .open > .btn-outline-primary.dropdown-toggle:focus, .open > .btn-outline-primary.dropdown-toggle:hover {
-    color: #ED4F2F;
-    background-color: rgba(237, 79, 47, 0.2);
-    border-color: #ED4F2F;
+    color: var(--primary-color);
+    background-color: hsla(var(--primary-color-hsl), 0.075);
+    border-color: var(--primary-color);
 }
 
 .btn-outline-secondary {
-    color: #04355E;
+    color: var(--secondary-color);
     background-image: none;
     background-color: transparent;
-    border-color: rgba(4, 53, 94, 0.5);
+    border-color: hsla(var(--secondary-color-hsl), 0.5);
 }
 
 .btn-outline-secondary:hover,
 .btn-outline-secondary.focus, .btn-outline-secondary:focus, .btn-outline-secondary.active, .btn-outline-secondary:active,
 .btn-outline-secondary.active.focus, .btn-outline-secondary.active:focus, .btn-outline-secondary:active.focus, .btn-outline-secondary:active:focus, .btn-outline-secondary:active:hover, .open > .btn-outline-secondary.dropdown-toggle.focus, .open > .btn-outline-secondary.dropdown-toggle:focus, .open > .btn-outline-secondary.dropdown-toggle:hover {
-    color: #04355E;
-    background-color: rgba(4, 53, 94, 0.2);
-    border-color: #04355E;
+    color: var(--secondary-color);
+    background-color: hsla(var(--secondary-color-hsl), 0.2);
+    border-color: var(--secondary-color);
 }
 
 .btn-outline-secondary.active:hover {
-    background-color: rgba(4, 53, 94, 0.2);
-    border-color: #09406d;
+    background-color: hsla(var(--secondary-color-hsl), 0.2);
+    border-color: var(--secondary-color);
 }
 
 .btn-group-lg > .btn, .btn-lg {
@@ -964,22 +1017,27 @@ main menu height*/
 }
 
 .btn-link, .btn-link a {
-    color: #ED4F2F;
+    color: var(--primary-color);
     padding: .5em .8em;
 }
 
+.btn-link, .btn-link:hover, .btn-link:focus {
+    text-decoration-line: underline;
+    text-decoration-style: dotted;
+    text-decoration-thickness: var(--link-decoration-thickness);
+    text-underline-offset: var(--link-underline-offset);
+}
+
 .btn-link.secondary {
-    color: rgba(0, 0, 0, .3);
+    color: rgba(0, 0, 0, .66);
 }
 
 .btn-link:focus, .btn-link:hover, .btn-link.secondary:hover {
-    color: #d94223;
-    text-decoration: none;
+    color: var(--primary-color-dark);
 }
 
 .btn-link.disabled:focus, .btn-link.disabled:hover, .btn-link.disabled.secondary:hover {
     color: rgba(0, 0, 0, .3);
-    text-decoration: none;
 }
 
 .btn-link.btn-sm {
@@ -987,10 +1045,14 @@ main menu height*/
 }
 
 .btn-link.active, .btn-link:hover.active, .btn-link:focus.active, .btn-link:active.active {
-    background-color: #d54a33;
+    background-color: var(--primary-color-dark);
     color: #fff;
 }
 
+.btn-link-text {
+    padding-left: 0.2em;
+}
+
 /* button groups */
 .btn-group .btn {
     margin-right: 3px;
@@ -1006,8 +1068,7 @@ main menu height*/
 
 .btn [class^="icon-"] {
     font-size: 1.4em;
-    vertical-align: -0.25em;
-    line-height: 0.8;
+    line-height: 0.75;
     display: inline-block;
 }
 
@@ -1053,6 +1114,10 @@ main menu height*/
     right: 3px;
 }
 
+.status-bar .dropdown-menu-right {
+    right: 0;
+}
+
 /* collapse button */
 .btn.collapsed [class^=icon-]{
     transform: rotate(180deg);
@@ -1072,17 +1137,35 @@ h3 [class^=icon-] {
 	status bar
 -------------------------------------------------------------*/
 .status-bar {
-    position: fixed;
+    display: flex;
+    flex-wrap: wrap-reverse;
+    justify-content: flex-end;
+    gap: 0.25em;
+    position: sticky;
     top: 0;
-    right: 2rem;
-    font-size: 0.9em;
-    z-index: 1015;
+    padding-bottom: 0.5em;
+    width: max-content;
+    max-width: var(--max-width-minus-menu);
+    margin-left: auto;
+    margin-right: 2em;
+    font-size: 1.1em;
+    /* below pageslide (position: absolute, z-index: 1000) */
+    z-index: 999;
     -moz-transition: all 0.1s ease-out; /* FF4+ */
     -o-transition: all 0.1s ease-out; /* Opera 10.5+ */
     -webkit-transition: all 0.1s ease-out; /* Saf3.2+, Chrome */
     transition: all 0.1s ease-out;
 }
 
+/* Hides gap when no monitoring, this doesn't work with :empty */
+.status-bar operations-statuses-monitor:not(:has(div)) {
+    display: none;
+}
+
+.status-bar .btn-group .dropdown-toggle {
+    margin-right: 0;
+}
+
 /*-------------------------------------------------------------
 	sticky footer
 -------------------------------------------------------------*/
@@ -1115,12 +1198,16 @@ footer.footer .container-fluid.main-container p {
 .open > .btn-secondary.dropdown-toggle:focus,
 .open > .btn-secondary.dropdown-toggle:hover {
     color: #fff;
-    background-color: #ED4F2F;
-    border-color: #ED4F2F;
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
 }
 
 .open > .btn-secondary.dropdown-toggle [class^="icon-"] {
-    color: #04355E !important;
+    color: var(--icon-on-primary-color);
+}
+
+.btn-secondary.dropdown-toggle [class^="icon-"] {
+    color: var(--primary-color);
 }
 
 .dropdown-toggle {
@@ -1148,14 +1235,13 @@ footer.footer .container-fluid.main-container p {
 
 .dropdown-menu {
     border: none;
-    background-color: #ED4F2F;
+    background-color: var(--primary-color);
     border-radius: 0;
     padding: 0;
     min-width: 100%;
-    display: block;
+    display: none;
     margin-top: -1em;
     opacity: 0;
-    visibility: hidden;
     -moz-transition: all 150ms ease-out; /* FF4+ */
     -o-transition: all 150ms ease-out; /* Opera 10.5+ */
     -webkit-transition: all 150ms ease-out; /* Saf3.2+, Chrome */
@@ -1164,7 +1250,7 @@ footer.footer .container-fluid.main-container p {
 
 .open > .dropdown-menu {
     opacity: 1;
-    visibility: visible;
+    display: block;
     margin-top: -1px;
 }
 
@@ -1206,19 +1292,19 @@ footer.footer .container-fluid.main-container p {
 }
 
 .text-primary {
-    color: #ED4F2F !important;
+    color: var(--primary-color) !important;
 }
 
 .text-secondary {
-    color: #04355E !important;
+    color: var(--secondary-color) !important;
 }
 
 .text-tertiary {
-    color: #11b0a1 !important;
+    color: var(--tertiary-color-dark) !important;
 }
 
 .text-info {
-    color: #11b0a1 !important;
+    color: var(--tertiary-color) !important;
 }
 
 .rdf-list .hidden-data-value {
@@ -1235,29 +1321,47 @@ footer.footer .container-fluid.main-container p {
     padding: 1em;
 }
 
+.alert-warning, .alert-info, .alert-help, .alert-danger, .alert-success {
+    color: #000000AF;
+}
+
 .alert-warning {
-    color: #C4781E;
+    background-color: var(--color-warning-light);
+}
+
+.alert-info {
+    background-color: var(--color-info-light);
+}
+
+.alert-help {
+    background-color: var(--color-help-light);
+}
+
+.alert-success {
+    background-color: var(--color-success-light);
 }
 
-.alert-info, .alert-help {
-    background-color: rgba(45, 186, 171, 0.15);
-    color: #0a6d63;
+.alert-danger {
+    background-color: var(--color-danger-light);
 }
 
-.alert-info, .alert-warning, .alert-help {
+.alert-info, .alert-warning, .alert-help, .alert-danger, .alert-success {
     padding-left: 3em;
 }
 
 .alert-info:before,
 .alert-warning:before,
-.alert-help:before {
+.alert-help:before,
+.alert-danger:before,
+.alert-success:before {
     font-family: 'icomoon', sans-serif !important;
-    font-size: 1.6em;
+    font-size: 1.5em;
     vertical-align: middle;
     line-height: 1;
     position: absolute;
     left: 0.6em;
     top: 0.6em;
+    color: #0000008F;
 }
 
 .alert-info:before {
@@ -1265,13 +1369,21 @@ footer.footer .container-fluid.main-container p {
 }
 
 .alert-warning:before {
-    content: "\e920";
+    content: "\e930";
 }
 
 .alert-help:before {
     content: "\e929";
 }
 
+.alert-danger:before {
+    content: "\e920";
+}
+
+.alert-success:before {
+    content: "\e914";
+}
+
 .no-icon {
     padding-left: 1em;
 }
@@ -1304,7 +1416,7 @@ footer.footer .container-fluid.main-container p {
 .nav-tabs .nav-link {
     border-radius: 0;
     cursor: pointer;
-    color: #04355E;
+    color: var(--secondary-color);
     background-color: #eee;
 }
 
@@ -1362,7 +1474,7 @@ ul[class*="style-"] li:before {
     left: 0;
     top: -0.07em;
     font-size: 1.2em;
-    color: #2DBAAB;
+    color: var(--tertiary-color);
 }
 
 .text-white ul[class*="style-"] li:before {
@@ -1414,12 +1526,26 @@ ul.style-arrow li:before {
 .modal-content {
     border-radius: 0;
     border: none;
+    max-height: 90vh;
+    flex-direction: column;
+    justify-content: space-between;
+    display: flex;
 }
 
 .modal-header .close {
     margin-top: 4px;
 }
 
+.modal-header, .modal-footer {
+    flex: 0 0 auto;
+}
+
+.modal-body {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+}
+
 /*-------------------------------------------------------------
 	Progress bars
 -------------------------------------------------------------*/
@@ -1435,7 +1561,7 @@ ul.style-arrow li:before {
 .progress-bar {
     height: 2rem;
     color: #000;
-    background-color: rgba(45, 186, 171, 0.5);
+    background-color: hsla(var(--tertiary-color-hsl), 0.5);
     padding: 0 0.2em;
     text-align: center;
 }
@@ -1454,7 +1580,7 @@ ul.style-arrow li:before {
 .progress-square .progress-bar {
     width: 100%;
     display: block;
-    background-color: #04355E;
+    background-color: var(--secondary-color);
     position: absolute;
     bottom: 0;
 }
@@ -1467,16 +1593,16 @@ ul.style-arrow li:before {
 	Background colors
 -------------------------------------------------------------*/
 .bg-primary {
-    background-color: #ED4F2F;
+    background-color: var(--primary-color);
 }
 
 .bg-secondary {
-    background-color: #04355E;
+    background-color: var(--secondary-color);
     color: #fff;
 }
 
 .bg-ternary {
-    background-color: #2DBAAB;
+    background-color: var(--tertiary-color);
 }
 
 .bg-lightgray {
@@ -1541,7 +1667,7 @@ code {
 
 .close:hover::before {
     transform: scale(1.2);
-    color: #ED4F2F;
+    color: var(--primary-color);
 }
 
 .close.absolute {
@@ -1564,7 +1690,7 @@ code {
 }
 
 .data-value {
-    color: #04355E;
+    color: var(--secondary-color);
     font-weight: 400;
 }
 
@@ -1595,7 +1721,7 @@ code {
 }
 
 .tag-primary {
-    background-color: #04355E;
+    background-color: var(--secondary-color);
 }
 
 .tag-inverse {
@@ -1675,7 +1801,7 @@ code {
 }
 
 .card.button:hover {
-    border-color: rgba(237, 79, 47, 0.4)
+    border-color: hsla(var(--primary-color-hsl), 0.4)
 }
 
 .card.button .card-block {
@@ -1696,7 +1822,7 @@ code {
 }
 
 .card.button .btn:hover {
-    background-color: rgba(237, 79, 47, 0.1)
+    background-color: hsla(var(--primary-color-hsl), 0.1)
 }
 
 .card.button .btn [class^="icon-"] {
@@ -1706,14 +1832,14 @@ code {
 }
 
 .card.active {
-    border-color: #04355E;
+    border-color: var(--secondary-color);
     min-height: 300px;
 }
 
 .card.active .card-footer {
-    background-color: #04355E;
+    background-color: var(--secondary-color);
     color: #fff;
-    border-color: #04355E;
+    border-color: var(--secondary-color);
     position: absolute;
     bottom: 0;
     left: 0;
@@ -1764,6 +1890,7 @@ code {
     box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(0, 0, 0, .125);
     padding: 0;
+    font-family: inherit;
 }
 
 .popover-content {
@@ -1881,106 +2008,68 @@ code {
 /*-------------------------------------------------------------
 	Tooltips
 -------------------------------------------------------------*/
-.tooltip-inner {
-    text-decoration: none;
-    background-color: #04355E;
-    border-radius: 0;
+.angular-tooltip {
+    background-color: var(--secondary-color);
 }
 
-/* tooltip arrows from bootstrap 3 (needed because of angular bootstrap controls which use the old markup) */
-.tooltip.top {
-    padding: 5px 0;
-    margin-top: -3px;
+.angular-tooltip.angular-tooltip-top:after {
+    border-top-color: var(--secondary-color);
 }
 
-.tooltip.right {
-    padding: 0 5px;
-    margin-left: 3px;
+.angular-tooltip.angular-tooltip-top-left:after {
+    border-top-color: var(--secondary-color);
 }
 
-.tooltip.bottom {
-    padding: 5px 0;
-    margin-top: 3px;
+.angular-tooltip.angular-tooltip-top-right:after {
+    border-top-color: var(--secondary-color);
 }
 
-.tooltip.left {
-    padding: 0 5px;
-    margin-left: -3px;
-}
 
-.tooltip-arrow {
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-color: transparent;
-    border-style: solid;
+.angular-tooltip.angular-tooltip-right-top:after {
+    border-right-color: var(--secondary-color);
 }
 
-.tooltip.top .tooltip-arrow {
-    bottom: 0;
-    left: 50%;
-    margin-left: -5px;
-    border-top-color: #04355E;
-    border-width: 5px 5px 0;
+.angular-tooltip.angular-tooltip-right:after {
+    border-right-color: var(--secondary-color);
 }
 
-.tooltip.top-left .tooltip-arrow {
-    bottom: 0;
-    left: 5px;
-    border-top-color: #04355E;
-    border-width: 5px 5px 0;
+.angular-tooltip.angular-tooltip-right-bottom:after {
+    border-right-color: var(--secondary-color);
 }
 
-.tooltip.top-right .tooltip-arrow {
-    right: 5px;
-    bottom: 0;
-    border-top-color: #04355E;
-    border-width: 5px 5px 0;
+.angular-tooltip.angular-tooltip-bottom:after {
+    border-bottom-color: var(--secondary-color);
 }
 
-.tooltip.right .tooltip-arrow {
-    top: 50%;
-    left: 0;
-    margin-top: -5px;
-    border-right-color: #04355E;
-    border-width: 5px 5px 5px 0;
+.angular-tooltip.angular-tooltip-bottom-left:after {
+    border-bottom-color: var(--secondary-color);
 }
 
-.tooltip.left .tooltip-arrow {
-    top: 50%;
-    right: 0;
-    margin-top: -5px;
-    border-left-color: #04355E;
-    border-width: 5px 0 5px 5px;
+.angular-tooltip.angular-tooltip-bottom-right:after {
+    border-bottom-color: var(--secondary-color);
 }
 
-.tooltip.bottom .tooltip-arrow {
-    top: 0;
-    left: 50%;
-    margin-left: -5px;
-    border-bottom-color: #04355E;
-    border-width: 0 5px 5px;
+.angular-tooltip.angular-tooltip-left:after {
+    border-left-color: var(--secondary-color);
 }
 
-.tooltip.bottom-left .tooltip-arrow {
-    top: 0;
-    left: 5px;
-    border-bottom-color: #04355E;
-    border-width: 0 5px 5px;
+.angular-tooltip.angular-tooltip-left-bottom:after {
+    border-left-color: var(--secondary-color);
 }
 
-.tooltip.bottom-right .tooltip-arrow {
-    top: 0;
-    right: 5px;
-    border-bottom-color: #04355E;
-    border-width: 0 5px 5px;
+.angular-tooltip.angular-tooltip-left-top:after {
+    border-left-color: var(--secondary-color);
 }
 
 /*-------------------------------------------------------------
 	List groups
 -------------------------------------------------------------*/
+.list-group-item-action {
+    color: var(--secondary-color) !important;
+}
+
 .list-group-item-action:focus, .list-group-item-action:hover {
-    background-color: rgba(237, 79, 47, 0.1);
+    background-color: hsla(var(--primary-color-hsl), 0.1);
 }
 
 .list-group-item pre {
@@ -1991,7 +2080,7 @@ code {
     float: right;
     margin-top: 0.7em;
     font-weight: 400;
-    color: #ED4F2F;
+    color: var(--primary-color);
     cursor: pointer;
     display: none;
 }
@@ -2005,6 +2094,12 @@ code {
     overflow-y: auto;
 }
 
+.list-group-item samp.query-name {
+    font-family: inherit;
+    font-weight: bolder;
+    font-size: 1.25rem;
+}
+
 .list-group-item samp, .ellipsis-block {
     display: block;
     white-space: nowrap;
@@ -2043,6 +2138,10 @@ code {
     cursor: pointer;
 }
 
+li.remote {
+    background: #0000000A;
+}
+
 /*-------------------------------------------------------------
 	Forms
 -------------------------------------------------------------*/
@@ -2055,7 +2154,7 @@ code {
 }
 
 .form-control:focus {
-    border-color: rgba(4, 53, 94, 0.5);
+    border-color: hsla(var(--secondary-color-hsl), 0.5);
 }
 
 .input-group-btn {
@@ -2110,9 +2209,24 @@ input.ng-invalid.ng-touched, .ng-submitted input.ng-invalid {
     border-top: 0;
 }
 
+.tuclas .tooltip-inner {
+    color: #880000;
+    background-color: #ffff66;
+    box-shadow: 0 6px 12px rgba(0,0,0,.175);
+    /*max-height: 30px;*/
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+
+    /*width: 100px;*/
+    /*word-wrap: unset;*/
+    /*white-space: unset;*/
+}
 /*-------------------------------------------------------------
 	Switch control
 -------------------------------------------------------------*/
+
+
 span.switch {
     clear: both;
     margin: 0 5px;
@@ -2163,12 +2277,12 @@ input.switch:empty ~ label:after {
 }
 
 input.switch:checked ~ label:before {
-    background-color: rgba(4, 53, 94, .5)
+    background-color: hsla(var(--secondary-color-hsl), .5)
 }
 
 input.switch:checked ~ label:after {
     left: 1.3em;
-    background-color: #04355E;
+    background-color: var(--secondary-color);
 }
 
 .card.active input.switch:checked ~ label:before {
@@ -2208,6 +2322,68 @@ input.switch:checked ~ label:after {
     background-image: none !important;
 }
 
+#toast-container .toast {
+    font-size: 1.2rem;
+    opacity: 1;
+    padding: 25px 25px 25px 60px;
+    width: 450px;
+}
+
+@media (max-width: 1439px) {
+    #toast-container .toast {
+        width: 400px;
+    }
+}
+
+.toast-error {
+    background-color: var(--color-danger-dark);
+}
+
+.toast-warning {
+    background-color: var(--color-warning-dark);
+}
+
+.toast-info {
+    background-color: var(--color-info-dark);
+}
+
+.toast-success {
+    background-color: var(--color-success-dark);
+}
+
+.toast-error:before,
+.toast-warning:before,
+.toast-info:before,
+.toast-success:before {
+    font-family: 'icomoon', sans-serif !important;
+    font-size: 1.5em;
+    position: absolute;
+    left: 0.6em;
+    display: block;
+    top: 50%;
+    -webkit-transform: translateY(-50%);
+    -moz-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+}
+
+.toast-info:before {
+    content: "\e924";
+}
+
+.toast-warning:before {
+    content: "\e930";
+}
+
+.toast-error:before {
+    content: "\e920";
+}
+
+.toast-success:before {
+    content: "\e914";
+}
+
+
 #toast-container > .toast-error:before,
 #toast-container > .toast-warning:before {
     content: "\e920";
@@ -2269,29 +2445,22 @@ input.switch:checked ~ label:after {
 }
 
 #auto-complete-results-wrapper div:hover {
-    background-color: #3385ff;
-    color: white;
+    background-color: var(--autocomplete-background);
     cursor: pointer;
 }
 
 #auto-complete-results-wrapper div.active {
-    background-color: #3385ff;
-    color: white;
+    background-color: var(--autocomplete-background);
     cursor: pointer;
 }
 
 #auto-complete-results-wrapper div.selected {
-    background-color: #aee4df;
-    color: #0a6d63;
+    background-color: var(--autocomplete-background-selected);
     cursor: pointer;
 }
 
-#auto-complete-results-wrapper div p b {
-    color: #ED4F2F;
-}
-
-#auto-complete-results-wrapper div.active p b {
-    color: #FFAD33;
+#auto-complete-results-wrapper div p b, #auto-complete-results-wrapper div.active p b {
+    color: var(--autocomplete-match);
 }
 
 #auto-complete-results-wrapper div p {
@@ -2351,8 +2520,8 @@ ul.nav.navbar-right.pagination li.disabled a {
 }
 
 #yasr ul.nav.navbar-right.pagination li.active {
-    background-color: #ED4F2F;
-    border-color: #ED4F2F;
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
 }
 
 #yasr ul.nav.navbar-right.pagination li.active a {
@@ -2391,6 +2560,10 @@ ul.nav.navbar-right.pagination li.disabled a {
 /*-------------------------------------------------------------
 	SPARQL editor
 -------------------------------------------------------------*/
+.dialog .dialog-footer .confirm-button {
+    background-color: var(--primary-color) !important;
+}
+
 
 .yasqe .CodeMirror {
     min-height: 330px;
@@ -2552,8 +2725,8 @@ input[name=namespace] {
     border-radius: .25rem;
 }
 .badge-default  { background-color: #aaa }
-.badge-primary  { background-color: #04355E }
-.badge-info     { background-color: #ED4F2F }
+.badge-primary  { background-color: var(--secondary-color) }
+.badge-info     { background-color: var(--primary-color) }
 .badge-success  { background-color: #5cb85c }
 .badge-warning  { background-color: #f0ad4e }
 
@@ -2611,3 +2784,92 @@ input[name=namespace] {
     font: 700 16px Arial,sans-serif;
     color: #7e7b6d;
 }
+
+/*-------------------------------------------------------------
+	Main menu
+-------------------------------------------------------------*/
+.repo-info-home {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+}
+
+.repo-info-home div {
+    align-self: center;
+}
+
+.text-danger {
+    color: var(--color-danger-dark) !important;
+}
+
+.text-success {
+    color: var(--color-success-dark) !important;
+}
+
+.text-warning {
+    color: var(--color-warning-dark) !important;
+}
+
+.text-info {
+    color: var(--color-info-dark) !important;
+}
+
+.tag-danger {
+    background-color: var(--color-danger-dark) !important;
+}
+
+.tag-success {
+    background-color: var(--color-success-dark) !important;
+}
+
+.tag-warning {
+    background-color: var(--color-warning-dark) !important;
+}
+
+.tag-info {
+    background-color: var(--color-info-dark) !important;
+}
+
+.rzslider .rz-pointer {
+    background-color: var(--secondary-color) !important;
+}
+
+.rzslider .rz-selection {
+    background: var(--secondary-color) !important;
+}
+
+.login-form {
+    max-width: 600px;
+    padding-top: 4em;
+    margin: auto;
+}
+
+.btn-fade-warning {
+    animation: fade-button 2s infinite;
+    --fade-color: var(--color-warning-medium);
+}
+
+.btn-fade-danger {
+    animation: fade-button 2s infinite;
+    --fade-color: var(--color-danger-medium);
+}
+
+.btn-fade-warning:hover, .btn-fade-danger:hover {
+    background-color: var(--fade-color) !important;
+    border-color: var(--fade-color) !important;
+}
+
+@keyframes fade-button {
+    from {
+        background-color: #EBEBEB;
+        border-color: #EBEBEB;
+    }
+    50% {
+        background-color: var(--fade-color);
+        border-color: var(--fade-color);
+    }
+    to {
+        background-color: #EBEBEB;
+        border-color: #EBEBEB;
+    }
+}