@rtsee/ngx 0.0.110 → 0.0.112

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,195 @@
1
+ @import "./variables";
2
+
3
+ // ═══════════════════════════════════════════════════════════════════
4
+ // AUTH — Terms of use & privacy policy page
5
+ // ═══════════════════════════════════════════════════════════════════
6
+
7
+ .rtsee-auth {
8
+ .privacy-policy-container {
9
+ position: relative;
10
+ width: 100%;
11
+ max-width: $rtsee-auth-policy-max-width;
12
+
13
+ .policy-card {
14
+ padding: 0;
15
+ overflow: hidden;
16
+ border-radius: $rtsee-auth-card-radius;
17
+ box-shadow: $rtsee-auth-card-shadow;
18
+ }
19
+
20
+ // ── Header ──
21
+ .header-section {
22
+ position: relative;
23
+ padding: $rtsu-space-xl $rtsee-auth-policy-padding;
24
+ text-align: center;
25
+ background: linear-gradient(
26
+ 135deg,
27
+ rgba(108, 92, 231, 0.18) 0%,
28
+ rgba(162, 155, 254, 0.06) 100%
29
+ );
30
+ border-bottom: 1px solid var(--rts-border-med);
31
+
32
+ h1 {
33
+ margin: 0;
34
+ font-size: $rtsu-font-size-2xl;
35
+ font-weight: $rtsu-font-weight-bold;
36
+ line-height: $rtsu-line-height-tight;
37
+ letter-spacing: $rtsu-tracking-tight;
38
+ color: var(--rts-text-primary);
39
+ }
40
+ }
41
+
42
+ // ── Content ──
43
+ .content-section {
44
+ padding: $rtsu-space-xl $rtsee-auth-policy-padding $rtsee-auth-policy-padding;
45
+
46
+ .info-banner {
47
+ display: block;
48
+ margin-bottom: $rtsu-space-xl;
49
+
50
+ .p-message {
51
+ background: var(--rts-accent-highlight-dim, #{$rtsu-accent-highlight-dim});
52
+ border: 1px solid rgba(191, 139, 255, 0.25);
53
+ border-radius: $rtsu-radius-md;
54
+ outline: none;
55
+ color: var(--rts-text-primary);
56
+ }
57
+
58
+ .p-message-content {
59
+ padding: $rtsu-space-md $rtsu-space-lg;
60
+ display: block;
61
+ }
62
+
63
+ .last-updated {
64
+ margin-bottom: $rtsu-space-sm;
65
+ font-weight: $rtsu-font-weight-semibold;
66
+ color: var(--rts-accent-light, #{$rtsu-accent-purple-light});
67
+ }
68
+
69
+ p {
70
+ margin: 0;
71
+ color: var(--rts-text-secondary);
72
+ }
73
+ }
74
+
75
+ h2 {
76
+ position: relative;
77
+ margin: $rtsu-space-xl 0 $rtsu-space-md 0;
78
+ padding-bottom: $rtsu-space-sm;
79
+ font-size: $rtsu-font-size-lg + 2px;
80
+ font-weight: $rtsu-font-weight-semibold;
81
+ color: var(--rts-text-primary);
82
+ border-bottom: 1px solid var(--rts-border-med);
83
+
84
+ // accent underline segment
85
+ &::after {
86
+ content: '';
87
+ position: absolute;
88
+ left: 0;
89
+ bottom: -1px;
90
+ width: $rtsu-space-2xl;
91
+ height: 2px;
92
+ border-radius: $rtsu-radius-pill;
93
+ background: linear-gradient(90deg, $rtsu-accent-purple, $rtsu-accent-purple-light);
94
+ }
95
+ }
96
+
97
+ h3 {
98
+ margin: $rtsu-space-lg 0 $rtsu-space-sm 0;
99
+ padding: $rtsu-space-sm $rtsu-space-md;
100
+ font-size: $rtsu-font-size-md;
101
+ font-weight: $rtsu-font-weight-semibold;
102
+ color: var(--rts-text-primary);
103
+ border-left: 3px solid var(--rts-accent, #{$rtsu-accent-purple});
104
+ border-radius: 0 $rtsu-radius-sm $rtsu-radius-sm 0;
105
+ background: linear-gradient(90deg, rgba(108, 92, 231, 0.1), transparent);
106
+ }
107
+
108
+ p {
109
+ margin: 0 0 $rtsu-space-md 0;
110
+ font-size: $rtsu-font-size-base + 1px;
111
+ line-height: $rtsu-line-height-relaxed;
112
+ color: var(--rts-text-secondary);
113
+ }
114
+
115
+ ul {
116
+ margin: 0 0 $rtsu-space-lg 0;
117
+ padding: 0;
118
+ list-style: none;
119
+
120
+ li {
121
+ position: relative;
122
+ margin-bottom: $rtsu-space-sm;
123
+ padding-left: $rtsu-space-lg;
124
+ font-size: $rtsu-font-size-base + 1px;
125
+ line-height: $rtsu-line-height-normal;
126
+ color: var(--rts-text-secondary);
127
+
128
+ &::before {
129
+ content: '';
130
+ position: absolute;
131
+ left: $rtsu-space-xs;
132
+ top: 0.6em;
133
+ width: 6px;
134
+ height: 6px;
135
+ border-radius: 50%;
136
+ background: var(--rts-accent-light, #{$rtsu-accent-purple-light});
137
+ }
138
+
139
+ strong {
140
+ font-weight: $rtsu-font-weight-semibold;
141
+ color: var(--rts-text-primary);
142
+ }
143
+ }
144
+ }
145
+
146
+ .contact-section {
147
+ margin-top: $rtsu-space-xl;
148
+ padding: $rtsu-space-lg;
149
+ border-radius: $rtsu-radius-md;
150
+ background: var(--rts-glass-tint);
151
+ border: 1px solid var(--rts-border-med);
152
+
153
+ h2 {
154
+ margin-top: 0;
155
+ }
156
+
157
+ ul {
158
+ margin-bottom: 0;
159
+ }
160
+ }
161
+
162
+ .footer-section {
163
+ margin-top: $rtsu-space-xl;
164
+ padding-top: $rtsu-space-lg;
165
+ text-align: center;
166
+ border-top: 1px solid var(--rts-border-dim);
167
+
168
+ p {
169
+ margin: 0;
170
+ font-size: $rtsu-font-size-sm + 1px;
171
+ font-style: italic;
172
+ color: var(--rts-text-muted);
173
+ }
174
+ }
175
+ }
176
+ }
177
+ }
178
+
179
+ @media (max-width: $rtsu-break-md) {
180
+ .rtsee-auth {
181
+ .privacy-policy-container {
182
+ .header-section {
183
+ padding: $rtsu-space-lg $rtsu-space-lg;
184
+
185
+ h1 {
186
+ font-size: $rtsu-font-size-xl;
187
+ }
188
+ }
189
+
190
+ .content-section {
191
+ padding: $rtsee-auth-policy-padding-mobile;
192
+ }
193
+ }
194
+ }
195
+ }
@@ -1 +1,43 @@
1
- $rtsee-auth-background: #fff;
1
+ @import "../common-variables";
2
+ // color tokens ($rtsu-*) come from rts-common/index (imported before auth in styles.scss),
3
+ // variables-colors isn't re-imported because it also outputs the .rts-theme-* maps
4
+ @import "../rts-common/variables-spacing";
5
+ @import "../rts-common/variables-typography";
6
+ @import "../rts-common/variables-layout";
7
+ @import "../rts-common/variables-effects";
8
+
9
+ // ── Page ────────────────────────────────────────────────────────
10
+ $rtsee-auth-background: var(--rts-bg-gradient, #{$rtsu-bg-gradient});
11
+ $rtsee-auth-glow: radial-gradient(ellipse at 30% 20%, rgba(191, 139, 255, 0.12) 0%, transparent 60%),
12
+ radial-gradient(ellipse at 80% 85%, rgba(59, 130, 247, 0.08) 0%, transparent 55%);
13
+ $rtsee-auth-page-padding: $rtsu-space-lg $rtsu-space-md;
14
+
15
+ // ── Card ────────────────────────────────────────────────────────
16
+ $rtsee-auth-card-max-width: 420px;
17
+ $rtsee-auth-card-padding: $rtsu-space-xl;
18
+ $rtsee-auth-card-padding-mobile: $rtsu-space-lg $rtsu-space-md;
19
+ $rtsee-auth-card-radius: $rtsu-radius-xl;
20
+ $rtsee-auth-card-shadow: $rtsu-shadow-lg;
21
+
22
+ // ── Header ──────────────────────────────────────────────────────
23
+ $rtsee-auth-logo-size: $rtsu-avatar-md;
24
+ $rtsee-auth-logo-padding: $rtsu-space-sm + $rtsu-space-xs;
25
+ $rtsee-auth-title-size: $rtsu-font-size-xl;
26
+ $rtsee-auth-description-size: $rtsu-font-size-base;
27
+
28
+ // ── Fields ──────────────────────────────────────────────────────
29
+ $rtsee-auth-field-gap: $rtsu-space-md + $rtsu-space-xs;
30
+ $rtsee-auth-input-padding-y: $rtsu-space-sm + $rtsu-space-xs;
31
+ $rtsee-auth-input-padding-x: $rtsu-space-md;
32
+ $rtsee-auth-input-radius: $rtsu-radius-sm + 2px; // matches .rts-btn
33
+ $rtsee-auth-focus-ring: 0 0 0 3px rgba(108, 92, 231, 0.15);
34
+
35
+ // ── Submit ──────────────────────────────────────────────────────
36
+ $rtsee-auth-submit-background: linear-gradient(135deg, $rtsu-accent-purple 0%, $rtsu-accent-purple-light 100%);
37
+ $rtsee-auth-submit-padding: $rtsu-space-sm + $rtsu-space-xs + 2px $rtsu-space-lg;
38
+ $rtsee-auth-submit-radius: $rtsu-radius-md;
39
+
40
+ // ── Privacy policy ──────────────────────────────────────────────
41
+ $rtsee-auth-policy-max-width: 920px;
42
+ $rtsee-auth-policy-padding: $rtsu-space-2xl;
43
+ $rtsee-auth-policy-padding-mobile: $rtsu-space-lg $rtsu-space-md;
@@ -1,15 +1,35 @@
1
1
  @import "../common-variables";
2
+ @import "./variables";
2
3
 
3
- $live-indicator-d: 15px;
4
- $engage-button-border-thickness: 2px;
4
+ $live-indicator-d: 13px;
5
+ $engage-button-border-thickness: 1px;
5
6
 
6
7
  .rtsee-dashboard-client-thumbnail {
7
8
  position: relative;
9
+ background: linear-gradient(
10
+ 135deg,
11
+ rgba(24, 24, 38, 0.85) 0%,
12
+ rgba(16, 16, 26, 0.95) 100%
13
+ );
14
+ border: 1px solid rgba(255, 255, 255, 0.08);
15
+ padding: 16px;
16
+ box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
17
+ backdrop-filter: blur(16px);
18
+ transition:
19
+ border-color 0.2s ease,
20
+ box-shadow 0.2s ease;
21
+
22
+ &:hover {
23
+ border-color: rgba(255, 255, 255, 0.14);
24
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
25
+ }
8
26
 
9
27
  .rtsee-dashboard-client-header {
10
28
  position: relative;
11
- padding-left: $rts-user-avatar-d-sm + $rts-offset-sm;
29
+ padding-left: $rts-user-avatar-d-sm + $rts-offset-md;
12
30
  height: $rts-user-avatar-d-sm;
31
+ display: flex;
32
+ align-items: center;
13
33
 
14
34
  .rtsee-dashboard-client-header-photo {
15
35
  position: absolute;
@@ -24,16 +44,23 @@ $engage-button-border-thickness: 2px;
24
44
  border-radius: 50%;
25
45
  overflow: hidden;
26
46
  background-size: cover;
47
+ background-position: center;
48
+ background-color: rgba(255, 255, 255, 0.05);
49
+ border: 2px solid rgba(255, 255, 255, 0.12);
50
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
27
51
  }
28
52
 
29
53
  .rtsee-dashboard-client-live-indicator {
30
54
  position: absolute;
31
- bottom: -1px;
32
- right: -1px;
55
+ bottom: 0;
56
+ right: 0;
33
57
  width: $live-indicator-d;
34
58
  height: $live-indicator-d;
35
59
  border-radius: 50%;
36
- background: $rts-live-color;
60
+ background: #2ecc71;
61
+ border: 2px solid #161622;
62
+ box-shadow: 0 0 10px #2ecc71;
63
+ animation: pulseGreen 2s infinite ease-in-out;
37
64
  }
38
65
  }
39
66
 
@@ -45,8 +72,10 @@ $engage-button-border-thickness: 2px;
45
72
  font-weight: 600;
46
73
  padding-right: $rts-user-avatar-d-sm + $rts-offset-sm;
47
74
  position: relative;
48
- display: inline-block;
49
- max-width: 100%;
75
+ width: 100%;
76
+ color: $rts-rates-text-primary;
77
+ display: flex;
78
+ align-items: center;
50
79
 
51
80
  .rtsee-dashboard-client-name-text {
52
81
  width: 100%;
@@ -54,27 +83,38 @@ $engage-button-border-thickness: 2px;
54
83
  overflow: hidden;
55
84
  text-overflow: ellipsis;
56
85
  display: inline-block;
86
+ letter-spacing: -0.2px;
57
87
  }
58
88
 
59
89
  .rtsee-dashboard-client-engage {
60
90
  position: absolute;
61
- width: $rts-user-avatar-d-sm;
62
- height: $rts-user-avatar-d-sm;
91
+ width: 36px;
92
+ height: 36px;
63
93
  right: 0;
64
- top: 0;
94
+ top: 50%;
95
+ transform: translateY(-50%);
65
96
  outline: none;
66
- border: $engage-button-border-thickness solid $rts-font-color-light;
67
- background-color: transparent;
97
+ border: $engage-button-border-thickness solid rgba(162, 155, 254, 0.3);
98
+ background: rgba(108, 92, 231, 0.15);
99
+ color: #a29bfe;
68
100
  cursor: pointer;
69
- border-radius: $rts-default-border-radius;
101
+ border-radius: 10px;
102
+ display: flex;
103
+ align-items: center;
104
+ justify-content: center;
105
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
70
106
 
71
107
  &:hover {
72
- opacity: 0.7;
108
+ background: rgba(108, 92, 231, 0.3);
109
+ border-color: rgba(162, 155, 254, 0.6);
110
+ color: #ffffff;
111
+ box-shadow: 0 0 12px rgba(108, 92, 231, 0.4);
112
+ transform: translateY(-50%) scale(1.05);
73
113
  }
74
114
 
75
115
  .rtsee-dashboard-client-engage-icon {
76
- font-size: 23px;
77
- line-height: $rts-user-avatar-d-sm - $engage-button-border-thickness * 2;
116
+ font-size: 18px;
117
+ line-height: 1;
78
118
  }
79
119
  }
80
120
  }
@@ -84,15 +124,58 @@ $engage-button-border-thickness: 2px;
84
124
  overflow-x: auto;
85
125
  overflow-y: hidden;
86
126
  white-space: nowrap;
87
- padding-top: $rts-offset-sm;
127
+ padding-top: $rts-offset-md;
128
+ padding-bottom: 6px;
129
+ margin-top: $rts-offset-sm;
130
+ border-top: 1px solid rgba(255, 255, 255, 0.05);
131
+
132
+ /* Sleek custom scrollbar */
133
+ scrollbar-width: thin;
134
+ scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
135
+
136
+ &::-webkit-scrollbar {
137
+ height: 6px;
138
+ }
139
+
140
+ &::-webkit-scrollbar-track {
141
+ background: transparent;
142
+ }
143
+
144
+ &::-webkit-scrollbar-thumb {
145
+ background: rgba(255, 255, 255, 0.15);
146
+ border-radius: 3px;
147
+
148
+ &:hover {
149
+ background: rgba(255, 255, 255, 0.25);
150
+ }
151
+ }
88
152
 
89
153
  .rtsee-dashboard-sessions-container {
90
154
  display: inline-block;
91
- width: 320px;
92
- margin-right: $rts-offset-sm;
155
+ width: 330px;
156
+ margin-right: $rts-offset-md;
93
157
  vertical-align: top;
158
+ white-space: normal;
159
+
160
+ &:last-of-type {
161
+ margin-right: 0;
162
+ }
94
163
  }
95
164
  }
96
165
 
166
+ @media screen and (min-width: $rtsu-break-md) {
167
+ border-radius: 14px;
168
+ }
169
+ }
97
170
 
171
+ @keyframes pulseGreen {
172
+ 0% {
173
+ box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.6);
174
+ }
175
+ 70% {
176
+ box-shadow: 0 0 0 5px rgba(46, 204, 113, 0);
177
+ }
178
+ 100% {
179
+ box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
180
+ }
98
181
  }
@@ -1,47 +1,74 @@
1
1
  @import "../common-variables";
2
2
 
3
-
4
3
  .rtsee-events-dashboard-event-thumbnail {
4
+ width: 100%;
5
5
 
6
6
  .rtsee-events-dashboard-default-event-thumbnail {
7
7
  display: flex;
8
+ align-items: center;
8
9
  justify-content: space-between;
9
- height: $rts-user-avatar-d-sm;
10
- background-color: $rts-slightly-active-color;
11
- padding: 0 $rts-offset-sm;
12
- border-radius: $rts-default-border-radius;
10
+ min-height: 38px;
11
+ background: linear-gradient(
12
+ 135deg,
13
+ rgba(28, 28, 42, 0.85) 0%,
14
+ rgba(18, 18, 30, 0.95) 100%
15
+ );
16
+ border: 1px solid rgba(255, 255, 255, 0.08);
17
+ padding: 6px 12px;
18
+ border-radius: 8px;
19
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
20
+ transition: all 0.2s ease;
21
+
22
+ &:hover {
23
+ border-color: rgba(162, 155, 254, 0.3);
24
+ box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
25
+ transform: translateY(-1px);
26
+ }
27
+
28
+ &.rtsee-events-dashboard-default-event-thumbnail-with-data {
29
+ border-left: 3px solid #6c5ce7;
30
+ }
13
31
 
14
32
  .rtsee-events-dashboard-default-event-thumbnail-name {
15
- font-size: 16px;
33
+ font-size: 13px;
34
+ font-weight: 500;
35
+ color: $rts-rates-text-primary;
16
36
  overflow: hidden;
17
37
  white-space: nowrap;
18
38
  text-overflow: ellipsis;
19
- line-height: $rts-user-avatar-d-sm;
39
+ flex: 1;
40
+ padding-right: 8px;
20
41
  }
21
42
 
22
- .rtsee-events-dashboard-default-event-thumbnail-info {
43
+ .rtsee-events-dashboard-default-event-thumbnail-info {
23
44
  display: flex;
24
- justify-content: flex-end;
25
-
26
- .rtsee-events-dashboard-default-event-thumbnail-time {
27
- padding-left: $rts-offset-sm;
28
- font-size: 12px;
29
- font-weight: 300;
30
- color: $rts-font-color-light;
31
- line-height: $rts-user-avatar-d-sm;
32
- }
33
-
45
+ align-items: center;
46
+ gap: 6px;
47
+ flex-shrink: 0;
34
48
 
35
49
  .rtsee-events-dashboard-default-event-thumbnail-details {
36
- height: $rts-user-avatar-d-sm;
37
- line-height: $rts-user-avatar-d-sm;
50
+ display: flex;
51
+ align-items: center;
52
+ color: #a29bfe;
53
+ cursor: pointer;
38
54
 
39
55
  .rtsee-events-dashboard-default-event-thumbnail-details-icon {
40
- height: 100%;
41
- font-size: 24px;
42
- line-height: $rts-user-avatar-d-sm;
56
+ font-size: 16px;
57
+ line-height: 1;
58
+ transition: transform 0.15s ease;
59
+
60
+ &:hover {
61
+ transform: scale(1.15);
62
+ }
43
63
  }
44
64
  }
65
+
66
+ .rtsee-events-dashboard-default-event-thumbnail-time {
67
+ font-size: 11px;
68
+ font-weight: 400;
69
+ color: $rts-rates-text-muted;
70
+ white-space: nowrap;
71
+ }
45
72
  }
46
73
  }
47
74
  }