diff --git a/assets/css/darkmode.css b/assets/css/darkmode.css index 687cbea..dee16d3 100644 --- a/assets/css/darkmode.css +++ b/assets/css/darkmode.css @@ -520,16 +520,31 @@ body.nav-active { .feedback-button { position: fixed; left: 20px; - bottom: 20px; + bottom: 20px; /* Position for the Feedback button */ background-color: #FF4D4D; color: white; padding: 15px; border-radius: 5px; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); - z-index: 1000; + z-index: 1000; /* Ensure it is on top */ } +.E-book-button { + position: fixed; + left: 20px; + bottom: 80px; /* Adjusted to be above the Feedback button */ + background-color: #FF4D4D; + color: white; + padding: 15px; + border-radius: 5px; + cursor: pointer; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + z-index: 1001; /* Higher z-index to ensure it appears above */ +} + + + .feedback-modal { display: none; position: fixed; @@ -547,7 +562,7 @@ body.nav-active { background-color: #3C3C3C; padding: 20px; border-radius: 5px; - width: 300px; + width: 450px; text-align: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); } @@ -557,6 +572,7 @@ body.nav-active { float: right; font-size: 28px; font-weight: bold; + display: flex; } .close:hover, @@ -566,6 +582,7 @@ body.nav-active { cursor: pointer; } +/* Styling for Emoji Section */ .emojis { font-size: 30px; margin: 20px 0; @@ -574,22 +591,31 @@ body.nav-active { justify-content: space-evenly; } -.emoji { +.emoji-option { + display: flex; + flex-direction: column; + align-items: center; cursor: pointer; margin: 0 10px; transition: transform 0.2s; } -.emoji:hover { +.emoji-option p { + margin-top: 5px; + font-size: 14px; + color: #ffffff; +} + +.emoji-option:hover .emoji { transform: scale(1.2); } .emoji.selected { - border: 1px solid black; - /* Highlight selected emoji */ + border: 2px solid #4caf50; border-radius: 5px; } +/* Step Navigation Buttons */ .buttons { display: flex; align-items: center; @@ -601,7 +627,7 @@ input[type="email"] { width: 100%; padding: 10px; margin: 10px 0; - border: 1px solid #ccc; + border: 1px solid #ccc; border-radius: 4px; } @@ -614,17 +640,13 @@ button { cursor: pointer; } -button:hover { - background-color: #45a049; -} - -.feedbackPopUp { +.feedbackRequestPopUps { position: fixed; transform: translate(120%); - transition: all 1s ease-in-out; + transition: all 0.1s ease-in-out; right: 20px; bottom: 100px; - background-color: hsl(357, 100%, 75%); + background-color: #FF4D4D; color: white; padding: 15px; border-radius: 5px; @@ -633,12 +655,15 @@ button:hover { z-index: 1000; } +button:hover { + background-color: #45a049; +} + .PopUpDisplay { transition: all 1.5s ease-in-out; transform: translate(0); } - /*-----------------------------------*\ #CATEGORY \*-----------------------------------*/