Adicionar imagem ao pop-up de login

4 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Adicionar imagem ao pop-up de login

Mensagem por Saintness 20.01.21 5:58

Detalhes da questão


Endereço do fórum: http://sistemacrp.forumeiros.com
Versão do fórum: ModernBB

Descrição


 Saudações,
no meu /login contém essa página e gostaria de colocar o emblema da instituição no quadrado vermelho (https://prnt.sc/x9lire)

Alguém pode ajudar?
Saintness

Saintness
***

Membro desde : 30/05/2020
Mensagens : 170
Pontos : 285

https://sistemacrp.forumeiros.com/ https://www.facebook.com/Gabriel Augusto https://twitter.com/Coyoti Habblet

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar imagem ao pop-up de login

Mensagem por Strilk 20.01.21 8:58

Bom dia meu querido, se possível, me envie sua folha de estilo css para que possamos realizar as edições.
Strilk

Strilk
****

Membro desde : 23/01/2018
Mensagens : 265
Pontos : 386

http://portal-grm.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar imagem ao pop-up de login

Mensagem por Saintness 20.01.21 16:25

Saudações,
aqui está:

Código:
@font-face {
   font-family: 'Volter Goldfish';
   src: url("https://mundogoph.github.io/fonts/Volter.ttf") format('ttf'),
        url("https://mundogoph.github.io/fonts/Volter.woff2") format('woff2'),
        url("https://mundogoph.github.io/fonts/Volter.woff") format('woff'),
        url("https://mundogoph.github.io/fonts/Volter.svg") format('svg');
   font-weight: normal;
   font-style: normal;
}

@font-face {
 font-family: 'Aveny T';
 src: url("http://db.onlinewebfonts.com/t/6cdc4cc6b38c8e89e8721abe8aed4ab9.woff2") format('woff2'),
      url("http://db.onlinewebfonts.com/t/6cdc4cc6b38c8e89e8721abe8aed4ab9.woff") format('woff'),
      url("http://db.onlinewebfonts.com/t/6cdc4cc6b38c8e89e8721abe8aed4ab9.ttf") format('ttf'),
      url("http://db.onlinewebfonts.com/t/6cdc4cc6b38c8e89e8721abe8aed4ab9.svg") format('svg');
   font-weight: normal;
   font-style: normal;
}

#preview .postbody table, #preview .postbody td, div[class*="post--"] .postbody table, div[class*="post--"] .postbody td {    border: none!important; }
body {
   font-family: "Century Gothic", "Apple Gothic","URW Gothic L","Avant Garde",Futura,sans-serif!important;
}

.legend a {
   font-size: 14px;
   font-weight: 400;
   border-radius: 3px;
   display: inline-block;
   padding: 3px 9px;
   margin: 3px;
}


.legend {
   font-size: 0px;
}

/** Correção :: Transição exagerada */
html * {
   transition: none;
   transition-duration: 0ms;
}

html a,
html button,
html input,
html [role="button"],
html .trans {
   transition: all 180ms linear;
   transition-duration: 180ms;
}
/** End :: Correção :: Transição exagerada */

.inputbox, input[type="text"], select, textarea {
   background: #E9EBED;
   border: 1px solid #BFBFBF;
   border-radius: 3px;
   color: #262626;
}
.inputbox, input[type="text"], textarea { padding-left: 5px; }
select { padding-left: 2px; }
h3 {
   border-color: #f5f5f5;
   border-style: solid;
   border-width: 0 0 1px;
   color: #f5f5f5;
   font-family: Roboto, sans-serif;
   font-size: 1.6rem;
   font-weight: 400;
   letter-spacing: .3px;
   margin-bottom: 12px;
   padding-bottom: 3px;
}

/*Correção Icones de Mensagem*/
dl.icon dt,dl.icon dd.dterm {
background-repeat: no-repeat;
background-position: 250px 45px;
}

/* HEADER E MENU
============================================================*/
header {
   background-color: #212529;
   color: #fff;
   line-height: 64px;
   text-overflow: ellipsis;
   white-space: nowrap;
   word-break: keep-all;
   z-index: 997;
   left: 0;
   position: fixed;
   right: 0;
   top: 0;
}

#main-menu-btn {
   color: #fff;
   cursor: pointer;
   display: block;
   float: left;
   height: 64px;
   line-height: 64px;
   margin: 0;
   padding: 0 22px;
   position: relative;
   text-align: center;
}

#main-menu-btn i { line-height: 64px; }
#main-menu-btn:hover, #user-menu:hover { background-color: rgba(0,0,0,0.22); }

#logo-text, #logo-text div {
   position: relative;
}

#logo-text:before {
   color: #bdbdbd;
   content: 'POLíCIA';
   font-family: Aveny T;
   font-size: 30px;
   font-weight: 500;
   page-break-after: always;
   top: -25px;
   left: 80px;
   padding: 22px;
   position: absolute;
   text-shadow: 2px 1px 0 #FFF;
   text-transform: uppercase;
}
#logo-text:after {
   color: #d8b500;
   content: 'CRP';
   font-family: Aveny T;
   font-size: 30px;
   font-weight: 500;
   left: 160px;
   padding: 22px;
   position: absolute;
   text-shadow: 2px 1px 0 #FFF;
   text-transform: uppercase;
   top: -25px;
}
#logo-text div:before {
   color: rgb(255, 255, 255);
   content: "Formando sucessores";
   font-family: Calibri Light, sans-serif;
   font-size: 15px;
   font-weight: 800;
   left: 80px;
   position: absolute;
   text-shadow: rgb(0, 0, 0) 2px 1px 0px;
   text-transform: uppercase;
   top: 15px;
}

#header-radio-player {
   display: inline-block;
   margin: -0.4% 0;
   width: auto;
   padding-left: 30%;
}

#search-main {
 border-bottom: 1px solid rgba(255, 255, 255, 0.22);
 display: block;
 float: right;
 height: 34px;
 margin: 15px 22px;
 }
#search-main input {
 background-color: transparent;
 color: #FFFFFF;
 direction: ltr;
 display: block;
 font-size: 14px;
 font-family: Open Sans, Arial, sans-serif;
 font-weight: 300;
 height: 34px;
 padding-right: 34px;
 width: 250px;
   border: none;
   border-radius: 0;
 }
#search-main input::placeholder {
 opacity: 1;
 }
#search-main button {
 background-color: transparent;
 border-radius: 0;
 box-shadow: none;
 float: right;
 font-family: Open Sans, Arial, sans-serif;
 font-size: 18px;
 height: 34px;
 line-height: 34px;
 margin: -34px 0 0 0;
 padding: 0;
 position: relative;
 text-align: center;
 width: 34px;
   color: #fff;
 }
#search-main button:hover {
 color: rgba(255, 255, 255, 0.5);
 }
#search-main i {
 font-size: inherit;
 }
@media (max-width: 660px) {
 #search-main {
 border: none;
 }
#search-main input {
 float: left;
 margin-right: -34px;
 position: relative;
 transition: none;
 width: 34px;
 z-index: 1;
 }
#search-main input:focus {
 background-color: #d8b500;
 font-size: 21px;
 height: 112px;
 left: 0;
 right: 0;
 padding: 0 22px;
 position: absolute;
 top: 0;
 width: 100%;
 }
#search-main button {
 float: none;
 font-size: 24px;
 margin: 0;
 }
}

header button, #page-header .button {
   background-color: #00DCFF;
   border-radius: 3px;
   box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.2), 0 1px 5px 0 rgba(0,0,0,0.12);
   color: #fff;
   cursor: pointer;
   display: block;
   float: right;
   font-family: Open Sans, Arial, sans-serif;
   font-size: 14px;
   height: 34px;
   letter-spacing: .2px;
   line-height: 34px;
   margin: 15px 22px 15px 0;
   padding: 0 17px;
   width: auto;
}

