forked from vergnet/site-accueil-insa
218 lines
No EOL
3 KiB
CSS
218 lines
No EOL
3 KiB
CSS
main {
|
|
text-align: center;
|
|
border: 0;
|
|
margin: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
section {
|
|
display: block;
|
|
background-color: rgba(255,255,255,0.5);
|
|
width: 80%;
|
|
max-width: 800px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding: 50px;
|
|
font-size: 1.2rem;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.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: "rcredi";
|
|
}
|
|
|
|
.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) {
|
|
|
|
.planning-container {
|
|
font-size: 2vh;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
.column div.hour:after {
|
|
content: "h";
|
|
}
|
|
}
|
|
|
|
.submit {
|
|
width: 50%;
|
|
background-color: grey;
|
|
border: 3px solid grey;
|
|
color: white;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
height: 50px;
|
|
margin: 10px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.submit:hover {
|
|
transition: 0.3s ease;
|
|
transform: scale(1.05);
|
|
} |