411 lines
8.6 KiB
CSS
411 lines
8.6 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:linear-gradient(to bottom, #636f7b 40%, #213343 90%);
|
|
--table-head:#293c4d;
|
|
--button-color:#636f7b;
|
|
--table-border:#3a4d5f;
|
|
--box-shadow:rgba(255, 255, 255, 0.842);
|
|
--text-color: #ffffff;
|
|
}
|
|
|
|
|
|
/* General styling for the form container */
|
|
.usertable {
|
|
margin-top: 8rem;
|
|
background: var(--user-container); /* Semi-transparent white background */
|
|
backdrop-filter: blur(10px) saturate(180%); /* 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 */
|
|
margin-left: 20rem;
|
|
}
|
|
|
|
/* Header styling */
|
|
.usertable h3 {
|
|
margin-bottom: 20px;
|
|
font-size: 24px;
|
|
color:var(--text-color);
|
|
}
|
|
|
|
/* Styling for the image section */
|
|
|
|
/* Form container styling */
|
|
.form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Section styling for placing inputs side-by-side */
|
|
.top_sec {
|
|
display: flex;
|
|
gap: 20px; /* Space between columns */
|
|
}
|
|
|
|
/* Column styling */
|
|
.col-10, .col-40 {
|
|
flex: 1;
|
|
}
|
|
|
|
/* Container for label and input to stack them vertically */
|
|
.input-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
}
|
|
|
|
/* Labels */
|
|
label {
|
|
display: block;
|
|
font-weight: bold;
|
|
color: var(--text-color);
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
/* Input fields */
|
|
.input{
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
|
|
input[type="text"]:focus {
|
|
border-color: #007bff;
|
|
outline: none;
|
|
box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
|
|
}
|
|
|
|
.add_button{
|
|
margin-top: 1.7rem;
|
|
}
|
|
|
|
.add_button label a{
|
|
text-decoration: none;
|
|
color: var(--text-color);
|
|
}
|
|
.add_button label a:hover{
|
|
color: #0680ea;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.s_button.sb_btn{
|
|
background-color: var(--button-color);
|
|
color: var(--button-text);
|
|
width: 3rem;
|
|
}
|
|
/* Button styling (if you have any buttons) */
|
|
button {
|
|
background-color: #007bff;
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 4px;
|
|
padding: 10px 15px;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
|
|
|
|
.usertable.s_button{
|
|
width: 4rem;
|
|
}
|
|
|
|
.hidden{
|
|
display: none;
|
|
}
|
|
|
|
img.plus{
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
margin-top: 0.3rem;
|
|
}
|
|
img.minus{
|
|
width: 1.6rem;
|
|
height: 1.6rem;
|
|
margin-top: 0.3rem;
|
|
}
|
|
|
|
.s_button{
|
|
width: 6.6rem;
|
|
height: 3rem;
|
|
padding-left: 1rem;
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.sb_btn{
|
|
background-color:var(--button-color);
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 0.2rem;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.sb_btn:hover{
|
|
background-color: var(--hover-c);
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* Create Auth CSS */
|
|
.add_button {
|
|
margin-bottom: 0; /* Add spacing between the button and the fields */
|
|
}
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* Ensure that the add and remove buttons do not move */
|
|
.image {
|
|
margin-top: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Add this to your create_auth.css file */
|
|
|
|
/* Additional fields container */
|
|
/* Additional fields container */
|
|
#additional-fields-container {
|
|
margin-top: 20px;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Hide additional fields by default */
|
|
#additional-fields-container.hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* Styling for the additional fields */
|
|
.additional-fields {
|
|
border: 1px solid #ddd;
|
|
padding: 20px;
|
|
margin-bottom: 10px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px var(--box-shadow);
|
|
background: var(--user-container); /* Match the background with the form */
|
|
}
|
|
|
|
/* Group for input fields only */
|
|
.input-fields-group {
|
|
display: flex;
|
|
justify-content: space-between; /* Distributes space between the input fields */
|
|
flex-wrap: wrap;
|
|
margin-bottom: 15px; /* Space between inputs and dropdowns */
|
|
}
|
|
|
|
/* Input fields styling */
|
|
.input-fields-group .input-group {
|
|
flex: 1 1 30%; /* Each input field takes 30% of the container width */
|
|
min-width: 200px; /* Prevents the input from shrinking too small */
|
|
margin-right: 10px; /* Add spacing between input fields */
|
|
}
|
|
|
|
/* Remove margin-right from the last input field to avoid extra spacing */
|
|
.input-fields-group .input-group:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
/* Labels styling: positioned at the top of each input */
|
|
.input-group label {
|
|
display: block;
|
|
font-weight: bold;
|
|
color: var(--text-color);
|
|
margin-bottom: 5px;
|
|
text-align: left; /* Align labels to the left */
|
|
}
|
|
|
|
/* Input field styling */
|
|
.input-group input[type="text"] {
|
|
width: 100%; /* Full width within each flex container */
|
|
padding: 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
/* Dropdowns styling */
|
|
.dropdown-group {
|
|
margin-bottom: 15px; /* Space between dropdowns */
|
|
}
|
|
|
|
.dropdown-group label {
|
|
display: block;
|
|
font-weight: bold;
|
|
color: var(--text-color);
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.dropdown-group select {
|
|
width: 35%; /* Full width for dropdowns */
|
|
padding: 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
/* Responsive behavior: stack fields vertically on smaller screens */
|
|
@media screen and (max-width: 768px) {
|
|
.input-fields-group {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.input-fields-group .input-group {
|
|
width: 100%;
|
|
margin-right: 0;
|
|
margin-bottom: 15px; /* Space between rows */
|
|
}
|
|
}
|
|
|
|
|
|
.input-group {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* CONDITIONAL DROP DOWN STYLING */
|
|
/* Ensure dropdown containers and associated fields are in the same row */
|
|
.dropdown1-container {
|
|
display: flex;
|
|
gap: 7px; /* Space between items */
|
|
margin-bottom: 15px; /* Space between rows */
|
|
flex-wrap: wrap; /* Allows wrapping for responsive design */
|
|
align-items: flex-start; /* Align items at the start of the container */
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
/* Ensure each item in the row has a minimum width of 18rem */
|
|
.dropdown-group, #second-dropdown, #value-input-group {
|
|
min-width: 15rem; /* Minimum width for each item */
|
|
}
|
|
|
|
/* Ensure dropdown and associated fields have the same width */
|
|
.dropdown-group select,
|
|
#value-input-group input[type="text"] {
|
|
width: 15rem; /* Full width within the container */
|
|
}
|
|
|
|
/* Additional styling for consistent appearance */
|
|
.dropdown-group label {
|
|
display: block;
|
|
font-weight: bold;
|
|
color: var(--text-color);
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.dropdown-group select,
|
|
#value-input-group input[type="text"] {
|
|
width: 18rem; /* Full width within the container */
|
|
padding: 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
|
|
|
|
/* Ensure proper spacing and alignment */
|
|
#second-dropdown, #value-input-group{
|
|
margin-top: 0; /* Remove margin-top to align with the top of the container */
|
|
}
|
|
|
|
.dropdown2-container {
|
|
display: flex;
|
|
align-items: flex-start; /* Align items at the top */
|
|
gap: 20px; /* Spacing between dropdowns */
|
|
width: 38rem;
|
|
}
|
|
|
|
.dropdown-group {
|
|
min-width: 18rem; /* Set each dropdown group to have a minimum width */
|
|
}
|
|
|
|
#dropdown2, #role-values, #access-duration, #unregistration-date-input {
|
|
width: 18rem; /* Ensure the dropdowns and input fields take the full width of their container */
|
|
}
|
|
|
|
.dropdown-group label {
|
|
display: block;
|
|
margin-bottom: 5px; /* Space between label and dropdown */
|
|
}
|
|
|
|
|
|
/* Responsive behavior for smaller screens */
|
|
@media screen and (max-width: 768px) {
|
|
.dropdown1-container {
|
|
flex-direction: column; /* Stack items vertically on smaller screens */
|
|
}
|
|
|
|
.dropdown-group, #second-dropdown, #value-input-group {
|
|
min-width: 18rem; /* Full width on smaller screens */
|
|
}
|
|
}
|
|
|
|
.action-img{
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 2.8rem;
|
|
margin-top: 1.8rem;
|
|
align-items: center;
|
|
gap: 0;
|
|
}
|
|
|
|
img.add{
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
cursor: pointer;
|
|
margin-bottom:0.1rem;
|
|
padding: 0;
|
|
}
|
|
img.remove{
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
cursor: pointer;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
img.add:hover{
|
|
content: url(../images/add_hover.png);
|
|
}
|
|
img.remove:hover{
|
|
content: url(../images/minus_hover.png);
|
|
}
|
|
|
|
img.clone{
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
cursor: pointer;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
img.declone{
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
cursor: pointer;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|