/*------------------------------*\ $INTERFACE \*------------------------------*/ /* ICONS */ @font-face { font-display: swap; font-family: 'xfwp-icon'; src: url('../icons/xfwp-icon.eot'); src: url('../icons/xfwp-icon.eot?53204155#iefix') format('embedded-opentype'), url('../icons/xfwp-icon.woff2') format('woff2'), url('../icons/xfwp-icon.woff') format('woff'), url('../icons/xfwp-icon.ttf') format('truetype'), url('../icons/xfwp-icon.svg#xfwp-icon') format('svg'); } [class*="xfwp-icon-"]:before { display: inline-block; font-family: xfwp-icon; font-style: normal; font-weight: normal; font-variant: normal; line-height: 1; speak: none; text-decoration: inherit; text-transform: none; } .xfwp-icon-load:before { animation: spin 2s linear infinite; content: '\e801'; } .xfwp-icon-comment:before { content: '\e800'; } .xfwp-icon-like:before { content: '\e802'; } .xfwp-icon-trophy:before { content: '\e803'; } .xfwp-icon-pin:before { content: '\e804'; } .xfwp-icon-code:before { content: '\e805'; } .xfwp-icon-images:before { content: '\e806'; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* BUTTONS */ button.xfwp-button, button.xfwp-button:hover, button.xfwp-button:focus, button.xfwp-button[disabled], button.xfwp-button[disabled]:hover { background-color: #185786; border-radius: 2px; color: #fff; display: inline-block; padding: 15px 20px; } .xfwp-button .xfwp-icon-load { display: none; margin-left: 3px; } .xfwp-button.xfwp-loading .xfwp-icon-load { display: inline-block; } /* AVATAR */ .xfwp-avatar { align-items: center; background-color: #336699; border-radius: 50%; color: #9fbede; display: inline-flex; height: 30px; justify-content: center; text-transform: uppercase; width: 30px; } span.xfwp-avatar { cursor: default; } a span.xfwp-avatar { cursor: pointer; } .xfwp-widget .xfwp-avatar { height: 30px; width: 30px; } .comment-view .forum-comment-avatar-image { font-size: 20px; height: 30px; width: 30px; } /* BADGES */ .xfwp-badge { background-color: #f2930d; border-radius: 2px; color: #fff; font-size: 0.9em; padding: 1px 4px; white-space: nowrap; } .xfwp-badge-green { background-color: #2e9b25; } /* TABS */ .xfwp-tabs { background-color: #f9f9f9; border: 1px solid rgba(0, 0, 0, 0.15); border-width: 0 0 1px; padding-top: 6px; text-align: center; } .xfwp-tab { border-radius: 3px; color: #1e1e1e; cursor: pointer; display: inline-block; line-height: 1; padding: 10px 15px; } .xfwp-tab.active { background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.15); border-bottom-color: #fff; font-weight: bold; margin-bottom: -1px !important; } .xfwp-tab-content { display: none; } .xfwp-tab-content.active { display: block; } /* NOTICES */ .xfwp-alert { background-color: #f7fb8d; border-radius: 3px; margin-bottom: 1em; padding: 10px; } /*------------------------------*\ $COMMENTS \*------------------------------*/ .xfwp-has-comments-tabs .xfwp-comment-active + #comments, .xfwp-has-comments-tabs .xfwp-comment-active + .wpdiscuz_top_clearing + #comments, .xfwp-has-comments-tabs .forum-comments, .xfwp-comments-loaded .forum-comments-more, .forum-comments-footer { display: none; } .xfwp-comments-loaded .forum-comments-footer { display: block; } .xfwp-has-comments-tabs .xfwp-comment-active { display: block !important; } .forum-comment:not(:last-child) { margin-bottom: 15px; } .comments-tabs, .forum-comments-list:not(:last-child), .forum-comments-title { margin-bottom: 25px; } /* GENERAL */ .forum-comments-header { align-items: center; display: flex; margin-bottom: 15px; } .forum-comments .forum-comments-title { flex: 1; margin: 0; } .forum-comment-username { font-weight: bold; } .forum-comment .forum-comment-avatar { border-bottom: 0; display: inline-block; } .forum-comment-avatar img { border-radius: 50%; } .forum-comment-message { position: relative; } .forum-comment .forum-comment-actions { margin-bottom: 0; } .forum-comment-like, .forum-comment-attribution { float: right; } .forum-comment-text blockquote { overflow: auto; max-height: 250px; } .forum-comment-count { margin-left: 5px; } .forum-comments-more { margin-bottom: 0; text-align: center; } .forum-comments-footer { background-color: rgba(0, 0, 0, 0.05); border-radius: 4px; padding: 20px; } /* COMMENT VIEW */ .comment-view .forum-comment:not(:last-child) { border-bottom: 1px solid #e7e7e7; margin-bottom: 20px; padding-bottom: 20px; } .comment-view .forum-comment-user { overflow: hidden; margin-bottom: 15px; width: 100%; } .comment-view .forum-comment-avatar { margin-right: 5px; } .comment-view .forum-comment-date, .comment-view .forum-comment-attribution a { border-bottom: 0; color: #8c8c8c; font-size: 0.8em; } /* THREAD VIEW */ .thread-view .forum-comment-inner { background-color: #fff; border: 1px solid #d8d8d8; border-radius: 4px; width: 100%; } .thread-view .forum-comment-user { background-color: #f5f5f5; border-color: #d8d8d8; border-style: solid; padding: 15px; } .thread-view .xfwp-avatar { font-size: 50px; height: 100px; width: 100px; } .forum-comments .forum-comment-byline a, .forum-comments .forum-comment-user a, .forum-comments .forum-comment-actions a { text-decoration: none; } .thread-view .forum-comment-username { margin-bottom: 0; } .forum-comment .forum-comment-username a, .forum-comment .forum-comment-like { border-bottom: 0; } .thread-view .forum-comment-user-title { color: #8c8c8c; font-size: 0.9em; margin-bottom: 0; } .thread-view .forum-comment-stats { font-size: 0.9em; text-align: left; } .thread-view .forum-comment-avatar { margin-bottom: 10px; } .thread-view .forum-comment .forum-comment-avatar { border-bottom: 0; display: inline-block; } .thread-view .forum-comment-message { padding: 15px; width: 100%; } .thread-view .forum-comment-byline { border-bottom: 1px solid #e7e7e7; font-size: 0.9em; line-height: 1; margin-bottom: 15px; padding-bottom: 8px; } .thread-view .forum-comment-byline a { border-bottom: 0; color: #8c8c8c; } /* EXPAND */ .forum-comment-excerpt .forum-comment-message { max-height: 450px; overflow: hidden; } .forum-comment-excerpt .forum-comment-expand { display: block; } .forum-comment-expand { background: linear-gradient(to bottom, rgba(254, 254, 254, 0) 0%, #fefefe 80%); display: none; height: 120px; position: absolute; bottom: 0; left: 0; width: 100%; } .forum-comment-expand-trigger { color: #f1920d; cursor: pointer; display: block; font-weight: bold; margin-top: 85px; text-align: center; width: 100%; } /* REFRESH */ .xfwp-loading .forum-comments-refresh { display: block; } .forum-comments-refresh { display: none; font-size: 20px; } .forum-comments-refresh .xfwp-icon-load { color: #f87b21; margin-right: 8px; } /* MEDIA PLACEHOLDER */ .xfwp-media-placeholder { background-color: #effaff; border-radius: 3px; padding: 20px 10px 30px; text-align: center; } .forum-comment .xfwp-media-placeholder p { margin-bottom: 0; } .xfwp-media-placeholder-icon { font-size: 34px; line-height: 1; } /* UNFURL */ .bbCodeBlock--unfurl:not(:last-child), .xfwp-media-placeholder:not(:last-child) { margin-bottom: 15px; } .bbCodeBlock--unfurl .contentRow { border: 1px solid #d8d8d8; border-radius: 3px; display: flex; padding: 10px; } .bbCodeBlock--unfurl .contentRow-header { font-size: 1em; font-weight: bold; line-height: 1.5em; margin-bottom: 5px; } .bbCodeBlock--unfurl .contentRow-header br, .bbCodeBlock--unfurl .contentRow-minor br, .xfwp-hide-images .bbCodeBlock--unfurl .xfwp-media-placeholder, .xfwp-hide-embeds .bbCodeBlock--unfurl { display: none; } .bbCodeBlock--unfurl .contentRow-figure { flex: 0 0 120px; margin-right: 15px; } .xfwp-hide-images .bbCodeBlock--unfurl .contentRow-figure { flex: inherit; margin-right: 0; } .bbCodeBlock--unfurl .contentRow-snippet { font-size: 0.9em; line-height: 1.4em; margin-bottom: 10px; } .bbCodeBlock--unfurl .contentRow-minor { color: rgba(0, 0, 0, 0.7); font-size: 0.8em; line-height: 1; } .bbCodeBlock--unfurl .bbCodeBlockUnfurl-icon { width: 13px; } .bbCodeBlock--unfurl .js-unfurl-favicon, .bbCodeBlock--unfurl .contentRow-minor p { display: inline-block; } .bbCodeBlock--unfurl .contentRow p { margin-bottom: 0; } .bbCodeBlock--unfurl p:empty { display: none; } /* QUERIES */ @media all and (min-width: 900px) { .thread-view .forum-comment-inner { display: flex; } .thread-view .forum-comment-user { border-radius: 4px 0 0 4px; border-width: 0 1px 0 0; flex: 0 0 180px; min-width: 0; text-align: center; } .thread-view .forum-comment-stat { display: block; } } @media all and (max-width: 900px) { .thread-view .xfwp-avatar { font-size: 25px; height: 50px; width: 50px; } .thread-view .forum-comment-user { border-radius: 4px 4px 0 0; border-width: 0 0 1px; display: flex; } .thread-view .forum-comment-avatar { flex: 0 0 50px; margin-right: 10px; } .thread-view .forum-comment-stat { margin-right: 5px; } } /*------------------------------*\ $USER_SYNC \*------------------------------*/ #xfwp_users_canvas, .xfwp-user { margin-bottom: 15px; } .xfwp-last-update, .xfwp-users .xfwp-icon-load { display: none; } .xfwp-user-verify { position: relative; } .xfwp-users input.xfwp-username { padding: 15px; } .xfwp-users input[type="text"]:read-only, .xfwp-users input[type="number"]:read-only, .xfwp-users input[type="email"]:read-only { background: rgba(255, 255, 255, 0.5); border-color: rgba(220, 220, 222, 0.75); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .04); color: rgba(44, 51, 56, 0.5); cursor: default; } .xfwp-delete-link { cursor: pointer; display: inline-block; font-size: 14px; font-weight: normal; line-height: 22px; position: absolute; top: 17px; right: 20px; z-index: 10; } .xfwp-delete-link input:checked + label { color: #cc1818; font-weight: bold; } .xfwp-delete-link label { margin-left: 3px; } .xfwp-users.xfwp-loading .xfwp-icon-load { display: inline-block; margin-left: 5px; } /*------------------------------*\ $WIDGET \*------------------------------*/ .xfwp-widget { font-size: 15px; line-height: 23px; } .widget_xfwp_widget .xfwp-widget a, .widget.widget_xfwp_widget .xfwp-widget a:hover { border-bottom: 0; text-decoration: none; } .xfwp-widget-section { background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.15); color: #777; } .xfwp-widget-inline:not(:last-child) { margin-bottom: 25px; } .xfwp-widget .xfwp-widget-section-title { font-size: 19px; line-height: 25px; margin-bottom: 0; padding: 12px; } .xfwp-widget .xfwp-widget-section-title a { text-decoration: none; } /* TABS */ .xfwp-widget.xfwp-tabbed .xfwp-tabs { border-radius: 3px 3px 0 0; } .xfwp-widget.xfwp-tabbed .xfwp-widget-section, .xfwp-widget-items-footer { border-radius: 0 0 3px 3px; } .xfwp-widget-inline { border-radius: 3px; } .xfwp-widget .xfwp-tabs { border-width: 1px 1px 0; } /* WIDGET ITEM */ .xfwp-widget-item { display: flex; padding: 12px; } .xfwp-widget-item:not(:last-child) { border-bottom: 1px solid rgba(0, 0, 0, 0.15); } .xfwp-widget .xfwp-widget-item-title { font-weight: bold; margin-bottom: 3px; } .xfwp-widget .xfwp-widget-item-details a { text-decoration: none; } .xfwp-widget-item .xfwp-widget-item-byline { font-size: 0.9em; margin-bottom: 0; } .xfwp-widget-item-icon { flex: 0 0 30px; text-align: center; } .xfwp-widget-icon-inner { display: block; position: relative; } .xfwp-widget-item-icon img { border-radius: 50%; } .xfwp-widget-item-details { padding-left: 10px; } .xfwp-widget-items-footer { background-color: #fcfcfc; border-top: 1px solid rgba(0, 0, 0, 0.15); font-size: 0.85em; padding: 7px 12px; } /* FORUMS */ .xfwp-widget-message-count, .xfwp-widget-item-icon .xfwp-widget-icon-inner { color: #777; } .xfwp-widget-forums .xfwp-widget-item-icon { font-size: 30px; } .xfwp-widget-message-count { display: block; font-size: 13px; font-weight: bold; } .xfwp-widget-forums .xfwp-widget-item-title { font-size: 1.1em; line-height: 1.5em; } .xfwp-widget-forums .xfwp-widget-item-subtitle, .xfwp-widget-forums .xfwp-widget-item-description { margin-bottom: 5px; } .xfwp-widget-forums .xfwp-widget-item-byline { font-style: italic; } /* STATS */ .forum-stats { padding: 6px 12px 6px 12px; } .xfwp-widget .forum-stats p { margin-bottom: 5px; } .forum-stats .stat-count { float: right; } .forum-stat-sep { border-top: 1px solid rgba(0, 0, 0, 0.15); margin-top: 10px; padding-top: 7px; } .forum-users-online { background-color: #2d9542; border-radius: 50%; display: inline-block; height: 12px; margin-right: 3px; width: 12px; vertical-align: middle; }