owncast/web/styles/chat.scss
2021-02-02 11:02:38 -08:00

123 lines
2.0 KiB
SCSS

.chat-messages {
.ant-table-small .ant-table-selection-column {
width: 20px;
min-width: 20px;
}
.ant-table-tbody > tr > td {
transition: background-color 0.15s;
}
.ant-table-row.hidden {
.ant-table-cell {
color: rgba(0,0,0,.25)
}
@media (prefers-color-scheme: dark) {
.ant-table-cell {
color: rgba(255,255,255,.25)
}
}
}
.ant-table-cell {
font-size: 12px;
&.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: .5rem 0;
padding: .5rem;
border: 1px solid #ccc;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
border-radius: 4px;
opacity: .5;
&.active {
opacity: 1;
.label {
color: #000;
}
@media (prefers-color-scheme: dark) {
.label {
color: #fff;
}
}
}
.label {
font-size: .75rem;
color: #666;
margin-right: .5rem;
}
button {
margin: 0 .2rem;
font-size: .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 .15s;
.outcome-icon {
margin-right: .5rem;
}
&.hidden {
opacity: .25;
&:hover {
opacity: 1;
}
}
.ant-btn {
.anticon {
opacity: .5;
}
&:hover {
.anticon {
opacity: 1;
}
}
}
.ant-btn-text:hover {
background-color: rgba(0,0,0,.1)
}
@media (prefers-color-scheme: dark) {
.ant-btn-text:hover {
background-color: rgba(255,255,255,.3)
}
}
}