header button:hover, .logout-button:hover, #page-header .button:hover {
   -ms-filter: brightness(90%);
   -webkit-filter: brightness(90%);
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.14), 0 5px 3px -2px rgba(0,0,0,0.2), 0 1px 8px 0 rgba(0,0,0,0.12);
   filter: brightness(90%);
}

#page-header .button {
 float: none;
 margin: 0;
 text-align: center;
}

/*-- MENU --*/
#main-menu, #main-user-menu  {
 background-color: #1c1d1f;
 box-shadow: 2px 0 2px 0 rgba(0, 0, 0, 0.14), 3px 0 1px -2px rgba(0, 0, 0, 0.2), 1px 0 5px 0 rgba(0, 0, 0, 0.12);
 bottom: 0;
 font-size: 14px;
 overflow: auto;
 padding: 11px 22px;
 position: fixed;
 text-align: left;
 top: 0;
 z-index: 999;
 }
#main-menu { left: 0; }
#main-user-menu { right: 0; }

.main-menu-headline {
 color: #fff;
 font-size: 20px;
 font-weight: 300;
 letter-spacing: 0.2px;
 overflow: hidden;
 padding: 22px 0 11px;
 text-align: center;
 text-overflow: ellipsis;
 max-width: 100%;
 }
.main-menu-headline .headline-small { font-size: 13px; }
.main-menu-headline span { display: block; }
#main-menu .divider, #main-user-menu .divider {
 background-color: rgba(255, 255, 255, 0.22);
 height: 1px;
 margin: 11px 0;
 width: 100%;
 }
#main-menu.hidden, #main-user-menu.hidden {
 opacity: 0;
 pointer-events: none;
 }
#main-menu.hidden { transform: translate3d(-100%, 0, 0); }
#main-user-menu.hidden { transform: translate3d(100%,0,0); }
#main-menu ul, #main-user-menu ul {
 display: block;
 list-style: none;
 margin: 0 -22px;
 min-width: 100%;
 }
#main-menu ul a, #main-user-menu ul a {
 color: #fff;
 display: block;
 min-width: 300px;
 padding: 16px 32px;
 }
#main-menu ul a:hover, #main-user-menu ul a:hover {
 background-color: rgba(0, 0, 0, 0.22);
 }
#main-menu ul i, #main-user-menu ul i {
 margin: -4px 16px -4px 0;
 vertical-align: -7px;
 }
#main-menu ul li.has-sub { position: relative; }
#main-menu ul li.has-sub > ul { display: none; overflow: hidden; }
#main-menu ul li.has-sub.open > ul { display: block; }
#main-menu ul > li.has-sub > a:after {
 position: absolute;
 right: 27px;
 top: 19px;
 z-index: 5;
 display: block;
 height: 15px;
 width: 2px;
 background: #fff;
 content: "";
 -webkit-transition: all 0.1s ease-out;
 -moz-transition: all 0.1s ease-out;
 -ms-transition: all 0.1s ease-out;
 -o-transition: all 0.1s ease-out;
 transition: all 0.1s ease-out;
}
#main-menu ul > li.has-sub > a:before {
 position: absolute;
 right: 21px;
 top: 25px;
 display: block;
 width: 15px;
 height: 2px;
 background: #fff;
 content: "";
 -webkit-transition: all 0.1s ease-out;
 -moz-transition: all 0.1s ease-out;
 -ms-transition: all 0.1s ease-out;
 -o-transition: all 0.1s ease-out;
 transition: all 0.1s ease-out;
}
#main-menu ul > li.has-sub.open > a:after,
#main-menu ul > li.has-sub.open > a:before {
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
}
#main-menu ul ul li a {
 padding: 14px 60px;
 cursor: pointer;
 z-index: 2;
 font-size: 14px;
 text-decoration: none;
 color: #dddddd;
 background: #292d32;
 -webkit-transition: color .2s ease;
 -o-transition: color .2s ease;
 transition: color .2s ease;
}
#main-menu ul ul li a:hover {
 color: #fff;
 background-color: rgba(0, 0, 0, .5);
}
#main-menu ul ul ul li a {
 padding-left: 24%;
 background: #121416;
}
#main-menu ul ul ul li a:hover { background-color: rgba(0, 0, 0, 1); }
#main-menu ul ul > li.has-sub > a:after {
 top: 16px;
 right: 50px;
 background: #dddddd;
}
#main-menu ul ul > li.has-sub > a:before {
 top: 22px;
 right: 44.5px;
 background: #dddddd;
}

#dimmer {
 background-color: rgba(0, 0, 0, 0.44);
 bottom: 0;
 left: 0;
 position: fixed;
 right: 0;
 top: 0;
 z-index: 998;
 }
#dimmer.hidden {
 opacity: 0;
 pointer-events: none;
 }

/*-- USER MENU --*/
header #user-menu {
   float: right;
   height: inherit;
   position: relative;
   font-size: 15px;
   font-weight: 500;
   color: #fff;
   padding: 0 20px;
   display: block;
   cursor: pointer;
}

#user-menu .user-avatar {
   border-radius: 100%;
   border: 1px solid #fff;
   float: left;
   position: relative;
   top: 6px;
   display: inline-block;
   overflow: hidden;
   width: 50px;
   margin-right: 10px;
   height: 50px;
   box-shadow: 0 2px 70px rgba(0,0,0,1);
}

#user-menu .user-avatar img {
   position: relative;
   top: -14px;
   right: 9px;
   image-rendering: pixelated;
}

span.user-username {color: #fff;}

#user-menu .user-username {
   max-width: 90px;
   -ms-text-overflow: ellipsis;
   text-overflow: ellipsis;
   white-space: nowrap;
   display: inline-block;
   overflow: hidden;
}

.avatar-big {
   border-radius: 128px;
   border: 1px solid #fff;
   box-shadow: 0 1px 3px rgba(0,0,0,0.11), 0 0 1px rgba(0,0,0,0.22);
   display: inline-block;
   height: 128px;
   width: 128px;
   overflow: hidden;
   position: relative;
}

.avatar-big img {
   background-color: #1c1d1f;
   object-fit: cover;
   position: absolute;
   top: -20px;
   left: 0;
}

/*-- POPUP DE LOGIN --*/
.login-popup {
   -webkit-box-shadow:0 0 20px rgba(0,0,0,.4);
   box-shadow:0 0 20px rgba(0,0,0,.4);
   background-color:#fff;
   -webkit-border-radius:20px;
   -moz-border-radius:20px;
   border-radius:20px;
   position:relative;
   padding:37px 50px 50px 325px;
   width:auto;max-width:645px;
   margin:20px auto;
   overflow:hidden;
}

.login-popup:before,
.login-popup:after {
   -webkit-border-radius:192px/290px;
   -moz-border-radius:192px/290px;
   border-radius:192px/290px;
   width:385px;
   height:580px;
   position:absolute;
   content:"";
   top:0;
   display:block;
   bottom:0;
   margin:auto;
}

