pgadmin4/web/pgadmin/static/scss/resources/_default.variables.scss

/** Dividing a pixel var with 1px or rem var with 1rem removes the unit px/rem **/
$enable-flex: true !default;

$white: #fff;
$black: #000;

$color-bg: $white !default;
$color-fg: #222222 !default;

$color-bg-theme: $white !default;
$color-fg-theme: #222222 !default;

$color-primary: #326690 !default;
$color-primary-fg: $white !default;
$color-primary-light: #d6effc !default;
$color-primary-dark: #295c85 !default;

$color-secondary: $white !default;

$color-danger: #e53935 !default;
$color-danger-fg: $white !default;
$color-danger-light: #F39999;
$color-danger-lighter: #FAECEC;

$color-success: #43a047 !default;
$color-success-fg: $black !default;
$color-success-light: #DDF1DE;

$color-warning: #eea236 !default;
$color-warning-fg: $black !default;
$color-warning-light: #fce5c5;

$color-gray-darker: #5b6d7c;
$color-gray-dark: #848ea0;
$color-gray: #bac1cd;
$color-gray-light: #ebeef3;
$color-gray-lighter: #f3f5f9;

$color-brand: $white !default;

$color-editor-bg: $color-bg !default;
$color-editor-keyword: #908 !default;
$color-editor-number: #964 !default;
$color-editor-foldmarker: #0000FF !default;
$color-editor-activeline: #50B0F0 !default;

/* Typography */
$font-family-primary: "Roboto", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-family-semibold: "Roboto Medium" !default;
$font-family-editor: "Source Code Pro", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-icon: "FontAwesome" !default;

$border-width: 1px;
$border-color: #dde0e6;
$border-color-dark: $color-gray;
$box-shadow: 0 0.5rem 3rem $color-gray-dark;

/** Bootstrap Variable Changes **/
$font-family-monospace: $font-family-editor !default;
$font-family-base:      $font-family-primary !default;
$gray-600: $color-gray-dark;
$gray-900: $color-fg-theme;
$body-color: $color-fg-theme;
$font-size-base: 0.875rem;
$line-height-base: 1.5; // no change
$text-height-calc: $line-height-base*$font-size-base/1rem;
$grid-gutter-width: 15px;
$border-radius: 0.25rem; //no change

$text-color: $color-fg-theme;
$text-muted: $color-gray-dark;

$navbar-dark-color: #fff;
$navbar-dark-hover-color: #fff;
$navbar-dark-active-color: #fff;
$navbar-dark-disabled-color: $color-gray;

$navbar-toggler-padding-y: 0.25rem; //no-change

$form-group-margin-bottom:  0.5rem;
$btn-active-box-shadow: none;

$dropdown-link-hover-color: $white;
$dropdown-link-hover-bg: $color-primary;
$dropdown-border-color: $border-color;
$dropdown-box-shadow: 0 0.125rem 0.5rem rgba($color-gray-dark, .175);
$dropdown-divider-bg: $dropdown-border-color;
$dropdown-padding-y: 0.25rem;
$dropdown-item-padding-x: 1rem;
$dropdown-spacer: .125rem; //no-change
$nav-divider-margin-y: .25rem;

$input-btn-focus-width: 0.1rem;
$btn-disabled-opacity: 0.5;
$btn-transition: color .05s ease-in-out, background-color .05s ease-in-out, border-color .05s ease-in-out, box-shadow .05s ease-in-out;

$card-spacer-y: 0rem;
$card-spacer-x: 0rem;
$card-border-radius: $border-radius;
$card-border-color: $border-color;
$card-cap-bg: $color-bg-theme;
$card-bg: $color-bg-theme;


$navbar-brand-padding-y: 0rem;

$nav-tabs-border-color: $border-color;
$nav-tabs-border-width: 1px;
$nav-tabs-border-radius: 0px;
$nav-tabs-link-hover-border-color: none;
$nav-tabs-link-active-color: $color-primary;
$nav-tabs-link-active-bg: none;
$nav-tabs-link-active-border-color: none;

$table-cell-padding: 0.25rem;
$table-hover-bg: none; //we will use our own classes
$table-active-bg: $color-primary-light;
$table-border-width: $border-width !default;
$table-border-color: $border-color !default;
$table-head-bg: $color-primary !default;
$table-head-color: $color-primary-fg !default;

