Histórico da Página
| 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>WORKFLOW: ATUALIZAÇÃOACTUALIZACIÓN DE RESPONSÁVELRESPONSABLE EMEN ATIVIDADESACTIVIDADES EY OPORTUNIDADES </strong> </h2> <br> <br>
<span class="badge badge-melhoria"><strong>MELHORIA<><strong>MEJORA</strong></span> <span class="badge badge-dark"><strong>WORKFLOW</strong></span> <br>
<br>
<style>
/* Estilo para a tabela */
table {
width: 100%;
border-collapse: collapse;
}
/* Estilo para as células da tabela */
</style>
<style>
video {
width: 100%;
height: 100%;
object-fit: cover;
}
</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>Producto:</th>
<td style="text-align: left;" colspan="1" class="confluenceTd"> TCRM - GestãoGestión de Clientes<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>Línea de Produtoproducto:</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">Workflow</td>
</tr>
<tr>
<th style="text-align: left;" colspan="1" class="confluenceTh">Aplicação<>Aplicación</th>
<td style="text-align: left;" colspan="1" class="confluenceTd">Web/app móvel<móvil</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);">ME041120221143</span></td>
</tr>
<div class="content-wrapper">
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div> <div class="coluna2">
<div class="conteudo"> <br>
<p> AEl mudançacambio de responsávelresponsable de carteiracartera (lead/cliente) apresentapresenta umun desafiodesafío significativo para aslos equipesequipos comerciaiscomerciales. QuandoCuando ocorreocurre essaeste trocacambio, eraes necessárionecesario atualizaractualizar manualmente todas aslas atividadesactividades ey oportunidades relacionadas a cada contacuenta, olo quecual consomeconsume tempotiempo ey aumenta oel riscoriesgo de erroserrores. Pensando en nissoesto, agoraahora ées possívelposible automatizar essaesta modificación alteraçãopor atravésmedio dodel workflow, utilizando gatilhosdisparadores ey açõesacciones específicas. </p>
</div>
</div>
<br>
<h2> <img src="https://totvscrm.com/wp-content/uploads/2023/06/[email protected]" alt="some text" width=45>     <strong>O<strong>¿QUÉ QUEHACE OESTE RECURSO FAZ?</strong> </h2> <br> <br>
<p>Com<p>Con oslos novosnuevos gatilhosdisparadores ey açõesacciones dodel workflow, ées possívelposible automatizar la aactualización atualizaçãodel doresponsable responsávelde daslas atividadesactividades ey oportunidades vinculadas a umauna contacuenta (lead ouo cliente) cuando quandoocurre ocorreun umacambio mudançaen noel responsávelresponsable. Além dissoAdemás, oel recurso oferece flexibilidade na configuração das preferênciasofrece flexibilidad en la configuración de las preferencias de atualizaçãoactualización. ÉEs possívelposible definir sesi desejadesea trocarcambiar oel responsávelresponsable emen atividadesactividades ey oportunidades abertasabiertas, fechadasfinalizadas ouo mesmoincluso aquelasaquellas que estavamestaban atribuídasatribuidas a umun terceirotercer usuáriousuario. IssoEsto permite adaptar ala automatizaçãoautomatización de acordoacuerdo comcon aslas necessidadesnecesidades específicas de cada equipeequipo ey processoproceso de negócionegocio.
</p>
<h2> <img src="https://totvscrm.com/wp-content/uploads/2023/06/[email protected]" alt="some text" width=45>     <strong>O<strong>¿QUÉ QUE MUDOUCAMBIÓ?</strong> </h2> <br>
<p> <h3 class="meu-titulo"> NOVOSNUEVOS GATILHOSDISPRADORES DE WORKFLOW </h3> <br> </p>
<p> <strong> Workflow> </strong> CadastroRegitro de workflow </p> <br>
<p> ForamSe adicionadosincluyeron aoal workflow oslos siguientes gatilhosdisparadores: </p> <br>
<p>
<ul style="margin-left: 10px;">
<li>Responsável<li>Responsable dodel cliente alterado<modificado</li>
<li>Responsável<li>Responsable dodel lead alterado<modificado</li>
</ul>
</p>
<p> AoAl utilizar essesestos gatilhosdisparadores, ées possívelposible inseririncluir condiçõescondiciones específicas vinculadas relacionadasa àla atualizaçãoactualización dodel cliente ey dodel lead. </p>
<br> <p> <video autoplay loop>
<source src="https://totvscrm.com/wp-content/uploads/2023/07/gatilho1.mp4" type="video/mp4">
</video> </p> <br>
<p> <h3 class="meu-titulo"> NOVOSNUEVOS CAMPOS EMEN CONDIÇÕESCONDICIONES </h3> <br> </p>
<p>Se <p>Foramincluyeron adicionadasdos duasnuevas novascondiciones condiçõesa aoslos gatilhosdisparadores: "ResponsávelResponsable" ey "ResponsávelResponsable Anterioranterior". ComCon essesestos campos adicionaisadicionales, ées possívelposible estabelecerestablecer critérioscriterios maismás precisos para direcionardirigir ala automaçãoautomatización. Por exemploejemplo, ées possívelposible configurar oel workflow para atualizaractualizar oel responsávelresponsable apenassolamente quandocuando oel responsávelresponsable antigoantiguo correspondercorresponda a umun usuáriousuario específico ouo quandocuando oel responsávelresponsable atualactual forfuera igual a umun determinado usuáriousuario. </p>
<br> <p> <video autoplay loop>
<source src="https://totvscrm.com/wp-content/uploads/2023/07/condicoes1.mp4" type="video/mp4">
</video> </p> <br>
<p> <h3 class="meu-titulo"> NUEVAS ACCIONES NOVASPUESTAS AÇÕESA DISPONIBILIZADASDISPOSICIÓN </h3> <br> </p>
<p>Las <p>Asnuevas acciones novaspuestas açõesa disponibilizadasdisposición para oel gatilhodisparador "ResponsávelResponsable dodel lead/cliente alteradomodificado" sãoson aslas seguintessiguientes: </p>
<p>
<ul style="margin-left: 10px;">
<li> <strong>Actualizar el <strong>Atualizarresponsable responsávelde daslas atividadesactividades: </strong> EssaEsta açãoacción permite que vocêactualice atualizeel oresponsable responsávelde daslas atividadesactividades relacionadas a la àcuenta contaseleccionada selecionadaen noslos gatilhosdisparadores "ResponsávelResponsable dodel cliente alteradomodificado" ouo "ResponsávelResponsable dodel lead alteradomodificado". Você podePuede configurar essaesta açãoacción para transferir atividadesactividades abertasabiertas, atividadesactividades concluídasfinalizadas ouo atividadesactividades de outrosotros responsáveisresponsables, comcon base nasen suassus preferênciaspreferencias. EssaEsta configuraçãoconfiguración determinará quequé tipo de atividadesactividades serãose atualizadasactualizarán emcon relaçãorelación aoal novonuevo responsávelresponsable.</li>
<li><strong>Actualizar <li><strong>Atualizarel responsable responsávelde daslas oportunidades:</strong> EssaEsta açãoacción permite que vocêactualice atualizeel oresponsable responsávelde daslas oportunidades relacionadas a la àcuenta contaseleccionada selecionadaen noslos gatilhosdisparadores "ResponsávelResponsable dodel cliente alteradomodificado" ouo "ResponsávelResponsable dodel lead alteradomodificado". AssimAsí como naen la açãoacción anterior, vocêpuede pode configurar essaesta açãoacción para transferir oportunidades abertasabiertas, oportunidades fechadasfinalizadas ouu oportunidades de outrosotros responsáveisresponsables, como conformefuera necessárionecesario. AsLas configuraçõesconfiguraciones definidas determinarãodeterminarán quaisqué oportunidades serãose atualizadasactualizarán emcon relaçãorelación aoal novonuevo responsável<responsable</li>
</ul>
</p>
<br> <p> <video autoplay loop>
<source src="https://totvscrm.com/wp-content/uploads/2023/07/workflow2.mp4" type="video/mp4">
</video> </p> <br>
<div class="alert-box warning"><i class="fa fa-exclamation-triangle"> </i><span>Atençãoi><span>Atención: </span> A La atualizaçãoactualización dodel responsávelresponsable podepuede levarllevar cerca de 5 minutos, maspero podepuede demorar maismás, dependendodependiendo dodel número de registros afetadosafectados. </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:14px;
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> |
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas