/* SVG Icons */
.chc-discover-icon {
margin-right: 12px;
display: inline-block;
width: 24px;
height: 24px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.chc-discover-icon.active {
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* Post Type Icons */
/* Text Post Icon */
.chc-text-post-icon {
display: inline-block;
width: 20px;
height: 20px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* Question Post Icon */
.chc-question-post-icon {
display: inline-block;
width: 20px;
height: 20px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* Resource Request Post Icon */
.chc-resource-request-post-icon {
display: inline-block;
width: 23px;
height: 23px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* Image Post Icon */
.chc-image-post-icon {
display: inline-block;
width: 20px;
height: 20px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* Calendar Icon */
.chc-calendar-icon {
display: inline-block;
width: 16px;
height: 16px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* Video Post Icon */
.chc-video-post-icon {
display: inline-block;
width: 20px;
height: 20px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* Poll Post Icon */
.chc-poll-post-icon {
display: inline-block;
width: 20px;
height: 20px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* File Post Icon */
.chc-file-post-icon {
display: inline-block;
width: 20px;
height: 20px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* Link Post Icon */
.chc-link-post-icon {
display: inline-block;
width: 20px;
height: 20px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.chc-saved-post-icon {
margin-right: 12px;
display: inline-block;
width: 24px;
height: 24px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.chc-saved-post-icon.active {
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.chc-my-feed-icon {
display: inline-block;
width: 24px;
height: 24px;
margin-right: 12px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.chc-my-feed-icon.active {
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.chc-help-open-icon {
display: inline-block;
width: 11px;
height: 11px;
background: url("data:image/svg+xml;utf8,") no-repeat center;
background-size: contain;
flex-shrink: 0;
}
.chc-explore-peer-networks-icon {
margin-right: 12px;
display: inline-block;
width: 24px;
height: 24px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.chc-find-resources-icon {
margin-right: 12px;
display: inline-block;
width: 24px;
height: 24px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.chc-help-requests-icon {
margin-right: 12px;
display: inline-block;
width: 24px;
height: 24px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* Header Icons */
.chc-header-home-icon {
display: inline-block;
width: 24px;
height: 24px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.chc-header-messages-icon {
display: inline-block;
width: 24px;
height: 24px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.chc-header-notification-icon {
display: inline-block;
width: 24px;
height: 24px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.chc-header-search-icon {
display: inline-block;
width: 24px;
height: 24px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* Activity Feed Action Icons */
/* Copy Link Icon */
.activity_feed_action_copy {
display: inline-block;
width: 21px;
height: 20px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* Save Post Icon - Unsaved State */
.activity_feed_action_save {
display: inline-block;
width: 14px;
height: 16px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* Save Post Icon - Saved State */
.activity_feed_action_save.saved {
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* Follow Icon - Not Following State */
.activity_feed_action_follow {
display: inline-block;
width: 17px;
height: 16px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* Follow Icon - Following State */
.activity_feed_action_follow.following {
width: 17px;
height: 20px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* Feedback Thumbs Up/Down Icons */
.chc-feedback-thumbup {
display: inline-block;
width: 16px;
height: 16px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
cursor: pointer;
transition: opacity 0.2s ease;
}
.chc-feedback-thumbup:hover {
opacity: 0.7;
}
.chc-feedback-thumbup.active {
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.chc-feedback-thumbdown {
display: inline-block;
width: 16px;
height: 16px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
cursor: pointer;
transition: opacity 0.2s ease;
transform: rotate(180deg);
}
.chc-feedback-thumbdown:hover {
opacity: 0.7;
}
.chc-feedback-thumbdown.active {
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* Feedback Actions Container */
.chc-feedback-actions {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
}
.chc-feedback-btn {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
border: none;
background: transparent;
cursor: pointer;
border-radius: 4px;
font-size: 12px;
color: #666;
transition: background-color 0.2s ease;
}
.chc-feedback-btn:hover {
background-color: #f5f5f5;
}
.chc-feedback-btn.active {
background-color: #e8f4fd;
color: #0073aa;
}
/* Feedback Modal */
.chc-feedback-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
}
.chc-feedback-modal-content {
background: white;
border-radius: 8px;
padding: 24px;
max-width: 400px;
width: 90%;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.chc-feedback-modal-header {
margin-bottom: 16px;
}
.chc-feedback-modal-title {
font-size: 18px;
font-weight: 600;
margin: 0 0 8px 0;
color: #333;
}
.chc-feedback-modal-subtitle {
font-size: 14px;
color: #666;
margin: 0;
}
.chc-feedback-modal-body {
margin-bottom: 20px;
}
.chc-feedback-modal-label {
display: block;
font-size: 14px;
font-weight: 500;
margin-bottom: 8px;
color: #333;
}
.chc-feedback-modal-textarea {
width: 100%;
min-height: 80px;
padding: 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
font-family: inherit;
resize: vertical;
box-sizing: border-box;
}
.chc-feedback-modal-textarea:focus {
outline: none;
border-color: #0073aa;
box-shadow: 0 0 0 1px #0073aa;
}
.chc-feedback-modal-footer {
display: flex;
gap: 12px;
justify-content: flex-end;
}
.chc-feedback-modal-btn {
padding: 8px 16px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
}
.chc-feedback-modal-btn-cancel {
background: white;
color: #666;
}
.chc-feedback-modal-btn-cancel:hover {
background: #f5f5f5;
}
.chc-feedback-modal-btn-submit {
background: #0073aa;
color: white;
border-color: #0073aa;
}
.chc-feedback-modal-btn-submit:hover {
background: #005a87;
border-color: #005a87;
}
.chc-feedback-modal-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* Hashtag Rating Icons - Grey Default State */
.chc-hashtag-thumbup {
display: inline-block;
width: 16px;
height: 16px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
cursor: pointer;
transition: opacity 0.2s ease;
}
.chc-hashtag-thumbup:hover {
opacity: 0.7;
}
.chc-hashtag-thumbup.active {
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.chc-hashtag-thumbdown {
display: inline-block;
width: 16px;
height: 16px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
cursor: pointer;
transition: opacity 0.2s ease;
}
.chc-hashtag-thumbdown:hover {
opacity: 0.7;
}
.chc-hashtag-thumbdown.active {
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* Feedback Actions in Card Footers */
.chc-post-footer .chc-feedback-actions {
margin-left: 0;
margin-right: auto;
margin-top: 0;
}
/* When feedback actions are present, use space-between layout */
.chc-post-footer.chc-has-feedback {
justify-content: space-between !important;
}
.chc-resource-footer {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 12px 0 0 0;
border-top: 1px solid #eee;
margin-top: 12px;
}
.chc-resource-footer .chc-feedback-actions {
margin: 0;
}
/* Adjust post footer layout to accommodate feedback */
.chc-post-footer {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
flex-wrap: wrap;
gap: 8px;
}
.chc-post-link {
flex-shrink: 0;
}
/* Feedback button styling adjustments */
.chc-feedback-btn {
min-width: auto;
padding: 2px 6px;
font-size: 11px;
border-radius: 3px;
}
.chc-feedback-count {
font-weight: 500;
min-width: 12px;
text-align: center;
}
/* Person feedback section - outside related content */
.chc-person-feedback-section {
padding: 12px 18px;
border-top: 1px solid #E0E5EB;
margin-top: 0;
}
.chc-person-feedback-section .chc-feedback-actions {
margin: 0;
justify-content: flex-start;
}
/* Green Thumbs Up and Red Thumbs Down Icons with SVG */
/* Green Thumbs Up Icon */
.chc-thumbs-up {
position: relative;
display: inline-block;
width: 32px;
height: 32px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.chc-thumbs-up .count {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 13px;
font-weight: 700;
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
pointer-events: none;
}
/* Red Thumbs Down Icon */
.chc-thumbs-down {
position: relative;
display: inline-block;
width: 32px;
height: 32px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.chc-thumbs-down .count {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 13px;
font-weight: 700;
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
pointer-events: none;
}
/* Smaller variants for compact layouts */
.chc-thumbs-up.small {
width: 24px;
height: 24px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.chc-thumbs-up.small .count {
font-size: 11px;
}
.chc-thumbs-down.small {
width: 24px;
height: 24px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.chc-thumbs-down.small .count {
font-size: 11px;
}
/* Interactive states */
.chc-thumbs-up:hover,
.chc-thumbs-down:hover {
opacity: 0.8;
cursor: pointer;
}
.chc-thumbs-up:active,
.chc-thumbs-down:active {
transform: scale(0.95);
}
/* Icon-only variants (no count display) */
.chc-thumbs-up:empty,
.chc-thumbs-down:empty {
/* When no count span is present, just show the icon */
}
.chc-thumbs-up:empty .count,
.chc-thumbs-down:empty .count {
display: none;
}