41d213855d
Fixed an issue where the Sensitve Content Warning Module did not automatically update to `dark` theme when `theme-auto` was applied.
86 lines
No EOL
2 KiB
CSS
86 lines
No EOL
2 KiB
CSS
/* Optional "Sensitive Content" Slide-Down Panel
|
|
------------------------------------------------
|
|
By default, it's collapsed (max-height: 0) and
|
|
pushes content down in normal flow when open.
|
|
*/
|
|
|
|
/* This defaults to a red button style, but you can use any
|
|
button styling from `brands.css` or `brands-extended`.css
|
|
or create your own! */
|
|
.button-sensitive {
|
|
--button-text: #ffffff;
|
|
--button-background: #D72638;
|
|
--button-border: 1px solid #ffffff;
|
|
}
|
|
|
|
/* 1) Container */
|
|
.slide-container {
|
|
margin: 0;
|
|
}
|
|
|
|
/* 2) The slide-down panel starts collapsed */
|
|
.sensitive-panel {
|
|
margin-top: -1rem;
|
|
margin-bottom: 1rem;
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.3s ease;
|
|
border: none;
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
/* 3) When open, show border and expand */
|
|
.sensitive-panel.open {
|
|
max-height: 300px;
|
|
border: 1px solid #ccc;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* 4) The panel's content area */
|
|
.sensitive-panel__content {
|
|
position: relative;
|
|
background-color: #fff;
|
|
color: #000;
|
|
padding: 1rem;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Basic spacing inside the panel */
|
|
.sensitive-panel__content p {
|
|
margin: 1rem 0;
|
|
}
|
|
.sensitive-panel__content .button {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
/* ------------------------------------
|
|
Dark theme support (forced .theme-dark)
|
|
------------------------------------ */
|
|
:root.theme-dark .sensitive-panel__content {
|
|
background-color: #121212;
|
|
color: #ffffff;
|
|
}
|
|
:root.theme-dark .sensitive-panel.open {
|
|
border-color: #444;
|
|
}
|
|
|
|
/* ------------------------------------
|
|
Auto theme support (.theme-auto):
|
|
Light by default, switch on system dark
|
|
------------------------------------ */
|
|
/* Light defaults if system is light */
|
|
:root.theme-auto .sensitive-panel__content {
|
|
background-color: #fff;
|
|
color: #000;
|
|
}
|
|
|
|
/* Dark overrides if system is dark */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root.theme-auto .sensitive-panel__content {
|
|
background-color: #121212;
|
|
color: #ffffff;
|
|
}
|
|
:root.theme-auto .sensitive-panel.open {
|
|
border-color: #444;
|
|
}
|
|
} |