302 lines
6.9 KiB
SCSS
302 lines
6.9 KiB
SCSS
@use "@core-scss/base/mixins";
|
||
@use "@styles/variables/_vuetify.scss";
|
||
|
||
.v-application .fc {
|
||
--fc-today-bg-color: rgba(var(--v-theme-on-surface), 0.04);
|
||
--fc-border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||
--fc-neutral-bg-color: rgb(var(--v-theme-background));
|
||
--fc-list-event-hover-bg-color: rgba(var(--v-theme-on-surface), 0.02);
|
||
--fc-page-bg-color: rgb(var(--v-theme-surface));
|
||
--fc-event-border-color: currentcolor;
|
||
|
||
a {
|
||
color: inherit;
|
||
}
|
||
|
||
.fc-timegrid-divider {
|
||
padding: 0;
|
||
}
|
||
|
||
.fc-col-header-cell-cushion {
|
||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||
font-size: 0.8125rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.fc-toolbar .fc-toolbar-title {
|
||
margin-inline-start: 0.25rem;
|
||
}
|
||
|
||
.fc-event-time {
|
||
font-size: 0.6875rem;
|
||
}
|
||
|
||
.fc-timegrid-event {
|
||
.fc-event-title {
|
||
font-size: 0.8125rem;
|
||
}
|
||
}
|
||
|
||
.fc-event-title-container {
|
||
.fc-event-title {
|
||
font-size: 0.8125rem;
|
||
}
|
||
}
|
||
|
||
.fc-prev-button {
|
||
padding-inline-start: 0;
|
||
}
|
||
|
||
.fc-prev-button,
|
||
.fc-next-button {
|
||
padding: 0.25rem;
|
||
}
|
||
|
||
.fc-col-header .fc-col-header-cell .fc-col-header-cell-cushion {
|
||
padding: 0.5rem;
|
||
text-decoration: none !important;
|
||
}
|
||
|
||
.fc-timegrid .fc-timegrid-slots .fc-timegrid-slot {
|
||
block-size: 3rem;
|
||
}
|
||
|
||
// Removed double border on left in list view
|
||
.fc-list {
|
||
border-inline-start: none;
|
||
font-size: 0.8125rem;
|
||
|
||
.fc-list-day-cushion.fc-cell-shaded {
|
||
background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
|
||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||
font-weight: 500;
|
||
}
|
||
|
||
.fc-list-event-time,
|
||
.fc-list-event-title {
|
||
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
|
||
font-size: 0.9375rem;
|
||
}
|
||
|
||
.fc-list-day .fc-list-day-text,
|
||
.fc-list-day .fc-list-day-side-text {
|
||
font-size: 0.9375rem;
|
||
text-decoration: none;
|
||
}
|
||
}
|
||
|
||
.fc-timegrid-axis {
|
||
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
|
||
font-size: 0.6875rem;
|
||
text-transform: capitalize;
|
||
}
|
||
|
||
.fc-timegrid-slot-label-frame {
|
||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||
font-size: 0.6875rem;
|
||
text-align: center;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.fc-header-toolbar {
|
||
flex-wrap: wrap;
|
||
margin: 1.4rem;
|
||
column-gap: 0.5rem;
|
||
row-gap: 1rem;
|
||
}
|
||
|
||
.fc-toolbar-chunk {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.fc-button-group {
|
||
.fc-button-primary {
|
||
&,
|
||
&:hover,
|
||
&:not(.disabled):active {
|
||
border-color: transparent;
|
||
background-color: transparent;
|
||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||
}
|
||
|
||
&:focus {
|
||
box-shadow: none !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
&:last-child {
|
||
.fc-button-group {
|
||
border-radius: 0.375rem;
|
||
|
||
.fc-button,
|
||
.fc-button:active {
|
||
background-color: rgba(var(--v-theme-primary), 0.16);
|
||
color: rgb(var(--v-theme-primary));
|
||
font-size: 0.9375rem;
|
||
font-weight: 500;
|
||
letter-spacing: 0.0187rem;
|
||
padding-inline: 1rem;
|
||
text-transform: capitalize;
|
||
|
||
&:not(:last-child) {
|
||
border-inline-end: 0.0625rem solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||
}
|
||
|
||
&.fc-button-active {
|
||
background-color: rgba(var(--v-theme-primary), 0.24);
|
||
color: rgb(var(--v-theme-primary));
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.fc-toolbar-title {
|
||
display: inline-block;
|
||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||
font-size: 1.25rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
// Calendar content container
|
||
.fc-view-harness {
|
||
min-block-size: 40.625rem;
|
||
}
|
||
|
||
.fc-event {
|
||
border-color: transparent;
|
||
cursor: pointer;
|
||
margin-block-end: 0.3rem;
|
||
padding-block: 0.1875rem;
|
||
padding-inline: 0.3125rem;
|
||
}
|
||
|
||
.fc-event-main {
|
||
color: inherit;
|
||
font-size: 0.6875rem;
|
||
font-weight: 500;
|
||
padding-inline: 0.25rem;
|
||
}
|
||
|
||
tbody[role="rowgroup"] {
|
||
> tr > td[role="presentation"] {
|
||
border: none;
|
||
}
|
||
}
|
||
|
||
.fc-scrollgrid {
|
||
border-inline-start: none;
|
||
}
|
||
|
||
.fc-daygrid-day {
|
||
padding: 0.3125rem;
|
||
}
|
||
|
||
.fc-daygrid-day-number {
|
||
padding-block: 0.5rem;
|
||
padding-inline: 0.6875rem;
|
||
}
|
||
|
||
.fc-daygrid-day {
|
||
padding: 0.3125rem;
|
||
}
|
||
|
||
.fc-scrollgrid-section > * {
|
||
border-inline-end-width: 0;
|
||
border-inline-start-width: 0;
|
||
}
|
||
|
||
.fc-list-event-dot {
|
||
color: inherit;
|
||
|
||
--fc-event-border-color: currentcolor;
|
||
}
|
||
|
||
.fc-list-event {
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
.fc-popover {
|
||
@include mixins.elevation(3);
|
||
|
||
border-radius: 6px;
|
||
|
||
.fc-popover-header,
|
||
.fc-popover-body {
|
||
padding: 0.5rem;
|
||
}
|
||
|
||
.fc-popover-title {
|
||
margin: 0;
|
||
font-size: 0.9375rem;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
// 👉 sidebar toggler
|
||
.fc-toolbar-chunk {
|
||
.fc-button-group {
|
||
align-items: center;
|
||
|
||
.fc-button .fc-icon {
|
||
vertical-align: bottom;
|
||
}
|
||
|
||
// ℹ️ Below two `background-image` styles contains static color due to browser limitation of not parsing the css var inside CSS url()
|
||
.fc-drawerToggler-button {
|
||
display: none;
|
||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' stroke='rgba(94,86,105,0.68)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E");
|
||
background-position: 50%;
|
||
background-repeat: no-repeat;
|
||
block-size: 1.5625rem;
|
||
font-size: 0;
|
||
inline-size: 1.5625rem;
|
||
margin-inline-end: 0.25rem;
|
||
|
||
@media (max-width: 1279px) {
|
||
display: block !important;
|
||
}
|
||
|
||
@at-root {
|
||
.v-theme--dark#{&} {
|
||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' stroke='rgba(232,232,241,0.68)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E");
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// ℹ️ Workaround of https://github.com/fullcalendar/fullcalendar/issues/6407
|
||
.fc-col-header,
|
||
.fc-daygrid-body,
|
||
.fc-scrollgrid-sync-table {
|
||
inline-size: 100% !important;
|
||
}
|
||
}
|
||
|
||
// Remove event margin in week view inside day column
|
||
.fc-timegrid-col-events {
|
||
margin: 0 !important;
|
||
}
|
||
|
||
// Remove day view, day bg
|
||
.fc .fc-daygrid-day.fc-day-today {
|
||
background: transparent;
|
||
}
|
||
|
||
.fc-timegrid .fc-timegrid-slots .fc-timegrid-slot {
|
||
background: rgb(var(--v-theme-surface));
|
||
}
|
||
|
||
// Set calendar month font-size
|
||
.fc-toolbar-title {
|
||
font-size: 18px !important;
|
||
}
|
||
|
||
// Set button border radius
|
||
.fc .fc-button {
|
||
border-radius: vuetify.$card-border-radius;
|
||
min-block-size: vuetify.$button-height;
|
||
}
|