Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: details tag background colour (#24710)

This commit is contained in:
chapoi 2023-12-05 13:52:00 +02:00 committed by GitHub
parent 094d597ec8
commit 707acbe696
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 57 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
plugins/discourse-details/assets/stylesheets/details.scss
View File

@ -1,5 +1,22 @@
details { details {
position: relative; position: relative;
background-color: var(--primary-very-low);
padding: 0.25rem 0.75rem;
margin-bottom: 0.5rem;
&:not([open]) {
&:hover,
&:focus,
&:focus-within {
background-color: var(--d-hover);
}
}
aside.quote .title,
blockquote,
code {
background-color: rgba(var(--primary-rgb), 0.05);
}
} }
details > *, details > *,
@ -12,6 +29,13 @@ summary {
outline: none; outline: none;
} }
summary {
> p {
margin-block: 0;
padding-block: 1rem;
}
}
summary:first-of-type { summary:first-of-type {
cursor: pointer; cursor: pointer;
display: block; display: block;
@ -43,6 +67,30 @@ summary::-webkit-details-marker {
} }
.elided { .elided {
background-color: unset;
padding: 0;
&:not([open]) {
//specificity needed to overrule non-elided
&:hover,
&:focus,
&:focus-within {
background-color: unset;
}
summary:hover {
background: var(--d-hover);
}
}
&[open] {
background: var(--primary-very-low);
padding: 0.5rem 0.75rem;
summary {
padding: 0;
}
}
summary:before { summary:before {
content: "" !important; content: "" !important;
display: none; display: none;
@ -56,17 +104,17 @@ summary::-webkit-details-marker {
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
padding: 0; padding: 0.5rem 0.75rem;
color: var(--primary-medium); color: var(--primary-medium);
background: var(--primary-low); background: var(--primary-very-low);
border: 1px solid var(--primary-low-mid); width: min-content;
width: 1.5em;
line-height: 1; line-height: 1;
}
summary:hover { &:hover,
color: var(--primary); &:focus,
background: var(--primary-low-mid); &:focus-within {
border-color: currentColor; color: var(--primary);
cursor: pointer;
}
} }
} }