Add Dark Mode to Metro UI 2.0

This commit is contained in:
Daniel Supernault 2022-04-03 00:53:53 -06:00
parent 9a7289198a
commit cb540373ec
No known key found for this signature in database
GPG Key ID: 0DEF1C662C9033F7
4 changed files with 486 additions and 200 deletions

View File

@ -1878,11 +1878,11 @@ export default {
}
a.list-group-item:hover {
text-decoration: none;
background-color: #f8f9fa !important;
background-color: #f8f9fa;
}
.compose-action:hover {
cursor: pointer;
background-color: #f8f9fa !important;
background-color: #f8f9fa;
}
.collections-list-group {
max-height: 500px;

View File

@ -21,8 +21,8 @@
:hash="status.media_attachments[0].blurhash"
:alt="altText(status)"/>
</div>
<div v-else class="w-100 h-100 p-0">
<carousel ref="carousel" :centerMode="true" :loop="false" :per-page="1" :paginationPosition="'bottom-overlay'" paginationActiveColor="#3897f0" paginationColor="#dbdbdb" class="p-0 m-0">
<div v-else class="w-100 h-100 p-0 album-wrapper">
<carousel ref="carousel" :centerMode="true" :loop="false" :per-page="1" :paginationPosition="'bottom-overlay'" paginationActiveColor="#3897f0" paginationColor="#dbdbdb" class="p-0 m-0" :id="'carousel-' + status.id">
<slide v-for="(img, index) in status.media_attachments" :key="'px-carousel-'+img.id + '-' + index" class="" style="background: #000; display: flex;align-items: center;" :title="img.description">
<img
@ -31,71 +31,67 @@
:src="img.url"
:alt="altText(img)"
loading="lazy"
:data-bp="img.url"
onerror="this.onerror=null;this.src='/storage/no-preview.png'">
<p v-if="!status.sensitive && sensitive"
@click="status.sensitive = true"
style="
margin-top: 0;
padding: 10px;
color: #fff;
font-size: 10px;
text-align: right;
position: absolute;
top: 0;
right: 0;
border-top-left-radius: 5px;
cursor: pointer;
background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
">
<i class="fas fa-eye-slash fa-lg"></i>
</p>
<p
v-if="status.media_attachments[0].license"
style="
margin-bottom: 0;
padding: 0 5px;
color: #fff;
font-size: 10px;
text-align: right;
position: absolute;
bottom: 0;
right: 0;
border-top-left-radius: 5px;
background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
">
<a :href="status.url" class="font-weight-bold text-light">Photo</a> by <a :href="status.account.url" class="font-weight-bold text-light">&commat;{{status.account.username}}</a> licensed under <a :href="status.media_attachments[0].license.url" class="font-weight-bold text-light">{{status.media_attachments[0].license.title}}</a>
</p>
</slide>
</carousel>
<div class="album-overlay">
<p v-if="!status.sensitive && sensitive"
@click="status.sensitive = true"
style="
margin-top: 0;
padding: 10px;
color: #fff;
font-size: 10px;
text-align: right;
position: absolute;
top: 0;
right: 0;
border-top-left-radius: 5px;
cursor: pointer;
background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
">
<i class="fas fa-eye-slash fa-lg"></i>
</p>
<p @click.prevent="toggleLightbox"
style="
margin-top: 0;
padding: 10px;
color: #fff;
font-size: 10px;
text-align: right;
position: absolute;
left: 0;
top: 0;
border-bottom-right-radius: 5px;
cursor: pointer;
background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
">
<i class="fas fa-expand fa-lg"></i>
</p>
<p
v-if="status.media_attachments[0].license"
style="
margin-bottom: 0;
padding: 0 5px;
color: #fff;
font-size: 10px;
text-align: right;
position: absolute;
bottom: 0;
right: 0;
border-top-left-radius: 5px;
background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
">
<a :href="status.url" class="font-weight-bold text-light">Photo</a> by <a :href="status.account.url" class="font-weight-bold text-light">&commat;{{status.account.username}}</a> licensed under <a :href="status.media_attachments[0].license.url" class="font-weight-bold text-light">{{status.media_attachments[0].license.title}}</a>
</p>
</div>
</div>
</template>
<style type="text/css" scoped>
.card-img-top {
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
}
.content-label-wrapper {
position: relative;
}
.content-label {
margin: 0;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
z-index: 2;
background: rgba(0, 0, 0, 0.2)
}
</style>
<script type="text/javascript">
import BigPicture from 'bigpicture';
@ -125,7 +121,9 @@
toggleLightbox(e) {
BigPicture({
el: e.target
el: e.target,
gallery: '#carousel-' + this.status.id,
position: this.$refs.carousel.currentPage
})
},
@ -161,3 +159,31 @@
}
}
</script>
<style type="text/css" scoped>
.card-img-top {
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
}
.content-label-wrapper {
position: relative;
}
.content-label {
margin: 0;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
z-index: 2;
background: rgba(0, 0, 0, 0.2)
}
.album-wrapper {
position: relative;
}
</style>

View File

