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: NOTIFICAÇÕES DE ATUALIZAÇÕES PARA USUÁRIOS COM ACESSO AO REGISTRO</strong> </h2> <br> <br>
<span class="badge badge-melhoria"><strong>MELHORIA</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:</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">Workflow</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);">ME260520221343</span></td>
</tr>
<div class="content-wrapper">
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div> <div class="coluna2">
<div class="conteudo"> <br>
<p> Anteriormente, a falta de visibilidade das atualizações nos registros resultava em lacunas na comunicação entre a equipe de vendas. Apenas o responsável pelo registro recebia notificações, deixando os demais membros da equipe sem acesso às informações atualizadas. Com o novo tipo de ação de notificação para usuários com acesso compartilhado, todos os envolvidos têm acesso às alterações relevantes, melhorando a visibilidade e evitando a perda de informações cruciais. </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 configurar as ações de sincronização das atividades nos calendários externos permite que os profissionais tenham suas atividades do TOTVS CRM refletidas diretamente em seus calendários externos, como Google Suite e Office 365 notificação para que, além do responsável, os demais usuários que tenham acesso a um registro por compartilhamento manual possam receber notificações. Isso significa que todos os envolvidos em um registro terão acesso às informações atualizadas e relevantes por meio de notificações automáticas. </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"> ATIVAR SINCRONIZAÇÃO DE ATIVIDADES </h3> <br> </p>
<p> Foi disponibilizada a configuração de sincronização de atividades nos cards do Google Suite e do Office 365. Agora, você pode acessar as configurações desses serviços e encontrar a opção de ativar a sincronização das atividades do TOTVS CRM. </p> <br>
<p> <strong> Marketplace> </strong> Card Google Workspace/Microsoft 365 </p> <br>
<p>Ao marcar essa opção de sincronização, sempre que você criar, atualizar ou encerrar uma atividade no TOTVS CRM, essas informações serão automaticamente refletidas no seu calendário externo, como o Google Suite ou o Office 365. </p>
<div class="alert-box warning"><i class="fa fa-exclamation-triangle"> </i><span>Atenção: </span> Para garantir a sincronização, é necessário que o responsável pela atividade e os participantes tenham seus endereços de e-mail cadastrados no TOTVS CRM. Isso possibilita que os compromissos sejam exibidos corretamente nos calendários externos.</div>
<br> <p> <video autoplay loop>
<source src="https://totvscrm.com/wp-content/uploads/2023/07/agendaatividadesmp4.mp4" type="video/mp4">
</video> </p> <br>
<p><div class="alert-box notice"><i class="fa fa-info-circle"> </i><span>Atenção: </span> <ul>
<li>O tempo necessário para que as atividades sejam sincronizadas no calendário externo depende da quantidade de atividades e eventos presentes na fila de sincronização interna. O tempo mínimo de atualização é de 1 minuto.</li>
<li>Agendas criadas, alteradas ou removidas no calendário externo (Google ou Microsoft) não afetarão as atividades no TOTVS CRM. A sincronização ocorre apenas do TOTVS CRM para o calendário externo.</li>
<li>Atividades criadas antes da configuração de sincronização no Marketplace não serão enviadas ao calendário externo. A sincronização é válida apenas para atividades criadas após a configuração.</li>
<li>Caso haja uma alteração no responsável da atividade, a entrada correspondente no calendário externo será removida do antigo responsável e adicionada ao novo responsável.</li>
<li>Quando uma atividade é cancelada no TOTVS CRM, o evento correspondente no calendário externo também é removido.</li>
<li>Qualquer alteração feita na atividade diretamente no TOTVS CRM irá substituir as alterações realizadas diretamente no calendário externo.</li>
<li>Se a integração com o calendário externo for desabilitada, não serão feitas remoções de entradas pré-existentes no calendário externo, e nenhuma alteração será feita na atividade no TOTVS CRM.</li></p> </ul></div>
<br>
<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