@propriety/court-calendar 0.0.0

package/src/_components/CCalendar.css

@@ -0,0 +1,463 @@
+/* Pop-in animation for all calendar events - uses scale instead of translate to avoid overflow */
+.pop-in-ccalendar-event {
+    opacity: 0;
+    transform: scale(0.8);
+    transform-origin: center center;
+    animation: popInBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+    will-change: opacity, transform;
+}
+
+@keyframes popInBounce {
+    0% {
+        opacity: 0;
+        transform: scale(0.8);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+:root {
+    --bg: #ffffff;
+    --text: #212121;
+    --fc-today-bg-color: #e3eefa;
+    --fc-border-color: #cccccc;
+
+    --fc-event-inperson-color: #1da39c;
+    --fc-event-virtual-color: #216edf;
+    --fc-event-unknown-color: #9e9e9e;
+}
+
+[data-theme="dark"] {
+    --bg: #121212;
+    --text: #ffffff;
+    --fc-today-bg-color: #303e4a;
+    --fc-border-color: #353333;
+}
+
+.themed,
+.themed div:not(.MuiAvatar-root, .iconHolder, .evidence-row),
+.themed .MuiInputBase-root,
+.themed label,
+.themed .MuiSelect-select,
+.themed button:not(.MuiFab-root) {
+    background-color: var(--bg) !important;
+    color: var(--text) !important;
+    border-color: var(--fc-border-color) !important;
+    scrollbar-color: var(--fc-border-color) var(--bg);
+
+    &:focus {
+        outline-color: var(--fc-border-color) !important;
+    }
+}
+
+.themed .MuiMenuItem-root,
+.themed .MuiMenuItem-root div:not(.MuiAvatar-root) {
+    background-color: transparent !important;
+}
+
+.themed .MuiMenuItem-root:hover,
+.themed .MuiMenuItem-root:hover div:not(.MuiAvatar-root) {
+    background-color: var(--fc-today-bg-color) !important;
+}
+.themed button.MuiToggleButton-root {
+    &.Mui-selected {
+        background-color: var(--fc-today-bg-color) !important;
+    }
+    &:hover {
+        background-color: var(--fc-border-color) !important;
+    }
+}
+
+.themed .Mui-disabled *:not(input) {
+    color: var(--text) !important;
+    cursor: not-allowed !important;
+    opacity: 0.8 !important;
+}
+
+.themed::-webkit-scrollbar,
+.themed div::-webkit-scrollbar {
+    width: 8px;
+    background: var(--bg);
+}
+.themed::-webkit-scrollbar-thumb,
+.themed div::-webkit-scrollbar-thumb {
+    background: var(--fc-border-color);
+    border-radius: 4px;
+}
+.themed::-webkit-scrollbar-track,
+.themed div::-webkit-scrollbar-track {
+    background: var(--bg);
+}
+.themed input::placeholder,
+.themed .MuiFab-root > svg {
+    color: var(--text) !important;
+}
+.themed * {
+    border-color: var(--fc-border-color) !important;
+}
+
+.themed button:hover,
+.themed .MuiSelect-select:hover,
+.themed input:hover {
+    background-color: var(--fc-today-bg-color) !important;
+}
+
+/* DataGrid row hover override */
+.themed .MuiDataGrid-row:hover,
+.themed .MuiDataGrid-row:hover > * {
+    background-color: var(--fc-today-bg-color) !important;
+}
+.themed .MuiInputBase-root:hover {
+    & input,
+    .MuiAutocomplete-endAdornment {
+        & button,
+        input {
+            background-color: var(--fc-today-bg-color) !important;
+        }
+        background-color: var(--fc-today-bg-color) !important;
+    }
+}
+.themed .MuiFormControl-root:hover {
+    & .MuiFormLabel-root {
+        background-color: var(--fc-today-bg-color) !important;
+    }
+}
+
+.month-day-cell {
+    background-color: var(--bg);
+    color: var(--text);
+    cursor: pointer;
+    height: 120px;
+    padding: 3px !important;
+    position: relative;
+
+    &.fc-day-other {
+        filter: brightness(0.9);
+    }
+
+    &.fc-day-today {
+        background-color: var(--fc-today-bg-color);
+    }
+}
+
+.month-day-cell:hover::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--fc-today-bg-color);
+    opacity: 0.5;
+    pointer-events: none;
+
+    /* background-image: url('data:image/svg+xml;utf8,<svg width="48" height="48" xmlns="http://www.w3.org/2000/svg"><circle cx="24" cy="24" r="22" fill="white" fill-opacity="0.5"/><line x1="24" y1="12" x2="24" y2="36" stroke="black" stroke-width="4" stroke-opacity="0.5"/><line x1="12" y1="24" x2="36" y2="24" stroke="black" stroke-width="4" stroke-opacity="0.5"/></svg>');
+    background-repeat: no-repeat;
+    background-position: top left;
+    background-size: 25px 25px; */
+}
+
+.day-header {
+    background-color: var(--bg);
+    color: var(--text);
+    border-bottom: 1px solid var(--fc-border-color);
+    & a {
+        padding: 6px 4px !important;
+        display: inline-block;
+    }
+}
+
+.court-calendar th[role="presentation"] {
+    background-color: var(--bg);
+}
+
+.day-cell-allday {
+    background-color: var(--bg) !important;
+    color: var(--text) !important;
+}
+
+.fc-daygrid-day-events {
+    max-height: 100px;
+    min-height: 100px;
+    overflow-y: inherit;
+    margin: 0 !important;
+    overflow-y: auto;
+    scrollbar-color: var(--fc-border-color) transparent;
+}
+.fc-day-today .fc-daygrid-day-events {
+    scrollbar-color: var(--fc-event-unknown-color) transparent;
+}
+
+.court-calendar .fc-timegrid-slot-label {
+    background-color: var(--bg);
+    color: var(--text);
+}
+
+.court-calendar .fc-timegrid-axis {
+    border-color: var(--fc-border-color);
+    background-color: var(--bg);
+    color: var(--text);
+}
+
+.court-calendar .fc-timegrid-divider {
+    border-color: var(--fc-border-color);
+    background-color: var(--bg);
+}
+
+.fc .fc-button,
+.fc-button {
+    background-color: var(--bg);
+    color: var(--text);
+    border: 1px solid var(--fc-border-color);
+    font-family: "Roboto", "Helvetica", "Arial", "sans-serif";
+    padding: 0.25rem 0.5rem;
+    cursor: pointer;
+
+    &.fc-button-primary {
+        background-color: var(--bg);
+        color: var(--text);
+        border: 1px solid var(--fc-border-color);
+    }
+
+    &.fc-button-active.fc-button-primary {
+        background-color: var(--fc-today-bg-color);
+        color: var(--text);
+    }
+
+    &:hover {
+        background-color: var(--fc-today-bg-color);
+    }
+}
+
+.fc.fc-media-screen {
+    background-color: var(--bg);
+    color: var(--text);
+    font-family: "Roboto", "Helvetica", "Arial", "sans-serif";
+}
+
+#event-tooltip {
+    background-color: var(--text);
+    color: var(--bg);
+    border: 1px solid var(--fc-border-color);
+    border-radius: 4px;
+    padding: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+    z-index: 9999;
+    font-size: 16px;
+}
+
+.court-event {
+    cursor: pointer;
+    padding: 4px 2px;
+}
+
+.CCButton {
+    background-color: var(--bg);
+    color: var(--text);
+    border: 1px solid var(--fc-border-color);
+    font-family: "Roboto", "Helvetica", "Arial", "sans-serif";
+    padding: 8px 16px;
+    margin-right: 8px;
+    border-radius: 4px;
+    cursor: pointer;
+    user-select: none;
+    &:hover {
+        background-color: var(--fc-today-bg-color);
+    }
+}
+
+.CCButton-Icon {
+    min-width: 35px;
+    max-width: 35px;
+    min-height: 35px;
+    max-height: 35px;
+    border: none;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.CCDropdown-Button {
+    width: 75px;
+}
+
+.CCDropdown-Menu {
+    background-color: var(--bg);
+    color: var(--text);
+    border: 1px solid var(--fc-border-color);
+    font-family: "Roboto", "Helvetica", "Arial", "sans-serif";
+
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+
+    & div {
+        padding: 8px 19px;
+        &:hover {
+            background-color: var(--fc-today-bg-color);
+        }
+    }
+}
+
+.CCButton-Primary {
+    background-color: #1976d2ff;
+    color: white;
+    border: none;
+
+    &:hover {
+        background-color: #1565c0ff;
+    }
+}
+
+.CCButton-Error {
+    background-color: rgb(193, 90, 90);
+    color: white;
+    border: none;
+
+    &:hover {
+        background-color: rgb(149, 56, 56);
+    }
+}
+
+.modal-footer {
+    background-color: var(--bg);
+    color: var(--text);
+    border-top: 1px solid var(--fc-border-color);
+}
+
+.MuiInputBase-root.Mui-disabled {
+    opacity: 0.5 !important;
+}
+
+.ccdisabled {
+    pointer-events: none;
+    opacity: 0.6;
+}
+
+.switch-track {
+    outline: 2px solid var(--fc-border-color);
+}
+
+.fc-list-day-cushion {
+    background-color: var(--bg) !important;
+    color: var(--text);
+}
+
+.fc-list .fc-list-event:hover td {
+    background-color: var(--fc-today-bg-color) !important;
+}
+
+.fc-list .deadline-event {
+    & .fc-list-event-dot {
+        border: none;
+        width: 1em;
+        height: 1em;
+        vertical-align: middle;
+        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><circle cx="8" cy="8" r="8" fill="%2300c853"/><path d="M4 8l3 3 5-5" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>')
+            no-repeat center center;
+        background-size: contain;
+    }
+    &.inperson {
+        --color: var(--fc-event-inperson-color);
+    }
+    &.virtual {
+        --color: var(--fc-event-virtual-color);
+    }
+    &.unknown {
+        --color: var(--fc-event-unknown-color);
+    }
+}
+
+.fc-view:not(.fc-list) .deadline-event {
+    background-color: transparent !important;
+    border-color: transparent !important;
+    display: flex;
+    align-items: center;
+    overflow-x: hidden;
+    position: relative;
+
+    & .fc-event-title {
+        color: var(--text) !important;
+    }
+
+    &.inperson {
+        --color: var(--fc-event-inperson-color);
+    }
+    &.virtual {
+        --color: var(--fc-event-virtual-color);
+    }
+    &.unknown {
+        --color: var(--fc-event-unknown-color);
+    }
+    &.adjourned-no-date {
+        --color: rgb(151, 11, 134) !important;
+    }
+
+    &.status-uploaded::before {
+        content: "";
+        display: inline-block;
+        width: 1em;
+        height: 1em;
+        vertical-align: middle;
+        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><circle cx="8" cy="8" r="8" fill="%2300c853"/><path d="M4 8l3 3 5-5" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>')
+            no-repeat center center;
+        background-size: contain;
+        margin: 0px 4px 0px 0px;
+        top: 0.35em;
+        border: none;
+        position: absolute;
+    }
+    &.status-uploaded .fc-event-main {
+        margin-left: 1.5em !important;
+    }
+    &:not(.status-uploaded)::before {
+        content: "";
+        display: inline-block;
+        border-radius: calc(var(--fc-daygrid-event-dot-width) / 2);
+        box-sizing: content-box;
+        height: 0px;
+        margin: 0px 4px;
+        width: 0px;
+        border: calc(var(--fc-daygrid-event-dot-width) / 2) solid var(--color);
+    }
+}
+
+.courtdate-event,
+.adjournment-event {
+    border: 1px solid var(--fc-border-color) !important;
+    & .fc-event-title,
+    .fc-event-time {
+        color: white !important;
+    }
+    &.inperson {
+        background-color: var(--fc-event-inperson-color) !important;
+        border-color: var(--fc-event-inperson-color) !important;
+    }
+    &.virtual {
+        background-color: var(--fc-event-virtual-color) !important;
+        border-color: var(--fc-event-virtual-color) !important;
+    }
+    &.unknown {
+        background-color: var(--fc-event-unknown-color) !important;
+        border-color: var(--fc-event-unknown-color) !important;
+    }
+    & .fc-daygrid-event-dot,
+    .fc-list-event-dot {
+        display: none;
+    }
+
+    &.adjourned-no-date {
+        border-color: rgb(151, 11, 134) !important;
+        background-color: rgb(151, 11, 134) !important;
+    }
+}
+
+.ccalendar-list-row {
+    cursor: pointer;
+}
+
+.CCAvatarIcon:hover {
+    cursor: pointer;
+    transform: scale(1.1);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}