Merged CEO and Client App
This commit is contained in:
andrei-mihnea-cerbu
@@ -0,0 +1,215 @@
|
||||
body, html {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
font-family: "Pridi", sans-serif; /* Use sans-serif fallback */
|
||||
background-color: #4A628A;
|
||||
}
|
||||
|
||||
h4, h2, h1{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.page{
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(to bottom, rgba(74, 98, 138, 0.0) 30%, rgba(186, 237, 255, 0.7));
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
height: 90%;
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.header{
|
||||
text-align: center;
|
||||
padding-bottom: 16px;
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
.title{
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.departments-container{
|
||||
overflow-y: hidden;
|
||||
width: 100%;
|
||||
height: 370px;
|
||||
max-height: 370px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.department-name{
|
||||
width:70%;
|
||||
font-size: 16px;
|
||||
letter-spacing: -0.5px;
|
||||
color: rgba(255,255,255, 1);
|
||||
}
|
||||
|
||||
.user-management-container{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
justify-content: space-between; /* Align buttons next to each other */
|
||||
align-items: center;
|
||||
gap: 10px; /* Space between buttons */
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* Styling for buttons */
|
||||
.user-management-container button, .modal button {
|
||||
flex: 1; /* Ensure buttons are equal width */
|
||||
padding: 8px 16px 8px 16px;
|
||||
font-weight: 300;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
button[name="underline"] {
|
||||
background-color: transparent; /* No background */
|
||||
border: none; /* Remove default button border */
|
||||
color: #4A628A; /* Set text color */
|
||||
font-size: 1em; /* Set font size */
|
||||
cursor: pointer; /* Add pointer cursor for interactivity */
|
||||
text-decoration: underline; /* Underline text */
|
||||
padding: 0; /* Remove default padding */
|
||||
}
|
||||
|
||||
.department-card{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
width: auto;
|
||||
margin-right: 8px;
|
||||
background-color: #ED4B4B; /* Blue background */
|
||||
color: white; /* White text color */
|
||||
}
|
||||
|
||||
button[name="submit"] {
|
||||
width: 100%;
|
||||
background-color: #4A628A; /* Blue background */
|
||||
color: white; /* White text color */
|
||||
}
|
||||
|
||||
.departments-container::-webkit-scrollbar {
|
||||
width: 4px; /* Width of the scrollbar */
|
||||
}
|
||||
|
||||
.departments-container::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.1); /* Track background color */
|
||||
border-radius: 10px; /* Rounded corners for the track */
|
||||
}
|
||||
|
||||
.departments-container::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(74, 98, 138, 0.8); /* Scrollbar handle color */
|
||||
border-radius: 10px; /* Rounded corners for the scrollbar handle */
|
||||
}
|
||||
|
||||
.departments-container::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(74, 98, 138, 1); /* Darker color on hover */
|
||||
}
|
||||
|
||||
.departments-container:empty {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.user-name{
|
||||
padding-top: 8px;
|
||||
font-size: 20px;
|
||||
letter-spacing: -0.5px;
|
||||
color: rgba(255,255,255, 1);
|
||||
}
|
||||
|
||||
.user-department{
|
||||
font-weight: lighter;
|
||||
padding-top: 8px;
|
||||
font-size: 14px;
|
||||
letter-spacing: -0.5px;
|
||||
color: rgba(255,255,255, 0.8);
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: none; /* Hidden by default */
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(5px);/* Black with opacity */
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: #fefefe;
|
||||
margin: 15% auto;
|
||||
padding: 16px;
|
||||
border: 1px solid #888;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
float: right;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.close-button:hover,
|
||||
.close-button:focus {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input{
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid #ccc; /* Light gray border */
|
||||
border-radius: 8px; /* Rounded corners */
|
||||
font-size: 12px;
|
||||
font-family: inherit;
|
||||
box-sizing: border-box;
|
||||
background-color: #f9f9f9; /* Light background */
|
||||
color: #333; /* Dark text color */
|
||||
transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for interaction */
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user