From 123fb228086df7120b6e255aba0d80978493b996 Mon Sep 17 00:00:00 2001 From: Florian Date: Wed, 9 Sep 2020 18:38:08 +0200 Subject: [PATCH 1/2] double font size on overlays to improve visibility --- peertube-plugin-video-annotation/assets/videojs-overlay.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/peertube-plugin-video-annotation/assets/videojs-overlay.css b/peertube-plugin-video-annotation/assets/videojs-overlay.css index 3ba5a57..39eb62b 100644 --- a/peertube-plugin-video-annotation/assets/videojs-overlay.css +++ b/peertube-plugin-video-annotation/assets/videojs-overlay.css @@ -1 +1 @@ -.video-js .vjs-overlay{color:#fff;position:absolute;text-align:center}.video-js .vjs-overlay-no-background{max-width:33%}.video-js .vjs-overlay-background{background-color:#646464;background-color:rgba(255,255,255,0.4);border-radius:3px;padding:10px;width:33%}.video-js .vjs-overlay-top-left{top:5px;left:5px}.video-js .vjs-overlay-top{left:50%;margin-left:-16.5%;top:5px}.video-js .vjs-overlay-top-right{right:5px;top:5px}.video-js .vjs-overlay-right{right:5px;top:50%;transform:translateY(-50%)}.video-js .vjs-overlay-bottom-right{bottom:3.5em;right:5px}.video-js .vjs-overlay-bottom{bottom:3.5em;left:50%;margin-left:-16.5%}.video-js .vjs-overlay-bottom-left{bottom:3.5em;left:5px}.video-js .vjs-overlay-left{left:5px;top:50%;transform:translateY(-50%)}.video-js .vjs-overlay-center{left:50%;margin-left:-16.5%;top:50%;transform:translateY(-50%)}.video-js .vjs-no-flex .vjs-overlay-left,.video-js .vjs-no-flex .vjs-overlay-center,.video-js .vjs-no-flex .vjs-overlay-right{margin-top:-15px} +.video-js .vjs-overlay{font-size:2rem;color:#fff;position:absolute;text-align:center}.video-js .vjs-overlay-no-background{max-width:33%}.video-js .vjs-overlay-background{background-color:#646464;background-color:rgba(255,255,255,0.4);border-radius:3px;padding:10px;width:33%}.video-js .vjs-overlay-top-left{top:5px;left:5px}.video-js .vjs-overlay-top{left:50%;margin-left:-16.5%;top:5px}.video-js .vjs-overlay-top-right{right:5px;top:5px}.video-js .vjs-overlay-right{right:5px;top:50%;transform:translateY(-50%)}.video-js .vjs-overlay-bottom-right{bottom:3.5em;right:5px}.video-js .vjs-overlay-bottom{bottom:3.5em;left:50%;margin-left:-16.5%}.video-js .vjs-overlay-bottom-left{bottom:3.5em;left:5px}.video-js .vjs-overlay-left{left:5px;top:50%;transform:translateY(-50%)}.video-js .vjs-overlay-center{left:50%;margin-left:-16.5%;top:50%;transform:translateY(-50%)}.video-js .vjs-no-flex .vjs-overlay-left,.video-js .vjs-no-flex .vjs-overlay-center,.video-js .vjs-no-flex .vjs-overlay-right{margin-top:-15px} From 12ecdd734d544c1e9d162bb8b7e19171bbce96b6 Mon Sep 17 00:00:00 2001 From: Florian Schmitt Date: Thu, 10 Sep 2020 10:14:00 +0300 Subject: [PATCH 2/2] make font size for overlays bigger and responsive --- peertube-plugin-video-annotation/assets/style.css | 10 ++++++++++ .../assets/videojs-overlay.css | 2 +- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/peertube-plugin-video-annotation/assets/style.css b/peertube-plugin-video-annotation/assets/style.css index 09f570f..3e846f7 100644 --- a/peertube-plugin-video-annotation/assets/style.css +++ b/peertube-plugin-video-annotation/assets/style.css @@ -1,3 +1,13 @@ .vjs-overlay a { color: #210cbf; } + +/* make font size for overlays little bigger and responsive */ +.video-js .vjs-overlay { /* apply for screen sizes under 768px */ + font-size:1.2rem; +} +@media screen and (min-width: 768px) { /* apply for screen sizes bigger or equal 768px */ + .video-js .vjs-overlay { + font-size:1.4rem; + } +} \ No newline at end of file diff --git a/peertube-plugin-video-annotation/assets/videojs-overlay.css b/peertube-plugin-video-annotation/assets/videojs-overlay.css index 39eb62b..3ba5a57 100644 --- a/peertube-plugin-video-annotation/assets/videojs-overlay.css +++ b/peertube-plugin-video-annotation/assets/videojs-overlay.css @@ -1 +1 @@ -.video-js .vjs-overlay{font-size:2rem;color:#fff;position:absolute;text-align:center}.video-js .vjs-overlay-no-background{max-width:33%}.video-js .vjs-overlay-background{background-color:#646464;background-color:rgba(255,255,255,0.4);border-radius:3px;padding:10px;width:33%}.video-js .vjs-overlay-top-left{top:5px;left:5px}.video-js .vjs-overlay-top{left:50%;margin-left:-16.5%;top:5px}.video-js .vjs-overlay-top-right{right:5px;top:5px}.video-js .vjs-overlay-right{right:5px;top:50%;transform:translateY(-50%)}.video-js .vjs-overlay-bottom-right{bottom:3.5em;right:5px}.video-js .vjs-overlay-bottom{bottom:3.5em;left:50%;margin-left:-16.5%}.video-js .vjs-overlay-bottom-left{bottom:3.5em;left:5px}.video-js .vjs-overlay-left{left:5px;top:50%;transform:translateY(-50%)}.video-js .vjs-overlay-center{left:50%;margin-left:-16.5%;top:50%;transform:translateY(-50%)}.video-js .vjs-no-flex .vjs-overlay-left,.video-js .vjs-no-flex .vjs-overlay-center,.video-js .vjs-no-flex .vjs-overlay-right{margin-top:-15px} +.video-js .vjs-overlay{color:#fff;position:absolute;text-align:center}.video-js .vjs-overlay-no-background{max-width:33%}.video-js .vjs-overlay-background{background-color:#646464;background-color:rgba(255,255,255,0.4);border-radius:3px;padding:10px;width:33%}.video-js .vjs-overlay-top-left{top:5px;left:5px}.video-js .vjs-overlay-top{left:50%;margin-left:-16.5%;top:5px}.video-js .vjs-overlay-top-right{right:5px;top:5px}.video-js .vjs-overlay-right{right:5px;top:50%;transform:translateY(-50%)}.video-js .vjs-overlay-bottom-right{bottom:3.5em;right:5px}.video-js .vjs-overlay-bottom{bottom:3.5em;left:50%;margin-left:-16.5%}.video-js .vjs-overlay-bottom-left{bottom:3.5em;left:5px}.video-js .vjs-overlay-left{left:5px;top:50%;transform:translateY(-50%)}.video-js .vjs-overlay-center{left:50%;margin-left:-16.5%;top:50%;transform:translateY(-50%)}.video-js .vjs-no-flex .vjs-overlay-left,.video-js .vjs-no-flex .vjs-overlay-center,.video-js .vjs-no-flex .vjs-overlay-right{margin-top:-15px}