osem-fcy/app/assets/stylesheets/osem-schedule.css.scss
Ana 96337ed081 Make the whole event panel clickable in all events
Make the whole event panel clickable in all events in the public schedule. It didn't work properly when having links inside the panel.

It also works with ctrl + click openning the event page in a new tab.
2016-08-11 11:19:05 +02:00

261 lines
4.8 KiB
SCSS

#schedule td.event {
background-image: linear-gradient(bottom, rgb(247,250,242) 24%, rgb(194,232,190) 97%, rgb(194,232,190) 100%);
background-image: -o-linear-gradient(bottom, rgb(247,250,242) 24%, rgb(194,232,190) 97%, rgb(194,232,190) 100%);
background-image: -moz-linear-gradient(bottom, rgb(247,250,242) 24%, rgb(194,232,190) 97%, rgb(194,232,190) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(247,250,242) 24%, rgb(194,232,190) 97%, rgb(194,232,190) 100%);
background-image: -ms-linear-gradient(bottom, rgb(247,250,242) 24%, rgb(194,232,190) 97%, rgb(194,232,190) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.24, rgb(247,250,242)),
color-stop(0.97, rgb(194,232,190)),
color-stop(1, rgb(194,232,190))
);
cursor: pointer;
padding: 3px 2px;
}
#schedule td.event:hover
{
background-image: linear-gradient(bottom, rgb(247,250,242) 24%, rgb(83,171,74) 97%, rgb(83,171,74) 100%);
background-image: -o-linear-gradient(bottom, rgb(247,250,242) 24%, rgb(83,171,74) 97%, rgb(83,171,74) 100%);
background-image: -moz-linear-gradient(bottom, rgb(247,250,242) 24%, rgb(83,171,74) 97%, rgb(83,171,74) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(247,250,242) 24%, rgb(83,171,74) 97%, rgb(83,171,74) 100%);
background-image: -ms-linear-gradient(bottom, rgb(247,250,242) 24%, rgb(83,171,74) 97%, rgb(83,171,74) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.24, rgb(247,250,242)),
color-stop(0.97, rgb(83,171,74)),
color-stop(1, rgb(83,171,74))
);
}
.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: 20px;
}
.schedule-title, .schedule-subtitle, .schedule-speaker, .schedule-track {
clear: none;
display: block;
}
.schedule-subtitle {
color: rgb(185, 74, 72);
}
.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: 8px 0px 8px 1% !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;
}
/* 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 4px !important;
}
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
.room, .event-title{
font-size: 13px;
}
td.room{
width: 10%;
max-width: 10%;
}
td.event{
padding: 3px 5px !important;
}
.schedule-label{
height: 15px;
line-height: 12px;
}
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
.room, .event-title{
font-size: 14px;
}
td.room{
width: 9%;
max-width: 9%;
}
td.event{
padding: 3px 6px !important;
}
th.date{
font-size: 14px;
}
}