gomuks/web/src/ui/timeline/menu/index.css
2025-02-25 22:15:11 +02:00

136 lines
2 KiB
CSS

div.event-hover-menu {
position: absolute;
right: .5rem;
top: -1.5rem;
border: 1px solid var(--border-color);
border-radius: .5rem;
padding: .125rem;
> button {
width: 2rem;
height: 2rem;
}
}
div.event-hover-menu, div.event-fixed-menu {
display: flex;
gap: .25rem;
background-color: var(--background-color);
z-index: 1;
}
div.event-fixed-menu {
padding: .25rem;
justify-content: right;
flex-direction: row-reverse;
overflow-x: auto;
overflow-y: hidden;
> div.vertical-line {
width: 1px;
flex-shrink: 0;
background-color: var(--border-color);
}
> button {
width: 3rem;
height: 3rem;
flex-shrink: 0;
&.redact-button {
color: var(--error-color);
}
}
}
div.context-menu {
position: fixed;
background-color: var(--background-color);
border-radius: .5rem;
border: 1px solid var(--border-color);
box-shadow: 0 0 1rem var(--modal-box-shadow-color);
display: flex;
flex-direction: column;
> hr {
margin: 0;
opacity: .2;
}
> button {
border-radius: 0;
padding: .5rem .75rem;
justify-content: left;
gap: .5rem;
> svg {
width: 1.5rem;
height: 1.5rem;
}
&:first-of-type {
border-radius: .5rem .5rem 0 0;
}
&:last-of-type {
border-radius: 0 0 .5rem .5rem;
}
&.redact-button {
color: var(--error-color);
}
}
&.event-context-menu, &.room-list-menu {
width: 10rem;
}
}
div.confirm-message-modal > form {
width: min(40rem, 80vw);
max-height: min(40rem, 80vh);
display: flex;
flex-direction: column;
gap: .5rem;
> h3 {
margin: 0;
}
> div.timeline-event-container {
margin: .5rem 0;
padding-left: .5rem;
border-left: 2px solid var(--border-color);
overflow: auto;
> div.timeline-event {
margin: 0;
padding: 0;
}
}
> input {
padding: 1rem;
outline: none;
border-radius: .25rem;
border: 1px solid var(--border-color);
}
> div.confirm-buttons {
display: flex;
justify-content: right;
> button {
padding: .5rem 1rem;
}
}
> div.output-preview {
> span.no-select {
user-select: none;
}
> code {
word-break: break-word;
}
}
}