summaryrefslogtreecommitdiff
path: root/ext/mixed/css/display.css
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-12-08 20:31:02 -0500
committerGitHub <noreply@github.com>2020-12-08 20:31:02 -0500
commit125c296eedf680ad7670544aa8f74d81fa9aa799 (patch)
treef91c4243fd08cad8258ec136228264d332569ab3 /ext/mixed/css/display.css
parent2be81cbb77f8a15f9049048078d69d5fee871f33 (diff)
Support frame resize on firefox (#1088)
* Add popup functions for getting/setting the frame size * Add frontend functions for getting/setting popup frame size * Expose display mode attribute on display HTML * Disable resizer on iframe * Add custom frame resizer handle * Add support for custom frame resizer
Diffstat (limited to 'ext/mixed/css/display.css')
-rw-r--r--ext/mixed/css/display.css50
1 files changed, 50 insertions, 0 deletions
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 605c0148..0a676a8f 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -1119,6 +1119,52 @@ button.action-button {
}
+/* Frame resizer */
+.frame-resizer-container {
+ position: fixed;
+ bottom: 0;
+ right: 0;
+ z-index: 100;
+ background: transparent;
+ pointer-events: none;
+ user-select: none;
+}
+.frame-resizer-sizer1 {
+ padding-top: 100%;
+ line-height: 0;
+}
+.frame-resizer-sizer2 {
+ display: inline-block;
+ overflow-x: hidden;
+ overflow-y: scroll;
+ vertical-align: bottom;
+}
+.frame-resizer-sizer2.frame-resizer-sizer2-with-min-size {
+ min-width: 1em;
+}
+.frame-resizer-svg {
+ display: block;
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ width: 75%;
+ height: 75%;
+}
+.frame-resizer-handle {
+ fill: var(--default-text-color);
+ opacity: 0.125;
+ cursor: se-resize;
+ pointer-events: auto;
+ transition:
+ fill var(--animation-duration) linear,
+ opacity var(--animation-duration) linear;
+}
+.frame-resizer-handle:hover {
+ fill: var(--accent-color);
+ opacity: 1;
+}
+
+
/* Conditional styles */
:root:not([data-enable-search-tags=true]) .tag[data-category=search] {
display: none;
@@ -1221,3 +1267,7 @@ button.action-button {
:root:not([data-glossary-layout-mode=compact]) .term-glossary-image-description {
display: block;
}
+
+:root[data-popup-display-mode=full-width] .frame-resizer-container {
+ display: none;
+}