<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<style>
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
html, body {
max-width: 100%;
overflow-x: hidden;
}
.popup-box {
background-color: #ffffff;
border: 1px solid #b0b0b0;
bottom: 0px;
display: none;
height: 415px;
position: fixed;
z-index: 100;
right: 70px;
width: 300px;
font-family: 'Open Sans', sans-serif;
}
.round.hollow {
margin: 0px 0 0;
}
.round.hollow a {
width: 112px;
height: 30px;
border-radius: 15px;
border-style: none;
color: white;
font-size: 18px;
font-weight: 700;
}
.round.hollow a:hover {
width: 112px;
height: 30px;
border-radius: 15px;
border-style: none;
color: white;
font-size: 18px;
font-weight: 700;
}
.popup-box-on {
display: block !important;
}
.popup-box .popup-head {
background-color: #fff;
clear: both;
color: #000000;
display: inline-table;
font-size: 21px;
padding: 7px 10px;
width: 100%;
font-family: Oswald;
}
.bg_none i {
border: 1px solid #f9f9f9;
border-radius: 25px;
color: #ffffff;
font-size: 17px;
background-image: linear-gradient(180deg,#000,#000);
height: 33px;
line-height: 30px;
width: 33px;
}
.bg_none:hover i {
border: 1px solid #000;
border-radius: 25px;
color: #fff;
font-size: 17px;
height: 33px;
line-height: 30px;
width: 33px;
}
.bg_none {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
}
.popup-box .popup-head .popup-head-right {
margin: 11px 7px 0;
}
.popup-box .popup-messages {
}
.popup-head-left img {
border: 1px solid #7b7b7b;
border-radius: 50%;
width: 44px;
}
.popup-messages-footer > textarea {
border-bottom: 1px solid #b2b2b2 !important;
height: 34px !important;
margin: 7px;
padding: 5px !important;
border: medium none;
width: 95% !important;
}
.popup-messages-footer {
background: #fff none repeat scroll 0 0;
bottom: 0;
position: absolute;
width: 100%;
}
.popup-messages-footer .btn-footer {
overflow: hidden;
padding: 2px 5px 10px 6px;
width: 100%;
}
.simple_round {
background: #d1d1d1 none repeat scroll 0 0;
border-radius: 50%;
color: #4b4b4b !important;
height: 21px;
padding: 0 0 0 1px;
width: 21px;
}
.popup-box .popup-messages {
background: #000 none repeat scroll 0 0;
height: 275px;
overflow: auto;
}
.direct-chat-messages {
overflow: auto;
padding: 10px;
transform: translate(0px, 0px);
}
.popup-messages .chat-box-single-line {
border-bottom: 1px solid #a4c6b5;
height: 12px;
margin: 7px 0 20px;
position: relative;
text-align: center;
}
.popup-messages abbr.timestamp {
background: #000 none repeat scroll 0 0;
color: #fff;
padding: 0 11px;
}
.popup-head-right .btn-group {
display: inline-flex;
margin: 0 8px 0 0;
vertical-align: top !important;
}
.chat-header-button {
background: transparent none repeat scroll 0 0;
border: 1px solid #636364;
border-radius: 50%;
font-size: 14px;
height: 30px;
width: 30px;
}
.popup-head-right .btn-group .dropdown-menu {
border: medium none;
min-width: 122px;
padding: 0;
}
.popup-head-right .btn-group .dropdown-menu li a {
font-size: 12px;
padding: 3px 10px;
color: #303030;
}
.popup-messages abbr.timestamp {
background: #000 none repeat scroll 0 0;
color: #fff;
padding: 0 11px;
}
.popup-messages .chat-box-single-line {
border-bottom: 1px solid #a4c6b5;
height: 12px;
margin: 7px 0 20px;
position: relative;
text-align: center;
}
.popup-messages .direct-chat-messages {
height: auto;
}
.popup-messages .direct-chat-text {
background: #fff none repeat scroll 0 0;
border: 1px solid #dfece7;
border-radius: 2px;
color: #1f2121;
}
.popup-messages .direct-chat-timestamp {
color: #fff;
opacity: 0.6;
}
.popup-messages .direct-chat-name {
font-size: 15px;
font-weight: 600;
margin: 0 0 0 49px !important;
color: #fff;
opacity: 0.9;
}
.popup-messages .direct-chat-info {
display: block;
font-size: 12px;
margin-bottom: 0;
}
.popup-messages .big-round {
margin: -9px 0 0 !important;
}
.popup-messages .direct-chat-img {
border: 1px solid #fff;
background: #3f9684 none repeat scroll 0 0;
border-radius: 50%;
float: left;
height: 40px;
margin: -21px 0 0;
width: 40px;
}
.direct-chat-reply-name {
color: #fff;
font-size: 15px;
margin: 0 0 0 10px;
opacity: 0.9;
}
.direct-chat-img-reply-small
{
border: 1px solid #fff;
border-radius: 50%;
float: left;
height: 20px;
margin: 0 8px;
width: 20px;
background:#3f9684;
}
.popup-messages .direct-chat-msg {
margin-bottom: 10px;
position: relative;
}
.popup-messages .doted-border::after {
background: transparent none repeat scroll 0 0 !important;
border-right: 2px dotted #fff !important;
bottom: 0;
content: "";
left: 17px;
margin: 0;
position: absolute;
top: 0;
width: 2px;
display: inline;
z-index: -2;
}
.popup-messages .direct-chat-msg::after {
background: #fff none repeat scroll 0 0;
border-right: medium none;
bottom: 0;
content: "";
left: 17px;
margin: 0;
position: absolute;
top: 0;
width: 2px;
display: inline;
z-index: -2;
}
.direct-chat-text::after, .direct-chat-text::before {
border-color: transparent #dfece7 transparent transparent;
}
.direct-chat-text::after, .direct-chat-text::before {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: transparent #d2d6de transparent transparent;
border-image: none;
border-style: solid;
border-width: medium;
content: " ";
height: 0;
pointer-events: none;
position: absolute;
right: 100%;
top: 15px;
width: 0;
}
.direct-chat-text::after {
border-width: 5px;
margin-top: -5px;
}
.popup-messages .direct-chat-text {
background: #fff none repeat scroll 0 0;
border: 1px solid #dfece7;
border-radius: 2px;
color: #1f2121;
}
.direct-chat-text {
background: #d2d6de none repeat scroll 0 0;
border: 1px solid #d2d6de;
border-radius: 5px;
color: #444;
margin: 5px 0 0 50px;
padding: 5px 10px;
position: relative;
}
</style>
<!--
<div class="row content__box">
<div ng-click="$ctrl.closeSearch()" class="col-lg-12" style="padding:0px;">
<div ng-click="$event.stopPropagation()" class="center-content" >
<div ng-show="!$ctrl.searchIsActive">
<div class="profileInfo-container">
<div class="row margin-none" ng-if="searchedUser">
<div class="inline-container profileInfo__avatar-container">
<img class="profileInfo__avatar-img" src="{{ searchedUser.profileImage }}" alt="" />
</div>
<div class="profileInfo__info-container">
<ul class="row profileInfo__info-list ">
<li class="col-xs-6 profileInfo__info-item"><strong>{{ searchedUser.followers }}</strong> Followers</li>
<li class="col-xs-6 profileInfo__info-item"><strong>{{ searchedUser.following }}</strong> Following</li>
</ul>
<div class="profileInfo__settings-container">
<div class="profileInfo__settings-box" ng-if="$ctrl.isLoggedInUser">
<a class="btn-style profileInfo__settings-editProfile" ui-sref="settings/editprofile">Edit Profile</a>
<a class="profileInfo__settings-btn" ui-sref="settings" class="navIconColorOne"><img src="../../../assets/images/settings-icon.svg"></a>
</div>
<br>
<button class="MessageBtn">Message</button>
<div class="followBtn-container" >
<!--ng-if="!$ctrl.isLoggedInUser && $ctrl.showFollowBtn"-->
<!--
<button class="followBtn" ng-if="!following" ng-click="$ctrl.isFollowing(searchedUser)">Follow</button>
<button class="followBtn followBtn--unfollow" ng-if="following" ng-click="$ctrl.isFollowing(searchedUser)">Unfollow</button>
</div>
</div>
</div>
<div class="profileInfo__userInfo">
<p class="profileInfo__userInfo-username">{{ searchedUser.username }}</p>
<p class="profileInfo__userInfo-description">{{ searchedUser.description }}</p>
<p class="profileInfo__userInfo-links" >
<a ng-if="searchedUser.facebookId" href="https://www.facebook.com/{{ searchedUser.facebookId }}" class="user__link icon--facebook" target="_blank"></a>
<a ng-if="searchedUser.instagramId" href="https://www.facebook.com/{{ searchedUser.instagramId }}" class="user__link icon--instagram" target="_blank"></a>
<a ng-if="searchedUser.twitterId" href="https://www.facebook.com/{{ searchedUser.twitterId }}" class="user__link icon--twitter" target="_blank"></a>
<a ng-if="searchedUser.website" href="https://www.facebook.com/{{ searchedUser.website }}" class="user__link icon--wishlist" target="_blank"></a>
<a ng-if="searchedUser.snapchatId" href="https://www.facebook.com/{{ searchedUser.snapchatId }}" class="user__link icon--snap" target="_blank"></a>
<a ng-if="searchedUser.youtubeId" href="https://www.facebook.com/{{ searchedUser.youtubeId }}" class="user__link icon--youtube" target="_blank"></a>
</p>
</div>
</div>
<div class="user-loading items__spinner" ng-if="!searchedUser">
<i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
</div>
</div>
<div class="items-container">
<div class="row items__btn-section">
<button ng-click="$ctrl.sectionType='myStories'" ng-class="{'active': $ctrl.sectionType=='myStories'}" class="col-xs-4 items__btn-section__tabs"><strong>{{ $ctrl.isLoggedInUser ? 'My stories' : 'Published Stories' }}</strong></button><!--
-->
<!--
<button ng-click="$ctrl.sectionType='24hPurchase'" ng-class="{'active': $ctrl.sectionType=='24hPurchase'}" class="col-xs-4 items__btn-section__tabs"><strong>24h Purchases</strong></button><!--
-->
<!--
<button ng-click="$ctrl.sectionType='archived'" ng-class="{'active': $ctrl.sectionType=='archived'}" class="col-xs-4 items__btn-section__tabs"><strong>Archived</strong></button>
</div>
<div>
<div ng-switch="$ctrl.sectionType">
<!-- Section: 24h Purchases -->
<!--
<div ng-switch-when="24hPurchase">
<div ng-repeat="message in purchased.purchasedMessages" class="message">
<user-info
user-info="message"
user-info-type="'message'"
section="'24hPurchase'"
get-item-info="
$ctrl.itemId = $event.itemId;
$ctrl.section = $event.section;">
</user-info>
</div>
<div ng-repeat="story in purchased.purchasedStories" class="story">
<user-info
user-info="story"
user-info-type="'story'"
section="'24hPurchase'"
get-item-info="
$ctrl.itemId = $event.itemId;
$ctrl.section = $event.section;">
</user-info>
</div>
<div ng-if="$ctrl.showSpinner.purchased" class="items__spinner">
<div class="fa fa-spinner fa-spin"></div>
</div>
<div ng-if="!$ctrl.showSpinner.purchased && ( purchased.purchasedStories.length == 0 && purchased.purchasedMessages.length == 0 )" class="message__box message__box--grey">
<div class="user-live__no-items message__box__info">
<p> No recent purchased stories to display. </p>
</div>
</div>
</div>
<!-- Section: Archived -->
<!--
<div ng-switch-when="archived">
<div ng-repeat="message in archived.archivedMessages" class="message">
<user-info
user-info="message"
user-info-type="'message'"
section="'archived'"
get-item-info="
$ctrl.itemId = $event.itemId;
$ctrl.section = $event.section;">
</user-info>
</div>
<div ng-repeat="story in archived.archivedStories" class="story">
<user-info
user-info="story"
user-info-type="'story'"
section="'archived'"
get-item-info="
$ctrl.itemId = $event.itemId;
$ctrl.section = $event.section;">
</user-info>
</div>
<div ng-if="$ctrl.showSpinner.archived" class="items__spinner">
<div class="fa fa-spinner fa-spin"></div>
</div>
<div ng-if="!$ctrl.showSpinner.archived && ( archived.archivedMessages.length == 0 && archived.archivedStories.length == 0 )" class="message__box message__box--grey">
<div class="user-live__no-items message__box__info">
<p> No recent archives to display. </p>
{{!$ctrl.showSpinner.archived}} {{archived.archivedMessages.length == 0}} {{ archived.archivedStories.length == 0 }}
</div>
</div>
</div>
<!-- Section: MyStories / Published Stories -->
<!--
<div ng-switch-default>
<div ng-repeat="story in userOwnStories" class="story">
<user-info
user-info="story"
user-info-type="'story'"
section="'ownStories'"
get-item-info="
$ctrl.itemId = $event.itemId;
$ctrl.section = $event.section;
$ctrl.itemPrice = $event.itemPrice;
$ctrl.storyOrMessage = $event.storyOrMessage;
$ctrl.alreadyHaveIt = $event.alreadyHaveIt;">
</user-info>
</div>
<div ng-if="$ctrl.showSpinner.userOwnStories" class="items__spinner">
<div class="fa fa-spinner fa-spin"></div>
</div>
<div ng-if="!$ctrl.showSpinner.userOwnStories && userOwnStories.length == 0 " class="message__box message__box--grey">
<div class="user-live__no-items message__box__info">
<p> No stories to display. </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
-->
<div class="popup-box chat-popup" id="qnimate">
<div class="popup-head">
<div class="popup-head-left pull-left"><img src="http://34.217.69.61/wp-content/uploads/2019/03/img-01.png"> Stacy Wood</div>
<div class="popup-head-right pull-right">
<div class="btn-group">
<button class="chat-header-button" data-toggle="dropdown" type="button" aria-expanded="false">
<i class="glyphicon glyphicon-cog"></i> </button>
<ul role="menu" class="dropdown-menu pull-right">
<li><a href="#">Media</a>
</li>
<li><a href="#">Block</a>
</li>
<li><a href="#">Clear Chat</a>
</li>
<li><a href="#">Email Chat</a>
</li>
</ul>
</div>
<button data-widget="remove" id="removeClass" class="chat-header-button pull-right" type="button"><i class="glyphicon glyphicon-off"></i>
</button>
</div>
</div>
<div class="popup-messages">
<div class="direct-chat-messages">
<div class="chat-box-single-line">
<abbr class="timestamp">July 22, 2016</abbr>
</div>
<!-- Message. Default to the left -->
<div class="direct-chat-msg doted-border">
<div class="direct-chat-info clearfix">
<span class="direct-chat-name pull-left">Stacy Wood</span>
</div>
<!-- /.direct-chat-info -->
<img alt="message user image" src="http://34.217.69.61/wp-content/uploads/2019/03/img-01.png" class="direct-chat-img">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
Hey sexy, how’s everything going ?
</div>
<div class="direct-chat-info clearfix">
<span class="direct-chat-timestamp pull-right">3.36 PM</span>
</div>
<!-- /.direct-chat-text -->
<div class="direct-chat-info clearfix">
<span class="direct-chat-name pull-left">Alexis Ren</span>
</div>
<!-- /.direct-chat-info -->
<img alt="message user image" src="http://34.217.69.61/wp-content/uploads/2019/03/img-03.png" class="direct-chat-img">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
Hey cutie, just at work, would you like to watch me?
</div>
<div class="direct-chat-info clearfix">
<span class="direct-chat-timestamp pull-right">3.36 PM</span>
</div>
</div>
<!-- /.direct-chat-msg -->
<div class="chat-box-single-line">
<abbr class="timestamp">July 23, 2016</abbr>
</div>
<!-- Message. Default to the left -->
<div class="direct-chat-msg doted-border">
<div class="direct-chat-info clearfix">
<span class="direct-chat-name pull-left">Stacy Wood</span>
</div>
<!-- /.direct-chat-info -->
<img src="http://34.217.69.61/wp-content/uploads/2019/03/img-01.png" class="direct-chat-img">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
Hey cutie, glad you could wacth me, would like my GF package for $600 ?
</div>
<div class="direct-chat-info clearfix">
<span class="direct-chat-timestamp pull-right">3.36 PM</span>
</div>
<div class="direct-chat-info clearfix">
<span class="direct-chat-name pull-left">Alexis Ren</span>
</div>
<!-- /.direct-chat-info -->
<img src="http://34.217.69.61/wp-content/uploads/2019/03/img-03.png" class="direct-chat-img">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
I would love to, would you like smash coins or paypal?
</div>
<div class="direct-chat-info clearfix">
<span class="direct-chat-timestamp pull-right">3.38 PM</span>
</div>
<!-- /.direct-chat-text -->
</div>
<!-- /.direct-chat-msg -->
</div>
</div>
<div class="popup-messages-footer">
<textarea id="status_message" placeholder="Type a message..." rows="10" cols="40" name="message"></textarea>
<div class="btn-footer">
<button class="bg_none"><i class="glyphicon glyphicon-film"></i> </button>
<button class="bg_none"><i class="glyphicon glyphicon-camera"></i> </button>
<button class="bg_none"><i class="glyphicon glyphicon-paperclip"></i> </button>
<button class="bg_none pull-right"><i class="glyphicon glyphicon-thumbs-up"></i> </button>
</div>
</div>
</div>
<script>
$(function(){
$("#addClass").click(function (e) {
e.preventDefault();
$('#qnimate').addClass('popup-box-on');
});
$("#removeClass").click(function () {
$('#qnimate').removeClass('popup-box-on');
});
});
</script>
<style>
.feed-photos {
max-width: 968px;
margin: 0 auto;
-webkit-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
.feed-photos {
ul.thumbnails{
margin: 15px 10px;
}
.thumbnail{
background: #fff;
}
}
/*sizing for thumbnails*/
.profile-user {
position: relative;
max-width: 964px;
min-height: 75px;
margin: 0 auto;
padding: 10px 0px 15px;
}
.compContainer {
position: absolute;
right: 0;
top: 0;
bottom: 0;
left: 0;
margin-left: 0;
margin-top: 1px;
background-color: #000;
-webkit-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
-webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
-moz-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.compNoComp .compContainer, .compContainerLoading {
background-color: #444;
}
.compPhoto {
position: absolute;
height: 50%;
width: 20%;
margin: 0 0 0 -1px;
.compFrontside, .compFlipside {
bottom: 1px;
left: 1px;
position: absolute;
right: 0;
top: 0;
-webkit-transition: opacity .6s ease-out;
-moz-transition: opacity .6s ease-out;
-o-transition: opacity .6s ease-out;
transition: opacity .6s ease-out;
}
}
.compPhotoShadow {
border: 1px solid rgba(255, 255, 255, 0.15);
bottom: 0;
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.meta{
text-align:center;
color: #999;
}
a:hover{
text-decoration: none !important;
}
}
.gallery
{
display: inline-block;
margin-top: 20px;
}
.bio{
font-size: 16px;
padding-top: 10px;
line-height: 24px;
color: #252525;
font-weight: 400;
display: inline-block;
display: -moz-inline-box;
*display: inline; /* For IE7 */
zoom: 1; /* Trigger hasLayout */
width: 100%;
font-family: museo_sans_cyrl_500, Arial, sans-serif;
text-align: left;
}
ul.thumbnails li{
margin: 15px !important;
}
.item__wrapper {
position: relative;
height: 100%;
padding: 0px 10px;
padding-right: 50px;
z-index: 2;
transition: 0.6s ease;
}
.item__wrapper-xs {
position: relative;
height: 120px;
z-index: 10;
}
.item__wrapper--menu-active {
padding-right: 50px;
}
.item-container {
position: relative;
height: 110px;
margin-top: 0px;
margin-bottom: 30px;
overflow: hidden;
}
.item__backgroundImg {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: 1;
opacity: 0.3;
}
.item__background {
height: 200px;
margin-top: -200px;
background-color: rgba(256,256,256,0.5);
}
.item__background--story {
background-image: url("/assets/images/message_story_bg.png");
}
.item__background--message {
background-image: url("/assets/images/message_recent_bg.png");
}
.item__box {
width: 100%;
height: 100%;
margin: 0;
padding-left: 160px;
padding-right: 5px;
}
.item__container {
position: relative;
height: 100%;
padding-top: 20px;
padding-left: 10px;
padding-right: 0px;
}
.item__container:nth-child(1) {
padding-left: 0px;
}
.item__container--top-lg {
padding-top: 16px;
}
.item__container--top-sm {
padding-top: 26px;
}
.col-xs-3.item__container--top-lg {
padding-top: 12px;
}
.item__user__info__container{
position: absolute;
bottom: 5px;
left: 0px;
right: 0;
text-align: left;
}
.item__avatar__container {
position: absolute;
top: 50%;
display: inline-block;
width: 85px;
height: 85px;
padding: 0px;
transform: translate( 0%, -50%);
}
.item__avatar {
display: inline-block;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
border-radius: 50%;
}
.item__user__name {
margin: 0;
color: #111111;
font-size: 18px;
font-weight: 500;
}
.item__user__title {
margin-bottom: 8px;
color: #000000;
font-size: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.item__user__name,
.item__user__title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.item__username {
color: #000000;
font-size: 20px;
}
.item__username_story{
color: #333333;
font-family: Roboto;
font-size: 20px;
font-weight: 400;
}
.item__info__container {
text-align: right;
}
.item__info__iconText {
display: inline-block;
width: 200px;
padding-left: 30px;
color: #333333;
font-family: Roboto;
font-size: 18px;
font-weight: 400;
text-align: left;
}
.item__info__iconText:nth-child(2) {
margin-top: 7px;
padding-left: 34px;
}
.item__info__icon {
display: inline-block;
width: 22px;
height: 22px;
}
.item__info__text {
display: inline-block;
font-weight: 500;
vertical-align: text-top;
}
.item__info__text i::before,
.item__info__text img{
width: 18px;
height: 18px;
font-size: 18px;
}
.item__info__iconText--clock {
display: inline;
padding-left: 0px !important;
font-size: 14px;
vertical-align: middle;
}
.item__info__iconText--clock img{
margin-right: 2px;
}
.item__info__watchBtn-container {
display: inline-block;
margin-top: 15px;
}
.item__info__watchBtn {
width: 200px;
height: 50px;
margin-top: 4px;
margin-left: 10px;
border-radius: 30px;
border-style: none;
color: #ffffff;
font-family: Roboto;
font-size: 20px;
font-weight: 400;
background: #111111;
}
.item__info__watchBtn-container {
display: inline-block;
margin-top: 15px;
}
.item__info__watchBtn {
width: 200px;
height: 50px;
margin-top: 4px;
margin-left: 10px;
border-radius: 30px;
border-style: none;
color: #ffffff;
font-family: Roboto;
font-size: 20px;
font-weight: 400;
background: #111111;
}
.item__info__qBtn{
position: relative;
display: inline-block;
width: 75px;
height: 75px;
background: url("/assets/images/q-symbol.svg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
cursor: pointer;
text-align: right;
}
.item__info__qBtn-text{
position: absolute;
top: 45%;
left: 50%;
min-width: 30px;
margin: 0;
border-radius: 50%;
color: white;
background: #111111;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
line-height: 40px;
transform: translate(-50%, -50%);
text-align: center;
}
.item__info__watchBtn__spinner {
position: absolute;
right: 35%;
top: 32%;
color: white;
font-size: 22px;
z-index: -1;
transform: translate(-50%, -50%);
}
.item__user__playCount-wrapper{
display: inline-block;
margin-top: 0px;
vertical-align: middle;
margin-right: 5px;
}
.item__user__playCount-paragr {
margin: 0;
margin-right: 3px;
color: #333333;
font-family: Roboto;
}
.item__user__playCount-paragr i {
width: 22px;
height: 22px;
color: #333333;
vertical-align: bottom;
}
.item__user__playCount-wrapper i:before {
position: absolute;
width: 22px;
height: 22px;
z-index: 1;
font-size: 22px;
}
.item__user__playCount-wrapper i:after{
content: "";
background: white;
border-radius: 50%;
}
.item__menu {
position: absolute;
top: 50%;
right: 0px;
width: 50px;
height: 100%;
cursor: pointer;
transform: translate( 0%,-50%);
z-index: 10;
}
.item__menu__hidden__menu{
position: absolute;
top: 0;
right: -35px;
width: 50px;
height: 100%;
background: black;
z-index: 10;
transition: 0.6s ease;
}
.item__menu__hidden__menu.active{
right: 15px;
}
.item__menu__more-options-container {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 10px;
right: 0px;
bottom: 20px;
left: 0px;
background: #ffffff;
z-index: 1;
}
.item__info__tab {
position: relative;
display: inline-block;
width: 100%;
height: calc(100%/3);
color: #666666;
text-align: center;
float: left;
transition: 0.6s ease;
}
.item__info__tab.active{
background-color: white;
}
.item__info__tab i {
position: absolute;
top: 50%;
left: 50%;
font-size: 23px;
transform: translate(-50%, -50%);
}
.item__info__tab .item__info__icon{
display: inline-block;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: 25px;
}
.item__menu__more-options-btn {
position: absolute;
top: 50%;
right: 34%;
font-size: 38px;
color: black;
transform: translate(-50%,-50%);
}
.item__menu__more-options-btn:after {
content: '';
}
@media (max-width: 1024px) {
.item-container {
height: 110px;
}
.item__container--top-lg {
padding-top: 16px;
padding-right: 0px;
padding-left: 0px;
}
.col-xs-3.item__container--top-lg {
padding-top: 12px;
}
.item__info__text,
.item__user__playCount-paragr{
font-size: 14px;
}
.item__user__title {
font-size: 16px;
margin-bottom: 8px;
}
.item__user__playCount-wrapper {
margin: 0;
margin-right: 3px;
}
.item__user__playCount-paragr i:before{
width: 21px;
height: 21px;
}
.item__info__watchBtn-container {
display: block;
}
.item__info__watchBtn {
width: 155px;
height: 40px;
margin: 0;
}
.item__container--top-sm {
padding-top: 20px;
}
}
@media (max-width: 768px) {
.item-container {
height: 95px;
}
.item__wrapper {
padding: 0px 5px;
padding-right: 35px;
}
.item__wrapper--menu-active {
padding-right: 35px;
}
.item__menu,
.item__menu__hidden__menu{
width: 35px;
}
.item__box {
padding-left: 95px;
padding-right: 0px;
}
.item__container {
height: 100%;
position: unset;
padding-left: 0px;
padding-right: 5px;
}
.item__container--top-lg {
padding-top: 18px;
}
.col-xs-3.item__container--top-lg {
padding-top: 12px;
}
.item__user__info__container{
position: absolute;
bottom: 5px;
left: 0;
right: 0;
padding-left: 100px;
text-align: left;
}
.item__user__name {
font-size: 16px;
}
.item__info__text,
.item__user__playCount-paragr {
font-size: 14px;
vertical-align: middle;
}
.item__user__playCount-paragr i{
width: 20px;
height: 20px;
vertical-align: middle;
}
.item__user__playCount-wrapper i:before {
width: 20px;
height: 20px;
font-size: 20px;
}
.item__user__playCount-paragr span{
vertical-align: middle;
}
.item__user__title {
font-size: 14px;
}
.item__avatar__container {
width: 80px;
height: 80px;
}
.item__info__iconText--clock img{
width: 17px;
height: 17px;
vertical-align: text-bottom;
}
.item__info__qBtn {
width: 70px;
height: 70px;
}
.item__info__qBtn-text{
top: 47%;
font-size: 14px;
}
.item__info__watchBtn__spinner {
right: 40%;
top: 35%;
font-size: 12px;
}
.item__info__iconText {
width: 100%;
padding-left: 0px;
}
.item__info__iconText:nth-child(2) {
margin-top: 0px;
padding-left: 0px;
}
.item__info__watchBtn {
width: 115px;
}
.item__menu {
right: 0px;
}
.item__menu__more-options-btn {
right: 30%;
font-size: 35px;
}
}
@media (max-width: 470px) {
.col-xs-3.item__container--top-lg {
padding-top: 14px;
}
.item__box {
padding-left: 80px;
}
.item__container:nth-child(1) {
width: 66.66666667%;
}
.item__container:nth-child(2) {
width: 33.33333333%;
}
.item__user__name {
font-size: 16px;
font-weight: 450;
}
.information_text {
margin-bottom: 10px;
font-size: 16px;
}
.information_text_btn {
top: 2px;
font-size: 12px;
}
.information_text--space-top {
margin-top: 20px;
}
.item__info__icon {
width: 18px;
height: 18px;
}
.item__avatar__container {
width: 70px;
height: 70px;
}
.item__user__title {
font-size: 14px;
}
.item__info__text,
.item__user__playCount-paragr {
font-size: 13px;
vertical-align: middle;
}
.item__user__playCount-paragr i{
width: 18px;
height: 20px;
}
.item__user__playCount-wrapper i:before {
font-size: 19px;
}
.item__user__info__container {
padding-left: 85px;
}
.item__info__qBtn {
width: 65px;
height: 65px;
}
.item__info__qBtn-text {
font-size: 12px;
font-weight: 400;
}
.item__info__watchBtn__spinner {
right: 40%;
top: 36%;
font-size: 10px;
}
.item__info__iconText {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.item__info__watchBtn-container {
margin-top: 0px;
}
.item__info__watchBtn {
width: 100px;
font-size: 16px;
}
.item__info__iconText--clock img{
width: 16px;
height: 16px;
}
.item__menu {
right: 0px;
}
.item__menu__more-options-btn {
right: 30%;
}
}
@media (max-width: 370px) {
.item-container {
height: 85px;
}
.item__container {
padding-right: 0px;
}
.item__wrapper {
padding-right: 30px;
}
.item__box {
padding-left: 75px;
}
.item__menu, .item__menu__hidden__menu {
width: 30px;
}
.item__user__info__container {
bottom: 2px;
padding-left: 70px;
}
.item__info__qBtn-text {
font-size: 11px;
font-weight: 400;
}
.item__avatar__container {
width: 60px;
height: 60px;
}
.item__container--top-lg {
padding-top: 10px;
}
.col-xs-3.item__container--top-lg {
padding-top: 19px;
}
.item__info__qBtn {
width: 54px;
height: 48px;
}
.item__info__text,
.item__user__playCount-paragr {
font-size: 12px;
}
.item__info__tab i {
font-size: 22px;
}
.item__user__name {
font-size: 15px;
}
.item__user__title {
font-size: 13px;
}
.item__info__tab .item__info__icon {
background-size: 21px;
}
}
</style>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen">
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<div class="profile-user">
<div class="row-fluid">
<div class="span6">
<div class="pull-left">
<div class='col-sm-6 col-xs-6 col-md-6 col-lg-6' style = "width: 100%;">
<img class="img-responsive" alt="" src="{{ searchedUser.profileImage }}" />
</div>
</div>
</div>
<div class="span6" >
<div class="profileInfo__userInfo">
<h2 class="profileInfo__userInfo-username">{{ searchedUser.username }}</h2>
</div>
<div class="profileInfo__info-container">
<ul class="row profileInfo__info-list ">
<li class="col-xs-6 profileInfo__info-item"><strong>{{ searchedUser.followers }}</strong> Followers</li>
<li class="col-xs-6 profileInfo__info-item"><strong>{{ searchedUser.following }}</strong> Following</li>
</ul>
<div class="profileInfo__settings-container">
<div class="profileInfo__settings-box" ng-if="$ctrl.isLoggedInUser">
<a class="btn-style profileInfo__settings-editProfile" ui-sref="settings/editprofile" style="
height: 30px;
border-radius: 15px;
border-style: none;
color: white;
font-size: 18px;
font-weight: 700;">Edit Profile</a>
<a class="profileInfo__settings-btn" ui-sref="settings" class="navIconColorOne"><img src="../../../assets/images/settings-icon.svg"></a>
</div>
<br>
<div class="round hollow text-center" style ="float: left; width: 112px;
height: 33px;
border-radius: 15px;
border-style: none;
padding-top: 6px;
color: white;
font-size: 18px;
font-weight: 700;
background: -webkit-linear-gradient(180deg,#040404,#000000);
background: -o-linear-gradient(180deg,#040404,#000000);
background: -moz-linear-gradient(180deg,#040404,#000000);
background-image: linear-gradient(180deg,#040404,#000000); ">
<a href="#" id="addClass">Message</a>
</div>
<div class="followBtn-container" >
<!--ng-if="!$ctrl.isLoggedInUser && $ctrl.showFollowBtn"-->
<button class="followBtn" ng-if="!following" ng-click="$ctrl.isFollowing(searchedUser)">Follow</button>
<button class="followBtn followBtn--unfollow" ng-if="following" ng-click="$ctrl.isFollowing(searchedUser)">Unfollow</button>
</div>
</div>
</div>
<br> <br>
<p class="profileInfo__userInfo-links" >
<a ng-if="searchedUser.facebookId" href="https://www.facebook.com/{{ searchedUser.facebookId }}" class="user__link icon--facebook" target="_blank" style = " background-image: none; background-color: white; width: 50px;
height: 50px;"> </a>
<a ng-if="searchedUser.instagramId" href="https://www.facebook.com/{{ searchedUser.instagramId }}" class="user__link icon--instagram" target="_blank" style = " background-image: none; background-color: white; width: 50px;
height: 50px;"></a>
<a ng-if="searchedUser.twitterId" href="https://www.facebook.com/{{ searchedUser.twitterId }}" class="user__link icon--twitter" target="_blank" style = " background-image: none; background-color: white; width: 50px;
height: 50px;"></a>
<a ng-if="searchedUser.website" href="https://www.facebook.com/{{ searchedUser.website }}" class="user__link icon--wishlist" target="_blank" style = " background-image: none; background-color: white; width: 50px;
height: 50px;"></a>
<a ng-if="searchedUser.snapchatId" href="https://www.facebook.com/{{ searchedUser.snapchatId }}" class="user__link icon--snap" target="_blank" style = " background-image: none; background-color: white; width: 50px;
height: 50px;"></a>
<a ng-if="searchedUser.youtubeId" href="https://www.facebook.com/{{ searchedUser.youtubeId }}" class="user__link icon--youtube" target="_blank" style = " background-image: none; background-color: white; width: 50px;
height: 50px;"></a>
</p>
<p class = "bio"> <strong>
<p class="profileInfo__userInfo-description">{{ searchedUser.description }}</p>
</strong> </p>
</div>
</div>
</div>
<div class="feed-photos">
<div class="row-fluid">
<div class="span12">
<ul class="thumbnails user-media-thumbnails">
<li class="span2">
<img class="img-responsive" alt="" src="{{ searchedUser.profileImage }}" />
<div class='text-right'>
</div> <!-- text-right / end -->
</li>
<li class="span2">
<img class="img-responsive" alt="" src="{{ searchedUser.profileImage }}" />
<div class='text-right'>
</div> <!-- text-right / end -->
</li>
<li class="span2">
<img class="img-responsive" alt="" src="{{ searchedUser.profileImage }}" />
<div class='text-right'>
</div> <!-- text-right / end -->
</li>
<li class="span2">
<img class="img-responsive" alt="" src="{{ searchedUser.profileImage }}" />
<div class='text-right'>
</div> <!-- text-right / end -->
</li>
</ul>
</div>
<div class="items-container">
<div class="row items__btn-section" style =" margin-left: 0 !important;">
<button ng-click="$ctrl.sectionType='myStories'" ng-class="{'active': $ctrl.sectionType=='myStories'}" class="col-xs-4 items__btn-section__tabs"><strong>{{ $ctrl.isLoggedInUser ? 'My stories' : 'Published Stories' }}</strong></button><!--
--><button ng-click="$ctrl.sectionType='24hPurchase'" ng-class="{'active': $ctrl.sectionType=='24hPurchase'}" class="col-xs-4 items__btn-section__tabs"><strong>24h Purchases</strong></button><!--
--><button ng-click="$ctrl.sectionType='archived'" ng-class="{'active': $ctrl.sectionType=='archived'}" class="col-xs-4 items__btn-section__tabs"><strong>Archived</strong></button>
</div>
<div>
<div ng-switch="$ctrl.sectionType">
<!-- Section: 24h Purchases -->
<div ng-switch-when="24hPurchase">
<div ng-repeat="message in purchased.purchasedMessages" class="message">
<user-info
user-info="message"
user-info-type="'message'"
section="'24hPurchase'"
get-item-info="
$ctrl.itemId = $event.itemId;
$ctrl.section = $event.section;">
</user-info>
</div>
<div ng-repeat="story in purchased.purchasedStories" class="story">
<user-info
user-info="story"
user-info-type="'story'"
section="'24hPurchase'"
get-item-info="
$ctrl.itemId = $event.itemId;
$ctrl.section = $event.section;">
</user-info>
</div>
<div ng-if="$ctrl.showSpinner.purchased" class="items__spinner">
<div class="fa fa-spinner fa-spin"></div>
</div>
<div ng-if="!$ctrl.showSpinner.purchased && ( purchased.purchasedStories.length == 0 && purchased.purchasedMessages.length == 0 )" class="message__box message__box--grey">
<div class="user-live__no-items message__box__info">
<p> No recent purchased stories to display. </p>
</div>
</div>
</div>
<!-- Section: Archived -->
<div ng-switch-when="archived">
<div ng-repeat="message in archived.archivedMessages" class="message">
<user-info
user-info="message"
user-info-type="'message'"
section="'archived'"
get-item-info="
$ctrl.itemId = $event.itemId;
$ctrl.section = $event.section;">
</user-info>
</div>
<div ng-repeat="story in archived.archivedStories" class="story">
<user-info
user-info="story"
user-info-type="'story'"
section="'archived'"
get-item-info="
$ctrl.itemId = $event.itemId;
$ctrl.section = $event.section;">
</user-info>
</div>
<div ng-if="$ctrl.showSpinner.archived" class="items__spinner">
<div class="fa fa-spinner fa-spin"></div>
</div>
<div ng-if="!$ctrl.showSpinner.archived && ( archived.archivedMessages.length == 0 && archived.archivedStories.length == 0 )" class="message__box message__box--grey">
<div class="user-live__no-items message__box__info">
<p> No recent archives to display. </p>
{{!$ctrl.showSpinner.archived}} {{archived.archivedMessages.length == 0}} {{ archived.archivedStories.length == 0 }}
</div>
</div>
</div>
<!-- Section: MyStories / Published Stories -->
<div ng-switch-default>
<div ng-repeat="story in userOwnStories" class="story">
<user-info
user-info="story"
user-info-type="'story'"
section="'ownStories'"
get-item-info="
$ctrl.itemId = $event.itemId;
$ctrl.section = $event.section;
$ctrl.itemPrice = $event.itemPrice;
$ctrl.storyOrMessage = $event.storyOrMessage;
$ctrl.alreadyHaveIt = $event.alreadyHaveIt;">
</user-info>
</div>
<div ng-if="$ctrl.showSpinner.userOwnStories" class="items__spinner">
<div class="fa fa-spinner fa-spin"></div>
</div>
<div ng-if="!$ctrl.showSpinner.userOwnStories && userOwnStories.length == 0 " class="message__box message__box--grey">
<div class="user-live__no-items message__box__info">
<p> No stories to display. </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
//FANCYBOX
//https://github.com/fancyapps/fancyBox
$(".fancybox").fancybox({
openEffect: "none",
closeEffect: "none"
});
});
</script>
.profileInfo-container {
margin-top: 10px;
margin-bottom: 20px;
}
.username-container{
margin-bottom: 23px;
font-size: 26px;
}
.inline-container {
display: inline-block;
}
.profileInfo__avatar-img {
display: block;
width: 320px;
height: 426px;
margin: 0 auto;
border-radius: 0;
}
.profileInfo__avatar-container {
margin-right: 20px;
}
.profileInfo__info-container{
display: inline-block;
width: 250px;
margin-top: 28px;
vertical-align: top;
}
.profileInfo__info-list{
margin-bottom: 25px;
padding: 0px 15px;
color: #666666;
font-family: Roboto;
font-size: 18px;
font-weight: 400;
list-style: none;
text-align: center;
}
.profileInfo__info-item{
padding: 0px !important;
}
.profileInfo__info-item strong{
display: block;
color: #333333;
font-size: 20px;
font-weight: 600;
}
.profileInfo__settings-container{
position: relative;
}
.profileInfo__settings-box{
}
.profileInfo__settings-editProfile {
display: block;
width: 202.73 !important;
height: 30px;
padding: 5px 9px;
border-radius: 6px;
text-align: center;
font-size: 16px;
font-weight: 400;
}
.profileInfo__settings-btn{
position: absolute;
top: 3px;
right: -20px;
border-radius: 30px;
transform: translate(100% ,0%);
}
.profileInfo__settings-btn img{
width: 24px;
height: 24px;
}
.profileInfo__userInfo {
margin-top: 20px;
color: #333333;
font-family: Roboto;
font-size: 16px;
font-weight: 400;
}
.profileInfo__userInfo-username {
margin-bottom: 2px;
font-size: 18px;
font-weight: 500;
}
.profileInfo__userInfo-description {
margin-bottom: 18px;
}
.profileInfo__userInfo-links {
margin: 0px;
}
.items__btn-section {
margin: 0px;
}
.items__btn-section--small{
position: relative;
display: inline-block;
height: 52px;
padding: 0px 30px;
border-bottom: 2px solid #cccccc;
}
.items__btn-section--small .items__btn-section__tabs {
position: absolute;
top: 0;
left: 50%;
width: 100%;
max-width: 217px;
border: none;
margin-bottom: -5px;
transform: translate( -50%, 0%);
}
.items__btn-section__tabs {
height: 51px;
margin: 0px;
border: none;
border-bottom: 2px solid #cccccc;
color: #666666;
vertical-align: top;
transition: 0.3s all;
background: rgba(0,0,0,0);
}
.items__btn-section__tabs strong {
font-size: 18px;
font-weight: 500;
}
.items__btn-section__tabs.active {
height: 54px;
padding-top: 5px;
color: #000000;
border-bottom: 8px solid #000000;
}
.followBtn-container {
margin-left: 138px;
}
.followBtn {
width: 112px;
height: 33px;
border-radius: 15px;
border-style: none;
color: white;
font-size: 18px;
font-weight: 700;
background: #3D2E6B; /* Old Browsers */
background: -webkit-linear-gradient(180deg,#040404,#000000); /*Safari 5.1-6*/
background: -o-linear-gradient(180deg,#040404,#000000); /*Opera 11.1-12*/
background: -moz-linear-gradient(180deg,#040404,#000000); /*Fx 3.6-15*/
background-image: linear-gradient(180deg,#040404,#000000);/*Standard*/
}
.MessageBtn{
width: 112px;
height: 30px;
float: left;
border-radius: 15px;
border-style: none;
color: white;
font-size: 18px;
font-weight: 700;
background: #3D2E6B; /* Old Browsers */
background: -webkit-linear-gradient(180deg,#040404,#000000); /*Safari 5.1-6*/
background: -o-linear-gradient(180deg,#040404,#000000); /*Opera 11.1-12*/
background: -moz-linear-gradient(180deg,#040404,#000000); /*Fx 3.6-15*/
background-image: linear-gradient(180deg,#040404,#000000);/*Standard*/
}
.followBtn--unfollow {
color: #000000;
border: 1px solid #000;
background: none;
float: left;
}
.user-statement {
margin: 22px 70px 0px;
}
.user-loading {
text-align: center;
}
.user__link {
display: inline-block;
width: 38px;
height: 38px;
margin-right: 4px;
border: 2px solid #666666;
border-radius: 50%;
}
.user__link:before {
content: "";
display: inline-block;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: 33px;
}
.icon--facebook:before {
background-image: url(../../../assets/images/fb.png);
}
.icon--twitter:before {
background-image: url(../../../assets/images/tw.png);
}
.icon--instagram:before {
background-image: url(../../../assets/images/ins.png);
}
.icon--wishlist:before {
background-image: url(../../../assets/images/wish-list.png);
}
.icon--snap:before {
background-image: url(../../../assets/images/snap.png);
}
.icon--youtube:before {
background-image: url(../../../assets/images/youtube.png);
}
@media (max-width: 768px) {
.profileInfo__info-container {
width: 210px;
margin-top: 15px;
}
.profileInfo__avatar-container {
margin-right: 20px;
}
.profileInfo__avatar-img {
width: 120px;
height: 120px;
}
.profileInfo__info-list {
margin-bottom: 15px;
font-size: 16px;
}
.profileInfo__settings-editProfile {
padding-top: 10px;
font-size: 14px;
}
.profileInfo__userInfo {
font-size: 16px;
}
.profileInfo__userInfo-username {
font-size: 18px;
}
.items__btn-section__tabs {
font-size: 16px;
}
.items__btn-section__tabs strong {
font-size: 16px;
}
}
@media (max-width: 470px) {
.profileInfo-container {
margin-top: 0px;
margin-bottom: 0px;
}
.profileInfo__avatar-container, .profileInfo__info-container {
display: block;
margin: auto;
}
.profileInfo__avatar-img {
width: 105px;
height: 105px;
}
.profileInfo__userInfo {
margin-top: 20px;
padding-left: 10px;
font-size: 16px;
}
.profileInfo__userInfo-username {
font-size: 16px;
}
.profileInfo__userInfo-description {
font-size: 14px;
}
.profileInfo__settings-btn {
right: -5px;
}
.items__btn-section__tabs {
font-size: 14px;
padding-right: 2px;
padding-left: 2px;
}
.items__btn-section__tabs.active {
font-size: 16px;
}
.items__btn-section__tabs strong {
font-size: 14px;
}
.profileInfo__settings-editProfile {
height: 35px;
padding-top: 9px;
font-size: 14px;
}
.profileInfo__settings-btn img {
width: 30px;
height: 30px;
}
.profileInfo__info-list{
margin-top: 5px;
font-size: 14px;
}
.profileInfo__info-item strong {
font-size: 16px;
font-weight: 500;
}
.user__link {
width: 34px;
height: 34px;
}
.user__link:before {
background-size: 94%;
}
}
@media (max-width: 370px) {
.items__btn-section__tabs {
font-size: 12px;
padding-right: 2px;
padding-left: 2px;
}
.items__btn-section__tabs strong {
font-size: 12px;
font-weight: 500;
}
}
/*styling for the pop up message*/
