332 lines
		
	
	
		
			6.6 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
			
		
		
	
	
			332 lines
		
	
	
		
			6.6 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
| @charset "UTF-8";
 | |
| .shepherd-button {
 | |
|   color: #ffffffbf;
 | |
|   cursor: pointer;
 | |
|   background: #3288e6;
 | |
|   border: 0;
 | |
|   border-radius: 3px;
 | |
|   margin-right: .5rem;
 | |
|   padding: .5rem 1.5rem;
 | |
|   transition: all .5s;
 | |
| }
 | |
| 
 | |
| .shepherd-button:not(:disabled):hover {
 | |
|   color: #ffffffbf;
 | |
|   background: #196fcc;
 | |
| }
 | |
| 
 | |
| .shepherd-button.shepherd-button-secondary {
 | |
|   color: #000000bf;
 | |
|   background: #f1f2f3;
 | |
| }
 | |
| 
 | |
| .shepherd-button.shepherd-button-secondary:not(:disabled):hover {
 | |
|   color: #000000bf;
 | |
|   background: #d6d9db;
 | |
| }
 | |
| 
 | |
| .shepherd-button:disabled {
 | |
|   cursor: not-allowed;
 | |
| }
 | |
| 
 | |
| .shepherd-footer {
 | |
|   border-bottom-right-radius: 5px;
 | |
|   border-bottom-left-radius: 5px;
 | |
|   justify-content: flex-end;
 | |
|   padding: 0 .75rem .75rem;
 | |
|   display: flex;
 | |
| }
 | |
| 
 | |
| .shepherd-footer .shepherd-button:last-child {
 | |
|   margin-right: 0;
 | |
| }
 | |
| 
 | |
| .shepherd-cancel-icon {
 | |
|   color: #808080bf;
 | |
|   cursor: pointer;
 | |
|   background: none;
 | |
|   border: none;
 | |
|   margin: 0;
 | |
|   padding: 0;
 | |
|   font-size: 2em;
 | |
|   font-weight: 400;
 | |
|   transition: color .5s;
 | |
| }
 | |
| 
 | |
| .shepherd-cancel-icon:hover {
 | |
|   color: #000000bf;
 | |
| }
 | |
| 
 | |
| .shepherd-has-title .shepherd-content .shepherd-cancel-icon {
 | |
|   color: #808080bf;
 | |
| }
 | |
| 
 | |
| .shepherd-has-title .shepherd-content .shepherd-cancel-icon:hover {
 | |
|   color: #000000bf;
 | |
| }
 | |
| 
 | |
| .shepherd-title {
 | |
|   color: #000000bf;
 | |
|   flex: 1 0 auto;
 | |
|   margin: 0;
 | |
|   padding: 0;
 | |
|   font-size: 1rem;
 | |
|   font-weight: 400;
 | |
|   display: flex;
 | |
| }
 | |
| 
 | |
| .shepherd-header {
 | |
|   border-top-left-radius: 5px;
 | |
|   border-top-right-radius: 5px;
 | |
|   justify-content: flex-end;
 | |
|   align-items: center;
 | |
|   padding: .75rem .75rem 0;
 | |
|   line-height: 2em;
 | |
|   display: flex;
 | |
| }
 | |
| 
 | |
| .shepherd-has-title .shepherd-content .shepherd-header {
 | |
|   background: #e6e6e6;
 | |
|   padding: 1em;
 | |
| }
 | |
| 
 | |
| .shepherd-text {
 | |
|   color: #000000bf;
 | |
|   padding: .75em;
 | |
|   font-size: 1rem;
 | |
|   line-height: 1.3em;
 | |
| }
 | |
| 
 | |
| .shepherd-text p {
 | |
|   margin-top: 0;
 | |
| }
 | |
| 
 | |
| .shepherd-text p:last-child {
 | |
|   margin-bottom: 0;
 | |
| }
 | |
| 
 | |
| .shepherd-content {
 | |
|   border-radius: 5px;
 | |
|   outline: none;
 | |
|   padding: 0;
 | |
| }
 | |
| 
 | |
| .shepherd-element {
 | |
|   opacity: 0;
 | |
|   visibility: hidden;
 | |
|   z-index: 9999;
 | |
|   background: #fff;
 | |
|   border-radius: 5px;
 | |
|   outline: none;
 | |
|   width: 100%;
 | |
|   max-width: 400px;
 | |
|   transition: opacity .3s, visibility .3s;
 | |
|   box-shadow: 0 1px 4px #0003;
 | |
| }
 | |
| 
 | |
| .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 {
 | |
|   z-index: -1;
 | |
|   width: 16px;
 | |
|   height: 16px;
 | |
|   position: absolute;
 | |
| }
 | |
| 
 | |
