graphdb-workbench/dist/css/workbench-custom.css

The web application for GraphDB APIs

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
}

.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

.dropdown-submenu > a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #cccccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover > a:after {
    border-left-color: #ffffff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
    left: -100%;
    margin-left: 10px;
}

@media (min-width: 768px) {
    .modal-dialog {
        width: 600px;
        margin: 30px auto;
    }

    .modal .modal-dialog {
        padding: 0; /* Always no padding and relative position since there is a clash with the google chart css file, which has a rule for .modal-dialog  */
        position: relative;
    }

    .modal-content {
        -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
        box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    }

    .modal-sm {
        width: 300px;
    }
}

@media (min-width: 992px) {
    .modal-lg {
        width: 900px;
    }
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    background-color: #018ae1;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
    background-color: #018ae1;
}

@media (max-width: 767px) {
    .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
        border-color: #018ae1;
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
        background-color: #018ae1;
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
        background-color: #018ae1;
    }
}

.label-primary[href]:hover,
.label-primary[href]:focus {
    background-color: #018ae1;
}

.panel-info > .panel-heading {
    color: #000000;
}

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
    background-color: #003663;
    border-color: #003663;
}

.label-success {
    background-color: #0cb0a0;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    background-color: #0cb0a0;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
    background-color: #0cb0a0;
}

@media (max-width: 767px) {
    .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
        border-color: #0cb0a0;
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
        background-color: #0cb0a0;
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
        background-color: #0cb0a0;
    }
}

.navbar-inverse {
    background-color: #008cba;
    border-color: #018ae1;
}

.navbar-inverse .navbar-brand {
    color: #ffffff;
}

.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
    color: #ffffff;
    background-color: transparent;
}

.navbar-inverse .navbar-text {
    color: #ffffff;
}

.navbar-inverse .navbar-nav > li > a {
    color: #ffffff;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    color: #ffffff;
    background-color: #0cb0a0;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
    color: #ffffff;
    background-color: #0cb0a0;
}

.navbar-inverse .navbar-nav > .disabled > a,
.navbar-inverse .navbar-nav > .disabled > a:hover,
.navbar-inverse .navbar-nav > .disabled > a:focus {
    color: #444444;
    background-color: transparent;
}

.navbar-inverse .navbar-toggle {
    border-color: transparent;
}

.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
    background-color: transparent;
}

.navbar-inverse .navbar-toggle .icon-bar {
    background-color: #ffffff;
}

.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
    border-color: #007196;
}

.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
    color: #ffffff;
}

.navbar-inverse .navbar-nav > .dropdown > a:hover .caret {
    border-top-color: #ffffff;
    border-bottom-color: #ffffff;
}

.navbar-inverse .navbar-nav > .dropdown > a .caret {
    border-top-color: #ffffff;
    border-bottom-color: #ffffff;
}

.navbar-inverse .navbar-nav > .open > a .caret,
.navbar-inverse .navbar-nav > .open > a:hover .caret,
.navbar-inverse .navbar-nav > .open > a:focus .caret {
    border-top-color: #ffffff;
    border-bottom-color: #ffffff;
}

@media (max-width: 767px) {
    .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
        border-color: #0cb0a0;
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
        color: #ffffff;
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #ffffff;
        background-color: #0cb0a0;
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #ffffff;
        background-color: #0cb0a0;
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
        color: #444444;
        background-color: transparent;
    }
}

.navbar-inverse .navbar-link {
    color: #ffffff;
}

.navbar-inverse .navbar-link:hover {
    color: #ffffff;
}

.navbar-inverse .dropdown-menu {
    background-color: #008cba;
}

.navbar-inverse .dropdown-menu > li > a,
.navbar-inverse .dropdown-menu > li > a:focus {
    color: #ffffff;
}

.navbar-inverse .dropdown-menu > li > a:hover,
.navbar-inverse .dropdown-menu > .active > a,
.navbar-inverse .dropdown-menu > .active > a:hover {
    background-color: #0cb0a0;
}

.panel-danger > .panel-heading {
    color: #fff;
    background-color: #f04124;
}

.modal .modal-dialog {
    padding: 0; /* Always no padding and relative position since there is a clash with the google chart css file, which has a rule for .modal-dialog  */
    position: relative;
}

/* Styles for the shortcuts directive */

#keyboardShortcuts {
    background-color: #f7f7f7;
    padding: 0px 5px;
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 90%;
	z-index: 10;
}


.hotkeys-container {
  display: table !important;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: #333;
  font-size: 1em;
  background-color: rgba(255,255,255,0.95);
}

.hotkeys-container.fade {
  z-index: -1024;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -moz-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}

.hotkeys-container.fade.in {
  z-index: 10002;
  visibility: visible;
  opacity: 1;
}

.hotkeys {
  width: 100%;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}

.hotkeys .close {
	position: fixed;
	top: 20px;
	right: 20px;
}

.hotkeys table {
  margin: auto;
  color: #333;
}

.hotkeys-keys {
  padding: 5px;
  text-align: right;
}

.hotkeys-text {
  padding-left: 10px;
}

[disabled-wrapper] {
    position: relative;
    z-index: 0;
}

[disabled-wrapper] div.disabled {
    cursor: not-allowed;
}

[disabled-wrapper] [disabled] {
    position: relative;
    z-index: -1;
}