smartxtrader 3.8.1-xm.0

package/src/sass/_common/common_import.scss

@@ -0,0 +1,7 @@
+
+@import 'base/constants';
+@import 'base/constants-deriv.scss';
+@import 'base/theme.scss';
+@import 'base/mixin';
+@import 'base/functions';
+@import 'base/animations';

package/src/sass/_common/components.scss

@@ -0,0 +1,562 @@
+#androidApp, #appstore {
+    width: 100px;
+    height: 30px;
+    display: inline-block;
+    position: relative;
+}
+
+#appstore {
+    background: url('../images/pages/applications/appstore.svg') 0 0/100px 30px no-repeat;
+    @include BIDIR_PROP(margin-left, margin-right, 10px);
+}
+
+#androidApp {
+    background: url('../images/pages/trade/google-play-badge.png') 0 0/100px 30px no-repeat;
+}
+
+/* trading page */
+#trading_socket_container {
+    #androidApp, #appstore {
+        @include BIDIR_VALUE(float, right, left);
+    }
+    @media (max-width: 768px) {
+        #appstore, #androidApp {
+            margin: 0 auto;
+            padding-bottom: 10px;
+            float: none;
+        }
+    }
+}
+
+.highcharts-container {
+    width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+
+    svg {
+        width: 100% !important;
+        height: auto !important;
+        max-width: 100%;
+        display: block;
+    }
+
+    .highcharts-subtitle {
+        white-space: normal !important;
+
+        > div {
+            &:not(.delay) {
+                display: inline-block;
+            }
+            .chart-delay {
+                display: block;
+                text-align: center;
+                margin-bottom: 0.2em;
+                color: $COLOR_RED;
+            }
+            .chart-payout-range {
+                margin-left: 10px;
+                margin-right: 5px;
+
+                &:before {
+                    content: url('../images/pages/trade/chart_payout_range.svg');
+                    display: inline-block;
+                }
+            }
+        }
+    }
+    .highcharts-tooltip span {
+        background-color: transparent !important;
+        border: none !important;
+        box-shadow: none !important;
+        color: var(--text-colored-background);
+        max-width: min(360px, 100%);
+        padding: 0;
+        white-space: normal;
+        word-break: break-word;
+
+        span:first-child {
+            height: auto;
+        }
+
+        strong,
+        b {
+            color: inherit;
+        }
+    }
+
+    // Soften the neon glow on chart surfaces and nested primitives
+    svg {
+        .highcharts-tooltip {
+            text {
+                display: block;
+            }
+
+            &-box,
+            .highcharts-label-box,
+            path {
+                display: none;
+                fill: none;
+                stroke: none;
+            }
+        }
+
+        .highcharts-plot-background,
+        .highcharts-plot-border {
+            width: 100%;
+            height: 100%;
+            filter: drop-shadow(0 0 8px rgba(255, 189, 57, 0.08));
+            stroke: rgba(255, 189, 57, 0.12);
+        }
+
+        rect.highcharts-background {
+            width: 100%;
+            height: 100%;
+            fill: none !important;
+            stroke: none !important;
+            filter: none !important;
+        }
+
+        .highcharts-series-group,
+        .highcharts-grid,
+        .highcharts-axis path,
+        .highcharts-axis line {
+            filter: drop-shadow(0 0 4px rgba(255, 189, 57, 0.06));
+        }
+
+        /* Sharper, warmer chart polish */
+        .highcharts-axis-labels text {
+            filter: none !important;
+            fill: rgba(255, 200, 120, 0.32) !important;
+            text-shadow: none !important;
+        }
+
+        .highcharts-data-label,
+        .highcharts-label {
+            filter: none !important;
+            text-shadow: none !important;
+        }
+
+        .highcharts-data-label text,
+        .highcharts-label text,
+        .highcharts-point text {
+            filter: none !important;
+            color: #2fff88 !important;
+            fill: #2fff88 !important;
+            text-shadow: 0 0 6px rgba(47, 255, 136, 0.35) !important;
+            font-size: 14px !important;
+        }
+
+        .highcharts-data-label text tspan,
+        .highcharts-label text tspan,
+        .highcharts-point text tspan {
+            color: inherit !important;
+            fill: inherit !important;
+            text-shadow: none !important;
+        }
+
+        .highcharts-data-label-box,
+        .highcharts-label-box {
+            transform: none;
+            display: none;
+            fill: none;
+            stroke: none;
+            pointer-events: none;
+        }
+
+        .highcharts-grid-line {
+            stroke: rgba(255, 180, 70, 0.08) !important;
+            filter: drop-shadow(0 0 2px rgba(255, 180, 70, 0.06)) !important;
+        }
+
+        .highcharts-plot-border {
+            stroke: rgba(255, 180, 70, 0.1) !important;
+            filter: drop-shadow(0 0 3px rgba(255, 150, 50, 0.09));
+        }
+
+        .highcharts-series-0 .highcharts-graph {
+            stroke: #26ffc8 !important;
+            stroke-width: 1.45px !important;
+            filter: drop-shadow(0 0 5px rgba(38, 255, 200, 0.14)) !important;
+        }
+    }
+}
+
+.lightbox {
+    display: flex;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    z-index: 2000000000;
+
+    > div {
+        margin: auto;
+        max-width: 44em;
+        max-height: 80vh;
+        background-color: $COLOR_WHITE;
+        border-radius: $BORDER_RADIUS;
+        overflow: auto;
+        text-align: left;
+    }
+    &#set_currency_popup_container, &#deposit_currency_change_popup_container, &#create_mt5_popup_container {
+        #dialog_content {
+            max-width: 24em;
+            padding: 25px 15px;
+
+            #dialog_title, #dialog_footnote {
+                padding: 0;
+                margin: 5px 0;
+            }
+        }
+        #frm_confirm {
+            width: 100%;
+        }
+        a#btn_cancel, a#btn_ok {
+            width: 45%;
+            width: calc(50% - 5px);
+            display: inline-block;
+
+            span {
+                width: 45%;
+                width: calc(100% - 50px);
+            }
+        }
+    }
+}
+
+#reality_check_content {
+    .table-container {
+        border-radius: 8px;
+        background-color: var(--general-section-1);
+        width: fit-content;
+    }
+    table {
+        width: auto;
+    }
+    tbody {
+        :first-of-type {
+            float: left;
+        }
+        :nth-of-type(2) {
+            float: right;
+        }
+    }
+    tr {
+        :first-of-type {
+            float: unset;
+        }
+        :nth-of-type(2) {
+            float: unset;
+        }
+    }
+    td {
+        display: block;
+        border-bottom: 1px solid $COLOR_WHITE;
+        padding: 10px;
+        font-weight: bold;
+        padding-right: 52px;
+    }
+    th {
+        display: block;
+        padding: 10px;
+        line-height: unset;
+        font-weight: unset;
+        border-bottom: 1px solid $COLOR_WHITE;
+        padding-left: 16px;
+    }
+    [data-balloon] {
+        border-bottom: none;
+    }
+}
+
+#deriv_banner_container {
+    position: relative;
+
+    &.has_margin {
+        margin-bottom: 30px;
+    }
+    a {
+        text-decoration: none;
+        position: relative;
+        display: flex;
+        width: 100%;
+        align-items: center;
+        min-height: 100px;
+        margin-bottom: 24px;
+        justify-content: center;
+
+        .deriv_banner_background {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            opacity: 1;
+        }
+        .deriv_banner_background_mobile {
+            opacity: 0;
+        }
+        .deriv_banner_platform {
+            max-width: 139px;
+            max-height: 80px;
+            margin: 0 56px 0 48px;
+        }
+        .deriv_banner_chevron {
+            position: absolute;
+            right: 29px;
+        }
+        .deriv_banner_explore {
+            max-width: 253px;
+            width: 100%;
+        }
+        .deriv_banner_standards {
+            max-width: 296px;
+        }
+        h3 {
+            font-size: $FONT_SIZE_XXL;
+            font-weight: bold;
+            margin: 0;
+            color: $COLOR_WHITE;
+            line-height: 1.5;
+        }
+        @media (max-width: 860px) {
+            .deriv_banner_platform {
+                margin: 0;
+            }
+        }
+        @media (max-width: 768px) {
+            min-height: 72px;
+
+            .deriv_banner_background_mobile {
+                opacity: 1;
+            }
+            .deriv_banner_background {
+                opacity: 1;
+            }
+            .deriv_banner_platform {
+                margin: 0 16px 0 0;
+                width: 78px;
+                height: 45.2px;
+            }
+            h3 {
+                font-size: $FONT_SIZE_XS;
+                line-height: $FONT_SIZE_S !important;
+            }
+            .deriv_banner_standards {
+                max-width: 88px;
+            }
+            .deriv_banner_explore {
+                max-width: 93.2px;
+            }
+            .deriv_banner_chevron {
+                width: 16px;
+                height: 16px;
+                right: 10px;
+            }
+        }
+        @media (max-width: 500px) {
+            .deriv_banner_chevron {
+                right: 2px;
+            }
+        }
+    }
+}
+
+.deriv_banner_close {
+    position: absolute;
+    top: 9px;
+    right: 16px;
+    width: 12px;
+    height: 12px;
+    background-image: url('../images/common/close_icon.svg');
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    cursor: pointer;
+    z-index: 2;
+
+    @media (max-width: 768px) {
+        top: 7px;
+        right: 12px;
+        width: 10px;
+        height: 10px;
+    }
+}
+
+#multiplier_banner_container {
+    position: relative;
+
+    &.has_margin {
+        margin-bottom: 30px;
+    }
+    a {
+        position: relative;
+        display: flex;
+        min-height: 100px;
+        color: $COLOR_WHITE;
+        text-decoration: none;
+        margin-bottom: 24px;
+
+        @media only screen and (max-width: 550px) {
+            min-height: 70px;
+        }
+
+        &:before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 50%;
+            height: 100%;
+            border-radius: 4px 0 0 4px;
+            /* stylelint-disable color-no-hex */
+            background: linear-gradient(83deg, #545454 -27%, #545454 -27%, #000000 52%, #040404 52%);
+            /* stylelint-enable color-no-hex */
+
+            @media only screen and (max-width: 768px) {
+                width: 40%;
+            }
+        }
+        &:after {
+            content: '';
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 50%;
+            height: 100%;
+            border-radius: 0 4px 4px 0;
+            /* stylelint-disable color-no-hex */
+            background: linear-gradient(89deg, #ff6444 6%, #ff6444 11%, #ff444f 100%);
+            /* stylelint-enable color-no-hex */
+
+            @media only screen and (max-width: 768px) {
+                width: 60%;
+            }
+        }
+    }
+    h3 {
+        line-height: 1 !important;
+    }
+    .multiplier_banner {
+        position: relative;
+
+        &_title {
+            width: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: space-evenly;
+            z-index: 2;
+
+            @media only screen and (max-width: 768px) {
+                width: 40%;
+                flex-direction: column;
+                justify-content: center;
+            }
+
+            h3 {
+                flex: none;
+                font-size: 32px;
+                font-weight: bold;
+                line-height: 1;
+                margin: 0 64px 0 0;
+                color: $COLOR_WHITE;
+
+                @media only screen and (max-width: 768px) {
+                    font-size: 20px;
+                }
+                @media only screen and (max-width: 550px) {
+                    font-size: 14px;
+                    margin-right: 45px;
+                }
+            }
+        }
+        &_logo {
+            flex: none;
+            width: 101px;
+            height: 17px;
+
+            @media only screen and (max-width: 768px) {
+                width: 70px;
+                height: 12px;
+                margin: 0 64px 10px 0;
+            }
+            @media only screen and (max-width: 550px) {
+                width: 40px;
+                height: 7px;
+                margin: 0 45px 5px 0;
+            }
+        }
+        &_phone {
+            height: 100%;
+            width: auto;
+            position: absolute;
+            right: 50%;
+            top: 0;
+            transform: translateX(47%);
+
+            @media only screen and (max-width: 768px) {
+                right: 60%;
+            }
+        }
+        &_text {
+            width: 50%;
+            z-index: 2;
+            display: flex;
+            align-items: center;
+            justify-content: space-evenly;
+            color: $COLOR_WHITE;
+
+            @media only screen and (max-width: 768px) {
+                width: 60%;
+            }
+
+            > div:first-of-type {
+                flex: auto;
+                margin-left: 64px;
+
+                @media only screen and (max-width: 900px) {
+                    padding-right: 30px;
+                }
+                @media only screen and (max-width: 550px) {
+                    padding-right: 25px;
+                    margin-left: 45px;
+                }
+            }
+            > div:last-of-type {
+                flex: none;
+                padding: 0 36px 0 15px;
+
+                @media only screen and (max-width: 900px) {
+                    display: none;
+                }
+            }
+            h3, p {
+                font-size: $FONT_SIZE_N;
+                color: $COLOR_WHITE;
+                margin: 0;
+                text-align: center;
+
+                @media only screen and (max-width: 550px) {
+                    font-size: 10px;
+                }
+            }
+            h3 {
+                font-weight: bold;
+                margin-bottom: 8px;
+            }
+            p {
+                font-weight: normal;
+            }
+        }
+        &_btn {
+            padding: 0 16px;
+            height: 32px;
+            line-height: 32px;
+            color: $COLOR_DRIV_RED;
+            border-radius: 4px;
+            background-color: $COLOR_WHITE;
+            font-size: $FONT_SIZE_N;
+            font-weight: normal;
+        }
+    }
+}

