gluestick/src/components/Connection.module.css
2023-04-28 16:09:12 -04:00

57 lines
869 B
CSS

.connection {
padding: 1rem 2rem;
background-color: var(--bg-dark);
margin: 1rem 0;
border-radius: 0.25rem;
width: 300px;
display: flex;
flex-flow: row nowrap;
column-gap: 1rem;
align-items: center;
text-align: left;
}
.connection svg {
width: 3rem;
height: 3rem;
margin-left: auto;
}
.connection .dot {
width: 1rem;
height: 1rem;
margin: 1rem;
background-color: var(--fg);
border-radius: 50%;
}
.iconContainer {
font-size: 2.5em;
margin-right: 0.75rem;
display: flex;
align-items: center;
}
.info {
display: flex;
flex-flow: column nowrap;
row-gap: 0.25rem;
}
.serviceName {
font-weight: 500;
font-stretch: expanded;
font-size: 1.3em;
}
.linkedIdentity {
opacity: 0.7;
}
.unavailable.unavailable {
background-color: var(--bg-darker);
color: var(--fg-dark);
opacity: 0.5;
cursor: not-allowed;
}