jam-cloud/web/app/assets/stylesheets/client/profile.css.scss

456 lines
7.1 KiB
SCSS

@import "client/common.css.scss";
#user-profile, #band-profile {
.user-header {
h2 {display:inline;}
a {margin:2px 0 0 20px}
}
.profile-about-right {
textarea {
width:100%;
height:150px;
padding:0;
}
}
.section {
margin-bottom:40px;
}
.add-recordings, .add-interests, .add-presences, .add-bio, .add-experiences {
display:inline;
font-size:11px;
}
.online-presence-option, .performance-sample-option {
display:block;
vertical-align:middle;
margin-bottom:20px;
&.no-online-presence {
display:block;
}
float:left;
margin-right:20px;
margin-top:20px;
&.bandcamp-presence img {
position:relative;
top:9px;
}
&.user-website img {
position:relative;
top:-5px;
}
}
.performance-sample-option {
margin-right:40px;
a {
display:block;
}
img {
margin-bottom:5px;
}
}
.instruments-holder {
margin-bottom:20px;
}
.statuses {
clear:both;
}
img.logo {
margin-right: 20px;
}
ul {
margin:0px 0px 10px 0px;
padding:0px;
}
li {
margin-left: 15px;
margin-bottom: 0px !important;
list-style: disc;
}
.playable {
display:block;
}
.band-actions {
margin-top:4px;
}
}
.profile-head {
}
.profile-body {
}
.profile-header {
padding:10px 20px;
position: relative;
}
.profile-header h2 {
font-weight:200;
font-size: 28px;
float:left;
margin: 0px 0px 0px 0px;
}
.profile-about-right {
.section-header {
font-weight:600;
font-size:18px;
margin: 0px 0px 10px 0px;
clear:both;
}
.section-content {
font-weight:normal;
font-size:1.2em;
margin: 0px 0px 10px 0px;
}
}
.profile-details {
font-size:12px;
float:left;
width: 80px;
}
.profile-photo {
height: 95px;
width: 15%;
float:left;
}
.profile-nav {
width:85%;
position:relative;
float:right;
margin-right:-10px;
}
.profile-nav a {
width:19%;
text-align:center;
height: 27px;
display: block;
float:left;
margin-right:5px;
vertical-align:bottom;
padding-top:65px;
background-color:#535353;
color:#ccc;
font-size:17px;
text-decoration:none;
}
.profile-nav a:hover {
background-color:#666;
color:#fff;
}
.profile-nav a.active {
background-color:#ed3618;
color:#fff;
}
.profile-nav a.active:hover {
background-color:#ed3618;
cursor:default;
}
.profile-nav a.last {
margin-right:0px !important;
}
.avatar-profile {
float:left;
padding:2px;
width:88px;
height:88px;
background-color:#ed3618;
-webkit-border-radius:44px;
-moz-border-radius:44px;
border-radius:44px;
}
.avatar-profile img {
width:88px;
height:88px;
-webkit-border-radius:44px;
-moz-border-radius:44px;
border-radius:44px;
}
.profile-wrapper {
padding:10px 25px 10px 25px;
font-size:15px;
color:#ccc;
position:relative;
display:block;
}
.profile-about-left {
width:16%;
float:left;
font-size:13px;
line-height:140%;
display:block;
}
.profile-about-left h3 {
color:#fff;
margin-bottom:0px;
font-size:13px;
font-weight:bold;
display:inline;
}
.profile-about-right {
float:right;
font-size:13px;
width:84%;
line-height:140%;
display:block;
}
.profile-about-right .profile-instrument {
text-align:center;
margin-right:15px;
float:left;
}
.proficiency-beginner {
font-size:10px;
color:#8ea415;
font-weight:600;
}
.proficiency-intermediate {
font-size:10px;
color:#0b6672;
font-weight:600;
}
.proficiency-expert {
font-size:10px;
color:#ed3618;
font-weight:600;
}
#bands-content .when-empty {
margin: 0px;
padding:0px;
display:block;
vertical-align:middle;
text-align:center;
font-weight: bold;
font-size: 120%;
line-height: 150%;
}
#bands-content .when-empty a {
text-decoration: underline;
color: inherit;
}
.profile-bands {
width:100%;
min-height:90px;
background-color:#242323;
position:relative;
float:left;
margin:10px 20px 10px 0px;
padding-bottom:5px;
}
.profile-band-name {
float:left;
font-size:12px;
margin-top:12px;
font-weight:bold;
}
.profile-band-location {
font-size:12px;
font-weight:200;
}
.profile-band-genres {
float:left;
width:40%;
font-size:10px;
margin-left:10px;
padding-right:5px;
}
.profile-band-list-result {
width:100%;
min-height:85px;
background-color:#242323;
position:relative;
margin:10px 0px 10px 0px;
padding-bottom:5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing:border-box;
padding-top:1px;
.result-name {
font-size: 12px;
font-weight: bold;
margin-bottom: 2px;
padding-right:4px;
}
.stats {
margin-top: 4px;
img {
vertical-align: middle;
}
}
.lcol {
width: 200px;
}
.whitespace {
// equal to lcol width.
padding-left: 200px;
}
.instruments {
width:128px;
img {
height:24px;
width:24px;
margin-right:2px;
&:last-child {
margin-right:0px;
}
}
}
.button-row {
margin-top:10px;
margin-bottom:5px;
.result-list-button-wrapper {
}
}
}
.profile-social-left {
float:left;
width:32%;
margin-right:12px;
border-right:solid 1px #666;
}
.profile-social-mid {
float:left;
width:31%;
margin-right:12px;
border-right:solid 1px #666;
}
.profile-social-right {
float:left;
width:31%;
}
.profile-social-left h2, .profile-social-mid h2, .profile-social-right h2 {
font-weight:200;
color:#fff;
font-size:20px;
}
.profile-block {
clear:left;
white-space:nowrap;
display:block;
margin-bottom:10px;
}
.profile-block-name {
display:inline-block;
margin-top:13px;
font-size:14px;
color:#fff;
font-weight:bold;
}
.profile-block-city {
font-size:12px;
}
.profile-musicians {
margin-top:-3px;
font-size:11px;
}
.profile-musicians td {
border-right:none;
border-top:none;
padding:3px;
vertical-align:middle;
}
#btn-add-friend {
display:none;
}
#history-content, #band-profile-history {
padding:0 10px 0 20px;
width:100%;
position:relative;
height:100%;
@include border_box_sizing;
#user-feed-controls, #band-feed-controls {
width:100%;
@include border_box_sizing;
position:relative;
display:none;
}
.btn-refresh-holder {
left: 95%; // 5 * 19% to right-align 5 user blocks (in conjunction with the margin-left
margin-left: -65px;
position: absolute;
}
.filter-body {
bottom: 0;
right: 0;
top: 0;
left: 20px;
position: absolute;
width: 95%;
padding-top:0;
margin-top:10px;
height:auto;
}
.profile-wrapper {
padding: 10px 0;
}
.feed-entry .feed-details {
margin-right:5px;
}
.recording-current {
position:absolute; // solves a problem with duration wrapping--only in firefox
}
.content-body-scroller {
height: 100%;
width: 100%;
position: absolute;
}
.no-feed-msg {
text-align:center
}
}