91 lines
2.5 KiB
CSS
91 lines
2.5 KiB
CSS
.connection_profile_btn button{
|
|
width: 13rem;
|
|
height: 2.7rem;
|
|
background-color: #29517a;
|
|
border-radius: 0.6rem;
|
|
color: whitesmoke;
|
|
margin-bottom: 0.5rem;
|
|
font-size: 1rem;
|
|
border-color: transparent;
|
|
cursor: pointer;
|
|
}
|
|
.connection_profile_btn button:hover{
|
|
width: 12.7rem;
|
|
height: 2.7rem;
|
|
background-color: #2c6aa7;
|
|
border-radius: 0.6rem;
|
|
color: whitesmoke;
|
|
margin-bottom: 0.5rem;
|
|
font-size: 0.9rem;
|
|
border-color: transparent;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.connection_profile_btn button a{
|
|
text-decoration: none;
|
|
color: aliceblue;
|
|
}
|
|
|
|
|
|
/* Style the checkbox by default */
|
|
input[type="checkbox"].status {
|
|
width: 1.6rem; /* Adjust width as per your design */
|
|
height: 1.5rem; /* Adjust height as per your design */
|
|
border-radius: 0.5rem; /* Setting the border-radius */
|
|
margin-left: 2rem;
|
|
appearance: none; /* Remove default checkbox style */
|
|
border: 1.6px solid #124063; /* Border style for unchecked state */
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
|
|
/* Style the checkbox by default */
|
|
input[type="checkbox"].status:hover {
|
|
width: 1.4rem; /* Adjust width as per your design */
|
|
height: 1.4rem; /* Adjust height as per your design */
|
|
border-radius: 0.5rem; /* Setting the border-radius */
|
|
margin-left: 2rem;
|
|
appearance: none; /* Remove default checkbox style */
|
|
border: 1.6px solid #124063; /* Border style for unchecked state */
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
|
|
/* When the checkbox is checked */
|
|
input[type="checkbox"].status:checked {
|
|
background-color: rgb(14, 74, 153); /* Color for the checked state */
|
|
}
|
|
input[type="checkbox"].status:checked:hover {
|
|
background-color: rgb(21, 101, 205); /* Color for the checked state */
|
|
}
|
|
|
|
/* Custom tick inside the checkbox when checked */
|
|
input[type="checkbox"].status:checked::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 3px; /* Positioning the tick */
|
|
left: 7px;
|
|
width: 6px;
|
|
height: 12px;
|
|
border: solid white;
|
|
border-width: 0 2px 2px 0;
|
|
transform: rotate(40deg); /* Create the checkmark shape */
|
|
}
|
|
|
|
.popup-message {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
background-color: #4CAF50; /* Green background */
|
|
color: white; /* White text */
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
z-index: 1000;
|
|
opacity: 0; /* Initially hidden */
|
|
transition: opacity 0.5s ease-in-out;
|
|
}
|
|
|
|
.popup-message.show {
|
|
opacity: 1; /* Show the popup */
|
|
}
|