ni-webcharts-legends/styles/webcharts-legends.css

legends for webcharts

/**
# Styling the Webcharts

Webcharts styling through CSS is still WIP and the ability to style them through
CSS is limited.
*/

:root {
    --ni-black: #2B3033;
}

ni-color-scale {
    font-family: "Open Sans", verdana, arial, sans-serif;
    font-size: 12px;
    font-style: normal;
    color: #C7CCD0;
}

ni-cursor-legend {
    display: inline-block;
    border: 1px solid #C7CCD0;
    background-color: white;
    overflow: visible;
    font-family: "Open Sans", verdana, arial, sans-serif;
    font-size: 12px;
}

ni-cursor-legend jqx-drop-down-list.jqx-drop-down-list {
    --jqx-drop-down-list-default-width: 100%;
}

ni-cursor-legend .jqx-content-label {
    width: 100%;
}

ni-cursor-legend .ni-cursors-box {
    width: 100%;
}

ni-cursor-legend .ni-command-button {
    width: 25px;
    height: 25px;
    margin: 2px;
    float: right;
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(0, 0, 0, 0);
    border: 0px solid #efefef;
}

ni-cursor-legend .ni-master-row {
    width: 100%;
    border: 0;
    background-color: white;
}

ni-cursor-legend .ni-expand-box {
    width: 1%;
    white-space: nowrap;
    border-right: 0;
    border-left: 0;
}

ni-cursor-legend .ni-expand-button {
    width: 20px;
    height: 20px;
    margin: 2px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(0, 0, 0, 0);
    border: 0;
}

ni-cursor-legend .ni-cursor-box {
    width: 100%;
    border-collapse: collapse;
    border-right: 0;
    border-left: 0;
    white-space: nowrap;
}

ni-cursor-legend .ni-cursor-display {
    border: 0px solid black;
    background-color: white;
    margin: auto;
    vertical-align: middle;
}

ni-cursor-legend .ni-cursor-title {
    margin-left: 4px;
    white-space: nowrap;
    vertical-align: middle;
}

ni-cursor-legend .ni-x-box {
    width: 15%;
    border-right: 0;
    border-left: 0;
    padding-left: 5px;
}

ni-cursor-legend .ni-y-box {
    width: 15%;
    border-right: 0;
    border-left: 0;
    padding-left: 5px;
}

ni-cursor-legend .ni-actions-box {
    width: 120px;
    min-width: 120px;
    border-right: 0;
    border-left: 0;
}

ni-cursor-legend .ni-action-button {
    width: 25px;
    height: 25px;
    margin: 2px;
    background-repeat: no-repeat;
    background-position: center;
    float: right;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid rgba(0, 0, 0, 0);
}

ni-cursor-legend .ni-cursor-legend-master-control {
    width: 1%;
    white-space: nowrap;
}

ni-cursor-legend .ni-details-box {
    width: 100%;
    display: table-row;
    border: 3px solid white;
}

ni-cursor-legend .ni-details {
    width: 100%;
    background-color: white;
    table-layout: fixed;
}

ni-cursor-legend .ni-details-row {
    width: 100%;
    margin-top: 2px;
    margin-bottom: 2px;
    background-color: white;
}

ni-cursor-legend .ni-details-row-title-box {
    width: 0%;
    visibility: hidden;
}

ni-cursor-legend .ni-details-row-title {
    margin-left: 2px;
}

ni-cursor-legend .ni-details-row-control-box {
    padding: 1px;
    display: inline-block;
    height: 30px;
    width: 100%;
}


ni-cursor-legend jqx-color-picker.jqx-color-picker {
    --jqx-color-picker-palette-size: 160px;
}

ni-cursor-legend jqx-color-picker.jqx-color-picker .color-controls-container {
    width: 100px;
    padding: 8px 0;
}

ni-cursor-legend jqx-color-picker.jqx-color-picker .color-input {
    height: 30px;
    width: 75px;
    margin: 3px;
}

ni-cursor-legend .ni-colorbox-content {
    text-shadow: none;
    height: inherit;
    padding-top: 5px;
    padding-bottom: 5px;
}

ni-cursor-legend .ni-selector-title {
    white-space: nowrap;
}

ni-cursor-legend .ni-selector {
    box-sizing: border-box;
}

ni-cursor-legend .ni-selector-icon {
    width: 80px;
    height: 16px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    float: right;
}

ni-cursor-legend jqx-button.jqx-button .jqx-button,
ni-cursor-legend jqx-toggle-button.jqx-toggle-button .jqx-button {
    background: transparent;
}

ni-graph-tools {
    display: inline-block;
    overflow: auto;
    border: 0px solid #C7CCD0;
}

ni-graph-tools .ni-graph-tools-box {
    width: 100%;
    height: 100%;
}

ni-graph-tools .ni-button-box {
    text-align: center;
}

ni-graph-tools .ni-button.ni-active-button {
    border-bottom: 4px solid #77baff;
}

ni-graph-tools:not([disabled]) .ni-button.ni-active-button {
    opacity: 1;
}

