WordPress.org
Get WordPress

Plugin Directory

Changeset 3787390


Ignore:
Timestamp:
11/06/2026 07:43:06 AM (33 hours ago)
Author:
davidvongries
Message:

updated to 2.11.2

Location:
responsive-youtube-vimeo-popup
Files:
52 added
1 deleted
7 edited

Legend:

Unmodified
Added
Removed

  • responsive-youtube-vimeo-popup/trunk/assets/css/admin-page.css

    r3786056 r3787390  
    22 * WP Video Popup settings page.
    33 * Builds on heatbox.css and uses its --heatbox-* tokens.
     4 * Shared by the free & PRO version, keep both copies identical.
    45 */
    56
    … …  
    910}
    1011
    11 /* Getting started */
    12 .wpvp-builder {
     12/* Brand layer: WP Video Popup's own colors on top of heatbox */
     13.wpvp-admin-page {
     14        --wpvp-brand: #c44341;
     15        --wpvp-brand-dark: #a3302e;
     16        --wpvp-ink: #1d2327;
     17}
     18
     19/* PRO badge next to the page title (PRO) */
     20.heatbox-wrap .title .wpvp-pro-badge {
     21        margin: 0;
     22        padding: 5px 12px;
     23        font-size: 12px;
     24        line-height: 1.2;
     25        color: #fff;
     26        background: var(--wpvp-brand);
     27}
     28
     29/* ==========================================================================
     30   Shortcode builder: one card, one job
     31   <section class="heatbox wpvp-studio">header, body, result</section>
     32   ========================================================================== */
     33
     34.heatbox.wpvp-studio {
     35        overflow: hidden;
     36}
     37
     38.wpvp-studio-header {
     39        padding: var(--heatbox-box-padding) var(--heatbox-box-padding) 0;
     40}
     41
     42.heatbox .wpvp-studio-header h2 {
     43        margin: 0 0 6px;
     44        padding: 0;
     45        font-size: 22px;
     46        line-height: 1.3;
     47        border: 0;
     48}
     49
     50.heatbox .wpvp-studio-header p {
     51        margin: 0;
     52        font-size: 14px;
     53        color: var(--heatbox-text-muted);
     54}
     55
     56.wpvp-studio-body {
    1357        display: grid;
    14         gap: 16px;
    15         margin-top: 12px;
    16         padding: var(--heatbox-gap);
    17         background: var(--heatbox-surface-hover);
    18         border: 1px solid var(--heatbox-divider);
    19         border-radius: var(--heatbox-radius);
    20 }
    21 
    22 .wpvp-builder-row {
    23         display: grid;
    24         grid-template-columns: minmax(0, 1fr) auto;
    25         gap: 16px;
    26 }
    27 
    28 .wpvp-builder-field label {
     58        gap: 22px;
     59        padding: 24px var(--heatbox-box-padding) var(--heatbox-box-padding);
     60}
     61
     62/* Fields (the field look itself comes from heatbox) */
     63.wpvp-studio-field label {
    2964        display: block;
    30         margin-bottom: 6px;
     65        margin-bottom: 8px;
     66        font-size: 13px;
     67        font-weight: 500;
     68        color: var(--heatbox-text);
     69}
     70
     71.wpvp-studio-optional {
     72        margin-inline-start: 4px;
     73        font-weight: 400;
     74        color: var(--heatbox-control-border);
     75}
     76
     77.wpvp-studio input[type="text"],
     78.wpvp-studio input[type="url"],
     79.wpvp-studio input[type="number"] {
     80        width: 100%;
     81        max-width: none;
     82        margin: 0;
     83}
     84
     85/* The one field that matters most */
     86.heatbox .wpvp-studio-field.is-primary input[type="url"] {
     87        min-height: 52px;
     88        padding-inline-end: 130px;
     89        font-size: 15px;
     90}
     91
     92.heatbox .wpvp-studio input[aria-invalid="true"] {
     93        border-color: #d63638;
     94}
     95
     96.heatbox .wpvp-studio-hint {
     97        margin: 8px 0 0;
     98        font-size: 12px;
     99        line-height: 1.5;
     100        color: var(--heatbox-text-muted);
     101}
     102
     103.wpvp-studio-hint code {
     104        padding: 1px 4px;
     105        font-size: 11px;
     106        white-space: nowrap;
     107}
     108
     109.heatbox .wpvp-studio-hint.is-invalid {
     110        color: #d63638;
     111}
     112
     113/* Video link with the detected service inside the field */
     114.wpvp-builder-video {
     115        position: relative;
     116}
     117
     118.wpvp-service {
     119        position: absolute;
     120        top: 50%;
     121        right: 8px;
     122        display: inline-flex;
     123        align-items: center;
     124        gap: 6px;
     125        padding: 3px 10px;
     126        font-size: 12px;
    31127        font-weight: 600;
     128        line-height: 1.5;
    32129        color: var(--heatbox-text);
    33 }
    34 
    35 /* Label with a tooltip next to it */
    36 .wpvp-builder-label {
    37         display: flex;
    38         align-items: center;
    39         gap: 2px;
    40         margin-bottom: 6px;
    41 }
    42 
    43 .wpvp-builder-label label {
    44         margin-bottom: 0;
    45 }
    46 
    47 .wpvp-builder-label .heatbox-tooltip {
    48         margin: -4px 0;
    49         color: var(--heatbox-text-muted);
    50 }
    51 
    52 .wpvp-builder-label .dashicons {
     130        background: var(--heatbox-surface-muted);
     131        border-radius: 999px;
     132        transform: translateY(-50%);
     133        pointer-events: none;
     134        animation: wpvp-pop 0.2s ease-out;
     135}
     136
     137.wpvp-service[hidden] {
     138        display: none;
     139}
     140
     141.wpvp-service::before {
     142        content: "";
     143        width: 8px;
     144        height: 8px;
     145        background: var(--heatbox-text-muted);
     146        border-radius: 50%;
     147}
     148
     149.wpvp-service[data-service="youtube"]::before {
     150        background: #ff0033;
     151}
     152
     153.wpvp-service[data-service="vimeo"]::before {
     154        background: #17d5ff;
     155}
     156
     157.wpvp-service[data-service="rumble"]::before {
     158        background: #85c742;
     159}
     160
     161@keyframes wpvp-pop {
     162        from {
     163                opacity: 0;
     164                transform: translateY(-50%) scale(0.9);
     165        }
     166}
     167
     168@media (prefers-reduced-motion: reduce) {
     169        .wpvp-service {
     170                animation: none;
     171        }
     172}
     173
     174/* Options as toggle chips */
     175.wpvp-chips {
     176        display: flex;
     177        flex-wrap: wrap;
     178        gap: 8px;
     179}
     180
     181.heatbox .wpvp-chip {
     182        position: relative;
     183        display: inline-flex;
     184        align-items: center;
     185        gap: 6px;
     186        margin: 0;
     187        padding: 7px 14px 7px 11px;
     188        font-size: 13px;
     189        font-weight: 500;
     190        color: var(--heatbox-text);
     191        background: var(--heatbox-surface);
     192        border: 1px solid var(--heatbox-border);
     193        border-radius: 999px;
     194        cursor: pointer;
     195        user-select: none;
     196        transition: color var(--heatbox-transition), background-color var(--heatbox-transition), border-color var(--heatbox-transition);
     197}
     198
     199.wpvp-chip input {
     200        position: absolute;
     201        width: 1px;
     202        height: 1px;
     203        margin: 0;
     204        opacity: 0;
     205        pointer-events: none;
     206}
     207
     208.wpvp-chip .dashicons {
    53209        width: 16px;
    54210        height: 16px;
    55211        font-size: 16px;
    56 }
    57 
    58 .wpvp-builder-field input.regular-text,
    59 .wpvp-builder-field input.large-text {
    60         width: 100%;
    61         max-width: 100%;
    62 }
    63 
    64 .wpvp-builder-field input.small-text {
    65         width: 110px;
    66 }
    67 
    68 .heatbox .wpvp-builder-field .description {
    69         margin: 6px 0 0;
    70 }
    71 
    72 .wpvp-builder-field .description.is-invalid {
    73         color: #b32d2e;
    74 }
    75 
    76 .wpvp-builder-checkboxes {
     212        color: var(--heatbox-text-muted);
     213        transition: color var(--heatbox-transition);
     214}
     215
     216.heatbox .wpvp-chip:hover {
     217        border-color: var(--heatbox-control-border);
     218}
     219
     220.heatbox .wpvp-chip:has(input:checked) {
     221        color: #fff;
     222        background: var(--wpvp-ink);
     223        border-color: var(--wpvp-ink);
     224}
     225
     226.wpvp-chip:has(input:checked) .dashicons {
     227        color: #fff;
     228}
     229
     230.wpvp-chip:has(input:focus-visible) {
     231        box-shadow: 0 0 0 2px var(--heatbox-surface), 0 0 0 4px var(--heatbox-accent);
     232}
     233
     234/* Advanced options, folded away */
     235.wpvp-studio-advanced {
     236        padding-top: 18px;
     237        border-top: 1px solid var(--heatbox-box-border);
     238}
     239
     240.wpvp-studio-advanced summary {
     241        display: flex;
     242        align-items: center;
     243        gap: 8px;
     244        width: fit-content;
     245        font-size: 13px;
     246        font-weight: 500;
     247        color: var(--heatbox-text);
     248        list-style: none;
     249        cursor: pointer;
     250}
     251
     252.wpvp-studio-advanced summary::-webkit-details-marker {
     253        display: none;
     254}
     255
     256.wpvp-studio-advanced summary::before {
     257        content: "";
     258        width: 6px;
     259        height: 6px;
     260        margin-inline-end: 2px;
     261        border-right: 1.5px solid currentColor;
     262        border-bottom: 1.5px solid currentColor;
     263        transform: rotate(-45deg);
     264        transition: transform var(--heatbox-transition);
     265}
     266
     267.wpvp-studio-advanced[open] summary::before {
     268        transform: rotate(45deg);
     269}
     270
     271.wpvp-studio-advanced summary span {
     272        font-weight: 400;
     273        color: var(--heatbox-control-border);
     274}
     275
     276.wpvp-studio-advanced summary:focus-visible {
     277        border-radius: 4px;
     278        outline: 2px solid var(--heatbox-accent);
     279        outline-offset: 4px;
     280}
     281
     282.wpvp-studio-grid {
     283        display: grid;
     284        grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr);
     285        gap: 16px;
     286        margin-top: 18px;
     287}
     288
     289.wpvp-studio-unit {
     290        position: relative;
     291}
     292
     293.heatbox .wpvp-studio-unit input[type="number"] {
     294        padding-inline-end: 42px;
     295}
     296
     297.wpvp-studio-unit span {
     298        position: absolute;
     299        top: 50%;
     300        right: 14px;
     301        font-size: 13px;
     302        color: var(--heatbox-control-border);
     303        transform: translateY(-50%);
     304        pointer-events: none;
     305}
     306
     307/* Result: the shortcode & the trigger class */
     308.wpvp-studio-result {
     309        padding: 20px var(--heatbox-box-padding) 22px;
     310        background: var(--heatbox-surface-hover);
     311        border-top: 1px solid var(--heatbox-box-border);
     312}
     313
     314/* Dark code bar with syntax highlighting & a copy button */
     315.wpvp-code {
     316        display: flex;
     317        align-items: center;
     318        gap: 12px;
     319        padding: 12px 12px 12px 16px;
     320        background: var(--wpvp-ink);
     321        border-radius: var(--heatbox-radius);
     322}
     323
     324.wpvp-code code {
     325        flex-grow: 1;
     326        min-width: 0;
     327        margin: 0;
     328        padding: 0;
     329        font-size: 13px;
     330        line-height: 1.6;
     331        color: #f0f0f1;
     332        background: none;
     333        white-space: pre-wrap;
     334        overflow-wrap: anywhere; /* Break between attributes, long URLs anywhere */
     335}
     336
     337/* Keep an attribute (name="value") together where possible */
     338.wpvp-token-attr,
     339.wpvp-token-punct {
     340        white-space: nowrap;
     341}
     342
     343.wpvp-token-tag {
     344        font-weight: 600;
     345        color: #f0f0f1;
     346}
     347
     348.wpvp-token-attr {
     349        color: #9ec2ff;
     350}
     351
     352.wpvp-token-punct {
     353        color: #8c8f94;
     354}
     355
     356.wpvp-token-value {
     357        color: #ffb59e;
     358}
     359
     360.wpvp-code-copy {
     361        display: inline-flex;
     362        flex-shrink: 0;
     363        align-items: center;
     364        gap: 6px;
     365        height: 32px;
     366        padding: 0 12px;
     367        font-size: 13px;
     368        font-weight: 500;
     369        color: #fff;
     370        background: var(--wpvp-brand);
     371        border: 0;
     372        border-radius: var(--heatbox-radius-small);
     373        cursor: pointer;
     374        transition: background-color var(--heatbox-transition);
     375}
     376
     377.wpvp-code-copy:hover {
     378        background: var(--wpvp-brand-dark);
     379}
     380
     381.wpvp-code-copy:focus {
     382        outline: none;
     383}
     384
     385.wpvp-code-copy:focus-visible {
     386        outline: 2px solid #fff;
     387        outline-offset: 2px;
     388}
     389
     390.wpvp-code-copy .dashicons {
     391        width: 16px;
     392        height: 16px;
     393        font-size: 16px;
     394}
     395
     396.wpvp-code-copy.is-copied {
     397        background: #00a32a;
     398}
     399
     400.wpvp-code-copy.is-copied .dashicons::before {
     401        content: "\f147"; /* dashicons-yes */
     402}
     403
     404.wpvp-studio-result .wpvp-code {
     405        padding: 14px 14px 14px 18px;
     406        border-radius: 10px;
     407}
     408
     409.heatbox .wpvp-studio-trigger {
    77410        display: flex;
    78411        flex-wrap: wrap;
    79         gap: 8px 24px;
    80 }
    81 
    82 .wpvp-builder .heatbox-copy code {
     412        align-items: center;
     413        gap: 8px;
     414        margin: 14px 0 0;
     415        font-size: 13px;
     416        color: var(--heatbox-text-muted);
     417}
     418
     419.wpvp-class-chip {
     420        display: inline-flex;
     421        align-items: center;
     422        gap: 6px;
     423        margin: 0;
     424        padding: 4px 8px 4px 10px;
    83425        background: var(--heatbox-surface);
    84 }
    85 
    86 .heatbox .wpvp-class-copy {
    87         margin-bottom: 12px;
    88 }
    89 
    90 .wpvp-class-copy code {
    91         flex-grow: 0;
     426        border: 1px solid var(--heatbox-border);
     427        border-radius: 6px;
     428        cursor: pointer;
     429        transition: border-color var(--heatbox-transition);
     430}
     431
     432.wpvp-class-chip:hover {
     433        border-color: var(--wpvp-ink);
     434}
     435
     436.wpvp-class-chip:focus-visible {
     437        outline: 2px solid var(--heatbox-accent);
     438        outline-offset: 2px;
     439}
     440
     441.wpvp-class-chip code {
     442        padding: 0;
     443        font-size: 12px;
     444        color: var(--wpvp-ink);
     445        background: none;
     446}
     447
     448.wpvp-class-chip .dashicons {
     449        width: 14px;
     450        height: 14px;
     451        font-size: 14px;
     452        color: var(--heatbox-control-border);
     453}
     454
     455.wpvp-class-chip.is-copied {
     456        border-color: #00a32a;
     457}
     458
     459.wpvp-class-chip.is-copied .dashicons {
     460        color: #00a32a;
     461}
     462
     463.wpvp-class-chip.is-copied .dashicons::before {
     464        content: "\f147"; /* dashicons-yes */
    92465}
    93466
    94467@media screen and (max-width: 782px) {
    95         .wpvp-builder {
    96                 padding: 16px;
     468        .wpvp-studio-header {
     469                padding: 22px 20px 0;
    97470        }
    98471
    99         .wpvp-builder-row {
     472        .wpvp-studio-body {
     473                padding: 20px 20px 24px;
     474        }
     475
     476        .wpvp-studio-result {
     477                padding: 18px 20px 20px;
     478        }
     479
     480        .wpvp-studio-grid {
    100481                grid-template-columns: 1fr;
    101482        }
    102 
    103         .heatbox-steps > li {
    104                 padding-inline-start: 36px;
    105         }
    106 }
    107 
    108 /* Size field */
     483}
     484
     485/* ==========================================================================
     486   Settings
     487   ========================================================================== */
     488
     489/* Popup size: device switcher pinned right next to the field, hint below the field.
     490   Pinned (not in the flow) so the hint's width doesn't push the switcher away. */
     491.wpvp-size-settings {
     492        position: relative;
     493}
     494
    109495.wpvp-size-field {
    110         width: 100px;
     496        width: 120px;
     497        margin: 0;
    111498}
    112499
    … …  
    117504        align-items: center;
    118505        gap: 6px;
    119         margin: 0 0 8px;
     506        position: absolute;
     507        top: 0;
     508        left: 132px; /* Field width (120px) + 12px gap */
     509        height: 40px; /* Same height as the field next to it */
     510        margin: 0;
    120511        padding: 0;
    121512        list-style: none;
    … …  
    144535        color: var(--heatbox-text);
    145536        border-color: var(--heatbox-control-border);
     537}
     538
     539/* Focus ring for keyboard use only, not after a mouse click */
     540.wpvp-responsive-control .wpvp-device-button:focus {
     541        outline: none;
     542        box-shadow: none;
     543}
     544
     545.wpvp-responsive-control .wpvp-device-button:focus-visible {
     546        box-shadow: 0 0 0 2px var(--heatbox-surface), 0 0 0 4px var(--heatbox-accent);
    146547}
    147548
    … …  
    194595}
    195596
     597/* License status (PRO) */
     598.heatbox .wpvp-license-badge.is-active {
     599        color: #fff;
     600        background: #008a20;
     601}
     602
     603.heatbox .wpvp-license-badge.is-inactive {
     604        color: #fff;
     605        background: #d63638;
     606}
     607
     608/* License key field with its buttons in one row (PRO) */
     609.wpvp-license-row {
     610        display: flex;
     611        flex-wrap: wrap;
     612        align-items: center;
     613        gap: 8px;
     614}
     615
     616.wpvp-license-row .regular-text {
     617        flex: 1 1 260px;
     618        max-width: 25em;
     619        margin: 0;
     620}
     621
     622.wpvp-license-row .button {
     623        margin: 0;
     624}
     625
     626/* Color picker (Coloris): color preview inside the field */
     627.wpvp-admin-page .clr-field input.wp-video-popup-color-picker {
     628        width: 220px;
     629        padding-inline-end: 40px;
     630}
     631
     632.wpvp-admin-page .clr-field button {
     633        right: 5px;
     634        width: 22px;
     635        height: 22px;
     636        border-radius: var(--heatbox-radius-small);
     637}
     638
     639/* Color picker popover, styled like the WP admin & heatbox */
     640.heatbox-admin .clr-picker {
     641        width: 232px;
     642        padding: 12px;
     643        gap: 0;
     644        border: 1px solid var(--heatbox-border);
     645        border-radius: var(--heatbox-radius);
     646        box-shadow: var(--heatbox-shadow-raised);
     647        box-sizing: border-box;
     648}
     649
     650.heatbox-admin .clr-gradient {
     651        height: 120px;
     652        margin-bottom: 12px;
     653        border-radius: var(--heatbox-radius-small);
     654}
     655
     656.heatbox-admin .clr-hue,
     657.heatbox-admin .clr-alpha {
     658        width: calc(100% - 16px);
     659        margin: 6px 8px;
     660}
     661
     662.heatbox-admin .clr-alpha div,
     663.heatbox-admin .clr-hue div {
     664        width: 14px;
     665        height: 14px;
     666        margin-left: -7px;
     667        box-shadow: 0 0 0 1px var(--heatbox-control-border);
     668}
     669
     670.heatbox-admin .clr-preview {
     671        width: 30px;
     672        height: 30px;
     673        margin: 12px 8px 12px 0;
     674        border-radius: var(--heatbox-radius-small);
     675}
     676
     677.heatbox-admin .clr-preview:before,
     678.heatbox-admin .clr-preview:after,
     679.heatbox-admin .clr-preview button {
     680        border-radius: var(--heatbox-radius-small);
     681}
     682
     683.heatbox-admin input.clr-color {
     684        width: calc(100% - 38px);
     685        height: 30px;
     686        min-height: 30px;
     687        margin: 12px 0;
     688        padding: 0 8px;
     689        color: var(--heatbox-text);
     690        border: 1px solid var(--heatbox-control-border);
     691        border-radius: var(--heatbox-radius-small);
     692        font-family: inherit;
     693        font-size: 13px;
     694        text-align: left;
     695}
     696
     697.heatbox-admin input.clr-color:focus {
     698        border-color: var(--heatbox-accent);
     699        box-shadow: 0 0 0 1px var(--heatbox-accent);
     700}
     701
     702/* Default & Clear buttons, styled like WP secondary buttons */
     703.heatbox-admin .wpvp-color-default,
     704.heatbox-admin .clr-clear {
     705        order: 2;
     706        height: 26px;
     707        margin: 0;
     708        padding: 0 10px;
     709        color: var(--heatbox-accent);
     710        background: var(--heatbox-surface);
     711        border: 1px solid var(--heatbox-accent);
     712        border-radius: 3px;
     713        font-family: inherit;
     714        font-size: 13px;
     715        line-height: 24px;
     716        cursor: pointer;
     717}
     718
     719.heatbox-admin .wpvp-color-default {
     720        margin-inline-end: auto;
     721}
     722
     723.heatbox-admin .wpvp-color-default:hover,
     724.heatbox-admin .clr-clear:hover {
     725        color: var(--heatbox-accent-darker);
     726        border-color: var(--heatbox-accent-darker);
     727        background: var(--heatbox-surface-muted);
     728}
     729
     730.heatbox-admin .clr-keyboard-nav .clr-alpha input:focus + div,
     731.heatbox-admin .clr-keyboard-nav .clr-hue input:focus + div,
     732.heatbox-admin .clr-keyboard-nav .clr-marker:focus {
     733        box-shadow: 0 0 0 2px var(--heatbox-accent), 0 0 2px 2px #fff;
     734}
     735
    196736/* Other products: same width as the settings above */
    197737.featured-products.heatbox-container-wide {

  • responsive-youtube-vimeo-popup/trunk/assets/css/heatbox.css

    r3786056 r3787390  
    4141        --heatbox-surface-disabled: #f5f5f5;
    4242        --heatbox-border: #c3c4c7;
     43        --heatbox-box-border: #e2e4e7;
    4344        --heatbox-control: #f0f0f1;
    4445        --heatbox-control-border: #8c8f94;
    … …  
    4748
    4849        --heatbox-gap: 20px;
     50        --heatbox-box-padding: 24px;
    4951        --heatbox-section-gap: 40px;
    50         --heatbox-header-padding: 32px;
     52        --heatbox-header-padding: 36px;
    5153        --heatbox-divider: #dcdcde;
    52         --heatbox-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
     54        --heatbox-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px -16px rgba(0, 0, 0, 0.14);
    5355        --heatbox-shadow-raised: 0 4px 16px rgba(0, 0, 0, 0.12);
    5456        --heatbox-radius: 8px;
     57        --heatbox-radius-control: 8px;
    5558        --heatbox-radius-small: 4px;
     59        --heatbox-control-height: 40px;
    5660        --heatbox-transition: 0.2s ease-in-out;
    5761}
    … …  
    153157
    154158/**
    155  * Markup (logo div comes second, CSS puts it first):
     159 * Markup (title on the left, logo on the right):
    156160 *
    157161 * <div class="heatbox-header [heatbox-has-tab-nav]">
    … …  
    173177.heatbox-header .logo-container {
    174178        display: flex;
    175         flex-direction: row-reverse;
    176         justify-content: flex-end;
     179        justify-content: space-between;
    177180        align-items: center;
    178         gap: 18px;
     181        gap: 20px;
    179182        margin-bottom: var(--heatbox-header-padding);
    180183}
    181184
    182185.heatbox-header.heatbox-has-tab-nav .logo-container {
    183         margin-bottom: 16px;
     186        margin-bottom: 20px;
    184187}
    185188
    … …  
    191194.heatbox-header .logo-container img {
    192195        display: block;
    193         width: 56px;
     196        width: 76px;
    194197        height: auto;
    195198}
    196199
    197200.heatbox-header .logo-container .heatbox-logo-wide img {
    198         width: 120px;
     201        width: 156px;
    199202}
    200203
    … …  
    205208        flex-wrap: wrap;
    206209        align-items: center;
    207         gap: 0 32px;
     210        gap: 0 36px;
    208211        margin: 0;
    209212        padding: 0;
    … …  
    215218        margin: 0;
    216219        padding: 0;
    217         font-size: 15px;
     220        font-size: 18px;
    218221        font-weight: 500;
    219222}
    … …  
    222225.heatbox-header .tab-navigation li a {
    223226        display: block;
    224         padding: 14px 2px 12px;
     227        padding: 16px 2px 14px;
    225228        color: var(--heatbox-text-muted);
    226229        text-decoration: none;
    … …  
    267270        flex-wrap: wrap;
    268271        align-items: center;
    269         gap: 10px;
     272        gap: 12px;
    270273        margin: 0;
    271274        padding: 0;
    272         font-size: 26px;
    273         font-weight: 600;
    274         line-height: 1.25;
     275        font-size: 34px;
     276        font-weight: 700;
     277        line-height: 1.2;
    275278        color: var(--heatbox-text);
    276279}
    277280
    278281.heatbox-wrap .subtitle {
    279         margin: 4px 0 0 0;
     282        margin: 6px 0 0 0;
    280283        padding: 0;
    281         font-size: 14px;
     284        font-size: 18px;
    282285        line-height: 1.5;
    283286        color: var(--heatbox-text-muted);
    … …  
    286289.heatbox-wrap .version {
    287290        margin: 0;
    288         padding: 3px 9px;
     291        padding: 5px 12px;
    289292        font-size: 12px;
    290293        font-weight: 500;
    … …  
    321324        background: var(--heatbox-surface);
    322325        margin-bottom: var(--heatbox-gap);
    323         border: 1px solid var(--heatbox-border);
     326        border: 1px solid var(--heatbox-box-border);
    324327        border-radius: var(--heatbox-radius);
    325328        box-shadow: var(--heatbox-shadow);
    … …  
    329332        position: relative;
    330333        margin: 0;
    331         padding: 16px var(--heatbox-gap);
    332         font-size: 15px;
     334        padding: 16px var(--heatbox-box-padding);
     335        font-size: 17px;
    333336        font-weight: 600;
    334337        line-height: 1.4;
    335338        color: var(--heatbox-text);
    336         border-bottom: 1px solid var(--heatbox-divider);
     339        border-bottom: 1px solid var(--heatbox-box-border);
    337340}
    338341
    339342.heatbox.is-grouped h2 {
    340         border-top: 1px solid var(--heatbox-divider);
     343        border-top: 1px solid var(--heatbox-box-border);
    341344}
    342345
    … …  
    359362.heatbox-content {
    360363        margin: 0;
    361         padding: var(--heatbox-gap);
     364        padding: var(--heatbox-box-padding);
    362365}
    363366
    … …  
    454457.heatbox .form-table th,
    455458.heatbox .form-table td {
    456         padding: var(--heatbox-gap);
     459        padding: 24px var(--heatbox-box-padding);
    457460        vertical-align: top;
     461}
     462
     463.heatbox .form-table td {
     464        padding-inline-start: 0;
     465}
     466
     467/* Labels line up with the middle of a field */
     468.heatbox .form-table th {
     469        padding-top: 33px;
     470}
     471
     472@media screen and (max-width: 782px) {
     473        .heatbox .form-table th {
     474                padding-top: 24px;
     475                padding-bottom: 0;
     476        }
     477
     478        .heatbox .form-table td {
     479                padding: 10px var(--heatbox-box-padding) 24px;
     480        }
    458481}
    459482
    … …  
    473496        margin: var(--heatbox-gap) 0;
    474497        padding: 0;
     498}
     499
     500/**
     501 * Text fields & selects inside a box: taller, rounded, with a clear border
     502 * and a focus ring in the accent color.
     503 */
     504.heatbox input[type="text"],
     505.heatbox input[type="url"],
     506.heatbox input[type="email"],
     507.heatbox input[type="number"],
     508.heatbox input[type="password"],
     509.heatbox input[type="search"],
     510.heatbox input[type="tel"],
     511.heatbox select,
     512.heatbox textarea {
     513        min-height: var(--heatbox-control-height);
     514        padding: 0 12px;
     515        font-size: 14px;
     516        color: var(--heatbox-text);
     517        background-color: var(--heatbox-surface);
     518        border: 1px solid var(--heatbox-border);
     519        border-radius: var(--heatbox-radius-control);
     520        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03);
     521        transition: border-color var(--heatbox-transition), box-shadow var(--heatbox-transition);
     522}
     523
     524.heatbox textarea {
     525        padding: 10px 12px;
     526}
     527
     528.heatbox select {
     529        padding-inline-end: 32px;
     530}
     531
     532.heatbox input[type="text"]:hover,
     533.heatbox input[type="url"]:hover,
     534.heatbox input[type="email"]:hover,
     535.heatbox input[type="number"]:hover,
     536.heatbox input[type="password"]:hover,
     537.heatbox input[type="search"]:hover,
     538.heatbox input[type="tel"]:hover,
     539.heatbox select:hover,
     540.heatbox textarea:hover {
     541        border-color: var(--heatbox-control-border);
     542}
     543
     544.heatbox input[type="text"]:focus,
     545.heatbox input[type="url"]:focus,
     546.heatbox input[type="email"]:focus,
     547.heatbox input[type="number"]:focus,
     548.heatbox input[type="password"]:focus,
     549.heatbox input[type="search"]:focus,
     550.heatbox input[type="tel"]:focus,
     551.heatbox select:focus,
     552.heatbox textarea:focus {
     553        border-color: var(--heatbox-accent);
     554        outline: none;
     555        box-shadow: 0 0 0 3px var(--heatbox-accent-soft-border);
     556}
     557
     558.heatbox input::placeholder,
     559.heatbox textarea::placeholder {
     560        color: var(--heatbox-control-disabled);
    475561}
    476562
    … …  
    668754   ========================================================================== */
    669755
     756/**
     757 * WP buttons, modernized: rounded like the fields, a little roomier, medium weight.
     758 * Colors, hover & focus stay WordPress' own (primary follows the admin color scheme).
     759 */
     760.heatbox-wrap .button {
     761        border-radius: var(--heatbox-radius-control);
     762        font-weight: 500;
     763        transition: background-color var(--heatbox-transition), border-color var(--heatbox-transition), color var(--heatbox-transition);
     764}
     765
    670766/* WP already enlarges buttons below 783px */
    671767@media screen and (min-width: 783px) {
     768        .heatbox-wrap .button:not(.button-small) {
     769                min-height: 34px;
     770                padding: 0 14px;
     771                line-height: 32px;
     772        }
     773
     774        .heatbox-wrap .button-large,
    672775        .heatbox-wrap .button-larger {
    673                 min-height: 36px;
    674                 padding: 0 16px;
     776                min-height: var(--heatbox-control-height);
     777                padding: 0 18px;
    675778                font-size: 14px;
    676                 line-height: 34px;
     779                line-height: calc(var(--heatbox-control-height) - 2px);
    677780                vertical-align: middle;
    678781        }
     782}
     783
     784.heatbox-wrap .button-small {
     785        border-radius: var(--heatbox-radius-small);
    679786}
    680787
    … …  
    774881/* Attached to the bottom of the box above it */
    775882.heatbox-cta-container.is-attached {
    776         padding: var(--heatbox-gap);
     883        padding: var(--heatbox-gap) var(--heatbox-box-padding);
    777884        margin-top: calc(var(--heatbox-gap) * -1);
    778885        margin-bottom: var(--heatbox-gap);
    779886        background: var(--heatbox-surface);
    780         border: 1px solid var(--heatbox-border);
     887        border: 1px solid var(--heatbox-box-border);
    781888        border-radius: 0 0 var(--heatbox-radius) var(--heatbox-radius);
    782889        box-shadow: var(--heatbox-shadow);

  • responsive-youtube-vimeo-popup/trunk/assets/js/admin-page.js

    r3786056 r3787390  
    11(function ($) {
    22
    3         $('.wp-video-popup-color-picker').wpColorPicker();
     3        // Overlay color picker (Coloris).
     4        // "mixed" saves hex for solid colors and rgba() for transparent ones, same as the previous picker.
     5        if (window.Coloris && document.querySelector('.wp-video-popup-color-picker')) {
     6                var adminI18n = window.wpVideoPopupAdmin || {};
     7                var activeColorField = null;
     8
     9                window.Coloris($.extend({
     10                        el: '.wp-video-popup-color-picker',
     11                        theme: 'default',
     12                        themeMode: 'light',
     13                        format: 'mixed',
     14                        alpha: true,
     15                        clearButton: true
     16                }, adminI18n.colorPicker || {}));
     17
     18                // Remember which field the picker belongs to.
     19                $(document).on('focus click', '.wp-video-popup-color-picker', function () {
     20                        activeColorField = this;
     21                        addDefaultButton();
     22                });
     23
     24                // "Default" button: fills in the field's default color (data-default-color).
     25                // Added on first use, Coloris only builds its picker once the page has loaded.
     26                function addDefaultButton() {
     27                        var picker = document.getElementById('clr-picker');
     28
     29                        if (!picker || picker.querySelector('.wpvp-color-default')) return;
     30
     31                        var defaultButton = document.createElement('button');
     32                        defaultButton.type = 'button';
     33                        // Not "clr-default": Coloris uses that class for its default theme on the picker itself.
     34                        defaultButton.className = 'wpvp-color-default';
     35                        defaultButton.textContent = adminI18n.defaultColor || 'Default';
     36
     37                        defaultButton.addEventListener('click', function () {
     38                                var defaultColor = activeColorField && activeColorField.getAttribute('data-default-color');
     39                                var colorValue = document.getElementById('clr-color-value');
     40
     41                                if (!defaultColor || !colorValue) return;
     42
     43                                // Let Coloris handle it as if the value was typed, so the picker & field stay in sync.
     44                                colorValue.value = defaultColor;
     45                                colorValue.dispatchEvent(new Event('change', { bubbles: true }));
     46
     47                                // Close the picker, same as the clear button does.
     48                                window.Coloris.close();
     49                        });
     50
     51                        picker.insertBefore(defaultButton, picker.querySelector('.clr-clear'));
     52                }
     53        }
    454
    555        // Getting started: shortcode builder.
     56        // Shared by the free & PRO version. Fields that don't exist on the page are skipped.
    657        var output = document.getElementById('wpvp-builder-output');
    758        var copyStatus = document.getElementById('wpvp-copy-status');
    … …  
    1465                start: document.getElementById('wpvp-builder-start'),
    1566                mute: document.getElementById('wpvp-builder-mute'),
    16                 portrait: document.getElementById('wpvp-builder-portrait')
     67                portrait: document.getElementById('wpvp-builder-portrait'),
     68                id: document.getElementById('wpvp-builder-id'),
     69                gallery: document.getElementById('wpvp-builder-gallery'),
     70                autoplay: document.getElementById('wpvp-builder-autoplay')
    1771        };
    1872        var videoHint = document.getElementById('wpvp-builder-video-hint');
    19         var supported = /(youtube\.com|youtu\.be|youtube-nocookie\.com|vimeo\.com|rumble\.com)\//i;
     73        var triggerHint = document.getElementById('wpvp-trigger-hint');
     74        var triggerClass = document.getElementById('wpvp-trigger-class');
     75        var services = /(youtube\.com|youtu\.be|youtube-nocookie\.com|vimeo\.com|rumble\.com)\//i;
     76        var videoFiles = /\.(mp4|m4v|webm|ogv|ogg|mov)(\?|#|$)/i;
     77
     78        // Self-hosted video files are only accepted where the video field says so.
     79        var acceptsFiles = fields.video.hasAttribute('data-self-hosted');
     80
     81        // Drop the fields that don't exist on this page.
     82        Object.keys(fields).forEach(function (key) {
     83                if (!fields[key]) delete fields[key];
     84        });
     85
     86        function isSupported(url) {
     87                return services.test(url) || (acceptsFiles && videoFiles.test(url));
     88        }
    2089
    2190        // Quotes & square brackets would break the shortcode.
    … …  
    2493        }
    2594
     95        // The ID is used as a CSS class, so only keep what's valid there.
     96        function cleanId(value) {
     97                return value.trim().replace(/\s+/g, '-').replace(/[^A-Za-z0-9_-]/g, '');
     98        }
     99
     100        // Gallery names use underscores (same as on the front end).
     101        function cleanGallery(value) {
     102                return value.trim().replace(/[\s-]+/g, '_').replace(/[^A-Za-z0-9_]/g, '');
     103        }
     104
     105        function value(key) {
     106                return fields[key] ? fields[key].value : '';
     107        }
     108
     109        function checked(key) {
     110                return fields[key] ? fields[key].checked : false;
     111        }
     112
     113        // The video service, shown as a badge in the video field (if the page has one).
     114        var serviceBadge = document.getElementById('wpvp-builder-service');
     115
     116        function detectService(url) {
     117                if (/(youtube\.com|youtu\.be|youtube-nocookie\.com)\//i.test(url)) return { key: 'youtube', label: 'YouTube' };
     118                if (/vimeo\.com\//i.test(url)) return { key: 'vimeo', label: 'Vimeo' };
     119                if (/rumble\.com\//i.test(url)) return { key: 'rumble', label: 'Rumble' };
     120                if (acceptsFiles && videoFiles.test(url)) return { key: 'file', label: serviceBadge ? serviceBadge.getAttribute('data-file-label') : 'Video file' };
     121                return null;
     122        }
     123
     124        function updateServiceBadge() {
     125                if (!serviceBadge) return;
     126
     127                var service = detectService(fields.video.value.trim());
     128
     129                serviceBadge.hidden = !service;
     130                serviceBadge.textContent = service ? service.label : '';
     131                serviceBadge.setAttribute('data-service', service ? service.key : '');
     132        }
     133
     134        function span(className, text) {
     135                var el = document.createElement('span');
     136                el.className = className;
     137                el.textContent = text;
     138                return el;
     139        }
     140
     141        // Writes the shortcode with syntax highlighting. Its text stays the plain shortcode (that's what gets copied).
     142        function renderShortcode(attributes) {
     143                output.textContent = '';
     144                output.appendChild(span('wpvp-token-tag', '[wp-video-popup'));
     145
     146                attributes.forEach(function (attribute) {
     147                        output.appendChild(document.createTextNode(' '));
     148                        output.appendChild(span('wpvp-token-attr', attribute[0]));
     149                        output.appendChild(span('wpvp-token-punct', '="'));
     150                        output.appendChild(span('wpvp-token-value', attribute[1]));
     151                        output.appendChild(span('wpvp-token-punct', '"'));
     152                });
     153
     154                output.appendChild(span('wpvp-token-tag', ']'));
     155        }
     156
    26157        function buildShortcode() {
    27158                var video = clean(fields.video.value) || fields.video.placeholder;
    28                 var text = clean(fields.text.value);
    29                 var start = parseInt(fields.start.value, 10);
    30                 var shortcode = '[wp-video-popup video="' + video + '"';
    31 
    32                 if (fields.mute.checked) shortcode += ' mute="1"';
    33                 if (start > 0) shortcode += ' start="' + start + '"';
    34                 if (fields.portrait.checked) shortcode += ' portrait="1"';
    35                 if (text) shortcode += ' text="' + text + '"';
    36 
    37                 output.textContent = shortcode + ']';
     159                var text = clean(value('text'));
     160                var start = parseInt(value('start'), 10);
     161                var id = cleanId(value('id'));
     162                var gallery = cleanGallery(value('gallery'));
     163                var attributes = [['video', video]];
     164
     165                if (id) attributes.push(['id', id]);
     166                if (gallery) attributes.push(['gallery', gallery]);
     167                if (checked('autoplay')) attributes.push(['autoplay', '1']);
     168                if (checked('mute')) attributes.push(['mute', '1']);
     169                if (start > 0) attributes.push(['start', String(start)]);
     170                if (checked('portrait')) attributes.push(['portrait', '1']);
     171                if (text) attributes.push(['text', text]);
     172
     173                renderShortcode(attributes);
     174                updateServiceBadge();
     175
     176                // With an ID, the ID itself is the trigger class.
     177                if (fields.id && triggerClass && triggerHint) {
     178                        triggerClass.textContent = id || 'wp-video-popup';
     179                        triggerHint.textContent = triggerHint.getAttribute(id ? 'data-id' : 'data-default');
     180                }
    38181
    39182                // Hint when the URL isn't from a supported service.
    40                 var invalid = fields.video.value.trim() !== '' && !supported.test(fields.video.value);
     183                var invalid = fields.video.value.trim() !== '' && !isSupported(fields.video.value);
    41184                fields.video.setAttribute('aria-invalid', invalid ? 'true' : 'false');
    42185                videoHint.classList.toggle('is-invalid', invalid);
    … …  
    77220
    78221        document.querySelectorAll('.wpvp-copy').forEach(function (button) {
    79                 var label = button.textContent;
     222                // Only swap the label, so an icon in the button stays.
     223                var labelEl = button.querySelector('.wpvp-copy-label') || button;
     224                var label = labelEl.textContent;
    80225                var timer;
    81226
    … …  
    86231                                clearTimeout(timer);
    87232                                button.classList.add('is-copied');
    88                                 button.textContent = button.getAttribute('data-copied') || 'Copied!';
     233                                labelEl.textContent = button.getAttribute('data-copied') || 'Copied!';
    89234                                copyStatus.textContent = button.getAttribute('data-copied') || 'Copied!';
    90235
    91236                                timer = setTimeout(function () {
    92237                                        button.classList.remove('is-copied');
    93                                         button.textContent = label;
     238                                        labelEl.textContent = label;
    94239                                        copyStatus.textContent = '';
    95240                                }, 1500);

  • responsive-youtube-vimeo-popup/trunk/inc/settings.php

    r3786056 r3787390  
    5252 */
    5353function wp_video_popup_background_color_callback() {
    54         echo '<input type="text" name="wpvp_popup[bg_color]" value="" class="color-picker wp-video-popup-color-picker" data-alpha="true" data-default-color="rgba(0,0,0,0.88)" />';
     54        echo '<input type="text" name="wpvp_popup[bg_color]" value="" class="color-picker wp-video-popup-color-picker" data-default-color="rgba(0,0,0,0.88)" autocomplete="off" />';
     55        echo '<p class="description">' . esc_html__( 'Default: rgba(0, 0, 0, 0.88)', 'responsive-youtube-vimeo-popup' ) . '</p>';
    5556}
    5657
    … …  
    8384                <ul class="wpvp-responsive-sizes">
    8485                        <li class="wpvp-responsive-size wpvp-responsive-size-desktop is-active" data-size-device="desktop">
    85                                 <input type="text" name="wpvp_popup[sizes][desktop]" class="wpvp-size-field" placeholder="75%" value="" />
    86 
    87                                 <p class="description">
    88                                         <?php esc_html_e( 'Default: 1200px', 'responsive-youtube-vimeo-popup' ); ?>
    89                                 </p>
     86                                <input type="text" name="wpvp_popup[sizes][desktop]" class="wpvp-size-field" value="" />
    9087                        </li>
    9188                        <li class="wpvp-responsive-size wpvp-responsive-size-tablet" data-size-device="tablet">
    … …  
    9693                        </li>
    9794                </ul>
     95
     96                <p class="description">
     97                        <?php esc_html_e( 'Default: 1200px (e.g. 75% or 900px)', 'responsive-youtube-vimeo-popup' ); ?>
     98                </p>
    9899        </div>
    99100

  • responsive-youtube-vimeo-popup/trunk/readme.txt

    r3786097 r3787390  
    55Tested up to: 7.1
    66Requires PHP: 5.6
    7 Stable tag: 2.11
     7Stable tag: 2.11.1
    88License: GPLv2 or later
    99License URI: https://www.gnu.org/licenses/gpl-2.0.html
    … …  
    203203
    204204== Changelog ==
     205= 2.11.1 November 06, 2026 =
     206* New: Shortcode builder card with video link detection, options, live preview of the shortcode and one-click copy
     207* Tweak: Refreshed settings page design (header, boxes, fields & buttons)
     208* Tweak: Admin notices are placed using WordPress' own marker
    205209= 2.11 November 04, 2026 =
    206210* New: Shortcode can output its own trigger button via the text attribute, e.g. [wp-video-popup video="…" text="Watch video"]

  • responsive-youtube-vimeo-popup/trunk/responsive-youtube-vimeo-popup.php

    r3786056 r3787390  
    44 * Plugin URI: https://wp-video-popup.com
    55 * Description: Add a YouTube, Vimeo or Rumble video popup to WordPress. Lightweight, privacy-friendly lightbox that works with any page builder.
    6  * Version: 2.11
     6 * Version: 2.11.1
    77 * Requires at least: 4.7
    88 * Requires PHP: 5.6
    … …  
    2121define( 'WP_VIDEO_POPUP_PLUGIN_DIR', plugin_dir_path( __FILE__ ) );
    2222define( 'WP_VIDEO_POPUP_PLUGIN_URL', plugin_dir_url( __FILE__ ) );
    23 define( 'WP_VIDEO_POPUP_PLUGIN_VERSION', '2.11' );
     23define( 'WP_VIDEO_POPUP_PLUGIN_VERSION', '2.11.1' );
    2424define( 'WP_VIDEO_POPUP_PLUGIN_BASENAME', plugin_basename( __FILE__ ) );
    2525
    … …  
    4747                <div class="notice-body">
    4848                        <div class="notice-icon">
    49                                 <img src="<?php echo esc_url( WP_VIDEO_POPUP_PLUGIN_URL ); ?>assets/img/wp-video-popup-logo-1.png">
     49                                <img src="<?php echo esc_url( WP_VIDEO_POPUP_PLUGIN_URL ); ?>assets/img/wp-video-popup-logo-1.png" alt="">
    5050                        </div>
    5151                        <div class="notice-content">
    … …  
    201201
    202202/**
     203 * Translatable labels for the settings page scripts.
     204 *
     205 * @return array The labels.
     206 */
     207function wp_video_popup_admin_i18n() {
     208
     209        return array(
     210                'defaultColor' => __( 'Default', 'responsive-youtube-vimeo-popup' ),
     211                'colorPicker'  => array(
     212                        'clearLabel' => __( 'Clear', 'responsive-youtube-vimeo-popup' ),
     213                        'a11y'       => array(
     214                                'open'        => __( 'Open color picker', 'responsive-youtube-vimeo-popup' ),
     215                                'close'       => __( 'Close color picker', 'responsive-youtube-vimeo-popup' ),
     216                                'clear'       => __( 'Clear the selected color', 'responsive-youtube-vimeo-popup' ),
     217                                /* translators: {s} & {v} are placeholders for the saturation & brightness values, keep them as they are. */
     218                                'marker'      => __( 'Saturation: {s}. Brightness: {v}.', 'responsive-youtube-vimeo-popup' ),
     219                                'hueSlider'   => __( 'Hue slider', 'responsive-youtube-vimeo-popup' ),
     220                                'alphaSlider' => __( 'Opacity slider', 'responsive-youtube-vimeo-popup' ),
     221                                'input'       => __( 'Color value field', 'responsive-youtube-vimeo-popup' ),
     222                                'format'      => __( 'Color format', 'responsive-youtube-vimeo-popup' ),
     223                                'swatch'      => __( 'Color swatch', 'responsive-youtube-vimeo-popup' ),
     224                                'instruction' => __( 'Saturation and brightness selector. Use up, down, left and right arrow keys to select.', 'responsive-youtube-vimeo-popup' ),
     225                        ),
     226                ),
     227        );
     228
     229}
     230
     231/**
    203232 * Admin scripts & styles.
    204233 *
    … …  
    217246        wp_enqueue_style( 'wp-video-popup', WP_VIDEO_POPUP_PLUGIN_URL . 'assets/css/admin-page.css', array(), WP_VIDEO_POPUP_PLUGIN_VERSION );
    218247
    219         // Color picker.
    220         wp_enqueue_style( 'wp-color-picker' );
    221         wp_enqueue_script( 'wp-video-popup', WP_VIDEO_POPUP_PLUGIN_URL . 'assets/js/admin-page.js', array( 'wp-color-picker' ), WP_VIDEO_POPUP_PLUGIN_VERSION, true );
     248        // Color picker (Coloris).
     249        wp_enqueue_style( 'coloris', WP_VIDEO_POPUP_PLUGIN_URL . 'assets/vendor/coloris/coloris.min.css', array(), '0.25.0' );
     250        wp_enqueue_script( 'coloris', WP_VIDEO_POPUP_PLUGIN_URL . 'assets/vendor/coloris/coloris.min.js', array(), '0.25.0', true );
     251
     252        wp_enqueue_script( 'wp-video-popup', WP_VIDEO_POPUP_PLUGIN_URL . 'assets/js/admin-page.js', array( 'jquery', 'coloris' ), WP_VIDEO_POPUP_PLUGIN_VERSION, true );
     253        wp_localize_script( 'wp-video-popup', 'wpVideoPopupAdmin', wp_video_popup_admin_i18n() );
    222254
    223255}

  • responsive-youtube-vimeo-popup/trunk/templates/settings.php

    r3786056 r3787390  
    2727
    2828                                <div>
    29                                         <img src="<?php echo esc_url( WP_VIDEO_POPUP_PLUGIN_URL ); ?>assets/img/wp-video-popup-logo-1.png">
     29                                        <img src="<?php echo esc_url( WP_VIDEO_POPUP_PLUGIN_URL ); ?>assets/img/wp-video-popup-logo-1.png" alt="">
    3030                                </div>
    3131
    … …  
    4242                <div class="heatbox-main">
    4343
    44                         <!-- Faking H1 tag to place admin notices -->
    45                         <h1 style="display: none;"></h1>
     44                        <!-- WordPress places admin notices after this marker -->
     45                        <hr class="wp-header-end">
    4646
    47                         <?php require __DIR__ . '/metaboxes/getting-started.php'; ?>
     47                        <?php require __DIR__ . '/builder.php'; ?>
    4848
    4949                        <div class="heatbox wpvp-settings-metabox is-locked">
Note: See TracChangeset for help on using the changeset viewer.