YasinOnm08/interstellar_ai
0
0
Fork 0
forked from React-Group/interstellar_ai
Code Pull requests Activity

Added a first login draft

Browse source
This commit is contained in:
sageTheDM 2024-09-20 10:00:54 +02:00
parent ed6e812b6c
commit 464df4adac
8 changed files with 653 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

116
app/styles/Login.css Normal file
View file

@ -0,0 +1,116 @@
.login-button {
position: absolute;
top: 5px;
right: 10px;
z-index: 9999; /* Highest z-index for the login button */
margin: 1px;
}
.login-button button {
padding: 10px 20px;
background-color: var(--input-button-color);
color: var(--text-color);
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.login-button button:hover {
background-color: var(--input-button-hover-color);
}
/* Overlay for popup - full screen and centered */
.popup-overlay {
position: fixed; /* Fixed to cover the entire viewport */
top: 0; /* Ensure it starts from the top */
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 10000; /* Higher than the header to cover the screen */
}
/* Popup content box */
.popup-content {
background: var(--background-color);
color: var(--text-color);
padding: 30px;
border-radius: 10px;
width: 300px;
text-align: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
/* Input styles */
.popup-content input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid var(--input-border-color);
border-radius: 5px;
font-size: 16px;
transition: border-color 0.3s;
}
.popup-content input:focus {
border-color: var(--input-button-color);
outline: none; /* Remove default outline */
}
/* Close button */
.close-popup {
background: red; /* Exception to the rule */
color: var(--text-color);
border: none;
border-radius: 5px;
padding: 5px 10px;
cursor: pointer;
margin-top: 20px;
}
.log-into-account {
background: green; /* Exception to the rule */
color: var(--text-color);
border: none;
border-radius: 5px;
padding: 5px 10px;
cursor: pointer;
margin-top: 20px;
}
/* Footer section */
.popup-footer {
margin-top: 15px;
}
.popup-footer button {
margin-right: 10px;
padding: 8px 15px;
background-color: var(--input-button-color);
color: var(--text-color);
border: none;
border-radius: 5px;
transition: background-color 0.3s;
}
.popup-footer button:hover {
background-color: var(--input-button-hover-color);
}
.popup-footer a {
color: var(--user-message-color);
text-decoration: none;
}
.popup-footer a:hover {
text-decoration: underline;
}
.popup-content p {
color: var(--pop-up-text);
margin: 10px;
}