/* * Plugin Name: My Fixed Footer Banner * Description: Styles for the fixed banner at the bottom of the screen. * Version: 1.1.0 */ /* New styles for footer bar */ .ttfpa-footer-bar .ttfpa-footer-link { color: white; text-decoration: none; margin-left: 20px; display: flex; align-items: center; gap: 5px; font-size: 14px; } .ttfpa-user-avatar { border-radius: 50%; width: 24px; height: 24px; vertical-align: middle; } .ttfpa-footer-bar { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #5F9DA0; /* UPDATED: Background color set to a darker Cadet Blue */ color: white; padding: 10px 20px; /* Provides 10px top/bottom padding */ display: flex; justify-content: center; /* Center content horizontally */ align-items: center; /* Center content vertically */ box-shadow: 0 -2px 10px rgba(0,0,0,0.3); z-index: 9999; /* Ensure it's above other content */ box-sizing: border-box; /* Include padding in element's total width/height */ font-family: -apple-system, BlinkMacMacFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; overflow-x: hidden; /* Prevent horizontal scrolling of the bar itself if content overflows */ flex-wrap: nowrap; /* NEW: Forces all direct children onto a single line, preventing wrapping */ } .ttfpa-footer-bar a { color: #fff; text-decoration: none; margin: 0 15px; /* Spacing between links */ font-size: 1em; display: flex; /* Use flex to align icon and text */ align-items: center; white-space: nowrap; /* Prevent text wrapping within links */ flex-shrink: 0; /* Prevents links from shrinking too much if space is tight */ } .ttfpa-footer-bar a:hover { color: #fc5b62; /* Hover color */ } .ttfpa-footer-bar a .fas, .ttfpa-footer-bar a .fab { /* For Font Awesome icons */ margin-right: 8px; font-size: 1.2em; /* Slightly larger icons */ } .ttfpa-footer-bar .user-profile-img { width: 32px; /* Small icon size */ height: 32px; border-radius: 50%; /* Circular */ border: 2px solid #fc5b62; /* Border around image */ object-fit: cover; cursor: pointer; transition: transform 0.2s ease-in-out; margin-right: 8px; /* Space between image and text */ flex-shrink: 0; /* Prevents image from shrinking */ } .ttfpa-footer-bar .user-profile-img:hover { transform: scale(1.1); } /* This class is for Dashicons, which might not be used if you prefer Font Awesome */ .ttfpa-footer-bar .dashicons { font-size: 20px; line-height: 1; vertical-align: middle; margin-right: 5px; } /* Theme Integration: Crucial padding for content when footer bar is active */ /* This class 'has-fixed-footer-banner' is added to the tag by the plugin's PHP */ body.has-fixed-footer-banner .content { /* Calculate padding based on .ttfpa-footer-bar's height (10px top + ~16px content + 10px bottom = ~36px) */ padding-bottom: 40px; /* Safe padding to prevent content overlap */ } /* Responsive adjustments (assuming .ttfpa-footer-bar remains fixed height and content is centered) */ @media (max-width: 600px) { .ttfpa-footer-bar { padding: 10px; /* Adjust padding for smaller screens */ } .ttfpa-footer-bar a { margin: 0 5px; /* Reduced margin between links on small screens for more space */ } body.has-fixed-footer-banner .content { padding-bottom: 40px; /* Maintain padding for mobile */ } }