/*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ .react-rnd-wrapper { transform: none !important; z-index: var(--zindex-draggable-modal); transition: opacity 0.25s cubic-bezier(0.25, 0.1, 0.1, 0.25); cursor: default !important; color: var(--text-general); background: var(--general-main-2); border-radius: 8px; box-shadow: 0px 0px 8px 4px var(--shadow-menu); } .react-rnd-wrapper--enter, .react-rnd-wrapper--exit { opacity: 0; } .react-rnd-wrapper--enter .dc-dialog__dialog, .react-rnd-wrapper--exit .dc-dialog__dialog { transform: translate3d(0, 50px, 0); opacity: 0; } .react-rnd-wrapper--enter-done { opacity: 1; } .react-rnd-wrapper--enter-done .dc-dialog__dialog { transform: translate3d(0, 0, 0); opacity: 1; } .react-rnd-wrapper-header { cursor: move; display: flex; justify-content: space-between; padding: 16px; } .react-rnd-wrapper-header__title { font-size: 16px; font-weight: 700; } .react-rnd-wrapper-header__close { cursor: pointer; } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ .notify__item-button { margin-top: 8px; height: 2.8rem !important; margin-left: 100%; transform: translateX(-100%); } .notify__item-button .btn__text { font-size: var(--text-size-xxs); } .notify__item-container { display: flex; align-items: center; } .notify__item-message { margin-left: 8px; font-size: var(--text-size-xxs); line-height: 1.2; } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ .transaction-details-modal-desktop { color: var(--text-general); } .transaction-details-modal-desktop .dc-dialog__dialog { padding: 0px; width: 80vw; max-width: inherit; max-height: inherit; justify-content: start; } .transaction-details-modal-desktop .dc-dialog__header-wrapper { padding-inline: 18px; margin: 1.5rem 0; } .transaction-details-modal-desktop .dc-dialog__content { max-width: inherit; margin-bottom: 0; } .transaction-details-modal-desktop__table-container { display: flex; flex-direction: column; margin-bottom: 8px; } .transaction-details-modal-desktop__table-container__top-table { overflow: auto; height: inherit; } .transaction-details-modal-desktop__table-container__bottom-table { overflow: unset; } .transaction-details-modal-desktop__table-row { display: flex; align-items: center; font-size: 12px; border-bottom: 1.5px solid var(--general-section-2); } .transaction-details-modal-desktop__table-header { position: sticky; top: 0; background-color: var(--general-section-2); font-size: 14px; font-weight: 700; } .transaction-details-modal-desktop__table-header .transaction-details-modal-desktop__table-cell { margin-left: -2px; } .transaction-details-modal-desktop__table-cell { flex: 1; overflow: auto; padding: 16px 18px; white-space: normal; word-wrap: break-word; } .transaction-details-modal-desktop__table-cell--grow-big { flex-grow: 2.5; } .transaction-details-modal-desktop__table-cell--grow-mid { flex-grow: 1.5; } .transaction-details-modal-desktop__table-cell .transactions__loader-text { width: 100%; } .transaction-details-modal-desktop__loss { color: var(--text-loss-danger); } .transaction-details-modal-desktop__profit--win { color: var(--text-profit-success); } .transaction-details-modal-desktop__profit--win:before { content: "+"; } .transaction-details-modal-desktop__profit--loss { color: var(--text-loss-danger); } .transaction-details-modal-desktop__profit--loss:before { content: "-"; } .transaction-details-modal-desktop__icon-wrapper { display: flex; align-items: baseline; } .transaction-details-modal-desktop__divider { width: 100%; padding: 4px 16px; } .transaction-details-tables { height: calc(100% - 48px); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ .download__container { display: flex; padding: 12px; padding-left: 16px; border: solid 1px var(--general-section-1); } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** * @define journal */ .journal-empty { height: 100%; display: flex; flex-direction: column; justify-content: center; } .journal-empty__header { padding: 0.8rem; } .journal-empty__icon { align-self: center; } .journal-empty__message { margin: 0 auto; } .journal-empty__message .dc-text { line-height: var(--text-lh-xxl); } .journal-empty__list { list-style-type: disc; margin-left: 20px; line-height: var(--text-lh-xl); } .journal-empty__list li::marker { color: var(--text-less-prominent); } .journal__item { padding: 16px; } .journal__item-list { height: calc(100% - 7.2rem); } .journal__item-content > * { width: 100%; } .journal__data-list .ReactVirtualized__Grid__innerScrollContainer > div:nth-child(even) { background: var(--general-section-2); } .journal-tools__container { display: flex; justify-content: space-between; padding: 12px; padding-left: 16px; border: solid 1px var(--general-section-1); } .journal-tools__container-filter { display: flex; align-items: center; justify-content: flex-end; cursor: pointer; flex: 1; } .journal-tools__container-filter--label { margin-right: 0.8rem; } .journal__text { font-size: var(--text-size-xxs); line-height: 1.5; display: inline; color: var(--text-general); } .journal__text-time, .journal__text-date { display: inline; } .journal__text-datetime { color: var(--text-less-prominent); font-size: var(--text-size--xxxs); margin-top: 6px; } .journal__text--error { color: var(--status-danger); } .journal__text--warn { color: var(--status-warning); } .journal__text--info { color: var(--status-info); } .journal__text--success { color: var(--status-success); } .journal__text--bold { font-weight: bold; } .journal__loader, .journal__loader--mobile { width: 350px; height: 9.2rem; } .journal__loader--mobile { width: 100vw; } .filter-dialog { position: fixed; display: grid; grid-gap: 1.6rem; background: var(--general-main-2); border-radius: 4px; box-shadow: 0 4px 16px 0 var(--shadow-menu); transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.25s linear; padding: 1.6rem 3.6rem 1.6rem 0.8rem; z-index: 99; right: 16px; } .filter-dialog--enter-done { opacity: 1; transform: translate3d(0, 0, 0); } .filter-dialog--enter, .filter-dialog--exit { opacity: 0; transform: translate3d(0, -20px, 0); } .filter-dialog__input .input-wrapper__input { border: 1px solid var(--border-normal); } .filter-dialog__button { margin-top: 0.8rem; } .filter-dialog__button .dc-btn { width: 100%; } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ .summary { display: flex; align-items: center; flex-direction: column; background-color: var(--general-section-2); } @media (min-width: 1024px) { .summary { height: inherit; } } .summary--loading { width: 100%; } .summary__tiles { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 24px 0; } .summary__tile { display: flex; flex-direction: column; justify-content: center; border-radius: 4px; width: 32%; max-width: 32%; text-align: center; background-color: var(--general-section-1); padding: 8px 8px 0; margin-bottom: 2%; height: 56px; } .summary__tile-title { height: 18px; margin-bottom: 4px; font-size: 1.2rem; color: var(--text-general); font-weight: 700; text-transform: none; text-align: center; line-height: 1.25; } .summary__tile-content { height: 18px; margin-bottom: 4px; font-size: 1.2rem; color: var(--text-general); font-weight: 400; text-transform: none; text-align: center; line-height: 1.25; } .summary__amount { font-size: 1.2rem; color: var(--text-general); font-weight: 400; text-transform: none; text-align: center; line-height: 1.25; } .summary__amount--positive { font-weight: bold; color: var(--text-profit-success); } .summary__amount--negative { font-weight: bold; color: var(--text-loss-danger); } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ .db-summary-card { box-sizing: border-box; display: flex; flex-direction: column; position: relative; } @media (min-width: 1024px) { .db-summary-card { width: 100%; } } .db-summary-card--inactive { color: var(--text-general); font-size: 14px; justify-content: center; margin: auto; text-align: center; line-height: 2rem; padding: 0 3rem; } .db-summary-card--inactive .dc-text { text-align: center; } .db-summary-card--is-loading { background-color: inherit; border: 1px solid var(--general-main-1); } .db-summary-card--completed { border: 1px solid var(--general-main-1); } .db-summary-card--completed:hover { border: 1px solid var(--border-disabled); } .db-summary-card .dc-contract-card { padding: 1.6rem 1.6rem 0.8rem; } .db-summary-card .dc-contract-card__grid-underlying-trade { grid-template-columns: 1.5fr 1fr; } .db-summary-card .dc-contract-card-items-wrapper { grid-template-columns: 1.5fr 1fr; margin-top: 0.8rem; } .db-summary-card--mobile .dc-contract-card { padding: 1.5rem 3.4rem; } .db-summary-card--mobile .dc-contract-card__grid-underlying-trade--mobile { grid-template-columns: 1fr 1.25fr; } .db-summary-card--mobile .dc-contract-card-items-wrapper { grid-template-columns: 1fr 1fr; } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ @keyframes animate-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } .db-contract-card__result { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 4px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-sizing: border-box; z-index: 2; background-color: var(--overlay-inside-dialog); animation: animate-fade-in 0.3s; display: flex; align-items: center; justify-content: center; } .db-contract-card__result:hover { background: 0; /* contract-result-caption selector */ } .db-contract-card__result:hover-caption { opacity: 0; } .db-contract-card__result-caption { display: flex; align-items: center; transition: opacity 0.25s linear; } .db-contract-card__result-icon { margin-left: 10px; } .db-contract-card__result--won { background-image: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(0, 148, 117, 0.16)); /* TODO: Update when gradients are added. */ /* contract-result-caption selector */ } > .db-contract-card__result--won-caption { color: var(--text-profit-success); } .db-contract-card__result--lost { background-image: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(227, 28, 75, 0.16)); /* TODO: Update when gradients are added. */ /* contract-result-caption selector */ } > .db-contract-card__result--lost-caption { color: var(--text-loss-danger); } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ @keyframes animate-progress { 0% { width: 0%; } 100% { width: 51%; } } @keyframes animate-progress-complete { 0% { width: 50%; } 100% { width: 100%; } } @keyframes animate-circle { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(0); } } @keyframes animate-circle-appear { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes animate-circle-pop { 0% { transform: scale(0); } 50% { transform: scale(1); } 100% { transform: scale(0); } } .animation { /* $animation: &; */ } .animation__wrapper { display: flex; align-items: center; height: 40px; } .animation__overlay { border-top-left-radius: 0; border-bottom-right-radius: 4px; } .animation { /* TODO: [fix-dc-bundle] Fix import issue with Deriv Component stylesheets (app should take precedence, and not repeat) */ } .animation__button { width: fit-content; height: 100% !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } .animation__container { height: 100%; padding: 5px 12px; display: flex; flex-direction: column; justify-content: space-evenly; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border: solid 1px var(--border-normal); position: relative; } .animation__text { color: var(--text-general); font-size: 12px; font-weight: bold; text-align: center; margin-bottom: 5px; line-height: 18px; } .animation__progress { display: flex; justify-content: space-between; position: relative; height: 6px; } .animation__progress .circular-wrapper { width: 2px; height: 2px; align-self: center; display: flex; } .animation__progress .circular-wrapper .static-circle { width: 2px; height: 2px; background-color: #000000; border-radius: 100%; align-self: center; z-index: 1; } .animation__progress .circular-wrapper .dynamic-circle { border-radius: 100%; height: 10px; width: 10px; margin-left: -4px; margin-top: -4px; opacity: 0.32; position: absolute; } .animation__progress .circular-wrapper:nth-child(2) { margin-left: 3px; } .animation__progress .circular-wrapper:last-child { margin-right: 3px; } .animation__progress-line { background-color: var(--border-normal); height: 100%; width: 100%; border-radius: 4px; position: absolute; } .animation__progress-bar { background-color: var(--status-success); border-radius: 4px; width: 0; height: 100%; } .animation__progress-3 { animation: animate-progress 0.5s 1; animation-fill-mode: forwards; } .animation__progress-4 { width: 51%; border-radius: 5px 0 0 5px; } .animation__progress-5 { animation: animate-progress-complete 0.5s 1; animation-fill-mode: forwards; } .animation--running { /* animation__progress selector */ } .animation--running__progress .circular-wrapper.completed .static-circle, .animation--running__progress .circular-wrapper.active .static-circle { background-color: #3d9494; } .animation--running__progress .circular-wrapper.active .dynamic-circle { animation: animate-circle 0.8s infinite; animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); background-color: var(--status-success); /* transform: translate(-50%, -50%); */ /* z-index: 1; */ } .animation--running__progress .circular-wrapper .static-circle { animation: animate-circle-appear 1s; background-color: #ff444f; } .animation--running__progress .circular-wrapper .dynamic-circle { animation: animate-circle 1s; background-color: #ff444f; transform: scale(0); } @media (min-width: 320px) and (max-width: 767px) { .dc-modal__container_animation__modal { width: 31.2rem !important; } } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ .transactions { flex-direction: column; } .transactions .download__container__view-detail-button { margin-left: 12px; } .transactions .transaction-details__button-container { display: flex; align-items: center; } .transactions-empty { height: 100%; display: flex; flex-direction: column; justify-content: center; } .transactions-empty-box { display: grid; flex: 1; height: 100%; } .transactions-empty__header { padding: 0.8rem; } .transactions-empty__icon-box { display: flex; justify-content: center; margin-top: 0.3rem; } .transactions-empty__icon { align-self: center; } .transactions-empty__message { margin: 0 auto; margin-bottom: 2rem; } .transactions-empty__message .dc-text { line-height: var(--text-lh-xxl); } .transactions-empty__list { list-style-type: disc; margin-left: 2rem; font-size: var(--text-size-xxs); line-height: var(--text-lh-xl); color: var(--text-less-prominent); } .transactions__header { border-bottom: 1px solid var(--general-section-1); width: 100%; display: grid; font-size: 1.2rem; color: var(--text-general); font-weight: 700; text-transform: none; text-align: left; line-height: 1.25; grid-template-columns: 0.8fr 1fr 1.1fr; grid-template-areas: "type spot profit"; padding: 1.2rem 1.6rem; /* Equal l+r with transaction__item padding. */ height: 5rem; align-items: center; /* Manual header grid items */ } .transactions__header-type { grid-column: type; } .transactions__header-spot { grid-column: spot; text-align: start; } .transactions__header-profit { grid-column: profit; text-align: end; } .transactions__content { height: calc(100% - 11rem); } .transactions__content--mobile { height: calc(100% - 4.2rem); } .transactions__scrollbar { height: 100%; } .transactions__scrollbar .dc-themed-scrollbars { height: 100%; width: 100%; } .transactions__item { display: grid; font-size: 12px; grid-row-gap: 3px; grid-template-columns: 0.8fr 1fr 1.1fr; grid-template-rows: auto auto; grid-template-areas: "trade-type entry-spot stake" "trade-type exit-spot profit"; padding: 0.8rem 0; } .transactions__item-wrapper { height: 5.2rem; padding: 0 1.6rem; cursor: pointer; position: relative; border-top: 1px solid var(--general-section-1); } .transactions__item-wrapper:hover { background-color: var(--state-hover); } .transactions { /* Manual grid item definitions */ } .transactions__trade-type { grid-column: trade-type; grid-row: trade-type; justify-content: flex-start; } .transactions__entry-spot { grid-column: entry-spot; grid-row: entry-spot; justify-content: flex-start; } .transactions__exit-spot { grid-column: exit-spot; grid-row: exit-spot; justify-content: flex-start; } .transactions__stake { grid-column: stake; grid-row: stake; justify-content: flex-end; } .transactions__profit { grid-column: profit; grid-row: profit; justify-content: flex-end; } .transactions__profit--win { color: var(--text-profit-success); } .transactions__profit--win:before { content: "+"; } .transactions__profit--loss { color: var(--text-loss-danger); } .transactions__profit--loss:before { content: "-"; } .transactions__divider { border-top: 1px solid var(--general-section-1); padding: 8px 16px; } .transactions__divider-line { height: 4px; background-color: var(--general-section-1); } .transactions__item-wrapper + .transactions__divider { border-top: none; } .transactions__divider + .transactions__item-wrapper { border-top: none; } .transactions__loader-text { width: 7.2rem; height: 1rem; } .transactions__loader-container { display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; margin-right: 0.4rem; } .transactions__loader-icon { width: 2.4rem; height: 2.4rem; } .transactions__icon { margin-right: 0.8rem; max-height: 1.6rem; max-width: 1.6rem; min-height: 1.6rem; min-width: 1.6rem; } .transactions__cell { display: flex; align-items: center; color: var(--text-general); } .transactions { /* Duplicate &__profit selector removed - already defined with grid items above */ } .transactions__virtual_profit--win { color: var(--text-profit-success); } .transactions__virtual_profit--loss { color: var(--text-loss-danger); } .transactions__info-header { font-weight: bold; } .transactions__popover-title { font-size: 1rem; color: var(--text-general); font-weight: 400; text-transform: none; text-align: left; line-height: 1.4; } .transactions__popover-item { font-size: 1.2rem; color: var(--text-general); font-weight: 700; text-transform: none; text-align: left; line-height: 1.25; } .transactions__popover-item:not(:last-of-type) { margin-bottom: 0.8rem; } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ .transaction-details-modal-mobile { color: var(--text-general); } .transaction-details-modal-mobile .dc-mobile-full-page-modal { background: var(--general-main-2); } .transaction-details-modal-mobile .dc-mobile-full-page-modal__body { overflow-y: scroll; height: calc(100vh - 30rem); } .transaction-details-modal-mobile .dc-page-overlay__header-wrapper { padding: 0px 16px; } .transaction-details-modal-mobile .dc-page-overlay__header-title { text-align: left; } .transaction-details-modal-mobile__wrapper { display: flex; flex-wrap: wrap; width: 100%; align-content: flex-start; height: fit-content; } .transaction-details-modal-mobile__icon-wrapper { display: flex; align-items: center; } .transaction-details-modal-mobile__icon-wrapper * { margin-right: 2px; } .transaction-details-modal-mobile__card { display: flex; background: var(--general-section-2); width: 100%; flex-direction: column; padding: 8px 16px; margin: 8px 16px; border-radius: 8px; height: fit-content; } .transaction-details-modal-mobile__card__row { display: flex; justify-content: space-between; padding: 8px 0px; } .transaction-details-modal-mobile__card__column { width: 100%; } .transaction-details-modal-mobile__card__profit--win { color: var(--text-profit-success); } .transaction-details-modal-mobile__card__profit--win:before { content: "+"; } .transaction-details-modal-mobile__card__profit--loss { color: var(--text-loss-danger); } .transaction-details-modal-mobile__card__profit--loss:before { content: "-"; } .transaction-details-modal-mobile__small-title { font-size: 12px; font-weight: 700; } .transaction-details-modal-mobile__large-title { font-size: 14px; font-weight: 700; } .transaction-details-modal-mobile__label { font-size: 14px; line-height: 24px; } .transaction-details-modal-mobile__right-align { text-align: right; } .transaction-details-modal-mobile__divider { padding: 8px 16px; width: 100%; } .transaction-details-modal-mobile__card__footer { position: fixed; } .transaction-details-modal-mobile__card__footer .run-panel__stat { margin: 0; position: fixed; bottom: 0; width: 100%; } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ .bot__loading { position: fixed; z-index: 99999; top: 0; bottom: 0; background-color: var(--overlay-outside-dialog); pointer-events: none; } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ .notifications-container { position: absolute; top: 6.5rem; left: 0; width: calc(100vw - 1.6rem); height: calc(100% - 6.5rem); } .notifications-container .notification-messages { transition: transform 0.3s ease, opacity 0.25s linear; } .notifications-container__dashboard .notification-messages { transform: translate3d(-42.7rem, 0, 0); } .notifications-container--panel-open .notification-messages { transform: translate3d(-36.5rem, 0, 0); } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ #modal_root .load-strategy__recent { display: flex; gap: 1.6rem; } #modal_root .load-strategy__recent__files { width: 35%; overflow: auto; height: 100%; margin: 0.2rem 0; } #modal_root .load-strategy__recent__empty { display: flex; align-items: center; justify-content: center; align-items: center; flex-direction: column; } #modal_root .load-strategy__recent__empty-icon { margin-bottom: 1.6rem; } #modal_root .load-strategy__recent__empty-title { margin-bottom: 0.8rem; font-size: var(--text-size-s); font-weight: bold; line-height: 2.4rem; } #modal_root .load-strategy__recent__empty-description { margin-bottom: 1.6rem; font-size: var(--text-size-xs); line-height: 2rem; } #modal_root .load-strategy__recent__empty-expand { margin-bottom: 0.8rem; color: var(--brand-red-coral); font-size: var(--text-size-xs); font-weight: bold; cursor: pointer; } #modal_root .load-strategy__recent__empty-expand:hover { text-decoration: underline; } #modal_root .load-strategy__recent__empty-explanation { font-size: var(--text-size-xxs); text-align: left; opacity: 0; } #modal_root .load-strategy__recent__empty-explanation-list { margin-top: 0.8rem; } #modal_root .load-strategy__recent__empty-explanation--show { opacity: 1; width: fit-content; } #modal_root .load-strategy__recent-item { grid-template-columns: 1fr 0.6fr; position: relative; display: grid; grid-template-areas: "text location"; padding: 1rem 0.8rem; align-items: center; text-align: center; } #modal_root .load-strategy__recent-item:hover { cursor: pointer; } #modal_root .load-strategy__recent-item:not(:last-child) { border-bottom: solid 1px var(--border-divider); } #modal_root .load-strategy__recent-item--selected { background-color: var(--general-section-2); } #modal_root .load-strategy__recent-item-text { height: unset; flex-direction: column; text-align: left; padding-right: 0.8rem; } #modal_root .load-strategy__recent-item-title { font-size: var(--text-size-xs); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } #modal_root .load-strategy__recent-item-time { font-size: var(--text-size-xxs); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } #modal_root .load-strategy__recent-item-saved { margin-left: 1rem; font-size: var(--text-size-xs); line-height: 1.43; word-break: break-word; } #modal_root .load-strategy__recent-item-location { display: flex; align-items: center; justify-content: flex-start; width: 100%; word-break: break-word; color: var(--text-general); height: 100%; } #modal_root .load-strategy__recent__preview { width: 65%; flex-basis: 65%; display: flex; flex-direction: column; } #modal_root .load-strategy__recent__preview .load-strategy__preview-workspace { height: calc(100% - 5.2rem); min-height: unset; margin: 0; } #modal_root .load-strategy__recent__preview-title { margin: 1.5rem 0; margin-left: 0; } #modal_root .load-strategy__recent__preview__title { margin-left: 0; } #modal_root .load-strategy__container--has-footer { height: calc(80vh - 21rem); margin-top: -1rem; } #modal_root .load-strategy__title { margin: 1.5rem; } #modal_root .load-strategy__preview-workspace { min-height: unset; height: unset; margin: 0; } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ .dbot-accordion { width: 100%; } .dbot-accordion__navbar { display: flex; width: 100%; padding: 0.6rem 1.6rem; cursor: pointer; background-color: transparent; border: none; outline: none; padding-left: 0; } @media (min-width: 320px) and (max-width: 767px) { .dbot-accordion__navbar { padding: 0.6rem 1rem; } } .dbot-accordion__navbar { border-bottom: 1px solid var(--general-section-1); } .dbot-accordion__navbar--no-event { pointer-events: none; border-bottom: none; padding: 0.6rem 0; } @media (min-width: 320px) and (max-width: 767px) { .dbot-accordion__navbar--no-event { padding: 0.6rem 0 0.6rem 1rem; } } .dbot-accordion__header { width: 90%; text-align: left; padding-left: 1rem; } @media (min-width: 320px) and (max-width: 767px) { .dbot-accordion__header { width: 100%; padding-left: 0; } } .dbot-accordion__header span { color: var(--text-prominent); } .dbot-accordion__icon { width: 10%; color: #ffffff; text-align: end; } .dbot-accordion__content { overflow: hidden; max-height: 0; opacity: 0; color: var(--text-prominent); padding: 1rem 0; } .dbot-accordion__content--open { opacity: 1; max-height: fit-content; } @media (min-width: 320px) and (max-width: 767px) { .dbot-accordion__content--open { padding-left: 1rem; } } .dbot-accordion__content .joyride-content { line-height: 1.8rem; } .qs .dbot-accordion__content { background-color: transparent; } .qs .dbot-accordion__header { text-align: left; } .qs .dbot-accordion__header--cursive { font-style: italic; } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ .qs { --sidebar-width: 24rem; --footer-height: 7.2rem; --header-height: 5.6rem; --min-content-height: 40rem; --input-height: 4.8rem; --select-height: 4.8rem; --input-border-radius: 0.4rem; --input-action-height: 4.6rem; --input-action-width: 4.6rem; --group-outer-padding: 1.6rem; } @media (min-width: 320px) and (max-width: 767px) { .qs { --select-height: 4rem; --input-height: 3.4rem; --footer-height: 4.2rem; --input-action-height: 3rem; --input-action-width: 3rem; width: 100%; } } .qs .x-center, .qs .qs__checkbox__container, .qs .qs__checkbox, .qs .qs__input-label, .qs .qs__select__option, .qs .qs__body__content__head__tabs, .qs .qs__head__title { display: flex; align-items: center; } .qs__head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-divider); } .qs__head__title { padding: 0 2.4rem; height: var(--header-height); background-color: var(--general-section-1); width: var(--sidebar-width); } .qs__head__action { padding: 0 2.4rem; } .qs__head__action span:hover { cursor: pointer; } .qs__body { display: flex; } @media (min-width: 1024px) { .qs__body { height: 72rem; } } @media (min-width: 320px) and (max-width: 767px) { .qs__body { display: block; } } .qs__body__sidebar { background-color: var(--general-section-1); width: var(--sidebar-width); } .qs__body__sidebar__subtitle { padding: 1rem 2.4rem; } .qs__body__sidebar__items ul { list-style: none; padding: 0; margin: 0; } .qs__body__sidebar__items ul li { border-left: 4px solid transparent; height: 4rem; padding: 1rem 1.6rem 1rem 4rem; user-select: none; } .qs__body__sidebar__items ul li:hover { background-color: var(--general-main-1); cursor: pointer; } .qs__body__sidebar__items ul li.active { border-left: 4px solid var(--brand-red-coral); background-color: var(--general-main-1); } .qs__body__content { display: flex; flex-direction: column; background-color: var(--general-main-1); width: calc(100% - var(--sidebar-width)); position: relative; padding: 0.8rem; } @media (min-width: 320px) and (max-width: 767px) { .qs__body__content { width: 100%; padding: 0; } } .qs__body__content__head { display: flex; align-items: center; justify-content: center; padding-bottom: 1rem; } @media (min-width: 320px) and (max-width: 767px) { .qs__body__content__head { padding: 0 1.6rem 1.6rem; margin-top: 1.6rem; } } .qs__body__content__head__tabs { background-color: var(--general-section-1); padding: 0.4rem; border-radius: 0.6rem; height: 4rem; } @media (min-width: 320px) and (max-width: 767px) { .qs__body__content__head__tabs { width: 100%; } } .qs__body__content__head__tabs__tab { display: inline-block; text-align: center; min-width: 16rem; padding: 0.6rem 0.8rem; border-radius: 0.4rem; user-select: none; } @media (min-width: 320px) and (max-width: 767px) { .qs__body__content__head__tabs__tab { min-width: auto; width: 50%; } } .qs__body__content__head__tabs__tab:hover { cursor: pointer; } .qs__body__content__head__tabs__tab.active { background-color: var(--general-main-1); } .qs__body__content__head__tabs__tab.disabled { cursor: pointer; pointer-events: none; opacity: 0.5; } .qs__body__content__description { padding: 1rem 2.4rem; } @media (min-width: 320px) and (max-width: 767px) { .qs__body__content__description { padding: 1rem; } } .qs__body__content__select { padding: 0 1.6rem; } .qs__body__content__title { text-align: center; } .qs__body__content__form { padding: 0 2.4rem; } @media (min-width: 320px) and (max-width: 767px) { .qs__body__content__form { padding: 0 1.6rem; } } .qs__body__content__form__group { width: 100%; background-color: var(--general-section-1); margin: auto; border-radius: 0.8rem; padding: 0.8rem var(--group-outer-padding) 1.6rem; margin-bottom: 1.6rem; } .qs__body__content__form__group:last-child { margin-bottom: 0; } .qs__body__content__footer { height: var(--footer-height); border-top: 1px solid var(--border-divider); display: flex; align-items: center; justify-content: flex-end; padding: 1.6rem 2.4rem; background-color: var(--general-main-1); } .qs__body__content__footer button { margin-right: 1rem; } .qs__body__content__footer button:last-child { margin-right: 0; } .qs__form__container { min-height: 10rem; /* to overwrite the height of the ThemedScrollbar */ max-height: calc(100vh - 23rem) !important; } @media (min-width: 1024px) { .qs__form__container { height: calc(100vh - 16rem) !important; } } .qs__form__container { margin-bottom: 1rem; overflow-y: auto; } @media (min-width: 320px) and (max-width: 767px) { .qs__form__container { margin-bottom: 0; max-height: calc(100% - 12.2rem) !important; } } .qs__form__container--no-footer { max-height: 100% !important; } @media (min-width: 320px) and (max-width: 767px) { .qs__form__container--no-footer { max-height: calc(100% - 8rem) !important; } } .qs__form__field { width: 100%; } .qs__form__field__input { margin-bottom: 0.8rem; } .qs__form__field__group-icons .qs__autocomplete .dc-input__leading-icon { height: 2.4rem; width: auto; } .qs__form__field__group-icons .qs__autocomplete .dc-input__leading-icon .dc-icon { height: 1.4rem; width: 1.4rem; } .qs__form__field__group-icons .qs__autocomplete .qs__select__option .dc-icon { height: 1.4rem; width: 1.4rem; } .qs__form__field.no-top-spacing { padding-top: 0; } .qs__form__field.no-border-top .dc-input__container { border-top-left-radius: 0; border-top-right-radius: 0; } .qs__form__field.no-top-border-radius .dc-input__container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .qs__form__field.no-border-bottom-radius .qs__checkbox { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .qs__form__field.no-bottom-spacing { padding-bottom: 0; } .qs__form__field.no-bottom-border-radius .dc-input__container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .qs__form__field__list { margin: 0; padding: 0; display: flex; margin-bottom: 0.8rem; } .qs__form__field__list__item { flex: 1; height: var(--input-height); background: var(--general-main-1); line-height: var(--input-height); text-align: center; font-size: 12px; } .qs__form__field__list__item:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .qs__form__field__list__item:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .qs__form__field__list__item--active { font-weight: bold; background: var(--general-active); } .qs__form__field .contract-type .dc-input__field { font-weight: normal; } .qs__form__field:last-child .dc-input__container { margin-bottom: 0; } .qs__autocomplete { caret-color: transparent; } .qs__autocomplete .dc-input__container { border: none; height: var(--select-height); background: var(--general-main-1); padding: 0.8rem 2.4rem; } .qs__autocomplete .dc-input__leading-icon { top: 1.4rem; left: 1.4rem; height: 2.4rem; width: 2.4rem; } @media (min-width: 320px) and (max-width: 767px) { .qs__autocomplete .dc-input__leading-icon { top: 50%; left: 0; transform: translateY(-50%); } } .qs__autocomplete .dc-input__leading-icon .dc-icon { margin-right: 0.6rem; } .qs__autocomplete .dc-input__leading-icon .dc-icon:last-child { margin-right: 0; } .qs__autocomplete .dc-input__field { margin-left: 6rem; font-weight: bold; color: var(--text-general); } .qs__autocomplete .dc-input__field[name=symbol] { caret-color: auto; } .qs__autocomplete .dc-input__trailing-icon { margin-right: 2.4rem; } .qs__select { caret-color: transparent; } .qs__select .dc-input__container { border: none; height: var(--select-height); background: var(--general-main-1); padding: 0.8rem 2.4rem; } .qs__select .dc-input__field { font-weight: bold; color: var(--text-general); } @media (min-width: 320px) and (max-width: 767px) { .qs__select .dc-input__field { text-align: center; } } .qs__select .dc-input__leading-icon { top: 1.6rem; left: 1.6rem; } .qs__select .dc-input__leading-icon .dc-icon { margin-right: 0.6rem; } .qs__select .dc-input__leading-icon .dc-icon:last-child { margin-right: 0; } .qs__select .dc-input__trailing-icon { margin-right: 2.4rem; } .qs__select__option__text { margin-left: 3rem; } .qs__select__option__icon { background-color: var(--icon-grey-background); margin-left: 0.8rem; } .qs__select__option__icon:first-child { margin-left: 0; } .qs__select__option .dc-icon { height: 2.4rem; width: auto; } .qs .seddle-actions, .qs .qs__input .dc-input__trailing-icon, .qs__input .qs .dc-input__trailing-icon, .qs .qs__input .dc-input__leading-icon, .qs__input .qs .dc-input__leading-icon { display: flex; align-items: center; justify-content: center; position: absolute; background: transparent; border: none; font-size: 20px; line-height: 20px; width: var(--input-action-width); height: var(--input-action-height); border-radius: 2px; pointer-events: auto; margin: 0; top: 50%; transform: translateY(-50%); } .qs .seddle-actions:hover, .qs .qs__input .dc-input__trailing-icon:hover, .qs__input .qs .dc-input__trailing-icon:hover, .qs .qs__input .dc-input__leading-icon:hover, .qs__input .qs .dc-input__leading-icon:hover { background: var(--general-section-1); cursor: pointer; } .qs__input { margin: 0; } .qs__input.highlight { border: 1px solid var(--status-warning); } .qs__input .dc-input__container { height: var(--input-height); border: 1px solid transparent; background-color: var(--general-main-1); } .qs__input .dc-input__container:hover { border: 1px solid var(--border-hover); } .qs__input .dc-input__leading-icon { left: 0.3rem; color: var(--text-general); } @media (min-width: 320px) and (max-width: 767px) { .qs__input .dc-input__leading-icon { left: 0.2rem; } } .qs__input .dc-input__leading-icon:hover { background-color: var(--state-hover); } .qs__input .dc-input__leading-icon:disabled { opacity: 0.32; pointer-events: none; } .qs__input .dc-input__trailing-icon { right: 0.3rem; color: var(--text-general); } @media (min-width: 320px) and (max-width: 767px) { .qs__input .dc-input__trailing-icon { right: 0.2rem; } } .qs__input .dc-input__trailing-icon:hover { background-color: var(--state-hover); } .qs__input .dc-input__trailing-icon:disabled { opacity: 0.32; pointer-events: none; } .qs__input .dc-input__field { margin: 0 4rem; text-align: center; color: var(--text-general); } .qs__input.error .dc-input__container { border: 1px solid var(--text-loss-danger); } .qs__input-label { height: var(--input-height); } .qs__input-label__wrapper { margin-right: 1rem; } .qs__checkbox { height: var(--input-height); background: var(--general-main-1); border-radius: 0.4rem; } .qs__checkbox__container { height: calc(var(--input-height) - 0.5rem); width: 100%; padding: 0 2.4rem 0 1.6rem; } .qs__checkbox__container .dc-checkbox { margin-right: 1rem; } .qs__checkbox__container .dc-checkbox .dc-text { font-weight: bold; } .qs__description__content { margin-bottom: 0.8rem; } @media (min-width: 1024px) { .qs__description__content { padding-left: 1rem; } } .qs__description__content.italic { font-style: italic; } .qs__description__content.italic span { font-size: 1.2rem; } @media (min-width: 320px) and (max-width: 767px) { .qs__description__content.italic span { font-size: 1.2rem; } } .qs__description__content.no-margin { margin-bottom: 0; } .qs__description__content.no-margin:last-child { margin-bottom: 0.8rem; } .qs__description__content.top-margin { margin-top: 1rem; } .qs__description__image { width: 100%; margin-bottom: 2rem; } @media (min-width: 320px) and (max-width: 767px) { .qs__description__image { height: 36rem; } } .qs__description__image img { height: 100%; width: auto; max-width: 100%; object-fit: contain; } @media (min-width: 1024px) { .qs__description__image { padding-left: 1rem; } } .qs__description__image.formula { width: unset; margin: 1.5rem 0.5rem; } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ .loss-threshold-warning-dialog__body-text { font-size: 1.5rem; line-height: 18px; margin: 12px 0px; margin-bottom: 22px; color: var(--text-general); } .loss-threshold-warning-dialog .dc-dialog__header--title { max-width: 90%; } @media (min-width: 320px) and (max-width: 767px) { .loss-threshold-warning-dialog .dc-dialog__footer { display: flex; width: 100%; flex-wrap: unset; } } @media (min-width: 320px) and (max-width: 767px) { .loss-threshold-warning-dialog .dc-dialog__button:not(:last-child) { margin-right: 6px; } } @media (min-width: 320px) and (max-width: 767px) { .loss-threshold-warning-dialog .dc-dialog__button { margin-left: 6px; } } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } .flyout { /* $flyout: &; */ position: absolute; left: 250px; top: 0; background-color: var(--general-main-2); height: calc(100vh - 232px); max-height: calc(100vh - 232px); z-index: 11; border-radius: 4px; font-size: 2em; margin-left: 15px; margin-top: 20px; box-shadow: 0 2px 8px 0 var(--shadow-box); min-width: 400px; visibility: hidden; } .flyout__item:hover .flyout__button-add--hide { display: flex !important; animation: fade-in 0.3s; } .flyout__content { overflow: auto; height: calc(100% - 64px); } .flyout__content .dc-themed-scrollbars { padding: 5px 25px; } .flyout__content-disclaimer { display: flex; justify-content: space-around; background: #ffad3a; font-size: var(--text-size-xs); margin-top: 1.6em; line-height: 1.3em; padding: 0.8rem; border-radius: 4px; } .flyout__content-disclaimer-text { color: #333333; width: 324px; } .flyout__content-disclaimer-icon { padding-top: 0.8rem; } .flyout__block-workspace--top { margin-bottom: 15px; } .flyout__block-workspace--center { margin-top: 0.6em; } .flyout__block-workspace--center .injectionDiv { height: 100%; } .flyout__block-workspace__header { display: flex; } .flyout__button-new { width: 20%; height: 4rem !important; font-size: var(--text-size-xs); font-weight: bold; border-top-left-radius: 0rem !important; border-bottom-left-radius: 0rem !important; } .flyout__button-add { color: var(--general-main-1); } .flyout__button-add--hide { display: none !important; } .flyout__button-back { padding: 0 15px; align-self: center; background-color: transparent; color: #000000; } .flyout__button-back svg { vertical-align: middle; } .flyout__button-back:focus { outline: none; } .flyout__button-next, .flyout__button-previous { margin-left: 1em; color: rgba(0, 0, 0, 0.8); background-color: var(--general-section-1); display: flex; } .flyout__item { line-height: 1.3em; font-size: var(--text-size-xs); } .flyout__item:not(:last-of-type) { margin-bottom: 30px; } .flyout__item-header { display: flex; margin-top: 15px; margin-bottom: 10px; } .flyout__item-buttons { margin-left: auto; align-self: center; } .flyout__item-info { cursor: pointer; font-weight: bold; display: block; color: #e31c4b; } .flyout__item-description { font-size: var(--text-size-xs); margin-bottom: 1em; line-height: 1.3em; color: var(--text-general); } .flyout__image { width: 100%; height: auto; border-radius: 0.5em; } .flyout__video { width: 100%; height: 20vh; border-radius: 0.5em; } .flyout__help { padding: 0; height: 100%; visibility: visible; } .flyout__help-header { padding: 15px; display: flex; background-color: var(--general-section-1); } .flyout__help-content { padding: 1.5em; font-size: 0.8em; overflow-y: auto; height: calc(100vh - 295px); /* flyout__item selector */ } .flyout__help-content .flyout__item { margin-bottom: 0.8em; } .flyout__help-title { align-self: center; } .flyout__help-footer { display: flex; justify-content: flex-end; padding: 0.5em 0.8em; border-top: solid 0.1em var(--general-section-1); } .flyout__search { padding: 0; visibility: visible; } .flyout__search-header { padding: 20px; background-color: var(--general-disabled); display: flex; justify-content: space-between; } .flyout__search-header-text { align-self: center; } .flyout__search-empty { padding: 25px 0; } .flyout__search { /* flyout__help-content selector */ } .flyout__search .flyout__help-content { height: calc(100% - 60px); } .flyout__normal { visibility: visible; } .flyout__normal-content { height: 100%; } .flyout__input { width: 80% !important; height: 4rem; border-top-right-radius: 0rem !important; border-bottom-right-radius: 0rem !important; border: solid 1px #d6dadb !important; display: inline-block !important; margin-top: 3.3rem; } .flyout__hr { height: 2px; width: 100%; border-top: 1px solid var(--general-section-1); position: absolute; left: 0; right: 0; margin: 0; } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ .toolbar { height: 5.6rem; display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.6rem; position: absolute; top: 0; left: 23.2rem; background-color: var(--general-main-1); } @media (min-width: 320px) and (max-width: 767px) { .toolbar { left: 0; overflow-x: auto; overflow-y: hidden; width: 100%; padding: 0.8rem; } .toolbar::-webkit-scrollbar { display: none; } .toolbar { -ms-overflow-style: none; scrollbar-width: none; } } .toolbar { z-index: 1; } .toolbar__btn { background-color: var(--button-primary-default) !important; } .toolbar__btn--icon { display: flex; justify-content: center; height: 4rem !important; } @media (min-width: 1024px) { .toolbar__btn--icon { width: 22rem; margin-bottom: 1rem; } } @media (min-width: 320px) and (max-width: 767px) { .toolbar__btn--icon { margin-bottom: 2rem; } } .toolbar__btn--icon .dc-btn__icon { padding-right: 0.4rem; } .toolbar__btn--icon > * { align-self: center; } .toolbar__btn--icon-text { font-size: 1.6rem; color: var(--text-colored-background); font-weight: 700; text-transform: none; text-align: center; line-height: 1.75; } .toolbar__section { display: flex; } @media (min-width: 320px) and (max-width: 767px) { .toolbar__section { margin-top: 2rem; } } @media (min-width: 1024px) { .toolbar__section > * { align-self: center; } } .toolbar__icon { cursor: pointer; border: none; margin: auto 1.2rem; height: 1.6rem; width: 1.6rem; fill: var(--text-prominent); } .toolbar__group { display: flex; border-radius: 4px; border: solid 1px var(--border-normal); height: 4rem; } .toolbar__group-btn { padding: 0 1.2rem; height: 4rem; } @media (min-width: 320px) and (max-width: 767px) { .toolbar__group-btn { padding: 0; } .toolbar__group-btn .dc-popover__target { width: 4rem; } } .toolbar__group-btn > * { align-self: center; } .toolbar__animation { width: 35rem; } .toolbar__dialog-text--second { margin-top: 2.4rem; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .vertical-divider { width: 0.1rem; height: 1.7rem; margin: 0.8rem; background-color: var(--border-normal); } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ .db-toolbox { position: absolute; top: 0; left: 0; width: 23.6rem; height: 100%; padding: 0.8rem; background: var(--general-main-1); z-index: 1; /* $toolbox: &; */ } .db-toolbox__title { height: 2.6rem; line-height: 2.6rem; position: relative; cursor: pointer; } .db-toolbox__title__chevron { position: absolute; right: 0; top: 0.3rem; transition: transform 0.3s ease; } .db-toolbox__title__chevron--active { transform: rotate(180deg); top: -0.2rem; } .db-toolbox__search { padding: 1.3rem 0.8rem; height: 6rem; } .db-toolbox__search-field { margin-bottom: 0 !important; } .db-toolbox__search-field input::-ms-clear { display: none; } .db-toolbox__search-field .dc-input { justify-content: center; } .db-toolbox__search-field .dc-input__container { height: 3.2rem; padding: 0.6rem 0.8rem; border-radius: 8px; } .db-toolbox__search-field .dc-input__container:focus-within { border-color: var(--text-general); } .db-toolbox__search-field .dc-input__field { width: unset; height: 2.8rem; flex-grow: 1; padding: 0.8rem; color: var(--text-general); } .db-toolbox__search-field .dc-input__leading-icon { position: unset; pointer-events: unset; margin-left: 0.8rem; cursor: pointer; } .db-toolbox__content { display: flex; flex-direction: column; overflow: hidden; user-select: none; z-index: 1; visibility: visible; border: solid 1px var(--general-section-1); } .db-toolbox__content-wrapper { height: 0; } .db-toolbox__content-wrapper.active { height: 100%; } .db-toolbox__header { padding: 8px; position: relative; font-weight: bold; font-size: 1.6em; text-align: center; color: var(--text-general); background-color: var(--general-section-5); } .db-toolbox__item { display: flex; flex-direction: row; color: var(--text-general); } .db-toolbox__item:hover { background-color: var(--general-hover); color: var(--text-prominent); } .db-toolbox__category-arrow { width: 16px; height: 16px; margin-right: 10px; transition: transform 0.3s ease; } .db-toolbox__category-arrow--active { transform: rotate(180deg); } .db-toolbox__category-menu { height: calc(100vh - 33.6rem); overflow-y: scroll; } .db-toolbox__category-text { display: flex; align-self: center; justify-content: space-between; margin: 10px; width: 100%; } .db-toolbox__description { font-size: 12px; line-height: 1.4; } .db-toolbox__label { font-weight: bold; font-size: 14px; line-height: 1.4; } .db-toolbox__row { cursor: pointer; border-top: 1px solid var(--general-section-6); /* toolbox__category--selected selector */ } .db-toolbox__row .db-toolbox__category--selected { background-color: var(--general-active); } .db-toolbox__row:last-of-type { border-bottom: 1px solid var(--general-section-6); } .db-toolbox__row--active { background-color: var(--general-hover); } .db-toolbox__button.dc-btn { margin: 16px auto; padding: 0; width: 152px; height: 32px; color: var(--text-colored-background); font-size: 14px; font-weight: bold; line-height: 1.4; } .db-toolbox__sub-category-row { padding: 1rem; cursor: pointer; } .db-toolbox__sub-category-row:hover { background-color: var(--general-hover); } .db-toolbox__sub-category-row--active { background-color: var(--general-hover); } .loader { border: 1px solid var(--general-active); border-top: 1px solid var(--brand-secondary); border-radius: 50%; width: 16px; height: 16px; animation: spin 1s linear infinite; } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ #scratch_div { position: relative; width: calc(100vw - 3.2rem); height: var(--bot-content-height); top: 0; } @media (min-width: 320px) and (max-width: 767px) { #scratch_div { width: 100%; } } .blocklyTextRootBlockHeader { font-size: calc(var(--text-size-sm) * 0.9); font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.43; letter-spacing: normal; fill: #ffffff; } .blocklyMainWorkspaceScrollbar { display: none; } .injectionDiv { height: calc(100vh - 16.4rem); position: relative; touch-action: none; overflow: hidden; } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** * @define -panel **/ /* TODO: [fix-dc-bundle] Fix import issue with Deriv Component stylesheets (app should take precedence, and not repeat) */ .run-panel { height: 0; } .run-panel__container { height: var(--bot-content-height) !important; top: 10.4rem !important; width: 36.6rem !important; right: 0; } .run-panel__container--mobile { height: 100%; position: absolute; top: 0; left: 0; width: 100vw; z-index: var(--zindex-drawer); } .run-panel__container--mobile-closed { position: unset; } .run-panel__tile { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100%; } .run-panel__tile-title { min-height: 1.8rem; margin-bottom: 4px; font-size: 1.2rem; color: var(--text-general); font-weight: 700; text-transform: none; text-align: center; line-height: 1.25; } .run-panel__tile-content { height: 18px; margin-bottom: 4px; font-size: 1.2rem; color: var(--text-general); font-weight: 400; text-transform: none; text-align: center; line-height: 1.25; } .run-panel__stat { display: flex; align-items: flex-end; justify-content: flex-start; flex-direction: column; width: 35rem; background-color: var(--general-section-2); } @media (min-width: 320px) and (max-width: 767px) { .run-panel__stat { margin: 0; position: fixed; } } .run-panel__stat--info { display: flex; align-items: flex-start; justify-content: center; width: 33%; padding: 16px 0px 2px 0; cursor: pointer; color: var(--text-general); } .run-panel__stat--info-item { display: inline-block; border-bottom: 1px dotted var(--text-general); } .run-panel__stat--tiles { width: 100%; display: grid; grid-template: 64px 64px/1fr 1fr 1fr; } .run-panel__stat-amount { font-size: 1.2rem; color: var(--text-general); font-weight: 400; text-transform: none; text-align: center; line-height: 1.25; } .run-panel__stat-amount--positive { font-weight: bold; color: var(--text-profit-success); } .run-panel__stat-amount--negative { font-weight: bold; color: var(--text-loss-danger); } .run-panel__stat--mobile { width: 100%; bottom: 0; } .run-panel__footer { text-align: center; display: flex; align-items: center; justify-content: space-between; flex-direction: column; } .run-panel__footer-button { width: 318px; /* TODO: [fix-dc-bundle] Fix import issue with Deriv Component stylesheets (app should take precedence, and not repeat) */ height: 32px !important; margin: 12px 24px; } .run-panel__content { display: flex; justify-content: space-between; flex-direction: column; overflow: hidden !important; } .run-panel__buttons { display: inline-flex !important; justify-content: space-between; width: 67%; margin-top: 1rem; align-items: center; } .run-panel-tab__content { height: calc(100vh - 42rem); overflow: hidden; } .run-panel-tab__content--no-stat { height: var(--drawer-content-height-no-stat); } .run-panel-tab__content--mobile { display: flex; height: var(--drawer-content-height-mobile); position: fixed; bottom: 15.7rem; width: 100vw; padding: 0.4rem 0; } .run-panel-tab__content--summary-tab { padding: 0.8rem 1.6rem; } @media (min-width: 320px) and (max-width: 767px) { .run-panel__clear-button { position: absolute !important; top: 0.5rem; right: 1.6rem; height: 2.6rem !important; min-width: 8rem; } } .controls__section { display: flex; align-items: center; justify-content: space-between; flex-direction: column; position: fixed; bottom: 0; width: 100%; background-color: var(--general-main-1); border-top: solid 2px var(--general-section-1); z-index: 8; } .controls__buttons { padding: 0.8rem 2.4rem; height: 6rem; display: flex; width: inherit; } .controls__stop-button, .controls__run-button { width: 40%; border-radius: 4px 0px 0px 4px !important; } .controls__animation { width: 100%; height: 4rem; border-radius: 0px 4px 4px 0px; } /* animation */ .list__animation-enter { height: 0; transform: translateX(200%); } .list__animation-enter-active { height: auto; transform: translateX(0%); transition: height 500ms, transform 500ms; } .list__animation-exit { opacity: 1; } .list__animation-exit-active { opacity: 0; transition: opacity 300ms; } .db-self-exclusion { font-size: var(--text-size-xs); font-weight: normal; line-height: 1.43; color: var(--text-general); } .db-self-exclusion__content { margin: 2.4rem; margin-right: 1.4rem; padding-right: 1rem; } .db-self-exclusion .dc-themed-scrollbars__track--vertical { right: -0.2rem; } .db-self-exclusion { /* TODO: [fix-dc-bundle] Fix import issue with Deriv Component stylesheets (app should take precedence, and not repeat) */ } .db-self-exclusion__dialog { max-height: 500px !important; width: 460px; } .db-self-exclusion__footer { height: 72px; display: block; position: fixed; width: 100%; left: 0px; bottom: 0px; padding: 1.4rem; border-top: 2px solid var(--general-section-2); } @media (min-width: 320px) and (max-width: 767px) { .db-self-exclusion__footer { position: absolute; width: 100%; bottom: 40px; left: 0px; } .db-self-exclusion__footer--relative { position: relative; margin-top: 5rem; } } .db-self-exclusion__footer-btn-group { display: flex; justify-content: flex-end; } .db-self-exclusion__info { margin-bottom: 2rem; } .db-self-exclusion__limit-status { margin: 1rem 0; } .db-self-exclusion__limit-status--bold { font-weight: 700; } .db-self-exclusion__limit-status--danger { font-weight: 700; color: var(--status-danger); } .db-self-exclusion--danger { color: var(--status-danger); } .db-self-exclusion .dc-btn { margin-left: 0.8rem; } @media (min-width: 320px) and (max-width: 767px) { .limits__wrapper { position: fixed; z-index: 5; width: 100%; left: 0px; top: 0px; background: var(--general-main-1); } .limits__wrapper .db-self-exclusion { height: calc(100vh - 40px); display: flex; justify-content: space-between; flex-direction: column; } .limits__wrapper .db-self-exclusion__content { margin-top: 56px; } .limits__wrapper .db-self-exclusion__form-group { margin-bottom: 1.6rem; display: flex; } } .dc-modal__container_self-exclusion__modal { display: flex; flex-direction: row; align-content: space-between; width: 440px !important; height: 374px !important; } .statistics__modal { height: 28.4rem !important; width: 44rem !important; font-size: 1.6rem; padding: 2.4rem; } .statistics__modal--mobile { font-size: 1.6rem !important; } .statistics__modal-body { height: calc(100vh - 40.6rem); min-height: 10rem; max-height: 45rem; } .statistics__modal-body--mobile { padding: 0.6rem 0 1.6rem !important; height: 40.4rem; } .statistics__modal-body--content { margin-top: 1rem; } .statistics__modal-body--content-stake { margin-top: unset; font-weight: bold; } .statistics__modal-scrollbar { padding-right: 1.2rem; } @media (min-width: 320px) and (max-width: 767px) { .dc-modal__container_statistics__modal { width: 31.2rem !important; } } .dc-modal__container_statistics__modal .dc-modal-body { padding: 2.4rem 1.2rem 2.4rem 2.4rem; } @media (min-width: 320px) and (max-width: 767px) { .dc-dialog__button { flex-basis: 100%; margin-left: unset; } } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ .bot__chart-container { position: relative; top: 0; } .bot__chart-container-wrapper { position: absolute; top: 0; width: 100vw; background-color: var(--general-main-1); } .bot .ciq-chart .cq-top-ui-widgets, .bot .ciq-chart .info-box { transition: transform 0.25s ease; } .bot .ciq-chart .cq-top-ui-widgets .cq-symbols-display, .bot .ciq-chart .info-box .cq-symbols-display { z-index: 1; } .bot .ciq-chart .cq-top-ui-widgets .cq-symbols-display.ciq-disabled, .bot .ciq-chart .info-box .cq-symbols-display.ciq-disabled { display: none; } @media (min-width: 320px) and (max-width: 767px) { .bot .ciq-chart .cq-top-ui-widgets .cq-symbols-display, .bot .ciq-chart .info-box .cq-symbols-display { min-width: 17rem; max-width: 26rem; width: auto; } .bot .ciq-chart .cq-top-ui-widgets .cq-symbols-display .cq-menu-btn, .bot .ciq-chart .info-box .cq-symbols-display .cq-menu-btn { padding: 0.2rem; } .bot .ciq-chart .cq-top-ui-widgets .cq-symbols-display .cq-symbol-select-btn, .bot .ciq-chart .info-box .cq-symbols-display .cq-symbol-select-btn { margin: 0.2rem; } .bot .ciq-chart .cq-top-ui-widgets .cq-symbols-display .cq-symbol-select-btn .cq-symbol-dropdown, .bot .ciq-chart .info-box .cq-symbols-display .cq-symbol-select-btn .cq-symbol-dropdown { transform: scale(1); margin-left: auto; } .bot .ciq-chart .cq-top-ui-widgets .cq-symbols-display .cq-symbol-select-btn .cq-symbol, .bot .ciq-chart .info-box .cq-symbols-display .cq-symbol-select-btn .cq-symbol { font-size: 1.2rem; } .bot .ciq-chart .cq-top-ui-widgets .cq-symbols-display .cq-symbol-select-btn .cq-chart-price, .bot .ciq-chart .info-box .cq-symbols-display .cq-symbol-select-btn .cq-chart-price { display: none; } } .bot .ciq-chart .cq-top-ui-widgets { align-items: center; display: flex; flex-wrap: wrap; position: absolute; top: 0; width: 100%; } .bot .ciq-chart .sc-toolbar-widget { transition: transform 0.25s ease; } @media (min-width: 320px) and (max-width: 767px) { .bot .ciq-chart .sc-toolbar-widget { background: transparent; border-width: 0; bottom: 20.8vh; } .bot .ciq-chart .sc-toolbar-widget .sc-chart-mode, .bot .ciq-chart .sc-toolbar-widget .sc-studies { background: var(--general-section-1); padding: 0.4rem 0.2rem; width: 4rem; height: 4rem; border-radius: 50%; margin: 0.8rem; opacity: 0.75; display: flex; align-items: center; justify-content: center; } .bot .ciq-chart .sc-toolbar-widget .sc-chart-mode__menu__timeperiod, .bot .ciq-chart .sc-toolbar-widget .sc-studies__menu__timeperiod { top: 0.8rem; left: 0.8rem; } .bot .ciq-chart .sc-toolbar-widget .sc-chart-mode__menu > .ic-icon, .bot .ciq-chart .sc-toolbar-widget .sc-studies__menu > .ic-icon { top: 0.6rem; } } .bot .ciq-chart .sc-toolbar-widget .app-contents .ciq-menu { margin: 0; } .bot .smartcharts-mobile .cq-context { z-index: 99; } .bot .smartcharts-mobile .cq-context .sc-mcd__category:last-child { margin-bottom: 3rem !important; } .bot .smartcharts-mobile .cq-chart-title .cq-menu-dropdown { position: fixed; height: 100% !important; } .bot .smartcharts-mobile .cq-chart-title .cq-menu-dropdown .sc-dialog { height: 100% !important; } .bot .smartcharts-mobile .cq-chart-title .cq-menu-dropdown .sc-dialog__body { height: inherit !important; } .bot .smartcharts-mobile .cq-chart-title .cq-menu-dropdown .sc-dialog__body .sc-mcd { height: inherit !important; min-width: auto !important; } .cq-modal-dropdown.stxMenuActive { left: 0; top: 0; } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ #id-charts--disabled { color: var(--fill-normal-1); stroke-opacity: 30%; pointer-events: none; } .chart-modal-dialog { --modal-height: calc(100% - 50px); height: var(--modal-height); max-height: var(--modal-height); padding: 0 0.8rem; z-index: 999; transition: opacity 0.25s cubic-bezier(0.25, 0.1, 0.1, 0.25); display: flex; align-items: center; justify-content: center; } .chart-modal-dialog .dashboard__chart-wrapper--modal { height: 100%; width: 100%; } .chart-modal-dialog .sc-navigation-widget { display: none; } .chart-modal-dialog .cq-symbols-display .cq-menu-btn { padding: 0.2rem; } .chart-modal-dialog .cq-symbols-display .cq-symbol-select-btn { margin: 0.2rem; } .chart-modal-dialog .cq-symbols-display .cq-symbol-select-btn-dropdown { transform: scale(1); margin-left: auto; } .chart-modal-dialog .cq-symbols-display .cq-symbol-select-btn .cq-symbol { font-size: 1.4rem; } .chart-modal-dialog .cq-symbols-display .cq-symbol-select-btn-info { min-height: unset; } .chart-modal-dialog .sc-toolbar-widget { bottom: 4vh; top: unset; border-width: 0; border-radius: 2rem; cursor: pointer; background: var(--general-section-1); } .chart-modal-dialog .sc-toolbar-widget .sc-tooltip:not(:first-child) { display: none; } .chart-modal-dialog .sc-toolbar-widget .cq-menu-btn .sc-chart-mode__menu__timeperiod { top: 0.6rem; left: 1rem; } .chart-modal-dialog .sc-toolbar-widget .cq-menu-btn:hover { background: none; } .chart-modal-dialog .cq-chart-title .cq-menu-dropdown { position: fixed; height: 46rem; left: unset; } .chart-modal-dialog .cq-chart-title .cq-menu-dropdown .sc-dialog { height: 100% !important; } .chart-modal-dialog .cq-chart-title .cq-menu-dropdown .sc-dialog__body { height: inherit !important; } .chart-modal-dialog .cq-chart-title .cq-menu-dropdown .sc-dialog__body .sc-mcd { height: inherit !important; min-width: auto !important; } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ .dc-dialog__wrapper--google-drive .dc-dialog__dialog { width: unset; max-width: unset; height: unset; max-height: unset; padding: 2.4rem; background-color: var(--general-main-2); } .dc-dialog__wrapper--google-drive .dc-dialog__content .load-strategy__container { height: unset; } .dc-dialog__wrapper--google-drive .dc-dialog__footer { display: none; } .picker-dialog { z-index: 9999 !important; } @media (min-width: 320px) and (max-width: 767px) { .dc-dialog__delete-strategy--delete .dc-dialog__footer { flex-wrap: unset; display: flex; align-items: flex-start; justify-content: flex-end; width: 100%; } .dc-dialog__delete-strategy--delete .dc-dialog__footer button { flex-basis: unset; } .dc-dialog__delete-strategy--delete .dc-dialog__footer button:first-child { margin-right: 1rem; } .dc-dialog__delete-strategy--delete .dc-dialog__footer button { margin-bottom: unset; } } .dc-modal { /* $save-modal: 'modal--save'; */ } .dc-modal__container_modal--save { min-width: 320px !important; } .dc-modal__container_modal--save .modal__content { padding: 16px 24px; } .dc-modal__container_modal--save .modal__footer { text-align: right; border-top: 2px solid var(--general-section-2); } .dc-modal__container_modal--save .modal__footer--button { margin: 1.4rem 1.6rem 1.4rem 0; display: inline-block; } .dc-modal__container_modal--save .modal__content-row { display: flex; align-items: center; justify-content: center; } .dc-modal__container_modal--save form { height: 445px; display: flex; justify-content: space-between; flex-direction: column; } /* TODO: [fix-dc-bundle] Fix import issue with Deriv Component stylesheets (app should take precedence, and not repeat) */ div.radio-group__save-type { display: flex; justify-content: center; margin: 8% 0px; } div.radio-group__save-type .dc-radio-group__item { display: flex; flex-direction: column; padding: 24px; width: 128px; border-radius: 4px; } div.radio-group__save-type .dc-radio-group__item--selected { border: solid 1px #85acb0; } div.radio-group__save-type .dc-radio-group__item--selected .save-type__radio-text { font-weight: 700; } div.radio-group__save-type .dc-radio-group__item-disabled .save-type__text { color: var(--general-disabled) !important; } div.radio-group__save-type .dc-radio-group__item-disabled .dc-radio-group__circle { border-color: var(--general-disabled) !important; } div.radio-group__save-type .dc-radio-group__circle { display: none; } div.radio-group__save-type .dc-radio-group__label { align-self: center; } .save-type__container { text-align: center; } .save-type__input { /* TODO: [fix-dc-bundle] Fix import issue with Deriv Component stylesheets (app should take precedence, and not repeat) */ margin: 2rem 0 0 !important; } .save-type__radio { text-align: center; } .save-type__radio-text { letter-spacing: normal; } .save-type__drive-status { cursor: pointer; position: absolute; margin-top: 5px; width: 71px; } .save-type__icon--disabled { opacity: 0.32; } .save-modal__wrapper { position: fixed; top: 40px; z-index: 10; } @media (min-width: 320px) and (max-width: 767px) { .save-modal__wrapper form { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .save-modal__wrapper .dc-input { width: 100% !important; margin: 3rem 0 0 !important; } .save-modal__wrapper .dc-radio-group__item { width: calc(50vw - 24px) !important; height: 35vw; } .save-modal__wrapper .save-type__drive-status { position: relative; } .save-modal__wrapper .modal__content { padding: 3rem 1.6rem; height: calc(100% - 5.8rem); } .save-modal__wrapper .modal__footer { position: fixed; bottom: 0px; left: 0px; display: flex; flex-direction: row; justify-content: flex-end; padding: 1.4rem; height: 5.8rem; border-top: solid 0.1em var(--general-section-1); width: 100%; } .save-modal__wrapper .modal__footer--active-keyboard { margin-top: 1.6rem; position: relative; display: block; left: unset; bottom: unset; } .save-modal__wrapper .modal__footer--button { float: right; margin-left: 0.8rem; height: 4rem; } } .load-strategy__wrapper { position: fixed; top: 4rem; z-index: 10; width: 100%; } @media (min-width: 320px) and (max-width: 767px) { .load-strategy__wrapper .dc-mobile-full-page-modal { width: 100%; } } .load-strategy__wrapper .dc-mobile-full-page-modal__body { height: 100%; } .load-strategy__wrapper .dc-mobile-full-page-modal .google-drive-label { width: 100%; } @media (min-width: 320px) and (max-width: 767px) { .load-strategy__wrapper .dc-tabs { height: 100%; display: unset; flex: 1; } .load-strategy__wrapper .dc-tabs__content { height: calc(100% - 4rem); } } @media (min-width: 1024px) { .load-strategy__container { height: calc(80vh - 15rem); } .load-strategy__container--has-footer { height: calc(80vh - 15rem); } .load-strategy__container > * { height: 100%; margin-top: 0.8rem; } } @media (min-width: 768px) and (max-width: 1023px) { .load-strategy__container { height: calc(80vh - 15rem); } .load-strategy__container--has-footer { height: calc(80vh - 15rem); } .load-strategy__container > * { height: 100%; margin-top: 0.8rem; } } @media (min-width: 320px) and (max-width: 767px) { .load-strategy__container { height: 100%; overflow: hidden; padding-left: 0.5rem; } } .load-strategy__title { font-size: var(--text-size-s); font-weight: 700; margin: 1.6rem 1.6rem 1.6rem 0; color: var(--text-general); } .load-strategy__title--listed { margin: 0 !important; } .load-strategy__button-group { display: flex; justify-content: flex-end; margin-right: 1.6rem; } .load-strategy__button-group--clear { height: 3.4rem; width: 6.7rem; background-color: #d6d6d6; border-radius: 0.4rem; color: #ffffff; outline: none; border: none; font-weight: 700; font-size: 1.4rem; cursor: pointer; margin-right: 1.6rem; } .load-strategy__button-group--open { height: 3.4rem; background-color: #ff444f; border-radius: 0.4rem; color: #ffffff; outline: none; border: none; font-weight: 700; font-size: "1.4rem"; cursor: pointer; } .load-strategy__preview-workspace { padding: 1.5rem; border-radius: 4px; border: solid 1px var(--border-normal); height: calc(100vh - 30.4rem); position: relative; overflow: hidden; margin: 0 1.6rem 1.6rem 0; } .load-strategy__preview-workspace-controls { padding: 0.7rem 0.5rem; display: flex; flex-direction: column; position: absolute; right: 1.6rem; bottom: 1.6rem; border-radius: 3rem; background-color: #f2f3f4; box-shadow: 0.2rem 0.2rem 0.5rem var(--shadow-menu); z-index: 4; } .load-strategy__preview-workspace-icon { margin: 0.5rem; cursor: pointer; } @media (min-width: 1024px) { .load-strategy__local-dropzone { padding-top: 1.6rem; } } @media (min-width: 320px) and (max-width: 767px) { .load-strategy__local-dropzone { height: 100%; padding: 1.6rem; } } .load-strategy__local-dropzone-area { display: flex; align-items: center; justify-content: center; flex-direction: column; border: dashed 0.2rem var(--border-normal); border-radius: 4px; height: 100%; padding: 1.6rem; } .load-strategy__local-icon { margin-bottom: 1.6rem; } .load-strategy__local-title { margin-bottom: 1.6rem; font-size: var(--text-size-s); } .load-strategy__local-description { margin-bottom: 1.6rem; font-size: var(--text-size-xs); } .load-strategy__local-preview { display: flex; flex-direction: column; position: relative; } @media (min-width: 320px) and (max-width: 767px) { .load-strategy__local-preview { padding: 1.6rem; height: calc(100% - 7.4rem); /* - footer height */ } .load-strategy__local-preview--active { height: calc(70% - 7.4rem); } } @media (min-width: 320px) and (max-width: 767px) { .load-strategy__local-preview--listed { padding: 0; } } .load-strategy__local-preview-close { background-image: radial-gradient(at right top); position: absolute; padding: 2.5rem; border-bottom-left-radius: 50%; right: 0; top: 0; z-index: 99; cursor: pointer; } .load-strategy__local-footer { padding: 1.6rem; display: flex; justify-content: flex-end; border-top: 1px solid var(--general-section-1); } .load-strategy__google-drive { display: flex; align-items: center; justify-content: center; flex-direction: column; } @media (min-width: 320px) and (max-width: 767px) { .load-strategy__google-drive { border: dashed 0.2rem var(--border-normal); border-radius: 4px; margin: 1.6rem; padding: 1.6rem; height: calc(100% - 3.2rem); /* - 2x margin. */ } } .load-strategy__google-drive-icon { margin-bottom: 1.6rem; } .load-strategy__google-drive-icon--disabled { opacity: 0.32; } .load-strategy__google-drive-connected-text { margin-bottom: 1.6rem; font-size: var(--text-size-s); font-weight: bold; line-height: 2.4rem; color: var(--text-general); } .load-strategy__google-drive-terms { font-size: var(--text-size-xs); line-height: 2rem; margin: 1.6rem 0; text-align: center; color: var(--text-general); } .load-strategy__google-drive-text { margin-bottom: 1rem; } .picker { max-width: 98%; border-radius: 0.8rem; max-height: 99%; } .picker-content { max-width: 98%; padding: 1%; } @media (min-width: 320px) and (max-width: 767px) { .picker { height: 100%; width: 100%; top: 0; } } @media (min-width: 768px) and (max-width: 1023px) { .dc-modal__container_load-strategy { width: calc(100vw - 4.8rem) !important; } } @media (min-width: 320px) and (max-width: 767px) { .dc-dialog__wrapper--preview { top: 6.5rem; } .dc-dialog__wrapper--preview .dc-dialog__dialog { justify-content: flex-start; min-width: 100vw; min-height: 100vh; padding: 0; } .dc-dialog__wrapper--preview .dc-dialog__header-wrapper { margin-bottom: 0; } .dc-dialog__wrapper--preview .dc-dialog__header-wrapper h1 { width: 100%; text-align: center; } .dc-dialog__wrapper--preview .dc-dialog__header-wrapper { display: flex; align-items: center; justify-content: center; height: 4rem; box-shadow: inset 0 -0.1rem 0 #f2f3f4; } .dc-dialog__wrapper--preview .dc-dialog__header--close { padding: 1.6rem; margin-top: -1rem; } .dc-dialog__wrapper--preview .dc-dialog__content { max-width: unset; } .dc-dialog__wrapper--preview .dc-dialog__content .injectionDiv { margin: 2.4rem; height: calc(100vh - 26.5rem); border: 1px solid #d6d6d6; } .dc-dialog__wrapper--preview .dc-dialog__content .load-strategy__preview-workspace-container { position: relative; margin-bottom: 3.2rem; min-height: 33rem; } .dc-dialog__wrapper--preview .dc-dialog__content .load-strategy__preview-workspace-controls { right: 3.6rem; } .dc-dialog__wrapper--preview .dc-dialog__content .load-strategy__button-group { box-shadow: inset 0 0.2rem 0rem #f2f3f4; margin: 0; padding: 1.6rem; } .dc-dialog__wrapper--preview .dc-dialog__footer { display: none; } } .toolbar__dialog { transition: none; } .flex-align-center, .bot-list__item__load-type, .bot-list__item, .bot-list__header { display: flex; align-items: center; } .bot-list__wrapper { height: calc(100vh - 54.8rem); overflow: auto; } .bot-list__header { padding: 0 0.8rem; border-bottom: 1px solid var(--border-divider); } @media (min-width: 320px) and (max-width: 767px) { .bot-list__header { padding: 0; } } .bot-list__header__label { padding: 0.8rem; width: 35%; } @media (min-width: 320px) and (max-width: 767px) { .bot-list__header__label { width: 40%; padding-left: 0; } } .bot-list__header__time-stamp { width: 20%; padding: 0.8rem; } @media (min-width: 320px) and (max-width: 767px) { .bot-list__header__time-stamp { width: 25%; padding-right: 0; } } .bot-list__header__load-type { width: 25%; padding: 0.8rem; } .bot-list__item { padding: 0 0.8rem; border-bottom: 1px solid var(--border-divider); user-select: none; position: relative; } .bot-list__item:hover { cursor: pointer; } .bot-list__item__label { padding: 0.8rem; width: 35%; } .bot-list__item__label .text-wrapper { -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box; max-width: 100%; overflow: hidden; text-overflow: ellipsis; word-break: break-all; } @media (min-width: 320px) and (max-width: 767px) { .bot-list__item__label { width: 40%; padding-left: 0; } } .bot-list__item__time-stamp { width: 20%; padding: 0.8rem; } @media (min-width: 320px) and (max-width: 767px) { .bot-list__item__time-stamp { width: 25%; } } .bot-list__item__load-type { width: 25%; padding: 0.8rem; } .bot-list__item__load-type .dc-icon { margin-right: 0.8rem; } .bot-list__item__actions { display: flex; align-items: center; justify-content: flex-end; width: 20%; padding: 0.8rem; justify-content: flex-end; } .bot-list__item__actions__action-item { margin-right: 1.6rem; } .bot-list__item__actions__action-item:last-child { margin-right: 0; } @media (min-width: 320px) and (max-width: 767px) { .bot-list__item__actions { width: 10%; } } .bot-list__item__actions button { background: transparent; border: none; width: unset; padding: 0; } .bot-list__item__responsive { background: var(--general-main-1); box-shadow: 0 0 2rem rgba(0, 0, 0, 0.05), 0 1.6rem 2rem rgba(0, 0, 0, 0.05); display: none; min-width: 15rem; position: absolute; right: 3rem; top: 4rem; z-index: 100; } .bot-list__item__responsive--active { display: block; } .bot-list__item__responsive__menu { align-items: center; display: flex; height: 4rem; padding: 0.8rem 1.1rem; } .bot-list__item__responsive__menu .dc-icon { margin-right: 0.8rem; } .bot-list__item__responsive__menu:last-child { box-shadow: inset 0 0.1rem 0 var(--border-divider); } .bot-list__item:nth-last-child(-n+4) .bot-list__item__responsive { top: -15rem; } .bot-list__item:nth-last-child(-n+4) .bot-list__item__responsive--min { top: 1rem; right: 6rem; } .bot-list__item--selected { background-color: var(--general-section-1); } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ .bot-dashboard { position: relative; height: calc(100vh - 8.4rem); overflow: hidden; } @media (min-width: 320px) and (max-width: 767px) { .bot-dashboard { height: calc(100vh - 3.4rem); } } .bot-dashboard .toolbar__section { justify-content: end; } @media (min-width: 320px) and (max-width: 767px) { .bot-dashboard .toolbar__section { column-gap: 1rem; } } .bot-dashboard .run-panel__container { height: var(--tab-content-height) !important; position: sticky; /* TODO: need to set global variables for translation */ transform: translateX(367px); transition: all 0.4s; margin-top: 1rem; } .bot-dashboard .run-panel__container--tour-active { transform: translateX(0px) !important; } .bot-dashboard .run-panel__container--tour-active .dc-drawer__toggle-icon--right { transform: rotate(180deg) !important; } @media (min-width: 1024px) { .bot-dashboard .dc-drawer--open { transform: translateX(0px) !important; } } @media (min-width: 320px) and (max-width: 767px) { .bot-dashboard .dc-drawer--open { transform: translateY(calc(-100% + 3.6rem)); } } .db { --icon-height: 2.4rem; --icon-width: 2.4rem; --border-radius: 2.4rem; } .db-sidebar { position: relative; background-color: var(--general-main-1); padding: 2.4rem; height: 100%; } .db-sidebar--block { display: block; } .db-sidebar { display: none; } .db-sidebar__images { background: var(--general-section-6); } .db-info-panel__close-action { position: absolute; right: 1.4rem; top: 1.4rem; height: 2rem; width: 2rem; line-height: 2.3rem; text-align: center; border-radius: 1rem; } .db-info-panel__close-action:hover { cursor: pointer; background: var(--general-section-1); } .db-info-panel__content { cursor: pointer; } .db-info-panel__content:hover { text-decoration: underline; color: var(--button-primary-default); } .tab__dashboard { display: flex; width: 100%; } .tab__dashboard--tour-active { width: calc(100% - 36rem); } @media (min-width: 320px) and (max-width: 767px) { .tab__dashboard--tour-active { width: 100%; } } .tab__dashboard__header { padding: 1.6rem; margin-top: 4.8rem; } .tab__dashboard__header--listed { margin-top: 0.6rem; } @media (min-width: 320px) and (max-width: 767px) { .tab__dashboard__header { height: auto; margin-top: 0; } } .tab__dashboard__header .title { text-align: center; height: 7.2; } @media (min-width: 320px) and (max-width: 767px) { .tab__dashboard__header .title { height: auto; } } .tab__dashboard__header .subtitle { text-align: center; margin-top: 1.6rem; } .tab__dashboard__header .subtitle__has-list { margin-top: 0; text-align: left; } @media (min-width: 320px) and (max-width: 767px) { .tab__dashboard__header .subtitle__has-list { width: 85%; } } .tab__dashboard__content { display: flex; align-items: flex-start; height: var(--tab-content-height); flex-grow: 1; background: var(--general-main-1); overflow: hidden; position: relative; } @media (min-width: 1024px) { .tab__dashboard__content { padding: 1.6rem 0 0; } } @media (min-width: 320px) and (max-width: 767px) { .tab__dashboard__content { height: calc(100vh - 19rem); align-items: flex-start; } } .tab__dashboard__content .quick-panel { flex: 1 1 44%; } .tab__dashboard__content .preview-panel { display: none; flex: 1 1 56%; } .tab__dashboard__content .preview-panel--active { display: block; } @media (min-width: 320px) and (max-width: 767px) { .tab__dashboard__content .preview-panel--active { display: none; } } .tab__dashboard__mobile-container { display: flex; align-items: center; justify-content: center; margin: 1.4rem 0; column-gap: 1rem; height: 3.2rem; } .tab__dashboard__mobile-container--minimized { height: 3.6rem; } .tab__dashboard__centered { display: flex; align-items: center; justify-content: center; flex-direction: column; } @media (min-width: 768px) and (max-width: 1023px) { .tab__dashboard__centered { width: 100%; } } @media (min-width: 320px) and (max-width: 767px) { .tab__dashboard__centered { width: 100%; padding: 0 1rem; } } @media (min-width: 1024px) { .tab__dashboard__centered--not-listed { width: 100%; margin-top: 4.8rem; } } .tab__dashboard__centered--listed { align-items: initial; justify-content: flex-start; padding: 0.4rem 2.4rem; height: 100%; } .tab__dashboard__preview { height: calc(100% + 2rem); } @media (min-width: 320px) and (max-width: 767px) { .tab__dashboard__preview { display: none; } } @media (min-width: 768px) and (max-width: 1023px) { .tab__dashboard__preview { display: none; } } .tab__dashboard__preview__retrigger button { background: var(--general-section-1); border-radius: 2.4rem; outline: none; border: none; height: 4rem; padding: 1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; } @media (min-width: 320px) and (max-width: 767px) { .tab__dashboard__preview__retrigger button { width: 3.2rem; height: 3.2rem; padding: 0.8rem; } } .tab__dashboard__preview__retrigger__text { margin-left: 0.4rem; color: var(--text-general); } .tab__dashboard__preview__retrigger__icon { width: var(--icon-width); height: var(--icon-height); } .tab__dashboard__home__retrigger { position: absolute; top: 0; right: 0; padding: 2rem; } .tab__dashboard__home__retrigger button { background: var(--general-section-1); border-radius: 2.4rem; outline: none; border: none; height: 4rem; padding: 1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; } .tab__dashboard__home__retrigger__text { margin-left: 0.4rem; color: var(--text-general); } .tab__dashboard__home__retrigger__icon { width: var(--icon-width); height: var(--icon-height); } @media (min-width: 1024px) { .tab__dashboard__description { text-align: center; margin-bottom: 4rem; } } .tab__dashboard__info-panel { position: relative; background-color: var(--general-main-1); padding: 2.4rem; margin-left: 1.6rem; display: none; height: calc(100vh - 16.7rem); overflow-y: auto; } .tab__dashboard__info-panel--active { display: block; width: 30%; } @media (min-width: 320px) and (max-width: 1023px) { .tab__dashboard__table { width: calc(100% - 9.3rem); } } .tab__dashboard__table--minimized { width: 100%; } .tab__dashboard__table__tiles { display: flex; align-items: flex-start; justify-content: center; word-wrap: break-word; font-size: 1.3rem; text-align: center; } @media (min-width: 320px) and (max-width: 767px) { .tab__dashboard__table__tiles { flex-wrap: wrap; } } .tab__dashboard__table__tiles--minimized { align-items: flex-start; } @media (min-width: 320px) and (max-width: 1023px) { .tab__dashboard__table__tiles--minimized { display: flex; justify-content: space-around; flex-flow: unset; } } .tab__dashboard__table__disabled-card { pointer-events: none; cursor: not-allowed; opacity: 0.6; } .tab__dashboard__table__block { display: flex; align-items: center; justify-content: center; flex-direction: column; padding-right: 2.4rem; } @media (min-width: 320px) and (max-width: 767px) { .tab__dashboard__table__block { padding: 1rem; } } .tab__dashboard__table__block:hover { cursor: pointer; } .tab__dashboard__table__block span { width: 9.1rem; word-wrap: break-word; text-align: center; height: 4.2rem; } @media (min-width: 320px) and (max-width: 767px) { .tab__dashboard__table__block span { height: auto; } } .tab__dashboard__table__block--minimized { width: 6.4rem; } .tab__dashboard__table__block--minimized .dc-text { width: 8rem; text-align: center; } .tab__dashboard__table__block:nth-last-child(2) { padding-right: 0; } .tab__dashboard__table__images { background-color: var(--general-section-1); margin-bottom: 0.8rem; border-radius: 0.8rem; padding: 1.6rem; } @media (min-width: 320px) and (max-width: 767px) { .tab__dashboard__table__images--minimized { width: 6.4rem; height: 6.4rem; padding: 0.8rem; } } .user-guide { position: absolute; right: 1.6rem; top: 1.8rem; z-index: 1; } .user-guide__button { display: flex; align-items: center; justify-content: center; padding: 0.8rem 1.4rem; border: none; outline: none; border-radius: 2.4rem; background-color: var(--general-section-1); } @media (min-width: 320px) and (max-width: 767px) { .user-guide__button { height: 3.2rem; width: 3.2rem; line-height: 3.6rem; text-align: center; padding: 0; } } .user-guide__button:hover { cursor: pointer; } .user-guide__icon { height: 24px; width: 24px; } @media (min-width: 320px) and (max-width: 767px) { .user-guide__icon { height: 16px; width: 16px; } } .user-guide__label { margin-left: 0.4rem; } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ .dc-dialog__wrapper--google-drive .dc-dialog__dialog { width: unset; max-width: unset; height: unset; max-height: unset; padding: 2.4rem; background-color: var(--general-main-2); } .dc-dialog__wrapper--google-drive .dc-dialog__content .load-strategy__container { height: unset; } .dc-dialog__wrapper--google-drive .dc-dialog__footer { display: none; } .picker-dialog { z-index: 9999 !important; } @media (min-width: 320px) and (max-width: 767px) { .dc-dialog__delete-strategy--delete .dc-dialog__footer { flex-wrap: unset; display: flex; align-items: flex-start; justify-content: flex-end; width: 100%; } .dc-dialog__delete-strategy--delete .dc-dialog__footer button { flex-basis: unset; } .dc-dialog__delete-strategy--delete .dc-dialog__footer button:first-child { margin-right: 1rem; } .dc-dialog__delete-strategy--delete .dc-dialog__footer button { margin-bottom: unset; } } .dc-modal { /* $save-modal: 'modal--save'; */ } .dc-modal__container_modal--save { min-width: 320px !important; } .dc-modal__container_modal--save .modal__content { padding: 16px 24px; } .dc-modal__container_modal--save .modal__footer { text-align: right; border-top: 2px solid var(--general-section-2); } .dc-modal__container_modal--save .modal__footer--button { margin: 1.4rem 1.6rem 1.4rem 0; display: inline-block; } .dc-modal__container_modal--save .modal__content-row { display: flex; align-items: center; justify-content: center; } .dc-modal__container_modal--save form { height: 445px; display: flex; justify-content: space-between; flex-direction: column; } /* TODO: [fix-dc-bundle] Fix import issue with Deriv Component stylesheets (app should take precedence, and not repeat) */ div.radio-group__save-type { display: flex; justify-content: center; margin: 8% 0px; } div.radio-group__save-type .dc-radio-group__item { display: flex; flex-direction: column; padding: 24px; width: 128px; border-radius: 4px; } div.radio-group__save-type .dc-radio-group__item--selected { border: solid 1px #85acb0; } div.radio-group__save-type .dc-radio-group__item--selected .save-type__radio-text { font-weight: 700; } div.radio-group__save-type .dc-radio-group__item-disabled .save-type__text { color: var(--general-disabled) !important; } div.radio-group__save-type .dc-radio-group__item-disabled .dc-radio-group__circle { border-color: var(--general-disabled) !important; } div.radio-group__save-type .dc-radio-group__circle { display: none; } div.radio-group__save-type .dc-radio-group__label { align-self: center; } .save-type__container { text-align: center; } .save-type__input { /* TODO: [fix-dc-bundle] Fix import issue with Deriv Component stylesheets (app should take precedence, and not repeat) */ margin: 2rem 0 0 !important; } .save-type__radio { text-align: center; } .save-type__radio-text { letter-spacing: normal; } .save-type__drive-status { cursor: pointer; position: absolute; margin-top: 5px; width: 71px; } .save-type__icon--disabled { opacity: 0.32; } .save-modal__wrapper { position: fixed; top: 40px; z-index: 10; } @media (min-width: 320px) and (max-width: 767px) { .save-modal__wrapper form { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .save-modal__wrapper .dc-input { width: 100% !important; margin: 3rem 0 0 !important; } .save-modal__wrapper .dc-radio-group__item { width: calc(50vw - 24px) !important; height: 35vw; } .save-modal__wrapper .save-type__drive-status { position: relative; } .save-modal__wrapper .modal__content { padding: 3rem 1.6rem; height: calc(100% - 5.8rem); } .save-modal__wrapper .modal__footer { position: fixed; bottom: 0px; left: 0px; display: flex; flex-direction: row; justify-content: flex-end; padding: 1.4rem; height: 5.8rem; border-top: solid 0.1em var(--general-section-1); width: 100%; } .save-modal__wrapper .modal__footer--active-keyboard { margin-top: 1.6rem; position: relative; display: block; left: unset; bottom: unset; } .save-modal__wrapper .modal__footer--button { float: right; margin-left: 0.8rem; height: 4rem; } } .load-strategy__wrapper { position: fixed; top: 4rem; z-index: 10; width: 100%; } @media (min-width: 320px) and (max-width: 767px) { .load-strategy__wrapper .dc-mobile-full-page-modal { width: 100%; } } .load-strategy__wrapper .dc-mobile-full-page-modal__body { height: 100%; } .load-strategy__wrapper .dc-mobile-full-page-modal .google-drive-label { width: 100%; } @media (min-width: 320px) and (max-width: 767px) { .load-strategy__wrapper .dc-tabs { height: 100%; display: unset; flex: 1; } .load-strategy__wrapper .dc-tabs__content { height: calc(100% - 4rem); } } @media (min-width: 1024px) { .load-strategy__container { height: calc(80vh - 15rem); } .load-strategy__container--has-footer { height: calc(80vh - 15rem); } .load-strategy__container > * { height: 100%; margin-top: 0.8rem; } } @media (min-width: 768px) and (max-width: 1023px) { .load-strategy__container { height: calc(80vh - 15rem); } .load-strategy__container--has-footer { height: calc(80vh - 15rem); } .load-strategy__container > * { height: 100%; margin-top: 0.8rem; } } @media (min-width: 320px) and (max-width: 767px) { .load-strategy__container { height: 100%; overflow: hidden; padding-left: 0.5rem; } } .load-strategy__title { font-size: var(--text-size-s); font-weight: 700; margin: 1.6rem 1.6rem 1.6rem 0; color: var(--text-general); } .load-strategy__title--listed { margin: 0 !important; } .load-strategy__button-group { display: flex; justify-content: flex-end; margin-right: 1.6rem; } .load-strategy__button-group--clear { height: 3.4rem; width: 6.7rem; background-color: #d6d6d6; border-radius: 0.4rem; color: #ffffff; outline: none; border: none; font-weight: 700; font-size: 1.4rem; cursor: pointer; margin-right: 1.6rem; } .load-strategy__button-group--open { height: 3.4rem; background-color: #ff444f; border-radius: 0.4rem; color: #ffffff; outline: none; border: none; font-weight: 700; font-size: "1.4rem"; cursor: pointer; } .load-strategy__preview-workspace { padding: 1.5rem; border-radius: 4px; border: solid 1px var(--border-normal); height: calc(100vh - 30.4rem); position: relative; overflow: hidden; margin: 0 1.6rem 1.6rem 0; } .load-strategy__preview-workspace-controls { padding: 0.7rem 0.5rem; display: flex; flex-direction: column; position: absolute; right: 1.6rem; bottom: 1.6rem; border-radius: 3rem; background-color: #f2f3f4; box-shadow: 0.2rem 0.2rem 0.5rem var(--shadow-menu); z-index: 4; } .load-strategy__preview-workspace-icon { margin: 0.5rem; cursor: pointer; } @media (min-width: 1024px) { .load-strategy__local-dropzone { padding-top: 1.6rem; } } @media (min-width: 320px) and (max-width: 767px) { .load-strategy__local-dropzone { height: 100%; padding: 1.6rem; } } .load-strategy__local-dropzone-area { display: flex; align-items: center; justify-content: center; flex-direction: column; border: dashed 0.2rem var(--border-normal); border-radius: 4px; height: 100%; padding: 1.6rem; } .load-strategy__local-icon { margin-bottom: 1.6rem; } .load-strategy__local-title { margin-bottom: 1.6rem; font-size: var(--text-size-s); } .load-strategy__local-description { margin-bottom: 1.6rem; font-size: var(--text-size-xs); } .load-strategy__local-preview { display: flex; flex-direction: column; position: relative; } @media (min-width: 320px) and (max-width: 767px) { .load-strategy__local-preview { padding: 1.6rem; height: calc(100% - 7.4rem); /* - footer height */ } .load-strategy__local-preview--active { height: calc(70% - 7.4rem); } } @media (min-width: 320px) and (max-width: 767px) { .load-strategy__local-preview--listed { padding: 0; } } .load-strategy__local-preview-close { background-image: radial-gradient(at right top); position: absolute; padding: 2.5rem; border-bottom-left-radius: 50%; right: 0; top: 0; z-index: 99; cursor: pointer; } .load-strategy__local-footer { padding: 1.6rem; display: flex; justify-content: flex-end; border-top: 1px solid var(--general-section-1); } .load-strategy__google-drive { display: flex; align-items: center; justify-content: center; flex-direction: column; } @media (min-width: 320px) and (max-width: 767px) { .load-strategy__google-drive { border: dashed 0.2rem var(--border-normal); border-radius: 4px; margin: 1.6rem; padding: 1.6rem; height: calc(100% - 3.2rem); /* - 2x margin. */ } } .load-strategy__google-drive-icon { margin-bottom: 1.6rem; } .load-strategy__google-drive-icon--disabled { opacity: 0.32; } .load-strategy__google-drive-connected-text { margin-bottom: 1.6rem; font-size: var(--text-size-s); font-weight: bold; line-height: 2.4rem; color: var(--text-general); } .load-strategy__google-drive-terms { font-size: var(--text-size-xs); line-height: 2rem; margin: 1.6rem 0; text-align: center; color: var(--text-general); } .load-strategy__google-drive-text { margin-bottom: 1rem; } .picker { max-width: 98%; border-radius: 0.8rem; max-height: 99%; } .picker-content { max-width: 98%; padding: 1%; } @media (min-width: 320px) and (max-width: 767px) { .picker { height: 100%; width: 100%; top: 0; } } @media (min-width: 768px) and (max-width: 1023px) { .dc-modal__container_load-strategy { width: calc(100vw - 4.8rem) !important; } } @media (min-width: 320px) and (max-width: 767px) { .dc-dialog__wrapper--preview { top: 6.5rem; } .dc-dialog__wrapper--preview .dc-dialog__dialog { justify-content: flex-start; min-width: 100vw; min-height: 100vh; padding: 0; } .dc-dialog__wrapper--preview .dc-dialog__header-wrapper { margin-bottom: 0; } .dc-dialog__wrapper--preview .dc-dialog__header-wrapper h1 { width: 100%; text-align: center; } .dc-dialog__wrapper--preview .dc-dialog__header-wrapper { display: flex; align-items: center; justify-content: center; height: 4rem; box-shadow: inset 0 -0.1rem 0 #f2f3f4; } .dc-dialog__wrapper--preview .dc-dialog__header--close { padding: 1.6rem; margin-top: -1rem; } .dc-dialog__wrapper--preview .dc-dialog__content { max-width: unset; } .dc-dialog__wrapper--preview .dc-dialog__content .injectionDiv { margin: 2.4rem; height: calc(100vh - 26.5rem); border: 1px solid #d6d6d6; } .dc-dialog__wrapper--preview .dc-dialog__content .load-strategy__preview-workspace-container { position: relative; margin-bottom: 3.2rem; min-height: 33rem; } .dc-dialog__wrapper--preview .dc-dialog__content .load-strategy__preview-workspace-controls { right: 3.6rem; } .dc-dialog__wrapper--preview .dc-dialog__content .load-strategy__button-group { box-shadow: inset 0 0.2rem 0rem #f2f3f4; margin: 0; padding: 1.6rem; } .dc-dialog__wrapper--preview .dc-dialog__footer { display: none; } } .toolbar__dialog { transition: none; } .flex-align-center, .bot-list__item__load-type, .bot-list__item, .bot-list__header { display: flex; align-items: center; } .bot-list__wrapper { height: calc(100vh - 54.8rem); overflow: auto; } .bot-list__header { padding: 0 0.8rem; border-bottom: 1px solid var(--border-divider); } @media (min-width: 320px) and (max-width: 767px) { .bot-list__header { padding: 0; } } .bot-list__header__label { padding: 0.8rem; width: 35%; } @media (min-width: 320px) and (max-width: 767px) { .bot-list__header__label { width: 40%; padding-left: 0; } } .bot-list__header__time-stamp { width: 20%; padding: 0.8rem; } @media (min-width: 320px) and (max-width: 767px) { .bot-list__header__time-stamp { width: 25%; padding-right: 0; } } .bot-list__header__load-type { width: 25%; padding: 0.8rem; } .bot-list__item { padding: 0 0.8rem; border-bottom: 1px solid var(--border-divider); user-select: none; position: relative; } .bot-list__item:hover { cursor: pointer; } .bot-list__item__label { padding: 0.8rem; width: 35%; } .bot-list__item__label .text-wrapper { -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box; max-width: 100%; overflow: hidden; text-overflow: ellipsis; word-break: break-all; } @media (min-width: 320px) and (max-width: 767px) { .bot-list__item__label { width: 40%; padding-left: 0; } } .bot-list__item__time-stamp { width: 20%; padding: 0.8rem; } @media (min-width: 320px) and (max-width: 767px) { .bot-list__item__time-stamp { width: 25%; } } .bot-list__item__load-type { width: 25%; padding: 0.8rem; } .bot-list__item__load-type .dc-icon { margin-right: 0.8rem; } .bot-list__item__actions { display: flex; align-items: center; justify-content: flex-end; width: 20%; padding: 0.8rem; justify-content: flex-end; } .bot-list__item__actions__action-item { margin-right: 1.6rem; } .bot-list__item__actions__action-item:last-child { margin-right: 0; } @media (min-width: 320px) and (max-width: 767px) { .bot-list__item__actions { width: 10%; } } .bot-list__item__actions button { background: transparent; border: none; width: unset; padding: 0; } .bot-list__item__responsive { background: var(--general-main-1); box-shadow: 0 0 2rem rgba(0, 0, 0, 0.05), 0 1.6rem 2rem rgba(0, 0, 0, 0.05); display: none; min-width: 15rem; position: absolute; right: 3rem; top: 4rem; z-index: 100; } .bot-list__item__responsive--active { display: block; } .bot-list__item__responsive__menu { align-items: center; display: flex; height: 4rem; padding: 0.8rem 1.1rem; } .bot-list__item__responsive__menu .dc-icon { margin-right: 0.8rem; } .bot-list__item__responsive__menu:last-child { box-shadow: inset 0 0.1rem 0 var(--border-divider); } .bot-list__item:nth-last-child(-n+4) .bot-list__item__responsive { top: -15rem; } .bot-list__item:nth-last-child(-n+4) .bot-list__item__responsive--min { top: 1rem; right: 6rem; } .bot-list__item--selected { background-color: var(--general-section-1); } /* ======================================== Marketplace Container ======================================== */ @media (min-width: 1024px) { .load-strategy__container--marketplace { height: calc(80vh - 10rem); } } @media (min-width: 768px) and (max-width: 1023px) { .load-strategy__container--marketplace { height: calc(80vh - 10rem); overflow: auto; /* Changed from overflow-y: auto to prevent double scrollbar */ } } @media (min-width: 320px) and (max-width: 767px) { .load-strategy__container--marketplace { height: 100%; overflow-y: auto; overflow-x: hidden; padding: 0; } } .load-strategy__container--marketplace { /* Custom scrollbar */ } .load-strategy__container--marketplace::-webkit-scrollbar { width: 8px; } .load-strategy__container--marketplace::-webkit-scrollbar-track { background: var(--general-section-1); border-radius: 10px; } .load-strategy__container--marketplace::-webkit-scrollbar-thumb { background: var(--brand-red-coral); border-radius: 10px; } .load-strategy__container--marketplace::-webkit-scrollbar-thumb:hover { background: var(--brand-secondary); } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ .apollo-list__item__label { width: 100%; } .apollo-list__wrapper { display: grid; grid-template-columns: repeat(3, 1fr); overflow: auto; } .apollo-list__item { display: flex; padding: 0.8rem 1rem; background: linear-gradient(45deg, rgba(0, 212, 255, 0.858) 0%, rgba(48, 47, 73, 0.939) 55%); margin: 1rem; color: #fff; text-align: center; border-radius: 5px; font-size: 16px; height: 8rem; font-weight: 600; align-items: center; cursor: pointer; transition: all ease-in-out 0.3s; } .apollo-list__item:hover { background: linear-gradient(65deg, rgba(48, 47, 73, 0.939) 60%), rgba(0, 212, 255, 0.858) 10%; color: #00ffff; } .apollo_massive_logo { display: none; } @media screen and (max-width: 720px) { .apollo-list__wrapper { grid-template-columns: none; height: calc(100vh - 40rem); } } @media screen and (max-height: 650px) { .apollo-list__wrapper { height: 200px; padding: 0px 0px 60px; } } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** * Marketplace Card Component Styles * * Rich, modern card design with all details (NO win rate shown) */ .marketplace-card { background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); border-radius: 16px; padding: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; position: relative; overflow: visible; /* Changed from hidden to visible to prevent content clipping */ display: flex; flex-direction: column; gap: 14px; border: 1px solid rgba(0, 0, 0, 0.06); /* Subtle gradient overlay */ } .marketplace-card:before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 120px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, transparent 100%); pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } .marketplace-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(99, 102, 241, 0.15); border-color: rgba(99, 102, 241, 0.2); } .marketplace-card:hover:before { opacity: 1; } .marketplace-card:hover .marketplace-card__icon-wrapper { transform: scale(1.1) rotate(5deg); } .marketplace-card:hover .marketplace-card__btn-load { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); } .marketplace-card--hovered { z-index: 10; } .marketplace-card { /* Top Section */ } .marketplace-card__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 4px; } .marketplace-card__icon-wrapper { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } .marketplace-card__icon-wrapper:after { content: ""; position: absolute; inset: 0; border-radius: 14px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, transparent 100%); pointer-events: none; } .marketplace-card__icon { position: relative; z-index: 1; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)); } .marketplace-card__badge { padding: 4px 10px; border-radius: 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); animation: pulse-badge 2s ease-in-out infinite; } .marketplace-card__badge--popular { background: linear-gradient(135deg, #ef4444, #dc2626); color: #ffffff; } .marketplace-card__badge--new { background: linear-gradient(135deg, #10b981, #059669); color: #ffffff; } .marketplace-card__badge--pro { background: linear-gradient(135deg, #f59e0b, #d97706); color: #ffffff; } .marketplace-card__badge--recommended { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #ffffff; } .marketplace-card { /* Header */ } .marketplace-card__header { display: flex; flex-direction: column; gap: 6px; } .marketplace-card__name { color: #111827; line-height: 1.3; font-size: 15px !important; font-weight: 700 !important; letter-spacing: -0.3px; } .marketplace-card__category { display: inline-block; align-self: flex-start; padding: 3px 8px; border-radius: 6px; font-size: 9px; font-weight: 700; letter-spacing: 0.5px; } .marketplace-card { /* Tagline */ } .marketplace-card__tagline { color: #6b7280; line-height: 1.4; font-size: 12px !important; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 32px; } .marketplace-card { /* Stats Section - Profit & Trades ONLY (No Win Rate) */ } .marketplace-card__stats-section { background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); border-radius: 12px; padding: 12px; display: flex; gap: 12px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); } .marketplace-card__stat-box { flex: 1; display: flex; align-items: center; gap: 8px; background: #ffffff; padding: 10px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .marketplace-card__stat-icon { font-size: 18px; flex-shrink: 0; } .marketplace-card__stat-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .marketplace-card__stat-value { font-size: 13px; font-weight: 700; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .marketplace-card__stat-label { font-size: 9px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.3px; } .marketplace-card { /* Info Row */ } .marketplace-card__info-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .marketplace-card__risk-badge { display: flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 8px; border: 1.5px solid; font-size: 11px; font-weight: 700; flex: 1; } .marketplace-card__risk-text { font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; } .marketplace-card { /* Rating */ } .marketplace-card__rating { display: flex; align-items: center; gap: 4px; } .marketplace-card__rating-stars { display: flex; gap: 1px; } .marketplace-card__rating-stars .star { color: #fbbf24; font-size: 12px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .marketplace-card__rating-stars .star.half { opacity: 0.5; } .marketplace-card__rating-value { font-size: 11px; font-weight: 700; color: #374151; margin-left: 2px; } .marketplace-card { /* Features */ } .marketplace-card__features { display: flex; flex-wrap: wrap; gap: 6px; } .marketplace-card__feature-pill { padding: 4px 8px; background: linear-gradient(135deg, #ede9fe, #ddd6fe); color: #6366f1; border-radius: 6px; font-size: 10px; font-weight: 600; display: flex; align-items: center; gap: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .marketplace-card { /* Footer */ } .marketplace-card__footer { padding-top: 8px; border-top: 1px solid rgba(0, 0, 0, 0.06); } .marketplace-card__downloads { color: #9ca3af !important; font-size: 10px !important; display: flex; align-items: center; justify-content: center; gap: 4px; } .marketplace-card { /* Actions */ } .marketplace-card__action { display: flex; gap: 8px; margin-top: auto; } .marketplace-card__btn-load { flex: 1; height: 36px !important; font-size: 13px !important; font-weight: 700 !important; border-radius: 10px !important; background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important; box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } .marketplace-card__btn-load:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important; } .marketplace-card__btn-load:active { transform: translateY(0); } .marketplace-card__btn-info { width: 36px; height: 36px; border-radius: 10px; border: 1.5px solid #e5e7eb; background: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; } .marketplace-card__btn-info:hover { background: #f9fafb; border-color: #6366f1; transform: scale(1.05); } .marketplace-card__btn-info:active { transform: scale(0.95); } /* Animation */ @keyframes pulse-badge { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.05); } } /* Dark theme support */ @media (prefers-color-scheme: dark) { .marketplace-card { background: linear-gradient(135deg, #1f2937 0%, #111827 100%); border-color: rgba(255, 255, 255, 0.08); } .marketplace-card:before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%); } .marketplace-card:hover { border-color: rgba(99, 102, 241, 0.4); } .marketplace-card__name { color: #f9fafb; } .marketplace-card__tagline { color: #9ca3af; } .marketplace-card__stats-section { background: linear-gradient(135deg, #374151 0%, #1f2937 100%); } .marketplace-card__stat-box { background: #1f2937; } .marketplace-card__stat-value { color: #f9fafb; } .marketplace-card__footer { border-top-color: rgba(255, 255, 255, 0.08); } .marketplace-card__btn-info { background: #1f2937; border-color: #374151; } .marketplace-card__btn-info:hover { background: #374151; } } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** * Tab Navigator Styles * Modern tab navigation with smooth transitions */ .bot-tab-navigator { width: 100%; margin-bottom: 24px; padding: 0 4px; } .bot-tab-navigator__tabs { display: flex; gap: 12px; width: 80%; } .bot-tab-navigator__tab { flex: 1; display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--general-section-1); border: 1px solid transparent; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; /* Hover effect */ } .bot-tab-navigator__tab:hover { background: var(--general-section-2); border-color: var(--brand-red-coral); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255, 68, 68, 0.15); } .bot-tab-navigator__tab { /* Active state */ } .bot-tab-navigator__tab--active { background: linear-gradient(135deg, rgba(255, 68, 68, 0.15) 0%, rgba(255, 68, 68, 0.05) 100%); border-color: var(--brand-red-coral); box-shadow: 0 4px 16px rgba(255, 68, 68, 0.2); } .bot-tab-navigator__tab--active .bot-tab-navigator__tab-icon { transform: scale(1.1); } .bot-tab-navigator__tab--active .bot-tab-navigator__tab-label { color: var(--brand-red-coral); font-weight: 600; } .bot-tab-navigator__tab--active:before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--brand-red-coral) 0%, #ff8585 100%); } .bot-tab-navigator__tab { /* Disabled state */ } .bot-tab-navigator__tab:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .bot-tab-navigator__tab-icon { font-size: 28px; transition: transform 0.3s ease; flex-shrink: 0; } .bot-tab-navigator__tab-content { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex: 1; text-align: left; } .bot-tab-navigator__tab-label { font-size: 16px; font-weight: 500; color: var(--text-prominent); transition: all 0.3s ease; line-height: 1.2; } .bot-tab-navigator__tab-description { font-size: 12px; color: var(--text-less-prominent); line-height: 1.3; transition: all 0.3s ease; } .bot-tab-navigator { /* Responsive design */ } @media (max-width: 768px) { .bot-tab-navigator__tabs { flex-direction: column; } .bot-tab-navigator__tab { width: 100%; } } @media (max-width: 480px) { .bot-tab-navigator__tab { padding: 12px 16px; gap: 8px; } .bot-tab-navigator__tab-icon { font-size: 24px; } .bot-tab-navigator__tab-label { font-size: 14px; } .bot-tab-navigator__tab-description { font-size: 11px; } } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** * Category Filter Styles * Pill-style filter buttons with color coding */ .bot-category-filter { width: 98%; margin-bottom: 20px; padding: 16px 20px; background: var(--general-section-1); border-radius: 12px; border: 1px solid var(--general-section-2); } .bot-category-filter__label { font-size: 14px; font-weight: 600; color: var(--text-prominent); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; } .bot-category-filter__filters { display: flex; flex-wrap: wrap; gap: 8px; } .bot-category-filter__button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--general-section-2); border: 2px solid transparent; border-radius: 20px; cursor: pointer; transition: all 0.3s ease; font-size: 13px; font-weight: 500; color: var(--text-prominent); white-space: nowrap; /* Hover effect */ } .bot-category-filter__button:hover:not(.bot-category-filter__button--active) { background: var(--general-section-3); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .bot-category-filter__button { /* Active state (color applied via inline style) */ } .bot-category-filter__button--active { font-weight: 600; transform: translateY(-1px); } .bot-category-filter__button--active .bot-category-filter__icon { transform: scale(1.15); } .bot-category-filter__button--active .bot-category-filter__text { color: var(--text-prominent); } .bot-category-filter__button { /* Disabled state */ } .bot-category-filter__button:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .bot-category-filter__icon { font-size: 16px; transition: transform 0.3s ease; flex-shrink: 0; } .bot-category-filter__text { transition: color 0.3s ease; } .bot-category-filter { /* Responsive design */ } @media (max-width: 768px) { .bot-category-filter { padding: 12px 16px; } .bot-category-filter__label { font-size: 13px; margin-bottom: 10px; } .bot-category-filter__filters { gap: 6px; } .bot-category-filter__button { padding: 6px 12px; font-size: 12px; } .bot-category-filter__icon { font-size: 14px; } } @media (max-width: 480px) { .bot-category-filter__filters { justify-content: center; } .bot-category-filter__button { flex: 0 0 auto; } } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /** * Marketplace Grid Styles * * Vertical scrollable grid - shows 2 rows (8 bots) before scrolling */ .marketplace-grid { width: 100%; overflow-y: auto; overflow-x: hidden; padding: 20px; position: relative; /* Add position for proper scrollbar positioning */ /* Custom scrollbar */ } .marketplace-grid::-webkit-scrollbar { width: 8px; } .marketplace-grid::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 4px; } .marketplace-grid::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #6366f1, #4f46e5); border-radius: 4px; } .marketplace-grid::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #4f46e5, #4338ca); } .marketplace-grid { /* Grid Container - 4 columns, auto rows */ } .marketplace-grid__container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-bottom: 20px; align-items: start; /* Align items to start to prevent stretching */ width: 100%; /* Ensure full width */ } .marketplace-grid { /* Loading State */ } .marketplace-grid__loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; gap: 16px; } .marketplace-grid__spinner { width: 48px; height: 48px; border: 4px solid rgba(99, 102, 241, 0.2); border-top-color: #6366f1; border-radius: 50%; animation: spin 0.8s linear infinite; } .marketplace-grid__loading-text { color: #9ca3af; } .marketplace-grid { /* Empty State */ } .marketplace-grid__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; gap: 12px; text-align: center; } .marketplace-grid__empty-icon { font-size: 64px; margin-bottom: 8px; opacity: 0.5; } .marketplace-grid__empty-title { color: #374151; } .marketplace-grid__empty-text { color: #9ca3af; max-width: 400px; } /* Animations */ @keyframes spin { to { transform: rotate(360deg); } } /* Responsive breakpoints */ /* Large desktops - 4 columns (default) */ @media (min-width: 1200px) { .marketplace-grid__container { grid-template-columns: repeat(4, 1fr); gap: 20px; } } /* Medium desktops - 3 columns */ @media (min-width: 900px) and (max-width: 1199px) { .marketplace-grid__container { grid-template-columns: repeat(3, 1fr); gap: 18px; } } /* Small desktops/tablets - 2 columns */ @media (min-width: 600px) and (max-width: 899px) { .marketplace-grid { padding: 16px; } .marketplace-grid__container { grid-template-columns: repeat(2, 1fr); gap: 16px; } } /* Mobile - 1 column */ @media (max-width: 599px) { .marketplace-grid { padding: 12px; } .marketplace-grid__container { grid-template-columns: 1fr; gap: 12px; } } /* Dark theme support */ @media (prefers-color-scheme: dark) { .marketplace-grid::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); } .marketplace-grid__empty-title { color: #f9fafb; } } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ .tab__dashboard__content .apollo-preview-panel--active { display: none; } .apollo_tab__dashboard__header--listed { width: 48%; } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ .bot-dashboard { position: relative; height: calc(100vh - 8.4rem); overflow: hidden; } @media (min-width: 320px) and (max-width: 767px) { .bot-dashboard { height: calc(100vh - 3.4rem); } } .bot-dashboard .toolbar__section { justify-content: end; } @media (min-width: 320px) and (max-width: 767px) { .bot-dashboard .toolbar__section { column-gap: 1rem; } } .bot-dashboard .run-panel__container { height: var(--tab-content-height) !important; position: sticky; /* TODO: need to set global variables for translation */ transform: translateX(367px); transition: all 0.4s; margin-top: 1rem; } .bot-dashboard .run-panel__container--tour-active { transform: translateX(0px) !important; } .bot-dashboard .run-panel__container--tour-active .dc-drawer__toggle-icon--right { transform: rotate(180deg) !important; } @media (min-width: 1024px) { .bot-dashboard .dc-drawer--open { transform: translateX(0px) !important; } } @media (min-width: 320px) and (max-width: 767px) { .bot-dashboard .dc-drawer--open { transform: translateY(calc(-100% + 3.6rem)); } } .db { --icon-height: 2.4rem; --icon-width: 2.4rem; --border-radius: 2.4rem; } .db-sidebar { position: relative; background-color: var(--general-main-1); padding: 2.4rem; height: 100%; } .db-sidebar--block { display: block; } .db-sidebar { display: none; } .db-sidebar__images { background: var(--general-section-6); } .db-info-panel__close-action { position: absolute; right: 1.4rem; top: 1.4rem; height: 2rem; width: 2rem; line-height: 2.3rem; text-align: center; border-radius: 1rem; } .db-info-panel__close-action:hover { cursor: pointer; background: var(--general-section-1); } .db-info-panel__content { cursor: pointer; } .db-info-panel__content:hover { text-decoration: underline; color: var(--button-primary-default); } .tab__dashboard { display: flex; width: 100%; } .tab__dashboard--tour-active { width: calc(100% - 36rem); } @media (min-width: 320px) and (max-width: 767px) { .tab__dashboard--tour-active { width: 100%; } } .tab__dashboard__header { padding: 1.6rem; margin-top: 4.8rem; } .tab__dashboard__header--listed { margin-top: 0.6rem; } @media (min-width: 320px) and (max-width: 767px) { .tab__dashboard__header { height: auto; margin-top: 0; } } .tab__dashboard__header .title { text-align: center; height: 7.2; } @media (min-width: 320px) and (max-width: 767px) { .tab__dashboard__header .title { height: auto; } } .tab__dashboard__header .subtitle { text-align: center; margin-top: 1.6rem; } .tab__dashboard__header .subtitle__has-list { margin-top: 0; text-align: left; } @media (min-width: 320px) and (max-width: 767px) { .tab__dashboard__header .subtitle__has-list { width: 85%; } } .tab__dashboard__content { display: flex; align-items: flex-start; height: var(--tab-content-height); flex-grow: 1; background: var(--general-main-1); overflow: auto; position: relative; } @media (min-width: 1024px) { .tab__dashboard__content { padding: 1.6rem 0 0; } } @media (min-width: 320px) and (max-width: 767px) { .tab__dashboard__content { height: calc(100vh - 19rem); align-items: flex-start; } } .tab__dashboard__content .quick-panel { flex: 1 1 44%; } .tab__dashboard__content .preview-panel { display: none; flex: 1 1 56%; } .tab__dashboard__content .preview-panel--active { display: block; } @media (min-width: 320px) and (max-width: 767px) { .tab__dashboard__content .preview-panel--active { display: none; } } .tab__dashboard__mobile-container { display: flex; align-items: center; justify-content: center; margin: 1.4rem 0; column-gap: 1rem; height: 3.2rem; } .tab__dashboard__mobile-container--minimized { height: 3.6rem; } .tab__dashboard__centered { display: flex; align-items: center; justify-content: center; flex-direction: column; } @media (min-width: 768px) and (max-width: 1023px) { .tab__dashboard__centered { width: 100%; } } @media (min-width: 320px) and (max-width: 767px) { .tab__dashboard__centered { width: 100%; padding: 0 1rem; } } @media (min-width: 1024px) { .tab__dashboard__centered--not-listed { width: 100%; margin-top: 4.8rem; } } .tab__dashboard__centered--listed { align-items: initial; justify-content: flex-start; padding: 0.4rem 2.4rem; height: 100%; } .tab__dashboard__preview { height: calc(100% + 2rem); } @media (min-width: 320px) and (max-width: 767px) { .tab__dashboard__preview { display: none; } } @media (min-width: 768px) and (max-width: 1023px) { .tab__dashboard__preview { display: none; } } .tab__dashboard__preview__retrigger button { background: var(--general-section-1); border-radius: 2.4rem; outline: none; border: none; height: 4rem; padding: 1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; } @media (min-width: 320px) and (max-width: 767px) { .tab__dashboard__preview__retrigger button { width: 3.2rem; height: 3.2rem; padding: 0.8rem; } } .tab__dashboard__preview__retrigger__text { margin-left: 0.4rem; color: var(--text-general); } .tab__dashboard__preview__retrigger__icon { width: var(--icon-width); height: var(--icon-height); } .tab__dashboard__home__retrigger { position: absolute; top: 0; right: 0; padding: 2rem; } .tab__dashboard__home__retrigger button { background: var(--general-section-1); border-radius: 2.4rem; outline: none; border: none; height: 4rem; padding: 1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; } .tab__dashboard__home__retrigger__text { margin-left: 0.4rem; color: var(--text-general); } .tab__dashboard__home__retrigger__icon { width: var(--icon-width); height: var(--icon-height); } @media (min-width: 1024px) { .tab__dashboard__description { text-align: center; margin-bottom: 4rem; } } .tab__dashboard__info-panel { position: relative; background-color: var(--general-main-1); padding: 2.4rem; margin-left: 1.6rem; display: none; height: calc(100vh - 16.7rem); overflow-y: auto; } .tab__dashboard__info-panel--active { display: block; width: 30%; } @media (min-width: 320px) and (max-width: 1023px) { .tab__dashboard__table { width: 100%; } } .tab__dashboard__table--minimized { width: 100%; } .tab__dashboard__table__tiles { display: flex; align-items: flex-start; justify-content: center; word-wrap: break-word; font-size: 1.3rem; text-align: center; } @media (min-width: 320px) and (max-width: 767px) { .tab__dashboard__table__tiles { flex-wrap: wrap; } } .tab__dashboard__table__tiles--minimized { align-items: flex-start; } @media (min-width: 320px) and (max-width: 1023px) { .tab__dashboard__table__tiles--minimized { display: flex; justify-content: space-around; flex-flow: unset; } } .tab__dashboard__table__disabled-card { pointer-events: none; cursor: not-allowed; opacity: 0.6; } .tab__dashboard__table__block { display: flex; align-items: center; justify-content: center; flex-direction: column; padding-right: 2.4rem; } @media (min-width: 320px) and (max-width: 767px) { .tab__dashboard__table__block { padding: 1rem; } } .tab__dashboard__table__block:hover { cursor: pointer; } .tab__dashboard__table__block span { width: 9.1rem; word-wrap: break-word; text-align: center; height: 4.2rem; } @media (min-width: 320px) and (max-width: 767px) { .tab__dashboard__table__block span { height: auto; } } .tab__dashboard__table__block--minimized { width: 6.4rem; } .tab__dashboard__table__block--minimized .dc-text { width: 8rem; text-align: center; } .tab__dashboard__table__block:nth-last-child(2) { padding-right: 0; } .tab__dashboard__table__images { background-color: var(--general-section-1); margin-bottom: 0.8rem; border-radius: 0.8rem; padding: 1.6rem; } @media (min-width: 320px) and (max-width: 767px) { .tab__dashboard__table__images--minimized { width: 6.4rem; height: 6.4rem; padding: 0.8rem; } } .user-guide { position: absolute; right: 1.6rem; top: 1.8rem; z-index: 1; } .user-guide__button { display: flex; align-items: center; justify-content: center; padding: 0.8rem 1.4rem; border: none; outline: none; border-radius: 2.4rem; background-color: var(--general-section-1); } @media (min-width: 320px) and (max-width: 767px) { .user-guide__button { height: 3.2rem; width: 3.2rem; line-height: 3.6rem; text-align: center; padding: 0; } } .user-guide__button:hover { cursor: pointer; } .user-guide__icon { height: 24px; width: 24px; } @media (min-width: 320px) and (max-width: 767px) { .user-guide__icon { height: 16px; width: 16px; } } .user-guide__label { margin-left: 0.4rem; } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /* ======================================== TRADE REPLICATOR - MODERN UI ======================================== */ .main_copy { width: 100%; height: 85vh; padding: 40px 24px; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); display: flex; align-items: center; justify-content: flex-start; flex-direction: column; gap: 32px; overflow-y: auto; /* Enable vertical scrolling */ overflow-x: hidden; /* Hide horizontal overflow */ /* Firefox scrollbar */ scrollbar-width: thin; scrollbar-color: #667eea rgba(255, 255, 255, 0.1); } /* Hero Section */ .replicator-hero { text-align: center; max-width: 600px; animation: fadeInDown 0.6s ease; } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .hero-icon { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 20px; color: #fff; margin-bottom: 20px; box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3); } .hero-title { font-size: 42px; font-weight: 800; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin: 0 0 12px; } .hero-subtitle { font-size: 16px; color: #64748b; margin: 0 0 24px; line-height: 1.6; } .account-type-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px; background: rgba(255, 255, 255, 0.9); border-radius: 50px; font-size: 14px; font-weight: 600; color: #334155; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .badge-dot { width: 8px; height: 8px; background: #10b981; border-radius: 50%; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.9); } } /* Main Card */ .replicator-card { width: 100%; max-width: 900px; background: #ffffff; border-radius: 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1); padding: 40px; animation: fadeInUp 0.6s ease; margin-bottom: 40px; /* Add spacing at bottom for scrolling comfort */ } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Add Token Section */ .add-token-section { margin-bottom: 40px; padding-bottom: 40px; border-bottom: 2px solid #f1f5f9; } .section-title { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 700; color: #1e293b; margin: 0 0 20px; } .section-icon { color: #667eea; font-size: 24px; } .token-input-group { display: flex; gap: 12px; margin-bottom: 12px; } .token-input { flex: 1; padding: 16px 20px; font-size: 15px; border: 2px solid #e2e8f0; border-radius: 12px; outline: none; transition: all 0.3s ease; font-family: "Courier New", monospace; } .token-input:focus { border-color: #667eea; box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1); } .token-input::placeholder { color: #94a3b8; } .add-token-btn { display: flex; align-items: center; gap: 8px; padding: 16px 28px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; border: none; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); } .add-token-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); } .add-token-btn:active { transform: translateY(0); } .input-hint { font-size: 13px; color: #64748b; margin: 0; font-style: italic; } /* Controls Section */ .controls-section { margin-bottom: 40px; padding-bottom: 40px; border-bottom: 2px solid #f1f5f9; } .control-item { display: flex; align-items: center; gap: 20px; padding: 20px; background: #f8fafc; border-radius: 16px; margin-bottom: 20px; } /* Toggle Switch */ .toggle-switch { position: relative; width: 60px; height: 32px; flex-shrink: 0; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: 0.4s; border-radius: 34px; } .toggle-slider:before { position: absolute; content: ""; height: 24px; width: 24px; left: 4px; bottom: 4px; background-color: #fff; transition: 0.4s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .toggle-switch input:checked + .toggle-slider { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(28px); } .control-info { display: flex; flex-direction: column; gap: 4px; flex: 1; } .control-label { font-size: 16px; font-weight: 600; color: #1e293b; } .control-description { font-size: 13px; color: #64748b; } /* Action Buttons */ .action-buttons { display: flex; gap: 12px; } .sync-btn, .create-token-btn-main { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border: 2px solid #e2e8f0; background: #fff; color: #475569; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .sync-btn:hover, .create-token-btn-main:hover { border-color: #667eea; color: #667eea; background: #f8f9ff; } .sync-btn:disabled { opacity: 0.6; cursor: not-allowed; } .spinner { width: 16px; height: 16px; border: 2px solid #e2e8f0; border-top-color: #667eea; border-radius: 50%; animation: spin 0.6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Tokens List Section */ .tokens-list-section { margin-bottom: 24px; } .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .section-header .section-title { margin: 0; display: flex; align-items: center; gap: 12px; } .token-count { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; border-radius: 8px; font-size: 14px; font-weight: 700; } .status-indicator { display: flex; align-items: center; gap: 8px; padding: 6px 16px; background: rgba(16, 185, 129, 0.1); border-radius: 50px; font-size: 13px; font-weight: 600; color: #059669; } .status-dot { width: 6px; height: 6px; background: currentColor; border-radius: 50%; animation: pulse 2s infinite; } /* Tokens Container */ .tokens-container { width: 100%; } .tokens-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; max-height: 400px; overflow-y: auto; padding-right: 8px; } /* Custom Scrollbar */ .tokens-list::-webkit-scrollbar { width: 6px; } .tokens-list::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; } .tokens-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } .tokens-list::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Token Item */ .token { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border: 2px solid #e2e8f0; border-radius: 16px; transition: all 0.4s ease; animation: slideIn 0.4s ease; } @keyframes slideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } .token:hover { border-color: #667eea; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15); transform: translateX(4px); } .token-content { display: flex; align-items: center; gap: 16px; flex: 1; } .token-avatar { width: 40px; height: 40px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; flex-shrink: 0; } .token-details { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; } .token-value { font-family: "Courier New", monospace; font-size: 14px; font-weight: 600; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .token-label { font-size: 12px; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; } .trash-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(239, 68, 68, 0.1); color: #ef4444; border: none; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; flex-shrink: 0; } .trash-btn:hover { background: #ef4444; color: #fff; transform: scale(1.1); } .fall { opacity: 0; transform: translateX(100%) rotate(10deg); } /* Empty State */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; text-align: center; } .empty-icon { color: #cbd5e1; margin-bottom: 20px; opacity: 0.5; } .empty-state h4 { font-size: 18px; font-weight: 700; color: #475569; margin: 0 0 8px; } .empty-state p { font-size: 14px; color: #94a3b8; margin: 0; max-width: 400px; } /* Info Banner */ .info-banner { display: flex; gap: 16px; padding: 20px; background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border-left: 4px solid #f59e0b; border-radius: 12px; } .info-icon { font-size: 24px; flex-shrink: 0; } .info-content { flex: 1; } .info-content strong { display: block; font-size: 14px; color: #78350f; margin-bottom: 4px; } .info-content p { font-size: 13px; color: #92400e; margin: 0; line-height: 1.6; } /* Responsive Design */ @media (max-width: 768px) { .main_copy { padding: 24px 16px; gap: 24px; } .replicator-card { padding: 24px; } .hero-title { font-size: 32px; } .hero-subtitle { font-size: 14px; } .token-input-group { flex-direction: column; } .add-token-btn { width: 100%; justify-content: center; } .action-buttons { flex-direction: column; } .sync-btn, .create-token-btn-main { width: 100%; } .section-header { flex-direction: column; align-items: flex-start; gap: 12px; } .token-value { font-size: 12px; } .control-item { padding: 16px; } } @media (max-width: 480px) { .hero-title { font-size: 28px; } .section-title { font-size: 18px; } .replicator-card { padding: 20px; } .token-avatar { width: 36px; height: 36px; font-size: 14px; } .trash-btn { width: 36px; height: 36px; } } /* Custom Scrollbar for Main Container */ .main_copy::-webkit-scrollbar { width: 10px; } .main_copy::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 10px; } .main_copy::-webkit-scrollbar-thumb { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 10px; } .main_copy::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, #764ba2 0%, #667eea 100%); } /* For Firefox rules moved into the main .main_copy block to avoid duplicate selectors */ /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /* #DFE1E7 */ .main_app { height: 100vh; overflow: auto; } .main_app .top_bar { display: flex; align-items: center; gap: 5rem; margin: 2rem; } .main_app #symbol_options { padding: 8px 20px; border: none; border-radius: 2px; } .no_of_ticks { display: flex; gap: 5px; align-items: center; } .no_of_ticks input { text-align: center; padding: 8px; border-radius: 2px; font-size: 14px; width: 80px; } .no_of_ticks .sync_btn { background: #0ba70b; padding: 1px 16px; border-radius: 4px; cursor: pointer; } .no_of_ticks .sync_btn svg { width: 30px; height: 30px; } .no_of_ticks .sync_btn svg.sync_active { animation: rotate-circle 2s infinite linear; } @keyframes rotate-circle { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .main_app .symbol_price { display: flex; align-items: center; gap: 1.8rem; } .main_app .symbol_price .current_price { font-size: 16px; font-weight: 700; background: #dfe1e7; padding: 10px 30px; border-radius: 3px; } .main_app .top_bar .guide { font-size: 2.8rem; color: #0ba70b; cursor: pointer; } .main_app .top_bar .bot_options { display: flex; flex-direction: column; align-items: baseline; gap: 10px; } .main_app .top_bar .bot_options .tp, .main_app .top_bar .bot_options .sl, .main_app .top_bar .bot_options .active_inactive, .main_app .top_bar .bot_options .copy_demo_trades, .main_app .top_bar .bot_options .account_cr { display: flex; gap: 2rem; } .main_app .top_bar .bot_options .tp input, .main_app .top_bar .bot_options .sl input { font-size: 12px; text-align: center; border: none; font-weight: 800; border-radius: 2px; } .main_app .top_bar .bot_options .account_cr input { font-size: 14px; border: none; border-radius: 2px; } .main_app .rf_ou { display: flex; align-items: center; gap: 1rem; } .analysis_title { font-size: 14px; } .main_app .rf_ou .rise_fall, .main_app .rf_ou .over_under { display: flex; flex-direction: column; align-items: center; padding: 0px 40px 0px 15px; } .main_app .over_under_options { display: flex; align-items: center; width: 100%; gap: 20px; } .main_app .over_under_options .digit_inputs { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-top: 12px; } .main_app .over_under_options .digit_inputs .over_digit, .main_app .over_under_options .digit_inputs .under_digit { display: flex; align-items: center; gap: 10px; font-size: 14px; } .main_app .over_under_options .digit_inputs .over_digit input, .main_app .over_under_options .digit_inputs .under_digit input { padding: 3%; width: 50px; text-align: center; } .main_app .over_under_options .over_oct_container { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; } .main_app .over_under_options .over_oct_container .over_oct { display: flex; align-items: center; gap: 4px; } .main_app .over_under_options .over_oct_container .over_oct .overunder_buy_btn { padding: 0px 10px; background: #008079; border: none; border-radius: 2px; cursor: pointer; } .main_app .over_under_options .over_oct_container .over_under_settings .ct_types_ou { display: flex; flex-direction: column; gap: 2px; } .main_app .over_under_options .over_oct_container .over_oct input { height: 20px; width: 20px; } .main_app .over_under_options .over_oct_container .over_oct .oneclick_amout { display: flex; align-items: center; gap: 4px; } .main_app .over_under_options .over_oct_container .over_oct .oneclick_amout input { width: 70px; padding: 6px 0px; text-align: center; border-radius: 2px; } .main_app .over_under_options .over_oct_container .over_under_settings { display: flex; align-items: center; gap: 4px; } .main_app .over_under_options .over_oct_container .over_under_settings input { width: 48px; padding: 6px 0px; text-align: center; border-radius: 2px; } .main_app .over_under_options .over_oct_container .over_under_settings .martingale, .main_app .over_under_options .over_oct_container .over_under_settings .percentage_value { display: flex; flex-direction: column; align-items: center; gap: 1.5px; } .main_app .line_chart .linechat_oct { display: flex; align-items: center; justify-content: space-between; width: 100%; } .main_app .line_chart .oct_trading_options { display: flex; align-items: center; gap: 5px; } .main_app .line_chart .oct_trading_options .details_options { display: flex; align-items: center; gap: 4px; } .main_app .line_chart .oct_trading_options .details_options input { width: 20px; height: 20px; } .main_app .line_chart .oct_trading_options .details_options .oneclick_amout { display: flex; align-items: center; gap: 3px; font-size: 12px; } .main_app .line_chart .oct_trading_options .details_options .oneclick_amout input { text-align: center; width: 65px; padding: 5px 0px; border-radius: 2px; } .main_app .line_chart .oct_trading_options .rise_fall_buttons { display: flex; align-items: center; gap: 6px; } .main_app .line_chart .oct_trading_options .rise_fall_buttons button { border: none; padding: 3px 8px; border-radius: 3px; cursor: pointer; } .main_app .line_chart .oct_trading_options .rise_fall_buttons .rise_btn { background: #00a79e; } .main_app .line_chart .oct_trading_options .rise_fall_buttons .fall_btn { background: #cc2e3d; } .recharts-responsive-container { font-size: 14px; } .card1 { background: #dfe1e7; width: 320px; height: 269px; display: flex; justify-content: center; align-items: center; border-radius: 6px; } .card2 { background: #dfe1e7; width: 480px; height: 269px; display: flex; justify-content: center; align-items: center; border-radius: 6px; padding: 10px; } .card3 { background: #dfe1e7; width: 600px; height: 269px; display: flex; justify-content: center; align-items: center; border-radius: 6px; padding: 10px; } .pie_diff .pie { display: flex; flex-direction: column; padding: 13px; } .line_chart { display: flex; flex-direction: column; padding: 20px; } .main_app .digit_diff { display: flex; flex-direction: column; justify-content: space-around; } .main_app .pie_diff { display: flex; gap: 1rem; margin-top: 2rem; } .main_app .pie_diff .pie .odd_even_info { display: flex; align-items: center; gap: 4px; flex-direction: column; } .main_app .pie_diff .pie .odd_even_info #contract_types { margin-top: 10px; } .main_app .pie_diff .pie .odd_even_info input[type=checkbox] { height: 20px; width: 20px; margin-top: 10px; } .main_app .pie_diff .pie .odd_even_info .martingale input, .main_app .pie_diff .pie .odd_even_info .percentage_value input { padding: 5px 0px; width: 60px; text-align: center; } .main_app .pie_diff .pie .odd_even_info .odd_even_settings { display: flex; align-items: center; gap: 4px; } .main_app .pie_diff .pie .odd_even_info .analysis_title { margin-top: 20px; } .main_app .pie_diff .pie .odd_even_info .odd_even_settings .martingale, .main_app .pie_diff .pie .odd_even_info .odd_even_settings .percentage_value { display: flex; flex-direction: column; align-items: center; gap: 2px; } .main_app .pie_diff .pie .odd_even_info .tick_stake { display: flex; gap: 2px; } .main_app .pie_diff .pie .odd_even_info .oneclick_amout { display: flex; align-items: center; gap: 4px; } .main_app .pie_diff .pie .odd_even_info .oneclick_amout input { width: 70px; padding: 6px 0px; text-align: center; border-radius: 2px; } .main_app .pie_diff .pie .pie_container { width: 100%; height: 86%; } .main_app .pie_diff .digit_diff .title_oc_trader { display: flex; justify-content: space-between; width: 80%; align-items: center; } .main_app .pie_diff .digit_diff .title_oc_trader .auto_clicker { display: flex; align-items: center; flex-direction: column; gap: 5px; font-size: 12px; } .main_app .pie_diff .digit_diff .title_oc_trader .auto_clicker input { width: 16px; height: 16px; } .main_app .pie_diff .digit_diff .title_oc_trader .oneclick_trader { display: flex; align-items: center; gap: 5px; } .main_app .pie_diff .digit_diff .title_oc_trader .oneclick_trader input { width: 20px; height: 20px; } .main_app .pie_diff .digit_diff .title_oc_trader .oneclick_trader #contract_types { border: none; padding: 2px 5px; border-radius: 2px; } .main_app .pie_diff .digit_diff .title_oc_trader .oneclick_trader #contract_duration { border: none; border-radius: 2px; padding: 2px; } .main_app .pie_diff .digit_diff .title_oc_trader .oneclick_trader .oneclick_amout { display: flex; align-items: center; gap: 3px; font-size: 13px; } .main_app .pie_diff .digit_diff .title_oc_trader .oneclick_trader .oneclick_amout input { width: 75px; padding: 12px 10px; text-align: center; border-radius: 2px; } .main_app .pie_diff .digit_diff .title_oc_trader .oneclick_trader .diff_options { display: flex; flex-direction: column; gap: 2px; } .main_app .pie_diff .digit_diff .custom_prediction { height: 24px !important; width: 38px !important; text-align: center; border-radius: 3px; font-size: 12px; } .main_app .pie_diff .digit_diff .custom_buy_btn { border: none; padding: 4px 10px; background: #00a79e; border-radius: 2px; cursor: pointer; } /* ========== DIFFERSBALLS CSS =============== */ .differs_container { position: relative; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; } .differs_container .progress { position: relative; cursor: pointer; user-select: none; width: 68px; height: 68px; border-radius: 50%; color: #fff; background: #444 linear-gradient(to bottom, transparent 80%, #877c7c 0); transition: all 0.3s ease; } .differs_container .progress.top { background: #444 linear-gradient(to bottom, transparent 80%, #43f94a 0); } .differs_container .progress.less { background: #444 linear-gradient(to bottom, transparent 80%, #fb2929 0); } .differs_container .progress.active { background: #13cfac linear-gradient(to bottom, transparent 80%, transparent 0); transform: scale(1.3); margin: 0px 10px; } .differs_container .progress.active.top { background: #01ac8c linear-gradient(to bottom, transparent 80%, #43f94a 0); } .differs_container .progress.active.less { background: #13cfac linear-gradient(to bottom, transparent 80%, #fb2929 0); } .differs_container .progress h3 { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); font-size: 1.5rem; z-index: 1; font-weight: 500; } .differs_container .progress h4 { position: absolute; top: 54%; left: 54%; font-size: 1rem; transform: translateX(-50%); z-index: 1; font-weight: 500; color: #fff; text-transform: uppercase; } .differs_container .progress:after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #222; } /* Responsive Desktop */ @media (max-height: 660px) { .main_app .pie_diff { height: 70%; } } /* Responsive (Mobile) */ @media (max-width: 720px) { .main_app .top_bar { justify-content: center; display: flex; flex-direction: column; gap: 6px; } .main_app .symbol_price { flex-direction: column; gap: 0.8rem; } .main_app .rf_ou { flex-direction: column; } .line_chart { width: 90%; } .main_app .line_chart .linechat_oct { flex-direction: column; gap: 5px; } .main_app .line_chart .oct_trading_options .rise_fall_buttons button { padding: 6px 12px; } .card3 { height: 27%; } .main_app .pie_diff { flex-direction: column; padding: 15px; margin-top: 0rem; height: 110%; } .pie_diff .pie { width: 100%; } .main_app .digit_diff { width: 100%; height: 33.5%; } .differs_container { display: grid; gap: 30px 4px; grid-template-columns: repeat(5, 1fr); } .differs_container .progress { width: 58px; height: 58px; } .differs_container .progress.active h3 { font-size: 11px; } .differs_container .progress.active h4 { font-size: 8px; } .main_app .pie_diff .digit_diff .title_oc_trader { width: 100%; flex-direction: column; gap: 10px; } } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /* Deriv Market Analyzer - Modern Professional Styling */ .deriv-market-analyzer { width: 100%; max-width: 1400px; margin: 0 auto; padding: 24px; padding-bottom: 60px; /* Extra padding at bottom for scrolling comfort */ background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%); font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif; } /* Header */ .dma-header { margin-bottom: 32px; } .dma-title { display: flex; align-items: center; gap: 12px; margin: 0; } .dma-title-main { font-size: 32px; font-weight: 700; background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .dma-badge { display: inline-block; padding: 4px 12px; background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%); color: #fff; font-size: 14px; font-weight: 600; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); } /* Card Base Styling */ .dma-card { background: #fff; border-radius: 16px; padding: 24px; margin-bottom: 24px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); border: 1px solid rgba(226, 232, 240, 0.8); transition: all 0.3s ease; } .dma-card:hover { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); transform: translateY(-2px); } .dma-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 2px solid #f1f5f9; } .dma-card-icon { font-size: 24px; filter: grayscale(0%); } .dma-card-header h2 { margin: 0; font-size: 20px; font-weight: 600; color: #1e293b; } /* Configuration Card */ .dma-config-card { background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); } .dma-config-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .dma-form-group { display: flex; flex-direction: column; gap: 8px; } .dma-form-group label { font-size: 14px; font-weight: 600; color: #475569; letter-spacing: 0.3px; } .dma-select, .dma-input { padding: 12px 16px; border: 2px solid #e2e8f0; border-radius: 10px; font-size: 15px; font-weight: 500; color: #1e293b; background: #fff; transition: all 0.2s ease; cursor: pointer; } .dma-select:hover, .dma-input:hover { border-color: #cbd5e1; } .dma-select:focus, .dma-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } .dma-helper-text { font-size: 12px; color: #94a3b8; margin-top: 4px; } /* Price Card */ .dma-price-card { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: #fff; text-align: center; } .dma-price-header { margin-bottom: 12px; } .dma-price-label { font-size: 13px; font-weight: 600; letter-spacing: 1.5px; opacity: 0.9; text-transform: uppercase; } .dma-price-main { font-size: 56px; font-weight: 700; margin: 16px 0; text-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); letter-spacing: -1px; } .dma-price-stats { display: flex; justify-content: center; gap: 48px; margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.2); } .dma-stat { display: flex; flex-direction: column; align-items: center; gap: 8px; } .dma-stat-label { font-size: 14px; font-weight: 600; opacity: 0.9; text-transform: uppercase; letter-spacing: 1px; } .dma-stat-value { font-size: 32px; font-weight: 700; } .dma-stat-even .dma-stat-value { color: #60a5fa; } .dma-stat-odd .dma-stat-value { color: #f87171; } /* Pattern Card */ .dma-pattern-card { background: linear-gradient(135deg, #ffffff 0%, #fefce8 100%); } .dma-pattern-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 8px; max-height: 400px; overflow-y: auto; padding: 8px; } .dma-pattern-item { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; border-radius: 50%; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: all 0.2s ease; } .dma-pattern-item:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .dma-pattern-item.even { background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%); color: #fff; border-radius: 50%; } .dma-pattern-item.odd { background: linear-gradient(135deg, #f87171 0%, #ef4444 100%); color: #fff; border-radius: 50%; } .dma-pattern-loading { grid-column: 1/-1; text-align: center; padding: 40px; color: #94a3b8; font-size: 14px; animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* Probability Card */ .dma-probability-card { background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%); } .dma-probability-bars { display: flex; flex-direction: column; gap: 24px; } .dma-prob-bar-container { display: flex; flex-direction: column; gap: 8px; } .dma-prob-label { display: flex; justify-content: space-between; align-items: center; font-weight: 600; color: #1e293b; margin-bottom: 4px; } .dma-prob-percentage { font-size: 18px; font-weight: 700; } .dma-prob-bar-bg { height: 48px; background: #f1f5f9; border-radius: 12px; overflow: hidden; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06); } .dma-prob-bar { height: 100%; border-radius: 12px; transition: width 0.5s ease; display: flex; align-items: center; justify-content: flex-end; padding-right: 16px; font-weight: 700; color: #fff; } .dma-prob-even { background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); } .dma-prob-odd { background: linear-gradient(90deg, #ef4444 0%, #f87171 100%); box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); } /* Trading Probability Guide Card */ .dma-guide-card { background: linear-gradient(135deg, #ffffff 0%, #fef3c7 100%); } .dma-guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; } .dma-guide-section h3 { font-size: 16px; font-weight: 700; color: #1e293b; margin: 0 0 16px; text-align: center; text-transform: uppercase; letter-spacing: 1px; } .dma-prob-table { display: flex; flex-direction: column; gap: 12px; } .dma-prob-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .dma-prob-cell { background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%); color: #fff; padding: 16px; border-radius: 12px; text-align: center; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2); transition: all 0.2s ease; } .dma-prob-cell:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3); } .dma-prob-digit { font-size: 20px; font-weight: 700; margin-bottom: 8px; } .dma-prob-value { font-size: 14px; font-weight: 600; opacity: 0.9; } /* Signal Strength Guide Card */ .dma-signal-card { background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%); } .dma-signal-table { border: 2px solid #e2e8f0; border-radius: 12px; overflow: hidden; margin-bottom: 20px; } .dma-signal-header { display: grid; grid-template-columns: 1fr 1fr 1fr; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: #fff; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; } .dma-signal-header .dma-signal-col { padding: 16px; text-align: center; } .dma-signal-row { display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid #e2e8f0; background: #fff; transition: background 0.2s ease; } .dma-signal-row:last-child { border-bottom: none; } .dma-signal-row:hover { background: #f8fafc; } .dma-signal-col { padding: 16px; text-align: center; font-size: 14px; color: #475569; } .dma-signal-label { font-weight: 700; color: #1e293b; text-align: left; padding-left: 24px; } /* Tip Section */ .dma-tip { display: flex; align-items: flex-start; gap: 12px; padding: 16px; background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); border-radius: 12px; border-left: 4px solid #3b82f6; } .dma-tip-icon { font-size: 20px; flex-shrink: 0; } .dma-tip-text { font-size: 14px; color: #1e40af; line-height: 1.6; font-weight: 500; } /* Mobile Responsiveness */ .deriv-market-analyzer.mobile { padding: 16px; } .deriv-market-analyzer.mobile .dma-title-main { font-size: 24px; } .deriv-market-analyzer.mobile .dma-config-grid { grid-template-columns: 1fr; } .deriv-market-analyzer.mobile .dma-price-main { font-size: 40px; } .deriv-market-analyzer.mobile .dma-price-stats { gap: 24px; } .deriv-market-analyzer.mobile .dma-pattern-grid { grid-template-columns: repeat(auto-fill, minmax(35px, 1fr)); } .deriv-market-analyzer.mobile .dma-guide-grid { grid-template-columns: 1fr; } .deriv-market-analyzer.mobile .dma-signal-header, .deriv-market-analyzer.mobile .dma-signal-row { font-size: 12px; } .deriv-market-analyzer.mobile .dma-signal-col { padding: 12px 8px; } /* Scrollbar Styling */ .dma-pattern-grid::-webkit-scrollbar { width: 8px; } .dma-pattern-grid::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; } .dma-pattern-grid::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } .dma-pattern-grid::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Loading Animation */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Responsive breakpoints */ @media (max-width: 768px) { .dma-prob-row { grid-template-columns: repeat(2, 1fr); } .dma-signal-header, .dma-signal-row { grid-template-columns: 1fr 1fr; } .dma-signal-col:first-child { grid-column: 1/-1; border-bottom: 1px solid #e2e8f0; } } /* Pattern Item Variants */ .dma-pattern-item.rise { background: linear-gradient(135deg, #34d399 0%, #10b981 100%); color: #fff; border-radius: 50%; } .dma-pattern-item.fall { background: linear-gradient(135deg, #f82525 0%, #920303 100%); color: #fff; border-radius: 50%; } /* Fix: a global `.fall` class (e.g. in copy_trader/style.css) applies transform/opacity that hides and displaces these items. Ensure our Rise/Fall badges stay visible and centered. */ .deriv-market-analyzer .dma-pattern-item.fall { transform: none !important; opacity: 1 !important; } .dma-pattern-item.over { background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%); color: #fff; border-radius: 50%; } .dma-pattern-item.under { background: linear-gradient(135deg, #f87171 0%, #ef4444 100%); color: #fff; border-radius: 50%; } /* Digit Circles for Digit Frequency */ .dma-digit-circle { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); transition: transform 0.2s ease; } .dma-digit-circle:hover { transform: scale(1.1); } .dma-digit-0 { background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%); } .dma-digit-1 { background: linear-gradient(135deg, #ef4444 0%, #f87171 100%); } .dma-digit-2 { background: linear-gradient(135deg, #10b981 0%, #34d399 100%); } .dma-digit-3 { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); } .dma-digit-4 { background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%); } .dma-digit-5 { background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%); } .dma-digit-6 { background: linear-gradient(135deg, #14b8a6 0%, #2dd4bf 100%); } .dma-digit-7 { background: linear-gradient(135deg, #f97316 0%, #fb923c 100%); } .dma-digit-8 { background: linear-gradient(135deg, #64748b 0%, #94a3b8 100%); } .dma-digit-9 { background: linear-gradient(135deg, #22c55e 0%, #4ade80 100%); } /* Probability Bar Variants */ .dma-prob-bar.dma-prob-rise { background: linear-gradient(90deg, #10b981 0%, #34d399 100%); } .dma-prob-bar.dma-prob-fall { background: linear-gradient(90deg, #ef4444 0%, #f87171 100%); } .dma-prob-bar.dma-prob-over { background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%); } .dma-prob-bar.dma-prob-under { background: linear-gradient(90deg, #ef4444 0%, #f87171 100%); } /* Stats Variants */ .dma-stat.dma-stat-rise .dma-stat-label { color: #10b981; } .dma-stat.dma-stat-rise .dma-stat-value { color: #10b981; } .dma-stat.dma-stat-fall .dma-stat-label { color: #ef4444; } .dma-stat.dma-stat-fall .dma-stat-value { color: #ef4444; } .dma-stat.dma-stat-over .dma-stat-label { color: #60a5fa; } .dma-stat.dma-stat-over .dma-stat-value { color: #60a5fa; } .dma-stat.dma-stat-under .dma-stat-label { color: #ef4444; } .dma-stat.dma-stat-under .dma-stat-value { color: #ef4444; } .dma-stat.dma-stat-highest .dma-stat-label { color: #60a5fa; } .dma-stat.dma-stat-highest .dma-stat-value { color: #60a5fa; } .dma-stat.dma-stat-lowest .dma-stat-label { color: #ef4444; } .dma-stat.dma-stat-lowest .dma-stat-value { color: #ef4444; } /* Digit Frequency Chart */ .dma-digit-frequency-chart { display: flex; align-items: flex-end; justify-content: space-evenly; gap: 12px; padding: 24px 16px 8px; min-height: 380px; background: transparent; border-radius: 0; margin-top: 0; } .dma-digit-freq-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 80px; } .dma-digit-freq-bar-container { width: 100%; height: 300px; display: flex; align-items: flex-end; position: relative; /* subtle horizontal grid every 25% */ background-image: linear-gradient(to top, rgba(148, 163, 184, 0.2) 1px, transparent 1px); background-size: 100% 25%; } .dma-digit-freq-fill { width: 100%; border-radius: 8px 8px 0 0; transition: height 0.35s ease; position: relative; min-height: 10px; } .dma-digit-freq-value { font-size: 12px; font-weight: 700; color: #334155; margin-bottom: 8px; } .dma-digit-freq-label { font-weight: 700; font-size: 16px; color: #1e293b; margin-top: 4px; } .dma-digit-freq-fill.dma-digit-freq-0 { background: linear-gradient(180deg, #6366f1 0%, #818cf8 100%); } .dma-digit-freq-fill.dma-digit-freq-1 { background: linear-gradient(180deg, #ef4444 0%, #f87171 100%); } .dma-digit-freq-fill.dma-digit-freq-2 { background: linear-gradient(180deg, #10b981 0%, #34d399 100%); } .dma-digit-freq-fill.dma-digit-freq-3 { background: linear-gradient(180deg, #f59e0b 0%, #fbbf24 100%); } .dma-digit-freq-fill.dma-digit-freq-4 { background: linear-gradient(180deg, #8b5cf6 0%, #a78bfa 100%); } .dma-digit-freq-fill.dma-digit-freq-5 { background: linear-gradient(180deg, #ec4899 0%, #f472b6 100%); } .dma-digit-freq-fill.dma-digit-freq-6 { background: linear-gradient(180deg, #14b8a6 0%, #2dd4bf 100%); } .dma-digit-freq-fill.dma-digit-freq-7 { background: linear-gradient(180deg, #f97316 0%, #fb923c 100%); } .dma-digit-freq-fill.dma-digit-freq-8 { background: linear-gradient(180deg, #64748b 0%, #94a3b8 100%); } .dma-digit-freq-fill.dma-digit-freq-9 { background: linear-gradient(180deg, #22c55e 0%, #4ade80 100%); } @media (max-width: 480px) { .dma-card { padding: 16px; } .dma-prob-cell { padding: 12px 8px; } .dma-prob-digit { font-size: 18px; } .dma-prob-value { font-size: 12px; } .dma-chart-container { min-height: 300px; padding: 12px; } .dma-over-under-controls { grid-template-columns: 1fr; padding: 12px; } } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /* Quantum Signal Analyzer - Professional Modern Design */ .quantum-signal-analyzer { max-width: 1400px; margin: 0 auto; padding: 24px; padding-bottom: 60px; /* Extra padding at bottom for scrolling comfort */ background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); min-height: auto; overflow-y: visible; } /* Header Section */ .qsa-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding: 24px; background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); } .qsa-title-section { display: flex; flex-direction: column; gap: 4px; } .qsa-title { margin: 0; font-size: 32px; font-weight: 800; color: #fff; text-shadow: 0 0 30px rgba(59, 130, 246, 0.6); } .qsa-subtitle { font-size: 14px; color: #94a3b8; font-weight: 500; } .qsa-status-badges { display: flex; gap: 12px; align-items: center; } .qsa-status-badge { padding: 8px 16px; border-radius: 24px; font-size: 13px; font-weight: 600; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); } .qsa-status-badge.connected { color: #10b981; border: 2px solid #10b981; } .qsa-status-badge.disconnected { color: #ef4444; border: 2px solid #ef4444; } .qsa-status-badge.analyzing { color: #fbbf24; border: 2px solid #fbbf24; animation: pulse 1.5s infinite; } .qsa-status-badge.complete { color: #10b981; border: 2px solid #10b981; } /* Market Info Card */ .qsa-market-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; } .qsa-info-item { display: flex; flex-direction: column; gap: 8px; padding: 20px; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); transition: all 0.3s ease; } .qsa-info-item:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); transform: translateY(-2px); } .qsa-info-label { font-size: 12px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .qsa-info-value { font-size: 20px; font-weight: 700; color: #1e293b; } .qsa-digit-highlight { color: #3b82f6; font-size: 28px; font-weight: 800; } /* Configuration Panel */ .qsa-config-panel { background: #fff; border-radius: 16px; padding: 24px; margin-bottom: 24px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } .qsa-section-title { margin: 0 0 20px; font-size: 20px; font-weight: 700; color: #1e293b; display: flex; align-items: center; gap: 8px; } .qsa-config-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 20px; } .qsa-form-group { display: flex; flex-direction: column; gap: 8px; } .qsa-form-group label { font-size: 14px; font-weight: 600; color: #475569; } .qsa-intelligence-badge { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); border: 2px solid #3b82f6; border-radius: 10px; animation: glow 2s ease-in-out infinite; } @keyframes glow { 0%, 100% { box-shadow: 0 0 10px rgba(59, 130, 246, 0.3); } 50% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.5); } } .qsa-badge-icon { font-size: 24px; animation: pulse 2s infinite; } .qsa-badge-text { font-size: 15px; font-weight: 700; color: #1e40af; } .qsa-intelligence-desc { margin: 0; font-size: 12px; color: #64748b; line-height: 1.5; } .qsa-select, .qsa-input { padding: 12px 16px; border: 2px solid #e2e8f0; border-radius: 10px; font-size: 15px; font-weight: 500; color: #1e293b; background: #fff; cursor: pointer; transition: all 0.3s ease; } .qsa-select:hover, .qsa-input:hover { border-color: #3b82f6; } .qsa-select:focus, .qsa-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } .qsa-select:disabled, .qsa-input:disabled { opacity: 0.5; cursor: not-allowed; } .qsa-action-row { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding-top: 20px; border-top: 2px solid #f1f5f9; } .qsa-analyze-btn { flex: 1; max-width: 300px; padding: 16px 32px; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: #fff; border: none; border-radius: 12px; font-size: 16px; font-weight: 700; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3); } .qsa-analyze-btn:hover:not(:disabled) { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); box-shadow: 0 6px 24px rgba(59, 130, 246, 0.4); transform: translateY(-2px); } .qsa-analyze-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .qsa-auto-trade-toggle { display: flex; align-items: center; } .qsa-toggle-label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #64748b; cursor: pointer; } .qsa-toggle-label input[type=checkbox] { width: 20px; height: 20px; cursor: pointer; } .qsa-toggle-label input[type=checkbox]:disabled { opacity: 0.5; cursor: not-allowed; } /* Console */ .qsa-console { background: #0f172a; border-radius: 12px; padding: 20px; margin-bottom: 24px; font-family: "Courier New", monospace; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); } .qsa-console-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 2px solid #1e293b; color: #3b82f6; font-size: 14px; font-weight: 700; } .qsa-console-clear { padding: 4px 12px; background: rgba(239, 68, 68, 0.2); color: #ef4444; border: 1px solid #ef4444; border-radius: 6px; font-size: 12px; cursor: pointer; transition: all 0.2s ease; } .qsa-console-clear:hover { background: rgba(239, 68, 68, 0.3); } .qsa-console-messages { max-height: 200px; overflow-y: auto; } .qsa-console-line { color: #10b981; font-size: 13px; margin-bottom: 4px; line-height: 1.6; } .qsa-console-blink { animation: blink 1s infinite; } /* Results Section */ .qsa-results { margin-bottom: 24px; } .qsa-results-actions { display: flex; justify-content: flex-end; gap: 12px; } .qsa-copy-btn { padding: 8px 12px; background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 13px; font-weight: 700; color: #1e293b; cursor: pointer; transition: all 0.2s ease; } .qsa-copy-btn:hover { background: #e2e8f0; } .qsa-results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 20px; margin-top: 20px; } .qsa-result-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; } .qsa-result-card:hover { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); transform: translateY(-4px); } .qsa-card-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border-bottom: 2px solid #e2e8f0; } .qsa-strategy-tag { padding: 6px 12px; background: #3b82f6; color: #fff; border-radius: 8px; font-size: 13px; font-weight: 700; } .qsa-card-body { padding: 20px; } .qsa-result-row { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid #f1f5f9; } .qsa-result-row:last-child { border-bottom: none; padding-bottom: 0; } .qsa-result-label { font-size: 14px; font-weight: 600; color: #64748b; } .qsa-result-value { font-size: 15px; font-weight: 600; color: #1e293b; } .qsa-pattern-text { font-family: "Courier New", monospace; font-size: 13px; color: #3b82f6; } .qsa-confidence-bar { flex: 1; position: relative; height: 24px; background: #f1f5f9; border-radius: 12px; overflow: hidden; margin-left: 12px; } .qsa-confidence-fill { position: absolute; top: 0; left: 0; height: 100%; background: linear-gradient(90deg, #10b981 0%, #059669 100%); transition: width 0.5s ease; } .qsa-confidence-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 12px; font-weight: 700; color: #1e293b; z-index: 1; } .qsa-signal-badge { padding: 6px 16px; border-radius: 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .qsa-signal-strong { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: #fff; } .qsa-signal-moderate { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); color: #fff; } .qsa-signal-weak { background: linear-gradient(135deg, #64748b 0%, #475569 100%); color: #fff; } .qsa-recommendation-row { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); padding: 16px; margin: 12px -20px 0; border-top: 2px solid #3b82f6; } .qsa-result-recommendation { font-size: 16px; font-weight: 700; color: #1e40af; } .qsa-card-footer { padding: 16px 20px; background: #f8fafc; border-top: 2px solid #e2e8f0; } .qsa-trade-btn { width: 100%; padding: 12px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: #fff; border: none; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.3s ease; } .qsa-trade-btn:hover:not(:disabled) { background: linear-gradient(135deg, #059669 0%, #047857 100%); transform: translateY(-2px); } .qsa-trade-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* No Signals State */ .qsa-no-signals { text-align: center; padding: 60px 20px; background: #fff; border-radius: 16px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } .qsa-no-signals-icon { font-size: 64px; margin-bottom: 20px; } .qsa-no-signals h3 { margin: 0 0 12px; font-size: 24px; font-weight: 700; color: #1e293b; } .qsa-no-signals p { margin: 8px 0; font-size: 15px; color: #64748b; line-height: 1.6; } /* Info Banner */ .qsa-info-banner { display: flex; align-items: center; gap: 16px; padding: 20px; background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); border-radius: 12px; border-left: 4px solid #3b82f6; } .qsa-info-icon { font-size: 24px; } .qsa-info-text { font-size: 14px; color: #1e40af; line-height: 1.6; } .qsa-info-text strong { font-weight: 700; color: #1e3a8a; } /* Mini Charts */ .qsa-mini-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 20px; } .qsa-mini-card { background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); } .qsa-mini-title { font-size: 13px; font-weight: 700; color: #334155; margin-bottom: 10px; } .qsa-sparkline { width: 100%; height: 48px; } .qsa-mini-bars { display: grid; grid-template-columns: repeat(10, 1fr); align-items: end; gap: 8px; height: 120px; } .qsa-mini-bar { display: flex; flex-direction: column; align-items: center; gap: 6px; } .qsa-mini-bar-fill { width: 100%; min-height: 8px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #93c5fd 0%, #3b82f6 100%); transition: height 0.3s ease; } .qsa-mini-bar-label { font-size: 12px; font-weight: 700; color: #475569; } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } } @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Responsive Design */ @media (max-width: 768px) { .quantum-signal-analyzer { padding: 16px; } .qsa-header { flex-direction: column; gap: 16px; text-align: center; } .qsa-title { font-size: 24px; } .qsa-config-grid { grid-template-columns: 1fr; } .qsa-results-grid { grid-template-columns: 1fr; } .qsa-action-row { flex-direction: column; } .qsa-analyze-btn { max-width: 100%; } } @charset "UTF-8"; /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /* Circles Analyzer - Professional Design */ .circles-analyzer { width: 100%; max-width: 1400px; margin: 0 auto; padding: 24px; padding-bottom: 60px; background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%); font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif; } /* Trading Guide Card */ .ca-guide-card { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); border-radius: 12px; margin-bottom: 20px; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); overflow: hidden; } .ca-guide-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; cursor: pointer; user-select: none; transition: background 0.2s; } .ca-guide-header:hover { background: rgba(255, 255, 255, 0.1); } .ca-guide-icon { font-size: 24px; } .ca-guide-header h3 { flex: 1; margin: 0; font-size: 18px; font-weight: 700; color: #fff; letter-spacing: 0.5px; } .ca-guide-toggle { font-size: 14px; color: #fff; font-weight: bold; } .ca-guide-content { background: #fff; padding: 24px; border-top: 2px solid rgba(255, 255, 255, 0.2); } .ca-guide-section { margin-bottom: 20px; } .ca-guide-section:last-child { margin-bottom: 0; } .ca-guide-section h4 { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: #1e293b; display: flex; align-items: center; gap: 8px; } .ca-guide-section ul { margin: 0; padding-left: 20px; list-style: none; } .ca-guide-section li { margin-bottom: 8px; font-size: 14px; line-height: 1.6; color: #475569; position: relative; padding-left: 20px; } .ca-guide-section li:before { content: "•"; position: absolute; left: 0; color: #3b82f6; font-weight: bold; font-size: 18px; } .ca-guide-section li strong { color: #1e293b; font-weight: 600; } .ca-guide-footer { margin-top: 20px; padding-top: 20px; border-top: 2px solid #e2e8f0; text-align: center; } .ca-guide-link { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: #fff; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 14px; transition: all 0.3s; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2); } .ca-guide-link:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); } /* Configuration Card */ .ca-config-card { background: #fff; border-radius: 12px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .ca-config-row { display: flex; gap: 20px; align-items: flex-end; } .ca-form-group { flex: 1; display: flex; flex-direction: column; gap: 8px; } .ca-form-group label { font-size: 13px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.5px; } .ca-select, .ca-input { padding: 10px 14px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 14px; font-weight: 500; transition: all 0.2s; background: #fff; } .ca-select:focus, .ca-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } .ca-input { width: 120px; } /* Price Card with Circles */ .ca-price-card { background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); border-radius: 16px; padding: 32px; margin-bottom: 24px; text-align: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); border: 1px solid #e2e8f0; } .ca-price-label { font-size: 13px; font-weight: 700; color: #64748b; letter-spacing: 1.5px; margin-bottom: 8px; } .ca-price-value { font-size: 48px; font-weight: 800; color: #ff444f; margin-bottom: 32px; text-shadow: 0 2px 4px rgba(255, 68, 79, 0.1); } /* Digit Frequency Circles */ .ca-circles-container { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; } .ca-circle { width: 90px; height: 90px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; position: relative; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .ca-circle:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); } .ca-circle-active { transform: scale(1.1); box-shadow: 0 8px 32px rgba(59, 130, 246, 0.4); animation: pulse 1.5s infinite; } /* Triangle pointer below active circle */ .ca-circle-active:after { content: ""; position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 12px solid #13cfac; filter: drop-shadow(0 2px 4px rgba(19, 207, 172, 0.4)); animation: triangle-pulse 1.5s infinite; } @keyframes pulse { 0%, 100% { transform: scale(1.1); } 50% { transform: scale(1.15); } } @keyframes triangle-pulse { 0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; } 50% { transform: translateX(-50%) translateY(2px); opacity: 0.8; } } .ca-circle-digit { font-size: 28px; font-weight: 900; color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .ca-circle-percentage { font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.95); margin-top: 4px; } /* Individual Digit Colors - All Grey Base */ .ca-circle-0, .ca-circle-1, .ca-circle-2, .ca-circle-3, .ca-circle-4, .ca-circle-5, .ca-circle-6, .ca-circle-7, .ca-circle-8, .ca-circle-9 { background: linear-gradient(135deg, #444 0%, #444 100%); } /* Highest Frequency Indicator - Green pointer at bottom */ .ca-circle.ca-circle-top { background: linear-gradient(to bottom, #444 0%, #444 80%, #43f94a 80%, #43f94a 100%) !important; } /* Lowest Frequency Indicator - Red pointer at bottom */ .ca-circle.ca-circle-less { background: linear-gradient(to bottom, #444 0%, #444 80%, #fb2929 80%, #fb2929 100%) !important; } /* Active state with indicators */ .ca-circle-active.ca-circle-top { background: linear-gradient(to bottom, #13cfac 0%, #01ac8c 80%, #43f94a 80%, #43f94a 100%) !important; } .ca-circle-active.ca-circle-less { background: linear-gradient(to bottom, #13cfac 0%, #13cfac 80%, #fb2929 80%, #fb2929 100%) !important; } /* Analysis Card */ .ca-analysis-card { background: #fff; border-radius: 16px; padding: 28px; margin-bottom: 20px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); border: 1px solid #e2e8f0; transition: all 0.3s; } .ca-analysis-card:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); transform: translateY(-2px); } .ca-analysis-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 2px solid #f1f5f9; } .ca-analysis-header h3 { margin: 0; font-size: 18px; font-weight: 700; color: #1e293b; } .ca-streak-badge { background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; color: #475569; border: 1px solid #cbd5e1; } /* Helper Text */ .ca-helper-text { text-align: center; font-size: 13px; color: #64748b; margin-bottom: 16px; padding: 12px; background: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0; font-weight: 500; } /* Threshold/Digit Selector */ .ca-threshold-selector { display: flex; gap: 8px; justify-content: center; margin-bottom: 24px; } .ca-digit-btn { width: 44px; height: 44px; border-radius: 8px; border: 2px solid #e2e8f0; background: #fff; font-size: 16px; font-weight: 700; color: #64748b; cursor: pointer; transition: all 0.2s; } .ca-digit-btn:hover { border-color: #94a3b8; background: #f8fafc; } .ca-digit-btn.active { border-color: #3b82f6; background: #eff6ff; color: #3b82f6; } .ca-digit-btn-highlight { border-color: #3b82f6 !important; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); } /* Probability Display */ .ca-probability-display { display: flex; gap: 16px; margin-bottom: 16px; } .ca-prob-section { flex: 1; padding: 16px; border-radius: 12px; text-align: center; } .ca-prob-over { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border: 2px solid #6ee7b7; } .ca-prob-under { background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%); border: 2px solid #fca5a5; } .ca-prob-matches { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); border: 2px solid #93c5fd; } .ca-prob-differs { background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%); border: 2px solid #fb923c; } .ca-prob-even { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); border: 2px solid #93c5fd; } .ca-prob-odd { background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%); border: 2px solid #f87171; } .ca-prob-rise { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); border: 2px solid #6ee7b7; } .ca-prob-fall { background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%); border: 2px solid #f87171; } .ca-prob-label { font-size: 13px; font-weight: 600; color: #475569; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; } .ca-prob-percentage { font-size: 28px; font-weight: 800; color: #1e293b; } /* Probability Bars */ .ca-prob-bars { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; } .ca-prob-bar-bg { height: 32px; background: #f1f5f9; border-radius: 8px; overflow: hidden; position: relative; } .ca-prob-bar { height: 100%; transition: width 0.5s ease; border-radius: 8px; } .ca-bar-over { background: linear-gradient(90deg, #10b981 0%, #059669 100%); } .ca-bar-under { background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%); } .ca-bar-matches { background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%); } .ca-bar-differs { background: linear-gradient(90deg, #f97316 0%, #ea580c 100%); } .ca-bar-even { background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%); } .ca-bar-odd { background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%); } .ca-bar-rise { background: linear-gradient(90deg, #10b981 0%, #059669 100%); } .ca-bar-fall { background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%); } /* Pattern List */ .ca-pattern-list { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .ca-pattern-badge { padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 700; color: #fff; min-width: 36px; text-align: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .ca-badge-over { background: linear-gradient(135deg, #10b981 0%, #059669 100%); } .ca-badge-under { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); } .ca-badge-matches { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); } .ca-badge-differs { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); } .ca-badge-even { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); } .ca-badge-odd { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); } .ca-badge-rise { background: linear-gradient(135deg, #10b981 0%, #059669 100%); } .ca-badge-fall { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); } .ca-more-btn { padding: 8px 16px; border-radius: 8px; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3); } .ca-more-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); } /* Mobile Responsive */ @media (max-width: 768px) { .circles-analyzer { padding: 16px; } .ca-config-row { flex-direction: column; gap: 16px; } .ca-circles-container { gap: 12px; } .ca-circle { width: 70px; height: 70px; } .ca-circle-digit { font-size: 22px; } .ca-circle-percentage { font-size: 9px; } .ca-price-value { font-size: 36px; } .ca-analysis-header { flex-direction: column; align-items: flex-start; gap: 12px; } .ca-threshold-selector { gap: 6px; } .ca-digit-btn { width: 36px; height: 36px; font-size: 14px; } .ca-probability-display { flex-direction: column; gap: 12px; } .ca-prob-percentage { font-size: 24px; } } @charset "UTF-8"; /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /* Trading Guide - Professional Design */ .trading-guide { width: 100%; max-width: 1200px; margin: 0 auto; padding: 24px; padding-bottom: 60px; background: #f8f9fa; font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif; } /* Header */ .tg-header { text-align: center; padding: 40px 20px; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); border-radius: 16px; margin-bottom: 32px; box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3); } .tg-title { font-size: 42px; font-weight: 900; color: #fff; margin: 0 0 12px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .tg-subtitle { font-size: 18px; color: rgba(255, 255, 255, 0.95); margin: 0; font-weight: 500; } /* Sections */ .tg-section { background: #fff; border-radius: 12px; padding: 32px; margin-bottom: 24px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .tg-section.tg-highlight { background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%); border: 2px solid #3b82f6; } .tg-section-title { font-size: 28px; font-weight: 800; color: #1e293b; margin: 0 0 24px; padding-bottom: 16px; border-bottom: 3px solid #3b82f6; } /* Tools Grid */ .tg-tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .tg-tool-card { background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 2px solid #e2e8f0; border-radius: 12px; padding: 24px; transition: all 0.3s; } .tg-tool-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); border-color: #3b82f6; } .tg-tool-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .tg-tool-icon { font-size: 32px; } .tg-tool-header h3 { font-size: 20px; font-weight: 700; color: #1e293b; margin: 0; } .tg-tool-desc { font-size: 15px; color: #475569; margin: 0 0 16px; } .tg-tool-features { list-style: none; padding: 0; margin: 0 0 16px; } .tg-tool-features li { font-size: 14px; color: #64748b; padding: 8px 0 8px 24px; position: relative; } .tg-tool-features li:before { content: "✓"; position: absolute; left: 0; color: #10b981; font-weight: bold; font-size: 16px; } .tg-tool-rating { margin-top: 16px; padding-top: 16px; border-top: 1px solid #e2e8f0; } /* Badges */ .tg-badge { display: inline-block; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .tg-badge-beginner { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: #fff; } .tg-badge-expert { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: #fff; } .tg-badge-success { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: #fff; } .tg-badge-primary { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: #fff; } .tg-badge-warning { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: #fff; } .tg-badge-danger { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: #fff; } .tg-badge-safe { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); color: #fff; } .tg-badge-adjustable { background: linear-gradient(135deg, #ec4899 0%, #db2777 100%); color: #fff; } .tg-badge-secondary { background: #64748b; color: #fff; } /* Circle Indicators */ .tg-indicators-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; } .tg-indicator { text-align: center; } .tg-indicator-visual { width: 90px; height: 90px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 900; color: #fff; margin: 0 auto 16px; position: relative; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .tg-grey-circle { background: #444; } .tg-cyan-circle { background: #13cfac; animation: pulse-circle 1.5s infinite; } @keyframes pulse-circle { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .tg-triangle { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-size: 24px; color: #13cfac; } .tg-green-bottom { background: linear-gradient(to bottom, #444 0%, #444 80%, #43f94a 80%, #43f94a 100%); } .tg-red-bottom { background: linear-gradient(to bottom, #444 0%, #444 80%, #fb2929 80%, #fb2929 100%); } .tg-indicator h4 { font-size: 16px; font-weight: 700; color: #1e293b; margin: 0 0 8px; } .tg-indicator p { font-size: 14px; color: #64748b; margin: 0; line-height: 1.5; } /* Strategies */ .tg-strategy { background: #f8f9fa; border-radius: 12px; padding: 24px; margin-bottom: 24px; border: 2px solid #e2e8f0; } .tg-strategy-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; } .tg-strategy-header h3 { font-size: 22px; font-weight: 800; color: #1e293b; margin: 0; } .tg-strategy-meta { display: flex; gap: 8px; flex-wrap: wrap; } .tg-strategy-content { display: grid; gap: 20px; } .tg-strategy-section h4 { font-size: 16px; font-weight: 700; color: #1e293b; margin: 0 0 12px; } .tg-strategy-section ul { margin: 0; padding-left: 20px; } .tg-strategy-section li { font-size: 14px; color: #475569; margin-bottom: 8px; line-height: 1.6; } .tg-strategy-section p { font-size: 14px; color: #475569; margin: 0; line-height: 1.6; } .tg-example { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); border-left: 4px solid #3b82f6; padding: 16px; border-radius: 8px; font-size: 14px; line-height: 1.8; color: #1e293b; } /* Money Management */ .tg-money-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .tg-money-card { background: #fff; border: 2px solid #e2e8f0; border-radius: 12px; padding: 20px; } .tg-money-card h4 { font-size: 18px; font-weight: 700; color: #1e293b; margin: 0 0 16px; } .tg-code { background: #1e293b; color: #10b981; padding: 16px; border-radius: 8px; font-family: "Courier New", monospace; font-size: 13px; line-height: 1.8; } .tg-money-card ul { margin: 0; padding-left: 20px; } .tg-money-card li { font-size: 14px; color: #475569; margin-bottom: 10px; line-height: 1.6; } /* Workflow */ .tg-workflow { display: grid; gap: 24px; } .tg-workflow-level { background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 2px solid #e2e8f0; border-radius: 12px; padding: 24px; } .tg-workflow-level h3 { font-size: 20px; font-weight: 700; color: #1e293b; margin: 0 0 16px; } .tg-workflow-level ol { margin: 0; padding-left: 24px; } .tg-workflow-level li { font-size: 14px; color: #475569; margin-bottom: 12px; line-height: 1.6; } /* Performance */ .tg-performance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .tg-performance-card { background: #fff; border: 3px solid #e2e8f0; border-radius: 12px; padding: 24px; position: relative; transition: all 0.3s; } .tg-performance-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } .tg-performance-card.tg-recommended { border-color: #3b82f6; background: linear-gradient(135deg, #dbeafe 0%, #ffffff 100%); } .tg-recommended-badge { position: absolute; top: -12px; right: 20px; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: #fff; padding: 6px 16px; border-radius: 20px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; } .tg-performance-card h4 { font-size: 20px; font-weight: 700; color: #1e293b; margin: 0 0 8px; } .tg-strategy-desc { font-size: 13px; color: #64748b; margin: 0 0 20px; } .tg-metric { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #e2e8f0; } .tg-metric:last-child { border-bottom: none; } .tg-metric-label { font-size: 14px; color: #64748b; font-weight: 600; } .tg-metric-value { font-size: 18px; font-weight: 800; color: #1e293b; } .tg-metric-value.tg-green { color: #10b981; } /* Mistakes */ .tg-mistakes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .tg-mistake { background: #fff; border: 2px solid #fee2e2; border-radius: 12px; padding: 20px; } .tg-mistake h4 { font-size: 16px; font-weight: 700; color: #dc2626; margin: 0 0 12px; } .tg-mistake p { font-size: 14px; color: #64748b; margin: 0 0 8px; line-height: 1.6; } .tg-correct { color: #10b981 !important; font-weight: 600 !important; } /* Checklist */ .tg-checklist h4 { font-size: 18px; font-weight: 700; color: #1e293b; margin: 0 0 16px; } .tg-checklist-items { list-style: none; padding: 0; margin: 0; } .tg-checklist-items li { font-size: 15px; color: #475569; padding: 12px 16px 12px 40px; margin-bottom: 8px; background: #fff; border: 2px solid #e2e8f0; border-radius: 8px; position: relative; } .tg-checklist-items li:before { content: "☐"; position: absolute; left: 12px; font-size: 20px; color: #3b82f6; } .tg-priority { margin-top: 32px; padding: 24px; background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border-left: 4px solid #f59e0b; border-radius: 8px; } .tg-priority h4 { font-size: 18px; font-weight: 700; color: #1e293b; margin: 0 0 16px; } .tg-priority ol { margin: 0 0 16px; padding-left: 24px; } .tg-priority li { font-size: 15px; color: #475569; margin-bottom: 8px; } .tg-highlight-text { font-size: 16px; font-weight: 700; color: #1e293b; margin: 0; } /* Footer */ .tg-footer { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); border-radius: 16px; padding: 40px; color: #fff; text-align: center; } .tg-footer h2 { font-size: 32px; font-weight: 800; color: #fff; margin: 0 0 32px; } .tg-tips-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-bottom: 32px; } .tg-tip { background: rgba(255, 255, 255, 0.1); padding: 16px; border-radius: 8px; font-size: 14px; line-height: 1.6; text-align: left; border: 1px solid rgba(255, 255, 255, 0.2); } .tg-quote { background: rgba(255, 255, 255, 0.1); padding: 32px; border-radius: 12px; border-left: 4px solid #3b82f6; margin: 32px 0; } .tg-quote p { font-size: 18px; font-style: italic; margin: 0 0 16px; line-height: 1.8; } .tg-quote-author { font-size: 14px !important; font-style: normal !important; color: rgba(255, 255, 255, 0.8); } .tg-cta { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); padding: 32px; border-radius: 12px; box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4); } .tg-cta h3 { font-size: 28px; font-weight: 800; color: #fff; margin: 0 0 12px; } .tg-cta p { font-size: 16px; margin: 0 0 8px; } .tg-small { font-size: 14px !important; color: rgba(255, 255, 255, 0.9); } /* Responsive */ @media (max-width: 768px) { .trading-guide { padding: 16px; } .tg-title { font-size: 32px; } .tg-subtitle { font-size: 16px; } .tg-section { padding: 20px; } .tg-section-title { font-size: 24px; } .tg-tools-grid, .tg-indicators-grid, .tg-money-grid, .tg-performance-grid, .tg-mistakes-grid, .tg-tips-grid { grid-template-columns: 1fr; } .tg-strategy-header { flex-direction: column; align-items: flex-start; } } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /* Deriv Signal Generator Styles */ .deriv-signal-generator { width: 100%; max-width: 1200px; margin: 0 auto; padding: 24px; } /* Header */ .dsg-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } .dsg-header h2 { font-size: 28px; font-weight: 700; color: #fff; margin: 0; } .dsg-connection { font-size: 14px; font-weight: 600; padding: 8px 16px; border-radius: 20px; background: rgba(255, 255, 255, 0.1); } .dsg-connection.connected { background: rgba(0, 255, 136, 0.2); color: #00ff88; } .dsg-connection.disconnected { background: rgba(255, 68, 68, 0.2); color: #ff4444; } /* Market Selector */ .dsg-market-selector { margin-bottom: 24px; } .dsg-market-selector label { display: block; font-size: 14px; color: rgba(255, 255, 255, 0.7); margin-bottom: 8px; } .dsg-market-selector select { width: 100%; padding: 12px 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; color: #fff; font-size: 16px; cursor: pointer; transition: all 0.3s ease; } .dsg-market-selector select:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); } /* Trade Type Tabs */ .dsg-trade-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; } .dsg-tab { padding: 14px 20px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; color: rgba(255, 255, 255, 0.7); font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .dsg-tab:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); } .dsg-tab.active { background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(0, 255, 136, 0.2)); border-color: #00d4ff; color: #fff; } /* Countdown Card */ .dsg-countdown-card { background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(0, 255, 136, 0.1)); border: 1px solid rgba(0, 212, 255, 0.3); border-radius: 16px; padding: 24px; margin-bottom: 24px; text-align: center; } .dsg-countdown-label { font-size: 14px; color: rgba(255, 255, 255, 0.6); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; } /* Signal Validity Card */ .dsg-validity-card { background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(0, 255, 136, 0.1)); border: 1px solid rgba(0, 212, 255, 0.3); border-radius: 16px; padding: 24px; margin-bottom: 24px; text-align: center; } .dsg-validity-header { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 16px; } .dsg-validity-icon { font-size: 24px; } .dsg-validity-label { font-size: 14px; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; letter-spacing: 1px; } .dsg-validity-time { font-size: 56px; font-weight: 700; color: #00d4ff; margin-bottom: 16px; font-family: "Monaco", "Courier New", monospace; text-shadow: 0 0 20px rgba(0, 212, 255, 0.5); } .dsg-validity-bar { height: 12px; background: rgba(255, 255, 255, 0.1); border-radius: 6px; overflow: hidden; margin-bottom: 12px; } .dsg-validity-fill { height: 100%; transition: width 1s linear, background 0.3s ease; border-radius: 6px; } .dsg-validity-subtext { font-size: 13px; color: rgba(255, 255, 255, 0.6); font-weight: 500; } /* Signal Card */ .dsg-signal-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 24px; margin-bottom: 24px; } .dsg-signal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; } .dsg-signal-item { display: flex; flex-direction: column; gap: 8px; } .dsg-label { font-size: 12px; color: rgba(255, 255, 255, 0.6); text-transform: uppercase; letter-spacing: 1px; } .dsg-value { font-size: 24px; font-weight: 700; color: #fff; } .dsg-value.entry-point { color: #00d4ff; } .dsg-value.prediction { padding: 8px 16px; border-radius: 8px; text-align: center; font-size: 18px; } .dsg-value.prediction.over { background: rgba(0, 255, 136, 0.2); color: #00ff88; } .dsg-value.prediction.under { background: rgba(255, 68, 68, 0.2); color: #ff4444; } .dsg-value.prediction.even { background: rgba(0, 212, 255, 0.2); color: #00d4ff; } .dsg-value.prediction.odd { background: rgba(255, 165, 0, 0.2); color: #ffa500; } .dsg-value.prediction.rise { background: rgba(0, 255, 136, 0.2); color: #00ff88; } .dsg-value.prediction.fall { background: rgba(255, 68, 68, 0.2); color: #ff4444; } .dsg-signal-item.confidence { grid-column: span 2; } .dsg-confidence-bar { height: 32px; background: rgba(255, 255, 255, 0.1); border-radius: 16px; overflow: hidden; position: relative; } .dsg-confidence-fill { height: 100%; background: linear-gradient(90deg, #00d4ff, #00ff88); transition: width 0.5s ease; } .dsg-confidence-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; font-weight: 700; color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); } /* Trade Execution Section */ .dsg-execution-section { background: linear-gradient(135deg, rgba(0, 212, 255, 0.05), rgba(0, 255, 136, 0.05)); border: 1px solid rgba(0, 212, 255, 0.2); border-radius: 16px; padding: 28px; margin-bottom: 24px; } .dsg-execution-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 16px; } .dsg-execution-header h3 { font-size: 24px; font-weight: 700; color: #fff; margin: 0; } .dsg-execution-badge { background: rgba(0, 212, 255, 0.15); border: 1px solid rgba(0, 212, 255, 0.3); padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; color: #00d4ff; } .dsg-execution-guide { display: flex; flex-direction: column; gap: 24px; } .dsg-guide-section { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 20px; } .dsg-guide-label { font-size: 16px; font-weight: 700; color: #00d4ff; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .dsg-guide-info { font-size: 14px; color: rgba(255, 255, 255, 0.8); line-height: 1.6; } .dsg-guide-info strong { color: #00ff88; font-weight: 600; } .dsg-execution-params { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } .dsg-param-item { display: flex; justify-content: space-between; align-items: center; padding: 12px; background: rgba(255, 255, 255, 0.03); border-radius: 8px; gap: 12px; } .dsg-param-item.full-width { grid-column: 1/-1; } .dsg-param-label { font-size: 13px; color: rgba(255, 255, 255, 0.6); font-weight: 500; } .dsg-param-value { font-size: 14px; color: #fff; font-weight: 600; } .dsg-param-value.highlight { color: #00d4ff; font-size: 16px; } .dsg-param-value.prediction { padding: 4px 12px; border-radius: 6px; font-weight: 700; text-transform: uppercase; } .dsg-param-value.prediction.over, .dsg-param-value.prediction.rise { background: rgba(0, 255, 136, 0.2); color: #00ff88; } .dsg-param-value.prediction.under, .dsg-param-value.prediction.fall { background: rgba(255, 68, 68, 0.2); color: #ff4444; } .dsg-param-value.prediction.even { background: rgba(0, 212, 255, 0.2); color: #00d4ff; } .dsg-param-value.prediction.odd { background: rgba(255, 170, 0, 0.2); color: #ffaa00; } .dsg-param-value.timer { font-family: "Monaco", "Courier New", monospace; color: #00d4ff; } .dsg-param-value.warning { color: #ffaa00; font-size: 13px; } .dsg-execution-action { margin-top: 24px; text-align: center; } .dsg-copy-params-btn { width: 100%; padding: 16px; background: linear-gradient(135deg, #00d4ff, #00ff88); color: #0a0e27; border: none; border-radius: 12px; font-size: 16px; font-weight: 700; cursor: pointer; transition: all 0.3s ease; } .dsg-copy-params-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 212, 255, 0.4); } .dsg-copy-params-btn:active { transform: translateY(0); } .dsg-quick-note { font-size: 12px; color: rgba(255, 255, 255, 0.5); margin-top: 12px; } .dsg-controls-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; } .dsg-control-item { display: flex; flex-direction: column; gap: 8px; } .dsg-control-item label { font-size: 14px; color: rgba(255, 255, 255, 0.7); } .dsg-input { width: 100%; padding: 12px 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; color: #fff; font-size: 16px; transition: all 0.3s ease; } .dsg-input:focus { outline: none; background: rgba(255, 255, 255, 0.08); border-color: #00d4ff; } .dsg-input:read-only { cursor: not-allowed; opacity: 0.7; } /* Run Button */ .dsg-run-btn { width: 100%; padding: 16px 32px; background: linear-gradient(135deg, #00d4ff, #00ff88); border: none; border-radius: 12px; color: #000; font-size: 18px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px; transition: all 0.3s ease; } .dsg-run-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 212, 255, 0.4); } .dsg-run-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .dsg-run-icon { font-size: 20px; } /* Loading Notice */ .dsg-loading-notice { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; text-align: center; } .dsg-loading-spinner { width: 40px; height: 40px; border: 4px solid rgba(255, 255, 255, 0.1); border-top-color: #00d4ff; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 16px; } @keyframes spin { to { transform: rotate(360deg); } } .dsg-loading-notice p { font-size: 16px; color: rgba(255, 255, 255, 0.7); } /* Responsive */ @media (max-width: 768px) { .deriv-signal-generator { padding: 16px; } .dsg-header h2 { font-size: 22px; } .dsg-trade-tabs { grid-template-columns: 1fr; } .dsg-countdown-time { font-size: 36px; } .dsg-signal-grid { grid-template-columns: 1fr; } .dsg-signal-item.confidence { grid-column: span 1; } .dsg-controls-grid { grid-template-columns: 1fr; } } /* Enhanced Features CSS */ /* Header Controls */ .dsg-header-controls { display: flex; align-items: center; gap: 16px; } .dsg-market-info { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: rgba(255, 255, 255, 0.05); border-radius: 8px; } .dsg-market-label { font-size: 12px; color: rgba(255, 255, 255, 0.6); } .dsg-market-value { font-size: 14px; font-weight: 600; color: #00d4ff; } /* Multi-Signal Toggle */ .dsg-multi-signal-toggle { padding: 10px 20px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; color: rgba(255, 255, 255, 0.8); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .dsg-multi-signal-toggle:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); } .dsg-multi-signal-toggle.active { background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(0, 255, 136, 0.2)); border-color: #00d4ff; color: #fff; } /* Pattern Strength */ .dsg-pattern-strength { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px; background: rgba(0, 0, 0, 0.2); border-radius: 8px; } .dsg-strength-label { font-size: 13px; color: rgba(255, 255, 255, 0.7); } .dsg-strength-badge { padding: 6px 16px; border-radius: 20px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; } .dsg-strength-badge.very_high { background: linear-gradient(135deg, #ff6b35, #ff4444); color: #fff; box-shadow: 0 0 20px rgba(255, 68, 68, 0.4); } .dsg-strength-badge.high { background: linear-gradient(135deg, #00ff88, #00d4ff); color: #000; box-shadow: 0 0 15px rgba(0, 255, 136, 0.3); } .dsg-strength-badge.moderate { background: linear-gradient(135deg, #ffd700, #ffaa00); color: #000; } .dsg-strength-badge.low { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); } /* Signal Reasoning */ .dsg-reasoning { margin-top: 16px; padding: 16px; background: rgba(0, 212, 255, 0.05); border-left: 3px solid #00d4ff; border-radius: 8px; } .dsg-reasoning-label { font-size: 12px; font-weight: 700; color: #00d4ff; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; } .dsg-reasoning-text { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.9); } /* Multi-Signal Comparison View */ .dsg-multi-signal-view { margin: 24px 0; padding: 20px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; } .dsg-multi-signal-view h3 { font-size: 18px; color: #fff; margin: 0 0 16px; } .dsg-multi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .dsg-mini-signal-card { padding: 16px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; transition: all 0.3s ease; } .dsg-mini-signal-card:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.2); transform: translateY(-2px); } .dsg-mini-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .dsg-mini-title { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.7); } .dsg-mini-type { font-size: 14px; font-weight: 700; padding: 4px 12px; border-radius: 12px; } .dsg-mini-type.over, .dsg-mini-type.rise { background: rgba(0, 255, 136, 0.2); color: #00ff88; } .dsg-mini-type.under, .dsg-mini-type.fall { background: rgba(255, 68, 68, 0.2); color: #ff4444; } .dsg-mini-type.even { background: rgba(0, 212, 255, 0.2); color: #00d4ff; } .dsg-mini-type.odd { background: rgba(255, 170, 0, 0.2); color: #ffaa00; } .dsg-mini-stats { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .dsg-mini-stat { display: flex; justify-content: space-between; font-size: 13px; } .dsg-mini-stat span { color: rgba(255, 255, 255, 0.6); } .dsg-mini-stat strong { color: #fff; font-weight: 600; } .dsg-mini-strength { text-align: center; padding: 8px; border-radius: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .dsg-mini-strength.very_high { background: rgba(255, 68, 68, 0.2); color: #ff4444; } .dsg-mini-strength.high { background: rgba(0, 255, 136, 0.2); color: #00ff88; } .dsg-mini-strength.moderate { background: rgba(255, 215, 0, 0.2); color: #ffd700; } .dsg-mini-strength.low { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.5); } /* Signal History */ .dsg-history-section { margin-top: 24px; padding: 20px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; } .dsg-history-section h3 { font-size: 18px; color: #fff; margin: 0 0 16px; } .dsg-history-list { display: flex; flex-direction: column; gap: 8px; } .dsg-history-item { display: grid; grid-template-columns: 80px 1fr 100px 60px 40px; align-items: center; gap: 12px; padding: 12px 16px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 8px; transition: all 0.2s ease; } .dsg-history-item:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); } .dsg-history-time { font-size: 12px; color: rgba(255, 255, 255, 0.5); } .dsg-history-type { font-size: 13px; color: rgba(255, 255, 255, 0.7); } .dsg-history-prediction { font-size: 14px; font-weight: 700; text-align: center; padding: 4px 8px; border-radius: 6px; } .dsg-history-prediction.over, .dsg-history-prediction.rise { background: rgba(0, 255, 136, 0.15); color: #00ff88; } .dsg-history-prediction.under, .dsg-history-prediction.fall { background: rgba(255, 68, 68, 0.15); color: #ff4444; } .dsg-history-prediction.even { background: rgba(0, 212, 255, 0.15); color: #00d4ff; } .dsg-history-prediction.odd { background: rgba(255, 170, 0, 0.15); color: #ffaa00; } .dsg-history-confidence { font-size: 13px; font-weight: 600; color: #fff; text-align: center; } .dsg-history-strength { font-size: 18px; text-align: center; } /* Mobile Responsive for Enhanced Features */ @media (max-width: 768px) { .dsg-header-controls { flex-direction: column; align-items: stretch; gap: 12px; } .dsg-multi-grid { grid-template-columns: 1fr; } .dsg-history-item { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 8px; } .dsg-history-time { grid-column: span 2; } .dsg-history-strength { grid-row: 2; grid-column: 2; justify-self: end; } } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /* Technical Indicators Styles */ .technical-indicators { animation: fadeInUp 0.6s ease; padding: 8px 0; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .indicators-header { margin-bottom: 28px; text-align: center; } .indicators-header h3 { font-size: 28px; font-weight: 700; color: #fff; margin: 0 0 8px; background: linear-gradient(135deg, #00d4ff, #00ff88); background-clip: text; } .indicators-subtitle { font-size: 14px; color: rgba(255, 255, 255, 0.6); margin: 0; } /* Indicators Grid */ .indicators-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; } /* Indicator Card */ .indicator-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 24px; transition: all 0.3s ease; position: relative; overflow: hidden; backdrop-filter: blur(10px); } .indicator-card:before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #00d4ff, #00ff88); opacity: 0; transition: opacity 0.3s ease; } .indicator-card:hover { background: rgba(255, 255, 255, 0.06); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 212, 255, 0.2); border-color: rgba(0, 212, 255, 0.3); } .indicator-card:hover:before { opacity: 1; } /* Indicator Header */ .indicator-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .indicator-name { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.8); text-transform: uppercase; letter-spacing: 1.2px; } .indicator-status { font-size: 11px; padding: 5px 12px; border-radius: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .indicator-status.success { background: rgba(0, 255, 136, 0.2); color: #00ff88; box-shadow: 0 0 10px rgba(0, 255, 136, 0.3); } .indicator-status.danger { background: rgba(255, 68, 68, 0.2); color: #ff4444; box-shadow: 0 0 10px rgba(255, 68, 68, 0.3); } .indicator-status.neutral { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.6); } /* Indicator Value */ .indicator-value { font-size: 42px; font-weight: 700; color: #fff; margin-bottom: 16px; line-height: 1; text-shadow: 0 2px 10px rgba(0, 212, 255, 0.3); } /* RSI Specific */ .indicator-bar { position: relative; margin: 16px 0; } .rsi-zones { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 10px; color: rgba(255, 255, 255, 0.4); font-weight: 600; } .rsi-zones .zone.oversold { color: #00ff88; } .rsi-zones .zone.overbought { color: #ff4444; } .rsi-marker { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; background: linear-gradient(135deg, #00d4ff, #00ff88); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 15px rgba(0, 212, 255, 0.8); transition: left 0.5s ease; z-index: 10; } /* MACD Values */ .macd-values { display: flex; flex-direction: column; gap: 10px; } .macd-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; padding: 10px 12px; background: rgba(255, 255, 255, 0.03); border-radius: 8px; transition: background 0.2s ease; } .macd-row:hover { background: rgba(255, 255, 255, 0.06); } .macd-row span:first-child { color: rgba(255, 255, 255, 0.6); font-weight: 500; } .macd-row .value { font-weight: 700; color: #fff; font-family: "Monaco", "Courier New", monospace; } .macd-row .value.positive { color: #00ff88; } .macd-row .value.negative { color: #ff4444; } /* Bollinger Bands Values */ .bb-values { display: flex; flex-direction: column; gap: 10px; } .bb-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; padding: 10px 14px; border-radius: 8px; background: rgba(255, 255, 255, 0.03); transition: all 0.2s ease; } .bb-row:hover { background: rgba(255, 255, 255, 0.06); transform: translateX(4px); } .bb-row.upper { border-left: 3px solid #ff4444; } .bb-row.middle { border-left: 3px solid #00d4ff; } .bb-row.lower { border-left: 3px solid #00ff88; } .bb-row span:first-child { color: rgba(255, 255, 255, 0.6); font-weight: 500; } .bb-row .value { font-weight: 700; color: #fff; font-family: "Monaco", "Courier New", monospace; } /* Moving Averages */ .indicator-comparison { font-size: 13px; color: rgba(255, 255, 255, 0.7); margin-top: 12px; padding: 12px; background: rgba(0, 212, 255, 0.05); border-radius: 8px; border-left: 3px solid #00d4ff; font-weight: 500; } /* Indicator Info */ .indicator-info { margin-top: 14px; font-size: 12px; color: rgba(255, 255, 255, 0.5); font-style: italic; padding: 10px 12px; background: rgba(0, 0, 0, 0.2); border-radius: 6px; } /* Signals Summary Card */ .signals-summary { grid-column: span 2; background: linear-gradient(135deg, rgba(0, 212, 255, 0.05), rgba(0, 255, 136, 0.05)); border-color: rgba(0, 212, 255, 0.3); } .signals-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; } .signal-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); font-size: 14px; font-weight: 600; transition: all 0.2s ease; border: 1px solid transparent; } .signal-item:hover { background: rgba(255, 255, 255, 0.06); transform: translateX(4px); } .signal-item.success { background: rgba(0, 255, 136, 0.08); color: #00ff88; border-color: rgba(0, 255, 136, 0.2); } .signal-item.danger { background: rgba(255, 68, 68, 0.08); color: #ff4444; border-color: rgba(255, 68, 68, 0.2); } .signal-item.neutral { color: rgba(255, 255, 255, 0.7); } .signal-icon { font-size: 22px; flex-shrink: 0; } .overall-sentiment { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; background: rgba(0, 0, 0, 0.3); border-radius: 12px; margin-top: 16px; border: 1px solid rgba(255, 255, 255, 0.1); } .overall-sentiment > span:first-child { font-size: 14px; color: rgba(255, 255, 255, 0.7); font-weight: 600; } .sentiment-badge { font-size: 16px; font-weight: 700; padding: 10px 20px; border-radius: 10px; letter-spacing: 0.5px; } .sentiment-badge.bullish { background: linear-gradient(135deg, #00ff88, #00d4ff); color: #000; box-shadow: 0 4px 15px rgba(0, 255, 136, 0.4); } .sentiment-badge.bearish { background: linear-gradient(135deg, #ff4444, #ff8844); color: #fff; box-shadow: 0 4px 15px rgba(255, 68, 68, 0.4); } .sentiment-badge.neutral { background: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.8); } /* Loading State */ .indicators-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 20px; text-align: center; } .loading-message { font-size: 20px; color: #00d4ff; margin-bottom: 28px; font-weight: 700; animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .loading-progress { width: 100%; max-width: 450px; } .progress-bar { height: 10px; background: rgba(255, 255, 255, 0.1); border-radius: 5px; overflow: hidden; margin-bottom: 14px; } .progress-fill { height: 100%; background: linear-gradient(90deg, #00d4ff, #00ff88); border-radius: 5px; transition: width 0.5s ease; box-shadow: 0 0 10px rgba(0, 212, 255, 0.5); } .progress-text { font-size: 14px; color: rgba(255, 255, 255, 0.6); font-weight: 600; } /* Responsive Adjustments for Indicators */ @media (max-width: 1200px) { .signals-summary { grid-column: span 1; } } @media (max-width: 768px) { .indicators-grid { grid-template-columns: 1fr; } .indicator-value { font-size: 32px; } .indicators-header h3 { font-size: 24px; } .indicator-card { padding: 20px; } } /* Smooth Transitions for All Interactive Elements */ .indicator-card, .signal-item, .macd-row, .bb-row { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Glow Effects for Important Values */ .indicator-value, .sentiment-badge { animation: gentleGlow 3s ease-in-out infinite; } @keyframes gentleGlow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.1); } } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ /* Signals Hub Container */ .signals-hub-container { width: 100%; min-height: 80%; /* Changed from height: 90% */ padding: 20px; background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 100%); color: #fff; /* Removed overflow-y: auto - parent handles scrolling */ } /* Header Section */ .signals-hub-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 2px solid rgba(255, 255, 255, 0.1); } .hub-title h1 { font-size: 32px; font-weight: 700; margin: 0 0 8px; background: linear-gradient(90deg, #00ff88, #00d4ff); background-clip: text; } .hub-subtitle { font-size: 14px; color: rgba(255, 255, 255, 0.6); margin: 0; } .connection-status { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: rgba(255, 255, 255, 0.05); border-radius: 20px; font-size: 14px; font-weight: 600; } .connection-status.connected { background: rgba(0, 255, 136, 0.1); color: #00ff88; } .connection-status.connecting { background: rgba(255, 170, 0, 0.1); color: #ffaa00; } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Symbol Selector */ .symbol-selector-section { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; } .symbol-selector-section label { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.8); } .symbol-dropdown { flex: 1; max-width: 300px; padding: 12px 16px; background: #fff; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; color: #0b0a0a; font-size: 14px; cursor: pointer; transition: all 0.3s ease; } .symbol-dropdown:hover { background: #fff; border-color: rgba(255, 255, 255, 0.2); } .symbol-dropdown:focus { outline: none; border-color: #00ff88; box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.1); } /* Market Data Overview */ .market-data-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; } .data-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; transition: all 0.3s ease; overflow: hidden; /* Prevent content overflow */ min-height: 90px; /* Ensure consistent card height */ } .data-card:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .data-label { font-size: 12px; color: rgba(255, 255, 255, 0.6); text-transform: uppercase; letter-spacing: 1px; flex-shrink: 0; /* Prevent label from shrinking */ } .data-value { font-size: 24px; font-weight: 700; color: #fff; } .data-value.price { color: #00ff88; margin-left: 70px; font-size: 28px; /* Slightly smaller to ensure fit */ } .data-value.digit { color: #00d4ff; font-size: 28px; /* Reduced from 32px */ } /* View Toggle */ .signals-view-toggle { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; } .view-btn { padding: 12px 24px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; color: rgba(255, 255, 255, 0.7); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .view-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); color: #fff; } .view-btn.active { background: linear-gradient(135deg, #00ff88, #00d4ff); border-color: transparent; color: #000; } .view-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* Content Area */ .signals-content { margin-bottom: 24px; } /* Overview Section */ .overview-section { animation: fadeIn 0.5s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .welcome-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 32px; } .welcome-card h2 { font-size: 28px; margin: 0 0 12px; background: linear-gradient(90deg, #00ff88, #00d4ff); background-clip: text; } .welcome-card > p { font-size: 16px; color: rgba(255, 255, 255, 0.7); margin: 0 0 32px; } /* Roadmap Section */ .roadmap-section { margin-bottom: 32px; } .roadmap-section h3 { font-size: 20px; margin: 0 0 20px; color: #fff; } .roadmap-items { display: flex; flex-direction: column; gap: 16px; } .roadmap-item { display: flex; gap: 16px; padding: 20px; background: rgba(255, 255, 255, 0.05); border-radius: 12px; border-left: 4px solid rgba(255, 255, 255, 0.2); transition: all 0.3s ease; } .roadmap-item.completed { border-left-color: #00ff88; background: rgba(0, 255, 136, 0.05); } .roadmap-item.pending { border-left-color: #ffaa00; } .roadmap-item:hover { background: rgba(255, 255, 255, 0.08); transform: translateX(4px); } .roadmap-icon { font-size: 24px; flex-shrink: 0; } .roadmap-details h4 { font-size: 16px; margin: 0 0 8px; color: #fff; } .roadmap-details p { font-size: 14px; margin: 0; color: rgba(255, 255, 255, 0.6); } /* Quick Stats */ .quick-stats { margin-top: 32px; } .quick-stats h3 { font-size: 20px; margin: 0 0 20px; color: #fff; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; } .stat-item { display: flex; flex-direction: column; align-items: center; padding: 20px; background: rgba(255, 255, 255, 0.05); border-radius: 12px; text-align: center; } .stat-value { font-size: 32px; font-weight: 700; color: #00ff88; margin-bottom: 8px; } .stat-label { font-size: 12px; color: rgba(255, 255, 255, 0.6); text-transform: uppercase; letter-spacing: 1px; } /* Patterns Section */ .patterns-section { animation: fadeIn 0.5s ease; } .patterns-section h2 { font-size: 24px; margin: 0 0 24px; color: #fff; } .pattern-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .pattern-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 24px; } .pattern-card h3 { font-size: 18px; margin: 0 0 20px; color: #fff; } .pattern-bars { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; } .bar-group { display: flex; flex-direction: column; gap: 8px; } .bar-label { font-size: 14px; color: rgba(255, 255, 255, 0.8); font-weight: 600; } .bar-container { width: 100%; height: 24px; background: rgba(255, 255, 255, 0.1); border-radius: 12px; overflow: hidden; } .bar { height: 100%; transition: width 0.5s ease; border-radius: 12px; } .even-bar { background: linear-gradient(90deg, #00ff88, #00d4ff); } .odd-bar { background: linear-gradient(90deg, #ff4444, #ff8844); } .pattern-stats { padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .pattern-stats p { margin: 4px 0; font-size: 14px; color: rgba(255, 255, 255, 0.7); } .coming-soon-text { font-size: 14px; color: rgba(255, 255, 255, 0.6); font-style: italic; } /* Deriv Signals Section */ .deriv-signals-section { animation: fadeIn 0.5s ease; width: 100%; } /* Console Section */ .console-section { background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; overflow: hidden; } .console-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .console-header h3 { font-size: 16px; margin: 0; color: #fff; } .clear-console-btn { padding: 6px 12px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 6px; color: rgba(255, 255, 255, 0.7); font-size: 12px; cursor: pointer; transition: all 0.3s ease; } .clear-console-btn:hover { background: rgba(255, 255, 255, 0.15); color: #fff; } .console-messages { max-height: 200px; overflow-y: auto; padding: 12px 20px; } .console-message { font-family: "Courier New", monospace; font-size: 12px; color: #00ff88; padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .console-message:last-child { border-bottom: none; } .no-messages { font-size: 14px; color: rgba(255, 255, 255, 0.4); font-style: italic; text-align: center; padding: 20px; } /* Scrollbar Styling */ .console-messages::-webkit-scrollbar, .signals-hub-container::-webkit-scrollbar { width: 8px; } .console-messages::-webkit-scrollbar-track, .signals-hub-container::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 4px; } .console-messages::-webkit-scrollbar-thumb, .signals-hub-container::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; } .console-messages::-webkit-scrollbar-thumb:hover, .signals-hub-container::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); } /* Mobile Responsive */ @media (max-width: 768px) { .signals-hub-container { padding: 16px; } .hub-title h1 { font-size: 24px; } .market-data-overview { grid-template-columns: repeat(2, 1fr); } .signals-view-toggle { flex-direction: column; } .view-btn { width: 100%; } .pattern-cards { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: repeat(3, 1fr); } .welcome-card { padding: 20px; } } /* ============================================ TECHNICAL INDICATORS STYLES ============================================ */ .technical-indicators { animation: fadeIn 0.5s ease; } .indicators-header { margin-bottom: 24px; } .indicators-header h3 { font-size: 24px; font-weight: 700; color: #fff; margin: 0 0 8px; } .indicators-subtitle { font-size: 14px; color: rgba(255, 255, 255, 0.6); margin: 0; } /* Indicators Grid */ .indicators-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 24px; } /* Indicator Card */ .indicator-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 20px; transition: all 0.3s ease; position: relative; overflow: hidden; } .indicator-card:before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #00d4ff, #00ff88); opacity: 0; transition: opacity 0.3s ease; } .indicator-card:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); } .indicator-card:hover:before { opacity: 1; } /* Indicator Header */ .indicator-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .indicator-name { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.8); text-transform: uppercase; letter-spacing: 1px; } .indicator-status { font-size: 12px; padding: 4px 12px; border-radius: 12px; font-weight: 600; text-transform: uppercase; } .indicator-status.success { background: rgba(0, 255, 136, 0.2); color: #00ff88; } .indicator-status.danger { background: rgba(255, 68, 68, 0.2); color: #ff4444; } .indicator-status.neutral { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); } /* Indicator Value */ .indicator-value { font-size: 36px; font-weight: 700; color: #fff; margin-bottom: 12px; line-height: 1; } /* RSI Specific */ .indicator-bar { position: relative; height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; margin: 16px 0; overflow: visible; } .rsi-zones { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 10px; color: rgba(255, 255, 255, 0.4); } .rsi-zones .zone.oversold { color: #00ff88; } .rsi-zones .zone.overbought { color: #ff4444; } .rsi-marker { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; background: #00d4ff; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(0, 212, 255, 0.6); transition: left 0.3s ease; } /* MACD Values */ .macd-values { display: flex; flex-direction: column; gap: 8px; } .macd-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; } .macd-row span:first-child { color: rgba(255, 255, 255, 0.6); } .macd-row .value { font-weight: 600; color: #fff; } .macd-row .value.positive { color: #00ff88; } .macd-row .value.negative { color: #ff4444; } /* Bollinger Bands Values */ .bb-values { display: flex; flex-direction: column; gap: 8px; } .bb-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; padding: 6px 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.03); } .bb-row.upper { border-left: 3px solid #ff4444; } .bb-row.middle { border-left: 3px solid #00d4ff; } .bb-row.lower { border-left: 3px solid #00ff88; } .bb-row span:first-child { color: rgba(255, 255, 255, 0.6); } .bb-row .value { font-weight: 600; color: #fff; } /* Moving Averages */ .indicator-comparison { font-size: 13px; color: rgba(255, 255, 255, 0.6); margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.1); } /* Indicator Info */ .indicator-info { margin-top: 12px; font-size: 12px; color: rgba(255, 255, 255, 0.5); font-style: italic; } /* Signals Summary Card */ .signals-summary { grid-column: span 2; background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(0, 255, 136, 0.1)); } .signals-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } .signal-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); font-size: 14px; font-weight: 500; } .signal-item.success { background: rgba(0, 255, 136, 0.1); color: #00ff88; } .signal-item.danger { background: rgba(255, 68, 68, 0.1); color: #ff4444; } .signal-item.neutral { color: rgba(255, 255, 255, 0.7); } .signal-icon { font-size: 20px; } .overall-sentiment { display: flex; justify-content: space-between; align-items: center; padding: 16px; background: rgba(0, 0, 0, 0.3); border-radius: 12px; margin-top: 16px; } .overall-sentiment > span:first-child { font-size: 14px; color: rgba(255, 255, 255, 0.7); } .sentiment-badge { font-size: 16px; font-weight: 700; padding: 8px 16px; border-radius: 8px; } .sentiment-badge.bullish { background: rgba(0, 255, 136, 0.2); color: #00ff88; } .sentiment-badge.bearish { background: rgba(255, 68, 68, 0.2); color: #ff4444; } .sentiment-badge.neutral { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.7); } /* Loading State */ .indicators-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; text-align: center; } .loading-message { font-size: 18px; color: #00d4ff; margin-bottom: 24px; font-weight: 600; } .loading-progress { width: 100%; max-width: 400px; } .progress-bar { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; margin-bottom: 12px; } .progress-fill { height: 100%; background: linear-gradient(90deg, #00d4ff, #00ff88); border-radius: 4px; transition: width 0.5s ease; } .progress-text { font-size: 14px; color: rgba(255, 255, 255, 0.6); } /* Responsive Adjustments for Indicators */ @media (max-width: 1024px) { .signals-summary { grid-column: span 1; } } @media (max-width: 768px) { .indicators-grid { grid-template-columns: 1fr; } .indicator-value { font-size: 28px; } } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ .main_analysis { position: relative; width: 76%; height: 82vh; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; } .main_analysis .analysis-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } /* View Toggle Buttons */ .analysis-view-toggle { display: flex; gap: 12px; padding: 16px 24px; background: linear-gradient(135deg, #1e293b 0%, #334155 100%); border-bottom: 2px solid #3b82f6; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); flex-shrink: 0; /* Prevent toggle from shrinking */ } /* Content wrapper for scrollable content */ .analysis-content-wrapper { flex: 1; overflow: visible; position: relative; } .analysis-view-toggle .toggle-btn { padding: 10px 20px; border: 2px solid #475569; background: transparent; color: #cbd5e1; font-size: 14px; font-weight: 600; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 8px; } .analysis-view-toggle .toggle-btn:hover { border-color: #3b82f6; color: #fff; background: rgba(59, 130, 246, 0.1); } .analysis-view-toggle .toggle-btn.active { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); border-color: #3b82f6; color: #fff; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); transform: translateY(-2px); } @media screen and (min-width: 1270px) and (max-width: 1280px) { .main_analysis { width: 100%; } } @media (max-width: 720px) { .main_analysis { width: 100%; height: calc(100vh - 60px); /* Adjust for mobile header */ } /* Make toggle buttons wrap and stack on small screens */ .analysis-view-toggle { flex-wrap: wrap; gap: 8px; padding: 12px 16px; } .analysis-view-toggle .toggle-btn { padding: 8px 12px; font-size: 12px; gap: 4px; flex: 1 1 calc(50% - 4px); /* 2 buttons per row */ min-width: 140px; justify-content: center; } } /* Tablet and medium screens */ @media (max-width: 1024px) and (min-width: 721px) { .analysis-view-toggle { gap: 10px; padding: 14px 20px; } .analysis-view-toggle .toggle-btn { padding: 9px 16px; font-size: 13px; } } /* Small mobile devices */ @media (max-width: 480px) { .analysis-view-toggle { padding: 10px 12px; } .analysis-view-toggle .toggle-btn { padding: 8px 10px; font-size: 11px; min-width: 120px; } } /* Landscape orientation on mobile */ @media (max-width: 920px) and (orientation: landscape) { .main_analysis { height: calc(100vh - 50px); } .analysis-view-toggle { padding: 8px 12px; } .analysis-view-toggle .toggle-btn { padding: 6px 10px; font-size: 11px; } } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ .tutorials-quick-strategy__title { margin-bottom: 1.6rem; } .tutorials-quick-strategy__cards { display: grid; grid-template-columns: repeat(2, 1fr); } @media (min-width: 320px) and (max-width: 767px) { .tutorials-quick-strategy__cards { width: 100%; grid-template-columns: 1fr; } } .tutorials-quick-strategy__cards { gap: 2.4rem; margin-right: 12rem; } .tutorials-quick-strategy__placeholder { display: grid; grid-template-columns: 10fr 1fr; align-items: center; padding: 1.6rem; border: 2px solid var(--border-normal); border-radius: 8px; cursor: pointer; } .tutorials-quick-strategy__placeholder__title { margin-bottom: 1.6rem; } .tutorials-quick-strategy__placeholder__content { display: grid; grid-template-columns: 10fr 1fr; align-items: baseline; } .tutorials-quick-strategy__placeholder__content ul { list-style: disc; margin-left: 1.6rem; color: var(--text-general); } .tutorials-quick-strategy__placeholder__content li:not(:last-child) { margin-bottom: 1.6rem; } .tutorials-quick-strategy__placeholder__content__text { position: relative; top: 0.15rem; margin-left: 0.3rem; color: var(--text-general); } .tutorials-quick-strategy__placeholder__icon { margin-left: 2rem; } .tutorials-quick-strategy__breadcrumb { display: flex; margin-bottom: 1.6rem; } .tutorials-quick-strategy__breadcrumb__clickable { cursor: pointer; margin-right: 0.5rem; } .tutorials-quick-strategy .qs__body__content__description { padding: 1rem 0; width: 85%; } @media (min-width: 320px) and (max-width: 767px) { .tutorials-quick-strategy .qs__body__content__description { height: calc(100vh - 16rem); width: 100%; } } .tutorials-quick-strategy .qs__description__image { width: 55%; margin-bottom: 4rem; } @media (min-width: 320px) and (max-width: 767px) { .tutorials-quick-strategy .qs__description__image { height: 36rem; width: 100%; margin-bottom: 2rem; } } .tutorials-quick-strategy .qs__description__image.formula { width: unset; margin: 1.5rem 0.5rem; } .tutorials-quick-strategy .qs__description__image.formula img { height: 100%; width: auto; max-width: 100%; object-fit: contain; } .tutorials-quick-strategy .qs__description__content.italic span { font-size: 1.4rem; } @media (min-width: 320px) and (max-width: 767px) { .tutorials-quick-strategy .qs__description__content.italic span { font-size: 1.2rem; } } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ .tutorials-wrap .no-search, .tutorials-wrap .faq__wrapper__nosearch, .tutorials-wrap .tutorials-wrap__group__nosearch { display: flex; justify-content: center; width: 100%; word-break: break-all; } .tutorials-wrap .dc-dialog__dialog { width: 80vw; height: 80vh; max-width: unset; max-height: unset; padding: 0; border-radius: 0; position: relative; z-index: 1; } @media (min-width: 320px) and (max-width: 767px) { .tutorials-wrap .dc-dialog__dialog { width: 94%; height: auto; max-height: 80%; } } .tutorials-wrap .dc-dialog__header-wrapper--end { position: absolute; top: 0; right: 1rem; z-index: 90; } .tutorials-wrap .dc-dialog__content { max-width: unset; margin-bottom: 0; height: 100%; } .tutorials-wrap .dc-dialog__footer { display: none; } .tutorials-wrap--placeholder { width: 28rem; } .tutorials-wrap--tour { cursor: pointer; } .tutorials-wrap__group { margin-bottom: 5.2rem; } .tutorials-wrap__group__guides { display: flex; margin-top: 2.4rem; } @media (min-width: 320px) and (max-width: 767px) { .tutorials-wrap__group__guides { display: unset; } } @media (min-width: 320px) and (max-width: 767px) { .tutorials-wrap__group__title { margin-bottom: 1.4rem; } } .tutorials-wrap__group__cards { display: flex; text-align: center; flex-direction: column; margin-right: 2.4rem; } @media (min-width: 320px) and (max-width: 767px) { .tutorials-wrap__group__cards { flex-direction: row; width: auto; } .tutorials-wrap__group__cards span { text-align: left; width: 100%; } } @media (min-width: 320px) and (max-width: 767px) { .tutorials-wrap__group { flex-direction: column; margin-bottom: 2.2rem; } } .tutorials-wrap__group:last-child { margin-bottom: 0; } .tutorials-wrap__placeholder { display: flex; align-items: center; justify-content: center; background: var(--checkbox-disabled-grey); margin-bottom: 0.8rem; margin-right: 2.4rem; height: 16rem; width: 28rem; background-size: 100% 100%; } .tutorials-wrap__placeholder__description { width: 28rem; } @media (min-width: 320px) and (max-width: 767px) { .tutorials-wrap__placeholder__description { text-align: left; width: calc(100% - 14.8rem); } } @media (min-width: 320px) and (max-width: 767px) { .tutorials-wrap__placeholder { height: 8.7rem; width: 14.8rem; margin: 0; margin-right: 0.8rem; } } .tutorials-wrap__placeholder__tours { height: 13.5rem; background-size: contain; margin-bottom: 0.8rem; margin-right: 0.8rem; width: 21.5rem; cursor: pointer; } @media (min-width: 320px) and (max-width: 767px) { .tutorials-wrap__placeholder__tours { height: 8.7rem; width: 14.8rem; } } .tutorials-wrap__placeholder__button-group { display: flex; align-items: center; justify-content: center; width: 20rem; height: 7rem; border-radius: 1rem; cursor: pointer; background-color: rgba(0, 0, 0, 0.5); } .tutorials-wrap__placeholder__button-group--play { filter: invert(1); } @media (min-width: 320px) and (max-width: 767px) { .tutorials-wrap__placeholder__button-group { height: 6rem; width: 8rem; } } .tutorials-wrap__placeholder--disabled { pointer-events: none; } .faq__wrapper { overflow: auto; padding-bottom: 18px; } .faq__wrapper__content { width: 85%; } @media (min-width: 320px) and (max-width: 767px) { .faq__wrapper__content { width: 100%; } } .faq__wrapper .dc-accordion__item { border: unset; border-bottom: 0.1rem solid var(--general-section-1); } .faq__wrapper .dc-accordion__item:last-child { margin-bottom: 2rem; } .faq__wrapper .dc-accordion__item-header { display: flex; align-items: center; justify-content: space-between; } .faq__wrapper .dc-accordion__item-content .loss-control { width: 80%; } @media (min-width: 320px) and (max-width: 767px) { .faq__wrapper .dc-accordion__item-content .loss-control { width: 100%; } } .faq__wrapper .dc-accordion__item-content img { width: 45%; } @media (min-width: 320px) and (max-width: 767px) { .faq__wrapper .dc-accordion__item-content { width: 100%; } .faq__wrapper .dc-accordion__item-content img { width: 100%; } } .faq__wrapper__header { margin: 0 0 1rem 0.5rem; } .tour-dialog { transition: unset; } .tour-dialog .dc-dialog__dialog { transform: unset; opacity: unset; transition: unset; } @media (min-width: 320px) and (max-width: 767px) { .tour-dialog .dc-dialog__dialog { width: 90vw; padding: 1.6rem; } } @media (min-width: 768px) and (max-width: 1023px) { .tour-dialog .dc-dialog__dialog { width: 90vw; padding: 1.6rem; } } .tour-dialog .dc-dialog__content__header { text-align: left; margin-bottom: 2.4rem; } .tour-dialog .dc-dialog__content__description { text-align: left; } .tour-dialog .dc-dialog__content__description__text { margin-bottom: 1.6rem; } @media (min-width: 320px) and (max-width: 767px) { .tour-dialog .dc-dialog__footer { display: flex; flex-direction: column; height: unset; align-content: flex-end; } .tour-dialog .dc-dialog__footer button:first-child { margin-bottom: unset; margin-right: 0.8rem; } } .tutorials-wrapper { width: 100%; background: var(--general-main-1); } .tutorials-wrapper .dc-tabs__wrapper { padding: 1.6rem 0.8rem; } .tutorials-wrapper .dc-tabs__wrapper__group { display: flex; align-items: center; justify-content: center; width: 22.5rem; position: relative; padding: 1.6rem 0.8rem; z-index: 1; } .tutorials-wrapper .dc-tabs__wrapper__group .search-icon { cursor: pointer; position: absolute; left: 1.8rem; z-index: 1; } .tutorials-wrapper .dc-tabs__wrapper__group .close-icon { cursor: pointer; position: absolute; right: 1.5rem; z-index: 1; } .tutorials-wrapper .dc-tabs__wrapper__group__search-input { width: 100%; height: 3.2rem; border-radius: 8px; outline: none; background-color: var(--general-main-1); font-size: 1.4rem; padding: 0 3.6rem; border: solid 1px var(--border-normal); color: var(--text-general); } .tutorials-wrapper .dc-tabs__wrapper__group__search-input::placeholder { opacity: 0.4; } .tutorials-wrapper .dc-tabs__wrapper__group__search-input:focus { border-color: var(--text-general); } @media (min-width: 320px) and (max-width: 767px) { .tutorials-wrapper .dc-tabs__wrapper__group__search-input { width: 100%; margin-left: 17px; height: 4rem; padding-left: 13px; margin-right: 0; } } .tutorials-wrapper .dc-tabs__wrapper .dc-tabs .tutorials-search .faq__wrapper { height: unset; } .tutorials-wrapper .dc-tabs__wrapper .dc-tabs__content { margin: -6.5rem 2.4rem; width: 100%; max-height: calc(100vh - 20rem); overflow: auto; } .tutorials-wrapper .dc-tabs__wrapper .dc-tabs__content .tutorials-wrap { margin-bottom: 3rem; } .tutorials-wrapper .dc-tabs__wrapper .dc-tabs__content--no-result { display: flex; align-items: center; justify-content: flex-start; flex-direction: column; height: 100vh; margin: unset; } .tutorials-wrapper .dc-tabs__wrapper .dc-tabs__content--no-result svg { margin-bottom: 2.4rem; } .tutorials-wrapper .dc-tabs__wrapper .dc-tabs__content--no-result__title, .tutorials-wrapper .dc-tabs__wrapper .dc-tabs__content--no-result__content { margin-bottom: 0.8rem; word-break: break-word; text-align: center; } .tutorials-wrapper .dc-tabs__wrapper .dc-tabs--top { display: flex; } @media (min-width: 320px) and (max-width: 767px) { .tutorials-wrapper .dc-tabs__wrapper .dc-tabs--top { height: calc(100vh - 22rem); } } .tutorials-wrapper .dc-tabs__wrapper .dc-tabs__list { width: 22.5rem; display: flex; flex-direction: column; padding: 0 0.8rem; } .tutorials-wrapper .dc-tabs__wrapper .dc-tabs__list--border-bottom { padding: 0 0.8rem; height: 100vh; } .tutorials-wrapper .dc-tabs__wrapper .dc-tabs__list--border-bottom li { white-space: unset; text-align: left; line-height: normal; } .tutorials-wrapper .dc-tabs__wrapper .dc-tabs__list--border-bottom:first-child { margin-top: -7.2rem; } .tutorials-wrapper .dc-tabs__wrapper .dc-tabs__list--border-bottom .tutorials-guide:nth-child(1), .tutorials-wrapper .dc-tabs__wrapper .dc-tabs__list--border-bottom .tutorials-faq:nth-child(2), .tutorials-wrapper .dc-tabs__wrapper .dc-tabs__list--border-bottom .tutorials-qs-guide:nth-child(3) { background-color: var(--sidebar-tab); border-radius: 0.4rem 0.4rem 0 0; transition: all 0.6s; font-weight: bold; pointer-events: none; } .tutorials-wrapper .dc-tabs__wrapper .dc-tabs__item { width: 100% !important; } .tutorials-wrapper .dc-tabs__wrapper .dc-tabs__item--top:first-child { margin-top: 7.5rem; } .tutorials-wrapper .dc-tabs__wrapper .dc-tabs__item--top:nth-last-child(2) { display: none; } .tutorials-wrapper .dc-tabs__wrapper .dc-tabs__item--tutorials { display: flex; justify-content: flex-start; padding: 0 1.6rem; } .tutorials-wrapper .dc-tabs__wrapper .dc-tabs__active { background-color: var(--sidebar-tab); border-radius: 0.4rem 0.4rem 0 0; transition: all 0.6s; } .tutorials-mobile { padding: 1.6rem; overflow-x: hidden; overflow-y: auto; } .tutorials-mobile__select { height: 4rem; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: center; } @media (min-width: 320px) and (max-width: 767px) { .tutorials-mobile__select .dc-select-native { position: relative; margin-right: 17px; transition: all 0.3s; } .tutorials-mobile__select--show-search .dc-select-native { width: 0; margin: 0; visibility: hidden; } .tutorials-mobile__select--show-search .dc-tabs__wrapper__group__search-input { width: 100%; } .tutorials-mobile__select--show-search .arrow-left-bold { display: block; } .tutorials-mobile__select--show-search .close-icon { display: block; cursor: pointer; position: absolute; right: 2.5rem; z-index: 1; } .tutorials-mobile__select--show-search .dc-select-native__display, .tutorials-mobile__select--show-search .dc-select-native__picker, .tutorials-mobile__select--show-search .search-icon { display: none; } .tutorials-mobile__select--hide-search .dc-tabs__wrapper__group__search-input { width: 0; display: none; } .tutorials-mobile__select--hide-search .arrow-left-bold, .tutorials-mobile__select--hide-search .close-icon { display: none; } .tutorials-mobile__select--hide-search .search-icon { display: block; } } @media (min-width: 320px) and (max-width: 767px) { .tutorials-mobile__guide, .tutorials-mobile__faq, .tutorials-mobile__qs-guide, .tutorials-mobile__search { height: calc(var(--vh) - 280px); overflow: auto; } .tutorials-mobile__guide .tutorials-wrap, .tutorials-mobile__faq .tutorials-wrap, .tutorials-mobile__qs-guide .tutorials-wrap, .tutorials-mobile__search .tutorials-wrap { margin-bottom: 2rem; } } @media (min-width: 320px) and (max-width: 767px) { .tutorials-mobile__search .tutorials-wrap, .tutorials-mobile__search .faq__wrapper { overflow: unset; } } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ .dc-tabs__content--main__tabs { display: block; } .trade-container { position: absolute !important; top: 0px; width: 100%; padding: 0px !important; height: 85vh !important; overflow-y: auto !important; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; } /* Hide scrollbar for Chrome, Safari, and Opera */ .trade-container::-webkit-scrollbar { display: none; } .smartcharts { top: 58px !important; } .digits__container { position: absolute !important; bottom: 40px !important; } .chart_btns { position: absolute; display: flex; gap: 10px; top: 12.8%; z-index: 101; right: 2%; } .chart_btns button { cursor: pointer; padding: 3px 8px; font-weight: 600; background: #00a79e; border: none; border-radius: 2px; transition: all ease-in-out 0.3s; } .chart_btns button:hover { background: #cc2e3d; } .main_tradingview iframe { width: 100%; height: 62vh; } @media (max-width: 720px) { .trade-container { height: 100% !important; } .app-contents--is-mobile .top-widgets-portal { top: 8% !important; z-index: 99 !important; } .smartcharts-mobile { height: 85% !important; } .mobile-wrapper { z-index: 99 !important; } .digits__container { position: relative !important; bottom: 0px !important; } .main_tradingview { width: 100%; z-index: 1; position: relative; height: 92vh; } .main_tradingview iframe { height: 66%; } } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ .main { display: flex; overflow: hidden; width: 100%; height: calc(100vh - 9rem); padding: 1.6rem; } @media (min-width: 320px) and (max-width: 767px) { .main { height: calc(100vh - 6rem); padding: 0; } } .main__container { position: relative; border: none; max-width: 100%; width: 100%; } .main__container--active { /* css for onboard tour overlay */ } .main__container--active:before { content: ""; position: fixed; left: 0; top: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.72); opacity: 0.7; z-index: 100; } .main__container .dc-tabs__active-line { background-color: var(--general-main-1); transition: none; } .main__container .dc-tabs__active { background: var(--general-main-1); } .main__container .dc-tabs__list { background: var(--general-section-1); justify-content: start; z-index: 2; } @media (min-width: 320px) and (max-width: 767px) { .main__container .dc-tabs__list { overflow-x: auto; overflow-y: hidden; } .main__container .dc-tabs__list::-webkit-scrollbar { display: none; } .main__container .dc-tabs__list { -ms-overflow-style: none; scrollbar-width: none; } } @media (min-width: 320px) and (max-width: 767px) { .main__container .dc-tabs__list--header--main__tabs { width: 100%; overflow-x: auto; padding: 0.8rem 1.6rem 0; } } @media (min-width: 320px) and (max-width: 767px) { .main__container .dc-tabs__list--border-bottom { border-bottom: 0; } } @media (min-width: 320px) and (max-width: 767px) { .main__container .dc-tabs__content { width: 100%; overflow-x: auto; } .main__container .dc-tabs__content--no-result { display: flex; align-items: center; justify-content: center; flex-direction: column; justify-content: flex-start; height: 100vh; margin-top: 5rem; } .main__container .dc-tabs__content--no-result svg { margin-bottom: 2.4rem; } .main__container .dc-tabs__content--no-result h1 { margin-bottom: 0.8rem; } .main__container .dc-tabs__content--no-result span { word-break: break-word; text-align: center; } } .main__container .dc-tabs__content--main__tabs { display: flex; justify-content: space-between; } @media (min-width: 320px) and (max-width: 767px) { .main__container .dc-tabs__content--main__tabs { flex-direction: column; background-color: var(--general-section-1); } } .main__container .dc-tabs__item { border-top-left-radius: 1rem; border-top-right-radius: 1rem; height: 4.8rem; padding: 0 2.4rem; width: auto; display: flex; align-items: center; justify-content: center; } .main__container .dc-tabs__item svg { width: 1.6rem; height: 1.6rem; padding-right: 0; margin-right: 0.8rem; } @media (min-width: 320px) and (max-width: 767px) { .main__container .dc-tabs__item svg { margin-right: 0.2rem; /* gave this -ve margin because we cannot overwrite the default core padding which will make the icon bigger */ margin-top: -0.5rem; } } @media (min-width: 1024px) { .main__run-strategy-wrapper { position: absolute; } } .main__run-strategy-wrapper { right: 1.6rem; top: 1.6rem; z-index: 2; } .main__run-strategy-wrapper .animation__button { background-color: var(--purchase-main-1); } .main__run-strategy-wrapper .animation__container { background-color: var(--general-main-1); } .main__sidebar-wrapper--active { position: fixed; right: 0; } .main__sidebar-wrapper--hidden { display: none; } @media (min-width: 320px) and (max-width: 767px) { .bot-stopped-dialog { padding: 2rem; } } .bot-stopped-dialog .dc-dialog { position: relative; } .bot-stopped-dialog .dc-dialog__header-wrapper { margin: 0 0 2.4rem; } .bot-stopped-dialog .dc-dialog__content__header { display: flex; justify-content: space-between; margin: 0 0 2.4rem; } .bot-stopped-dialog .dc-dialog__content__header .dc-icon { cursor: pointer; } @media (min-width: 320px) and (max-width: 767px) { .bot-stopped-dialog .dc-dialog__footer { flex-wrap: unset; } .bot-stopped-dialog .dc-dialog__footer .dc-dialog__button:first-child { margin-right: 1rem; } .bot-stopped-dialog .dc-dialog__footer .dc-dialog__button { padding: 0; width: 40%; min-width: unset; flex-basis: unset; } } .dashboard__chart-wrapper { position: relative; height: 85vh; width: 100%; transition: all 0.4s; } @media (min-width: 320px) and (max-width: 767px) { .dashboard__chart-wrapper { height: var(--tab-content-height-mobile); background: var(--general-main-1); } .dashboard__chart-wrapper .smartcharts { height: calc(100% - 4rem); z-index: 1; } .dashboard__chart-wrapper .smartcharts:has(.stxMenuActive) { z-index: 99; transition: all 1s ease-out; } } .dashboard__chart-wrapper--expanded { width: calc(100vw - 39.8rem); } .dashboard__chart-wrapper--modal { width: 40rem; } .bot-builder { position: absolute; top: 6.6rem; left: 1.6rem; z-index: -1; background: var(--general-main-1); height: var(--tab-content-height); } .bot-builder .injectionDiv .blocklyTrash { transition: all 0.4s; } @media (min-width: 320px) and (max-width: 767px) { .bot-builder .injectionDiv .blocklyTrash { display: none; } } .bot-builder--tour-active .blocklyTrash { display: none; } .bot-builder--active { z-index: 1; } .bot-builder--inactive { display: none; } @media (min-width: 320px) and (max-width: 767px) { .bot-builder { top: 5.6rem; left: 0; width: 100vw; height: var(--tab-content-height-mobile); } } #react-joyride-step-6 .onboard__label { margin-bottom: 1.6rem; } .onboard__header { display: flex; justify-content: space-between; margin-bottom: 2.4rem; margin-top: -2rem; } .onboard__header--close { cursor: pointer; } @media (max-height: 730px) { .onboard__steps { max-height: 40vh; overflow-y: auto; } } .onboard__label { text-align: left; margin-bottom: 2.4rem; } .onboard__container { width: 100%; height: 100%; display: flex; justify-content: center; margin-bottom: 2.4rem; } .onboard__container img { width: 97%; } .onboard__container .initial-loader { width: 33rem; height: 18rem; } .onboard__content { text-align: left; } .onboard__content p { font-size: 1.4rem; } .onboard__content__block:first-child { margin-bottom: 2.4rem; } .joyride-content { font-size: 1.4rem; } @media (max-height: 790px) { .joyride-content { max-height: 46vh; overflow-y: auto; } } .joyride-content__left { text-align: left; } .joyride-content__left__step-three { margin-bottom: 0.8rem; } .joyride-content__sub-title { margin-top: 1rem; } .joyride-content ul { list-style: disc; margin-left: 4rem; margin-top: 1rem; } .joyride-content ul li { margin-bottom: 1rem; } .joyride-content video { width: 100%; margin-top: 1rem; } .joyride-content__with-icon { display: flex; margin-bottom: 1rem; } .joyride-content__with-icon__right { margin-left: 0.8rem; } .joyride-content__with-icon__left { margin: 0.3rem 0 0 1.2rem; } @media (min-width: 320px) and (max-width: 767px) { .joyride-content__with-icon__left { margin: 0; } .joyride-content__with-icon__left svg { margin: 0; } } .dbot-slider { display: flex; align-items: center; justify-content: flex-start; flex-direction: column; position: fixed; left: 0; bottom: 0; width: 100%; height: 100vh; padding: 1.6rem; border-top: solid 1px var(--border-normal); z-index: 1000; background-color: var(--general-main-1); } .dbot-slider--tour-position { top: 0; } .dbot-slider--tour-position .progress-bar-circle:first-child { display: none; } .dbot-slider--active { height: auto; min-height: 17rem; } .dbot-slider__navbar { display: flex; justify-content: space-between; padding: 0 1.6rem; width: 100%; margin-bottom: 1.8rem; } .dbot-slider__title { margin-bottom: 0.8rem; } .dbot-slider__label { margin-bottom: 0.8rem; } .dbot-slider__content { text-align: center; padding: 0 1.6rem; margin-bottom: 1.6rem; } .dbot-slider__content:last-child { margin-bottom: 3rem; } .dbot-slider__image, .dbot-slider__media { background: var(--general-section-1); text-align: center; width: 100%; height: 55%; margin-bottom: 1.6rem; } .dbot-slider img { height: 100%; } .dbot-slider video { height: 100%; width: 65%; } .dbot-slider__progress-bar { margin-bottom: 1.6rem; } .dbot-slider__status { width: 100%; position: fixed; bottom: 1.6rem; } .dbot-slider__button-group { display: flex; padding: 0 1.6rem; } .dbot-slider__button-group button { height: 4rem; width: 100%; border: 0.2rem solid #999999; background: #ffffff; border-radius: 0.4rem; outline: none; cursor: pointer; margin-right: 0.8rem; } .dbot-slider__button-group button.default { background: transparent; } .dbot-slider__button-group button.danger { background: #ff444f; border: none; margin-right: 0; } .dbot-slider__button-group button.danger span { color: #ffffff; } .dbot-slider__bot-builder-tour { height: 16rem; background: var(--general-section-1); } .dbot-slider__bot-builder-tour .dbot-slider { width: 100%; } .dbot-slider__bot-builder-tour .dbot-slider__status { display: flex; align-items: center; justify-content: flex-start; } .dbot-slider__bot-builder-tour .dbot-slider__progress-bar { width: 50%; margin-bottom: unset; display: flex; align-items: center; justify-content: flex-start; margin-left: 1rem; } .dbot-slider__bot-builder-tour .dbot-slider__progress-bar .progress-bar-circle { opacity: 0.16; } .dbot-slider__bot-builder-tour .dbot-slider__button-group { width: 50%; display: flex; justify-content: center; } .dbot-slider__bot-builder-tour .dbot-slider__button-group .default { background: transparent; } .dbot-slider__bot-builder-tour .dbot-slider__button-group .default span { color: var(--text-prominent); } @keyframes blink { 0%, 100% { border: 1px solid #ff444f; } 50% { border: 1px solid transparent; } } .dbot-tour-blink { -webkit-animation: blink 1.25s infinite; -moz-animation: blink 1.25s ease-in infinite; animation: blink 1.25s ease-in infinite; border-radius: 50px; height: 2.5rem !important; width: 2.5rem !important; padding: 0.2rem 0; } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ .bot { --bot-content-height: calc(100vh - 140px); --bot-content-width: calc(100vw - 366px); /* run-panel is open by default */ --drawer-content-height: calc(100vh - 394px); --drawer-content-height-no-stat: calc(100vh - 233px); --drawer-scroll-height: calc(100vh - 365px); --drawer-content-height-mobile: calc(100% - 233px); --tab-content-height: calc(100vh - 16.6rem); --tab-content-height-mobile: calc(100vh - 12.6rem); --zindex-drawer: 5; --zindex-modal: 6; --zindex-draggable-modal: 7; --zindex-snackbar: 8; } .bot-dashboard { background: var(--general-section-1); } /*------------------------------------* * # Constants *------------------------------------*/ /* stylelint-disable color-no-hex */ /* COLOR PALETTE */ /* colors */ /* status colors */ /* alpha colors */ /* gradient colors */ /* Preserve legacy variables */ /* Primary */ /* stylelint-enable color-no-hex */ /* Wallet gradient background */ /* App Cards gradient background */ /* Wallets */ /*------------------------------------* * # SASS Mixins and Functions *------------------------------------*/ /* * SASS interpolation */ /* * PX to EM * @param $px - px value to be converted * @param $base - base font size (in `em`) * Note: 'em' values are calculate based on the element font-size * to properly converts 'px' to 'em', please pass in the element font-size with it * Usage example: padding: em(16px, 1.6em); // font-size in 'em' */ /* * Set property by passing a property name, and values. * @param $property name - padding, margin etc. * @param $values - values in `px` (space separated for multiple values) * @param $font-size - base font-size in `em` * Usage example: @include toEm(padding, 8px 16px 8px, 1.6em); */ /* * Generate typefaces key-value pair of variable name and config * Example: --paragraph-center-bold-black: (14px, center, bold, black) */ /* * Sets font-size, font-weight, color, text-transform, text-align and line-height * Usage example: @include setTypeface(16px, bold, black, uppercase); */ /* * Set typefaces by passing a typeface variable name * @param $var - typeface variable * @param $tt - text-transform property * @param $align - text-align property * Usage example: @include typeface(--paragraph-bold-black, uppercase, center); */ /* * Range Slider Thumb styling is set here */ /* * SVG icons colors */ /* * Bar Spinner Animation * @param $count - number of bars * @param $duration - duration of animation * @param $phase - each bar phase change delay * Usage example: @include createBarspinnerAnimation(5, 1.2s, 0,1); */ /* * Tooltip colors * @param $color - color property * Usage example: @include tooltipColor($COLOR_RED); */ /* * Convert Tooltip colors * @param $color - css color property * Usage example: @include convertTooltipColor(var(--status-default)); */ /* Constants */ /* Variables */ /* List of all typefaces variables in the format: --$FONT_SIZES-$TEXT_ALIGN-$FONT_WEIGHTS-COLORS. See $FONT_SIZES, $TEXT_ALIGN, $FONT_WEIGHTS, $COLORS maps above for references. Variables name example: --title-center-semibold-red */ /* to use styles without modifier class on .inline-icon use @extend e.g. style icon on parent hover: a:hover .inline-icon { @extend %inline-icon-active; } */ /** * Define Breakpoints here. */ .Toastify__toast { background: var(--icon-black-plus); color: var(--general-main-1); min-height: 4.8rem; height: 4.8rem; width: fit-content; text-align: start; padding: 0.8rem; padding-inline-start: 1.6rem; border-radius: 0.8rem; font-size: 1.4rem; font-family: inherit; } @media (min-width: 320px) and (max-width: 767px) { .Toastify__toast { height: 4.4rem; min-height: 4.4rem; font-size: 1.2rem; line-height: 1.5rem; margin-bottom: 0.5rem; padding: 0.8rem, 1rem; } } .Toastify__toast-container { padding: 0; width: auto; inset-inline-start: 3.5rem; bottom: 6rem; } @media (min-width: 320px) and (max-width: 767px) { .Toastify__toast-container { inset-inline-start: 0; bottom: 9rem; padding: 0.8rem; } } .Toastify__toast-body { padding: 0; } .Toastify__close-button { padding: 0.5rem 0; margin-inline-start: 1.2rem; opacity: 0.8; } @media (min-width: 320px) and (max-width: 767px) { .Toastify__close-button { margin-inline-start: 1.2rem; } } .Toastify__close-button svg { fill: var(--general-main-1); height: 2.2rem; width: unset; } @media (min-width: 320px) and (max-width: 767px) { .Toastify__close-button svg { height: 1.6rem; } } .notification-content { display: flex; align-items: center; } .notification-content button { background: var(--icon-black-plus); color: var(--general-main-1); font-size: 1.4rem; font-weight: bold; margin-inline-start: 2rem; margin-bottom: 0.2rem; border: 0; padding: 0; text-decoration: underline; cursor: pointer; word-break: keep-all; } @media (min-width: 320px) and (max-width: 767px) { .notification-content button { font-size: 1.2rem; margin-inline-start: 1.2rem; margin-bottom: 0.6rem; } }