Apply LCARS theme to a few things missing it

[infinitytec]

Thank you for your contribution to the Pi-hole Community!

Please read the comments below to help us consider your Pull Request.

We are all volunteers and completing the process outlined will help us review your commits quicker.

Please make sure you

1. Base your code and PRs against the repositories developmental branch.
2. Sign Off all commits as we enforce the DCO for all contributions
3. Sign all your commits as they must have verified signatures
4. File a pull request for any change that requires changes to our documentation at our documentation repo

---

What does this PR aim to accomplish?:

More fixes to the LCARS theme. This styles the "about" hamburger menu on the upper right and modals such as the Teleporter import.

How does this PR accomplish the above?:

This makes a few changes to style some previously unstyled popups.

Before:

After:

Link documentation PRs if any are needed to support this PR:

n/a

---

By submitting this pull request, I confirm the following:

1. I have read and understood the contributors guide, as well as this entire template. I understand which branch to base my commits and Pull Requests against.
2. I have commented my proposed changes within the code and I have tested my changes.
3. I am willing to help maintain this change if there are issues with it later.
4. It is compatible with the EUPL 1.2 license
5. I have squashed any insignificant commits. (git rebase)
6. I have checked that another pull request for this purpose does not exist.
7. I have considered, and confirmed that this submission will be valuable to others.
8. I accept that this submission may not be used, and the pull request closed at the will of the maintainer.
9. I give this submission freely, and claim no ownership to its content.

---

• I have read the above and my PR is ready for review. Check this box to confirm

[yubiuser]

Could you please provide some screenshots before/after to show the relevant changes?

[infinitytec]

Could you please provide some screenshots before/after to show the relevant changes?

Done!

[rdwebdesign]

I think the top right menu became too dark and very hard to distinguish from the background:

[infinitytec]

I think the top right menu became too dark and very hard to distinguish from the background:
How about this?

Edit: I swapped out my arbitrary color of #010101 with the #111111 used elsewhere. It's a little lighter, but barely noticable.

[yubiuser]

Thanks for your PR. First, this is a lot about personal taste:

I like the new menu with the blue border. However, I see some flickering after opening the menu - is this intended? The teleporter modal with the new black background is hard to distinguish from the rest of the (dark) interface. Could you add a blue border here as well?

[infinitytec]

Thanks for your PR. First, this is a lot about personal taste:

I like the new menu with the blue border. However, I see some flickering after opening the menu - is this intended? The teleporter modal with the new black background is hard to distinguish from the rest of the (dark) interface. Could you add a blue border here as well?

The flickering is intended. It matches the alert messages that pop up. LCARS often has elements that do this and I thought it would be fun to have it there. We can remove it if that's a problem.

I'll add the border to the other modal. I'll also check to see if there are some in other locations that can be updated to match.

[infinitytec]

OK, I've made the changes. I have determined the borer appears to show on all modals.

[rdwebdesign]

Why did you close the PR?

[infinitytec]

Why did you close the PR?

Oops

[rdwebdesign]

You changed the background from white to the dark color.
Now some other elements need to be changed too.

1. The modal has bright internal lines (header and footer borders):

   

   You can choose to make them very faint (changing the color to something darker #222, #333, etc.) or you can use the same color as the borders #48f.

   Example:

   .modal-header,
   .modal-footer {
     border-color: #222;
   }

2. Also, the close button (small x on the top right) is black and almost invisible.
   You need to change its color and opacity to make it more visible.
   Add:

   .close {
     color: #9ab;
     opacity: 0.4;
     text-shadow: none;
   }
   
   .close:focus, .close:hover {
     color: #48f;  
     opacity: 1;
   }

3. On the top-menu, the links states (hover, focus, etc.) are now using too dark colors.
   Focus is specially important, because it's used when navigating using the keyboard.

   To fix this, please change the lines 512-514 to:

   .dropdown-menu > li > a:hover,
   .dropdown-menu > li > a:active,
   .dropdown-menu > li > a:focus {
     color: #48f;
   }   

[infinitytec]

You changed the background from white to the dark color. Now some other elements need to be changed too.

1. The modal has bright internal lines (header and footer borders):
   ![image](https://user-images.githubusercontent.com/1385443/224512744-7e133476-8bc3-4bed-b471-c53cd55897a9.png)
   You can choose to make them very faint (changing the color to something darker `#222`, `#333`, etc.) or you can use the same color as the borders `#48f`.
   Example:
   ```css
   .modal-header,
   .modal-footer {
     border-color: #222;
   }
   ```

2. Also, the close button (small `x` on the top right) is black and almost invisible.
   You need to change its color and opacity to make it more visible.
   Add:
   ```css
   .close {
     color: #9ab;
     opacity: 0.4;
     text-shadow: none;
   }
   
   .close:focus, .close:hover {
     color: #48f;  
     opacity: 1;
   }
   ```

3. On the top-menu, the links states (hover, focus, etc.) are now using too dark colors.
   Focus is specially important, because it's used when navigating using the keyboard.
   To fix this, please change the lines 512-514 to:
   ```css
   .dropdown-menu > li > a:hover,
   .dropdown-menu > li > a:active,
   .dropdown-menu > li > a:focus {
     color: #48f;
   }   
   ```

Good suggestions. Added,

[infinitytec]

Sounds good. I'll try to make that change this weekend.

Edit: done.

[infinitytec]

The API Modal now has a better close button: