pgadmin4/web/pgadmin/static/scss/_jsoneditor.overrides.scss
2022-01-20 16:58:21 +05:30

466 lines
12 KiB
SCSS

.jsoneditor-menu a.jsoneditor-poweredBy {
visibility: hidden;
}
.jsoneditor {
border-color: $border-color;
}
/* Menu Bar*/
.jsoneditor-menu {
background: $color-gray-light;
border-bottom: 1px solid $border-color;
}
/* Menu Bar buttons*/
.jsoneditor-menu>button {
font-family: $font-family-icon !important;
font-size: $navbar-font-size !important;
line-height: $line-height-base !important;
background-image:none !important;
border-radius: $border-radius;
border-color:$color-gray;
opacity: 1;
background-color:$btn-primary-icon-bg;
color: $color-fg;
font-weight: normal !important;
}
/* Navigation Bar */
.jsoneditor-navigation-bar{
font-family: $font-family-primary !important;
background-color: $color-bg;
color: $color-fg;
border-bottom: 1px solid $color-gray;
}
/* Over rides icons */
.jsoneditor-menu>button.jsoneditor-expand-all::before{
content: "\f424";
font-weight: 600 !important;
}
.jsoneditor-menu>button.jsoneditor-collapse-all::before{
content: "\f422";
font-weight: 600 !important;
}
.jsoneditor-menu>button.jsoneditor-redo::before {
content: "\f01e";
font-weight: 600 !important;
}
.jsoneditor-menu>button.jsoneditor-undo::before {
content: "\f0e2";
font-weight: 600 !important;
}
.jsoneditor-menu>button.jsoneditor-format::before {
content: "\f03c";
font-weight: 600 !important;
}
.jsoneditor-menu>button.jsoneditor-compact::before {
content: "\f066";
font-weight: 600 !important;
}
.jsoneditor-menu>button.jsoneditor-sort::before {
content: "\f160";
font-weight: 600 !important;
}
.jsoneditor-menu>button.jsoneditor-repair::before {
content: "\f0ad";
font-weight: 600 !important;
}
.jsoneditor-menu>button.jsoneditor-transform::before {
content: "\f0b0";
font-weight: 600 !important;
}
/* Undo redo buttons */
.jsoneditor-menu>.jsoneditor-modes>button:disabled,
.jsoneditor-menu>button:disabled {
color:$color-fg !important;
opacity: $btn-disabled-opacity;
border: thin solid;
border-color:$color-gray;
border-radius: $border-radius;
background-color:$btn-primary-icon-bg !important;
}
/* Mode drop-down */
.jsoneditor-menu>.jsoneditor-modes>button:active,
.jsoneditor-menu>.jsoneditor-modes>button:focus,
.jsoneditor-menu>.jsoneditor-modes>button,{
font-family: $font-family-primary !important;
font-size: $font-size-base !important;
line-height: $line-height-base !important;
background-image:none !important;
border-radius: $border-radius;
border-color:$color-gray;
opacity: 1;
background-color:$btn-primary-icon-bg;
color: $color-fg;
font-weight: normal !important;
}
/* Mode drop-down options */
.jsoneditor-contextmenu .jsoneditor-menu button,
.jsoneditor-contextmenu .jsoneditor-separator {
font-family: $font-family-primary !important;
font-size: $font-size-base !important;
background-color: $color-bg !important;
color: $color-fg !important;
border: none;
}
/* Drop-down hovered*/
.jsoneditor-contextmenu .jsoneditor-menu li button:hover {
background-color: $btn-primary-hover-bg !important;
border-color: $btn-primary-border-hover-bg !important;
color: $btn-primary-color !important;
}
/* Drop-down selected*/
.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected,
.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:focus,
.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:hover {
background-color: $btn-primary-hover-bg !important;
border-color: $btn-primary-border-hover-bg !important;
color: $btn-primary-color !important;
}
/* Search Box*/
.jsoneditor-frame,
.jsoneditor-search input{
color: $input-color;
background-color: $input-bg;
}
/* Set expand icon to none*/
div.jsoneditor-tree button.jsoneditor-button:focus {
background-color: $color-bg !important ;
outline: none;
}
/* Search Box results */
.jsoneditor-results {
color: $color-fg;
}
/* Ace editor Setting */
/* Ace editor numbers */
.ace-jsoneditor .ace_gutter {
background-color:$color-gray-light;
color:$color-fg;
}
/* Ace editor code background */
.ace-jsoneditor .ace_scroller {
background-color: $color-bg;
}
/* Ace editor code background readonly*/
#pg-json-editor[readonly] .ace-jsoneditor .ace_scroller{
background-color: $color-gray-light;
opacity: $btn-disabled-opacity;
}
/* Ace editor hide indent guide */
.ace-jsoneditor .ace_indent-guide {
background: none;
}
/* Ace editor Key names */
.ace-jsoneditor .ace_variable {
color: $color-fg !important;
}
/* Ace editorfonts */
.ace_editor,
.ace-jsoneditor *{
font-family: $font-family-editor !important;
font-size: $font-size-base !important;
line-height: $line-height-base !important;
color: $color-fg;
}
.ace-jsoneditor.ace_editor {
font-family: $font-family-editor !important;
font-size: $font-size-base !important;
line-height: $line-height-base !important;
color: $color-fg;
background-color:$color-bg !important;
}
/* /* font setting all other mode */
/* form, tree, code, preview, schema-error */
div.jsoneditor-default,
div.jsoneditor-field,
div.jsoneditor-value,
div.jsoneditor textarea,
div.jsoneditor td,
div.jsoneditor-readonly,
.jsoneditor-popover,
div.jsoneditor-tree{
font-family: $font-family-primary !important;
font-size: $font-size-base !important;
line-height: $line-height-base !important;
color: $color-fg;
background-color:$color-bg;
}
/* read only mode */
#pg-json-editor[readonly] {
& div.jsoneditor-tree,
& div.jsoneditor td,
& div.jsoneditor-readonly,
& div.jsoneditor-value,
& div.jsoneditor-field,
& div.jsoneditor-tree button.jsoneditor-button:focus {
background-color: $color-gray-light !important;
opacity: 0.85;
}
}
div.jsoneditor td.jsoneditor-tree {
vertical-align: middle;
}
pre.jsoneditor-preview{
background-color: $color-gray-lighter !important;
opacity: 0.8;
color: $color-fg;
}
/* Hilight selected values in tree/form modes */
div.jsoneditor-field.jsoneditor-highlight,
div.jsoneditor-field[contenteditable=true]:focus,
div.jsoneditor-field[contenteditable=true]:hover,
div.jsoneditor-value.jsoneditor-highlight,
div.jsoneditor-value[contenteditable=true]:focus,
div.jsoneditor-value[contenteditable=true]:hover
{
background-color: $sql-editor-selection-bg;
border: 1px solid $sql-editor-selection-bg;
border-radius: $border-radius;
}
/* Hi-light line in code */
.ace-jsoneditor .ace_marker-layer .ace_active-line {
background-color: $sql-editor-selection-bg;
border: 0;
border-radius: $border-radius;
}
.ace-jsoneditor .ace_gutter-active-line {
background-color:$color-gray-light;
}
.ace-jsoneditor .ace_marker-layer .ace_selected-word {
border: 1px solid $color-primary-light;
}
.ace-jsoneditor .ace_marker-layer .ace_selection {
background: $color-primary-light;
}
/* Nested DD*/
.jsoneditor-contextmenu .jsoneditor-icon {
background-image:none;
}
.jsoneditor-contextmenu .jsoneditor-text {
padding:4px 4px 4px 5px;
}
.jsoneditor-contextmenu .jsoneditor-menu{
border: 1px solid $border-color;
background: $color-bg !important;
color: $color-fg !important;
}
.jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-expand, {
height:0px;
background-color: $color-gray-light !important;
}
.jsoneditor-contextmenu .jsoneditor-menu li ul {
padding: 0;
border: 1px solid $border-color;
}
.jsoneditor-contextmenu .jsoneditor-separator {
height: 0;
border-top: 1px solid $border-color;
padding-top: 5px;
margin-top: 5px;
}
/* Status Bar */
.jsoneditor-statusbar {
background-color: $color-gray-light !important;
color: $color-primary-light-fg !important;
border-top: 1px solid $border-color;
}
/* Validation Bar */
.jsoneditor .jsoneditor-validation-errors {
background-color:$sql-history-error-bg !important;
color:$color-fg;
border: 1px solid $color-danger;
}
.jsoneditor .jsoneditor-text-errors {
width: 100%;
border-collapse: collapse;
border-top: 1px solid $color-gray;
}
.jsoneditor .jsoneditor-text-errors tr,
.jsoneditor .jsoneditor-text-errors td,
.jsoneditor .jsoneditor-text-errors td pre,
.jsoneditor .jsoneditor-text-errors tr.parse-error {
background-color: $color-danger-lighter !important;
color:$color-fg;
}
/* Transform & sort */
/* Header */
.jsoneditor-modal .pico-modal-header {
font-family: $font-family-primary !important;
font-size: $font-size-base !important;
font-weight: bold;
background-color: $alert-header-bg !important;
color: $alert-header-fg;
}
/* Body */
.pico-content{
background-color: $color-gray-light !important;
}
/* Disable links */
.jsoneditor-modal a {
color: $color-fg !important;
}
/* Replace help text */
.pico-modal-contents p{
visibility: hidden;
display: flex;
margin-bottom: -1rem;
}
.pico-modal-contents p::after{
visibility: visible;
position: absolute;
content: "Enter a JMESPath query to filter, sort, or transform the JSON data.";
display: block;
}
/* Fields */
.jsoneditor-modal,
.jsoneditor-modal #query,
.jsoneditor-modal input,
.jsoneditor-modal input[type=text],
.jsoneditor-modal input[type=text]:focus,
.jsoneditor-modal option,
.jsoneditor-modal select,
.jsoneditor-modal table td,
.jsoneditor-modal table th,
.jsoneditor-modal textarea, {
color: $color-fg !important;
background-color: $color-bg !important;
font-size: $font-size-base !important;
font-family: $font-family-primary !important;
padding: 4px;
}
.jsoneditor-modal option{
background-color: $color-primary-light !important;
border: 1px solid $color-primary-light !important;
border-radius: $border-radius !important;
color:$color-fg !important;
}
/* Ascending descending buttons */
.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-asc input.jsoneditor-button-asc,
.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-desc input.jsoneditor-button-desc {
//color: $color-bg !important;
background-color: $color-primary !important;
//border-color: $color-primary !important;
border-color: $color-primary;
color: $btn-primary-color !important;
}
.jsoneditor-modal input[type=button]{
color: $color-fg;
background-color: $color-bg;
}
/* OK Button */
.jsoneditor-modal input[type=submit] {
color: $btn-primary-color !important;
border-color: $color-primary !important;
background-color: $color-primary !important;
text-transform: uppercase;
}
.jsoneditor-modal .jsoneditor-jmespath-label {
color: $color-fg;
font-weight: bold;
}
.selectr-option,
.selectr-options-container {
color: $color-fg;
background-color: $color-bg;
}
.selectr-option.active,
.selectr-option.selected{
color: $btn-primary-color !important;
background-color: $color-primary !important;
border-color: $color-primary;
}
.jsoneditor-modal .selectr-selected{
color: $color-fg;
background-color: $color-bg;
}
.jsoneditor-modal .selectr-selected .selectr-tag {
border: 1px solid $color-primary;
color: $btn-primary-color !important;
background-color: $color-primary !important;
border-color: $color-primary;
}
.jsoneditor-modal .selectr-selected .selectr-tag-remove::before{
color: $color-primary !important;
}
/* Update String. Key colors code mode */
.ace_variable {color: $color-editor-variable !important;}
.ace_string {color: $color-editor-string !important;}
.ace_constant.ace_numeric {color:$color-editor-number !important;}
/* Update String. Key colors tree/form mode*/
div.jsoneditor-value.jsoneditor-string {
color: $color-editor-string !important;
}
div.jsoneditor-value.jsoneditor-number {
color:$color-editor-number !important;
}