From cfa659748ce21bb5ee233465b0aabba4dc11bf30 Mon Sep 17 00:00:00 2001 From: Hugh Rundle Date: Sun, 12 Jun 2022 13:42:06 +1000 Subject: [PATCH] add shepherd styles for guided tour Adds a sass file based on the v10.0.0 Shepherd CSS. Original Shepherd styles are kept where appropriate, otherwise this is intended to inherit whatever styles are being used through the Bulma and Bookwyrm SASS, so that it uses appropriate colours in both light and dark modes. --- bookwyrm/static/css/themes/bookwyrm-dark.scss | 1 + .../static/css/themes/bookwyrm-light.scss | 1 + bookwyrm/static/css/vendor/shepherd.scss | 40 +++++++++++++++++++ 3 files changed, 42 insertions(+) create mode 100644 bookwyrm/static/css/vendor/shepherd.scss diff --git a/bookwyrm/static/css/themes/bookwyrm-dark.scss b/bookwyrm/static/css/themes/bookwyrm-dark.scss index 88ee865bb..a2eb94efb 100644 --- a/bookwyrm/static/css/themes/bookwyrm-dark.scss +++ b/bookwyrm/static/css/themes/bookwyrm-dark.scss @@ -94,3 +94,4 @@ $family-secondary: $family-sans-serif; @import "../bookwyrm.scss"; @import "../vendor/icons.css"; +@import "../vendor/shepherd.scss"; diff --git a/bookwyrm/static/css/themes/bookwyrm-light.scss b/bookwyrm/static/css/themes/bookwyrm-light.scss index 75f05164b..efb13c23e 100644 --- a/bookwyrm/static/css/themes/bookwyrm-light.scss +++ b/bookwyrm/static/css/themes/bookwyrm-light.scss @@ -67,3 +67,4 @@ $family-secondary: $family-sans-serif; @import "../bookwyrm.scss"; @import "../vendor/icons.css"; +@import "../vendor/shepherd.scss"; diff --git a/bookwyrm/static/css/vendor/shepherd.scss b/bookwyrm/static/css/vendor/shepherd.scss new file mode 100644 index 000000000..727ef55db --- /dev/null +++ b/bookwyrm/static/css/vendor/shepherd.scss @@ -0,0 +1,40 @@ +/* + Shepherd styles for guided tour. + Based on Shepherd v 10.0.0 styles. +*/ + +@import 'bulma/bulma.sass'; + +.shepherd-button { + @extend .button.mr-2; +} + +.shepherd-button.shepherd-button-secondary { + @extend .button.is-light; +} + +.shepherd-footer { + @extend .message-body; + @extend .is-primary.is-light; + border-color: $primary-light; +} + +.shepherd-cancel-icon{background:transparent;border:none;color:hsla(0,0%,50%,.75);cursor:pointer;font-size:2em;font-weight:400;margin:0;padding:0;transition:color .5s ease}.shepherd-cancel-icon:hover{color:rgba(0,0,0,.75)}.shepherd-has-title .shepherd-content .shepherd-cancel-icon{color:hsla(0,0%,50%,.75)}.shepherd-has-title .shepherd-content .shepherd-cancel-icon:hover{color:rgba(0,0,0,.75)} + +.shepherd-header { + @extend .message-header; + @extend .is-primary; +} + +.shepherd-text { + @extend .message-body; + @extend .is-primary.is-light; +} + +.shepherd-content { + @extend .message; +} + +.shepherd-element{background:$primary-light;border-radius:5px;box-shadow:0 1px 4px rgba(0,0,0,.2);max-width:400px;opacity:0;outline:none;transition:opacity .3s,visibility .3s;visibility:hidden;width:100%;z-index:9999}.shepherd-enabled.shepherd-element{opacity:1;visibility:visible}.shepherd-element[data-popper-reference-hidden]:not(.shepherd-centered){opacity:0;pointer-events:none;visibility:hidden}.shepherd-element,.shepherd-element *,.shepherd-element :after,.shepherd-element :before{box-sizing:border-box}.shepherd-arrow,.shepherd-arrow:before{height:16px;position:absolute;width:16px;z-index:-1}.shepherd-arrow:before{background:$primary-light;box-shadow:0 1px 4px rgba(0,0,0,.2);content:"";transform:rotate(45deg)}.shepherd-element[data-popper-placement^=top]>.shepherd-arrow{bottom:-8px}.shepherd-element[data-popper-placement^=bottom]>.shepherd-arrow{top:-8px}.shepherd-element[data-popper-placement^=left]>.shepherd-arrow{right:-8px}.shepherd-element[data-popper-placement^=right]>.shepherd-arrow{left:-8px}.shepherd-element.shepherd-centered>.shepherd-arrow{opacity:0}.shepherd-element.shepherd-has-title[data-popper-placement^=bottom]>.shepherd-arrow:before{background-color:$primary-light}.shepherd-target-click-disabled.shepherd-enabled.shepherd-target,.shepherd-target-click-disabled.shepherd-enabled.shepherd-target *{pointer-events:none} + +.shepherd-modal-overlay-container{height:0;left:0;opacity:0;overflow:hidden;pointer-events:none;position:fixed;top:0;transition:all .3s ease-out,height 0ms .3s,opacity .3s 0ms;width:100vw;z-index:9997}.shepherd-modal-overlay-container.shepherd-modal-is-visible{height:100vh;opacity:.5;transform:translateZ(0);transition:all .3s ease-out,height 0s 0s,opacity .3s 0s}.shepherd-modal-overlay-container.shepherd-modal-is-visible path{pointer-events:all}