1
Fork 0
tildes-shepherd/source/content-scripts/scss/shepherd-defaults.scss

54 lines
1.1 KiB
SCSS
Raw Permalink Normal View History

2023-06-15 12:55:30 +00:00
// Styles copied almost verbatim from Shepherd.js's default CSS.
// Since we have the Tildes CSS available in the content scripts anyway, we can
// use its classes for a lot of what we need. So instead of importing the full
// default styling from Shepherd.js and then overriding everything, only copy
// what we want and trim the rest.
.shepherd-modal-overlay-container {
height: 0;
left: 0;
opacity: 0;
overflow: hidden;
pointer-events: none;
position: fixed;
top: 0;
transition: all 0.3s ease-out, height 0ms 0.3s, opacity 0.3s 0ms;
width: 100vw;
z-index: 9997;
&.shepherd-modal-is-visible {
height: 100vh;
opacity: 0.5;
transform: translateZ(0);
transition: all 0.3s ease-out, height 0s 0s, opacity 0.3s 0s;
path {
pointer-events: all;
}
}
}
.shepherd-element {
opacity: 0;
outline: none;
padding: 16px;
transition: opacity 0.3s, visibility 0.3s;
visibility: hidden;
width: 100%;
z-index: 9999;
&.shepherd-enabled {
opacity: 1;
visibility: visible;
}
}
.shepherd-target {
&.shepherd-target-click-disabled {
&,
& * {
pointer-events: none;
}
}
}