frontdev/no-copy-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit styles

Browse Source
This commit is contained in:
smanylov
2026-01-18 16:27:09 +07:00
parent a9c85570b7
commit 7a03b0bc2e
9 changed files with 253 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/styles/pages-styles.scss
+219 -67
View File
@@ -840,39 +840,64 @@
.referral-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
margin-bottom: 40px;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
margin-bottom: 24px;
.stat-card {
background: white;
padding: 30px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border: 1px solid v.$b-color-1;
padding: 18px;
border-radius: 16px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
border: 2px solid #e2e8f0;
&::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
transition: left 0.5s ease;
}
&:hover {
transform: translateY(-4px);
box-shadow: 0 12px 35px rgba(99, 102, 241, 0.15);
border-color: #667eea;
&::before {
left: 100%;
}
}
.icon {
font-size: 48px;
margin-bottom: 15px;
font-size: 2rem;
margin-bottom: 8px;
display: inline-block;
}
.value {
font-size: 32px;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 8px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
margin-bottom: 6px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.label {
font-size: 16px;
color: v.$text-s;
font-weight: 500;
font-size: 0.8rem;
color: #64748b;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
}
}
@@ -888,30 +913,39 @@
.referral-link-input {
display: flex;
gap: 15px;
max-width: 600px;
max-width: 700px;
margin: 20px auto;
#referral-link {
display: flex;
flex: 1;
padding: 10px 20px;
border: 2px solid v.$b-color-1;
padding: 10px;
border: 2px solid #e2e8f0;
border-radius: 12px;
font-size: 14px;
background: #f9fafb;
white-space: nowrap;
display: flex;
background: #f8f9fa;
color: #1e293b;
font-weight: 500;
align-items: center;
justify-content: center;
white-space: nowrap;
}
.copy-btn {
padding: 10px 30px;
background: linear-gradient(135deg, #10b981, #059669);
padding: 14px 28px;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none;
border-radius: 12px;
font-weight: 600;
font-weight: 700;
cursor: pointer;
transition: all 0.3s;
transition: all 0.3s ease;
white-space: nowrap;
&:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}
}
}
@@ -922,51 +956,86 @@
}
.section-title {
font-size: 24px;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 25px;
color: v.$text-p;
color: #1e293b;
display: flex;
align-items: center;
gap: 15px;
gap: 12px;
margin-bottom: 20px;
&::before {
content: '';
width: 8px;
height: 8px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
}
}
.commission-levels {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 20px;
.level-card {
padding: 20px;
border-radius: 15px;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
border: 2px solid #e2e8f0;
border-radius: 16px;
padding: 18px;
text-align: center;
border: 2px solid;
transition: all 0.3s ease;
position: relative;
}
.level-bronze {
background: linear-gradient(135deg, #fef3c7, #fde68a);
border-color: #f59e0b;
color: #92400e;
}
&:hover {
transform: translateY(-4px);
border-color: #667eea;
box-shadow: 0 12px 30px rgba(102, 126, 234, 0.15);
}
.level-silver {
background: linear-gradient(135deg, #f3f4f6, #d1d5db);
border-color: v.$text-s;
color: v.$text-s;
}
&.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-color: #667eea;
color: white;
.level-gold {
background: linear-gradient(135deg, #fef3c7, #fcd34d);
border-color: #f59e0b;
color: #92400e;
}
.level-requirement {
color: rgba(255, 255, 255, 0.9);
}
.level-platinum {
background: linear-gradient(135deg, #ede9fe, #ddd6fe);
border-color: #8b5cf6;
color: #5b21b6;
.level-commission {
color: white;
background: none;
-webkit-text-fill-color: white;
}
}
.level-number {
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 6px;
}
.level-commission {
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 10px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background-clip: text;
-webkit-text-fill-color: transparent;
}
.level-subscribe {
font-weight: 700;
color: #1e293b;
margin-bottom: 4px;
}
.level-requirement {
font-size: 0.9rem;
color: #64748b;
margin-top: 8px;
}
}
&-footer {
@@ -1001,22 +1070,26 @@
padding: 25px;
border-radius: 15px;
border: 1px solid #bae6fd;
text-align: center;
&.success {
background: linear-gradient(135deg, #f0fdf4, #dcfce7);
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: white;
border-color: #bbf7d0;
}
&.warning {
background: linear-gradient(135deg, #fffbeb, #fef3c7);
border-color: #fed7aa;
p {
color: white;
background: white;
background-clip: text;
}
}
p {
font-size: 24px;
font-size: 1.5rem;
font-weight: 700;
margin: 10px 0;
margin: 12px 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
@@ -1056,14 +1129,16 @@
}
.btn-success {
background: linear-gradient(135deg, #10b981, #059669);
padding: 14px 28px;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
padding: 12px 25px;
border: none;
border-radius: 10px;
font-weight: 600;
border-radius: 12px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s;
transition: all 0.3s ease;
white-space: nowrap;
height: 48px;
}
}
}
@@ -1162,6 +1237,28 @@
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.4s ease;
}
&:hover {
opacity: 1;
transform: translateY(0px);
transition: 0.5s;
&::before {
opacity: 1;
}
}
}
.stat-type {
@@ -1255,6 +1352,12 @@
border-radius: 14px;
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
&:hover {
background: white;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
transform: translateX(4px);
}
}
.file-icon {
@@ -1318,6 +1421,11 @@
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border-radius: 12px;
transition: all 0.3s ease;
&:hover {
background: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
}
.platform-name {
@@ -1372,6 +1480,28 @@
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.274) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.4s ease;
}
&:hover {
opacity: 1;
transform: translateY(0px);
transition: 0.5s;
&::before {
opacity: 1;
}
}
.stat-type {
font-size: 11px;
font-weight: 700;
@@ -1538,6 +1668,12 @@
align-items: center;
gap: 12px;
&:hover {
background: white;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
transform: translateY(-1px);
}
&::before {
content: '';
position: absolute;
@@ -1813,6 +1949,11 @@
align-items: center;
justify-content: center;
gap: 8px;
&:hover {
background: #3b82f6;
color: white;
}
}
.violation-action {
@@ -1830,6 +1971,11 @@
align-items: center;
justify-content: center;
gap: 8px;
&:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}
}
}
@@ -1852,6 +1998,12 @@
border: 2px solid #f3f4f6;
text-align: center;
transition: all 0.3s;
&:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(102, 126, 234, 0.15);
border-color: #667eea;
}
}
&-stat-number {