profile-pane 2.0.0-shadowDom-5281ab13 → 2.0.0-shadowDom-5e9cd6d2
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.
- package/lib/styles/CVCard.css +39 -0
- package/lib/styles/ChatWithMe.css +50 -0
- package/lib/styles/ProfileCard.css +118 -0
- package/lib/styles/QRCodeCard.css +18 -0
- package/lib/styles/SocialCard.css +58 -0
- package/lib/styles/global.css +640 -0
- package/package.json +3 -3
- package/lib/profile-pane.js +0 -291
- package/lib/profile-pane.js.map +0 -1
- package/lib/profile-pane.min.js +0 -2
- package/lib/profile-pane.min.js.map +0 -1
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/* Card frame for secondary background/border */
|
|
2
|
+
/* CVCard.module.css */
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
.cvSection {
|
|
7
|
+
margin-bottom: 1.25em;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.cvRole {
|
|
11
|
+
margin: var(--spacing-xs) 0;
|
|
12
|
+
font-size: var(--font-size-base);
|
|
13
|
+
line-height: var(--line-height-base);
|
|
14
|
+
display: flex;
|
|
15
|
+
flex-direction: column;
|
|
16
|
+
gap: 0.2em;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.cvOrg {
|
|
20
|
+
font-weight: 600;
|
|
21
|
+
color: var(--primary-color);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.cvSkill, .cvLanguage {
|
|
25
|
+
text-align: left;
|
|
26
|
+
margin: var(--spacing-xs) 0;
|
|
27
|
+
font-size: var(--font-size-base);
|
|
28
|
+
line-height: var(--line-height-base);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.cvSection h3 {
|
|
32
|
+
color: var(--text-color);
|
|
33
|
+
font-size: var(--font-size-lg);
|
|
34
|
+
font-weight: 600;
|
|
35
|
+
line-height: var(--line-height-tight);
|
|
36
|
+
margin-bottom: var(--spacing-xs);
|
|
37
|
+
border-bottom: 1px solid var(--border-light);
|
|
38
|
+
padding-bottom: var(--spacing-xs);
|
|
39
|
+
}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
/* Card frame for secondary background/border */
|
|
2
|
+
/* ChatWithMe styles migrated from module CSS */
|
|
3
|
+
.chatSection {
|
|
4
|
+
display: flex;
|
|
5
|
+
flex-direction: column;
|
|
6
|
+
align-items: center;
|
|
7
|
+
overflow-x: auto;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.chatSection div button {
|
|
11
|
+
background-color: transparent;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.chatSection div button:hover {
|
|
15
|
+
background-color: transparent;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.chatLoading {
|
|
19
|
+
color: var(--primary-color);
|
|
20
|
+
text-align: center;
|
|
21
|
+
margin: var(--spacing-md) 0;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.chatSection button {
|
|
25
|
+
min-height: var(--min-touch-target);
|
|
26
|
+
padding: var(--spacing-sm) var(--spacing-md);
|
|
27
|
+
border: 1px solid var(--primary-color);
|
|
28
|
+
border-radius: var(--border-radius-sm);
|
|
29
|
+
background: var(--primary-color);
|
|
30
|
+
color: white;
|
|
31
|
+
font-weight: 600;
|
|
32
|
+
cursor: pointer;
|
|
33
|
+
transition: all var(--animation-duration) ease;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.chatSection button:hover {
|
|
37
|
+
background: color-mix(in srgb, var(--primary-color) 90%, black);
|
|
38
|
+
box-shadow: 0 2px 4px rgba(124, 77, 255, 0.2);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.chatSection button:active {
|
|
42
|
+
transform: translateY(0);
|
|
43
|
+
box-shadow: 0 1px 2px rgba(124, 77, 255, 0.2);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.chatSection button:disabled {
|
|
47
|
+
opacity: 0.6;
|
|
48
|
+
cursor: not-allowed;
|
|
49
|
+
transform: none;
|
|
50
|
+
}
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
/* Card frame for secondary background/border */
|
|
2
|
+
/* ProfileCard.css (ported from ProfileCard.module.css) */
|
|
3
|
+
|
|
4
|
+
.header {
|
|
5
|
+
display: flex;
|
|
6
|
+
flex-direction: column;
|
|
7
|
+
align-items: center;
|
|
8
|
+
margin-bottom: var(--spacing-md);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.profileCard {
|
|
12
|
+
/* Use global card styles */
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.profileCard div button {
|
|
16
|
+
background-color: transparent;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.profileCard div button:hover {
|
|
20
|
+
background-color: transparent;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.image {
|
|
24
|
+
width: 160px;
|
|
25
|
+
height: 160px;
|
|
26
|
+
border-radius: 50%;
|
|
27
|
+
object-fit: cover;
|
|
28
|
+
margin-bottom: var(--spacing-sm);
|
|
29
|
+
box-shadow: var(--box-shadow-sm);
|
|
30
|
+
border: 3px solid var(--primary-color);
|
|
31
|
+
background: var(--card-internal-bg);
|
|
32
|
+
padding: 6px;
|
|
33
|
+
box-sizing: border-box;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.name {
|
|
37
|
+
font-size: var(--font-size-xl);
|
|
38
|
+
font-weight: 700;
|
|
39
|
+
line-height: var(--line-height-tight);
|
|
40
|
+
text-align: center;
|
|
41
|
+
text-decoration: underline;
|
|
42
|
+
text-underline-offset: 0.2em;
|
|
43
|
+
margin: 0;
|
|
44
|
+
letter-spacing: var(--letter-spacing-wide);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.intro {
|
|
48
|
+
color: var(--text-secondary);
|
|
49
|
+
text-align: center;
|
|
50
|
+
font-size: var(--font-size-base);
|
|
51
|
+
line-height: var(--line-height-base);
|
|
52
|
+
margin-bottom: var(--spacing-xs);
|
|
53
|
+
max-width: 40ch;
|
|
54
|
+
margin-left: auto;
|
|
55
|
+
margin-right: auto;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.buttonSection {
|
|
59
|
+
color: var(--text-secondary);
|
|
60
|
+
text-align: center;
|
|
61
|
+
font-size: 1rem;
|
|
62
|
+
margin-bottom: var(--spacing-xs);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.buttonSubSection {
|
|
66
|
+
white-space: nowrap;
|
|
67
|
+
text-overflow: ellipsis;
|
|
68
|
+
overflow: hidden;
|
|
69
|
+
width: 100%;
|
|
70
|
+
min-width: 0;
|
|
71
|
+
text-align: center;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.buttonSubSection button {
|
|
75
|
+
width: 100%;
|
|
76
|
+
min-width: 0;
|
|
77
|
+
min-height: var(--min-touch-target);
|
|
78
|
+
padding: var(--spacing-sm) var(--spacing-md);
|
|
79
|
+
border: 1px solid var(--primary-color);
|
|
80
|
+
border-radius: var(--border-radius-sm);
|
|
81
|
+
background: var(--primary-color);
|
|
82
|
+
color: white;
|
|
83
|
+
font-weight: 600;
|
|
84
|
+
cursor: pointer;
|
|
85
|
+
transition: all var(--animation-duration) ease;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.buttonSubSection button:hover {
|
|
89
|
+
background: color-mix(in srgb, var(--primary-color) 90%, black);
|
|
90
|
+
box-shadow: 0 2px 4px rgba(124, 77, 255, 0.2);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.buttonSubSection button:active {
|
|
94
|
+
box-shadow: 0 1px 2px rgba(124, 77, 255, 0.2);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.buttonSubSection button:disabled {
|
|
98
|
+
opacity: 0.6;
|
|
99
|
+
cursor: not-allowed;
|
|
100
|
+
transform: none;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.qrCodeSection {
|
|
104
|
+
color: var(--text-secondary);
|
|
105
|
+
text-align: center;
|
|
106
|
+
font-size: 1rem;
|
|
107
|
+
margin-bottom: var(--spacing-xs);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.details {
|
|
111
|
+
color: var(--text-muted);
|
|
112
|
+
text-align: center;
|
|
113
|
+
font-size: var(--font-size-base);
|
|
114
|
+
line-height: var(--line-height-base);
|
|
115
|
+
max-width: 45ch;
|
|
116
|
+
margin-left: auto;
|
|
117
|
+
margin-right: auto;
|
|
118
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/* Card frame for secondary background/border */
|
|
2
|
+
/* QRCodeCard.css (ported from QRCodeCard.module.css) */
|
|
3
|
+
|
|
4
|
+
.qrCaption {
|
|
5
|
+
text-align: center;
|
|
6
|
+
margin-top: 0;
|
|
7
|
+
font-size: 0.95em;
|
|
8
|
+
color: var(--text-secondary);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.QRCode {
|
|
12
|
+
width: 60%;
|
|
13
|
+
height: 60%;
|
|
14
|
+
max-width: 100%;
|
|
15
|
+
margin: 0 auto;
|
|
16
|
+
display: block;
|
|
17
|
+
padding-top: 1.5em;
|
|
18
|
+
}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
/* Card frame for secondary background/border */
|
|
2
|
+
/* SocialCard styles migrated from module CSS */
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
.socialList {
|
|
6
|
+
list-style: none;
|
|
7
|
+
padding: 0;
|
|
8
|
+
margin: 0;
|
|
9
|
+
display: flex;
|
|
10
|
+
flex-wrap: wrap;
|
|
11
|
+
gap: var(--spacing-lg);
|
|
12
|
+
justify-content: center;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.socialItem {
|
|
16
|
+
display: flex;
|
|
17
|
+
align-items: center;
|
|
18
|
+
gap: var(--spacing-sm);
|
|
19
|
+
font-size: 1.1rem;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.socialItem a {
|
|
23
|
+
color: var(--primary-color);
|
|
24
|
+
text-decoration: none;
|
|
25
|
+
display: inline-flex;
|
|
26
|
+
align-items: center;
|
|
27
|
+
gap: var(--spacing-sm);
|
|
28
|
+
min-height: var(--min-touch-target);
|
|
29
|
+
padding: var(--spacing-xs);
|
|
30
|
+
border-radius: var(--border-radius-sm);
|
|
31
|
+
transition: background-color var(--animation-duration) ease;
|
|
32
|
+
/* Add external link indication */
|
|
33
|
+
position: relative;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.socialItem a:hover,
|
|
37
|
+
.socialItem a:focus {
|
|
38
|
+
text-decoration: underline;
|
|
39
|
+
background-color: rgba(124, 77, 255, 0.1);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.socialItem a[href^="http"]:after {
|
|
43
|
+
content: " (external link)";
|
|
44
|
+
position: absolute;
|
|
45
|
+
left: -10000px;
|
|
46
|
+
width: 1px;
|
|
47
|
+
height: 1px;
|
|
48
|
+
overflow: hidden;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.socialIcon {
|
|
52
|
+
width: 2.5em;
|
|
53
|
+
height: 2.5em;
|
|
54
|
+
border-radius: var(--border-radius-sm);
|
|
55
|
+
background: var(--card-internal-bg);
|
|
56
|
+
object-fit: contain;
|
|
57
|
+
flex-shrink: 0; /* Prevent icon squishing */
|
|
58
|
+
}
|