forked from Mirrors/gomuks
276 lines
4.3 KiB
CSS
276 lines
4.3 KiB
CSS
div.right-panel {
|
|
border-left: 1px solid var(--border-color);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
|
|
> div.right-panel-header {
|
|
height: 3.5rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
vertical-align: center;
|
|
padding: 0 .25rem;
|
|
justify-content: space-between;
|
|
|
|
div.left-side {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
div.panel-name {
|
|
margin-left: .25rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
button {
|
|
height: 2.5rem;
|
|
width: 2.5rem;
|
|
}
|
|
}
|
|
|
|
> div.right-panel-content {
|
|
flex: 1;
|
|
overflow: auto;
|
|
}
|
|
}
|
|
|
|
div.right-panel-content.pinned-messages {
|
|
padding: .5rem;
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
|
|
> div.pinned-event:not(:first-child) {
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding-bottom: .5rem;
|
|
}
|
|
|
|
> div.empty {
|
|
margin: auto;
|
|
}
|
|
}
|
|
|
|
div.right-panel-content.user {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 1rem;
|
|
|
|
div.avatar-container {
|
|
width: calc((var(--right-panel-width) - 4rem));
|
|
height: calc((var(--right-panel-width) - 4rem));
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 1rem;
|
|
flex-shrink: 0;
|
|
|
|
> img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
div.displayname {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
div.userid {
|
|
text-align: center;
|
|
font-family: var(--monospace-font-stack);
|
|
}
|
|
|
|
div.userid, div.displayname {
|
|
/* Ensure names aren't too long */
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 4;
|
|
-webkit-box-orient: vertical;
|
|
word-break: break-word;
|
|
}
|
|
|
|
hr {
|
|
width: 100%;
|
|
opacity: .2;
|
|
}
|
|
|
|
p {
|
|
margin: .5rem 0;
|
|
}
|
|
|
|
h4 {
|
|
margin: 0 0 .5rem;
|
|
}
|
|
|
|
h5 {
|
|
margin: 0 0 .25rem;
|
|
}
|
|
|
|
button.show-more {
|
|
width: 100%;
|
|
padding: .25rem 1rem;
|
|
}
|
|
|
|
.user-info-loader {
|
|
display: flex !important;
|
|
justify-content: center;
|
|
}
|
|
|
|
p.verified-message {
|
|
display: flex;
|
|
gap: .25rem;
|
|
font-weight: bold;
|
|
|
|
&.verified {
|
|
color: var(--primary-color-dark);
|
|
}
|
|
&.tofu-broken {
|
|
color: darkorange;
|
|
}
|
|
}
|
|
|
|
div.devices > details > summary > h4 {
|
|
display: inline-block;
|
|
}
|
|
|
|
div.devices > details > ul {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
gap: .25rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
li.device {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: .25rem;
|
|
|
|
> .icon-wrapper {
|
|
height: 1.5rem;
|
|
width: 1.5rem;
|
|
|
|
&.trust-blacklisted, &.trust-unverified.has-master-key {
|
|
color: var(--error-color);
|
|
}
|
|
|
|
&.trust-cross-signed-untrusted, &.trust-unverified.no-master-key {
|
|
color: darkorange;
|
|
}
|
|
|
|
&.trust-verified, &.trust-cross-signed-verified {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
&.trust-cross-signed-tofu {
|
|
color: var(--primary-color-dark);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.errors {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: .5rem;
|
|
|
|
> div.error {
|
|
display: flex;
|
|
gap: .25rem;
|
|
|
|
> p {
|
|
margin: 0;
|
|
}
|
|
|
|
> div.icon {
|
|
margin-top: .125rem;
|
|
color: var(--error-color);
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.right-panel-content.members {
|
|
overflow: hidden;
|
|
|
|
> input.member-filter {
|
|
border: none;
|
|
outline: none;
|
|
padding: 1rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
> div.member-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: auto;
|
|
|
|
> div.member {
|
|
display: grid;
|
|
column-gap: .5rem;
|
|
cursor: var(--clickable-cursor);
|
|
|
|
content-visibility: auto;
|
|
contain-intrinsic-height: 3rem;
|
|
height: 3rem;
|
|
padding: .25rem;
|
|
align-items: center;
|
|
|
|
grid-template:
|
|
"avatar displayname" 3rem
|
|
/ 2.5rem 1fr;
|
|
|
|
&:hover {
|
|
grid-template:
|
|
"avatar displayname" auto
|
|
"avatar userid" auto
|
|
/ 2.5rem 1fr;
|
|
|
|
> div.user-id {
|
|
display: block;
|
|
align-self: start;
|
|
}
|
|
|
|
> div.displayname {
|
|
align-self: end;
|
|
}
|
|
}
|
|
|
|
> div.displayname, > div.user-id {
|
|
overflow: hidden;
|
|
text-wrap: nowrap;
|
|
text-overflow: ellipsis;
|
|
user-select: none;
|
|
}
|
|
|
|
> div.displayname {
|
|
grid-area: displayname;
|
|
}
|
|
|
|
> img.avatar {
|
|
grid-area: avatar;
|
|
}
|
|
|
|
> div.user-id {
|
|
grid-area: userid;
|
|
font-family: var(--monospace-font-stack);
|
|
font-size: .75rem;
|
|
opacity: .7;
|
|
display: none;
|
|
}
|
|
|
|
&:hover, &:focus {
|
|
background-color: var(--light-hover-color);
|
|
}
|
|
}
|
|
|
|
> button {
|
|
border-radius: 0;
|
|
padding: .5rem;
|
|
}
|
|
}
|
|
}
|