osem-fcy/app/assets/stylesheets/osem-schedule.scss
Ana María Martínez Gómez 6926990fea
Fix overlay of carousel controls
Events on the last column where not clickable because the carousel
controls where render on top. Make them narrower to solve it.

This bug was a side effect of using a carousel for rendering the
schedule. There are strong arguments to think this is not the best
design and a better solution is being discussed:

https://github.com/openSUSE/osem/issues/2421

Fixes https://github.com/openSUSE/osem/issues/2434

Co-authored-by: @sncarnera
2019-03-26 13:40:38 +01:00

324 lines
5 KiB
SCSS

#schedule-content .carousel-control{
width: 12%;
}
@media (min-width: 768px){
#schedule-content .carousel-control{
width: 5%;
}
}
.room-name{
font-weight: bold;
padding:10px;
margin-top: 30px;
border: 1px solid #848484;
background-color: #E6E6E6;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
height: 40px;
line-height: 25px;
overflow: hidden;
}
.schedule-room-slot{
padding: 2px 3px;
border: 1px solid #848484;
height: 58px;
line-height: 20px;
font-size: 13px;
}
.schedule-event{
padding: 7px;
border: 2px solid #151515;
position:relative;
z-index:1;
cursor:move;
}
.schedule-room-slot .schedule-event.compact {
margin-top: -23px;
margin-left: 20%;
width: 80%;
}
.schedule-event-text{
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
line-height: 23px;
overflow: hidden;
}
.schedule-event-delete-button {
font-weight:bold;
cursor: pointer;
padding: 0px 3px;
border: 1px solid grey;
margin-right: 5px;
}
#schedule td.event {
background-image: linear-gradient(to top, rgb(247,250,242) 24%, rgb(194,232,190) 97%, rgb(194,232,190) 100%);
cursor: pointer;
padding: 3px 2px;
}
#schedule td.event:hover
{
background-image: linear-gradient(to top, rgb(247,250,242) 24%, rgb(83,171,74) 97%, rgb(83,171,74) 100%);
}
.flexvideo {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.flexvideo iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.speakerinfo {
margin-top: 40px;
}
.speakerbio {
margin-top: 10px;
}
.schedule-title, .schedule-subtitle, .schedule-speaker, .schedule-track {
clear: none;
display: block;
}
.schedule-subtitle {
color: rgb(185, 74, 72);
}
a.unstyled-link {
text-decoration: none;
color: #333333;
outline: 0;
}
.program-dropdown, .schedule-dropdown{
margin-left: 20%;
margin-right: 20%;
margin-top: 40px;
margin-bottom: 20px;
}
.schedule-dropdown > button, .program-dropdown > button, .program-dropdown > .dropdown-menu, .schedule-dropdown > .dropdown-menu{
width: 100%;
}
.elipsis{
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.break-words{
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
/* Warning: Needed for oldIE support, but words are broken up letter-by-letter */
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
.room, .event-title{
font-size: 11px;
line-height: 17px;
overflow: hidden;
}
td.room{
width: 15%;
padding: 3px !important;
max-width:15%;
}
th.date{
font-size: 12px;
padding: 4px 0px 4px 2px !important;
}
.speaker-pic{
padding: 4px 2px;
}
.schedule-table{
width: 100%;
margin:0px;
padding:0px;
}
td.no-padding{
padding:0px !important;
}
.all-events-title{
margin-top: 40px;
border-bottom: 1px solid #848484;
}
.date-title{
font-size: 23px;
font-weight: bold;
padding-bottom: 2px;
display:inline-block;
}
.start-time{
font-size: 16px;
padding-left: 30px;
margin-top: 32px;
}
.new-time-event{
margin-top: 20px;
}
.date-content{
border-bottom: 1px solid #6E6E6E;
margin-top: 30px;
}
.unscheduled-event{
margin-top: 8px;
}
.all-speaker-pic{
padding: 20px 10px 20px 10px;
}
.track{
padding: 0px 5px 0px 5px;
display: inline-block;
}
.event-panel{
cursor: pointer;
}
.program-dropdown{
margin-left: 20%;
margin-right: 20%;
margin-top: 40px;
}
.program-dropdown > button{
width: 100%;
}
.program-dropdown > .dropdown-menu{
width: 100%;
}
.no-events-day{
color: #D8D8D8 !important;
}
.schedule-label{
height: 14px;
line-height: 11px;
overflow: hidden;
display: inline-block;
white-space: normal;
padding-left: 1px;
padding-right: 1px;
font-size: 7px;
}
.non_schedulable{
opacity: 0.5;
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.room, .event-title{
font-size: 12px;
}
td.room{
width: 12%;
max-width:12%;
}
th.date{
font-size: 13px;
}
td.event{
padding: 3px 3px !important;
}
.schedule-label{
padding-left: 2px;
padding-right: 3px;
}
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
.room, .event-title{
font-size: 13px;
}
td.room{
width: 10%;
max-width: 10%;
}
.schedule-label{
height: 15px;
line-height: 12px;
font-size: 7px;
}
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
.room, .event-title{
font-size: 14px;
}
.schedule-label{
padding-left: 2px;
padding-right: 2px;
font-size: 8px;
}
td.room{
width: 9%;
max-width: 9%;
}
td.event{
padding: 3px 6px !important;
}
th.date{
font-size: 14px;
}
}