/* WP Simple Guest Chat - Main Stylesheet (style.css) This file is now split into multiple component-based CSS files for better organization and maintainability. See: - chat-core.css - messaging.css - media.css - modals.css - panels.css - forms.css - controls.css The dynamic styles generated by PHP (for appearance settings) are still output directly in the of the page. */ /* Role Voting Poll Styles */ .wsgc-poll-container { background-color: #f0f0f0; border: 1px solid #ddd; border-radius: 5px; padding: 10px; margin: 10px 0; font-size: 0.9em; color: #333; } .wsgc-poll-question { font-weight: bold; margin-bottom: 5px; color: #0073aa; /* WordPress primary blue */ } .wsgc-poll-votes, .wsgc-poll-timer { margin-bottom: 5px; color: #555; } .wsgc-poll-options { display: flex; gap: 10px; margin-top: 10px; } .wsgc-poll-vote-btn { background-color: #0085ba; /* WordPress blue */ color: #fff; border: none; padding: 8px 15px; border-radius: 3px; cursor: pointer; font-size: 0.9em; transition: background-color 0.2s ease; } .wsgc-poll-vote-btn:hover { background-color: #006799; } .wsgc-poll-vote-btn:disabled, .wsgc-poll-vote-btn.wsgc-vote-disabled { background-color: #a0a0a0; cursor: not-allowed; } /* Individual Message Styles */ .wsgc-message-entry { display: flex; flex-direction: column; margin-bottom: 10px; padding: 8px 12px; border-radius: 15px; max-width: 80%; word-wrap: break-word; box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13); } .wsgc-message-entry.own-message { align-self: flex-end; background-color: #dcf8c6; /* Light green for own messages */ margin-left: auto; } .wsgc-message-entry.other-message { align-self: flex-start; background-color: #ffffff; /* White for other messages */ margin-right: auto; } .wsgc-message-entry .wsgc-nickname { font-weight: 500; /* Less bold */ margin-bottom: 2px; color: #666; /* Lighter color */ font-size: 0.85em; /* Slightly smaller */ } .wsgc-message-entry.own-message .wsgc-nickname { color: #555; /* Slightly darker for own nicknames */ } .wsgc-message-entry .wsgc-text { font-size: 1.05em; /* More noticeable */ line-height: 1.4; color: #333; /* Ensure prominent color */ } .wsgc-message-entry .wsgc-timestamp { font-size: 0.75em; color: #888; margin-top: 5px; text-align: right; } /* System messages */ .wsgc-system-message { text-align: center; font-style: italic; color: #777; padding: 5px 0; font-size: 0.85em; } /* Transient system notice (used for poll threshold announcements) */ .wsgc-system-notice { display: block; background: #fff8e1; /* light yellow */ border: 1px solid #ffd54f; color: #6a4f00; padding: 8px 12px; margin: 8px 0; border-radius: 4px; font-size: 0.95em; box-shadow: 0 1px 0 rgba(0,0,0,0.04); } /* Inline banner shown when poll ends */ .wsgc-inline-poll-banner { display: block; background: #e6f4ea; /* light green */ border: 1px solid #8fd19e; color: #1b5e20; padding: 10px 14px; margin: 6px 0 12px 0; border-radius: 4px; font-weight: 600; text-align: center; } /* Visually-hidden live region for screen readers */ .wsgc-live-region { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } /* Delete button alignment */ .wsgc-message-entry .wsgc-text { display: flex; justify-content: space-between; align-items: flex-end; /* Align items to the bottom */ width: 100%; /* Ensure it takes full width of its parent */ } .wsgc-message-entry .wsgc-text .wsgc-message-content-and-meta { display: flex; flex-direction: row; /* Keep content and timestamp in a row */ align-items: baseline; /* Align text and timestamp nicely */ flex-grow: 1; /* Allow content to take available space */ gap: 5px; /* Space between content and timestamp */ } .wsgc-message-entry .wsgc-text .wsgc-timestamp { flex-shrink: 0; /* Prevent timestamp from shrinking */ white-space: nowrap; /* Keep timestamp on one line */ margin-top: 0; /* Remove previous margin-top */ } .wsgc-message-entry .wsgc-text .wsgc-delete-button { flex-shrink: 0; /* Prevent button from shrinking */ margin-left: 5px; /* Space between timestamp and delete button */ cursor: pointer; font-size: 1.2em; /* Larger icon */ color: #888; background: none; border: none; padding: 0; } .wsgc-message-entry .wsgc-text .wsgc-delete-button:hover { color: #d9534f; /* Red on hover */ } /* Single row for short text messages */ .wsgc-message-entry .wsgc-message-content-row { display: flex; align-items: center; gap: 5px; /* Space between elements */ flex-wrap: wrap; /* Allow wrapping to new lines */ } .wsgc-message-entry .wsgc-message-content-row .wsgc-nickname { flex-shrink: 0; /* Prevent nickname from shrinking */ } .wsgc-message-entry .wsgc-message-content-row .wsgc-text { flex-grow: 1; /* Allow message text to take available space */ white-space: normal; /* Allow text to wrap */ overflow: visible; /* Make sure overflow is not hidden */ text-overflow: clip; /* Do not use ellipsis */ word-break: break-word; /* Force break for long words */ } .wsgc-message-entry .wsgc-message-content-row .wsgc-timestamp { flex-shrink: 0; /* Prevent timestamp from shrinking */ } .wsgc-message-entry .wsgc-message-content-row .wsgc-delete-button { flex-shrink: 0; /* Prevent delete button from shrinking */ } /* Twemoji Emojis */ .wsgc-message-entry .wsgc-text img.emoji { height: 1.2em; /* Make emojis larger, relative to text font size */ width: 1.2em; vertical-align: -0.2em; /* Adjust vertical alignment */ }