From 7ba5b09a237f65aeebf93742160350a2bb9d05c4 Mon Sep 17 00:00:00 2001 From: Mark Firth Date: Wed, 8 Nov 2017 23:12:12 +1000 Subject: [PATCH 1/3] general.css Video Skin Class Stlye Improvement Previously, the global video element was styled to make it look better on the stand alone page. However; the class `.show-asset-light` is the video skin class assigned to the stand alone page only. Based on this, I have optimised the style on this class and removed parts no longer needed from the `video-player` class, thereby not affecting any other pages for areas only required on the stand alone page. --- public/assets/css/general.css | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/public/assets/css/general.css b/public/assets/css/general.css index 2d51a5a5..10fdd558 100644 --- a/public/assets/css/general.css +++ b/public/assets/css/general.css @@ -516,18 +516,22 @@ table { display: block; width: 100%; } - -#video-player { +#video-player, .show-asset-light { + padding: 6px; + border: 1px solid #555; background-color: #fff; - cursor: pointer; - margin: 0 auto; - margin-top: 2%; - border: 1px solid #d0d0d0; - padding:6px; } - +#video-player { + cursor: pointer; +} .show-asset-light { max-width: 50%; + margin: 0 auto; + margin-top: 2%; + padding: 6px; + border: 1px solid #a2a2a2; +//Optional Box Shadow - Looks better on a darker than white background. + box-shadow: 0 0 50px -6px rgba(0, 0, 0, 0.72); } /* item lists */ From 121e1e9e4c6d3f77dcda252fbc6c9d22bfea39d4 Mon Sep 17 00:00:00 2001 From: "Mark (Steve) Firth" Date: Fri, 10 Nov 2017 15:43:57 +1000 Subject: [PATCH 2/3] Optimised Code Removed and optimised the styles to limit duplicates and gave elements a block display to make sure centering and image sizes act like they should. Move all video related code on to the video tag. Images are probably best at `max-width:100%; to prevent them looking too small on devices, such as iPad Mini. --- public/assets/css/general.css | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/public/assets/css/general.css b/public/assets/css/general.css index cb0b6aff..931b5939 100644 --- a/public/assets/css/general.css +++ b/public/assets/css/general.css @@ -517,22 +517,20 @@ table { width: 100%; } #video-player, .showlite-asset { - padding: 6px; - border: 1px solid #555; - background-color: #fff; + display: block; + margin: 0 auto; + background-color: #fff; } #video-player { - cursor: pointer; + cursor: pointer; + margin-top: 2%; + padding: 6px; + max-width: 50%; + border: 1px solid #d0d0d0; + box-shadow: 0 0 50px -6px rgba(0, 0, 0, 0.72); } - .showlite-asset { - max-width: 50%; - margin: 0 auto; - margin-top: 2%; - padding: 6px; - border: 1px solid #a2a2a2; -//Optional Box Shadow - Looks better on a darker than white background. - box-shadow: 0 0 50px -6px rgba(0, 0, 0, 0.72); + max-width: 100%; } /* item lists */ From afb65e78c02ce142810a4e2c93bac20fa78e53c7 Mon Sep 17 00:00:00 2001 From: "Mark (Steve) Firth" Date: Mon, 13 Nov 2017 23:34:13 +1000 Subject: [PATCH 3/3] Video CSS Now With Body ID Cleaner code. :) --- public/assets/css/general.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/public/assets/css/general.css b/public/assets/css/general.css index 931b5939..d8d8389c 100644 --- a/public/assets/css/general.css +++ b/public/assets/css/general.css @@ -520,14 +520,13 @@ table { display: block; margin: 0 auto; background-color: #fff; + cursor: pointer; } -#video-player { - cursor: pointer; +#showlite-body #video-player { margin-top: 2%; padding: 6px; max-width: 50%; border: 1px solid #d0d0d0; - box-shadow: 0 0 50px -6px rgba(0, 0, 0, 0.72); } .showlite-asset { max-width: 100%;