| .shepherd-arrow:before {
 | |
|   content: "";
 | |
|   background: #fff;
 | |
|   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-target-click-disabled.shepherd-enabled.shepherd-target, .shepherd-target-click-disabled.shepherd-enabled.shepherd-target * {
 | |
|   pointer-events: none;
 | |
| }
 | |
| 
 | |
| .shepherd-modal-overlay-container {
 | |
|   opacity: 0;
 | |
|   pointer-events: none;
 | |
|   z-index: 9997;
 | |
|   width: 100vw;
 | |
|   height: 0;
 | |
|   transition: all .3s ease-out, height 0s .3s, opacity .3s;
 | |
|   position: fixed;
 | |
|   top: 0;
 | |
|   left: 0;
 | |
|   overflow: hidden;
 | |
| }
 | |
| 
 | |
| .shepherd-modal-overlay-container.shepherd-modal-is-visible {
 | |
|   opacity: .5;
 | |
|   height: 100vh;
 | |
|   transition: all .3s ease-out, height, opacity .3s;
 | |
|   transform: translateZ(0);
 | |
| }
 | |
| 
 | |
| .shepherd-modal-overlay-container.shepherd-modal-is-visible path {
 | |
|   pointer-events: all;
 | |
| }
 | |
| 
 | |
| .shepherd-target.shepherd-enabled {
 | |
|   z-index: 9998;
 | |
| }
 | |
| 
 | |
| .shepherd-element {
 | |
|   width: max-content;
 | |
|   max-width: min(600px, 90%);
 | |
| }
 | |
| 
 | |
| .shepherd-element.shepherd-centered {
 | |
|   max-width: min(1200px, 90%);
 | |
| }
 | |
| 
 | |
| .shepherd-modal-overlay-container.shepherd-modal-is-visible {
 | |
|   opacity: .7;
 | |
| }
 | |
| 
 | |
| .shepherd-content {
 | |
|   border: 1px solid var(--border-color-translucent);
 | |
|   box-shadow: var(--modal-joomla-dialog-box-shadow);
 | |
|   border-radius: .3rem;
 | |
|   padding: 0 0 1rem;
 | |
| }
 | |
| 
 | |
| .shepherd-content img {
 | |
|   max-width: 100%;
 | |
|   height: auto;
 | |
| }
 | |
| 
 | |
| .shepherd-title {
 | |
|   flex: auto;
 | |
| }
 | |
| 
 | |
| .shepherd-cancel-icon {
 | |
|   align-items: center;
 | |
|   margin-inline-start: 8px;
 | |
|   display: inline-flex;
 | |
|   overflow-y: clip;
 | |
| }
 | |
| 
 | |
| .shepherd-cancel-icon:before {
 | |
|   content: attr(aria-label);
 | |
|   margin: 0 8px;
 | |
|   font-size: 1rem;
 | |
| }
 | |
| 
 | |
| .shepherd-cancel-icon span {
 | |
|   font-size: 2rem;
 | |
| }
 | |
| 
 | |
| .shepherd-progress {
 | |
|   margin-inline-end: 16px;
 | |
|   line-height: 1.3em;
 | |
| }
 | |
| 
 | |
| .shepherd-text {
 | |
|   max-height: calc(100vh - 240px);
 | |
|   padding: 1rem 1rem 0;
 | |
|   line-height: 1.5em;
 | |
|   overflow-y: auto;
 | |
| }
 | |
| 
 | |
| .shepherd-footer {
 | |
|   grid-template-columns: repeat(3, 1fr);
 | |
|   padding: 1rem 1rem 0;
 | |
|   display: grid;
 | |
| }
 | |
| 
 | |
| .shepherd-button-primary {
 | |
|   color: var(--btn-primary-color);
 | |
|   background-color: var(--btn-primary-bg);
 | |
|   border: var(--btn-primary-border);
 | |
|   grid-column-start: 3;
 | |
| }
 | |
| 
 | |
| .shepherd-button-primary:not(:disabled):hover {
 | |
|   background-color: var(--btn-primary-bg-hvr);
 | |
|   border: var(--btn-primary-border-hvr);
 | |
| }
 | |
| 
 | |
| .shepherd-enabled.shepherd-element[data-popper-placement="bottom"] {
 | |
|   transform: translateY(12px);
 | |
| }
 | |
| 
 | |
| .shepherd-enabled.shepherd-element[data-popper-placement="bottom"] .shepherd-arrow:before {
 | |
|   border-top: 1px solid var(--border-color-translucent);
 | |
|   border-left: 1px solid var(--border-color-translucent);
 | |
| }
 | |
| 
 | |
| .shepherd-enabled.shepherd-element[data-popper-placement="left"] {
 | |
|   transform: translateX(-12px);
 | |
| }
 | |
| 
 | |
| .shepherd-enabled.shepherd-element[data-popper-placement="left"] .shepherd-arrow:before {
 | |
|   border-top: 1px solid var(--border-color-translucent);
 | |
|   border-right: 1px solid var(--border-color-translucent);
 | |
| }
 | |
| 
 | |
| .shepherd-enabled.shepherd-element[data-popper-placement="top"] {
 | |
|   transform: translateY(-12px);
 | |
| }
 | |
| 
 | |
| .shepherd-enabled.shepherd-element[data-popper-placement="top"] .shepherd-arrow:before {
 | |
|   border-right: 1px solid var(--border-color-translucent);
 | |
|   border-bottom: 1px solid var(--border-color-translucent);
 | |
| }
 | |
| 
 | |
| .shepherd-enabled.shepherd-element[data-popper-placement="right"] {
 | |
|   transform: translateX(12px);
 | |
| }
 | |
| 
 | |
| .shepherd-enabled.shepherd-element[data-popper-placement="right"] .shepherd-arrow:before {
 | |
|   border-bottom: 1px solid var(--border-color-translucent);
 | |
|   border-left: 1px solid var(--border-color-translucent);
 | |
| }
 | |
| 
 | |
| .shepherd-arrow, .shepherd-arrow:before {
 | |
|   z-index: 0;
 | |
| }
 | |
| 
 | |
| .shepherd-element.shepherd-has-title[data-popper-placement^="bottom"] > .shepherd-arrow:before {
 | |
|   background-color: #e6e6e6 !important;
 | |
| }
 | |
| 
 | |
| #modGuidedTours-modal a {
 | |
|   color: var(--template-link-color);
 | |
|   font-weight: 500;
 | |
|   text-decoration: underline;
 | |
| }
 |