.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) } } }