.glass-card {
margin: 10rem auto 0;
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 12px;
padding: 2rem;
max-width: 360px;
width: 100%;
box-sizing: border-box;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
color: var(--text-light);
min-height: 360px;
}
.glass-button {
margin-top: 1.5rem;
}
.auth-page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.auth-page .auth-wrapper {
flex: 1;
min-height: 0;
}
.auth-page .glass-card {
max-width: 480px;
width: 90%;
}
.content input[type="checkbox"], form input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 1.25rem;
height: 1.25rem;
margin: 0;
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 4px;
vertical-align: middle;
cursor: pointer;
position: relative;
transition: background 0.2s, border-color 0.2s;
}
.content input[type="checkbox"]:checked, form input[type="checkbox"]:checked {
background-color: var(--accent);
border: 1px solid var(--accent);
}
.content input[type="checkbox"]:checked::after, form input[type="checkbox"]:checked::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 4px;
height: 8px;
border: solid var(--text-light);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.content input[type="checkbox"]:hover, form input[type="checkbox"]:hover {
background-color: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.5);
}
.content .form-group label, form .form-group label {
display: inline-block;
margin-left: 0.5rem;
color: var(--text-light);
cursor: pointer;
user-select: none;
}
.content .form-group .checkbox-wrapper, form .form-group .checkbox-wrapper {
display: flex;
align-items: center;
margin-bottom: 0.5rem;
}
.content .form-group .checkbox-wrapper input[type="checkbox"] {
margin: 0;
}
.content .form-group .checkbox-wrapper label {
margin: 0 1rem 0 0.5rem;
}
.checkbox-wrapper {
display: inline-flex;
align-items: center;
margin-right: 1rem;
margin-bottom: 0.5rem;
}
.checkbox-wrapper input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 1.25rem;
height: 1.25rem;
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 4px;
cursor: pointer;
position: relative;
transition: background 0.2s, border-color 0.2s;
}
.checkbox-wrapper input[type="checkbox"]:checked {
background-color: var(--accent);
border: 1px solid var(--accent);
}
.checkbox-wrapper input[type="checkbox"]:checked::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 4px;
height: 8px;
border: solid var(--text-light);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.checkbox-wrapper input[type="checkbox"]:hover {
background-color: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.5);
}
.checkbox-wrapper label {
margin-left: 0.5rem;
color: var(--text-light);
cursor: pointer;
user-select: none;
}
.action-buttons {
display: flex;
gap: 0.5rem;
}
.action-buttons a.glass-button, .action-buttons form .glass-button {
display: inline-block;
padding: 0.5rem 1rem;
font-size: 0.9rem;
text-align: center;
text-decoration: none;
transition: background 0.2s;
}
.action-buttons a.glass-button {
display: inline-block;
width: auto;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.action-buttons form .glass-button {
display: inline-block;
width: auto;
}
.action-buttons a.glass-button:hover, .action-buttons form .glass-button:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.content table tbody tr td form, .content table tbody tr td a {
margin: 0;
padding: 0;
}
.action-buttons .glass-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 1rem;
margin: 0;
background-color: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 8px;
color: var(--text-light);
font-weight: bold;
font-size: 0.9rem;
text-decoration: none;
cursor: pointer;
transition: background 0.2s ease;
white-space: nowrap;
box-sizing: border-box;
}
.action-buttons .glass-button:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.action-buttons button.glass-button {
border: 0 none transparent;
background-clip: padding-box;
}
.auth-links {
display: flex;
flex-direction: column;
padding: 1em;
}
@media only screen and (max-width: 768px) {
html, body {
flex-direction: column;
}
}