lethemanh
136 lines
2.5 KiB
Stylus
136 lines
2.5 KiB
Stylus
.App
|
|
background-color #f3f6f9
|
|
display flex
|
|
flex-direction column
|
|
justify-content space-between
|
|
|
|
.main-layout
|
|
display flex
|
|
height calc(100dvh - 70px)
|
|
|
|
.main-layout.isInIframe
|
|
margin-top 8px
|
|
height calc(100vh - 8px)
|
|
|
|
.main-layout.calendar-layout
|
|
background-color #fff
|
|
flex-direction row
|
|
|
|
.calendar
|
|
flex-grow 1
|
|
height 100%
|
|
overflow hidden
|
|
|
|
.main-layout.isInIframe .calendar
|
|
display flex
|
|
flex-direction column
|
|
height 100%
|
|
overflow hidden
|
|
|
|
.main-layout.isInIframe .fc
|
|
flex 1
|
|
min-height 0
|
|
|
|
.calendarListHeader
|
|
padding-top 10px
|
|
display flex
|
|
align-items center
|
|
margin-left 25%
|
|
|
|
.sidebar
|
|
border-right 2px solid #f3f4f6
|
|
width 270px
|
|
height 100%
|
|
flex-direction column
|
|
overflow-y: scroll
|
|
overflow-x: hidden
|
|
scrollbar-width: thin
|
|
scrollbar-color: transparent transparent
|
|
|
|
.sidebar::-webkit-scrollbar
|
|
width: 8px
|
|
|
|
.sidebar::-webkit-scrollbar-track
|
|
background: transparent
|
|
|
|
.sidebar::-webkit-scrollbar-thumb
|
|
background-color: rgba(0, 0, 0, 0.3)
|
|
border-radius: 4px
|
|
opacity: 0
|
|
transition: opacity 0.3s ease
|
|
|
|
.sidebar:hover::-webkit-scrollbar-thumb
|
|
background-color: rgba(0, 0, 0, 0.5)
|
|
opacity: 1
|
|
|
|
.sidebar:hover
|
|
scrollbar-color: rgba(0, 0, 0, 0.5) transparent
|
|
|
|
// .declined-event
|
|
// opacity 0.7
|
|
|
|
// .needs-action-event
|
|
// opacity 0.7
|
|
// border dashed 1px #ffffff
|
|
|
|
[data-theme="dark"] .fc-timegrid-slot::after
|
|
border-top 1px dotted rgba(255, 255, 255, 0.2)
|
|
|
|
#calendar
|
|
flex 1
|
|
overflow hidden /* Important: let FullCalendar handle internal scroll */
|
|
|
|
/* Base container */
|
|
.fc-daygrid-day-top
|
|
display flex
|
|
flex-direction column
|
|
align-items center
|
|
padding 0.5rem 0
|
|
font-family "Inter", sans-serif
|
|
gap 6px
|
|
&--mobile
|
|
flex-direction column-reverse !important
|
|
|
|
/* sidebar*/
|
|
.sidebar-calendar
|
|
width 280px
|
|
background-color #fff
|
|
border-radius 12px
|
|
box-shadow 0 4px 12px rgba(0, 0, 0, 0.1)
|
|
padding 20px
|
|
display flex
|
|
flex-direction column
|
|
gap 30px
|
|
font-family "Segoe UI", Tahoma, Geneva, Verdana, sans-serif
|
|
|
|
/* sidebar header */
|
|
.sidebar-calendar h2
|
|
font-size 1.3rem
|
|
font-weight 700
|
|
color #333
|
|
margin 0 0 10px 0
|
|
|
|
/* Calendar list */
|
|
.calendar-list
|
|
list-style none
|
|
padding 0
|
|
margin 0
|
|
display flex
|
|
flex-direction column
|
|
gap 15px
|
|
|
|
.calendar-list li
|
|
display flex
|
|
align-items center
|
|
gap 10px
|
|
font-weight 600
|
|
color #444
|
|
padding 10px 15px
|
|
border-radius 10px
|
|
transition background-color 0.2s ease
|
|
cursor pointer
|
|
|
|
.weekSelector
|
|
display flex
|
|
flex-direction column
|
|
align-items center |