styles: Calendar stylesheet
This commit is contained in:
		
							parent
							
								
									76691ea4b3
								
							
						
					
					
						commit
						c914649a8b
					
				
					 1 changed files with 95 additions and 0 deletions
				
			
		
							
								
								
									
										95
									
								
								wwwroot/css/calendar.css
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										95
									
								
								wwwroot/css/calendar.css
									
										
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,95 @@ | ||||||
|  | .calendar-container { | ||||||
|  |     max-width: 900px; | ||||||
|  |     margin: 20px auto; | ||||||
|  |     font-family: Arial, sans-serif; | ||||||
|  |     border: 1px solid #ddd; | ||||||
|  |     border-radius: 5px; | ||||||
|  |     overflow: hidden; | ||||||
|  |     background-color: #fff; | ||||||
|  |     box-shadow: 0 2px 5px rgba(0,0,0,0.1); | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .calendar-header { | ||||||
|  |     display: flex; | ||||||
|  |     justify-content: space-between; | ||||||
|  |     align-items: center; | ||||||
|  |     background-color: #f8f9fa; | ||||||
|  |     padding: 15px; | ||||||
|  |     border-bottom: 1px solid #ddd; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .calendar-header h2 { | ||||||
|  |     margin: 0; | ||||||
|  |     font-size: 1.5em; | ||||||
|  |     color: #333; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .calendar-grid { | ||||||
|  |     display: grid; | ||||||
|  |     grid-template-columns: repeat(7, 1fr); | ||||||
|  |     gap: 1px; | ||||||
|  |     background-color: #ddd; | ||||||
|  |     border-bottom: 1px solid #ddd; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .day-name { | ||||||
|  |     background-color: #e9ecef; | ||||||
|  |     padding: 10px 5px; | ||||||
|  |     text-align: center; | ||||||
|  |     font-weight: bold; | ||||||
|  |     color: #555; | ||||||
|  |     font-size: 0.9em; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .calendar-day { | ||||||
|  |     background-color: #fff; | ||||||
|  |     padding: 10px 5px; | ||||||
|  |     min-height: 100px;  | ||||||
|  |     text-align: right; | ||||||
|  |     position: relative; | ||||||
|  |     cursor: pointer; | ||||||
|  |     transition: background-color 0.2s ease; | ||||||
|  |     box-sizing: border-box;  | ||||||
|  |     border: 1px solid #eee;  | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .calendar-day:hover { | ||||||
|  |     background-color: #f0f0f0; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .calendar-day.other-month { | ||||||
|  |     background-color: #f9f9f9; | ||||||
|  |     color: #ccc; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .calendar-day .day-number { | ||||||
|  |     font-weight: bold; | ||||||
|  |     font-size: 1.2em; | ||||||
|  |     color: #333; | ||||||
|  |     position: absolute; | ||||||
|  |     top: 5px; | ||||||
|  |     right: 5px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .calendar-day .event-indicator { | ||||||
|  |     background-color: #28a745; | ||||||
|  |     color: white; | ||||||
|  |     font-size: 0.75em; | ||||||
|  |     padding: 2px 5px; | ||||||
|  |     border-radius: 3px; | ||||||
|  |     margin-top: 25px; | ||||||
|  |     display: inline-block; | ||||||
|  |     margin-left: 5px; | ||||||
|  |     margin-right: 5px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .event-indicator.mowing { background-color: #28a745; } | ||||||
|  | .event-indicator.watering { background-color: #007bff; } | ||||||
|  | .event-indicator.fertilizing { background-color: #ffc107; } | ||||||
|  | .event-indicator.aeration { background-color: #6f42c1; } | ||||||
|  | .event-indicator.weedcontrol { background-color: #dc3545; } | ||||||
|  | .event-indicator.other { background-color: #6c757d; } | ||||||
|  | 
 | ||||||
|  | .card.h-100 { | ||||||
|  |     height: 100% !important; | ||||||
|  | } | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue
	
	 Blake Ridgway
						Blake Ridgway