577 lines
13 KiB
SCSS
577 lines
13 KiB
SCSS
// =====================================================
|
|
// wpDiscuz Pro Teasers — shared styles
|
|
// Compiles to pro-teasers-shared.css
|
|
//
|
|
// Addon-specific partials (imported below):
|
|
// _bpi.scss — BuddyPress Integration (settings img)
|
|
// _fem.scss — Front-end Moderation (no addon-specific CSS)
|
|
// _wam.scss — Ads Manager (cache button)
|
|
// _wcai.scss — Comment Author Info (no addon-specific CSS)
|
|
// _wgi.scss — GIPHY Integration (logo image)
|
|
// _widg.scss — Widgets Addon (style images + custom CSS textarea)
|
|
// _wmi.scss — myCRED Integration (section headings + point inputs)
|
|
// _wmu.scss — Media Uploader (no addon-specific CSS)
|
|
// _wou.scss — Online Users (no addon-specific overrides)
|
|
// _wpc.scss — Private Commenting (no addon-specific CSS)
|
|
// _wpds.scss — Comment Search (fields checkbox wrapper)
|
|
// _wrc.scss — Google reCAPTCHA (no addon-specific CSS)
|
|
// _wrf.scss — Comment Reporting (option-entry row)
|
|
// _wsbm.scss — Subscription Manager (mock table + intro list)
|
|
// _wsh.scss — Syntax Highlighter (lang groups)
|
|
// _wti.scss — Tenor Integration (logo image)
|
|
// _wucm.scss — User & Comment Mentioning (no addon-specific CSS)
|
|
// _wun.scss — User Notifications (switcher/bells/colors/phrases)
|
|
// _wv.scss — Advanced Likers (level cards)
|
|
// _wvc.scss — Voice Commenting (no addon-specific CSS)
|
|
// _we.scss — Embeds (oEmbed provider grid)
|
|
// _wsm.scss — Emoticons (sticker images + custom stickers table)
|
|
// _wr.scss — Reviews (label rows, schema table, taxonomy accordion force-open)
|
|
// =====================================================
|
|
|
|
@use 'variables' as *;
|
|
@use 'wpdiscuz-buddypress-integration';
|
|
@use 'wpdiscuz-frontend-moderation';
|
|
@use 'wpdiscuz-ads-manager';
|
|
@use 'wpdiscuz-comment-author-info';
|
|
@use 'wpdiscuz-giphy-integration';
|
|
@use 'wpdiscuz-widgets';
|
|
@use 'wpdiscuz-mycred-integration';
|
|
@use 'wpdiscuz-media-uploader';
|
|
@use 'wpdiscuz-online-users';
|
|
@use 'wpdiscuz-private-commenting';
|
|
@use 'wpdiscuz-comment-search';
|
|
@use 'wpdiscuz-google-recaptcha';
|
|
@use 'wpdiscuz-comment-reporting';
|
|
@use 'wpdiscuz-subscription-manager';
|
|
@use 'wpdiscuz-syntax-highlighter';
|
|
@use 'wpdiscuz-tenor-integration';
|
|
@use 'wpdiscuz-user-comment-mentioning';
|
|
@use 'wpdiscuz-user-notifications';
|
|
@use 'wpdiscuz-advanced-likers';
|
|
@use 'wpdiscuz-voice-commenting';
|
|
@use 'wpdiscuz-embeds';
|
|
@use 'wpdiscuz-emoticons';
|
|
@use 'wpdiscuz-reviews';
|
|
|
|
|
|
// =====================================================
|
|
// Accordion wrapper
|
|
// =====================================================
|
|
|
|
.wpd-pro-teaser-wrap {
|
|
margin-top: 20px;
|
|
border: 1px solid $gold-border;
|
|
border-radius: $border-radius;
|
|
background: #fff;
|
|
box-shadow: 0 2px 8px rgba(200, 168, 0, 0.15);
|
|
}
|
|
|
|
// Header
|
|
.wpd-pro-teaser-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 13px 18px;
|
|
background: $gold-bg;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid $gold-border;
|
|
border-radius: $border-radius $border-radius 0 0;
|
|
user-select: none;
|
|
transition: background 0.2s ease;
|
|
|
|
&:hover {
|
|
background: $gold-bg-hover;
|
|
}
|
|
|
|
.wpd-pro-teaser-wrap.wpd-pro-collapsed & {
|
|
border-bottom: none;
|
|
border-radius: $border-radius;
|
|
}
|
|
}
|
|
|
|
.wpd-pro-teaser-title {
|
|
font-weight: 700;
|
|
font-size: 14px;
|
|
color: $gold-dark-text;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
|
|
.dashicons {
|
|
font-size: 18px;
|
|
width: 18px;
|
|
height: 18px;
|
|
color: $gold-border;
|
|
}
|
|
}
|
|
|
|
.wpd-pro-teaser-header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
// Unlock hint
|
|
.wpd-pro-unlock-hint {
|
|
font-size: 12px;
|
|
color: $gold-hint-text;
|
|
font-style: italic;
|
|
font-weight: 400;
|
|
}
|
|
|
|
// PRO badge (accordion header only)
|
|
.wpd-pro-badge {
|
|
display: inline-block;
|
|
background: $red-flat;
|
|
color: #fff;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
padding: 2px 7px;
|
|
border-radius: 3px;
|
|
letter-spacing: 0.8px;
|
|
vertical-align: middle;
|
|
margin-left: 6px;
|
|
line-height: 1.6;
|
|
box-shadow: 0 1px 3px $red-badge-shadow;
|
|
}
|
|
|
|
// Toggle chevron
|
|
.wpd-pro-toggle-icon {
|
|
font-size: 10px;
|
|
color: $gold-hint-text;
|
|
transition: transform 0.2s ease;
|
|
display: inline-block;
|
|
|
|
.wpd-pro-teaser-wrap.wpd-pro-collapsed & {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
|
|
// Body
|
|
.wpd-pro-teaser-body {
|
|
padding: 0 30px 10px;
|
|
position: relative;
|
|
|
|
// Label padding
|
|
.wpd-opt-name label {
|
|
padding-top: 4px;
|
|
display: inline-block;
|
|
}
|
|
|
|
// Disable all interactions
|
|
.wpd-opt-row {
|
|
pointer-events: none;
|
|
opacity: 0.55;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
input[type="checkbox"],
|
|
input[type="radio"],
|
|
input[type="number"],
|
|
input[type="text"],
|
|
button {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
// Native checkboxes — visible size + border so they read clearly at 55% opacity
|
|
input[type="checkbox"] {
|
|
margin: 0;
|
|
width: 15px;
|
|
height: 15px;
|
|
outline: 1px solid #999;
|
|
outline-offset: 1px;
|
|
vertical-align: middle;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
// Toggle switchers hide their real checkbox — reset the size overrides above
|
|
.wpd-switcher input[type="checkbox"] {
|
|
width: auto;
|
|
height: auto;
|
|
outline: none;
|
|
outline-offset: 0;
|
|
flex-shrink: unset;
|
|
vertical-align: unset;
|
|
}
|
|
|
|
select {
|
|
pointer-events: auto;
|
|
cursor: pointer;
|
|
}
|
|
|
|
// Shared color wrap (WPDS, WUN, WOU)
|
|
.wpd-color-wrap {
|
|
margin-bottom: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
// !important needed: #wpd-setbox .wpd-setbox-body input[type="text"] { width: 318px } has higher specificity
|
|
input[type="text"] {
|
|
margin: 1px;
|
|
padding: 3px 5px;
|
|
width: 110px !important;
|
|
}
|
|
}
|
|
|
|
.wpd-color-swatch {
|
|
@include color-swatch(18px);
|
|
}
|
|
|
|
// ---- Shared teaser utility classes ----------------------------------------
|
|
|
|
// Intro description block
|
|
.wpd-opt-intro {
|
|
text-align: left;
|
|
}
|
|
|
|
// Phrase text inputs (90% wide)
|
|
// !important needed: #wpd-setbox .wpd-setbox-body input[type="text"] { width: 318px } has higher specificity
|
|
.wpd-teaser-input {
|
|
margin: 1px;
|
|
padding: 3px 5px;
|
|
width: 90% !important;
|
|
}
|
|
|
|
// Phrase / body textareas
|
|
.wpd-teaser-textarea {
|
|
width: 90%;
|
|
}
|
|
|
|
// Number inputs — three widths
|
|
// !important needed on -sm: main CSS sets input[type="text"] { width: 318px } (embeds player dims use wpd-num-input-sm)
|
|
.wpd-num-input {
|
|
width: 80px;
|
|
}
|
|
|
|
.wpd-num-input-sm {
|
|
width: 70px !important;
|
|
}
|
|
|
|
.wpd-num-input-md {
|
|
width: 100px;
|
|
}
|
|
|
|
// Full-width text / audio inputs
|
|
.wpd-input-full {
|
|
width: 100%;
|
|
}
|
|
|
|
// Teaser images (max-width 100%)
|
|
img.wpd-teaser-img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
// Last opt-row — no bottom border
|
|
.wpd-opt-row.wpd-opt-row-no-border {
|
|
border-bottom: none;
|
|
}
|
|
|
|
// Subtitle with extra top margin
|
|
.wpd-subtitle-mt {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.wpd-subtitle-mt-lg {
|
|
margin-top: 28px;
|
|
}
|
|
|
|
// Multi-column checkbox group item (base)
|
|
.wpd-mublock-inline {
|
|
display: inline-block;
|
|
width: 200px;
|
|
min-width: 33%;
|
|
}
|
|
|
|
// Width modifier variants — combine with .wpd-mublock-inline
|
|
// Use min-width (not width): #wpd-setbox .wpd-setcon .wpd-mublock-inline { width: 19.5% } would
|
|
// override a plain width rule; min-width is a separate property not set by that rule so it always wins.
|
|
.wpd-mublock-wide {
|
|
min-width: 45%;
|
|
}
|
|
|
|
.wpd-mublock-half {
|
|
min-width: 49%;
|
|
}
|
|
|
|
.wpd-mublock-full {
|
|
min-width: 95%;
|
|
}
|
|
|
|
.wpd-mublock-third {
|
|
min-width: 32%;
|
|
}
|
|
|
|
// Checkbox group label
|
|
.wpd-check-label {
|
|
white-space: nowrap;
|
|
font-size: 13px;
|
|
}
|
|
|
|
// Radio button labels (switch-field style)
|
|
.wpd-radio-lbl {
|
|
min-width: 60px;
|
|
}
|
|
|
|
// Colors / lang-groups section — opt-input spanning full row
|
|
// !important needed: main settings CSS has higher specificity via #wpd-setbox .wpd-setcon .wpd-opt-row .wpd-opt-input
|
|
.wpd-opt-input-full-row {
|
|
width: calc(100% - 40px) !important;
|
|
}
|
|
}
|
|
|
|
.wpd-pro-teaser-wrap.wpd-pro-collapsed .wpd-pro-teaser-body {
|
|
display: none;
|
|
}
|
|
|
|
// CTA footer
|
|
.wpd-pro-teaser-cta {
|
|
padding: 12px 18px;
|
|
border-top: 1px solid #e0c840;
|
|
text-align: right;
|
|
background: #fef8d0;
|
|
border-radius: 0 0 $border-radius $border-radius;
|
|
pointer-events: all;
|
|
|
|
a {
|
|
pointer-events: all;
|
|
opacity: 1;
|
|
cursor: pointer;
|
|
background: $red-flat !important;
|
|
border-color: $red-border !important;
|
|
color: #fff !important;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
letter-spacing: 0.3px;
|
|
box-shadow: 0 2px 5px $red-shadow;
|
|
transition: box-shadow 0.2s ease, filter 0.2s ease;
|
|
padding: 5px 7px;
|
|
|
|
&:hover {
|
|
filter: brightness(1.1);
|
|
box-shadow: 0 3px 8px $red-shadow-hover;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// =====================================================
|
|
// Sidebar PRO teaser indicator (shared class)
|
|
// JS adds .wpd-pro-teaser-menu-item to <li> elements
|
|
// whose tab link corresponds to a teaser tab.
|
|
// =====================================================
|
|
|
|
#wpd-setbox .wpd-setbar li.wpd-pro-teaser-menu-item {
|
|
background: $gold-bg;
|
|
border-top: 1px solid $gold-border;
|
|
|
|
&:hover {
|
|
background: $gold-bg-hover;
|
|
}
|
|
|
|
> a {
|
|
color: $gold-dark-text;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&:hover {
|
|
color: $gold-hover-text;
|
|
}
|
|
|
|
.wpd-menu-title-wrap {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.wpd-menu-title-text {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
&::after {
|
|
@include pro-badge-pseudo();
|
|
}
|
|
}
|
|
|
|
&.wpd-active {
|
|
background: $gold-bg-hover;
|
|
width: calc(100% + 1px);
|
|
|
|
> a,
|
|
a {
|
|
color: $gold-dark-text;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// =====================================================
|
|
// Dashboard home card PRO teaser indicator (shared class)
|
|
// JS adds .wpd-pro-teaser-dashboard-card to addon cards
|
|
// whose link corresponds to a teaser tab.
|
|
// =====================================================
|
|
|
|
#wpd-setbox .wpd-settings-home .wpd-box.wpd-pro-teaser-dashboard-card {
|
|
border: 1px solid $gold-border;
|
|
box-shadow: 0 2px 8px rgba(184, 150, 12, 0.2);
|
|
background: $gold-bg-card;
|
|
|
|
.wpd-body {
|
|
background: transparent;
|
|
|
|
&:hover {
|
|
background: $gold-bg-card-hover;
|
|
}
|
|
}
|
|
|
|
.wpd-title a {
|
|
color: $gold-dark-text;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
|
|
.wpd-addon-title-text {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
min-width: 0;
|
|
}
|
|
|
|
&::after {
|
|
@include pro-badge-pseudo();
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// =====================================================
|
|
// Pro Add-ons sidebar menu collapse
|
|
// =====================================================
|
|
|
|
#wpd-setbox .wpd-setbar .wpd-menu-group-teasers li.wpd-menu-head {
|
|
cursor: pointer;
|
|
|
|
.wpd-pro-addons-count {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
opacity: 0.7;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.wpd-menu-head-new-badge {
|
|
margin-left: 6px;
|
|
margin-right: 3px;
|
|
vertical-align: center;
|
|
line-height: 1em;
|
|
}
|
|
}
|
|
|
|
|
|
// =====================================================
|
|
// "NEW" badge — recently published add-ons (< 3 months)
|
|
// =====================================================
|
|
|
|
@keyframes wpd-new-pulse {
|
|
0%, 100% {
|
|
background-color: #00a32a;
|
|
box-shadow: 0 0 0 0 rgba(0, 163, 42, 0.5);
|
|
}
|
|
60% {
|
|
background-color: #00c130;
|
|
box-shadow: 0 0 0 5px rgba(0, 163, 42, 0);
|
|
}
|
|
}
|
|
|
|
.wpd-new-badge {
|
|
display: inline-block;
|
|
flex-shrink: 0;
|
|
font-size: 9px;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
color: #fff;
|
|
background: #00a32a;
|
|
border-radius: 3px;
|
|
padding: 2px 5px;
|
|
margin-right: 5px;
|
|
vertical-align: middle;
|
|
letter-spacing: 0.5px;
|
|
text-transform: uppercase;
|
|
animation: wpd-new-pulse 1.8s ease-out infinite;
|
|
}
|
|
|
|
|
|
// =====================================================
|
|
// RTL overrides — common
|
|
// =====================================================
|
|
|
|
body.rtl {
|
|
.wpd-pro-badge {
|
|
margin-left: 0;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.wpd-new-badge {
|
|
margin-right: 0;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.wpd-menu-head-new-badge {
|
|
margin-left: 0;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.wpd-pro-teaser-cta {
|
|
text-align: left;
|
|
}
|
|
|
|
.wpd-pro-teaser-header-right {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.wpd-pro-teaser-title {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.wpd-pro-teaser-body .wpd-color-wrap {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.wpd-pro-teaser-body .wpd-mublock-inline {
|
|
display: inline-block; // keep inline-block direction in RTL
|
|
}
|
|
|
|
.wpd-pro-teaser-body .widg-pro-opt-input-wide {
|
|
text-align: left;
|
|
}
|
|
|
|
#wpd-setbox .wpd-setbar li.wpd-pro-teaser-menu-item {
|
|
background: $gold-bg;
|
|
|
|
> a::after {
|
|
margin-left: 0;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
|
|
#wpd-setbox .wpd-settings-home .wpd-box.wpd-pro-teaser-dashboard-card {
|
|
.wpd-title a {
|
|
flex-direction: row-reverse;
|
|
|
|
&::after {
|
|
margin-left: 0;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|