+ {__( + 'This integration was set up before version 2.10.0, so its credentials are stored with the integration itself instead of in a saved connection. This screen only displays saved connections, so there is nothing here for it to show.', + 'bit-integrations' + )} +
++ {__( + 'Saved credentials are never sent back to your browser. They stay encrypted on your server, so an API key or token cannot leak through a screenshot, a shared screen, browser history or a hijacked admin session. The fields look empty because the credentials are protected, not because they are missing.', + 'bit-integrations' + )} +
++ {__( + 'This integration keeps running exactly as before. Nothing is broken.', + 'bit-integrations' + )} +
++ {__( + 'Want it on the new system? Open the integration settings and authorize this app once. It then starts using a saved connection you can reuse for every future integration.', + 'bit-integrations' + )} +
+ ++ {__( + 'Connections are the new home for credentials. Authorize an app once and every integration for that same app can pick the same connection — no re-entering API keys, no repeating the OAuth flow.', + 'bit-integrations' + )} +
++ {__( + 'Rename, review or remove connections any time from the Connections page. Updating a connection updates every integration linked to it.', + 'bit-integrations' + )} +
+ + {__('Manage connections', 'bit-integrations')} + +- {__('Choose your AI assistant', 'bit-integrations')} -
-+ {__('Choose your AI assistant', 'bit-integrations')} +
+{subtitle}
} diff --git a/frontend/src/pages/ChangelogToggle.jsx b/frontend/src/pages/ChangelogToggle.jsx index c68d19ba3..8bb88281e 100644 --- a/frontend/src/pages/ChangelogToggle.jsx +++ b/frontend/src/pages/ChangelogToggle.jsx @@ -23,19 +23,52 @@ const changeLog = [ label: __('Note', 'bit-integrations'), headClass: 'new-note', itemClass: '', - items: [] + items: [ + { + label: 'Since 2.10.0, credentials live in reusable Connections. Integrations you set up before that still keep their own credentials, so we call them legacy - their info page shows a short explainer instead of a connection to view or switch.', + desc: '', + isPro: false + }, + { + label: 'They keep working exactly as before, and credentials stay safe on your server (never sent to your browser, which is why the fields look empty). To move one over, just open its settings and authorize the app once.', + desc: '', + isPro: false + } + ] }, { label: __('New Triggers', 'bit-integrations'), headClass: 'new-trigger', itemClass: 'integration-list', - items: [] + items: [ + { + label: 'Bit CRM', + desc: '66 new events added', + isPro: false + }, + { + label: 'Fluent Player', + desc: '12 new events added', + isPro: true + } + ] }, { label: __('New Actions', 'bit-integrations'), headClass: 'new-integration', itemClass: 'integration-list', - items: [] + items: [ + { + label: 'Bit CRM', + desc: '50 new events added', + isPro: false + }, + { + label: 'Fluent Player', + desc: '26 new events added', + isPro: true + } + ] }, { label: __('New Features', 'bit-integrations'), @@ -43,18 +76,18 @@ const changeLog = [ itemClass: 'feature-list', items: [ { - label: 'Connections', - desc: 'New centralized connection manager - authorize an app once and reuse the same credentials across every integration, with linked integration listing, inline editing and clearer authorization errors.', + label: 'Webhook (Action)', + desc: 'Dynamic URL path variables added to outgoing webhooks, mappable from trigger data.', isPro: false }, { - label: 'Timeline', - desc: 'Integration logs can now be re-executed, with nested re-run history kept for each attempt.', - isPro: false + label: 'Webhook (Action)', + desc: 'Smart codes are now available in query parameters, request headers and path variables.', + isPro: true }, { label: 'Connections', - desc: 'Redesigned log page with server-side status filtering, search and column controls.', + desc: "An action's connection can now be switched from its info page.", isPro: false } ] @@ -71,19 +104,29 @@ const changeLog = [ itemClass: 'fixes-list', items: [ { - label: 'OAuth2', - desc: 'Fixed refresh URL template resolution and credentials being lost during token refresh.', + label: 'Connections', + desc: 'Fixed credentials not resolving for renamed integrations.', isPro: false }, { - label: 'Google Sheets', - desc: 'Improved access token validation.', + label: 'Integration Info', + desc: 'Fixed legacy actions rendering a blank info page.', isPro: false }, { - label: 'Zoho Desk', - desc: 'Guarded against null API response data.', + label: 'Webhook (Action)', + desc: 'Run status is now judged by the response HTTP status code, and path variables sync even when their tab is never opened.', isPro: false + }, + { + label: 'ACF', + desc: 'Fixed field reading when the meta value is missing', + isPro: true + }, + { + label: 'WP Post', + desc: 'Fixed trashed and internal posts firing the post created/inserted triggers', + isPro: true } ] }, @@ -93,18 +136,18 @@ const changeLog = [ itemClass: 'fixes-list', items: [ { - label: 'Security', - desc: 'Hardened AJAX authorization, credential storage and input handling across request routing.', + label: 'Custom Action', + desc: "Closed an administrator gate bypass and confined the custom function file to the plugin's custom-function directory.", isPro: false }, { - label: 'Connections', - desc: 'Stopped credentials from being returned in connection responses and made the token refresh lock reliable.', + label: 'Timeline', + desc: 'Log re-execution now applies the same administrator check as custom action save, update and delete.', isPro: false }, { - label: 'Encryption', - desc: 'Escaped OpenSSL error output in encryption exception handling.', + label: 'Mail', + desc: 'Recipient addresses and headers are validated in all cases, and header display names are sanitized.', isPro: false } ] diff --git a/frontend/src/resource/sass/app.scss b/frontend/src/resource/sass/app.scss index 360607a7f..1ff3ecdd3 100644 --- a/frontend/src/resource/sass/app.scss +++ b/frontend/src/resource/sass/app.scss @@ -34,28 +34,19 @@ line-height: 1; } -//$blue: #0a8dff; -//$blue: #0083f3; -// $dp-purple: #0b1655; -//$light-bg: #f2f3f7; -//$light-bg: #eaf0f7; -// $bg: #f2f3f7; $purple: #7902f8; -$light-purple: #6c11f9; -// $purple: #7f57ef; -$bdr-rad: 0px; $prim: #99e3ff; $blue: #0069ff; -$green: #36fcb3; $light-purple-bg: #371f4a; $dp-purple: #391794; $dp-bg: #2a054f; $light-bg: #fff; $light-txt: #8fa4bd; -$bg: #f7f8fc; $red: #ff4646; $dp-txt: #545582; $gray: #e2e2e2; +// Page canvas: every route shell, page and table surface sits on this. +$pg-canvas: #f8f9fd; $select-arrow: "data:image/svg+xml;charset=utf8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3C!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ --%3E%3Cg%3E%3Ctitle%3Ebackground%3C/title%3E%3Crect fill='none' id='canvas_background' height='22' width='22' y='-1' x='-1'/%3E%3Cg display='none' overflow='visible' y='0' x='0' height='100%25' width='100%25' id='canvasGrid'%3E%3Crect fill='url(%23gridpattern)' stroke-width='0' y='0' x='0' height='100%25' width='100%25'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Ctitle%3ELayer 1%3C/title%3E%3Cline transform='rotate(45 9.707600593566898,10.544168472290037) ' stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_2' y2='14.860267' x2='9.7076' y1='6.228069' x1='9.7076' stroke-width='1.5' stroke='%238c8c8c' fill='none'/%3E%3Cline transform='rotate(-45 4.444442749023432,10.544166564941404) ' stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_1' y2='14.860266' x2='4.444443' y1='6.228067' x1='4.444443' stroke-width='1.5' stroke='%238c8c8c' fill='none'/%3E%3C/g%3E%3C/svg%3E"; html, @@ -84,7 +75,7 @@ a:hover { min-height: 82vh; height: auto; font-size: 16px; - background-color: #f5f8ff; + background-color: $pg-canvas; & a { text-decoration: none; @@ -264,19 +255,6 @@ input[type='checkbox'].disabled:checked:before { .font-sm { font-size: 14px !important; } - -.txt-white { - color: white; -} - -.txt-gray { - color: $gray; -} - -.txt-blue { - color: $blue; -} - .txt-purple { color: $purple; } @@ -284,13 +262,6 @@ input[type='checkbox'].disabled:checked:before { .txt-pro { color: rgb(255, 255, 255); } - -.bg-pro { - background: lightgoldenrodyellow; - padding: 20px; - border-radius: 8px; -} - .txt-dp { color: $dp-txt; } @@ -370,7 +341,6 @@ input[type='checkbox'].disabled:checked:before { -webkit-user-select: none; -webkit-user-drag: none; user-select: none; - // user-drag: none; pointer-events: none; } @@ -426,17 +396,14 @@ input[type='checkbox'].disabled:checked:before { } .blue { - //background: $blue !important; background: linear-gradient(145deg, $blue, #097fe6) !important; color: white !important; &:hover { - //background: #016fcf !important; background: linear-gradient(145deg, darken($blue, 2), darken($blue, 5)) !important; } &:active { - // background: #0062b8; background: linear-gradient(145deg, darken($blue, 4), darken($blue, 7)) !important; } } @@ -455,33 +422,27 @@ input[type='checkbox'].disabled:checked:before { } .purple { - //background: $purple !important; background: linear-gradient(145deg, $purple, #6049f2) !important; color: white !important; &:hover { - //background: #016fcf !important; background: linear-gradient(145deg, darken($purple, 2), darken($purple, 5)) !important; } &:active { - // background: #0062b8; background: linear-gradient(145deg, darken($purple, 4), darken($purple, 7)) !important; } } .gray { - //background: $purple !important; background: linear-gradient(145deg, $gray, #e1dcfc) !important; color: rgb(94, 88, 88) !important; &:hover { - //background: #016fcf !important; background: linear-gradient(145deg, darken($gray, 2), darken($gray, 5)) !important; } &:active { - // background: #0062b8; background: linear-gradient(145deg, darken($gray, 4), darken($gray, 7)) !important; } } @@ -523,15 +484,6 @@ input[type='checkbox'].disabled:checked:before { background: rgb(238, 240, 255) !important; } } - -.bg-blue-1 { - background: transparentize($blue, 0.9) !important; -} - -.bg-blue-2 { - background: transparentize($blue, 0.7) !important; -} - .blue-sh { box-shadow: 3px 3px 7px -2px rgba(73, 89, 255, 0.4); transition: box-shadow 0.3s !important; @@ -558,16 +510,6 @@ input[type='checkbox'].disabled:checked:before { box-shadow: 2px 2px 4px 0 rgba(229, 219, 253, 0.4); } } - -.red-sh { - box-shadow: 3px 3px 12px 0px transparentize($red, 0.7); - transition: box-shadow 0.2s; - - &:hover { - box-shadow: 2px 2px 4px 0 transparentize($red, 0.7); - } -} - #content { width: 100%; } @@ -608,6 +550,148 @@ input[type='checkbox'].disabled:checked:before { } } +// Explainer on the read-only integration info page: how reusable connections work, +// and why a pre-2.10.0 integration shows no credentials. +.conn-notice { + display: flex; + gap: 5px; + clear: both; + margin: 20px 0; + max-width: 640px; + padding: 14px 14px 16px 5px; + border: 1px solid #dde5f4; + border-left: 3px solid $purple; + border-radius: 8px; + background: $pg-canvas; + color: #4a5673; + font-size: 13px; + line-height: 1.55; + animation: fadeIn 180ms ease-out both; + + .conn-notice-icn { + flex: 0 0 auto; + margin-top: 1px; + color: $purple; + line-height: 0; + } + + .conn-notice-body { + min-width: 0; + } + + .conn-notice-title { + margin: 0 0 6px; + color: #2c3654; + font-size: 13.5px; + font-weight: 600; + line-height: 1.4; + } + + .conn-notice-sep { + height: 0; + margin: 16px 0; + border: 0; + border-top: 1px solid currentcolor; + opacity: 0.18; + } + + p { + margin: 0 0 8px; + } + + p:last-of-type { + margin-bottom: 0; + } + + .conn-notice-link { + display: inline-flex; + align-items: center; + margin-top: 14px; + padding: 9px 15px; + border: 0; + border-radius: 8px; + background: $purple; + color: #fff; + font-size: 12.5px; + font-weight: 600; + line-height: 1; + text-decoration: none; + cursor: pointer; + transition: + background-color 160ms cubic-bezier(0.23, 1, 0.32, 1), + box-shadow 160ms cubic-bezier(0.23, 1, 0.32, 1), + transform 160ms cubic-bezier(0.23, 1, 0.32, 1); + + &:hover, + &:focus-visible { + background: darken($purple, 10); + color: #fff; + box-shadow: 0 2px 8px rgba(151, 54, 255, 0.28); + } + + &:focus-visible { + outline: 2px solid $purple; + outline-offset: 2px; + } + + &:active { + transform: scale(0.97); + box-shadow: none; + } + } + + &.conn-notice-legacy { + border-color: #f4d8b8; + border-left-color: #d99326; + background: #fffaf3; + color: #6b5432; + + .conn-notice-icn { + color: #b3721f; + } + + .conn-notice-title { + color: #7a4f12; + } + + .conn-notice-link { + background: #8f5c21; + color: #fff; + + &:hover, + &:focus-visible { + background: #6b4315; + color: #fff; + box-shadow: 0 2px 8px rgba(143, 92, 33, 0.3); + } + + &:focus-visible { + outline-color: #8f5c21; + } + + &:active { + box-shadow: none; + } + } + } +} + +@media only screen and (max-width: 767px) { + .conn-notice { + max-width: 100%; + } +} + +@media (prefers-reduced-motion: reduce) { + .conn-notice { + animation: none; + + .conn-notice-link:active { + transform: none; + } + } +} + .f-right { float: right; } @@ -621,13 +705,6 @@ input[type='checkbox'].disabled:checked:before { width: 150px; height: 200px; } - -.layout-wrapper { - margin: auto; - margin-top: 3px; - height: calc(100% - 40px); -} - .isDragging { box-shadow: inset 0 0 4px 1px #2c9eff; } @@ -636,59 +713,6 @@ input[type='checkbox'].disabled:checked:before { overflow: hidden; min-height: 100px !important; } - -/* ._frm-bg { - overflow: auto; -} */ - -.toolBar-wrp { - background: $bg; - height: 100%; - overflow: hidden; - max-width: 165px; - min-width: 55px; - padding: 5px; - padding-bottom: 35px; - transition: width 500ms; - - & > h4 { - width: 100%; - margin: 10px 0; - text-align: center; - } -} - -.btcd-toolbar-title { - display: flex; - white-space: nowrap; - word-break: keep-all; - -webkit-user-select: none; - -ms-user-select: none; - -webkit-user-drag: none; - justify-content: space-between; - align-items: center; - margin: 5px 0 10px 12px; - font-weight: bold; - - & > button { - background: $bg; - color: #73818e; - width: 25px; - height: 25px; - font-weight: bold; - - &:hover { - background: $bg; - } - } -} - -.toolBar { - display: flex; - padding-bottom: 80px; - flex-wrap: wrap; -} - .tools { display: flex; background: white; @@ -728,22 +752,6 @@ input[type='checkbox'].disabled:checked:before { } } } - -.tool-img { - width: 21px; - min-width: 21px; - margin-right: 15px; -} - -.btcd-empty { - color: #d1d8ed; - - & > span { - display: block; - font-size: 50px; - } -} - .btcd-ck-wrp { display: inline-flex; color: rgb(54, 54, 54); @@ -768,13 +776,6 @@ input[type='checkbox'].disabled:checked:before { height: 0; width: 0; } - -.btcd-ck-con { - display: flex; - flex-wrap: wrap; - margin-top: 8px; -} - .btcd-mrk { position: absolute; top: 0; @@ -796,220 +797,6 @@ input[type='checkbox'].disabled:checked:before { background-color: $purple; border-color: $purple !important; } - -.btc-range { - & .icn { - & svg { - height: 13px; - width: 13px; - } - } - - & .inp-grp { - &:hover { - .icn { - color: $purple; - background-color: transparentize($purple, 0.92); - - & .line-icn { - stroke: $purple; - } - - & .fill-icn { - fill: $purple; - } - - .border-icn { - border-color: $purple; - } - } - } - } - - & .icn { - background: rgb(238, 243, 250); - width: 30px; - max-width: 30px; - min-width: 30px; - max-height: 30px; - height: 30px; - justify-content: center; - } - - & input[type='number'] { - width: 55px; - line-height: 1 !important; - outline: none; - border-radius: 5px; - border: 1px solid rgb(224, 224, 224); - font-size: 14px; - padding: 4px; - - &:hover, - :focus { - box-shadow: none; - border-color: gray; - } - } -} - -.btc-range { - $track-color: #eceff1 !default; - $thumb-color: transparentize($dp-purple, 0.2) !default; - - $thumb-radius: 12px !default; - $thumb-height: 13px !default; - $thumb-width: 13px !default; - $thumb-shadow-size: 2px !default; - $thumb-shadow-blur: 4px !default; - $thumb-shadow-color: rgba(0, 0, 0, 0.2) !default; - $thumb-border-width: 1.5px !default; - $thumb-border-color: #ff7777 !default; - - $track-width: 100% !default; - $track-height: 6px !default; - $track-shadow-size: 0px !default; - $track-shadow-blur: 0px !default; - $track-shadow-color: rgba(0, 0, 0, 0.2) !default; - $track-border-width: 0px !default; - $track-border-color: #dccfcf !default; - - $track-radius: 5px !default; - $contrast: 7% !default; - - $ie-bottom-track-color: darken($track-color, $contrast) !default; - - @mixin shadow($shadow-size, $shadow-blur, $shadow-color) { - box-shadow: - $shadow-size $shadow-size $shadow-blur $shadow-color, - 0 0 $shadow-size lighten($shadow-color, 5%); - } - - @mixin track { - cursor: default; - height: $track-height; - transition: all 0.2s ease; - width: $track-width; - } - - @mixin thumb { - background: $thumb-color; - border: $thumb-border-width solid $thumb-border-color; - border-radius: $thumb-radius; - box-sizing: border-box; - cursor: pointer; - height: $thumb-height; - width: $thumb-width; - @include shadow($thumb-shadow-size, $thumb-shadow-blur, $thumb-shadow-color); - } - - [type='range'] { - background: transparent; - -webkit-appearance: none; - margin: calc($thumb-height / 2) 0; - width: $track-width; - - &::-moz-focus-outer { - border: 0; - } - - &:hover { - &::-webkit-slider-runnable-track { - background: darken($track-color, $contrast - 1); - } - - &::-ms-fill-lower { - background: $track-color; - } - - &::-ms-fill-upper { - background: darken($track-color, $contrast - 1); - } - } - - &:focus { - outline: 0; - - &::-webkit-slider-runnable-track { - background: darken($track-color, $contrast); - } - - &::-ms-fill-lower { - background: $track-color; - } - - &::-ms-fill-upper { - background: darken($track-color, $contrast); - } - } - - &::-webkit-slider-runnable-track { - background: $track-color; - border: $track-border-width solid $track-border-color; - border-radius: $track-radius; - @include track; - @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color); - } - - &::-webkit-slider-thumb { - -webkit-appearance: none; - margin-top: calc(($track-border-width * 2 + $track-height) / 2 - ($thumb-height / 2)); - @include thumb; - } - - &::-moz-range-track { - background: $track-color; - border: $track-border-width solid $track-border-color; - border-radius: $track-radius; - height: calc($track-height / 2); - @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color); - @include track; - } - - &::-moz-range-thumb { - @include thumb; - } - - &::-ms-track { - background: transparent; - color: transparent; - border-color: transparent; - border-width: calc($thumb-height / 2) 0; - @include track; - } - - &::-ms-fill-lower { - background: $ie-bottom-track-color; - border: $track-border-width solid $track-border-color; - border-radius: calc($track-radius * 2); - @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color); - } - - &::-ms-fill-upper { - background: $track-color; - border: $track-border-width solid $track-border-color; - border-radius: calc($track-radius * 2); - @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color); - } - - &::-ms-thumb { - margin-top: calc($track-height / 4); - @include thumb; - } - - &:disabled { - &::-webkit-slider-thumb, - &::-moz-range-thumb, - &::-ms-thumb, - &::-webkit-slider-runnable-track, - &::-ms-fill-lower, - &::-ms-fill-upper { - cursor: not-allowed; - } - } - } -} - .btcd-mrk:after { display: none; position: absolute; @@ -1085,64 +872,9 @@ input[type='checkbox'].disabled:checked:before { color: #4e4e4e; } } - -.bar-l { - background: #f8f8f8; - width: 0; - pointer-events: none; - - &::before { - content: ''; - } - - &:hover { - width: 8px; - border-right: 1px solid #c7c7c7; - } +.ss-content.ss-open:parent { + background: red; } - -.bar-r { - background: $bg; - - &:hover { - width: 8px; - - & > div { - border-left: 3px solid $purple; - width: 12px; - } - } -} - -.ss-content.ss-open:parent { - background: red; -} - -.style-acc { - overflow: hidden; - margin: auto; - - & .btgl { - cursor: pointer; - padding: 10px; - font-size: 16 px; - outline: none; - font-weight: 600; - - & .btcd-icn { - font-size: 20px; - } - - &:hover { - background: transparentize($purple, 0.95); - } - } - - & .body { - padding: 10px; - } -} - .style-acc.active, .delay-overflow { overflow: visible; @@ -1154,149 +886,6 @@ input[type='checkbox'].disabled:checked:before { overflow: hidden; } } - -.btc-pick { - background: white; - position: absolute; - top: 10px; - right: -8px; - z-index: 99; - border-radius: 8px; - overflow: hidden; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); - - & .ui-color-picker { - margin: 0; - - & .picker-area { - padding: 5px; - } - } - - & .gradient-controls { - height: 45px; - margin-bottom: 0px; - } -} - -.clr-pick { - cursor: pointer; - height: 30px; - width: 30px; - outline: none; - border: 2px solid white; - box-shadow: 0 0 0 2px $dp-txt; -} - -.btc-pk-enter { - transform: scale(0); - transition: transform 150ms; -} - -.btc-pk-enter-active { - transform: scale(1.03); - transition: transform 150ms; -} - -.btc-pk-enter-done { - position: relative; - z-index: 99; - transform: scale(1); - transition: transform 100ms; -} - -.btc-btn-grp { - & button:first-child { - border-radius: 7px 0 0 7px; - } - - & button { - background: transparent; - color: $dp-txt; - position: relative; - font-size: 13px; - border: 1px solid lightgray; - border-right: 0; - border-radius: 0; - outline: none; - padding: 3px 7px; - cursor: pointer; - - & .btcd-icn { - font-size: 15px; - } - } - - & button:last-child { - border-radius: 0 7px 7px 0; - border-right: 1px solid lightgray; - } - - & button.active { - background: $purple; - color: white; - border-color: $purple; - - & .line-icn { - stroke: white; - } - - & .fill-icn { - fill: white; - } - } - - & svg { - display: block; - height: 13px; - width: 13px; - - & .line-icn { - stroke: $dp-purple; - } - - & .fill-icn { - fill: $dp-purple; - } - } -} - -// components style -.com-wrp { - width: 100%; - height: 100%; - cursor: default; -} - -.blk-icn-wrp { - background: rgba(255, 255, 255, 0.658); - right: 0; - height: 0; - width: 0; - - & > button { - background: transparent; - color: $dp-purple; - width: 22px; - height: 22px; - border-radius: 3px; - border: none; - transform: scale(0); - transition: transform 300ms; - } - - & > button:hover { - background: rgb(241, 241, 241); - color: black; - } -} - -.fld-lbl { - cursor: default; - white-space: nowrap; - text-overflow: ellipsis; -} - .blk { outline: none; @@ -1323,38 +912,9 @@ input[type='checkbox'].disabled:checked:before { .mce-fullscreen { height: 100%; } - -.elm-settings { - background: $bg; - height: 100%; - max-width: 500px; - margin-right: 0; - margin-left: auto; - font-size: 18px; - - & > h4 { - margin: 0 0 0 10px; - padding-top: 10px; - padding-bottom: 10px; - border-bottom: 1px solid #c7c7c7; - } - - & > .settings { - font-size: 14px; - height: calc(100% - 85px); - } -} - -.elm-settings-title { - z-index: 9; - -webkit-clip-path: inset(-30px 0px); - clip-path: inset(-30px 0px); -} - .btcd-inte-wrp { align-items: baseline; justify-content: center; - //overflow-y: scroll; height: 90%; margin-bottom: 20px; width: 100%; @@ -1374,7 +934,6 @@ input[type='checkbox'].disabled:checked:before { border-radius: 15px; outline: none; border: 1px solid #dce7ff; - // box-shadow: 0px 2px 3px #d7e0ed; background-color: aliceblue; transition: box-shadow 0.2s, @@ -1473,9 +1032,6 @@ input[type='checkbox'].disabled:checked:before { max-width: 100px; max-height: 100px; object-fit: contain; - // margin: 0 auto; - // margin-top: 12px; - // padding: 12px; } &:before { @@ -1527,7 +1083,6 @@ input[type='checkbox'].disabled:checked:before { } .btcd-inte-pro { - // pointer-events: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; @@ -1561,13 +1116,11 @@ input[type='checkbox'].disabled:checked:before { & .pro-filter { display: flex; - // background: #4e5a9447; position: absolute; text-align: right; align-items: right; justify-content: right; flex-direction: row; - // height: 100%; width: 100%; z-index: 9; top: 0; @@ -1588,21 +1141,6 @@ input[type='checkbox'].disabled:checked:before { } } } - -.setting-inp { - display: inline-flex; - flex-direction: column; - width: 100%; - - & span { - font-weight: 600; - } - - & input { - margin-top: 6px; - } -} - #modal-title-wrapper { display: flex; flex-direction: column; @@ -1675,19 +1213,6 @@ textarea:focus { box-shadow: none; } } - -.btcd-btn-o-blue { - background: transparent; - color: $blue !important; - border: 1px solid $blue; - transition: background 0.2s !important; - - &:hover { - background: $blue; - color: white !important; - } -} - .btcd-btn-o-purple { background: transparent; color: $purple !important; @@ -1699,24 +1224,6 @@ textarea:focus { color: white !important; } } - -.btcd-btn-purple-active { - background-color: $purple; - color: white; -} - -.btcd-btn-o-red { - background: transparent; - color: $red !important; - border: 1px solid $red; - transition: background 0.2s !important; - - &:hover { - background: $red; - color: white !important; - } -} - .btcd-btn-o-gray { background: transparent; color: #4b4b4b !important; @@ -1826,7 +1333,6 @@ button:disabled { background: rgb(195, 194, 194) !important; color: #ffffff; opacity: 50%; - // box-shadow: 0 0 0 1px $purple !important; outline: 2px solid transparent !important; } @@ -1837,25 +1343,6 @@ button:disabled { .round { border-radius: 50px; } - -.z-9 { - overflow: visible; - z-index: 9; -} - -.cls-btn { - background: #d8e0e8; - font-size: 25px; - padding: 1px; - width: 25px; - height: 25px; - line-height: 0px; - - &:hover { - color: red; - } -} - // navbar start nav.top-nav { background: white; @@ -1897,7 +1384,7 @@ nav.top-nav { } .route-wrp { - background: white; + background: $pg-canvas; min-height: 82vh; margin: -150px 15px 15px; border-radius: 20px; @@ -2050,12 +1537,11 @@ nav.top-nav { .f-table > .thead > .tr > .th, .f-table .tbody .tr .td { - background-color: white; + background-color: $pg-canvas; text-align: left; padding: 10px; text-overflow: ellipsis; white-space: nowrap; - // overflow: hidden; height: 100%; } @@ -2068,23 +1554,6 @@ nav.top-nav { .btcd-entries-f .tbody .tr .td:last-child { overflow: visible; } - -.btc-line-icn { - & .line-icn { - fill: none; - stroke: $dp-purple; - stroke-width: 16px; - } -} - -.border-icn { - width: 13px; - height: 13px; - border-width: 1.5px; - border-color: $dp-bg; - border-style: solid; -} - .btcd-hid-icn { display: none !important; } @@ -2115,89 +1584,6 @@ nav.top-nav { .btcd-t-action { margin-right: 20px; } - -.btcd-accr { - background: white; - border-radius: 8px; - - & > .btcd-accr-btn { - border-radius: 8px 8px 0 0; - outline: none; - padding: 8px; - cursor: pointer; - - & > .icn-btn { - font-weight: bold; - - &:hover { - background: rgba(0, 0, 0, 0.178); - } - } - - &:hover { - background-color: #eaedff; - - & .edit-icn { - display: inline-block; - } - } - - & > .btcd-accr-title > div { - & > input { - background: transparent; - border: none; - line-height: 1; - box-shadow: none; - min-height: 10px; - padding: 0; - margin: 0; - font-size: 15px; - border-radius: 5px; - outline: none; - cursor: pointer; - } - - & > div { - display: none; - margin-left: 3px; - - & > .btcd-icn { - color: transparentize(#000, 0.5); - font-size: 14px !important; - } - } - } - - & > .btcd-accr-title div > input.edit { - cursor: text; - - &:hover { - box-shadow: 0 0 0 1px transparentize(#000000, 0.8); - } - - &:focus { - background: transparentize($color: #fff, $amount: 0.4); - color: black !important; - box-shadow: 0 0 0 1px transparentize($dp-purple, 0.8); - padding: 0 4px; - } - } - } - - & .edit-icn { - display: none; - } -} - -.btcd-accr-title { - padding: 5px; - - & > small { - color: gray; - font-size: 12px; - } -} - .f-search { display: flex; font-size: 12 !important; @@ -2259,11 +1645,6 @@ nav.top-nav { height: 40px; font-size: 25px; } - -.btc-icn-md { - font-size: 20px; -} - .btcd-icn-sm { font-size: 17px; } @@ -2502,25 +1883,9 @@ nav.top-nav { .btcd-icn { pointer-events: none !important; } - -.btcd-prgrs-wrp { - margin-left: 7px; - width: 70%; - height: 6px; - border-radius: 10px; - overflow: hidden; - background-color: #c7d4ff; -} - -.btcd-prgrs { - height: inherit; - border-radius: inherit; - background-color: $purple; -} - -.btcd-menu { - position: relative; - font-weight: normal; +.btcd-menu { + position: relative; + font-weight: normal; } .btcd-menu-list { @@ -2688,17 +2053,6 @@ nav.top-nav { height: 100%; } } - -.btcd-m-md { - width: 500px !important; - height: auto !important; - min-height: 10% !important; - - & .content { - height: 100%; - } -} - .confirm-content { padding: 50px 10px; } @@ -3242,16 +2596,6 @@ $log-ease: cubic-bezier(0.23, 1, 0.32, 1); background: transparent; } } - -.submit-btn { - background: #1296ef; - // position: absolute; - margin: 25px; - position: absolute; - bottom: 0; - right: 0; -} - .btcd-mdl-close { background: #fafafa; position: absolute; @@ -3265,105 +2609,9 @@ $log-ease: cubic-bezier(0.23, 1, 0.32, 1); border: 0.5px solid #b0cae4; margin-top: 7px; } - -.btcd-mdl-hdr-btn { - position: absolute; - top: 2px; - right: 50px; -} - -.btcd-tem { - position: relative; - width: 150px; - height: 150px; - border: 2px solid #e0e0e0; - border-radius: 10px; - margin-top: 10px; - margin-left: 10px; - justify-content: center; - flex-direction: column; - overflow: hidden; - transition: border 300ms; - - & > div { - margin-top: 10px; - } - - &:hover { - border: 2px solid $purple; - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.29); - } - - &:hover .btcd-hid-btn { - bottom: 0; - } -} - .sh-sm { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.32); } - -.sh-1 { - box-shadow: 0 0px 13px 0 rgba(207, 207, 207, 0.32); -} - -.btcd-hid-btn { - display: block; - background: $purple; - position: absolute; - bottom: -53px; - left: 0; - width: 100%; - text-align: center; - transition: bottom 300ms; - - & > a { - display: inline-block; - text-decoration: none; - } -} - -.btn-white { - background: white; - - &:hover { - background: #f1f1f1; - color: $purple; - } - - &:active { - background: #e4e4e4; - color: $purple; - } -} - -.btcd-builder-wrp { - background: - linear-gradient(90deg, #ffffff 12px, transparent 1%) center, - linear-gradient(#ffffff 12px, transparent 1%) center, - #000000; - // background: white !important; - position: fixed !important; - top: 80px !important; - right: 20px !important; - left: 20px !important; - height: 100%; - margin-bottom: 30px !important; - border-radius: 20px !important; - overflow: hidden !important; - box-shadow: 0px 0px 7px 0px rgba(132, 178, 176, 0.45); - background-size: 13px 13px; - // transition: left 0.5s, right 0.5s, top 0.5s, margin-bottom 0.5s, border-radius 0.5s 0.5s !important; -} - -.btcd-ful-scn { - top: 0 !important; - right: 0 !important; - left: 0 !important; - border-radius: 0 !important; - margin-bottom: 0 !important; -} - .btcd-drawer { background: white; position: fixed; @@ -3383,147 +2631,9 @@ $log-ease: cubic-bezier(0.23, 1, 0.32, 1); font-size: 17px; font-weight: bold; } - -.btcd-row-detail-tbl { - & tr th { - text-align: left; - padding: 10px; - min-width: 170px; - } - - & tr td { - padding: 10px; - word-break: break-all; - } -} - .br-50 { border-radius: 500px; } - -.btcd-bld-nav { - display: flex; - background: $dp-bg; - height: 40px; - overflow: hidden; - justify-content: space-between; -} - -.btcd-bld-lnk { - display: flex; - box-shadow: none; - - & > a { - display: inline-block; - background: transparentize(#fff, 0.9); - color: white; - padding: 6px 15px; - margin: 6px; - border-radius: 100px; - text-decoration: none; - line-height: 16px; - transition: background 0.3s !important; - - &:hover { - background: transparentize(#fff, 0.7); - } - } - - & > a > .btcd-icn { - font-size: 26px; - margin-right: 5px; - } - - & > a:nth-child(1) { - display: flex; - align-items: center; - width: 38px; - overflow: hidden; - padding: 8px; - transition: width 0.5s !important; - - &:hover { - width: 100px; - } - } -} - -.btcd-bld-btn { - display: flex; - align-items: center; - - & > button, - a { - height: 28px; - border-radius: 20px; - text-decoration: none; - margin: 5px 10px 5px 5px; - padding: 7px 25px; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.76); - - &:disabled { - background: transparentize($purple, 0.5) !important; - } - } - - & > .btcd-btn-close { - background: transparentize(#fff, 0.6); - color: white; - font-size: 22px; - height: 30px; - width: 30px; - margin-right: 20px; - padding: 0; - border-radius: 100px; - text-align: center; - - &:hover { - background: rgb(255, 57, 57) !important; - } - } -} - -.pro-modal { - & h4 { - line-height: 1.5; - } - - & .btn { - background: crimson !important; - padding: 15px 50px; - border-radius: 100px; - } -} - -.btcd-bld-title { - margin-right: 200px; - - & > .btcd-bld-title-inp { - background: transparentize(#fff, 0.8); - color: white; - margin-top: 5px; - padding: 6px; - font-size: 16px; - border: none; - text-align: center; - outline: none; - } - - & > .btcd-bld-title-inp:hover { - background: transparentize(#fff, 0.6); - } - - & > .btcd-bld-title-inp:focus { - background: white; - color: #0e112f; - font-weight: bold; - } -} - -.tool-sec { - transition: flex-grow 500ms; -} - .app-link-active { background: $light-bg !important; font-weight: bold !important; @@ -3547,120 +2657,6 @@ $log-ease: cubic-bezier(0.23, 1, 0.32, 1); opacity: 1; } } - -.btcd-f-settings { - background-color: $light-bg; -} - -.btcd-f-sidebar { - background: $dp-bg; - position: fixed; - height: 100%; - z-index: 9; - width: 230px; - box-shadow: -3px -6px 7px -1px rgb(0, 0, 0) inset; - - &::before { - position: absolute; - right: -15px; - content: ''; - height: 15px; - width: 15px; - background-color: transparent; - border-radius: 15px 0 0 0; - box-shadow: -5px -3px 0 2px $dp-bg; - } - - & > a { - display: flex; - color: white; - position: relative; - align-items: center; - font-size: 15px; - padding: 12px 10px 12px 20px; - margin-left: 20px; - border-radius: 50px 0 0 50px; - text-decoration: none; - font-weight: 600; - margin-bottom: 25px; - - &:focus { - box-shadow: none; - } - - & > span { - margin-right: 10px; - } - } - - & > a:hover:not(.btcd-f-a) { - background: transparentize(#000000, 0.7); - } -} - -.btcd-f-a { - background: $light-bg; - color: $dp-purple !important; - box-shadow: -4px 2px 3px 0 black; - - &:before { - background: transparent; - position: absolute; - top: -18px; - right: 0; - content: ''; - width: 15px; - height: 18px; - border-radius: 0 0 15px 0; - box-shadow: 5px 4px 0 3px $light-bg; - } - - &:after { - background: #6b424200; - position: absolute; - right: 0; - bottom: -18px; - content: ''; - width: 15px; - height: 18px; - border-radius: 0 15px 0 0; - box-shadow: 5px -9px 0 4px $light-bg; - } -} - -.btcd-f-c-t-o { - display: inline-block; - background: white; - cursor: pointer; - border: 2.5px solid white; - outline: none; - text-align: center; - padding: 10px; - border-radius: 8px; - margin-top: 10px; - - &:hover:not(.btcd-f-c-t-o-a) { - border-color: transparentize($purple, 0.6); - } -} - -.btcd-f-c-t-o-a { - color: $purple; - position: relative; - border-color: $purple; - - &:after { - position: absolute; - top: 100%; - left: 50%; - content: ''; - margin-left: -10px; - border-width: 8px; - border-style: solid; - border-color: $purple transparent transparent transparent; - } -} - .btcd-s-wrp { position: relative; padding: 30px; @@ -3671,20 +2667,6 @@ $log-ease: cubic-bezier(0.23, 1, 0.32, 1); padding: 30px 10px !important; } } - -.btcd-s-inp { - font-size: 16px; - border-radius: 8px; - outline: none; - width: 60%; - line-height: 0; - border: 2px solid #c6e5ff; - - &:focus { - border: 2px solid $purple; - } -} - .f-lg { font-size: 20px; } @@ -3734,6 +2716,21 @@ $log-ease: cubic-bezier(0.23, 1, 0.32, 1); max-width: 800px; } +// The library paints a background only on the active and disabled control, so an +// idle multiselect let the page canvas show through, and its border is a dark +// #9c9c9c against the #e2e2e2 every other input uses. Integration wrapper classes +// are inconsistent, so match on the library's own markup instead — and note its +// stylesheet ships in a lazy chunk, i.e. loads after this file, so a bare `.msl` +// here would lose. `.msl-disabled > .msl` still wins for the disabled grey. +.msl-wrp > .msl { + background: #fff; + border-color: #e2e2e2; + + &:not(.msl-active, .msl-active-up):hover { + border-color: $dp-txt; + } +} + .btcd-paper-drpdwn { --menu-max-height: 300px; --font-size: 15px; @@ -3792,131 +2789,15 @@ select.btcd-paper-inp { &:hover:not(:disabled), :focus { color: $dp-purple !important; - // background-position-y: 12px; } } - -.btcd-date-pick > .react-date-picker__wrapper, -.react-time-picker__wrapper { - font-family: inherit; - line-height: 1 !important; - font-size: 15px !important; - padding: 9px !important; - border-radius: 8px; - border: 1px solid #e2e2e2 !important; - - &:focus { - border-color: $purple !important; - box-shadow: - 0 0 0 0px $purple, - 0 0 0 4px rgba(0, 131, 243, 0.1) !important; - } - - &:hover:not(:disabled, :focus) { - border-color: $dp-txt !important; - } - - & > button > svg { - stroke: rgb(53, 53, 53); - } - - & input { - border: none; - box-shadow: none; - line-height: 1; - background-color: none; - padding: 0; - min-height: 0; - } - - & select { - font-size: 14px; - padding: 0 22px 0 5px; - min-width: 0; - min-height: 0; - height: auto I !important; - border-radius: 5px; - border-color: #ececec; - line-height: 1; - } -} - -.react-time-picker__inputGroup__amPm { - border: 1px solid #ececec !important; - border-radius: 7px; -} - -.btcd-date-pick-cln, -.react-time-picker__clock { - border-radius: 10px; - border: none !important; - box-shadow: 0px 0px 4px #b8b8b8; -} - -.btcd-setting-opt { - height: 48px; - padding: 0 5px 0 15px; -} - -.btcd-em-n-t-wrp { - padding: 20px 0 20px 0; - box-shadow: 0px 3px 5px 1px #0000002b; - border-radius: 20px; - margin-top: 15px; - height: 400px; - overflow: auto; -} - -.btcd-em-n-t { - width: 100%; - border-collapse: collapse; - - & > thead > tr > th { - color: #637192; - text-align: left; - padding: 0 0 10px 10px; - border-bottom: 2px solid #dce1f3; - } - - & > tbody > tr { - &:hover { - background: #f4f6ff; - } - } - - & > tbody > tr > td { - color: $dp-purple; - padding: 10px 0 10px 10px; - border-bottom: 1px solid #c9d6e2; - - &:hover { - background: #eeeefd; - } - } -} - -.btcd-tabl-lnk { - color: $purple; - text-decoration: none; - - &:hover { - color: $dp-purple; - } - - &:focus { - color: $dp-purple !important; - outline: none !important; - box-shadow: none !important; - } -} - -//table checkbox start -.btcd-label-cbx { - display: inline-block; - -ms-user-select: none; - -webkit-user-select: none; - cursor: pointer; - margin-bottom: 0; +//table checkbox start +.btcd-label-cbx { + display: inline-block; + -ms-user-select: none; + -webkit-user-select: none; + cursor: pointer; + margin-bottom: 0; input { &:checked { @@ -3942,8 +2823,6 @@ select.btcd-paper-inp { &:indeterminate { + { .btcd-t-cbx { - // border-color: $purple; - // background: $purple; border-color: #808080cf; background: #808080cf; @@ -3974,7 +2853,6 @@ select.btcd-paper-inp { margin-right: 8px; width: 18px; height: 18px; - // border: 1.5px solid #7902f899; border: 1px solid #808080cf; border-radius: 50%; background: transparent; @@ -4037,7 +2915,6 @@ select.btcd-paper-inp { right: 0; width: 15px; height: 100%; - //border-left: 1px solid #eaeaea; transform: translateX(50%); z-index: 1; touch-action: none; @@ -4053,25 +2930,92 @@ select.btcd-paper-inp { position: relative; } +// Shared open/close motion for the popover menus, ported from the row-action +// menu (.btcd-menu-list / .btcd-m-a): the panel unrolls like a book from the +// edge its trigger sits on. +// +// The original unrolls by animating `width`, which relays out the panel and +// everything inside it on every frame. Here the panel keeps its full size and +// a `clip-path` inset walks across it instead — same read, but it is a paint, +// so the content is laid out once and simply uncovered. The insets run +// negative so the drop shadow lives outside the clip and survives the reveal. +// +// Each menu sets --menu-width (what it opens to) and --menu-radius (its +// resting corner); the closed and open states read both. +$menu-open-time: 280ms; +$menu-close-time: 200ms; +$menu-ease: cubic-bezier(0.23, 1, 0.32, 1); +$menu-bleed: 40px; + +// Height never joins in: it cannot interpolate to `auto`, so collapsing it +// would snap the content away and swallow the reveal on close. The original +// hits the same wall and writes a measured pixel height inline, leaving its +// CSS `height: 0` dead. +@mixin menu-book-closed($width, $hinge: right, $radius: 10px) { + --menu-width: #{$width}; + --menu-radius: #{$radius}; + @if $hinge == right { + --menu-clip-shut: inset(#{-$menu-bleed} #{-$menu-bleed} #{-$menu-bleed} 100%); + } @else { + --menu-clip-shut: inset(#{-$menu-bleed} 100% #{-$menu-bleed} #{-$menu-bleed}); + } + + visibility: hidden; + width: var(--menu-width); + border-radius: 999px; + -webkit-clip-path: var(--menu-clip-shut); + clip-path: var(--menu-clip-shut); + pointer-events: none; + transition: + clip-path $menu-close-time $menu-ease, + -webkit-clip-path $menu-close-time $menu-ease, + border-radius $menu-close-time $menu-ease, + opacity $menu-close-time $menu-ease, + visibility 0s linear $menu-close-time; + opacity: 0; +} + +@mixin menu-book-open { + visibility: visible; + opacity: 1; + border-radius: var(--menu-radius); + -webkit-clip-path: inset(-$menu-bleed); + clip-path: inset(-$menu-bleed); + pointer-events: auto; + transition: + clip-path $menu-open-time $menu-ease, + -webkit-clip-path $menu-open-time $menu-ease, + border-radius $menu-open-time $menu-ease, + opacity 140ms ease-out, + visibility 0s; +} + +// The trigger answers the press before the panel finishes opening, the same +// way the row-action button does. +@mixin menu-trigger-press { + transition: transform 140ms ease-out; + + &:active { + transform: scale(0.94); + } +} + .btcd-menu-li { - display: none; + @include menu-book-closed(200px); + + display: block; background: transparentize($color: #fff, $amount: 0.1); position: absolute; - height: 350px; - width: max-content; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.22); z-index: 999; - border-radius: 10px; overflow: hidden; & > div:not(.btcd-m-li-itm) { - //height: 280px !important; overflow-y: auto; overflow-x: hidden; width: 200px; - // mpadding: 10px; min-width: 100px; border-bottom: 1px solid #eaeaf1; /* & :hover { @@ -4079,15 +3023,6 @@ select.btcd-paper-inp { } */ } } - -.btcd-col-vis { - background: red; - right: 40px; - width: 200px; - height: 100px; - z-index: 9; -} - .btcd-pane { white-space: nowrap; width: 100% !important; @@ -4143,7 +3078,7 @@ select.btcd-paper-inp { } .btcd-menu-a { - display: block; + @include menu-book-open; } .btcd-t-actions { @@ -4188,43 +3123,11 @@ select.btcd-paper-inp { } } } - -.btcd-eye-t { - display: inline-block; - -ms-user-select: none; - -webkit-user-select: none; - cursor: pointer; - - input:checked { - + { - span > .eye-t-v { - display: inline-block; - } - - span > .eye-t-h { - display: none; - } - } - } - - .eye-t-v { - display: none; - } -} - #form-res { background: white; height: 100%; overflow: auto; } - -.btcd-pill { - background: transparentize($purple, 0.8); - color: $dp-purple; - padding: 5px; - border-radius: 5px; -} - .scl-7 { transform: scale(0.7); } @@ -4397,8 +3300,6 @@ select.btcd-paper-inp { } .bit-logo { - // background: rgb(15, 16, 49); - // background: linear-gradient(43deg, rgba(15, 16, 49, 1) 0%, rgba(29, 58, 75, 1) 100%); padding: 15px 15px 15px 19px; border-radius: 28px; box-shadow: 0 0 22px -7px #9498ce; @@ -4418,48 +3319,6 @@ select.btcd-paper-inp { width: 85%; } } - -.btc-s-l { - display: block; - background: white; - color: $dp-txt; - cursor: pointer; - width: 90%; - border-radius: 8px; - padding: 7px 12px; - margin-left: auto; - margin-right: 20px; - font-weight: 500; - //box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); - - & .lft-icn { - background: #f5f5f5; - color: $dp-purple; - min-width: 40px; - min-height: 40px; - border-radius: 30; - justify-content: center; - } - - &:hover { - color: $purple; - - & .lft-icn { - background: $light-purple-bg; - color: $purple; - - & .line-icn { - stroke: $purple; - } - - & .fill-icn { - fill: $purple; - } - } - } -} - .btcd-li-side-btn { display: none; position: absolute; @@ -4470,18 +3329,6 @@ select.btcd-paper-inp { .pos-rel { position: relative; } - -.pos-abs { - position: absolute; -} - -.btcd-flow-icn { - color: transparentize($dp-txt, 0.7); - font-size: 24px; - font: bolder; - line-height: 0; -} - .rev-icn { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); @@ -4489,15 +3336,6 @@ select.btcd-paper-inp { -o-transform: rotateY(180deg); -ms-transform: rotateY(180deg); } - -.btcd-wrk-logic { - &:hover { - & .btcd-li-side-btn { - display: inline-block; - } - } -} - .btcd-mt-inp { display: inline-block; color: $dp-bg !important; @@ -4768,53 +3606,6 @@ select.btcd-paper-inp { } } } - -.btcd-ud-inp { - width: 100%; - font-family: inherit; - line-height: 1 !important; - font-size: 15px !important; - padding: 10px !important; - outline: none; - border-radius: 8px !important; - min-height: 15px !important; - border: 1px solid #e2e2e2 !important; - - &:focus { - border: 0; - box-shadow: 0 0 0 3px $purple inset !important; - } -} - -select.btcd-ud-inp { - background: url($select-arrow) no-repeat right #fff; - appearance: none; - transition: - background-position-y 0.2s, - border 0.2s, - box-shadow 0.2s; -} - -.btcd-lgc { - display: inline-block; - color: #00a6ff; - border: 2px solid #00a6ff; - padding: 4px 10px; - border-radius: 10px; - font-weight: bold; - font-size: 15px; -} - -.btcd-lgc-sm { - display: inline-block; - color: #6faaff; - border: 1.5px solid #6faaff; - padding: 2px 7px; - border-radius: 8px; - font-size: 11px; - font-weight: bold; -} - .btcd-logic-grp { border: 1px solid #b9c5ff; @@ -4841,41 +3632,6 @@ select.btcd-ud-inp { box-shadow: none; } } - -.btcd-lgc-btns { - display: inline-block; - - & button { - transform: scale(0); - transition: transform 0.3s; - - &:nth-child(1) { - transform: scale(1); - } - } - - &:hover { - & button:nth-child(2) { - transform: scale(1); - } - - & button:nth-child(3) { - transition-delay: 0.1s; - transform: scale(1); - } - - & button:nth-child(4) { - transition-delay: 0.2s; - transform: scale(1); - } - - & button:nth-child(5) { - transition-delay: 0.3s; - transform: scale(1); - } - } -} - .btcd-logic-blk, .workflow-grp { &:hover { @@ -4885,147 +3641,29 @@ select.btcd-ud-inp { } } } +.btcd-neu-btn.icn { + border-radius: 30px; + width: 30px; + height: 30px; + padding: 6px 9px; +} +.btcd-stp { + background: rgb(236, 236, 236); + color: gray; + height: 35px; + width: 35px; + font-weight: bold; + -ms-user-select: none; + -webkit-user-select: none; + border: 2px solid rgb(236, 236, 236); + border-radius: 30px; -.btcd-neu-table { - padding: 10px; - border-radius: 10px; - border: 1px solid #b2cce3; - - & .thead { - color: #244679; - font-weight: bold; - font-size: 14px; - padding: 5px 5px 15px 5px; - border-bottom: 2px solid #b2cce3; - - & .th { - padding-left: 5px; - border-right: 1px solid rgb(191, 199, 221); - } - - & .th:last-child { - border: none; - } - } - - & .tbody { - margin: 3px; - - & .tr { - outline: none; - padding: 5px; - border-bottom: 1px solid #b2cce3; - - &:last-child { - border: none; - } - } - - & .td { - border-right: 1px solid #b2cce3; - padding-left: 5px; - - & a:hover { - color: $dp-purple; - } - - &:hover:not(:last-child) { - background: #ecf1ff; - border-radius: 5px; - } - - &:last-child { - border: none; - } - } - } -} - -.btcd-neu-btn { - display: inline-block; - background: $light-bg; - color: $dp-bg; - text-decoration: none; - cursor: pointer; - box-shadow: - 6px 6px 10px rgba(120, 136, 194, 0.4), - -6px -6px 10px rgba(255, 255, 255, 0.9); - border-radius: 10px; - padding: 10px; - border: none; - outline: none; - transition: - transform 0.2s, - box-shadow 0.2s; - - &:hover { - background-color: darken($light-bg, 5); - } - - &:active { - box-shadow: - 3px 3px 6px rgba(120, 136, 194, 0.4), - -6px -6px 10px rgba(255, 255, 255, 0.9); - transform: scale(0.9); - } -} - -.btcd-neu-btn.icn { - border-radius: 30px; - width: 30px; - height: 30px; - padding: 6px 9px; -} - -.btcd-neu-btn.neu-sh-sm { - box-shadow: - 3px 3px 6px rgba(120, 136, 194, 0.4), - -3px -3px 6px rgba(255, 255, 255, 0.9); -} - -.btcd-neu-inp { - display: inline-block; - background-color: $light-bg; - border-radius: 10px; - - & input, - textarea { - background: lighten($light-bg, 5); - width: 100%; - border: 3px solid $light-bg; - outline: none; - margin: 0; - transition: - box-shadow 0.2s, - border 0.2s; - - &:focus { - background: white; - box-shadow: - 1px 1px 2px rgba(120, 136, 194, 0.4) inset, - -1px -1px 2px rgba(255, 255, 255, 0.9) inset; - border: 3px solid darken($light-bg, 7); - } - } -} - -.btcd-stp { - background: rgb(236, 236, 236); - color: gray; - height: 35px; - width: 35px; - font-weight: bold; - -ms-user-select: none; - -webkit-user-select: none; - border: 2px solid rgb(236, 236, 236); - border-radius: 30px; - - &.stp-a { - background: transparentize($purple, 0.9); - color: $purple; - border-color: $purple; - } -} + &.stp-a { + background: transparentize($purple, 0.9); + color: $purple; + border-color: $purple; + } +} .btcd-stp-line { display: inline-block; @@ -5107,119 +3745,6 @@ select.btcd-ud-inp { margin-bottom: 80px; } } - -.btcd-device-btn { - position: absolute; - top: 7px; - right: 20%; - - & .active { - background: transparentize(#fff, 0.7); - color: transparentize(#fff, 0); - } - - & > button { - background: transparentize(#fff, 0.9); - color: transparentize(#fff, 0.4); - cursor: pointer; - outline: none; - width: 34px; - height: 29px; - margin-right: 5px; - border-radius: 5px; - border: none; - font-size: 21px; - - &:hover { - background: transparentize(#fff, 0.7); - color: transparentize(#fff, 0); - } - - &:focus { - color: transparentize(#fff, 0); - box-shadow: 0 0 0 2px $purple; - } - } - - & button:nth-child(2) > span { - transform: rotate(90deg); - } - - & button.lap { - padding-top: 4px; - font-size: 23px; - } -} - -.resp-btn { - /* & .active{ - background-color: ; - } */ - & button:nth-child(2) { - & .btcd-icn { - transform: rotate(90deg); - } - } - - & button { - background: transparent; - color: $purple; - outline: none; - border: 1px solid $purple; - width: 22px; - height: 22px; - padding: 3px; - cursor: pointer; - justify-content: center; - - &:hover { - background: transparentize($purple, 0.9); - } - } -} - -.btcd-app-setting-sidebar { - display: inline-block; - padding: 15px; - min-height: 82vh; - border-right: 1px solid #e8e8e8; - - & > a { - display: flex; - color: $dp-bg; - padding: 12px 15px; - align-items: center; - width: 200px; - margin-bottom: 10px; - border-radius: 50px; - font-weight: 600; - - & > span { - margin-right: 10px; - } - - &:hover { - background: transparentize($dp-bg, 0.9); - } - } -} - -.btcd-app-s-a { - background: $dp-bg; - color: white !important; - font-weight: bold; - - &:hover { - background: transparentize($dp-bg, 0.08) !important; - } -} - -.btcd-captcha { - & h2 { - margin: 15px 0 5px 0; - } -} - .btcd-link { color: blue; box-shadow: none !important; @@ -5250,50 +3775,6 @@ _:-ms-fullscreen, border-bottom: 1px solid; border-color: #eeeeee; } - -.coming-feature { - display: flex; - background: #07316f38; - pointer-events: none; - justify-content: center; - align-items: center; - padding: 5px; - -webkit-backdrop-filter: blur(1px); - backdrop-filter: blur(1px); - border-radius: 8px; - - &::before { - background: white; - position: absolute; - top: 60%; - content: 'Coming Soon'; - padding: 5px 7px; - font-size: 15px; - border-radius: 10px; - background-color: white; - box-shadow: 0px 0 29px -9px #1e1d3f; - } -} - -.btcd-ttc { - text-transform: capitalize; -} - -// paypal -.btcd-code { - color: #212121; - padding: 3px; - border-radius: 5px; -} - -.btcd-ttl-ellipsis { - display: inline-block; - width: 76%; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; -} - .btcd-hr { max-width: 97%; border-bottom: 1px solid #e2e2e2; @@ -5373,11 +3854,6 @@ _:-ms-fullscreen, .flx-end { justify-content: end; } - -.w-nwrp { - white-space: nowrap; -} - .m-a { margin: auto; } @@ -5398,22 +3874,6 @@ _:-ms-fullscreen, margin-left: 0 !important; margin-right: 0 !important; } - -.mx-1 { - margin-left: 5px; - margin-right: 5px; -} - -.mx-2 { - margin-left: 10px; - margin-right: 10px; -} - -.mx-3 { - margin-left: 15px; - margin-right: 15px; -} - .my-1 { margin-top: 5px; margin-bottom: 5px; @@ -5452,11 +3912,6 @@ _:-ms-fullscreen, .mb-25 { margin-bottom: 125px; } - -.mb-50 { - margin-bottom: 250px; -} - .mt-0 { margin-top: 0 !important; } @@ -5524,11 +3979,6 @@ _:-ms-fullscreen, .ml-2 { margin-left: 10px; } - -.ml-4 { - margin-left: 20px !important; -} - .ml-5 { margin-left: 25px !important; } @@ -5549,28 +3999,9 @@ _:-ms-fullscreen, padding: auto; } -.p-1 { - padding: 5px; -} - -.p-2 { - padding: 10px; -} - .p-0 { padding: 0 !important; } - -.px-0 { - padding-left: 0 !important; - padding-right: 0 !important; -} - -.py-1 { - padding-top: 5px; - padding-bottom: 5px; -} - .py-2 { padding-top: 10px; padding-bottom: 10px; @@ -5580,47 +4011,13 @@ _:-ms-fullscreen, padding-top: 15px; padding-bottom: 15px; } - -.pb-0 { - padding-bottom: 0; -} - -.pb-1 { - padding-bottom: 5px; -} - -.pb-2 { - padding-bottom: 10px; -} - .pb-3 { padding-bottom: 15px; } - -.pb-4 { - padding-bottom: 20px; -} - -.pb-25 { - padding-bottom: 125px; -} - -.pb-50 { - padding-bottom: 250px; -} - .pt-0 { padding-top: 0 !important; } -.pt-1 { - padding-top: 5px; -} - -.pt-2 { - padding-top: 10px; -} - .pt-3 { padding-top: 15px; } @@ -5636,79 +4033,15 @@ _:-ms-fullscreen, .pt-i-3 { padding-top: 15px !important; } - -.pr-1 { - padding-right: 5px; -} - -.pr-2 { - padding-right: 10px; -} - -.pr-4 { - padding-right: 20px; -} - -.pr-8 { - padding-right: 40px; -} - -.pr-16 { - padding-right: 80px; -} - -.pr-18 { - padding-right: 93px; -} - -.pr-24 { - padding-right: 118px; -} - -.pl-0 { - padding-left: 0 !important; -} - -.pl-1 { - padding-left: 5px; -} - .pl-2 { padding-left: 10px; } - -.pl-4 { - padding-left: 20px !important; -} - -.pl-5 { - padding-left: 25px !important; -} - .pl-6 { padding-left: 30px !important; } - -.pl-7 { - padding-left: 35px !important; -} - -.pl-30 { - padding-left: 150px !important; -} - -.w-md { - width: 900px; -} - .w-1 { width: 10% !important; } - -.w-2 { - width: 20% !important; -} - .w-3 { width: 30% !important; } @@ -5800,12 +4133,6 @@ _:-ms-fullscreen, .pl-6 { padding-left: 30px; } - -.py-1 { - padding-top: 5px; - padding-bottom: 5px; -} - .py-2 { padding-top: 10px; padding-bottom: 10px; @@ -5814,33 +4141,9 @@ _:-ms-fullscreen, .br-10 { border-radius: 10px !important; } - -.br-15 { - border-radius: 15px; -} - -.col-2 { - columns: 2; -} - .w-a { width: auto !important; } - -.txt-o { - text-overflow: ellipsis; -} - -.us-n { - -webkit--ms-user-select: none; - -webkit-user-select: none; - -khtml--ms-user-select: none; - -moz--ms-user-select: none; - -o--ms-user-select: none; - -ms-user-select: none; - user-select: none; -} - .svg-icn { fill: none; stroke: currentColor; @@ -5871,15 +4174,6 @@ _:-ms-fullscreen, font-weight: 100; font-family: 'Titillium Web', sans-serif; } - -.cooltip-link { - color: #2ad4ff; -} - -.cooltip-link:hover { - color: #00bdec; -} - .r-n-1 { right: -4px; } @@ -5921,8 +4215,6 @@ _:-ms-fullscreen, .webhook-table-scroll td, .webhook-table-scroll th { - //flex-basis: 100%; - //flex-grow : 2; display: block; padding: 1rem; text-align: left; @@ -5976,23 +4268,12 @@ _:-ms-fullscreen, .txt-right-imp { text-align: right !important; } - -.wc-btn { - border: 1px solid #b1a1a1; - width: 80px; - height: 24px; - border-radius: 5px; - text-align: center; - padding-top: 3px; -} - .tab-box { display: flex; width: 97%; border-bottom: 1px solid #0069ff; .tab-item { - // flex: 1; text-align: center; padding: 10px; cursor: pointer; @@ -6031,181 +4312,19 @@ _:-ms-fullscreen, justify-content: center; } -.dropdown-custom-width { - --input-width: 50% !important; -} - -.tagify--mix { - width: 330px; - border-radius: 7px; -} - -// Input Group -.btcd-input-group { - display: table; - border-collapse: collapse; - - div { - display: table-cell; - border: 1px solid #ddd; - vertical-align: middle; - /* needed for Safari */ - } - - .btcd-input-group-icon { - background: rgb(230, 230, 230); - color: #031b4e; - padding: 0 12px; - border: none !important; - } - - .btcd-input-group-icon:first-child { - border-radius: 8px 0 0 8px !important; - -webkit-border-radius: 8px 0 0 8px !important; - -moz-border-radius: 8px 0 0 8px !important; - -ms-border-radius: 8px 0 0 8px !important; - -o-border-radius: 8px 0 0 8px !important; - } - - .btcd-input-group-icon:last-child { - border-radius: 0 8px 8px 0 !important; - -webkit-border-radius: 0 8px 8px 0 !important; - -moz-border-radius: 0 8px 8px 0 !important; - -ms-border-radius: 0 8px 8px 0 !important; - -o-border-radius: 0 8px 8px 0 !important; - } - - .btcd-input-group-area { - width: 100%; - border: none !important; - } - - input { - border-radius: unset !important; - -webkit-border-radius: unset !important; - -moz-border-radius: unset !important; - -ms-border-radius: unset !important; - -o-border-radius: unset !important; - } -} - -.btcbi-field-map-button { - .icn-btn { - margin-right: 9%; - } -} - -.user-radio-input { - .auth-list { - display: flex; - flex-direction: column; - gap: 10px; - } - - .auth-item { - display: flex; - align-items: center; - padding: 10px; - border: 1px solid #ccc; - border-radius: 5px; - background: #f9f9f9; - position: relative; - } - - .auth-item.active { - border-color: purple; - background: #e0dff9; - } - - .auth-label { - display: flex; - align-items: center; - cursor: pointer; - width: 100%; - } - - .radio-input { - position: absolute; - opacity: 0; - cursor: pointer; - } - - .auth-info { - display: flex; - align-items: center; - gap: 10px; - } - - .user-avatar { - width: 40px; - height: 40px; - border-radius: 50%; - } - - .user-name { - font-weight: bold; - } - - .user-email { - font-size: 14px; - color: #666; - } - - .delete-button { - background: none; - border: none; - color: red; - font-size: 20px; - cursor: pointer; - margin-left: auto; - } - - .confirmation-popover { - position: absolute; - top: 50%; - left: calc(80% + 10px); - /* Show it to the right of the delete button */ - transform: translateY(-50%); - background-color: white; - border: 1px solid #ccc; - border-radius: 8px; - padding: 20px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); - z-index: 10; - } - - .confirmation-popover p { - margin: 0; - font-size: 1em; - color: #333; - } - - .confirm-button, - .cancel-button { - background-color: #f10000; - border: none; - border-radius: 4px; - padding: 5px 10px; - color: white; - cursor: pointer; - margin-right: 5px; - font-size: 0.9em; - transition: background-color 0.3s; - } - - .confirm-button:hover { - background-color: #ce0000; - } - - .cancel-button { - background-color: #6c757d; - } +.dropdown-custom-width { + --input-width: 50% !important; +} - .cancel-button:hover { - background-color: #5a6268; +.tagify--mix { + width: 330px; + border-radius: 7px; +} +.btcbi-field-map-button { + .icn-btn { + margin-right: 9%; } } - .changelog-toggle { .changelog-btn { border-radius: 12px; @@ -6214,17 +4333,6 @@ _:-ms-fullscreen, } .changelog { - // max-height: calc(100vh - 210px); - // overflow-y: auto; - - .changelog-notif { - background-color: #ff000012; - color: #d00c0cd1; - padding: 4px 8px; - text-align: center; - border-radius: 5px; - } - .whats-new { margin: 0px 0px 35px 0px; @@ -6237,7 +4345,6 @@ _:-ms-fullscreen, max-height: 30vh; overflow-y: auto; padding-top: 5px; - // min-height: 220px; & ul { margin-left: 35px; @@ -6363,7 +4470,6 @@ _:-ms-fullscreen, border: 1px solid #008228; border-radius: 8px; font-size: 14px; - // text-decoration: underline; margin-top: 16px; } @@ -6395,99 +4501,6 @@ _:-ms-fullscreen, } } -.tutoriallink-btn { - align-items: center; - background: transparent; - color: inherit; - cursor: pointer; - display: inline-flex; - font: inherit; - text-decoration: none; -} - -.tutoriallink-btn:focus-visible { - outline: 2px solid #2563eb; - outline-offset: 2px; -} - -.tutoriallink-ai-picker { - display: inline-block; - margin-top: 16px; - position: relative; - - .tutoriallink { - margin-top: 0; - } -} - -.ai-tool-dropdown { - background: #fff; - border: 1px solid #d9dce3; - border-radius: 10px; - box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); - padding: 10px; - position: absolute; - left: 0; - top: calc(100% + 8px); - width: min(92vw, 360px); - z-index: 20; -} - -.ai-tool-dropdown-title { - color: #1f2937; - font-size: 13px; - font-weight: 600; - margin: 0 0 8px; -} - -.ai-tool-grid { - display: grid; - gap: 8px; - grid-template-columns: repeat(2, minmax(0, 1fr)); -} - -.ai-tool-option { - align-items: center; - background: #f8fafc; - border: 1px solid #e5e7eb; - border-radius: 8px; - color: #111827; - display: inline-flex; - gap: 8px; - min-height: 36px; - padding: 7px 8px; - text-decoration: none; - transition: - background-color 0.2s ease, - border-color 0.2s ease; -} - -.ai-tool-option:hover { - background: #f3f4f6; - border-color: #cbd5e1; - text-decoration: none !important; -} - -.ai-tool-icon { - align-items: center; - display: inline-flex; - flex-shrink: 0; - height: 24px; - justify-content: center; - width: 24px; -} - -.ai-tool-logo { - display: block; - height: 24px; - width: 24px; -} - -.ai-tool-name { - font-size: 13px; - font-weight: 600; -} - @media only screen and (max-width: 767px) { .tutoriallink-ai-picker { display: block; @@ -6504,6 +4517,8 @@ _:-ms-fullscreen, } .tutoriallink-btn { + @include menu-trigger-press; + align-items: center; background: transparent; color: inherit; @@ -6529,18 +4544,22 @@ _:-ms-fullscreen, } .ai-tool-dropdown { + @include menu-book-closed(min(92vw, 360px), left); + background: #fff; border: 1px solid #d9dce3; - border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); padding: 10px; position: absolute; left: 0; top: calc(100% + 8px); - width: min(92vw, 360px); z-index: 20; } +.ai-tool-dropdown-open { + @include menu-book-open; +} + .ai-tool-dropdown-title { color: #1f2937; font-size: 13px; @@ -6644,7 +4663,6 @@ _:-ms-fullscreen, .field { background-color: #f0f0f0; - //background-color: lightgray; border-radius: 12px 0px 12px; padding: 8px 12px; border: none; @@ -6669,21 +4687,6 @@ _:-ms-fullscreen, } } } - -/* Tag Management Styles */ -.tag-filter-container { - padding: 16px; - background: linear-gradient(135deg, #f6f9fc 0%, #ffffff 100%); - border-radius: 12px; - margin-bottom: 16px; - border: 2px solid #e2e8f0; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); -} - -.tag-filter-section { - margin-bottom: 12px; -} - .tag-filter-inline { display: flex; align-items: center; @@ -6874,23 +4877,6 @@ _:-ms-fullscreen, background-color: #f6f8fb; } } - -.tag-filter-count { - margin: 6px 0 0 0; - font-size: 12px; - color: #64748b; - font-weight: 600; - background-color: #f1f5f9; - padding: 6px 12px; - border-radius: 8px; - display: inline-block; - - .highlight { - color: #6f42c1; - font-weight: 700; - } -} - @media only screen and (max-width: 767px) { .tag-filter-title { font-size: 14px; @@ -7150,7 +5136,6 @@ _:-ms-fullscreen, } .msl-options { - // border: 1px solid #d7dce7; border-radius: 12px; box-shadow: 0 14px 26px rgba(21, 29, 45, 0.14); margin-top: 7px; @@ -7303,100 +5288,13 @@ _:-ms-fullscreen, width: min(94vw, 410px); } } - -/* Tag Assignment Modal */ -.tag-assign-modal-content { - background-color: white; - padding: 28px; - border-radius: 14px; - min-width: 400px; - max-width: 480px; - box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3); - animation: slideIn 0.3s ease-out; -} - -.tag-assign-item { - display: flex; - align-items: center; - padding: 10px 14px; - border: 2px solid #e2e8f0; - border-radius: 10px; - cursor: pointer; - background-color: white; - transition: all 0.2s; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); - - &.assigned { - border-color: #6f42c1; - background-color: rgba(111, 66, 193, 0.1); - box-shadow: 0 3px 8px rgba(111, 66, 193, 0.3); - } - - &:hover:not(.assigned) { - border-color: rgba(111, 66, 193, 0.6); - background-color: rgba(111, 66, 193, 0.05); - } - - input[type='checkbox'] { - margin-right: 12px; - width: 16px; - height: 16px; - cursor: pointer; - } -} - -.tag-assign-badge { - padding: 4px 12px; - border-radius: 16px; - background-color: rgba(111, 66, 193, 0.2); - color: #6f42c1; - border: 2px solid #6f42c1; - font-size: 12px; - font-weight: 600; -} - -.tag-assign-list { - display: flex; - flex-direction: column; - gap: 8px; -} - -.tag-assign-empty { - color: #a0aec0; - text-align: center; - padding: 16px; - background-color: #f7fafc; - border-radius: 8px; - font-size: 13px; -} - -.tag-modal-btn-done { - padding: 8px 24px; - background-color: #6f42c1; - color: white; - border: none; - border-radius: 8px; - cursor: pointer; - font-weight: 600; - font-size: 13px; - transition: all 0.2s; - box-shadow: 0 3px 8px rgba(111, 66, 193, 0.3); - - &:hover { - background-color: #5a32a3; - transform: translateY(-1px); - } -} - /* Table Tag Badge */ .table-tag-badge { padding: 4px 8px 4px 10px; border-radius: 999px; font-size: 13px; - // background-color: #f3e8ff; background-color: #eef1f4; color: #2f3340; - // border: 1px solid #d6dbe3; white-space: nowrap; font-weight: 400; line-height: 1; @@ -7414,10 +5312,8 @@ _:-ms-fullscreen, .table-tag-badge-label { max-width: 84px; - // overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - // color: #5000a5; font-weight: 500; } @@ -7608,6 +5504,8 @@ _:-ms-fullscreen, } .btcd-bulk-menu-btn { + @include menu-trigger-press; + width: 34px; height: 34px; min-width: 34px; @@ -7620,19 +5518,23 @@ _:-ms-fullscreen, } .btcd-bulk-menu-list { + @include menu-book-closed(220px); + position: absolute; top: calc(100% + 6px); right: 0; left: auto; - min-width: 220px; padding: 6px; border: 1px solid #d8ddea; - border-radius: 10px; background: #fff; box-shadow: 0 8px 22px rgba(27, 33, 50, 0.12); z-index: 40; } +.btcd-bulk-menu-list-open { + @include menu-book-open; +} + .btcd-bulk-menu-list button { width: 100%; border: 0; @@ -7692,10 +5594,17 @@ _:-ms-fullscreen, display: inline-flex; align-items: center; gap: 8px; + // This button already owns a transition list, so the press has to join it — + // a second `transition` declaration would drop the colour fades. transition: color 0.2s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.2s cubic-bezier(0.23, 1, 0.32, 1), - background 0.2s cubic-bezier(0.23, 1, 0.32, 1); + background 0.2s cubic-bezier(0.23, 1, 0.32, 1), + transform 140ms ease-out; + + &:active { + transform: scale(0.94); + } } .btcd-columns-btn .btcd-icn { @@ -7709,20 +5618,18 @@ _:-ms-fullscreen, } .btcd-table-top .btcd-columns-menu { + --menu-width: 214px; + top: calc(100% + 8px); right: 0; left: auto; - height: auto; - min-width: 214px; max-height: none; padding: 6px 4px 6px 6px; border: 1px solid #d8ddea; - border-radius: 10px; background: #fff; box-shadow: 0 8px 22px rgba(27, 33, 50, 0.12); -webkit-backdrop-filter: none; backdrop-filter: none; - overflow: visible; z-index: 1200; } @@ -7803,7 +5710,7 @@ _:-ms-fullscreen, .btcd-scroll { border: 1px solid #d9deea; border-radius: 8px; - background: #fff; + background: $pg-canvas; overflow: hidden; -webkit-border-radius: 8px; -moz-border-radius: 8px; @@ -7837,12 +5744,12 @@ _:-ms-fullscreen, .f-table .tbody .tr { height: 56px; - background: #fff; + background: $pg-canvas; box-shadow: none; } .f-table .tbody .tr:hover { - background: #fbfcff; + background: #edf0f8; box-shadow: none; z-index: 9; } @@ -7855,7 +5762,9 @@ _:-ms-fullscreen, font-weight: 400; color: #303b55; border-bottom: 1px solid #e7ebf3; - background: #fff; + // Transparent so the row's hover tint shows across every cell, not just the + // one under the cursor. + background: transparent; } .f-table .tbody .tr .td:hover { @@ -7928,20 +5837,6 @@ _:-ms-fullscreen, align-items: center; gap: 8px; } - - .connections-count-txt { - display: inline-flex; - align-items: center; - font-size: 12px; - font-weight: 600; - color: #5f6d8a; - line-height: 1; - border: 1px solid #dce4f3; - border-radius: 999px; - background: #f3f6fd; - padding: 7px 10px; - } - .connections-table-filters { align-items: center; gap: 8px; @@ -8006,27 +5901,6 @@ _:-ms-fullscreen, white-space: nowrap; } } - - .connections-rename-btn { - width: 24px; - height: 24px; - min-width: 24px; - min-height: 24px; - border-radius: 7px; - background: transparent; - color: #9246f7; - margin: 0; - - &:hover { - background: #efe4ff; - color: #6f26dc; - } - - &:active { - background: #e5d6ff; - } - } - .connections-edit-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; @@ -8152,11 +6026,9 @@ $pg-muted: #5f6d8a; $pg-bdr: #e4e9f4; $pg-bdr-strong: #d3dbec; $pg-surface: #ffffff; -$pg-canvas: #f8f9fd; $pg-accent: $purple; $pg-accent-soft: #f4ecff; $pg-danger-ink: #b32318; -$pg-danger-soft: #fdecea; $pg-danger-bdr: #eec3bd; $pg-ease: cubic-bezier(0.23, 1, 0.32, 1); @@ -8862,4 +6734,51 @@ $pg-ease: cubic-bezier(0.23, 1, 0.32, 1); .btcd-skel { animation: none; } + + .connection-loading-txt { + animation: none; + opacity: 1; + } +} + +/* ---------- connection select loading ---------- */ + +@keyframes btcd-conn-loading-in { + to { + opacity: 1; + } +} + +.connection-select-wrap { + .connection-loading-txt { + font-size: 12px; + font-weight: 500; + color: #5f6d8a; + line-height: 1; + opacity: 0; + animation: btcd-conn-loading-in 160ms cubic-bezier(0.23, 1, 0.32, 1) 180ms forwards; + } +} + +/* ---------- popover menus: reduced motion ---------- */ + +// Keeps the fade — it still explains that a panel opened — and drops the +// movement. Last in the file so it outranks each menu's own transform. +@media (prefers-reduced-motion: reduce) { + // The sweep is the whole effect here — there is no gentler version of it, so + // the panels just appear. + .btcd-menu-li, + .btcd-menu-a, + .btcd-bulk-menu-list, + .btcd-bulk-menu-list-open, + .ai-tool-dropdown, + .ai-tool-dropdown-open { + transition: visibility 0s; + } + + .btcd-bulk-menu-btn:active, + .btcd-columns-btn:active, + .tutoriallink-btn:active { + transform: none; + } } diff --git a/readme.txt b/readme.txt index 8826435de..81cb91c37 100644 --- a/readme.txt +++ b/readme.txt @@ -4,8 +4,9 @@ Tags: automation, automator, google sheets integration, form integration, WooCom Requires at least: 5.1 Tested up to: 7.0 Requires PHP: 7.4 -Stable tag: 2.10.0 -License: GPLv2 or later +Stable tag: 2.10.1 +License: GPL-2.0-or-later +License URI: https://www.gnu.org/licenses/gpl-2.0.html Contact Form, Google Sheet, MailChimp, Brevo, Webhook, Zoho CRM Automation and Integration plugin that Connect 360+ platforms @@ -468,6 +469,40 @@ Bit Integrations follows WordPress coding standards and best practices to ensure == Changelog == += 2.10.1 = +_Release Date - 30th July 2026_ + +- **New Triggers** + - Bit CRM: 66 new events added. + - Fluent Player: 12 new events added (Pro). + +- **New Actions** + - Bit CRM: 50 new events added. + - Fluent Player: 26 new events added (Pro). + +- **New Feature** + - Webhook (Action): Dynamic URL path variables added to outgoing webhooks, mappable from trigger data. + - Webhook (Action): Smart codes are now available in query parameters, request headers and path variables (Pro). + - Connections: An action's connection can now be switched from its info page. + +- **Security Fixes** + - Custom Action: Closed an administrator gate bypass and confined the custom function file to the plugin's custom-function directory. + - Timeline: Log re-execution now applies the same administrator check as custom action save, update and delete. + - AJAX Routes: Integration routes now require a write capability instead of view-only access. + - Mail: Recipient addresses and headers are validated in all cases, and header display names are sanitized. + - Admin Menu: Submenu is registered only when the capability check passes. + +- **Bug Fixes** + - Connections: Fixed credentials not resolving for renamed integrations. + - Integration Info: Fixed legacy actions rendering a blank info page. + - Webhook (Action): Run status is now judged by the response HTTP status code, and path variables sync even when their tab is never opened. + - ACF: Fixed field reading when the meta value is missing (Pro). + - WP Post: Fixed trashed and internal posts firing the post created/inserted triggers (Pro). + +- **Note: "Legacy" integrations** + - Since 2.10.0, credentials live in reusable Connections. Integrations you set up before that still keep their own credentials, so we call them legacy - their info page shows a short explainer instead of a connection to view or switch. + - They keep working exactly as before, and credentials stay safe on your server (never sent to your browser, which is why the fields look empty). To move one over, just open its settings and authorize the app once. + = 2.10.0 = _Release Date - 25th July 2026_ diff --git a/views/emails/integration-failure-notification.php b/views/emails/integration-failure-notification.php index 319c3a035..af202607a 100644 --- a/views/emails/integration-failure-notification.php +++ b/views/emails/integration-failure-notification.php @@ -18,6 +18,11 @@ exit; } +// Template locals, not true globals - the file has no function scope, so PHPCS +// reads them as global. They already carry the plugin slug as their prefix; +// Plugin Check infers prefixes from hook names rather than the slug, and this +// plugin fires third-party hooks, so `bit_integrations` never makes its list. +// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound $bit_integrations_title = esc_html__('Integration Failure Alert', 'bit-integrations'); $bit_integrations_greeting = sprintf( // translators: %s: Placeholder value @@ -39,6 +44,7 @@ esc_html__('You received this email because failure notifications are enabled in %s. You can disable these notifications in the plugin settings.', 'bit-integrations'), 'Bit Integrations' ); +// phpcs:enable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound ?>