Merge pull request #3283 from pixelfed/staging

Staging
pull/3293/head
daniel 3 years ago committed by GitHub
commit bfe9df700e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -3,8 +3,8 @@
"/js/activity.js": "/js/activity.js?id=d14e608dd1ecac4d900cd639f2199b62",
"/js/components.js": "/js/components.js?id=8bbdcdcd1c285672e99003f724284cd8",
"/js/discover.js": "/js/discover.js?id=0c98508635d6adae9bf8f76c9f5c918c",
"/js/profile.js": "/js/profile.js?id=d398b46c39489d6d180ee2f6aef6f621",
"/js/status.js": "/js/status.js?id=1c78d43a9a9b4842af721a633e9ccb9e",
"/js/profile.js": "/js/profile.js?id=53a27fe393608594c2b1dd77854d57db",
"/js/status.js": "/js/status.js?id=4d3f8907603bca529a10ce49cd5cfbc5",
"/js/timeline.js": "/js/timeline.js?id=8d7aae4d042be737251be2bc68b23e57",
"/js/compose.js": "/js/compose.js?id=70c7dbaeb87bcc14c5be229090d1458f",
"/js/compose-classic.js": "/js/compose-classic.js?id=3a53d79b046932f24a1d89592c81a4b0",
@ -25,7 +25,7 @@
"/js/manifest.js": "/js/manifest.js?id=60a826abd2eab18dccd4cce8cc32d3e5",
"/js/home-chunk-uopy3w.js": "/js/home-chunk-uopy3w.js?id=5cb170f553a4f1b720922db0e7734884",
"/js/compose-chunk-uopy3w.js": "/js/compose-chunk-uopy3w.js?id=8b718d76fd61c2f2698f7d3e146b25ce",
"/js/post-chunk-uopy3w.js": "/js/post-chunk-uopy3w.js?id=6af5da13d250ded8f6727278687cc813",
"/js/post-chunk-uopy3w.js": "/js/post-chunk-uopy3w.js?id=ed195d5d84da8fb9b1894b5790ec78ac",
"/js/profile-chunk-uopy3w.js": "/js/profile-chunk-uopy3w.js?id=9c9846fcf050ded907c1dcde52ec1921",
"/js/dmym-chunk-uopy3w.js": "/js/dmym-chunk-uopy3w.js?id=32bed173e0e163cf912a9287f436960f",
"/js/dmyh-chunk-uopy3w.js": "/js/dmyh-chunk-uopy3w.js?id=b5dbfb2fd9adbeb12d4807aedc0b0e00",

