blob: 05357611af26a63d48bde58b9d0fa5c572164c1d [file] [log] [blame]
/*
* hores
* Copyright (c) 2023 Adrià Vilanova Martínez
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public
* License along with this program.
* If not, see http://www.gnu.org/licenses/.
*/
.schedule {
display: inline-flex;
flex: none;
border: 1px solid rgba(0,0,0,.12);
--hour-height: 30px;
}
.schedule .sidetime {
padding-top: 36px;
width: 40px;
}
.schedule .sidetime .hour {
position: relative;
height: var(--hour-height);
}
.schedule .sidetime .hour .hour--text {
position: absolute;
top: -9px;
right: 7px;
font-size: 11px;
}
.schedule .day {
flex: 1 0 auto;
width: 100px;
min-width: 100px;
}
.schedule .day .day--header {
text-align: center;
box-sizing: content-box;
height: 20px;
font-size: 18px;
font-weight: 300;
padding: 8px 0;
border-bottom: solid 1px #ccc;
}
.schedule .day .day--content {
position: relative;
}
.schedule .day .day--content .hour {
height: Calc(var(--hour-height) - 1px);
}
.schedule .day .day--content .hour:not(:last-child) {
border-bottom: solid 1px #ddd;
}
.schedule .day .day--content .hour:last-child, .schedule .sidetime .hour:last-child {
height: 13px;
}
.schedule .day .day--content .work-event, .schedule .day .day--content .inline-event {
position: absolute;
border-radius: 3px;
overflow-y: auto;
}
.schedule .day .day--content .event--actions {
position: absolute;
top: 4px;
right: 4px;
line-height: 14px;
background: #00000077;
border-radius: 5px;
z-index: 2;
}
.schedule .day .day--content .event--actions .material-icons {
color: white;
font-size: 20px;
}
.schedule .day .day--content .event--header, .schedule .day .day--content .event--body {
text-align: left;
font-size: 11px;
}
.schedule .day .day--content .work-event {
left: 4px;
width: 92px;
background: #2E7D32;
}
.schedule .day .day--content .work-event .event--header, .schedule .day .day--content .work-event .event--body {
line-height: 14px;
color: white;
}
.schedule .day .day--content .work-event .event--header {
margin: 5px 5px 0 5px;
font-weight: bold;
}
.schedule .day .day--content .work-event .event--body {
margin: 0 5px;
}
.schedule .day .day--content .inline-event {
left: 3px;
width: 86px;
background: #81C784;
}
.schedule .day .day--content .inline-event .event--header {
font-weight: 500;
}
.schedule .day .day--content .inline-event .event--header, .schedule .day .day--content .inline-event .event--body {
line-height: 14px;
margin: 0 5px;
color: black;
}
@media (hover: hover) {
.schedule .day .day--content .event--actions {
opacity: 0;
transition: opacity 0.15s ease-in;
background: #00000099;
}
.schedule .day .day--content .work-event:hover .event--actions {
opacity: 1;
}
}