overlay.ejs 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <style type="text/css">
  2. #overlayContainer {
  3. position: absolute;
  4. top: 22px;
  5. display: flex;
  6. align-items: center;
  7. justify-content: center;
  8. width: 100%;
  9. height: calc(100% - 22px);
  10. background: rgba(0, 0, 0, 0.50);
  11. }
  12. #overlayContent {
  13. position: relative;
  14. display: flex;
  15. flex-direction: column;
  16. align-items: center;
  17. justify-content: space-between;
  18. width: 300px;
  19. height: 35%;
  20. box-sizing: border-box;
  21. padding: 15px 0px;
  22. /* background-color: #424242; */
  23. text-align: center;
  24. }
  25. #overlayTitle {
  26. font-family: 'Avenir Medium';
  27. font-size: 20px;
  28. color: #fff;
  29. font-weight: bold;
  30. letter-spacing: 1px;
  31. }
  32. #overlayDesc {
  33. font-family: 'Avenir Book';
  34. font-size: 12px;
  35. color: #fff;
  36. font-weight: bold;
  37. }
  38. #overlayAcknowledge {
  39. background: none;
  40. border: 1px solid #ffffff;
  41. color: white;
  42. font-family: 'Avenir Medium';
  43. font-weight: bold;
  44. border-radius: 2px;
  45. width: 75px;
  46. cursor: pointer;
  47. transition: 0.25s ease;
  48. }
  49. #overlayAcknowledge:hover,
  50. #overlayAcknowledge:focus {
  51. box-shadow: 0px 0px 10px 0px #fff;
  52. outline: none;
  53. }
  54. #overlayAcknowledge:active {
  55. border-color: rgba(255, 255, 255, 0.75);
  56. color: rgba(255, 255, 255, 0.75);
  57. }
  58. </style>
  59. <div id="overlayContainer" style="display: none;">
  60. <div id="overlayContent">
  61. <span id="overlayTitle">LOGIN FAILED:<br>INVALID CREDENTIALS</span>
  62. <span id="overlayDesc">Either the email or password you supplied is invalid. Please ensure everything is correct and try again.</span>
  63. <button id="overlayAcknowledge">Try Again</button>
  64. </div>
  65. </div>