snort/packages/app/src/Element/Reactions.css

95 lines
1.7 KiB
CSS

.reactions-modal .modal-body {
padding: 24px 32px;
background-color: #1b1b1b;
border-radius: 16px;
position: relative;
min-height: 33vh;
}
.light .reactions-modal .modal-body {
background-color: var(--note-bg);
}
@media (max-width: 720px) {
.reactions-modal .modal-body {
padding: 12px 16px;
max-width: calc(100vw - 32px);
}
}
.reactions-modal .modal-body .close {
position: absolute;
top: 12px;
right: 16px;
color: var(--font-secondary-color);
cursor: pointer;
}
.reactions-modal .modal-body .close:hover {
color: var(--font-tertiary-color);
}
.reactions-modal .modal-body .reactions-header {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 32px;
}
.reactions-modal .modal-body .reactions-header h2 {
margin: 0;
flex-grow: 1;
font-weight: 600;
font-size: 16px;
line-height: 19px;
}
.reactions-modal .modal-body .body {
overflow: scroll;
height: 40vh;
-ms-overflow-style: none; /* for Internet Explorer, Edge */
scrollbar-width: none; /* Firefox */
}
.reactions-modal .modal-body .body::-webkit-scrollbar {
display: none;
}
.reactions-item {
display: grid;
grid-template-columns: 52px auto;
align-items: center;
margin-bottom: 24px;
}
.reactions-item .reaction-icon {
display: flex;
align-items: center;
justify-content: center;
}
.reactions-item .follow-button {
margin-left: auto;
}
.reactions-item .zap-reaction-icon {
width: 52px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.reactions-item .zap-amount {
margin-top: 10px;
font-weight: 500;
font-size: 14px;
line-height: 17px;
}
@media (max-width: 520px) {
.reactions-modal .modal-body .tab.disabled {
display: none;
}
}