Files
pixelstreamingwebreact/src/components/mainPart/timeSelector/timeSelector.css
T

104 lines
1.8 KiB
CSS

.time-selector-container {
display: flex;
flex-direction: column;
width: 100%;
gap: 26px;
box-sizing: border-box;
/* max-width: 500px; */
}
.time-selector-date {
font-weight: 600;
font-size: 24px;
line-height: 110%;
}
.time-selector-rows {
/* width: 100%; */
display: flex;
flex-direction: column;
box-sizing: border-box;
align-items: flex-start;
gap: 8px;
}
.row-time-container {
width: 100%;
/* box-sizing: border-box; */
display: flex;
gap: 8px;
flex-direction: row;
/* flex-wrap: wrap; */
}
.row-item {
padding: 22px 8px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 400;
font-size: 22px;
color: #CE56C2;
background: #322948;
border-radius: 8px;
/* flex-basis: 80px; */
/* width: 20%; */
width: 100%;
/* max-width: 100px; */
min-width: 70px;
/* flex-shrink: 0; */
/* flex-grow: 2; */
box-sizing: border-box;
}
.row-item:hover {
background: #443A5D;
cursor: pointer;
}
.row-item.disabled {
background-color: transparent;
color: #B196AF;
}
.row-item.disabled:hover {
cursor: default;
}
@media screen and (min-width: 2000px) {
.row-item {
padding: 1.1vw 8px;
height: 40px;
font-size: 1.1vw;
}
}
@media screen and (max-width: 1000px) {
.time-selector-container {
}
}
@media screen and (max-width: 640px) {
.time-selector-date {
font-size: 16px;
}
.row-item {
padding: 5px 8px;
min-width: 60px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
min-width: 40px;
}
}