Usuari:Pau Colominas/vector.css

El codi que afegiu en aquesta pàgina podria tenir contingut maliciós que comprometi el vostre compte. Si no esteu segur si el codi a afegir és segur, pregunteu abans en la Taverna. El codi s'executarà en mostrar una previsualització d'aquesta pàgina.

Nota: Després de desar, heu de netejar la memòria cau del navegador per veure els canvis. En la majoria de navegadors amb Windows o Linux, premeu Ctrl+F5 o bé premeu Shift i cliqueu el botó "Actualitza" (Ctrl i "Actualitza" amb Internet Explorer). Vegeu més informació i instruccions per a cada navegador a Viquipèdia:Neteja de la memòria cau.

/* Copiat de [[Usuari:Townie/vector.css]] per tal de veure la nova proposta de portada */
	.portada-slider-controls {
	      position: absolute;
	      top: 10px;
	      left: 0;
	      right: 0;
	      z-index: 999;
	      color: #fff;
	  }
	  
	.portada-slider-controls-cercle {
	    display: inline-block;
	    width: 1.5rem;
	    height: 1.5rem;
	    background: #888888;
	    border-radius: 50%;
	    margin: 0 0 0.5rem 0;
	    color:white;
	  }
	  
	.portada-slider-controls-cercle:hover {
	    background: #605f5f;
	  }
	  
	.portada-slider {
	    width: 100%;
	    text-align: center;
	    overflow: hidden;
	  }
	
	  .portada-slides {
	    display: flex;
	    overflow-x: auto;
	    scroll-snap-points-x: repeat(99.9%);
	    scroll-snap-type: mandatory;
	  }
	
	.portada-slidediv {
	    flex-shrink: 0;
	    width: 100%;
	    height: 40vh;
	    position: relative;
	    display: flex;
	  }
	
	.portada-imatgeslide {
	    position: relative;
	    overflow: hidden;
	    max-width: 1000px; 
	    min-width: 100%;
	    height: 100%;
	    width:100%;
	}
	.portada-imatgeslide img {
		display: block;
	    position:absolute;
	    vertical-align:top;
	    max-width: 100%;
	    min-height:25vh;
	    height: auto;
	    width:auto;
	    object-fit: cover;
	}
	.descripcioslide {
	    position: absolute;
	    bottom: 0px;
	    background-color: rgba(0, 0, 0, 0.5);
	    color:black;
	    width:100%;
	    height:20%;
	  }
	
	.portada-prev {
	    position: absolute;
	    left: 10px;
	    top:50%;
	  }
	.portada-next {
	    position: absolute;
	    right: 10px;
	    top:50%;
	  }
	  
	.portada-prevnext-cercle {
	    display: inline-block;
	    width: 1.5rem;
	    height: 1.5rem;
	    background: white;
	    border-radius: 50%;
	    margin: 0 0 0.5rem 0;
	    border:1px solid #605f5f;
	  }
	  
	.portada-prevnext-cercle:hover {
	    background: lightgray;
	  }
	/*-------*/
	
	/*------*/
	.bloc-esq-noticies{
	  display:flex;
	  flex-direction:column;
	  flex:1 1 0;
	  width:59.5%;
	  margin-right:0.5%;
	}
	
	.bloc-rdc-noticies{
	  width:40%;
	  display:flex;
	  flex-direction:column;
	  flex:1 1 0;
	}
	
	.caixa-flex{
	  display:flex;
	  flex-wrap:wrap;
	  flex-direction:row;
	  min-width:100%;
	}
	
	.bloc-esquerra{
	  display:flex;
	  flex-direction:column;
	  min-width:550px;
	  flex:1 1 0;
	  width:49.5%;
	  margin-right:0.5%;
	}
	
	.bloc-dreta{
	  width:50%;
	  display:flex;
	  flex-direction:column;
	  min-width:550px;
	  flex:1 1 0;
	
	}
	
	.reqport{
	  box-shadow: 0 0 0.3rem #999;
	  padding:10px;
	  margin-bottom:10px;
	  flex:1 1 0;
	}
	
	/* ---- Part antiga ---- */
	.imatge-dreta {
	    position: relative;
	    overflow: hidden;
	    max-width: 98%; 
	    min-width: 98%;
	    height: 10vh;
	    width:98%;
	    display:inline-block;
	    object-fit: contain;
	}
	.imatge-dreta img {
		display: block;
	    position:absolute;
	    vertical-align:top;
	    max-width: 100%;
	    min-height:10vh;
	    height: auto;
	    width:auto;
	    object-fit: cover;
	}
	
	.imatge-mesvist {
	    position: relative;
	    overflow: hidden;
	    max-width: 24.2%; 
	    min-width: 24.2%;
	    height: 25%;
	    width:24.2%;
	    display:inline-block;
	    object-fit: contain;
	}
	.imatge-mesvist img {
		display: block;
	    position:absolute;
	    vertical-align:top;
	    max-width: 100%;
	    min-height:25vh;
	    height: auto;
	    width:auto;
	    object-fit: cover;
	}
	.requadre-portada {
		box-shadow: 0 0 0.3rem #999;
		padding: 1rem;
		margin-bottom: 1.25rem;
	}
	
	.requadre-carousel {
		margin-bottom: 1.25rem;
	}
	
	.banda-left,
	.banda-right {
		box-sizing: border-box;
	}
	
	.banda-left {
		float:left;
		padding-right: 1.2rem;
	}
	
	.banda-right {
		float:right;
	}
	
	#caixa-mare {
		margin-top: 1rem;
	}
	
	#caixa-mare .banda-left {
		width: 50%;
	}
	
	#caixa-mare .banda-right {
		width: 50%;
	}
	#caixa-mare:after {
		clear: both;
		display: table;
		content: '';
	}
	
	/* salts */
	@media (max-width: 1200px) {
		.banda-left,
		.banda-right {
			float: none;
			width: auto !important;
		}
		.banda-left {
			padding-right: 0;
		}
	}
	
	@media (min-width: 1201px) {
		#caixa-mare {
			display: flex;
		}
		#caixa-mare .banda-left,
		#caixa-mare .banda-right {
			display: flex;
			flex-direction: column;
		}
		.requadre-portada:nth-child(1) {
			flex-grow: 1;
		}
		.requadre-portada:nth-child(2) {
			flex-grow: 2;
		}
		.requadre-portada:nth-child(3) {
			flex-grow: 3;
		}
		.requadre-carousel:nth-child(1) {
			flex-grow: 1;
		}
		.requadre-carousel:nth-child(2) {
			flex-grow: 2;
		}
		.requadre-carousel:nth-child(3) {
			flex-grow: 3;
		}
	}
	
	/* notícies via can :eu */
	.imatge-act {
	    position: relative;
	    overflow: hidden;
	    max-width: 1000px; 
	    min-width: 100%;
	    height: 100%;
	    width:100%;
	}
	.imatge-act img {
		display: block;
	    position:absolute;
	    vertical-align:top;
	    max-width: 100%;
	    min-height:25vh;
	    height: auto;
	    width:auto;
	    object-fit: cover;
	}
	
	.mf-mobile-only {
	    display: none;
	}
/* Fi */