nodebb-theme-ricequant
Version:
NodeBB theme for ricequant.
451 lines (424 loc) • 10.1 kB
text/less
.account {
min-height: calc(~"100vh - 200px");
.topic-row {
width: 100%;
}
.profile-bg{
width: 100%;
position: absolute;
left: 0;
display: block;
background: url(http://7xjci4.com5.z0.glb.qiniucdn.com/forum/img/profile-bg.jpeg) no-repeat;
background-size: contain;
margin-top: -20px;
@media (max-width: @screen-xs-max) {
background-size: initial;
}
}
.row.first{
padding-top: calc( ~"10.19vw + 30px" );
text-align: center;
@media (max-width: @screen-xs-max) {
padding-top: calc( ~"10.19vw + 80px" );
}
}
.js-tab-container{
> ul{
list-style: none;
text-align: center;
border-bottom: solid 1px #ccc;
padding: 0;
}
.js-tab-nav{
display: inline-block;
position: relative;
top: 1px;
background: #fff;
padding: 20px 60px;
border-bottom: solid 1px #ccc;
height: 64px;
cursor: pointer;
@media (max-width: @screen-xs-max) {
padding: 10px 14px;
height: 45px;
}
i{
margin-right: 8px;
}
.topic-row{
h3{
margin-top: 10px;
}
}
}
.js-tab-nav.active{
color: #69f;
border: solid 1px #ccc;
border-bottom: none;
top: 2px;
border-radius: 8px 8px 0 0;
}
.js-tab-panel{
display: none;
width: 100%;
padding: 0;
margin-top: 20px;
.topic-row{
border: none;
.border-radius(0);
margin-bottom: 30px;
list-style: none;
padding: 20px;
box-shadow: 0 0 2px 2px #e9e9e9;
}
}
}
.js-tab-panel.active{
display: block;
}
}
.favourites {
.topic-row {
width: 100%;
margin-bottom: 10px;
.user-img {
width: 24px;
height: 24px;
float: left;
}
a {
span {
overflow: hidden;
height: 16px;
padding-left: 8px;
}
}
.content {
max-height: 250px;
position: relative;
clear: left;
display: block;
overflow: hidden;
}
}
}
.account-sub-links {
border:none;
> li {
float:right;
}
}
.account-picture-block{
position:relative;
border:solid 1px #ddd;
height:320px;
& > div {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
height:170px;
width:550px;
@media (max-width: @screen-xs-max) {
width: 400px;
}
}
}
.user-profile-picture {
width:128px;
border-radius:64px;
}
.show-followers-items{
text-align: center;
>div{
padding: 10px;
width: 180px;
position: relative;
left: 50%;
margin-left: -90px;
text-align: left;
>span{
width: 100px;
font-size: 18px;
margin:0 20px;
}
}
}
.user-profile-avatar {
position:relative;
left: 50%;
margin-left: -64px;
margin-top: calc( ~"10.19vw - 95px" );
display: inline-block;
@media (max-width: @screen-xs-max) {
margin-top: calc( ~"10.19vw - 30px" );
}
>a {
position: absolute;
background: #69f;
color: #fff;
line-height: 34px;
padding: 0 11px;
border-radius: 17px;
bottom: 0px;
left: 95px;
white-space: nowrap;
}
#unfollow-btn{
background: #006900;
}
#show-followers{
display: inline-block;
width: 35px;
height: 35px;
color: #ffffff;
background-color: #69f;
line-height: 35px;
text-align: center;
border-radius: 17px;
position: relative;
left: 100%;
top: 20px;
cursor: pointer;
.show-followers-items{
position: absolute;
background-color: #fff;
border: solid 1px #ccc;
z-index: 1;
padding: 30px;
width: 150px;
border-radius: 15px;
margin-top: 20px;
color: #000;
position: absolute;
text-align: left;
margin-left: -80px;
box-shadow: 0px -5px 20px 5px #ccc;
}
.profile-flag{
position: absolute;
top: -15px;
left: 80px;
bottom: auto;
width: 0;
height: 0;
border: solid 8px #fff;
border-left-color: transparent;
border-top-color: transparent;
}
}
}
.user-profile-info.self {
.user-intro{
display: inline-block;
margin: 0 auto;
padding-right: 20px;
margin-right: 20px;
line-height: 40px;
}
.items{
margin-left: 50px;
padding-left: 50px;
border-left: solid 1px;
}
}
.user-profile-info {
.user-status{
height:50px;
line-height:50px;
white-space: nowrap;
position: relative;
.name{
margin: 0 30px;
}
.edit{
position: absolute;
.edit-profile{
margin-right: 20px;
padding-right: 20px;
border-right: solid 1px @input-border;
}
}
}
.user-intro{
margin-bottom: 25px;
>div{
margin: 5px 0;
}
}
.items{
display: inline-block;
margin: 0 auto;
text-align: left;
span{
padding-left:10px;
margin-left:6px;
}
>div{
margin: 5px 0;
}
.major, .business{
border-left: solid 1px @input-border;
}
}
.account-online-status {
margin-right:10px;
font-size:10px;
}
.user-name {
display:inline-block;
font-size:26px;
vertical-align:middle;
}
.follower {
font-size:18px;
margin:25px 0;
span {
padding-right:20px;
}
.sep {
border-left:solid 2px #ddd;
}
}
.time-info {
font-size:12px;
color:#999;
margin:0;
line-height:18px;
}
}
.user-profile-info.self{
.user-intro{
text-align: left;
}
}
.account-info {
color: #000000;
background-color: #f6f6f6;
padding:30px 0;
margin: 30px 0;
li {
display:inline-block;
width:15%;
text-align:center;
}
p {
font-size:30px;
margin:5px 0;
& ~ p {
font-size:14px;
color:#999;
}
}
@media (max-width: @screen-xs-max) {
p {
font-size:18px;
margin:5px 0;
& ~ p {
font-size:10px;
color:#999;
}
}
}
}
.js-tab-panel {
margin:0;
.user-post {
border:solid 1px #ddd;
margin-bottom:30px;
text-align: left;
}
.topic-row {
line-height:40px;
//background-color:#f7f7f7;
margin:0;
padding:0 30px;
.user-img {
width: 24px;
height: 24px;
float: left;
margin:5px 10px 5px 0;
.border-radius(15px);
}
.user-name {
float: left;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.fr {
font-size:12px;
}
}
.content {
max-height: 250px;
position: relative;
clear: both;
display: block;
overflow: hidden;
}
}
.user-pts {
list-style: none;
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pt-share-item {
background-color: #fff;
.pt-share-header{
height: 30px;
line-height: 30px;
margin-bottom: 5px;
position: relative;
h3 {
margin: 0 10px;
max-width: 60%;
font-weight: normal;
display: inline-block;
vertical-align: middle;
}
.post-time {
font-size: small;
float: right;
}
.strategy-rank {
height: 30px;
line-height: 28px;
display: inline-block;
border: 1px solid #5992cd;
background-color: #5992cd;
color: #fff;
border-radius: 3px;
.rank {
margin: 0 5px;
}
.score {
cursor: pointer;
background-color: #fff;
color: #5992cd;
padding: 0 8px;
display: inline-block;
}
}
}
.pt-share-strategy {
text-align: center;
width: 100%;
td {
padding: 10px 0;
}
.color- {
&up {
color: #cc0000;
}
&down {
color: #009900;
}
}
}
}
}