/* Remendos em cima do visual do phpRetro 4.0.10. Aqui so entra o que nao existia la: a logo do Narbo por cima da do Habbo, e as caixas do painel que eu acrescentei. O visual em si vem de /web-gallery/v2/styles/ e /hk/styles/. */ /* ----------------------------------------------------------- logo Narbo */ #header h1 a, #header h1 span, #fp-container #header h1 a { background-image: url(/assets/logo-topo.png) !important; background-repeat: no-repeat; background-position: left center; width: 110px; height: 65px; display: block; } /* O avatar e pixel art: sem isto o navegador borra ao redimensionar. */ #habbo-plate img, .avatar { image-rendering: pixelated; } /* --------------------------------------------------------- pagina cliente */ body.cliente { background: #1c1c1c; margin: 0; overflow: hidden; } body.cliente #flash-container { width: 100vw; height: 100vh; } /* --------------------------------------------------- blocos coloridos .rounded-blue, .rounded-red e companhia sao blocos de cor chapada; os cantos arredondados vinham do Rounder, que recortava quatro imagens de 4px e grudava em volta. Navegador de 2009 nao tinha border-radius; hoje tem, e o resultado na tela e o mesmo. */ div.rounded, div.rounded-blue, div.rounded-red, div.rounded-green, div.rounded-orange, div.rounded-darkgray { border-radius: 4px; padding: 8px; } #register-column-left, #register-column-right { box-sizing: border-box; } #register-column-left { padding-right: 8px; } #register-section-2 .rounded-blue h2.heading, #register-column-right .rounded-blue h2.heading { margin: 0 0 8px; font-size: 14px; color: #fff; } #registerform .register-label { margin: 0 0 4px; } #registerform .register-text { border: 1px solid #7f7f7f; padding: 3px; font: 11px Verdana, Arial, sans-serif; } #register-section-3 .box-content { padding: 10px; } /* ------------------------------------------- moldura de processo (cartao) O style.css do Habbo poe text-align:center no e conta com cada bloco desalinhar de volta. Os blocos que eu acrescentei nao faziam isso, entao rotulo e campo saiam centralizados. */ body.process-template #process-content { text-align: left; } /* o ul.stats do process.css e position:absolute em top:56px, com as duas colunas de largura fixa -- nao mexer nele, so garantir que o cartao tenha altura para a linha caber. */ body.process-template #process-content { margin-top: 28px; } body.process-template #header h1 { float: left; margin: 10px 0 0 10px; } #registerform .register-label, #registerform .register-label label, #registerform fieldset, #register-section-2 .rounded-blue, #register-column-right .rounded-blue { text-align: left; } #register-section-2 .rounded-blue h2.heading, #register-column-right .rounded-blue h2.heading, #register-section-3 h2.title.heading { text-align: left; } #registerform .register-text { width: 92%; max-width: 240px; } #registerform select.register-text { width: auto; } #registerform input[type=submit], #registerform .submit { background: #fc6204; border: 0; border-bottom: 3px solid #b74800; border-radius: 4px; color: #fff; cursor: pointer; font: bold 13px Verdana, Arial, sans-serif; padding: 7px 18px; } #registerform input[type=submit]:hover { background: #ff7a26; } #register-section-3 .cbb.gray h2.title { background: #55554e; color: #fff; margin: 0; padding: 5px 10px; font-size: 13px; } /* ------------------------------------------------------------ frontpage A tela de entrada carrega frontpage.css junto com style.css, e o style.css traz as larguras das colunas de dentro (460/310/160). Na frontpage isso nao vale: ali a coluna ocupa a faixa inteira. */ body#frontpage #column1, body#frontpage #column2 { width: auto; float: none; } body#frontpage #content { text-align: left; } body#frontpage #column-footer { clear: both; padding-top: 10px; } body#frontpage #hotel-stats { width: auto; float: none; } body#frontpage #hotel-stats ul.stats { display: flex; gap: 22px; } body#frontpage #hotel-stats li { list-style: none; } /* A caixa de login e absoluta no canto (frontpage.css), e o botao Entrar e position:absolute dentro dela -- sem um pai relativo ele escapava para fora da caixa. */ body#frontpage .loginbox li { position: relative; } body#frontpage #login-submit-button { position: absolute; right: 0; bottom: 0; background: #fc6204; border: 0; border-bottom: 2px solid #b74800; border-radius: 3px; color: #fff; cursor: pointer; font: bold 11px Verdana, Arial, sans-serif; padding: 4px 12px; } body#frontpage #login-submit-button:hover { background: #ff7a26; } body#frontpage .loginbox label.login-text { color: #fff; font-weight: bold; text-align: left; margin-top: 4px; } body#frontpage .loginbox #login-password { margin-bottom: 26px; } body#frontpage .loginbox #register-link { display: block; } body#frontpage .loginbox #register-link a { color: #fff; font-size: 10px; } body#frontpage .novidades-caixa { max-width: 710px; margin: 12px auto 0; } body#frontpage .loginbox #register-link a { white-space: nowrap; } /* -------------------------------------------------- comunidade e perfil */ .busca-habbo { margin: 0 0 10px; } .busca-habbo input[type=text] { border: 2px solid #b8b8ae; border-radius: 3px; padding: 5px 6px; font: 12px Verdana, Arial, sans-serif; width: 180px; } .busca-habbo button { background: #fc6204; border: 0; border-bottom: 2px solid #b74800; border-radius: 3px; color: #fff; cursor: pointer; font: bold 11px Verdana, Arial, sans-serif; padding: 6px 14px; margin-left: 4px; } .busca-habbo button:hover { background: #ff7a26; } .habbo-grade { display: flex; flex-wrap: wrap; gap: 6px; } .habbo-cartao { flex: 0 0 82px; border: 1px solid #e4e4dc; border-radius: 4px; background: #fbfbf7; padding: 6px 2px 4px; text-align: center; text-decoration: none; } .habbo-cartao:hover { background: #fff4ec; border-color: #fbc9a6; } .habbo-cartao img { height: 74px; image-rendering: pixelated; display: block; margin: 0 auto; } .habbo-cartao b { display: block; color: #444; font: bold 10px Verdana, Arial, sans-serif; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .habbo-cartao i { color: #5aa02c; font-size: 9px; font-style: normal; } .vazio { color: #888; font-size: 11px; } .lista-ranking { margin: 0; padding: 0 0 0 26px; } .lista-ranking li { padding: 3px 0; border-bottom: 1px solid #f0f0ea; } .lista-ranking span { float: right; color: #fc6204; font-weight: bold; } .equipe-linha { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid #f0f0ea; } .equipe-linha img { height: 44px; image-rendering: pixelated; } .equipe-linha i { display: block; color: #888; font-size: 10px; font-style: normal; } .perfil-topo { display: flex; gap: 14px; align-items: flex-start; } .perfil-retrato { flex: 0 0 110px; background: #f2f2ec; border: 1px solid #e0e0d8; border-radius: 5px; padding: 6px; text-align: center; } .perfil-retrato img { height: 130px; image-rendering: pixelated; } .perfil-dados { flex: 1 1 auto; min-width: 0; } .perfil-dados .missao { background: #f6f6f1; border-left: 3px solid #fc6204; font-style: italic; margin: 0 0 8px; padding: 6px 8px; } .perfil-dados ul { margin: 0; padding: 0; } .perfil-dados li { list-style: none; padding: 2px 0; font-size: 11px; } .perfil-numeros { display: flex; gap: 8px; margin-top: 12px; } .perfil-numeros div { flex: 1 1 0; background: #fbfbf7; border: 1px solid #e4e4dc; border-radius: 4px; padding: 8px 4px; text-align: center; } .perfil-numeros b { display: block; color: #fc6204; font-size: 17px; } .perfil-numeros span { color: #888; font-size: 10px; } .lista-quartos { margin: 0; padding: 0; } .lista-quartos li { list-style: none; padding: 4px 0; border-bottom: 1px solid #f0f0ea; } .lista-quartos span { color: #888; font-size: 10px; margin-left: 6px; } .emblemas { display: flex; flex-wrap: wrap; gap: 6px; } .emblemas img { image-rendering: pixelated; } /* ------------------------------------------------------------- grupos */ .grupo-lista { display: flex; flex-direction: column; gap: 6px; } .grupo-linha { display: flex; align-items: center; gap: 10px; border: 1px solid #e4e4dc; border-radius: 4px; background: #fbfbf7; padding: 7px 9px; text-decoration: none; } .grupo-linha:hover { background: #fff4ec; border-color: #fbc9a6; } .grupo-linha img { image-rendering: pixelated; flex: 0 0 39px; } .grupo-texto { min-width: 0; } .grupo-texto b { display: block; color: #444; font-size: 12px; } .grupo-texto span { display: block; color: #777; font-size: 11px; } .grupo-texto i { color: #999; font-size: 10px; font-style: normal; } .grupo-mini { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid #f0f0ea; text-decoration: none; } .grupo-mini img { image-rendering: pixelated; } .grupo-mini span { color: #444; font-size: 11px; } .grupo-cabeca { display: flex; gap: 14px; align-items: flex-start; } .grupo-emblema { image-rendering: pixelated; flex: 0 0 39px; background: #f2f2ec; border: 1px solid #e0e0d8; border-radius: 4px; padding: 6px; } .grupo-desc { background: #f6f6f1; border-left: 3px solid #fc6204; margin: 0 0 8px; padding: 6px 8px; } .grupo-dados { margin: 0; padding: 0; } .grupo-dados li { list-style: none; font-size: 11px; padding: 2px 0; } .paginacao { margin-top: 12px; text-align: center; } .paginacao a, .paginacao b { display: inline-block; min-width: 20px; padding: 3px 6px; margin: 0 2px; border: 1px solid #e0e0d8; border-radius: 3px; font-size: 11px; text-align: center; text-decoration: none; } .paginacao b { background: #fc6204; border-color: #b74800; color: #fff; } /* -------------------------------------------------------------- forum */ .forum-lista { width: 100%; border-collapse: collapse; font-size: 11px; } .forum-lista th { background: #f1f1ea; border-bottom: 1px solid #ddd; padding: 5px 6px; text-align: left; } .forum-lista td { border-bottom: 1px solid #f0f0ea; padding: 5px 6px; } .marca-fixo, .marca-trancado, .marca-equipe, .marca-porta { display: inline-block; font-size: 9px; padding: 1px 4px; border-radius: 2px; font-style: normal; margin-right: 4px; } .marca-fixo { background: #fc6204; color: #fff; } .marca-trancado { background: #999; color: #fff; } .marca-equipe { background: #418db0; color: #fff; } .marca-porta { background: #e8e2d5; color: #7a6a4a; } .forum-migalha { color: #888; font-size: 11px; margin: 0 0 10px; } .forum-post { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f0f0ea; } .forum-post.apagado { opacity: .55; } .forum-quem { flex: 0 0 90px; text-align: center; } .forum-quem img { height: 74px; image-rendering: pixelated; display: block; margin: 0 auto; } .forum-quem a { font-size: 11px; font-weight: bold; } .forum-texto { flex: 1 1 auto; min-width: 0; } .forum-texto .quando { color: #aaa; font-size: 10px; } .forum-texto p { margin: 4px 0 0; } .forum-apagar { display: inline; } .forum-apagar button { background: none; border: 0; color: #c0392b; cursor: pointer; font-size: 10px; padding: 0; } .forum-novo { margin-top: 14px; padding-top: 12px; border-top: 1px solid #eee; } .forum-novo h3 { margin: 0 0 6px; font-size: 12px; color: #444; } .forum-novo input[type=text], .forum-novo textarea { width: 100%; box-sizing: border-box; border: 2px solid #b8b8ae; border-radius: 3px; padding: 5px 6px; margin: 0 0 6px; font: 12px Verdana, Arial, sans-serif; } .forum-novo button, .forum-ferramentas button { background: #fc6204; border: 0; border-bottom: 2px solid #b74800; border-radius: 3px; color: #fff; cursor: pointer; font: bold 11px Verdana, Arial, sans-serif; padding: 6px 14px; } .forum-ferramentas { margin-top: 10px; } .forum-ferramentas button { background: #7b8a93; border-bottom-color: #5a666d; margin-right: 6px; } /* ------------------------------------------------------------- quartos */ .quarto-lista { margin: 0; padding: 0; } .quarto-lista li { list-style: none; padding: 8px 0; border-bottom: 1px solid #f0f0ea; } .quarto-cabeca { display: flex; align-items: center; gap: 6px; } .quarto-cabeca b { color: #444; } .quarto-gente { margin-left: auto; color: #fc6204; font-weight: bold; font-size: 11px; } .quarto-desc { color: #777; font-size: 11px; margin: 3px 0 0; } .quarto-pe { color: #999; font-size: 10px; margin: 3px 0 0; } /* ---------------------------------------------------------- minha conta */ .form-conta input[type=text], .form-conta input[type=email], .form-conta input[type=password] { border: 2px solid #b8b8ae; border-radius: 3px; padding: 5px 6px; font: 12px Verdana, Arial, sans-serif; width: 260px; max-width: 100%; } .form-conta button, .botao-conta { background: #fc6204; border: 0; border-bottom: 2px solid #b74800; border-radius: 3px; color: #fff; cursor: pointer; font: bold 11px Verdana, Arial, sans-serif; padding: 6px 14px; margin-left: 4px; } .form-conta.coluna label { display: block; font: bold 11px Verdana, Arial, sans-serif; color: #444; margin: 8px 0 3px; } .form-conta.coluna input { display: block; } .form-conta.coluna button { margin: 12px 0 0; } .botao-conta { display: block; margin: 12px 0 0; } /* ------------------------------------------------- faixa publicada no site */ .faixa-site { max-width: 930px; margin: 8px auto 0; padding: 8px 12px; border-radius: 4px; border-left: 4px solid; font: bold 11px Verdana, Arial, sans-serif; } .faixa-site.faixa-info { background: #e8f2f8; border-color: #418db0; color: #1f4b63; } .faixa-site.faixa-aviso { background: #fff6e0; border-color: #f2a900; color: #7a5600; } .faixa-site.faixa-erro { background: #fdecea; border-color: #c0392b; color: #8d2318; } /* --------------------------------------------------------------- recados */ .recado-novo { margin: 0 0 12px; } .recado-novo textarea { width: 100%; box-sizing: border-box; border: 2px solid #b8b8ae; border-radius: 3px; padding: 5px 6px; font: 12px Verdana, Arial, sans-serif; } .recado-novo button { margin-top: 5px; background: #fc6204; border: 0; border-bottom: 2px solid #b74800; border-radius: 3px; color: #fff; cursor: pointer; font: bold 11px Verdana, Arial, sans-serif; padding: 6px 14px; } .recado { display: flex; gap: 9px; padding: 8px 0; border-bottom: 1px solid #f0f0ea; } .recado img { height: 60px; image-rendering: pixelated; flex: 0 0 auto; } .recado > div { flex: 1 1 auto; min-width: 0; } .recado a { font-weight: bold; font-size: 11px; } .recado .quando { color: #aaa; font-size: 10px; margin-left: 6px; } .recado p { margin: 3px 0 0; } .recado-apagar button { background: none; border: 0; color: #c0392b; cursor: pointer; font-size: 10px; padding: 0; } /* ----------------------------------------------------------------- ajuda */ .ajuda-artigo { border-bottom: 1px solid #f0f0ea; padding: 6px 0; } .ajuda-artigo h3 { margin: 0; font-size: 12px; } .ajuda-artigo h3 a { color: #fc6204; text-decoration: none; } .ajuda-artigo h3 a:hover { text-decoration: underline; } .ajuda-corpo { background: #f9f9f4; border-left: 3px solid #fc6204; margin: 6px 0 2px; padding: 8px 10px; font-size: 11px; line-height: 1.6; } /* ------------------------------------------- criar grupo e emblema O editor de emblema nao existe no pacote: a tela de criar grupo do Habbo e desenhada pelo proprio cliente, em Flash. Estas regras sao para a versao de site, e seguem as caixas .cbb do resto das paginas em vez de inventar um visual novo. */ .grupo-campo { margin: 0 0 12px; } .grupo-campo label { display: block; font-weight: bold; color: #2d6480; font-size: 11px; margin: 0 0 3px; } .grupo-campo input[type="text"], .grupo-campo textarea, .grupo-campo select { width: 100%; box-sizing: border-box; padding: 4px; border: 1px solid #c3d0d8; border-radius: 3px; font: inherit; } .grupo-ajuda { display: block; font-size: 10px; color: #888; margin-top: 3px; } .grupo-secao { margin: 18px 0 8px; padding-top: 10px; font-size: 12px; color: #2d6480; border-top: 1px solid #e4eaee; } .emblema-editor { display: flex; gap: 14px; align-items: flex-start; } /* A previa fica parada enquanto a lista ao lado rola: e ela que a pessoa esta olhando ao escolher. */ .emblema-previa { flex: 0 0 auto; text-align: center; padding: 8px; background: #f5f8fa; border: 1px solid #e0e6ea; border-radius: 4px; position: sticky; top: 8px; } .emblema-previa img { display: block; image-rendering: pixelated; } .emblema-previa code { font-size: 9px; color: #888; } .emblema-escolhas { flex: 1 1 auto; } /* Escolher entre 93 simbolos numa lista de numeros e impossivel: nada diz que cara tem o simbolo 47. Cada peca e desenhada pelo emblema.php -- o mesmo que desenha o emblema pronto -- e o radio fica escondido atras dela. */ .peca-bloco { margin: 0 0 12px; padding: 8px; border: 1px solid #e4eaee; border-radius: 4px; background: #fbfcfd; } .peca-titulo { font-size: 11px; font-weight: bold; color: #2d6480; margin: 0 0 5px; } .peca-ajuda { font-weight: normal; color: #999; } .peca-grade { display: flex; flex-wrap: wrap; gap: 2px; max-height: 132px; overflow-y: auto; background: #fff; border: 1px solid #e0e6ea; border-radius: 3px; padding: 3px; } .peca-grade .peca { display: block; width: 41px; height: 41px; cursor: pointer; border: 1px solid transparent; border-radius: 3px; box-sizing: border-box; } .peca-grade .peca img { display: block; image-rendering: pixelated; } .peca-grade .peca input { position: absolute; opacity: 0; width: 0; height: 0; } .peca-grade .peca:hover { border-color: #b9d3e4; background: #eef5fa; } .peca-grade .peca.escolhida { border-color: #fc6204; background: #fff3e8; } .peca-grade .peca.vazia { display: flex; align-items: center; justify-content: center; font-size: 9px; color: #888; text-align: center; line-height: 1.1; } .paleta { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; } .paleta .cor { width: 18px; height: 18px; cursor: pointer; border: 2px solid #d7dfe4; border-radius: 3px; box-sizing: border-box; } .paleta .cor:has(input:checked) { border-color: #2d6480; } .paleta .cor input { position: absolute; opacity: 0; width: 0; height: 0; } /* Os nove lugares, na mesma disposicao em que saem no emblema. */ .grade-pos { display: grid; grid-template-columns: repeat(3, 15px); gap: 2px; margin-top: 6px; } .grade-pos label { cursor: pointer; } .grade-pos input { position: absolute; opacity: 0; width: 0; height: 0; } .grade-pos span { display: block; width: 15px; height: 15px; border: 1px solid #d7dfe4; border-radius: 2px; background: #fff; } .grade-pos label:has(input:checked) span { background: #fc6204; border-color: #c94e00; } .cores-movel { display: flex; gap: 20px; } .cores-movel span { display: block; font-size: 11px; font-weight: bold; color: #2d6480; } .grupo-preco { margin: 14px 0 10px; font-size: 11px; } /* --------------------------------------------- acoes dentro do grupo */ .grupo-acoes { margin-top: 10px; padding-top: 10px; border-top: 1px solid #e4eaee; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .grupo-nota { font-size: 11px; color: #888; } .habbo-cartao .cartao-botoes { margin-top: 3px; display: flex; gap: 5px; justify-content: center; } .habbo-cartao i.cargo-dono { color: #c94e00; font-style: normal; font-size: 9px; } .habbo-cartao i.cargo-admin { color: #2d6480; font-style: normal; font-size: 9px; } /* O botao do hotel. Estava escrito duas vezes, igual, com nomes diferentes -- e .botao, que as quatro paginas de cliente ja usavam, nao existia em lugar nenhum e nao pintava nada. Agora e uma regra so. */ .botao, .botao-criar-grupo, .botao-casa { display: inline-block; padding: 5px 12px; border-radius: 3px; background: #fc6204; color: #fff !important; font-weight: bold; font-size: 11px; text-decoration: none !important; border: 0; cursor: pointer; font-family: inherit; } .botao:hover, .botao-criar-grupo:hover, .botao-casa:hover { background: #e05600; } /* ===================================================================== A CASA -- o perfil que o proprio Habbo monta. As molduras (.w_skin_*) sao desenhadas pelo skins.css do pacote, que monta cada uma com nove imagens sobre a arvore widget-headline > widget-corner e widget-content > widget-body. O que esta aqui e so o que aquele arquivo nao cobre: o tapete onde os cartoes ficam soltos, a oficina de escolher cartao, e o miolo de cada tipo. ===================================================================== */ .casa-topo { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid #d7dfe4; border-radius: 4px; padding: 8px 12px; margin: 0 0 10px; } .casa-quem { display: flex; align-items: center; gap: 10px; } .casa-quem img { height: 42px; } .casa-quem b { display: block; color: #2d6480; } .casa-quem i { font-size: 10px; color: #888; font-style: normal; } .casa-botoes { display: flex; align-items: center; gap: 12px; font-size: 11px; } /* O tapete. Os cartoes sao posicionados em absoluto dentro dele, entao ele precisa de altura propria -- senao um cartao arrastado para baixo sai da area de rolagem. */ /* A altura vem do script, medida depois de tudo desenhado: ela depende de quantos emblemas, amigos e quartos a pessoa tem. O overflow corta so na horizontal, para adesivo arrastado ate a borda nao criar barra de rolagem lateral -- na vertical o tapete cresce. */ .casa-tapete { position: relative; min-height: 420px; background: #fff url(/web-gallery/v2/images/bg_tile.gif) repeat; border: 1px solid #d7dfe4; border-radius: 4px; overflow-x: hidden; overflow-y: visible; } .casa-tapete.editando { background-color: #f7fbfd; outline: 2px dashed #b9d3e4; outline-offset: -6px; } .casa-vazia { position: absolute; top: 40%; left: 0; right: 0; text-align: center; color: #888; font-size: 12px; padding: 0 30px; } .casa-tapete .widget { position: absolute; } .casa-tapete .widget.arrastando { opacity: .75; cursor: grabbing; } /* As ferramentas de cada cartao, so no modo de edicao. */ .cartao-ferramentas { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; margin-top: 2px; font-size: 10px; } .cartao-ferramentas .pegar { cursor: grab; background: #2d6480; color: #fff; padding: 1px 7px; border-radius: 2px; user-select: none; touch-action: none; } .cartao-ferramentas select { font-size: 10px; max-width: 96px; } .cartao-ferramentas button { background: none; border: 0; padding: 0; cursor: pointer; color: #a0342a; font-size: 10px; text-decoration: underline; } /* --------------------------------------------------- a oficina */ .casa-oficina { background: #fff; border: 1px solid #d7dfe4; border-radius: 4px; padding: 10px 12px; margin: 0 0 10px; } .casa-oficina h3 { margin: 0 0 6px; font-size: 11px; color: #2d6480; } .casa-oficina h3 + * { margin-top: 0; } .oficina-grade { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .oficina-item button { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 92px; padding: 6px 4px; cursor: pointer; font: inherit; font-size: 10px; background: #f5f8fa; border: 1px solid #dde5ea; border-radius: 4px; } .oficina-item button:hover { background: #eef5fa; border-color: #b9d3e4; } .oficina-item button[disabled] { opacity: .45; cursor: default; } .oficina-item img { height: 26px; } .oficina-item i { color: #999; font-size: 9px; } .oficina-linha { font-size: 11px; } .oficina-dica { font-size: 10px; color: #888; margin: 8px 0 0; } /* ---------------------------------------- o miolo de cada cartao */ .widget-body .vazio { color: #999; font-size: 11px; margin: 0; } .c-perfil { display: flex; gap: 8px; } .c-perfil img { height: 58px; } .c-perfil b { color: #2d6480; } .c-missao { font-style: italic; color: #666; margin: 2px 0 4px; font-size: 11px; } .c-perfil ul, .c-lista { list-style: none; margin: 0; padding: 0; font-size: 11px; } .c-lista li { padding: 1px 0; } .c-lista i { color: #999; font-style: normal; font-size: 10px; } .c-nota { font-size: 12px; margin: 0; white-space: pre-wrap; } .c-gente, .c-grupos { display: flex; flex-wrap: wrap; gap: 4px; } .c-gente a, .c-grupos a { width: 52px; text-align: center; font-size: 9px; text-decoration: none; color: #2d6480; } .c-gente img { height: 40px; display: block; margin: 0 auto; } .c-gente span, .c-grupos span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .c-emblemas { display: flex; flex-wrap: wrap; gap: 3px; } .c-emblemas img { width: 39px; height: 39px; } .c-recados { list-style: none; margin: 0; padding: 0; font-size: 11px; } .c-recados li { border-bottom: 1px solid #eef2f5; padding: 4px 0; } .c-recados li:last-child { border-bottom: 0; } .c-recados b { color: #2d6480; } .c-recados i { color: #999; font-style: normal; font-size: 9px; } /* ------------------------------------------- a janela da nota */ .nota-janela { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 360px; background: #fff; z-index: 9999; border: 1px solid #b9c7d0; border-radius: 5px; padding: 14px; box-shadow: 0 6px 30px rgba(0,0,0,.35); } .nota-janela h3 { margin: 0 0 8px; font-size: 12px; color: #2d6480; } .nota-janela textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 6px; border: 1px solid #c3d0d8; border-radius: 3px; } .nota-botoes { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; } .nota-botoes button { background: none; border: 0; cursor: pointer; font-size: 11px; color: #888; text-decoration: underline; } /* O link para a casa, logo abaixo do retrato no perfil. */ .perfil-retrato .link-casa { display: block; text-align: center; margin-top: 6px; font-size: 11px; color: #2d6480; } /* --------------------------------------------- escolher o fundo Sao 584; a grade rola em vez de esticar a pagina. */ .fundo-grade { display: flex; flex-wrap: wrap; gap: 3px; max-height: 168px; overflow-y: auto; background: #fff; border: 1px solid #e0e6ea; border-radius: 3px; padding: 4px; margin-bottom: 6px; } .fundo-item button { display: block; width: 49px; height: 49px; padding: 0; cursor: pointer; background: #f5f8fa; border: 2px solid transparent; border-radius: 3px; box-sizing: border-box; overflow: hidden; } .fundo-item button:hover { border-color: #b9d3e4; } .fundo-item.escolhido button { border-color: #fc6204; } .fundo-item img { display: block; } .sem-fundo { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 9px; color: #888; } /* O campo de escrever dentro do cartao de mural. */ .c-recado-form { margin: 0 0 8px; } .c-recado-form textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 11px; padding: 4px; border: 1px solid #c3d0d8; border-radius: 3px; } .c-recado-form button { margin-top: 3px; padding: 3px 10px; cursor: pointer; font-size: 10px; background: #fc6204; color: #fff; border: 0; border-radius: 3px; } .c-recado-form button:hover { background: #e05600; } /* ------------------------------------------- faixa da noticia */ .noticia-faixa { display: block; width: 100%; height: auto; border-radius: 3px; margin: 0 0 10px; } /* ------------------------------------------- lista de noticias */ .noticia-linha { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid #e3e3e3; } .noticia-linha:last-child { border-bottom: 0; } .noticia-mini { flex: 0 0 auto; line-height: 0; } .noticia-mini img { width: 150px; height: auto; border-radius: 3px; } .noticia-texto { flex: 1 1 auto; } .noticia-texto h3 { margin: 0 0 4px; } .noticia-texto p { margin: 0; } .noticia-quem { color: #888; font-size: 11px; margin: 0 0 6px !important; } /* ------------------------------------------------- adesivos da casa Adesivo nao tem moldura: e a figura solta, como no Habbo. */ .casa-tapete .adesivo { position: absolute; line-height: 0; } .casa-tapete .adesivo img { display: block; } .casa-tapete .adesivo.arrastando { opacity: .7; } .casa-tapete .adesivo .cartao-ferramentas { opacity: 0; transition: opacity .12s; line-height: normal; } .casa-tapete .adesivo:hover .cartao-ferramentas { opacity: 1; } .adesivo-grade { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; max-height: 210px; overflow-y: auto; background: #fff; border: 1px solid #e0e6ea; border-radius: 3px; padding: 5px; margin-bottom: 6px; } .adesivo-item button { display: block; padding: 2px; cursor: pointer; line-height: 0; background: none; border: 2px solid transparent; border-radius: 3px; } .adesivo-item button:hover { border-color: #fc6204; background: #fff3e8; } .adesivo-item img { display: block; max-width: 72px; max-height: 72px; } /* A escolha entre navegador e aplicativo, sob o botao de entrar. Mora aqui e nao no personal.css porque aquele e o CSS original do Habbo -- o que a gente acrescenta fica sempre neste arquivo. Fica em position:absolute de proposito. O .enter-hotel-btn tambem e absoluto, nao tem largura propria e centraliza um fundo de imagem: um paragrafo no fluxo normal alargaria a caixa e desalinharia o desenho alaranjado atras do botao. Assim a linha desce para fora do fluxo e nada se mexe. */ #wide-personal-info .escolha-cliente { position: absolute; top: 100%; right: 0; margin: -14px 0 0; padding: 3px 7px; white-space: nowrap; text-align: right; font: 11px/1.4 Verdana, Arial, sans-serif; background: rgba(0,0,0,.45); border-radius: 3px; } #wide-personal-info .escolha-cliente a { color: #fff; text-decoration: none; opacity: .8; padding: 0 4px; } #wide-personal-info .escolha-cliente a + a { border-left: 1px solid rgba(255,255,255,.35); } #wide-personal-info .escolha-cliente a:hover { opacity: 1; text-decoration: underline; } #wide-personal-info .escolha-cliente a.agora { opacity: 1; font-weight: bold; } /* --------------------------------------------------------------------- Pareamento: o codigo que liga o aplicativo de mesa a uma conta. Vive dentro da moldura "process-template", a mesma das telas de passo isolado (criar conta, sair), entao aqui so vai o miolo. --------------------------------------------------------------------- */ .pareamento { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; } .pareamento code { flex: 1; min-width: 0; font: bold 17px/1.5 "Consolas", "Courier New", monospace; letter-spacing: .5px; color: #2f3b45; text-align: center; background: #f3f6f8; border: 1px solid #cdd7de; border-radius: 4px; padding: 9px 8px; /* o codigo e para ser lido e digitado do outro lado: selecionar inteiro com um clique poupa a pessoa de mirar com o mouse */ user-select: all; overflow-wrap: break-word; } .pareamento-validade { color: #7a8894; font-size: 11px; margin: 0 0 4px; } .pareamento-divisoria { border: 0; border-top: 1px solid #dde4e9; margin: 22px 0 18px; } .pareamento-baixar { margin: 0 0 14px; text-align: center; } .botao-grande { padding: 8px 22px; font-size: 13px; } .pareamento-volta { font-size: 11px; color: #7a8894; } .pareamento-forma { margin: 14px 0 10px; } .pareamento-forma label { display: block; font-weight: bold; font-size: 11px; color: #4a5a66; margin-bottom: 4px; } .pareamento-forma input[type="text"] { width: 100%; box-sizing: border-box; font: 15px/1.5 "Consolas", "Courier New", monospace; padding: 8px; border: 1px solid #cdd7de; border-radius: 4px; margin-bottom: 10px; } .pareamento-forma input[type="text"]:focus { border-color: #fc6204; outline: none; } /* ===================================================================== Escolha do primeiro quarto (bem-vindo.php). O welcome.css da pele ja desenha os seis cartoes: a arte dos seis vem de uma imagem so, posta como fundo do