mirrors/bookwyrm
1
0
Fork 1
mirror of https://github.com/bookwyrm-social/bookwyrm.git synced 2024-06-12 02:09:25 +00:00
Code Issues Projects Releases Wiki Activity

add shepherd styles for guided tour

Browse source 
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.
This commit is contained in:
Hugh Rundle 2022-06-12 13:42:06 +10:00
parent b6cd64f82a
commit cfa659748c
3 changed files with 42 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
bookwyrm/static/css/themes/bookwyrm-dark.scss
View file

@ -94,3 +94,4 @@ $family-secondary: $family-sans-serif;
@import "../bookwyrm.scss";
@import "../vendor/icons.css";
@import "../vendor/shepherd.scss";

1
bookwyrm/static/css/themes/bookwyrm-light.scss
View file

@ -67,3 +67,4 @@ $family-secondary: $family-sans-serif;
@import "../bookwyrm.scss";
@import "../vendor/icons.css";
@import "../vendor/shepherd.scss";

40
bookwyrm/static/css/vendor/shepherd.scss vendored Normal file
View file

@ -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}