| HTML |
|---|
<img src="https://totvscrm.com/wp-content/uploads/2023/04/capaartigo3.png" 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/04/[email protected]" alt="some text" width=40>     <strong>TABELA<strong>CONFIGURAÇÃO DE PREÇOSDESCONTO DISPONÍVELMÁXIMO NO MÓDULO DE OPORTUNIDADES<POR PIPELINE</strong> </h2> <br> <br>
<span class="badge badge-melhorianovo"><strong>MELHORIA<><strong>NOVO</strong></span> <span class="badge badge-dark"><strong>OPORTUNIDADES</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">Oportunidades</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);">NR041120221430</span></td>
</tr>
<div class="content-wrapper">
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div> <div class="coluna2">
<div class="conteudo"> <br>
<p> A implementação desse recurso permite que os gestores tenham maior controle sobre os descontos concedidos em suas equipes, garantindo que sejam aplicados de forma estratégica e alinhados com as políticas da empresa. Isso levará a uma gestão mais eficiente e precisa dos descontos, evitando concessões excessivas e melhorando os resultados de vendas. </p>
</div>
</div>
<br>
<h2> <img src="https://totvscrm.com/wp-content/uploads/2023/04/[email protected]" alt="some text" width=40>     <strong>O QUE O RECURSO FAZ?</strong> </h2> <br> <br>
<p> O recurso de parâmetro de desconto máximo por pipeline permite definir com precisão o limite máximo de desconto que pode ser aplicado em cada pipeline de oportunidades. Isso significa que você poderá estabelecer um percentual máximo de desconto permitido em cada situação específica.
Com esse recurso, você terá controle sobre quem pode aplicar descontos em cada pipeline, seja por meio de permissões atribuídas a usuários, papéis ou grupos de usuários. Isso garante que apenas pessoas autorizadas possam conceder descontos e que esses descontos estejam dentro dos limites estabelecidos.</p>
<h2> <img src="https://totvscrm.com/wp-content/uploads/2023/04/[email protected]" alt="some text" width=40>     <strong>O QUE MUDOU?</strong> </h2> <br>
<p> <p> <h3 class="meu-titulo"> MENUDIVISÃO PRODUTOEM E SERVIÇOABAS AGORA É CATÁLOGO </h3> <br> </p>
<p> Agora,No oconstrutor menude Produtopipelines, efizemos Serviçomelhorias épara chamadotornar dea Catálogo!sua Essa atualização torna ainda mais fácil a buscaexperiência mais intuitiva e oorganizada. gerenciamentoAgora, dasvocê informaçõesencontrará dostrês seusabas produtosdistintas epara serviços,facilitar aléma denavegação tornare oa acessoseparação alógica essasdas informações muito mais intuitivo.. </p> <br> <br>
E<p> as melhorias não param por aí! Os cadastros de condições e formas de pagamento, bem como a tabela de preço, que antes ficavam escondidos no menu de configurações de vendas, agora estão disponíveis no menu interno de configuração do Catálogo. Isso significa que todas as informações relacionadas estão disponíveis em um só lugar. </p> <br>
<div style="padding: 0 3em 0 3em;">
<img 1) Na aba chamada <strong>"Informações"</strong>, estarão concentradas todas as informações gerais do seu pipeline</p> <br>
<ul style="padding-left: 60px;">
<li>Ativo</li>
<li>Padrão</li>
<li>Descrição</li>
<li>Informações do card</li>
<li>Informações de etapa</li>
</ul> <br>
<div style="padding: 0 3em 0 3em;">
<img src="https://totvscrm.com/wp-content/uploads/2023/0405/tabelatelaprincipal.gif" class="destaque"> </div>
<br>
<p> 2) <p>Na <h3aba class="meu-titulo"> TABELA DE PREÇO DISPONÍVEL NO FORMULÁRIO DE OPORTUNIDADES </h3> <br> </p>
<p> As informações da tabela de preço, condições e formas de pagamento e moeda estão disponíveis na nova seção de informações de venda no formulário de oportunidades. Além disso, a tabela de preço também está disponível na edição de itens das oportunidades.
<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, semesmo vocêcom nãoesse quiserparâmetro utilizarativado, aainda tabelanão deserá preços,possível aindaganhar é possível criar oportunidades sem a necessidade de vinculá-la. Nesse caso, o preço sugerido de venda será calculado com base nas informações preenchidas no campo Preço base do cadastro de produto ou serviço. </p> <div a oportunidade.</p> <br>
<div style="padding: 0 3em 0 3em;">
<img src="https://totvscrm.com/wp-content/uploads/2023/04/tabela205/UniConverter-14_20230511155709.gif" class="destaque"> </div>
<br> <br> <br> <br> <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 |
| 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; background: rgb(247, 247, 252); } 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: 50px7em; margin: 0px auto; overflow: hidden; border-top: 1px solid #ccc;} .copyh1 { floattext-align: rightcenter; font-styleweight: italicbold; color: #888#fff; padding: 20px; 1% 1% 0 0font-size: 22px; div } } .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{ 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; background: rgb(247, 247, 252); } 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; } .prev apause { float: leftmargin: 2em auto 2em auto; widthcolor: 40%#555555; } .next a {width: 60%; floatpadding: right10px; widthtext-align: 40%center; }s .table { font-familysize: lato20px; background-color: #fff; } #wrapper { display border-top: flex; 1px flex-direction: columnsolid #ccc; gap: 2px; position border-bottom: absolute; 1px solid inset: 0#ccc; justify-content: center;} align-items: center; }} .flexWrap.firstcharacter { displayfloat: flexleft; gap: 2px; width font-size: 110px16px; } #disclaimer { font-familyweight: sans-serifbold; color: #333333#555; position line-height: fixed0.6em; padding-top: 5%0.12em; padding-right: 5%0.1em; width padding-left: 5%0; } } .badge-primaryfooter { colormax-width: #8686FF1200px; background-colorwidth: #F3F3FF98%; border-radiusheight: 10px50px; paddingmargin: 6px0px 7pxauto; font-sizeoverflow: 9pxhidden; font border-weighttop: bold1px solid #ccc;} .badge-secondary .copy { color float: #ebeef0right; backgroundfont-colorstyle: #2abe74italic; border-radiuscolor: 10px#888; padding: 6px1% 7px; font-size: 9px; font-weight: bold } .badge-novo1% 0 0; } } .prev a, .next a { colorposition: #ffffixed; background-colortop: #20d6919.6em; border-radiuspadding: 10px1em; paddingbackground: 6px 7px#f1f1f1; font-size: 9px; font-weight border: bold } .badge-danger{ color: #FFFFFF1px solid #ccc; backgroundborder-colorradius: #FF40575px; } border-radius: 10px; padding: 6px 7px; font-size: 9px; font-weight: bold } .badge-manutencao.prev a:hover, .next a:hover { background: #fff; } .prev a { colorleft: #FFF0.7em; } .next background-color: #efc307;a { border-radiusright: 10px0.7em; } @media only screen and padding(max-width: 6px450px) 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 } #f7f7fc; } } 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% .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: #fff#efc307; border-radius: 2px10px; padding: 2em 3em 2em 3em6px 7px; margin font-size: 5px 09px; font-weight: border: 1px solid #e4e8ecbold; } .badge-melhoria { color: #FFF; linebackground-heightcolor: 16px !important#6f60f6; font-weight border-radius: bold10px; colorpadding: 6px #3636367px; font-familysize: lato9px; font-weight: 600bold; } .topic-cluster-index li a { list-style: none; font-weight: 400badge-light { color: #8686FF; background-color: #F3F3FF border-radius: 10px; colorpadding: #3636366px !important7px; listfont-stylesize: none9px; font-sizeweight: 15pxbold; } margin.badge-dark { color: 0#ebeef0; paddingbackground-color: 0#064118; font border-familyradius: lato10px; font-weight: bold; text-decoration padding: none6px !important7px; } .topic-cluster-index li:hover { list-style: none; background-color: #F7F7FC; font-size: 9px; font-weight: bold } body { font-family: lato; } font-weight: 700;table { cursorborder-collapse: pointercollapse; } .topic-cluster-index li:hover a { list-style: noneth { text-align: left; background-color: #feac0e !important#363636; font-familycolor: lato#fff; } caption { font-weightsize: 7001.5rem; text-decorationalign: none !importantleft; padding-bottom: 1rem; } .index-titletd, th { widthpadding: 100%0.5rem; heightborder: 3px solid 30px#fff; } tbody background: #feac0e; font-family: lato; font-size: 20px;tr:nth-child(odd), tfoot tr:nth-child(even) { background-color: #fff; } tfoot tr td:first-child { border-radius: 2pxnone; background-color: #fffwhite; 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} 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 } #f7f7fc; } } 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: 0.4em8px; } .speechsucess-row box{ display: flexborder-left: solid 5px #3FC43C; justifybackground-contentcolor: center#fff; } img .info-box{ overflow-clip-margin: content-box; overflow: clip; } .speech-img img { border-left: solid 5px #585EC2; background-color: #fff; } .warning-box{ border-radiusleft: solid 5px 50%#EFA162; } img { vertical-align: middle; border-style: none background-color: #fff; } .speecherror-img box{ alignborder-selfleft: solid 5px center#F32D70; max-width: 100%; heightbackground-color: auto#fff; } *, ::after, ::before { box-sizing: border-box.fa{ padding-right:10px; } img .fa-check-circle{ overflow-clip-margin: content-box;color: #3FC43C; } .fas fa-info-circle { overflowcolor: clip#585EC2; } .speech-bubble:before, .speech-bubble:after warning-box .fa-exclamation-triangle{ contentcolor: ""#EFA162; } .error-box position.fa-exclamation-triangle{ color: absolute#E63470; } p{ leftpadding:0 3em 0 3em; } .time{ topcolor: 50%; width: 0; height: 0#9b9b9b; } .fa-close{ color:#BCC4CD; } .close{ position:absolute; bordertop: 20px solid transparent; border-right-color: #FEAC0E; border-left: right:20px; } .link1, .link2, .link3, .link4{ opacity:0; margin-topleft: -20px; margintext-leftdecoration: -20pxnone; } .speech-bubble:after link1{ border-right-color: #fff#3FC43C; } .link2{ margin-left: -18px;color:#585EC2; } .link3{ z-index: 1color:#EFA162; } </style> |
| HTML |
<style> .main-presupuestoMensual link4{ min-width: 320px; max-width: 100%;color:#E63470; } .box:hover a{ paddingopacity: 50px1; margin: 0 auto; background: #F7F7FC; }} .containtertopic-cluster-tab1index { displaylist-style: none; padding: 20px 0 0; border-top: 1px solid #ddd; } .inputtopic-cluster-tabPresupuestoMensual { display: none; } .label-tabPresupuestoMensual { index li { display: inline-block; marginlist-style: 0 0 -1pxnone; paddingmin-height: 15px 25px30px; font-weightwidth: 60098%; textbackground-aligncolor: center#fff; colorborder-radius: #bbb2px; borderpadding: 1px2em solid3em 2em transparent3em; } .label-tabPresupuestoMensual:before { margin: 5px 0; border: 1px solid #e4e8ec; fontline-familyheight: 16px fontawesome!important; font-weight: normalbold; margin-rightcolor: 10px#363636; } /* .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;
-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>
|
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;
background-color: #F7F7FC;
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;
background: #F7F7FC;
}
.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;
-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; |
| 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; } /* -------------------------------- Modulesxnugget - reusable parts of our designinfo -------------------------------- */ .cd-nugget-containerinfo { /* 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 autotext-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-container::after { /* clearfix */-nugget-info span svg { contentdisplay: ""block; } .cd-nugget-info display: table;.cd-nugget-info-arrow { clearfill: both#718ca1; } /* -------------------------------- xnuggetMain infocomponents -------------------------------- */ .cd-nugget-info {#cd-timeline { position: relative; text-alignpadding: center2em 0; positionmargin-top: absolute2em; widthmargin-bottom: 100%; height: 50px2em; } #cd-timeline::before { /* this is the vertical line */ content: ""; line-heightposition: 50pxabsolute; top: 0; left: 0; } .cd-nugget-info a {18px; positionheight: relative100%; font-sizewidth: 14px4px; colorbackground: #718ca1#d7e4ed; } @media only screen and (min-webkit-transitionwidth: all 0.2s;1170px) { -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-timeline { margin-top: 3em; margin-bottom: 3em; } #cd-timeline::before { left: 50%; margin-left: -2px; } } .cd-timeline-block { position: relative; margin: 2em 0; } .cd-nuggettimeline-info .cd-nugget-info-arrow block:after { fillcontent: #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 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; leftwidth: 18px40px; height: 100%40px; widthborder-radius: 4px50%; background: #d7e4ed; } @media only screen and (min-width: 1170px) { #cd-timelinebox-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 { margin-topdisplay: 3emblock; margin-bottomwidth: 3em32px; }height: 32px; #cd-timeline:position:before {relative; left: 50%; margin-lefttop: -2px50%; } } .cd-timeline-block { position: relativemargin-left: -16px; margin-top: 2em 0-16px; } .cd-timeline-block:afterimg.cd-novo { contentbackground: ""; display: table; clear: both; #363636; } .cd-timeline-block:first-childimg.cd-melhoria { margin-topbackground: 0#363636; } .cd-timeline-block:last-childimg.cd-manutencao { margin-bottombackground: 0#363636; } @media only screen and (min-width: 1170px) { .cd-timeline-blockimg { margin: 4em 0width: 60px; height: 60px; } .cd-timeline-block:first-child {left: 50%; margin-topleft: 0-30px; } .cssanimations .cd-timeline-block:last-childimg.is-hidden { margin-bottomvisibility: 0hidden; } } .cssanimations .cd-timeline-img.bounce-in { positionvisibility: absolutevisible; top: -webkit-animation: cd-bounce-1 0.6s; left: 0; width: 40px -moz-animation: cd-bounce-1 0.6s; height: 40px; animation: border-radius: 50%cd-bounce-1 0.6s; box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08),} } @-webkit-keyframes cd-bounce-1 { 0% { opacity: 0; 0 3px 0 4px rgba(0, 0, 0, 0.05-webkit-transform: scale(0.5); } .cd-timeline-img img 60% { displayopacity: block1; width-webkit-transform: 32pxscale(1.2); height: 32px; position: relative;} left:100% 50%;{ top: 50%; margin-webkit-lefttransform: -16pxscale(1); margin-top: -16px;} } .cd@-timelinemoz-img.keyframes cd-novo-bounce-1 { 0% { backgroundopacity: #3636360; } .cd-timeline-img.cd-melhoria { background: #363636; } .cd-timeline-img.cd-manutencao { background: #363636; } @media only screen and (min-width: 1170px) { .cd-timeline-img -moz-transform: scale(0.5); } 60% { opacity: 1; -moz-transform: scale(1.2); } 100% { -moz-transform: scale(1); } } @keyframes cd-bounce-1 { 0% { widthopacity: 60px0; height-webkit-transform: 60pxscale(0.5); left-moz-transform: 50%scale(0.5); margin-ms-lefttransform: -30pxscale(0.5); } .cssanimations .cd-timeline-img.is-hidden {o-transform: scale(0.5); visibilitytransform: hiddenscale(0.5); } .cssanimations .cd-timeline-img.bounce-in60% { visibilityopacity: visible1; -webkit-animationtransform: cd-bounce-1 0.6sscale(1.2); -moz-animationtransform: cd-bounce-1 0.6sscale(1.2); animation-ms-transform: cd-bounce-1 0.6sscale(1.2); } } @-webkit-keyframes cd-bounce-1 { 0% { opacity: 0; -o-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(0.5); } 60% {1); opacity-moz-transform: scale(1); -webkitms-transform: scale(1.2); } 100% {-o-transform: scale(1); -webkit-transform: scale(1); } } @-moz-keyframes .cd-bouncetimeline-1content { 0%position: {relative; margin-left: 50px; opacitybackground: 0#f5f5fa; -moz-transformborder-radius: scale(0.5)25em; } max-width: 400px; 60%padding: {1em; box-shadow: 0 3px opacity:0 1#363636; -moz-transform: scale(1.2); } 100% { -moz-transform: scale(1); } } @keyframes cd-bounce-1 { 0% } .cd-timeline-content:after { content: ""; display: table; clear: both; } .cd-timeline-content h2 { opacitycolor: 0#363636; -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); }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: relativeabsolute; margin-lefttop: 50px16px; backgroundright: #f5f5fa100%; border-radiusheight: 0.25em; max-width: 400px0; paddingborder: 7px solid 1emtransparent; boxborder-shadowright: 07px 3pxsolid 0 #363636#bfcdd6; } @media only screen and (min-width: 768px) { .cd-timeline-content:after h2 { content font-size: ""20px; displayfont-size: table1.25rem; clearfont-weight: bold both; } .cd-timeline-content h2p { colorfont-size: #36363616px; font-weightsize: bold1rem; } .cd-timeline-content p.cd-read-more, .cd-timeline-content .cd-date { font-size: 13px14px; font-size: 0.8125rem875rem; } } .cd-timeline-content .cd-date@media only screen and (min-width: 1170px) { display: inline-block; } .cd-timeline-content p { margin-left: 1em 0; line-heightpadding: 1.66em; width: 45%; } .cd-timeline-content .cd-read-more ::before { float top: right24px; padding: 0.8em 1em; backgroundleft: #5596e6100%; color: white; border-radiuscolor: 0.25emtransparent; text-decoration border-left-color: none#d7e4ed; } .no-touch .cd-timeline-content .cd-read-more:hover { background-colorfloat: #ffffffleft; } .cd-timeline-content .cd-date { floatposition: leftabsolute; paddingwidth: 0.8em 0100%; opacityleft: 0.7122%; } .cd-timeline-content::before { contenttop: ""6px; position: absolute; topfont-size: 16px; right: 100%; height font-size: 01rem; width: 0;} border: 7px solid transparent; border-right: 7px solid #bfcdd6; } @media only screen and (min-width: 768px) { .cd-timeline-block:nth-child(even) .cd-timeline-content { float: right; } .cd-timeline-block:nth-child(even) .cd-timeline-content h2 {::before { top: 24px; left: auto; font-sizeright: 20px100%; fontborder-sizecolor: 1.25remtransparent; fontborder-right-weightcolor: bold #d7e4ed; } .cd-timeline-content pblock:nth-child(even) .cd-timeline-content .cd-read-more { font-sizefloat: 16pxright; font-size: 1rem; } .cd-timeline-content .cd-timeline-read-more, block:nth-child(even) .cd-timeline-content .cd-date { font-sizeleft: 14pxauto; font-sizeright: 0.875rem122%; } } @media only screen and (min-width: 1170px) { text-align: right; } .cdbutton-timeline-content2 { margin-leftpadding: 08px 9px; paddingfont-size: 1.6em12px; widthcolor: 45%#fff; } .cd-timeline-content::before {background-color: #FDAB0E; border: none; topborder-radius: 24px4px; leftcursor: 100%pointer; } border.button-color2:hover transparent;{ border-leftbackground-color: #d7e4ed#0897E9; } .cd-timeline-content .cd-read-morebutton-2:active { floatbackground-color: left#FDAB0E; } .cd-timeline-content .cd-date { position: absolute;#wrapper { widthdisplay: 100%flex; leftflex-direction: 122%column; topgap: 6px20px; font-sizeposition: 16pxabsolute; font-sizeinset: 1rem0; } .cd-timeline-block:nth-child(even) .cd-timeline-content { float: rightjustify-content: center; } .cd-timeline-block:nth-child(even) .cd-timeline-content::before {align-items: center; topmargin: 24px0; } left: auto;.flexWrap { rightdisplay: 100%flex; border-colorgap: transparent2px; border-right-colorwidth: #d7e4ed50px; } #disclaimer { .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more { font-family: Tahoma; floatcolor: right#333333; } position: fixed; .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date { top: 5%; leftright: auto5%; rightwidth: 122%5%; } text-align: right; } .button-2 { padding: 8px 9px; font-size: 12px; color: #fff; background-color: #FDAB0E#363636; border: none; border-radius: 4px6px; cursor: pointer; } .button-2:hover { background-color: #0897E9#feac0e; } .button-2:active { background-color: #FDAB0E#feac0e; } #wrapper { display: flex; flex-direction: column; gap: 20px2px; 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; 110px; } #disclaimer { font-sizefamily: 12pxsans-serif; color: #fff#333333; background-colorposition: #363636fixed; bordertop: none5%; border-radiusright: 6px5%; cursorwidth: pointer5%; } .badge-primary { .button-2color:hover {#8686FF; background-color: #feac0e#F3F3FF; } .buttonborder-2radius:active {10px; background-colorpadding: 6px #feac0e7px; }font-size: 9px; font-weight: bold } #wrapper .badge-secondary{ displaycolor: flex#ebeef0; flexbackground-directioncolor: column#2abe74; gap: 2px; positionborder-radius: absolute10px; insetpadding: 6px 07px; justifyfont-contentsize: center9px; align-items: center; font-weight: bold } .flexWrapbadge-novo { displaycolor: flex#fff; gapbackground-color: 2px#20d691; width border-radius: 110px10px; } padding: #disclaimer6px {7px; font-size: 9px; font-familyweight: sans-serif; bold } .badge-danger{ color: #333333#FFFFFF; positionbackground-color: fixed;#FF4057 top border-radius: 5%10px; rightpadding: 5%6px 7px; width: 5%; } font-size: 9px; font-weight: bold } .badge-primarymanutencao { color: #8686FF#FFF; background-color: #F3F3FF#FEAC0E; border-radius: 10px; padding: 6px 7px; font-size: 9px; font-weight: bold ; } .badge-secondarymelhoria { color: #ebeef0#FFF; background-color: #2abe74#6f60f6; border-radius: 10px; padding: 6px 7px; font-size: 9px; font-weight: bold ; } .badge-novolight { color: #fff#8686FF; background-color: #20d691;#F3F3FF border-radius: 10px; padding: 6px 7px; font-size: 9px; font-weight: bold; } .badge-dangerdark { color: #FFFFFF#ebeef0; background-color: #FF4057#363636; borderborder-radius: 10px; padding: 6px 7px; font-size: 9px; font-weight: bold } .badge-manutencao </style> |
| HTML |
|---|
<style> .alert-box { color: #FFF#555; backgroundborder-colorradius: #FEAC0E5px; border-radius: 10pxfont-family:Tahoma,Geneva,Arial,sans-serif;font-size:11px; padding:10px 25px 6px10px 7px25px; margin: 5px font-size: 9px; font-weight: bold; } .badge-melhoria25px 5px 25px; max-width: 100%; } .alert-box span { color: #FFFfont-weight:bold; backgroundtext-colortransform: #6f60f6uppercase; } .error { border-radiusbackground: 10px; padding: 6px 7px; font-size: 9px; font-weight: bold; } .badge-light { color: #8686FF;#ffecec url('images/error.png') no-repeat 10px 50%; border:1px solid #f5aca6; } .success { background-color: #F3F3FF border-radius: 10px#e9ffd9 url('images/success.png') no-repeat 10px 50%; paddingborder:1px 6px 7px; font-size: 9px; font-weight: bold; } .badge-darksolid #a6ca8a; } .warning { colorbackground: #ebeef0; background-color: #363636; #fff8c4 url('images/warning.png') no-repeat 10px 50%; border-radius:1px solid 10px#f2c779; } .notice { padding: 6px 7px; font-size: 9px; font-weight: bold } </style> background:#e3f7fc url('images/notice.png') no-repeat 10px 50%; border:1px solid #8ed9f6; } </style> |