$input-bg: $white; //no change
$input-color: $color-fg-theme;
$input-border-color: $border-color;
$input-border-radius: $border-radius; //no change
$input-disabled-bg: $color-gray-lighter;
$input-btn-border-width: $border-width; //no change
$input-border-width: $input-btn-border-width; //no change
$input-btn-padding-y: .25rem;
$input-btn-padding-x: .75rem; //no change

$component-active-bg: $color-primary; //no change
$input-btn-focus-width: .2rem !default; //no change
$input-btn-focus-color: rgba($component-active-bg, .25) !default; //no change
$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default; //no change
$input-focus-bg: $input-bg !default; //no change
$input-focus-border-color: lighten($component-active-bg, 25%) !default; //no change
$input-focus-color: $input-color !default; //no change
$input-focus-width: $input-btn-focus-width !default; //no change
$input-focus-box-shadow: $input-btn-focus-box-shadow !default; //no change

$btn-border-radius: $border-radius; //no change

/***************/

$active-border: 3px solid $color-primary;
$panel-border-width: $border-width;
$panel-border-color: $border-color;
$panel-border-radius: $border-radius;
$panel-border: $panel-border-width solid $panel-border-color !important;
$panel-border-dark: $panel-border-width solid $border-color-dark !important;
$tabs-padding: 5px 10px 2px;
$title-height: ($line-height-base*16px) + 5px + 2px + $border-width;
$footer-padding: 0.5rem;
$footer-min-height: 2rem;
$footer-height-calc: $footer-min-height+$footer-padding*2;

// ($splitter-hover-width - $panel-border-width) should be even number to split evenly.
$splitter-hover-width: 7px;

$navbar-brand-bg: #222222; //place image url if image
$navbar-brand-arrow-bg: #222222;
$navbar-color-bg: $color-primary;
$navbar-font-size: 0.925rem;
$navbar-user-font-size: 0.875rem;

$navbar-height: 40px;
$navbar-dropdown-top: 110%;
$dropdown-submenu-top: -$dropdown-spacer;

$table-bg: $color-bg-theme;
$table-bg-selected: $color-primary-light;
$table-hover-border-color: $color-primary;
$table-hover-border: $panel-border-width solid $color-primary !important;
$table-hover-bg-color: $color-primary-light;
$datagrid-bg: $color-gray-light;

$sql-title-padding: 3px;
$sql-title-bg: $color-gray-darker;
$sql-title-fg: $white;
// Toolbar + editor title heights + title bottom border
$sql-editor-panel-top: $title-height + $text-height-calc*16px + $sql-title-padding*2 + $panel-border-width;
$sql-gutters-bg: $color-gray-light;
$sql-history-detail-bg: $color-gray-lighter;
$sql-history-success-bg: $color-primary-light;
$sql-history-success-fg: $color-primary;
$sql-history-error-bg: $color-danger-lighter;
$sql-history-error-fg: $color-danger;
$sql-hint-bg: $color-bg-theme;
$sql-hint-active-bg: $color-primary;
$sql-hint-active-fg: $white;

$negative-bg: $color-gray-light;
$dialog-box-shadow: $box-shadow;

$alert-icon-color: $white;
$alertify-borderremove-margin: $panel-border-width;

$btn-secondary-border: $color-gray;
$btn-secondary-hover-bg: $color-gray-light;

$card-header-padding : 0.25rem 0.5rem;
$no-border-radius: 0px !important;

$btn-checkbox-padding: $input-btn-padding-y $input-btn-padding-x;

$security-text-color: $white;
$security-btn-color: #038bba;

$loading-bg : rgba($black,0.6);
$loading-fg : $white;

$loader-icon : url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 38 38' style='enable-background:new 0 0 38 38;' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bfill:none;stroke:%23ebeef3;stroke-width:2;%7d .st1%7bfill:none;stroke:%23326690;stroke-width:2;%7d %3c/style%3e%3cg%3e%3cg transform='translate(1 1)'%3e%3ccircle class='st0' cx='18' cy='18' r='18'/%3e%3cpath class='st1' d='M36,18c0-9.9-8.1-18-18-18 '%3e%3canimateTransform accumulate='none' additive='replace' attributeName='transform' calcMode='linear' dur='0.7s' fill='remove' from='0 18 18' repeatCount='indefinite' restart='always' to='360 18 18' type='rotate'%3e%3c/animateTransform%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e ") !default;