77 lines
2.8 KiB
HTML
77 lines
2.8 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block extrahead %}
|
||
{{ super() }}
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pushfeedback@latest/dist/pushfeedback/pushfeedback.css" />
|
||
<style>
|
||
:root {
|
||
/* brand */
|
||
--feedback-primary-color: #09b5a5;
|
||
--feedback-highlight-color: #fed500;
|
||
/* stars etc */
|
||
|
||
/* modal shell / text */
|
||
--feedback-modal-content-bg-color: var(--background-color);
|
||
--feedback-modal-content-text-color: var(--font-color);
|
||
--feedback-modal-content-border-color: var(--primary-dimmed-color);
|
||
--feedback-modal-content-border-radius: 4px;
|
||
|
||
/* overlay */
|
||
--feedback-overlay-bg-color: rgba(0, 0, 0, .75);
|
||
|
||
/* rating buttons */
|
||
--feedback-modal-rating-button-color: var(--secondary-color);
|
||
--feedback-modal-rating-button-selected-color: var(--primary-color);
|
||
|
||
/* inputs */
|
||
--feedback-modal-input-bg-color: var(--feedback-dark-color);
|
||
--feedback-modal-input-text-color: var(--font-color);
|
||
--feedback-modal-input-border-color: var(--primary-dimmed-color);
|
||
--feedback-modal-input-border-color-focused: var(--primary-color);
|
||
|
||
/* submit / secondary buttons */
|
||
--feedback-modal-button-submit-bg-color: var(--primary-color);
|
||
--feedback-modal-button-submit-bg-color-hover: var(--primary-dimmed-color);
|
||
--feedback-modal-button-submit-text-color: var(--invert-font-color);
|
||
|
||
--feedback-modal-button-bg-color: transparent;
|
||
/* screenshot btn */
|
||
--feedback-modal-button-border-color: var(--primary-color);
|
||
--feedback-modal-button-icon-color: var(--primary-color);
|
||
|
||
--feedback-modal-footer-link: #7b7b7b;
|
||
--feedback-modal-button-text-color: #8e8e8e;
|
||
--feedback-modal-input-text-color: #b9c2c2;
|
||
--feedback-modal-button-bg-color-active: #46dbdc;
|
||
|
||
/* align with the value you really use in :root */
|
||
--header-height: 65px;
|
||
|
||
/* Push modal content down */
|
||
--feedback-modal-content-position-top: var(--header-height);
|
||
|
||
--feedback-modal-modal-wrapper-z-index: 1100;
|
||
/* > header’s 1000 */
|
||
--feedback-modal-content-z-index: 1101;
|
||
/* just in case */
|
||
--feedback-modal-header-text-color: #ebebeb;
|
||
}
|
||
|
||
feedback-modal::part(overlay) {
|
||
top: var(--header-height);
|
||
/* start below header */
|
||
height: calc(100vh - var(--header-height));
|
||
/* fill the rest */
|
||
|
||
|
||
}
|
||
</style>
|
||
<script type="module"
|
||
src="https://cdn.jsdelivr.net/npm/pushfeedback@latest/dist/pushfeedback/pushfeedback.esm.js"></script>
|
||
{% endblock %}
|
||
|
||
{% block footer %}
|
||
<feedback-button project="w8plzp8vjp" button-position="center-right" modal-position="sidebar-right">
|
||
Feedback
|
||
</feedback-button>
|
||
{% endblock %} |