package/src/sass/_common/external/_grid-settings-flex.scss

@@ -0,0 +1,57 @@
+// Import gridle
+@import 'gridle/gridle-flex';
+
+
+// setup the grid (required)
+@include gridle_setup((
+	context : 12,
+	gutter-width : 20px,
+	// gutter-left : 20px,
+	// direction : rtl,
+	// dir-attribute : true,
+	states-classes : true
+));
+
+
+// register special columns
+@include gridle_register_column("1on5", 1, 5);
+
+
+// clear each classes
+@include gridle_register_clear_each(2, left);
+@include gridle_register_clear_each(3, left);
+@include gridle_register_clear_each(12, both);
+
+
+// register states
+@include gridle_register_default_states();
+@include gridle_register_state(ipad-landscape, (
+	query : "only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)",
+	// gutter-height : 50px,
+	// gutter-width : 30px
+));
+
+
+// you can set css to be applied on the desired element type (grid here)
+// for each of the specified states (default mobile and tablet)
+// this mean that even the grid-tablet-1 will have this css applied
+// in the mobile and default state
+
+// @include gridle_apply_css_for(grid, (
+// 	content : "i m a cool mobile grid"
+// ), tablet);
+
+
+// you can extend the base classes of the framework by using this mixin
+// here, all the grid and flex-grid elements will be extended with the specified
+// css map
+
+// @include gridle_extend_base_class(grid flex-grid, (
+// 	content : "i extend the grid class"
+// ));
+
+// in order to extend only certain states classes, you can specify states like this
+// this will have the effect to apply the css map only on grid-mobile... and grid-tablet... classes
+// @include gridle_extend_base_class(grid, (
+// 	content : "i extend the grid class"
+// ), mobile tablet);