.login-popup:before {
   background-image:url(https://i.imgur.com/USDUbuf.png);
   background-position: -320px -92px;
   left:-95px;
}

.login-popup::after {
   background-image: url(---);
   background-color: #00DCFFb3;
   background-position: 154px center;
   background-repeat:no-repeat;
   left: -93px;
}

.login-popup h3 {
   color:#000;
   font-size: 20px;
   line-height: 26px;
   border-bottom: 1px solid rgba(0,0,0,.2);
   padding-bottom: 10px;
   margin-bottom: 25px;
   margin-top: 0;
}

.login-popup .login-form .username-input,
.login-popup .login-form .password-input {
   position:relative;
   display:block;
}

.login-popup .login-form .username-input i,
.login-popup .login-form .password-input i {
   font-size:18px;
   font-weight:700;
   color: #d4d4d4;
   position:absolute;
   top:13px;
   right:18px;
   cursor:text;
   display:block;
   -webkit-transition:color .2s;
   transition:color .2s;
}

.login-popup .login-form .username-input i:before,
.login-popup .login-form .password-input i:before {
   font-size:18px;
}

.login-popup .login-form .rounded-input {
   padding-right:40px;
   margin-bottom:15px;
   background-color: #fff;
   -webkit-border-radius: 48px;
   -moz-border-radius: 48px;
   border-radius: 48px;
   padding: 11px 24px;
   display: block;
   font-family: poppins,Arial,sans-serif;
   font-weight: 300;
   font-size: 14px;
   color: #333;
   border: 1px solid #d4d4d4;
   width: 100%;
   height: 47px;
   -webkit-transition: border-color .2s;
   transition: border-color .2s;
}

.login-popup .login-form .rounded-input:focus,
.login-popup .login-form .rounded-button:focus {
   border-color: #15253d;
   outline: none;
}

.login-popup .login-form .rounded-input:focus~i { color: #15253d; }

.login-popup .rounded-button {
   -webkit-border-radius: 48px;
   -moz-border-radius: 48px;
   border-radius: 48px;
   padding: 11px 24px;
   text-decoration: none;
   font-weight: 600;
   font-size: 14px;
   text-transform: uppercase;
   cursor: pointer;
   height: 47px;
   line-height: 21px;
   text-shadow: none;
   text-align: center;
   -webkit-transition: background-color .2s,color .2s;
   transition: background-color .2s,color .2s;
   display: block;
   width:100%;
   color: #fff;
}

.rounded-button.login {
   background-color: #00DCFF;
}
.rounded-button.register {
   background-color: #00DCFF;
   margin-top: 10px;
   margin-bottom: -5%;
}
 
.login-popup .login-form .rounded-button.login:hover { background-color: #FDD111; }
.login-popup .rounded-button.register:hover { background-color: #FDD111; }

/*---- Header ----*/
.headerbar {
   background-size: contain;
   height: 340px;
}

.headerbar .wrap { display: none; }

/*--- Emblema gratuito ----*/
#page-header { position: relative; }

#page-header > .lz-emblems-wrapper {
   background-color: rgba(0,0,0,0.7);
   padding: 5px;
   border-radius: 5px;
   position: absolute;
   left: 45%;
   top: 63%;
   transform: translateX(-50%);
   display: inline-block;
   z-index: 999;
   cursor: pointer;
   transition: all 200ms linear;
}

/* BODY
=============================================*/
#wrap { background-color: #ffffff; }

#main-content a.cgu-buttons { padding: 9px 18px; }

/*---- Botões ----*/
.button, .button1, .button2, .button-round, input[type="submit"] {
   background-color: #00DCFF;
   /* border-bottom: 2px solid #f5f5f5; */
}

.button:hover, .button1:hover, .button2:hover, .button-round:hover, input[type="submit"]:hover {
   background-color: #00DCFF;
   /* border-bottom: 2px solid #222; */
   box-shadow: none;
}

/*---- Cabeçalho das categorias e fóruns ---*/
.forabg, .forumbg {
   background-color: #212529;
   background-position: 0 0;
   background-repeat: repeat-x;
   border-radius: 3px;
   box-shadow: 0 1px 6px rgb(0 0 0 / 86%);
   clear: both;
   margin-bottom: 24px;
   padding: 0;
}

.forumbg:not(.forumbg-table) { background-color: transparent!important; }

.btn-collapse i { font-size: 2.5rem!important; }

.forabg.hidden { background-color: rgba(33, 37, 41,0.9); }

.forabg > .topiclist:first-child {border-bottom: 2px solid #d8b500;}

ul.forums li.row dl {
   background-position: left 17px top 50%!important;
   background-size: 50px 50px!important;
}

ul.forums dl.icon dd.dterm > div {
 margin-left: 0px!important;
}


.forumbg .row:first-child { border-radius: 3px 3px 0 0; }

a.forumtitle:hover, a.forumtitle:visited { color: #2898EF; }
a.forumtitle {
 color: #262626!important;
 line-height: 60px;
 margin-bottom: -20px;
}

table.table1 {
   width: 100%!important;
}

.table-title, .table-title h2, ul.topiclist dd.dterm h2, ul.topiclist dt h2 {
   display: inline;
   font-size: 2rem;
   font-weight: 300;
   line-height: 15px;
}

li.header dd, li.header dt {
   font-size: 2rem;
   font-weight: 300;
}

.topic-stats {
   font-size: 1.3rem;
   color: rgba(0,0,0,0.55);
   background-color: rgba(0,0,0,0.05);
   padding: 3px 7px;
   width: 50%;
   display: block;
   border-radius: 3px;
   text-align: center;
   margin: 5px 0;
}

ul.topiclist dd.dterm br {
   display: none;
}

.forum-desc { color: #797979; font-size: 14px; font-weight: 400; font-family: Open Sans, Arial, sans-serif!important; }

ul.forums dl.icon dd.dterm > div { width: 65%; }


ul.topiclist {
 background-color: #262626;}

ul.topiclist dd.dterm, ul.topiclist dt {
   width: 70%;
}

ul.topics .row dd.dterm, ul.topics .row dt {
   padding: 25px 18px 9px 81px;
   width: 50%;
}

li.row { border-width: 1px 0 0; background-color: #fff; }

dd.lastpost {
   width: 30%;
   float: right !important;
   display: flex !important;
   align-items: center;
}

.topics .row .lastpost {
   padding: 20px 30px!important;
}

.topiclist > .row > .icon {
   position: relative;
   display: flex;
}

.topic-pagination {
   margin: auto;
   display: flex !important;
   justify-content: center;
   width: 20%;
}

.lastpost > span > a:empty {
   pointer-events: none;
}

.lastpost > span > a:empty:before {
   content: "Não existem tópicos a visualizar!";
   color: #999;
   font-style: italic;
   position: absolute;
   top: 50%;
   transform: translate(0, -50%);
}

/*--- Tópicos----*/

.quick-nav-topics { display: none;}

.topic-date {padding-left: 0.7%!important;}

/*---- Botões especiais dos tópicos ----*/
.btn-edit a:hover { background-color: #ebab37; }

.profile-icons li:last-child { margin-right: 10px!important; }

/*---- Perfil nos tópicos ----*/
.postprofile {
   background-color: rgb(150 147 147 / 8%);
   box-shadow: 2px 0 3px rgba(0,0,0,.2);
   border-top: 0;
   border-left-width: 7px;
   border-radius: 3px 0 0 3px;
   width: 250px;
}

.postprofile:before {
   content: url(http://habboemotion.com/resources/images/icons/offline.gif);
   left: 5px;
   position: absolute;
   top: 5px;
}

.online .postprofile:before { content: url(http://habboemotion.com/resources/images/icons/online.gif); }
.online:before {background-color: transparent;}

.postprofile-name {
   font-size: 16px;
   margin-top: 5%;
}

.postprofile-avatar { margin: 10px 0; }

.postprofile-avatar img {
   border-radius: 10px;
   height: auto;
   width: 120px;
   background-color: transparent;
}

.postprofile-rank {
   border: none;
   margin-bottom: 0;
   padding-bottom: 0;
}

.postprofile-info {
   padding-top: 5%;
}

.postbody {
   margin-left: 250px;
   position: relative;
}

.postprofile-contact { text-align: center; }

.postprofile-contact a {
   float: none;
   display: inline-block !important;
}

.postprofile hr {
   border-color: #bfbfbf;
   margin: 7% -8%;
}

.mod-login-avatar img {
   object-fit: cover;
}

/*---- Emblemas ----*/
#field_id4 br { display:none; }

#field_id4 div[alt], .postprofile-info div[alt] {
   background-color: rgba(255, 255, 255, 0.2);
   background-position: center!important;
   background-repeat: no-repeat;
   border-bottom: 2px solid rgba(255, 255, 255, 0.2);
   border-radius: 3px;
   display: inline-block;
   height: 50px;
   margin-top: 5px;
   margin-right: 3.5px;
   position: relative;
   width: 47px;
}
#field_id4 div[alt]:before, .postprofile-info div[alt]:before {
   content: attr(alt);
   position: absolute;
   top: -60%;
   left: 50%;
   white-space: nowrap;
   transform: translate(-50%);
   background-color: rgba(0,0,0,0.9);
   color: #fff;
   padding: 0 10px;
   border-radius: 3px;
   user-select: none;
   pointer-events: none;
   opacity: 0;
   line-height: 24px;
   transition: 250ms opacity;
   z-index:998!important;
}

#field_id4 div[alt]:hover:before, .postprofile-info div[alt]:hover:before { opacity: 1; }

.postprofile-info div[alt] + br { display: none; }

.postprofile-info .label { margin-bottom: 10px; }

.show-more-em {
   padding: 7px;
   background-color: #00DCFF;
   border-radius: 5px;
   border-bottom: 3px solid #00DCFF;
   font-size: 13px;
   color: #fff!important;
   font-weight: 600;
   text-align: center;
   }
.show-more-em:hover {
   background-color: #f5f5f5;
   border-bottom: 3px solid #f5f5f5;
}

/*--- Botões de moderação ----*/
p.right img:hover { opacity: .75; }

/*---- Botões de amigo/ignorado no perfil ----*/
#profile-advanced-add br { display: none; }

#profile-advanced-add a {
   display: block;
   text-align: center;
   background-color: #0a7d29;
   color: #fff;
   padding: 15px 0;
   font-size: 12px;
   font-weight: 700;
   border-radius: 3px;
   margin-bottom: 8px;
   border-bottom: 2px solid #064e1a;
}

#profile-advanced-add a:hover {
   background-color: #064e1a;
   border-bottom: 2px solid #021f0a;
}

#profile-advanced-add a:last-child {
   background-color: #d0062a;
   margin-bottom: 0;
   border-bottom: 2px solid #9e0520;
}

#profile-advanced-add a:last-child:hover {
   background-color: #9e0520;
   border-bottom: 2px solid #6d0316;
}

/*---- Categorias do perfil ----*/
div#tabs + .panel.row3 { border: solid 1px #c1c1c1; }

#tabs ul li.activetab, #tabs ul li:hover {box-shadow: inset 0px -5px #c7c7c7;}

#tabs ul .activetab a, #tabs ul li a {
   border: none;
   padding: 7px 0px;
   padding-bottom: 9px;
   font-size: 13px;
   border-right: solid 1px #ddd;
   border-color: #ddd!important;
}

#tabs {
   margin-left: 15px;
   border: solid 1px #c1c1c1;
   border-bottom: solid 0px;
   line-height: initial;
   padding: 0px 0px;
   display: inline-block;
   border-radius: 3px 3px 0px 0px;
}

#tabs ul .activetab a span,  #tabs ul li a:hover span {color: #c7c7c7;}

/*---- Cabeçalho dos tópicos ----*/
.post-head {
   background-color: rgba(0,0,0,0.0);
   border-color: rgb(255 255 255 / 0%);
   border-radius: 3px 3px 0 0;
   border-style: solid;
   border-width: 0 0 1px;
   padding: 18px;
   padding-left: 21%;
}

/*---- Resposta rápida ----*/
#quick_reply {
   width: 80%;
   margin: auto;
}

.sceditor-container { border-color: #f5f5f5!important; }

#quick_reply #textarea_content {
   box-shadow: 0px 7px 20px 0px rgba(0,0,0,0.3);
   border-radius: 5px;
}

.sceditor-toolbar {
   background: #24282b!important;
   border-bottom: none!important;
}

.sceditor-group { border-color: rgba(255,255,255,0.6)!important; }

.sceditor-button {
   background-color: #f1f1f1;
   margin-right: 2px;
   border-bottom: 1px solid rgba(0,0,0,0.5);
}

.sceditor-button.active, .sceditor-button:active, .sceditor-button:hover, .sceditor-button.hover {
   background-color: #d8d8d8!important;
   box-shadow: none!important;
}

/*--- OUTROS ELEMENTOS BBCODES ---*/
#preview .postbody table:not(.info-table),
#preview .postbody td,
div[class*='post--'] .postbody table:not(.info-table),
div[class*='post--'] .postbody td { border: solid 1px #c2c2c2!important; }

#preview .postbody .info-table,
#preview .postbody .info-table td,
div[class*='post--'] .postbody .info-table,
div[class*='post--'] .postbody .info-table td { border: none!important; }

hr { border-top-color: #444; }

.postbody .content table {
   border-collapse: collapse;
   border: solid 1px #c2c2c2;
   text-align: center;
   width: -webkit-fill-available;
}
.postbody .content table tr {
   border-bottom: solid 1px #d0d0d0;
}
.postbody .content table td, .postbody .content table th {
   padding: 15px 15px;
   border: none;
}

/*--- CITAR, CODEBOX E SPOILER ---*/
blockquote {
   padding: 8px 16px 8px 10px;
   border-radius: 3px;
   border-style: solid;
   border-width: 0 0 0 6px;
   font-size: 14px;
   line-height: 1.5;
   background-color: transparent;
   border-width: 1px 1px 1px 6px;
}

blockquote:before, .codebox:before { display: none!important; }

blockquote cite {
   color: #c7c7c7;
   margin-bottom: 3px;
}

.codebox {
   background-color: #354147!important;
   border-color: rgba(0,0,0,0.44)!important;
   border-radius: 3px!important;
   color: #FFF;
   font-size: 14px!important;
   line-height: 1.5!important;
   padding: 8px 16px 8px 10px!important;
}

.codebox .fa-code-copy-button {
   position: absolute;
   right: 10px;
   top: 8px;
   color: #fff;
}

.codebox:not(.spoiler) dt {
   font-size: 1.3rem!important;
   text-align: left!important;
}

.codebox dt {
   color: rgba(255,255,255,0.44)!important;
   margin-bottom: 3px!important;
   border-bottom: none!important;
}

.spoiler_content .codebox:not(.spoiler) dt {
   color: rgba(255,255,255,0.44)!important;
   background-color: transparent;
}

.spoiler_content .codebox dt:after { display: none; }

.codebox code {
   max-height: 400px!important;
   white-space: nowrap!important;
   color: #e6e1dc!important;
   margin: 0!important;
   font-size: 15px!important;
}

.hljs-literal, .hljs-symbol, .hljs-bullet, .hljs-attribute, .hljs-string, .hljs-variable, .hljs-template-variable, .hljs-strong, .hljs-emphasis, .hljs-quote,
.hljs-title, .hljs-attr, .hljs-selector-id, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-keyword, .hljs-selector-tag, .hljs-type {
   color: #fff!important;
}

.spoiler {
   border: none!important;
   background-color: transparent!important;
   padding: 0!important;
   color: #212121;
}

.spoiler dt {
   background-color: rgba(0,0,0,0.22);
   border-radius: 3px;
   padding: 6px 11px;
   position: relative;
   color: #f5f5f5!important;
   font-size: 15px!important;
}

.spoiler dt:after, .spoiler_content .spoiler dt:after {
   content: "\f104";
   font-family: "IonIcons";
   line-height: 36px;
   pointer-events: none;
   position: absolute;
   right: 11px;
   top: 0;
}

.spoiler_content {
   border-left: 3px solid rgba(0,0,0,0.22);
   display: none;
   color: #f5f5f5;
   margin-top: 6px;
   padding-left: 22px!important;
   padding-bottom: 20px;
   padding: 2px;
}


/*  FOOTER
**===================*/
.statistics-item strong a span, .statistics-item a:link, .statistics-item a:visited { color: #fff!important; }

.footerbar-system { padding: 20px 0; }

/**
* Definições Iniciais:
*/

.fa-footer,
.fa-footer * { box-sizing: border-box; }

.fa-footer {
   font-family: "Segoe UI", "Open Sans", "Helvetica Neue", "Ubuntu", "Helvetica", "Arial", "Trebuchet MS", sans-serif;
   font-size: 14px;
   color: #f6fbff;
   font-weight: 300;
   line-height: 1.5;
  background: linear-gradient(to bottom, rgba(6, 6, 6, 0.74) 0, rgba(60, 60, 58, 0.76) 100%), url(https://media.discordapp.net/attachments/655505873216733189/656992737748582400/heady.png);
}


/**
* Sistema de Grid e ajustes das colunas genêricas:
*/

.fa-footer .fa-footer-row {
   display: flex;
   flex-direction: row;
   padding: 0 15px;
}

.fa-footer .fa-footer-row .fa-footer-col {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   margin-right: 30px;
   padding: 15px 0;
   min-width: 200px;
}

.fa-footer .fa-footer-row .fa-footer-col:last-child { margin-right: 10px; }

.fa-footer .fa-footer-row .fa-footer-col .lead {
   text-transform: uppercase;
   font-size: 18px;
   font-weight: 500;
   color: #fff;
   margin-bottom: 10px;
}

.fa-footer .fa-footer-row .fa-footer-col p {
   font-size: 14px;
   line-height: 1.6;
   text-align: justify;
}

/**
* Ajustes para a a coluna primária:
*/

.fa-footer .fa-footer-row .fa-primary-footer-col {
   position: relative;
   flex-grow: 1;
}

.fa-footer .fa-footer-row .fa-primary-footer-col .fa-footer-logo {
   display: flex;
   justify-content: center;
   align-items: center;
}

.fa-footer .fa-footer-row .fa-primary-footer-col .fa-footer-logo img {
   width: auto;
   margin: 0 30px;
}

.fa-footer .fa-footer-row .fa-primary-footer-col .fa-footer-back-to-top {
   position: absolute;
   right: -20px;
   bottom: -20px;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   width: 40px;
   height: 40px;
   background-color: #24282b;
   color: #00DCFF;
   font-size: 23px;
   border-radius: 20px;
   z-index: 3;
   cursor: pointer;
   transition: all 100ms linear;
}

.fa-footer .fa-footer-row .fa-primary-footer-col .fa-footer-back-to-top .fa { margin-top: -3px; }

.fa-footer .fa-footer-row .fa-primary-footer-col .fa-footer-back-to-top:hover {
   background-color: #00DCFF;
   color: #fff;
}

/**
* Atribuição final:
*/

.fa-footer .fa-footer-attr {
   text-align: center;
   padding: 20px;
   font-size: 16px;
   border-top: solid 1px #2a2e32;
   background-color: #24282b;
}

.fa-footer-logo:hover {
   -webkit-filter: drop-shadow(0px 5px 20px rgb(255,255,255)) grayscale(1);
  filter: drop-shadow(0px 0px 0px rgb(255,255,255)) grayscale(1);
}

/**
* Ajustes para o footer do FA:
*/

#page-footer {
   background-color: #212529;
   border-top: solid 1px #2a2e32;
   border-bottom: solid 1px #2a2e32;
}

.statistics {
   box-shadow: 0px -2px 3px rgba(0, 0, 0, 0.37);
}

/**
* Responsive:
*/

@media screen and (max-width: 1000px) {
 .fa-footer .fa-footer-row .fa-primary-footer-col .fa-footer-logo img {
   margin: 0px;
 }
}

@media screen and (max-width: 850px) {
 .fa-footer .fa-footer-row {
   flex-wrap: wrap;
 }

 .fa-footer .fa-footer-row .fa-primary-footer-col {
   border-right: none;
 }
 
 .fa-footer .fa-footer-row .fa-primary-footer-col .fa-footer-logo {
   margin-bottom: 2%;
 }
 
 .fa-footer .fa-footer-row .fa-primary-footer-col .fa-footer-back-to-top {
   right: auto;
 }
 
 .fa-footer .fa-footer-row .fa-footer-col:nth-child(2) {
   margin-top: 2%;
 }
}

/* OUTROS
=================================================================*/

/* USUÁRIOS & RANKS
** ======================================== */

.rank {
   color: #fff;
   font-size: 13px;
   font-weight: 700;
   height: 40px;
   line-height: 40px;
   margin: 10px auto 0;
   width: 200px;
   padding: 0 5px;
   border-radius: 10px;
   border-bottom: 2px solid rgba(0,0,0,0.2);
}
.rank:before {
   float: left;
   width: 40px;
   height: 40px;
   line-height: 40px;
   left: 5px;
   background-color: rgba(255,255,255,0.2);
   text-align: center;
   font-size: 15px;
   color: #fff;
   font-family: 'Font Awesome 5 Free';
}

/* Ranks Administrativos*/
.rank.supr{background-image: linear-gradient(124deg, #00DCFF, #FF7F00, #FFFF00, #00FF00, #0000ff, #4b0082, #8f00ff);background-size: 1800% 1800%;animation: rainbow 5s linear infinite;}
.rank.supr:before{content: "\f521";margin-right: 5px;font-family: "Font Awesome 5 Free";}
.rank.adm{background-image: radial-gradient(circle, #00DCFF, #db0a10, #b71317, #941719, #711919);background-size: 1800% 1800%;animation: rainbow 6s ease infinite;}
.rank.adm:before{content: "\f085";margin-right: 5px;font-family: "Font Awesome 5 Free";}
.rank.cor{background-image: linear-gradient(to right, #0f9b0f,#002b00,#000000);}
.rank.cor:before{content: "\f0e3";margin-right: 5px;font-family: "Font Awesome 5 Free";}
.rank.dir{background-image: linear-gradient(180deg, rgba(165,255,135,1) 0%, rgba(64,255,0,1) 64%);}
.rank.dir:before{content: "\f24e";margin-right: 5px;font-family: "Font Awesome 5 Free";}
.rank.af{background-image: linear-gradient(0deg, rgba(55,55,55,1) 0%, rgba(126,126,126,1) 35%, rgba(226,226,226,1) 100%);}
.rank.af:before{content: "\f201";margin-right: 5px;font-family: "Font Awesome 5 Free";}
.rank.git{background: linear-gradient(to right, #000000 0%, #4b0303 100%); color:#9e0000;}
.rank.git:before{content: "\f714";margin-right: 5px;font-family: "Font Awesome 5 Free";}
.rank.p2{background: linear-gradient(to right, #000000 0%, #07121c 100%); color:#9e0000;}
.rank.p2:before{content: "\f714";margin-right: 5px;font-family: "Font Awesome 5 Free";}
.rank.dsn{background: linear-gradient(to right, #feac5e, #c779d0, #4bc0c8);background-size: 1800% 1800%;animation: rainbow 10s ease infinite;}
.rank.dsn:before{content: "\f121";margin-right: 5px;font-family: "Font Awesome 5 Free";}
@keyframes rainbow {0% {background-position: 0% 82%;} 50% {background-position: 100% 19%;} 100% {background-position: 0% 82%;}}
.rank.crh{background: linear-gradient(to right, #06bcff 0%, #1b014c 100%);}
.rank.crh:before{content: "\f2c2";margin-right: 5px;font-family: "Font Awesome 5 Free";}
.rank.srp{background-image: linear-gradient(to right, #bdbdbd, #0e0e0e);}
.rank.srp:before {content: "\f274";margin-right: 5px;font-family: "Font Awesome 5 Free";}


/*Ranks dos Usuários*/
.rank.mbr{background-color:#78866b}
.rank.mbr:before{content: "\f4ad";margin-right: 5px;font-family: "Font Awesome 5 Free";}
.rank.ori{background-color:#1100FF;}
.rank.ori:before{content: "\f19d";margin-right: 5px;font-family: "Font Awesome 5 Free";}
.rank.tre{background-color:#F00000;}
.rank.tre:before{content: "\f19d";margin-right: 5px;font-family: "Font Awesome 5 Free";}
.rank.rond{background-color:#FF6600;}
.rank.rond:before{content: "\f19d";margin-right: 5px;font-family: "Font Awesome 5 Free";}
.rank.ldr{background: linear-gradient(to right, #009688 0%, #7986CB 100%);}
.rank.ldr:before{content: "\f4ad";margin-right: 5px;font-family: "Font Awesome 5 Free";}
.rank.ref{background: linear-gradient(to right, #cc3399 0%, #ff009c 100%);}
.rank.ref:before{content: "\f4be";margin-right: 5px;font-family: "Font Awesome 5 Free";}

/** Personalização de Legenda e Grupos**/

/* ------ ESTILO DESATIVADO ------
a[style*=""], span[style*=""] {
   background: url(https://i.imgur.com/Ca1WdXK.gif);
   font-weight: bold;
   text-shadow: 2px 0px 11px #2bc7df;
}
div [style*=""]::before {
 font-family: "Font Awesome 5 Free";  
 content:'\f121';
 color: ;
 margin-right: 2px;
 font-weight: 1000;
 font-size: 11px;
}*/

a[style*="#3296FA"], span[style*="#3296FA"] {
   background: repeating-linear-gradient(to right, #00DCFF, #FF7F00, #FFFF00, #00FF00, #0000ff, #4b0082, #8f00ff);
   -webkit-background-clip: text;
   background-size: 1800% 1800%;
   -webkit-text-fill-color: transparent;
   animation: rainbow 3s ease infinite;
}
div [style*="#3296FA"]::before {
 font-family: "Font Awesome 5 Free";  
 content:'\f3ed';
 margin-right: 3px;
 font-weight: 1000;
 font-size: 12px;
}
a[style*="#1E6104"], span[style*="#1E6104"] {
    font-weight: bold;
}
div [style*="#1E6104"]::before {
  font-family: "Font Awesome 5 Free";  
  content:'\f21b';
  color: #1E6104;
  margin-right: 3px;
  font-weight: 1000;
  font-size: 13px;
}

a[style*="#A70404"], span[style*="#A70404"] {
    font-weight: bold;
}
div [style*="#A70404"]::before {
  font-family: "Font Awesome 5 Free";  
  content:'\f714';
  color: #A70404;
  margin-right: 3px;
  font-weight: 1000;
  font-size: 13px;
}

a[style*="#636363"], span[style*="#636363"] {
    font-weight: bold;
}
div [style*="#636363"]::before {
  font-family: "Font Awesome 5 Free";  
  content:'\f0e7';
  color: #636363;
  margin-right: 3px;
  font-weight: 1000;
  font-size: 13px;
}

a[style*="#081A0B"], span[style*="#081A0B"] {
    font-weight: bold;
}
div [style*="#081A0B"]::before {
  font-family: "Font Awesome 5 Free";  
  content:'\f0e3';
  color: #081A0B;
  margin-right: 3px;
  font-weight: 1000;
  font-size: 13px;
}

a[style*="#259986"], span[style*="#259986"] {
    font-weight: bold;
}
div [style*="#259986"]::before {
  font-family: "Font Awesome 5 Free";  
  content:'\f51c';
  color: #259986;
  margin-right: 3px;
  font-weight: 1000;
  font-size: 13px;
}

a[style*="#00BF9F"], span[style*="#00BF9F"] {
    font-weight: bold;
}
div [style*="#00BF9F"]::before {
  font-family: "Font Awesome 5 Free";  
  content:'\f2bb';
  color: #00BF9F;
  margin-right: 3px;
  font-weight: 1000;
  font-size: 13px;
}

a[style*="#50C728"], span[style*="#50C728"] {
    font-weight: bold;
}
div [style*="#50C728"]::before {
  font-family: "Font Awesome 5 Free";  
  content:'\f0ac';
  color: #50C728;
  margin-right: 3px;
  font-weight: 1000;
  font-size: 13px;
}

a[style*="#00731F"], span[style*="#00731F"] {
    font-weight: bold;
}
div [style*="#00731F"]::before {
  font-family: "Font Awesome 5 Free";  
  content:'\f201';
  color: #00731F;
  margin-right: 3px;
  font-weight: 1000;
  font-size: 13px;
}

a[style*="#7E7F80"], span[style*="#7E7F80"] {
    font-weight: bold;
}
div [style*="#7E7F80"]::before {
  font-family: "Font Awesome 5 Free";  
  content:'\f482';
  color: #7E7F80;
  margin-right: 3px;
  font-weight: 1000;
  font-size: 13px;
}

a[style*="#1100FF"], span[style*="#1100FF"] {
    font-weight: bold;
}
div [style*="#1100FF"]::before {
  font-family: "Font Awesome 5 Free";  
  content:'\f5da';
  color: #1100FF;
  margin-right: 3px;
  font-weight: 1000;
  font-size: 13px;
}

a[style*="#F05BBC"], span[style*="#F05BBC"] {
    font-weight: bold;
}
div [style*="#F05BBC"]::before {
  font-family: "Font Awesome 5 Free";  
  content:'\f02e';
  color: #F05BBC;
  margin-right: 3px;
  font-weight: 1000;
  font-size: 13px;
}

a[style*="#235161"], span[style*="#235161"] {
    font-weight: bold;
}
div [style*="#235161"]::before {
  font-family: "Font Awesome 5 Free";  
  content:'\f66f';
  color: #235161;
  margin-right: 3px;
  font-weight: 1000;
  font-size: 13px;
}


/*LEG COLOR - USUARIOS*/
a[href="/u66"] {
font-weight: bold;
color: #fb11c9!important;
}

/*---- Destaque Habbo ----*/

a[href="/u0"]:not(.profile-icon):before { /*ID DE USUARIO NO FÓRUM*/
 font-family: "Font Awesome 5 Free";  
 content:'\f005';
 color:#ffbc07;
 margin-right: 5px;
 font-weight: 1000;
}
.postprofile-avatar a[href="/u0"]:before { display: none; }

/*---- Assinaturas ----*/
.fa {
   display: inline-block;
   font: normal normal normal 14px/1 FontAwesome;
   font-size: inherit;
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

.fa-star:before { content: "\f005"; }

.signature_div a, .signature_div a:visited, .signature_div a:focus, .signature_div a:active { color: #0372be!important; }

.signature_div a:hover { color: #d31141!important; }

.assinatura_admin {
   font: 300 18px 'Segoe UI',sans-serif;
   background:#fff;
   box-shadow:0 1px 1px 0 rgba(0, 0, 0, 0.5);
   width:80%;
   border-radius:3px;
   border-spacing:0;
   line-height:32px;
   margin:16px 0 16px 16px;
 
}
.assinatura_admin .desc {
   padding:0 16px 16px 48px;
   background: url(https://i.imgur.com/8jVOO0D.png) no-repeat 16px 8px;
   border-bottom:1px #ccc solid;
}
.assinatura_admin .sign {
   padding:10px 16px;
   color:#2C353B;
   background:url(https://i.imgur.com/nI7w4wh.png) no-repeat right 16px center;
   line-height: 24px;
   font-size: 15px;
}

/* REGISTRO
=================================================================*/
.instruction {
   width: 80%;
   height: 160px;
   position: relative;
   background-color: #8D6CAB;
   background-image: url(https://i.imgur.com/axuzFM4.png);
   border-radius: 5px;
   margin: auto;
}
.instruction:before {
   width: 275px;
   height: 160px;
   position: absolute;
   right: 0;
   top: 0;
   background-image: url(https://i.imgur.com/mC9g8Wg.png);
   border-radius: 0 5px 5px 0;
   content: '';
}
.instruction .frank {
   width: 110px;
   height: 143px;
   margin: 17px 0 0 17px;
   background-image: url(https://i.imgur.com/smFt8fk.png);
   float: left;
}
.instruction .cont {
   width: 540px;
   height: 110px;
   margin: 20px 0 0 11px;
   text-shadow: 0 1px 2px rgba(0,0,0,0.3);
   font-size: 12px;
   color: #FFF;
   float: left;
}
.instruction .cont p:first-of-type {
   margin-bottom: 10px;
   font-size: 18px;
   font-weight: 700;
}

/*** ESTATÍSTICAS
======================================= ***/

.block { background-color: #E9EBED;
box-shadow: 0 0 5px rgb(0 0 0 / 90%); }

.block a:link,
.block a:visited {
   color: #444;
}

.block .h3 {
   font-size: 20px;
   border: none;
}

.block .h3 i {
   height: 28px;
   line-height: 30px;
   margin-right: 10px;
   color: #f5f5f5;
}

.stat-card {
   background-color: #E9EBED;
   border-radius: 3px;
   box-shadow: 0 1px 6px rgb(0 0 0 / 82%);
   color: #262626;
   font-size: 0;
   float: left;
   height: 75px;
   padding: 15px;
   width: 20%;
   margin-right: 34px;
   text-align: right;
}

.stat-card:last-child { margin-right: 0; }

.stat-card title-stat {
   display: block;
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 1px;
}

.stat-card strong {
   font-size: 25px;
   font-weight: 900;
   letter-spacing: -1px;
   color: #d8b500;
}

.stat-card i {
   float: left;
   font-size: 40px;
   color: #d8b500;
   margin-top: -13px;
   margin-bottom: -30px;
}

.block .legend { font-size: 0px; }

.block .legend b a {
   font-size: 13px;
   font-weight: 600;
}

.block .legend b a::after {
   content: ", ";
   font-weight: 400;
   color: #000;
}

.block .legend b:last-child a::after { content: ""; }


/*Mod Tools*/
.success a, .information a, .warn a, .alert a, .custom a, .dev a, .admin a{color: #ecf0f1!important;text-decoration: underline!important;}
.success {/*color: #270;*/background-color: #00a300;}
.success tr::before {content: '\F058 ';font-family: "FontAwesome";}
.alert {/*color: #9F6000;*/background-color: #ffc40d;}
.alert tr::before {content: '\F071 ';font-family: FontAwesome;}
.warn {/*color: #D8000C;*/background-color: #00DCFF;}
.warn tr::before {content: '\F057 ';font-family: FontAwesome;}
.information {/*color: #059;*/background-color: #3a99d9;}
.information tr::before {content: '\F05a ';font-family: FontAwesome;}
.custom {background-color: #2C3E50;}
.custom tr::before {content: '\F069 ';font-family: FontAwesome;}
.dev {background-color: #3296FA;}
.dev tr:before {content: '\F121 ';font-family: FontAwesome;}
.info-table.dev {background: linear-gradient(to right, #000000, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #c0c0c0, #FFFFFF);background-size: 1800% 1800%;animation: rainbow 10s ease infinite;}
.info-table.success{background-image: linear-gradient(to right top, #00ff16, #33eb0a, #43d702, #4bc400, #4fb100, #4da300, #4a9500, #468700, #3f7a00, #396d00, #326100, #2c5500);background-size: 1800% 1800%;animation: rainbow 4s ease infinite;}

.mod_groups {
   line-height: 1.5;
   font-size: 11px;
   font-weight: 400;
}
.mod_editor_section {
   background: #eceff1;
   padding: 5px;
   font-weight: bold;
   text-align: left;
   text-transform: uppercase;
}
.copyright_e {
   font-size: 9px;
   color: black;
}
.mod_editor_message {
   padding: 2px 5px;
   text-align: left;
}
.mod_groups {
   height: 150px;
   overflow-y: scroll;
}
.mod_groups li {
   list-style-type: none;
}

/*---- Resposta rápida ----*/
#quick_reply {
   width: 80%;
   margin: auto;
}

.sceditor-container { border-color: #f5f5f5!important; }

#quick_reply #textarea_content {
   box-shadow: 0px 7px 20px 0px rgba(0,0,0,0.3);
   border-radius: 5px;
}

.sceditor-toolbar {
   background: #6f6868!important;
   border-bottom: none!important;
}

.sceditor-group { border-color: rgba(255,255,255,0.6)!important; }

.sceditor-button {
   background-color: #E9EBED;
   margin-right: 2px;
   border-bottom: 1px solid rgba(0,0,0,0.5);
}

.sceditor-button.active, .sceditor-button:active, .sceditor-button:hover, .sceditor-button.hover {
   background-color: #E9EBED!important;
   box-shadow: none!important;
}

/*SCEDITOR*/

.sceditor-container iframe, .sceditor-container textarea {
 background: #E9EBED!important;
 color: #262626!important;
 }
.sceditor-container {background-color: #E9EBED!important;}

.sceditor-button-staff { position: relative;}
.mod_box {
   top: 73px;
   -moz-background-clip: padding;
   background: #fafafa;
   background-clip: padding-box;
   border: 1px solid #eee;
   box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
   color: #666;
   width: 200px;
   line-height: 1;
   position: absolute;
}
#quick_reply .mod_box {
   top: 35px;
}
.sceditor-button-staff.disabled div {
   opacity: 1.0 !important;
   filter: alpha(opacity=100) !important;
}

.sceditor-button, .sceditor-button div {
   -webkit-box-sizing: content-box!important;
   -moz-box-sizing: content-box!important;
   box-sizing: content-box!important;
}
.sceditor-button {position: relative;}
a.sceditor-button {padding: .7em;}
.sceditor-button * {
 text-indent: initial!important;
 color: #262626!important;
 line-height: 15px!important;
}
.sceditor-button div {
 font-size: 0px!important;
 background-image: none!important;
 text-rendering: auto;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
.sceditor-button div:before {
 font-size: 15px!important;
 font-family: FontAwesome;
 text-indent: initial!important;
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 font-weight: 500!important;
}
.sceditor-button-bold div:before {content: "\f032";}
.sceditor-button-italic div:before {content: "\f033";}
.sceditor-button-underline div:before {content: "\f0cd";}
.sceditor-button-strike div:before {content: "\f0cc";}
.sceditor-button-left div:before {content: "\f036";}
.sceditor-button-center div:before {content: "\f037";}
.sceditor-button-right div:before {content: "\f038";}
.sceditor-button-justify div:before {content: "\f039";}
.sceditor-button-bulletlist div:before {content: "\f0ca";}
.sceditor-button-orderedlist div:before {content: "\f0cb";}
.sceditor-button-horizontalrule div:before {content: "\f068";}
.sceditor-button-quote div:before {content: "\f10d";}
.sceditor-button-code div:before {content: "\f1c9";}
.sceditor-button-faspoiler div:before {content: "\f146";}
.sceditor-button-fahide div:before {content: "\f070";}
.sceditor-button-table div:before {content: "\f0ce";}
.sceditor-button-servimg div:before {content: "\f03e";}
.sceditor-button-image div:before {content: "\f1c5";}
.sceditor-button-link div:before {content: "\f0c1";}
.sceditor-button-youtube div:before {content: "\f166";}
.sceditor-button-dailymotion {display: none;}
.sceditor-button-flash div:before {content: "\f008";}
.sceditor-button-headers div:before {content: "\f1dc";}
.sceditor-button-size div:before {content: "\f034";}
.sceditor-button-color div:before {content: "\f1fc";}
.sceditor-button-font div:before {content: "\f031";}
.sceditor-button-removeformat div:before {content: "\f12d";}
.sceditor-button-more div:before {content: "\f067";}
.sceditor-button-subscript div:before {content: "\f12c";}
.sceditor-button-superscript div:before {content: "\f12b";}
.sceditor-button-fascroll div:before {content: "\f060";}
.sceditor-button-faupdown div:before {content: "\f062";}
.sceditor-button-farand div:before {content: "\f074";}
.sceditor-button-date div:before {content: "\f133";}
.sceditor-button-time div:before {content: "\f017";}
.sceditor-button-pastetext div:before {content: "\f0ea";}
.sceditor-button-source div:before {content: "\f016";}
.sceditor-button-dailymotion div:before {content: "\f03d";}
.sceditor-button-staff div:before {content: "\f132"; color: #dc0000;}
.success, .information, .warn, .alert, .custom, .dev, .jrevo, .admin, .audi {
  width: 95%;
   height: auto;
   padding: 1.4em;
   margin: 1em;
   /*border: 2px solid;*/
   text-align: left;
   border-radius: 2px;
   font-weight: 300;
   color: white;
}

#container {
  margin-right: 0 !important;
  margin-left: 0 !important;
}
Saintness

Saintness
***

Membro desde : 30/05/2020
Mensagens : 170
Pontos : 285

https://sistemacrp.forumeiros.com/ https://www.facebook.com/Gabriel Augusto https://twitter.com/Coyoti Habblet

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Adicionar imagem ao pop-up de login

Mensagem por DaviMorais 20.01.21 19:07

Olá, localize o seu PopUp de Login na folha, que se encontra na linha 485 até 631.

Altere para esse:

Código:
/*-- POPUP DE LOGIN --*/
.login-popup {
   -webkit-box-shadow:0 0 20px rgba(0,0,0,.4);
   box-shadow:0 0 20px rgba(0,0,0,.4);
   background-color:#fff;
   -webkit-border-radius:20px;
   -moz-border-radius:20px;
   border-radius:20px;
   position:relative;
   padding:37px 50px 50px 325px;
   width:auto;max-width:645px;
   margin:20px auto;
   overflow:hidden;
}
 
.login-popup:before,
.login-popup:after {
   -webkit-border-radius:192px/290px;
   -moz-border-radius:192px/290px;
   border-radius:192px/290px;
   width:385px;
   height:580px;
   position:absolute;
   content:"";
   top:0;
   display:block;
   bottom:0;
   margin:auto;
}
 
.login-popup:before {
   background-image:url(https://i.imgur.com/USDUbuf.png);
   background-position: -320px -92px;
   left:-95px;
}
 
.login-popup::after {
   background-image: url(https://i.servimg.com/u/f83/19/58/12/30/16105811.png);
   background-color: #00DCFFb3;
   background-position: 154px center;
   background-repeat:no-repeat;
   left: -93px;
}
 
.login-popup h3 {
   color:#000;
   font-size: 20px;
   line-height: 26px;
   border-bottom: 1px solid rgba(0,0,0,.2);
   padding-bottom: 10px;
   margin-bottom: 25px;
   margin-top: 0;
}
 
.login-popup .login-form .username-input,
.login-popup .login-form .password-input {
   position:relative;
   display:block;
}
 
.login-popup .login-form .username-input i,
.login-popup .login-form .password-input i {
   font-size:18px;
   font-weight:700;
   color: #d4d4d4;
   position:absolute;
   top:13px;
   right:18px;
   cursor:text;
   display:block;
   -webkit-transition:color .2s;
   transition:color .2s;
}
 
.login-popup .login-form .username-input i:before,
.login-popup .login-form .password-input i:before {
   font-size:18px;
}
 
.login-popup .login-form .rounded-input {
   padding-right:40px;
   margin-bottom:15px;
   background-color: #fff;
   -webkit-border-radius: 48px;
   -moz-border-radius: 48px;
   border-radius: 48px;
   padding: 11px 24px;
   display: block;
   font-family: poppins,Arial,sans-serif;
   font-weight: 300;
   font-size: 14px;
   color: #333;
   border: 1px solid #d4d4d4;
   width: 100%;
   height: 47px;
   -webkit-transition: border-color .2s;
   transition: border-color .2s;
}
 
.login-popup .login-form .rounded-input:focus,
.login-popup .login-form .rounded-button:focus {
   border-color: #15253d;
   outline: none;
}
 
.login-popup .login-form .rounded-input:focus~i { color: #15253d; }
 
.login-popup .rounded-button {
   -webkit-border-radius: 48px;
   -moz-border-radius: 48px;
   border-radius: 48px;
   padding: 11px 24px;
   text-decoration: none;
   font-weight: 600;
   font-size: 14px;
   text-transform: uppercase;
   cursor: pointer;
   height: 47px;
   line-height: 21px;
   text-shadow: none;
   text-align: center;
   -webkit-transition: background-color .2s,color .2s;
   transition: background-color .2s,color .2s;
   display: block;
   width:100%;
   color: #fff;
}
 
.rounded-button.login {
   background-color: #00DCFF;
}
.rounded-button.register {
   background-color: #00DCFF;
   margin-top: 10px;
   margin-bottom: -5%;
}
 
.login-popup .login-form .rounded-button.login:hover { background-color: #FDD111; }
.login-popup .rounded-button.register:hover { background-color: #FDD111; }

Aguardo respostas,
DaviMorais Muito feliz
DaviMorais

DaviMorais
***

Membro desde : 03/08/2020
Mensagens : 180
Pontos : 231

http://fnhabbo.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar imagem ao pop-up de login

Mensagem por Saintness 20.01.21 19:31

Foi, irmão.
Agradeço grandemente, forte abraço.

Pode fechar.
Ulalau.
Saintness

Saintness
***

Membro desde : 30/05/2020
Mensagens : 170
Pontos : 285

https://sistemacrp.forumeiros.com/ https://www.facebook.com/Gabriel Augusto https://twitter.com/Coyoti Habblet

Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar imagem ao pop-up de login

Mensagem por RafaelS. 21.01.21 15:17

Tópico resolvido


Movido para "Questões resolvidas".
avatar

RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos