pgadmin4/web/pgadmin/static/scss/_bootstrap.overrides.scss

/* Ensure simple forms don't hit the top of the screen */
body {
	font-family: $font-family-primary;
	-webkit-font-smoothing: antialiased;
}

.app-icon {
	font-size: 25px;
	vertical-align: middle;
}

/* Use the full width of the screen */
.container {
	width: 100% !important;
}

/* iFrames should have no border */
iframe {
	border-width: 0;
}

legend {
	margin-bottom: 0rem;
}

/* Padding for the treeview */
.browser-browser-pane {
	padding-left: 0;
}

/* Disabled menu items */
.mnu-disabled {
	color: $color-gray !important;
}

.dropdown-menu {
	box-shadow: $dropdown-box-shadow;
}

.dropdown-toggle::after {
	font-family: $font-family-icon;
	content: "\f078";
	font-size: 0.6rem;
	vertical-align: 2px;
	margin-left: 0rem;
	border: none;
	width: auto;
}

/*
 * Bootstrap 3 remove submenus as they don't work overly well on Mobile. The
 * following CSS adds them back in - for our purposes they actually work fine
 * on Mobile and are perfectly responsive
 */
.dropdown-submenu {
	position: relative;
}
.dropdown-submenu>.dropdown-menu {
	-moz-border-radius: $dropdown-border-radius;
	-webkit-border-radius:$dropdown-border-radius;
	border-radius: $dropdown-border-radius;
	left: 100%;
	margin-left: -1px;
	top: $dropdown-submenu-top;
}
.dropdown-submenu .dropdown-menu.show {
	background-color: $dropdown-bg;
}

.dropdown-submenu>a:after {
	font-family: $font-family-icon;
	content: "\f054";
	float: right;
	margin-right: -10px;
	font-size: 0.6rem;
	line-height: 2;
}

.dropdown-submenu:hover>a:after {
	border-left-color: $dropdown-link-hover-color;
}
.dropdown-submenu.pull-left {
	float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
	-moz-border-radius: $dropdown-border-radius;
	-webkit-border-radius: $dropdown-border-radius;
	border-radius: $dropdown-border-radius;
	left: -100%;
	margin-left: 10px;
}

.dropdown-submenu-visible>.dropdown-item {
	background-color: $dropdown-link-hover-bg;
	color: $dropdown-link-hover-color;
}

/** Overriding secondary button of bootstrap **/
/* Used Bootstrap 4 Mixin button-variant
 * Refer file : bootstrap/scss/mixins/_buttons.scss
 */
.btn-secondary {
	@include button-variant($color-secondary, $btn-secondary-border, $btn-secondary-hover-bg);
}

.form-group fieldset {
	background-color: $color-gray-lighter;
	border-color: $color-gray-lighter;
	border-width: 1px;
	margin-bottom: 2px;
	margin-left: 2px;
	margin-right: 2px;
	padding: 0px 0px 0px 5px;
}
.form-group legend {
	font-size: 105%;
	margin-bottom: 0px;
	margin-left: 0;
	padding: 0.1em 0.5em;
	text-align: left;
	width: 95%;
}
.form-group .fieldset-content {
	width: 100%;
}
.form-group fieldset .caret {
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid;
	display: inline-block;
	height: 0;
	margin-left: 2px;
	margin-top: -2px;
	vertical-align: middle;
	width: 0;
}
.form-group fieldset .collapsed .caret {
	border-bottom: 5px solid transparent;
	border-left: 5px solid;
	border-top: 5px solid transparent;
}
/* 25px is for showing error icon */
.control-label {
	display: inline-block;
	margin: 0px;
	padding: 5px 25px 5px 5px !important;
	vertical-align: middle;
}

.form-check {
	padding-left: 0rem;
	padding-right: 0.5rem;
}

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
	color: $text-muted;
}

.card-header {
	padding: $card-header-padding;
	font-weight: bold;
}

.table {
	margin-bottom: 0rem;
	th {
		padding: $table-header-cell-padding $table-cell-padding;
	}
}

.table-bordered {
	border: $panel-border;

	& thead {
		& th, & td {
			border-bottom: none;
		}

		& tr {
			font-weight: bold !important;
			// for first row, remove top border
			&:first-of-type{
				& td, & th {
					border-top: none !important;
				}
			}
		}
	}
	& tbody {
		& tr {
			& th, & td {
				border-top: $panel-border;
				border-bottom: none;
			}
		}
	}

	& thead {
		& tr {
			& th {
				&:first-of-type {
					border-left: none;
				}

				&:last-of-type {
					border-right: none;
				}
			}
		}
	}

	& tbody {
		& tr {
			& td {
				&:first-of-type {
					border-left: none;
				}

				&:last-of-type {
					border-right: none;
				}
			}
		}
	}
}

.table.table-hover {
	& > tbody {
		& > tr:not(.nohover):not(.empty):hover, tr.selected {
			background-color: $table-hover-bg-color;
			& > td {
				border-top: $table-hover-border;
				border-bottom: $table-hover-border;
			}
		}

		& > tr.nohover {
			background-color: transparent;
		}
	}
}

.switch-cell {
	height: 0px;
	width: 0px;
}

/* Center align the switch in backgrid */
td.switch-cell > div.toggle {
	display: block;
	margin: auto;
}

.nav {
	&.nav-tabs {
		height: $title-height;
		border-top-left-radius: inherit;
		border-top-right-radius: inherit;

		& .nav-link {
			border: none !important;
			padding: $tabs-padding;
			color: $color-fg;
			&.active {
				border-bottom: $active-border !important;
				color: $active-color;
			}
		}
	}
}

.navbar-nav .nav-item > .dropdown-menu {
	top: $navbar-dropdown-top;
}

.bootstrap-datetimepicker-widget td, .bootstrap-datetimepicker-widget th {
	display: table-cell;
	white-space: normal;
}

.navbar-brand {
	margin-right: 0rem;
	padding-left: 0.5rem !important;
	padding-right: 1rem !important;
	height: $navbar-height;
	padding: 0rem;
	display: flex;
	align-items: center !important;
	font-weight: bold;
}

.navbar-brand:hover {
	color: $color-brand !important;
}
.navbar-brand:focus {
	color: $color-brand !important;
}

.btn-sm-sq {
  @extend .btn-sm;
  line-height: 0.7rem;
}

.btn-toolbar {
  min-width: 100%;
}

.bootstrap-datetimepicker-widget thead th {
  background-color: $color-bg;
}

.input-group {
    & .input-group-text {
      background: $input-bg;
	}
}

.btn.disabled, .btn:disabled, .btn[disabled] {
  opacity: $btn-disabled-opacity;
}

.btn-group label.btn.btn-primary.active {
  background-color: $color-primary-light;
  color: $color-primary-light-fg;
}

.btn-group.pgadmin-controls-radio-none.disabled {
  pointer-events: none;
}

.btn-group.pgadmin-controls-radio-none > label.btn.btn-primary.disabled {
  pointer-events: none;
}