PluginProbe
Better Payment – Instant Payments, Donations, Fundraising with Subscriptions & More / 2.4.1
Better Payment – Instant Payments, Donations, Fundraising with Subscriptions & More v2.4.1
2.4.1 2.4.0 2.3.4 2.3.3 2.3.2 2.3.1 2.3.0 2.2.2 2.2.1 2.2.0 2.1.2 2.1.1 trunk 0.0.1 0.0.2 0.0.3 0.0.4 0.0.5 0.0.6 0.0.7 1.0.0 1.0.1 1.0.2 1.0.3 1.0.4 All 68 releases
← All changes | assets/css/common.css +1077 -83 1.0.3 → 2.4.1 View file →
@@ -1,10 +1,22 @@
1 -/*!************************************************************************************************************************************************************************************!*\
2 - !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/css/common.scss ***!
3 - \************************************************************************************************************************************************************************************/
1 +/*!****************************************************************************************************************************************************************************************************************!*\
2 + !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].use[3]!./src/css/common.scss ***!
3 + \****************************************************************************************************************************************************************************************************************/
4 4 .better-payment .width-100 {
5 + display: inline-block;
5 6 width: 100%;
7 + max-height: 465px;
8 + min-height: 465px;
9 + overflow: hidden;
10 + border-radius: 16px;
6 11 }
12 +.better-payment .width-100.height-auto {
13 + min-height: auto;
14 +}
15 +.better-payment .width-100 img {
16 + object-fit: cover;
17 + height: 100%;
18 +}
7 19 .better-payment .payment-form-layout-1 .field-payment_method .bp-radio-box,
8 20 .better-payment .payment-form-layout-1 .field-payment_method .bp-radio-box label,
9 21 .better-payment .payment-form-layout-2 .field-payment_method .bp-radio-box,
10 22 .better-payment .payment-form-layout-2 .field-payment_method .bp-radio-box label {
@@ -21,9 +33,9 @@
21 33 padding-right: unset !important;
22 34 }
23 35
24 36 .better-payment .bp-radio-box input[type=radio]:checked {
25 - border: 2px solid #006AFF;
37 + border: 2px solid #006aff;
26 38 }
27 39
28 40 .better-payment .bp-radio-box input[type=radio] {
29 41 width: 20px;
@@ -30,9 +42,9 @@
30 42 height: 20px;
31 43 outline: 0;
32 44 border-radius: 50%;
33 45 position: relative;
34 - border: 2px solid #CBC9DA;
46 + border: 2px solid #cbc9da;
35 47 background: #fff;
36 48 margin-bottom: -3px;
37 49 margin-right: 10px;
38 50 }
@@ -46,9 +58,9 @@
46 58 position: absolute;
47 59 width: 8px;
48 60 height: 8px;
49 61 border-radius: 50%;
50 - background: #006AFF;
62 + background: #006aff;
51 63 }
52 64
53 65 .better-payment .form-content-section-fields .payment-method-checkbox input[type=radio]:after {
54 66 width: 12px;
@@ -175,8 +187,20 @@
175 187 .better-payment .control.has-icons-right .select.is-medium ~ .icon {
176 188 font-size: 1.25rem;
177 189 }
178 190
191 +/* FontAwesome icon styling to match BP custom icons */
192 +.better-payment .control.has-icons-left .icon svg,
193 +.better-payment .control.has-icons-right .icon svg {
194 + width: 20px;
195 +}
196 +
197 +.better-payment .control.has-icons-left .icon svg path,
198 +.better-payment .control.has-icons-right .icon svg path {
199 + fill: #b0b7d6;
200 + stroke: #b0b7d6;
201 +}
202 +
179 203 /* Helper Classes */
180 204 .better-payment .columns.is-mobile {
181 205 display: flex;
182 206 }
@@ -1107,9 +1131,13 @@
1107 1131 }
1108 1132
1109 1133 .better-payment .payment-form-layout-1 .dynamic-amount-section,
1110 1134 .better-payment .payment-form-layout-2 .dynamic-amount-section {
1111 - background: url("../img/bg-blue-2.svg") no-repeat center;
1135 + position: relative;
1136 + background-color: #006aff;
1137 + background-image: url("../img/bg-blue-2.svg");
1138 + background-repeat: no-repeat;
1139 + background-position: center;
1112 1140 background-size: cover;
1113 1141 border-top-left-radius: 10px;
1114 1142 border-bottom-left-radius: 10px;
1115 1143 }
@@ -1114,17 +1142,17 @@
1114 1142 border-bottom-left-radius: 10px;
1115 1143 }
1116 1144
1117 1145 .better-payment .payment-form-layout-2 .dynamic-amount-section-subtitle {
1118 - color: #98B9F2;
1146 + color: #98b9f2;
1119 1147 }
1120 1148
1121 1149 .better-payment .payment-form-layout-3 .dynamic-amount-section-amount {
1122 - color: #0042BD;
1150 + color: #0042bd;
1123 1151 }
1124 1152
1125 1153 .better-payment .payment-form-layout.payment-form-layout-3 .button {
1126 - background-color: #0042BD !important;
1154 + background-color: #0042bd !important;
1127 1155 }
1128 1156
1129 1157 .better-payment .payment-form-layout-3 .dynamic-amount-section-title {
1130 1158 color: #000;
@@ -1134,16 +1162,28 @@
1134 1162 color: #666;
1135 1163 }
1136 1164
1137 1165 .better-payment .payment-form-layout-3 .dynamic-amount-section-icon {
1138 - color: #C6CDE4;
1166 + color: #c6cde4;
1139 1167 }
1140 1168
1141 1169 .better-payment .payment-form-layout-3 .payment-method-checkbox {
1142 - border-bottom: 1px solid #E9ECFF;
1170 + border-bottom: 1px solid #e9ecff;
1143 1171 cursor: pointer;
1172 + display: flex;
1173 + align-items: center;
1174 + justify-content: center;
1144 1175 }
1145 1176
1177 +.better-payment .payment-form-layout-3 .payment-method-checkbox input {
1178 + display: none;
1179 +}
1180 +
1181 +.better-payment .payment-form-layout-3 .payment-method-checkbox img {
1182 + object-fit: contain;
1183 + height: 25px;
1184 +}
1185 +
1146 1186 .better-payment .payment-form-layout-3 .payment-method-checkbox input,
1147 1187 .better-payment .payment-form-layout-2 .payment-method-checkbox.single-item input,
1148 1188 .better-payment .payment-form-layout-1 .payment-method-checkbox.single-item input {
1149 1189 visibility: hidden;
@@ -1151,9 +1191,9 @@
1151 1191
1152 1192 .better-payment .payment-form-layout-3 .payment-method-checkbox.active,
1153 1193 .better-payment .payment-form-layout-1 .payment-method-checkbox.single-item.active,
1154 1194 .better-payment .payment-form-layout-2 .payment-method-checkbox.single-item.active {
1155 - border-bottom: 1px solid #0042BD;
1195 + border-bottom: 1px solid #0042bd;
1156 1196 }
1157 1197
1158 1198 .better-payment .payment-form-layout-1 .form-content-section,
1159 1199 .better-payment .payment-form-layout-2 .form-content-section {
@@ -1166,17 +1206,18 @@
1166 1206 border-radius: 10px;
1167 1207 }
1168 1208
1169 1209 .better-payment .payment-form-layout-2 .dynamic-amount-section {
1170 - background: linear-gradient(180deg, #006AFF 0%, #004CBF 100%);
1210 + background-color: #006aff;
1211 + background-image: linear-gradient(180deg, #006aff 0%, #004cbf 100%);
1171 1212 }
1172 1213
1173 1214 .better-payment .payment-form-layout-3 .dynamic-amount-section {
1174 - background: #FBFCFF;
1215 + background: #fbfcff;
1175 1216 }
1176 1217
1177 1218 .better-payment .payment-form-layout .button {
1178 - background-color: #006AFF !important;
1219 + background-color: #006aff !important;
1179 1220 color: #fff !important;
1180 1221 }
1181 1222
1182 1223 .better-payment .button {
@@ -1915,19 +1956,22 @@
1915 1956 background-color: #fff;
1916 1957 border-color: transparent;
1917 1958 color: #0a0a0a;
1918 1959 }
1919 -.better-payment .file.is-white.is-hovered .file-cta, .better-payment .file.is-white:hover .file-cta {
1960 +.better-payment .file.is-white.is-hovered .file-cta,
1961 +.better-payment .file.is-white:hover .file-cta {
1920 1962 background-color: #f9f9f9;
1921 1963 border-color: transparent;
1922 1964 color: #0a0a0a;
1923 1965 }
1924 -.better-payment .file.is-white.is-focused .file-cta, .better-payment .file.is-white:focus .file-cta {
1966 +.better-payment .file.is-white.is-focused .file-cta,
1967 +.better-payment .file.is-white:focus .file-cta {
1925 1968 border-color: transparent;
1926 1969 box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.25);
1927 1970 color: #0a0a0a;
1928 1971 }
1929 -.better-payment .file.is-white.is-active .file-cta, .better-payment .file.is-white:active .file-cta {
1972 +.better-payment .file.is-white.is-active .file-cta,
1973 +.better-payment .file.is-white:active .file-cta {
1930 1974 background-color: #f2f2f2;
1931 1975 border-color: transparent;
1932 1976 color: #0a0a0a;
1933 1977 }
@@ -1935,19 +1979,22 @@
1935 1979 background-color: #0a0a0a;
1936 1980 border-color: transparent;
1937 1981 color: #fff;
1938 1982 }
1939 -.better-payment .file.is-black.is-hovered .file-cta, .better-payment .file.is-black:hover .file-cta {
1983 +.better-payment .file.is-black.is-hovered .file-cta,
1984 +.better-payment .file.is-black:hover .file-cta {
1940 1985 background-color: #040404;
1941 1986 border-color: transparent;
1942 1987 color: #fff;
1943 1988 }
1944 -.better-payment .file.is-black.is-focused .file-cta, .better-payment .file.is-black:focus .file-cta {
1989 +.better-payment .file.is-black.is-focused .file-cta,
1990 +.better-payment .file.is-black:focus .file-cta {
1945 1991 border-color: transparent;
1946 1992 box-shadow: 0 0 0.5em rgba(10, 10, 10, 0.25);
1947 1993 color: #fff;
1948 1994 }
1949 -.better-payment .file.is-black.is-active .file-cta, .better-payment .file.is-black:active .file-cta {
1995 +.better-payment .file.is-black.is-active .file-cta,
1996 +.better-payment .file.is-black:active .file-cta {
1950 1997 background-color: #000;
1951 1998 border-color: transparent;
1952 1999 color: #fff;
1953 2000 }
@@ -1955,19 +2002,22 @@
1955 2002 background-color: #f4f4f4;
1956 2003 border-color: transparent;
1957 2004 color: rgba(0, 0, 0, 0.7);
1958 2005 }
1959 -.better-payment .file.is-light.is-hovered .file-cta, .better-payment .file.is-light:hover .file-cta {
2006 +.better-payment .file.is-light.is-hovered .file-cta,
2007 +.better-payment .file.is-light:hover .file-cta {
1960 2008 background-color: #eee;
1961 2009 border-color: transparent;
1962 2010 color: rgba(0, 0, 0, 0.7);
1963 2011 }
1964 -.better-payment .file.is-light.is-focused .file-cta, .better-payment .file.is-light:focus .file-cta {
2012 +.better-payment .file.is-light.is-focused .file-cta,
2013 +.better-payment .file.is-light:focus .file-cta {
1965 2014 border-color: transparent;
1966 2015 box-shadow: 0 0 0.5em rgba(245, 245, 245, 0.25);
1967 2016 color: rgba(0, 0, 0, 0.7);
1968 2017 }
1969 -.better-payment .file.is-light.is-active .file-cta, .better-payment .file.is-light:active .file-cta {
2018 +.better-payment .file.is-light.is-active .file-cta,
2019 +.better-payment .file.is-light:active .file-cta {
1970 2020 background-color: #e8e8e8;
1971 2021 border-color: transparent;
1972 2022 color: rgba(0, 0, 0, 0.7);
1973 2023 }
@@ -1975,19 +2025,22 @@
1975 2025 background-color: #353535;
1976 2026 border-color: transparent;
1977 2027 color: #fff;
1978 2028 }
1979 -.better-payment .file.is-dark.is-hovered .file-cta, .better-payment .file.is-dark:hover .file-cta {
2029 +.better-payment .file.is-dark.is-hovered .file-cta,
2030 +.better-payment .file.is-dark:hover .file-cta {
1980 2031 background-color: #2f2f2f;
1981 2032 border-color: transparent;
1982 2033 color: #fff;
1983 2034 }
1984 -.better-payment .file.is-dark.is-focused .file-cta, .better-payment .file.is-dark:focus .file-cta {
2035 +.better-payment .file.is-dark.is-focused .file-cta,
2036 +.better-payment .file.is-dark:focus .file-cta {
1985 2037 border-color: transparent;
1986 2038 box-shadow: 0 0 0.5em rgba(54, 54, 54, 0.25);
1987 2039 color: #fff;
1988 2040 }
1989 -.better-payment .file.is-dark.is-active .file-cta, .better-payment .file.is-dark:active .file-cta {
2041 +.better-payment .file.is-dark.is-active .file-cta,
2042 +.better-payment .file.is-dark:active .file-cta {
1990 2043 background-color: #292929;
1991 2044 border-color: transparent;
1992 2045 color: #fff;
1993 2046 }
@@ -1995,19 +2048,22 @@
1995 2048 background-color: #00d1b1;
1996 2049 border-color: transparent;
1997 2050 color: #fff;
1998 2051 }
1999 -.better-payment .file.is-primary.is-hovered .file-cta, .better-payment .file.is-primary:hover .file-cta {
2052 +.better-payment .file.is-primary.is-hovered .file-cta,
2053 +.better-payment .file.is-primary:hover .file-cta {
2000 2054 background-color: #00c4a7;
2001 2055 border-color: transparent;
2002 2056 color: #fff;
2003 2057 }
2004 -.better-payment .file.is-primary.is-focused .file-cta, .better-payment .file.is-primary:focus .file-cta {
2058 +.better-payment .file.is-primary.is-focused .file-cta,
2059 +.better-payment .file.is-primary:focus .file-cta {
2005 2060 border-color: transparent;
2006 2061 box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.25);
2007 2062 color: #fff;
2008 2063 }
2009 -.better-payment .file.is-primary.is-active .file-cta, .better-payment .file.is-primary:active .file-cta {
2064 +.better-payment .file.is-primary.is-active .file-cta,
2065 +.better-payment .file.is-primary:active .file-cta {
2010 2066 background-color: #00b89c;
2011 2067 border-color: transparent;
2012 2068 color: #fff;
2013 2069 }
@@ -2015,19 +2071,22 @@
2015 2071 background-color: #475ec6;
2016 2072 border-color: transparent;
2017 2073 color: #fff;
2018 2074 }
2019 -.better-payment .file.is-link.is-hovered .file-cta, .better-payment .file.is-link:hover .file-cta {
2075 +.better-payment .file.is-link.is-hovered .file-cta,
2076 +.better-payment .file.is-link:hover .file-cta {
2020 2077 background-color: #3e56c4;
2021 2078 border-color: transparent;
2022 2079 color: #fff;
2023 2080 }
2024 -.better-payment .file.is-link.is-focused .file-cta, .better-payment .file.is-link:focus .file-cta {
2081 +.better-payment .file.is-link.is-focused .file-cta,
2082 +.better-payment .file.is-link:focus .file-cta {
2025 2083 border-color: transparent;
2026 2084 box-shadow: 0 0 0.5em rgba(72, 95, 199, 0.25);
2027 2085 color: #fff;
2028 2086 }
2029 -.better-payment .file.is-link.is-active .file-cta, .better-payment .file.is-link:active .file-cta {
2087 +.better-payment .file.is-link.is-active .file-cta,
2088 +.better-payment .file.is-link:active .file-cta {
2030 2089 background-color: #3a51bb;
2031 2090 border-color: transparent;
2032 2091 color: #fff;
2033 2092 }
@@ -2035,19 +2094,22 @@
2035 2094 background-color: #3e8ed0;
2036 2095 border-color: transparent;
2037 2096 color: #fff;
2038 2097 }
2039 -.better-payment .file.is-info.is-hovered .file-cta, .better-payment .file.is-info:hover .file-cta {
2098 +.better-payment .file.is-info.is-hovered .file-cta,
2099 +.better-payment .file.is-info:hover .file-cta {
2040 2100 background-color: #3488ce;
2041 2101 border-color: transparent;
2042 2102 color: #fff;
2043 2103 }
2044 -.better-payment .file.is-info.is-focused .file-cta, .better-payment .file.is-info:focus .file-cta {
2104 +.better-payment .file.is-info.is-focused .file-cta,
2105 +.better-payment .file.is-info:focus .file-cta {
2045 2106 border-color: transparent;
2046 2107 box-shadow: 0 0 0.5em rgba(62, 142, 208, 0.25);
2047 2108 color: #fff;
2048 2109 }
2049 -.better-payment .file.is-info.is-active .file-cta, .better-payment .file.is-info:active .file-cta {
2110 +.better-payment .file.is-info.is-active .file-cta,
2111 +.better-payment .file.is-info:active .file-cta {
2050 2112 background-color: #3082c5;
2051 2113 border-color: transparent;
2052 2114 color: #fff;
2053 2115 }
@@ -2055,19 +2117,22 @@
2055 2117 background-color: #47c68d;
2056 2118 border-color: transparent;
2057 2119 color: #fff;
2058 2120 }
2059 -.better-payment .file.is-success.is-hovered .file-cta, .better-payment .file.is-success:hover .file-cta {
2121 +.better-payment .file.is-success.is-hovered .file-cta,
2122 +.better-payment .file.is-success:hover .file-cta {
2060 2123 background-color: #3ec487;
2061 2124 border-color: transparent;
2062 2125 color: #fff;
2063 2126 }
2064 -.better-payment .file.is-success.is-focused .file-cta, .better-payment .file.is-success:focus .file-cta {
2127 +.better-payment .file.is-success.is-focused .file-cta,
2128 +.better-payment .file.is-success:focus .file-cta {
2065 2129 border-color: transparent;
2066 2130 box-shadow: 0 0 0.5em rgba(72, 199, 142, 0.25);
2067 2131 color: #fff;
2068 2132 }
2069 -.better-payment .file.is-success.is-active .file-cta, .better-payment .file.is-success:active .file-cta {
2133 +.better-payment .file.is-success.is-active .file-cta,
2134 +.better-payment .file.is-success:active .file-cta {
2070 2135 background-color: #3abb81;
2071 2136 border-color: transparent;
2072 2137 color: #fff;
2073 2138 }
@@ -2075,19 +2140,22 @@
2075 2140 background-color: #ffdf89;
2076 2141 border-color: transparent;
2077 2142 color: rgba(0, 0, 0, 0.7);
2078 2143 }
2079 -.better-payment .file.is-warning.is-hovered .file-cta, .better-payment .file.is-warning:hover .file-cta {
2144 +.better-payment .file.is-warning.is-hovered .file-cta,
2145 +.better-payment .file.is-warning:hover .file-cta {
2080 2146 background-color: #ffdc7d;
2081 2147 border-color: transparent;
2082 2148 color: rgba(0, 0, 0, 0.7);
2083 2149 }
2084 -.better-payment .file.is-warning.is-focused .file-cta, .better-payment .file.is-warning:focus .file-cta {
2150 +.better-payment .file.is-warning.is-focused .file-cta,
2151 +.better-payment .file.is-warning:focus .file-cta {
2085 2152 border-color: transparent;
2086 2153 box-shadow: 0 0 0.5em rgba(255, 224, 138, 0.25);
2087 2154 color: rgba(0, 0, 0, 0.7);
2088 2155 }
2089 -.better-payment .file.is-warning.is-active .file-cta, .better-payment .file.is-warning:active .file-cta {
2156 +.better-payment .file.is-warning.is-active .file-cta,
2157 +.better-payment .file.is-warning:active .file-cta {
2090 2158 background-color: #ffd970;
2091 2159 border-color: transparent;
2092 2160 color: rgba(0, 0, 0, 0.7);
2093 2161 }
@@ -2095,19 +2163,22 @@
2095 2163 background-color: #f14668;
2096 2164 border-color: transparent;
2097 2165 color: #fff;
2098 2166 }
2099 -.better-payment .file.is-danger.is-hovered .file-cta, .better-payment .file.is-danger:hover .file-cta {
2167 +.better-payment .file.is-danger.is-hovered .file-cta,
2168 +.better-payment .file.is-danger:hover .file-cta {
2100 2169 background-color: #f03a5f;
2101 2170 border-color: transparent;
2102 2171 color: #fff;
2103 2172 }
2104 -.better-payment .file.is-danger.is-focused .file-cta, .better-payment .file.is-danger:focus .file-cta {
2173 +.better-payment .file.is-danger.is-focused .file-cta,
2174 +.better-payment .file.is-danger:focus .file-cta {
2105 2175 border-color: transparent;
2106 2176 box-shadow: 0 0 0.5em rgba(241, 70, 104, 0.25);
2107 2177 color: #fff;
2108 2178 }
2109 -.better-payment .file.is-danger.is-active .file-cta, .better-payment .file.is-danger:active .file-cta {
2179 +.better-payment .file.is-danger.is-active .file-cta,
2180 +.better-payment .file.is-danger:active .file-cta {
2110 2181 background-color: #ef2e55;
2111 2182 border-color: transparent;
2112 2183 color: #fff;
2113 2184 }
@@ -2115,19 +2186,22 @@
2115 2186 background-color: #ffd257;
2116 2187 border-color: transparent;
2117 2188 color: #fff;
2118 2189 }
2119 -.better-payment .file.is-expo.is-hovered .file-cta, .better-payment .file.is-expo:hover .file-cta {
2190 +.better-payment .file.is-expo.is-hovered .file-cta,
2191 +.better-payment .file.is-expo:hover .file-cta {
2120 2192 background-color: #ffcf4a;
2121 2193 border-color: transparent;
2122 2194 color: #fff;
2123 2195 }
2124 -.better-payment .file.is-expo.is-focused .file-cta, .better-payment .file.is-expo:focus .file-cta {
2196 +.better-payment .file.is-expo.is-focused .file-cta,
2197 +.better-payment .file.is-expo:focus .file-cta {
2125 2198 border-color: transparent;
2126 2199 box-shadow: 0 0 0.5em rgba(255, 210, 87, 0.25);
2127 2200 color: #fff;
2128 2201 }
2129 -.better-payment .file.is-expo.is-active .file-cta, .better-payment .file.is-expo:active .file-cta {
2202 +.better-payment .file.is-expo.is-active .file-cta,
2203 +.better-payment .file.is-expo:active .file-cta {
2130 2204 background-color: #ffcb3e;
2131 2205 border-color: transparent;
2132 2206 color: #fff;
2133 2207 }
@@ -2135,19 +2209,22 @@
2135 2209 background-color: #f14668;
2136 2210 border-color: transparent;
2137 2211 color: #fff;
2138 2212 }
2139 -.better-payment .file.is-love.is-hovered .file-cta, .better-payment .file.is-love:hover .file-cta {
2213 +.better-payment .file.is-love.is-hovered .file-cta,
2214 +.better-payment .file.is-love:hover .file-cta {
2140 2215 background-color: #f03a5f;
2141 2216 border-color: transparent;
2142 2217 color: #fff;
2143 2218 }
2144 -.better-payment .file.is-love.is-focused .file-cta, .better-payment .file.is-love:focus .file-cta {
2219 +.better-payment .file.is-love.is-focused .file-cta,
2220 +.better-payment .file.is-love:focus .file-cta {
2145 2221 border-color: transparent;
2146 2222 box-shadow: 0 0 0.5em rgba(241, 70, 104, 0.25);
2147 2223 color: #fff;
2148 2224 }
2149 -.better-payment .file.is-love.is-active .file-cta, .better-payment .file.is-love:active .file-cta {
2225 +.better-payment .file.is-love.is-active .file-cta,
2226 +.better-payment .file.is-love:active .file-cta {
2150 2227 background-color: #ef2e55;
2151 2228 border-color: transparent;
2152 2229 color: #fff;
2153 2230 }
@@ -2155,19 +2232,22 @@
2155 2232 background-color: #f96854;
2156 2233 border-color: transparent;
2157 2234 color: #fff;
2158 2235 }
2159 -.better-payment .file.is-patreon.is-hovered .file-cta, .better-payment .file.is-patreon:hover .file-cta {
2236 +.better-payment .file.is-patreon.is-hovered .file-cta,
2237 +.better-payment .file.is-patreon:hover .file-cta {
2160 2238 background-color: #f95d48;
2161 2239 border-color: transparent;
2162 2240 color: #fff;
2163 2241 }
2164 -.better-payment .file.is-patreon.is-focused .file-cta, .better-payment .file.is-patreon:focus .file-cta {
2242 +.better-payment .file.is-patreon.is-focused .file-cta,
2243 +.better-payment .file.is-patreon:focus .file-cta {
2165 2244 border-color: transparent;
2166 2245 box-shadow: 0 0 0.5em rgba(249, 104, 84, 0.25);
2167 2246 color: #fff;
2168 2247 }
2169 -.better-payment .file.is-patreon.is-active .file-cta, .better-payment .file.is-patreon:active .file-cta {
2248 +.better-payment .file.is-patreon.is-active .file-cta,
2249 +.better-payment .file.is-patreon:active .file-cta {
2170 2250 background-color: #f8523b;
2171 2251 border-color: transparent;
2172 2252 color: #fff;
2173 2253 }
@@ -2175,19 +2255,22 @@
2175 2255 background-color: #f26522;
2176 2256 border-color: transparent;
2177 2257 color: #fff;
2178 2258 }
2179 -.better-payment .file.is-rss.is-hovered .file-cta, .better-payment .file.is-rss:hover .file-cta {
2259 +.better-payment .file.is-rss.is-hovered .file-cta,
2260 +.better-payment .file.is-rss:hover .file-cta {
2180 2261 background-color: #f15d16;
2181 2262 border-color: transparent;
2182 2263 color: #fff;
2183 2264 }
2184 -.better-payment .file.is-rss.is-focused .file-cta, .better-payment .file.is-rss:focus .file-cta {
2265 +.better-payment .file.is-rss.is-focused .file-cta,
2266 +.better-payment .file.is-rss:focus .file-cta {
2185 2267 border-color: transparent;
2186 2268 box-shadow: 0 0 0.5em rgba(242, 101, 34, 0.25);
2187 2269 color: #fff;
2188 2270 }
2189 -.better-payment .file.is-rss.is-active .file-cta, .better-payment .file.is-rss:active .file-cta {
2271 +.better-payment .file.is-rss.is-active .file-cta,
2272 +.better-payment .file.is-rss:active .file-cta {
2190 2273 background-color: #ed560e;
2191 2274 border-color: transparent;
2192 2275 color: #fff;
2193 2276 }
@@ -2195,19 +2278,22 @@
2195 2278 background-color: #abf47c;
2196 2279 border-color: transparent;
2197 2280 color: rgba(0, 0, 0, 0.7);
2198 2281 }
2199 -.better-payment .file.is-bleeding.is-hovered .file-cta, .better-payment .file.is-bleeding:hover .file-cta {
2282 +.better-payment .file.is-bleeding.is-hovered .file-cta,
2283 +.better-payment .file.is-bleeding:hover .file-cta {
2200 2284 background-color: #a3f370;
2201 2285 border-color: transparent;
2202 2286 color: rgba(0, 0, 0, 0.7);
2203 2287 }
2204 -.better-payment .file.is-bleeding.is-focused .file-cta, .better-payment .file.is-bleeding:focus .file-cta {
2288 +.better-payment .file.is-bleeding.is-focused .file-cta,
2289 +.better-payment .file.is-bleeding:focus .file-cta {
2205 2290 border-color: transparent;
2206 2291 box-shadow: 0 0 0.5em rgba(171, 244, 124, 0.25);
2207 2292 color: rgba(0, 0, 0, 0.7);
2208 2293 }
2209 -.better-payment .file.is-bleeding.is-active .file-cta, .better-payment .file.is-bleeding:active .file-cta {
2294 +.better-payment .file.is-bleeding.is-active .file-cta,
2295 +.better-payment .file.is-bleeding:active .file-cta {
2210 2296 background-color: #9cf264;
2211 2297 border-color: transparent;
2212 2298 color: rgba(0, 0, 0, 0.7);
2213 2299 }
@@ -2215,19 +2301,22 @@
2215 2301 background-color: #bf4080;
2216 2302 border-color: transparent;
2217 2303 color: #fff;
2218 2304 }
2219 -.better-payment .file.is-sass.is-hovered .file-cta, .better-payment .file.is-sass:hover .file-cta {
2305 +.better-payment .file.is-sass.is-hovered .file-cta,
2306 +.better-payment .file.is-sass:hover .file-cta {
2220 2307 background-color: #b53d7a;
2221 2308 border-color: transparent;
2222 2309 color: #fff;
2223 2310 }
2224 -.better-payment .file.is-sass.is-focused .file-cta, .better-payment .file.is-sass:focus .file-cta {
2311 +.better-payment .file.is-sass.is-focused .file-cta,
2312 +.better-payment .file.is-sass:focus .file-cta {
2225 2313 border-color: transparent;
2226 2314 box-shadow: 0 0 0.5em rgba(191, 64, 128, 0.25);
2227 2315 color: #fff;
2228 2316 }
2229 -.better-payment .file.is-sass.is-active .file-cta, .better-payment .file.is-sass:active .file-cta {
2317 +.better-payment .file.is-sass.is-active .file-cta,
2318 +.better-payment .file.is-sass:active .file-cta {
2230 2319 background-color: #ac3a73;
2231 2320 border-color: transparent;
2232 2321 color: #fff;
2233 2322 }
@@ -2235,19 +2324,22 @@
2235 2324 background-color: #ffd863;
2236 2325 border-color: transparent;
2237 2326 color: rgba(0, 0, 0, 0.7);
2238 2327 }
2239 -.better-payment .file.is-amazon.is-hovered .file-cta, .better-payment .file.is-amazon:hover .file-cta {
2328 +.better-payment .file.is-amazon.is-hovered .file-cta,
2329 +.better-payment .file.is-amazon:hover .file-cta {
2240 2330 background-color: #ffd556;
2241 2331 border-color: transparent;
2242 2332 color: rgba(0, 0, 0, 0.7);
2243 2333 }
2244 -.better-payment .file.is-amazon.is-focused .file-cta, .better-payment .file.is-amazon:focus .file-cta {
2334 +.better-payment .file.is-amazon.is-focused .file-cta,
2335 +.better-payment .file.is-amazon:focus .file-cta {
2245 2336 border-color: transparent;
2246 2337 box-shadow: 0 0 0.5em rgba(255, 216, 99, 0.25);
2247 2338 color: rgba(0, 0, 0, 0.7);
2248 2339 }
2249 -.better-payment .file.is-amazon.is-active .file-cta, .better-payment .file.is-amazon:active .file-cta {
2340 +.better-payment .file.is-amazon.is-active .file-cta,
2341 +.better-payment .file.is-amazon:active .file-cta {
2250 2342 background-color: #ffd24a;
2251 2343 border-color: transparent;
2252 2344 color: rgba(0, 0, 0, 0.7);
2253 2345 }
@@ -2255,19 +2347,22 @@
2255 2347 background-color: #ea4aaa;
2256 2348 border-color: transparent;
2257 2349 color: #fff;
2258 2350 }
2259 -.better-payment .file.is-sponsor.is-hovered .file-cta, .better-payment .file.is-sponsor:hover .file-cta {
2351 +.better-payment .file.is-sponsor.is-hovered .file-cta,
2352 +.better-payment .file.is-sponsor:hover .file-cta {
2260 2353 background-color: #e93fa5;
2261 2354 border-color: transparent;
2262 2355 color: #fff;
2263 2356 }
2264 -.better-payment .file.is-sponsor.is-focused .file-cta, .better-payment .file.is-sponsor:focus .file-cta {
2357 +.better-payment .file.is-sponsor.is-focused .file-cta,
2358 +.better-payment .file.is-sponsor:focus .file-cta {
2265 2359 border-color: transparent;
2266 2360 box-shadow: 0 0 0.5em rgba(234, 74, 170, 0.25);
2267 2361 color: #fff;
2268 2362 }
2269 -.better-payment .file.is-sponsor.is-active .file-cta, .better-payment .file.is-sponsor:active .file-cta {
2363 +.better-payment .file.is-sponsor.is-active .file-cta,
2364 +.better-payment .file.is-sponsor:active .file-cta {
2270 2365 background-color: #e7339f;
2271 2366 border-color: transparent;
2272 2367 color: #fff;
2273 2368 }
@@ -2275,19 +2370,22 @@
2275 2370 background-color: #55acee;
2276 2371 border-color: transparent;
2277 2372 color: #fff;
2278 2373 }
2279 -.better-payment .file.is-twitter.is-hovered .file-cta, .better-payment .file.is-twitter:hover .file-cta {
2374 +.better-payment .file.is-twitter.is-hovered .file-cta,
2375 +.better-payment .file.is-twitter:hover .file-cta {
2280 2376 background-color: #49a6ed;
2281 2377 border-color: transparent;
2282 2378 color: #fff;
2283 2379 }
2284 -.better-payment .file.is-twitter.is-focused .file-cta, .better-payment .file.is-twitter:focus .file-cta {
2380 +.better-payment .file.is-twitter.is-focused .file-cta,
2381 +.better-payment .file.is-twitter:focus .file-cta {
2285 2382 border-color: transparent;
2286 2383 box-shadow: 0 0 0.5em rgba(85, 172, 238, 0.25);
2287 2384 color: #fff;
2288 2385 }
2289 -.better-payment .file.is-twitter.is-active .file-cta, .better-payment .file.is-twitter:active .file-cta {
2386 +.better-payment .file.is-twitter.is-active .file-cta,
2387 +.better-payment .file.is-twitter:active .file-cta {
2290 2388 background-color: #3ea1ec;
2291 2389 border-color: transparent;
2292 2390 color: #fff;
2293 2391 }
@@ -2295,19 +2393,22 @@
2295 2393 background-color: #47c68d;
2296 2394 border-color: transparent;
2297 2395 color: #fff;
2298 2396 }
2299 -.better-payment .file.is-videos.is-hovered .file-cta, .better-payment .file.is-videos:hover .file-cta {
2397 +.better-payment .file.is-videos.is-hovered .file-cta,
2398 +.better-payment .file.is-videos:hover .file-cta {
2300 2399 background-color: #3ec487;
2301 2400 border-color: transparent;
2302 2401 color: #fff;
2303 2402 }
2304 -.better-payment .file.is-videos.is-focused .file-cta, .better-payment .file.is-videos:focus .file-cta {
2403 +.better-payment .file.is-videos.is-focused .file-cta,
2404 +.better-payment .file.is-videos:focus .file-cta {
2305 2405 border-color: transparent;
2306 2406 box-shadow: 0 0 0.5em rgba(72, 199, 142, 0.25);
2307 2407 color: #fff;
2308 2408 }
2309 -.better-payment .file.is-videos.is-active .file-cta, .better-payment .file.is-videos:active .file-cta {
2409 +.better-payment .file.is-videos.is-active .file-cta,
2410 +.better-payment .file.is-videos:active .file-cta {
2310 2411 background-color: #3abb81;
2311 2412 border-color: transparent;
2312 2413 color: #fff;
2313 2414 }
@@ -2315,19 +2416,22 @@
2315 2416 background-color: #3e8ed0;
2316 2417 border-color: transparent;
2317 2418 color: #fff;
2318 2419 }
2319 -.better-payment .file.is-extensions.is-hovered .file-cta, .better-payment .file.is-extensions:hover .file-cta {
2420 +.better-payment .file.is-extensions.is-hovered .file-cta,
2421 +.better-payment .file.is-extensions:hover .file-cta {
2320 2422 background-color: #3488ce;
2321 2423 border-color: transparent;
2322 2424 color: #fff;
2323 2425 }
2324 -.better-payment .file.is-extensions.is-focused .file-cta, .better-payment .file.is-extensions:focus .file-cta {
2426 +.better-payment .file.is-extensions.is-focused .file-cta,
2427 +.better-payment .file.is-extensions:focus .file-cta {
2325 2428 border-color: transparent;
2326 2429 box-shadow: 0 0 0.5em rgba(62, 142, 208, 0.25);
2327 2430 color: #fff;
2328 2431 }
2329 -.better-payment .file.is-extensions.is-active .file-cta, .better-payment .file.is-extensions:active .file-cta {
2432 +.better-payment .file.is-extensions.is-active .file-cta,
2433 +.better-payment .file.is-extensions:active .file-cta {
2330 2434 background-color: #3082c5;
2331 2435 border-color: transparent;
2332 2436 color: #fff;
2333 2437 }
@@ -2335,19 +2439,22 @@
2335 2439 background-color: #6f5499;
2336 2440 border-color: transparent;
2337 2441 color: #fff;
2338 2442 }
2339 -.better-payment .file.is-bootstrap.is-hovered .file-cta, .better-payment .file.is-bootstrap:hover .file-cta {
2443 +.better-payment .file.is-bootstrap.is-hovered .file-cta,
2444 +.better-payment .file.is-bootstrap:hover .file-cta {
2340 2445 background-color: #694f91;
2341 2446 border-color: transparent;
2342 2447 color: #fff;
2343 2448 }
2344 -.better-payment .file.is-bootstrap.is-focused .file-cta, .better-payment .file.is-bootstrap:focus .file-cta {
2449 +.better-payment .file.is-bootstrap.is-focused .file-cta,
2450 +.better-payment .file.is-bootstrap:focus .file-cta {
2345 2451 border-color: transparent;
2346 2452 box-shadow: 0 0 0.5em rgba(111, 84, 153, 0.25);
2347 2453 color: #fff;
2348 2454 }
2349 -.better-payment .file.is-bootstrap.is-active .file-cta, .better-payment .file.is-bootstrap:active .file-cta {
2455 +.better-payment .file.is-bootstrap.is-active .file-cta,
2456 +.better-payment .file.is-bootstrap:active .file-cta {
2350 2457 background-color: #634b89;
2351 2458 border-color: transparent;
2352 2459 color: #fff;
2353 2460 }
@@ -2468,9 +2575,10 @@
2468 2575 position: absolute;
2469 2576 top: 0;
2470 2577 width: 100%;
2471 2578 }
2472 -.better-payment .file-cta, .better-payment .file-name {
2579 +.better-payment .file-cta,
2580 +.better-payment .file-name {
2473 2581 border-color: #dbdbdb;
2474 2582 border-radius: 0.375em;
2475 2583 font-size: 1em;
2476 2584 padding-left: 1em;
@@ -2745,5 +2853,891 @@
2745 2853 @media screen and (min-width: 1408px) {
2746 2854 .better-payment .is-flex-fullhd {
2747 2855 display: flex !important;
2748 2856 }
2857 +}
2858 +
2859 +.field-display-inline:nth-child(odd) {
2860 + margin-right: 1%;
2861 +}
2862 +
2863 +.field-display-inline:nth-child(even) {
2864 + margin-left: 1%;
2865 +}
2866 +
2867 +.better-payment .d-none {
2868 + display: none !important;
2869 +}
2870 +.better-payment .flex {
2871 + display: flex;
2872 +}
2873 +.better-payment .flex-col {
2874 + flex-direction: column;
2875 +}
2876 +.better-payment .flex-1 {
2877 + flex: 1;
2878 +}
2879 +.better-payment .justify-between {
2880 + justify-content: space-between;
2881 +}
2882 +.better-payment .justify-center {
2883 + justify-content: center;
2884 +}
2885 +.better-payment .justify-end {
2886 + justify-content: flex-end;
2887 +}
2888 +.better-payment .items-start {
2889 + align-items: flex-start;
2890 +}
2891 +.better-payment .items-center {
2892 + align-items: center;
2893 +}
2894 +.better-payment .items-end {
2895 + align-items: flex-end;
2896 +}
2897 +.better-payment .min-h-full {
2898 + min-height: 100vh;
2899 +}
2900 +.better-payment .gap-1 {
2901 + gap: 4px;
2902 +}
2903 +.better-payment .gap-2 {
2904 + gap: 8px;
2905 +}
2906 +.better-payment .gap-3 {
2907 + gap: 12px;
2908 +}
2909 +.better-payment .gap-4 {
2910 + gap: 16px;
2911 +}
2912 +.better-payment .gap-5 {
2913 + gap: 20px;
2914 +}
2915 +.better-payment .gap-6 {
2916 + gap: 24px;
2917 +}
2918 +.better-payment .gap-10 {
2919 + gap: 40px;
2920 +}
2921 +.better-payment .min-w-300 {
2922 + min-width: 300px !important;
2923 +}
2924 +.better-payment .max-w-300 {
2925 + max-width: 300px !important;
2926 +}
2927 +.better-payment .pointer {
2928 + cursor: pointer;
2929 +}
2930 +.better-payment h2 {
2931 + font-size: 26px;
2932 + line-height: 1.2em;
2933 + font-weight: 700;
2934 + font-family: "IBM Plex Sans", sans-serif;
2935 + color: #2b2748;
2936 +}
2937 +.better-payment .bp-dashboard-header h2 {
2938 + font-weight: 400;
2939 +}
2940 +.better-payment button {
2941 + font-size: 14px;
2942 + line-height: 1.1em;
2943 + color: #6859fa;
2944 + display: inline-flex;
2945 + align-items: center;
2946 + justify-content: center;
2947 + padding: 8px 16px;
2948 + background: #f0eefe;
2949 + border-radius: 20px;
2950 + border: none;
2951 + transition: all 0.25s ease-in-out;
2952 + cursor: pointer;
2953 +}
2954 +.better-payment button.primary-btn {
2955 + font-size: 16px;
2956 + font-weight: 500;
2957 + padding: 12px 18px;
2958 + border-radius: 8px;
2959 + color: #6859fa;
2960 +}
2961 +.better-payment button.complete {
2962 + color: #ffffff;
2963 + background: #0eca86;
2964 +}
2965 +.better-payment button.incomplete {
2966 + color: #ffffff;
2967 + background: #ffda15;
2968 +}
2969 +.better-payment button.active {
2970 + color: #00c679;
2971 + background: rgba(0, 198, 123, 0.1019607843);
2972 + border-radius: 20px;
2973 +}
2974 +.better-payment button.inactive {
2975 + color: #edaa00;
2976 + background: rgba(255, 209, 0, 0.1019607843);
2977 +}
2978 +.better-payment button.cancel {
2979 + color: #ff0000;
2980 + background: rgba(255, 0, 0, 0.1490196078);
2981 +}
2982 +.better-payment .bp--sidebar-wrapper {
2983 + padding: 24px;
2984 + background: #fff;
2985 + min-width: 270px;
2986 + min-height: 100vh;
2987 + border: 1px solid #f1f1f1;
2988 +}
2989 +.better-payment .bp--author {
2990 + display: flex;
2991 + align-items: center;
2992 + gap: 16px;
2993 + margin-bottom: 40px;
2994 +}
2995 +.better-payment .bp--author img {
2996 + width: 32px !important;
2997 + height: 32px !important;
2998 + min-width: 32px;
2999 + border-radius: 50%;
3000 + object-fit: cover;
3001 + flex-shrink: 0;
3002 + display: block;
3003 +}
3004 +.better-payment .bp--author h5 {
3005 + font-size: 20px;
3006 + font-weight: 500;
3007 + line-height: 1.1em;
3008 + color: #48506d;
3009 +}
3010 +.better-payment .bp--sidebar-nav-list {
3011 + display: flex;
3012 + flex-direction: column;
3013 + gap: 12px;
3014 +}
3015 +.better-payment .bp--sidebar-nav {
3016 + display: flex;
3017 + align-items: center;
3018 + gap: 12px;
3019 + padding: 4px 8px;
3020 + cursor: pointer;
3021 +}
3022 +.better-payment .bp--nav-icon {
3023 + display: inline-flex;
3024 +}
3025 +.better-payment span.bp--nav-icon svg {
3026 + width: 20px;
3027 + height: 20px;
3028 +}
3029 +.better-payment .bp--sidebar-nav.active span.bp--nav-icon svg path {
3030 + stroke: #000000;
3031 +}
3032 +.better-payment .bp--sidebar-nav .bp--nav-text {
3033 + color: #48506d;
3034 + font-size: 16px;
3035 + font-weight: 500;
3036 + transition: ease-in-out 0.25s;
3037 +}
3038 +.better-payment .bp--sidebar-nav.active .bp--nav-text {
3039 + color: #000000;
3040 +}
3041 +.better-payment .bp--sidebar-nav:hover .bp--nav-text {
3042 + color: #2b2748;
3043 +}
3044 +.better-payment .bp--sidebar-nav.active {
3045 + color: #2b2748;
3046 +}
3047 +.better-payment .bp--db-main-wrapper {
3048 + padding-right: 24px;
3049 + flex-basis: calc(100% - 294px);
3050 + max-width: calc(100% - 294px);
3051 +}
3052 +.better-payment .bp--db-header {
3053 + display: flex;
3054 + justify-content: space-between;
3055 + align-items: center;
3056 + padding: 16px 24px;
3057 + background: #fff;
3058 + margin-bottom: 24px;
3059 + border: 1px solid #f1f1f1;
3060 +}
3061 +.better-payment .bp--db-header img {
3062 + max-width: 200px;
3063 +}
3064 +.better-payment .bp--table-wrapper {
3065 + display: flex;
3066 + flex-direction: column;
3067 + overflow: auto;
3068 +}
3069 +.better-payment .bp--table-header {
3070 + background: rgba(110, 88, 247, 0.1);
3071 + border: none;
3072 + padding: 10px 24px;
3073 + min-width: 1442px;
3074 +}
3075 +.better-payment .bp--table-header .th,
3076 +.better-payment .bp--table-header .th h5 {
3077 + font-size: 16px;
3078 + line-height: 1.2em;
3079 + font-weight: 500;
3080 + color: #2a3256;
3081 +}
3082 +.better-payment .bp--table-body {
3083 + padding: 10px 24px;
3084 + min-width: 1442px;
3085 + background: #ffffff;
3086 + border-left: 1px solid #f1f1f1;
3087 + border-right: 1px solid #f1f1f1;
3088 +}
3089 +.better-payment .bp--table-body {
3090 + border-bottom: 1px solid rgba(110, 88, 247, 0.1);
3091 +}
3092 +.better-payment .bp--table-body .td h5,
3093 +.better-payment .bp--table-body .td h5 span {
3094 + font-size: 16px;
3095 + font-weight: 400;
3096 + line-height: 1.2em;
3097 + color: #2a3256;
3098 +}
3099 +.better-payment .bp--table-body .td p {
3100 + font-size: 14px;
3101 + color: #48506d;
3102 + display: inline-flex;
3103 +}
3104 +.better-payment .bp--table-body .td span {
3105 + font-size: 13px;
3106 + color: #797e90;
3107 +}
3108 +.better-payment .bp--table-body .price {
3109 + font-size: 18px;
3110 + line-height: 1em;
3111 + font-weight: 500;
3112 + color: #2b2748;
3113 + padding-right: 4px;
3114 +}
3115 +.better-payment .td.details i {
3116 + font-size: 16px;
3117 + color: #48506d;
3118 +}
3119 +.better-payment .td.details .product--img {
3120 + max-width: 24px;
3121 +}
3122 +.better-payment .td.details .source--img {
3123 + max-width: 80px;
3124 +}
3125 +.better-payment .th.details,
3126 +.better-payment .td.details {
3127 + min-width: 130px;
3128 + max-width: 130px;
3129 + flex: 1;
3130 +}
3131 +.better-payment .th.details.user-name,
3132 +.better-payment .td.details.user-name {
3133 + max-width: 200px;
3134 +}
3135 +.better-payment .transactions .th.details:first-child,
3136 +.better-payment .transactions .td.details:first-child {
3137 + min-width: 170px;
3138 +}
3139 +.better-payment .transactions .th.details:nth-child(2),
3140 +.better-payment .transactions .td.details:nth-child(2) {
3141 + min-width: 220px;
3142 + max-width: 220px;
3143 +}
3144 +.better-payment .transactions .th.details:nth-child(4),
3145 +.better-payment .transactions .td.details:nth-child(4) {
3146 + min-width: 220px;
3147 + max-width: 220px;
3148 +}
3149 +.better-payment .bp--table-body .td .action-icon {
3150 + border-radius: 4px;
3151 + display: flex;
3152 + align-items: center;
3153 + justify-content: center;
3154 + width: 48px;
3155 + height: 36px;
3156 + background: rgba(110, 88, 247, 0.1);
3157 +}
3158 +.better-payment .bp--table-body .td span.action-icon i {
3159 + font-size: 20px;
3160 + line-height: 1.2em;
3161 + color: #6e58f7;
3162 +}
3163 +.better-payment .bp-flexbox-container {
3164 + display: flex;
3165 + align-items: center;
3166 + gap: 5px;
3167 +}
3168 +.better-payment .bp-shortend-text {
3169 + width: 200px;
3170 + white-space: nowrap;
3171 + overflow: hidden;
3172 + text-overflow: ellipsis;
3173 +}
3174 +.better-payment .bp--table-wrapper .bp--table-header {
3175 + min-width: 1640px;
3176 +}
3177 +.better-payment .bp--table-wrapper .bp--table-header.bp-min_width-1300 {
3178 + min-width: 1300px;
3179 + padding-left: 14px;
3180 + padding-right: 14px;
3181 +}
3182 +.better-payment .bp--table-wrapper .bp--table-header .th.details.email {
3183 + max-width: 200px;
3184 + min-width: 200px;
3185 +}
3186 +.better-payment .bp--table-wrapper .bp--table-header .th.details.transaction {
3187 + max-width: 200px;
3188 + min-width: 200px;
3189 +}
3190 +.better-payment .bp--table-wrapper .bp--table-header .th.user-name {
3191 + max-width: 200px;
3192 + min-width: 200px;
3193 +}
3194 +.better-payment .bp--table-wrapper .bp--table-body {
3195 + min-width: 1640px;
3196 +}
3197 +.better-payment .bp--table-wrapper .bp--table-body.bp-min_width-1300 {
3198 + min-width: 1300px;
3199 + padding-left: 14px;
3200 + padding-right: 14px;
3201 +}
3202 +.better-payment .bp--table-wrapper .bp--table-body .td p {
3203 + align-items: center;
3204 + gap: 4px;
3205 +}
3206 +.better-payment .bp--table-wrapper .bp--table-body .td span {
3207 + font-size: 14px;
3208 + color: #48506d;
3209 +}
3210 +.better-payment .bp--table-wrapper .bp--table-body .td.details.email {
3211 + max-width: 200px;
3212 + min-width: 200px;
3213 +}
3214 +.better-payment .bp--table-wrapper .bp--table-body .td.details.email p span:first-child {
3215 + max-width: 170px;
3216 + white-space: nowrap;
3217 + overflow: hidden;
3218 + text-overflow: ellipsis;
3219 +}
3220 +.better-payment .bp--table-wrapper .bp--table-body .td.details.transaction {
3221 + max-width: 200px;
3222 + min-width: 200px;
3223 +}
3224 +.better-payment .bp--table-wrapper .bp--table-body .td.details.transaction p span:first-child {
3225 + max-width: 170px;
3226 + white-space: nowrap;
3227 + overflow: hidden;
3228 + text-overflow: ellipsis;
3229 +}
3230 +.better-payment .bp-copy-clipboard-info,
3231 +.better-payment .bp-email-copy-clipboard-info {
3232 + color: rgb(110, 88, 247) !important;
3233 +}
3234 +.better-payment .better-payment-user-dashboard-container h1,
3235 +.better-payment .better-payment-user-dashboard-container h2,
3236 +.better-payment .better-payment-user-dashboard-container h3,
3237 +.better-payment .better-payment-user-dashboard-container h4,
3238 +.better-payment .better-payment-user-dashboard-container h5,
3239 +.better-payment .better-payment-user-dashboard-container h6,
3240 +.better-payment .better-payment-user-dashboard-container p {
3241 + margin: 0;
3242 + padding: 0;
3243 +}
3244 +.better-payment .bp-logo {
3245 + margin-bottom: 55px;
3246 + text-align: center;
3247 +}
3248 +.better-payment .bp-logo img {
3249 + max-height: 36px;
3250 + width: auto;
3251 +}
3252 +.better-payment .bp-row {
3253 + display: flex;
3254 + flex-wrap: wrap;
3255 + margin-left: -12px;
3256 + margin-right: -12px;
3257 +}
3258 +.better-payment .bp-col {
3259 + position: relative;
3260 + width: 100%;
3261 + min-height: 1px;
3262 + padding-left: 12px;
3263 + padding-right: 12px;
3264 +}
3265 +.better-payment .bp-col1 {
3266 + width: 8.333333333%;
3267 +}
3268 +.better-payment .bp-col_2 {
3269 + width: 16.66666666%;
3270 +}
3271 +.better-payment .bp-col_3 {
3272 + width: 20%;
3273 +}
3274 +.better-payment .bp-col_4 {
3275 + width: 25%;
3276 +}
3277 +.better-payment .bp-col_5 {
3278 + width: 33.333333333%;
3279 +}
3280 +.better-payment .bp-col_6 {
3281 + width: 41.3333333%;
3282 +}
3283 +.better-payment .bp-col_7 {
3284 + width: 50%;
3285 +}
3286 +.better-payment .bp-col_8 {
3287 + width: 58.333333333%;
3288 +}
3289 +.better-payment .bp-col_9 {
3290 + width: 66.666666666%;
3291 +}
3292 +.better-payment .bp-col_10 {
3293 + width: 75%;
3294 +}
3295 +.better-payment .bp-col_11 {
3296 + width: 83.333333333%;
3297 +}
3298 +.better-payment .bp-col_12 {
3299 + width: 91.666666666%;
3300 +}
3301 +.better-payment .bp-col_13 {
3302 + width: 100%;
3303 +}
3304 +.better-payment .w-80 {
3305 + width: 80px;
3306 + text-align: left;
3307 +}
3308 +.better-payment .w-195 {
3309 + flex-basis: 195px;
3310 +}
3311 +.better-payment .bp-amount_wrapper {
3312 + margin-bottom: 24px;
3313 +}
3314 +.better-payment .td-product_logo {
3315 + line-height: 0;
3316 + max-width: 90px;
3317 +}
3318 +.better-payment .td-product_logo img {
3319 + object-fit: contain;
3320 + height: 20px;
3321 + width: 100%;
3322 +}
3323 +.better-payment .bp-dashboard_wrapper {
3324 + width: 100%;
3325 + background-color: #ffffff;
3326 +}
3327 +.better-payment .bp-dashboard_wrapper .bp-dashboard_title {
3328 + font-size: 32px;
3329 + font-weight: 600;
3330 + text-align: left;
3331 + color: #2a3256;
3332 + margin-bottom: 36px;
3333 +}
3334 +.better-payment .bp-amount {
3335 + width: 100%;
3336 + height: auto;
3337 + padding: 0px;
3338 + border-radius: 12px;
3339 + border: 1px solid #eaecf0;
3340 + overflow: hidden;
3341 +}
3342 +.better-payment .bp-amount h4 {
3343 + margin: 16px;
3344 + font-size: 16px;
3345 + font-weight: 500;
3346 + color: #667085;
3347 +}
3348 +.better-payment .bp-amount_price {
3349 + font-size: 30px;
3350 + font-weight: 600;
3351 + text-align: left;
3352 + color: #2a3256;
3353 + padding: 16px;
3354 +}
3355 +.better-payment .bp-transaction {
3356 + padding: 10px 16px;
3357 + background-color: #fafafc;
3358 + width: 100%;
3359 + font-size: 13px;
3360 + font-weight: 400;
3361 + color: #667085;
3362 +}
3363 +@media (min-width: 1500px) {
3364 + .better-payment .bp-amount_price {
3365 + font-size: 40px;
3366 + }
3367 + .better-payment .bp-amount h4 {
3368 + font-size: 18px;
3369 + }
3370 + .better-payment .bp-transaction {
3371 + font-size: 16px;
3372 + }
3373 +}
3374 +.better-payment .bp-transaction_number {
3375 + font-weight: 500;
3376 + color: #6e58f7;
3377 +}
3378 +.better-payment .bp-analytics_chart-wrapper {
3379 + margin-bottom: 24px;
3380 +}
3381 +.better-payment .bp-form_control {
3382 + border: 1px solid #d9e1f4;
3383 + border-radius: 8px;
3384 + padding: 11px 16px;
3385 +}
3386 +.better-payment .bp-form_control option {
3387 + font-size: 14px;
3388 + font-weight: 500;
3389 + color: #48506d;
3390 +}
3391 +.better-payment .filter-btn {
3392 + padding: 8px 16px 8px 16px;
3393 + border-radius: 8px;
3394 +}
3395 +.better-payment .bp-recent_box {
3396 + background-color: #ffffff;
3397 + border: 1px solid #eaecf0;
3398 + border-radius: 16px;
3399 + padding: 0 16px;
3400 +}
3401 +.better-payment .bp-recent_header {
3402 + padding: 16px 0;
3403 + border-bottom: 1px solid #eaecf0;
3404 + margin-bottom: 16px;
3405 +}
3406 +.better-payment .bp-recent_header span {
3407 + line-height: 0;
3408 +}
3409 +.better-payment .bp-view_all-btn {
3410 + font-size: 14px;
3411 + font-weight: 500;
3412 + color: #48506d;
3413 + border: 1px solid #d9e1f4;
3414 + border-radius: 4px;
3415 + padding: 6px 16px;
3416 + text-decoration: none;
3417 +}
3418 +.better-payment .bp-recent_header-title {
3419 + color: #2a3256;
3420 + font-size: 16px;
3421 + font-weight: 600;
3422 +}
3423 +.better-payment .bp-th {
3424 + background-color: #fafafc;
3425 + border-radius: 4px;
3426 + padding: 9px 12px 9px 12px;
3427 + margin-bottom: 4px;
3428 +}
3429 +.better-payment .bp-th h5 {
3430 + font-size: 14px;
3431 + font-weight: 500;
3432 + color: #667085;
3433 +}
3434 +.better-payment .bp-recent_body {
3435 + padding-bottom: 16px;
3436 +}
3437 +.better-payment .bp-product_scroll {
3438 + min-height: 334px;
3439 + max-height: 334px;
3440 + overflow: auto;
3441 +}
3442 +.better-payment .td-product {
3443 + gap: 6px;
3444 + padding: 9px 11px;
3445 +}
3446 +.better-payment .td-product_name {
3447 + font-size: 12px;
3448 + font-weight: 500;
3449 + color: #2a3256;
3450 + margin-bottom: 4px;
3451 +}
3452 +.better-payment .td-details {
3453 + font-size: 10px;
3454 + font-weight: 400;
3455 + color: #667085;
3456 +}
3457 +.better-payment .p-0 {
3458 + padding: 0 !important;
3459 +}
3460 +.better-payment .mb-0 {
3461 + margin-bottom: 0 !important;
3462 +}
3463 +.better-payment .pb-0 {
3464 + padding-bottom: 0 !important;
3465 +}
3466 +.better-payment .pl-0 {
3467 + padding-left: 0 !important;
3468 +}
3469 +.better-payment .w-auto {
3470 + min-width: auto !important;
3471 + width: auto !important;
3472 +}
3473 +.better-payment .line-height-0 {
3474 + line-height: 0;
3475 +}
3476 +.better-payment .better-payment-transaction-import {
3477 + margin-bottom: 5px;
3478 +}
3479 +@media only screen and (max-width: 1200px) {
3480 + .better-payment .bp-amount h4,
3481 + .better-payment .bp-transaction {
3482 + font-size: 14px;
3483 + }
3484 + .better-payment .bp-amount_price {
3485 + font-size: 32px;
3486 + }
3487 + .better-payment .bp-subscription_wrapper .bp-col_7 {
3488 + width: 100%;
3489 + }
3490 + .better-payment .bp-analytics_chart-wrapper .bp-col_10,
3491 + .better-payment .bp-analytics_chart-wrapper .bp-col_4 {
3492 + width: 100%;
3493 + }
3494 +}
3495 +@media only screen and (max-width: 1024px) {
3496 + .better-payment .bp-logo {
3497 + margin-bottom: 45px;
3498 + }
3499 + .better-payment .bp-amount_wrapper .bp-col_4 {
3500 + width: 50%;
3501 + }
3502 + .better-payment .bp-amount {
3503 + margin-bottom: 24px;
3504 + }
3505 + .better-payment .bp-th,
3506 + .better-payment .bp-td {
3507 + justify-content: space-between;
3508 + }
3509 + .better-payment .bp-th {
3510 + padding: 9px 0px 9px 12px;
3511 + }
3512 +}
3513 +@media only screen and (max-width: 800px) {
3514 + .better-payment .flex-wrap {
3515 + flex-wrap: wrap !important;
3516 + }
3517 + .better-payment .bp-amount_wrapper .bp-col_4 {
3518 + width: 100% !important;
3519 + }
3520 +}
3521 +@media only screen and (max-width: 1024px) {
3522 + .better-payment .gap-2 {
3523 + gap: 4px;
3524 + }
3525 + .better-payment .gap-3 {
3526 + gap: 6px;
3527 + }
3528 + .better-payment .gap-4 {
3529 + gap: 8px;
3530 + }
3531 + .better-payment .gap-5 {
3532 + gap: 12px;
3533 + }
3534 + .better-payment .gap-6 {
3535 + gap: 16px;
3536 + }
3537 + .better-payment .gap-10 {
3538 + gap: 24px;
3539 + }
3540 + .better-payment h2 {
3541 + font-size: 20px;
3542 + }
3543 + .better-payment button {
3544 + font-size: 12px;
3545 + padding: 7px 12px;
3546 + }
3547 + .better-payment button.primary-btn {
3548 + font-size: 14px;
3549 + padding: 10px 16px;
3550 + }
3551 + .better-payment .bp--sidebar-wrapper {
3552 + min-width: 200px;
3553 + }
3554 + .better-payment .bp--sidebar-nav-list {
3555 + gap: 10px;
3556 + }
3557 + .better-payment .bp--sidebar-nav {
3558 + gap: 8px;
3559 + }
3560 + .better-payment .bp--author {
3561 + gap: 12px;
3562 + margin-bottom: 40px;
3563 + }
3564 + .better-payment span.bp--nav-icon svg {
3565 + width: 20px;
3566 + height: 20px;
3567 + }
3568 + .better-payment .bp--sidebar-nav .bp--nav-text {
3569 + font-size: 14px;
3570 + }
3571 + .better-payment .bp--db-main-wrapper {
3572 + padding-right: 16px;
3573 + flex-basis: calc(100% - 216px);
3574 + max-width: calc(100% - 216px);
3575 + }
3576 + .better-payment .bp--db-header {
3577 + padding: 12px 20px;
3578 + margin-bottom: 16px;
3579 + }
3580 + .better-payment .bp--table-body {
3581 + padding: 10px 20px;
3582 + }
3583 + .better-payment .bp--table-body .td .action-icon {
3584 + width: 36px;
3585 + height: 30px;
3586 + }
3587 + .better-payment .bp--table-header .th {
3588 + font-size: 14px;
3589 + }
3590 + .better-payment .bp--table-body .td p {
3591 + font-size: 12px;
3592 + }
3593 + .better-payment .bp--table-body .td span.action-icon i {
3594 + font-size: 16px;
3595 + }
3596 +}
3597 +.better-payment .bp-no_subscription-text {
3598 + font-size: 14px;
3599 + color: #48506d;
3600 + font-weight: 400;
3601 +}
3602 +.better-payment .td-product_price span {
3603 + font-size: 13px;
3604 + font-weight: 600;
3605 + color: #2a3256;
3606 +}
3607 +.better-payment .padding-0 {
3608 + padding: 0px;
3609 +}
3610 +.better-payment .bp-hidden-xs {
3611 + display: block;
3612 +}
3613 +.better-payment .bp-visible-xs {
3614 + display: none;
3615 +}
3616 +.better-payment {
3617 + /* Media Queries : Start */
3618 +}
3619 +@media (max-width: 767.98px) {
3620 + .better-payment .bp-hidden-xs {
3621 + display: none;
3622 + }
3623 + .better-payment .bp-visible-xs {
3624 + display: block;
3625 + }
3626 + .better-payment .bp--db-main-wrapper {
3627 + width: 100%;
3628 + max-width: 100%;
3629 + flex-basis: 100%;
3630 + padding-right: 0px;
3631 + }
3632 + .better-payment .better-payment-user-dashboard-sidebar {
3633 + position: absolute;
3634 + top: 0;
3635 + left: 0;
3636 + z-index: 999;
3637 + height: 100%;
3638 + }
3639 + .better-payment .bp-overlay {
3640 + position: absolute;
3641 + top: 0;
3642 + bottom: 0;
3643 + left: 0;
3644 + right: 0;
3645 + background-color: rgba(0, 0, 0, 0.5);
3646 + z-index: 1;
3647 + display: none;
3648 + }
3649 + .better-payment .bp-dashboard-hamburger {
3650 + background: transparent;
3651 + cursor: pointer;
3652 + display: flex;
3653 + align-items: center;
3654 + }
3655 +}
3656 +.better-payment {
3657 + /* Media Queries : End */
3658 +}
3659 +
3660 +.better-payment-warning {
3661 + font-size: 13px;
3662 + line-height: 18px;
3663 + background-color: #f3f0ca;
3664 + color: #886726;
3665 + padding: 10px;
3666 + border-radius: 3px;
3667 +}
3668 +
3669 +.better-payment-dynamic-value-info {
3670 + word-break: break-word;
3671 +}
3672 +
3673 +div.bp-thank_page-custom-logo_wrapper-error svg {
3674 + width: 70px;
3675 + height: 70px;
3676 + background: rgba(238, 96, 89, 0.1019607843);
3677 + padding: 10px;
3678 + border-radius: 16px;
3679 +}
3680 +div.bp-thank_page-custom-logo_wrapper-error svg path {
3681 + stroke: #f44336;
3682 + fill: #f44336;
3683 +}
3684 +
3685 +.bp-thank_page div.bp-thank_page-custom-logo_wrapper-success svg {
3686 + width: 70px;
3687 + height: 70px;
3688 + background: rgba(107, 89, 238, 0.1019607843);
3689 + padding: 10px;
3690 + border-radius: 16px;
3691 +}
3692 +.bp-thank_page div.bp-thank_page-custom-logo_wrapper-success svg path {
3693 + stroke: #6b59ee;
3694 + fill: #6b59ee;
3695 +}
3696 +
3697 +.bp-thank_page-logo {
3698 + display: flex;
3699 + align-items: center;
3700 + justify-content: center;
3701 +}
3702 +
3703 +div.bp-thank_page-custom-logo_wrapper-success.pf-block {
3704 + display: flex;
3705 + align-items: center;
3706 + justify-content: center;
3707 + line-height: 0;
3708 + width: 70px;
3709 + height: 70px;
3710 + background: rgba(107, 89, 238, 0.1019607843);
3711 + padding: 10px;
3712 + border-radius: 16px;
3713 +}
3714 +div.bp-thank_page-custom-logo_wrapper-success.pf-block span,
3715 +div.bp-thank_page-custom-logo_wrapper-success.pf-block i {
3716 + font-size: 42px;
3717 + color: #6b59ee;
3718 + height: auto;
3719 + width: auto;
3720 +}
3721 +
3722 +div.bp-thank_page-custom-logo_wrapper-error.pf-block {
3723 + display: flex;
3724 + align-items: center;
3725 + justify-content: center;
3726 + line-height: 0;
3727 + width: 70px;
3728 + height: 70px;
3729 + background: rgba(238, 96, 89, 0.1019607843);
3730 + padding: 10px;
3731 + border-radius: 16px;
3732 +}
3733 +div.bp-thank_page-custom-logo_wrapper-error.pf-block span,
3734 +div.bp-thank_page-custom-logo_wrapper-error.pf-block i {
3735 + font-size: 42px;
3736 + color: #f44336;
3737 + height: auto;
3738 + width: auto;
3739 +}
3740 +
3741 +.better-payment a {
3742 + text-decoration: none;
2749 3743 }