From eec3b4ecccd49b2e5120c318cc1af788a08fd2fe Mon Sep 17 00:00:00 2001 From: Hans Kelson Date: Mon, 9 Sep 2024 17:37:23 -0400 Subject: [PATCH] Allow resizing slide thumbnails with CSS variable --- .../slides/static/slides/slide-thumbnail.css | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/OpenShow/slides/static/slides/slide-thumbnail.css b/OpenShow/slides/static/slides/slide-thumbnail.css index 8d9f148..27cee2a 100644 --- a/OpenShow/slides/static/slides/slide-thumbnail.css +++ b/OpenShow/slides/static/slides/slide-thumbnail.css @@ -1,11 +1,15 @@ +body { + --display-size-divisor: 10 +} + .slide-thumbnail .slide { min-width: 1920px; width: 1920px; min-height: 1080px; - transform: scale(0.1); - margin-right: calc(-1920px / 10); - margin-bottom: calc(-1080px / 10); - margin-left: calc(calc(100% - calc(1920px / 10)) / 2); + transform: scale(calc(1 / var(--display-size-divisor))); + margin-right: calc(-1920px / var(--display-size-divisor)); + margin-bottom: calc(-1080px / var(--display-size-divisor)); + margin-left: calc(calc(100% - calc(1920px / var(--display-size-divisor))) / 2); transform-origin: left top; background: black; align-self: center; @@ -13,8 +17,8 @@ } .slide-thumbnail { - max-width: calc(1920px / 10); - max-height: calc(1080px / 10); + max-width: calc(1920px / var(--display-size-divisor)); + max-height: calc(1080px / var(--display-size-divisor)); overflow: hidden; /*margin: 0.5rem;*/ outline: 1px solid var(--faded-fg);