fedi.camp_Website/unused_components/timetable/styles.css

207 lines
3.1 KiB
CSS

body {
background-color: #F6F6F6;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
#landscape-message {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
#logo {
max-width: 100%;
height: auto;
margin-bottom: 20px;
}
#landscape-message h1 {
margin-top: 0;
}
#landscape-message p {
margin: 10px 0;
}
#timetable {
display: none;
}
@media (orientation: landscape) {
#landscape-message {
display: none;
}
#timetable {
display: block;
}
}
@media (max-height: 600px) {
#headline {
margin-top: 40px;
}
}
@media (max-height: 400px) {
#headline {
margin-top: 20px;
}
}
#timetable {
width: 90%;
margin: 0 auto;
}
#headline,
#subheadline {
text-align: center;
color: #444;
margin-top: 40px;
}
#slider-container {
width: 60%;
margin: 20px auto;
text-align: center;
position: relative;
height: 50px;
}
#slider-text {
color: #444;
font-size: 0.8em;
}
#slider {
display: block;
width: 100%;
margin: 20px 0;
appearance: none;
background: #D3D3D3;
outline: none;
height: 30px;
border-radius: 20px;
}
#slider::-webkit-slider-thumb {
appearance: none;
width: 30px;
height: 30px;
background: #0066CC;
cursor: pointer;
border-radius: 50%;
}
#slider-day {
position: absolute;
width: 100%;
height: 50px;
top: 0;
left: 0;
background: transparent;
color: #000;
display: flex;
justify-content: center;
align-items: center;
transition: none;
pointer-events: none;
font-size: 1.2em;
margin-top: -7px;
}
.day-table {
width: 100%;
border-collapse: collapse;
display: none;
margin-bottom: 20px;
table-layout: fixed;
}
.day-table th,
.day-table td {
border: 1px solid #FFFFFF;
padding: 10px;
text-align: center;
background-color: #ADD8E6;
height: 60px;
word-break: break-word;
width: 20%;
}
.day-table th {
background-color: #ddd;
color: #444;
text-transform: uppercase;
}
.event-button {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
z-index: 999;
}
#overlay-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border-radius: 5px;
text-align: center;
}
#overlay-content p {
margin-bottom: 10px;
}
#overlay-content button {
padding: 10px 20px;
background-color: #0066CC;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
@media (max-width: 600px) {
#slider-container {
width: 90%;
}
.day-table,
.day-table th,
.day-table td {
font-size: 0.8em;
}
.day-table td {
height: auto;
}
}