From 815af7d0d1876e4abd920a770978d68c73f68b01 Mon Sep 17 00:00:00 2001 From: GitHub Action Date: Fri, 17 May 2024 17:56:15 +0000 Subject: [PATCH] Update content of files --- data/web/telegram.org/css/promote.css | 111 ++++++++++++++++++++++++-- data/web/telegram.org/js/promote.js | 6 +- 2 files changed, 109 insertions(+), 8 deletions(-) diff --git a/data/web/telegram.org/css/promote.css b/data/web/telegram.org/css/promote.css index 5c5f8b11af..1e442a8e91 100644 --- a/data/web/telegram.org/css/promote.css +++ b/data/web/telegram.org/css/promote.css @@ -1657,7 +1657,7 @@ input.pr-form-control:focus { color: #999; } .pr-preview-ad-wrap { - height: 320px; + height: 240px; background: #6fa786 url('/img/ad_preview_bg.jpg') no-repeat center; background-size: cover; overflow: hidden; @@ -1673,17 +1673,12 @@ input.pr-form-control:focus { top: -8px; max-height: 0; opacity: 0; - transform: translateX(-36px); transition: all .2s ease; } .pr-preview-ad-wrap .pr-preview-ad-message-wrap.active { - transform: translateX(-36px); max-height: 100%; opacity: 1; } -.pr-preview-ad-wrap .pr-preview-ad-message-wrap.picture { - transform: translateX(0px); -} .pr-preview-ad-message { padding: 0 0 0 13px; display: flex; @@ -1844,6 +1839,109 @@ input.pr-form-control:focus { .pr-preview-ad-message a.ad-msg-btn:hover { text-decoration: none; } +.pr-preview-ad-message .ad-msg-link-preview { + --preview-color1: var(--accent-color); + --preview-gradient-2color: + var(--preview-color1) 0 6px, + var(--preview-color2) 6px 12px; + --preview-gradient-3colors: + var(--preview-color1) 0 6px, + var(--preview-color2) 6px 12px, + var(--preview-color3) 12px 18px; + --preview-gradient-colors: var(--preview-gradient-3colors, var(--preview-gradient-2color, var(--preview-color1) 0% 100%)); + display: block; + position: relative; + color: var(--text-color); + border-radius: 6px; + font-size: 13px; + line-height: 15px; + padding: 0 7px 0 11px; + margin: 1px -2px; + overflow: hidden; + z-index: 0; +} +.pr-preview-ad-message .ad-msg-link-preview:hover { + text-decoration: none; +} +.pr-preview-ad-message .ad-msg-link-preview:before { + content: ''; + position: absolute; + background-color: var(--preview-color1); + opacity: 0.1; + left: 0; + top: 0; + bottom: 0; + right: 0; + z-index: -1; +} +.pr-preview-ad-message .ad-msg-link-preview:after { + content: ''; + position: absolute; + background-color: var(--preview-color1); + background: repeating-linear-gradient(135deg, var(--preview-gradient-colors)); + background-position-y: 3px; + background-size: 6px 51px; + width: 3px; + left: 0; + top: 0; + bottom: 0; +} +.pr-preview-ad-message .ad-msg-link-preview-sitename, +.pr-preview-ad-message .ad-msg-link-preview-title { + line-height: 16px; + font-weight: 500; +} +.pr-preview-ad-message .ad-msg-link-preview-sitename { + color: var(--preview-color1); + -webkit-font-smoothing: antialiased; + text-transform: capitalize; + margin: 7px 0 0; +} +.pr-preview-ad-message .ad-msg-link-preview-title, +.pr-preview-ad-message .ad-msg-link-preview-desc { + margin: 1px 0 0; +} +.pr-preview-ad-message .ad-msg-link-preview-image { + display: inline-block; + width: 42px; + float: right; + border-radius: 6px; + margin: 7px -100px 7px 7px; + overflow: hidden; + opacity: 0; + transform: translateX(42px); + transition: margin 0s .15s ease, transform .15s ease, opacity .15s ease; +} +.pr-preview-ad-message .ad-msg-link-preview-image img { + max-width: 100%; + vertical-align: top; + border-radius: 6px; +} +.pr-preview-ad-wrap .pr-preview-ad-message-wrap.picture .pr-preview-ad-message .ad-msg-link-preview-image { + margin-right: 0; + opacity: 1; + transform: translateX(0px); + transition: margin 0s ease, transform .15s ease, opacity .15s ease; +} +.pr-preview-ad-message .ad-msg-link-preview-btn { + font-size: 12px; + line-height: 16px; + font-weight: 500; + color: var(--preview-color1); + margin: 17px 0 8px; + text-align: center; + position: relative; +} +.pr-preview-ad-message .ad-msg-link-preview-btn:before { + content: ''; + position: absolute; + background-color: var(--preview-color1); + opacity: 0.2; + top: -9px; + height: 1px; + left: 0; + right: 0; +} .tgme_widget_message_bubble { padding: 10px 12px; @@ -2343,6 +2441,7 @@ a.pr-account-button-wrap:focus { letter-spacing: normal; } .pr-form-control-wrap .pr-form-control-prefix .currency-ton { + color: var(--accent-color); margin-left: 0; margin-right: 0; } diff --git a/data/web/telegram.org/js/promote.js b/data/web/telegram.org/js/promote.js index 14826aff3e..0b11672e9f 100644 --- a/data/web/telegram.org/js/promote.js +++ b/data/web/telegram.org/js/promote.js @@ -1287,13 +1287,15 @@ var NewAd = { if ($previewPopup) { if (previewData) { $('.js-preview-from', $previewPopup).html(previewData.from); - $('.js-preview-from', $previewPopup).attr('href', uncleanHTML(previewData.from_url)); + $('.js-preview-wrap', $previewPopup).attr('href', uncleanHTML(previewData.button_url)); + for (var i = 1; i <= 3; i++) { + $('.js-preview-wrap', $previewPopup).cssProp('--preview-color' + i, (previewData.accent_colors || [])[i - 1] || ''); + } $('.js-promote-photo', $previewPopup).html(previewData.photo); $('.js-promote-photo-tooltip', $previewPopup).html(previewData.from); $('.js-preview-text', $previewPopup).html(previewData.text); $('.js-preview-text tg-emoji', $previewPopup).each(function(){ TEmoji.init(this); }); $('.js-preview-button', $previewPopup).html(previewData.button); - $('.js-preview-button', $previewPopup).attr('href', uncleanHTML(previewData.button_url)); $('.js-preview-footer', $previewPopup).each(function() { Ads.updateTextShadow(this, '.js-preview-text', '.label', 10); });