boiii/traxxx
1
0
Fork 0
forked from DebaucheryLibrarian/traxxx
Code Issues Pull Requests Projects Releases Wiki Activity

Separated actor profile header for permanent display when scrolling.

Browse Source
This commit is contained in:
ThePendulum
2020-01-23 04:32:22 +01:00
parent 5a51e20966
commit e8c6d7def6
2 changed files with 165 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
public/css/style.css
View File

@@ -1018,6 +1018,41 @@
/* $primary: #ff886c; */
/* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
.actor-header[data-v-ea0483c2] {
display: -webkit-box;
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
align-items: center;
color: rgba(255, 255, 255, 0.9);
background: #222;
padding: .75rem 1rem;
}
.header-name[data-v-ea0483c2] {
padding: 0;
margin: 0;
display: -webkit-inline-box;
display: inline-flex;
-webkit-box-pack: justify;
justify-content: space-between;
flex-shrink: 0;
}
.header-gender[data-v-ea0483c2] {
display: inline-block;
margin: 0 0 0 .25rem;
-webkit-transform: translate(0, 0.1rem);
transform: translate(0, 0.1rem);
}
.header-gender .icon[data-v-ea0483c2] {
width: 1.25rem;
height: 1.25rem;
}
.header-social[data-v-ea0483c2] {
overflow: hidden;
white-space: nowrap;
margin: 0 1rem 0 0;
}
.actor-inner[data-v-ea0483c2] {
height: 100%;
display: -webkit-box;
@@ -1039,7 +1074,6 @@
-webkit-box-direction: normal;
flex-direction: row;
flex-shrink: 0;
padding: 1rem 0 0 0;
}
.profile .avatar-link[data-v-ea0483c2] {
font-size: 0;
@@ -1076,7 +1110,7 @@
margin: 0 0 0 1rem;
}
.bio-item[data-v-ea0483c2] {
width: calc(50% - 2rem);
width: calc(50% - 4rem);
display: -webkit-box;
display: flex;
-webkit-box-pack: justify;
@@ -1127,16 +1161,19 @@
width: 1.25rem;
height: 1.25rem;
}
.header-gender.female .icon[data-v-ea0483c2],
.bio-gender.female .icon[data-v-ea0483c2] {
fill: #f0a;
fill: #f0a;
}
.header-gender.male .icon[data-v-ea0483c2],
.bio-gender.male .icon[data-v-ea0483c2] {
fill: #0af;
fill: #0af;
}
.header-gender.transsexual .icon[data-v-ea0483c2],
.bio-gender.transsexual .icon[data-v-ea0483c2] {
fill: #fff;
-webkit-filter: drop-shadow(1px 0 0 #f0a) drop-shadow(-1px 0 0 #f0a) drop-shadow(0 1px 0 #f0a) drop-shadow(0 -1px 0 #f0a) drop-shadow(1px 0 0 #0af) drop-shadow(-1px 0 0 #0af) drop-shadow(0 1px 0 #0af) drop-shadow(0 -1px 0 #0af);
filter: drop-shadow(1px 0 0 #f0a) drop-shadow(-1px 0 0 #f0a) drop-shadow(0 1px 0 #f0a) drop-shadow(0 -1px 0 #f0a) drop-shadow(1px 0 0 #0af) drop-shadow(-1px 0 0 #0af) drop-shadow(0 1px 0 #0af) drop-shadow(0 -1px 0 #0af);
fill: #fff;
-webkit-filter: drop-shadow(1px 0 0 #f0a) drop-shadow(-1px 0 0 #f0a) drop-shadow(0 1px 0 #f0a) drop-shadow(0 -1px 0 #f0a) drop-shadow(1px 0 0 #0af) drop-shadow(-1px 0 0 #0af) drop-shadow(0 1px 0 #0af) drop-shadow(0 -1px 0 #0af);
filter: drop-shadow(1px 0 0 #f0a) drop-shadow(-1px 0 0 #f0a) drop-shadow(0 1px 0 #f0a) drop-shadow(0 -1px 0 #f0a) drop-shadow(1px 0 0 #0af) drop-shadow(-1px 0 0 #0af) drop-shadow(0 1px 0 #0af) drop-shadow(0 -1px 0 #0af);
}
.birthdate[data-v-ea0483c2] {
display: block;
@@ -1164,15 +1201,13 @@
color: rgba(255, 255, 255, 0.2);
font-size: .8rem;
}
.extra[data-v-ea0483c2] {
-webkit-box-flex: 1;
flex-grow: 1;
max-width: 40rem;
}
.description[data-v-ea0483c2] {
max-width: 30rem;
max-height: 12rem;
position: relative;
display: block;
-webkit-box-flex: 1;
flex-grow: 1;
box-sizing: border-box;
margin: 0 2rem 0 0;
line-height: 1.5;
@@ -1186,11 +1221,10 @@
}
.social[data-v-ea0483c2] {
display: block;
margin: 1rem 0;
}
.social-link[data-v-ea0483c2] {
display: inline-block;
padding: 0 1rem 0 0;
padding: 0 0 0 1rem;
}
.social-link .icon[data-v-ea0483c2] {
color: rgba(255, 255, 255, 0.5);
@@ -1235,8 +1269,7 @@
}
}
@media (max-width: 1200px) {
.profile .avatar-link[data-v-ea0483c2],
.extra[data-v-ea0483c2] {
.profile .avatar-link[data-v-ea0483c2] {
display: none;
}
.actor-content[data-v-ea0483c2] {
@@ -1259,6 +1292,7 @@
}
@media (max-width: 720px) {
.profile[data-v-ea0483c2] {
height: auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
@@ -1269,8 +1303,9 @@
padding: 0 1rem;
margin: 0;
}
.bio-header[data-v-ea0483c2] {
margin: 1rem 0;
.bio-item[data-v-ea0483c2] {
width: auto;
margin: 0;
}
.city[data-v-ea0483c2],
.state[data-v-ea0483c2],
@@ -1282,8 +1317,14 @@
.scraped[data-v-ea0483c2] {
display: none;
}
.social[data-v-ea0483c2] {
padding: 0 1rem;
}
@media (max-width: 540px) {
.header-social[data-v-ea0483c2] {
display: none;
}
.header-name[data-v-ea0483c2] {
-webkit-box-flex: 1;
flex-grow: 1;
}
}