Archived
1
0
This repository has been archived on 2020-12-10. You can view files and clone it, but cannot push or open issues or pull requests.
old/assets/css/profile_page.css
2018-10-16 18:28:42 +02:00

390 lines
7.8 KiB
CSS

.profile-stats {
background-color: #FFFFFF;
width: 100%;
max-height: 60px;
overflow-x: visible;
overflow-y: hidden;
white-space: nowrap;
}
.profile-stats .item a {
cursor: default;
}
.profile-stats .item {
display: inline-block;
padding: 14px 15px 7px;
box-sizing: border-box;
line-height: 1;
height: 60px;
border: 0px solid #2272ff;
min-width: 100px;
cursor: pointer;
box-shadow: inset 0 3px 0 #2272ff;
margin-right: -5px;
-webkit-transition: box-shadow .2s;
-moz-transition: box-shadow .2s;
-ms-transition: box-shadow .2s;
-o-transition: box-shadow .2s;
transition: border .1s, box-shadow .2s;
}
.profile-stats .item.active {
border-bottom-width: 2px;
cursor: default;
}
.profile-stats .item:hover {
border-bottom-width: 2px;
}
.profile-stats .item .label {
color: #657786;
display: block;
font-weight: 300;
font-size: 14px;
text-align: center;
padding: 0;
}
.profile-stats .item .count {
color: #657786;
font-size: 20px;
font-weight: bold;
padding-top: 3px;
display: block;
text-align: center;
transition: all 100ms;
}
.profile-stats .item.active .count {
color: #2272FF;
}
.profile-stats .item:hover .count {
color: #2272FF;
}
.profile-card {
max-width: 325px;
margin-left: calc((100% / 3) - 340px);
padding-top: 50px;
}
#profile-header {
background-size: cover;
background-position: center center;
height: 500px;
}
#profile-sub-header {
background: #fff;
height: 60px;
padding: 0;
width: 100%;
box-shadow: 0 1px 3px 0 rgba(0,0,0,.25);
z-index: 1;
}
#profile-sub-header.fixedTop {
position: fixed;
top: 60px;
}
#profile-sub-header .profile-picture-container {
position: relative;
}
#profile-sub-header .profile-picture {
position: absolute;
left: 50%;
width: 80%;
transform: translate(-50%, -60%);
border: 5px solid white;
-webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.25);
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.25);
border-radius: 100%;
margin: 0;
transition: all .2s;
}
#profile-sub-header.fixedTop .profile-picture {
left: 100%;
width: 50px;
transform: translateX(-110%);
border: 0;
}
#profile-sub-header.fixedTop .profile-card {
padding-top: 5px;
}
#profile-sub-header.fixedTop + #profile-content {
margin-top: 60px;
}
.avatar-upload-overlay {
position: absolute;
width: 80%;
top: 25px;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255,255,255,0);
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
text-align: center;
-webkit-transition: background .2s;
-moz-transition: background .2s;
-ms-transition: background .2s;
-o-transition: background .2s;
transition: background .2s;
}
.avatar-upload-overlay:hover {
background-color: rgba(255,255,255,.5);
}
.fixedTop .avatar-upload-overlay {
width: 50px;
height: 50px;
left: 100%;
transform: translate(-110%, -40%);
}
.avatar-upload-overlay .fa {
color: rgba(0,0,0,0);
-webkit-transition: color .2s;
-moz-transition: color .2s;
-ms-transition: color .2s;
-o-transition: color .2s;
transition: color .2s;
font-size: 40px;
margin: 42%;
}
.fixedTop .avatar-upload-overlay .fa {
font-size: 20px;
margin: 32%;
}
.avatar-upload-overlay:hover .fa {
color: #222;
}
#profile-sub-header.fixedTop .profile-stats .item {
-webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0);
-moz-box-shadow: inset 0 0 0 rgba(0,0,0,0);
box-shadow: inset 0 0 0 rgba(0,0,0,0);
}
#profile-sub-header .edit-profile {
margin: 0 0 0 15px;
position: absolute;
top: 13.125px;
}
.profile-displayname {
font-size: 24px;
}
.profile-username {
font-size: 14px;
margin-top: -5px;
}
.profile-biography {
margin-top: 20px;
}
.info-list {
list-style: none;
padding: 10px 0 0;
border-top: 1px solid #ddd;
}
.info-list li {
margin: 5px;
}
.info-list li .fa, .info-list li .far {
width: 18px;
margin-right: 5px;
text-align: center;
}
.btn-follow {
width: 100%;
}
.subscribe-button {
position: relative;
padding: 10px 18px;
font-family: inherit;
font-size: inherit;
font-weight: 500;
text-transform: uppercase;
color: white;
background: #e80000;
border: none;
border-radius: 3px;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.1);
-webkit-transition: background, box-shadow;
transition: background, box-shadow;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
}
.subscribe-button:active {
background: #de0000;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.14);
}
.subscribe-button:hover {
color: white;
}
.subscribe-button:after {
content: attr(data-count);
position: absolute;
box-sizing: border-box;
padding: 8px 12px;
height: 100%;
left: 100%;
top: 0;
margin-left: 10px;
color: #777;
background: #e1e1e1;
border-radius: 3px;
}
.subscribe-button:before {
content: '';
display: block;
position: absolute;
left: 100%;
margin-left: 4px;
top: 50%;
margin-top: -6px;
width: 0;
height: 0;
border: 6px solid transparent;
border-left-width: 0;
border-right-color: #e1e1e1;
}
.subscribe-button.disabled {
background: #e67373;
cursor: default;
}
.subscribe-button.subbed {
background: #777;
}
.subscribe-button.subbed svg {
width: 16px;
}
.subscribe-button.subbed svg .plus__line1 {
-webkit-transform: translate(14px, 0) rotate(45deg) translate(-5px, 0) scaleY(1.16667);
transform: translate(14px, 0) rotate(45deg) translate(-5px, 0) scaleY(1.16667);
}
.subscribe-button.subbed svg .plus__line2 {
-webkit-transform: translate(2px, 5px) rotate(45deg) scaleX(0.5) translate(0px, -5px);
transform: translate(2px, 5px) rotate(45deg) scaleX(0.5) translate(0px, -5px);
}
.subscribe-button svg {
display: inline-block;
width: 12px;
height: 12px;
fill: white;
margin-right: 10px;
-webkit-transition: width 0.25s;
transition: width 0.25s;
}
.subscribe-button svg .plus__line1,
.subscribe-button svg .plus__line2 {
-webkit-transition: -webkit-transform 0.25s;
transition: -webkit-transform 0.25s;
transition: transform 0.25s;
transition: transform 0.25s, -webkit-transform 0.25s;
}
.subscribe-button svg .plus__line1 {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.subscribe-button svg .plus__line2 {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.subscribe-button * {
vertical-align: middle;
}
.subscribe-text:before {
content: attr(data-follow);
color: white;
}
.subbed .subscribe-text:before {
content: attr(data-following);
}
.subbed:hover .subscribe-text:before {
content: attr(data-unfollow);
}
.followers-list {
list-style: none;
padding-left: 0;
}
.followers-list li {
display: inline-block;
width: 25%;
background: #fff;
border-radius: 2px;
box-shadow: 1px 1px 3px -1px rgba(0,0,0,.25);
text-align: center;
}
.followers-list li .header-image {
width: 100%;
height: 100px;
background: #fff center;
background-size: 100%;
border-radius: 2px 2px 0 0;
margin-bottom: -50px;
box-shadow: inset 0 -1px 3px -1px rgba(0,0,0,0.25);
}
.followers-list li .profile-picture {
width: 50%;
border: 3px solid #fff;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.25);
}
.followers-list li h3 {
font-size: 20px;
color: rgba(0,0,0,.7);
margin-bottom: 8px;
}
.followers-list li small {
display: block;
margin-bottom: 8px;
color: rgba(0,0,0,.7);
}
.comment-list .post-item .content-container {
overflow: initial !important;
}