427 lines
8.0 KiB
CSS
427 lines
8.0 KiB
CSS
/*------light mode--------*/
|
|
:root{
|
|
--button-color:#25476a ;
|
|
--user-container:#ffffff;
|
|
--table-head: #d7d9e6;
|
|
--table-border:#25476a;
|
|
--box-shadow:rgb(37, 71, 106);
|
|
--text-color: #25476a ;
|
|
--button-text:#ffffff;
|
|
--hover-c:#63707b ;
|
|
}
|
|
|
|
|
|
/* Dark mode styles */
|
|
.dark-theme-variables {
|
|
|
|
--user-container:rgba(255, 255, 255,0.1);
|
|
--table-head:#293c4d;
|
|
--button-color:#636f7b;
|
|
--table-border:#3a4d5f;
|
|
--box-shadow:rgba(255, 255, 255, 0.842);
|
|
--text-color: #ffffff;
|
|
}
|
|
|
|
/* Container for user creation form */
|
|
.user_container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center; /* Center vertically */
|
|
padding: 80px;
|
|
margin-top: 10px; /* Adjust if necessary to account for fixed navbar */
|
|
margin-left: 90px;
|
|
|
|
}
|
|
|
|
/* Additional styling to ensure it stays centered if the container grows */
|
|
.user_container > maincontent {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 80%;
|
|
}
|
|
|
|
.usertable {
|
|
background: var(--user-container); /* Semi-transparent white background */
|
|
backdrop-filter: blur(10px); /* Blur and saturation for glassmorphism effect */
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px var(--box-shadow);
|
|
width: 80%;
|
|
max-width: 1000px; /* Increase maximum width for larger container */
|
|
}
|
|
|
|
.upload{
|
|
display: flex;
|
|
gap: 3rem;
|
|
margin-left: 50rem;
|
|
}
|
|
.upload_file button{
|
|
color: #ffffff;
|
|
font-size: 15px;
|
|
background-color: #25476a ;
|
|
width: 10rem;
|
|
height: 1.8rem;
|
|
border-radius: 0.2rem;
|
|
box-shadow: 0 2px 2px var(--box-shadow);
|
|
}
|
|
|
|
p{
|
|
color: rgba(255, 0, 0, 0.759);
|
|
}
|
|
.upload_file button:hover{
|
|
background-color: #d7d9e6;
|
|
color: #000000;
|
|
}
|
|
|
|
.upload_area input[type="file"]{
|
|
color: #25476a;
|
|
background-color: #ffffff;
|
|
width: 10rem;
|
|
height: 1.8rem;
|
|
border-radius: 0.2rem;
|
|
|
|
}
|
|
|
|
/* Main content styling */
|
|
maincontent {
|
|
flex: 1;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Heading style */
|
|
.usertable h3 {
|
|
margin-bottom: 20px;
|
|
font-size: 24px;
|
|
color:var(--text-color);
|
|
}
|
|
|
|
/* Form styling */
|
|
.form {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20px; /* Space between form items */
|
|
color: var(--text-color);
|
|
}
|
|
|
|
/* Column styling for inputs */
|
|
.col-10,
|
|
.col-40 {
|
|
width: 18rem;
|
|
margin-bottom: 20px;
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
.col-10-submit {
|
|
flex: 0 0 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Input and select styling */
|
|
input[type="text"],
|
|
input[type="datetime-local"],
|
|
select {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid #000000;
|
|
border-radius: 4px;
|
|
box-sizing: border-box; /* Ensure padding is included in width */
|
|
background: transparent;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
|
|
input[type="submit"] {
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background-color: var(--button-color);
|
|
color: var(--button-text);
|
|
cursor: pointer;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
input[type="submit"]:hover {
|
|
background-color:var(--hover-c);
|
|
}
|
|
|
|
/* Label styling */
|
|
label {
|
|
display: block;
|
|
font-weight: bold;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
/* Hidden fields styling */
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* Calendar input styling */
|
|
input[type="datetime-local"] {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.submit{
|
|
padding-top: 2.1rem;
|
|
}
|
|
|
|
|
|
|
|
/* Responsive design */
|
|
@media (max-width: 768px) {
|
|
.col-10, .col-40, .col-10-submit {
|
|
flex: 0 0 100%;
|
|
}
|
|
}
|
|
|
|
|
|
/*------------------POP UP STYLING--------------------*/
|
|
|
|
/* Popup styling */
|
|
.popup {
|
|
display: none; /* Hide by default */
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 100%;
|
|
max-width: 400px; /* Optional: Limit the maximum width */
|
|
padding: 20px;
|
|
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
|
|
color: #fff; /* White text */
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
|
text-align: center; /* Center text */
|
|
z-index: 1000; /* Ensure the popup is above other elements */
|
|
}
|
|
|
|
/* Popup message styling */
|
|
.popup-user-create-meg {
|
|
margin: 0;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
#popup-message {
|
|
font-size: 18px; /* Adjust font size as needed */
|
|
}
|
|
|
|
/* Additional styling to improve the appearance of the popup */
|
|
.popup-user-create-meg {
|
|
background-color: rgba(9, 78, 115, 0.5); /* Background color to match your theme */
|
|
border-radius: 4px;
|
|
padding: 20px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.popup.success {
|
|
background-color: #4CAF50;
|
|
}
|
|
.popup.error {
|
|
background-color: #F44336;
|
|
}
|
|
/* Responsive design for the popup */
|
|
@media (max-width: 768px) {
|
|
.popup {
|
|
width: 90%; /* Adjust width for smaller screens */
|
|
}
|
|
}
|
|
|
|
|
|
/*-------------pop up for the upload file--------*/
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 1;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
background-color: rgb(0,0,0);
|
|
background-color: rgba(0,0,0,0.4);
|
|
padding-top: 60px;
|
|
}
|
|
|
|
|
|
.modal-content {
|
|
background-image: url(../images/bg_3.svg); /* Semi-transparent white background */
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: cover;
|
|
margin: 5% auto;
|
|
padding: 10px;
|
|
border: 1px solid #888;
|
|
width: 40%;
|
|
height: 68%;
|
|
max-width: 800px;
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(255, 255, 255, 0.3); /* Optional: Add a light border for a more defined edge */
|
|
}
|
|
|
|
.modal-content h3{
|
|
margin-top: 1.9rem;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
.upload_area {
|
|
padding-top: 2rem;
|
|
border-radius: 0.4rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
/*background: #ffffffce;
|
|
/* border: 2px solid rgba(33, 68, 114, 0.859); /* Optional: Add a light border for a more defined edge */
|
|
/*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
|
|
}
|
|
|
|
.upload_area p{
|
|
padding-top: 1rem;
|
|
|
|
}
|
|
|
|
.upload_area input[type="file"] {
|
|
margin-bottom: 0.5rem; /* Space between file input and button */
|
|
color: #25476a;
|
|
border: 1px solid rgba(33, 68, 114, 0.859);
|
|
border-radius: 0.5rem;
|
|
width: 16rem;
|
|
height: 2rem;
|
|
padding: 0.2rem;
|
|
padding-left: 0.3rem;
|
|
}
|
|
|
|
.upload_area button {
|
|
color: #25476a;
|
|
background-color: #ffffff;
|
|
font-size: 15px;
|
|
margin-top: 1rem;
|
|
width: 10rem;
|
|
height: 2rem;
|
|
border-radius: 0.4rem;
|
|
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.upload_area button:hover{
|
|
color: #000000;
|
|
background-color: #d3d9e0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.close {
|
|
color: #aaa;
|
|
float: right;
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.close:hover,
|
|
.close:focus {
|
|
color: #000000;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#message{
|
|
color: #ffffff;
|
|
}
|
|
|
|
|
|
.circle {
|
|
display: inline-block;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
background-color: #eceff3;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
font-family: Arial, sans-serif;
|
|
font-weight: bold;
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
padding-top: 0.6rem;
|
|
margin-bottom: 0.7rem;
|
|
}
|
|
.circle img{
|
|
width: 28px;
|
|
height: 28px;
|
|
padding-bottom: 0.2rem;
|
|
}
|
|
|
|
.circle img:hover{
|
|
content: url(../images/info_h.png);
|
|
width: 30px;
|
|
height: 30px;
|
|
padding-bottom: 0.2rem;
|
|
}
|
|
|
|
/*-----------SECOND POP UP STYLING------------*/
|
|
/* Basic styles for the new popup */
|
|
.info-modal {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 1001;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
background-color: rgba(0,0,0,0.4);
|
|
}
|
|
|
|
.info-modal-content {
|
|
background-image: url(../images/bg4.svg); /* Semi-transparent white background */
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: cover;
|
|
margin: 10% auto;
|
|
padding: 20px;
|
|
border: 1px solid #888;
|
|
width: 45%;
|
|
height: 65%;
|
|
border-radius: 1rem;
|
|
}
|
|
|
|
.info-modal-content .sec{
|
|
padding-top: 3rem;
|
|
padding-bottom: 1rem;
|
|
width: 90%;
|
|
margin-left: 5%;
|
|
margin-bottom: 2rem;
|
|
border-radius: 1rem;
|
|
border: 2px solid rgb(10, 4, 60);
|
|
}
|
|
|
|
.info-modal-content h3{
|
|
margin-bottom: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.info-modal-content p{
|
|
text-align: center;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.info-modal-content p span{
|
|
color: #25476a;
|
|
}
|
|
.info-close {
|
|
color: #aaa;
|
|
float: right;
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.info-close:hover,
|
|
.info-close:focus {
|
|
color: black;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|