web-app-demos/apps/calendar/static/css/style.css
2025-03-17 16:11:01 -06:00

148 lines
No EOL
2.4 KiB
CSS

/*---------- HEAD ----------*/
.v-select {
border: 1px solid #ced4da;
border-radius: .3rem;
background-color: #fff;
}
#selected_date {
width: 25vw;
min-width: 210px;
}
#checkout {
width: 20vw;
min-width: 150px;
}
/*---------- DAILY ---------*/
#allday {
width: 250px;
max-width: 30%;
}
#allday .event {
min-height: 10vh;
}
#timings {
background-color: white;
color: #AAAAAA; /* How I feel about this */
font-size: 2vmin;
user-select: none;
}
#timings div {
z-index: 10;
white-space: nowrap;
}
#timings span {
font-size: 3vmin;
color: #696969;
}
#events {
z-index: 20;
flex: 1 0 auto;
}
.event {
display: flex;
align-items: stretch;
background-color: white;
box-shadow: 1px -1px lightgrey;
overflow: hidden;
font-size: 3vmin;
user-select: none;
}
.event .title {
font-size: 4vmin;
font-weight: bold;
line-height: 1.2;
}
.border-color {
width: 1vmin;
flex-shrink: 0;
}
.timetbd {
background-image: linear-gradient(to bottom, white, rgba(var(--bs-light-rgb), 1));
}
.timetbd .border-color {
background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(var(--bs-light-rgb), 1));
}
#now {
position: absolute;
height: 2px;
left:0;right:0;
background-color: red;
z-index: 5;
}
/*--------- MONTHLY --------*/
#monthlycalendar {
border: 1px solid #e8e8e8;
}
#monthlycalendar .row {
position: relative;
overflow: hidden;
height: 11rem;
}
.cell {
padding: .5rem;
border: 1px solid #e8e8e8;
}
.notcurrent {
color: #888;
background-color: #f8f8f8;
}
.today {
color: #32acea;
border-color: #32acea;
}
.weekend { color: #f88; }
#daynames {
font-size: 1.5rem;
}
#daynames .col {
padding: 0!important;
}
.monthevent {
position: absolute;
color: #fff;
padding: .25rem;
border-radius: .25rem;
width: auto;
user-select: none;
}
.datetbd2 {
border-image: linear-gradient(to right, #32acea, #F0F0F0) 1 100%;
background-image: linear-gradient(to right, white, #F0F0F0);
}
.expandable {
background: url("/calendar/static/png/16_down.png") repeat-x bottom;
}
.contractable {
background: url("/calendar/static/png/16_up.png") repeat-x bottom;
}
/*---------- FORM ----------*/
textarea { resize: none; }
#name{
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
margin-bottom: -1px;
}
#message{
border-top-right-radius: 0;
border-top-left-radius: 0;
}
#eventFooter {
display: block;
}
/*#eventform input[type=checkbox] {
transform: scale(2);
}*/