graphdb-workbench 2.4.0-TR1 → 2.4.0-TR11

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

@@ -4,9 +4,9 @@
 	Colors used in multiple places
 -------------------------------------------------------------*/
 :root {
-    --autocomplete-background: rgba(var(--onto-green-rgb), 0.3);
-    --autocomplete-background-selected: rgba(var(--onto-green-rgb), 0.5);
-    --autocomplete-match: var(--onto-blue);
+    --autocomplete-background: hsla(var(--tertiary-color-hsl), 0.3);
+    --autocomplete-background-selected: hsla(var(--tertiary-color-hsl), 0.5);
+    --autocomplete-match: var(--secondary-color);
 }
 
 /*-------------------------------------------------------------
@@ -23,9 +23,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;
@@ -39,6 +37,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";
 }
@@ -481,11 +489,16 @@ select {
 }
 
 a {
-    color: var(--onto-blue);
+    color: var(--secondary-color);
+}
+
+/* Actual links that lead to an external site */
+a[href^="http"] {
+    text-decoration: underline;
 }
 
 a:focus, a:hover {
-    color: var(--onto-blue-light);
+    color: var(--secondary-color-light);
 }
 
 .font-weight-bold {
@@ -509,7 +522,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 {
@@ -535,21 +548,29 @@ a:focus, a:hover {
     height: 26px !important;
 }
 
-.btn.imports-queries {
-    cursor: default;
+.active-operation {
+    position: fixed;
+    top: 0;
+    left: 50vw;
 }
 
-.btn.imports-queries .btn {
-    padding: 0 !important;
-    border: 0 !important;
-    vertical-align: inherit;
-    color: #fff;
+.dropdown-menu-center {
+    left: 50% !important;
+    right: auto !important;
+    text-align: center !important;
+    transform: translate(-50%, 0) !important;
 }
 
-.btn.imports-queries .btn:hover {
-    color: rgba(255, 255, 255, 0.7);
+@media (max-width: 1000px) {
+    .active-operation {
+        left: 30vw;
+    }
 }
 
+.btn.active-operation {
+    padding: 0 !important;
+    border: 0 !important;
+}
 
 /*-------------------------------------------------------------
 	Headings
@@ -600,7 +621,7 @@ main menu height*/
 }
 
 .main-menu li a {
-    color: var(--onto-blue);
+    color: var(--secondary-color);
     text-decoration: none;
 }
 
@@ -634,7 +655,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: var(--onto-blue);
+    color: var(--secondary-color);
     cursor: pointer;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -644,7 +665,7 @@ main menu height*/
 .main-menu .menu-item-icon {
     font-size: 2.5rem;
     vertical-align: middle;
-    color: var(--onto-orange);
+    color: var(--primary-color);
     transform: scale(0.9);
     display: inline-block;
     -moz-transition: all 0.18s ease-out; /* FF4+ */
@@ -654,18 +675,24 @@ 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: var(--onto-orange);
+    background-color: var(--primary-color);
     color: #fff;
 }
 
 .main-menu .active .menu-item-icon {
-    color: var(--onto-blue);
+    color: var(--icon-on-primary-color);
 }
 
 .main-menu :not(.brand) .menu-element-root {
@@ -673,7 +700,7 @@ main menu height*/
 }
 
 .main-menu .brand {
-    background-color: var(--onto-blue);
+    background-color: var(--logo-background-color);
 }
 
 .main-menu .brand a {
@@ -722,7 +749,7 @@ main menu height*/
 }
 
 .main-menu .sub-menu li.active a {
-    background-color: var(--onto-orange);
+    background-color: var(--primary-color);
     font-weight: 500;
     color: #fff;
 }
@@ -775,7 +802,7 @@ main menu height*/
 }
 
 .toggle-menu:hover {
-    background-color: var(--onto-orange);
+    background-color: var(--primary-color);
 }
 
 .toggle-menu [class^="icon-"] {
@@ -791,12 +818,10 @@ main menu height*/
 }
 
 .small-logo {
-    width: 3.625rem;
     height: auto;
 }
 
 .big-logo {
-    width: 11.25rem;
     height: auto;
 }
 
@@ -844,7 +869,7 @@ main menu height*/
     text-overflow: ellipsis;
     overflow: hidden;
     padding: 0.5em 0.8rem 0.2em 0;
-    color: var(--onto-blue);
+    color: var(--secondary-color);
     margin-left: 0.8rem;
     margin-bottom: 0.5em;
 }
@@ -897,21 +922,21 @@ main menu height*/
 }
 
 .btn-primary {
-    background-color: var(--onto-orange);
-    border-color: var(--onto-orange);
+    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: var(--onto-orange-dark);
-    border-color: var(--onto-orange-dark);
+    background-color: var(--primary-color-dark);
+    border-color: var(--primary-color-dark);
 }
 
 .btn-secondary {
     background-color: #EBEBEB;
     border-color: #EBEBEB;
-    color: var(--onto-blue);
+    color: var(--secondary-color);
 }
 
 .btn-secondary.focus,
@@ -923,55 +948,55 @@ main menu height*/
 }
 
 .btn-secondary.active, .btn-secondary.active.focus, .btn-secondary.active:focus, .btn-secondary.active:hover {
-    background-color: var(--onto-orange);
-    border-color: var(--onto-orange);
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
     color: #fff;
 }
 
 .btn-info {
-    background-color: var(--onto-blue);
-    border-color: var(--onto-blue);
+    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: var(--onto-blue-light);
-    border-color: var(--onto-blue-light);
+    background-color: var(--secondary-color-light);
+    border-color: var(--secondary-color-light);
 }
 
 /* outline buttons */
 .btn-outline-primary {
-    color: var(--onto-orange);
-    border-color: var(--onto-orange);
+    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: var(--onto-orange);
-    background-color: rgba(var(--onto-orange-rgb), 0.2);
-    border-color: var(--onto-orange);
+    color: var(--primary-color);
+    background-color: hsla(var(--primary-color-hsl), 0.075);
+    border-color: var(--primary-color);
 }
 
 .btn-outline-secondary {
-    color: var(--onto-blue);
+    color: var(--secondary-color);
     background-image: none;
     background-color: transparent;
-    border-color: rgba(var(--onto-blue-rgb), 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: var(--onto-blue);
-    background-color: rgba(var(--onto-blue-rgb), 0.2);
-    border-color: var(--onto-blue);
+    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(var(--onto-blue-rgb), 0.2);
-    border-color: var(--onto-blue);
+    background-color: hsla(var(--secondary-color-hsl), 0.2);
+    border-color: var(--secondary-color);
 }
 
 .btn-group-lg > .btn, .btn-lg {
@@ -980,22 +1005,22 @@ main menu height*/
 }
 
 .btn-link, .btn-link a {
-    color: var(--onto-orange);
+    color: var(--primary-color);
     padding: .5em .8em;
+    text-decoration: underline;
+    text-decoration-style: dotted !important;
 }
 
 .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: var(--onto-orange-dark);
-    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 {
@@ -1003,7 +1028,7 @@ main menu height*/
 }
 
 .btn-link.active, .btn-link:hover.active, .btn-link:focus.active, .btn-link:active.active {
-    background-color: var(--onto-orange-dark);
+    background-color: var(--primary-color-dark);
     color: #fff;
 }
 
@@ -1131,16 +1156,16 @@ footer.footer .container-fluid.main-container p {
 .open > .btn-secondary.dropdown-toggle:focus,
 .open > .btn-secondary.dropdown-toggle:hover {
     color: #fff;
-    background-color: var(--onto-orange);
-    border-color: var(--onto-orange);
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
 }
 
 .open > .btn-secondary.dropdown-toggle [class^="icon-"] {
-    color: var(--onto-blue) !important;
+    color: var(--icon-on-primary-color) !important;
 }
 
 .btn-secondary.dropdown-toggle [class^="icon-"] {
-    color: var(--onto-orange);
+    color: var(--primary-color);
 }
 
 .dropdown-toggle {
@@ -1168,7 +1193,7 @@ footer.footer .container-fluid.main-container p {
 
 .dropdown-menu {
     border: none;
-    background-color: var(--onto-orange);
+    background-color: var(--primary-color);
     border-radius: 0;
     padding: 0;
     min-width: 100%;
@@ -1225,19 +1250,19 @@ footer.footer .container-fluid.main-container p {
 }
 
 .text-primary {
-    color: var(--onto-orange) !important;
+    color: var(--primary-color) !important;
 }
 
 .text-secondary {
-    color: var(--onto-blue) !important;
+    color: var(--secondary-color) !important;
 }
 
 .text-tertiary {
-    color: var(--onto-green) !important;
+    color: var(--tertiary-color-dark) !important;
 }
 
 .text-info {
-    color: var(--onto-green) !important;
+    color: var(--tertiary-color) !important;
 }
 
 .rdf-list .hidden-data-value {
@@ -1255,27 +1280,27 @@ footer.footer .container-fluid.main-container p {
 }
 
 .alert-warning, .alert-info, .alert-help, .alert-danger, .alert-success {
-    color: #000000A8;
+    color: #000000AF;
 }
 
 .alert-warning {
-    background-color: #f9e6c0;
+    background-color: var(--color-warning-light);
 }
 
 .alert-info {
-    background-color: #cfefec;
+    background-color: var(--color-info-light);
 }
 
 .alert-help {
-    background-color: #e7f7f5;
+    background-color: var(--color-help-light);
 }
 
 .alert-success {
-    background-color: #dff0d8;
+    background-color: var(--color-success-light);
 }
 
 .alert-danger {
-    background-color: #fbdbd5;
+    background-color: var(--color-danger-light);
 }
 
 .alert-info, .alert-warning, .alert-help, .alert-danger, .alert-success {
@@ -1288,13 +1313,13 @@ footer.footer .container-fluid.main-container p {
 .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: #00000080;
+    color: #0000008F;
 }
 
 .alert-info:before {
@@ -1313,16 +1338,6 @@ footer.footer .container-fluid.main-container p {
     content: "\e920";
 }
 
-.tab-error:after {
-    font-family: 'icomoon', sans-serif !important;
-    font-size: 1em;
-    vertical-align: middle;
-    line-height: 1;
-    position: absolute;
-    left: 0.1em;
-    content: "\e920";
-}
-
 .alert-success:before {
     content: "\e914";
 }
@@ -1359,7 +1374,7 @@ footer.footer .container-fluid.main-container p {
 .nav-tabs .nav-link {
     border-radius: 0;
     cursor: pointer;
-    color: var(--onto-blue);
+    color: var(--secondary-color);
     background-color: #eee;
 }
 
@@ -1417,7 +1432,7 @@ ul[class*="style-"] li:before {
     left: 0;
     top: -0.07em;
     font-size: 1.2em;
-    color: var(--onto-green);
+    color: var(--tertiary-color);
 }
 
 .text-white ul[class*="style-"] li:before {
@@ -1504,7 +1519,7 @@ ul.style-arrow li:before {
 .progress-bar {
     height: 2rem;
     color: #000;
-    background-color: rgba(var(--onto-green-rgb), 0.5);
+    background-color: hsla(var(--tertiary-color-hsl), 0.5);
     padding: 0 0.2em;
     text-align: center;
 }
@@ -1523,7 +1538,7 @@ ul.style-arrow li:before {
 .progress-square .progress-bar {
     width: 100%;
     display: block;
-    background-color: var(--onto-blue);
+    background-color: var(--secondary-color);
     position: absolute;
     bottom: 0;
 }
@@ -1536,16 +1551,16 @@ ul.style-arrow li:before {
 	Background colors
 -------------------------------------------------------------*/
 .bg-primary {
-    background-color: var(--onto-orange);
+    background-color: var(--primary-color);
 }
 
 .bg-secondary {
-    background-color: var(--onto-blue);
+    background-color: var(--secondary-color);
     color: #fff;
 }
 
 .bg-ternary {
-    background-color: var(--onto-green);
+    background-color: var(--tertiary-color);
 }
 
 .bg-lightgray {
@@ -1610,7 +1625,7 @@ code {
 
 .close:hover::before {
     transform: scale(1.2);
-    color: var(--onto-orange);
+    color: var(--primary-color);
 }
 
 .close.absolute {
@@ -1633,7 +1648,7 @@ code {
 }
 
 .data-value {
-    color: var(--onto-blue);
+    color: var(--secondary-color);
     font-weight: 400;
 }
 
@@ -1664,7 +1679,7 @@ code {
 }
 
 .tag-primary {
-    background-color: var(--onto-blue);
+    background-color: var(--secondary-color);
 }
 
 .tag-inverse {
@@ -1744,7 +1759,7 @@ code {
 }
 
 .card.button:hover {
-    border-color: rgba(var(--onto-orange-rgb), 0.4)
+    border-color: hsla(var(--primary-color-hsl), 0.4)
 }
 
 .card.button .card-block {
@@ -1765,7 +1780,7 @@ code {
 }
 
 .card.button .btn:hover {
-    background-color: rgba(var(--onto-orange-rgb), 0.1)
+    background-color: hsla(var(--primary-color-hsl), 0.1)
 }
 
 .card.button .btn [class^="icon-"] {
@@ -1775,14 +1790,14 @@ code {
 }
 
 .card.active {
-    border-color: var(--onto-blue);
+    border-color: var(--secondary-color);
     min-height: 300px;
 }
 
 .card.active .card-footer {
-    background-color: var(--onto-blue);
+    background-color: var(--secondary-color);
     color: #fff;
-    border-color: var(--onto-blue);
+    border-color: var(--secondary-color);
     position: absolute;
     bottom: 0;
     left: 0;
@@ -1952,63 +1967,67 @@ code {
 	Tooltips
 -------------------------------------------------------------*/
 .angular-tooltip {
-    background-color: var(--onto-blue);
+    background-color: var(--secondary-color);
 }
 
 .angular-tooltip.angular-tooltip-top:after {
-    border-top-color: var(--onto-blue);
+    border-top-color: var(--secondary-color);
 }
 
 .angular-tooltip.angular-tooltip-top-left:after {
-    border-top-color: var(--onto-blue);
+    border-top-color: var(--secondary-color);
 }
 
 .angular-tooltip.angular-tooltip-top-right:after {
-    border-top-color: var(--onto-blue);
+    border-top-color: var(--secondary-color);
 }
 
 
 .angular-tooltip.angular-tooltip-right-top:after {
-    border-right-color: var(--onto-blue);
+    border-right-color: var(--secondary-color);
 }
 
 .angular-tooltip.angular-tooltip-right:after {
-    border-right-color: var(--onto-blue);
+    border-right-color: var(--secondary-color);
 }
 
 .angular-tooltip.angular-tooltip-right-bottom:after {
-    border-right-color: var(--onto-blue);
+    border-right-color: var(--secondary-color);
 }
 
 .angular-tooltip.angular-tooltip-bottom:after {
-    border-bottom-color: var(--onto-blue);
+    border-bottom-color: var(--secondary-color);
 }
 
 .angular-tooltip.angular-tooltip-bottom-left:after {
-    border-bottom-color: var(--onto-blue);
+    border-bottom-color: var(--secondary-color);
 }
 
 .angular-tooltip.angular-tooltip-bottom-right:after {
-    border-bottom-color: var(--onto-blue);
+    border-bottom-color: var(--secondary-color);
 }
 
 .angular-tooltip.angular-tooltip-left:after {
-    border-left-color: var(--onto-blue);
+    border-left-color: var(--secondary-color);
 }
 
 .angular-tooltip.angular-tooltip-left-bottom:after {
-    border-left-color: var(--onto-blue);
+    border-left-color: var(--secondary-color);
 }
 
 .angular-tooltip.angular-tooltip-left-top:after {
-    border-left-color: var(--onto-blue);
+    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(var(--onto-orange-rgb), 0.1);
+    background-color: hsla(var(--primary-color-hsl), 0.1);
 }
 
 .list-group-item pre {
@@ -2019,7 +2038,7 @@ code {
     float: right;
     margin-top: 0.7em;
     font-weight: 400;
-    color: var(--onto-orange);
+    color: var(--primary-color);
     cursor: pointer;
     display: none;
 }
@@ -2093,7 +2112,7 @@ li.remote {
 }
 
 .form-control:focus {
-    border-color: rgba(var(--onto-blue-rgb), 0.5);
+    border-color: hsla(var(--secondary-color-hsl), 0.5);
 }
 
 .input-group-btn {
@@ -2216,12 +2235,12 @@ input.switch:empty ~ label:after {
 }
 
 input.switch:checked ~ label:before {
-    background-color: rgba(var(--onto-blue-rgb), .5)
+    background-color: hsla(var(--secondary-color-hsl), .5)
 }
 
 input.switch:checked ~ label:after {
     left: 1.3em;
-    background-color: var(--onto-blue);
+    background-color: var(--secondary-color);
 }
 
 .card.active input.switch:checked ~ label:before {
@@ -2261,6 +2280,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";
@@ -2397,8 +2478,8 @@ ul.nav.navbar-right.pagination li.disabled a {
 }
 
 #yasr ul.nav.navbar-right.pagination li.active {
-    background-color: var(--onto-orange);
-    border-color: var(--onto-orange);
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
 }
 
 #yasr ul.nav.navbar-right.pagination li.active a {
@@ -2437,6 +2518,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;
@@ -2598,8 +2683,8 @@ input[name=namespace] {
     border-radius: .25rem;
 }
 .badge-default  { background-color: #aaa }
-.badge-primary  { background-color: var(--onto-blue) }
-.badge-info     { background-color: var(--onto-orange) }
+.badge-primary  { background-color: var(--secondary-color) }
+.badge-info     { background-color: var(--primary-color) }
 .badge-success  { background-color: #5cb85c }
 .badge-warning  { background-color: #f0ad4e }
 
@@ -2670,3 +2755,43 @@ input[name=namespace] {
 .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;
+}