|
|
| Línea 1: |
Línea 1: |
| .cp-hitov { | | <templatestyles src="HitoV/styles.css" /> |
| position: relative;
| |
| padding-left: 42px;
| |
| margin: 0 0 2.15em 0;
| |
| min-height: 58px;
| |
| font-family: sans-serif;
| |
| }
| |
|
| |
|
| /* Línea vertical que enlaza cada hito con el siguiente */
| | <div class="cp-hitov"> |
| .cp-hitov__linea {
| | <div class="cp-hitov__linea"></div> |
| position: absolute; | | <div class="cp-hitov__punto"></div> |
| left: 13px;
| |
| top: 17px;
| |
| bottom: -2.15em;
| |
| width: 2px;
| |
|
| |
|
| background: linear-gradient( | | <div class="cp-hitov__contenido"> |
| to bottom, | | <div class="cp-hitov__cabecera"> |
| rgba(44, 158, 216, 0.72) 0%,
| | <span class="cp-hitov__fecha">{{{fecha}}}</span>{{#if:{{{titulo|}}}|<span class="cp-hitov__separador"> · </span><span class="cp-hitov__titulo">{{{titulo}}}</span>}} |
| rgba(72, 170, 220, 0.52) 42%,
| | </div> |
| rgba(115, 190, 226, 0.32) 72%,
| |
| rgba(185, 220, 238, 0.18) 100% | |
| );
| |
| }
| |
|
| |
|
| /* Punto de cada fecha */
| | {{#if:{{{texto|}}}| |
| .cp-hitov__punto {
| | <div class="cp-hitov__texto">{{{texto}}}</div> |
| position: absolute;
| | }} |
| left: 7px; | | </div> |
| top: 4px;
| | </div> |
|
| |
|
| width: 14px;
| | <noinclude> |
| height: 14px;
| | [[Categoría:Plantillas]] |
| border-radius: 50%;
| | </noinclude> |
| | |
| background: #38a8dd;
| |
| border: 3px solid #f7fbff;
| |
| | |
| box-shadow:
| |
| 0 0 0 2px rgba(56, 168, 221, 0.20),
| |
| 0 2px 5px rgba(27, 88, 128, 0.14);
| |
| | |
| box-sizing: border-box;
| |
| z-index: 2;
| |
| }
| |
| | |
| /* Contenido */
| |
| .cp-hitov__contenido {
| |
| position: relative;
| |
| top: -1px;
| |
| }
| |
| | |
| /* Fecha + título */
| |
| .cp-hitov__cabecera {
| |
| font-size: 0.96em;
| |
| line-height: 1.45;
| |
| font-weight: 700;
| |
| color: #123f70;
| |
| }
| |
| | |
| .cp-hitov__fecha {
| |
| font-weight: 800;
| |
| color: #0b4c86;
| |
| }
| |
| | |
| .cp-hitov__separador {
| |
| color: #7895ae;
| |
| font-weight: 600;
| |
| }
| |
| | |
| .cp-hitov__titulo {
| |
| font-weight: 750;
| |
| color: #154f80;
| |
| }
| |
| | |
| /* Texto descriptivo */
| |
| .cp-hitov__texto {
| |
| margin-top: 0.65em;
| |
| | |
| font-size: 0.92em;
| |
| line-height: 1.65;
| |
| | |
| color: #3e5770;
| |
| | |
| max-width: 850px;
| |
| }
| |
| | |
| /* Enlaces algo más integrados visualmente */ | |
| .cp-hitov a {
| |
| text-decoration: none;
| |
| }
| |
| | |
| .cp-hitov a:hover {
| |
| text-decoration: underline;
| |
| }
| |
| | |
| /* Móvil */
| |
| @media screen and (max-width: 600px) {
| |
| | |
| .cp-hitov {
| |
| padding-left: 34px;
| |
| margin-bottom: 1.8em;
| |
| }
| |
| | |
| .cp-hitov__linea {
| |
| left: 10px;
| |
| bottom: -1.8em;
| |
| }
| |
| | |
| .cp-hitov__punto {
| |
| left: 4px;
| |
| }
| |
| | |
| .cp-hitov__texto {
| |
| line-height: 1.55;
| |
| }
| |
| }
| |