ni-graph-tools .ni-button {
    width: 25px;
    height: 27px;
    margin-left: 2px;
    margin-right: 2px;
    background-repeat: no-repeat;
    background-position: center;
    border: 0px solid #aaaaaa;
    border-bottom: 4px solid rgba(255, 255, 255, 0);
    border-radius: 0px;
    background-color: rgba(255, 255, 255, 0);
}

ni-graph-tools .ni-button .jqx-button {
    background: transparent;
}

ni-plot-legend {
    display: inline-block;
    overflow: visible;
    border: 1px solid #C7CCD0;
    background-color: white;
    font-family: "Open Sans", verdana, arial, sans-serif;
    font-size: 12px;
}

ni-plot-legend jqx-accordion.jqx-accordion,
ni-plot-legend jqx-drop-down-list.jqx-drop-down-list,
ni-plot-legend jqx-color-picker.jqx-color-picker,
ni-plot-legend jqx-color-picker.jqx-color-picker input,
ni-cursor-legend jqx-drop-down-list.jqx-drop-down-list,
ni-cursor-legend jqx-color-picker.jqx-color-picker,
ni-cursor-legend jqx-color-picker.jqx-color-picker input {
    font-family: inherit;
    font-size: inherit;
    color: var(--ni-black);
    --jqx-surface: white;
    --jqx-surface-color: var(--ni-black);
}

ni-plot-legend jqx-drop-down-list.jqx-drop-down-list .jqx-action-button,
ni-cursor-legend jqx-drop-down-list.jqx-drop-down-list .jqx-action-button {
    width: 100%;
}

ni-plot-legend jqx-drop-down-list.jqx-drop-down-list .jqx-action-button > span.jqx-token,
ni-cursor-legend jqx-drop-down-list.jqx-drop-down-list .jqx-action-button > span.jqx-token {
    width: 100%;
}

ni-plot-legend .jqx-drop-down-container span.jqx-content-label, ni-cursor-legend .jqx-drop-down-container span.jqx-content-label {
    justify-content: space-between;
    width: 100%;
}

ni-plot-legend jqx-list-box.jqx-list-box:not(:focus):not([selection-mode="checkBox"]):not([selection-mode="radioButton"]) jqx-list-item.jqx-list-item[selected][focus],
ni-plot-legend jqx-list-item.jqx-list-item[selected][focus],
ni-plot-legend jqx-list-item.jqx-list-item[selected],
ni-cursor-legend jqx-list-box.jqx-list-box:not(:focus):not([selection-mode="checkBox"]):not([selection-mode="radioButton"]) jqx-list-item.jqx-list-item[selected][focus],
ni-cursor-legend jqx-list-item.jqx-list-item[selected][focus],
ni-cursor-legend jqx-list-item.jqx-list-item[selected] {
  background: transparent;
}

ni-plot-legend .ni-plot-legend-box {
    width: 100%;
    height: 100%;
}

ni-plot-legend .ni-master-row {
    padding-top: 1px;
    padding-bottom: 0;
    border-color: white;
    background-color: white;
}

ni-plot-legend .ni-plot-display {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    display: inline-block;
    background-color: white;
    border: 0px solid #aaaaaa;
    margin-bottom: 1px;
}

ni-plot-legend .ni-plot-display svg {
    vertical-align: middle;
}

ni-plot-legend .ni-plot-title {
    vertical-align: middle;
    white-space: nowrap;
    margin-left: 5px;
    font-family: "Open Sans", verdana, arial, sans-serif;
    font-size: 12px;
}

ni-plot-legend .ni-details-box {
    overflow: visible;
}

ni-plot-legend .ni-details {
    width: 100%;
    height: 100%;
    table-layout: fixed;
}

ni-plot-legend .ni-details-row {
    width: 100%;
    margin-top: 2px;
    margin-bottom: 2px;
}

ni-plot-legend .ni-detail-row-title-box {
    width: 0%;
    visibility: hidden;
}

ni-plot-legend .hover .ni-detail-row-title {
    width: 0%;
    visibility: visible;
    margin-left: 27px;
    white-space: nowrap;
    color: var(--ni-black);
}

ni-plot-legend .ni-button {
    width: 25px;
    height: 27px;
    background-size: contain;
    display: inline-block;
    margin-right: 4px;
    border: 0px solid rgba(0, 0, 0, 0);
    border-radius: 0px;
    background-color: rgba(255, 255, 255, 0);
    border-bottom: 4px solid rgba(0, 0, 0, 0);
    opacity: 1;
}

ni-plot-legend .ni-button[checked] {
    border-bottom: 4px solid #77baff;
    opacity: 1;
}

ni-plot-legend .ni-selector {
    box-sizing: border-box;
}

ni-plot-legend .ni-details-row-operations-box {
    width: 100%;
}

ni-plot-legend .ni-selector-title {
    white-space: nowrap;
    margin-left: 3px;
}

ni-plot-legend .ni-selector-icon {
    width: 80px;
    height: 16px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    float: right;
}

