owncast/web/styles/chat.scss
2021-08-10 12:13:11 -07:00

149 lines
2.4 KiB
SCSS

// Users, Chat views
.chat-messages {
.ant-table-cell {
&.name-col {
text-overflow: ellipsis;
overflow: hidden;
}
&.toggle-col {
label {
font-size: 11px;
}
}
.message-contents {
overflow: auto;
max-height: 200px;
img {
position: relative;
margin-top: -5px;
width: 3rem;
padding: 0.25rem;
}
p {
margin-bottom: 0;
}
}
}
.bulk-editor {
margin: 0.5rem 0;
padding: 0.5rem;
border: 1px solid var(--textfield-border);
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
border-radius: 4px;
&.active {
.label {
color: var(--black-3);
}
}
.label {
font-size: 0.75rem;
color: var(--white-50);
margin-right: 0.5rem;
}
button {
margin: 0 0.2rem;
font-size: 0.75rem;
}
}
}
.ant-table-filter-dropdown {
max-width: 250px;
}
.toggle-switch {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
justify-content: flex-end;
transition: opacity 0.15s;
.outcome-icon {
margin-right: 0.5rem;
}
&.hidden {
opacity: 0.25;
&:hover {
opacity: 1;
}
}
.ant-btn {
.anticon {
opacity: 0.5;
}
&:hover {
.anticon {
opacity: 1;
}
}
}
.ant-btn-text:hover {
background-color: var(--black-35);
}
}
.blockuser-popover {
max-width: 400px;
}
.user-item-container {
// reset <button> properties
border: none;
background: none;
text-align: left;
padding: 0;
margin: 0;
cursor: pointer;
outline: none;
.display-name {
color: var(--white);
border-bottom: 1px dotted var(--white-50);
}
&:hover {
.display-name {
border-color: var(--white);
}
}
}
.user-details {
h5 {
color: var(--white);
}
.created-at {
font-size: 0.75em;
font-style: italic;
}
.connection-info {
font-size: 0.88em;
}
.previous-names-list {
font-size: 0.88em;
.user-name-item {
font-family: monospace;
}
.latest {
font-style: italic;
.user-name-item {
font-weight: bold;
font-style: normal;
color: var(--pink);
}
}
}
.ant-divider {
border-color: var(--white-25);
}
}
.block-user-button {
text-transform: capitalize;
}