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>CREACIÓN SIMPLIFICADA DE ÓRDENS DE VENTA A PARTIR DE OPORTUNIDADES</strong> </h2> <br> <br>
<span class="badge badge-melhoria"><strong>MEJORA</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>
<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">Producto:</th>
<td style="text-align: left;" colspan="1" class="confluenceTd"> TCRM - Gestión 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">Línea de producto:</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">Aplicación</th>
<td style="text-align: left;" colspan="1" class="confluenceTd">Web/app 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);">NR310520221311</span></td>
</tr>
<div class="content-wrapper">
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div> <div class="coluna2">
<div class="conteudo"> <br>
<p>El objetivo principal de la mejora es hacer el proceso de creación de órdenes de venta más eficiente, borrando tareas redundantes y simplificando el flujo de ventas. Al reducir el tiempo utilizado en la creación de las órdenes y minimizar errores, los vendedores pueden concentrarse más en actividades estratégicas de ventas. </p>
</div>
</div>
<br>
<h2> <img src="https://totvscrm.com/wp-content/uploads/2023/06/[email protected]" alt="some text" width=45>     <strong>¿QUÉ HACE ESTE RECURSO?</strong> </h2> <br> <br>
<p> El recurso simplifica y agiliza la creación de órdenes de venta a partir de oportunidades. Este permite que los vendedores aprovechen las informaciones e ítems incluidos en las oportunidades para generar órdenes de venta </p>
<h2> <img src="https://totvscrm.com/wp-content/uploads/2023/06/[email protected]" alt="some text" width=45>     <strong>¿QUÉ CAMBIÓ?</strong> </h2> <br>
<p> <h3 class="meu-titulo"> NUEVA SOLAPA - "ÓRDENES DE VENTA" </h3> <br> </p>
<p> Al hacer clic en la solapa "Órdenes de venta", los usuarios pueden visualizar una lista de todas las órdenes de venta vinculadas a la referida oportunidad. Esta lista muestra los mismos campos disponibles en la lista general de Órdenes de venta, ofreciendo informaciones detalladas sobre cada una de estas. </p> <br>
<p> <video autoplay loop>
<source src="https://totvscrm.com/wp-content/uploads/2023/07/tutorialaba_1.mp4" type="video/mp4">
</video> </p>
<p> <h3 class="meu-titulo"> OPCIÓN - "INCLUIR ORDEN DE VENTA" </h3> <br> </p>
<p> Ahora, además de la nueva solapa, se incluyó una opción denominada "Incluir Orden de Venta". Al hacer clic en esta opción se mostrará el formulario de la Orden de venta con las informaciones de la oportunidad completadas. Después de grabar la nueva orden, si hubiera ítems vinculados a la oportunidad, automáticamente se abrirá la pantalla de importación de estos ítems. De esta manera, podrá seleccionar qué productos y servicios de la oportunidad desea incluir en la orden de venta. </p> <br>
<p> <video autoplay loop>
<source src="https://totvscrm.com/wp-content/uploads/2023/07/criarordem.mp4" type="video/mp4">
</video> </p>
<div class="alert-box warning"><i class="fa fa-exclamation-triangle"> </i><span>Atención: </span> La opción "Incluir orden de venta" se sujetará a algunas condiciones para activación:
<ul>
<li>Tener acceso de lectura para el cliente (GDA)</li>
<li>Tener permiso para crear órdenes de venta </li>
<li>Si la oportunidad estuviera vinculada a un lead, el usuario debe tener permiso para convertirlo.</li> </ul><br>
Si alguna de estas condiciones no fuera atendida, un tooltip se mostrará para informar el motivo de la desactivación.</div><br>
<div class="alert-box warning"><i class="fa fa-exclamation-triangle"> </i><span>Atención: </span> Para importar ítems de la oportunidad es necesario que:
<ul>
<li>Los ítems estén presentes en la lista de precios de la orden de venta</li>
<li>Los precios de los ítems estén dentro del rango permitido en la lista de precios</li>
</div><br>
<p> <h3 class="meu-titulo"> GANHARGANAR ORDEMORDEN DE VENDAVENTA </h3> </p>
<p> Cuando haga clic en "Generar orden de venta", se realizarán las mismas validaciones que ocurren actualmente. Al final de este proceso, si la orden de venta se hubiera originado a partir de una oportunidad y si tuviera permiso para "Ganar oportunidades", se mostrará un pop-up preguntando si desea ganar también la oportunidad vinculada.
Si hiciera clic en "Sí", será orientado a la referida oportunidad, en la solapa "Órdenes de venta", donde podrá finalizar el proceso manualmente.
Si hiciera clic en "No", el proceso se finalizará como se realiza actualmente. Será orientado a la lista de órdenes de venta y se mostrará un snackbar, informando que la orden se ganó con éxito.</p>
<br>
<p> <video autoplay loop>
<source src="https://totvscrm.com/wp-content/uploads/2023/07/ganhar.mp4" type="video/mp4">
</video> </p> <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