@ -1,150 +1,170 @@
{
"common": {
"comment": "Comment",
"commented": "Commented",
"comments": "Comments",
"like": "Like",
"liked": "Liked",
"likes": "Likes",
"share": "Share",
"shared": "Shared",
"shares": "Shares",
"unshare": "Unshare",
"cancel": "Cancel",
"copyLink": "Copy Link",
"delete": "Delete",
"error": "Error",
"errorMsg": "Something went wrong. Please try again later.",
"oops": "Oops!",
"other": "Other",
"readMore": "Read more",
"success": "Success",
"sensitive": "Sensitive",
"sensitiveContent": "Sensitive Content",
"sensitiveContentWarning": "This post may contain sensitive content"
"comment": "\u041a\u043e\u043c\u0435\u043d\u0442\u0443\u0432\u0430\u0442\u0438",
"commented": "\u041f\u0440\u043e\u043a\u043e\u043c\u0435\u043d\u0442\u043e\u0432\u0430\u043d\u043e",
"comments": "\u041a\u043e\u043c\u0435\u043d\u0442\u0430\u0440\u0456",
"like": "\u0412\u043f\u043e\u0434\u043e\u0431\u0430\u0442\u0438",
"liked": "\u0412\u043f\u043e\u0434\u043e\u0431\u0430\u043d\u043e",
"likes": "\u0412\u043f\u043e\u0434\u043e\u0431\u0430\u043d\u043d\u044f",
"share": "\u041f\u043e\u0448\u0438\u0440\u0438\u0442\u0438",
"shared": "\u041f\u043e\u0448\u0438\u0440\u0435\u043d\u043e",
"shares": "\u041f\u043e\u0448\u0438\u0440\u0435\u043d\u043d\u044f",
"unshare": "\u041d\u0435 \u043f\u043e\u0448\u0438\u0440\u044e\u0432\u0430\u0442\u0438",
"bookmark": "\u0417\u0430\u043a\u043b\u0430\u0434\u043a\u0430",
"cancel": "\u0421\u043a\u0430\u0441\u0443\u0432\u0430\u0442\u0438",
"copyLink": "\u041a\u043e\u043f\u0456\u044e\u0432\u0430\u0442\u0438 \u043f\u043e\u0441\u0438\u043b\u0430\u043d\u043d\u044f",
"delete": "\u0412\u0438\u0434\u0430\u043b\u0438\u0442\u0438",
"error": "\u041f\u043e\u043c\u0438\u043b\u043a\u0430",
"errorMsg": "\u0429\u043e\u0441\u044c \u043f\u0456\u0448\u043b\u043e \u043d\u0435 \u0442\u0430\u043a. \u041f\u043e\u0432\u0442\u043e\u0440\u0456\u0442\u044c \u0441\u043f\u0440\u043e\u0431\u0443 \u0437\u0433\u043e\u0434\u043e\u043c",
"oops": "\u0419\u043e\u0439!",
"other": "\u0406\u043d\u0448\u0435",
"readMore": "\u0414\u043e\u043a\u043b\u0430\u0434\u043d\u0456\u0448\u0435",
"success": "\u0423\u0441\u043f\u0456\u0445",
"proceed": "\u041f\u0440\u043e\u0434\u043e\u0432\u0436\u0438\u0442\u0438",
"next": "\u0414\u0430\u043b\u0456",
"close": "\u0417\u0430\u043a\u0440\u0438\u0442\u0438",
"clickHere": "\u043d\u0430\u0442\u0438\u0441\u043d\u0456\u0442\u044c \u0442\u0443\u0442",
"sensitive": "\u0427\u0443\u0442\u043b\u0438\u0432\u0435",
"sensitiveContent": "\u0427\u0443\u0442\u043b\u0438\u0432\u0438\u0439 \u0432\u043c\u0456\u0441\u0442",
"sensitiveContentWarning": "\u0426\u0435\u0439 \u0434\u043e\u043f\u0438\u0441 \u043c\u043e\u0436\u0435 \u043c\u0456\u0441\u0442\u0438\u0442\u0438 \u0447\u0443\u0442\u043b\u0438\u0432\u0438\u0439 \u0432\u043c\u0456\u0441\u0442"
},
"site": {
"terms": "Terms of Use",
"privacy": "Privacy Policy"
"terms": "\u0423\u043c\u043e\u0432\u0438 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f",
"privacy": "\u041f\u043e\u043b\u0456\u0442\u0438\u043a\u0430 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0441\u0442\u0456"
},
"navmenu": {
"search": "Search",
"admin": "Admin Dashboard",
"homeFeed": "Home Feed",
"localFeed": "Local Feed",
"globalFeed": "Global Feed",
"discover": "Discover",
"directMessages": "Direct Messages",
"notifications": "Notifications",
"groups": "Groups",
"stories": "Stories",
"profile": "Profile",
"drive": "Drive",
"settings": "Settings",
"compose": "Create New",
"logout": "Logout",
"about": "About",
"help": "Help",
"language": "Language",
"privacy": "Privacy",
"terms": "Terms",
"backToPreviousDesign": "Go back to previous design"
"search": "\u041f\u043e\u0448\u0443\u043a",
"admin": "\u0410\u0434\u043c\u0456\u043d\u043f\u0430\u043d\u0435\u043b\u044c",
"homeFeed": "\u0414\u043e\u043c\u0430\u0448\u043d\u044f \u0441\u0442\u0440\u0456\u0447\u043a\u0430",
"localFeed": "\u041c\u0456\u0441\u0446\u0435\u0432\u0430 \u0441\u0442\u0440\u0456\u0447\u043a\u0430",
"globalFeed": "\u0421\u0432\u0456\u0442\u043e\u0432\u0430 \u0441\u0442\u0440\u0456\u0447\u043a\u0430",
"discover": "\u0426\u0456\u043a\u0430\u0432\u0435",
"directMessages": "\u041f\u0440\u044f\u043c\u0456 \u043b\u0438\u0441\u0442\u0438",
"notifications": "\u0421\u043f\u043e\u0432\u0456\u0449\u0435\u043d\u043d\u044f",
"groups": "\u0413\u0440\u0443\u043f\u0438",
"stories": "\u0421\u0442\u043e\u0440\u0456",
"profile": "\u041f\u0440\u043e\u0444\u0456\u043b\u044c",
"drive": "\u0421\u0445\u043e\u0432\u0438\u0449\u0435",
"settings": "\u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438",
"compose": "\u0421\u0442\u0432\u043e\u0440\u0438\u0442\u0438",
"logout": "\u0412\u0438\u0439\u0442\u0438",
"about": "\u041f\u0440\u043e \u0437\u0430\u0441\u0442\u043e\u0441\u0443\u043d\u043e\u043a",
"help": "\u0414\u043e\u0432\u0456\u0434\u043a\u0430",
"language": "\u041c\u043e\u0432\u0430",
"privacy": "\u041f\u0440\u0438\u0432\u0430\u0442\u043d\u0456\u0441\u0442\u044c",
"terms": "\u0423\u043c\u043e\u0432\u0438",
"backToPreviousDesign": "\u041f\u043e\u0432\u0435\u0440\u043d\u0443\u0442\u0438 \u043c\u0438\u043d\u0443\u043b\u0438\u0439 \u0434\u0438\u0437\u0430\u0439\u043d"
},
"directMessages": {
"inbox": "Inbox",
"sent": "Sent",
"requests": "Requests"
"inbox": "\u0412\u0445\u0456\u0434\u043d\u0456",
"sent": "\u041d\u0430\u0434\u0456\u0441\u043b\u0430\u043d\u0456",
"requests": "\u0417\u0430\u043f\u0438\u0442\u0438"
},
"notifications": {
"liked": "liked your",
"commented": "commented on your",
"reacted": "reacted to your",
"shared": "shared your",
"tagged": "tagged you in a",
"updatedA": "updated a",
"sentA": "sent a",
"followed": "followed",
"mentioned": "mentioned",
"you": "you",
"yourApplication": "Your application to join",
"applicationApproved": "was approved!",
"applicationRejected": "was rejected. You can re-apply to join in 6 months.",
"dm": "dm",
"groupPost": "group post",
"modlog": "modlog",
"post": "post",
"story": "story"
"liked": "\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0443\u043f\u043e\u0434\u043e\u0431\u0430\u043d\u043d\u044f \u043f\u0456\u0434 \u0432\u0430\u0448",
"commented": "\u043a\u043e\u043c\u0435\u043d\u0442\u0443\u0454 \u0432\u0430\u0448",
"reacted": "\u0440\u0435\u0430\u0433\u0443\u0454 \u043d\u0430 \u0432\u0430\u0448",
"shared": "\u043f\u043e\u0448\u0438\u0440\u044e\u0454 \u0432\u0430\u0448",
"tagged": "\u043f\u043e\u0437\u043d\u0430\u0447\u0430\u0454 \u0432\u0430\u0441 \u0447\u0435\u0440\u0435\u0437",
"updatedA": "\u043e\u043d\u043e\u0432\u043b\u044e\u0454",
"sentA": "\u043d\u0430\u0434\u0441\u0438\u043b\u0430\u0454",
"followed": "\u0432\u0456\u0434\u0441\u0442\u0435\u0436\u0443\u0454",
"mentioned": "\u0437\u0433\u0430\u0434\u0443\u0454",
"you": "\u0432\u0430\u0441",
"yourApplication": "\u0412\u0430\u0448\u0443 \u0440\u0435\u0454\u0441\u0442\u0440\u0430\u0446\u0456\u0439\u043d\u0443 \u0437\u0430\u044f\u0432\u043a\u0443",
"applicationApproved": "\u043f\u0456\u0434\u0442\u0432\u0435\u0440\u0434\u0436\u0435\u043d\u043e!",
"applicationRejected": "\u0432\u0456\u0434\u0445\u0438\u043b\u0435\u043d\u043e. \u041c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u0438\u0442\u0438 \u0441\u043f\u0440\u043e\u0431\u0443 \u0447\u0435\u0440\u0435\u0437 6 \u043c\u0456\u0441\u044f\u0446\u0456\u0432.",
"dm": "\u043b\u0438\u0441\u0442",
"groupPost": "\u0434\u043e\u043f\u0438\u0441 \u0443 \u0433\u0440\u0443\u043f\u0456",
"modlog": "\u043c\u043e\u0434\u0436\u0443\u0440\u043d\u0430\u043b",
"post": "\u0434\u043e\u043f\u0438\u0441",
"story": "\u0441\u0442\u043e\u0440\u0456",
"noneFound": "\u0421\u043f\u043e\u0432\u0456\u0449\u0435\u043d\u044c \u043d\u0435 \u0437\u043d\u0430\u0439\u0434\u0435\u043d\u043e"
},
"post": {
"shareToFollowers": "Share to followers",
"shareToOther": "Share to other",
"noLikes": "No likes yet",
"uploading": "Uploading"
"shareToFollowers": "\u041f\u043e\u0448\u0438\u0440\u0438\u0442\u0438 \u0430\u0432\u0434\u0438\u0442\u043e\u0440\u0456\u0457",
"shareToOther": "\u041f\u043e\u0448\u0438\u0440\u0438\u0442\u0438 \u0456\u043d\u0448\u0438\u043c",
"noLikes": "\u0412\u043f\u043e\u0434\u043e\u0431\u0430\u043d\u044c \u043f\u043e\u043a\u0438 \u043d\u0435\u043c\u0430",
"uploading": "\u0412\u0438\u0432\u0430\u043d\u0442\u0430\u0436\u0435\u043d\u043d\u044f"
},
"profile": {
"posts": "Posts",
"followers": "Followers",
"following": "Following",
"admin": "Admin",
"collections": "Collections",
"follow": "Follow",
"unfollow": "Unfollow",
"editProfile": "Edit Profile",
"followRequested": "Follow Requested",
"joined": "Joined",
"emptyCollections": "We can't seem to find any collections",
"emptyPosts": "We can't seem to find any posts"
"posts": "\u0414\u043e\u043f\u0438\u0441\u0438",
"followers": "\u0410\u0432\u0434\u0438\u0442\u043e\u0440\u0456\u044f",
"following": "\u041f\u0456\u0434\u043f\u0438\u0441\u043a\u0438",
"admin": "\u0410\u0434\u043c\u0456\u043d\u0456\u0441\u0442\u0440\u0430\u0446\u0456\u044f",
"collections": "\u0417\u0431\u0456\u0440\u043a\u0438",
"follow": "\u0421\u0442\u0435\u0436\u0438\u0442\u0438",
"unfollow": "\u041d\u0435 \u0441\u0442\u0435\u0436\u0438\u0442\u0438",
"editProfile": "\u0420\u0435\u0434\u0430\u0433\u0443\u0432\u0430\u0442\u0438 \u043f\u0440\u043e\u0444\u0456\u043b\u044c",
"followRequested": "\u0417\u0430\u043f\u0438\u0442 \u043d\u0430 \u0441\u0442\u0435\u0436\u0435\u043d\u043d\u044f",
"joined": "\u0414\u043e\u043b\u0443\u0447\u0430\u0454\u0442\u044c\u0441\u044f",
"emptyCollections": "\u0417\u0431\u0456\u0440\u043e\u043a \u0443 \u0432\u0430\u0441 \u043f\u043e\u043a\u0438 \u043d\u0435\u043c\u0430",
"emptyPosts": "\u0414\u043e\u043f\u0438\u0441\u0456\u0432 \u0443 \u0432\u0430\u0441 \u043f\u043e\u043a\u0438 \u043d\u0435\u043c\u0430"
},
"menu": {
"viewPost": "View Post",
"viewProfile": "View Profile",
"moderationTools": "Moderation Tools",
"report": "Report",
"archive": "Archive",
"unarchive": "Unarchive",
"embed": "Embed",
"selectOneOption": "Select one of the following options",
"unlistFromTimelines": "Unlist from Timelines",
"addCW": "Add Content Warning",
"removeCW": "Remove Content Warning",
"markAsSpammer": "Mark as Spammer",
"markAsSpammerText": "Unlist + CW existing and future posts",
"spam": "Spam",
"sensitive": "Sensitive Content",
"abusive": "Abusive or Harmful",
"underageAccount": "Underage Account",
"copyrightInfringement": "Copyright Infringement",
"impersonation": "Impersonation",
"scamOrFraud": "Scam or Fraud",
"confirmReport": "Confirm Report",
"confirmReportText": "Are you sure you want to report this post?",
"reportSent": "Report Sent!",
"reportSentText": "We have successfully received your report.",
"reportSentError": "There was an issue reporting this post.",
"modAddCWConfirm": "Are you sure you want to add a content warning to this post?",
"modCWSuccess": "Successfully added content warning",
"modRemoveCWConfirm": "Are you sure you want to remove the content warning on this post?",
"modRemoveCWSuccess": "Successfully removed content warning",
"modUnlistConfirm": "Are you sure you want to unlist this post?",
"modUnlistSuccess": "Successfully unlisted post",
"modMarkAsSpammerConfirm": "Are you sure you want to mark this user as a spammer? All existing and future posts will be unlisted on timelines and a content warning will be applied.",
"modMarkAsSpammerSuccess": "Successfully marked account as spammer",
"toFollowers": "to Followers",
"showCaption": "Show Caption",
"showLikes": "Show Likes",
"compactMode": "Compact Mode",
"embedConfirmText": "By using this embed, you agree to our",
"deletePostConfirm": "Are you sure you want to delete this post?",
"archivePostConfirm": "Are you sure you want to archive this post?",
"unarchivePostConfirm": "Are you sure you want to unarchive this post?"
"viewPost": "\u041f\u0435\u0440\u0435\u0433\u043b\u044f\u043d\u0443\u0442\u0438 \u0434\u043e\u043f\u0438\u0441",
"viewProfile": "\u041f\u0435\u0440\u0435\u0433\u043b\u044f\u043d\u0443\u0442\u0438 \u043f\u0440\u043e\u0444\u0456\u043b\u044c",
"moderationTools": "\u0417\u0430\u0441\u043e\u0431\u0438 \u043c\u043e\u0434\u0435\u0440\u0443\u0432\u0430\u043d\u043d\u044f",
"report": "\u0421\u043a\u0430\u0440\u0433\u0430",
"archive": "\u0410\u0440\u0445\u0456\u0432\u0443\u0432\u0430\u0442\u0438",
"unarchive": "\u0420\u043e\u0437\u0430\u0440\u0445\u0456\u0432\u0443\u0432\u0430\u0442\u0438",
"embed": "\u0415\u043a\u0441\u043f\u043e\u0440\u0442",
"selectOneOption": "\u041e\u0431\u0435\u0440\u0456\u0442\u044c \u043e\u0434\u0438\u043d \u0456\u0437 \u043d\u0430\u0441\u0442\u0443\u043f\u043d\u0438\u0445 \u0432\u0430\u0440\u0456\u0430\u043d\u0442\u0456\u0432",
"unlistFromTimelines": "\u0421\u0445\u043e\u0432\u0430\u0442\u0438 \u0437\u0456 \u0441\u0442\u0440\u0456\u0447\u043e\u043a",
"addCW": "\u0417\u0430\u0441\u0442\u0435\u0440\u0435\u0433\u0442\u0438 \u043f\u0440\u043e \u0432\u043c\u0456\u0441\u0442",
"removeCW": "\u0412\u0438\u043b\u0443\u0447\u0438\u0442\u0438 \u0437\u0430\u0441\u0442\u0435\u0440\u0435\u0436\u0435\u043d\u043d\u044f",
"markAsSpammer": "\u041f\u043e\u0437\u043d\u0430\u0447\u0438\u0442\u0438 \u044f\u043a \u0441\u043f\u0430\u043c",
"markAsSpammerText": "\u0421\u0445\u043e\u0432\u0430\u0442\u0438 \u0446\u0435\u0439 \u0456 \u043c\u0430\u0439\u0431\u0443\u0442\u043d\u0456 \u0434\u043e\u043f\u0438\u0441\u0438, \u0434\u043e\u0434\u0430\u044e\u0447\u0438 \u0437\u0430\u0441\u0442\u0435\u0440\u0435\u0436\u0435\u043d\u043d\u044f",
"spam": "\u0421\u043f\u0430\u043c",
"sensitive": "\u0427\u0443\u0442\u043b\u0438\u0432\u0438\u0439 \u0432\u043c\u0456\u0441\u0442",
"abusive": "\u041e\u0431\u0440\u0430\u0436\u0430\u0454 \u0447\u0438 \u0448\u043a\u043e\u0434\u0438\u0442\u044c",
"underageAccount": "\u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043d\u0456\u0439 \u0432\u0456\u043a",
"copyrightInfringement": "\u041f\u043e\u0440\u0443\u0448\u0443\u0454 \u0430\u0432\u0442\u043e\u0440\u0441\u044c\u043a\u0456 \u043f\u0440\u0430\u0432\u0430",
"impersonation": "\u0412\u0434\u0430\u0454 \u043a\u043e\u0433\u043e\u0441\u044c",
"scamOrFraud": "\u0428\u0430\u0445\u0440\u0430\u0439\u0441\u0442\u0432\u043e",
"confirmReport": "\u041f\u0456\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u0438 \u0441\u043a\u0430\u0440\u0433\u0443",
"confirmReportText": "\u0422\u043e\u0447\u043d\u043e \u043f\u043e\u0441\u043a\u0430\u0440\u0436\u0438\u0442\u0438\u0441\u044c \u043d\u0430 \u0434\u043e\u043f\u0438\u0441?",
"reportSent": "\u0421\u043a\u0430\u0440\u0433\u0443 \u043d\u0430\u0434\u0456\u0441\u043b\u0430\u043d\u043e!",
"reportSentText": "\u041c\u0438 \u0443\u0441\u043f\u0456\u0448\u043d\u043e \u043e\u0442\u0440\u0438\u043c\u0430\u043b\u0438 \u0432\u0430\u0448\u0443 \u0441\u043a\u0430\u0440\u0433\u0443.",
"reportSentError": "\u0412\u0438\u043d\u0438\u043a\u043b\u0430 \u043f\u043e\u043c\u0438\u043b\u043a\u0430 \u043f\u0440\u0438 \u043d\u0430\u0434\u0441\u0438\u043b\u0430\u043d\u043d\u0456 \u0441\u043a\u0430\u0440\u0433\u0438.",
"modAddCWConfirm": "\u0422\u043e\u0447\u043d\u043e \u0434\u043e\u0434\u0430\u0442\u0438 \u0437\u0430\u0441\u0442\u0435\u0440\u0435\u0436\u0435\u043d\u043d\u044f \u043f\u0440\u043e \u0432\u043c\u0456\u0441\u0442 \u0446\u044c\u043e\u043c\u0443 \u0434\u043e\u043f\u0438\u0441\u0443?",
"modCWSuccess": "\u0417\u0430\u0441\u0442\u0435\u0440\u0435\u0436\u0435\u043d\u043d\u044f \u043f\u0440\u043e \u0432\u043c\u0456\u0441\u0442 \u0443\u0441\u043f\u0456\u0448\u043d\u043e \u0434\u043e\u0434\u0430\u043d\u043e",
"modRemoveCWConfirm": "\u0422\u043e\u0447\u043d\u043e \u0432\u0438\u043b\u0443\u0447\u0438\u0442\u0438 \u0437\u0430\u0441\u0442\u0435\u0440\u0435\u0436\u0435\u043d\u043d\u044f \u043f\u0440\u043e \u0432\u043c\u0456\u0441\u0442 \u0456\u0437 \u0446\u044c\u043e\u0433\u043e \u0434\u043e\u043f\u0438\u0441\u0443?",
"modRemoveCWSuccess": "\u0417\u0430\u0441\u0442\u0435\u0440\u0435\u0436\u0435\u043d\u043d\u044f \u043f\u0440\u043e \u0432\u043c\u0456\u0441\u0442 \u0443\u0441\u043f\u0456\u0448\u043d\u043e \u0432\u0438\u043b\u0443\u0447\u0435\u043d\u043e",
"modUnlistConfirm": "\u0422\u043e\u0447\u043d\u043e \u0441\u0445\u043e\u0432\u0430\u0442\u0438 \u0446\u0435\u0439 \u0434\u043e\u043f\u0438\u0441?",
"modUnlistSuccess": "\u0414\u043e\u043f\u0438\u0441 \u0443\u0441\u043f\u0456\u0448\u043d\u043e \u0441\u0445\u043e\u0432\u0430\u043d\u043e",
"modMarkAsSpammerConfirm": "\u0422\u043e\u0447\u043d\u043e \u043f\u043e\u0437\u043d\u0430\u0447\u0438\u0442\u0438 \u0446\u0435\u0439 \u043e\u0431\u043b\u0456\u043a\u043e\u0432\u0438\u0439 \u0437\u0430\u043f\u0438\u0441 \u044f\u043a \u0441\u043f\u0430\u043c? \u0423\u0441\u0456 \u043d\u0430\u044f\u0432\u043d\u0456 \u0439 \u043c\u0430\u0439\u0431\u0443\u0442\u043d\u0456 \u0434\u043e\u043f\u0438\u0441\u0438 \u0431\u0443\u0434\u0435 \u0441\u0445\u043e\u0432\u0430\u043d\u043e \u0437\u0456 \u0441\u0442\u0440\u0456\u0447\u043e\u043a, \u0456 \u0457\u043c \u0431\u0443\u0434\u0435 \u0434\u043e\u0434\u0430\u043d\u043e \u0437\u0430\u0441\u0442\u0435\u0440\u0435\u0436\u0435\u043d\u043d\u044f \u043f\u0440\u043e \u0432\u043c\u0456\u0441\u0442.",
"modMarkAsSpammerSuccess": "\u041e\u0431\u043b\u0456\u043a\u043e\u0432\u0438\u0439 \u0437\u0430\u043f\u0438\u0441 \u0443\u0441\u043f\u0456\u0448\u043d\u043e \u043f\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u043e \u044f\u043a \u0441\u043f\u0430\u043c",
"toFollowers": "\u0434\u043e \u0430\u0432\u0434\u0438\u0442\u043e\u0440\u0456\u0457",
"showCaption": "\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u0438 \u043f\u0456\u0434\u043f\u0438\u0441",
"showLikes": "\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u0438 \u0432\u043f\u043e\u0434\u043e\u0431\u0430\u043d\u043d\u044f",
"compactMode": "\u041a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u0438\u0439 \u0440\u0435\u0436\u0438\u043c",
"embedConfirmText": "\u0415\u043a\u0441\u043f\u043e\u0440\u0442\u0443\u044e\u0447\u0438 \u043a\u0443\u0434\u0438\u0441\u044c \u0434\u043e\u043f\u0438\u0441, \u0432\u0438 \u043f\u043e\u0433\u043e\u0434\u0436\u0443\u0454\u0442\u0435 \u043d\u0430\u0448\u0456",
"deletePostConfirm": "\u0422\u043e\u0447\u043d\u043e \u0432\u0438\u0434\u0430\u043b\u0438\u0442\u0438 \u0434\u043e\u043f\u0438\u0441?",
"archivePostConfirm": "\u0422\u043e\u0447\u043d\u043e \u0430\u0440\u0445\u0456\u0432\u0443\u0432\u0430\u0442\u0438 \u0434\u043e\u043f\u0438\u0441?",
"unarchivePostConfirm": "\u0422\u043e\u0447\u043d\u043e \u0440\u043e\u0437\u0430\u0440\u0445\u0456\u0432\u0443\u0432\u0430\u0442\u0438 \u0434\u043e\u043f\u0438\u0441?"
},
"story": {
"add": "Add Story"
"add": "\u0414\u043e\u0434\u0430\u0442\u0438 \u0441\u0442\u043e\u0440\u0456"
},
"timeline": {
"peopleYouMayKnow": "People you may know"
"peopleYouMayKnow": "\u0419\u043c\u043e\u0432\u0456\u0440\u043d\u0456 \u0437\u043d\u0430\u0439\u043e\u043c\u0456",
"onboarding": {
"welcome": "\u0412\u0456\u0442\u0430\u0454\u043c\u043e",
"thisIsYourHomeFeed": "\u0426\u0435 \u0432\u0430\u0448\u0430 \u0434\u043e\u043c\u0430\u0448\u043d\u044f \u0441\u0442\u0440\u0456\u0447\u043a\u0430 \u2014 \u0442\u0443\u0442 \u0431\u0443\u0434\u0443\u0442\u044c \u0434\u043e\u043f\u0438\u0441\u0438 \u0432\u0456\u0434 \u043e\u0431\u043b\u0456\u043a\u043e\u0432\u0438\u0445 \u0437\u0430\u043f\u0438\u0441\u0456\u0432, \u0437\u0430 \u044f\u043a\u0438\u043c\u0438 \u0432\u0438 \u0441\u0442\u0435\u0436\u0438\u0442\u0435, \u0432 \u043f\u043e\u0440\u044f\u0434\u043a\u0443 \u0434\u043e\u0434\u0430\u043d\u043d\u044f.",
"letUsHelpYouFind": "\u041c\u043e\u0436\u0435\u043c\u043e \u0434\u043e\u043f\u043e\u043c\u043e\u0433\u0442\u0438 \u0432\u0430\u043c \u0437\u043d\u0430\u0439\u0442\u0438 \u0446\u0456\u043a\u0430\u0432\u0438\u0445 \u043b\u044e\u0434\u0435\u0439, \u0437\u0430 \u044f\u043a\u0438\u043c\u0438 \u0432\u0430\u0440\u0442\u043e \u0441\u0442\u0435\u0436\u0438\u0442\u0438",
"refreshFeed": "\u041e\u043d\u043e\u0432\u0438\u0442\u0438 \u043c\u043e\u044e \u0441\u0442\u0440\u0456\u0447\u043a\u0443"
}
},
"hashtags": {
"emptyFeed": "We can't seem to find any posts for this hashtag"
"emptyFeed": "\u0414\u043e\u043f\u0438\u0441\u0456\u0432 \u0456\u0437 \u0446\u0438\u043c \u0445\u0435\u0448\u0442\u0435\u0433\u043e\u043c \u043f\u043e\u043a\u0438 \u043d\u0435\u043c\u0430"
},
"report": {
"report": "\u0421\u043a\u0430\u0440\u0433\u0430",
"selectReason": "\u041e\u0431\u0435\u0440\u0456\u0442\u044c \u043f\u0456\u0434\u0441\u0442\u0430\u0432\u0443",
"reported": "\u0421\u043a\u0430\u0440\u0433\u0443 \u043d\u0430\u0434\u0456\u0441\u043b\u0430\u043d\u043e",
"sendingReport": "\u041d\u0430\u0434\u0441\u0438\u043b\u0430\u043d\u043d\u044f \u0441\u043a\u0430\u0440\u0433\u0438",
"thanksMsg": "\u0414\u044f\u043a\u0443\u0454\u043c\u043e \u0437\u0430 \u0441\u043a\u0430\u0440\u0433\u0443: \u0432\u0438 \u0434\u043e\u043f\u043e\u043c\u0430\u0433\u0430\u0454\u0442\u0435 \u0432\u0431\u0435\u0437\u043f\u0435\u0447\u0438\u0442\u0438 \u043d\u0430\u0448\u0443 \u0441\u043f\u0456\u043b\u044c\u043d\u043e\u0442\u0443!",
"contactAdminMsg": "\u042f\u043a\u0449\u043e \u0431\u0430\u0436\u0430\u0454\u0442\u0435 \u0441\u043a\u043e\u043d\u0442\u0430\u043a\u0442\u0443\u0432\u0430\u0442\u0438 \u0437 \u0430\u0434\u043c\u0456\u043d\u0456\u0441\u0442\u0440\u0430\u0446\u0456\u0454\u044e \u043f\u0440\u043e \u0446\u0435\u0439 \u0434\u043e\u043f\u0438\u0441 \u0447\u0438 \u0441\u043a\u0430\u0440\u0433\u0443"
}
}