package/src/sass/_common/external/_grid-settings.scss

@@ -0,0 +1,60 @@
+// Import gridle
+@import 'gridle/gridle';
+@import 'gridle/gridle-flex';
+
+
+// setup the grid (required)
+@include gridle_setup((
+	context : 12,
+	gutter-width : 20px,
+	// gutter-left : 20px,
+	direction : $LANGUAGE_DIRECTION,
+	// dir-attribute : true,
+	states-classes : true,
+	classes-prefix : 'gr-'
+));
+
+
+// register special columns
+@include gridle_register_column("1on5", 1, 5);
+
+
+// clear each classes
+@include gridle_register_clear_each(2, left);
+@include gridle_register_clear_each(3, left);
+@include gridle_register_clear_each(12, both);
+
+
+// register states
+@include gridle_register_default_states();
+@include gridle_register_state(ipad-landscape, (
+	query : "only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)",
+	// gutter-height : 50px,
+	// gutter-width : 60px,
+  // direction : rtl
+));
+
+
+// you can set css to be applied on the desired element type (grid here)
+// for each of the specified states (default mobile and tablet)
+// this mean that even the grid-tablet-1 will have this css applied
+// in the mobile and default state
+
+// @include gridle_apply_css_for(grid, (
+// 	content : "i m a cool mobile grid"
+// ), tablet);
+
+
+// you can extend the base classes of the framework by using this mixin
+// here, all the grid and flex-grid elements will be extended with the specified
+// css map
+
+// @include gridle_extend_base_class(grid flex-grid, (
+// 	content : "i extend the grid class"
+// ));
+
+// in order to extend only certain states classes, you can specify states like this
+// this will have the effect to apply the css map only on grid-mobile... and grid-tablet... classes
+// @include gridle_extend_base_class(grid, (
+// 	content : "i extend the grid class"
+// ), mobile tablet);

package/src/sass/_common/external/_variables.scss

@@ -0,0 +1,28 @@
+/**
+ * Variables
+ */
+$primary-color : #eaedef;
+$green : #eeefea;
+
+$braun : #999588;
+$orange : #f2ca2b;
+
+$title : #3b3b3b;
+$text : #b1b1b1;
+
+$light : #f6f6f6;
+$medium : #999588;
+$dark : #605d54;
+
+$footer-dark : #266778;
+
+$complementary : #f2ca2b;
+
+$error : #d39c7b;
+$success : #ced37b;
+
+$green : #e5f382;
+$blue : #5aecf1;
+$red : #ee243c;
+
+$new : #ffb554;