gomuks/web/src/ui/settings/SettingsView.css
2024-12-20 16:37:12 +02:00

129 lines
2 KiB
CSS

div.settings-view {
div.room-details {
display: flex;
gap: .5rem;
img.avatar {
margin-top: 0.5rem;
}
div.room-name {
font-size: 1.2rem;
font-weight: bold;
text-overflow: ellipsis;
text-wrap: nowrap;
}
button.leave-room {
padding: .5rem 1rem;
&:hover, &:focus {
background-color: var(--error-color);
color: var(--inverted-text-color);
}
}
}
width: min(60rem, 80vw);
display: flex;
flex-direction: column;
h2, h3, h4 {
margin: 0;
}
summary > h3, summary > h4 {
display: inline;
}
table {
text-align: left;
tr {
height: 2.5rem;
}
div.preference {
display: flex;
&.select-preference > select {
padding: .25rem;
}
&.string-preference > input {
border: 1px solid var(--border-color);
padding: .25rem;
/* TODO make this less hacky */
width: 8rem;
}
}
}
> div.custom-css-input {
display: flex;
flex-direction: column;
gap: .5rem;
margin-right: 1rem;
> div.header {
display: flex;
gap: .5rem;
}
> textarea {
width: 100%;
box-sizing: border-box;
resize: vertical;
border: 1px solid var(--border-color);
outline: none;
height: 10rem;
min-height: 3rem;
font-family: var(--monospace-font-stack);
}
> div.vscode-wrapper {
position: fixed;
inset: 0;
z-index: 10;
background-color: var(--background-color);
> div.loader {
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
}
}
> div.buttons {
display: flex;
justify-content: right;
gap: .5rem;
> button {
padding: .5rem 1rem;
font-weight: bold;
&.delete:hover, &.delete:focus {
background-color: var(--error-color);
color: var(--inverted-text-color);
}
}
}
}
> div.misc-buttons > button {
padding: .5rem 1rem;
display: block;
&.logout {
margin-top: 2rem;
&:hover, &:focus {
background-color: var(--error-color);
color: var(--inverted-text-color);
}
}
}
}