Styling Example

Here's an example of how to style your aideye.

CSS File

Here's the CSS file used to style the example above. This file is named myaideye-theme.css, but you can name yours whatever you like.

.aideye-popover.aideye-theme {
  background-color: #344073;
  color: #F2FDFF;
}

.aideye-popover.aideye-theme .aideye-popover-title {
  font-size: 20px;
}

.aideye-popover.aideye-theme .aideye-popover-title,
.aideye-popover.aideye-theme .aideye-popover-description,
.aideye-popover.aideye-theme .aideye-popover-progress-text {
  color: #F2FDFF;
}

.aideye-popover.aideye-theme button {
  flex: 1;
  text-align: center;
  background-color: #F2FDFF;
  color: #101935;
  border: 2px solid #F2FDFF;
  font-size: 14px;
  padding: 5px 8px;
  border-radius: 6px;
}

.aideye-popover.aideye-theme .aideye-popover-close-btn {
  color: #F2FDFF;
  padding: 0;
  background-color: #344073;
  border: none;
}

.aideye-popover.aideye-theme
  .aideye-popover-arrow-side-left.aideye-popover-arrow {
  border-left-color: #344073;
}

.aideye-popover.aideye-theme
  .aideye-popover-arrow-side-right.aideye-popover-arrow {
  border-right-color: #344073;
}

.aideye-popover.aideye-theme
  .aideye-popover-arrow-side-top.aideye-popover-arrow {
   border-top-color: #344073;
}

.aideye-popover.aideye-theme
  .aideye-popover-arrow-side-bottom.aideye-popover-arrow {
   border-bottom-color: #344073;
}

Code

Here's the code used to style the example above.

const myAidEye = aideye({
  popoverClass: 'aideye-theme',
  steps: [
    {
      element: '#css',
      popover: {
        title: 'CSS File',
        description: 'The CSS file used to style this example.'
      }
    },
    {
      element: '#code',
      popover: {
        title: 'Code',
        description: 'The code used to style this example.'
      }
    }
  ]
});

myAidEye.start();