Initial commit

2025-12-21 09:59:39 -05:00
commit cc4e467cef
36 changed files with 7133 additions and 0 deletions
--- a/src/style.css
+++ b/src/style.css
@@ -0,0 +1,201 @@
+/* Chrono Module Styles - All scoped to .chrono-container and using theme colors */
+
+/* Ensure grids display properly within Chrono module only */
+.chrono-container .calendar-grid,
+.chrono-container .mini-calendar {
+  display: grid !important;
+}
+
+.chrono-container .calendar-grid {
+  grid-template-columns: repeat(7, 1fr) !important;
+  grid-template-rows: auto repeat(6, 1fr) !important;
+}
+
+.chrono-container .mini-calendar {
+  grid-template-columns: repeat(7, 1fr) !important;
+}
+
+.chrono-container .week-days,
+.chrono-container .week-view,
+.chrono-container .day-view {
+  display: flex !important;
+  flex-direction: row !important;
+}
+
+.chrono-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
+.chrono-container .chrono-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-bottom: 1px solid rgb(var(--v-border-color));
+}
+
+.chrono-container .chrono-content {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+.chrono-container .chrono-sidebar {
+  width: 280px;
+  border-right: 1px solid rgb(var(--v-border-color));
+  overflow-y: auto;
+}
+
+.chrono-container .chrono-main {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+/* Calendar specific styles - scoped to chrono-container */
+.chrono-container .calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 1px;
+  background-color: rgb(var(--v-border-color));
+  border: 1px solid rgb(var(--v-border-color));
+}
+
+.chrono-container .calendar-cell {
+  background-color: rgb(var(--v-theme-surface));
+  min-height: 100px;
+  padding: 8px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.chrono-container .calendar-cell:hover {
+  background-color: rgb(var(--v-theme-surface-variant));
+}
+
+.chrono-container .calendar-cell.today {
+  background-color: rgb(var(--v-theme-primary), 0.08);
+}
+
+.chrono-container .calendar-event {
+  padding: 2px 6px;
+  margin: 2px 0;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Task specific styles - scoped to chrono-container */
+.chrono-container .task-item {
+  display: flex;
+  align-items: flex-start;
+  padding: 12px;
+  border-bottom: 1px solid rgb(var(--v-border-color));
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.chrono-container .task-item:hover {
+  background-color: rgb(var(--v-theme-surface-variant));
+}
+
+.chrono-container .task-item.completed {
+  opacity: 0.6;
+}
+
+.chrono-container .task-checkbox {
+  margin-right: 12px;
+}
+
+.chrono-container .task-content {
+  flex: 1;
+}
+
+.chrono-container .task-title {
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.chrono-container .task-title.completed {
+  text-decoration: line-through;
+}
+
+.chrono-container .task-meta {
+  display: flex;
+  gap: 12px;
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+.chrono-container .priority-badge {
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.chrono-container .priority-high {
+  background-color: rgb(var(--v-theme-error), 0.1);
+  color: rgb(var(--v-theme-error));
+}
+
+.chrono-container .priority-medium {
+  background-color: rgb(var(--v-theme-warning), 0.1);
+  color: rgb(var(--v-theme-warning));
+}
+
+.chrono-container .priority-low {
+  background-color: rgb(var(--v-theme-success), 0.1);
+  color: rgb(var(--v-theme-success));
+}
+
+/* Event Viewer Popup - applied globally since popup is rendered at fixed position */
+.event-popup {
+  position: fixed;
+  z-index: 9999;
+  pointer-events: auto;
+  transform: translate(-50%, -100%);
+  margin-top: -10px;
+  width: 320px;
+  min-height: 150px;
+}
+
+.event-popup-card {
+  cursor: pointer;
+  transition: transform 0.2s;
+}
+
+.event-popup-card:hover {
+  transform: scale(1.02);
+}
+
+.event-popup-details {
+  font-size: 13px;
+}
+
+.event-popup .text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 250px;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.event-popup .border-t {
+  border-top: 1px solid rgba(var(--v-border-color), 0.5);
+}