View File

@ -1,18 +1,123 @@
@import "lib/ibmplexsans";
body {
background: rgba(243,244,246,1);
font-family: 'IBM Plex Sans', sans-serif;
:root {
--light: #fff;
--dark: #000;
--body-bg: rgba(243,244,246,1);
--body-color: #212529;
--nav-bg: #fff;
--bg-light: #f8f9fa;
--primary: #3B82F6;
--light-gray: #f8f9fa;
--text-lighter: #94a3b8;
--card-bg: #fff;
--light-hover-bg: #f9fafb;
--btn-light-border: #fff;
--input-border: #e2e8f0;
--comment-bg: #eff2f5;
--border-color: #dee2e6;
--card-header-accent: #f9fafb;
--dropdown-item-hover-bg: #e9ecef;
--dropdown-item-hover-color: #16181b;
--dropdown-item-color: #64748b;
--dropdown-item-active-color: #334155;
}
.primary {
color: #3B82F6;
@media (prefers-color-scheme: dark) {
:root {
--light: #000;
--dark: #fff;
--body-bg: #000;
--body-color: #818181;
--nav-bg: #000;
--bg-light: #212124;
--light-gray: #212124;
--text-lighter: #818181;
--card-bg: #161618;
--light-hover-bg: #212124;
--btn-light-border: #161618;
--input-border: #161618;
--comment-bg: #212124;
--border-color: #212124;
--card-header-accent: #212124;
--dropdown-item-hover-bg: #000;
--dropdown-item-hover-color: #818181;
--dropdown-item-color: #64748b;
--dropdown-item-active-color: #fff;
}
}
.force-light-mode {
--light: #fff;
--dark: #000;
--body-bg: rgba(243,244,246,1);
--body-color: #212529;
--nav-bg: #fff;
--bg-light: #f8f9fa;
--primary: #3B82F6;
--light-gray: #f8f9fa;
--text-lighter: #94a3b8;
--card-bg: #fff;
--light-hover-bg: #f9fafb;
--btn-light-border: #fff;
--input-border: #e2e8f0;
--comment-bg: #eff2f5;
--border-color: #dee2e6;
--card-header-accent: #f9fafb;
--dropdown-item-hover-bg: #e9ecef;
--dropdown-item-hover-color: #16181b;
--dropdown-item-color: #64748b;
--dropdown-item-active-color: #334155;
}
.force-dark-mode {
--light: #000;
--dark: #fff;
--body-bg: #000;
--body-color: #818181;
--nav-bg: #000;
--bg-light: #212124;
--light-gray: #212124;
--text-lighter: #818181;
--card-bg: #161618;
--light-hover-bg: #212124;
--btn-light-border: #161618;
--input-border: #161618;
--comment-bg: #212124;
--border-color: #212124;
--card-header-accent: #212124;
--dropdown-item-hover-bg: #000;
--dropdown-item-hover-color: #818181;
--dropdown-item-color: #64748b;
--dropdown-item-active-color: #b3b3b3;
}
body {
background: var(--body-bg);
font-family: 'IBM Plex Sans', sans-serif;
color: var(--body-color);
}
.web-wrapper {
margin-bottom: 10rem;
}
.container-fluid {
max-width: 1440px !important;
}
.jumbotron {
border-radius: 18px;
}
@ -27,23 +132,158 @@ body {
}
}
.navbar-laravel {
background-color: var(--nav-bg);
}
.sticky-top {
z-index: 2;
}
.container-fluid {
max-width: 1440px !important;
.navbar-light .navbar-brand {
color: var(--dark);
}
.primary {
color: var(--primary);
}
.text-lighter {
color: #94a3b8 !important;
color: var(--text-lighter) !important;
}
.text-dark {
color: var(--body-color) !important;
&:hover {
color: var(--dark) !important;
}
}
a.text-dark:hover {
color: var(--dark) !important;
}
.badge-primary {
background-color: #3B82F6;
background-color: var(--primary);
}
.btn-primary.primary {
background-color: #3B82F6;
.btn-primary {
background-color: var(--primary);
color: #fff !important;
}
.btn-outline-light {
border-color: var(--light-gray);
}
.border {
border: 1px solid var(--border-color) !important;
}
.bg-white,
.bg-light {
background-color: var(--bg-light) !important;
border-color: var(--bg-light) !important;
}
.btn-light {
background-color: var(--light-gray);
border-color: var(--btn-light-border);
color: var(--body-color);
&:hover {
color: var(--body-color);
background-color: var(--card-bg);
border-color: var(--btn-light-border);
}
}
.autocomplete-input {
border: 1px solid var(--light-gray) !important;
color: var(--body-color);
}
.autocomplete-result-list {
background: var(--light) !important;
}
.dropdown-menu,
span.twitter-typeahead .tt-menu,
.form-control {
border: 1px solid var(--border-color) !important;
color: var(--body-color);
background-color: var(--card-bg);
}
.tribute-container li,
.dropdown-item,
span.twitter-typeahead .tt-suggestion {
color: var(--body-color);
}
.dropdown-item:hover,
span.twitter-typeahead .tt-suggestion:hover,
.dropdown-item:focus,
span.twitter-typeahead .tt-suggestion:focus {
color: var(--dropdown-item-hover-color);
background-color: var(--dropdown-item-hover-bg);
text-decoration: none;
}
.popover,
.modal-content,
.form-control:focus,
.tribute-container ul,
.list-group-item,
.card,
.card-header,
.card-footer,
.ph-item {
background-color: var(--card-bg);
}
.badge-light,
.breadcrumb,
.ph-avatar,
.ph-picture,
.ph-row div {
background-color: var(--light-gray);
}
.card-header,
.border-top,
.border-bottom {
border-color: var(--border-color) !important;
}
.modal-header {
border-color: var(--border-color);
}
.compose-action:hover {
background-color: var(--light-gray) !important;
}
.dropdown-divider {
border-color: var(--dropdown-item-hover-bg);
}
.metro-nav {
&.flex-column {
background-color: var(--card-bg);
.nav-item {
.nav-link:hover {
background-color: var(--light-hover-bg);
}
}
}
}
.child-reply-form {
.form-control {
border-color: var(--input-border);
color: var(--body-color);
}
}