calendar/app/assets/stylesheets/calendar_widget1.css

120 lines
2.3 KiB
CSS

.w-calendar-table {
table-layout: fixed;
width: 100%;
}
a.event-container{
color: inherit;
}
.event-container {
display: flex;
flex-wrap: wrap;
width: 100%;
border-radius: 10px;
margin-bottom: 1em;
transition: all .3s ease;
cursor: pointer;
padding: 0.5em;
min-height: 3em;
position: relative;
}
.close_box{
font-weight: bold;
position: relative;
float: right;
padding: 0.5em;
cursor: pointer;
}
.close_box:hover{
color: red;
}
.event-bullet-event {
width: 100%;
height: 100%;
border-radius: 50%;
}
.event-bullet-event {
width: 2em;
height: 2em;
border-radius: 1em;
}
.event-container:hover {
background-color: #fff;
box-shadow: 0 0.1em 0.7em -0.25em rgba(0, 0, 0, 0.65);
}
.event-container > .event-icon {
position: absolute;
display: flex;
justify-content: center;
width: 15%;
height: 100%;
z-index: 5;
}
.event-container > .event-icon::before {
content: '';
position: absolute;
top: 1em;
left: 50%;
width: 0.1em;
height: calc(100% + 1.5em);
background-color: #eaeaea;
z-index: -1;
}
.event-container:first-child > .event-icon::before {
top: 1.5em;
position: absolute;
}
.event-container:last-child > .event-icon::before {
height: 0;
}
.event-container:only-child > .event-icon::before {
background-color: unset;
}
.event-header{
width: 100%;
text-align: center;
font-size: 1.7em;
font-weight: bold;
padding: 0.35em 0;
}
.event-info{
padding-left: 15%;
}
.calendar-events{
position: relative;
background: #fbfbfb;
}
.month_template{
position: relative;
}
.w-calendar.widget-calendar-1{
flex-wrap: wrap;
margin-top: 2em;
margin-bottom: 1em;
}
.widget-calendar-1 .w-calendar-nav a {
top: 0.5em;
}
.calendar-dialog div.ui-dialog-content {
max-height: 20em !important;
overflow-wrap: break-word;
}
.widget-calendar-1 td{
cursor: pointer;
}
.widget-calendar-1 .w-calendar-table td div {
width: auto;
height: 3em;
display: inline-flex;
align-items: center;
justify-content: center;
}
.widget-calendar-1 .w-calendar-table td:hover {
background: #eaeaea;
color: black;
}
.widget-calendar-1 .w-calendar-table .w-calendar-event {
background: #444444;
}
.widget-calendar-1 table td.w-calendar-other-month {
color: #999797;
}