mirror of
https://github.com/pgadmin-org/pgadmin4.git
synced 2025-02-25 18:55:31 -06:00
Restyle alertify dialogues so they look like the rest of the app. Still some tweaks needed, but we're 95% of the way there.
This commit is contained in:
Arun Kollan
Dave Page
parent
34ba5bef24
commit
533aaa2fa3
@ -353,10 +353,11 @@ define(
|
||||
return {
|
||||
buttons:[
|
||||
{
|
||||
text: "{{ _('OK') }}", key: 13, className: "btn btn-primary"
|
||||
text: "{{ _(' <span class=button-label> OK </span>') }}", key: 13, className: "btn btn-primary fa fa-lg fa-save"
|
||||
|
||||
},
|
||||
{
|
||||
text: "{{ _('Cancel') }}", className: "btn btn-danger"
|
||||
text: "{{ _(' <span class=button-label> Cancel </span>') }}", className: "btn btn-danger fa fa-lg fa-close"
|
||||
}
|
||||
],
|
||||
focus: { element: 0 },
|
||||
|
||||
@ -18,37 +18,6 @@ body {
|
||||
|
||||
.pg-panel-content { position:absolute;top:0px;left:0px;right:0px;bottom:0px; overflow: hidden; }
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
.alertify .ajs-modal {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* iFrames should have no border */
|
||||
iframe {
|
||||
border-width: 0;
|
||||
@ -64,17 +33,6 @@ iframe {
|
||||
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;
|
||||
@ -445,6 +403,7 @@ iframe {
|
||||
|
||||
.form-control {
|
||||
color: #333333;
|
||||
padding: 3px 6px;
|
||||
}
|
||||
|
||||
.form-control[disabled],
|
||||
@ -994,3 +953,137 @@ ul.nav.nav-tabs {
|
||||
padding-left: 0px !important;
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* This rule will stop Chrome apply highlighting to elements such as DIV's used as modals */
|
||||
*:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
/* Overrides alertify js headers */
|
||||
.alertify .ajs-header {
|
||||
padding: 6px 10px!important;
|
||||
min-height: 35px;
|
||||
max-height: 35px;
|
||||
border-bottom: 2px solid darkgray;
|
||||
background-color: #2C76B4;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.alertify.ajs-maximized .ajs-commands, .alertify.ajs-resizable .ajs-commands {
|
||||
margin: 2px 0px 0 0;
|
||||
}
|
||||
|
||||
/* Overrides alertify js headers hovering behaviour*/
|
||||
.alertify .ajs-header:hover {
|
||||
background-color:#2C76B4;
|
||||
}
|
||||
/* Removes padding from alertify footer */
|
||||
.alertify .ajs-footer {
|
||||
padding: 0;
|
||||
min-height: 35px;
|
||||
}
|
||||
/* Restyling alertify buttons */
|
||||
.alertify .ajs-footer .ajs-buttons {
|
||||
background-color: #D2D2D2;
|
||||
border-width: 2px 0px 0px 0px;
|
||||
border-style: solid;
|
||||
border-color: rgb(85, 85, 85);
|
||||
}
|
||||
|
||||
.alertify .ajs-footer .ajs-buttons.ajs-auxiliary .ajs-button, .alertify .ajs-footer .ajs-buttons.ajs-primary .ajs-button {
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
margin-top:0px;
|
||||
margin-bottom:0px;
|
||||
}
|
||||
|
||||
.alertify .ajs-footer .ajs-buttons .ajs-button {
|
||||
min-width: 55px;
|
||||
min-height: 33px;
|
||||
}
|
||||
|
||||
.alertify .ajs-commands {
|
||||
margin: -22px 4px 0 0;
|
||||
}
|
||||
|
||||
/* Replaces alertify button icons */
|
||||
.alertify .ajs-commands button{
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.ajs-commands {
|
||||
position: absolute;
|
||||
width: auto!important;
|
||||
}
|
||||
|
||||
.ajs-pin , .ajs-maximize , .ajs-close{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #9E9E9E !important;
|
||||
background-color: #ddd!important;
|
||||
font-size: 12px;
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
position: relative;
|
||||
//float: right;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ajs-pin:hover , .ajs-maximize:hover , .ajs-close:hover{
|
||||
border: 2px solid #CCCCCC!important;
|
||||
}
|
||||
|
||||
.alertify .ajs-commands button.ajs-maximize {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAZklEQVQ4jcWTuw2AMAxEn5jBs7B/e0gpmAiKEGRS5QDBSS7v+Q8fSsCWQgDTA+DsGgJYuypumTNkWCWZg9q/HIAOSDim/xTUcu0exXXaxQG0teRVWQPLx2Gbe8B55yNqv7C4GV/TDq//J11odoZgAAAAAElFTkSuQmCC);
|
||||
background-size: 14px;
|
||||
}
|
||||
|
||||
.alertify.ajs-modeless.ajs-pinnable .ajs-commands button.ajs-pin {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAkElEQVQ4jWNkwAR8DAwMBxkYGMTQxF8xMDDYMzAwfMKiBwMYMDAw3GRgYPgPxTehYiSBKCQDonApYiLV1KFjABsDA4MpEt8UKkYUkGBgYDjPgAhAGD4PlSPooqNYNMPwUXRXM+IwBAbaoXQlktg/ZMUsWAxAVvASmyZCBiCDNwTkCRrwasANIOgFQoADinECAAtnIEoWoODLAAAAAElFTkSuQmCC);
|
||||
background-size: 13px;
|
||||
}
|
||||
|
||||
.alertify .ajs-commands button.ajs-close {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAdklEQVQ4jd2SwQnAIAxF36GH0pOTFHEgF3IkR5LO0F4SCGJVEHroAy/f/E+igV+yAa6hO7nrcgAZuIBg9CBalppXEnDL0RA1q556ASdQqhBrLlLTxVch1uxHZiU2AuKs2Vdt23GGHSy/wfIvzOzBPhpjaRO/5wG/szevJ+ZXzAAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
.alertify.ajs-maximized .ajs-commands button.ajs-maximize {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA8klEQVQ4jZ3QMUpDQRCH8V+ewULQE4iERTyCrQiDCpbaCKKljbV4A89gqVgGrCMDWlpaWwVPoFYiIjYv8hBJXjLN7s7u9+3wZ4aKiOWI2IJOi8dHuM7MXxj3WMHe3CRBKeUGvVJKllJG8CrmoNty6jMsYKeGoY/jtgI4bez7OMjMr2oKwaieRzDMIljDRUSgXQZPeG2cv7GOffQ7ETGPcyw2HozWQWY+jLN3M/MzIu4wwNKf+zeMFVSQmY/YbfzeuiqIiAonZgi1quErHNa9F7xPM8FlAx5iA9ttJRVu8VHDm5k5rDNpLRERWxHR+6c/MZMfLIJDwzY66IkAAAAASUVORK5CYII=);
|
||||
}
|
||||
|
||||
/* Restyling alertify dialogue panel boundaries */
|
||||
.alertify .ajs-dialog {
|
||||
border: 3px solid #DDDDDD;
|
||||
border-radius: 0;
|
||||
}
|
||||
.alertify .ajs-content {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.alertify .ajs-handle {
|
||||
background-image:none;
|
||||
}
|
||||
span.button-label {
|
||||
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
font-size: initial;
|
||||
}
|
||||
button.ajs-button.btn.btn-primary {
|
||||
margin: 2px!important;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user