Even tighter CSP
Will this fix it? Remove inline script and style from demo Okay I'm dumb Ugh
This commit is contained in:
daudix
40
content/demo/demo.css
Normal file
40
content/demo/demo.css
Normal file
@ -0,0 +1,40 @@
|
||||
#color-picker-container {
|
||||
-webkit-backdrop-filter: var(--blur);
|
||||
position: fixed;
|
||||
transform: translateX(calc(-100% + 1rem));
|
||||
z-index: 1;
|
||||
backdrop-filter: var(--blur);
|
||||
transition: var(--transition);
|
||||
inset-block-end: 1rem;
|
||||
inset-inline-start: 0;
|
||||
box-shadow: var(--edge-highlight), var(--shadow-glass);
|
||||
border-start-end-radius: var(--rounded-corner);
|
||||
border-end-end-radius: var(--rounded-corner);
|
||||
background-color: var(--nav-bg);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
#color-picker-container:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
#color-picker-container label {
|
||||
margin-inline-end: 0.25rem;
|
||||
color: var(--fg-muted-4);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
:root[dir*="rtl"] #color-picker-container {
|
||||
transform: translateX(calc(100% - 1rem));
|
||||
}
|
||||
|
||||
:root[dir*="rtl"] #color-picker-container:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
#color-picker-light,
|
||||
#color-picker-dark,
|
||||
#contrast-color-light,
|
||||
#contrast-color-dark {
|
||||
margin-inline-end: 0.25rem;
|
||||
}
|
||||
91
content/demo/demo.js
Normal file
91
content/demo/demo.js
Normal file
@ -0,0 +1,91 @@
|
||||
const colorPickerLight = document.querySelector("#color-picker-light");
|
||||
const colorPickerDark = document.querySelector("#color-picker-dark");
|
||||
const contrastCheckboxLight = document.querySelector("#contrast-color-light");
|
||||
const contrastCheckboxDark = document.querySelector("#contrast-color-dark");
|
||||
|
||||
let accentColorLight = colorPickerLight.value;
|
||||
let accentColorDark = colorPickerDark.value;
|
||||
|
||||
colorPickerLight.addEventListener("input", updateAccentColorLight);
|
||||
colorPickerDark.addEventListener("input", updateAccentColorDark);
|
||||
contrastCheckboxLight.addEventListener("change", updateStyles);
|
||||
contrastCheckboxDark.addEventListener("change", updateStyles);
|
||||
|
||||
function updateAccentColorLight() {
|
||||
accentColorLight = colorPickerLight.value;
|
||||
updateStyles();
|
||||
}
|
||||
|
||||
function updateAccentColorDark() {
|
||||
accentColorDark = colorPickerDark.value;
|
||||
updateStyles();
|
||||
}
|
||||
|
||||
function updateStyles() {
|
||||
const contrastColorLight = contrastCheckboxLight.checked;
|
||||
const contrastColorDark = contrastCheckboxDark.checked;
|
||||
|
||||
let styleElement = document.getElementById("dynamic-styles");
|
||||
|
||||
if (!styleElement) {
|
||||
styleElement = document.createElement("style");
|
||||
styleElement.id = "dynamic-styles";
|
||||
document.head.appendChild(styleElement);
|
||||
}
|
||||
|
||||
let styles = `
|
||||
:root {
|
||||
--accent-color: ${accentColorLight};
|
||||
}
|
||||
[data-theme="dark"] {
|
||||
--accent-color: ${accentColorDark};
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
--accent-color: ${accentColorDark};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
if (contrastColorLight) {
|
||||
styles += `
|
||||
:root {
|
||||
--contrast-color: rgb(0 0 0 / 0.8);
|
||||
}
|
||||
`;
|
||||
} else {
|
||||
styles += `
|
||||
:root {
|
||||
--contrast-color: #fff;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
if (contrastColorDark) {
|
||||
styles += `
|
||||
[data-theme="dark"] {
|
||||
--contrast-color: rgb(0 0 0 / 0.8);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
--contrast-color: rgb(0 0 0 / 0.8);
|
||||
}
|
||||
}
|
||||
`;
|
||||
} else {
|
||||
styles += `
|
||||
[data-theme="dark"] {
|
||||
--contrast-color: #fff;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
--contrast-color: #fff;
|
||||
}
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
styleElement.textContent = styles;
|
||||
}
|
||||
|
||||
updateStyles();
|
||||
@ -1,6 +1,8 @@
|
||||
+++
|
||||
title = "Demo Page"
|
||||
[extra]
|
||||
styles = ["demo/demo.css"]
|
||||
scripts = ["demo/demo.js"]
|
||||
katex = true
|
||||
archive = "This page is in fact not archived. It is only here to demonstrate the archival statement."
|
||||
trigger = "This page contains blackjack and hookers, and bad jokes such as this one."
|
||||
@ -678,141 +680,4 @@ You know, <span class="spoiler solid">Duckquill is a pretty dumb name.</span> I
|
||||
<input id="contrast-color-dark" class="switch" type="checkbox" checked />
|
||||
<label for="contrast-color-dark">Dark theme</label>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#color-picker-container {
|
||||
-webkit-backdrop-filter: var(--blur);
|
||||
position: fixed;
|
||||
transform: translateX(calc(-100% + 1rem));
|
||||
z-index: 1;
|
||||
backdrop-filter: var(--blur);
|
||||
transition: var(--transition);
|
||||
inset-block-end: 1rem;
|
||||
inset-inline-start: 0;
|
||||
box-shadow: var(--edge-highlight), var(--shadow-glass);
|
||||
border-start-end-radius: var(--rounded-corner);
|
||||
border-end-end-radius: var(--rounded-corner);
|
||||
background-color: var(--nav-bg);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
#color-picker-container:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
#color-picker-container label {
|
||||
margin-inline-end: 0.25rem;
|
||||
color: var(--fg-muted-4);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
:root[dir*="rtl"] #color-picker-container {
|
||||
transform: translateX(calc(100% - 1rem));
|
||||
}
|
||||
|
||||
:root[dir*="rtl"] #color-picker-container:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
#color-picker-light,
|
||||
#color-picker-dark,
|
||||
#contrast-color-light,
|
||||
#contrast-color-dark {
|
||||
margin-inline-end: 0.25rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
const colorPickerLight = document.querySelector("#color-picker-light");
|
||||
const colorPickerDark = document.querySelector("#color-picker-dark");
|
||||
const contrastCheckboxLight = document.querySelector("#contrast-color-light");
|
||||
const contrastCheckboxDark = document.querySelector("#contrast-color-dark");
|
||||
|
||||
let accentColorLight = colorPickerLight.value;
|
||||
let accentColorDark = colorPickerDark.value;
|
||||
|
||||
colorPickerLight.addEventListener("input", updateAccentColorLight);
|
||||
colorPickerDark.addEventListener("input", updateAccentColorDark);
|
||||
contrastCheckboxLight.addEventListener("change", updateStyles);
|
||||
contrastCheckboxDark.addEventListener("change", updateStyles);
|
||||
|
||||
function updateAccentColorLight() {
|
||||
accentColorLight = colorPickerLight.value;
|
||||
updateStyles();
|
||||
}
|
||||
|
||||
function updateAccentColorDark() {
|
||||
accentColorDark = colorPickerDark.value;
|
||||
updateStyles();
|
||||
}
|
||||
|
||||
function updateStyles() {
|
||||
const contrastColorLight = contrastCheckboxLight.checked;
|
||||
const contrastColorDark = contrastCheckboxDark.checked;
|
||||
|
||||
let styleElement = document.getElementById("dynamic-styles");
|
||||
|
||||
if (!styleElement) {
|
||||
styleElement = document.createElement("style");
|
||||
styleElement.id = "dynamic-styles";
|
||||
document.head.appendChild(styleElement);
|
||||
}
|
||||
|
||||
let styles = `
|
||||
:root {
|
||||
--accent-color: ${accentColorLight};
|
||||
}
|
||||
[data-theme="dark"] {
|
||||
--accent-color: ${accentColorDark};
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
--accent-color: ${accentColorDark};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
if (contrastColorLight) {
|
||||
styles += `
|
||||
:root {
|
||||
--contrast-color: rgb(0 0 0 / 0.8);
|
||||
}
|
||||
`;
|
||||
} else {
|
||||
styles += `
|
||||
:root {
|
||||
--contrast-color: #fff;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
if (contrastColorDark) {
|
||||
styles += `
|
||||
[data-theme="dark"] {
|
||||
--contrast-color: rgb(0 0 0 / 0.8);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
--contrast-color: rgb(0 0 0 / 0.8);
|
||||
}
|
||||
}
|
||||
`;
|
||||
} else {
|
||||
styles += `
|
||||
[data-theme="dark"] {
|
||||
--contrast-color: #fff;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
--contrast-color: #fff;
|
||||
}
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
styleElement.textContent = styles;
|
||||
}
|
||||
|
||||
updateStyles();
|
||||
</script>
|
||||
<!-- End -->
|
||||
|
||||
Reference in New Issue
Block a user