nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/common-ui.css

/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: local('Roboto Light'),
    local('Roboto-Light'),
    url('../fonts/Roboto/Roboto-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 300;
    src: local('Roboto LightItalic'),
    local('Roboto-LightItalic'),
    url('../fonts/Roboto/Roboto-LightItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: normal;
    src: local('Roboto Regular'),
    local('Roboto-Regular'),
    url('../fonts/Roboto/Roboto-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: local('Roboto Medium'),
    local('Roboto-Medium'),
    url('../fonts/Roboto/Roboto-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: bold;
    src: local('Roboto Bold'),
    local('Roboto-Bold'),
    url('../fonts/Roboto/Roboto-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: normal;
    src: local('Roboto Italic'),
    local('Roboto-Italic'),
    url('../fonts/Roboto/Roboto-Italic.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: normal;
    src: local('RobotoSlab Regular'),
    local('RobotoSlab-Regular'),
    url('../fonts/Roboto_Slab/RobotoSlab-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: bold;
    src: local('RobotoSlab Bold'),
    local('RobotoSlab-Bold'),
    url('../fonts/Roboto_Slab/RobotoSlab-Bold.ttf') format('truetype');
}

/*remove margin from font awesome*/
i[class^="fa-"]:before, i[class*=" fa-"]:before {
    margin: -1px;
}

/*remove margin from flowfont*/
i[class^="icon-"]:before, i[class*=" icon-"]:before {
    margin: -2px;
}

/*shift rotated font awesome icons*/
.fa-rotate-90 {
    left: -2px !important;
}

body {
    display: block;
    font-family: Roboto, sans-serif;
    overflow: hidden;
    color: #262626;
}

body.md-default-theme, body, html.md-default-theme, html {
    background-color: white;
}

button {
    border-radius: 0;
}

.value-color {
    color: #775351;
}

ul.links li {
    float: left;
    display: block;
    margin-left: 10px;
    padding: 4px;
    text-align: center;
    font-size: 11px;
    font-weight: normal;
    text-decoration: none;
}

ul.links span.header-link-over {
    color: #264c58;
    text-decoration: underline;
}

/*
    General Styles
*/

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.clear {
    clear: both;
}

.pointer {
    cursor: pointer !important;
}

.hidden {
    display: none;
}

.blank, .unset, .sensitive {
    font-weight: normal !important;
    color: #a8a8a8 !important;
}

.required {
    font-weight: bold !important;
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ellipsis.multiline {
    white-space: normal;
}

.table-cell {
    overflow: hidden;
    white-space: nowrap;
    line-height: normal;
    float: left;
    margin-top: 4px;
}

label {
    font-family: 'Roboto Slab', serif;
    font-size: 12px;
    color: #262626; /*base-font-color*/
    letter-spacing: 0.05rem;
    display: block;
    margin-bottom: 2px;
}

/* placeholder styles */

*::placeholder {
    color: #728e9b;
}
*::-webkit-input-placeholder {
    color: #728e9b;
}
*:-moz-placeholder {
    color: #728e9b;
}
*::-moz-placeholder {
    color: #728e9b;
}
*:-ms-input-placeholder {
    color: #728e9b;
}

input[type=text], input[type=password] {
    background-color: #eaeef0;
    border: 1px solid #eaeef0;
    font-family: Roboto, sans-serif;
    font-size: 13px;
    padding: 0px 10px 0px 10px;
    resize: none;
    height: 32px;
    width: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box;
    color: #262626;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

input:focus, textarea:focus {
    background-color: #fff;
    border: 1px solid #004849; /*link-color*/
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
    outline: none;
}

textarea {
    background-color: #eaeef0;
    border: 1px solid #eaeef0;
    font-family: Roboto, sans-serif;
    font-size: 13px !important;
    padding: 10px 10px;
    resize: vertical;
    height: 32px;
    width: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box;
    color: #262626;
    white-space: pre-wrap;
    overflow-y: auto;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

textarea[disabled] {
    background: #b2b8c1;
    color: #dbdee2;
    border: 1px solid #b2b8c1;
}

ul.property-info {
    list-style-type: disc;
    margin-left: 10px;
}

ul.property-info li {
    padding: 0px 0px;
    margin-left: 10px;
}

div.nf-checkbox {
    cursor: pointer;
    width: 12px;
    height: 12px;
    float: left;
    margin-right: 4px;
}

.nf-checkbox-label {
    cursor: pointer;
}

div.checkbox-unchecked {
    background: transparent url(../images/inputCheckbox.png) no-repeat scroll top left;
}

div.checkbox-checked {
    background: transparent url(../images/inputCheckbox.png) no-repeat scroll top right;
}

div.ajax-loading {
    background-image: url(../images/iconLoading.gif);
}

div.ajax-complete:before {
    font-family: FontAwesome;
    content: "\f00c";
    font-size: 16px;
    color: #70B59A;
}

div.ajax-error:before {
    font-family: FontAwesome;
    content: "\f00d";
    font-size: 16px;
    color: #D18686;
}

.refresh-button {
    float: left;
}

.ui-draggable .dialog-header {
    cursor: move;
}

span.link:focus {
    outline: none;
}

span.link {
    cursor: pointer;
    color: #004849; /*link-color*/
    font-weight: normal;
    display: inline-block;
    border-bottom: 1px solid #CCDADB;
    font-size: 13px;
    font-family: Roboto;
}

span.link-over {
    border-bottom: 1px solid #004849;
}

span.link-bold {
    font-weight: bold;
    border-bottom: none;
}

button {
    height: 28px;
    width: 28px;
    border: 1px solid #CCDADB; /*tint link-color 80%*/
    background-color: rgba(249, 250, 251, 0.97);
    color: #004849;
}

button.refresh-button {
    font-size: 16px;
}

button:hover {
    border: 1px solid #004849; /*link-color*/
}

button:disabled {
    color: #CCDADB !important; /*tint link-color 80%*/
    cursor: not-allowed;
    border: 1px solid #CCDADB; /*tint link-color 80%*/
}

/* angular material override */

button:focus {
    outline: none;
}

div:focus {
    outline: none;
}

input:focus {
    background-color: #fff;
    border: 1px solid #004849; /*link-color*/
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
    outline: none;
}

/* filter controls */

.filter-controls {
    position: absolute;
    top: 10px;
}

.filter-container {
    height: 32px;
    width: 100%;
    float: left;
}

.filter {
    margin-right: 3px;
    float: left;
}

input.filter {
    width: 173px;
}

.filter-type {
    float: left;
    width: 148px;
}

.filter-status {
    margin-top: 10px;
    color: #775351;
    font-family: Roboto;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 5px;
}

/* overlay icon styles */

.stop-configure-icon.fa-stop {
    display : inline-block;
    font-size: 15px;
    position : relative;
    top : -1px;
}

.stop-configure-icon::after {
    content : "\f013";
    font-size: 14px;
    position : relative;
    top : 0px;
    left : -8px;
    color : #ffffff;
    -webkit-text-stroke-width : 1px;
    -webkit-text-stroke-color : #004849;

}

*.stop-configure-icon + span {
    display : inline-block;
    padding  : 0px 0px 0px 0px;
    margin-left  : -10px;
}

/* buttons */

button.fa {
    color: #004849;
    font-size: 16px;
    cursor: pointer;
    line-height: 25px;
}

button.icon {
    color: #004849;
    font-size: 16px;
}

div.button-icon span {
    padding-left: 5px;
    vertical-align: middle;
    font-style: normal;
    font-family: Roboto;
    font-size: 11px;
}

div.button-icon {
    float: left !important;
    margin-left: 20px;
    font-size: 18px !important;
}

div.button.auto-width,
div.button-icon.auto-width {
    width : auto !important;
}

div.button {
    height: 32px;
    width: 90px;
    padding: 0 8px;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 11px;
    line-height: 33px;
    text-align: center;
    border: 0px;
    float: right;
    position: relative;
    background: #728E9B;
    color: #fff;
    cursor: pointer;
}

div.button.disabled-button {
    color: #a8a8a8 !important;
    cursor: not-allowed;
    opacity: 0.7;
}

div.button:hover:not(.disabled-button) {
    background-color: #004849;
}

div.secondary-button {
    height: 32px;
    width: 90px;
    padding: 0 8px;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 11px;
    line-height: 33px;
    text-align: center;
    border: 0px;
    float: right;
    position: relative;
    background: #E3E8EB;
    color: #004849;
    cursor:pointer
}

div.secondary-button:hover {
    background-color: #C7D2D7;
}

/* tooltips */

.qtip-nifi {
    border: 0px !important;
    border-radius: 2px;
    background-color: rgba(0, 0, 0, 0.54) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    font-family: Roboto;
    font-weight: 500;
    font-size: 13px;
    color: #fff !important;
}

div.nifi-tooltip {
    border: 0px !important;
    border-radius: 2px;
    background-color: rgba(0, 0, 0, 0.80) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    font-family: Roboto;
    font-weight: 500;
    font-size: 13px;
    color: #fff !important;
    max-width: 500px;
    word-wrap: break-word;
}

.scrollable {
    border-bottom: 1px solid #d0dbe0;
}

/*context menu */

.context-menu {
    display: none;
    position: absolute;
    z-index: 10006;
    font-size: 13px;
    padding:3px 0;
    background-color:rgba(249,250,251,0.97); /*tint base-color 96%*/
    border:1px solid #004849; /*link-color*/
    box-shadow: 0 3px 6px rgba(0,0,0,0.3);
    width: 215px;
    max-height: inherit;
    color:#004849
}

div.context-menu-item {
    cursor: pointer;
    height: 20px;
    padding-top: 4px;
    padding-left: 4px;
}

div.context-menu-item.hover {
    background-color:#C7D2D7; /*tint base-color 60%*/
    box-shadow:0 1px 1px rgba(0,0,0,0.15);
}

.context-menu-item-img {
    float: left;
    width: 16px;
    height: 16px;
    background-size: cover;
}

.context-menu-item-img.fa {
    position: relative;
    top: 2px;
    left: 2px;
}

.context-menu-item-img.icon {
    position: relative;
    top: 1px;
    left: 3px;
}

div.context-menu-item-text {
    margin-left: 4px;
    line-height: 16px;
    float: left;
    color: #262626;
}

div.context-menu-group-item-img {
    float: right;
    width: 16px;
    height: 16px;
    background-size: cover;
    font-size: 14px;
}

div.context-menu-item-separator {
    height: 1px;
    background-color: #C7D2D7;
    margin-top: 3px;
    margin-bottom: 3px;
}

/* search */

li.search-no-matches {
    padding: 4px;
    font-weight: bold;
    color: #aaa;
    font-style: italic;
}

/* progress bars */

md-progress-linear > div {
    background-color: #eaeef0 !important;
}

.setting {
    margin-bottom: 15px;
}

.setting-name {
    font-size: 12px;
    font-weight: 500;
    font-family: Roboto Slab;
    text-transform: capitalize;
    padding-bottom: 4px;
    color: #262626;
}

.setting-name .fa {
    color: #004849;
    margin-left: 5px;
}

.setting-field .fa {
    color: #004849;
    margin-left: 5px;
}

.setting-field {
    line-height: normal;
    width: 100%;
    color: #775351;
    font-size: 13px;
    font-weight: 500;
}

.setting-header {
    color: #728e9b;
    font-size: 12pt;
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: bold;
    padding-bottom: 20px;
    text-overflow: ellipsis;
}

.CodeMirror {
    border: 1px solid #aaa;
    font-family: monospace;
    background-color: #fff;
    cursor: default;
    line-height: normal;
}

/* jquery ui autocomplete override */

.ui-autocomplete {
    overflow: auto !important;
    border: 1px solid #aaaaaa !important;
    font-size: 12px !important;
    font-family: Roboto !important;
}

.ui-menu .ui-menu-item a {
    display: block;
    border: 1px solid transparent;
    line-height: 1.5;
    margin: 0 !important;
    color: #333 !important;
}

.ui-menu .ui-menu-item a.ui-state-active {
    background: #D4E0E5 !important;
    border: 1px solid #999999;
}

/* jquery ui slider override */

.ui-slider-handle.ui-state-active {
    background: #fff !important;
}