@ -67,8 +67,37 @@
</select>
</div>
<div class="d-flex justify-content-between align-items-center pt-3">
<a class="text-primary font-weight-bold text-decoration-none" href="#" @click.prevent="showEditPhotosModal">Edit Photos</a>
<button type="button" class="btn btn-primary btn-sm py-1 font-weight-bold px-3 float-right" @click.prevent="updateCollection">Save</button>
<a
class="text-primary font-weight-bold text-decoration-none"
href="#"
@click.prevent="showEditPhotosModal">
Edit Photos
</a>
<div v-if="collection.published_at">
<button
type="button"
class="btn btn-primary btn-sm py-1 font-weight-bold px-3 float-right"
@click.prevent="updateCollection">
Save
</button>
</div>
<div v-else class="float-right">
<button
type="button"
class="btn btn-outline-primary btn-sm py-1 font-weight-bold px-3"
@click.prevent="publishCollection">
Publish
</button>
<button
type="button"
class="btn btn-primary btn-sm py-1 font-weight-bold px-3"
@click.prevent="updateCollection">
Save
</button>
</div>
</div>
</form>
</b-modal>
@ -161,6 +190,7 @@ export default {
data() {
return {
collection: {},
config: window.App.config,
loaded: false,
posts: [],
@ -179,14 +209,21 @@ export default {
},
beforeMount() {
this.fetchCurrentUser();
this.fetchItems();
this.fetchCollection();
},
mounted() {
},
methods: {
fetchCollection() {
axios.get('/api/local/collection/' + this.collectionId)
.then(res => {
this.collection = res.data;
this.fetchCurrentUser();
})
},
fetchCurrentUser() {
if(document.querySelectorAll('body')[0].classList.contains('loggedIn') == true) {
axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
@ -194,9 +231,13 @@ export default {
this.owner = this.currentUser.id == this.profileId;
window._sharedData.curUser = res.data;
window.App.util.navatar();
this.fetchItems();
});
} else {
this.fetchItems();
}
},
fetchItems() {
axios.get('/api/local/collection/items/' + this.collectionId)
.then(res => {
@ -296,6 +337,26 @@ export default {
}
},
publishCollection() {
if(this.owner == false) {
return;
}
let confirmed = window.confirm('Are you sure you want to publish this collection?');
if(confirmed) {
axios.post('/api/local/collection/' + this.collectionId + '/publish', {
title: this.title,
description: this.description,
visibility: this.visibility
})
.then(res => {
window.location.href = '/';
});
} else {
return;
}
},
updateCollection() {
this.$refs.editModal.hide();
axios.post('/api/local/collection/' + this.collectionId, {
@ -367,4 +428,4 @@ export default {
}
}
}
</script>
</script>

@ -61,7 +61,7 @@
</b-carousel-slide>
</b-carousel>
</div>
<div v-if="ids.length > 0 && media[carouselCursor].type == 'Image'" class="bg-dark align-items-center">
<div v-if="ids.length > 0 && media[carouselCursor].type == 'image'" class="bg-dark align-items-center">
<ul class="nav media-drawer-filters text-center">
<li class="nav-item">
<div class="p-1 pt-3">
@ -78,7 +78,7 @@
</ul>
</div>
</div>
<div v-if="ids.length > 0 && ['Image', 'Video'].indexOf(media[carouselCursor].type) != -1" class="bg-lighter p-2 row">
<div v-if="ids.length > 0 && ['image', 'video'].indexOf(media[carouselCursor].type) != -1" class="bg-lighter p-2 row">
<div v-if="media[carouselCursor].type == 'Image'" class="col-12">
<div class="form-group">
<input type="text" class="form-control" v-model="media[carouselCursor].alt" placeholder="Optional image description">
@ -516,4 +516,4 @@ export default {
}
}
}
</script>
</script>

@ -358,7 +358,7 @@
<img :class="'d-block img-fluid w-100 ' + [media[carouselCursor].filter_class?media[carouselCursor].filter_class:'']" :src="media[carouselCursor].url" :alt="media[carouselCursor].description" :title="media[carouselCursor].description">
</div>
<hr>
<div v-if="ids.length > 0 && media[carouselCursor].type == 'Image'" class="align-items-center px-2 pt-2">
<div v-if="ids.length > 0 && media[carouselCursor].type == 'image'" class="align-items-center px-2 pt-2">
<ul class="nav media-drawer-filters text-center">
<li class="nav-item">
<div class="p-1 pt-3">
@ -395,7 +395,7 @@
<li class="nav-item mx-md-4">&nbsp;</li>
</ul>
<hr>
<div v-if="ids.length > 0 && media[carouselCursor].type == 'Image'" class="align-items-center px-2 pt-2">
<div v-if="ids.length > 0 && media[carouselCursor].type == 'image'" class="align-items-center px-2 pt-2">
<ul class="nav media-drawer-filters text-center">
<li class="nav-item">
<div class="p-1 pt-3">

@ -283,178 +283,6 @@
</div>
</div>
<div v-if="layout == 'moment'" class="momentui">
<div class="bg-dark mt-md-n4">
<div class="container" style="max-width: 700px;">
<div class="postPresenterContainer d-none d-flex justify-content-center align-items-center bg-dark">
<div v-if="status.pf_type === 'photo'" class="w-100">
<photo-presenter :status="status" v-on:lightbox="lightbox" v-on:togglecw="status.sensitive = false"></photo-presenter>
</div>
<div v-else-if="status.pf_type === 'video'" class="w-100">
<video-presenter :status="status" v-on:togglecw="status.sensitive = false"></video-presenter>
</div>
<div v-else-if="status.pf_type === 'photo:album'" class="w-100">
<photo-album-presenter :status="status" v-on:lightbox="lightbox" v-on:togglecw="status.sensitive = false"></photo-album-presenter>
</div>
<div v-else-if="status.pf_type === 'video:album'" class="w-100">
<video-album-presenter :status="status" v-on:togglecw="status.sensitive = false"></video-album-presenter>
</div>
<div v-else-if="status.pf_type === 'photo:video:album'" class="w-100">
<mixed-album-presenter :status="status" v-on:lightbox="lightbox" v-on:togglecw="status.sensitive = false"></mixed-album-presenter>
</div>
<div v-else class="w-100">
<p class="text-center p-0 font-weight-bold text-white">Error: Problem rendering preview.</p>
</div>
</div>
</div>
</div>
<div class="bg-white">
<div class="container">
<div class="row pb-5">
<div class="col-12 col-md-8 py-4">
<div class="reactions d-flex align-items-center">
<div class="text-center mr-5">
<div v-bind:class="[reactions.liked ? 'fas fa-heart text-danger m-0 cursor-pointer' : 'far fa-heart m-0 like-btn cursor-pointer']" title="Like" v-on:click="likeStatus" style="font-size:1.575rem">
</div>
<div class="like-count font-weight-bold mt-2 rounded border" style="cursor:pointer;" v-on:click="likesModal">
{{ownerOrAdmin == true ? (status.liked_by.total_count + 1) : 0}}
</div>
</div>
<div class="text-center">
<div v-if="status.visibility == 'public'" v-bind:class="[reactions.shared ? 'h3 far fa-share-square m-0 text-primary cursor-pointer' : 'h3 far fa-share-square m-0 share-btn cursor-pointer']" title="Share" v-on:click="shareStatus">
</div>
<div class="share-count font-weight-bold mt-2 rounded border" v-if="status.visibility == 'public'" style="cursor:pointer;" v-on:click="sharesModal">{{status.reblogs_count || 0}}</div>
</div>
</div>
<div v-if="status.length && status.content_text.includes('#') || status.content_text.includes('https://') || status.content_text.includes('@') || status.content_text.length > 45" class="media align-items-center mt-3">
<div class="media-body">
<p class="lead mr-2" v-html="status.content">
</p>
<p class="lead mb-0">
by <a :href="statusProfileUrl">{{statusUsername}}</a>
<span v-if="relationship && profile && user && !relationship.following && profile.id != user.id">
<span class="px-1 text-lighter"></span>
<a class="font-weight-bold small" href="#">Follow</a>
</span>
</p>
</div>
<a :href="statusProfileUrl" :title="statusUsername"><img :src="statusAvatar" class="rounded-circle border mr-3" alt="avatar" width="72px" height="72px"></a>
</div>
<div v-else class="media align-items-center mt-3">
<div class="media-body">
<h2 class="font-weight-bold mr-2">
{{status.content_text.length ? status.content_text : 'Untitled Post'}}
</h2>
<p class="lead mb-0">
by <a :href="statusProfileUrl">{{statusUsername}}</a>
<!-- <span class="px-1 text-lighter"></span>
<a class="font-weight-bold small" href="#">Follow</a> -->
</p>
</div>
<a :href="statusProfileUrl" :title="statusUsername"><img :src="statusAvatar" class="rounded-circle border mr-3" alt="avatar" width="72px" height="72px"></a>
</div>
<hr>
<div>
<p class="lead">
<span v-if="status.place" class="text-truncate">
<i class="fas fa-map-marker-alt text-lighter mr-3"></i> {{status.place.name}}, {{status.place.country}}
</span>
<span v-once class="float-right">
<i class="far fa-clock text-lighter mr-3"></i> {{timeAgo(status.created_at)}} ago
</span>
</p>
<!-- <div class="">
<p class="lead">
<span class="mr-3"><i class="fas fa-camera text-lighter"></i></span>
<span>Nikon D850</span>
</p>
<p class="lead">
<span class="mr-3"><i class="fas fa-ruler-horizontal text-lighter"></i></span>
<span>200-500mm</span>
</p>
<p class="lead">
<span class="mr-3"><i class="fas fa-stream text-lighter"></i></span>
<span>500mm <span class="px-1"></span> ƒ/7.1 <span class="px-1"></span> 1/1600s <span class="px-1"></span> ISO 800</span>
</p>
</div> -->
<div v-if="status.tags" class="pt-4">
<p class="lead">
<a v-for="(tag, index) in status.tags" class="btn btn-outline-dark mr-1 mb-1" :href="tag.url + '?src=mp'">{{tag.name}}</a>
</p>
</div>
</div>
</div>
<div class="col-12 col-md-4 pt-4 pl-md-3">
<p class="lead font-weight-bold">Comments</p>
<div v-if="user != false" class="moment-comments">
<div class="form-group">
<textarea class="form-control" rows="3" placeholder="Add a comment ..." v-model="replyText"></textarea>
<p class="d-flex justify-content-between align-items-center mt-3">
<span class="small text-lighter font-weight-bold">
{{replyText.length}}/{{config.uploader.max_caption_length}}
</span>
<span v-if="replyText.length > 2">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" @click="!!replySensitive" v-model="replySensitive" id="sensitiveReply">
<label class="custom-control-label small font-weight-bold text-muted" style="padding-top: 3px" for="sensitiveReply">Add Content Warning</label>
</div>
</span>
<button class="btn btn-sm font-weight-bold btn-outline-primary py-1"
v-if="replyText.length > 2" @click="postReply">Post</button>
</p>
</div>
</div>
<div class="comment mt-4" style="max-height: 500px; overflow-y: auto;">
<div v-for="(reply, index) in results" :key="'tl' + reply.id + '_' + index" class="media mb-3 mt-2">
<a :href="reply.account.url" :title="reply.account.username"><img :src="reply.account.avatar" class="rounded-circle border mr-3" alt="avatar" width="32px" height="32px"></a>
<div class="media-body">
<div class="d-flex justify-content-between">
<span>
<a class="font-weight-bold text-dark" :href="reply.account.url">{{reply.account.username}}</a>
</span>
<span class="text-lighter">
<span v-if="reply.favourited" class="cursor-pointer mr-2" @click="likeReply(reply)">
<i class="fas fa-heart text-danger"></i>
</span>
<span v-else class="cursor-pointer mr-2" @click="likeReply(reply)">
<i class="far fa-heart"></i>
</span>
<span class="">
<post-menu :status="reply" :profile="user" :size="'sm'" :modal="'true'" class="d-inline-block px-2" v-on:deletePost="deleteComment(reply.id, index)"></post-menu>
</span>
</span>
</div>
<div v-if="reply.sensitive == true">
<span class="py-3">
<span class="text-break">
<span class="font-italic text-muted">This comment may contain sensitive material</span>
<span class="badge badge-primary cursor-pointer ml-2 py-1" @click="reply.sensitive = false;">Show</span>
</span>
</span>
</div>
<div v-else class="read-more" style="overflow-y: hidden;">
<p v-html="reply.content" class="mb-0">loading ...</p>
</div>
<p>
<span class="small">
<a class="text-lighter text-decoration-none" :href="reply.url">{{timeAgo(reply.created_at)}}</a>
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-if="layout == 'poll'" class="container px-0">
<div class="row justify-content-center">
<div class="col-12 col-md-6">
@ -833,19 +661,6 @@
}
</style>
<style type="text/css" scoped>
.momentui .bg-dark {
background: #000 !important;
}
.momentui .carousel.slide,
.momentui .carousel-item {
background: #000 !important;
}
.reply-btn[disabled] {
opacity: .3;
color: #3897f0;
}
</style>
<script>
import VueTribute from 'vue-tribute';
@ -1042,11 +857,6 @@ export default {
}
this.loaded = true;
if(this.profileRecent !== false) {
setTimeout(function() {
self.fetchProfilePosts();
}, 3000);
}
setTimeout(function() {
self.fetchState();
document.querySelectorAll('.status-comment .postCommentsContainer .comment-body a').forEach(function(i, e) {

@ -1,12 +1,5 @@
<template>
<div class="w-100 h-100">
<div v-if="owner && layout == 'moment'">
<div class="bg-primary shadow">
<p class="text-center text-white mb-0 py-3 font-weight-bold border-bottom border-info">
<i class="fas fa-exclamation-triangle fa-lg mr-2"></i> The Moment UI layout has been deprecated and will be removed in a future release.
</p>
</div>
</div>
<div v-if="isMobile" class="bg-white p-3 border-bottom">
<div class="d-flex justify-content-between align-items-center">
<div @click="goBack" class="cursor-pointer">
@ -328,97 +321,6 @@
</div>
</div>
</div>
<div v-if="layout == 'moment'" class="mt-3">
<div :class="momentBackground()" style="width:100%;min-height:274px;">
</div>
<div class="bg-white border-bottom">
<div class="container">
<div class="row">
<div class="col-12 row mx-0">
<div class="col-4 text-left mt-2">
<span v-if="relationship && relationship.followed_by">
<span class="bg-light border border-secondary font-weight-bold small py-1 px-2 text-muted rounded">FOLLOWS YOU</span>
</span>
<span v-if="profile.is_admin">
<span class="bg-light border border-danger font-weight-bold small py-1 px-2 text-danger rounded">ADMIN</span>
</span>
</div>
<div class="col-4 text-center">
<div class="d-block d-md-none">
<img class="rounded-circle box-shadow" :src="profile.avatar" width="110px" height="110px" style="margin-top:-60px; border: 5px solid #fff">
</div>
<div class="d-none d-md-block">
<img class="rounded-circle box-shadow" :src="profile.avatar" width="172px" height="172px" style="margin-top:-90px; border: 5px solid #fff">
</div>
</div>
<div class="col-4 text-right mt-2">
<span class="d-none d-md-inline-block pl-4">
<a :href="'/users/'+profile.username+'.atom'" class="fas fa-rss fa-lg text-muted text-decoration-none"></a>
</span>
<span class="pl-md-4 pl-sm-2" v-if="owner">
<a class="fas fa-cog fa-lg text-muted text-decoration-none" href="/settings/home"></a>
</span>
<span class="pl-md-4 pl-sm-2" v-if="profile.id != user.id && user.hasOwnProperty('id')">
<a class="fas fa-cog fa-lg text-muted text-decoration-none" href="#" @click.prevent="visitorMenu"></a>
</span>
<span v-if="profile.id != user.id && user.hasOwnProperty('id')">
<span class="pl-md-4 pl-sm-2" v-if="relationship.following == true">
<button type="button" class="btn btn-outline-secondary font-weight-bold btn-sm" @click.prevent="followProfile()">Unfollow</button>
</span>
<span class="pl-md-4 pl-sm-2" v-else>
<button type="button" class="btn btn-primary font-weight-bold btn-sm" @click.prevent="followProfile()">Follow</button>
</span>
</span>
</div>
</div>
<div class="col-12 text-center">
<div class="profile-details my-3">
<p class="font-weight-ultralight h2 text-center">{{profile.username}}</p>
<div v-if="profile.note" class="text-center text-muted p-3" v-html="profile.note"></div>
<div class="pb-3 text-muted text-center">
<a class="text-lighter" :href="profile.url">
<span class="font-weight-bold">{{formatCount(profile.statuses_count)}}</span>
Posts
</a>
<a v-if="profileSettings.followers.count" class="text-lighter cursor-pointer px-3" v-on:click="followersModal()">
<span class="font-weight-bold">{{formatCount(profile.followers_count)}}</span>
Followers
</a>
<a v-if="profileSettings.following.count" class="text-lighter cursor-pointer" v-on:click="followingModal()">
<span class="font-weight-bold">{{formatCount(profile.following_count)}}</span>
Following
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="profile-timeline mt-md-4">
<div class="" v-if="mode == 'grid'">
<masonry
:cols="{default: 3, 700: 2, 400: 1}"
:gutter="{default: '5px'}"
>
<div class="p-1" v-for="(s, index) in timeline">
<a :class="[s.sensitive ? 'card info-overlay card-md-border-0' : s.media_attachments[0].filter_class + ' card info-overlay card-md-border-0']" :href="statusUrl(s)">
<img :src="previewUrl(s)" class="img-fluid w-100">
</a>
</div>
</masonry>
</div>
<div v-if="timeline.length">
<infinite-loading @infinite="infiniteTimeline">
<div slot="no-more"></div>
<div slot="no-results"></div>
</infinite-loading>
</div>
</div>
</div>
</div>
</div>
<b-modal
@ -750,15 +652,7 @@
beforeMount() {
this.fetchProfile();
let u = new URLSearchParams(window.location.search);
let forceMetro = localStorage.getItem('pf_metro_ui.exp.forceMetro') == 'true';
if(u.has('ui') && u.get('ui') == 'moment' && this.layout != 'moment') {
this.layout = 'moment';
}
if(forceMetro == true || u.has('ui') && u.get('ui') == 'metro' && this.layout != 'metro') {
this.layout = 'metro';
}
this.layout = 'metro';
if(this.layout == 'metro' && u.has('t')) {
if(this.modes.indexOf(u.get('t')) != -1) {

@ -14,11 +14,11 @@
>
<b-carousel-slide v-for="(media, index) in status.media_attachments" :key="media.id + '-media'">
<video v-if="media.type == 'Video'" slot="img" class="embed-responsive-item" preload="none" controls playsinline loop :alt="media.description" width="100%" height="100%" :poster="media.preview_url">
<video v-if="media.type == 'video'" slot="img" class="embed-responsive-item" preload="none" controls playsinline loop :alt="media.description" width="100%" height="100%" :poster="media.preview_url">
<source :src="media.url" :type="media.mime">
</video>
<div v-else-if="media.type == 'Image'" slot="img" :title="media.description">
<div v-else-if="media.type == 'image'" slot="img" :title="media.description">
<img :class="media.filter_class + ' d-block img-fluid w-100'" :src="media.url" :alt="media.description" loading="lazy" onerror="this.onerror=null;this.src='/storage/no-preview.png'">
</div>
@ -53,11 +53,11 @@
<carousel ref="carousel" :centerMode="true" :loop="false" :per-page="1" :paginationPosition="'bottom-overlay'" paginationActiveColor="#3897f0" paginationColor="#dbdbdb" class="p-0 m-0">
<slide v-for="(media, index) in status.media_attachments" :key="'px-carousel-'+media.id + '-' + index" class="w-100 h-100 d-block mx-auto text-center" style="background: #000; display: flex;align-items: center;">
<video v-if="media.type == 'Video'" class="embed-responsive-item" preload="none" controls loop :title="media.description" width="100%" height="100%" :poster="media.preview_url">
<video v-if="media.type == 'video'" class="embed-responsive-item" preload="none" controls loop :title="media.description" width="100%" height="100%" :poster="media.preview_url">
<source :src="media.url" :type="media.mime">
</video>
<div v-else-if="media.type == 'Image'" :title="media.description">
<div v-else-if="media.type == 'image'" :title="media.description">
<img :class="media.filter_class + ' img-fluid w-100'" :src="media.url" :alt="media.description" loading="lazy" onerror="this.onerror=null;this.src='/storage/no-preview.png'">
</div>

@ -20,7 +20,8 @@ $custom-control-description-disabled-color: #868e96;
$white: white;
$theme-colors: (
'primary': #2c78bf,
'muted' : #697179
'muted' : #697179,
'dark' : #212529
);
$card-cap-bg: $white;

@ -23,4 +23,7 @@
@import "moment";
@import '~animate.css/animate.min.css';
@import 'animate.css';
@import "lib/placeholder-loading";

@ -1,647 +1,654 @@
html, body {
min-height:100vh;
min-height:100vh;
}
body {
display: flex;
flex-flow: column;
display: flex;
flex-flow: column;
}
#content {
margin-bottom: auto !important;
margin-bottom: auto !important;
}
body, button, input, textarea {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",
Roboto,Helvetica,Arial,sans-serif;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.navbar-laravel {
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
.bg-pixelfed {
background:#10c5f8;
background:-webkit-gradient(linear,left top,right bottom,from(#6736dd),to(#10c5f8));
background:linear-gradient(to bottom right,#6736dd,#10c5f8);
background:#10c5f8;
background:-webkit-gradient(linear,left top,right bottom,from(#6736dd),to(#10c5f8));
background:linear-gradient(to bottom right,#6736dd,#10c5f8);
}
@media (min-width: 1200px) {
.container {
max-width: 935px;
}
.container {
max-width: 935px;
}
}
.text-dark {
color: #212529 !important;
color: #212529 !important;
}
.settings-nav .active .nav-link{
font-weight: bold;
font-weight: bold;
}
.card-disabled {
background-color: rgba(245, 245, 245, 1);
opacity: .4;
background-color: rgba(245, 245, 245, 1);
opacity: .4;
}
.card-img-top {
height: auto;
height: auto;
}
.card.status-container .status-photo {
margin: auto !important;
margin: auto !important;
}
@media (min-width: map-get($grid-breakpoints, "md")) {
.card.status-container .status-comments {
overflow-y:scroll;
border-bottom:1px solid rgba(0,0,0,.1);
height: 200px;
}
.card.status-container .status-comments {
overflow-y:scroll;
border-bottom:1px solid rgba(0,0,0,.1);
height: 200px;
}
}
.no-caret.dropdown-toggle {
text-decoration: none !important;
text-decoration: none !important;
}
.no-caret.dropdown-toggle::after {
display:none;
display:none;
}
.notification-page .profile-link {
color: #212529;
font-weight: bold;
color: #212529;
font-weight: bold;
}
.notification-page .list-group-item:first-child {
border-top: none;
border-top: none;
}
.nav-topbar {
border-top: 1px solid $gray-300;
border-top: 1px solid $gray-300;
}
.nav-topbar .nav-item {
margin: -1px 1.5rem 0;
margin: -1px 1.5rem 0;
}
.nav-topbar .nav-link {
border: 1px solid transparent;
color: $gray-300;
padding: 0.75rem 0;
border: 1px solid transparent;
color: $gray-300;
padding: 0.75rem 0;
}
.nav-topbar .nav-link:focus, .nav-topbar .nav-link:hover {
border-top-color: $gray-300;
border-top-color: $gray-300;
}
.nav-topbar .nav-link.disabled {
color: $gray-300;
background-color: transparent;
border-color: transparent;
color: $gray-300;
background-color: transparent;
border-color: transparent;
}
.nav-topbar .nav-item.show .nav-link, .nav-topbar .nav-link.active {
color: $gray-600;
border-top-color: $gray-600;
color: $gray-600;
border-top-color: $gray-600;
}
.nav-topbar .dropdown-menu {
margin-top:-1px;
margin-top:-1px;
}
.info-overlay {
position: relative;
position: relative;
}
.info-overlay .info-overlay-text {
display: none;
position: absolute;
display: none;
position: absolute;
}
.info-overlay:hover .info-overlay-text {
display: flex;
display: flex;
}
@media (max-width: map-get($grid-breakpoints, "sm")) {
.info-overlay:hover .info-overlay-text h5 {
font-size: 12px;
}
.info-overlay:hover .info-overlay-text h5 {
font-size: 12px;
}
}
.info-overlay-text {
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
.info-overlay-text-label {
display: flex;
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: flex;
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
h5 {
z-index: 2;
}
h5 {
z-index: 2;
}
}
.info-overlay:hover .info-overlay-text-label {
display: none;
display: none;
}
.font-weight-lighter {
font-weight: 300 !important
font-weight: 300 !important
}
.font-weight-ultralight {
font-weight: 200 !important;
font-weight: 200 !important;
}
.square {
position: relative;
width: 100%;
position: relative;
width: 100%;
}
.square::after {
content: "";
display: block;
padding-bottom: 100%;
content: "";
display: block;
padding-bottom: 100%;
}
.square-content {
position: absolute;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
position: absolute;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
}
@media (max-width: map-get($grid-breakpoints, "md")) {
.border-md-left-0 {
border-left:0!important
border-left:0!important
}
}
@media (max-width: map-get($grid-breakpoints, "md")) {
.border-md-left-0 {
border-left:0!important
}
.card.status-container .status-comments {
border-top:1px solid rgba(0,0,0,.1);
}
.sticky-md-bottom {
position:-webkit-sticky;
position:sticky;
bottom:0;
z-index:1020
}
.border-md-left-0 {
border-left:0!important
}
.card.status-container .status-comments {
border-top:1px solid rgba(0,0,0,.1);
}
.sticky-md-bottom {
position:-webkit-sticky;
position:sticky;
bottom:0;
z-index:1020
}
}
@media (max-width: map-get($grid-breakpoints, "sm")) {
.card-md-border-0 {
border-width: 0!important;
border-radius: 0!important;
}
.card-md-rounded-0 {
border-width: 1px 0;
border-radius:0 !important;
}
.card-md-border-0 {
border-width: 0!important;
border-radius: 0!important;
}
.card-md-rounded-0 {
border-width: 1px 0;
border-radius:0 !important;
}
}
@keyframes loading-bar {
from { background-position: 0 0; }
to { background-position: 100vw 0; }
from { background-position: 0 0; }
to { background-position: 100vw 0; }
}
.loading-page {
background-image: linear-gradient(to right, #6736dd, #10c5f8, #10c5f8, #6736dd);
width: 100vw;
height: .25rem;
animation: loading-bar 3s linear infinite;
background-image: linear-gradient(to right, #6736dd, #10c5f8, #10c5f8, #6736dd);
width: 100vw;
height: .25rem;
animation: loading-bar 3s linear infinite;
}
.liked {
position: relative;
z-index: 1;
position: relative;
z-index: 1;
}
.liked::after {
content: "\F0a3";
color: transparent;
animation: liking 1.5s;
position: absolute;
z-index: -1;
left: 50%;
top: 0;
content: "\F0a3";
color: transparent;
animation: liking 1.5s;
position: absolute;
z-index: -1;
left: 50%;
top: 0;
}
@keyframes liking {
0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
font-size:0;
top: .25rem;
color: #ebf70e;
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
font-size:0;
top: .25rem;
color: #ebf70e;
}
75% {
-webkit-transform:rotate(1turn);
transform:rotate(1turn);
top: -0.55rem;
font-size: 2.8rem;
opacity:1;
left: -0.55rem;
-webkit-transform:rotate(1turn);
transform:rotate(1turn);
top: -0.55rem;
font-size: 2.8rem;
opacity:1;
left: -0.55rem;
}
100% {
transform:rotate(1turn);
top: 2.5rem;
font-size:0;
left: 0.9rem
transform:rotate(1turn);
top: 2.5rem;
font-size:0;
left: 0.9rem
}
}
.max-hide-overflow {
max-height: 500px;
overflow-y: hidden;
max-height: 500px;
overflow-y: hidden;
}
@media (min-width: map-get($grid-breakpoints, "xs")) {
.max-hide-overflow {
max-height: 600px!important;
}
.max-hide-overflow {
max-height: 600px!important;
}
}
@media (min-width: map-get($grid-breakpoints, "md")) {
.max-hide-overflow {
max-height: 800px!important;
}
.max-hide-overflow {
max-height: 800px!important;
}
}
@media (min-width: map-get($grid-breakpoints, "xl")) {
.max-hide-overflow {
max-height: 1000px!important;
}
.max-hide-overflow {
max-height: 1000px!important;
}
}
.notification-image {
background-size: cover;
width: 32px;
height: 32px;
background-position: 50%;
background-size: cover;
width: 32px;
height: 32px;
background-position: 50%;
}
.status-photo img {
object-fit: contain;
width: 100%;
max-height: calc(100vh - (6rem));
object-fit: contain;
width: 100%;
max-height: calc(100vh - (6rem));
}
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-1.25em);
}
100% {
opacity: 1;
transform: translateY(0);
}
0% {
opacity: 0;
transform: translateY(-1.25em);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.details-animated[open] {
animation-name: fadeInDown;
animation-duration: 0.5s;
animation-name: fadeInDown;
animation-duration: 0.5s;
}
.card {
box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);
border: none;
box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);
border: none;
.comment-submit {
display: none;
position: absolute;
bottom: 12px;
right: 20px;
width: 60px;
text-align: center;
border-radius: 0 3px 3px 0;
}
.comment-submit {
display: none;
position: absolute;
bottom: 12px;
right: 20px;
width: 60px;
text-align: center;
border-radius: 0 3px 3px 0;
}
}
.touch .card {
input[name="comment"] {
padding-right: 70px;
}
input[name="comment"] {
padding-right: 70px;
}
.comment-submit {
display: block;
}
.comment-submit {
display: block;
}
}
.box-shadow {
box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);
box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);
}
.border-left-primary {
border-left: 3px solid $primary;
border-left: 3px solid $primary;
}
.settings-nav .nav-item.active .nav-link {
font-weight: bold !important;
font-weight: bold !important;
}
details summary::-webkit-details-marker {
display: none!important;
display: none!important;
}
.details-animated > summary {
display: flex;
flex-flow: column;
justify-content: center;
background-color: #ECF0F1;
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
display: flex;
flex-flow: column;
justify-content: center;
background-color: #ECF0F1;
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
}
@media (min-width: 720px) {
.details-animated > summary {
min-height: 600px;
}
.details-animated > summary {
min-height: 600px;
}
}
.details-animated[open] > summary {
display: none!important;
display: none!important;
}
.profile-avatar img {
object-fit: cover;
object-fit: cover;
}
.tt-menu {
padding: 0 !important;
border-radius: 0 0 0.25rem 0.25rem !important;
padding: 0 !important;
border-radius: 0 0 0.25rem 0.25rem !important;
}
.tt-dataset .alert {
border: 0 !important;
border-radius: 0 !important;
border: 0 !important;
border-radius: 0 !important;
}
.input-elevated {
font-size: 16px;
line-height: 1.5;
border: none;
background: #FFFFFF;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
border-radius: 5px;
padding: .5em 1em .5em .5em;
font-size: 16px;
line-height: 1.5;
border: none;
background: #FFFFFF;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
border-radius: 5px;
padding: .5em 1em .5em .5em;
}
.input-elevated::placeholder {
color: #838D99;
color: #838D99;
}
.input-elevated:focus {
outline: none;
box-shadow: 0 4px 10px 0 rgba(0,0,0,0.16);
outline: none;
box-shadow: 0 4px 10px 0 rgba(0,0,0,0.16);
}
.icon-wrapper {
display: inline-flex;
padding: 14px;
border-radius: 50%;
background: #10c5f8;
background: -webkit-gradient(linear,left top,right bottom,from(#6736dd),to(#10c5f8));
background: linear-gradient(to bottom right,#6736dd,#10c5f8);
display: inline-flex;
padding: 14px;
border-radius: 50%;
background: #10c5f8;
background: -webkit-gradient(linear,left top,right bottom,from(#6736dd),to(#10c5f8));
background: linear-gradient(to bottom right,#6736dd,#10c5f8);
}
.border-left-blue {
border-left: 3px solid #10c5f8;
border-left: 3px solid #10c5f8;
}
.b-dropdown {
padding:0 !important;
padding:0 !important;
}
.b-dropdown > button {
padding:0 !important;
padding:0 !important;
}
.lds-ring {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
display: inline-block;
position: relative;
width: 64px;
height: 64px;
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 51px;
height: 51px;
margin: 6px;
border: 6px solid #6c757d;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #6c757d transparent transparent transparent;
box-sizing: border-box;
display: block;
position: absolute;
width: 51px;
height: 51px;
margin: 6px;
border: 6px solid #6c757d;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #6c757d transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
animation-delay: -0.15s;
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.navbar .nav-notification.dropdown-toggle::after {
display: none;
display: none;
}
.navbar .dropdown .nav-notification-dropdown {
width:500px;
max-height: 300px;
overflow-y: scroll;
padding-top: 0;
padding-bottom: 0;
width:500px;
max-height: 300px;
overflow-y: scroll;
padding-top: 0;
padding-bottom: 0;
}
.nav-notification-dropdown .loader {
padding-top: 5rem;
padding-bottom: 5rem;
padding-top: 5rem;
padding-bottom: 5rem;
}
.timeline-sidenav.nav-pills .nav-link {
color: #6c757d;
color: #6c757d;
}
.timeline-sidenav.nav-pills .nav-link:hover {
background: rgba(0,0,0,0.04);
background: rgba(0,0,0,0.04);
}
.timeline-sidenav.nav-pills .nav-link.active,
.timeline-sidenav.nav-pills .show > .nav-link {
color: #08d;
background: transparent;
border: 1px solid #08d;
color: #08d;
background: transparent;
border: 1px solid #08d;
}
.messages-page .bg-primary.text-white a {
color: #fff;
color: #fff;
}
.notification-tooltip .tooltip-inner {
font-weight: bold;
font-weight: bold;
}
#previewAvatar {
img {
max-width: 100%;
height: auto;
}
img {
max-width: 100%;
height: auto;
}
}
.img-thumbnail {
box-sizing: content-box;
box-sizing: content-box;
}
.media-drawer-filters img {
object-fit: contain;
object-fit: contain;
}
.reply-container {
.post-thumbnail {
object-fit: cover;
}
.post-thumbnail {
object-fit: cover;
}
}
#l-modal .modal-body,
#s-modal .modal-body {
height: 60vh;
overflow-y: scroll;
height: 60vh;
overflow-y: scroll;
}
#l-modal .modal-content,
#s-modal .modal-content {
border-radius: 0;
border-radius: 0;
}
.text-lighter {
color:#B8C2CC !important;
color:#B8C2CC !important;
}
.btn-outline-lighter {
color: #B8C2CC !important;
border-color: #B8C2CC !important;
color: #B8C2CC !important;
border-color: #B8C2CC !important;
}
.cursor-pointer {
cursor: pointer;
cursor: pointer;
}
.tooltip-notification .tooltip-inner {
max-width: 200px;
padding: 3px 8px;
color: #fff;
text-align: center;
/*background-color: #dc3545;*/
border-radius: .25rem;
max-width: 200px;
padding: 3px 8px;
color: #fff;
text-align: center;
/*background-color: #dc3545;*/
border-radius: .25rem;
}
.tooltip-notification .tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {
/*border-top-color: #dc3545; */
/*border-top-color: #dc3545; */
}
.carousel-control-prev-icon, .carousel-control-next-icon {
filter: drop-shadow(0px 0px 1px black);
filter: drop-shadow(0px 0px 1px black);
}
.VueCarousel:focus,
.VueCarousel-navigation-button:focus,
.VueCarousel-dot:focus,
.VueCarousel-dot--active:focus {
outline: 0px !important;
outline: 0px !important;
}
.status-content > p:first-child {
display: inline;
display: inline;
}
.follow-modal {
max-width: 400px !important;
max-width: 400px !important;
}
.square-content {
img {
object-fit: cover !important;
}
img {
object-fit: cover !important;
}
}
.square .square-content {
canvas {
width: 100%;
height: 100%;
}
canvas {
width: 100%;
height: 100%;
}
}
.tribute-container {
position: absolute;
top: 0;
left: 0;
height: auto;
max-height: 300px;
min-width: 120px;
max-width: 500px;
overflow: auto;
display: block;
z-index: 999999;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(#000, 0.13);
ul {
margin: 0;
margin-top: 2px;
padding: 0;
list-style: none;
background: #fff;
border-radius: 4px;
border: 1px solid rgba(#000, 0.13);
background-clip: padding-box;
overflow: hidden;
}
li {
color: #000;
padding: 5px 15px;
cursor: pointer;
font-size: 14px;
overflow-x: hidden !important;
&.highlight,
&:hover {
background: #2c78bf;
color: #fff;
}
&.no-match {
cursor: default;
}
}
.menu-highlighted {
font-weight: bold;
}
position: absolute;
top: 0;
left: 0;
height: auto;
max-height: 300px;
min-width: 120px;
max-width: 500px;
overflow: auto;
display: block;
z-index: 999999;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(#000, 0.13);
ul {
margin: 0;
margin-top: 2px;
padding: 0;
list-style: none;
background: #fff;
border-radius: 4px;
border: 1px solid rgba(#000, 0.13);
background-clip: padding-box;
overflow: hidden;
}
li {
color: #000;
padding: 5px 15px;
cursor: pointer;
font-size: 14px;
overflow-x: hidden !important;
&.highlight,
&:hover {
background: #2c78bf;
color: #fff;
}
&.no-match {
cursor: default;
}
}
.menu-highlighted {
font-weight: bold;
}
}

@ -0,0 +1,108 @@
/* cyrillic-ext */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/zYXgKVElMYYaJe8bpLHnCwDKhdzeFaxOedfTDw.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/zYXgKVElMYYaJe8bpLHnCwDKhdXeFaxOedfTDw.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/zYXgKVElMYYaJe8bpLHnCwDKhdLeFaxOedfTDw.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/zYXgKVElMYYaJe8bpLHnCwDKhd7eFaxOedfTDw.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/zYXgKVElMYYaJe8bpLHnCwDKhd_eFaxOedfTDw.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/zYXgKVElMYYaJe8bpLHnCwDKhdHeFaxOedc.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIxsdP3pBmtF8A.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIVsdP3pBmtF8A.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIJsdP3pBmtF8A.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/zYX9KVElMYYaJe8bpLHnCwDKjQ76AI5sdP3pBmtF8A.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/zYX9KVElMYYaJe8bpLHnCwDKjQ76AI9sdP3pBmtF8A.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIFsdP3pBms.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@ -0,0 +1,136 @@
/**
* placeholder-loading v0.5.0
* Author: Zalog (https://www.zalog.ro/)
* License: MIT
**/
.ph-item {
position: relative;
display: flex;
flex-wrap: wrap;
margin-bottom: 30px;
padding: 30px 15px 15px 15px;
overflow: hidden;
direction: ltr;
background-color: #fff;
border: 1px solid #e6e6e6;
border-radius: 2px;
}
.ph-item,
.ph-item *,
.ph-item ::after,
.ph-item ::before {
box-sizing: border-box;
}
.ph-item::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 50%;
z-index: 1;
width: 500%;
margin-left: -250%;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 54%) 50% 50%;
-webkit-animation: phAnimation 0.8s linear infinite;
animation: phAnimation 0.8s linear infinite;
content: " ";
pointer-events: none;
}
.ph-item > * {
display: flex;
flex: 1 1 auto;
flex-flow: column;
margin-bottom: 15px;
padding-right: 15px;
padding-left: 15px;
}
.ph-row {
display: flex;
flex-wrap: wrap;
margin-top: -7.5px;
}
.ph-row div {
height: 10px;
margin-top: 7.5px;
background-color: #ced4da;
}
.ph-row .big, .ph-row.big div {
height: 20px;
}
.ph-row .empty {
background-color: rgba(255, 255, 255, 0);
}
.ph-col-2 {
flex: 0 0 16.6666666667%;
}
.ph-col-4 {
flex: 0 0 33.3333333333%;
}
.ph-col-6 {
flex: 0 0 50%;
}
.ph-col-8 {
flex: 0 0 66.6666666667%;
}
.ph-col-10 {
flex: 0 0 83.3333333333%;
}
.ph-col-12 {
flex: 0 0 100%;
}
[class*=ph-col] {
direction: ltr;
}
[class*=ph-col] > * + .ph-row {
margin-top: 0;
}
[class*=ph-col] > * + * {
margin-top: 7.5px;
}
.ph-avatar {
position: relative;
width: 100%;
min-width: 60px;
overflow: hidden;
background-color: #ced4da;
border-radius: 50%;
}
.ph-avatar::before {
display: block;
padding-top: 100%;
content: " ";
}
.ph-picture {
width: 100%;
height: 120px;
background-color: #ced4da;
}
@-webkit-keyframes phAnimation {
0% {
transform: translate3d(-30%, 0, 0);
}
100% {
transform: translate3d(30%, 0, 0);
}
}
@keyframes phAnimation {
0% {
transform: translate3d(-30%, 0, 0);
}
100% {
transform: translate3d(30%, 0, 0);
}
}

@ -0,0 +1,49 @@
@import "lib/ibmplexsans";
body {
background: rgba(243,244,246,1);
font-family: 'IBM Plex Sans', sans-serif;
}
.primary {
color: #3B82F6;
}
.web-wrapper {
margin-bottom: 10rem;
}
.jumbotron {
border-radius: 18px;
}
.rounded-px {
border-radius: 18px;
}
.doc-body {
p:last-child {
margin-bottom: 0;
}
}
.sticky-top {
z-index: 2;
}
.container-fluid {
max-width: 1440px !important;
}
.text-lighter {
color: #94a3b8 !important;
}
.badge-primary {
background-color: #3B82F6;
}
.btn-primary.primary {
background-color: #3B82F6;
color: #fff !important;
}

@ -7,7 +7,7 @@
</div>
@endif
<profile profile-id="{{$profile->id}}" profile-username="{{$profile->username}}" :profile-settings="{{json_encode($settings)}}" profile-layout="{{$profile->profile_layout ?? 'metro'}}"></profile>
<profile profile-id="{{$profile->id}}" profile-username="{{$profile->username}}" :profile-settings="{{json_encode($settings)}}" profile-layout="metro"></profile>
@if($profile->website)
<a class="d-none" href="{{$profile->website}}" rel="me">{{$profile->website}}</a>
@endif

@ -7,7 +7,7 @@
</div>
</noscript>
<div class="mt-md-4"></div>
<post-component status-template="{{$status->viewType()}}" status-id="{{$status->id}}" status-username="{{$status->profile->username}}" status-url="{{$status->url()}}" status-profile-url="{{$status->profile->url()}}" status-avatar="{{$status->profile->avatarUrl()}}" status-profile-id="{{$status->profile_id}}" profile-layout="{{$status->profile->profile_layout ?? 'metro'}}"></post-component>
<post-component status-template="{{$status->viewType()}}" status-id="{{$status->id}}" status-username="{{$status->profile->username}}" status-url="{{$status->url()}}" status-profile-url="{{$status->profile->url()}}" status-avatar="{{$status->profile->avatarUrl()}}" status-profile-id="{{$status->profile_id}}" profile-layout="metro"></post-component>
@endsection

Loading…
Cancel
Save