/* style.css */ /* 1) RESET / GLOBAL STYLES */ * { box-sizing: border-box; margin: 0; padding: 0; } /* 2) FONT + BACKGROUND (BLUE THEME) */ body { font-family: sans-serif; /* Soft blue gradient background */ background: linear-gradient(45deg, #E6F7FF 0%, #B3ECFF 100%); min-height: 100vh; direction: rtl; /* Persian layout */ color: #333; /* Default text color */ } /* 3) HELPER CLASSES */ /* Use .centered-page if you want to center your content (like the login card) vertically & horizontally. Example: */ .centered-page { display: flex; justify-content: center; align-items: center; } /* A "card" style box with a white background and shadow Good for the login form or any standalone panel */ .card { background-color: #fff; width: 400px; /* slightly bigger than 350px */ padding: 2rem; border-radius: 10px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); text-align: center; margin: 2rem auto; } .card h1, .card h2 { margin-bottom: 1.5rem; font-weight: 600; } /* 4) ERROR MESSAGE */ .error-msg { color: #D8000C; margin-bottom: 1rem; font-weight: bold; } /* 5) BASIC FORM ELEMENT STYLES (for login or day forms, etc.) */ .form-group { margin-bottom: 1.2rem; text-align: right; } label { display: block; margin-bottom: 0.4rem; font-weight: 500; } input[type="text"], input[type="password"], input[type="number"], input[type="email"] { width: 100%; padding: 0.6rem; border: 1px solid #ddd; border-radius: 5px; font-size: 1rem; outline: none; transition: border-color 0.3s; } input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="email"]:focus { border-color: #66afe9; } /* Buttons */ button[type="submit"], button.action-btn, .day-btn { /* "day-btn" can be used for next/prev buttons, etc. */ display: inline-block; background-color: #007BFF; /* A nicer blue for buttons */ color: #fff; font-size: 1rem; font-weight: 600; padding: 0.6rem 1.2rem; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s, box-shadow 0.3s; margin-top: 0.5rem; } button[type="submit"]:hover, button.action-btn:hover, .day-btn:hover { background-color: #006AE3; box-shadow: 0 4px 10px rgba(0,0,0,0.15); } /* 6) CALENDAR-SPECIFIC STYLING */ /* A container around the calendar so it doesn't feel too small */ .calendar-container { width: 90%; max-width: 1200px; /* limit how wide it can get on large screens */ margin: 2rem auto; background-color: rgba(255, 255, 255, 0.6); padding: 1rem; border-radius: 10px; box-shadow: 0 6px 15px rgba(0,0,0,0.1); } /* The calendar table itself */ .calendar-table { width: 100%; /* fill the container */ border-collapse: collapse; margin: 1rem 0; } /* Table headers - let's use a deep blue background with white text */ .calendar-table thead tr th { background-color: #007BFF; color: #fff; padding: 10px; font-weight: 600; font-size: 1.1rem; border: 1px solid #ccc; } /* Table cells for days */ .calendar-table td { width: 130px; height: 80px; text-align: center; vertical-align: middle; border: 1px solid #ccc; background-color: #f7fbff; /* subtle light background */ position: relative; /* for potential future styling or badges */ font-size: 1.2rem; /* bigger text */ transition: background-color 0.2s; } /* Day links */ .day-cell a { text-decoration: none; color: #333; font-weight: bold; } /* Hover effect on table cells */ .calendar-table td:hover { background-color: #E1F0FF; } /* The color-coded backgrounds (white, yellow, red) might override .td background. Let's define classes so you can handle them in code (or inline style). But if you keep inline style, it will override these. */ .white-day { background-color: #ffffff !important; } .yellow-day { background-color: #fff7d1 !important; } .red-day { background-color: #ffdce0 !important; } .operation-box { background-color: #f9fcff; /* Slightly different from page bg for contrast */ border: 1px solid #ddd; /* Light border */ border-radius: 8px; /* Rounded corners */ padding: 1rem; margin-bottom: 1rem; box-shadow: 0 2px 6px rgba(0,0,0,0.05); /* Subtle default shadow */ transition: box-shadow 0.3s, background-color 0.3s; } .operation-box:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Deeper shadow on hover */ background-color: #edf5ff; /* Slightly darker background on hover */ } .day-cell.today-day { background-color: #07961f !important ; /* no need !important if no inline style is set */ border: 2px solid green !important; border-radius: 4px !important; box-shadow: 0 0 5px rgba(0,255,0,0.5) !important; } /* For the operation-count hover effect */ /* The hidden div that shows the count */ .day-cell { position: relative; } .op-count-hover { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; /* so it doesn't block clicks */ color: #fff; font-size: 1rem; z-index: 2; } .day-cell:hover { background-color: #113a8f !important; color: #fff; cursor: pointer; } .day-cell:hover a { /* Make day number invisible, but STILL clickable */ color: transparent; transition: color 0.2s; } .day-cell:hover .op-count-hover { display: block; } /* 7) MAKE IT RESPONSIVE */ /* For screens below 600px, let's adjust the table size and font */ @media (max-width: 600px) { .calendar-table td { width: 60px; height: 60px; font-size: 0.9rem; } .calendar-table thead tr th { font-size: 0.9rem; padding: 6px; } } /* Keep .card and other elements also responsive */ @media (max-width: 400px) { .card { width: 90%; padding: 1.5rem; margin: 1rem auto; } }