Merge branch 'ent-10138-redisenar-estilo-de-instalador-manual' into 'develop'
Ent 10138 redisenar estilo de instalador manual See merge request artica/pandorafms!5425
This commit is contained in:
Rafael Ameijeiras
commit
5a5d7ce6ab
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 668 KiB |
|
|
@ -15,200 +15,383 @@
|
|||
// along with this program; if not, write to the Free Software
|
||||
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font: bold 1em;
|
||||
font-size: 18px;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
}
|
||||
h2 {
|
||||
font: Verdana;
|
||||
font-size: 16px;
|
||||
@font-face {
|
||||
font-family: "Circular Std Book";
|
||||
src: url("../../fonts/CircularStd-Book.woff") format("woff");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
div#install_container {
|
||||
@font-face {
|
||||
font-family: "Circular Std";
|
||||
src: url("../../CircularStd-Medium.woff") format("woff");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
html {
|
||||
background-image: url("../../images/installer-background.jpg");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
#install_container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
margin-top: 45px;
|
||||
width: 650px;
|
||||
margin-top: 50px;
|
||||
background-color: #131727;
|
||||
color: white;
|
||||
font-family: "Circular Std Book";
|
||||
border-radius: 10px;
|
||||
}
|
||||
div#logo_img {
|
||||
#wizard {
|
||||
padding: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.title {
|
||||
font-size: 40px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 30px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.text {
|
||||
font-size: 17px;
|
||||
}
|
||||
.content-footer {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.title-pandora {
|
||||
margin: 0px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.steps {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.step {
|
||||
font-size: 17px;
|
||||
border: 1px solid #8a96a6;
|
||||
color: #8a96a6;
|
||||
border-radius: 30px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
color: #666;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
div#wizard {
|
||||
text-align: left;
|
||||
margin-top: 1em;
|
||||
|
||||
width: 650px;
|
||||
padding-left: 0px;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 20px;
|
||||
background-color: #ffffff;
|
||||
margin-top: 0px;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
position: relative;
|
||||
.step.active {
|
||||
background-color: #82b92e;
|
||||
color: #ffffff;
|
||||
border-color: #82b92e;
|
||||
}
|
||||
|
||||
div#wizard a img {
|
||||
padding-right: 30px;
|
||||
.step-separator {
|
||||
min-width: 15px;
|
||||
margin: 0px 5px;
|
||||
border-color: #8a96a6;
|
||||
}
|
||||
|
||||
div#wizard > input {
|
||||
padding-right: 30px;
|
||||
float: right;
|
||||
.build-banner {
|
||||
color: #8a96a6;
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
margin-left: 20px;
|
||||
}
|
||||
#foot_install {
|
||||
border-top: 1px solid white;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
div#install_box,
|
||||
div#install_img {
|
||||
padding-right: 20px;
|
||||
margin-top: 0px;
|
||||
width: 80%;
|
||||
margin: 0px auto;
|
||||
.signature {
|
||||
color: #8a96a6;
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
margin-right: auto;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
div#install_box {
|
||||
background: F3F3F3;
|
||||
border: 1px solid #ccc;
|
||||
padding: 10px 25px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
div#install_box h2 {
|
||||
.link {
|
||||
color: #82b92e;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
div#install_img {
|
||||
margin-bottom: 25px;
|
||||
margin-left: 25px;
|
||||
}
|
||||
div#foot_install {
|
||||
font-size: 7pt;
|
||||
color: #fff;
|
||||
margin-top: #000;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
div#foot_install a {
|
||||
color: #ccc;
|
||||
}
|
||||
input#step4,
|
||||
input#step4:hover {
|
||||
width: 70px;
|
||||
height: 16px;
|
||||
border: 0px;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
div.warn {
|
||||
min-height: 24px;
|
||||
background: url(../../images/icono_warning_install.png) no-repeat 0% -2px;
|
||||
color: #222;
|
||||
margin-top: 14px;
|
||||
padding: 2px 1px 6px 40px;
|
||||
}
|
||||
div.info {
|
||||
min-height: 24px;
|
||||
background: url(../../images/icono_info_install.png) no-repeat 0% -2px;
|
||||
color: #222;
|
||||
margin-top: 14px;
|
||||
padding: 2px 1px 6px 40px;
|
||||
}
|
||||
div.err {
|
||||
min-height: 24px;
|
||||
background: url(../../images/icono_critical_install.png) no-repeat 0% -2px;
|
||||
color: #cc0000;
|
||||
margin-top: 14px;
|
||||
padding: 2px 1px 6px 40px;
|
||||
}
|
||||
span.arr {
|
||||
background: url(../../images/arrow.png) no-repeat;
|
||||
margin-top: 2px;
|
||||
margin-left: 5px;
|
||||
padding: 2px 1px 6px 15px;
|
||||
display: block;
|
||||
font-size: 8.5pt;
|
||||
}
|
||||
|
||||
body,
|
||||
td {
|
||||
font-size: 9pt;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #555555;
|
||||
}
|
||||
|
||||
div.installation_step {
|
||||
position: static;
|
||||
float: right;
|
||||
top: 7px;
|
||||
right: 10px;
|
||||
color: #666;
|
||||
margin-top: 14px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.btn_install_next {
|
||||
transition-property: background-color, color;
|
||||
transition-duration: 1s;
|
||||
transition-timing-function: ease-out;
|
||||
-webkit-transition-property: background-color, color;
|
||||
-webkit-transition-duration: 1s;
|
||||
-o-transition-property: background-color, color;
|
||||
-o-transition-duration: 1s;
|
||||
margin: 10px;
|
||||
padding: 8px 20px 8px 20px;
|
||||
background-color: transparent;
|
||||
border: 1px solid #82b92e;
|
||||
font: 1em Verdana;
|
||||
font-size: 11pt;
|
||||
.signature a {
|
||||
color: #82b92e;
|
||||
border-radius: 0%;
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn_install_next:hover {
|
||||
.btn_primary {
|
||||
color: white;
|
||||
background-color: #82b92e;
|
||||
border: 20px;
|
||||
font-size: 15px;
|
||||
border-radius: 6px;
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
transition-property: background-color, color;
|
||||
transition-duration: 1s;
|
||||
transition-timing-function: ease-out;
|
||||
-webkit-transition-property: background-color, color;
|
||||
-webkit-transition-duration: 1s;
|
||||
-o-transition-property: background-color, color;
|
||||
-o-transition-duration: 1s;
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn_primary.outline {
|
||||
background-color: transparent;
|
||||
border: 1px solid white;
|
||||
}
|
||||
.info {
|
||||
background: #d6e2ff;
|
||||
color: #454545;
|
||||
font-size: 15px;
|
||||
border-radius: 5px;
|
||||
padding: 15px;
|
||||
position: relative;
|
||||
margin: 25px 0px;
|
||||
}
|
||||
.info::before {
|
||||
content: "|";
|
||||
color: blue;
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 77%;
|
||||
background: blue;
|
||||
border-radius: 12px;
|
||||
width: 4px;
|
||||
}
|
||||
.warn {
|
||||
background: #fffbdf;
|
||||
color: #454545;
|
||||
font-size: 15px;
|
||||
border-radius: 5px;
|
||||
padding: 15px;
|
||||
position: relative;
|
||||
margin: 25px 0px;
|
||||
}
|
||||
.warn::before {
|
||||
content: "|";
|
||||
color: #dd9900;
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 77%;
|
||||
background: #dd9900;
|
||||
border-radius: 12px;
|
||||
width: 4px;
|
||||
}
|
||||
.err {
|
||||
background: #fbdada;
|
||||
color: #454545;
|
||||
font-size: 15px;
|
||||
border-radius: 5px;
|
||||
padding: 15px;
|
||||
position: relative;
|
||||
margin: 25px 0px;
|
||||
}
|
||||
.err::before {
|
||||
content: "|";
|
||||
color: red;
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 77%;
|
||||
background: red;
|
||||
border-radius: 12px;
|
||||
width: 4px;
|
||||
}
|
||||
.check-table {
|
||||
background-color: #0f111b;
|
||||
color: #c1ccdc;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.check-table td {
|
||||
padding: 5px 0px;
|
||||
}
|
||||
.incomplete {
|
||||
color: red;
|
||||
}
|
||||
.checked {
|
||||
color: #82b92e;
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.col-md-6 {
|
||||
width: 47%;
|
||||
position: relative;
|
||||
padding: 0px 10px;
|
||||
}
|
||||
.content-animation {
|
||||
display: flex;
|
||||
height: 94%;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 90%;
|
||||
}
|
||||
.content-animation::before {
|
||||
content: "";
|
||||
width: 120%;
|
||||
position: absolute;
|
||||
height: 103%;
|
||||
background-image: linear-gradient(225deg, #731dd854 0%, #2eb9b83d 100%);
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-top-left-radius: 100px;
|
||||
}
|
||||
.popuphero {
|
||||
margin-top: 48px;
|
||||
margin-left: -26px;
|
||||
}
|
||||
|
||||
.popupgear1 img,
|
||||
.popupgear2 img {
|
||||
height: 176px;
|
||||
position: absolute;
|
||||
}
|
||||
.popupgear1 img {
|
||||
margin: 0px 0px 0px 129px;
|
||||
animation: rotar1 10s infinite linear;
|
||||
}
|
||||
.popupgear2 img {
|
||||
margin: 130px 0px 0px 0px;
|
||||
animation: rotar2 10s infinite linear;
|
||||
}
|
||||
.popuplaptop img {
|
||||
height: 352px;
|
||||
position: absolute;
|
||||
margin: 115px 0px 0px 0px;
|
||||
}
|
||||
.login {
|
||||
font-size: 14px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 5px;
|
||||
border: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
.input-label {
|
||||
color: #8a96a6;
|
||||
font-size: 13px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.example-message {
|
||||
color: #8a96a6;
|
||||
font-size: 8px;
|
||||
}
|
||||
.login[type="checkbox"] {
|
||||
width: auto;
|
||||
}
|
||||
.table-config-database td {
|
||||
text-align: left;
|
||||
}
|
||||
.table-config-database td.inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.table-config-database td.inline .input-label {
|
||||
margin-left: 10px;
|
||||
}
|
||||
@keyframes rotar1 {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes rotar2 {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.col-md-6 {
|
||||
width: 100%;
|
||||
}
|
||||
.hide-phone {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* SWITCH */
|
||||
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 33px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 19px;
|
||||
width: 19px;
|
||||
left: 0px;
|
||||
background-color: white;
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
transform: translateY(-50%);
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: #82b92e;
|
||||
}
|
||||
.btn_install_next_text {
|
||||
transition-property: background-color, color;
|
||||
transition-duration: 1s;
|
||||
transition-timing-function: ease-out;
|
||||
-webkit-transition-property: background-color, color;
|
||||
-webkit-transition-duration: 1s;
|
||||
-o-transition-property: background-color, color;
|
||||
-o-transition-duration: 1s;
|
||||
color: #82b92e;
|
||||
}
|
||||
.btn_install_next:hover .btn_install_next_text {
|
||||
transition-property: background-color, color;
|
||||
transition-duration: 1s;
|
||||
transition-timing-function: ease-out;
|
||||
-webkit-transition-property: background-color, color;
|
||||
-webkit-transition-duration: 1s;
|
||||
-o-transition-property: background-color, color;
|
||||
-o-transition-duration: 1s;
|
||||
color: white;
|
||||
|
||||
input:focus + .slider {
|
||||
box-shadow: 0 0 1px #82b92e;
|
||||
}
|
||||
|
||||
:focus {
|
||||
outline: 0;
|
||||
input:checked + .slider:before {
|
||||
-webkit-transform: translate(15px, -50%);
|
||||
-ms-transform: translate(15px, -50%);
|
||||
transform: translate(15px, -50%);
|
||||
}
|
||||
|
||||
/* Rounded sliders */
|
||||
.slider.round {
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.slider.round:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
/* POPUP */
|
||||
.popup-lightbox {
|
||||
position: fixed;
|
||||
|
|
@ -218,6 +401,7 @@ div.installation_step {
|
|||
background-color: #000;
|
||||
opacity: 0.6;
|
||||
visibility: hidden;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.popup {
|
||||
|
|
@ -227,17 +411,22 @@ div.installation_step {
|
|||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
background-color: #fff;
|
||||
z-index: 9999;
|
||||
display: none;
|
||||
font-family: "Circular Std Book";
|
||||
}
|
||||
.popup .btn_primary.outline {
|
||||
color: #82b92e;
|
||||
border-color: #82b92e;
|
||||
margin: 0px 20px;
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
background-color: #82b92e;
|
||||
padding: 10px 20px;
|
||||
color: #fff;
|
||||
font-size: 12pt;
|
||||
text-align: center;
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
}
|
||||
|
||||
.popup-inner {
|
||||
|
|
@ -246,6 +435,7 @@ div.installation_step {
|
|||
/* overflow-y: scroll;*/
|
||||
padding: 25px 35px;
|
||||
font-size: 11pt;
|
||||
border-radius: 0px 0px 10px 10px;
|
||||
}
|
||||
|
||||
.popup-button-green {
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue