gluestick/src/app/me/AboutMe.module.css

72 lines
1.2 KiB
CSS

.content {
max-width: 700px;
margin: 0 auto;
}
.profileGrid {
/* todo */
}
.divider {
width: 400px;
background-color: var(--fg-darker);
height: 1px;
border: none;
margin: 1rem auto;
}
.logout {
background: var(--bg-dark);
border: 0;
border-radius: 0.15rem;
cursor: pointer;
padding: 0.5em 1em;
}
/* stolen from prettyform */
.fancyInput {
background: var(--bg-dark);
border: 0;
border-radius: 0.15rem;
cursor: pointer;
padding: 0.5em 1em;
}
.authProviderList {
display: grid;
grid-template-columns: max-content min-content;
/* padding */
grid-gap: 0.5rem;
}
.authProviderList p {
/* flex spam is fun */
display: flex;
align-items: center;
height: 100%;
}
/* the !importants here piss me off but it wouldn't accept the property otherwise */
.progress {
background: linear-gradient(
to right,
var(--fg-darker) 50%,
var(--bg-dark) 50%
) !important;
background-size: 200% 100% !important;
background-position: right bottom !important;
transition: all 0s linear !important;
border: 0;
border-radius: 0.15rem;
cursor: pointer;
padding: 0.5em 1em;
}
/* when clicked */
.progress:active {
transition: all 3s linear !important;
background-position: left bottom !important;
}