UX:; scope details change (#24715)

This commit is contained in:
chapoi 2023-12-05 14:56:17 +02:00 committed by GitHub
parent a6c79aa27a
commit 3d710fa0b8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 62 additions and 55 deletions

View File

@ -1,21 +1,25 @@
details { details {
position: relative; position: relative;
background-color: var(--primary-very-low);
padding: 0.25rem 0.75rem;
margin-bottom: 0.5rem;
&:not([open]) { .topic-body .cooked &,
&:hover, .d-editor-preview & {
&:focus, background-color: var(--primary-very-low);
&:focus-within { padding: 0.25rem 0.75rem;
background-color: var(--d-hover); margin-bottom: 0.5rem;
&:not([open]) {
&:hover,
&:focus,
&:focus-within {
background-color: var(--d-hover);
}
} }
}
aside.quote .title, aside.quote .title,
blockquote, blockquote,
code { code {
background-color: rgba(var(--primary-rgb), 0.05); background-color: rgba(var(--primary-rgb), 0.05);
}
} }
} }
@ -66,55 +70,58 @@ summary::-webkit-details-marker {
display: none; display: none;
} }
.elided { .topic-body .cooked,
background-color: unset; .d-editor-preview {
padding: 0; .elided {
background-color: unset;
padding: 0;
&:not([open]) { &:not([open]) {
//specificity needed to overrule non-elided //specificity needed to overrule non-elided
&:hover, &:hover,
&:focus, &:focus,
&:focus-within { &:focus-within {
background-color: unset; background-color: unset;
}
summary:hover {
background: var(--d-hover);
}
} }
summary:hover { &[open] {
background: var(--d-hover); background: var(--primary-very-low);
padding: 0.5rem 0.75rem;
summary {
padding: 0;
}
}
summary:before {
content: "" !important;
display: none;
} }
}
&[open] {
background: var(--primary-very-low);
padding: 0.5rem 0.75rem;
summary { summary {
padding: 0; @include unselectable;
} display: flex;
} align-items: center;
justify-content: center;
text-align: center;
box-sizing: border-box;
margin: 0;
padding: 0.5rem 0.75rem;
color: var(--primary-medium);
background: var(--primary-very-low);
width: min-content;
line-height: 1;
summary:before { &:hover,
content: "" !important; &:focus,
display: none; &:focus-within {
} color: var(--primary);
cursor: pointer;
summary { }
@include unselectable;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
box-sizing: border-box;
margin: 0;
padding: 0.5rem 0.75rem;
color: var(--primary-medium);
background: var(--primary-very-low);
width: min-content;
line-height: 1;
&:hover,
&:focus,
&:focus-within {
color: var(--primary);
cursor: pointer;
} }
} }
} }