Initial commit: Calendar Plantempus project setup with TypeScript, ASP.NET Core, and event-driven architecture

wwwroot/css/calendar-base-css.css

@@ -0,0 +1,190 @@
+/* styles/base.css */
+
+/* CSS Reset and Base */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* CSS Variables */
+:root {
+  /* Grid measurements */
+  --hour-height: 60px;
+  --minute-height: 1px;
+  --snap-interval: 15;
+  
+  /* Time boundaries */
+  --day-start-hour: 7;
+  --day-end-hour: 19;
+  --work-start-hour: 8;
+  --work-end-hour: 17;
+  
+  /* Colors */
+  --color-primary: #2196f3;
+  --color-secondary: #ff9800;
+  --color-success: #4caf50;
+  --color-danger: #f44336;
+  --color-warning: #ff9800;
+  
+  /* Grid colors */
+  --color-grid-line: #e0e0e0;
+  --color-grid-line-light: rgba(0, 0, 0, 0.05);
+  --color-work-hours: rgba(0, 100, 0, 0.02);
+  --color-current-time: #ff0000;
+  
+  /* Event colors */
+  --color-event-meeting: #e3f2fd;
+  --color-event-meeting-border: #2196f3;
+  --color-event-meal: #fff3e0;
+  --color-event-meal-border: #ff9800;
+  --color-event-work: #f3e5f5;
+  --color-event-work-border: #9c27b0;
+  --color-event-milestone: #e8f5e9;
+  --color-event-milestone-border: #4caf50;
+  
+  /* UI colors */
+  --color-background: #ffffff;
+  --color-surface: #f5f5f5;
+  --color-text: #333333;
+  --color-text-secondary: #666666;
+  --color-border: #e0e0e0;
+  
+  /* Shadows */
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1);
+  --shadow-popup: 0 4px 20px rgba(0, 0, 0, 0.15);
+  
+  /* Transitions */
+  --transition-fast: 150ms ease;
+  --transition-normal: 300ms ease;
+  --transition-slow: 500ms ease;
+  
+  /* Z-index layers */
+  --z-grid: 1;
+  --z-event: 10;
+  --z-event-hover: 20;
+  --z-drag-ghost: 30;
+  --z-current-time: 40;
+  --z-popup: 100;
+  --z-loading: 200;
+}
+
+/* Base styles */
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--color-text);
+  background-color: var(--color-surface);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Custom elements default display */
+swp-calendar,
+swp-calendar-nav,
+swp-calendar-container,
+swp-time-axis,
+swp-week-header,
+swp-scrollable-content,
+swp-time-grid,
+swp-day-columns,
+swp-day-column,
+swp-events-layer,
+swp-event,
+swp-allday-container,
+swp-loading-overlay,
+swp-event-popup {
+  display: block;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-surface);
+}
+
+::-webkit-scrollbar-thumb {
+  background: #bbb;
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #999;
+}
+
+/* Selection styling */
+::selection {
+  background-color: rgba(33, 150, 243, 0.2);
+  color: inherit;
+}
+
+/* Focus styles */
+:focus {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* Utility classes */
+.hidden {
+  display: none !important;
+}
+
+.invisible {
+  visibility: hidden !important;
+}
+
+.transparent {
+  opacity: 0 !important;
+}
+
+/* Animations */
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes pulse {
+  0% { 
+    opacity: 1; 
+    transform: scale(1); 
+  }
+  50% { 
+    opacity: 0.6; 
+    transform: scale(1.2); 
+  }
+  100% { 
+    opacity: 1; 
+    transform: scale(1); 
+  }
+}
+
+@keyframes fadeIn {
+  from { 
+    opacity: 0; 
+    transform: translateY(10px); 
+  }
+  to { 
+    opacity: 1; 
+    transform: translateY(0); 
+  }
+}
+
+@keyframes slideIn {
+  from { 
+    transform: translateX(-100%); 
+  }
+  to { 
+    transform: translateX(0); 
+  }
+}