recreate project
This commit is contained in:
root
@@ -0,0 +1,443 @@
|
||||
/* ========== RESET & BASE LAYOUT ========== */
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
flex: 1;
|
||||
padding-bottom: 50px;
|
||||
/* adds space above footer */
|
||||
}
|
||||
|
||||
/* ========== CONTAINER & FLEX LAYOUT ========== */
|
||||
/* Avoid overriding Bootstrap's .container-fluid globally, which can break layouts on laptops.
|
||||
If a full-height flex container is needed, prefer a dedicated utility class (e.g., .app-flex). */
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
padding: 5px;
|
||||
background-color: #f1f3f4;
|
||||
overflow-x: hidden;
|
||||
padding-bottom: 50px;
|
||||
/* <-- add this */
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
background-color: #fff;
|
||||
padding-top: 10px;
|
||||
border-right: 1px solid #ddd;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
display: block;
|
||||
color: #333;
|
||||
padding: 5px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sidebar a:hover {
|
||||
background-color: #f1f1f1;
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.sidebar a.active {
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ========== FOOTER ========== */
|
||||
.footer {
|
||||
background-color: #f1f1f1;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin-top: auto;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
/* prevents overlap */
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* ========== TABLE STYLING ========== */
|
||||
.table-responsive {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
display: block;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 20px;
|
||||
font-size: 1rem;
|
||||
table-layout: auto;
|
||||
/* Allow tables to shrink on smaller screens; the responsive wrapper will handle overflow when needed. */
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
table,
|
||||
th,
|
||||
td {
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 5px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Keep headers compact but allow cell content to wrap for better adaptability */
|
||||
th { white-space: nowrap; }
|
||||
td {
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere; /* wrap long words/URLs/emails */
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
thead th {
|
||||
background-color: lightgray;
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* ========== ALIGNMENT HELPERS ========== */
|
||||
.text-left {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.right-align {
|
||||
text-align: right !important;
|
||||
}
|
||||
|
||||
/* ========== DASHBOARD TITLE ========== */
|
||||
.dashboard-title {
|
||||
/*border-bottom: 4px solid #007bff; */
|
||||
padding-bottom: 10px;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.dashboard-title h2 {
|
||||
margin: 0;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
/* ========== FORMS & BUTTONS ========== */
|
||||
.disabled-select,
|
||||
.disabled-checkbox {
|
||||
background-color: #e9ecef;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.custom-button {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.support-form {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 5px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 8px;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
#message {
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
/* ========== MESSAGES ========== */
|
||||
.message {
|
||||
text-align: center;
|
||||
margin-top: 20%;
|
||||
}
|
||||
|
||||
.message img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.message-list,
|
||||
.message-form-container {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
padding: 5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
/* ========== CALENDAR ========== */
|
||||
#calendar-container {
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
overflow-x: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#calendar {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 5px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* FullCalendar force 100% width */
|
||||
.fc {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fc-scrollgrid,
|
||||
.fc-view,
|
||||
.fc-daygrid,
|
||||
.fc-daygrid-body {
|
||||
width: 100% !important;
|
||||
box-sizing: border-box;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.fc-toolbar {
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.fc-toolbar h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.fc-toolbar {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.fc-toolbar h2 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.fc-col-header-cell,
|
||||
.fc-daygrid-day-number,
|
||||
.fc-event {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.fc-daygrid-day-frame {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*================DISPLAY ERROR RECTANGLE================*/
|
||||
.alert-error {
|
||||
background-color: #f8d7da;
|
||||
border: 1px solid #f5c2c7;
|
||||
color: #842029;
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
margin: 20px 0;
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
box-shadow: 0 0 5px rgba(255, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
|
||||
/*================NAVBAR================*/
|
||||
.custom-navbar {
|
||||
background: linear-gradient(to right,
|
||||
#ffffff 0%, /* almost white */
|
||||
#d8f5d0 40%,
|
||||
#9cd88f 100%
|
||||
);
|
||||
color: #080808;
|
||||
|
||||
padding-top: 0.3rem;
|
||||
padding-bottom: 0.3rem;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1050;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* Toggler icon override */
|
||||
.navbar-toggler {
|
||||
background-color: white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* Ensure proper spacing for nav links */
|
||||
.nav-link {
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Fix collapse dropdown for mobile */
|
||||
@media (max-width: 991.98px) {
|
||||
.navbar-collapse {
|
||||
background: linear-gradient(to right,
|
||||
#c6f7c5 0%,
|
||||
#b6d490 30%,
|
||||
#359f04 100%);
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1051;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.navbar .btn {
|
||||
margin-top: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.navbar-logo {
|
||||
height: 80px !important;
|
||||
width: auto !important;
|
||||
object-fit: contain;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
|
||||
.logout-btn {
|
||||
font-weight: bold;
|
||||
padding: 0.25rem 0.75rem; /* smaller height */
|
||||
font-size: 0.95rem; /* slightly smaller text */
|
||||
line-height: 1.2; /* tighter vertical alignment */
|
||||
}
|
||||
|
||||
|
||||
/* ================= PROFILE DROPDOWN ================= */
|
||||
|
||||
.account-btn {
|
||||
background-color: #28a745;
|
||||
border: none;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dropdown-menu-custom {
|
||||
right: 0;
|
||||
left: auto;
|
||||
transform: translateX(-75%);
|
||||
width: 1px !important;
|
||||
max-width: 300px !important;
|
||||
background-color: chartreuse;
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.profile-picture {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
background-color: #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin: 0 auto 20px auto;
|
||||
color: rgb(6, 126, 14);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.profile-details {
|
||||
padding: 5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sign-out-btn {
|
||||
width: 100%;
|
||||
padding: 10px 20px;
|
||||
border: 2px solid #2c9b09;
|
||||
background-color: #2c9b09;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dropdown-hover:hover .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.top-right {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
min-width: 200px;
|
||||
}
|
||||
.menu-title{
|
||||
color: rgba(248, 76, 8, 0.842)
|
||||
}
|
||||
|
||||
.flash-error {
|
||||
animation: flash 1.2s ease-in-out;
|
||||
border: 2px solid red !important;
|
||||
}
|
||||
|
||||
@keyframes flash {
|
||||
0% { background-color: #ffe6e6; }
|
||||
50% { background-color: #ffcccc; }
|
||||
100% { background-color: #fff; }
|
||||
}
|
||||
|
||||
.is-invalid {
|
||||
border-color: red !important;
|
||||
}
|
||||
.invalid-feedback {
|
||||
color: red;
|
||||
font-size: 0.875rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.invalid-feedback {
|
||||
color: red;
|
||||
font-size: 0.875em;
|
||||
display: none;
|
||||
}
|
||||
.is-invalid {
|
||||
border-color: red;
|
||||
}
|
||||
Reference in New Issue
Block a user