pgadmin4/web/pgadmin/static/css/overrides.css
Khushboo Vashi c1503ade47 Introducing the infrastructure for colleciton of the subnodes listing,
creation, and editing within the properties panel infrastructure.

We do use the backgrid.js for listing the subnode collection, and for
editing/creating new object for the subnode, we do use the same
infrastructure using the backform.
2015-10-28 22:36:09 +05:30

564 lines
11 KiB
CSS

/* Overrides/fixes for pgAdmin specific styling */
/* Ensure simple forms don't hit the top of the screen */
body {
padding-top: 50px;
padding-bottom: 20px;
}
.app-icon {
vertical-align: middle;
font-size: 25px;
}
/* Use the full width of the screen */
.container {
width: 100% !important;
}
.pg-panel-content { position:absolute;top:0px;left:0px;right:0px;bottom:0px; }
/* Restyle the Alertify dialogs */
.alertify .ajs-dialog {
border: 0px solid rgba(0,0,0,.2);
}
.alertify .ajs-header {
background-color: #428bca;
color: #fff;
}
.alertify .ajs-content {
padding-left: 0 !important;
padding-right: 0 !important;
}
.alertify .ajs-commands button.ajs-maximize {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAK0lEQVQY02P8//8/AzGABUoTUs3IwkAkIEshIw41/8k2kfoK/xOjkJGQiQBkfAYjQxwwQgAAAABJRU5ErkJggg==) !important;
}
.alertify.ajs-modeless.ajs-pinnable .ajs-commands button.ajs-pin {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAArrAAAK6wGCiw1aAAAANElEQVQY02P8//8/AxJA4UABIwMDAwMLLgl0TdgUYgWDROF/HD7/z8DAwMiCxbdwSdq6EQDM+gkiVH1IsgAAAABJRU5ErkJggg==) !important;
}
.alertify .ajs-commands button.ajs-close {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAVElEQVQY05WQuQ0AMQgEB8lN0H9vdhnj4B7ZJwfcJkjsImBCpaIGMMYQIDNjNbe+Su9d1bsee5yM0+AbXMPfkHrdWNKv1ZVn2oJiw5OZ8eABiCrwCW8QwRIof5qAAAAAAElFTkSuQmCC) !important;
}
/* iFrames should have no border */
iframe {
border-width: 0;
}
/* Ensure the codemirror editor displays full height gutters when resized */
.CodeMirror, .CodeMirror-gutters {
height: 100% !important;
}
/* Padding for the treeview */
.browser-browser-pane {
padding-left: 0;
}
/* Alert info panel */
.alert-info-panel {
border: 2px solid #a1a1a1;
margin-top: 2em;
padding: 5px 5px;
background: #dddddd;
border-radius: 5px;
height: 8em;
overflow: scroll;
}
/* Prevent tree items wrapping */
.aciTree .aciTreeItem {
white-space: nowrap !important;
}
/* Disabled menu items */
.mnu-disabled {
color: #999999 !important;
}
/*
* 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 {
top:0;
left:100%;
margin-top:-6px;
margin-left:-1px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display:block;
}
.dropdown-submenu>a:after {
display:block;
content:" ";
float:right;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px 0 5px 5px;
border-left-color:#cccccc;
margin-top:5px;
margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
border-left-color:#ffffff;
}
.dropdown-submenu.pull-left {
float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left:-100%;
margin-left:10px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px;
}
.navbar-inverse > li > a,
.navbar-inverse .navbar-nav > li > a {
color: #CACACA;
}
.navbar-inverse .navbar-brand {
color: #009DCF;
}
.navbar-inverse .navbar-brand:hover {
color: #009DCF;
}
.dropdown-menu > hr {
margin-top: 0;
margin-bottom: 0;
}
.dropdown-menu > li > a > i {
margin-left: -17px;
}
.dropdown-menu > li > a > span {
padding-left: 3px;
}
.dropdown-menu > li > a > .has-icon {
padding-left: 0px;
}
.form-group fieldset {
background-color: #F2F2F2;
padding: 0px 0px 0px 5px;
border-width: 1px;
margin-left: 2px;
margin-right: 2px;
margin-bottom: 2px;
border-color: #DDD;
}
.form-group legend {
padding: 0.1em 0.5em;
margin-bottom: 0px;
margin-left: 0;
text-align: left;
width: 95%;
font-size: 105%;
}
.form-group .fieldset-content {
width: 100%;
}
.obj_properties .backform-tab {
position: absolute;
margin: 0px 0px 80px;
padding: 0px;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.obj_properties .backform-tab > .nav-tabs {
background-color: #DADADA;
}
.obj_properties .backform-tab > .tab-content {
padding: 0px;
overflow-y: auto;
max-height: 100%;
}
.backform-tab .tab-pane {
padding: 7px;
}
.form-group fieldset .caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
margin-top: -2px;
vertical-align: middle;
border-top: 5px solid;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
.form-group fieldset .collapsed .caret {
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-left: 5px solid;
}
.pgadmin-control {
padding: 0px 15px 5px 15px;
margin-bottom: 0px;
display: inline-block;
height: 30px;
}
.obj_properties {
padding: 0px;
}
.obj_properties .pgadmin-control .uneditable-input {
border: 0px !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
-webkit-transition: none !important;
-o-transition: none !important;
transition: none !important;
background-color: transparent !important;
height: 20px;
padding: 0px;
margin-top: 2px;
vertical-align: middle;
}
.obj_properties .set-group {
margin-bottom: 10px;
}
.pgadmin-control-group {
margin: 0px;
padding: 2px 0px;
}
.fieldset-content .pgadmin-control-group:nth-child(even): {
background-color: #FF0000;
}
.control-label {
min-width: 250px;
margin: 0px;
padding-top: 3px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 3px;
display: inline-block;
vertical-align: middle;
}
.pgadmin-controls {
min-width: 290px;
padding-right: 3px;
padding-left: 3px;
}
.obj_properties fieldset > div > .pgadmin-control-group > label {
height: 30px;
}
.obj_properties fieldset > .fieldset-content {
border-radius: 10px;
padding: 5px 10px;
width: 99.8%;
margin: 0 0.1%;
border-color: #92AFC8;
border-width: 3px;
border-style: ridge;
background-color: ##D7D8DD;
}
.obj_properties .badge {
display: block;
text-align: left;
cursor: pointer;
margin-bottom: 1px;
background-color: #2C76B4;
}
.obj_properties .badge .caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 5px solid;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
margin-top: -2px;
margin-right: 4px;
}
.obj_properties .collapsed .caret {
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-left: 5px solid;
vertical-align: middle;
margin-top: -2.5px;
padding-right: 0px;
}
.obj_properties table {
display: table !important;
width: 98%;
margin: 0.8%;
}
.obj_properties table tr {
border: 0px white solid;
margin: 1em;
}
.obj_properties .pgadmin-properties {
border: 1px rgb(105, 78, 72) solid;
border-radius: 6px;
padding: 5px;
margin: 0.2px 2px 2px 2px;
}
.obj_properties table .spacer {
height: 2em;
}
.obj_properties table td {
vertical-align: middle;
}
.pg-prop-btn-group {
position: absolute;
text-align: right;
background-color: #D2D2D2;
border: 2px solid #A9A9A9;
left: 0px;
right: 0px;
}
.pg-prop-btn-group-above {
top: 0px;
}
.pg-prop-btn-group-below {
bottom: 0px;
border-color: #A9A9A9;
border-width: 2px 1px 0px;
border-style: inset;
border-left-style: solid
}
.pg-prop-btn-group button {
padding: 5px;
margin: 2px 5px;
}
.pg-prop-btn-group button:not(:first-child):not(:last-child) {
margin-left: 0px;
}
.pg-prop-content {
position: absolute;
overflow: auto;
top: 3px;
bottom: 0;
padding-bottom: 7px;
padding-top: 0;
padding-right: 0;
padding-left: 0;
}
.pg-prop-has-btn-group-below {
margin-bottom: 33px;
}
.has-pg-prop-btn-group {
top: 43px;
}
.pg-prop-content > div {
margin-top: 5px;
margin-bottom: 5px;
}
.pg-prop-content .uneditable-input {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overow: ellipsis;
}
.form-control {
color: #333333;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
color: #666666;
}
.highlight {
padding: 5px;
margin-bottom: 5px;
background-color: #F7F7F9;
border: 1px solid #E1E1E8;
border-radius: 3px;
}
.highlight.has-error {
border-color: #A94442;
}
.icon-fa::before {
font: normal normal normal 14px/1 FontAwesome;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
display: inline-block;
margin-left: -18px;
margin-right: 9px;
}
/* Sub-Node */
.table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
border-bottom-width: 1px;
}
.subnode > table.backgrid{
width: 99%;
margin: 0.1% 0.49%;
padding: 0;
}
.backgrid thead th{
background-color: #2c76b4;
}
.backgrid th, .backgrid td {
line-height: 18px;
font-size: 12px;
}
.backgrid td {
padding-top: 0px;
padding-bottom: 0px;
padding-left: 2px;
padding-right: 2px;
}
.backgrid thead th a {
color: #ffffff;
}
.backgrid > th.object {
width: 30px;
}
.edit-cell, .delete-cell {
text-align:center !important;
width:25px;
}
.backgrid td.renderable:not(.editable):not(.delete-cell) {
background-color: #eee;
}
.subnode-header {
background-color:#2c76b4;
height:35px;
color:#FFFFFF;
border-radius:5px 5px 0px 0px;
padding-top:3px;
}
.subnode-header > button.add {
float:right;
margin-right:15px;
}
.subnode {
margin-top:5px;
padding-top:0px;
border-left:1px solid #dadada;
border-bottom:1px solid #ddd;
border-right:1px solid #ddd;
}
.subnode-dialog {
bottom: 0;
left: 0;
overflow-x: auto;
overflow-y: auto;
right: 0;
height:auto;
margin-left: 23px;
background-color: #dadada;
margin-top: 0px;
border: 1px solid #a9a9a9;
}
.subnode-body {
height:auto;
overflow:inherit;
}
.subnode-footer {
height:38px;;
margin: 0px, 15px;
min-height:40px;
vertical-align: bottom;
}
.sub-node-form {
height:auto;
padding: 1px;
}
.sub-node-form > .nav-tabs {
background-color: #DADADA;
}
.sub-node-form > ul.tab-content{
background-color: #FFFFFF;
padding-left: 15px;
left: 1px;
}
table.backgrid tr.new {
background-color: rgba(82, 168, 236, 0.1) !important;
box-sizing: border-box;
outline: 1px solid rgba(82, 168, 236, 0.8);
outline-offset: -1px;
}