ni-plot-legend jqx-color-picker.jqx-color-picker,
ni-cursor-legend jqx-color-picker.jqx-color-picker {
    --jqx-color-picker-palette-size: 8px;
}

ni-plot-legend jqx-color-panel.jqx-color-panel .preview-container,
ni-cursor-legend jqx-color-panel.jqx-color-panel .preview-container {
    min-width: 70px;
    width: 70px;
    height: 70px;
    margin-left: auto;
    margin-right: 8px;
    margin-bottom: 6px;
}

ni-plot-legend jqx-color-picker.jqx-color-picker .color-controls-container,
ni-cursor-legend jqx-color-picker.jqx-color-picker .color-controls-container {
    width: 100px;
    padding: 8px 0;
}

ni-plot-legend jqx-color-picker .color-input,
ni-cursor-legend jqx-color-picker .color-input {
    height: 30px;
    width: 70px;
    margin: 3px;
}

ni-plot-legend .ni-colorbox-content {
    text-shadow: none;
    height: inherit;
    padding-top: 5px;
    padding-bottom: 5px;
}

ni-plot-legend .ni-colorbox-selector {
    vertical-align: middle;
    width: auto;
}

ni-plot-legend .ni-button .jqx-button {
    background: transparent;
}

ni-plot-legend jqx-drop-down-list.jqx-drop-down-list,
ni-plot-legend jqx-drop-down-button.jqx-drop-down-button {
    --jqx-editor-drop-down-button-width: 26px;
}

ni-plot-legend jqx-drop-down-list.jqx-drop-down-list jqx-list-item .jqx-content {
    padding-left: 0;
    padding-right: 0;
}

ni-plot-legend jqx-accordion.jqx-accordion,
ni-plot-legend jqx-accordion.jqx-accordion[expand-mode="toggle"] {
    --jqx-accordion-expanded-content-height: auto;
    overflow: visible;
}

ni-plot-legend jqx-accordion.jqx-accordion > .jqx-container,
ni-plot-legend jqx-accordion.jqx-accordion jqx-accordion-item .jqx-accordion-item-content,
ni-plot-legend jqx-accordion.jqx-accordion[expand-mode="toggle"] jqx-accordion-item .jqx-accordion-item-content {
    padding: 0;
    height: auto;
    overflow: visible;
}

ni-plot-legend jqx-accordion-item {
    box-shadow: none;
    overflow: visible;
    --jqx-accordion-item-expanded-offset: 0px;
}

ni-plot-legend jqx-accordion-item > .jqx-container {
	border-width: 0px;
}

ni-plot-legend jqx-accordion-item .jqx-accordion-item-header {
    --jqx-ui-state-hover: transparent;
    --jqx-ui-state-focus: transparent;
}

ni-plot-legend jqx-accordion-item .jqx-accordion-item-content {
    background: transparent;
}

ni-plot-legend jqx-accordion-item .jqx-drop-down-color-picker {
	--jqx-background: white;
}

ni-plot-legend jqx-accordion-item .jqx-accordion-item-header {
    padding: 0;
    height: auto;
}

ni-plot-legend[mode="compact"] jqx-accordion-item .jqx-accordion-item-header > .jqx-arrow {
    display: none;
}

ni-plot-legend jqx-accordion-item .jqx-content-container {
    padding: 0;
}

ni-plot-legend jqx-drop-down-list.jqx-drop-down-list {
    --jqx-drop-down-list-default-width: 100%;
    --jqx-editor-addon-width: 24px;
}

ni-plot-legend jqx-drop-down-list.jqx-drop-down-list .jqx-action-button{
    padding-left: 2px;
}

ni-plot-legend jqx-check-box.jqx-check-box {
    --jqx-editor-height: 20px;
}

ni-plot-legend jqx-check-box.jqx-check-box.jqx-toggle-box .jqx-input {
    margin: 0;
}

ni-plot-legend jqx-check-box.jqx-check-box .jqx-overlay {
    display: none;
}

ni-scale-legend {
    display: inline-block;
    overflow: auto;
    border: 1px solid #C7CCD0;
    font-family: "Open Sans", verdana, arial, sans-serif;
    font-size: 12px;
}

ni-scale-legend .ni-row-title {
    margin-left: 5px;
    margin-right: 5px;
    display: inline-block;
}

ni-scale-legend .ni-scale-legend-box {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
}

ni-scale-legend .ni-row-title-box {
    width: auto;
}

ni-scale-legend .ni-lock-box {
    width: 25px;
    margin: 2px;
}

ni-scale-legend .ni-reset-offset-box {
    width: 25px;
    margin: 2px;
}

ni-scale-legend .ni-button {
    width: 25px;
    height: 25px;
    margin: 2px;
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid rgba(0, 0, 0, 0);
    background-color: rgba(255, 255, 255, 0);
}

ni-scale-legend .ni-button .jqx-button {
    background: transparent;
}

.legendLayer .background {
    fill: rgba(255, 255, 255, 0);
    stroke: rgba(0, 0, 0, 0);
    stroke-width: 1;
}