HTML |
---|
<img src="https://totvscrm.com/wp-content/uploads/2023/06/nova-capa-release-23artigos-scaled.gif" style="width:100%"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="content"> <div class="article"> <br> <style> /* Seleciona a classe CSS 'meu-titulo' e aplica o padding de 0 3em 0 3em */ .meu-titulo { padding: 0 3em 0 3em; } </style> <h2> <img src="https://totvscrm.com/wp-content/uploads/2023/06/[email protected]" alt="some text" width=45>     <strong>EXCLUSÃO DE REGISTROS DE LEADS</strong> </h2> <br> <br> <span class="badge badge-novo"><strong>NOVO</strong></span> <span class="badge badge-dark"><strong>CONTAS</strong></span> <br> <br> <style> /* Estilo para a tabela */ table { width: 100%; border-collapse: collapse; } /* Estilo para as células da tabela */ </style> <div class="coluna1"> <div class="table-wrap" style="margin-left: 0px;padding: 0 3em 0 3em;"> <table class="relative-table wrapped confluenceTable" style="width: 100%;" resolved=""> <thead> <tr> <th style="text-align: left;" colspan="1" class="confluenceTh">Produto:</th> <td style="text-align: left;" colspan="1" class="confluenceTd"> TCRM - Gestão de Clientes</td> <div class="content-wrapper"> </div> </td> </tr> </thead> <colgroup> <col style="width: 162.912px;"> <col style="width: 203.153px;"> </colgroup> <tbody> <tr> <th style="text-align: left;" class="confluenceTh">Linha de Produto:</th> <td style="text-align: left;" class="confluenceTd">TOTVS CRM</td> <div class="content-wrapper"> </div> </td> </tr> <tr> <th style="text-align: left;" class="confluenceTh">Segmento:</th> <td style="text-align: left;" class="confluenceTd">Cross Segmentos</td> <div class="content-wrapper"> </div> </td> </tr> <tr> <th style="text-align: left;" class="confluenceTh">Módulo:</th> <td style="text-align: left;" class="confluenceTd">Contas</td> </tr> <tr> <th style="text-align: left;" colspan="1" class="confluenceTh">Aplicação</th> <td style="text-align: left;" colspan="1" class="confluenceTd">Web/app móvel</td> </tr> <tr> <th style="text-align: left;" colspan="1" class="confluenceTh">Identificador:</th> <td style="text-align: left;" colspan="1" class="confluenceTd"><span style="color: rgb(23,43,77);">NR220220220926</span></td> </tr> <div class="content-wrapper"> </span> </div> </td> </tr> </tbody> </table> </div> </div> <div class="coluna2"> <div class="conteudo"> <br> <p>Ao longo do tempo, uma base de dados de Leads pode acumular registros desatualizados, duplicados ou irrelevantes. Essa situação pode dificultar a gestão eficiente dos Leads e a tomada de decisões estratégicas com base nesses dados. Para resolver esse problema, o TOTVS CRM agora oferece a funcionalidade de "Exclusão de Registros de Leads". </p> </div> </div> <br> <h2> <img src="https://totvscrm.com/wp-content/uploads/2023/06/[email protected]" alt="some text" width=45>     <strong>O QUE O RECURSO FAZ?</strong> </h2> <br> <br> <p> O recurso permite remover facilmente os registros indesejados da sua base de dados de Leads. </p> <h2> <img src="https://totvscrm.com/wp-content/uploads/2023/06/[email protected]" alt="some text" width=45>     <strong>O QUE MUDOU?</strong> </h2> <br> <p> <h3 class="meu-titulo"> PERMISSÕES DE ACESSO </h3> <br> </p> <p> Agora, é possível configurar as permissões de deletar Leads no módulo Administrativo, mais precisamente no recurso Perfil de Acesso no item "Contas > Leads > Informações". Ao habilitar a opção de deletar, os usuários com permissão poderão excluir registros de Leads diretamente da lista de Leads. </p> <br> <video autoplay loop> <source src="https://totvscrm.com/wp-content/uploads/2023/07/TUTORIAL.mp4" type="video/mp4"> </video> <br> <p> 2) Na aba <strong>"Parâmetros"</strong>, você encontrará a seção de "Configurações das oportunidades" e o novo parâmetro "Permitir salvar itens com desconto maior do que permitido". Por padrão, esse parâmetro está desativado. No entanto, quando ativado, permite que você salve itens com desconto maior do que o permitido. É importante destacar que, mesmo com esse parâmetro ativado, ainda não será possível ganhar a oportunidade.</p> <br> <div style="padding: 0 3em 0 3em;"> <img src="https://totvscrm.com/wp-content/uploads/2023/05/UniConverter-14_20230511155709.gif" class="destaque"> </div> <br> <p> 3) Na aba "Permissões" estão as "Permissões de acesso" e uma nova seção chamada "Permissões de desconto". </p> <br> <div style="padding: 0 3em 0 3em;"> <img src="https://totvscrm.com/wp-content/uploads/2023/05/UniConverter-14_20230511163601.gif" class="destaque"> </div> <br> <p> Nesta seção, é possível configurar faixas de desconto máximo em uma pipeline. Se nenhum registro for feito, nenhuma restrição será aplicada. No campo "Desconto máximo", insira o valor desejado (até duas casas decimais). Lembre-se que deve ser maior que zero e igual ou menor que 100. Por padrão, "Todos os usuários" podem aplicar o desconto. Caso prefira, desmarque essa opção e selecione usuários, papéis ou grupos para aplicar a restrição. Ao desmarcar "Todos os usuários", o campo "Permitido para" será obrigatório.</p> <br> <div style="padding: 0 3em 0 3em;"> <img src="https://totvscrm.com/wp-content/uploads/2023/05/UniConverter-14_20230511175804.gif" class="destaque"> </div> <br> <p> <h3 class="meu-titulo"> APLICAÇÃO DAS RESTRIÇÕES DE DESCONTO </h3> <br> </p> <h4 class="meu-titulo">Verificação de Permissões:</h4> <p>Se o desconto for maior que zero, a solução valida se o usuário logado ou responsável tem permissão para aplicar aquele percentual de desconto. Consideramos as faixas de desconto máximo aplicado no item, levando em conta o papel, grupo de usuário ou permissões individuais.</p> <h4 class="meu-titulo">Visualização dos Itens:</h4> <p>Se o usuário logado não tiver permissão para aplicar o desconto e a oportunidade estiver em progresso, o campo de desconto será destacado com um alerta. O alerta informará ao usuário que ele não pode aplicar aquele desconto específico e indicará o percentual máximo permitido para o seu usuário.</p> <h4 class="meu-titulo">Restrições ao Usuário Responsável:</h4> <p>Se o usuário logado tiver permissão para aplicar o desconto, mas o usuário responsável não tiver, o campo de desconto será sinalizado com um alerta. Essa mensagem será exibida apenas quando o usuário responsável estiver hierarquicamente abaixo do usuário logado nos papéis.</p> <h4 class="meu-titulo">Salvando Itens com Desconto Maior:</h4> <p>Caso o usuário logado não tenha permissão para aplicar o desconto e a opção "Permitir salvar itens com desconto maior do que permitido" estiver ativada, o campo de desconto será sinalizado com um alerta. O alerta informará ao usuário que ele não pode aplicar aquele desconto e indicará o percentual máximo permitido.</p> <br> <div style="padding: 0 3em 0 3em;"> <img src="https://totvscrm.com/wp-content/uploads/2023/05/UniConverter-14_20230511190318.gif" class="destaque"> </div> <br> <div class="alert-box warning"><i class="fa fa-exclamation-triangle"> </i><span>Atenção: </span> Para definir o percentual máximo de desconto, é necessário que o produto tenha um preço de venda definido.</div> <br> <br> <br> <br> |
HTML |
---|
<style> #title-text { display: none !important;} @import "compass/css3"; @import "compass/css3"; * { box-sizing: border-box; font-family: lato, sans-serif; } * { font-family: lato, sans-serif; } blockquote { margin: 3%; border-left: 10px solid #363636; padding: 2%; color: #222; background: #fff; font-style: italic; line-height: 130%; } .top { width: 100%; background: #363636; } .img { image-resolution: 5px 5px 9px; image-rendering: auto; image-orientation:0deg } .header { max-width: 1200px; width: 98%; height: 7em; margin: 0px auto; overflow: hidden; h1 { text-align: center; font-weight: bold; color: #fff; padding: 20px; font-size: 22px; div { margin: 0; font-weight: normal; font-size: 1.8em; } } .author { font-size: 0.8em; font-weight: normal; border-top: 1px dashed #555; border-bottom: 1px dashed #555; max-width: 160px; text-align: center; margin: -1em auto 0 auto; padding: 0.; text-transform: uppercase; color: #ccc; } } .content { max-width: auto; float: right; margin: auto; padding: 0; } .date { float: left; width: 10%; color: #444; text-align: center; div { margin: 0; line-height: 50%; }} .day { float: left; margin-top: 0.1em; width: 100%; color: #FEAC0E; font-size: 200%; } } .date-line { display: none; } .article { width: 100%; padding: 0 7em 0 7em; border: 2px solid black; } h2 { font-weight: normal; font-size: 22px; font-weight: bold; color: #555555; margin: 0; } h3 { font-weight: normal; font-size: 16px; color: #888; font-style: italic; margin: 0 0 1em 0; } p { margin: 0; padding-top: 8px; color: #555; text-align: justify; font-size: 16px; line-height: 150%; } li{ font-size: 16px; color: #555555; } div{ font-style: 16px; color: #555; } .firstpara { text-indent: 0; font-size: 16px; } .pause { margin: 2em auto 2em auto; color: #555555; width: 60%; padding: 10px; text-align: center; font-size: 20px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } .firstcharacter { float: left; font-size: 16px; font-weight: bold; color: #555; line-height: 0.6em; padding-top: 0.12em; padding-right: 0.1em; padding-left: 0; } } .footer { max-width: 1200px; width: 98%; height: 50px; margin: 0px auto; overflow: hidden; border-top: 1px solid #ccc;} .copy { float: right; font-style: italic; color: #888; padding: 1% 1% 0 0; } } .prev a, .next a { position: fixed; top: 9.6em; padding: 1em; background: #f1f1f1; border: 1px solid #ccc; border-radius: 5px; } .prev a:hover, .next a:hover { background: #fff; } .prev a { left: 0.7em; } .next a { right: 0.7em; } @media only screen and (max-width: 450px) { .content { margin-top: 2em; } .social { display: none; } .date { display: none; } .date-line { display: inline; } .article { width: 100%; margin: 0 auto 2em auto; border-left: none; padding-bottom: 2em; border-bottom: 1px solid #ccc; p { font-size: 1.2em; } } .header { height: auto; position: fixed; top: 0; padding: 0; margin: 0; background: rgb(34, 16, 171) h1 { text-align: center; width: 100%; margin: 0; color: #f1f1f1; span { font-size: 80%; } } .author { display: none; } } .footer { text-align: center; padding: 3%; height: 40px; .copy { float: none; } } .prev a, .next a { position: relative; margin-bottom: 2em; text-align: center; top: 0; } .prev a { float: left; width: 40%; } .next a { float: right; width: 40%; }s .table { font-family: lato; background-color: #fff; } #wrapper { display: flex; flex-direction: column; gap: 2px; position: absolute; inset: 0; justify-content: center; align-items: center; }} .flexWrap { display: flex; gap: 2px; width: 110px; } #disclaimer { font-family: sans-serif; color: #333333; position: fixed; top: 5%; right: 5%; width: 5%; } .badge-primary { color: #8686FF; background-color: #F3F3FF; border-radius: 10px; padding: 6px 7px; font-size: 9px; font-weight: bold } .badge-secondary{ color: #ebeef0; background-color: #2abe74; border-radius: 10px; padding: 6px 7px; font-size: 9px; font-weight: bold } .badge-novo { color: #fff; background-color: #20d691; border-radius: 10px; padding: 6px 7px; font-size: 9px; font-weight: bold } .badge-danger{ color: #FFFFFF; background-color: #FF4057; border-radius: 10px; padding: 6px 7px; font-size: 9px; font-weight: bold } .badge-manutencao { color: #FFF; background-color: #efc307; border-radius: 10px; padding: 6px 7px; font-size: 9px; font-weight: bold; } .badge-melhoria { color: #FFF; background-color: #6f60f6; border-radius: 10px; padding: 6px 7px; font-size: 9px; font-weight: bold; } .badge-light { color: #8686FF; background-color: #F3F3FF border-radius: 10px; padding: 6px 7px; font-size: 9px; font-weight: bold; } .badge-dark { color: #ebeef0; background-color: #064118; border-radius: 10px; padding: 6px 7px; font-size: 9px; font-weight: bold } body { font-family: lato; } table { border-collapse: collapse; } th { text-align: left; background-color: #363636; color: #fff; } caption { font-size: 1.5rem; text-align: left; padding-bottom: 1rem; } td, th { padding: 0.5rem; border: 3px solid #fff; } tbody tr:nth-child(odd), tfoot tr:nth-child(even) { background-color: #fff; } tfoot tr td:first-child { border: none; background-color: white; } tfoot { border-top: 5px solid #fff; } .img2 { width:50%; height:auto; padding:2%; margin-bottom:4%; align-content: center; display: block; margin-left: auto; margin-right: auto } } } container{ width: 50%; } .borderbox{ border: 1px dashed #ebebeb; width:45%; margin: 50px auto; border-radius: 8px; border-width:2px; } .box{ position:relative; width:auto; height:auto; margin: 50px auto; padding: 20px; box-shadow: 0px 1px 8px 1px #ebebeb; border-radius: 8px; } .sucess-box{ border-left: solid 5px #3FC43C; background-color: #fff; } .info-box{ border-left: solid 5px #585EC2; background-color: #fff; } .warning-box{ border-left: solid 5px #EFA162; background-color: #fff; } .error-box{ border-left: solid 5px #F32D70; background-color: #fff; } .fa{ padding-right:10px; } .fa-check-circle{ color: #3FC43C; } .fas fa-info-circle { color: #585EC2; } .warning-box .fa-exclamation-triangle{ color: #EFA162; } .error-box .fa-exclamation-triangle{ color: #E63470; } p{ padding:0 3em 0 3em; } .time{ color:#9b9b9b; } .fa-close{ color:#BCC4CD; } .close{ position:absolute; top: 20px; right:20px; } .link1, .link2, .link3, .link4{ opacity:0; margin-left:20px; text-decoration:none; } .link1{ color:#3FC43C; } .link2{ color:#585EC2; } .link3{ color:#EFA162; } .link4{ color:#E63470; } .box:hover a{ opacity:1; } .topic-cluster-index { list-style: none; } .topic-cluster-index li { display: inline-block; list-style: none; min-height: 30px; width: 98%; background-color: #fff; border-radius: 2px; padding: 2em 3em 2em 3em; margin: 5px 0; border: 1px solid #e4e8ec; line-height: 16px !important; font-weight: bold; color: #363636; font-family: lato; font-weight: 600; } .topic-cluster-index li a { list-style: none; font-weight: 400; color: #363636 !important; list-style: none; font-size: 15px; margin: 0; padding: 0; font-family: lato; font-weight: bold; text-decoration: none !important; } .topic-cluster-index li:hover { list-style: none; border: 2px solid black; font-family: lato; font-weight: 700; cursor: pointer; } .topic-cluster-index li:hover a { list-style: none; color: #feac0e !important; font-family: lato; font-weight: 700; text-decoration: none !important; } .index-title { width: 100%; height: 30px; background: #feac0e; font-family: lato; font-size: 20px; border-radius: 2px; color: #fff; font-weight: 700; padding: 6px 10px 6px 25px; } </style> |
HTML |
---|
<style> body { margin: 0; // 1 font-family: lato; font-size: 16px; font-weight: $font-weight-base; line-height: $line-height-base; color: #555555 text-align: left; // 3 background-color: $body-bg; // 2 } .speech-bubble { max-width: 300px; font-family: lato; color: #555555; font-size: 16px; margin: 1rem; padding: 1rem; position: relative; border: 2px solid #FEAC0E; background: #fff; border-radius: 0.4em; } .speech-row { display: flex; justify-content: center; } img { overflow-clip-margin: content-box; overflow: clip; } .speech-img img { border-radius: 50%; } img { vertical-align: middle; border-style: none; } .speech-img { align-self: center; max-width: 100%; height: auto; } *, ::after, ::before { box-sizing: border-box; } img { overflow-clip-margin: content-box; overflow: clip; } .speech-bubble:before, .speech-bubble:after { content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 0; border: 20px solid transparent; border-right-color: #FEAC0E; border-left: 0; margin-top: -20px; margin-left: -20px; } .speech-bubble:after { border-right-color: #fff; margin-left: -18px; z-index: 1; } </style> |
HTML |
---|
<style> .main-presupuestoMensual { min-width: 320px; max-width: 100%; padding: 50px; margin: 0 auto; border: 2px solid black; } .containter-tab1 { display: none; padding: 20px 0 0; border-top: 1px solid #ddd; } .input-tabPresupuestoMensual { display: none; } .label-tabPresupuestoMensual { display: inline-block; margin: 0 0 -1px; padding: 15px 25px; font-weight: 600; text-align: center; color: #bbb; border: 1px solid transparent; } .label-tabPresupuestoMensual:before { font-family: fontawesome; font-weight: normal; margin-right: 10px; } /* .label-tabPresupuestoMensual[for*='1']:before { content: '\f1cb'; } .label-tabPresupuestoMensual[for*='2']:before { content: '\f17d'; } .label-tabPresupuestoMensual[for*='3']:before { content: '\f16b'; } .label-tabPresupuestoMensual[for*='4']:before { content: '\f1a9'; } */ .label-tabPresupuestoMensual:hover { color: #888; cursor: pointer; } .input-tabPresupuestoMensual:checked + .label-tabPresupuestoMensual { color: #555; border: 1px solid #ddd; border-top: 2px solid orange; border-bottom: 1px solid #fff; } #tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4 #tab5:checked ~ #content5{ display: flex; } @media screen and (max-width: 650px) { .label-tabPresupuestoMensual { font-size: 0; } .label-tabPresupuestoMensual:before { margin: 0; font-size: 18px; } } @media screen and (max-width: 400px) { .label-tabPresupuestoMensual { padding: 15px; } } /**/ body { background: #ececec; } .loader:before, .loader:after { position: absolute; top: 50%; left: 50%; border-radius: 50%; border-style: solid; border-top-color: #ecd078; border-right-color: #c02942; border-bottom-color: #542437; border-left-color: #53777a; content: ""; transform: translate(-50%, -50%); animation: rotate 1.5s infinite ease-in-out; } .loader:before { border-width: 10vh; } .loader:after { width: 30vh; height: 30vh; border-width: 2.5vh; animation-direction: reverse; } @keyframes rotate { 0% { transform: translate(-50%, -50%) rotate(0); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } </style> |
HTML |
---|
<style> .half { float: left; width: 100%; padding: 0 1em; } /* Acordeon styles */ .tab { position: relative; margin-bottom: 1px; width: 100%; color: #363636; overflow: hidden; } input { position: absolute; opacity: 0; z-index: -1; } label { position: relative; width: 100%; display: block; padding: 0 0 0 1em; margin: 0 auto; font-size: 16px; border-radius: 5px; border: 1px solid #feac0e; background: #afaf4a00; font-weight: bold; line-height: 3; cursor: pointer; } .blue label { background: #2980b9; } .tab-content { max-height: 0; overflow: hidden; background: #f7f7fc; border: 2px solid black; /* Adicionado a borda preta */ -webkit-transition: max-height 0.35s; -o-transition: max-height 0.35s; transition: max-height 0.35s; } .blue .tab-content { background: #3498db; } .tab-content p { margin: 1em; } /* :checked */ input:checked ~ .tab-content { max-height: 300em; } /* Icon */ label::after { position: absolute; right: 0; top: 0; display: block; width: 3em; height: 3em; line-height: 3; text-align: center; -webkit-transition: all 0.35s; -o-transition: all 0.35s; transition: all 0.35s; } input[type="checkbox"] + label::after { content: "+"; } input[type="radio"] + label::after { content: "\25BC"; } input[type="checkbox"]:checked + label::after { transform: rotate(315deg); } input[type="radio"]:checked + label::after { transform: rotateX(180deg); } /*----------------------------------------------------------*/ /* Estilos generales */ *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: "Open Sans", sans-serif; } h2 { font-weight: normal; } .wrapper { margin: auto; width: 90%; max-width: 960px; } /* Otros estilos */ .card { padding: 1em; color: #333; background: #fff; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); } .card h2:first-child, .card p:first-child { margin-top: 0; } *, *::before, *::after { box-sizing: border-box; } .container { margin: 2rem auto; padding: 0 1rem; max-width: 50rem; } details { padding: 1rem 1rem; margin: 6px; position: relative; background-color: #ffffff; transition: all 0.3s; } details[open] { min-height: 20px; } summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; } summary:focus { outline: none; } summary::-webkit-details-marker { display: none; } .control-wrapper { border-radius: 50%; line-height: 0; } summary .control-wrapper { transition: background-color 0.3s, box-shadow 0.3s; } summary:focus .control-wrapper { transition-duration: 0s; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.09), 0 0 0 4px #feac0e; } .control-icon-close { display: none; } details[open] .control-icon-close { display: initial; } details[open] .control-icon-expand { display: none; } </style> |
HTML |
---|
<style> #title-text { display: none !important;} body { font-size: 100%; font-family: "lato", serif; color: #363636; background-color: #ffffff; } a { color: #acb7c0; text-decoration: none; font-family: "lato"; font-size: 16px; } img { max-width: 100%; } p { text-align:justify; font-family: "Lato", sans-serif; } h2 h5 { font-family: "lato", sans-serif; font-size: 90px ; font-weight: bold; } /* -------------------------------- Modules - reusable parts of our design -------------------------------- */ .cd-container { /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */ width: 100%; max-width: 1170px; margin: 0 auto; } .cd-container::after { /* clearfix */ content: ""; display: table; clear: both; } /* -------------------------------- xnugget info -------------------------------- */ .cd-nugget-info { text-align: center; position: absolute; width: 100%; height: 50px; line-height: 50px; top: 0; left: 0; } .cd-nugget-info a { position: relative; font-size: 14px; color: #718ca1; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; } .no-touch .cd-nugget-info a:hover { opacity: 0.8; } .cd-nugget-info span { vertical-align: middle; display: inline-block; } .cd-nugget-info span svg { display: block; } .cd-nugget-info .cd-nugget-info-arrow { fill: #718ca1; } /* -------------------------------- Main components -------------------------------- */ #cd-timeline { position: relative; padding: 2em 0; margin-top: 2em; margin-bottom: 2em; } #cd-timeline::before { /* this is the vertical line */ content: ""; position: absolute; top: 0; left: 18px; height: 100%; width: 4px; background: #d7e4ed; } @media only screen and (min-width: 1170px) { #cd-timeline { margin-top: 3em; margin-bottom: 3em; } #cd-timeline::before { left: 50%; margin-left: -2px; } } .cd-timeline-block { position: relative; margin: 2em 0; } .cd-timeline-block:after { content: ""; display: table; clear: both; } .cd-timeline-block:first-child { margin-top: 0; } .cd-timeline-block:last-child { margin-bottom: 0; } @media only screen and (min-width: 1170px) { .cd-timeline-block { margin: 4em 0; } .cd-timeline-block:first-child { margin-top: 0; } .cd-timeline-block:last-child { margin-bottom: 0; } } .cd-timeline-img { position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05); } .cd-timeline-img img { display: block; width: 32px; height: 32px; position: relative; left: 50%; top: 50%; margin-left: -16px; margin-top: -16px; } .cd-timeline-img.cd-novo { background: #363636; } .cd-timeline-img.cd-melhoria { background: #363636; } .cd-timeline-img.cd-manutencao { background: #363636; } @media only screen and (min-width: 1170px) { .cd-timeline-img { width: 60px; height: 60px; left: 50%; margin-left: -30px; } .cssanimations .cd-timeline-img.is-hidden { visibility: hidden; } .cssanimations .cd-timeline-img.bounce-in { visibility: visible; -webkit-animation: cd-bounce-1 0.6s; -moz-animation: cd-bounce-1 0.6s; animation: cd-bounce-1 0.6s; } } @-webkit-keyframes cd-bounce-1 { 0% { opacity: 0; -webkit-transform: scale(0.5); } 60% { opacity: 1; -webkit-transform: scale(1.2); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes cd-bounce-1 { 0% { opacity: 0; -moz-transform: scale(0.5); } 60% { opacity: 1; -moz-transform: scale(1.2); } 100% { -moz-transform: scale(1); } } @keyframes cd-bounce-1 { 0% { opacity: 0; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); } 60% { opacity: 1; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } .cd-timeline-content { position: relative; margin-left: 50px; background: #f5f5fa; border-radius: 0.25em; max-width: 400px; padding: 1em; box-shadow: 0 3px 0 #363636; } .cd-timeline-content:after { content: ""; display: table; clear: both; } .cd-timeline-content h2 { color: #363636; font-weight: bold; } .cd-timeline-content p, .cd-timeline-content .cd-date { font-size: 13px; font-size: 0.8125rem; } .cd-timeline-content .cd-date { display: inline-block; } .cd-timeline-content p { margin: 1em 0; line-height: 1.6; } .cd-timeline-content .cd-read-more { float: right; padding: 0.8em 1em; background: #5596e6; color: white; border-radius: 0.25em; text-decoration: none; } .no-touch .cd-timeline-content .cd-read-more:hover { background-color: #ffffff; } .cd-timeline-content .cd-date { float: left; padding: 0.8em 0; opacity: 0.7; } .cd-timeline-content::before { content: ""; position: absolute; top: 16px; right: 100%; height: 0; width: 0; border: 7px solid transparent; border-right: 7px solid #bfcdd6; } @media only screen and (min-width: 768px) { .cd-timeline-content h2 { font-size: 20px; font-size: 1.25rem; font-weight: bold ; } .cd-timeline-content p { font-size: 16px; font-size: 1rem; } .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date { font-size: 14px; font-size: 0.875rem; } } @media only screen and (min-width: 1170px) { .cd-timeline-content { margin-left: 0; padding: 1.6em; width: 45%; } .cd-timeline-content::before { top: 24px; left: 100%; border-color: transparent; border-left-color: #d7e4ed; } .cd-timeline-content .cd-read-more { float: left; } .cd-timeline-content .cd-date { position: absolute; width: 100%; left: 122%; top: 6px; font-size: 16px; font-size: 1rem; } .cd-timeline-block:nth-child(even) .cd-timeline-content { float: right; } .cd-timeline-block:nth-child(even) .cd-timeline-content::before { top: 24px; left: auto; right: 100%; border-color: transparent; border-right-color: #d7e4ed; } .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more { float: right; } .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date { left: auto; right: 122%; text-align: right; } .button-2 { padding: 8px 9px; font-size: 12px; color: #fff; background-color: #FDAB0E; border: none; border-radius: 4px; cursor: pointer; } .button-2:hover { background-color: #0897E9; } .button-2:active { background-color: #FDAB0E; } #wrapper { display: flex; flex-direction: column; gap: 20px; position: absolute; inset: 0; justify-content: center; align-items: center; margin: 0; } .flexWrap { display: flex; gap: 2px; width: 50px; } #disclaimer { font-family: Tahoma; color: #333333; position: fixed; top: 5%; right: 5%; width: 5%; } .button-2 { padding: 8px 9px; font-size: 12px; color: #fff; background-color: #363636; border: none; border-radius: 6px; cursor: pointer; } .button-2:hover { background-color: #feac0e; } .button-2:active { background-color: #feac0e; } #wrapper { display: flex; flex-direction: column; gap: 2px; position: absolute; inset: 0; justify-content: center; align-items: center; } .flexWrap { display: flex; gap: 2px; width: 110px; } #disclaimer { font-family: sans-serif; color: #333333; position: fixed; top: 5%; right: 5%; width: 5%; } .badge-primary { color: #8686FF; background-color: #F3F3FF; border-radius: 10px; padding: 6px 7px; font-size: 9px; font-weight: bold } .badge-secondary{ color: #ebeef0; background-color: #2abe74; border-radius: 10px; padding: 6px 7px; font-size: 9px; font-weight: bold } .badge-novo { color: #fff; background-color: #20d691; border-radius: 10px; padding: 6px 7px; font-size: 9px; font-weight: bold } .badge-danger{ color: #FFFFFF; background-color: #FF4057 border-radius: 10px; padding: 6px 7px; font-size: 9px; font-weight: bold } .badge-manutencao { color: #FFF; background-color: #FEAC0E; border-radius: 10px; padding: 6px 7px; font-size: 9px; font-weight: bold; } .badge-melhoria { color: #FFF; background-color: #6f60f6; border-radius: 10px; padding: 6px 7px; font-size: 9px; font-weight: bold; } .badge-light { color: #8686FF; background-color: #F3F3FF border-radius: 10px; padding: 6px 7px; font-size: 9px; font-weight: bold; } .badge-dark { color: #ebeef0; background-color: #363636; border-radius: 10px; padding: 6px 7px; font-size: 9px; font-weight: bold } </style> |
HTML |
---|
<style> .alert-box { color:#555; border-radius:5px; font-family:Tahoma,Geneva,Arial,sans-serif;font-size:11px; padding:10px 25px 10px 25px; margin: 5px 25px 5px 25px; max-width: 100%; } .alert-box span { font-weight:bold; text-transform:uppercase; } .error { background:#ffecec url('images/error.png') no-repeat 10px 50%; border:1px solid #f5aca6; } .success { background:#e9ffd9 url('images/success.png') no-repeat 10px 50%; border:1px solid #a6ca8a; } .warning { background:#fff8c4 url('images/warning.png') no-repeat 10px 50%; border:1px solid #f2c779; } .notice { background:#e3f7fc url('images/notice.png') no-repeat 10px 50%; border:1px solid #8ed9f6; } </style> |