site-accueil-insa/assets/css/page/planning.css

main {
	text-align: center;
	border: 0;
	margin: 0;
	width: 100%;
}

.planning-container {
	height: 82vh;
	width: 100%;
	background-color: rgba(255,255,255,0.5);
	color: white;
	margin-top: 40px;
}

.column {
	width: 13%;
	height: 82vh;
	float: left;
	background-image: linear-gradient(rgba(0,0,0,.08) 50%, transparent 50%);
	background-size: 1px 10%;
}

.column.time {
	width: 9%;
}

.column.days {
	width: 16%;
	background-color: #34495e;
	background-image: none;
	display: none;
}

.day_title {
	height: 5%;
	background-color: #34495e;
	font-size: 0.8em;
	font-weight: 600;
	text-transform: uppercase;
	text-align: center;
	line-height: 4.1vh;
}

.hour {
	height: 5%;
	background-color: rgba(52, 73, 94,0.9);
	font-size: 1em;
	text-align: center;
	line-height: 4.1vh;
	border-bottom: 1px solid #ffffff11;
}

.day {
	border-radius: 2.5vh;
	background: #6b83db;
	height: 5vh;
	line-height: 5vh;
	margin: 5px 5px 12px;
	cursor: pointer;
}

.hour:after {
	content: ":00";
}

.class {
	display: flex;
	align-content: center;
	width: 100%;
	height: 4.1vh;
	background-color: transparent;
	font-weight: 300;
	align-items: center;
	justify-content: center;
}

.lundi .day_title:after,
.day0:after {
	content: "undi";
}

.mardi .day_title:after,
.day1:after  {
	content: "rdi";
}

.mercredi .day_title:after,
.day2:after  {
	content: "rcrdi";
}

.jeudi .day_title:after,
.day3:after  {
	content: "eudi";
}

.vendredi .day_title:after,
.day4:after  {
	content: "endredi";
}

.samedi .day_title:after,
.day5:after  {
	content: "amedi";
}

.dimanche .day_title:after,
.day6:after  {
	content: "imanche";
}

@media (min-width: 701px) and (max-width: 950px) {
	.hour:after {
		content: "h";
	}

	.column div.day_title:after {
		content: none;
	}
}

@media (max-width: 700px) {

	.column {
		width: 50%;
	}

	.column.days {
		display: block;
		width: 30%;
	}

	.column.time {
		width: 20%;
	}

	.lundi,
	.mardi,
	.mercredi,
	.jeudi,
	.vendredi,
	.samedi,
	.dimanche {
		display: none;
	}

	.planning-container[selected$="0"] .lundi {
		display: block;
	}

	.planning-container[selected$="1"] .mardi {
		display: block;
	}

	.planning-container[selected$="2"] .mercredi {
		display: block;
	}

	.planning-container[selected$="3"] .jeudi {
		display: block;
	}

	.planning-container[selected$="4"] .vendredi {
		display: block;
	}

	.planning-container[selected$="5"] .samedi {
		display: block;
	}

	.planning-container[selected$="6"] .dimanche {
		display: block;
	}
}

@media (max-width: 350px) {

	.column div.day:after {
		content: none;
	}
}