mirror of
https://github.com/pgadmin-org/pgadmin4.git
synced 2025-02-25 18:55:31 -06:00
Move all CSS into SCSS files for consistency and ease of colour maintenance etc. Fixes #2927
This commit is contained in:
Aditya Toshniwal
committed by
Dave Page
Dave Page
parent
61f00a0cbb
commit
82c9cca683
@@ -1,110 +0,0 @@
|
||||
.alert-box {
|
||||
padding: 15px; }
|
||||
|
||||
.alert-icon {
|
||||
display: table-cell; }
|
||||
|
||||
.alert-text {
|
||||
display: table-cell;
|
||||
padding-left: 10px; }
|
||||
|
||||
.alert-info {
|
||||
border-color: #84acdd; }
|
||||
|
||||
.color-chip {
|
||||
align-items: center;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.15);
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
display: flex;
|
||||
font-size: 1.25em;
|
||||
height: 100px;
|
||||
justify-content: center;
|
||||
margin: 0 0 1em;
|
||||
width: 100%; }
|
||||
|
||||
.bg-gray-1 {
|
||||
background-color: #f9f9f9; }
|
||||
|
||||
.bg-gray-2 {
|
||||
background-color: #e8e8e8; }
|
||||
|
||||
.bg-gray-3 {
|
||||
background-color: #cccccc; }
|
||||
|
||||
.bg-gray-4 {
|
||||
background-color: #888888; }
|
||||
|
||||
.bg-gray-5 {
|
||||
background-color: #555555; }
|
||||
|
||||
.bg-gray-6 {
|
||||
background-color: #333333; }
|
||||
|
||||
.font-white {
|
||||
color: #FFFFFF; }
|
||||
|
||||
.font-gray-3 {
|
||||
color: #cccccc; }
|
||||
|
||||
.font-gray-4 {
|
||||
color: #888888; }
|
||||
|
||||
.border-gray-3 {
|
||||
border: 2px solid #cccccc; }
|
||||
|
||||
.text-bold {
|
||||
font-weight: bold; }
|
||||
|
||||
.text-14 {
|
||||
font-family: 'Open Sans';
|
||||
font-size: 14px; }
|
||||
|
||||
.text-13 {
|
||||
font-family: 'Open Sans';
|
||||
font-size: 13px; }
|
||||
|
||||
.text-12 {
|
||||
font-family: 'Open Sans';
|
||||
font-size: 12px; }
|
||||
|
||||
.text-11 {
|
||||
font-family: 'Open Sans';
|
||||
font-size: 11px; }
|
||||
|
||||
.bg-primary-blue {
|
||||
background-color: #2c76b4; }
|
||||
|
||||
.bg-highlight {
|
||||
background-color: #e7f2ff; }
|
||||
|
||||
.bg-border {
|
||||
background-color: #84acdd; }
|
||||
|
||||
.bg-red-1 {
|
||||
background-color: #f2dede; }
|
||||
|
||||
.bg-red-2 {
|
||||
background-color: #ecccd1; }
|
||||
|
||||
.bg-red-3 {
|
||||
background-color: #d0021b; }
|
||||
|
||||
.bg-green-1 {
|
||||
background-color: #dff0d7; }
|
||||
|
||||
.bg-green-2 {
|
||||
background-color: #d6eac5; }
|
||||
|
||||
.bg-green-3 {
|
||||
background-color: #3a773a; }
|
||||
|
||||
.font-white {
|
||||
color: #FFFFFF; }
|
||||
|
||||
.opacity-5 {
|
||||
opacity: 0.5; }
|
||||
|
||||
.alertify .ajs-header,
|
||||
.alertify .ajs-body {
|
||||
font-family: 'Open Sans'; }
|
||||
@@ -1,7 +1,6 @@
|
||||
@import '~bootstrap/dist/css/bootstrap.css';
|
||||
@import '~alertifyjs/build/css/alertify.css';
|
||||
@import '~alertifyjs/build/css/themes/bootstrap.css';
|
||||
@import '~bootstrap/dist/css/bootstrap-theme.css';
|
||||
@import '~font-awesome/css/font-awesome.css';
|
||||
@import '~bootstrap-datepicker/dist/css/bootstrap-datepicker3.css';
|
||||
@import '~eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css';
|
||||
@@ -23,16 +22,3 @@
|
||||
@import '~slickgrid/slick.grid.css';
|
||||
@import '~slickgrid/slick-default-theme.css';
|
||||
@import '~slickgrid/css/smoothness/jquery-ui-1.11.3.custom.css';
|
||||
|
||||
@import '../../preferences/static/css/preferences.css';
|
||||
@import '../../browser/static/css/browser.css';
|
||||
@import '../../dashboard/static/css/dashboard.css';
|
||||
@import '../../browser/static/css/wizard.css';
|
||||
@import '../../tools/debugger/static/css/debugger.css';
|
||||
|
||||
@import '../../tools/grant_wizard/static/css/grant_wizard.css';
|
||||
@import '../../tools/maintenance/static/css/maintenance.css';
|
||||
@import '../../tools/sqleditor/static/css/sqleditor.css';
|
||||
@import '../../misc/static/explain/css/explain.css';
|
||||
@import '../../misc/bgprocess/static/css/bgprocess.css';
|
||||
@import '../../misc/static/explain/css/explain.css';
|
||||
|
||||
@@ -1,401 +0,0 @@
|
||||
.wcDocker {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.wcPanelBackground {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.wcPanelBackground .wcCenter {
|
||||
background-color: #cccccc;
|
||||
}
|
||||
|
||||
.wcFrameFlasher {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.wcFrameShadower {
|
||||
background-color: #dddddd;
|
||||
}
|
||||
|
||||
.wcFrameTitle {
|
||||
font-size: 13px;
|
||||
padding-left: 8px;
|
||||
vertical-align: middle;
|
||||
text-align: left;
|
||||
border-bottom: 1px none;
|
||||
height: 100%;
|
||||
padding-top: 10px;
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
|
||||
.wcFrameCenter {
|
||||
top: 35px;
|
||||
}
|
||||
|
||||
.wcFrameButton {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #9E9E9E;
|
||||
background-color: #ddd;
|
||||
font-size: 12px;
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.wcFrameMiniButton {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.wcFrameButton.wcFrameButtonLeft {
|
||||
right: 10px;
|
||||
}
|
||||
.wcFrameButton.wcFrameButtonRight {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.wcFrameButton:hover {
|
||||
border: 2px solid #CCCCCC;
|
||||
}
|
||||
|
||||
.wcFrameButton:active {
|
||||
border: 2px solid #DDDDDD;
|
||||
}
|
||||
|
||||
.wcFrameButtonToggled, .wcFrameButtonToggled:hover {
|
||||
border-style: inset;
|
||||
}
|
||||
|
||||
.wcLayoutGrid, .wcLayoutGrid tr, .wcLayoutGrid td {
|
||||
border: 1px solid #555555;
|
||||
}
|
||||
|
||||
.wcLayoutGridAlternate tr:nth-child(even), .wcLayoutGridAltColor {
|
||||
background-color: rgba(200, 150, 150, 0.2) !important;
|
||||
}
|
||||
|
||||
.wcFrameEdge {
|
||||
border: 1px solid #dddddd;
|
||||
background-color: #dddddd;
|
||||
}
|
||||
.wcFrame > .wcFrameEdgeV ~ .wcFrameEdgeV {
|
||||
box-shadow: 3px 6px 3px 1px #888888 !important;
|
||||
}
|
||||
|
||||
.wcFrame > .wcFrameEdge ~ .wcFrameEdgeV {
|
||||
box-shadow: 1px 0px 0px 0px #888888;
|
||||
}
|
||||
|
||||
.wcFrame > .wcFrameEdgeH ~ .wcFrameEdgeH {
|
||||
box-shadow: 2px 3px 3px 2px #888888 !important;
|
||||
}
|
||||
|
||||
.wcFrame > .wcFrameEdgeH {
|
||||
box-shadow: 1px 0px 0px 0px #888888;
|
||||
}
|
||||
|
||||
.wcFrameEdgeH {
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.wcFrameEdgeV {
|
||||
width: 6px;
|
||||
}
|
||||
.wcFrameCornerNW,
|
||||
.wcFrameCornerNE {
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.wcSplitterBar {
|
||||
border: 1px solid #aaaaaa;
|
||||
background-color: #dddddd;
|
||||
}
|
||||
|
||||
.wcSplitterBarV {
|
||||
border-left: 3px solid #dddddd;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.wcSplitterBarH {
|
||||
border-top: 3px solid #dddddd;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.wcPanelTab {
|
||||
color: #337ab7;
|
||||
background-color: #e6e6e6;
|
||||
border: 0px;
|
||||
border-radius: 4px 4px 0px 0px;
|
||||
border-bottom: 0px;
|
||||
margin-right: 1px;
|
||||
margin-top: 10px;
|
||||
font-size: 13px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.wcPanelTab:hover {
|
||||
background-color: #eeeeee;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.wcPanelTabActive {
|
||||
background-color: #ffffff;
|
||||
color: #000000;
|
||||
margin-top: 5px;
|
||||
line-height: 30px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.wcFloating .wcPanelTabActive {
|
||||
background-color: #2C76B4;
|
||||
margin-top: -2px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.wcFloating .wcPanelTabActive:hover {
|
||||
background-color: #74B5ED;
|
||||
}
|
||||
|
||||
.wcGhost {
|
||||
background-color: #74B5ED;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/*
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.7);
|
||||
}
|
||||
*/
|
||||
|
||||
.wcMenuList, .context-menu-list {
|
||||
border: 1px solid #dddddd;
|
||||
z-index: 999 !important;
|
||||
background: #dddddd;
|
||||
}
|
||||
|
||||
.wcMenuItem, .context-menu-item {
|
||||
background-color: #dddddd;
|
||||
}
|
||||
|
||||
.wcMenuItemHover, .wcMenuItem:hover, .context-menu-item.hover {
|
||||
background-color: #bbbbbb;
|
||||
}
|
||||
|
||||
.wcMenuItem.disabled, .context-menu-item.disabled {
|
||||
color: #311;
|
||||
background-color: #aaaaaa;
|
||||
}
|
||||
|
||||
.wcMenuSeparator, .context-menu-separator {
|
||||
border: 2px solid #dddddd;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
.wcInput, input {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.wcSelect, select {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.wcButton, button {
|
||||
border: 1px outset #A44;
|
||||
background-color: #A44;
|
||||
}
|
||||
|
||||
.wcButtonHover, .wcButton:hover {
|
||||
border: 1px outset #B66;
|
||||
background-color: #B66;
|
||||
}
|
||||
|
||||
.wcButtonActive, .wcButton:active {
|
||||
border: 1px inset #B66;
|
||||
background-color: #B66;
|
||||
}
|
||||
|
||||
.wcButtonActive.wcButtonHover, .wcButton:hover.wcButtonActive, .wcButton:active.wcButtonHover, .wcButton:active:hover {
|
||||
border: 1px inset #C88;
|
||||
background-color: #C88;
|
||||
}
|
||||
|
||||
.wcButtonDisabled, .wcButton.disabled {
|
||||
border: 1px outset #933 !important;
|
||||
background-color: #933 !important;
|
||||
color: #533 !important;
|
||||
}
|
||||
|
||||
.wcLayout, .wcLayout tr, .wcLayout td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.wcPanelTab > div > .wcTabIcon {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
padding-left: 20px;
|
||||
margin-top: -5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.wcPanelTab > div .wcTabIcon.fa {
|
||||
padding-left: 0px !important;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.wcTabIcon.fa {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.wcFrameTitleBar {
|
||||
background-color: #e8e8e8;
|
||||
height: 35px;
|
||||
border-bottom: #cccccc;
|
||||
}
|
||||
|
||||
.wcFloating .wcFrameTitleBar {
|
||||
border-bottom: 2px solid darkgray;
|
||||
background-color: #2C76B4;
|
||||
}
|
||||
|
||||
.wcFloating .wcFrameTitleBar > div .wcTabIcon.fa {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.wcFrameButtonBar {
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
.context-menu-list {
|
||||
font-family: 'Open Sans';;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.context-menu-icon:before {
|
||||
color: #222;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.context-menu-icon-fa:before {
|
||||
font-family: 'FontAwesome'
|
||||
}
|
||||
|
||||
.context-menu-item {
|
||||
display:block;
|
||||
font-family: 'Open Sans';
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.context-menu-list {
|
||||
padding: 2px 0;
|
||||
width: initial !important;
|
||||
}
|
||||
|
||||
.context-menu-list > .context-menu-item {
|
||||
display:block !important;
|
||||
}
|
||||
|
||||
.context-menu-list > .context-menu-separator {
|
||||
margin: 0;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
.context-menu-icon-wcTabIcon {
|
||||
text-align: left;
|
||||
padding: 3px 28px;
|
||||
height: auto;
|
||||
background-position: 5px 50%;
|
||||
}
|
||||
|
||||
ul.dropdown-menu > li.menu-item > a > i.wcTabIcon {
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
.wcFrameButton .fa.fa-close {
|
||||
margin-top: 3.5px;
|
||||
padding-left: 1px;
|
||||
}
|
||||
|
||||
span.fa.fa-arrow-left, .fa-arrow-right {
|
||||
margin-top: 4px;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
.wcMenuSubMenu {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
i.wcTabIcon {
|
||||
min-width: 20px;
|
||||
}
|
||||
|
||||
.wcLoadingBackground {
|
||||
background: black;
|
||||
opacity: 0.6 !important;
|
||||
}
|
||||
|
||||
.wcLoadingIcon.fa-spinner {
|
||||
position: absolute;
|
||||
top: 34%;
|
||||
left: 48%;
|
||||
font-size: 50px;
|
||||
color: #ccc;
|
||||
height: 49px !important;
|
||||
}
|
||||
|
||||
.wcLoadingLabel {
|
||||
top: 40%;
|
||||
left: 0;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wcPanelTab > div {
|
||||
display: inline-block;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
max-width: 125px;
|
||||
}
|
||||
|
||||
.wcPanelTabActive > div {
|
||||
width: auto !important;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.wcFrameTitleBar.wcTabTop .wcFrameButtonBar {
|
||||
right: 30px !important;
|
||||
}
|
||||
|
||||
.wcFloating .wcPanelTab .wcTabIcon {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-top: 8px;
|
||||
border-radius: 2px;
|
||||
padding: 0px 13px 5px 5px;
|
||||
background-color: white;
|
||||
background-size: 18px !important;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
@@ -108,7 +108,7 @@ define([
|
||||
var alertMessage = promptmsg;
|
||||
if (type === 'error') {
|
||||
alertMessage = '\
|
||||
<div class="media font-red-3 text-14">\
|
||||
<div class="media text-danger text-14">\
|
||||
<div class="media-body media-middle">\
|
||||
<div class="alert-text">' + promptmsg + '</div><br/>\
|
||||
<div class="alert-text">' + gettext('Click for details.') + '</div>\
|
||||
@@ -153,7 +153,7 @@ define([
|
||||
}
|
||||
if (contentType.indexOf('text/html') >= 0) {
|
||||
var alertMessage = '\
|
||||
<div class="media font-red-3 text-14">\
|
||||
<div class="media text-danger text-14">\
|
||||
<div class="media-body media-middle">\
|
||||
<div class="alert-text">' + gettext('INTERNAL SERVER ERROR') + '</div><br/>\
|
||||
<div class="alert-text">' + gettext('Click for details.') + '</div>\
|
||||
@@ -377,7 +377,7 @@ define([
|
||||
_.extend(alertify, {
|
||||
success: function(message, timeout, callback) {
|
||||
var alertMessage = '\
|
||||
<div class="media font-green-3 text-14">\
|
||||
<div class="media text-success text-14">\
|
||||
<div class="media-body media-middle">\
|
||||
<div class="alert-icon success-icon">\
|
||||
<i class="fa fa-check" aria-hidden="true"></i>\
|
||||
@@ -389,7 +389,7 @@ define([
|
||||
},
|
||||
error: function(message, timeout, callback) {
|
||||
var alertMessage = '\
|
||||
<div class="media font-red-3 text-14">\
|
||||
<div class="media text-danger text-14">\
|
||||
<div class="media-body media-middle">\
|
||||
<div class="alert-icon error-icon">\
|
||||
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>\
|
||||
|
||||
@@ -113,7 +113,7 @@ let FilterDialog = {
|
||||
|
||||
// Status bar
|
||||
this.statusBar = $('<div class=\'pg-prop-status-bar pg-el-xs-12 hide\'>' +
|
||||
' <div class=\'media error-in-footer bg-red-1 border-red-2 font-red-3 text-14\'>' +
|
||||
' <div class=\'media error-in-footer bg-danger-lighter border-danger-light text-danger text-14\'>' +
|
||||
' <div class=\'media-body media-middle\'>' +
|
||||
' <div class=\'alert-icon error-icon\'>' +
|
||||
' <i class=\'fa fa-exclamation-triangle\' aria-hidden=\'true\'></i>' +
|
||||
|
||||
@@ -1,31 +1,31 @@
|
||||
.aciTree .aciTreeText {
|
||||
font-family: 'Open Sans';
|
||||
font-family: $font-family-primary;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Hover over an element */
|
||||
.aciTree .aciTreeLine.aciTreeHover .aciTreeItem {
|
||||
background-color: #e7f2ff;
|
||||
border-color: #84acdd;
|
||||
background-color: $color-primary-lighter;
|
||||
border-color: $color-primary-light;
|
||||
}
|
||||
|
||||
.aciTree .aciTreeLine.aciTreeHover .aciTreeText {
|
||||
color: black;
|
||||
color: $color-fg;
|
||||
}
|
||||
|
||||
/* Selected element and in focus*/
|
||||
.aciTree.aciTreeFocus .aciTreeFocus > .aciTreeLine .aciTreeItem {
|
||||
background-color: #e7f2ff;
|
||||
background-color: $color-primary-lighter;
|
||||
}
|
||||
|
||||
.aciTree.aciTreeFocus .aciTreeFocus > .aciTreeLine .aciTreeText {
|
||||
color: black;
|
||||
color: $color-fg;
|
||||
}
|
||||
|
||||
/* Selected element but not in focus */
|
||||
.aciTree .aciTreeSelected > .aciTreeLine .aciTreeItem {
|
||||
background-color: #e7f2ff;
|
||||
border-color: #84acdd;
|
||||
background-color: $color-primary-lighter;
|
||||
border-color: $color-primary-light;
|
||||
}
|
||||
|
||||
.aciTree .aciTreeItem {
|
||||
@@ -1,7 +1,7 @@
|
||||
.alert-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: white;
|
||||
color: $color-fg-inverse;
|
||||
padding: 15px 15px 15px 17px;
|
||||
width: 50px;
|
||||
min-height: 50px;
|
||||
@@ -26,15 +26,15 @@
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
background: $color-green-3;
|
||||
background: $color-success;
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
background: $color-red-3;
|
||||
background: $color-danger;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
background: #2c76b4;
|
||||
background: $color-primary;
|
||||
}
|
||||
|
||||
.alert-text {
|
||||
@@ -42,11 +42,13 @@
|
||||
padding: 0 12px 0 10px;
|
||||
align-self: center;
|
||||
// To make sure IE picks up the correct font
|
||||
font-family: 'Open Sans';
|
||||
font-family: $font-family-primary;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
border-color: $color-blue-2;
|
||||
border-color: $color-primary-light;
|
||||
background-color: $color-primary-lighter;
|
||||
color : $color-primary;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
@@ -103,7 +105,7 @@
|
||||
|
||||
.alert-text {
|
||||
flex-grow: 1;
|
||||
border: 1px solid $color-red-2;
|
||||
border: 1px solid $color-danger-light;
|
||||
padding: 7px 12px 6px 10px;
|
||||
border-left: none;
|
||||
-moz-user-select: text;
|
||||
@@ -117,7 +119,7 @@
|
||||
border-radius: 4px;
|
||||
|
||||
.alert-text {
|
||||
border-color: $color-red-2;
|
||||
border-color: $color-danger-light;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -125,12 +127,12 @@
|
||||
border-radius: 4px;
|
||||
|
||||
.alert-text {
|
||||
border-color: $color-green-2;
|
||||
border-color: $color-success-light;
|
||||
}
|
||||
}
|
||||
|
||||
.info-in-footer {
|
||||
border: 1px solid $primary-blue;
|
||||
border: 1px solid $color-primary;
|
||||
border-radius: 4px;
|
||||
height: 35px;
|
||||
|
||||
|
||||
@@ -4,10 +4,10 @@
|
||||
padding: 6px 10px !important;
|
||||
min-height: 35px;
|
||||
max-height: 35px;
|
||||
border-bottom: 2px solid darkgray;
|
||||
background-color: #2C76B4;
|
||||
border-bottom: 2px solid $color-gray-lighter;
|
||||
background-color: $color-primary;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
color: $color-fg-inverse;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
border-radius: 0;
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
/* Overrides alertify js headers hovering behaviour*/
|
||||
.ajs-header:hover {
|
||||
background-color: #2C76B4;
|
||||
background-color: $color-primary;
|
||||
}
|
||||
|
||||
/* Removes padding from alertify footer */
|
||||
@@ -28,10 +28,10 @@
|
||||
|
||||
/* Restyling alertify buttons */
|
||||
.ajs-footer .ajs-buttons {
|
||||
background-color: #D2D2D2;
|
||||
background-color: $color-gray-light;
|
||||
border-width: 2px 0px 0px 0px;
|
||||
border-style: solid;
|
||||
border-color: rgb(85, 85, 85);
|
||||
border-color: $color-gray-dark;
|
||||
}
|
||||
|
||||
.ajs-footer .ajs-buttons.ajs-auxiliary .ajs-button,
|
||||
@@ -73,7 +73,7 @@
|
||||
|
||||
/* Restyling alertify dialogue panel boundaries */
|
||||
.ajs-dialog {
|
||||
border: 3px solid #DDDDDD;
|
||||
border: 3px solid $color-gray-lighter;
|
||||
border-radius: 0;
|
||||
}
|
||||
.ajs-content {
|
||||
@@ -100,8 +100,8 @@
|
||||
.ajs-pin, .ajs-maximize, .ajs-close {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #9E9E9E !important;
|
||||
background-color: #ddd !important;
|
||||
border: 2px solid $color-gray-light !important;
|
||||
background-color: $color-gray-lighter !important;
|
||||
font-size: 12px;
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
position: relative;
|
||||
@@ -113,7 +113,7 @@
|
||||
}
|
||||
|
||||
.ajs-pin:hover, .ajs-maximize:hover, .ajs-close:hover {
|
||||
border: 2px solid #CCCCCC !important;
|
||||
border: 2px solid $color-gray-lighter !important;
|
||||
}
|
||||
|
||||
.alertify.ajs-modeless.ajs-pinnable .ajs-commands button.ajs-pin {
|
||||
@@ -145,7 +145,7 @@
|
||||
}
|
||||
|
||||
button.pg-alertify-button {
|
||||
font-family: 'Open Sans';
|
||||
font-family: $font-family-primary;
|
||||
font-size: 14px;
|
||||
-webkit-font-smoothing: auto;
|
||||
}
|
||||
@@ -161,20 +161,20 @@ button.pg-alertify-button {
|
||||
}
|
||||
|
||||
.ajs-message.ajs-error.ajs-visible {
|
||||
@extend .bg-red-1;
|
||||
@extend .border-red-2;
|
||||
@extend .bg-danger-lighter;
|
||||
@extend .border-danger;
|
||||
@extend .ajs-text-smoothing;
|
||||
}
|
||||
|
||||
.ajs-message.ajs-success.ajs-visible {
|
||||
@extend .bg-green-1;
|
||||
@extend .border-green-2;
|
||||
@extend .bg-success-lighter;
|
||||
@extend .border-success;
|
||||
@extend .ajs-text-smoothing;
|
||||
}
|
||||
|
||||
.ajs-message.ajs-visible {
|
||||
@extend .bg-blue-1;
|
||||
@extend .border-blue-2;
|
||||
@extend .bg-primary-lighter;
|
||||
@extend .border-primary;
|
||||
@extend .ajs-text-smoothing;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
.has-error {
|
||||
.pgadmin-controls > .form-control {
|
||||
border-color: #d0021b;
|
||||
border-color: $color-danger;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.control-label {
|
||||
color: #d0021b;
|
||||
color: $color-danger;
|
||||
}
|
||||
|
||||
.control-label:before {
|
||||
@@ -13,7 +13,7 @@
|
||||
content: "\f071";
|
||||
text-decoration: inherit;
|
||||
position: absolute;
|
||||
color: #d0021b;
|
||||
color: $color-danger;
|
||||
right: 6px;
|
||||
padding-top: 6px;
|
||||
z-index: 1;
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
/* Ensure simple forms don't hit the top of the screen */
|
||||
body {
|
||||
font-family: 'Open Sans';
|
||||
font-family: $font-family-primary;
|
||||
padding-top: 50px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
@@ -70,7 +70,7 @@ iframe {
|
||||
|
||||
/* Disabled menu items */
|
||||
.mnu-disabled {
|
||||
color: #999999 !important;
|
||||
color: $color-gray !important;
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -105,13 +105,13 @@ iframe {
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 5px 0 5px 5px;
|
||||
border-left-color: #cccccc;
|
||||
border-left-color: $color-gray-light;
|
||||
margin-top: 5px;
|
||||
margin-right: -10px;
|
||||
}
|
||||
|
||||
.dropdown-submenu:hover>a:after {
|
||||
border-left-color: #ffffff;
|
||||
border-left-color: $color-bg;
|
||||
}
|
||||
|
||||
.dropdown-submenu.pull-left {
|
||||
@@ -128,26 +128,26 @@ iframe {
|
||||
|
||||
.navbar-inverse > li > a,
|
||||
.navbar-inverse .navbar-nav > li > a {
|
||||
color: #FFF;
|
||||
color: $color-fg-inverse;
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-brand {
|
||||
color: #009DCF;
|
||||
color: $color-brand;
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-brand:hover {
|
||||
color: #009DCF;
|
||||
color: $color-brand;
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-brand:focus {
|
||||
color: #009DCF;
|
||||
color: $color-brand;
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-nav > .open > a,
|
||||
.navbar-inverse .navbar-nav > .active > a,
|
||||
.navbar-inverse .navbar-nav > .open > a:hover,
|
||||
.navbar-inverse .navbar-nav > .open > a:focus {
|
||||
background: #555 none;
|
||||
background: $color-gray-dark none;
|
||||
}
|
||||
|
||||
.dropdown-menu > hr {
|
||||
@@ -171,18 +171,18 @@ iframe {
|
||||
|
||||
.dropdown-menu > li > a:hover,
|
||||
.dropdown-menu > li > a:focus {
|
||||
color: #FFFFFF;
|
||||
background: #555 none;
|
||||
color: $color-fg-inverse;
|
||||
background: $color-gray-dark none;
|
||||
}
|
||||
|
||||
.form-group fieldset {
|
||||
background-color: #F2F2F2;
|
||||
background-color: $color-gray-lighter;
|
||||
padding: 0px 0px 0px 5px;
|
||||
border-width: 1px;
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
margin-bottom: 2px;
|
||||
border-color: #DDD;
|
||||
border-color: $color-gray-lighter;
|
||||
}
|
||||
|
||||
.form-group legend {
|
||||
@@ -270,10 +270,6 @@ iframe {
|
||||
padding: 2px 0px;
|
||||
}
|
||||
|
||||
.fieldset-content .pgadmin-control-group:nth-child(even): {
|
||||
background-color: #FF0000;
|
||||
}
|
||||
|
||||
.control-label {
|
||||
margin: 0px;
|
||||
padding: 5px 25px 5px 5px;
|
||||
@@ -320,7 +316,7 @@ iframe {
|
||||
.obj_properties fieldset > .fieldset-content {
|
||||
border-radius:5px;
|
||||
padding: 5px 10px;
|
||||
border-color: #92AFC8;
|
||||
border-color: $color-primary-lighter;
|
||||
border-width: 2px;
|
||||
border-style: ridge;
|
||||
}
|
||||
@@ -330,7 +326,7 @@ iframe {
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
margin-bottom: 1px;
|
||||
background-color: #2C76B4;
|
||||
background-color: $color-primary;
|
||||
border-radius:5px;
|
||||
padding: 5px 7px;
|
||||
}
|
||||
@@ -362,12 +358,12 @@ iframe {
|
||||
}
|
||||
|
||||
.obj_properties table tr {
|
||||
border: 0px white solid;
|
||||
border: 0px $color-bg solid;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.obj_properties .pgadmin-properties {
|
||||
border: 1px rgb(105, 78, 72) solid;
|
||||
border: 1px $color-gray-dark solid;
|
||||
border-radius: 6px;
|
||||
padding: 5px;
|
||||
margin: 0.2px 2px 2px 2px;
|
||||
@@ -381,11 +377,6 @@ iframe {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
button.btn:disabled {
|
||||
pointer-events: auto;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.pg-prop-btn-group {
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
@@ -398,7 +389,7 @@ button.btn:disabled {
|
||||
|
||||
.pg-prop-btn-group-below {
|
||||
text-align: right;
|
||||
border-color: #A9A9A9;
|
||||
border-color: $color-gray-light;
|
||||
border-width: 2px 1px 0px;
|
||||
border-style: inset;
|
||||
border-left-style: solid
|
||||
@@ -490,21 +481,21 @@ button.btn:disabled {
|
||||
}
|
||||
|
||||
.form-control {
|
||||
color: #333333;
|
||||
color: $color-gray-dark;
|
||||
padding: 3px 6px;
|
||||
}
|
||||
|
||||
.form-control[disabled],
|
||||
.form-control[readonly],
|
||||
fieldset[disabled] .form-control {
|
||||
color: #666666;
|
||||
color: $color-gray-dark;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
padding: 5px;
|
||||
margin-bottom: 5px;
|
||||
background-color: #F7F7F9;
|
||||
border: 1px solid #E1E1E8;
|
||||
background-color: $color-gray-lighter;
|
||||
border: 1px solid $color-gray-lighter;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
@@ -535,7 +526,7 @@ fieldset[disabled] .form-control {
|
||||
}
|
||||
|
||||
.backgrid > thead th{
|
||||
background-color: #2C76B4;
|
||||
background-color: $color-primary;
|
||||
}
|
||||
|
||||
.backgrid > thead > th, .backgrid > tbody > td {
|
||||
@@ -554,7 +545,7 @@ fieldset[disabled] .form-control {
|
||||
}
|
||||
|
||||
.backgrid > thead th a {
|
||||
color: white;
|
||||
color: $color-fg-inverse;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@@ -569,7 +560,7 @@ fieldset[disabled] .form-control {
|
||||
}
|
||||
|
||||
.backgrid.presentation {
|
||||
background-color: #EEEEEE;
|
||||
background-color: $color-gray-lighter;
|
||||
}
|
||||
|
||||
.backgrid.presentation td.renderable {
|
||||
@@ -578,11 +569,11 @@ fieldset[disabled] .form-control {
|
||||
}
|
||||
|
||||
.backgrid:not(.presentation) td.renderable:not(.editable):not(.delete-cell) {
|
||||
background-color: #F1F1F1;
|
||||
background-color: $color-gray-lighter;
|
||||
}
|
||||
|
||||
.backgrid tr.header td.renderable:not(.editable):not(.delete-cell) {
|
||||
background-color: #AAA;
|
||||
background-color: $color-gray-light;
|
||||
}
|
||||
|
||||
.sql-editor-grid-container .backgrid > thead > th.renderable,
|
||||
@@ -591,9 +582,9 @@ fieldset[disabled] .form-control {
|
||||
}
|
||||
|
||||
.subnode-header {
|
||||
background-color: #2C76B4;
|
||||
background-color: $color-primary;
|
||||
height: 35px;
|
||||
color: #FFFFFF;
|
||||
color: $color-fg-inverse;
|
||||
border-radius: 3px 3px 0px 0px;
|
||||
padding-top: 3px;
|
||||
}
|
||||
@@ -622,9 +613,9 @@ fieldset[disabled] .form-control {
|
||||
right: 0;
|
||||
height: auto;
|
||||
margin-left: 23px;
|
||||
background-color: #dadada;
|
||||
background-color: $color-gray-lighter;
|
||||
margin-top: 0px;
|
||||
border: 1px solid #a9a9a9;
|
||||
border: 1px solid $color-gray-light;
|
||||
}
|
||||
.subnode-body {
|
||||
height: auto;
|
||||
@@ -644,19 +635,19 @@ fieldset[disabled] .form-control {
|
||||
}
|
||||
|
||||
.sub-node-form > .nav-tabs {
|
||||
background-color: #DADADA;
|
||||
background-color: $color-gray-lighter;
|
||||
}
|
||||
|
||||
.sub-node-form > ul.tab-content{
|
||||
background-color: #FFFFFF;
|
||||
background-color: $color-bg;
|
||||
padding-left: 15px;
|
||||
left: 1px;
|
||||
}
|
||||
|
||||
table.backgrid tr.new {
|
||||
background-color: rgba(82, 168, 236, 0.1) !important;
|
||||
background-color: rgba($color-primary, 0.1) !important;
|
||||
box-sizing: border-box;
|
||||
outline: 1px solid rgba(82, 168, 236, 0.8);
|
||||
outline: 1px solid rgba($color-primary, 0.8);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
@@ -675,7 +666,7 @@ table.backgrid tr.new {
|
||||
width: 0px;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
border: 0px solid black;
|
||||
border: 0px solid $color-fg;
|
||||
}
|
||||
|
||||
.switch-cell {
|
||||
@@ -725,10 +716,10 @@ td.switch-cell > div.bootstrap-switch {
|
||||
z-index: 4;
|
||||
}
|
||||
.subnode-header-form {
|
||||
background-color: #EEEEEE;
|
||||
background-color: $color-gray-lighter;
|
||||
color: black;
|
||||
padding: 3px 0 10px 0;
|
||||
border-top: solid 1.5px white;
|
||||
border-top: solid 1.5px $color-bg;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@@ -738,7 +729,7 @@ td.switch-cell > div.bootstrap-switch {
|
||||
}
|
||||
|
||||
.subnode-error .help-block {
|
||||
color: #a94442;
|
||||
color: $color-danger;
|
||||
}
|
||||
|
||||
.select2-container--default .select2-search--inline .select2-search__field {
|
||||
@@ -761,7 +752,7 @@ fieldset.inline-fieldset {
|
||||
margin: 0px; margin-left: 2px; margin-right: 2px;
|
||||
padding-right: 10px; padding-left: 10px; padding-top: 6px; padding-bottom: 12px;
|
||||
border: 1px solid; border-radius: 5px;
|
||||
border-color: #C3C3C3; box-shadow: 0.1px 0.1px 0.1px #C3C3C3;
|
||||
border-color: $color-gray-lighter; box-shadow: 0.1px 0.1px 0.1px $color-gray-lighter;
|
||||
}
|
||||
|
||||
fieldset.inline-fieldset-without-border {
|
||||
@@ -771,7 +762,7 @@ fieldset.inline-fieldset-without-border {
|
||||
}
|
||||
|
||||
fieldset.inline-fieldset > legend {
|
||||
display: block; border: 0px solid black; box-shadow: none;
|
||||
display: block; border: 0px solid $color-fg; box-shadow: none;
|
||||
box-sizing: content-box; top: auto; bottom: auto; left: auto;
|
||||
font-size: 14px; font-style: normal; font-weight: 600;
|
||||
height: 20px; line-height: 20px; margin: 0px; padding-bottom: 0px;
|
||||
@@ -818,7 +809,7 @@ div.inline-tab-panel > ul.nav-tabs > li:first-child > a:focus {
|
||||
}
|
||||
|
||||
div.inline-tab-panel > ul.tab-content {
|
||||
padding-left: 5px; padding-right: 5px; border-color: #DDD;
|
||||
padding-left: 5px; padding-right: 5px; border-color: $color-gray-lighter;
|
||||
border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
|
||||
border-width: 0px 1px 1px 1px; border-bottom-right-radius: 5px;
|
||||
border-bottom-left-radius: 5px; border-style: solid solid;
|
||||
@@ -854,11 +845,11 @@ td.edit-cell.editable.sortable.renderable.editor {
|
||||
}
|
||||
|
||||
.subnode > table.backgrid > thead > tr > th:first-child{
|
||||
border-left-color: #2C76B4;
|
||||
border-left-color: $color-primary;
|
||||
}
|
||||
|
||||
.subnode > table.backgrid > thead > tr > th:last-child{
|
||||
border-right-color: #2C76B4;
|
||||
border-right-color: $color-primary;
|
||||
}
|
||||
|
||||
.select2-container .select2-selection--single .select2-selection__rendered{
|
||||
@@ -885,20 +876,20 @@ td.edit-cell.editable.sortable.renderable.editor {
|
||||
|
||||
.select2-container--default.select2-container--focus
|
||||
.select2-selection--multiple {
|
||||
border: 1px solid #aaa !important;
|
||||
border: 1px solid $color-gray-light !important;
|
||||
outline: 0 none;
|
||||
}
|
||||
|
||||
.select2-container--default.select2-container--focus {
|
||||
border-color: #66afe9;
|
||||
border-color: $color-primary-light;
|
||||
outline: 0;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba($color-primary, .6);
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba($color-primary, .6);
|
||||
}
|
||||
|
||||
/* CSS for SqlField control */
|
||||
.sql_field_layout {
|
||||
border: 1px solid rgba(184, 184, 184, 1) !important;
|
||||
border: 1px solid rgba($color-gray-light, 1) !important;
|
||||
border-radius: 4px;
|
||||
padding: 0px;
|
||||
}
|
||||
@@ -923,20 +914,22 @@ td.edit-cell.editable.sortable.renderable.editor {
|
||||
}
|
||||
|
||||
.nav-tabs>li>a{
|
||||
border-radius: 5px 5px 0 0;
|
||||
border-radius: 5px 5px 0 0;
|
||||
margin-right:1px;
|
||||
border:0px;
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
.nav-tabs>li > a:hover , .nav-tabs>li > a:focus{
|
||||
border:0px;
|
||||
margin-bottom:0px;
|
||||
color:black;
|
||||
color:$color-fg;
|
||||
padding-bottom: 4px!important;
|
||||
background-color: $color-gray-white;
|
||||
}
|
||||
.nav-tabs>li.active>a ,.nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover ,.nav-tabs>li.active>a:active{
|
||||
border:0px;
|
||||
color:black;
|
||||
color:$color-fg;
|
||||
margin-top: 0px;
|
||||
padding-top: 7px!important;
|
||||
padding-bottom: 4px!important;
|
||||
@@ -948,26 +941,27 @@ td.edit-cell.editable.sortable.renderable.editor {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
padding-top: 4px;
|
||||
padding-bottom:0px;
|
||||
margin-top:3px;
|
||||
padding-bottom:0px;
|
||||
margin-top:3px;
|
||||
}
|
||||
|
||||
.obj_properties .backform-tab > .nav-tabs {
|
||||
background-color: #E2E2E2;
|
||||
background-color: $color-gray-lighter;
|
||||
}
|
||||
|
||||
ul.nav.nav-tabs {
|
||||
background-color: #E2E2E2;
|
||||
background-color: $color-gray-lighter;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
|
||||
.pg-panel-depends-container >table.backgrid.table-bordered {
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
.pg-panel-depends-container > table > thead > tr > th {
|
||||
padding: 2px;
|
||||
border: 1px solid #ddd;
|
||||
border: 1px $color-gray-lighter solid;
|
||||
}
|
||||
|
||||
.pg-panel-depends-container > table > thead > tr > th:first-child {
|
||||
@@ -994,27 +988,27 @@ ul.nav.nav-tabs {
|
||||
|
||||
/* Alert info panel */
|
||||
.alert-info-panel {
|
||||
border: 2px solid #a1a1a1;
|
||||
border: 2px solid $color-gray-light;
|
||||
margin-top: 2em;
|
||||
padding: 5px 5px;
|
||||
background: #dddddd;
|
||||
background: $color-gray-lighter;
|
||||
border-radius: 5px;
|
||||
height: 8em;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
span.button-label {
|
||||
font-family: 'Open Sans';
|
||||
font-family: $font-family-primary;
|
||||
font-size: initial;
|
||||
}
|
||||
|
||||
.backform_control_notes {
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #ccc;
|
||||
background-color: $color-gray-lighter;
|
||||
border: 1px solid $color-gray-light;
|
||||
border-radius: 3px;
|
||||
color: #333;
|
||||
color: $color-gray-dark;
|
||||
display: block;
|
||||
font-family: 'Source Code Pro';
|
||||
font-family: $font-family-editor;
|
||||
font-size: 12px;
|
||||
line-height: 1.42857;
|
||||
margin: 0 0 10px;
|
||||
@@ -1028,7 +1022,7 @@ div.backform_control_notes label.control-label {
|
||||
}
|
||||
|
||||
form[name="change_password_form"] .help-block {
|
||||
color: #A94442 !important;
|
||||
color: $color-danger !important;
|
||||
}
|
||||
|
||||
.file_selection_ctrl .create_input span {
|
||||
@@ -1051,12 +1045,12 @@ form[name="change_password_form"] .help-block {
|
||||
|
||||
.file_selection_ctrl button.select_item {
|
||||
display: inline;
|
||||
background: #777;
|
||||
background: -webkit-linear-gradient(#777, #999999);
|
||||
background: -o-linear-gradient(#777, #999);
|
||||
background: -moz-linear-gradient(#777, #999);
|
||||
background: linear-gradient(#777, #999);
|
||||
color: #fff;
|
||||
background: $color-gray;
|
||||
background: -webkit-linear-gradient( $color-gray, $color-gray);
|
||||
background: -o-linear-gradient( $color-gray, $color-gray-light);
|
||||
background: -moz-linear-gradient( $color-gray, $color-gray-light);
|
||||
background: linear-gradient( $color-gray, $color-gray-light);
|
||||
color: $color-fg-inverse;
|
||||
padding: 9px 0px 9px 0px;
|
||||
margin-left: 0px;
|
||||
margin-right: -7px;
|
||||
@@ -1166,7 +1160,7 @@ form[name="change_password_form"] .help-block {
|
||||
|
||||
.subnode-footer {
|
||||
text-align: right;
|
||||
border-color: #a9a9a9;
|
||||
border-color: $color-gray-light;
|
||||
border-style: inset inset inset solid;
|
||||
border-width: 2px 1px 0;
|
||||
margin-top: -10px;
|
||||
@@ -1184,12 +1178,12 @@ form[name="change_password_form"] .help-block {
|
||||
}
|
||||
|
||||
.close-error-bar {
|
||||
background: #d0021b;
|
||||
background: $color-danger;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.close-error-bar a {
|
||||
color: #FFFFFF;
|
||||
color: $color-fg-inverse;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -1241,7 +1235,7 @@ height: calc(100% - 35px);
|
||||
|
||||
.pg-panel-statistics-container > table > thead > tr > th {
|
||||
padding: 2px;
|
||||
border: 1px solid #ddd;
|
||||
border: 1px solid $color-gray-lighter;
|
||||
}
|
||||
|
||||
.pg-panel-statistics-container > table > thead > tr > th:first-child {
|
||||
@@ -1274,10 +1268,10 @@ table.backgrid {
|
||||
}
|
||||
|
||||
.pgadmin-controls.focused {
|
||||
border-color: #66afe9;
|
||||
border-color: $color-primary-light;
|
||||
outline: 0;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba($color-primary, .6);
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba($color-primary, .6);
|
||||
}
|
||||
|
||||
.bootstrap-datetimepicker-widget td,
|
||||
@@ -1338,13 +1332,13 @@ body {
|
||||
.backgrid tr th button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #fff;
|
||||
color: $color-fg-inverse;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Latest backgrid adds column name like `label` to td element, override color*/
|
||||
.backgrid td.label {
|
||||
color: #333;
|
||||
color: $color-gray-dark;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
@@ -1361,17 +1355,17 @@ body {
|
||||
|
||||
/* Override CSS for Colour Picker to match it with pgAdmin4 style */
|
||||
.sp-replacer {
|
||||
background: #fff;
|
||||
border: solid 1px #ccc;
|
||||
background: $color-bg;
|
||||
border: solid 1px $color-gray-light;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.sp-replacer:hover {
|
||||
border-color: #ccc;
|
||||
border-color: $color-gray-light;
|
||||
}
|
||||
|
||||
.sp-replacer.sp-active {
|
||||
border-color: #66afe9;
|
||||
border-color: $color-primary-light;
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
@@ -1381,40 +1375,40 @@ body {
|
||||
}
|
||||
|
||||
.sp-replacer.sp-disabled {
|
||||
background-color: #eee;
|
||||
background-color: $color-gray-lighter;
|
||||
}
|
||||
|
||||
.sp-container {
|
||||
background-color: #fff;
|
||||
border: solid 1px #ccc;
|
||||
background-color: $color-bg;
|
||||
border: solid 1px $color-gray-light;
|
||||
border-radius: 3px !important;
|
||||
}
|
||||
|
||||
.sp-palette-button-container button,
|
||||
.sp-palette-button-container button:hover {
|
||||
padding: 5px;
|
||||
background-color: #2c76b4;
|
||||
background-color: $color-primary;
|
||||
background-image: none;
|
||||
font-family: 'Open Sans';
|
||||
font-family: $font-family-primary;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
color: $color-fg-inverse;
|
||||
text-shadow: none;
|
||||
-webkit-font-smoothing: auto;
|
||||
}
|
||||
|
||||
.sp-container button:active {
|
||||
border: 1px solid #84acdd;
|
||||
border: 1px solid $color-primary;
|
||||
border-bottom: none;
|
||||
-webkit-box-shadow: inset 0 0 5px 2px #84acdd, 0 1px 0 0 #84acdd;
|
||||
-moz-box-shadow: inset 0 0 5px 2px #84acdd, 0 1px 0 0 #84acdd;
|
||||
-ms-box-shadow: inset 0 0 5px 2px #84acdd, 0 1px 0 0 #84acdd;
|
||||
-o-box-shadow: inset 0 0 5px 2px #84acdd, 0 1px 0 0 #84acdd;
|
||||
box-shadow: inset 0 0 5px 2px #84acdd, 0 1px 0 0 #84acdd;
|
||||
-webkit-box-shadow: inset 0 0 5px 2px $color-primary, 0 1px 0 0 $color-primary-light;
|
||||
-moz-box-shadow: inset 0 0 5px 2px $color-primary, 0 1px 0 0 $color-primary-light;
|
||||
-ms-box-shadow: inset 0 0 5px 2px $color-primary, 0 1px 0 0 $color-primary-light;
|
||||
-o-box-shadow: inset 0 0 5px 2px $color-primary, 0 1px 0 0 $color-primary-light;
|
||||
box-shadow: inset 0 0 5px 2px $color-primary, 0 1px 0 0 $color-primary-light;
|
||||
}
|
||||
|
||||
.sp-dd {
|
||||
font-size: 8px;
|
||||
color: #888888;
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
/* CSS for custom checkbox editor in SlickGrid */
|
||||
@@ -1423,7 +1417,7 @@ body {
|
||||
vertical-align: top;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid #333;
|
||||
border: 1px solid $color-gray-dark;
|
||||
margin: 3px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
@@ -1431,11 +1425,11 @@ body {
|
||||
|
||||
.multi-checkbox .check.checked,
|
||||
.multi-checkbox .check.unchecked {
|
||||
background: #fff;
|
||||
background: $color-bg;
|
||||
}
|
||||
|
||||
.multi-checkbox .check.partial {
|
||||
background: #e8e8e8;
|
||||
background: $color-gray-lighter;
|
||||
}
|
||||
|
||||
.multi-checkbox .check.checked:after {
|
||||
@@ -1448,6 +1442,11 @@ body {
|
||||
|
||||
/* Override default bootstrap popover fonts & size */
|
||||
.popover-content {
|
||||
font-family: 'Open Sans';
|
||||
font-family: $font-family-primary;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
|
||||
.btn.btn-default[disabled] {
|
||||
color: $color-gray;
|
||||
}
|
||||
@@ -1,7 +1,10 @@
|
||||
.cm-s-default .CodeMirror {
|
||||
background: $color-editor-bg;
|
||||
}
|
||||
/* To override inbuilt Green color for matchingbracket */
|
||||
.cm-s-default .CodeMirror-matchingbracket {
|
||||
color: #333333 !important;
|
||||
background-color: #e8e8e8 !important;
|
||||
color: $color-gray-dark !important;
|
||||
background-color: $color-gray-lighter !important;
|
||||
}
|
||||
|
||||
/* Ensure the codemirror editor displays full height gutters when resized */
|
||||
@@ -12,7 +15,7 @@
|
||||
|
||||
/*
|
||||
* Remove border right from "CodeMirror-gutters"
|
||||
* class becuase its height doesn't increase
|
||||
* class because its height doesn't increase
|
||||
* with every new line added, instead add border
|
||||
* right to ".CodeMirror-linenumber" class which
|
||||
* adds a new div for every new line added
|
||||
@@ -22,45 +25,45 @@
|
||||
}
|
||||
|
||||
.sql_field_layout .CodeMirror-linenumber {
|
||||
border-right: 1px solid #ddd;
|
||||
background-color: #f7f7f7;
|
||||
border-right: 1px solid $color-gray-lighter;
|
||||
background-color: $color-gray-lighter;
|
||||
}
|
||||
|
||||
/* class to disable Codemirror editor */
|
||||
.cm_disabled {
|
||||
background: #EEEEEE;
|
||||
background: $color-gray-lighter;
|
||||
}
|
||||
|
||||
/* make syntax-highlighting bold */
|
||||
.cm-s-default .cm-keyword {
|
||||
font-weight: 600;
|
||||
color: #908;
|
||||
color: $color-editor-keyword;
|
||||
}
|
||||
|
||||
.cm-s-default .cm-number {
|
||||
font-weight: 600;
|
||||
color: #964;
|
||||
color: $color-editor-number;
|
||||
}
|
||||
|
||||
/* Codemirror buttons */
|
||||
.CodeMirror-dialog button {
|
||||
font-family: 'Open Sans';
|
||||
color: white;
|
||||
font-family: $font-family-primary;
|
||||
color: $color-fg-inverse;
|
||||
font-size: 70%;
|
||||
background-image: -webkit-linear-gradient(top, #337ab7 0%, #265a88 100%);
|
||||
background-image: -o-linear-gradient(top, #337ab7 0%, #265a88 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#265a88));
|
||||
background-image: linear-gradient(to bottom, #337ab7 0%, #265a88 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0);
|
||||
background-image: -webkit-linear-gradient(top, $color-primary-light 0%, $color-primary 100%);
|
||||
background-image: -o-linear-gradient(top, $color-primary-light 0%, $color-primary 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from($color-primary-light), to($color-primary));
|
||||
background-image: linear-gradient(to bottom, $color-primary-light 0%, $color-primary 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$color-primary-light}', endColorstr='#{$color-primary}', GradientType=0);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
||||
background-repeat: repeat-x;
|
||||
border-color: #245580;
|
||||
border-color: $color-primary;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#history-detail-query .CodeMirror {
|
||||
border: 1px solid #CCCCCC;
|
||||
background-color: #F7F7F7;
|
||||
border: 1px solid $color-gray-light;
|
||||
background-color: $color-gray-lighter;
|
||||
width: 100%;
|
||||
padding-left: 5px;
|
||||
position: absolute;
|
||||
@@ -1,62 +0,0 @@
|
||||
$color-gray-1: #f9f9f9;
|
||||
$color-gray-2: #e8e8e8;
|
||||
$color-gray-3: #cccccc;
|
||||
$color-gray-4: #888888;
|
||||
$color-gray-5: #555555;
|
||||
$color-gray-6: #333333;
|
||||
|
||||
.bg-gray-1 {
|
||||
background-color: $color-gray-1;
|
||||
}
|
||||
|
||||
.bg-gray-2 {
|
||||
background-color: $color-gray-2;
|
||||
}
|
||||
|
||||
.bg-gray-3 {
|
||||
background-color: $color-gray-3;
|
||||
}
|
||||
|
||||
.bg-gray-4 {
|
||||
background-color: $color-gray-4;
|
||||
}
|
||||
|
||||
.bg-gray-5 {
|
||||
background-color: $color-gray-5;
|
||||
}
|
||||
|
||||
.bg-gray-6 {
|
||||
background-color: $color-gray-6;
|
||||
}
|
||||
|
||||
.border-gray-1 {
|
||||
border-color: $color-gray-1;
|
||||
}
|
||||
|
||||
.border-gray-2 {
|
||||
border-color: $color-gray-2;
|
||||
}
|
||||
|
||||
.border-gray-3 {
|
||||
border-color: $color-gray-3;
|
||||
}
|
||||
|
||||
.border-gray-4 {
|
||||
border-color: $color-gray-4;
|
||||
}
|
||||
|
||||
.border-gray-5 {
|
||||
border-color: $color-gray-5;
|
||||
}
|
||||
|
||||
.border-gray-6 {
|
||||
border-color: $color-gray-6;
|
||||
}
|
||||
|
||||
.font-gray-4 {
|
||||
color: $color-gray-4;
|
||||
}
|
||||
|
||||
.font-gray-6 {
|
||||
color: $color-gray-6;
|
||||
}
|
||||
@@ -1,84 +0,0 @@
|
||||
$color-blue-1: #e7f2ff;
|
||||
$color-blue-2: #84acdd;
|
||||
$color-red-1: #f2dede;
|
||||
$color-red-2: #de8585;
|
||||
$color-red-3: #d0021b;
|
||||
$color-green-1: #dff0d7;
|
||||
$color-green-2: #a2c189;
|
||||
$color-green-3: #3a773a;
|
||||
|
||||
.bg-white-1 {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.bg-blue-1 {
|
||||
background-color: $color-blue-1;
|
||||
}
|
||||
|
||||
.bg-blue-2 {
|
||||
background-color: $color-blue-2;
|
||||
}
|
||||
|
||||
.bg-red-1 {
|
||||
background-color: $color-red-1;
|
||||
}
|
||||
|
||||
.bg-red-2 {
|
||||
background-color: $color-red-2;
|
||||
}
|
||||
|
||||
.bg-red-3 {
|
||||
background-color: $color-red-3;
|
||||
}
|
||||
|
||||
.bg-green-1 {
|
||||
background-color: $color-green-1;
|
||||
}
|
||||
|
||||
.bg-green-2 {
|
||||
background-color: $color-green-2;
|
||||
}
|
||||
|
||||
.bg-green-3 {
|
||||
background-color: $color-green-3;
|
||||
}
|
||||
|
||||
.border-blue-1 {
|
||||
border-color: $color-blue-1;
|
||||
}
|
||||
|
||||
.border-blue-2 {
|
||||
border-color: $color-blue-2;
|
||||
}
|
||||
|
||||
.border-red-1 {
|
||||
border-color: $color-red-1;
|
||||
}
|
||||
|
||||
.border-red-2 {
|
||||
border-color: $color-red-2;
|
||||
}
|
||||
|
||||
.border-red-3 {
|
||||
border-color: $color-red-3;
|
||||
}
|
||||
|
||||
.border-green-1 {
|
||||
border-color: $color-green-1;
|
||||
}
|
||||
|
||||
.border-green-2 {
|
||||
border-color: $color-green-2;
|
||||
}
|
||||
|
||||
.border-green-3 {
|
||||
border-color: $color-green-3;
|
||||
}
|
||||
|
||||
.font-red-3 {
|
||||
color: $color-red-3;
|
||||
}
|
||||
|
||||
.font-green-3 {
|
||||
color: $color-green-3;
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
$primary-blue: #2c76b4;
|
||||
|
||||
.bg-primary-blue {
|
||||
background-color: $primary-blue;
|
||||
}
|
||||
|
||||
.border-primary-blue {
|
||||
border-color: $primary-blue;
|
||||
}
|
||||
|
||||
.font-primary-blue {
|
||||
color: $primary-blue;
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
.select2-container--default .select2-results__option--highlighted[aria-selected] {
|
||||
background-color: #e7f2ff;
|
||||
color: #333333;
|
||||
}
|
||||
background-color: $color-primary-lighter;
|
||||
color: $color-gray-dark;
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
$font-family-1: "Open Sans";
|
||||
|
||||
.text-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.text-14 {
|
||||
font-family: $font-family-1;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.text-13 {
|
||||
font-family: $font-family-1;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.text-12 {
|
||||
font-family: $font-family-1;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.text-11 {
|
||||
font-family: $font-family-1;
|
||||
font-size: 11px;
|
||||
}
|
||||
360
web/pgadmin/static/scss/_webcabin.overrides.scss
Normal file
360
web/pgadmin/static/scss/_webcabin.overrides.scss
Normal file
@@ -0,0 +1,360 @@
|
||||
.wcDocker {
|
||||
background-color: $color-bg;
|
||||
}
|
||||
|
||||
.wcPanelBackground {
|
||||
background-color: $color-bg;
|
||||
}
|
||||
|
||||
.wcPanelBackground .wcCenter {
|
||||
background-color: $color-gray-lighter;
|
||||
}
|
||||
|
||||
.wcFrameFlasher {
|
||||
background-color: $color-danger;
|
||||
}
|
||||
|
||||
.wcFrameShadower {
|
||||
background-color: $color-gray-light;
|
||||
}
|
||||
|
||||
.wcFrameTitle {
|
||||
font-size: 13px;
|
||||
padding-left: 8px;
|
||||
vertical-align: middle;
|
||||
text-align: left;
|
||||
border-bottom: 1px none;
|
||||
height: 100%;
|
||||
padding-top: 10px;
|
||||
background-color: $color-gray-lighter;
|
||||
}
|
||||
|
||||
.wcFrameCenter {
|
||||
top: 35px;
|
||||
}
|
||||
|
||||
.wcFrameButton {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid $color-gray;
|
||||
background-color: $color-gray-lighter;
|
||||
font-size: 12px;
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.wcFrameMiniButton {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.wcFrameButton.wcFrameButtonLeft {
|
||||
right: 10px;
|
||||
}
|
||||
.wcFrameButton.wcFrameButtonRight {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.wcFrameButton:hover {
|
||||
border: 2px solid $color-gray-light;
|
||||
}
|
||||
|
||||
.wcFrameButton:active {
|
||||
border: 2px solid $color-gray-lighter;
|
||||
}
|
||||
|
||||
.wcFrameButtonToggled, .wcFrameButtonToggled:hover {
|
||||
border-style: inset;
|
||||
}
|
||||
|
||||
.wcLayoutGrid, .wcLayoutGrid tr, .wcLayoutGrid td {
|
||||
border: 1px solid $color-gray;
|
||||
}
|
||||
|
||||
.wcLayoutGridAlternate tr:nth-child(even), .wcLayoutGridAltColor {
|
||||
background-color: rgba($color-danger-light, 0.2) !important;
|
||||
}
|
||||
|
||||
.wcFrameEdge {
|
||||
border: 1px solid $color-gray-lighter;
|
||||
background-color: $color-gray-lighter;
|
||||
}
|
||||
|
||||
.wcFrame > .wcFrameEdgeV ~ .wcFrameEdgeV {
|
||||
box-shadow: 3px 6px 3px 1px $color-gray !important;
|
||||
}
|
||||
|
||||
.wcFrame > .wcFrameEdge ~ .wcFrameEdgeV {
|
||||
box-shadow: 1px 0px 0px 0px $color-gray;
|
||||
}
|
||||
|
||||
.wcFrame > .wcFrameEdgeH ~ .wcFrameEdgeH {
|
||||
box-shadow: 2px 3px 3px 2px $color-gray !important;
|
||||
}
|
||||
|
||||
.wcFrame > .wcFrameEdgeH {
|
||||
box-shadow: 1px 0px 0px 0px $color-gray;
|
||||
}
|
||||
|
||||
.wcFrameEdgeH {
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.wcFrameEdgeV {
|
||||
width: 6px;
|
||||
}
|
||||
.wcFrameCornerNW,
|
||||
.wcFrameCornerNE {
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.wcSplitterBar {
|
||||
border: 1px solid $color-gray;
|
||||
background-color: $color-gray-light;
|
||||
}
|
||||
|
||||
.wcSplitterBarV {
|
||||
border-left: 3px solid $color-gray-light;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.wcSplitterBarH {
|
||||
border-top: 3px solid $color-gray-light;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.wcPanelTab {
|
||||
color: $color-primary;
|
||||
background-color: $color-gray-lighter;
|
||||
border: 0px;
|
||||
border-radius: 4px 4px 0px 0px;
|
||||
border-bottom: 0px;
|
||||
margin-right: 1px;
|
||||
margin-top: 10px;
|
||||
font-size: 13px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.wcPanelTab:hover {
|
||||
background-color: $color-gray-white;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.wcPanelTabActive {
|
||||
background-color: $color-bg;
|
||||
color: $color-fg;
|
||||
margin-top: 5px;
|
||||
line-height: 30px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.wcFloating .wcPanelTabActive {
|
||||
background-color: $color-primary;
|
||||
margin-top: -2px;
|
||||
font-weight: bold;
|
||||
color: $color-fg-inverse;
|
||||
}
|
||||
|
||||
.wcFloating .wcPanelTabActive:hover {
|
||||
background-color: $color-primary-light;
|
||||
}
|
||||
|
||||
.wcGhost {
|
||||
background-color: $color-primary-light;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.wcMenuList, .context-menu-list {
|
||||
border: 1px solid $color-gray-lighter;
|
||||
z-index: 999 !important;
|
||||
background: $color-gray-lighter;
|
||||
}
|
||||
|
||||
.wcMenuItem, .context-menu-item {
|
||||
background-color: $color-gray-lighter;
|
||||
}
|
||||
|
||||
.wcMenuItemHover, .wcMenuItem:hover, .context-menu-item.hover, .context-menu-item:hover {
|
||||
background-color: $color-primary !important;
|
||||
}
|
||||
|
||||
.wcMenuItem.disabled, .context-menu-item.disabled {
|
||||
color: $color-gray-dark;
|
||||
background-color: $color-gray;
|
||||
}
|
||||
|
||||
.wcMenuSeparator, .context-menu-separator {
|
||||
border: 2px solid $color-gray-light;
|
||||
background-color: $color-gray-lighter;
|
||||
}
|
||||
|
||||
.wcInput, input {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.wcSelect, select {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.wcLayout, .wcLayout tr, .wcLayout td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.wcPanelTab > div > .wcTabIcon {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
padding-left: 20px;
|
||||
margin-top: -5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.wcPanelTab > div .wcTabIcon.fa {
|
||||
padding-left: 0px !important;
|
||||
color: $color-fg;
|
||||
}
|
||||
|
||||
.wcTabIcon.fa {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.wcFrameTitleBar {
|
||||
background-color: $color-gray-lighter;
|
||||
height: 35px;
|
||||
border-bottom: $color-gray;
|
||||
}
|
||||
|
||||
.wcFloating .wcFrameTitleBar {
|
||||
border-bottom: 2px solid $color-gray;
|
||||
background-color: $color-primary;
|
||||
}
|
||||
|
||||
.wcFloating .wcFrameTitleBar > div .wcTabIcon.fa {
|
||||
color: $color-fg-inverse;
|
||||
}
|
||||
|
||||
.wcFrame .wcFrameTitleBar a:hover {
|
||||
color: $color-primary-dark;
|
||||
}
|
||||
|
||||
.wcFrameButtonBar {
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
.context-menu-list {
|
||||
font-family: $font-family-primary;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.context-menu-icon:before {
|
||||
color: $color-gray-darker;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.context-menu-icon-fa:before {
|
||||
font-family: 'FontAwesome'
|
||||
}
|
||||
|
||||
.context-menu-item {
|
||||
display:block;
|
||||
font-family: $font-family-primary;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.context-menu-list {
|
||||
padding: 2px 0;
|
||||
width: initial !important;
|
||||
}
|
||||
|
||||
.context-menu-list > .context-menu-item {
|
||||
display:block !important;
|
||||
}
|
||||
|
||||
.context-menu-list > .context-menu-separator {
|
||||
margin: 0;
|
||||
border: 1px solid $color-bg;
|
||||
}
|
||||
|
||||
.context-menu-icon-wcTabIcon {
|
||||
text-align: left;
|
||||
padding: 3px 28px;
|
||||
height: auto;
|
||||
background-position: 5px 50%;
|
||||
}
|
||||
|
||||
ul.dropdown-menu > li.menu-item > a > i.wcTabIcon {
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
.wcFrameButton .fa.fa-close {
|
||||
margin-top: 3.5px;
|
||||
padding-left: 1px;
|
||||
}
|
||||
|
||||
span.fa.fa-arrow-left, .fa-arrow-right {
|
||||
margin-top: 4px;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
.wcMenuSubMenu {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
i.wcTabIcon {
|
||||
min-width: 20px;
|
||||
}
|
||||
|
||||
.wcLoadingBackground {
|
||||
background: $color-bg-inverse;
|
||||
opacity: 0.6 !important;
|
||||
}
|
||||
|
||||
.wcLoadingIcon.fa-spinner {
|
||||
position: absolute;
|
||||
top: 34%;
|
||||
left: 48%;
|
||||
font-size: 50px;
|
||||
color: $color-gray-light;
|
||||
height: 49px !important;
|
||||
}
|
||||
|
||||
.wcLoadingLabel {
|
||||
top: 40%;
|
||||
left: 0;
|
||||
color: $color-fg-inverse;
|
||||
width: 100%;
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wcPanelTab > div {
|
||||
display: inline-block;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
max-width: 125px;
|
||||
}
|
||||
|
||||
.wcPanelTabActive > div {
|
||||
width: auto !important;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.wcFrameTitleBar.wcTabTop .wcFrameButtonBar {
|
||||
right: 30px !important;
|
||||
}
|
||||
|
||||
.wcFloating .wcPanelTab .wcTabIcon {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-top: 8px;
|
||||
border-radius: 2px;
|
||||
padding: 0px 13px 5px 5px;
|
||||
background-color: $color-bg;
|
||||
background-size: 18px !important;
|
||||
height: 18px;
|
||||
}
|
||||
@@ -1,20 +1,9 @@
|
||||
$enable-flex: true;
|
||||
@import '../css/webcabin.overrides.css';
|
||||
@import '../css/bootstrap.overrides.css';
|
||||
@import '../css/aci_tree.overrides.css';
|
||||
@import '../css/select2.overrides.css';
|
||||
@import '../css/pgadmin.css';
|
||||
@import '../css/pgadmin.style.css';
|
||||
@import '../css/codemirror.overrides.css';
|
||||
|
||||
@import 'primaryblue';
|
||||
@import 'colorsgrey';
|
||||
@import 'othercolors';
|
||||
@import 'typography';
|
||||
|
||||
@import 'utils';
|
||||
@import 'webcabin.overrides';
|
||||
@import 'bootstrap.overrides';
|
||||
@import 'aci_tree.overrides';
|
||||
@import 'select2.overrides';
|
||||
@import 'codemirror.overrides';
|
||||
|
||||
@import 'alert';
|
||||
@import 'alertify.overrides';
|
||||
@import 'backform.overrides';
|
||||
@import 'sqleditor/history';
|
||||
|
||||
243
web/pgadmin/static/scss/resources/_default.style.scss
Normal file
243
web/pgadmin/static/scss/resources/_default.style.scss
Normal file
@@ -0,0 +1,243 @@
|
||||
/* Background color */
|
||||
|
||||
.bg-white {
|
||||
background-color: $color-bg;
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
background-color: $color-primary;
|
||||
|
||||
&-lighter {
|
||||
background-color: $color-primary-lighter;
|
||||
}
|
||||
|
||||
&-light{
|
||||
background-color: $color-primary-light;
|
||||
}
|
||||
|
||||
&-dark{
|
||||
background-color: $color-primary-dark;
|
||||
}
|
||||
|
||||
&-darker{
|
||||
background-color: $color-primary-darker;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-danger {
|
||||
background-color: $color-danger;
|
||||
|
||||
&-lighter {
|
||||
background-color: $color-danger-lighter;
|
||||
}
|
||||
|
||||
&-light {
|
||||
background-color: $color-danger-light;
|
||||
}
|
||||
|
||||
&-dark{
|
||||
background-color: $color-danger-dark;
|
||||
}
|
||||
|
||||
&-darker{
|
||||
background-color: $color-danger-darker;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-success {
|
||||
background-color: $color-success;
|
||||
|
||||
&-lighter {
|
||||
background-color: $color-success-lighter;
|
||||
}
|
||||
|
||||
&-light {
|
||||
background-color: $color-success-light;
|
||||
}
|
||||
|
||||
&-dark{
|
||||
background-color: $color-success-dark;
|
||||
}
|
||||
|
||||
&-darker{
|
||||
background-color: $color-success-darker;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.bg-warning {
|
||||
background-color: $color-warning;
|
||||
|
||||
&-lighter {
|
||||
background-color: $color-warning-lighter;
|
||||
}
|
||||
|
||||
&-light {
|
||||
background-color: $color-warning-light;
|
||||
}
|
||||
|
||||
&-dark{
|
||||
background-color: $color-warning-dark;
|
||||
}
|
||||
|
||||
&-darker{
|
||||
background-color: $color-warning-darker;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.bg-gray {
|
||||
background-color: $color-gray;
|
||||
|
||||
&-lighter {
|
||||
background-color: $color-gray-lighter;
|
||||
}
|
||||
|
||||
&-light {
|
||||
background-color: $color-gray-light;
|
||||
}
|
||||
|
||||
&-dark {
|
||||
background-color: $color-gray-dark;
|
||||
}
|
||||
|
||||
&-darker {
|
||||
background-color: $color-gray-darker;
|
||||
}
|
||||
}
|
||||
|
||||
/* Borders */
|
||||
.border-primary {
|
||||
border-color: $color-primary;
|
||||
|
||||
&-lighter {
|
||||
border-color: $color-primary-lighter;
|
||||
}
|
||||
|
||||
&-light {
|
||||
border-color: $color-primary-light;
|
||||
}
|
||||
|
||||
&-dark {
|
||||
border-color: $color-primary-dark;
|
||||
}
|
||||
|
||||
&-darker {
|
||||
border-color: $color-primary-darker;
|
||||
}
|
||||
}
|
||||
|
||||
.border-danger {
|
||||
border-color: $color-danger;
|
||||
|
||||
&-lighter{
|
||||
border-color: $color-danger-lighter;
|
||||
}
|
||||
|
||||
&-light {
|
||||
border-color: $color-danger-light;
|
||||
}
|
||||
|
||||
&-dark {
|
||||
border-color: $color-danger-dark;
|
||||
}
|
||||
|
||||
&-darker {
|
||||
border-color: $color-danger-darker;
|
||||
}
|
||||
}
|
||||
|
||||
.border-success {
|
||||
border-color: $color-success-light;
|
||||
|
||||
&-lighter {
|
||||
border-color: $color-success-lighter;
|
||||
}
|
||||
|
||||
&-light {
|
||||
border-color: $color-success-light;
|
||||
}
|
||||
|
||||
&-dark {
|
||||
border-color: $color-success-dark;
|
||||
}
|
||||
|
||||
&-darker {
|
||||
border-color: $color-success-darker;
|
||||
}
|
||||
}
|
||||
|
||||
.border-gray {
|
||||
border: 2px solid $color-gray;
|
||||
|
||||
&-lighter {
|
||||
border: 2px solid $color-gray-lighter;
|
||||
}
|
||||
|
||||
&-light {
|
||||
border: 2px solid $color-gray-light;
|
||||
}
|
||||
|
||||
&-dark {
|
||||
border: 2px solid $color-gray-dark;
|
||||
}
|
||||
|
||||
&-darker {
|
||||
border: 2px solid $color-gray-darker;
|
||||
}
|
||||
|
||||
&-white {
|
||||
border: 2px solid $color-gray-white;
|
||||
}
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
|
||||
|
||||
.font-white {
|
||||
color: $color-fg-inverse;
|
||||
}
|
||||
|
||||
.text-gray {
|
||||
color: $color-gray;
|
||||
|
||||
&-dark {
|
||||
color: $color-gray-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
color: $color-danger;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: $color-success;
|
||||
}
|
||||
|
||||
.text-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.text-14 {
|
||||
font-family: $font-family-primary;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.text-13 {
|
||||
font-family: $font-family-primary;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.text-12 {
|
||||
font-family: $font-family-primary;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.text-11 {
|
||||
font-family: $font-family-primary;
|
||||
font-size: 11px;
|
||||
}
|
||||
63
web/pgadmin/static/scss/resources/_default.variables.scss
Normal file
63
web/pgadmin/static/scss/resources/_default.variables.scss
Normal file
@@ -0,0 +1,63 @@
|
||||
$enable-flex: true !default;
|
||||
|
||||
$color-bg: #fff !default;
|
||||
$color-fg: #000 !default;
|
||||
|
||||
$color-bg-inverse: $color-fg;
|
||||
$color-fg-inverse: $color-bg;
|
||||
|
||||
$color-primary: #2c76b4 !default;
|
||||
$color-primary-fg: $color-fg !default;
|
||||
|
||||
$color-danger: #d63a35 !default;
|
||||
$color-danger-fg: $color-fg !default;
|
||||
|
||||
$color-success: #3a773a !default;
|
||||
$color-success-fg: $color-fg !default;
|
||||
|
||||
$color-warning: #eea236 !default;
|
||||
$color-warning-fg: $color-fg !default;
|
||||
|
||||
$color-brand: #009dcf !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;
|
||||
|
||||
$gray-base: #000 !default;
|
||||
|
||||
$color-gray-darker: #333333;
|
||||
$color-gray-dark: #555555;
|
||||
$color-gray: #888888;
|
||||
$color-gray-light: #cccccc;
|
||||
$color-gray-lighter: #e8e8e8;
|
||||
$color-gray-white: #f9f9f9;
|
||||
|
||||
$color-primary-light: lighten($color-primary, 25%);
|
||||
$color-primary-lighter: lighten($color-primary, 50%);
|
||||
$color-primary-dark: darken($color-primary, 10%);
|
||||
$color-primary-darker: darken($color-primary, 25%);
|
||||
|
||||
$color-danger-light: lighten($color-danger, 25%);
|
||||
$color-danger-lighter: lighten($color-danger, 40%);
|
||||
$color-danger-dark: darken($color-danger, 10%);
|
||||
$color-danger-darker: darken($color-danger, 25%);
|
||||
|
||||
$color-success-light: lighten($color-success, 30%);
|
||||
$color-success-lighter: lighten($color-success, 50%);
|
||||
$color-success-dark: darken($color-success, 10%);
|
||||
$color-success-darker: darken($color-success, 25%);
|
||||
|
||||
$color-warning-light: lighten($color-warning, 25%);
|
||||
$color-warning-lighter: lighten($color-warning, 40%);
|
||||
$color-warning-dark: darken($color-warning, 25%);
|
||||
$color-warning-darker: darken($color-warning, 40%);
|
||||
|
||||
/* Typography */
|
||||
/* Use absolute path as this will be used in different directories */
|
||||
$font-family-primary: "Open Sans" !default;
|
||||
$font-url-primary: '~top/static/fonts/OpenSans-Regular.ttf' !default;
|
||||
|
||||
$font-family-editor: 'Source Code Pro' !default;
|
||||
$font-url-editor: '~top/static/fonts/SourceCodePro-Regular.ttf' !default;
|
||||
@@ -786,7 +786,7 @@ lgg-el-container[el=md] .pg-el-lg-8,
|
||||
}
|
||||
|
||||
.Resizer {
|
||||
background: #dddddd;
|
||||
background: $color-gray-lighter;
|
||||
z-index: 1;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
@@ -800,13 +800,14 @@ lgg-el-container[el=md] .pg-el-lg-8,
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
cursor: ew-resize;
|
||||
border-bottom: 1px solid #aaaaaa;
|
||||
border-bottom: 1px solid $color-gray-light;
|
||||
}
|
||||
|
||||
|
||||
.Resizer.vertical {
|
||||
width: 4px;
|
||||
cursor: ew-resize;
|
||||
border-right: 1px solid #aaaaaa;
|
||||
border-right: 1px solid $color-gray-light;
|
||||
}
|
||||
|
||||
.Resizer.disabled {
|
||||
@@ -818,15 +819,15 @@ lgg-el-container[el=md] .pg-el-lg-8,
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url('../fonts/OpenSans-Regular.ttf');
|
||||
font-family: $font-family-primary;
|
||||
src: url($font-url-primary);
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Code Pro';
|
||||
src: url('../fonts/SourceCodePro-Regular.ttf');
|
||||
font-family: $font-family-editor;
|
||||
src: url($font-url-editor);
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@@ -869,3 +870,42 @@ lgg-el-container[el=md] .pg-el-lg-8,
|
||||
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
|
||||
background-color: initial !important;
|
||||
}
|
||||
|
||||
|
||||
.alert-box {
|
||||
padding: 15px; }
|
||||
|
||||
.alert-icon {
|
||||
display: table-cell; }
|
||||
|
||||
.alert-text {
|
||||
display: table-cell;
|
||||
padding-left: 10px; }
|
||||
|
||||
.alert-info {
|
||||
border-color: $color-primary-light; }
|
||||
|
||||
.color-chip {
|
||||
align-items: center;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.15);
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
display: flex;
|
||||
font-size: 1.25em;
|
||||
height: 70px;
|
||||
justify-content: center;
|
||||
margin: 0 0 0.5em;
|
||||
width: 100%; }
|
||||
|
||||
.bg-highlight {
|
||||
background-color: $color-primary-lighter; }
|
||||
|
||||
.bg-border {
|
||||
background-color: $color-primary-light; }
|
||||
|
||||
.opacity-5 {
|
||||
opacity: 0.5; }
|
||||
|
||||
.alertify .ajs-header,
|
||||
.alertify .ajs-body {
|
||||
font-family: $font-family-primary; }
|
||||
6
web/pgadmin/static/scss/resources/pgadmin.resources.scss
Normal file
6
web/pgadmin/static/scss/resources/pgadmin.resources.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
/* All the global variables, mixins goes here */
|
||||
@import 'pgadmin.variables.scss';
|
||||
@import 'default.variables.scss';
|
||||
@import 'default.style.scss';
|
||||
@import 'pgadmin.style.scss';
|
||||
@import 'utils.scss';
|
||||
@@ -1,194 +0,0 @@
|
||||
.query-history {
|
||||
height: 100%;
|
||||
.list-item {
|
||||
border-bottom: 1px solid $color-gray-3;
|
||||
}
|
||||
|
||||
.entry {
|
||||
@extend .text-14;
|
||||
@extend .bg-white-1;
|
||||
font-family: 'Source Code Pro';
|
||||
border: 2px solid transparent;
|
||||
margin-left: 1px;
|
||||
padding: 0 8px 0 5px;
|
||||
|
||||
.other-info {
|
||||
@extend .text-13;
|
||||
@extend .font-gray-4;
|
||||
font-family: 'Source Code Pro';
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
.timestamp {
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.query {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
user-select: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.date-label {
|
||||
font-family: 'Source Code Pro';
|
||||
background: #e8e8e8;
|
||||
padding: 2px 9px;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
color: #888888;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
}
|
||||
|
||||
.entry.error {
|
||||
@extend .bg-red-1;
|
||||
}
|
||||
|
||||
.entry.selected.error {
|
||||
background-color: #d7d0d9;
|
||||
}
|
||||
|
||||
.entry.selected {
|
||||
@extend .font-primary-blue;
|
||||
@extend .border-primary-blue;
|
||||
@extend .bg-blue-1;
|
||||
font-weight: bold;
|
||||
border: 2px solid;
|
||||
|
||||
.other-info {
|
||||
@extend .font-primary-blue;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-label {
|
||||
@extend .text-12;
|
||||
@extend .font-gray-4;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.query-detail {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.error-message-block {
|
||||
@extend .bg-red-1;
|
||||
flex: 0.3;
|
||||
padding-left: 20px;
|
||||
|
||||
.history-error-text {
|
||||
@extend .text-12;
|
||||
padding: 7px 0;
|
||||
|
||||
span {
|
||||
@extend .font-red-3;
|
||||
font-weight: 500;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.metadata-block {
|
||||
flex: 0.4;
|
||||
padding: 10px 20px;
|
||||
|
||||
.metadata {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
min-width: 130px;
|
||||
|
||||
.value {
|
||||
@extend .text-14;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.description {
|
||||
@extend .header-label;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.query-statement-block {
|
||||
flex: 5;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
height: 0;
|
||||
position: relative;
|
||||
|
||||
.copy-all, .was-copied {
|
||||
float: left;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
border: 1px solid $color-gray-3;
|
||||
color: $primary-blue;
|
||||
font-size: 12px;
|
||||
box-shadow: 1px 2px 4px 0px $color-gray-3;
|
||||
padding: 3px 12px 3px 10px;
|
||||
font-weight: 500;
|
||||
min-width: 75px;
|
||||
}
|
||||
|
||||
.copy-all {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.was-copied {
|
||||
background-color: $color-blue-1;
|
||||
border-color: $color-blue-2;
|
||||
}
|
||||
|
||||
.CodeMirror-scroll {
|
||||
padding-top: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.block-divider {
|
||||
@extend .border-gray-3;
|
||||
margin-top: 11px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.message-block {
|
||||
flex: 2;
|
||||
display: flex;
|
||||
padding: 0 20px;
|
||||
|
||||
.message {
|
||||
flex: 2 2 0%;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
|
||||
.message-header {
|
||||
@extend .header-label;
|
||||
@extend .not-selectable;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 0 1 auto;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
.content-value {
|
||||
@extend .bg-white-1;
|
||||
@extend .text-13;
|
||||
font-family: 'Source Code Pro';
|
||||
border: 0;
|
||||
padding-left: 0;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user