fipamo/public/assets/css/dash/init.css
Ro ac08c77813
Removed role from header, notification and login
Began the process of removing all invalid role attributes starting with the header, login, and notifications components. Updated the corresponding scripts as well. 

Made a few structural changes to the header to simply it and then tested it to ensure notification still worked.
2023-07-28 15:55:16 -07:00

114 lines
1.9 KiB
CSS

/* LOGIN */
section.login,
section[role="password-reset"],
section[role="restore-fresh"],
section[role="restore-backup"] {
margin: 15% auto;
padding: 10px;
width: 500px;
border-radius: 5px;
display: grid;
grid-template-columns: 28.5% 1fr;
gap: 10px;
visibility: visible;
}
section[role="restore-backup"] {
display: none;
visibility: hidden;
color: var(--white);
}
section.login form input {
width: 95%;
height: 30px;
padding: 5px;
margin-bottom: 10px;
}
section.login form button {
padding: 10px 5px;
width: 82%;
}
section.login form a {
padding: 10px 5px;
border-radius: 5px;
width: 10%;
height: 20px;
display: inline-block;
background: var(--tertiary);
vertical-align: top;
text-align: center;
margin: 0 0 0 10px;
font-weight: 600;
}
/* PASSWORD-RESET */
section[role="password-reset"] form button {
padding: 10px 5px;
width: 82%;
}
section[role="password-reset"] form input {
width: 95%;
height: 30px;
padding: 5px;
margin-bottom: 10px;
}
/* SITE RESTORE */
section[role="restore-fresh"] form button {
padding: 10px 5px;
width: 82%;
}
section[role="restore-fresh"] form input {
width: 95%;
height: 30px;
padding: 5px;
margin-bottom: 10px;
}
section[role="restore-backup"] form button {
padding: 10px 5px;
width: 82%;
}
section[role="restore-backup"] form input {
width: 95%;
height: 30px;
padding: 5px;
margin-bottom: 10px;
}
/* RESPONSIVE */
@media only screen and (max-width: 500px) {
section.login,
section[role="password-reset"],
section[role="restore-fresh"],
section[role="restore-backup"] {
width: 97%;
}
}
@media only screen and (max-width: 375px) {
section.login,
section[role="password-reset"],
section[role="restore-fresh"],
section[role="restore-backup"] {
grid-template-columns: 1fr;
}
section.login img,
section[role="password-reset"] img,
section[role="restore-fresh"] img,
section[role="restore-backup"] img {
width: 50px;
}
}