/* User Profiles */ .profile-header { border-bottom: 1px solid #eee; padding: 25px 0; font-family: PNR; display: flex; flex-wrap: wrap; } @media (min-width: 768px) { .profile-header { flex-wrap: nowrap; } } .profile-header .profile-info { display: flex; flex-wrap: wrap; flex-grow: 1; } .profile-avatar { position: relative; margin-right: 10px; } [dir=rtl] .profile-avatar { margin-left: 10px; margin-right: 0; } .profile-avatar .avatar { width: 65px; height: 65px; border-radius: 50%; } .profile-avatar-agent:after { background-color: transparent; background-image: url("/hc/assets/agent-marker.png"); background-image: url("/hc/assets/agent-marker.svg"); background-repeat: no-repeat; background-size: 15px; position: absolute; width: 15px; height: 15px; content: ""; bottom: 0; right: 0; } [dir=rtl] .profile-avatar-agent:after { left: 0; } .profile-header .basic-info { justify-content: center; flex-grow: 1; display: flex; flex-direction: column; } .profile-header .basic-info .name { margin: 0; } .profile-header .options { display: flex; flex-basis: 100%; margin-top: 12px; align-items: flex-start; flex-wrap: wrap; } .profile-header .options :not(:last-child) { margin-bottom: 10px; } @media (min-width: 768px) { .profile-header .options { flex-wrap: nowrap; flex-basis: auto; margin-top: 0; } .profile-header .options :not(:last-child) { margin-bottom: 0; margin-right: 10px; } [dir=rtl] .profile-header .options :not(:last-child) { margin-left: 10px; margin-right: 0; } } .profile-header .options [data-action="edit-profile"] { background: #444; border-color: #444 transparent #222; color: #fff; flex-basis: 100%; text-align: center; } .profile-header .description { margin: 15px 0; flex-basis: 100%; } .profile-stats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; flex-basis: 100%; } .profile-stats .stat { display: flex; margin-bottom: 10px; } .profile-stats .stat-label { color: #999; flex: 0 0 100px; margin-right: 10px; } [dir=rtl] .profile-stats .stat-label { margin-left: 10px; margin-right: 0; } .profile-stats-activity { border-top: solid 1px #ddd; } @media (min-width: 768px) { .profile-stats-activity { border-top: 0; flex-direction: row; } } @media (min-width: 768px) { .profile-stats-activity .stat { flex-direction: column; } } .profile-stats-activity .stat:first-child { margin-top: 10px; } @media (min-width: 768px) { .profile-stats-activity .stat:first-child { margin-top: 0; } } @media (min-width: 768px) { .profile-stats-activity .stat:not(:last-child) { margin-right: 40px; } [dir=rtl] .profile-stats-activity .stat:not(:last-child) { margin-left: 40px; margin-right: 0; } } @media (min-width: 768px) { .profile-stats-activity .stat-label { flex: 0 1 auto; } } .profile-stats-counters { border-bottom: solid 1px #ddd; } @media (min-width: 768px) { .profile-stats-counters { flex: 0 0 200px; border-bottom: 0; margin-left: 40px; } [dir=rtl] .profile-stats-counters { margin-left: 0; margin-right: 40px; } } @media (min-width: 1024px) { .profile-stats-counters { flex: 0 0 270px; margin-left: 60px; } [dir=rtl] .profile-stats-counters { margin-right: 60px; margin-left: 0; } } @media (min-width: 768px) { .profile-stats-counters .stat { flex-direction: column; } } @media (min-width: 1024px) { .profile-stats-counters .stat { flex-direction: row; } } @media (min-width: 768px) { .profile-stats-counters .stat:not(:last-child) { margin-bottom: 15px; } } @media (min-width: 768px) { .profile-stats-counters .stat-label { flex: 0 1 auto; } } @media (min-width: 1024px) { .profile-stats-counters .stat-label { flex: 0 0 100px; } } .profile-private-badge { flex-basis: 100%; border: 1px solid #ddd; border-radius: 4px; color: #999; padding: 5px 10px; } .profile-private-badge:after { content: "\1f512"; font-family: "Entypo"; margin-left: 5px; } @media (min-width: 768px) { .profile-private-badge { flex-basis: auto; } } .profile-nav { margin-bottom: 40.5px; border-bottom: 1px solid #eee; padding: 10.5px 0; } .profile-section { width: 100%; font-family: PNR; } @media (min-width: 1024px) { .profile-section { width: calc(100% - 330px); } } .profile-section-header { display: flex; align-items: center; flex-wrap: wrap; } .profile-section-title { flex-basis: 100%; margin: 0; } .profile-section-description { flex-basis: 100%; padding: 10px 0; } @media (min-width: 768px) { .profile-section-description { flex: 1 0 auto; padding-bottom: 0; } } .profile-section-sorter { flex-basis: 100%; border-top: solid 1px #eee; } .profile-section-sorter .dropdown-toggle { padding: 10px 0; width: 100%; } .profile-section-sorter .dropdown-toggle::after { position: absolute; right: 0; } [dir=rtl] .profile-section-sorter .dropdown-toggle::after { left: 0; right: initial; } @media (min-width: 768px) { .profile-section-sorter .dropdown-toggle::after { position: relative; } } @media (min-width: 768px) { .profile-section-sorter { flex: 0 1 auto; padding-top: 0; border-top: 0; } } .profile-contribution { padding: 20px 0; word-wrap: break-word; position: relative; } .profile-contribution-header { margin-bottom: 5px; } .profile-contribution-title { margin: 0 0 5px 0; display: inline; line-height: 21px; vertical-align: middle; } .profile-contribution-breadcrumbs > li { display: inline; word-wrap: break-word; } .profile-contribution-body { margin: 10px 0; font-size: 13px; line-height: 1.5; } .profile-contribution-meta { display: flex; font-size: 11px; line-height: 18px; color: #ccc; } .profile-contribution-meta > .meta-data:not(:last-child)::after { content: "\00B7"; padding: 0 5px; } .profile-contribution-list > .profile-contribution { border-top: 1px solid #eee; } @media (min-width: 768px) { .profile-contribution-list > .profile-contribution { padding-left: 33px; } [dir=rtl] .profile-contribution-list > .profile-contribution { padding-right: 33px; padding-left: 0; } } .profile-contribution-list > .profile-contribution:last-child { border-bottom: 1px solid #eee; } .profile-contribution-list > .profile-contribution::before { left: 0; top: 16px; width: 28px; height: 28px; border-radius: 50%; position: absolute; content: ""; background-size: 14px 14px; background-repeat: no-repeat; background-color: #fff; background-position: 50% 50%; } .profile-contribution-list .profile-contribution-header { margin-left: 33px; } [dir=rtl] .profile-contribution-list .profile-contribution-header { padding-right: 33px; padding-left: 0; } @media (min-width: 768px) { .profile-contribution-list .profile-contribution-header { margin-left: 0; } [dir=rtl] .profile-contribution-list .profile-contribution-header { padding-right: 0; } } .profile-comments .profile-contribution-breadcrumbs { margin-left: 33px; } [dir=rtl] .profile-comments .profile-contribution-breadcrumbs { padding-right: 33px; padding-left: 0; } @media (min-width: 768px) { .profile-comments .profile-contribution-breadcrumbs { margin-left: 0; } [dir=rtl] .profile-comments .profile-contribution-breadcrumbs { padding-right: 0; } } .profile-section .no-activity, .profile-section .private-activity { display: block; margin-top: 40px; color: #999; } .profile-section .private-activity:before { content: "\1f512"; font-family: "Entypo"; margin-right: 10px; } .profile-activity-list { margin-top: 25px; } .profile-activity { position: relative; padding-bottom: 30px; } @media (min-width: 768px) { .profile-activity { padding-left: 20px; } [dir=rtl] .profile-activity { padding-right: 20px; padding-left: 0; } } @media (min-width: 768px) { .profile-activity:not(:last-child) { border-left: 1px solid #ddd; } [dir=rtl] .profile-activity:not(:last-child) { border-left: 0; border-right: 1px solid #ddd; } } .profile-activity-header { display: flex; align-items: center; margin-left: 35px; } [dir=rtl] .profile-activity-header { margin-left: 0; margin-right: 35px; } @media (min-width: 768px) { .profile-activity-header { margin-left: 0; } [dir=rtl] .profile-activity-header { margin-right: 0; } } .profile-activity-header .avatar { width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; } [dir=rtl] .profile-activity-header .avatar { margin-left: 10px; margin-right: 0; } .profile-activity-description { margin: 0; } .profile-activity-description span:first-child { font-weight: bold; display: block; } @media (min-width: 768px) { .profile-activity-description span:first-child { display: inline; } } .profile-activity-contribution { padding: 20px; margin-top: 10px; border-radius: 8px; border: 1px solid #eee; } @media (min-width: 768px) { .profile-activity-contribution { margin-top: 0; margin-left: 50px; } [dir=rtl] .profile-activity-contribution { margin-left: 0; margin-right: 50px; } } .profile-activity:before { position: absolute; left: 0; top: 0; width: 28px; height: 40px; border-radius: 50%; content: ""; background-size: 14px 14px; background-repeat: no-repeat; background-color: #fff; background-position: 50% 50%; } [dir=rtl] .profile-activity:before { right: 0; } @media (min-width: 768px) { .profile-activity:before { left: -14px; } [dir=rtl] .profile-activity:before { right: -14px; } } .profile-contribution-list > .profile-contribution::before { left: 0; top: 16px; width: 28px; line-height: 28px; } [dir=rtl] .profile-contribution-list > .profile-contribution::before { right: 0; } .profile-articles > .profile-contribution::before, .profile-activity-list > li[class$="-article"]:before { background-image: url("data:image/svg+xml;utf8,"); } .profile-posts > .profile-contribution::before, .profile-activity-list > li[class$="-post"]:before { background-image: url("data:image/svg+xml;utf8,"); } .profile-comments > .profile-contribution::before, .profile-activity-list > li[class$="-comment"]:before { background-image: url("data:image/svg+xml;utf8,"); }